projects / sdk / online-doc.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 3cc75b4)
Change  , ", and ' to space, double quotation mark, and single quotatio... 31/127231/2
authorYoung-Ae Kang <youngae.kang@samsung.com>
Wed, 26 Apr 2017 12:57:18 +0000 (21:57 +0900)
committerYoung-Ae Kang <youngae.kang@samsung.com>
Wed, 26 Apr 2017 13:34:21 +0000 (22:34 +0900)
Remove whitespaces

Change-Id: I0f6d95d60b78537cf92f681111f417e4f0496b2b

643 files changed:
org.tizen.guides/html/cover_page.htm patch | blob | history
org.tizen.guides/html/native/alarm/alarm_cover_n.htm patch | blob | history
org.tizen.guides/html/native/alarm/alarms_n.htm patch | blob | history
org.tizen.guides/html/native/alarm/trigger_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/app_communication_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/app_controls_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/app_icons_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/app_management_cover_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/app_manager_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/app_preferences_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/app_resources_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/applications_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/common_appcontrol_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/dali_app_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/dali_basic_app_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/dali_watch_app_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/data_bundles_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/data_control_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/efl_app_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/efl_ui_app_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/event_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/message_port_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/package_manager_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/service_app_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/ui_app_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/watch_app_n.htm patch | blob | history
org.tizen.guides/html/native/app_management/widget_app_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/bluetooth_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/connection_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/curl_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/d2d_connectivity_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/download_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/http_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/internet_download_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/iotcon_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/mtp_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/nfc_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/nsd_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/plugins_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/smartcard_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/telephony_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/usb_host_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/vpn_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/web_view_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/wifi_direct_n.htm patch | blob | history
org.tizen.guides/html/native/connectivity/wifi_n.htm patch | blob | history
org.tizen.guides/html/native/data/data_cover_n.htm patch | blob | history
org.tizen.guides/html/native/data/data_storages_n.htm patch | blob | history
org.tizen.guides/html/native/data/sql_n.htm patch | blob | history
org.tizen.guides/html/native/device/attached_devices_n.htm patch | blob | history
org.tizen.guides/html/native/device/device_cover_n.htm patch | blob | history
org.tizen.guides/html/native/device/ext_output_n.htm patch | blob | history
org.tizen.guides/html/native/device/feedback_n.htm patch | blob | history
org.tizen.guides/html/native/device/runtime_n.htm patch | blob | history
org.tizen.guides/html/native/device/settings_n.htm patch | blob | history
org.tizen.guides/html/native/device/system_n.htm patch | blob | history
org.tizen.guides/html/native/error/error_cover_n.htm patch | blob | history
org.tizen.guides/html/native/error/error_handling_n.htm patch | blob | history
org.tizen.guides/html/native/error/system_logs_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/adv_performance_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/adv_rendering_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/assembly_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/cairo_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/creating_opengles_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/fragment_shader_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/graphic_buffer_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/graphics_cover_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/hw_acceleration_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/interactive_ui_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/opengl_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/output_merging_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/polygon_mesh_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/texturing_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/vertex_shader_n.htm patch | blob | history
org.tizen.guides/html/native/graphics/vulkan_n.htm patch | blob | history
org.tizen.guides/html/native/guides_n.htm patch | blob | history
org.tizen.guides/html/native/internationalization/i18n_n.htm patch | blob | history
org.tizen.guides/html/native/internationalization/internationalization_cover_n.htm patch | blob | history
org.tizen.guides/html/native/internationalization/phonenumber_n.htm patch | blob | history
org.tizen.guides/html/native/internationalization/resource_localization_n.htm patch | blob | history
org.tizen.guides/html/native/location_sensors/activity_n.htm patch | blob | history
org.tizen.guides/html/native/location_sensors/device_sensors_n.htm patch | blob | history
org.tizen.guides/html/native/location_sensors/geofences_n.htm patch | blob | history
org.tizen.guides/html/native/location_sensors/gesture_n.htm patch | blob | history
org.tizen.guides/html/native/location_sensors/here_credentials_n.htm patch | blob | history
org.tizen.guides/html/native/location_sensors/location_n.htm patch | blob | history
org.tizen.guides/html/native/location_sensors/location_sensors_cover_n.htm patch | blob | history
org.tizen.guides/html/native/location_sensors/maps_n.htm patch | blob | history
org.tizen.guides/html/native/location_sensors/mapzen_credentials_n.htm patch | blob | history
org.tizen.guides/html/native/media/audio_n.htm patch | blob | history
org.tizen.guides/html/native/media/camera_n.htm patch | blob | history
org.tizen.guides/html/native/media/face_detection_n.htm patch | blob | history
org.tizen.guides/html/native/media/image_barcode_n.htm patch | blob | history
org.tizen.guides/html/native/media/image_edit_n.htm patch | blob | history
org.tizen.guides/html/native/media/image_recognition_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_content_metadata_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_content_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_controller_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_conversions_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_cover_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_handle_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_key_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_muxing_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_playback_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_recording_n.htm patch | blob | history
org.tizen.guides/html/native/media/media_streams_n.htm patch | blob | history
org.tizen.guides/html/native/media/metadata_n.htm patch | blob | history
org.tizen.guides/html/native/media/openal_n.htm patch | blob | history
org.tizen.guides/html/native/media/radio_n.htm patch | blob | history
org.tizen.guides/html/native/media/raw_audio_n.htm patch | blob | history
org.tizen.guides/html/native/media/screen_mirroring_n.htm patch | blob | history
org.tizen.guides/html/native/media/sound_n.htm patch | blob | history
org.tizen.guides/html/native/media/stream_recorder_n.htm patch | blob | history
org.tizen.guides/html/native/media/thumbnail_images_n.htm patch | blob | history
org.tizen.guides/html/native/messaging/email_n.htm patch | blob | history
org.tizen.guides/html/native/messaging/messages_n.htm patch | blob | history
org.tizen.guides/html/native/messaging/messaging_cover_n.htm patch | blob | history
org.tizen.guides/html/native/messaging/push_n.htm patch | blob | history
org.tizen.guides/html/native/messaging/push_server_n.htm patch | blob | history
org.tizen.guides/html/native/migration_guide_n.htm patch | blob | history
org.tizen.guides/html/native/notification/attach_panel_n.htm patch | blob | history
org.tizen.guides/html/native/notification/minicontrol_n.htm patch | blob | history
org.tizen.guides/html/native/notification/noti_n.htm patch | blob | history
org.tizen.guides/html/native/notification/notification_cover_n.htm patch | blob | history
org.tizen.guides/html/native/performance/performance_cover_n.htm patch | blob | history
org.tizen.guides/html/native/performance/tracepoints_n.htm patch | blob | history
org.tizen.guides/html/native/personal/account_n.htm patch | blob | history
org.tizen.guides/html/native/personal/authentication_n.htm patch | blob | history
org.tizen.guides/html/native/personal/calendar_n.htm patch | blob | history
org.tizen.guides/html/native/personal/contacts_n.htm patch | blob | history
org.tizen.guides/html/native/personal/context_n.htm patch | blob | history
org.tizen.guides/html/native/personal/data_sync_n.htm patch | blob | history
org.tizen.guides/html/native/personal/fido_n.htm patch | blob | history
org.tizen.guides/html/native/personal/oauth_n.htm patch | blob | history
org.tizen.guides/html/native/personal/personal_cover_n.htm patch | blob | history
org.tizen.guides/html/native/security/csr_n.htm patch | blob | history
org.tizen.guides/html/native/security/dpm_n.htm patch | blob | history
org.tizen.guides/html/native/security/privilege_n.htm patch | blob | history
org.tizen.guides/html/native/security/secure_key_n.htm patch | blob | history
org.tizen.guides/html/native/security/security_cover_n.htm patch | blob | history
org.tizen.guides/html/native/security/security_tip.htm patch | blob | history
org.tizen.guides/html/native/security/yaca_n.htm patch | blob | history
org.tizen.guides/html/native/text_input/input_method_n.htm patch | blob | history
org.tizen.guides/html/native/text_input/stt_n.htm patch | blob | history
org.tizen.guides/html/native/text_input/text_input_cover_n.htm patch | blob | history
org.tizen.guides/html/native/text_input/tts_n.htm patch | blob | history
org.tizen.guides/html/native/text_input/voice_control_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/actors_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/animation_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/animation_types_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/background_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/buttons_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/constraints_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/control_base_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/dali_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/dali_overview_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/event_handling_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/flexcontainer_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/handle_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/imageview_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/itemview_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/layout_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/model3dview_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/multi_threaded_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/properties_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/rendering_effects_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/rendering_tutorial_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/resources_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/scrollview_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/slider_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/styling_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/svg_rendering_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/tableview_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/texteditor_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/textfield_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/textlabel_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/touchdata_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/ui_components_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/videoview_n.htm patch | blob | history
org.tizen.guides/html/native/ui/dali/visuals_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/accessibility_architecture_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/accessibility_config_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/accessibility_implementation_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/accessibility_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_background_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_background_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_button_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_button_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_calendar_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_check_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_check_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_datetime_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_genlist_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_object_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_option_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_progressbar_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_rotary_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_scroller_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_slider_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_spinner_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_circ_surface_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_colorselector_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_ctxpopup_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_ctxpopup_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_custom_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_datetime_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_datetime_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_entry_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_entry_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_flip_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_flipselector_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_focus_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_gengrid_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_genlist_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_genlist_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_glview_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_glview_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_hoversel_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_icon_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_icon_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_image_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_image_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_index_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_index_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_label_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_label_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_list_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_list_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_map_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_multibuttonentry_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_notify_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_panel_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_photocam_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_plug_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_plug_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_popup_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_popup_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_progressbar_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_progressbar_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_radio_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_radio_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_segmentcontrol_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_slider_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_slider_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_spinner_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_toolbar_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_tooltip_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_win_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/component_win_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/configuring_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/container_box_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/container_conformant_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/container_grid_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/container_layout_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/container_mapbuf_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/container_naviframe_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/container_panes_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/container_scroller_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/container_table_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/core_loop_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/data_types_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/data_types_tools_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/ecore_animation_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/edje_animation_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/efl_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/elementary_animation_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/evas_basic_objects_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/evas_map_animation_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/evas_map_effects_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/evas_objects_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/evas_rendering_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/event_handling_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/event_types_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/font_setting_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/getting_started_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/graphical_objects_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/hw_input_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/introduction_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/key_events_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/key_grab_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_collections_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_color_classes_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_data_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_fonts_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_group_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_images_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_intro_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_part_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_positioning_parts_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_program_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_signal_handling_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/learn_edc_styles_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/main_loop_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/multiple_screens_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/multipoint_touch_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/programming_principles_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/resource_fallback_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/rotary_events_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/scalability_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/threads_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/tools_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/touch_gesture_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/ui_components_mn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/ui_components_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/ui_components_wn.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/ui_layouts_n.htm patch | blob | history
org.tizen.guides/html/native/ui/efl/ui_scalability_n.htm patch | blob | history
org.tizen.guides/html/native/ui/ui_cover_n.htm patch | blob | history
org.tizen.guides/html/web/alarm/alarms_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/app_communication_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/app_controls_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/app_group_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/app_icons_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/app_info_control_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/app_management_cover_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/applications_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/common_appcontrol_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/data_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/message_port_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/packages_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/preference_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/service_app_w.htm patch | blob | history
org.tizen.guides/html/web/app_management/web_widget_ww.htm patch | blob | history
org.tizen.guides/html/web/app_management/widget_app_w.htm patch | blob | history
org.tizen.guides/html/web/connectivity/bluetooth_w.htm patch | blob | history
org.tizen.guides/html/web/connectivity/convergence_w.htm patch | blob | history
org.tizen.guides/html/web/connectivity/download_w.htm patch | blob | history
org.tizen.guides/html/web/connectivity/iotcon_w.htm patch | blob | history
org.tizen.guides/html/web/connectivity/nfc_w.htm patch | blob | history
org.tizen.guides/html/web/connectivity/secure_element_w.htm patch | blob | history
org.tizen.guides/html/web/connectivity/task_bluetoothchat_w.htm patch | blob | history
org.tizen.guides/html/web/connectivity/task_contactsexchanger_w.htm patch | blob | history
org.tizen.guides/html/web/connectivity/task_downloadmanager_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/console_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/cordova_cover_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/core_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/device_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/devicemotion_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/dialogs_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/events_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/file_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/filetransfer_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/globalization_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/media_w.htm patch | blob | history
org.tizen.guides/html/web/cordova/network_information_w.htm patch | blob | history
org.tizen.guides/html/web/data/data_cover_w.htm patch | blob | history
org.tizen.guides/html/web/data/data_filter_w.htm patch | blob | history
org.tizen.guides/html/web/data/file_archiving_w.htm patch | blob | history
org.tizen.guides/html/web/data/file_system_w.htm patch | blob | history
org.tizen.guides/html/web/data/stored_content_w.htm patch | blob | history
org.tizen.guides/html/web/data/task_filemanager_w.htm patch | blob | history
org.tizen.guides/html/web/data/task_mediacontent_w.htm patch | blob | history
org.tizen.guides/html/web/device/device_cover_w.htm patch | blob | history
org.tizen.guides/html/web/device/feedback_w.htm patch | blob | history
org.tizen.guides/html/web/device/power_w.htm patch | blob | history
org.tizen.guides/html/web/device/system_information_w.htm patch | blob | history
org.tizen.guides/html/web/device/system_setting_w.htm patch | blob | history
org.tizen.guides/html/web/device/task_systeminfo_w.htm patch | blob | history
org.tizen.guides/html/web/device/time_w.htm patch | blob | history
org.tizen.guides/html/web/device/web_view_w.htm patch | blob | history
org.tizen.guides/html/web/error/error_w.htm patch | blob | history
org.tizen.guides/html/web/guides_w.htm patch | blob | history
org.tizen.guides/html/web/localization/localization_w.htm patch | blob | history
org.tizen.guides/html/web/media/audio_w.htm patch | blob | history
org.tizen.guides/html/web/media/camera_w.htm patch | blob | history
org.tizen.guides/html/web/media/jpeg_exif_w.htm patch | blob | history
org.tizen.guides/html/web/media/media_controller_w.htm patch | blob | history
org.tizen.guides/html/web/media/media_cover_w.htm patch | blob | history
org.tizen.guides/html/web/media/media_key_w.htm patch | blob | history
org.tizen.guides/html/web/media/player_util_w.htm patch | blob | history
org.tizen.guides/html/web/media/radio_w.htm patch | blob | history
org.tizen.guides/html/web/messaging/messages_w.htm patch | blob | history
org.tizen.guides/html/web/messaging/messaging_cover_w.htm patch | blob | history
org.tizen.guides/html/web/messaging/push_w.htm patch | blob | history
org.tizen.guides/html/web/messaging/task_chatter_w.htm patch | blob | history
org.tizen.guides/html/web/notification/notification_w.htm patch | blob | history
org.tizen.guides/html/web/personal/account_w.htm patch | blob | history
org.tizen.guides/html/web/personal/bookmarks_w.htm patch | blob | history
org.tizen.guides/html/web/personal/calendar_w.htm patch | blob | history
org.tizen.guides/html/web/personal/call_history_w.htm patch | blob | history
org.tizen.guides/html/web/personal/contacts_w.htm patch | blob | history
org.tizen.guides/html/web/personal/personal_cover_w.htm patch | blob | history
org.tizen.guides/html/web/personal/sync_w.htm patch | blob | history
org.tizen.guides/html/web/personal/task_calllog_w.htm patch | blob | history
org.tizen.guides/html/web/personal/task_eventmanager_w.htm patch | blob | history
org.tizen.guides/html/web/security/secure_key_w.htm patch | blob | history
org.tizen.guides/html/web/security/security_cover_w.htm patch | blob | history
org.tizen.guides/html/web/sensors/device_sensors_w.htm patch | blob | history
org.tizen.guides/html/web/sensors/ham_w.htm patch | blob | history
org.tizen.guides/html/web/sensors/sensors_cover_w.htm patch | blob | history
org.tizen.guides/html/web/sensors/task_sensorball_w.htm patch | blob | history
org.tizen.guides/html/web/text_input/input_device_w.htm patch | blob | history
org.tizen.guides/html/web/text_input/input_method_w.htm patch | blob | history
org.tizen.guides/html/web/text_input/text_input_cover_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/accessibility_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/animation_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/circle_progressbar_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/circular_ui_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/creating_animation_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/event_handling_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/footerbutton_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/globalization_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/header_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/helloworld_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/helper_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/indexscrollbar_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/list_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/managing_page_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/moreoptions_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/notepad_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/popup_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/processing_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/tau_porting_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/tau_rotary_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/tau_w.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/thumbnail_ww.htm patch | blob | history
org.tizen.guides/html/web/ui/tau/ui_component_w.htm patch | blob | history
org.tizen.guides/html/web/ui/ui_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/communication/server_sent_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/communication/websocket_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/battery_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/browser_state_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/device_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/device_orientation_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/task_compass_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/task_touch_paint_mw.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/task_touch_paint_ww.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/touch_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/device/vibration_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/graphics/canvas_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/graphics/svg_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/graphics/task_basicwatch_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/location/geolocation_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/location/location_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/getusermedia_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/media_capture_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/task_piano_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/task_selfcamera_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/video_audio_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/media/webaudio_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/page_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/security/cors_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/security/iframe_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/storage/appcache_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/storage/file_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/storage/indexdb_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/storage/web_storage_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/storage/websql_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/supplement/camera_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/supplement/task_camera_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/supplement/webgl_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/animation_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/background_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/basic_ui_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/clipboard_mw.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/color_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/drag_drop_mw.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/flexible_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/font_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/frame_flattening_mw.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/html5forms_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/html_priority_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/media_query_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/multi_mw.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/multiple_screens_mw.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/selector_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/session_history_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/text_module_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/transform_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/transition_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/ui_layout_ww.htm patch | blob | history
org.tizen.guides/html/web/w3c/ui/woff_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/useful/performance_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm patch | blob | history
org.tizen.guides/html/web/w3c/w3c_cover_w.htm patch | blob | history
org.tizen.studio/html/common_tools/certificate_registration.htm patch | blob | history
org.tizen.studio/html/common_tools/command_line_interface.htm patch | blob | history
org.tizen.studio/html/common_tools/connection_explorer_view.htm patch | blob | history
org.tizen.studio/html/common_tools/da_advanced.htm patch | blob | history
org.tizen.studio/html/common_tools/da_common.htm patch | blob | history
org.tizen.studio/html/common_tools/da_file.htm patch | blob | history
org.tizen.studio/html/common_tools/da_memory.htm patch | blob | history
org.tizen.studio/html/common_tools/da_network.htm patch | blob | history
org.tizen.studio/html/common_tools/da_opengl.htm patch | blob | history
org.tizen.studio/html/common_tools/da_overview.htm patch | blob | history
org.tizen.studio/html/common_tools/da_thread.htm patch | blob | history
org.tizen.studio/html/common_tools/da_ui_hierarchy_n.htm patch | blob | history
org.tizen.studio/html/common_tools/emulator.htm patch | blob | history
org.tizen.studio/html/common_tools/emulator_control_panel.htm patch | blob | history
org.tizen.studio/html/common_tools/emulator_features.htm patch | blob | history
org.tizen.studio/html/common_tools/emulator_manager.htm patch | blob | history
org.tizen.studio/html/common_tools/keyboard_shortcuts.htm patch | blob | history
org.tizen.studio/html/common_tools/log_view.htm patch | blob | history
org.tizen.studio/html/common_tools/smart_development_bridge.htm patch | blob | history
org.tizen.studio/html/cover_page.htm patch | blob | history
org.tizen.studio/html/download/1_0_1_release_notes.htm patch | blob | history
org.tizen.studio/html/download/1_0_release_notes.htm patch | blob | history
org.tizen.studio/html/download/1_1_0_release_notes.htm patch | blob | history
org.tizen.studio/html/download/advanced_configuration.htm patch | blob | history
org.tizen.studio/html/download/download.htm patch | blob | history
org.tizen.studio/html/download/hardware_accelerated_execution_manager.htm patch | blob | history
org.tizen.studio/html/download/installing_sdk.htm patch | blob | history
org.tizen.studio/html/download/prerequisites.htm patch | blob | history
org.tizen.studio/html/download/tizen_studio_migration_guide.htm patch | blob | history
org.tizen.studio/html/download/uninstalling_sdk.htm patch | blob | history
org.tizen.studio/html/download/updating_sdk.htm patch | blob | history
org.tizen.studio/html/index.htm patch | blob | history
org.tizen.studio/html/native_tools/call_stack_view_n.htm patch | blob | history
org.tizen.studio/html/native_tools/component_attributes_n.htm patch | blob | history
org.tizen.studio/html/native_tools/component_designer_n.htm patch | blob | history
org.tizen.studio/html/native_tools/content_assist_n.htm patch | blob | history
org.tizen.studio/html/native_tools/cover_code_n.htm patch | blob | history
org.tizen.studio/html/native_tools/cover_debug_n.htm patch | blob | history
org.tizen.studio/html/native_tools/cover_native_n.htm patch | blob | history
org.tizen.studio/html/native_tools/cover_project_mgmt_n.htm patch | blob | history
org.tizen.studio/html/native_tools/cover_run_test_n.htm patch | blob | history
org.tizen.studio/html/native_tools/edc_editor_n.htm patch | blob | history
org.tizen.studio/html/native_tools/manifest_elements_n.htm patch | blob | history
org.tizen.studio/html/native_tools/manifest_text_editor_n.htm patch | blob | history
org.tizen.studio/html/native_tools/multiple_screen_n.htm patch | blob | history
org.tizen.studio/html/native_tools/po_file_editor_n.htm patch | blob | history
org.tizen.studio/html/native_tools/project_conversion_n.htm patch | blob | history
org.tizen.studio/html/native_tools/project_explorer_view_n.htm patch | blob | history
org.tizen.studio/html/native_tools/project_wizard_n.htm patch | blob | history
org.tizen.studio/html/native_tools/resource_manager_n.htm patch | blob | history
org.tizen.studio/html/native_tools/static_analyzer_n.htm patch | blob | history
org.tizen.studio/html/native_tools/storyboard_n.htm patch | blob | history
org.tizen.studio/html/native_tools/t_trace_n.htm patch | blob | history
org.tizen.studio/html/native_tools/ui_builder_conversion_n.htm patch | blob | history
org.tizen.studio/html/native_tools/ui_builder_n.htm patch | blob | history
org.tizen.studio/html/native_tools/ui_project_migration_combi_n.htm patch | blob | history
org.tizen.studio/html/native_tools/unit_test_n.htm patch | blob | history
org.tizen.studio/html/platform_tools/cover_platform.htm patch | blob | history
org.tizen.studio/html/platform_tools/platform_tools.htm patch | blob | history
org.tizen.studio/html/web_tools/IDE_preferences_w.htm patch | blob | history
org.tizen.studio/html/web_tools/code_productivity_w.htm patch | blob | history
org.tizen.studio/html/web_tools/config_editor_w.htm patch | blob | history
org.tizen.studio/html/web_tools/content_assist_w.htm patch | blob | history
org.tizen.studio/html/web_tools/cover_code_w.htm patch | blob | history
org.tizen.studio/html/web_tools/cover_debug_w.htm patch | blob | history
org.tizen.studio/html/web_tools/cover_project_mgmt_w.htm patch | blob | history
org.tizen.studio/html/web_tools/cover_run_test_w.htm patch | blob | history
org.tizen.studio/html/web_tools/cover_web_w.htm patch | blob | history
org.tizen.studio/html/web_tools/js_analyzer_w.htm patch | blob | history
org.tizen.studio/html/web_tools/live_editing_w.htm patch | blob | history
org.tizen.studio/html/web_tools/previewer_w.htm patch | blob | history
org.tizen.studio/html/web_tools/privilege_checker_w.htm patch | blob | history
org.tizen.studio/html/web_tools/project_explorer_view_w.htm patch | blob | history
org.tizen.studio/html/web_tools/project_wizard_w.htm patch | blob | history
org.tizen.studio/html/web_tools/rest_viewer_w.htm patch | blob | history
org.tizen.studio/html/web_tools/web_editor_w.htm patch | blob | history
org.tizen.studio/html/web_tools/web_inspector_w.htm patch | blob | history
org.tizen.studio/html/web_tools/web_localization_w.htm patch | blob | history
org.tizen.studio/html/web_tools/web_simulator_features_w.htm patch | blob | history
org.tizen.studio/html/web_tools/web_simulator_w.htm patch | blob | history
org.tizen.studio/html/web_tools/web_unit_test_tool_w.htm patch | blob | history
org.tizen.training/html/cover_page.htm patch | blob | history
org.tizen.training/html/index.htm patch | blob | history
org.tizen.training/html/native/app_model/application_model_n.htm patch | blob | history
org.tizen.training/html/native/cover_page_n.htm patch | blob | history
org.tizen.training/html/native/details/app_filtering_n.htm patch | blob | history
org.tizen.training/html/native/details/deprecation_policy_n.htm patch | blob | history
org.tizen.training/html/native/details/details_n.htm patch | blob | history
org.tizen.training/html/native/details/error_handling_n.htm patch | blob | history
org.tizen.training/html/native/details/event_handling_n.htm patch | blob | history
org.tizen.training/html/native/details/io_overview_n.htm patch | blob | history
org.tizen.training/html/native/details/sec_privileges_n.htm patch | blob | history
org.tizen.training/html/native/details/sign_certificate_n.htm patch | blob | history
org.tizen.training/html/native/details/tizen_apis_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_connectivity_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_connectivity_operation_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_connectivity_p2p_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_connectivity_usage_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_contacts_basic_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_contacts_group_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_contacts_management_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_contacts_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_contentshare_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_contentshare_nfc_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_contentshare_receive_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_contentshare_send_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_graphics_animation_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_graphics_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_graphics_polygon_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_graphics_square_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_multimedia_audio_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_multimedia_camera_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_multimedia_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_multimedia_video_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_sensor_accelerator_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_sensor_n.htm patch | blob | history
org.tizen.training/html/native/feature/app_sensor_proximity_n.htm patch | blob | history
org.tizen.training/html/native/feature/best_practice_battery_n.htm patch | blob | history
org.tizen.training/html/native/feature/ui_builder_app_design_mn.htm patch | blob | history
org.tizen.training/html/native/feature/ui_builder_overview_mn.htm patch | blob | history
org.tizen.training/html/native/getting_started_n.htm patch | blob | history
org.tizen.training/html/native/mobile/first_app_mn.htm patch | blob | history
org.tizen.training/html/native/process/app_dev_process_n.htm patch | blob | history
org.tizen.training/html/native/process/building_app_n.htm patch | blob | history
org.tizen.training/html/native/process/creating_app_project_n.htm patch | blob | history
org.tizen.training/html/native/process/debugging_app_n.htm patch | blob | history
org.tizen.training/html/native/process/performance_n.htm patch | blob | history
org.tizen.training/html/native/process/running_app_n.htm patch | blob | history
org.tizen.training/html/native/process/setting_properties_n.htm patch | blob | history
org.tizen.training/html/native/wearable/first_app_wn.htm patch | blob | history
org.tizen.training/html/native/wearable_watch/first_app_watch_wn.htm patch | blob | history
org.tizen.training/html/native/wearable_widget/first_app_widget_wn.htm patch | blob | history
org.tizen.training/html/web/app_model/application_model_w.htm patch | blob | history
org.tizen.training/html/web/cover_page_w.htm patch | blob | history
org.tizen.training/html/web/details/app_filtering_w.htm patch | blob | history
org.tizen.training/html/web/details/deprecation_policy_w.htm patch | blob | history
org.tizen.training/html/web/details/details_w.htm patch | blob | history
org.tizen.training/html/web/details/event_handling_w.htm patch | blob | history
org.tizen.training/html/web/details/sec_privileges_w.htm patch | blob | history
org.tizen.training/html/web/details/sign_certificate_w.htm patch | blob | history
org.tizen.training/html/web/details/tizen_apis_w.htm patch | blob | history
org.tizen.training/html/web/details/web_runtime_w.htm patch | blob | history
org.tizen.training/html/web/getting_started_w.htm patch | blob | history
org.tizen.training/html/web/mobile/first_app_mw.htm patch | blob | history
org.tizen.training/html/web/process/app_dev_process_w.htm patch | blob | history
org.tizen.training/html/web/process/coding_app_w.htm patch | blob | history
org.tizen.training/html/web/process/creating_app_project_w.htm patch | blob | history
org.tizen.training/html/web/process/run_debug_app_w.htm patch | blob | history
org.tizen.training/html/web/process/setting_properties_w.htm patch | blob | history
org.tizen.training/html/web/wearable/first_app_ww.htm patch | blob | history
org.tizen.training/html/web/wearable_watch/first_app_watch_ww.htm patch | blob | history
org.tizen.training/html/web/wearable_widget/first_app_widget_ww.htm patch | blob | history

diff --git a/org.tizen.guides/html/cover_page.htm b/org.tizen.guides/html/cover_page.htm
index c1e85f3..c8de0cb 100644 (file)
--- a/org.tizen.guides/html/cover_page.htm
+++ b/org.tizen.guides/html/cover_page.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <link rel="stylesheet" type="text/css" href="css/snippet.css" />
-       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/snippet.js"></script>
        <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
 
-       <title>Tizen Guides</title>  
+       <title>Tizen Guides</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,9 +20,9 @@
 <font size="11">Guides</font></h1>
 
 <p>Click the application type you want:</p>
-<p><a href="native/guides_n.htm"><img alt="Native Application" src="images/n_division.png"/></a> <a href="web/guides_w.htm"><img alt="Web Application" src="images/w_division.png"/></a></p> 
+<p><a href="native/guides_n.htm"><img alt="Native Application" src="images/n_division.png"/></a> <a href="web/guides_w.htm"><img alt="Web Application" src="images/w_division.png"/></a></p>
+
 
-   
 <script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="scripts/showhide.js"></script>
 
diff --git a/org.tizen.guides/html/native/alarm/alarm_cover_n.htm b/org.tizen.guides/html/native/alarm/alarm_cover_n.htm
index 5b3541b..fd27d05 100644 (file)
--- a/org.tizen.guides/html/native/alarm/alarm_cover_n.htm
+++ b/org.tizen.guides/html/native/alarm/alarm_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Alarms and Scheduling</title>  
+       <title>Alarms and Scheduling</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Alarms and Scheduling</h1>
@@ -45,7 +45,7 @@
 
 <p>You can create rules (contextual triggers consisting of an event, conditions, and an action) to monitor the device status or user activities. When the rule is enabled, the system starts to monitor the device status or user activities. When a specific event with certain conditions occurs, a defined action is triggered.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/alarm/alarms_n.htm b/org.tizen.guides/html/native/alarm/alarms_n.htm
index 38e893c..007e067 100644 (file)
--- a/org.tizen.guides/html/native/alarm/alarms_n.htm
+++ b/org.tizen.guides/html/native/alarm/alarms_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Alarms</title> 
- </head> 
+  <title>Alarms</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,11 +31,11 @@
                        <li><a href="#scenario_1">Setting an Alarm after Specific Time</a></li>
                        <li><a href="#scenario_2">Setting an Alarm on a Specific Date</a></li>
                        <li><a href="#scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</a></li>
-                       <li><a href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a></li>                  
+                       <li><a href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">Alarm API for Mobile Native</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">Alarm API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">Alarm API for Wearable Native</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Alarm" target="_blank">Alarm Sample Description</a></li>
                </ul>
@@ -43,7 +43,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Alarms</h1> 
+<h1>Alarms</h1>
 
 <p>You can launch an application at a specific time using alarms. The mechanism involved in launching the application is the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications).</p>
 <p>The AppControl API allows <a href="../app_management/app_controls_n.htm">launching an application</a> explicitly, giving its package name, or providing certain criteria that the application must meet. For example, the criteria can include the type of data on which the application must be able to operate. The structure containing the criteria is called an application control.</p>
@@ -66,8 +66,8 @@
 <li>To use the Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/alarm.get&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/alarm.set&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/alarm.get&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/alarm.set&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -101,39 +101,39 @@
 bool
 init_alarm()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int DELAY = 2;
-&nbsp;&nbsp;&nbsp;&nbsp;int REMIND = 1;
-&nbsp;&nbsp;&nbsp;&nbsp;int alarm_id;
-
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_create(&amp;app_control);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_set_app_id(app_control, &quot;org.tizen.alarmslave&quot;);
+    int ret;
+    int DELAY = 2;
+    int REMIND = 1;
+    int alarm_id;
+
+    app_control_h app_control = NULL;
+    ret = app_control_create(&amp;app_control);
+    ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
+    ret = app_control_set_app_id(app_control, "org.tizen.alarmslave");
 </pre>
 </li>
 
 <li>
 
        <p>To schedule an alarm after a delay, use the <code>alarm_schedule_after_delay()</code> function:</p>
- 
+
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;ret = alarm_schedule_after_delay(app_control, DELAY, REMIND, &amp;alarm_id);
+    ret = alarm_schedule_after_delay(app_control, DELAY, REMIND, &amp;alarm_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
-</pre> 
+</pre>
 </li></ol></li>
 
 <li>
 <p>Implement the AlarmTarget application:</p>
-<p>A scheduled alarm calls AlarmTarget&#39;s <code>app_control_cb()</code> callback when the alarm expires:</p>
+<p>A scheduled alarm calls AlarmTarget's <code>app_control_cb()</code> callback when the alarm expires:</p>
 
 <pre class="prettyprint">
 void
 service_app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;app_control called by Alarm API.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "app_control called by Alarm API.");
 }
 </pre>
 </li>
@@ -146,53 +146,53 @@ service_app_control(app_control_h app_control, void *data)
 
 <p align="center" class="Table"><strong>Table: tm fields</strong></p>
 <table>
-   <tbody> 
-    <tr> 
-     <th>Member</th> 
-     <th>Type</th> 
+   <tbody>
+    <tr>
+     <th>Member</th>
+     <th>Type</th>
         <th>Meaning</th>
         <th>Range</th>
-    </tr> 
-    <tr> 
-     <td><code>tm_sec</code></td> 
-     <td>int</td> 
-        <td>Seconds after the minute</td> 
-        <td>0-61*</td> 
-    </tr> 
-    <tr> 
-     <td><code>tm_min</code></td> 
-     <td>int</td> 
-        <td>Minutes after the hour</td> 
-        <td>0-59</td> 
-    </tr> 
-    <tr> 
-     <td><code>tm_hour</code></td> 
-     <td>int</td> 
-        <td>Hours since midnight</td> 
-        <td>0-23</td> 
-    </tr> 
-    <tr> 
-     <td><code>tm_mday</code></td> 
-     <td>int</td> 
-        <td>Day of the month</td> 
-        <td>1-31</td> 
-    </tr> 
-    <tr> 
-     <td><code>tm_mon</code></td> 
-     <td>int</td> 
-        <td>Months since January</td> 
-        <td>0-11</td> 
     </tr>
-    <tr> 
-     <td><code>tm_year</code></td> 
-     <td>int</td> 
-        <td>Years since 1900</td> 
-        <td></td> 
-    </tr>      
-   </tbody> 
-  </table> 
-
-                       
+    <tr>
+     <td><code>tm_sec</code></td>
+     <td>int</td>
+        <td>Seconds after the minute</td>
+        <td>0-61*</td>
+    </tr>
+    <tr>
+     <td><code>tm_min</code></td>
+     <td>int</td>
+        <td>Minutes after the hour</td>
+        <td>0-59</td>
+    </tr>
+    <tr>
+     <td><code>tm_hour</code></td>
+     <td>int</td>
+        <td>Hours since midnight</td>
+        <td>0-23</td>
+    </tr>
+    <tr>
+     <td><code>tm_mday</code></td>
+     <td>int</td>
+        <td>Day of the month</td>
+        <td>1-31</td>
+    </tr>
+    <tr>
+     <td><code>tm_mon</code></td>
+     <td>int</td>
+        <td>Months since January</td>
+        <td>0-11</td>
+    </tr>
+    <tr>
+     <td><code>tm_year</code></td>
+     <td>int</td>
+        <td>Years since 1900</td>
+        <td></td>
+    </tr>
+   </tbody>
+  </table>
+
+
 <p>The following code schedules an application control to invoke after 4 seconds (using the <code>date.tm_sec</code> member). Using, for example, <code>date.tm_mday</code>, can set the alarm to another day of the month. Since the third parameter is set to 0, the alarm is executed only once.</p>
 <pre class="prettyprint">
 struct tm date;
@@ -216,17 +216,17 @@ ret = alarm_schedule_at_date(app, &amp;date, 0, &amp;alarm_id);
 <p>The third parameter defines the day of the week on which the alarm recurs. The value is defined with the <code>enum alarm_week_flag_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">wearable</a> applications), and can be a combination of days, for example <code>ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY</code>. The value can also be a binary, such as <code>1&lt;&lt;3 | 1&lt;&lt;6</code>.</p>
 
 <p>The following code schedules an application control to invoke on TUESDAY and FRIDAY:</p>
-  
+
 <pre class="prettyprint">
 struct tm date;
 ret = alarm_get_current_time(&amp;date);
 
 time_t time_current = mktime(&amp;date);
-dlog_print(DLOG_INFO, TAG, &quot;Schedule on date: %s &quot;, ctime(&amp;time_current));
+dlog_print(DLOG_INFO, TAG, "Schedule on date: %s ", ctime(&amp;time_current));
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;alarm_schedule_with_recurrence_week_flag(app_control, &amp;date,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;alarm_id);
+    alarm_schedule_with_recurrence_week_flag(app_control, &amp;date,
+                                             ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY,
+                                             &amp;alarm_id);
 </pre>
 
 <h2 id="scenario_4" name="scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</h2>
@@ -241,49 +241,49 @@ ret =
 static bool
 on_foreach_registered_alarm(int alarm_id, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int flag;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;struct tm date;
-&nbsp;&nbsp;&nbsp;&nbsp;time_t time_current;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = alarm_get_scheduled_date(alarm_id, &amp;date);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != ALARM_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Get time Error: %d &quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Logging scheduled alarm info */
-&nbsp;&nbsp;&nbsp;&nbsp;time_current = mktime(&amp;date);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Registered alarm: %d on date: %s &quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alarm_id, ctime(&amp;time_current));
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = alarm_get_scheduled_recurrence_week_flag(alarm_id, &amp;flag);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_SUNDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on SUNDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_MONDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on MONDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_TUESDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on TUESDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_WEDNESDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on WEDNESDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_THURSDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on THURSDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_FRIDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on FRIDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (flag &amp; ALARM_WEEK_FLAG_SATURDAY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Alarm Recurrence on SATURDAY \n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Cancel scheduled alarms */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = alarm_cancel(alarm_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != ALARM_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Cancel Error: %d &quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    int flag;
+    int ret = 0;
+    struct tm date;
+    time_t time_current;
+
+    ret = alarm_get_scheduled_date(alarm_id, &amp;date);
+    if (ret != ALARM_ERROR_NONE)
+        dlog_print(DLOG_ERROR, TAG, "Get time Error: %d ", ret);
+
+    /* Logging scheduled alarm info */
+    time_current = mktime(&amp;date);
+    dlog_print(DLOG_INFO, TAG, "Registered alarm: %d on date: %s ",
+               alarm_id, ctime(&amp;time_current));
+
+    ret = alarm_get_scheduled_recurrence_week_flag(alarm_id, &amp;flag);
+    if (ret == 0) {
+        if (flag &amp; ALARM_WEEK_FLAG_SUNDAY)
+            dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on SUNDAY \n");
+        if (flag &amp; ALARM_WEEK_FLAG_MONDAY)
+            dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on MONDAY \n");
+        if (flag &amp; ALARM_WEEK_FLAG_TUESDAY)
+            dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on TUESDAY \n");
+        if (flag &amp; ALARM_WEEK_FLAG_WEDNESDAY)
+            dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on WEDNESDAY \n");
+        if (flag &amp; ALARM_WEEK_FLAG_THURSDAY)
+            dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on THURSDAY \n");
+        if (flag &amp; ALARM_WEEK_FLAG_FRIDAY)
+            dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on FRIDAY \n");
+        if (flag &amp; ALARM_WEEK_FLAG_SATURDAY)
+            dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on SATURDAY \n");
+    }
+
+    /* Cancel scheduled alarms */
+    ret = alarm_cancel(alarm_id);
+    if (ret != ALARM_ERROR_NONE)
+        dlog_print(DLOG_ERROR, TAG, "Cancel Error: %d ", ret);
+
+    return true;
 }
 
 ret = alarm_foreach_registered_alarm(on_foreach_registered_alarm, NULL);
 if (ret != ALARM_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Listing Error: %d &quot;, ret);
+    dlog_print(DLOG_ERROR, TAG, "Listing Error: %d ", ret);
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
@@ -308,4 +308,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
diff --git a/org.tizen.guides/html/native/alarm/trigger_n.htm b/org.tizen.guides/html/native/alarm/trigger_n.htm
index b522d54..ac9e77c 100644 (file)
--- a/org.tizen.guides/html/native/alarm/trigger_n.htm
+++ b/org.tizen.guides/html/native/alarm/trigger_n.htm
@@ -106,10 +106,10 @@
 <h2 id="event_and_condition" name="event_and_condition">Events and Conditions</h2>
 
 <p>In a rule, the combination of an event and conditions formulates the logical statement that decides to execute the action of the rule or leave it undone. The event and the conditions are defined in various kinds of contextual information, which can be recognized on the device:</p>
-<ul><li>An event represents a contextual state change or a contextual event literally, such as &quot;headphone is plugged&quot;, &quot;the battery level has dropped to low&quot;, or &quot;the user enters his home&quot;.</li>
-<li>A condition represents a current contextual state or a device or user profile inferred through the usage history, for example, &quot;the current battery level is low&quot;, &quot;Wi-Fi connection is active&quot;, or &quot;(when receiving an incoming call) the number is the most frequent address in his call logs&quot;.</li></ul>
+<ul><li>An event represents a contextual state change or a contextual event literally, such as "headphone is plugged", "the battery level has dropped to low", or "the user enters his home".</li>
+<li>A condition represents a current contextual state or a device or user profile inferred through the usage history, for example, "the current battery level is low", "Wi-Fi connection is active", or "(when receiving an incoming call) the number is the most frequent address in his call logs".</li></ul>
 
-<p>Defining an event or a condition can involve <a href="#comparison_attributes">attribute comparisons</a> and input option parameter settings. The following example illustrates how to formulate a simple rule of &quot;at 10 PM, if the battery is not charging&quot;:</p>
+<p>Defining an event or a condition can involve <a href="#comparison_attributes">attribute comparisons</a> and input option parameter settings. The following example illustrates how to formulate a simple rule of "at 10 PM, if the battery is not charging":</p>
 
 <ol><li>Create a rule handle. The first parameter (<code>CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</code>) denotes how to combine all condition entries.
 <pre class="prettyprint">
@@ -117,37 +117,37 @@ context_trigger_rule_h rule = NULL;
 context_trigger_rule_create(CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &amp;rule);
 </pre></li>
 
-<li>Define the event (&quot;at 10 PM every day&quot;). 
+<li>Define the event ("at 10 PM every day").
 <p>A <code>CONTEXT_TRIGGER_EVENT_TIME</code> type event entry is created, and a key-value comparison of <code>CONTEXT_TRIGGER_TIME_OF_DAY == 1320</code> is set to the event.
 </p>
 <pre class="prettyprint">
 /* Composing an event */
 context_trigger_rule_entry_h event = NULL;
 context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_TIME,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;event);
+                                  CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                  &amp;event);
 context_trigger_rule_entry_add_key(event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_TIME_OF_DAY);
+                                   CONTEXT_TRIGGER_TIME_OF_DAY);
 context_trigger_rule_entry_add_comparison_int(event, CONTEXT_TRIGGER_TIME_OF_DAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO, 1320);
+                                              CONTEXT_TRIGGER_EQUAL_TO, 1320);
 
 /* Adding the event to the rule and releasing the resources */
 context_trigger_rule_add_entry(rule, event);
 context_trigger_rule_entry_destroy(event);
 </pre></li>
 
-<li>Formulate the condition statement (&quot;battery is not charging&quot;) and add it to the rule handle.
+<li>Formulate the condition statement ("battery is not charging") and add it to the rule handle.
 <p>In the condition entry of <code>CONTEXT_TRIGGER_CONDITION_BATTERY</code>, the comparison statement is defined as the equality check (<code>CONTEXT_TRIGGER_EQUAL_TO</code>) between the left operand (<code>CONTEXT_TRIGGER_IS_CHARGING</code>) and the right operand (<code>CONTEXT_TRIGGER_FALSE</code>).</p>
 <pre class="prettyprint">
 /* Composing a condition */
 context_trigger_rule_entry_h condition = NULL;
 context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &amp;condition);
+                                      CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &amp;condition);
 context_trigger_rule_entry_add_key(condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_IS_CHARGING);
+                                   CONTEXT_TRIGGER_IS_CHARGING);
 context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_IS_CHARGING,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_FALSE);
+                                              CONTEXT_TRIGGER_EQUAL_TO,
+                                              CONTEXT_TRIGGER_FALSE);
 
 /* Adding the condition to the rule handle */
 context_trigger_rule_add_entry(rule, condition);
@@ -166,40 +166,40 @@ int place_id;
 
 /* Target place ID must be retrieved through the Geofence Manager API */
 
-/* Composing an event &quot;when the user enters his home&quot; */
+/* Composing an event "when the user enters his home" */
 context_trigger_rule_entry_h event = NULL;
 context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_PLACE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &amp;event);
+                                  CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &amp;event);
 context_trigger_rule_entry_add_option_int(event, CONTEXT_TRIGGER_PLACE_ID, place_id);
 </pre>
 
-<p>You can also use an attribute value of the event as an option (or a right operand of a comparison) in a condition. As an example, the logical statement &quot;when receiving a message, if the sender&#39;s number is the most frequently communicated number&quot; can be formulated as follows:
+<p>You can also use an attribute value of the event as an option (or a right operand of a comparison) in a condition. As an example, the logical statement "when receiving a message, if the sender's number is the most frequently communicated number" can be formulated as follows:
 </p>
 <pre class="prettyprint">
-/* Composing an event &quot;when receiving a message&quot; */
+/* Composing an event "when receiving a message" */
 context_trigger_rule_entry_h event = NULL;
 context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_MESSAGE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &amp;event);
+                                  CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &amp;event);
 context_trigger_rule_entry_add_key(event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EVENT);
+                                   CONTEXT_TRIGGER_EVENT);
 context_trigger_rule_entry_add_comparison_string(event, CONTEXT_TRIGGER_EVENT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_RECEIVED);
+                                                 CONTEXT_TRIGGER_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_RECEIVED);
 
-/* Composing a condition &quot;if the sender number is the most frequently communicated&quot; */
+/* Composing a condition "if the sender number is the most frequently communicated" */
 context_trigger_rule_entry_h condition = NULL;
 context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &amp;condition);
+                                      CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &amp;condition);
 
-/* Message sender&#39;s address is used as an option of the condition */
+/* Message sender's address is used as an option of the condition */
 context_trigger_rule_entry_add_option(condition, CONTEXT_TRIGGER_ADDRESS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_ADDRESS);
+                                      CONTEXT_TRIGGER_ADDRESS);
 
 /* Checking if the frequency rank of the address is equal to 1 */
 context_trigger_rule_entry_add_key(condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_RANK);
+                                   CONTEXT_TRIGGER_RANK);
 context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_RANK,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO, 1);
+                                              CONTEXT_TRIGGER_EQUAL_TO, 1);
 </pre>
 
 <p>The following table lists the available options keys and the corresponding values.</p>
@@ -242,7 +242,7 @@ context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_RANK,
                        </code></p></td>
                        <td><code>CONTEXT_TRIGGER_TIME_OF_DAY</code></td>
                        <td>String</td>
-                       <td>Time interval of the day. For example, &quot;13-15&quot; denotes &quot;from 1 PM to 3 PM&quot;.</td>
+                       <td>Time interval of the day. For example, "13-15" denotes "from 1 PM to 3 PM".</td>
                </tr>
                <tr>
                        <td><code>CONTEXT_TRIGGER_DAY_OF_WEEK</code></td>
@@ -263,10 +263,10 @@ context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_RANK,
 
 <ul>
        <li><code>CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</code>
-               <p>It denotes logical &quot;AND&quot;. It means &quot;true only if all components are true&quot;.</p>
+               <p>It denotes logical "AND". It means "true only if all components are true".</p>
        </li>
        <li><code>CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</code>
-               <p>It denotes logical &quot;OR&quot;. It means &quot;true if at least 1 component is true&quot;.</p>
+               <p>It denotes logical "OR". It means "true if at least 1 component is true".</p>
        </li>
 </ul>
 
@@ -280,43 +280,43 @@ context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_RANK,
 /* Composing an event and conditions */
 context_trigger_rule_entry_h battery_event;
 context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;battery_event);
+                                  CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                  &amp;battery_event);
 context_trigger_rule_entry_add_key(battery_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LEVEL);
+                                   CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                   CONTEXT_TRIGGER_LEVEL);
 context_trigger_rule_entry_add_comparison_string(battery_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LEVEL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_CRITICAL);
+                                                 CONTEXT_TRIGGER_LEVEL,
+                                                 CONTEXT_TRIGGER_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_CRITICAL);
 
 context_trigger_rule_entry_h gps_condition;
 context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_GPS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gps_condition);
+                                      CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                      &amp;gps_condition);
 context_trigger_rule_entry_add_key(gps_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_STATE);
+                                   CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                   CONTEXT_TRIGGER_STATE);
 context_trigger_rule_entry_add_comparison_string(gps_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_STATE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_NOT_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_DISABLED);
+                                                 CONTEXT_TRIGGER_STATE,
+                                                 CONTEXT_TRIGGER_NOT_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_DISABLED);
 
 context_trigger_rule_entry_h wifi_condition;
 context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_WIFI,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;wifi_condition);
+                                      CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                      &amp;wifi_condition);
 context_trigger_rule_entry_add_key(wifi_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_STATE);
+                                   CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                   CONTEXT_TRIGGER_STATE);
 context_trigger_rule_entry_add_comparison_string(wifi_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_STATE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_NOT_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_DISABLED);
+                                                 CONTEXT_TRIGGER_STATE,
+                                                 CONTEXT_TRIGGER_NOT_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_DISABLED);
 
 /*
-   Composing a rule &quot;when the battery level becomes critical,
-   if GPS AND Wi-Fi are enabled&quot;
+   Composing a rule "when the battery level becomes critical,
+   if GPS AND Wi-Fi are enabled"
 */
 context_trigger_rule_h conjunction_rule;
 context_trigger_rule_create(<span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>, &amp;conjunction_rule);
@@ -326,8 +326,8 @@ context_trigger_rule_add_entry(conjunction_rule, wifi_condition);
 context_trigger_rule_set_action_notification(conjunction_rule, ...);
 
 /*
-   Composing a rule &quot;when the battery level becomes critical,
-   if GPS OR Wi-Fi is enabled&quot;
+   Composing a rule "when the battery level becomes critical,
+   if GPS OR Wi-Fi is enabled"
 */
 context_trigger_rule_h disjunction_rule;
 context_trigger_rule_create(<span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>, &amp;disjunction_rule);
@@ -339,50 +339,50 @@ context_trigger_rule_set_action_notification(disjunction_rule, ...);
 
 <li>Combining attributes into an event or condition
 
-<p>Some event and condition items provide multiple attributes. The logical connection between attributes must be set properly to fulfill the requirement. For example, when you use <code>CONTEXT_TRIGGER_EVENT_TIME</code> to define a rule &quot;at 4 PM every Monday&quot;, the comparisons regarding the 2 attributes, <code>CONTEXT_TRIGGER_TIME_OF_DAY</code> and <code>CONTEXT_TRIGGER_DAY_OF_WEEK</code> must be satisfied together.</p>
+<p>Some event and condition items provide multiple attributes. The logical connection between attributes must be set properly to fulfill the requirement. For example, when you use <code>CONTEXT_TRIGGER_EVENT_TIME</code> to define a rule "at 4 PM every Monday", the comparisons regarding the 2 attributes, <code>CONTEXT_TRIGGER_TIME_OF_DAY</code> and <code>CONTEXT_TRIGGER_DAY_OF_WEEK</code> must be satisfied together.</p>
 <p>On the contrary, using <code>CONTEXT_TRIGGER_APP_USE_FREQUENCY</code>, if you want to check whether a specific application belongs to the 5 most frequently used applications, or the application was used at least 10 times, both comparisons against <code>CONTEXT_TRIGGER_RANK</code> and <code>CONTEXT_TRIGGER_TOTAL_COUNT</code> must be connected by a logical disjunction.</p>
 <p>The following example illustrates the cases described above:</p>
 
 <pre class="prettyprint">
-/* Composing an event &quot;at 4 PM every Monday&quot; */
+/* Composing an event "at 4 PM every Monday" */
 context_trigger_rule_entry_h time_event;
 context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_TIME,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;time_event);
+                                  <span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>,
+                                  &amp;time_event);
 context_trigger_rule_entry_add_key(time_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_TIME_OF_DAY);
+                                   CONTEXT_TRIGGER_TIME_OF_DAY);
 context_trigger_rule_entry_add_comparison_int(time_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_TIME_OF_DAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO, 960);
+                                              CONTEXT_TRIGGER_TIME_OF_DAY,
+                                              CONTEXT_TRIGGER_EQUAL_TO, 960);
 context_trigger_rule_entry_add_key(time_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_DAY_OF_WEEK);
+                                   CONTEXT_TRIGGER_DAY_OF_WEEK);
 context_trigger_rule_entry_add_comparison_string(time_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_DAY_OF_WEEK,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_MON);
+                                                 CONTEXT_TRIGGER_DAY_OF_WEEK,
+                                                 CONTEXT_TRIGGER_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_MON);
 
 /*
-   Composing a condition &quot;if an application belongs to the 5,
-   most frequently used apps or is used at least 10 times per day&quot;
+   Composing a condition "if an application belongs to the 5,
+   most frequently used apps or is used at least 10 times per day"
 */
 context_trigger_rule_entry_h app_condition;
 context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;app_condition);
+                                      <span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>,
+                                      &amp;app_condition);
 context_trigger_rule_entry_add_option_string(app_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_APP_ID, /* App ID */);
+                                             CONTEXT_TRIGGER_APP_ID, /* App ID */);
 context_trigger_rule_entry_add_key(app_condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_RANK);
+                                   CONTEXT_TRIGGER_RANK);
 context_trigger_rule_entry_add_comparison_int(app_condition, CONTEXT_TRIGGER_RANK,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5);
+                                              CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO,
+                                              5);
 context_trigger_rule_entry_add_key(app_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_TOTAL_COUNT);
+                                   CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                   CONTEXT_TRIGGER_TOTAL_COUNT);
 context_trigger_rule_entry_add_comparison_int(app_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_TOTAL_COUNT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10);
+                                              CONTEXT_TRIGGER_TOTAL_COUNT,
+                                              CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO,
+                                              10);
 </pre></li>
 
 <li>Combining comparisons into an attribute
@@ -390,39 +390,39 @@ context_trigger_rule_entry_add_comparison_int(app_condition,
 <p>Similarly as above, regarding an attribute, you can combine multiple comparisons in different ways. For example, if you want to check that the battery level is full or high, use a logical disjunction. If you also want to check whether the current time is between 18:30 and 21:30, use a logical conjunction. The following example illustrates how to compose such conditions:</p>
 
 <pre class="prettyprint">
-/* Composing a condition &quot;if the battery level is full or high&quot; */
+/* Composing a condition "if the battery level is full or high" */
 context_trigger_rule_entry_h battery_condition;
 context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;battery_condition);
+                                      CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                      &amp;battery_condition);
 context_trigger_rule_entry_add_key(battery_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LEVEL);
+                                   <span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>,
+                                   CONTEXT_TRIGGER_LEVEL);
 context_trigger_rule_entry_add_comparison_string(battery_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LEVEL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_FULL);
+                                                 CONTEXT_TRIGGER_LEVEL,
+                                                 CONTEXT_TRIGGER_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_FULL);
 context_trigger_rule_entry_add_comparison_string(battery_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LEVEL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_HIGH);
+                                                 CONTEXT_TRIGGER_LEVEL,
+                                                 CONTEXT_TRIGGER_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_HIGH);
 
-/* Composing a condition &quot;if the current time is between 18:30 and 21:30&quot; */
+/* Composing a condition "if the current time is between 18:30 and 21:30" */
 context_trigger_rule_entry_h time_condition;
 context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_TIME,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;time_condition);
+                                      CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                      &amp;time_condition);
 context_trigger_rule_entry_add_key(time_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_TIME_OF_DAY);
+                                   <span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>,
+                                   CONTEXT_TRIGGER_TIME_OF_DAY);
 context_trigger_rule_entry_add_comparison_int(time_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_TIME_OF_DAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1110);
+                                              CONTEXT_TRIGGER_TIME_OF_DAY,
+                                              CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO,
+                                              1110);
 context_trigger_rule_entry_add_comparison_int(time_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_TIME_OF_DAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1290);
+                                              CONTEXT_TRIGGER_TIME_OF_DAY,
+                                              CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO,
+                                              1290);
 </pre></li></ul>
 
 
@@ -438,7 +438,7 @@ context_trigger_rule_entry_add_comparison_int(time_condition,
 
 <p>To compose a rule:</p>
 <ol>
-<li>Create a rule for &quot;Notify if the battery is not charging and either Wi-Fi or GPS is enabled when the battery level becomes too low&quot;. 
+<li>Create a rule for "Notify if the battery is not charging and either Wi-Fi or GPS is enabled when the battery level becomes too low".
 <p>Create a rule handle using the <code>context_trigger_rule_create()</code> function. Because both Wi-Fi and GPS conditions need not be met at the same time, the rule must be created with the <code>CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</code> operator.</p>
 <pre class="prettyprint">
 context_trigger_rule_h rule = NULL;
@@ -447,13 +447,13 @@ context_trigger_rule_create(CONTEXT_TRIGGER_LOGICAL_DISJUNCTION, &amp;rule);
 </li>
 <li>Set an optional description:
 <pre class="prettyprint">
-context_trigger_rule_set_description(rule, &quot;Notify if the battery is not charging 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and either Wi-Fi or GPS is enabled
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;when the battery level becomes too low&quot;);
+context_trigger_rule_set_description(rule, "Notify if the battery is not charging
+                                            and either Wi-Fi or GPS is enabled
+                                            when the battery level becomes too low");
 </pre>
 </li>
 </ol>
-                       
+
 <h2 id="create_event" name="create_event">Creating an Event</h2>
 
 <p>To create a <code>CONTEXT_TRIGGER_EVENT_BATTERY</code> event to detect battery level changes:</p>
@@ -463,8 +463,8 @@ context_trigger_rule_set_description(rule, &quot;Notify if the battery is not ch
 <pre class="prettyprint">
 context_trigger_rule_entry_h battery_event = NULL;
 context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;battery_event);
+                                  CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                  &amp;battery_event);
 </pre>
 <p>While creating an event handle, the application chooses the logical operator (logical conjunction or disjunction), which is applied to combine the attribute keys for the event. In case of the <code>CONTEXT_TRIGGER_EVENT_BATTERY</code> event, 2 types of contextual states are provided: <code>CONTEXT_TRIGGER_LEVEL</code> and <code>CONTEXT_TRIGGER_IS_CHARGING</code>. Because the application wants to check both if the battery level becomes too low and if the battery is not charging, <code>CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</code> must be applied.</p>
 </li>
@@ -473,11 +473,11 @@ context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_BATTERY,
 <pre class="prettyprint">
 /* Add a CONTEXT_TRIGGER_LEVEL key */
 context_trigger_rule_entry_add_key(battery_event, CONTEXT_TRIGGER_LOGICAL_DISJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LEVEL);
+                                   CONTEXT_TRIGGER_LEVEL);
 
 /* Add a CONTEXT_TRIGGER_IS_CHARGING key */
 context_trigger_rule_entry_add_key(battery_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_IS_CHARGING);
+                                   CONTEXT_TRIGGER_IS_CHARGING);
 </pre>
 <p>The application wants to check whether the battery level becomes either low, empty, or critical. For this reason, the <code>CONTEXT_TRIGGER_LEVEL</code> key must be added with the <code>CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</code> logical operator.</p>
 </li>
@@ -486,23 +486,23 @@ context_trigger_rule_entry_add_key(battery_event, CONTEXT_TRIGGER_LOGICAL_CONJUN
 <pre class="prettyprint">
 /* Add the comparison values for the CONTEXT_TRIGGER_LEVEL key */
 context_trigger_rule_entry_add_comparison_string(battery_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LEVEL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOW);
+                                                 CONTEXT_TRIGGER_LEVEL,
+                                                 CONTEXT_TRIGGER_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_LOW);
 context_trigger_rule_entry_add_comparison_string(battery_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LEVEL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_CRITICAL);
+                                                 CONTEXT_TRIGGER_LEVEL,
+                                                 CONTEXT_TRIGGER_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_CRITICAL);
 context_trigger_rule_entry_add_comparison_string(battery_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LEVEL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EMPTY);
+                                                 CONTEXT_TRIGGER_LEVEL,
+                                                 CONTEXT_TRIGGER_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_EMPTY);
 
 /* Add a comparison value for the CONTEXT_TRIGGER_IS_CHARGING key */
 context_trigger_rule_entry_add_comparison_int(battery_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_IS_CHARGING,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_FALSE);
+                                              CONTEXT_TRIGGER_IS_CHARGING,
+                                              CONTEXT_TRIGGER_EQUAL_TO,
+                                              CONTEXT_TRIGGER_FALSE);
 </pre>
 </li>
 <li>Add the event entry to the rule:
@@ -528,38 +528,38 @@ context_trigger_rule_entry_destroy(battery_event);
 /* Create a Wi-Fi condition */
 context_trigger_rule_entry_h wifi_condition = NULL;
 context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_WIFI,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;wifi_condition);
+                                      CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                      &amp;wifi_condition);
 
 /* Create a GPS condition */
 context_trigger_rule_entry_h gps_condition = NULL;
 context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_GPS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gps_condition);
+                                      CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                      &amp;gps_condition);
 </pre>
 </li>
 <li>Add the attribute key with the <code>context_trigger_rule_entry_add_key()</code> function to specify the comparison terms for each condition:
 <pre class="prettyprint">
 context_trigger_rule_entry_add_key(wifi_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_STATE);
+                                   CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                   CONTEXT_TRIGGER_STATE);
 context_trigger_rule_entry_add_key(gps_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_STATE);
+                                   CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
+                                   CONTEXT_TRIGGER_STATE);
 </pre>
 </li>
-<li>Add a comparison operator and value for the attribute key. 
+<li>Add a comparison operator and value for the attribute key.
  <p>Use the <code>context_trigger_rule_entry_add_comparison_int()</code>, <code>context_trigger_rule_entry_add_string()</code>, or <code>context_trigger_rule_entry_add()</code> function, depending on the data type.</p>
  <p>In the following example, the conditions for Wi-Fi and GPS are that they are enabled.</p>
 <pre class="prettyprint">
 context_trigger_rule_entry_add_comparison_string(wifi_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_STATE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_NOT_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_DISABLED);
+                                                 CONTEXT_TRIGGER_STATE,
+                                                 CONTEXT_TRIGGER_NOT_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_DISABLED);
 context_trigger_rule_entry_add_comparison_string(gps_condition,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_STATE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_NOT_EQUAL_TO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_TRIGGER_DISABLED);
+                                                 CONTEXT_TRIGGER_STATE,
+                                                 CONTEXT_TRIGGER_NOT_EQUAL_TO,
+                                                 CONTEXT_TRIGGER_DISABLED);
 </pre>
 </li>
 <li>Add the conditions to the rule handle:
@@ -598,18 +598,18 @@ context_trigger_rule_set_action_app_control(rule, app);
 </li>
 <li>To register a notification posting request:
 <pre class="prettyprint">
-context_trigger_rule_set_action_notification(rule, &quot;Battery Alert&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Battery is getting low. To save your
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;battery, turn off Wi-Fi or GPS&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL);
+context_trigger_rule_set_action_notification(rule, "Battery Alert",
+                                             "Battery is getting low. To save your
+                                              battery, turn off Wi-Fi or GPS",
+                                             NULL, NULL);
 </pre>
 <p>The Contextual Trigger API supports the basic notification type only. A notification can contain a title, content body text, an icon, and an application control to be executed.</p>
 </li>
 
 </ul>
-                       
+
 <h2 id="manage_rule" name="manage_rule">Managing Rules</h2>
-                               
+
 <p>To manage the rules:</p>
 <ol>
 <li>To register a rule:
@@ -631,23 +631,23 @@ context_trigger_destroy(rule);
 <li>
 <p>To enable and disable a rule:</p>
 <ul>
-<li>                           
+<li>
 <p>Enable the rule explicitly with its rule ID:</p>
 <pre class="prettyprint">
 context_trigger_enable_rule(rule_id);
 </pre>
 <p>Note that a rule can be managed only by the application that has registered the rule.</p>
-</li>          
-<li>                           
+</li>
+<li>
 <p>Disable the rule with its rule ID:</p>
 <pre class="prettyprint">
 context_trigger_disable_rule(rule_id);
 </pre>
 </li>
-</ul>          
+</ul>
 </li>
 
-<li>To remove a rule:  
+<li>To remove a rule:
 <p>When no longer needed, delete the rule with the <code>context_trigger_remove_rule()</code> function. Only disabled rules can be deleted.</p>
 <pre class="prettyprint">
 context_trigger_remove_rule(rule_id);
@@ -657,7 +657,7 @@ context_trigger_remove_rule(rule_id);
 
 <h2 id="retrieve_rule" name="retrieve_rule">Retrieving Rules</h2>
 
-<p>This use case shows how to query the application&#39;s own rule IDs, disable the enabled rules, and remove all the rules. Only the owner application can enable, disable, remove, and retrieve the rules.</p>
+<p>This use case shows how to query the application's own rule IDs, disable the enabled rules, and remove all the rules. Only the owner application can enable, disable, remove, and retrieve the rules.</p>
 
 <p>To retrieve all rules:</p>
 <ol>
@@ -672,7 +672,7 @@ context_trigger_get_own_rule_ids(&amp;enabled_rule_ids, &amp;enabled_count, NULL
 /* Disable the enabled rules */
 int i = 0;
 for (i = 0; i &lt; enabled_count; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;context_trigger_disable_rule(enabled_rule_ids[i]);
+    context_trigger_disable_rule(enabled_rule_ids[i]);
 </pre>
 </li>
 <li> Retrieve all the disabled rules owned by the application and remove them:
@@ -684,19 +684,19 @@ context_trigger_get_own_rule_ids(NULL, NULL, &amp;disabled_rule_ids, &amp;disabl
 
 /* Remove the disabled rules */
 for (i = 0; i &lt; disabled_count; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;context_trigger_remove_rule(disabled_rule_ids[i]);
+    context_trigger_remove_rule(disabled_rule_ids[i]);
 </pre>
 </li>
 <li>Free the memory allocated for the enabled and disabled rules:
 <pre class="prettyprint">
 if (enabled_rule_ids) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(enabled_rule_ids);
-&nbsp;&nbsp;&nbsp;&nbsp;enabled_rule_ids = NULL;
+    free(enabled_rule_ids);
+    enabled_rule_ids = NULL;
 }
 
 if (disabled_rule_ids) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(disabled_rule_ids);
-&nbsp;&nbsp;&nbsp;&nbsp;disabled_rule_ids = NULL;
+    free(disabled_rule_ids);
+    disabled_rule_ids = NULL;
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/app_management/app_communication_n.htm b/org.tizen.guides/html/native/app_management/app_communication_n.htm
index 728f67a..c78ab5e 100644 (file)
--- a/org.tizen.guides/html/native/app_management/app_communication_n.htm
+++ b/org.tizen.guides/html/native/app_management/app_communication_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Application Data Exchange</title>  
+       <title>Application Data Exchange</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Application Data Exchange</h1>
@@ -49,7 +49,7 @@
 
 <p>You can package data with a bundle, which is a string-based dictionary abstract data type. You can create bundles, manage their content, access their content through iteration, and encode and decode them.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/app_management/app_controls_n.htm b/org.tizen.guides/html/native/app_management/app_controls_n.htm
index ecb6f61..c12a6aa 100644 (file)
--- a/org.tizen.guides/html/native/app_management/app_controls_n.htm
+++ b/org.tizen.guides/html/native/app_management/app_controls_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Application Controls</title> 
- </head> 
+  <title>Application Controls</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -36,11 +36,11 @@
                        <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#use">Launching Applications Using Extra Data</a></li>
                        <li><a href="#mode">Controlling the Launch Mode</a></li>
-                       <li><a href="#common">Common Application Controls</a></li>                      
+                       <li><a href="#common">Common Application Controls</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Mobile Native</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Wearable Native</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Application_control" target="_blank">Application Control Sample Description</a></li>
                        </ul>
@@ -48,9 +48,9 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Application Controls</h1> 
+<h1>Application Controls</h1>
 
-<p>An application control (app control) is a way of sharing an application&#39;s functionality with other applications. To use another application&#39;s features through application controls reduces your efforts and time to develop your application.</p>
+<p>An application control (app control) is a way of sharing an application's functionality with other applications. To use another application's features through application controls reduces your efforts and time to develop your application.</p>
 
 <p>An application can be launched by the user from the launcher or by another application through the application control. The application control launch request describes either an action to be performed by other applications, or the results of that action. The application can also receive results from the launched application through an application control reply.</p>
 
@@ -74,15 +74,15 @@
 <h2 id="launch">Launch Types</h2>
 
 <p>You can launch an application with an application control using 2 different launch types:</p>
-<ul>   
-   <li>Explicit launch: 
+<ul>
+   <li>Explicit launch:
    <p>Explicit launch means that you launch a specific application with the application ID. When you <a href="#explicit">request an explicit launch</a>:</p>
        <ul>
           <li>If the underlying application launcher framework finds an application matched with the given application ID in the installed application list, it launches the application in a new process. If the matched application is not found, the framework returns the <code>APP_CONTROL_ERROR_APP_NOT_FOUND</code> result. Additional information (such as operation, URI, or MIME type) is not used to select an application for an explicit launch.
           </li>
           <li>If the operation setting in the <code>app_control</code> handle is set to <code>APP_CONTROL_OPERATION_DEFAULT</code>, the application ID must be set. Otherwise the <code>APP_CONTROL_ERROR_INVALID_PARAMETER</code> result is returned.</li>
-       </ul> 
-       
+       </ul>
+
 <div class="note">
        <strong>Note</strong>
        Be careful when using the explicit launch, because if the target application does not exist in the device, you need to handle the <code>APP_CONTROL_ERROR_APP_NOT_FOUND</code> error. If you want to launch any application that supports a certain operation, use the implicit launch.
@@ -131,18 +131,18 @@
 #include &lt;app.h&gt;
 #include &lt;dlog.h&gt;
 
-#define TAG &quot;MY_TAG&quot;
+#define TAG "MY_TAG"
 
 app_control_h app_control;
 
 app_control_create(&amp;app_control);
 app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
-app_control_set_app_id(app_control, &quot;org.tizen.calculator&quot;);
+app_control_set_app_id(app_control, "org.tizen.calculator");
 
 if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a calculator app.&quot;);
+    dlog_print(DLOG_INFO, TAG, "Succeeded to launch a calculator app.");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a calculator app.&quot;);
+    dlog_print(DLOG_ERROR, TAG, "Failed to launch a calculator app.");
 
 app_control_destroy(app_control);
 </pre>
@@ -157,17 +157,17 @@ app_control_destroy(app_control);
 #include &lt;app.h&gt;
 #include &lt;dlog.h&gt;
 
-#define TAG &quot;MY_TAG&quot;
+#define TAG "MY_TAG"
 
 app_control_h app_control;
 
 app_control_create(&amp;app_control);
 app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);
-app_control_set_mime(app_control, &quot;image/jpg&quot;);
+app_control_set_mime(app_control, "image/jpg");
 if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
+    dlog_print(DLOG_INFO, TAG, "Succeeded to launch a viewer app.");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
+    dlog_print(DLOG_ERROR, TAG, "Failed to launch a viewer app.");
 
 app_control_destroy(app_control);
 </pre>
@@ -178,19 +178,19 @@ app_control_destroy(app_control);
 #include &lt;app.h&gt;
 #include &lt;dlog.h&gt;
 
-#define TAG &quot;MY_TAG&quot;
+#define TAG "MY_TAG"
 
 app_control_h app_control;
 
 app_control_create(&amp;app_control);
 app_control_set_operation(app_control, APP_CONTROL_OPERATION_VIEW);
-app_control_set_uri(app_control, &quot;file:///home/myhome/Photos/1_photo.jpg&quot;);
-app_control_set_mime(app_control, &quot;image/*&quot;);
+app_control_set_uri(app_control, "file:///home/myhome/Photos/1_photo.jpg");
+app_control_set_mime(app_control, "image/*");
 
 if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
+    dlog_print(DLOG_INFO, TAG, "Succeeded to launch a viewer app.");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
+    dlog_print(DLOG_ERROR, TAG, "Failed to launch a viewer app.");
 
 app_control_destroy(app_control);
 </pre>
@@ -198,8 +198,8 @@ app_control_destroy(app_control);
 </ul>
 
 <h3 id="resolution">Determining the Application for an Implicit Launch Request</h3>
-       
-<p>In case of an implicit launch, the platform determines which application to launch by &quot;resolving the application control&quot;. This means that the platform considers the given conditions (operation, URI, and MIME type) in the launch request, searches the filters (installed applications with available application controls) in the device, and attempts to find a match.</p>
+
+<p>In case of an implicit launch, the platform determines which application to launch by "resolving the application control". This means that the platform considers the given conditions (operation, URI, and MIME type) in the launch request, searches the filters (installed applications with available application controls) in the device, and attempts to find a match.</p>
 
 <p>The launch request conditions are matched to the available filters using the following logic:</p>
 
@@ -209,11 +209,11 @@ app_control_destroy(app_control);
 
 <li>If the launch request has URI or MIME types as a condition, the comparison is done only among the filters that have URI or MIME types. For example, if the launch request has a URI, but a filter does not, that filter is not added to the result even if the operations are the same. Similarly, if the launch request has MIME types, it is not compared to the filters that have no MIME types.
 
-<p>An exception is applied to the URIs with a &quot;file&quot; scheme for the value. If the launch request URI contains an existing file path and no MIME types are supplied, the filters that have the MIME type of the given file path are also added to the results.</p>
+<p>An exception is applied to the URIs with a "file" scheme for the value. If the launch request URI contains an existing file path and no MIME types are supplied, the filters that have the MIME type of the given file path are also added to the results.</p>
 
 <div class="note">
        <strong>Note</strong>
-       A filter (application) that expects to match with any form of URI and any type of MIME must use <code>&#39;*&#39;</code> and <code>*/*</code> in their application control information in the <code>tizen-manifest.xml</code> file, instead of leaving the value to <code>NULL</code>. Otherwise, the application is discarded by the platform when the application control is resolved.
+       A filter (application) that expects to match with any form of URI and any type of MIME must use <code>'*'</code> and <code>*/*</code> in their application control information in the <code>tizen-manifest.xml</code> file, instead of leaving the value to <code>NULL</code>. Otherwise, the application is discarded by the platform when the application control is resolved.
 </div>
 </li>
 
@@ -230,7 +230,7 @@ app_control_destroy(app_control);
        <li>The MIME type match can be an exact or pattern match according to the value in the filters. MIME type filters are matched with the launch request if:
                <ul>
                        <li>Both MIME types are exactly the same.</li>
-                       <li>MIME type in the launch request and filters has the same type and &#39;*&#39; for the subtype.</li>
+                       <li>MIME type in the launch request and filters has the same type and '*' for the subtype.</li>
                        <li>The filters have <code>*/*</code> for the MIME type.</li>
                </ul>
        </li>
@@ -513,112 +513,112 @@ app_control_destroy(app_control);
 
 <ol>
 <li>Like a conventional Linux application, the main function of the application is its entry point. In the Tizen application, the main task is to hand over control to the application framework by calling the <code>ui_app_main()</code> function:
-  
+
 <pre class="prettyprint">
-bool 
+bool
 app_create(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Take necessary actions before the main event loop starts
-&nbsp;&nbsp;&nbsp;&nbsp;   Initialize UI resources and application data
-&nbsp;&nbsp;&nbsp;&nbsp;   If this function returns true, the application main loop starts
-&nbsp;&nbsp;&nbsp;&nbsp;   If this function returns false, the application terminates
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    /*
+       Take necessary actions before the main event loop starts
+       Initialize UI resources and application data
+       If this function returns true, the application main loop starts
+       If this function returns false, the application terminates
+    */
+    return true;
 }
 
 void
 app_control(app_control_h app_control, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the launch request */
+    /* Handle the launch request */
 }
 
 void
 app_pause(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take necessary actions when application becomes invisible */
+    /* Take necessary actions when application becomes invisible */
 }
 
 void
 app_resume(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take necessary actions when application becomes visible */
+    /* Take necessary actions when application becomes visible */
 }
 
 void
 app_terminate(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release all resources */
+    /* Release all resources */
 }
 
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;struct appdata ad;
+    struct appdata ad;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback;
+    ui_app_lifecycle_callback_s event_callback;
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+    event_callback.create = app_create;
+    event_callback.app_control = app_control;
+    event_callback.pause = app_pause;
+    event_callback.resume = app_resume;
+    event_callback.terminate = app_terminate;
 
-&nbsp;&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));
+    memset(&amp;ad, 0x0, sizeof(struct appdata));
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
 }
 </pre>
 </li>
 <li>The <code>ui_app_main()</code> function initializes the application and starts the main loop.
 <p>It takes 4 parameters and uses them to initialize the application. The <code>argc</code> and <code>argv</code> parameters contain the values from the application framework, and you must never change their values. The third parameter is a state transition handler that is responsible for managing the state transitions the application goes through while it is running. The fourth parameter is application data to be passed to each state handler.</p>
 </li>
-<li>When the <code>ui_app_main()</code> is first invoked, the application moves from the ready state to the created state, and must initialize itself. During this transition, the application framework calls the application&#39;s <code>app_create_cb()</code> state transition callback just before the application enters the main loop. Within the registered callback, you must initialize the application resources and create the main window.
+<li>When the <code>ui_app_main()</code> is first invoked, the application moves from the ready state to the created state, and must initialize itself. During this transition, the application framework calls the application's <code>app_create_cb()</code> state transition callback just before the application enters the main loop. Within the registered callback, you must initialize the application resources and create the main window.
 <p>If the <code>app_create_cb()</code> callback function returns <code>false</code>, the application moves to the terminated state. If it returns <code>true</code>, the application enters the main loop.</p>
 </li>
-<li>Just after the application enters the main loop, the application framework calls the application&#39;s <code>app_control_cb()</code> callback.
+<li>Just after the application enters the main loop, the application framework calls the application's <code>app_control_cb()</code> callback.
 
 <p>The callback is passed to the <code>app_control</code> handle containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by other application. The application is always responsible for checking the content of the <code>app_control</code> handle and responding appropriately. The content of the <code>app_control</code> handle can be empty, if the application is launched by the user from the launcher.</p>
 
 <p>If the application wants to return the result of the application control operation to the application that originally sent the launch request, the result can be sent with the <code>app_control_reply_to_launch_request()</code> function.</p>
 
 <pre class="prettyprint">
-static void 
+static void
 app_control(app_control_h app_control, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;char *operation;
-&nbsp;&nbsp;&nbsp;&nbsp;char *uri;
-&nbsp;&nbsp;&nbsp;&nbsp;char *mime_type;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h reply;
-&nbsp;&nbsp;&nbsp;&nbsp;char *app_id;
-
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, &amp;operation);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_uri(app_control, &amp;uri);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (uri &amp;&amp; !strcmp(mime_type, &quot;image/jpg&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display_image_file(ad, uri); /* Display a specific image file */
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_CREATE_CONTENT)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(mime_type, &quot;text/plain&quot;)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;reply);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_get_app_id(&amp;app_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the value of APP_CONTROL_DATA_SELECTED to give to caller */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(reply, APP_CONTROL_DATA_SELECTED, app_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Reply to caller */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_reply_to_launch_request(reply, app_control,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_CONTROL_RESULT_SUCCEEDED);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(reply);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    struct appdata *ad = (struct appdata *)user_data;
+    char *operation;
+    char *uri;
+    char *mime_type;
+    app_control_h reply;
+    char *app_id;
+
+    app_control_get_operation(app_control, &amp;operation);
+
+    if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW)) {
+        app_control_get_uri(app_control, &amp;uri);
+        app_control_get_mime(app_control, &amp;mime_type);
+
+        if (uri &amp;&amp; !strcmp(mime_type, "image/jpg"))
+            display_image_file(ad, uri); /* Display a specific image file */
+    }
+
+    if (!strcmp(operation, APP_CONTROL_OPERATION_CREATE_CONTENT)) {
+        app_control_get_mime(app_control, &amp;mime_type);
+
+        if (!strcmp(mime_type, "text/plain")) {
+            app_control_create(&amp;reply);
+
+            app_get_app_id(&amp;app_id);
+            /* Set the value of APP_CONTROL_DATA_SELECTED to give to caller */
+            app_control_add_extra_data(reply, APP_CONTROL_DATA_SELECTED, app_id);
+            /* Reply to caller */
+            app_control_reply_to_launch_request(reply, app_control,
+                                                APP_CONTROL_RESULT_SUCCEEDED);
+
+            app_control_destroy(reply);
+        }
+    }
 }
 </pre>
 
@@ -635,21 +635,21 @@ app_control(app_control_h app_control, void *user_data)
 #include &lt;app.h&gt;
 #include &lt;dlog.h&gt;
 
-#define TAG &quot;MY_TAG&quot;
+#define TAG "MY_TAG"
 
 app_control_h app_control;
 
 app_control_create(&amp;app_control);
 
 app_control_set_operation(app_control, APP_CONTROL_OPERATION_CREATE_CONTENT);
-app_control_set_mime(app_control, &quot;text/plain&quot;);
+app_control_set_mime(app_control, "text/plain");
 
 /* Set callback function, app_control_result, to get the launch result */
 if (app_control_send_launch_request(app_control, app_control_result, NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;== APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded: the application is launched.&quot;);
+    == APP_CONTROL_ERROR_NONE)
+    dlog_print(DLOG_INFO, TAG, "Succeeded: the application is launched.");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch an application.&quot;);
+    dlog_print(DLOG_ERROR, TAG, "Failed to launch an application.");
 
 app_control_destroy(app_control);
 </pre>
@@ -661,26 +661,26 @@ app_control_destroy(app_control);
 #include &lt;app.h&gt;
 #include &lt;dlog.h&gt;
 
-#define TAG &quot;MY_TAG&quot;
+#define TAG "MY_TAG"
 
 /* Callback function to get result */
 static void
 app_control_result(app_control_h request, app_control_h reply, app_control_result_e result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                   void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *value;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == APP_CONTROL_RESULT_SUCCEEDED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the value of APP_CONTROL_DATA_SELECTED sent by callee */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;value)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[app_control_result_cb] Succeeded: value(%s)&quot;, value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] Failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;[app_control_result_cb] APP_CONTROL_RESULT_FAILED.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    char *value;
+
+    if (result == APP_CONTROL_RESULT_SUCCEEDED) {
+        /* Get the value of APP_CONTROL_DATA_SELECTED sent by callee */
+        if (app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;value)
+            == APP_CONTROL_ERROR_NONE)
+            dlog_print(DLOG_INFO, TAG,
+                       "[app_control_result_cb] Succeeded: value(%s)", value);
+        else
+            dlog_print(DLOG_ERROR, TAG, "[app_control_result_cb] Failed");
+    } else {
+        dlog_print(DLOG_ERROR, TAG, "[app_control_result_cb] APP_CONTROL_RESULT_FAILED.");
+    }
 }
 </pre>
 
@@ -689,12 +689,12 @@ app_control_result(app_control_h request, app_control_h reply, app_control_resul
 <p>You can allow other applications to launch your application and use your application features through application controls by exporting your application control functionalities. To allow other applications to launch your application implicitly without the application ID, declare your application control information in the <code>tizen-manifest.xml</code> file:</p>
        <pre class="prettyprint">
 &lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/xhtml+xml&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;http://test.com&quot;/&gt;
+   &lt;mime name="application/xhtml+xml"/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/view"/&gt;
+   &lt;uri name="http://test.com"/&gt;
 &lt;/app-control&gt;
 &lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/call&quot;/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/call"/&gt;
 &lt;/app-control&gt;
 </pre>
 
@@ -708,12 +708,12 @@ app_control_result(app_control_h request, app_control_h reply, app_control_resul
 
 <div class="note">
        <strong>Note</strong>
-       The URI or MIME type can contain wildcards, such as &#39;*&#39;, to match against given conditions in the app control:
+       The URI or MIME type can contain wildcards, such as '*', to match against given conditions in the app control:
        <ul><li>In the MIME type, you can use 2 types of wildcards: <code>image/*</code> and <code>*/*</code>.</li>
-       <li>In the URI, a more complex pattern of wildcards with similar semantics as the standard <code>glob()</code> function is available: &#39;*&#39; matches an arbitrary, possibly empty, string, and &#39;?&#39; matches an arbitrary character. Unlike in the <code>glob()</code> function, the &#39;/&#39; character can be matched by the wildcards. There are no [...] character ranges, and the wildcards &#39;*&#39; and &#39;?&#39; cannot be escaped to include them literally in a pattern.</li></ul>
+       <li>In the URI, a more complex pattern of wildcards with similar semantics as the standard <code>glob()</code> function is available: '*' matches an arbitrary, possibly empty, string, and '?' matches an arbitrary character. Unlike in the <code>glob()</code> function, the '/' character can be matched by the wildcards. There are no [...] character ranges, and the wildcards '*' and '?' cannot be escaped to include them literally in a pattern.</li></ul>
 </div>
 
-<p>You can specify the application control information of your application in the <a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio.</p>  
+<p>You can specify the application control information of your application in the <a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio.</p>
 
 <h2 id="group" name="group">Application Group Management</h2>
 <p>You can <a href="#mode">define the application launch mode</a> and group your applications into entities that can be managed together.</p>
@@ -724,15 +724,15 @@ app_control_result(app_control_h request, app_control_h reply, app_control_resul
        <p>When an application is launched through an app control, its launch mode defines its behavior:</p>
                <ul><li>The single launch mode means that the application is launched as a main application (in a new group).</li>
                <li>The caller launch mode means that the application is launched as a sub application belonging to the same group as the caller application who is causing the application to be launched.</li></ul>
-       <p>You can set the application launch mode <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#launch_mode">in the manifest file</a> using the <code>launch_mode</code> attribute of the <code>&lt;ui-application&gt;</code> element. If the launch mode is set to <code>caller</code>, the application that calls the app control can define the launch mode for the called application using the <code>app_control_set_launch_mode()</code> function. However, if the called application has set its launch mode in its manifest file to <code>single</code>, that setting overrides the caller application&#39;s launch mode request.</p>
+       <p>You can set the application launch mode <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#launch_mode">in the manifest file</a> using the <code>launch_mode</code> attribute of the <code>&lt;ui-application&gt;</code> element. If the launch mode is set to <code>caller</code>, the application that calls the app control can define the launch mode for the called application using the <code>app_control_set_launch_mode()</code> function. However, if the called application has set its launch mode in its manifest file to <code>single</code>, that setting overrides the caller application's launch mode request.</p>
        </li>
        <li>Managing the application group
        <p>Applications in a same group act as if they are in 1 stack. For example, if application A wants to send an email using email application B, the application A can launch the email application B, making the email application B a sub application in the same group as the application A. When both applications are running, and the user presses the home button, both applications are hidden. When the user later resumes the caller application (application A), the email application B is shown on top of the caller application.</p>
        <p>If an application is launched in a group, it can be terminated by the main (first) application in the group. If the main application is terminated or killed, the sub applications in the group are terminated automatically (they can be terminated by the framework even if they are hidden).</p>
 
 <p align="center"><strong>Figure: Group behavior</strong></p>
-<p align="center"><img alt="Group behavior" src="../../images/app_group_behavior.png" /></p> 
-       
+<p align="center"><img alt="Group behavior" src="../../images/app_group_behavior.png" /></p>
+
        </li>
 </ul>
 
@@ -743,7 +743,7 @@ app_control_result(app_control_h request, app_control_h reply, app_control_resul
 <p>To use the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -765,7 +765,7 @@ app_control_result(app_control_h request, app_control_h reply, app_control_resul
 <pre class="prettyprint">
 ret = app_control_create(&amp;app);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_create() failed. err = %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "app_control_create() failed. err = %d", ret);
 </pre>
 </li>
 <li>
@@ -774,12 +774,12 @@ if (ret != APP_CONTROL_ERROR_NONE)
 <pre class="prettyprint">
 ret = app_control_set_operation(app, APP_CONTROL_OPERATION_VIEW);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;app_control_set_operation() failed. err = %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "app_control_set_operation() failed. err = %d", ret);
 
-ret = app_control_set_mime(app, &quot;image/jpeg&quot;);
+ret = app_control_set_mime(app, "image/jpeg");
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_set_mime() failed. err = %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "app_control_set_mime() failed. err = %d", ret);
 </pre>
 
 <p>For more information on the common application services and the extra data related to them, see <a href="common_appcontrol_n.htm">Common Application Controls</a>.</p>
@@ -789,8 +789,8 @@ if (ret != APP_CONTROL_ERROR_NONE)
 <pre class="prettyprint">
 ret = app_control_add_extra_data(app, Your Message Key, message);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;app_control_add_extra_data() failed. err = %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "app_control_add_extra_data() failed. err = %d", ret);
 </pre>
 </li>
 <li>
@@ -799,8 +799,8 @@ if (ret != APP_CONTROL_ERROR_NONE)
 <pre class="prettyprint">
 ret = app_control_send_launch_request(app, NULL, NULL);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;app_control_send_launch_request() failed. err = %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "app_control_send_launch_request() failed. err = %d", ret);
 </pre>
 
 <div class="note">
@@ -816,33 +816,33 @@ if (ret != APP_CONTROL_ERROR_NONE)
 bool
 _app_control_extra_data_cb(app_control_h app_control, const char *key, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *value;
+    int ret;
+    char *value;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_get_extra_data(app, key, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;app_control_get_extra_data() failed. err = %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[value] %s&quot;, value);
+    ret = app_control_get_extra_data(app, key, &amp;value);
+    if (ret != APP_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "app_control_get_extra_data() failed. err = %d", ret);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "[value] %s", value);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 ret = app_control_foreach_extra_data(app, _app_control_extra_data_cb, 0);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;app_control_foreach_extra_data() failed. err = %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "app_control_foreach_extra_data() failed. err = %d", ret);
 </pre>
 </li>
 
 <li>
-  <p>When your work with the application control is finished, clean up. 
-       To do this, pass the <code>app_control</code> handle to the 
+  <p>When your work with the application control is finished, clean up.
+       To do this, pass the <code>app_control</code> handle to the
        <code>app_control_destroy()</code> function.</p>
 <pre class="prettyprint">
 ret = app_control_destroy(app);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_destroy() failed. err = %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "app_control_destroy() failed. err = %d", ret);
 </pre>
 </li>
 </ol>
@@ -850,7 +850,7 @@ if (ret != APP_CONTROL_ERROR_NONE)
  <h2 id="mode" name="mode">Controlling the Launch Mode</h2>
 
 <p>In this use case, the caller application has a <strong>Launch</strong> button. When it is clicked, an application control is used to launch a sub application within the same group.</p>
- 
+
 <p>To control the launch mode:</p>
 <ol>
 <li>Create the UI with the <strong>Launch</strong> button:
@@ -858,38 +858,38 @@ if (ret != APP_CONTROL_ERROR_NONE)
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bigbox;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bx;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *bt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;bigbox = elm_box_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(bigbox, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, bigbox);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(bigbox);
-
-&nbsp;&nbsp;&nbsp;&nbsp;bx = elm_box_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(bigbox, bx);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(bx);
-
-&nbsp;&nbsp;&nbsp;&nbsp;bt = elm_label_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, &quot;AGT3&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(bx, bt);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(bt);
-
-&nbsp;&nbsp;&nbsp;&nbsp;bt = elm_button_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(bt, &quot;Launch&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(bx, bt);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(bt);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(bt, &quot;clicked&quot;, button_click_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+    Evas_Object *bigbox;
+    Evas_Object *bx;
+    Evas_Object *bt;
+
+    ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+    elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+    evas_object_smart_callback_add(ad-&gt;win, "delete,request",
+                                   win_delete_request_cb, NULL);
+    eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+    bigbox = elm_box_add(ad-&gt;win);
+    evas_object_size_hint_weight_set(bigbox, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(ad-&gt;win, bigbox);
+    evas_object_show(bigbox);
+
+    bx = elm_box_add(ad-&gt;win);
+    elm_box_pack_end(bigbox, bx);
+    evas_object_show(bx);
+
+    bt = elm_label_add(ad-&gt;win);
+    elm_object_text_set(bt, "AGT3");
+    elm_box_pack_end(bx, bt);
+    evas_object_show(bt);
+
+    bt = elm_button_add(ad-&gt;win);
+    elm_object_text_set(bt, "Launch");
+    elm_box_pack_end(bx, bt);
+    evas_object_show(bt);
+    evas_object_smart_callback_add(bt, "clicked", button_click_cb, NULL);
+
+    evas_object_show(ad-&gt;win);
 }</pre></li>
 
 <li>When the button is clicked, use an application control to launch the sub application.
@@ -898,21 +898,21 @@ create_base_gui(appdata_s *ad)
 static void
 button_click_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h h;
+    app_control_h h;
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;h);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(h, &quot;http://tizen.org/appcontrol/operation/view&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_mime(h, &quot;application/pdf&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(h, APP_CONTROL_LAUNCH_MODE_GROUP);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_send_launch_request(h, NULL, NULL);
+    app_control_create(&amp;h);
+    app_control_set_operation(h, "http://tizen.org/appcontrol/operation/view");
+    app_control_set_mime(h, "application/pdf");
+    app_control_set_launch_mode(h, APP_CONTROL_LAUNCH_MODE_GROUP);
+    app_control_send_launch_request(h, NULL, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(h);
+    app_control_destroy(h);
 }
 
 static void
 app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the launch request */
+    /* Handle the launch request */
 }
 </pre>
 </li>
@@ -968,4 +968,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/app_icons_n.htm b/org.tizen.guides/html/native/app_management/app_icons_n.htm
index 291500f..075da11 100644 (file)
--- a/org.tizen.guides/html/native/app_management/app_icons_n.htm
+++ b/org.tizen.guides/html/native/app_management/app_icons_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Application Icons</title> 
- </head> 
+  <title>Application Icons</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -58,11 +58,11 @@
        <li>Adding a shortcut <strong>in mobile applications only</strong>
        <p>You can <a href="#add">add a shortcut</a> to the home screen to launch an application.</p></li>
        <li>Adding a widget <strong>in mobile applications only</strong>
-       <p>If you have created a widget application, you can <a href="#add_widget">add the widget</a> to the home screen.</p></li> 
+       <p>If you have created a widget application, you can <a href="#add_widget">add the widget</a> to the home screen.</p></li>
 </ul>
 
 
-   <p align="center"><strong>Figure: Badges and shortcuts</strong></p> 
+   <p align="center"><strong>Figure: Badges and shortcuts</strong></p>
    <p align="center"><img alt="Shortcuts" src="../../images/shortcut.png" /> <img alt="Badges" src="../../images/badge.png" /></p>
 
 <h2 id="prerequisites">Prerequisites</h2>
@@ -74,7 +74,7 @@
 <p>To use the Badge API (in <a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/notification&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/notification&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -94,7 +94,7 @@
 <pre class="prettyprint">
 static int ret = 0;
 
-#define TEST_PKG &quot;org.tizen.badgeapp&quot;
+#define TEST_PKG "org.tizen.badgeapp"
 </pre>
 </li></ol>
 </li>
@@ -103,7 +103,7 @@ static int ret = 0;
 <li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a> API, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/shortcut&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/shortcut&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -118,19 +118,19 @@ static int ret = 0;
  <h2 id="create" name="create">Creating and Removing a Badge</h2>
 
 
-  
- 
-<p>To create and remove badges:</p> 
- 
+
+
+<p>To create and remove badges:</p>
+
 <ul><li>
 <p>To create a badge for an application, call the <code>badge_add()</code> function. The parameter defines the application for which the badge is added. If the application is adding a badge for itself, the parameter can be null.</p>
 
 <pre class="prettyprint">
 ret = badge_add(TEST_PKG);
 if (ret != BADGE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
-<p>The application that creates the badge can also update and remove it. When applications are signed with the same certificate, they can control each other&#39;s badges.</p>
+<p>The application that creates the badge can also update and remove it. When applications are signed with the same certificate, they can control each other's badges.</p>
 <p>If an application not signed with the same certificate must be allowed <a href="#manage">manage a badge</a>, use the <code>badge_add()</code> function with a writable application ID. The writable application ID enables another application to control your application to manage the badge. You can also configure your application to handle the badge itself.</p>
 </li>
 
@@ -140,7 +140,7 @@ if (ret != BADGE_ERROR_NONE)
 <pre class="prettyprint">
 ret = badge_remove(TEST_PKG);
 if (ret != BADGE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li></ul>
 
  <h2 id="manage" name="manage">Managing the Badge</h2>
@@ -154,7 +154,7 @@ if (ret != BADGE_ERROR_NONE)
 unsigned int count = 0;
 ret = badge_get_count(TEST_PKG, &amp;count);
 if (ret != BADGE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -163,24 +163,24 @@ if (ret != BADGE_ERROR_NONE)
 <pre class="prettyprint">
 ret = badge_set_count(TEST_PKG, count+1);
 if (ret != BADGE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
-<li>Get the display attribute and check whether the badge is visible with the <code>badge_get_display()</code> function. 
+<li>Get the display attribute and check whether the badge is visible with the <code>badge_get_display()</code> function.
 <p>The parameters are the application which owns the badge, and the value of the display attribute (1 = badge is visible, 0 = badge is hidden).</p>
 <pre class="prettyprint">
 unsigned int is_displayed = false;
 ret = badge_get_display(TEST_PKG, &amp;is_displayed);
 if (ret != BADGE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
-<li>Set the display attribute with the <code>badge_set_display()</code> function to hide or show the badge. 
+<li>Set the display attribute with the <code>badge_set_display()</code> function to hide or show the badge.
 <p>The parameters are the application which owns the badge, and the display attribute (1 = badge is visible, 0 = badge is hidden).</p>
 <pre class="prettyprint">
 ret = badge_set_display(TEST_PKG, 1);
 if (ret != BADGE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 </ul>
@@ -193,8 +193,8 @@ if (ret != BADGE_ERROR_NONE)
 <li><p>Add a shortcut using the <code>shortcut_add_to_home()</code> function:</p>
 
 <pre class="prettyprint">
-shortcut_add_to_home(&quot;Music Player&quot;, LAUNCH_BY_APP, NULL, &quot;/path/to/icon&quot;, 1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result_cb, NULL);
+shortcut_add_to_home("Music Player", LAUNCH_BY_APP, NULL, "/path/to/icon", 1,
+                     result_cb, NULL);
 </pre>
 
 <p>The third parameter can be set to <code>NULL</code> to add a default icon for the application.</p>
@@ -211,10 +211,10 @@ shortcut_add_to_home(&quot;Music Player&quot;, LAUNCH_BY_APP, NULL, &quot;/path/
 static int
 result_cb(int ret, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* No error detected */
+    if (ret &lt; 0)
+        /* Error handling */
+    else
+        /* No error detected */
 }
 </pre></li></ol>
 
@@ -226,9 +226,9 @@ result_cb(int ret, void *data)
 <li><p>Add a widget with the <code>shortcut_add_to_home_widget()</code> function:</p>
 
 <pre class="prettyprint">
-shortcut_add_to_home_widget(&quot;alter_name&quot;, WIDGET_SIZE_1x1, &quot;org.tizen.testwidget&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;/opt/media/Pictures/alter_icon.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0f, 0, result_cb, NULL);
+shortcut_add_to_home_widget("alter_name", WIDGET_SIZE_1x1, "org.tizen.testwidget",
+                            "/opt/media/Pictures/alter_icon.png",
+                            -1.0f, 0, result_cb, NULL);
 </pre>
 
 <p>To add a widget, you have to know the widget ID and supported sizes. The alter name and icon are shown when the widget is not available.</p></li>
@@ -238,10 +238,10 @@ shortcut_add_to_home_widget(&quot;alter_name&quot;, WIDGET_SIZE_1x1, &quot;org.t
 static int
 result_cb(int ret, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* No error detected */
+    if (ret &lt; 0)
+        /* Error handling */
+    else
+        /* No error detected */
 }
 </pre></li></ol>
 
@@ -267,4 +267,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/app_management_cover_n.htm b/org.tizen.guides/html/native/app_management/app_management_cover_n.htm
index fbc94c4..db4cc28 100644 (file)
--- a/org.tizen.guides/html/native/app_management/app_management_cover_n.htm
+++ b/org.tizen.guides/html/native/app_management/app_management_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Application Management</title>  
+       <title>Application Management</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -31,7 +31,7 @@
                        <li><a href="../../../../org.tizen.training/html/native/feature/app_contentshare_n.htm">Creating Applications with Content Sharing</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Application Management</h1>
@@ -61,7 +61,7 @@
 
 <li><a href="app_controls_n.htm">Application Controls</a>
 
-<p>The application controls allow you to share an application&#39;s functionality. To use another application&#39;s features through application controls reduces your efforts and time to develop your own application. You can also allow other applications to share your functionality by exporting your application control functionalities.</p></li>
+<p>The application controls allow you to share an application's functionality. To use another application's features through application controls reduces your efforts and time to develop your own application. You can also allow other applications to share your functionality by exporting your application control functionalities.</p></li>
 
 <li><a href="app_communication_n.htm">Application Data Exchange</a>
 
@@ -79,7 +79,7 @@
 
 <p>You can use events to advertise your application activities, or listen to events from other applications or the system. You can broadcast events from your application to all who want to listen. You can also subscribe to events to keep track of what is happening in the system or other applications.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/app_management/app_manager_n.htm b/org.tizen.guides/html/native/app_management/app_manager_n.htm
index b4d58de..4b4dfd0 100644 (file)
--- a/org.tizen.guides/html/native/app_management/app_manager_n.htm
+++ b/org.tizen.guides/html/native/app_management/app_manager_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Application Manager</title> 
- </head> 
+  <title>Application Manager</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -32,7 +32,7 @@
                        <li><a href="#filter">Getting Information on Filtered Applications</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc"> 
+               <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Wearable Native</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Simple_home" target="_blank">Simple Home Sample Description</a></li>
@@ -56,7 +56,7 @@
 <p>For more information on the functions that use the <code>app_info_h</code> and <code>app_info_filter_h</code> handles, see the Application Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__INFO__MODULE.html">wearable</a> applications).</p>
 </li>
 </ul>
-<p>Iterator functions are used to travel through a list of applications. The <code>app_manager_foreach_app_context()</code> function is used in running applications and the <code>app_manager_foreach_app_info()</code> function is used in available applications. Each function calls a callback function (<code>app_manager_app_context_cb()</code> or <code>app_manager_app_info_cb()</code>), passing the handle for each application.</p> 
+<p>Iterator functions are used to travel through a list of applications. The <code>app_manager_foreach_app_context()</code> function is used in running applications and the <code>app_manager_foreach_app_info()</code> function is used in available applications. Each function calls a callback function (<code>app_manager_app_context_cb()</code> or <code>app_manager_app_info_cb()</code>), passing the handle for each application.</p>
 
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the functions and data types of the Application Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">wearable</a> applications), include the <code>&lt;app_manager.h&gt;</code> header file in your application:</p>
@@ -69,7 +69,7 @@
 <p>To get the running application context and its details, and to operate on the context:</p>
 
 <ol>
-<li>Get the context of the currently running application with the <code>app_manager_get_app_context()</code> function. Its parameters are the ID of the application from which the context is being obtained, and the handle (<code>app_context_h*</code>) to the application context which is filled with the received context. 
+<li>Get the context of the currently running application with the <code>app_manager_get_app_context()</code> function. Its parameters are the ID of the application from which the context is being obtained, and the handle (<code>app_context_h*</code>) to the application context which is filled with the received context.
 <p>When an application is not running, it is impossible to get its context.</p>
 
 
@@ -77,7 +77,7 @@
 app_context_h app_context = NULL;
 
 int ret = app_manager_get_app_context(Your App ID, &amp;app_context);
-</pre> 
+</pre>
 
 <p>If the function returns <code>APP_MANAGER_ERROR_NONE</code>, it has executed correctly and the <code>app_context</code> variable now contains the handle to the defined application context.</p></li>
 
@@ -102,9 +102,9 @@ bool terminated = false;
 ret = app_context_is_terminated(app_context, &amp;terminated);
 
 if (false == terminated)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Application is running */
+    /* Application is running */
 else
-&nbsp;&nbsp;&nbsp;&nbsp;/* Application is terminated */
+    /* Application is terminated */
 </pre>
 </li>
 <li><p>Clone the given context handle:</p>
@@ -120,20 +120,20 @@ bool equal = false;
 ret = app_context_is_equal(app_context, app_context_cloned, &amp;equal);
 
 if (equal)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Contexts are equal */
+    /* Contexts are equal */
 else
-&nbsp;&nbsp;&nbsp;&nbsp;/* Contexts are not equal */
+    /* Contexts are not equal */
 </pre></li>
 </ul></li>
 <li><p>When you no longer need the application context, call the <code>app_context_destroy()</code> function to remove the handle and release all resources to prevent memory leaks:</p>
 
 <pre class="prettyprint">
 if (app_context) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_context_destroy(app_context);
-&nbsp;&nbsp;&nbsp;&nbsp;if (APP_MANAGER_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = app_context_destroy(app_context);
+    if (APP_MANAGER_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_context = NULL;
+        app_context = NULL;
 }
 </pre> </li>
 </ol>
@@ -153,7 +153,7 @@ int ret = app_info_filter_create(&amp;app_info_filter);
 <li>Add filter rules:
 
 <pre class="prettyprint">
-ret = app_info_filter_add_string(app_info_filter, PACKAGE_INFO_PROP_APP_TYPE, &quot;capp&quot;);
+ret = app_info_filter_add_string(app_info_filter, PACKAGE_INFO_PROP_APP_TYPE, "capp");
 </pre></li>
 
 <li>Call the <code>app_info_filter_foreach_appinfo()</code> function and use its callback to retrieve all filtered applications and print their information:
@@ -162,33 +162,33 @@ ret = app_info_filter_add_string(app_info_filter, PACKAGE_INFO_PROP_APP_TYPE, &q
 bool
 filter_cb(app_info_filter_h app_info, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *app_id = NULL;
+    char *app_id = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (app_info_get_app_id(app_info, &amp;app_id))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    if (app_info_get_app_id(app_info, &amp;app_id))
+        return false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;app_id \t= [%s]\n&quot;, app_id);
+    dlog_print(DLOG_INFO, TAG, "app_id \t= [%s]\n", app_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(app_id);
+    free(app_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 ret = app_info_filter_foreach_appinfo(filter_cb, NULL);
 if (ret != APP_MANAGER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;foreach_app_info_filter error: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, TAG, "foreach_app_info_filter error: %d", ret);
 </pre></li>
 <li>When you no longer need the filter, call the <code>app_info_filter_destroy()</code> function to remove the handle and release all resources:
 
 <pre class="prettyprint">
 if (app_info_filter_h) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_info_filter_destroy(app_info_filter_h);
-&nbsp;&nbsp;&nbsp;&nbsp;if (APP_MANAGER_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = app_info_filter_destroy(app_info_filter_h);
+    if (APP_MANAGER_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_info_filter_h = NULL;
+        app_info_filter_h = NULL;
 }
 </pre> </li>
 </ol>
@@ -215,4 +215,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/app_preferences_n.htm b/org.tizen.guides/html/native/app_management/app_preferences_n.htm
index d3b0d16..9baeb1c 100644 (file)
--- a/org.tizen.guides/html/native/app_management/app_preferences_n.htm
+++ b/org.tizen.guides/html/native/app_management/app_preferences_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -29,23 +29,23 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#prerequisites">Prerequisites</a></li>
-                       <li><a href="#manage_pref">Managing Application Preferences</a></li>                    
+                       <li><a href="#manage_pref">Managing Application Preferences</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">Preference API for Mobile Native</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">Preference API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PREFERENCE__MODULE.html">Preference API for Wearable Native</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Preference" target="_blank">Preference Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
        <h1>Application Preferences</h1>
 
 
-<p>You can manage application preferences by setting and getting them. You can also share any stored preference data among the applications in the same package.</p> 
+<p>You can manage application preferences by setting and getting them. You can also share any stored preference data among the applications in the same package.</p>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -78,7 +78,7 @@
 
 
 <pre class="prettyprint">
-const char *integer_key = &quot;integer_key&quot;;
+const char *integer_key = "integer_key";
 int integer_value = 1;
 int integer_output;
 
@@ -99,8 +99,8 @@ preference_get_int(integer_key, &amp;integer_output);
 
 <p>Release the value returned by the get function using the <code>free()</code> function.</p>
 <pre class="prettyprint">
-const char *string_key = &quot;string_key&quot;;
-const char *string_value = &quot;Sample content&quot;;
+const char *string_key = "string_key";
+const char *string_value = "Sample content";
 char *string_output;
 bool existing;
 
@@ -128,14 +128,14 @@ preference_set_changed_cb(integer_key, preference_changed_cb_impl, &amp;previous
 void
 preference_changed_cb_impl(const char *key, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int integer_output = 0;
+    int ret = 0;
+    int integer_output = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[preference_changed_cb_impl]\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;preference_get_int(key, &amp;integer_output);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "[preference_changed_cb_impl]\n");
+    preference_get_int(key, &amp;integer_output);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Key: %s has changed its value to %d \n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key, integer_output);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Key: %s has changed its value to %d \n",
+               key, integer_output);
 }
 </pre>
 
@@ -149,15 +149,15 @@ preference_unset_changed_cb(const char *key);
 <li>To list all records, use the foreach function. The function calls a specific callback function for each key-value pair in the database. You can pass additional data to the function in the <code>user_data</code> field.
 
 <p>If the callback function returns <code>false</code>, or if all the records have been opened, the foreach function ends.</p>
- 
+
 <pre class="prettyprint">
 bool
 preference_foreach_item_cb(const char *key, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[preference_foreach_item_cb]\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Key found: %s\n&quot;, key);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "[preference_foreach_item_cb]\n");
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Key found: %s\n", key);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 preference_foreach_item(preference_foreach_item_cb, NULL);
diff --git a/org.tizen.guides/html/native/app_management/app_resources_n.htm b/org.tizen.guides/html/native/app_management/app_resources_n.htm
index e71517a..f4930c3 100644 (file)
--- a/org.tizen.guides/html/native/app_management/app_resources_n.htm
+++ b/org.tizen.guides/html/native/app_management/app_resources_n.htm
@@ -5,15 +5,15 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Application Resources</title> 
- </head> 
+  <title>Application Resources</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
@@ -64,8 +64,8 @@
 <li>Using the resources
 <p>You can use different resources (such as images, layouts, and sounds) between devices with different device specifications. For example:</p>
 <ul>
-<li>To set a different button image for an application depending on the device&#39;s current language setting, use the <code>app_resource_manager_get()</code> function to <a href="#get_path">get the appropriate resource file path</a>.</li>
-<li>To use different images depending on the device&#39;s screen resolution (DPI), use the same <code>app_resource_manager_get()</code> function to get the appropriate image file path.</li>
+<li>To set a different button image for an application depending on the device's current language setting, use the <code>app_resource_manager_get()</code> function to <a href="#get_path">get the appropriate resource file path</a>.</li>
+<li>To use different images depending on the device's screen resolution (DPI), use the same <code>app_resource_manager_get()</code> function to get the appropriate image file path.</li>
 </ul>
 </li>
 <li>Testing the resources
@@ -80,7 +80,7 @@
 </ul>
 
 <h2 id="prerequisites">Prerequisites</h2>
-       
+
 <p>To use the functions and resource types of the Resource Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__RESOURCE__MANAGER__MODULE.html">wearable</a> applications), include the <code>&lt;app_resource_manager.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;app_resource_manager.h&gt;
@@ -121,7 +121,7 @@
 
 <p>To get the appropriate resource file path in your code:</p>
 <ol>
-<li>Create the resource manager using the <code>app_resource_manager_init()</code> function. 
+<li>Create the resource manager using the <code>app_resource_manager_init()</code> function.
 <pre class="prettyprint">
 app_resource_manager_init();
 </pre>
@@ -130,7 +130,7 @@ app_resource_manager_init();
 <li>Get the resource path using the <code>app_resource_manager_get()</code> function. You need 2 parameters:
 
 <ul>
-<li>Resource ID 
+<li>Resource ID
 <p>The resource ID is an identifier for a specific resource. It consists of subdirectories and filenames including its extension. The same resources are located in different locations with the same filename for supporting multiple devices.</p>
 </li>
 <li>Resource type
@@ -144,18 +144,18 @@ app_resource_manager_init();
 Evas_Object *img
 char *img_path = NULL;
 
-app_resource_manager_get(APP_RESOURCE_TYPE_IMAGE, &quot;flag.png&quot;, &amp;img_path);
+app_resource_manager_get(APP_RESOURCE_TYPE_IMAGE, "flag.png", &amp;img_path);
 
 Evas* canvas = evas_object_evas_get(ad-&gt;conform);
 img = evas_object_image_filled_add(canvas);
 
 if (img_path != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, img_path, NULL);
+    evas_object_image_file_set(img, img_path, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 200);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(img);
-&nbsp;&nbsp;&nbsp;&nbsp;free(img_path);
+    evas_object_move(img, 50, 50);
+    evas_object_resize(img, 300, 200);
+    evas_object_show(img);
+    free(img_path);
 }
 </pre>
 <p>If the function returns <code>APP_RESOURCE_ERROR_NONE</code>, the resource path has been successfully retrieved.</p>
@@ -168,7 +168,7 @@ if (img_path != NULL) {
 static void
 app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;app_resource_manager_release();
+    app_resource_manager_release();
 }
 </pre>
 </li>
@@ -184,7 +184,7 @@ app_terminate(void *data)
 <p align="center"><img src="../../images/resource_manager_conn_explorer.png" alt="Connection Explorer buttons" /></p>
 <p>If the <strong>Connection Explorer</strong> view is not visible, open it: in the Tizen Studio menu, go to <strong>Window &gt; Show View &gt; Connection Explorer</strong> or <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Connection Explorer</strong>.</p>
 </li>
-<li>In the <strong>Emulator Manager</strong> window, the HD Mobile emulator has already been created. 
+<li>In the <strong>Emulator Manager</strong> window, the HD Mobile emulator has already been created.
 <p>Next, create an emulator instance with a WVGA resolution by clicking <strong>Create</strong>.</p>
 
 <p align="center"><img src="../../images/resource_manager_emulator_new.png" alt="Create a new emulator"/></p>
@@ -245,4 +245,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/applications_n.htm b/org.tizen.guides/html/native/app_management/applications_n.htm
index 9f8caf1..abebf3c 100644 (file)
--- a/org.tizen.guides/html/native/app_management/applications_n.htm
+++ b/org.tizen.guides/html/native/app_management/applications_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Applications</title> 
- </head> 
+  <title>Applications</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,7 +33,7 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/native/AppFW/App-common" target="_blank">App-common Sample Description</a></li>
                </ul>
@@ -41,7 +41,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Applications</h1> 
+<h1>Applications</h1>
 <p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile and wearable devices. The additional features have constraints, such as a relatively small screen size and lack of system resources compared to a larger system. For example, for power management reasons, the application can take actions to reduce usage when it finds out that it has its display window covered over by another application window. State change events are delivered to make it possible to detect these situations.</p>
 
 <h2 id="app_models">Native Application Models</h2>
@@ -50,7 +50,7 @@
 <ul>
        <li><a href="ui_app_n.htm">UI Applications</a>
        <p>The UI application is the most general Tizen application that has a graphical user interface. You can create diverse applications with a variety of features, and design versatile applications and intriguing user interfaces with text and graphics while taking advantage of many device functionalities, such as sensors and call operations. In addition, you can, for example, manage content and media files, use network and social services, and provide messaging and embedded Web browsing functionality.</p></li>
-       
+
        <li><a href="service_app_n.htm">Service Applications</a>
        <p>The service application is a Tizen native application without a graphical user interface that runs in the background. They can be very useful in performing activities (such as getting sensor data in the background) that need to run periodically or continuously, but do not require any user intervention.</p></li>
 </ul>
@@ -63,7 +63,7 @@
 
 <p>Applications in the same package follow the same installation life-cycle, which is handled by the application package manager. Each application in the package follows its own application life-cycle. Each application (UI application or service application) in an application package can be identified by its own ID.</p>
 
-<h2 id="state_change">Native Application State Change Callbacks</h2> 
+<h2 id="state_change">Native Application State Change Callbacks</h2>
 
 <p>A Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. When the application is starting, the <code>app_create_cb()</code> function is executed and the main event loop starts. The application is normally at the top of the window, with focus.</p>
 <p>When the application loses the focus status, the <code>app_pause_cb()</code> callback is invoked. The application can go into the pause state, which means that your application is not terminated but continues to run on the background, when:</p>
@@ -92,15 +92,15 @@
 
 <p>The following figure shows the UI and service application states.</p>
 
-  <p align="center"><strong>Figure: UI and service application states</strong></p> 
-  <p align="center"><img src="../../images/multiple_apps.png" alt="UI and service application life-cycle" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-  
+  <p align="center"><strong>Figure: UI and service application states</strong></p>
+  <p align="center"><img src="../../images/multiple_apps.png" alt="UI and service application life-cycle" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+
 <p>Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.</p>
 
 <p>Application state changes are managed by the underlying framework. For more information about application state transitions, see <a href="efl_ui_app_n.htm#state_trans">Application States and Transitions</a>.</p>
 
 
-  
+
 
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
@@ -125,4 +125,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/common_appcontrol_n.htm b/org.tizen.guides/html/native/app_management/common_appcontrol_n.htm
index ea741b9..b340fd4 100644 (file)
--- a/org.tizen.guides/html/native/app_management/common_appcontrol_n.htm
+++ b/org.tizen.guides/html/native/app_management/common_appcontrol_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Common Application Controls</title> 
- </head> 
+  <title>Common Application Controls</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -51,7 +51,7 @@
         </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Mobile Native</a></li>   
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Wearable Native</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Application_control" target="_blank">Application Control Sample Description</a></li>
                        </ul>
@@ -59,13 +59,13 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Common Application Controls</h1> 
+<h1>Common Application Controls</h1>
 
 <p>An application control provides functions for launching other applications with a specific operation, URI, MIME type, and extra data. The requesting application can get a result back from the launched application. This topic introduces the common application controls that you can use.</p>
 
 <p>All the common application controls are supported in mobile applications, except for the Input Delegator. In Tizen 2.3.2 and higher, only the Map and Input Delegator are supported in wearable applications.</p>
 
-       
+
          <div class="note">
         <strong>Note</strong>
         It is possible that no application suitable to receive the application control exists. In that case, before you send the launch request, verify that a suitable application exists.
@@ -104,7 +104,7 @@ app_control_h app_control;
 app_control_create(&amp;app_control);
 
 app_control_set_operation(app_control, APP_CONTROL_OPERATION_SEARCH);
-app_control_add_extra_data(app_control, APP_CONTROL_DATA_TEXT, &quot;tizen&quot;);
+app_control_add_extra_data(app_control, APP_CONTROL_DATA_TEXT, "tizen");
 
 app_control_send_launch_request(app_control, NULL, NULL);
 app_control_destroy(app_control);
@@ -119,8 +119,8 @@ app_control_destroy(app_control);
 
 <h4>Operation</h4>
 <ul><li><code>http://tizen.org/appcontrol/operation/view</code> (in <code>.c</code> files and manifest file)</li>
-<li><code>APP_CONTROL_OPERATION_VIEW</code> (in <code>.c</code> files only)</li></ul>  
-       
+<li><code>APP_CONTROL_OPERATION_VIEW</code> (in <code>.c</code> files only)</li></ul>
+
 <h4>URI (Mandatory)</h4>
 <ul>
        <li><code>http:&lt;path&gt;</code></li>
@@ -143,7 +143,7 @@ app_control_h app_control;
 app_control_create(&amp;app_control);
 
 app_control_set_operation(app_control, APP_CONTROL_OPERATION_VIEW);
-app_control_set_uri(app_control, &quot;https://www.tizen.org&quot;);
+app_control_set_uri(app_control, "https://www.tizen.org");
 
 app_control_send_launch_request(app_control, NULL, NULL);
 app_control_destroy(app_control);
@@ -153,14 +153,14 @@ app_control_destroy(app_control);
 
 <h3>Adding a Calendar Event</h3>
 
-<p>To add a new event to the user&#39;s calendar, use the <code>APP_CONTROL_OPERATION_ADD</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To add a new event to the user's calendar, use the <code>APP_CONTROL_OPERATION_ADD</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
 
 <p align="center"><strong>Figure: Adding a calendar event</strong></p>
 <p align="center"><img src="../../images/common_appcontrol_calendar.png" alt="Adding a calendar event" /></p>
 
 <h4>Operation</h4>
 <ul><li><code>http://tizen.org/appcontrol/operation/add</code> (in <code>.c</code> files and manifest file)</li>
-<li><code>APP_CONTROL_OPERATION_ADD</code> (in <code>.c</code> files only)</li></ul>   
+<li><code>APP_CONTROL_OPERATION_ADD</code> (in <code>.c</code> files only)</li></ul>
 <h4>MIME Type (Mandatory)</h4>
        <p><code>application/vnd.tizen.calendar</code></p>
 <h4>Extra Input</h4>
@@ -207,7 +207,7 @@ app_control_destroy(app_control);
                        </tr>
                </tbody>
        </table>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -216,9 +216,9 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_ADD);
-app_control_set_mime(service, &quot;application/vnd.tizen.calendar&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_TITLE, &quot;My event&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, &quot;My event text&quot;);
+app_control_set_mime(service, "application/vnd.tizen.calendar");
+app_control_add_extra_data(service, APP_CONTROL_DATA_TITLE, "My event");
+app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, "My event text");
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
 app_control_send_launch_request(service, NULL, NULL);
@@ -226,7 +226,7 @@ app_control_send_launch_request(service, NULL, NULL);
 
 <h3>Editing a Calendar Event</h3>
 
-<p>To edit an existing event in the user&#39;s calendar, use the <code>APP_CONTROL_OPERATION_EDIT</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To edit an existing event in the user's calendar, use the <code>APP_CONTROL_OPERATION_EDIT</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
 
 <p align="center"><strong>Figure: Editing a calendar event</strong></p>
 <p align="center"><img src="../../images/common_appcontrol_calendar4.png" alt="Editing a calendar event" /></p>
@@ -293,10 +293,10 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_EDIT);
-app_control_set_mime(service, &quot;application/vnd.tizen.calendar&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_ID, &quot;42&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_TITLE, &quot;Edited Title&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_CALENDAR_ALL_DAY, &quot;true&quot;);
+app_control_set_mime(service, "application/vnd.tizen.calendar");
+app_control_add_extra_data(service, APP_CONTROL_DATA_ID, "42");
+app_control_add_extra_data(service, APP_CONTROL_DATA_TITLE, "Edited Title");
+app_control_add_extra_data(service, APP_CONTROL_DATA_CALENDAR_ALL_DAY, "true");
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
 app_control_send_launch_request(service, NULL, NULL);
@@ -304,7 +304,7 @@ app_control_send_launch_request(service, NULL, NULL);
 
 <h3>Viewing a Calendar Event</h3>
 
-<p>To display a specified event in the user&#39;s calendar, use the <code>APP_CONTROL_OPERATION_VIEW</code> operation. To specify various event details, refer to the extras defined below.</p>
+<p>To display a specified event in the user's calendar, use the <code>APP_CONTROL_OPERATION_VIEW</code> operation. To specify various event details, refer to the extras defined below.</p>
 <p>To display a specified event from a vcalendar file, use the <code>file:</code> URI. To display a specified event using the calendar ID, use the <code>application/vnd.tizen.calendar</code> MIME type with <code>APP_CONTROL_DATA_ID</code>.</p>
 
 <p align="center"><strong>Figure: Viewing a calendar event</strong></p>
@@ -319,7 +319,7 @@ app_control_send_launch_request(service, NULL, NULL);
 <h4>MIME Type</h4>
        <ul>
                <li><code>application/vnd.tizen.calendar</code>
-               <p>In case of viewing an event by an event ID, the event ID (ID in the <code>_calendar_event</code> view) extra data and <code>application/vnd.tizen.calendar</code> MIME type must be specified.</p></li>           
+               <p>In case of viewing an event by an event ID, the event ID (ID in the <code>_calendar_event</code> view) extra data and <code>application/vnd.tizen.calendar</code> MIME type must be specified.</p></li>
                <li><code>text/x-vcalendar</code> (for vcalendar file)</li>
                <li><code>text/vcalendar</code> (for vcalendar file)</li>
        </ul>
@@ -345,7 +345,7 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
-app_control_set_uri(service, &quot;file://&lt;app&#39;s shared path&gt;/Calendar3.vcs&quot;);
+app_control_set_uri(service, "file://&lt;app's shared path&gt;/Calendar3.vcs");
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
 app_control_send_launch_request(service, NULL, NULL);
@@ -356,8 +356,8 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
-app_control_set_mime(service, &quot;application/vnd.tizen.calendar&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_ID, &quot;42&quot;);
+app_control_set_mime(service, "application/vnd.tizen.calendar");
+app_control_add_extra_data(service, APP_CONTROL_DATA_ID, "42");
 
 app_control_send_launch_request(service, NULL, NULL);
 app_control_destroy(service);
@@ -365,7 +365,7 @@ app_control_destroy(service);
 
 <h3>Selecting a Calendar Event</h3>
 
-<p>To select a specified event in the user&#39;s calendar, use the <code>APP_CONTROL_OPERATION_PICK</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To select a specified event in the user's calendar, use the <code>APP_CONTROL_OPERATION_PICK</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
 <p align="center"><strong>Figure: Selecting a calendar event</strong></p>
 <p align="center"><img src="../../images/common_appcontrol_calendar3.png" alt="Selecting a calendar event" /></p>
 
@@ -397,7 +397,7 @@ app_control_destroy(service);
                        </tr>
                </tbody>
        </table>
-<h4>Extra Output</h4> 
+<h4>Extra Output</h4>
        <table>
                <tbody>
                        <tr>
@@ -422,9 +422,9 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_PICK);
-app_control_set_mime(service, &quot;application/vnd.tizen.calendar&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_TYPE, &quot;id&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_SELECTION_MODE, &quot;single&quot;);
+app_control_set_mime(service, "application/vnd.tizen.calendar");
+app_control_add_extra_data(service, APP_CONTROL_DATA_TYPE, "id");
+app_control_add_extra_data(service, APP_CONTROL_DATA_SELECTION_MODE, "single");
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
 app_control_send_launch_request(service, NULL, NULL);
@@ -449,14 +449,14 @@ app_control_send_launch_request(service, NULL, NULL);
 void
 launchCall()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h request = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+    app_control_h request = NULL;
+    app_control_create(&amp;request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_CALL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_uri(request, &quot;tel:0123456789&quot;);
+    app_control_set_operation(request, APP_CONTROL_OPERATION_CALL);
+    app_control_set_uri(request, "tel:0123456789");
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_send_launch_request(request, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+    app_control_send_launch_request(request, NULL, NULL);
+    app_control_destroy(request);
 }
 </pre>
 
@@ -479,14 +479,14 @@ launchCall()
 void
 launchCall()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h request = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+    app_control_h request = NULL;
+    app_control_create(&amp;request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_DIAL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_uri(request, &quot;tel:0123456789&quot;);
+    app_control_set_operation(request, APP_CONTROL_OPERATION_DIAL);
+    app_control_set_uri(request, "tel:0123456789");
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_send_launch_request(request, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+    app_control_send_launch_request(request, NULL, NULL);
+    app_control_destroy(request);
 }
 </pre>
 
@@ -519,7 +519,7 @@ launchCall()
                 <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
                 <td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
                                <td>This key is optional.</td>
-                       </tr>                   
+                       </tr>
                </tbody>
        </table>
 <h4>Extra Output</h4>
@@ -534,7 +534,7 @@ launchCall()
                                <td>The path of the created image or video file. This key must be passed as a string.</td>
                        </tr>
                </tbody>
-       </table>        
+       </table>
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -543,7 +543,7 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_CREATE_CONTENT);
-app_control_set_mime(service, &quot;image/*&quot;);
+app_control_set_mime(service, "image/*");
 
 app_control_send_launch_request(service, NULL, NULL);
 app_control_destroy(service);
@@ -568,7 +568,7 @@ app_control_destroy(service);
                                <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
                                <td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
                                <td>This key is optional.</td>
-                       </tr>                   
+                       </tr>
                </tbody>
        </table>
 <h4>Extra Output</h4>
@@ -583,7 +583,7 @@ app_control_destroy(service);
                                <td>The path of the created file. This key must be passed as a string.</td>
                        </tr>
                </tbody>
-       </table>        
+       </table>
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -616,7 +616,7 @@ app_control_destroy(service);
                                <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
                                <td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
                                <td>This key is optional.</td>
-                       </tr>                   
+                       </tr>
                </tbody>
        </table>
 <h4>Extra Output</h4>
@@ -631,7 +631,7 @@ app_control_destroy(service);
                                <td>The path of the created file. This key must be passed as a string.</td>
                        </tr>
                </tbody>
-       </table>        
+       </table>
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -681,7 +681,7 @@ app_control_destroy(service);
                        </tr>
                        <tr>
                                <td><code>APP_CONTROL_DATA_NAME</code></td>
-                               <td>The contact&#39;s name. This key must be passed as a string.</td>
+                               <td>The contact's name. This key must be passed as a string.</td>
                        </tr>
                </tbody>
        </table>
@@ -704,11 +704,11 @@ app_control_h request;
 app_control_create(&amp;request);
 
 app_control_set_operation(request, APP_CONTROL_OPERATION_ADD);
-app_control_set_mime(request, &quot;application/vnd.tizen.contact&quot;);
+app_control_set_mime(request, "application/vnd.tizen.contact");
 
-app_control_add_extra_data(request, APP_CONTROL_DATA_PHONE, &quot;0123456789&quot;);
-app_control_add_extra_data(request, APP_CONTROL_DATA_EMAIL, &quot;tizen@tizen.org&quot;);
-app_control_add_extra_data(request, APP_CONTROL_DATA_NAME, &quot;Tizen User&quot;);
+app_control_add_extra_data(request, APP_CONTROL_DATA_PHONE, "0123456789");
+app_control_add_extra_data(request, APP_CONTROL_DATA_EMAIL, "tizen@tizen.org");
+app_control_add_extra_data(request, APP_CONTROL_DATA_NAME, "Tizen User");
 
 app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
 
@@ -777,12 +777,12 @@ app_control_h request;
 app_control_create(&amp;request);
 
 app_control_set_operation(request, APP_CONTROL_OPERATION_EDIT);
-app_control_set_mime(request, &quot;application/vnd.tizen.contact&quot;);
+app_control_set_mime(request, "application/vnd.tizen.contact");
 
 app_control_add_extra_data(request, APP_CONTROL_DATA_ID, personId);
 
-app_control_add_extra_data(request, APP_CONTROL_DATA_PHONE, &quot;0987654321&quot;);
-app_control_add_extra_data(request, APP_CONTROL_DATA_EMAIL, &quot;2nd Email&quot;);
+app_control_add_extra_data(request, APP_CONTROL_DATA_PHONE, "0987654321");
+app_control_add_extra_data(request, APP_CONTROL_DATA_EMAIL, "2nd Email");
 
 app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
 
@@ -832,43 +832,43 @@ app_control_destroy(request);
 int
 launchContactDetails(const char* personId)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h request;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+    app_control_h request;
+    app_control_create(&amp;request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_VIEW);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_mime(request, &quot;application/vnd.tizen.contact&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(request, APP_CONTROL_DATA_ID, personId);
+    app_control_set_operation(request, APP_CONTROL_OPERATION_VIEW);
+    app_control_set_mime(request, "application/vnd.tizen.contact");
+    app_control_add_extra_data(request, APP_CONTROL_DATA_ID, personId);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
+    app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
 
-&nbsp;&nbsp;&nbsp;&nbsp;int result = app_control_send_launch_request(request, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+    int result = app_control_send_launch_request(request, NULL, NULL);
+    app_control_destroy(request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return result;
+    return result;
 }
 
 int
 launchViewVcard(const char *uri)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h request;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+    app_control_h request;
+    app_control_create(&amp;request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_VIEW);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_mime(request, &quot;text/vcard&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_uri(request, uri);
+    app_control_set_operation(request, APP_CONTROL_OPERATION_VIEW);
+    app_control_set_mime(request, "text/vcard");
+    app_control_set_uri(request, uri);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
+    app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
 
-&nbsp;&nbsp;&nbsp;&nbsp;int result = app_control_send_launch_request(request, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+    int result = app_control_send_launch_request(request, NULL, NULL);
+    app_control_destroy(request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return result;
+    return result;
 }
 </pre>
 
 <h3>Selecting a Contact</h3>
 
-<p>To select a specified contact in the user&#39;s contacts, use the <code>APP_CONTROL_OPERATION_PICK</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To select a specified contact in the user's contacts, use the <code>APP_CONTROL_OPERATION_PICK</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
 
 <p align="center"><strong>Figure: Selecting a contact</strong></p>
 <p align="center"><img src="../../images/common_appcontrol_contact_select.png" alt="Selecting a contact" /></p>
@@ -914,7 +914,7 @@ launchViewVcard(const char *uri)
                        </tr>
                        <tr>
                                <td><code>APP_CONTROL_DATA_SELECTED</code></td>
-                               <td>The extra field to get the return information. The content of this key depends on its type: 
+                               <td>The extra field to get the return information. The content of this key depends on its type:
                                <ul>
                                <li><code>id</code> – The database record ID of the selected person (ID in the <code>_contacts_person</code> view).</li>
                                <li><code>phone</code> – The database record ID of the number of the selected person (ID in the <code>_contacts_number</code> view).</li>
@@ -931,22 +931,22 @@ launchViewVcard(const char *uri)
 <pre class="prettyprint">
 int
 launchContactPick(const char *selectionMode, const char *resultType,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_reply_cb replyCallback, void *userData)
+                  app_control_reply_cb replyCallback, void *userData)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h request;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;request);
+    app_control_h request;
+    app_control_create(&amp;request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(request, APP_CONTROL_OPERATION_PICK);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_mime(request, &quot;application/vnd.tizen.contact&quot;);
+    app_control_set_operation(request, APP_CONTROL_OPERATION_PICK);
+    app_control_set_mime(request, "application/vnd.tizen.contact");
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(request, APP_CONTROL_DATA_SELECTION_MODE, selectionMode);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(request, APP_CONTROL_DATA_TYPE, resultType);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
+    app_control_add_extra_data(request, APP_CONTROL_DATA_SELECTION_MODE, selectionMode);
+    app_control_add_extra_data(request, APP_CONTROL_DATA_TYPE, resultType);
+    app_control_set_launch_mode(request, APP_CONTROL_LAUNCH_MODE_GROUP);
 
-&nbsp;&nbsp;&nbsp;&nbsp;int result = app_control_send_launch_request(request, replyCallback, userData);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(request);
+    int result = app_control_send_launch_request(request, replyCallback, userData);
+    app_control_destroy(request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return result;
+    return result;
 }
 </pre>
 
@@ -975,10 +975,10 @@ launchContactPick(const char *selectionMode, const char *resultType,
                </tr>
                <tr>
                        <td><code>APP_CONTROL_DATA_TYPE</code></td>
-                       <td>The type of contact. The available values are <code>my_profile</code> and <code>person</code>. This key must be passed as a string.</td>                          
+                       <td>The type of contact. The available values are <code>my_profile</code> and <code>person</code>. This key must be passed as a string.</td>
                </tr>
        </tbody>
-       </table>   
+       </table>
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -987,8 +987,8 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_SHARE);
-app_control_set_mime(service, &quot;application/vnd.tizen.contact&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_TYPE, &quot;person&quot;);
+app_control_set_mime(service, "application/vnd.tizen.contact");
+app_control_add_extra_data(service, APP_CONTROL_DATA_TYPE, "person");
 app_control_add_extra_data(service, APP_CONTROL_DATA_ID, person_id);
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
@@ -1018,9 +1018,9 @@ app_control_destroy(service);
                        <td><code>APP_CONTROL_DATA_ID</code></td>
                        <td>The database record IDs of the person (ID in the <code>_contacts_person</code> view). This key must be passed as an array.</td>
                        <td>This key is mandatory.</td>
-               </tr>                   
+               </tr>
        </tbody>
-       </table>     
+       </table>
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -1031,7 +1031,7 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_MULTI_SHARE);
-app_control_set_mime(service, &quot;application/vnd.tizen.contact&quot;);
+app_control_set_mime(service, "application/vnd.tizen.contact");
 app_control_add_extra_data_array(service, APP_CONTROL_DATA_ID, contacts, 3);
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
@@ -1075,11 +1075,11 @@ app_control_destroy(service);
                        <tr>
                                <td><code>APP_CONTROL_DATA_BCC</code></td>
                                <td>The email address of the recipients that must be blind carbon copied. This key must be passed as an array.</td>
-                       </tr>                   
+                       </tr>
                        <tr>
                                <td><code>APP_CONTROL_DATA_SUBJECT</code></td>
                                <td>The subject of an email message. This key must be passed as a string.</td>
-                       </tr>                   
+                       </tr>
                        <tr>
                                <td><code>APP_CONTROL_DATA_TEXT</code></td>
                                <td>The body of the email to be sent. This key must be passed as a string.</td>
@@ -1090,20 +1090,20 @@ app_control_destroy(service);
                        </tr>
                </tbody>
        </table>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 app_control_h service;
 app_control_create(&amp;service);
 
-char* cc[2] = {&quot;cc@tizen.org&quot;, &quot;cc2@tizen.org&quot;};
-char* bcc[2] = {&quot;bcc@tizen.org&quot;, &quot;bcc2@tizen.org&quot;};
+char* cc[2] = {"cc@tizen.org", "cc2@tizen.org"};
+char* bcc[2] = {"bcc@tizen.org", "bcc2@tizen.org"};
 app_control_set_operation(service, APP_CONTROL_OPERATION_COMPOSE);
-app_control_set_uri(service, &quot;mailto:to@tizen.org&quot;);
+app_control_set_uri(service, "mailto:to@tizen.org");
 app_control_add_extra_data_array(service, APP_CONTROL_DATA_CC, cc, 2);
 app_control_add_extra_data_array(service, APP_CONTROL_DATA_BCC, bcc, 2);
-app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, &quot;test subject&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, &quot;line1\nline2&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, "test subject");
+app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, "line1\nline2");
 
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
@@ -1129,7 +1129,7 @@ app_control_destroy(service);
 <h4>MIME Type</h4>
        <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
        <p>In case of sharing a single item through <code>APP_CONTROL_DATA_PATH</code> and URI specified with <code>mailto:</code>, the MIME type must be explicitly set. </p>
-       
+
 <h4>Extra Input</h4>
        <table>
                <tbody>
@@ -1145,14 +1145,14 @@ app_control_destroy(service);
                        </tr>
                </tbody>
        </table>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #define PATH_MAX 128
 
 char *shared_res_path = app_get_shared_resource_path();
 char img_path[PATH_MAX] = {0,};
-snprintf(img_path, PATH_MAX, &quot;%s/image.jpg&quot;, shared_res_path);
+snprintf(img_path, PATH_MAX, "%s/image.jpg", shared_res_path);
 free(shared_res_path);
 
 app_control_h service;
@@ -1160,8 +1160,8 @@ app_control_create(&amp;service);
 
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 app_control_set_operation(service, APP_CONTROL_OPERATION_SHARE);
-app_control_set_uri(service, &quot;mailto:&quot;);
-app_control_set_mime(service, &quot;image/*&quot;);
+app_control_set_uri(service, "mailto:");
+app_control_set_mime(service, "image/*");
 app_control_add_extra_data(service, APP_CONTROL_DATA_PATH, img_path);
 
 app_control_send_launch_request(service, NULL, NULL);
@@ -1185,7 +1185,7 @@ app_control_destroy(service);
 <h4>MIME Type (Mandatory)</h4>
        <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
        <p>If you try to share a set of files with different MIME types, use <code>&lt;type&gt;/*</code> or <code>*/*</code>. For example, if you send <code>video/mp4</code> and <code>audio/ogg</code>, the MIME type must be <code>*/*</code>.</p>
-       
+
 <h4>Extra Input</h4>
        <table>
                <tbody>
@@ -1201,7 +1201,7 @@ app_control_destroy(service);
                        </tr>
                </tbody>
        </table>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #define PATH_MAX 128
@@ -1210,8 +1210,8 @@ char *shared_res_path = app_get_shared_resource_path();
 char img1_path[PATH_MAX] = {0,};
 char img2_path[PATH_MAX] = {0,};
 const char *path_array[2] = {img1_path, img2_path};
-snprintf(img1_path, PATH_MAX, &quot;%s/image.jpg&quot;, shared_res_path);
-snprintf(img2_path, PATH_MAX, &quot;%s/image2.jpg&quot;, shared_res_path);
+snprintf(img1_path, PATH_MAX, "%s/image.jpg", shared_res_path);
+snprintf(img2_path, PATH_MAX, "%s/image2.jpg", shared_res_path);
 free(shared_res_path);
 
 app_control_h service;
@@ -1219,8 +1219,8 @@ app_control_create(&amp;service);
 
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 app_control_set_operation(service, APP_CONTROL_OPERATION_MULTI_SHARE);
-app_control_set_uri(service, &quot;mailto:&quot;);
-app_control_set_mime(service, &quot;image/*&quot;);
+app_control_set_uri(service, "mailto:");
+app_control_set_mime(service, "image/*");
 app_control_add_extra_data_array(service, APP_CONTROL_DATA_PATH, path_array, 2);
 
 app_control_send_launch_request(service, NULL, NULL);
@@ -1241,7 +1241,7 @@ app_control_destroy(service);
 <p><code>mailto:</code></p>
 <p>Only an empty <code>mailto:</code> field is allowed. It filters out all but email applications in the system.</p>
 
-       
+
 <h4>Extra Input</h4>
        <table>
                <tbody>
@@ -1263,10 +1263,10 @@ app_control_destroy(service);
                        <tr>
                                <td><code>APP_CONTROL_DATA_PATH</code></td>
                                <td>The list of multiple file paths to be shared using an email message. This key must be passed as an array.</td>
-                       </tr>                   
+                       </tr>
                </tbody>
        </table>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #define PATH_MAX 128
@@ -1275,8 +1275,8 @@ char *shared_res_path = app_get_shared_resource_path();
 char img1_path[PATH_MAX] = {0,};
 char img2_path[PATH_MAX] = {0,};
 const char *path_array[2] = {img1_path, img2_path};
-snprintf(img1_path, PATH_MAX, &quot;%s/image.jpg&quot;, shared_res_path);
-snprintf(img2_path, PATH_MAX, &quot;%s/image2.jpg&quot;, shared_res_path);
+snprintf(img1_path, PATH_MAX, "%s/image.jpg", shared_res_path);
+snprintf(img2_path, PATH_MAX, "%s/image2.jpg", shared_res_path);
 free(shared_res_path);
 
 app_control_h service;
@@ -1284,10 +1284,10 @@ app_control_create(&amp;service);
 
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 app_control_set_operation(service, APP_CONTROL_OPERATION_SHARE_TEXT);
-app_control_set_uri(service, &quot;mailto:&quot;);
+app_control_set_uri(service, "mailto:");
 app_control_add_extra_data_array(service, APP_CONTROL_DATA_PATH, path_array, 2);
-app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, &quot;test subject&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, &quot;line1\nline2&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, "test subject");
+app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, "line1\nline2");
 
 app_control_send_launch_request(service, NULL, NULL);
 app_control_destroy(service);
@@ -1338,9 +1338,9 @@ app_control_destroy(service);
                        <tr>
                                <td><code>APP_CONTROL_DATA_SELECTED</code></td>
                                <td>The list of selected file paths. This key must be passed as an array.</td>
-                       </tr>                   
+                       </tr>
                </tbody>
-       </table>        
+       </table>
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -1349,7 +1349,7 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_PICK);
-app_control_add_extra_data(service, APP_CONTROL_DATA_SELECTION_MODE, &quot;single&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_SELECTION_MODE, "single");
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
 app_control_send_launch_request(service, NULL, NULL);
@@ -1373,7 +1373,7 @@ app_control_h app_control;
 app_control_create(&amp;app_control);
 
 app_control_set_operation(app_control, APP_CONTROL_OPERATION_DOWNLOAD);
-app_control_set_uri(app_control, &quot;http://PATH_TO_FILE&quot;);
+app_control_set_uri(app_control, "http://PATH_TO_FILE");
 
 app_control_send_launch_request(app_control, NULL, NULL);
 app_control_destroy(app_control);
@@ -1401,7 +1401,7 @@ app_control_destroy(app_control);
        <p>Show the map at the location of a given keyword (address or POI). For example: <code>geo:0,0?q=Eiffel%20Tower</code></p>
        <p>All strings passed in the <code>geo:</code> URI must be encoded. If only <code>geo:</code> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p></li>
        </ul>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -1410,34 +1410,34 @@ app_control_destroy(app_control);
 int
 show_maps_operation(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_uri(service, &quot;geo:50.1,-50.1&quot;);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
+    app_control_set_uri(service, "geo:50.1,-50.1");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to request!\n&quot;);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to request!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to request!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to request!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -1454,8 +1454,8 @@ show_maps_operation(void)
    <p>Show the map at the location of a given keyword (address or POI). For example: <code>geo:0,0?q=Eiffel%20Tower</code></p>
    <p>All strings passed in the <code>geo:</code> URI must be encoded.</p>
    <p>If only <code>geo:</code> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p>
-       
-       
+
+
 <h4>Extra Input</h4>
        <table>
                <tbody>
@@ -1499,10 +1499,10 @@ show_maps_operation(void)
                                <td><code>APP_CONTROL_DATA_PATH</code></td>
                                <td>The file path of the image showing the selected location. This key must be passed as a string.</td>
                                <td></td>
-                       </tr>                   
+                       </tr>
                </tbody>
-       </table>        
-       
+       </table>
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -1511,53 +1511,53 @@ show_maps_operation(void)
 int
 pick_location_operation(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_PICK);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_uri(service, &quot;geo:0,0?q=Eiffel Tower&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(service, APP_CONTROL_DATA_TYPE, &quot;all&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_PICK);
+    app_control_set_uri(service, "geo:0,0?q=Eiffel Tower");
+    app_control_add_extra_data(service, APP_CONTROL_DATA_TYPE, "all");
+    app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_send_launch_request(service, pick_reply_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    app_control_send_launch_request(service, pick_reply_cb, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 
 void
 pick_reply_cb(app_control_h request, app_control_h reply, app_control_result_e result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+              void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *address = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *geocode = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *path = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == APP_CONTROL_RESULT_SUCCEEDED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(reply, APP_CONTROL_DATA_NAME, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(reply, APP_CONTROL_DATA_LOCATION, &amp;geocode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(reply, APP_CONTROL_DATA_PATH, &amp;path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Selected address: %s&quot;, address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Selected name: %s&quot;, name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Selected location: %s&quot;, geocode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Map image path: %s&quot;, path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(geocode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    char *address = NULL;
+    char *name = NULL;
+    char *geocode = NULL;
+    char *path = NULL;
+
+    if (result == APP_CONTROL_RESULT_SUCCEEDED) {
+        app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &amp;address);
+        app_control_get_extra_data(reply, APP_CONTROL_DATA_NAME, &amp;name);
+        app_control_get_extra_data(reply, APP_CONTROL_DATA_LOCATION, &amp;geocode);
+        app_control_get_extra_data(reply, APP_CONTROL_DATA_PATH, &amp;path);
+
+        dlog_print(DLOG_INFO, LOG_TAG, "Selected address: %s", address);
+        dlog_print(DLOG_INFO, LOG_TAG, "Selected name: %s", name);
+        dlog_print(DLOG_INFO, LOG_TAG, "Selected location: %s", geocode);
+        dlog_print(DLOG_INFO, LOG_TAG, "Map image path: %s", path);
+
+        free(address);
+        free(name);
+        free(geocode);
+        free(path);
+    }
 }
 </pre>
 
@@ -1606,7 +1606,7 @@ pick_reply_cb(app_control_h request, app_control_h reply, app_control_result_e r
                        </tr>
                </tbody>
        </table>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -1615,10 +1615,10 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_COMPOSE);
-app_control_set_uri(service, &quot;mmsto:1234567890&quot;);
+app_control_set_uri(service, "mmsto:1234567890");
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
-app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, &quot;My text&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, &quot;My subject&quot;);
+app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, "My text");
+app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, "My subject");
 
 app_control_send_launch_request(service, NULL, NULL);
 </pre>
@@ -1641,7 +1641,7 @@ app_control_send_launch_request(service, NULL, NULL);
 <h4>MIME Type</h4>
        <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
        <p>In case of sharing a single item through <code>APP_CONTROL_DATA_PATH</code> and URI specified with <code>mmsto:</code>, the MIME type must be explicitly set.</p>
-       
+
 <h4>Extra Input</h4>
        <table>
                <tbody>
@@ -1657,7 +1657,7 @@ app_control_send_launch_request(service, NULL, NULL);
                        </tr>
                </tbody>
        </table>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -1689,7 +1689,7 @@ app_control_send_launch_request(service, NULL, NULL);
 <h4>MIME Type (Mandatory)</h4>
        <p>Any MIME type that your application needs, such as <code>image/jpg</code>, <code>video/*</code>, or <code>*/*</code></p>
        <p>If you try to share a set of files with different MIME types, use <code>&lt;type&gt;/*</code> or <code>*/*</code>. For example, if you send <code>video/mp4</code> and <code>audio/ogg</code>, the MIME type must be <code>*/*</code>.</p>
-       
+
 <h4>Extra Input</h4>
        <table>
                <tbody>
@@ -1705,7 +1705,7 @@ app_control_send_launch_request(service, NULL, NULL);
                        </tr>
                </tbody>
        </table>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -1716,7 +1716,7 @@ app_control_create(&amp;service);
 const char* paths[] = {IMAGE_PATH1, IMAGE_PATH2};
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_MULTI_SHARE);
-app_control_set_uri(service, &quot;mmsto:&quot;);
+app_control_set_uri(service, "mmsto:");
 app_control_add_extra_data_array(service, APP_CONTROL_DATA_PATH, paths, 2);
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
@@ -1738,7 +1738,7 @@ app_control_send_launch_request(service, NULL, NULL);
        <li><code>mmsto:</code></li>
        </ul>
        <p>Only an empty <code>sms:</code> or <code>mmsto:</code> field is allowed. This can be used to filter out all but message applications available in the system.</p>
-       
+
 <h4>Extra Input</h4>
        <table>
                <tbody>
@@ -1760,10 +1760,10 @@ app_control_send_launch_request(service, NULL, NULL);
                        <tr>
                                <td><code>APP_CONTROL_DATA_PATH</code></td>
                                <td>The list of multiple file paths to be shared in a multimedia message. This key must be passed as an array.</td>
-                       </tr>                   
+                       </tr>
                </tbody>
        </table>
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -1772,9 +1772,9 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_SHARE_TEXT);
-app_control_set_uri(service, &quot;mmsto:&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, &quot;Hello, My name is Tizy.&quot;);
-app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, &quot;My subject&quot;);
+app_control_set_uri(service, "mmsto:");
+app_control_add_extra_data(service, APP_CONTROL_DATA_TEXT, "Hello, My name is Tizy.");
+app_control_add_extra_data(service, APP_CONTROL_DATA_SUBJECT, "My subject");
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
 app_control_send_launch_request(service, NULL, NULL);
@@ -1819,34 +1819,34 @@ app_control_send_launch_request(service, NULL, NULL);
 int
 play_audio_operation(const char* audio_uri)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler\n&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_uri(service, audio_uri);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
+    app_control_set_uri(service, audio_uri);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to request!\n&quot;);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to request!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to request!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to request!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -1877,34 +1877,34 @@ play_audio_operation(const char* audio_uri)
 int
 view_image_operation(const char* image_uri)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler\n&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_uri(service, image_uri);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_VIEW);
+    app_control_set_uri(service, image_uri);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to request!\n&quot;);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to request!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to request!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to request!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -1921,7 +1921,7 @@ view_image_operation(const char* image_uri)
       <ul>
       <li><code>audio/*</code></li>
       <li><code>image/*</code></li>
-      <li><code>video/*</code></li>        
+      <li><code>video/*</code></li>
       </ul>
 
 <h4>Extra Input</h4>
@@ -1957,11 +1957,11 @@ view_image_operation(const char* image_uri)
                        </tr>
                        <tr>
                                <td><code>APP_CONTROL_DATA_SELECTED</code></td>
-                               <td>The paths of the selected files. This key must be passed as an array.</td>                              
-                       </tr>                   
+                               <td>The paths of the selected files. This key must be passed as an array.</td>
+                       </tr>
                </tbody>
-       </table>   
-       
+       </table>
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -1970,35 +1970,35 @@ view_image_operation(const char* image_uri)
 int
 retrieve_media_operation(const char* mime_type)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler\n&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_PICK);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_mime(service, mime_type);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_PICK);
+    app_control_set_mime(service, mime_type);
+    app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to request!\n&quot;);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to request!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to request!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to request!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -2020,32 +2020,32 @@ retrieve_media_operation(const char* mime_type)
 int
 launch_setting(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    int ret = 0;
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch settings!\n&quot;);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to launch settings!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch settings!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to launch settings!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -2062,7 +2062,7 @@ launch_setting(void)
 <ul><li><code>http://tizen.org/appcontrol/operation/setting/bt_enable</code> (in <code>.c</code> files and manifest file)</li>
 <li><code>APP_CONTROL_OPERATION_SETTING_BT_ENABLE</code> (in <code>.c</code> files only)</li></ul>
 
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -2070,32 +2070,32 @@ launch_setting(void)
 int
 bt_enable_operation(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    int ret = 0;
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_BT_ENABLE);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_BT_ENABLE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch!\n&quot;);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to launch!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to launch!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -2110,7 +2110,7 @@ bt_enable_operation(void)
 <ul><li><code>http://tizen.org/appcontrol/operation/setting/bt_visibility</code> (in <code>.c</code> files and manifest file)</li>
 <li><code>APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY</code> (in <code>.c</code> files only)</li></ul>
 
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -2118,32 +2118,32 @@ bt_enable_operation(void)
 int
 bt_visibility_operation(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    int ret = 0;
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch!\n&quot;);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to launch!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to launch!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -2161,38 +2161,38 @@ bt_visibility_operation(void)
 <ul><li><code>http://tizen.org/appcontrol/operation/setting/location</code> (in <code>.c</code> files and manifest file)</li>
 <li><code>APP_CONTROL_OPERATION_SETTING_LOCATION</code> (in <code>.c</code> files only)</li></ul>
 
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 int
 location_setting(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    int ret = 0;
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_LOCATION);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_LOCATION);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch location settings!\n&quot;);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to launch location settings!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch location settings!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to launch location settings!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -2237,33 +2237,33 @@ location_setting(void)
 int
 nfc_setting(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_NFC);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_NFC);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to launch NFC settings app!\n&quot;);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to launch NFC settings app!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch NFC settings app!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to launch NFC settings app!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -2279,35 +2279,35 @@ nfc_setting(void)
 <ul><li><code>http://tizen.org/appcontrol/operation/setting/wifi</code> (in <code>.c</code> files and manifest file)</li>
 <li><code>APP_CONTROL_OPERATION_SETTING_WIFI</code> (in <code>.c</code> files only)</li></ul>
 
-       
+
 <h4>Example Code</h4>
 <pre class="prettyprint">
 int
 wifi_launch_operation(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+    int ret = 0;
+    app_control_h service = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_create(&amp;service);
+    ret = app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE || service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create app control handler&quot;);
+    if (ret != APP_CONTROL_ERROR_NONE || service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to create app control handler");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service,  APP_CONTROL_OPERATION_SETTING_WIFI);
+    app_control_set_operation(service,  APP_CONTROL_OPERATION_SETTING_WIFI);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    ret = app_control_send_launch_request(service, NULL, NULL);
+    app_control_destroy(service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to launch Wi-Fi setting application&quot;);
+    if (ret != APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to launch Wi-Fi setting application");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -2329,12 +2329,12 @@ wifi_launch_operation(void)
                                <th>Key</th>
                                <th>Description</th>
                                <th>Note</th>
-                       </tr>                   
+                       </tr>
                        <tr>
                                <td><code>APP_CONTROL_DATA_TOTAL_SIZE</code></td>
                                <td>The total size of items to be returned in bytes. This key must be passed as a string.</td>
                                <td>This key is optional.</td>
-                       </tr>                   
+                       </tr>
                </tbody>
        </table>
 
@@ -2344,14 +2344,14 @@ wifi_launch_operation(void)
                        <tr>
                                <th>Key</th>
                                <th>Value description</th>
-                       </tr>                   
+                       </tr>
                        <tr>
                                <td><code>APP_CONTROL_DATA_SELECTED</code></td>
                                <td>The path of the created audio file. This key must be passed as a string.</td>
-                       </tr>                   
+                       </tr>
                </tbody>
-       </table>        
-<h4>Example Code</h4>       
+       </table>
+<h4>Example Code</h4>
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
 
@@ -2359,7 +2359,7 @@ app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_CREATE_CONTENT);
-app_control_set_mime(service, &quot;audio/m4a&quot;);
+app_control_set_mime(service, "audio/m4a");
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
 app_control_send_launch_request(service, NULL, NULL);
@@ -2367,7 +2367,7 @@ app_control_send_launch_request(service, NULL, NULL);
 
 <h2 id="vpnservice" name="vpnsvc">VPN Service in Mobile Applications</h2>
 
-       
+
          <div class="note">
         <strong>Note</strong>
         In mobile applications, this application control is available since Tizen 3.0.
@@ -2424,39 +2424,39 @@ app_control_send_launch_request(service, NULL, NULL);
 int
 launch_vpn_service_appcontrol(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    app_control_h service;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_VPN);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(service, APP_CONTROL_DATA_TYPE, &quot;up&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(service, APP_CONTROL_DATA_NAME, &quot;tizen&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_VPN);
+    app_control_add_extra_data(service, APP_CONTROL_DATA_TYPE, "up");
+    app_control_add_extra_data(service, APP_CONTROL_DATA_NAME, "tizen");
+    app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_send_launch_request(service, vpn_appcontrol_result_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    app_control_send_launch_request(service, vpn_appcontrol_result_cb, NULL);
+    app_control_destroy(service);
 }
 
 static void
 vpn_appcontrol_result_cb(app_control_h request, app_control_h reply,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_result_e result, void *user_data)
+                         app_control_result_e result, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *result_txt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (result) {
-&nbsp;&nbsp;&nbsp;&nbsp;case APP_CONTROL_RESULT_APP_STARTED:
-&nbsp;&nbsp;&nbsp;&nbsp;case APP_CONTROL_RESULT_SUCCEEDED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case APP_CONTROL_RESULT_FAILED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case APP_CONTROL_RESULT_CANCELED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Canceled!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(reply, APP_CONTROL_DATA_TEXT, &amp;result_txt);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Result: %s&quot;, result_txt);
+    char *result_txt;
+
+    switch (result) {
+    case APP_CONTROL_RESULT_APP_STARTED:
+    case APP_CONTROL_RESULT_SUCCEEDED:
+      dlog_print(DLOG_INFO, LOG_TAG, "Success!");
+      break;
+    case APP_CONTROL_RESULT_FAILED:
+      dlog_print(DLOG_INFO, LOG_TAG, "Failed!");
+      break;
+    case APP_CONTROL_RESULT_CANCELED:
+      dlog_print(DLOG_INFO, LOG_TAG, "Canceled!");
+      break;
+    }
+
+    app_control_get_extra_data(reply, APP_CONTROL_DATA_TEXT, &amp;result_txt);
+    dlog_print(DLOG_INFO, LOG_TAG, "Result: %s", result_txt);
 }
 </pre>
 
@@ -2507,11 +2507,11 @@ vpn_appcontrol_result_cb(app_control_h request, app_control_h reply,
                        </tr>
                        <tr>
                                <td><code>APP_CONTROL_DATA_INPUT_DEFAULT_TEXT</code></td>
-                               <td>The preformatted text to be used as default input, such as &quot;http://&quot; for Web addresses. This key must be passed as a string.</td>
+                               <td>The preformatted text to be used as default input, such as "http://" for Web addresses. This key must be passed as a string.</td>
                        </tr>
                       <tr>
                                <td><code>APP_CONTROL_DATA_INPUT_GUIDE_TEXT</code></td>
-                               <td>The guide text, such as &quot;Input user name&quot;. This key must be passed as a string.</td>
+                               <td>The guide text, such as "Input user name". This key must be passed as a string.</td>
                       </tr>
                        <tr>
                                <td><code>APP_CONTROL_DATA_INPUT_PREDICTION_HINT</code></td>
@@ -2540,29 +2540,29 @@ vpn_appcontrol_result_cb(app_control_h request, app_control_h reply,
 void
 call_control()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+    app_control_h service;
+    app_control_create(&amp;service);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_GET_INPUT);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_mime(service, &quot;text/plain&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(service, APP_CONTROL_DATA_INPUT_TYPE, &quot;input_voice&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
+    app_control_set_operation(service, APP_CONTROL_OPERATION_GET_INPUT);
+    app_control_set_mime(service, "text/plain");
+    app_control_add_extra_data(service, APP_CONTROL_DATA_INPUT_TYPE, "input_voice");
+    app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_send_launch_request(service, app_control_result, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+    app_control_send_launch_request(service, app_control_result, NULL);
+    app_control_destroy(service);
 }
 
 static void
 app_control_result(app_control_h request, app_control_h reply, app_control_result_e result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data) 
+                   void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *value;
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == APP_CONTROL_RESULT_SUCCEEDED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int ret = app_control_get_extra_data(reply, APP_CONTROL_DATA_TEXT, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*  Value is the result string */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    char *value;
+    if (result == APP_CONTROL_RESULT_SUCCEEDED) {
+        int ret = app_control_get_extra_data(reply, APP_CONTROL_DATA_TEXT, &amp;value);
+        if (ret == APP_CONTROL_ERROR_NONE) {
+            /*  Value is the result string */
+        }
+    }
 }
 </pre>
 
@@ -2588,4 +2588,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/dali_app_n.htm b/org.tizen.guides/html/native/app_management/dali_app_n.htm
index 5238666..131f99a 100644 (file)
--- a/org.tizen.guides/html/native/app_management/dali_app_n.htm
+++ b/org.tizen.guides/html/native/app_management/dali_app_n.htm
@@ -66,7 +66,7 @@
 
 <h2 id="app_type" name="app_type">Application Types</h2>
 
-<p>With the DALi UI, you can create the following application types:</p> 
+<p>With the DALi UI, you can create the following application types:</p>
 
 <ul>
 <li><a href="dali_basic_app_n.htm">Basic UI application</a>
diff --git a/org.tizen.guides/html/native/app_management/dali_basic_app_n.htm b/org.tizen.guides/html/native/app_management/dali_basic_app_n.htm
index 5aa9891..043c4ae 100644 (file)
--- a/org.tizen.guides/html/native/app_management/dali_basic_app_n.htm
+++ b/org.tizen.guides/html/native/app_management/dali_basic_app_n.htm
@@ -199,7 +199,7 @@ mApplication.InitSignal().Connect( this, &amp;HelloWorld::Create );
 <pre class="prettyprint">
 Stage stage = Stage::GetCurrent();
 
-TextLabel textLabel = TextLabel::New( &quot;Hello World&quot; );
+TextLabel textLabel = TextLabel::New( "Hello World" );
 stage.Add( textLabel );
 </pre>
 
diff --git a/org.tizen.guides/html/native/app_management/dali_watch_app_n.htm b/org.tizen.guides/html/native/app_management/dali_watch_app_n.htm
index 52cd075..d0adf2c 100644 (file)
--- a/org.tizen.guides/html/native/app_management/dali_watch_app_n.htm
+++ b/org.tizen.guides/html/native/app_management/dali_watch_app_n.htm
@@ -172,20 +172,20 @@ WatchApplication application = WatchApplication::New( &amp;argc, &amp;argv );
 <pre class="prettyprint">
 class WatchExample : public ConnectionTracker
 {
-&nbsp;&nbsp;public:
-&nbsp;&nbsp;&nbsp;&nbsp;WatchExample( WatchApplication&amp; application )
-&nbsp;&nbsp;&nbsp;&nbsp;: mApplication( application )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect( this, &amp;WatchExample::Create );
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;void Create( Application&amp; application )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create a DALi UI component
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;private:
-&nbsp;&nbsp;&nbsp;&nbsp;WatchApplication&amp; mApplication;
+  public:
+    WatchExample( WatchApplication&amp; application )
+    : mApplication( application )
+    {
+      mApplication.InitSignal().Connect( this, &amp;WatchExample::Create );
+    }
+
+    void Create( Application&amp; application )
+    {
+      // Create a DALi UI component
+    }
+
+  private:
+    WatchApplication&amp; mApplication;
 }
 </pre>
 </li>
@@ -201,12 +201,12 @@ mApplication.TimeTickSignal().Connect( this, &amp;WatchExample::OnTimeTick );
 // Update clock hands on the tick event
 void OnTimeTick( Application&amp; application, const WatchTime&amp; time )
 {
-&nbsp;&nbsp;UpdateClockHands(time.GetHour(), time.GetMinute(), time.GetSecond());
+  UpdateClockHands(time.GetHour(), time.GetMinute(), time.GetSecond());
 }
 
 void UpdateClockHands(int hour, int min, int sec)
 {
-&nbsp;&nbsp;// Update the angle of each hand
+  // Update the angle of each hand
 }
 </pre>
 </li></ol></li></ol>
diff --git a/org.tizen.guides/html/native/app_management/data_bundles_n.htm b/org.tizen.guides/html/native/app_management/data_bundles_n.htm
index 0827105..2f46367 100644 (file)
--- a/org.tizen.guides/html/native/app_management/data_bundles_n.htm
+++ b/org.tizen.guides/html/native/app_management/data_bundles_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Data Bundle</title> 
- </head> 
+  <title>Data Bundle</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -46,8 +46,8 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
- <h1>Data Bundle</h1> 
-  
+ <h1>Data Bundle</h1>
+
 <p>A bundle is a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-value pairs, where keys are used to locate elements in the list. The key is always a string.</p>
 
 <p>The main features of the Bundle API include:</p>
@@ -88,31 +88,31 @@ bundle_free(bund);
 </ol>
 
  <h2 id="add" name="add">Adding Content to a Bundle</h2>
- 
+
  <p>The bundle content is in the form of key-value pairs. The key is always a string. The value can be of the following types:</p>
 
- <p align="center" class="Table"><strong>Table: Bundle value types</strong></p> 
+ <p align="center" class="Table"><strong>Table: Bundle value types</strong></p>
 <table>
    <tbody>
-    <tr> 
-     <th>Value constant</th> 
-     <th>Value type</th> 
-    </tr> 
     <tr>
-     <td><code>BUNDLE_TYPE_STR</code></td> 
-     <td>String (default)</td> 
-    </tr> 
-    <tr> 
-     <td><code>BUNDLE_TYPE_STR_ARRAY</code></td> 
-     <td>String array</td> 
-    </tr> 
-    <tr> 
-     <td><code>BUNDLE_TYPE_BYTE</code></td> 
-     <td>Byte</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-       
+     <th>Value constant</th>
+     <th>Value type</th>
+    </tr>
+    <tr>
+     <td><code>BUNDLE_TYPE_STR</code></td>
+     <td>String (default)</td>
+    </tr>
+    <tr>
+     <td><code>BUNDLE_TYPE_STR_ARRAY</code></td>
+     <td>String array</td>
+    </tr>
+    <tr>
+     <td><code>BUNDLE_TYPE_BYTE</code></td>
+     <td>Byte</td>
+    </tr>
+   </tbody>
+  </table>
+
 <p>To add content to a bundle, use a function associated with the type of the value you want to add:</p>
 <ul>
  <li><code>bundle_add_str_array()</code></li>
@@ -121,14 +121,14 @@ bundle_free(bund);
 </ul>
 
 <pre class="prettyprint">
-const char* array [3] = {&quot;Var1&quot;, &quot;Var2&quot;, &quot;Var3&quot;};
+const char* array [3] = {"Var1", "Var2", "Var3"};
 int array_len = 3;
 
-bundle_add_str(bund, &quot;Str&quot;, &quot;String content&quot;);
+bundle_add_str(bund, "Str", "String content");
 
-bundle_add_str_array(bund, &quot;Array&quot;, array, array_len);
+bundle_add_str_array(bund, "Array", array, array_len);
 
-bundle_add_byte(bund, &quot;Byte&quot;, &quot;Byte content&quot;, 12);
+bundle_add_byte(bund, "Byte", "Byte content", 12);
 </pre>
 
 <p>When operating on bytes, remember to control the length of the given chain.</p>
@@ -139,8 +139,8 @@ bundle_add_byte(bund, &quot;Byte&quot;, &quot;Byte content&quot;, 12);
 <p>To manage the bundle content:</p>
 
 <ol>
-<li>Get values from the bundle using the function associated with the type of the value you want to get: 
- 
+<li>Get values from the bundle using the function associated with the type of the value you want to get:
+
 <ul>
 <li><code>bundle_get_str()</code></li>
 <li><code>bundle_get_str_array()</code></li>
@@ -153,26 +153,26 @@ bundle_add_byte(bund, &quot;Byte&quot;, &quot;Byte content&quot;, 12);
 void
 test_bundle_add_del_get(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *b = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int count = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *value;
+    bundle *b = NULL;
+    int count = 0;
+    char *value;
 
-&nbsp;&nbsp;&nbsp;&nbsp;b = bundle_create();
+    b = bundle_create();
 
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;key1&quot;, &quot;val1&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;key2&quot;, &quot;val2&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(b, &quot;key2&quot;, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;the value of key2: %s&quot;, value);
+    bundle_add_str(b, "key1", "val1");
+    bundle_add_str(b, "key2", "val2");
+    bundle_get_str(b, "key2", &amp;value);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "the value of key2: %s", value);
 
-&nbsp;&nbsp;&nbsp;&nbsp;count = bundle_get_count(b);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;the number of bundle items: %d&quot;, count);
+    count = bundle_get_count(b);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "the number of bundle items: %d", count);
 </pre>
 </li>
 <li>Delete a key-value pair from the bundle content using the <code>bundle_del()</code> function:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_del(b, &quot;key2&quot;);
+    bundle_del(b, "key2");
 
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(b);
+    bundle_free(b);
 }
 </pre>
 </li>
@@ -188,57 +188,57 @@ test_bundle_add_del_get(void)
 <pre class="prettyprint">
 void
 iterate_bundle_foreach(const char *key, const int type, bundle_keyval_t *kv,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                       void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;key: %s, type: %d &quot;, key, type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;void *ptr = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *buff = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int size = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == BUNDLE_TYPE_STR) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle_keyval_get_basic_val((bundle_keyval_t *)kv, &amp;ptr, &amp;size);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buff = malloc(sizeof(char)* size + 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buff, size + 1, &quot;%s&quot;, ((char*)ptr));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Found STR -KEY: %s, VAL: %s, SIZE: %d&quot;, key, buff, size);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(buff);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (type == BUNDLE_TYPE_BYTE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle_keyval_get_basic_val((bundle_keyval_t *)kv, &amp;ptr, &amp;size);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buff = malloc(sizeof(char)* size + 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buff, size + 1, &quot;%s&quot;, ((char*)ptr));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Found STR -KEY: %s, VAL: %s, SIZE: %d&quot;, key, buff, size);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(buff);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (type == BUNDLE_TYPE_STR_ARRAY) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void ** array;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int len = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size_t *element_size = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Found STR_ARRAY -KEY: %s&quot;, key);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle_keyval_get_array_val((bundle_keyval_t *)kv, &amp;array, &amp;len, &amp;element_size);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;-Array len: %d&quot;, len);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; len; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;-%s&quot;, (char*)array[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    dlog_print(DLOG_DEBUG, LOG_TAG, "key: %s, type: %d ", key, type);
+
+    void *ptr = NULL;
+    char *buff = NULL;
+    unsigned int size = 0;
+    if (type == BUNDLE_TYPE_STR) {
+        bundle_keyval_get_basic_val((bundle_keyval_t *)kv, &amp;ptr, &amp;size);
+        buff = malloc(sizeof(char)* size + 1);
+        snprintf(buff, size + 1, "%s", ((char*)ptr));
+        dlog_print(DLOG_DEBUG, LOG_TAG,
+                   "Found STR -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
+        free(buff);
+    } else if (type == BUNDLE_TYPE_BYTE) {
+        bundle_keyval_get_basic_val((bundle_keyval_t *)kv, &amp;ptr, &amp;size);
+        buff = malloc(sizeof(char)* size + 1);
+        snprintf(buff, size + 1, "%s", ((char*)ptr));
+        dlog_print(DLOG_DEBUG, LOG_TAG,
+                   "Found STR -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
+        free(buff);
+    } else if (type == BUNDLE_TYPE_STR_ARRAY) {
+        void ** array;
+        unsigned int len = 0;
+        size_t *element_size = NULL;
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Found STR_ARRAY -KEY: %s", key);
+        bundle_keyval_get_array_val((bundle_keyval_t *)kv, &amp;array, &amp;len, &amp;element_size);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "-Array len: %d", len);
+        for (int i = 0; i &lt; len; i++)
+            dlog_print(DLOG_DEBUG, LOG_TAG, "-%s", (char*)array[i]);
+    }
 }
 
 void
 test_bundle_foreach(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *s_arr[] = {&quot;abc&quot;, &quot;bcd&quot;, &quot;cde&quot;};
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *b;
-&nbsp;&nbsp;&nbsp;&nbsp;b = bundle_create();
+    const char *s_arr[] = {"abc", "bcd", "cde"};
+    bundle *b;
+    b = bundle_create();
 
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;k1&quot;, &quot;v1&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_byte(b, &quot;k2&quot;, &quot;v2&quot;, 3);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str_array(b, &quot;k3&quot;, s_arr, 3);
+    bundle_add_str(b, "k1", "v1");
+    bundle_add_byte(b, "k2", "v2", 3);
+    bundle_add_str_array(b, "k3", s_arr, 3);
 
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_foreach(b, iterate_bundle_foreach, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(b);
+    bundle_foreach(b, iterate_bundle_foreach, NULL);
+    bundle_free(b);
 }
 </pre>
 
  <h2 id="encode" name="encode">Encoding and Decoding a Bundle</h2>
- 
+
 <p>To store or send a bundle over a serial connection, encode it to <code>bundle_raw</code> (a typedef of <code>unsigned char</code>) with the <code>bundle_encode()</code> function, and write the <code>bundle_raw</code> instance to a file, for example.</p>
 <p>To open the encoded bundle, use the <code>bundle_decode()</code> function. When you no longer need them, release the encoded data and the created bundle.</p>
 
@@ -246,25 +246,25 @@ test_bundle_foreach(void)
 void
 test_bundle_encode_decode(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *b1;
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *b1;
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_raw *r;
-&nbsp;&nbsp;&nbsp;&nbsp;int size_r;
-&nbsp;&nbsp;&nbsp;&nbsp;char *value;
+    bundle *b1;
+    bundle *b1;
+    bundle_raw *r;
+    int size_r;
+    char *value;
 
-&nbsp;&nbsp;&nbsp;&nbsp;b1 = bundle_create();
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b1, &quot;k1&quot;, &quot;v1&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b1, &quot;k2&quot;, &quot;v2&quot;);
+    b1 = bundle_create();
+    bundle_add_str(b1, "k1", "v1");
+    bundle_add_str(b1, "k2", "v2");
 
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_encode(b1, &amp;r, &amp;size_r);
+    bundle_encode(b1, &amp;r, &amp;size_r);
 
-&nbsp;&nbsp;&nbsp;&nbsp;b2 = bundle_decode(r, size_r);
+    b2 = bundle_decode(r, size_r);
 
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(b1, &quot;k1&quot;, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;value of k1 after decode: %s&quot;, value);
+    bundle_get_str(b1, "k1", &amp;value);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "value of k1 after decode: %s", value);
 
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(b1);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(b2);
+    bundle_free(b1);
+    bundle_free(b2);
 }
 </pre>
 
@@ -290,4 +290,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/data_control_n.htm b/org.tizen.guides/html/native/app_management/data_control_n.htm
index 694a7c4..8a94c75 100644 (file)
--- a/org.tizen.guides/html/native/app_management/data_control_n.htm
+++ b/org.tizen.guides/html/native/app_management/data_control_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Data Control</title> 
- </head> 
+  <title>Data Control</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -45,7 +45,7 @@
 
 <h1 id="data_controls" name="data_controls">Data Control</h1>
 <p>The data control is a standard mechanism for exchanging specific data between applications.</p>
- 
+
 <p>A provider application shares its data, and a consumer application can request the shared data. All applications can function as consumers and request data shared by other applications using a data control. However, only service applications can function as providers and share their own data.</p>
 
 <p>The main features of the Data Control API include:</p>
@@ -62,8 +62,8 @@
 <p>You can <a href="#map3">monitor data changes and provide notifications about them</a>. The available notification types are listed in the <code>data_control_data_change_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html#ga09ee00edc0c08676b2fa241f30fab378">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html#ga09ee00edc0c08676b2fa241f30fab378">wearable</a> applications).</p></li>
 </ul>
 <p>To create a provider, you must <a href="#export">export its provider functionalities</a> in the application project settings in the IDE. For the consumer to access shared data, it must know the provider ID and data ID.</p>
- 
-  <p align="center"><strong>Figure: Data control mechanism</strong></p> 
+
+  <p align="center"><strong>Figure: Data control mechanism</strong></p>
   <p align="center"><img alt="Data control mechanism" src="../../images/datacontrol.png" /></p>
 
 <h2 id="prerequisites">Prerequisites</h2>
@@ -76,8 +76,8 @@
 <p>To use the Data Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">wearable</a> applications), the consumer has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/datasharing&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/datasharing&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -86,24 +86,24 @@
 
 <p>The following code example shows how the <code>&lt;datacontrol&gt;</code> element is consequently added to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.4&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;@PACKAGE_NAME@&quot; version=&quot;@VERSION@&quot; install-location=&quot;internal-only&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;datacontrolprovider&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;author email=&quot;PUT YOUR EMAIL&quot; href=&quot;www.tizen.org&quot;&gt;PUT YOUR NAME&lt;/author&gt;
-&nbsp;&nbsp;&nbsp;&lt;description&gt;datacontrolprovider&lt;/description&gt;
-&nbsp;&nbsp;&nbsp;&lt;service-application appid=&quot;org.tizen.datacontrolprovider&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exec=&quot;datacontrolprovider&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;true&quot; multiple=&quot;false&quot; type=&quot;capp&quot; taskmanage=&quot;true&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;auto-restart=&quot;false&quot; on-boot=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">&lt;datacontrol providerid = &quot;Your Provider ID&quot;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">access=&quot;ReadWrite&quot; type=&quot;Sql&quot;/&gt;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">&lt;datacontrol providerid = &quot;Your Provider ID&quot;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">access=&quot;ReadWrite&quot; type=&quot;Map&quot;/&gt;</span>
-&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;
-&nbsp;&nbsp;&nbsp;&lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/datasharing&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;/privileges&gt;
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;manifest xmlns="http://tizen.org/ns/packages" api-version="2.4"
+          package="@PACKAGE_NAME@" version="@VERSION@" install-location="internal-only"&gt;
+   &lt;label&gt;datacontrolprovider&lt;/label&gt;
+   &lt;author email="PUT YOUR EMAIL" href="www.tizen.org"&gt;PUT YOUR NAME&lt;/author&gt;
+   &lt;description&gt;datacontrolprovider&lt;/description&gt;
+   &lt;service-application appid="org.tizen.datacontrolprovider"
+                   exec="datacontrolprovider"
+                   nodisplay="true" multiple="false" type="capp" taskmanage="true"
+                   auto-restart="false" on-boot="false"&gt;
+      <span class="highlight">&lt;datacontrol providerid = "Your Provider ID"</span>
+                   <span class="highlight">access="ReadWrite" type="Sql"/&gt;</span>
+      <span class="highlight">&lt;datacontrol providerid = "Your Provider ID"</span>
+                   <span class="highlight">access="ReadWrite" type="Map"/&gt;</span>
+   &lt;/service-application&gt;
+   &lt;privileges&gt;
+      &lt;privilege&gt;http://tizen.org/privilege/datasharing&lt;/privilege&gt;
+   &lt;/privileges&gt;
 &lt;/manifest&gt;
 </pre>
 
@@ -136,8 +136,8 @@
 
 <pre class="prettyprint">
 struct map_data {
-&nbsp;&nbsp;&nbsp;&nbsp;char **str_arr;
-&nbsp;&nbsp;&nbsp;&nbsp;int arr_size;
+    char **str_arr;
+    int arr_size;
 };
 typedef struct map_data map_data_s;
 
@@ -146,118 +146,118 @@ static GHashTable *map_repository_test;
 /* Callback for handling the get operation request */
 void
 get_value_request_cb(int request_id, data_control_h provider, const char *key,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                     void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;map_data_s* map_data =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(map_data_s*)g_hash_table_lookup(map_repository_test, key);
-
-&nbsp;&nbsp;&nbsp;&nbsp;int ret_value_count = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char **val_arr = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;if (map_data != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;val_arr = map_data-&gt;str_arr;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret_value_count = map_data-&gt;arr_size;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = data_control_provider_send_map_get_value_result(request_id, val_arr,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret_value_count);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;send_map_get_result failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Get value success request_id: %d&quot;, request_id);
+    map_data_s* map_data =
+        (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+
+    int ret_value_count = 0;
+    char **val_arr = NULL;
+    if (map_data != NULL) {
+        val_arr = map_data-&gt;str_arr;
+        ret_value_count = map_data-&gt;arr_size;
+    }
+
+    int ret = data_control_provider_send_map_get_value_result(request_id, val_arr,
+                                                              ret_value_count);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "send_map_get_result failed with error: %d", ret);
+    else
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "Get value success request_id: %d", request_id);
 }
 
 /* Callback for handling the set operation request */
 void
 set_value_request_cb(int request_id, data_control_h provider, const char *key,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *old_value, const char *new_value,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                     const char *old_value, const char *new_value,
+                     void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;map_data_s* map_data =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(map_data_s*)g_hash_table_lookup(map_repository_test, key);
-&nbsp;&nbsp;&nbsp;&nbsp;if (map_data != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; map_data-&gt;arr_size; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(map_data-&gt;str_arr[i], old_value) == 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;str_arr[i] = g_strdup(new_value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = data_control_provider_send_map_result(request_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;send_map_result failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Set value success request_id: %d&quot;, request_id);
+    map_data_s* map_data =
+        (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+    if (map_data != NULL) {
+        for (int i = 0; i &lt; map_data-&gt;arr_size; i++) {
+            if (strcmp(map_data-&gt;str_arr[i], old_value) == 0)
+                map_data-&gt;str_arr[i] = g_strdup(new_value);
+        }
+    }
+
+    int ret = data_control_provider_send_map_result(request_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "send_map_result failed with error: %d", ret);
+    else
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "Set value success request_id: %d", request_id);
 }
 
 /* Callback for handling the add operation request */
 void
 add_value_request_cb(int request_id, data_control_h provider, const char *key,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *value, void *user_data)
+                     const char *value, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;map_data_s* map_data =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(map_data_s*)g_hash_table_lookup(map_repository_test, key);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (map_data == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data = (map_data_s*)(g_malloc(sizeof(*map_data)));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;arr_size = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;str_arr = (char**)calloc(1, sizeof(char*));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;str_arr[0] = g_strdup(value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_hash_table_insert(map_repository_test, g_strdup(key), map_data);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char **new_arr = (char**)calloc(map_data-&gt;arr_size+2, sizeof(char*));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; map_data-&gt;arr_size; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_arr[i] = g_strdup(map_data-&gt;str_arr[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(map_data-&gt;str_arr);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_arr[map_data-&gt;arr_size] = g_strdup(value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;str_arr = g_strdupv(new_arr);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(new_arr);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;arr_size += 1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = data_control_provider_send_map_result(request_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;send_map_result failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Add value success request_id: %d %d %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request_id, map_data-&gt;arr_size, map_data-&gt;str_arr[0]);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    map_data_s* map_data =
+        (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+
+    if (map_data == NULL) {
+        map_data = (map_data_s*)(g_malloc(sizeof(*map_data)));
+        map_data-&gt;arr_size = 0;
+        map_data-&gt;str_arr = (char**)calloc(1, sizeof(char*));
+        map_data-&gt;str_arr[0] = g_strdup(value);
+        g_hash_table_insert(map_repository_test, g_strdup(key), map_data);
+    } else {
+        char **new_arr = (char**)calloc(map_data-&gt;arr_size+2, sizeof(char*));
+        for (int i = 0; i &lt; map_data-&gt;arr_size; i++)
+            new_arr[i] = g_strdup(map_data-&gt;str_arr[i]);
+        free(map_data-&gt;str_arr);
+        new_arr[map_data-&gt;arr_size] = g_strdup(value);
+        map_data-&gt;str_arr = g_strdupv(new_arr);
+        free(new_arr);
+    }
+    map_data-&gt;arr_size += 1;
+
+    int ret = data_control_provider_send_map_result(request_id);
+    if (ret != DATA_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "send_map_result failed with error: %d", ret);
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Add value success request_id: %d %d %s",
+                   request_id, map_data-&gt;arr_size, map_data-&gt;str_arr[0]);
+    }
 }
 
 /* Callback for handling the remove operation request */
 void
 remove_value_request_cb(int request_id, data_control_h provider, const char *key,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *value, void *user_data)
+                        const char *value, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;map_data_s* map_data =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(map_data_s*)g_hash_table_lookup(map_repository_test, key);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (map_data != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int size = map_data-&gt;arr_size;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; size; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(map_data-&gt;str_arr[i], value) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(map_data-&gt;str_arr[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map_data-&gt;arr_size--;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (map_data-&gt;arr_size == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!g_hash_table_remove(map_repository_test, key)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;remove value failed -%s&quot;, key);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = data_control_provider_send_map_result(request_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;send_map_result failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Remove value Success&quot;);
+    map_data_s* map_data =
+        (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+
+    if (map_data != NULL) {
+        int size = map_data-&gt;arr_size;
+        for (int i = 0; i &lt; size; i++) {
+            if (strcmp(map_data-&gt;str_arr[i], value) == 0) {
+                free(map_data-&gt;str_arr[i]);
+                map_data-&gt;arr_size--;
+            }
+        }
+        if (map_data-&gt;arr_size == 0) {
+            if (!g_hash_table_remove(map_repository_test, key)) {
+                dlog_print(DLOG_ERROR, LOG_TAG, "remove value failed -%s", key);
+
+                return;
+            }
+        }
+    }
+
+    int ret = data_control_provider_send_map_result(request_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "send_map_result failed with error: %d", ret);
+    else
+        dlog_print(DLOG_INFO, LOG_TAG, "Remove value Success");
 }
 </pre>
 </li>
@@ -267,50 +267,50 @@ remove_value_request_cb(int request_id, data_control_h provider, const char *key
 void
 __free_key(gpointer data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (data) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Remove key&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (data) {
+        g_free(data);
+        data = NULL;
+        dlog_print(DLOG_INFO, LOG_TAG, "Remove key");
+    }
 }
 
 void
 __free_data(gpointer data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (data) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Remove value&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (data) {
+        g_free(data);
+        data = NULL;
+        dlog_print(DLOG_INFO, LOG_TAG, "Remove value");
+    }
 }
 
 data_control_provider_map_cb map_callback;
 void
 initialize_datacontrol_provider()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;map_repository_test = g_hash_table_new_full(g_str_hash, g_str_equal,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__free_key, __free_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;map_callback.get_cb = get_value_request_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;map_callback.add_cb = add_value_request_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;map_callback.remove_cb = remove_value_request_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;map_callback.set_cb = set_value_request_cb;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int result = data_control_provider_map_register_cb(&amp;map_callback);
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;data_control_provider_map_register_cb failed with error: %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Provider map register success&quot;);
+    map_repository_test = g_hash_table_new_full(g_str_hash, g_str_equal,
+                                                __free_key, __free_data);
+
+    map_callback.get_cb = get_value_request_cb;
+    map_callback.add_cb = add_value_request_cb;
+    map_callback.remove_cb = remove_value_request_cb;
+    map_callback.set_cb = set_value_request_cb;
+
+    int result = data_control_provider_map_register_cb(&amp;map_callback);
+    if (result != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "data_control_provider_map_register_cb failed with error: %d",
+                   result);
+    else
+        dlog_print(DLOG_INFO, LOG_TAG, "Provider map register success");
 }
 
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;initialize_datacontrol_provider()
+    initialize_datacontrol_provider()
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -324,63 +324,63 @@ app_create(void *data)
 /* Callback for the get operation response */
 void
 map_get_response_cb(int request_id, data_control_h provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char **ret_value_list, int ret_value_count, bool provider_ret,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *error, void *user_data)
+                    char **ret_value_list, int ret_value_count, bool provider_ret,
+                    const char *error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (provider_ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The get operation is successful. Value count: %d &quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret_value_count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; ret_value_count; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;(%d) Return value: %s &quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i, ret_value_list[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The get operation for the request %d failed.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error message: %s&quot;, request_id, error);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (provider_ret) {
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "The get operation is successful. Value count: %d ",
+                   ret_value_count);
+        for (int i = 0; i &lt; ret_value_count; i++)
+            dlog_print(DLOG_INFO, LOG_TAG, "(%d) Return value: %s ",
+                       i, ret_value_list[i]);
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "The get operation for the request %d failed.
+                    error message: %s", request_id, error);
+    }
 }
 
 /* Callback for the set operation response */
 void
 map_set_response_cb(int request_id, data_control_h provider, bool provider_ret,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *error, void *user_data)
+                    const char *error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (provider_ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The set operation is successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The set operation for the request %d failed.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error message: %s&quot;, request_id, error);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (provider_ret) {
+        dlog_print(DLOG_INFO, LOG_TAG, "The set operation is successful");
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "The set operation for the request %d failed.
+                    error message: %s", request_id, error);
+    }
 }
 
 /* Callback for the add operation response */
 void
 map_add_response_cb(int request_id, data_control_h provider, bool provider_ret,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *error, void *user_data)
+                    const char *error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (provider_ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The add operation is successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The add operation for the request %d failed.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error message: %s&quot;, request_id, error);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (provider_ret) {
+        dlog_print(DLOG_INFO, LOG_TAG, "The add operation is successful");
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "The add operation for the request %d failed.
+                    error message: %s", request_id, error);
+    }
 }
 
 /* Callback for the remove operation response */
 void
 map_remove_response_cb(int request_id, data_control_h provider, bool provider_ret,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *error, void *user_data)
+                       const char *error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (provider_ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The remove operation is successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The remove operation for the request %d failed.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error message: %s&quot;, request_id, error);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (provider_ret) {
+        dlog_print(DLOG_INFO, LOG_TAG, "The remove operation is successful");
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "The remove operation for the request %d failed.
+                    error message: %s", request_id, error);
+    }
 }
 </pre>
 </li>
@@ -391,68 +391,68 @@ data_control_map_response_cb map_callback;
 void
 initialize_datacontrol_consumer(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *provider_id = Your Provider ID;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *data_id = &quot;table&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create data control handler */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_map_create(&amp;(ad-&gt;provider_h));
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;creating data control provider failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_map_set_provider_id(ad-&gt;provider_h, provider_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;setting provider id failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_map_set_data_id(ad-&gt;provider_h, data_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;setting data id failed with error: %d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set response callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;map_callback.get_cb = map_get_response_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;map_callback.set_cb = map_set_response_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;map_callback.add_cb = map_add_response_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;map_callback.remove_cb = map_remove_response_cb;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register response callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_map_register_response_cb(ad-&gt;provider_h,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;map_callback, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Registering the callback function failed with error: %d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == DATA_CONTROL_ERROR_IO_ERROR)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;I/O error&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Out of memory&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;int req_id = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send a request to add a value */
-&nbsp;&nbsp;&nbsp;&nbsp;const char *key = &quot;key&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *value = &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_map_add(ad-&gt;provider_h, key, value, &amp;req_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send a request to get a value */
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_map_get(ad-&gt;provider_h, key, &amp;req_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send a request to set a value */
-&nbsp;&nbsp;&nbsp;&nbsp;const char *old_value = &quot;old value&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *new_value = &quot;new value&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_map_set(ad-&gt;provider_h, key, old_value, new_value, &amp;req_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send a request to remove a value */
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_map_remove(ad-&gt;provider_h, key, value, &amp;req_id);
+    const char *provider_id = Your Provider ID;
+    const char *data_id = "table";
+    int ret;
+
+    /* Create data control handler */
+    ret = data_control_map_create(&amp;(ad-&gt;provider_h));
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "creating data control provider failed with error: %d", ret);
+    ret = data_control_map_set_provider_id(ad-&gt;provider_h, provider_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "setting provider id failed with error: %d", ret);
+    ret = data_control_map_set_data_id(ad-&gt;provider_h, data_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "setting data id failed with error: %d", ret);
+
+    /* Set response callbacks */
+    map_callback.get_cb = map_get_response_cb;
+    map_callback.set_cb = map_set_response_cb;
+    map_callback.add_cb = map_add_response_cb;
+    map_callback.remove_cb = map_remove_response_cb;
+
+    /* Register response callbacks */
+    ret = data_control_map_register_response_cb(ad-&gt;provider_h,
+                                                &amp;map_callback, NULL);
+    if (ret != DATA_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "Registering the callback function failed with error: %d", ret);
+
+        if (ret == DATA_CONTROL_ERROR_IO_ERROR)
+            dlog_print(DLOG_ERROR, LOG_TAG, "I/O error");
+        else
+            dlog_print(DLOG_ERROR, LOG_TAG, "Out of memory");
+    }
+
+    int req_id = 0;
+
+    /* Send a request to add a value */
+    const char *key = "key";
+    const char *value = "value";
+    data_control_map_add(ad-&gt;provider_h, key, value, &amp;req_id);
+
+    /* Send a request to get a value */
+    data_control_map_get(ad-&gt;provider_h, key, &amp;req_id);
+
+    /* Send a request to set a value */
+    const char *old_value = "old value";
+    const char *new_value = "new value";
+    data_control_map_set(ad-&gt;provider_h, key, old_value, new_value, &amp;req_id);
+
+    /* Send a request to remove a value */
+    data_control_map_remove(ad-&gt;provider_h, key, value, &amp;req_id);
 }
 
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;initialize_datacontrol_consumer(ad);
+    initialize_datacontrol_consumer(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -479,109 +479,109 @@ static sqlite3* db;
 /* Callback for handling the insert operation request */
 void
 insert_request_cb(int request_id, data_control_h provider, bundle *insert_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                  void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_insert_statement(provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;insert_data);
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_error(request_id, sqlite3_errmsg(db));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[insert_request_cb] insert success&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;long long inserted_row_id = sqlite3_last_insert_rowid(db);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_provider_send_insert_result(request_id, inserted_row_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;insert_send_result failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[insert_request_cb] send result success&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;free(command);
+    char* command = data_control_provider_create_insert_statement(provider,
+                                                                  insert_data);
+    int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
+
+    if (ret != SQLITE_OK) {
+        data_control_provider_send_error(request_id, sqlite3_errmsg(db));
+        free(command);
+
+        return;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "[insert_request_cb] insert success");
+
+    long long inserted_row_id = sqlite3_last_insert_rowid(db);
+    ret = data_control_provider_send_insert_result(request_id, inserted_row_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "insert_send_result failed with error: %d", ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "[insert_request_cb] send result success");
+
+    free(command);
 }
 
 /* Callback for handling the select operation request */
 void
 select_request_cb(int request_id, data_control_h provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char **column_list, int column_count, const char *where,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *order, void *user_data)
+                  const char **column_list, int column_count, const char *where,
+                  const char *order, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;sqlite3_stmt* sql_stmt = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_select_statement(provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;column_list,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;column_count,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;where,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;order);
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = sqlite3_prepare_v2(db, command, strlen(command), &amp;sql_stmt, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_error(request_id, sqlite3_errmsg(db));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_provider_send_select_result(request_id, (void *)sql_stmt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;select_send_result failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[select_request_cb] send result success&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;sqlite3_finalize(sql_stmt);
-&nbsp;&nbsp;&nbsp;&nbsp;free(command);
+    sqlite3_stmt* sql_stmt = NULL;
+
+    char* command = data_control_provider_create_select_statement(provider,
+                                                                  column_list,
+                                                                  column_count,
+                                                                  where,
+                                                                  order);
+    int ret = sqlite3_prepare_v2(db, command, strlen(command), &amp;sql_stmt, NULL);
+    if (ret != SQLITE_OK) {
+        data_control_provider_send_error(request_id, sqlite3_errmsg(db));
+        free(command);
+
+        return;
+    }
+
+    ret = data_control_provider_send_select_result(request_id, (void *)sql_stmt);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "select_send_result failed with error: %d", ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "[select_request_cb] send result success");
+
+    sqlite3_finalize(sql_stmt);
+    free(command);
 }
 
 /* Callback for handling the update operation request */
 void
 update_request_cb(int request_id, data_control_h provider, bundle *update_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *where, void *user_data)
+                  const char *where, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_update_statement(provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;update_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;where);
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_error(request_id, sqlite3_errmsg(db));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_provider_send_update_result(request_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;update_send_result failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[update_request_cb] send result success&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;free(command);
+    char* command = data_control_provider_create_update_statement(provider,
+                                                                  update_data,
+                                                                  where);
+    int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
+    if (ret != SQLITE_OK) {
+        data_control_provider_send_error(request_id, sqlite3_errmsg(db));
+        free(command);
+
+        return;
+    }
+
+    ret = data_control_provider_send_update_result(request_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "update_send_result failed with error: %d", ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "[update_request_cb] send result success");
+
+    free(command);
 }
 
 /* Callback for handling the delete operation request */
 void
 delete_request_cb(int request_id, data_control_h provider, const char *where,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                  void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[delete_request_cb] request_id(%d)&quot;, request_id);
-&nbsp;&nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_delete_statement(provider, where);
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_error(request_id, sqlite3_errmsg(db));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_provider_send_delete_result(request_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;delete_send_result failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[delete_request_cb] delete success&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;free(command);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "[delete_request_cb] request_id(%d)", request_id);
+    char* command = data_control_provider_create_delete_statement(provider, where);
+    int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
+    if (ret != SQLITE_OK) {
+        data_control_provider_send_error(request_id, sqlite3_errmsg(db));
+        free(command);
+
+        return;
+    }
+
+    ret = data_control_provider_send_delete_result(request_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "delete_send_result failed with error: %d", ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "[delete_request_cb] delete success");
+
+    free(command);
 }
 </pre>
 </li>
@@ -591,58 +591,58 @@ delete_request_cb(int request_id, data_control_h provider, const char *where,
 int
 create_database()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%s%s&quot;, app_get_data_path(), &quot;test.db&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "%s%s", app_get_data_path(), "test.db");
 
-&nbsp;&nbsp;&nbsp;&nbsp;int open_flags = (SQLITE_OPEN_READWRITE | SQLITE_OPEN_CREATE);
+    int open_flags = (SQLITE_OPEN_READWRITE | SQLITE_OPEN_CREATE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = sqlite3_open_v2(Your DB Path, &amp;db, open_flags, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;database creation failed with error: %d&quot;, ret);
+    int ret = sqlite3_open_v2(Your DB Path, &amp;db, open_flags, NULL);
+    if (ret != SQLITE_OK) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "database creation failed with error: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ret;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return ret;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;char* sql_command = &quot;CREATE TABLE IF NOT EXISTS Dictionary (WORD VARCHAR(30),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WORD_DESC TEXT, WORD_NUM INT, Point INT)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = sqlite3_exec(db, sql_command, NULL, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;database table creation failed with error: %d&quot;, ret);
+    char* sql_command = "CREATE TABLE IF NOT EXISTS Dictionary (WORD VARCHAR(30),
+                         WORD_DESC TEXT, WORD_NUM INT, Point INT)";
+    ret = sqlite3_exec(db, sql_command, NULL, NULL, NULL);
+    if (ret != SQLITE_OK)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "database table creation failed with error: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;sql_command = &quot;CREATE TABLE IF NOT EXISTS Note
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(TITLE VARCHAR(30), CONTENTS TEXT)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = sqlite3_exec(db, sql_command, NULL, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;database table creation failed with error: %d&quot;, ret);
+    sql_command = "CREATE TABLE IF NOT EXISTS Note
+                   (TITLE VARCHAR(30), CONTENTS TEXT)";
+    ret = sqlite3_exec(db, sql_command, NULL, NULL, NULL);
+    if (ret != SQLITE_OK)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "database table creation failed with error: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;DB init Success.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "DB init Success.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 
 void
 initialize_datacontrol_provider()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;initialize_datacontrol_provider&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;int result = create_database();
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != SQLITE_OK)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;sql_callback =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(data_control_provider_sql_cb *)malloc(sizeof(data_control_provider_sql_cb));
-&nbsp;&nbsp;&nbsp;&nbsp;sql_callback-&gt;select_cb = select_request_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;sql_callback-&gt;insert_cb = insert_request_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;sql_callback-&gt;delete_cb = delete_request_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;sql_callback-&gt;update_cb = update_request_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;result = data_control_provider_sql_register_cb(sql_callback, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;data_control_sql_response_c failed with error: %d&quot;, result);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Provider SQL register success&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "initialize_datacontrol_provider");
+
+    int result = create_database();
+    if (result != SQLITE_OK)
+        return;
+
+    sql_callback =
+        (data_control_provider_sql_cb *)malloc(sizeof(data_control_provider_sql_cb));
+    sql_callback-&gt;select_cb = select_request_cb;
+    sql_callback-&gt;insert_cb = insert_request_cb;
+    sql_callback-&gt;delete_cb = delete_request_cb;
+    sql_callback-&gt;update_cb = update_request_cb;
+    result = data_control_provider_sql_register_cb(sql_callback, NULL);
+    if (result != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR,
+                   "data_control_sql_response_c failed with error: %d", result);
+    else
+        dlog_print(DLOG_INFO, LOG_TAG, "Provider SQL register success");
 }
 </pre>
 </li>
@@ -651,77 +651,77 @@ initialize_datacontrol_provider()
 <ol type="a"><li>The consumer sends requests for the insert, select, update, and delete operations to the provider, and receives the results as a response from the provider.
 
 <p>Implement the response callbacks, which receive the request result and data from the provider:</p>
-               
+
 <pre class="prettyprint">
 /* Callback for the insert operation response */
 void
 sql_insert_response_cb(int request_id, data_control_h provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long inserted_row_id, bool provider_result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *error, void *user_data)
+                       long long inserted_row_id, bool provider_result,
+                       const char *error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (provider_result) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The insert operation is successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The insert operation for the request %d failed.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error message: %s&quot;, request_id, error);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (provider_result) {
+        dlog_print(DLOG_INFO, LOG_TAG, "The insert operation is successful");
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "The insert operation for the request %d failed.
+                    error message: %s", request_id, error);
+    }
 }
 
 /* Callback for the select operation response */
 void
 sql_select_response_cb(int request_id, data_control_h provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result_set_cursor cursor, bool provider_result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *error, void *user_data)
+                       result_set_cursor cursor, bool provider_result,
+                       const char *error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (provider_result) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The select operation is successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The select operation for the request %d failed.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error message: %s&quot;, request_id, error);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;while (data_control_sql_step_next(cursor) == DATA_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char word[32] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char word_desc[32] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long word_number = -1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_get_text_data(cursor, 0, word);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_get_text_data(cursor, 1, word_desc);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_get_int64_data(cursor, 2, &amp;word_number);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Word: %s, Word DESC: %s, Word NUM: %ld &quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;word, word_desc, word_number);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (provider_result) {
+        dlog_print(DLOG_INFO, LOG_TAG, "The select operation is successful");
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "The select operation for the request %d failed.
+                    error message: %s", request_id, error);
+    }
+
+    while (data_control_sql_step_next(cursor) == DATA_CONTROL_ERROR_NONE) {
+        char word[32] = {0,};
+        char word_desc[32] = {0,};
+        long long word_number = -1;
+
+        data_control_sql_get_text_data(cursor, 0, word);
+        data_control_sql_get_text_data(cursor, 1, word_desc);
+        data_control_sql_get_int64_data(cursor, 2, &amp;word_number);
+
+        dlog_print(DLOG_INFO, LOG_TAG, "Word: %s, Word DESC: %s, Word NUM: %ld ",
+                   word, word_desc, word_number);
+    }
 }
 
 /* Callback for the update operation response */
 void
 sql_update_response_cb(int request_id, data_control_h provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool provider_result, const char *error, void *user_data)
+                       bool provider_result, const char *error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (provider_result) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The update operation is successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The update operation for the request %d failed.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error message: %s&quot;, request_id, error);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (provider_result) {
+        dlog_print(DLOG_INFO, LOG_TAG, "The update operation is successful");
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "The update operation for the request %d failed.
+                    error message: %s", request_id, error);
+    }
 }
 
 /* Callback for the delete operation response */
 void
 sql_delete_response_cb(int request_id, data_control_h provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool provider_result, const char *error, void *user_data)
+                       bool provider_result, const char *error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (provider_result) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The delete operation is successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The delete operation for the request %d failed.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error message: %s&quot;, request_id, error);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (provider_result) {
+        dlog_print(DLOG_INFO, LOG_TAG, "The delete operation is successful");
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "The delete operation for the request %d failed.
+                    error message: %s", request_id, error);
+    }
 }
 </pre>
 <p>Once you get the <code>result_set_cursor</code> object in the select operation response callback, you can use the following functions to get information:</p>
@@ -745,88 +745,88 @@ data_control_sql_response_cb sql_callback;
 void
 initialize_datacontrol_consumer(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;const char *provider_id = Your Provider ID;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *data_id = &quot;Dictionary&quot;;
+    const char *provider_id = Your Provider ID;
+    const char *data_id = "Dictionary";
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create data control handler */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_sql_create(&amp;(ad-&gt;provider_h));
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;creating data control provider failed with error: %d&quot;, ret);
+    /* Create data control handler */
+    ret = data_control_sql_create(&amp;(ad-&gt;provider_h));
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "creating data control provider failed with error: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_sql_set_provider_id(ad-&gt;provider_h, provider_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;setting provider id failed with error: %d&quot;, ret);
+    ret = data_control_sql_set_provider_id(ad-&gt;provider_h, provider_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "setting provider id failed with error: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_sql_set_data_id(ad-&gt;provider_h, data_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;setting data id failed with error: %d&quot;, ret);
+    ret = data_control_sql_set_data_id(ad-&gt;provider_h, data_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "setting data id failed with error: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set response callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;sql_callback.delete_cb = sql_delete_response_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;sql_callback.insert_cb = sql_insert_response_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;sql_callback.select_cb = sql_select_response_cb;
-&nbsp;&nbsp;&nbsp;&nbsp;sql_callback.update_cb = sql_update_response_cb;
+    /* Set response callbacks */
+    sql_callback.delete_cb = sql_delete_response_cb;
+    sql_callback.insert_cb = sql_insert_response_cb;
+    sql_callback.select_cb = sql_select_response_cb;
+    sql_callback.update_cb = sql_update_response_cb;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register response callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_sql_register_response_cb(ad-&gt;provider_h,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sql_callback, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Registering the callback function failed with error: %d&quot;, ret);
+    /* Register response callbacks */
+    ret = data_control_sql_register_response_cb(ad-&gt;provider_h,
+                                                &amp;sql_callback, NULL);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "Registering the callback function failed with error: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Init data control success&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Init data control success");
 
-&nbsp;&nbsp;&nbsp;&nbsp;int req_id = 0;
+    int req_id = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send a request to insert a row */
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *b = bundle_create();
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;WORD&quot;, &quot;&#39;test&#39;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;WORD_DESC&quot;, &quot;&#39;test desc&#39;&quot;);
+    /* Send a request to insert a row */
+    bundle *b = bundle_create();
+    bundle_add_str(b, "WORD", "'test'");
+    bundle_add_str(b, "WORD_DESC", "'test desc'");
 
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_insert(ad-&gt;provider_h, b, &amp;req_id);
+    data_control_sql_insert(ad-&gt;provider_h, b, &amp;req_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send a request to select a row */
-&nbsp;&nbsp;&nbsp;&nbsp;char *column_list[2];
-&nbsp;&nbsp;&nbsp;&nbsp;column_list[0] = &quot;WORD&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;column_list[1] = &quot;WORD_DESC&quot;;
+    /* Send a request to select a row */
+    char *column_list[2];
+    column_list[0] = "WORD";
+    column_list[1] = "WORD_DESC";
 
-&nbsp;&nbsp;&nbsp;&nbsp;const char *where = &quot;WORD = &#39;test&#39;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *order = &quot;WORD ASC&quot;;
+    const char *where = "WORD = 'test'";
+    const char *order = "WORD ASC";
 
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_select(ad-&gt;provider_h, column_list, 2, where, order, &amp;req_id);
+    data_control_sql_select(ad-&gt;provider_h, column_list, 2, where, order, &amp;req_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send a request to add a row */
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;WORD&quot;, &quot;&#39;test_new&#39;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_update(ad-&gt;provider_h, b, where, &amp;req_id);
+    /* Send a request to add a row */
+    bundle_add_str(b, "WORD", "'test_new'");
+    data_control_sql_update(ad-&gt;provider_h, b, where, &amp;req_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send a request to delete a row */
-&nbsp;&nbsp;&nbsp;&nbsp;const char *where_delete = &quot;WORD = &#39;test&#39;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;result = data_control_sql_delete(ad-&gt;provider_h, where_delete, &amp;req_id);
+    /* Send a request to delete a row */
+    const char *where_delete = "WORD = 'test'";
+    result = data_control_sql_delete(ad-&gt;provider_h, where_delete, &amp;req_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Free memory */
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(b);
+    /* Free memory */
+    bundle_free(b);
 }
 
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Take necessary actions before main event loop starts
-&nbsp;&nbsp;&nbsp;&nbsp;   Initialize UI resources and application data
-&nbsp;&nbsp;&nbsp;&nbsp;   If this function returns true, the main loop of application starts
-&nbsp;&nbsp;&nbsp;&nbsp;   If this function returns false, the application is terminated
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-&nbsp;&nbsp;&nbsp;&nbsp;initialize_datacontrol_consumer(ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    /*
+       Take necessary actions before main event loop starts
+       Initialize UI resources and application data
+       If this function returns true, the main loop of application starts
+       If this function returns false, the application is terminated
+    */
+    appdata_s *ad = data;
+
+    create_base_gui(ad);
+    initialize_datacontrol_consumer(ad);
+
+    return true;
 }
 </pre>
 </li>
@@ -834,32 +834,32 @@ app_create(void *data)
 <p>To send requests to a specific table, use the <code>data_control_sql_set_data_id()</code> function:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *b;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Insert data to the Note table */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_sql_set_data_id(ad-&gt;provider_h, &quot;Note&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;setting data id failed with error: %d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;b = bundle_create();
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;TITLE&quot;, &quot;&#39;test&#39;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;CONTENTS&quot;, &quot;&#39;test contents&#39;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_insert(ad-&gt;provider_h, b, &amp;req_id);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(b);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Insert data to the Dictionary table */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_sql_set_data_id(ad-&gt;provider_h, &quot;Dictionary&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;setting data id failed with error: %d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;b = bundle_create();
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;WORD&quot;, &quot;&#39;test&#39;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;WORD_DESC&quot;, &quot;&#39;test desc&#39;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_sql_insert(ad-&gt;provider_h, b, &amp;req_id);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(b);
+    bundle *b;
+    int ret;
+
+    /* Insert data to the Note table */
+    ret = data_control_sql_set_data_id(ad-&gt;provider_h, "Note");
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "setting data id failed with error: %d", ret);
+
+    b = bundle_create();
+    bundle_add_str(b, "TITLE", "'test'");
+    bundle_add_str(b, "CONTENTS", "'test contents'");
+    data_control_sql_insert(ad-&gt;provider_h, b, &amp;req_id);
+    bundle_free(b);
+
+    /* Insert data to the Dictionary table */
+    ret = data_control_sql_set_data_id(ad-&gt;provider_h, "Dictionary");
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "setting data id failed with error: %d", ret);
+
+    b = bundle_create();
+    bundle_add_str(b, "WORD", "'test'");
+    bundle_add_str(b, "WORD_DESC", "'test desc'");
+    data_control_sql_insert(ad-&gt;provider_h, b, &amp;req_id);
+    bundle_free(b);
 }
 </pre>
 </li>
@@ -867,7 +867,7 @@ app_create(void *data)
 </li></ol>
 
 <h2 id="map3" name="map3">Monitoring Data Changes</h2>
-<p>If the consumer wants to receive data change notifications from the provider, it can request notifications with a data change callback:</p> 
+<p>If the consumer wants to receive data change notifications from the provider, it can request notifications with a data change callback:</p>
 <ul>
 <li>The consumer can add a data change callback using the <code>data_control_add_data_change_cb()</code> function. When no longer needed, the callback can be removed using the <code>data_control_remove_data_change_cb()</code> function.</li>
 <li>To accept the callback addition and notification request from the consumer, the provider uses the <code>data_control_provider_add_data_change_consumer_filter_cb()</code> function to add a notification filter. When no longer needed, the filter can be removed using the <code>data_control_provider_remove_data_change_consumer_filter_cb()</code> function.</li>
@@ -878,49 +878,49 @@ app_create(void *data)
 
 <ol>
 <li id="provider3">Implement monitoring in the provider application.
-<p>When the provider&#39;s data changes, the provider can send information about the changed data to the consumers who have registered a data change notification callback.</p>
+<p>When the provider's data changes, the provider can send information about the changed data to the consumers who have registered a data change notification callback.</p>
 <p>When a consumer attempts to register a data change notification callback, the provider can decide whether to allow it.</p>
 
 <pre class="prettyprint">
 bool
 change_noti_consumer_list_cb(data_control_h provider, char *consumer_appid,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                             void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Added change noti consumer appid: %s&quot;, consumer_appid);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "Added change noti consumer appid: %s", consumer_appid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 bool
 consumer_filter_cb_1(data_control_h provider, char *consumer_appid, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;consumer appid %s try to add data change callback&quot;, consumer_appid);
-&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(consumer_appid, &quot;org.tizen.helloworld_consumer2&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Invalid appid: %s&quot;, consumer_appid);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_foreach_data_change_consumer(provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;change_noti_consumer_list_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "consumer appid %s try to add data change callback", consumer_appid);
+    if (strcmp(consumer_appid, "org.tizen.helloworld_consumer2") == 0) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Invalid appid: %s", consumer_appid);
+
+        return false;
+    }
+    data_control_provider_foreach_data_change_consumer(provider,
+                                                       &amp;change_noti_consumer_list_cb,
+                                                       NULL);
+
+    return true;
 }
 
 bool
 consumer_filter_cb_2(data_control_h provider, char *consumer_appid, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;consumer appid %s try to add data change callback&quot;, consumer_appid);
-&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(consumer_appid, &quot;org.tizen.helloworld_consumer3&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Invalid appid: %s&quot;, consumer_appid);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "consumer appid %s try to add data change callback", consumer_appid);
+    if (strcmp(consumer_appid, "org.tizen.helloworld_consumer3") == 0) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Invalid appid: %s", consumer_appid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 /* Add the filter for the accepted callback registration */
@@ -928,61 +928,61 @@ int filter_callback_id_1;
 int filter_callback_id_2;
 void
 add_consumer_filter_cb_func(void *data, Evas_Object *obj EINA_UNUSED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *event_info EINA_UNUSED)
+                            void *event_info EINA_UNUSED)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_add_data_change_consumer_filter_cb(consumer_filter_cb_1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;filter_callback_id_1);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter_callback_id_1 id: %d&quot;, filter_callback_id_1);
-
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_add_data_change_consumer_filter_cb(consumer_filter_cb_2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;filter_callback_id_2);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter_callback_id_2 id: %d&quot;, filter_callback_id_2);
+    data_control_provider_add_data_change_consumer_filter_cb(consumer_filter_cb_1,
+                                                             NULL,
+                                                             &amp;filter_callback_id_1);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "filter_callback_id_1 id: %d", filter_callback_id_1);
+
+    data_control_provider_add_data_change_consumer_filter_cb(consumer_filter_cb_2,
+                                                             NULL,
+                                                             &amp;filter_callback_id_2);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "filter_callback_id_2 id: %d", filter_callback_id_2);
 }
 
 /* Remove the filter */
 void
 remove_consumer_filter_cb_func(void *data, Evas_Object *obj EINA_UNUSED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *event_info EINA_UNUSED)
+                               void *event_info EINA_UNUSED)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_remove_data_change_consumer_filter_cb(filter_callback_id_1);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remove callback %d&quot;, filter_callback_id_1);
+    data_control_provider_remove_data_change_consumer_filter_cb(filter_callback_id_1);
+    dlog_print(DLOG_INFO, LOG_TAG, "remove callback %d", filter_callback_id_1);
 
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_remove_data_change_consumer_filter_cb(filter_callback_id_2);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remove callback %d&quot;, filter_callback_id_2);
+    data_control_provider_remove_data_change_consumer_filter_cb(filter_callback_id_2);
+    dlog_print(DLOG_INFO, LOG_TAG, "remove callback %d", filter_callback_id_2);
 }
 
 /* Send a data change notification */
 void
 update_request_cb(int request_id, data_control_h provider, bundle *update_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *where, void *user_data)
+                  const char *where, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char* command = data_control_provider_create_update_statement(provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;update_data, where);
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SQLITE_OK) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_error(request_id, sqlite3_errmsg(db));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = data_control_provider_send_update_result(request_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;update_send_result failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[update_request_cb] send result success&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_provider_send_data_change_noti(provider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DATA_CONTROL_DATA_CHANGE_SQL_UPDATE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;update_data);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[send data change notification] Notify data change&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;free(command);
+    char* command = data_control_provider_create_update_statement(provider,
+                                                                  update_data, where);
+    int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
+    if (ret != SQLITE_OK) {
+        data_control_provider_send_error(request_id, sqlite3_errmsg(db));
+        free(command);
+
+        return;
+    }
+
+    ret = data_control_provider_send_update_result(request_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "update_send_result failed with error: %d", ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "[update_request_cb] send result success");
+
+    data_control_provider_send_data_change_noti(provider,
+                                                DATA_CONTROL_DATA_CHANGE_SQL_UPDATE,
+                                                update_data);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "[send data change notification] Notify data change");
+
+    free(command);
 }
 </pre>
 </li>
@@ -994,25 +994,25 @@ update_request_cb(int request_id, data_control_h provider, bundle *update_data,
 /* Triggered when the data change notification arrives */
 void
 data_change_cb(data_control_h provider, data_control_data_change_type_e type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle *data, void *user_data)
+               bundle *data, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *word;
-&nbsp;&nbsp;&nbsp;&nbsp;char *word_desc;
-&nbsp;&nbsp;&nbsp;&nbsp;char *word_num;
-
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(data, &quot;WORD&quot;, &amp;word);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(data, &quot;WORD_DESC&quot;, &amp;word_desc);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(data, &quot;WORD_NUM&quot;, &amp;word_num);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d type noti, changed data: %s, %s, %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type, word, word_desc, word_num);
+    char *word;
+    char *word_desc;
+    char *word_num;
+
+    bundle_get_str(data, "WORD", &amp;word);
+    bundle_get_str(data, "WORD_DESC", &amp;word_desc);
+    bundle_get_str(data, "WORD_NUM", &amp;word_num);
+    dlog_print(DLOG_INFO, LOG_TAG, "%d type noti, changed data: %s, %s, %s",
+               type, word, word_desc, word_num);
 }
 
 /* Triggered when the provider has accepted the callback registration */
 void
 result_cb(data_control_h provider, data_control_error_e result, int callback_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+          void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Add data change callback RESULT: %d&quot;, result);
+    dlog_print(DLOG_INFO, LOG_TAG, "Add data change callback RESULT: %d", result);
 }
 
 /* Register the callback */
@@ -1020,99 +1020,99 @@ int cb_id;
 void
 add_data_change_cb_func(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = data_control_add_data_change_cb(ad-&gt;provider_h, data_change_cb, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result_cb, NULL, &amp;cb_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != DATA_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;add data change callback failed with error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add data change callback done: %d&quot;, cb_id);
+    appdata_s *ad = (appdata_s *)data;
+    int ret = data_control_add_data_change_cb(ad-&gt;provider_h, data_change_cb, NULL,
+                                              result_cb, NULL, &amp;cb_id);
+    if (ret != DATA_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "add data change callback failed with error: %d", ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add data change callback done: %d", cb_id);
 }
 
 /* Remove the callback */
 void
 remove_data_change_cb_func(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;data_control_remove_data_change_cb(ad-&gt;provider_h, cb_id);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remove data change callback done: %d&quot;, cb_id);
+    appdata_s *ad = (appdata_s *)data;
+    data_control_remove_data_change_cb(ad-&gt;provider_h, cb_id);
+    dlog_print(DLOG_INFO, LOG_TAG, "remove data change callback done: %d", cb_id);
 }
 </pre>
 </li>
 </ol>
 
-<h2 id="export" name="export">Data Control Export</h2> 
+<h2 id="export" name="export">Data Control Export</h2>
 
-<p>You can export the provider functionalities of your Tizen native service application in the <a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio. The provider ID, type, and accessibility must be specified for the available data control.</p> 
-  <p align="center"><strong>Figure: Exporting data control</strong></p> 
-  <p align="center"><img alt="Exporting data control" src="../../images/exporting_datacontrol.png"/></p> 
-  <p id="data">The data model must be opened to the public to help other applications to use the exported data controls. The data model consists of the following data:</p> 
+<p>You can export the provider functionalities of your Tizen native service application in the <a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio. The provider ID, type, and accessibility must be specified for the available data control.</p>
+  <p align="center"><strong>Figure: Exporting data control</strong></p>
+  <p align="center"><img alt="Exporting data control" src="../../images/exporting_datacontrol.png"/></p>
+  <p id="data">The data model must be opened to the public to help other applications to use the exported data controls. The data model consists of the following data:</p>
   <ul>
-<li>Provider ID 
+<li>Provider ID
     <ul>
-        <li>It is used for identifying the data control provider.</li> 
+        <li>It is used for identifying the data control provider.</li>
      <li>It must be unique and use a fully-qualified domain name.</li>
-        <li>It must consist of alpha-numeric letters separated with the period (&quot;.&quot;) character, and it must start with a letter.</li>         
-     <li>Platform-defined data control provider is defined in the <code>http://tizen.org/datacontrol/provider/&lt;application name&gt;</code> format.</li> 
-     <li>User-defined data control provider is defined in the <code>http://&lt;vendor.com&gt;/datacontrol/provider/&lt;application name&gt;</code> format.</li> 
+        <li>It must consist of alpha-numeric letters separated with the period (".") character, and it must start with a letter.</li>
+     <li>Platform-defined data control provider is defined in the <code>http://tizen.org/datacontrol/provider/&lt;application name&gt;</code> format.</li>
+     <li>User-defined data control provider is defined in the <code>http://&lt;vendor.com&gt;/datacontrol/provider/&lt;application name&gt;</code> format.</li>
     </ul>
-</li> 
-   <li>Data ID 
+</li>
+   <li>Data ID
     <ul>
-        <li>It is used for identifying data (usually a database table name or a registry section name) exported by the data control provider.</li> 
-     <li>It must be unique in the data control provider and it is given as a string of one or more components, separated by a slash (&quot;/&quot;) character.</li> 
+        <li>It is used for identifying data (usually a database table name or a registry section name) exported by the data control provider.</li>
+     <li>It must be unique in the data control provider and it is given as a string of one or more components, separated by a slash ("/") character.</li>
     </ul>
-</li> 
-   <li>Type 
+</li>
+   <li>Type
     <ul>
-        <li>You can use Tizen native applications that provide their own data structure table and implement the SQL-type data control provider using the database file.</li> 
-     <li>You can use Tizen native applications that provide their own key-value pairs data structure map and implement the map-type data control provider using registry file or collection map classes.</li> 
+        <li>You can use Tizen native applications that provide their own data structure table and implement the SQL-type data control provider using the database file.</li>
+     <li>You can use Tizen native applications that provide their own key-value pairs data structure map and implement the map-type data control provider using registry file or collection map classes.</li>
     </ul>
-</li> 
-   <li>Data schema 
+</li>
+   <li>Data schema
     <ul>
-        <li>SQL-type data control exports column names and types of the data structure table.</li> 
-     <li>Map-type data control exports key names and types of the data structure map.</li> 
+        <li>SQL-type data control exports column names and types of the data structure table.</li>
+     <li>Map-type data control exports key names and types of the data structure map.</li>
     </ul>
-</li> 
-   <li>Data accessibility <p>Tizen native applications can control read and write access from other applications by defining data control accessibility.</p> </li> 
+</li>
+   <li>Data accessibility <p>Tizen native applications can control read and write access from other applications by defining data control accessibility.</p> </li>
   </ul>
-  
-  <p align="center" class="Table"><strong>Table: Data model example of a data control provider</strong></p> 
+
+  <p align="center" class="Table"><strong>Table: Data model example of a data control provider</strong></p>
 <table border="1" style="width: 100%">
    <tbody>
 <tr>
-<th style="text-align:center;margin-left:auto;margin-right:auto;">Data control type</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data control provider ID</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data control data ID</th> 
-     <th colspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Data schema</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data accessibility</th> 
+<th style="text-align:center;margin-left:auto;margin-right:auto;">Data control type</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data control provider ID</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data control data ID</th>
+     <th colspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Data schema</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Data accessibility</th>
     </tr>
 <tr>
-<td>SQL</td> 
-     <td><code>http://&lt;vendor.com&gt;/datacontrol/provider/sample</code></td> 
-     <td><code>data1</code></td> 
+<td>SQL</td>
+     <td><code>http://&lt;vendor.com&gt;/datacontrol/provider/sample</code></td>
+     <td><code>data1</code></td>
      <td><code>column1</code>
-       <p>(Type: Integer)</p> </td> 
+       <p>(Type: Integer)</p> </td>
      <td><code>column2</code>
-        <p>(Type: String)</p> </td> 
-     <td>Read-Only</td> 
+        <p>(Type: String)</p> </td>
+     <td>Read-Only</td>
     </tr>
 <tr>
-<td>Map</td> 
-     <td><code>http://&lt;vendor.com&gt;/datacontrol/provider/sample2</code></td> 
-     <td><code>data2</code></td> 
+<td>Map</td>
+     <td><code>http://&lt;vendor.com&gt;/datacontrol/provider/sample2</code></td>
+     <td><code>data2</code></td>
      <td><code>key1</code>
-        <p>(Type: String)</p> </td> 
+        <p>(Type: String)</p> </td>
      <td><code>key2</code>
-        <p>(Type: String)</p> </td> 
-     <td>Read-Write</td> 
+        <p>(Type: String)</p> </td>
+     <td>Read-Write</td>
     </tr>
 </tbody>
 </table>
 
 
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 
diff --git a/org.tizen.guides/html/native/app_management/efl_app_n.htm b/org.tizen.guides/html/native/app_management/efl_app_n.htm
index e00f87c..023c1e0 100644 (file)
--- a/org.tizen.guides/html/native/app_management/efl_app_n.htm
+++ b/org.tizen.guides/html/native/app_management/efl_app_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>EFL Applications</title>  
+       <title>EFL Applications</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -38,14 +38,14 @@
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API reference for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
  <h1>EFL Applications</h1>
- 
+
 <p>You can use the Enlightenment Foundation Libraries (EFL) to create a 2D-based Tizen native application. However, EFL supports 2.5D and 3D effects and 3D objects as well. For 3D-based Tizen native applications, you can use the <a href="../ui/dali/dali_n.htm">Dynamic Animation Library (DALi) UI toolkit</a> as well.</p>
- 
-<p>EFL is a collection of libraries that are independent or can build on top of each-other. They provide useful features that complement an OS&#39;s existing environment, rather than wrap and abstract it, trying to be their own environment and OS in its entirety. This means that EFL expects you to use other system libraries and APIs in conjunction with EFL libraries to provide a whole working application or library - simply using EFL as a set of convenient pre-made libraries to accomplish a whole host of complex or painful tasks for you.</p>
+
+<p>EFL is a collection of libraries that are independent or can build on top of each-other. They provide useful features that complement an OS's existing environment, rather than wrap and abstract it, trying to be their own environment and OS in its entirety. This means that EFL expects you to use other system libraries and APIs in conjunction with EFL libraries to provide a whole working application or library - simply using EFL as a set of convenient pre-made libraries to accomplish a whole host of complex or painful tasks for you.</p>
 
 <h2 id="basic" name="basic">Basic Fundamentals</h2>
 
@@ -72,7 +72,7 @@
 
 <h2 id="app_type" name="app_type">Application Types</h2>
 
-<p>With the EFL UI, you can create the following application types:</p> 
+<p>With the EFL UI, you can create the following application types:</p>
 
 <ul>
 <li><a href="efl_ui_app_n.htm">Basic UI application</a>
@@ -88,7 +88,7 @@
 <p>The widget application is available for both mobile and wearable devices.</p>
 </li>
 </ul>
- 
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/app_management/efl_ui_app_n.htm b/org.tizen.guides/html/native/app_management/efl_ui_app_n.htm
index 7be912c..98f666d 100644 (file)
--- a/org.tizen.guides/html/native/app_management/efl_ui_app_n.htm
+++ b/org.tizen.guides/html/native/app_management/efl_ui_app_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>EFL Basic UI Application</title>  
+       <title>EFL Basic UI Application</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -37,15 +37,15 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>   
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li>  
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
  <h1>EFL Basic UI Application</h1>
- 
+
 <p>To create an EFL basic UI application, you must:</p>
 <ul>
   <li>Define the <a href="#fundamentals">the application fundamentals</a>, mainly the entry point and life-cycle callbacks.
@@ -58,110 +58,110 @@
 <p>The following table lists the application state change events.</p>
 
 <p align="center" class="Table"><strong>Table: Application state change events</strong></p>
-  <table> 
-   <tbody> 
-    <tr> 
-     <th>Callback</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>app_create_cb()</code></td> 
-     <td>Used to take necessary actions before the main event loop starts. Place the UI generation code here to prevent missing any events from your application UI.</td> 
-    </tr> 
-     <tr> 
-     <td><code>app_pause_cb()</code></td> 
-     <td>Used to take necessary actions when the application becomes invisible. For example, release memory resources so other applications can use them. Do not starve the foreground application that is interacting with the user.</td> 
-    </tr> 
-    <tr> 
-     <td><code>app_resume_cb()</code></td> 
-     <td>Used to take necessary actions when the application becomes visible. If you relinquish anything in the  <code>app_pause_cb()</code> callback, re-allocate those resources here before the application resumes.</td> 
-    </tr> 
-    <tr> 
-     <td><code>app_terminate_cb()</code></td> 
-     <td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully use any shared resources.</td> 
-    </tr> 
-   </tbody> 
+  <table>
+   <tbody>
+    <tr>
+     <th>Callback</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>app_create_cb()</code></td>
+     <td>Used to take necessary actions before the main event loop starts. Place the UI generation code here to prevent missing any events from your application UI.</td>
+    </tr>
+     <tr>
+     <td><code>app_pause_cb()</code></td>
+     <td>Used to take necessary actions when the application becomes invisible. For example, release memory resources so other applications can use them. Do not starve the foreground application that is interacting with the user.</td>
+    </tr>
+    <tr>
+     <td><code>app_resume_cb()</code></td>
+     <td>Used to take necessary actions when the application becomes visible. If you relinquish anything in the  <code>app_pause_cb()</code> callback, re-allocate those resources here before the application resumes.</td>
+    </tr>
+    <tr>
+     <td><code>app_terminate_cb()</code></td>
+     <td>Used to take necessary actions when the application is terminating. Release all resources, especially any allocations and shared resources, so that other running applications can fully use any shared resources.</td>
+    </tr>
+   </tbody>
   </table>
- 
+
 <p>For more information, see <a href="#state_trans">Application State and Transition Management</a>.</p>
 
 <p>To listen to system events, use the <code>ui_app_add_event_handler()</code> function. The system events are triggered with the <code>app_event_cb()</code> callback function. The following table lists the event types.</p>
 
 <p align="center" class="Table"><strong>Table: Event types</strong></p>
-  <table>  
-   <tbody> 
-    <tr> 
-     <th>Event type</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>APP_EVENT_LOW_MEMORY</code></td> 
-     <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The callback function must also release any cached data in the main memory to secure more free memory.</td> 
-    </tr> 
-     <tr> 
-     <td><code>APP_EVENT_LOW_BATTERY</code></td> 
-     <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The callback function must also stop heavy CPU consumption or power consumption activities to save the remaining power.</td> 
-    </tr> 
-    <tr> 
-     <td><code>APP_EVENT_DEVICE_ORIENTATION_CHANGED</code></td> 
-     <td>Event type for the callback function that is responsible for changing the display orientation to match the device orientation.</td> 
-    </tr> 
-    <tr> 
-     <td><code>APP_EVENT_LANGUAGE_CHANGED</code></td> 
-     <td>Event type for the callback function that is responsible for refreshing the display into the new language.</td> 
-    </tr> 
-    <tr> 
-     <td><code>APP_EVENT_REGION_FORMAT_CHANGED</code></td> 
-     <td>Event type for the callback function that is responsible for refreshing the display into the new time zone.</td> 
-    </tr> 
+  <table>
+   <tbody>
+    <tr>
+     <th>Event type</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>APP_EVENT_LOW_MEMORY</code></td>
+     <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The callback function must also release any cached data in the main memory to secure more free memory.</td>
+    </tr>
+     <tr>
+     <td><code>APP_EVENT_LOW_BATTERY</code></td>
+     <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The callback function must also stop heavy CPU consumption or power consumption activities to save the remaining power.</td>
+    </tr>
+    <tr>
+     <td><code>APP_EVENT_DEVICE_ORIENTATION_CHANGED</code></td>
+     <td>Event type for the callback function that is responsible for changing the display orientation to match the device orientation.</td>
+    </tr>
+    <tr>
+     <td><code>APP_EVENT_LANGUAGE_CHANGED</code></td>
+     <td>Event type for the callback function that is responsible for refreshing the display into the new language.</td>
+    </tr>
+    <tr>
+     <td><code>APP_EVENT_REGION_FORMAT_CHANGED</code></td>
+     <td>Event type for the callback function that is responsible for refreshing the display into the new time zone.</td>
+    </tr>
        <tr>
-       <td><code>APP_EVENT_SUSPENDED_STATE_CHANGED</code></td> 
-       <td>Event type for the callback function that is responsible for taking necessary actions before entering the suspended state or after exiting from the state. (Supported since Tizen 2.4.)</td> 
+       <td><code>APP_EVENT_SUSPENDED_STATE_CHANGED</code></td>
+       <td>Event type for the callback function that is responsible for taking necessary actions before entering the suspended state or after exiting from the state. (Supported since Tizen 2.4.)</td>
        </tr>
-   </tbody> 
-  </table>  
-   
-<h2 id="state_trans" name="state_trans">Application States and Transitions</h2> 
+   </tbody>
+  </table>
 
-<p>The Tizen native application can be in one of several different <a href="applications_n.htm#state_change">application states</a>.</p> 
+<h2 id="state_trans" name="state_trans">Application States and Transitions</h2>
+
+<p>The Tizen native application can be in one of several different <a href="applications_n.htm#state_change">application states</a>.</p>
 
 <p>The Application API defines 5 states with corresponding transition handlers. The state transition is notified through a state transition callback function, whether the application is created, running, paused, resumed, or terminated. The application must <a href="#fundamentals">react to each state change appropriately</a>.</p>
 
 <p align="center" class="Table"><strong>Table: Application states</strong></p>
-  <table> 
-   <tbody> 
-    <tr> 
-     <th>State</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>READY</code></td> 
-     <td>Application is launched.</td> 
-    </tr> 
-     <tr> 
-     <td><code>CREATED</code></td> 
-     <td>Application starts the main loop.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNNING</code></td> 
-     <td>Application is running and visible to the user.</td> 
-    </tr> 
-    <tr> 
-     <td><code>PAUSED</code></td> 
-     <td>Application is running but invisible to the user.</td> 
-    </tr> 
-    <tr> 
-     <td><code>TERMINATED</code></td> 
-     <td>Application is terminated.</td> 
-    </tr> 
-   </tbody> 
-  </table>   
-  
+  <table>
+   <tbody>
+    <tr>
+     <th>State</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>READY</code></td>
+     <td>Application is launched.</td>
+    </tr>
+     <tr>
+     <td><code>CREATED</code></td>
+     <td>Application starts the main loop.</td>
+    </tr>
+    <tr>
+     <td><code>RUNNING</code></td>
+     <td>Application is running and visible to the user.</td>
+    </tr>
+    <tr>
+     <td><code>PAUSED</code></td>
+     <td>Application is running but invisible to the user.</td>
+    </tr>
+    <tr>
+     <td><code>TERMINATED</code></td>
+     <td>Application is terminated.</td>
+    </tr>
+   </tbody>
+  </table>
+
 <p>The following figure illustrates the application state transitions.</p>
-  
+
   <p align="center"><strong>Figure: Application state transitions</strong></p>
   <p align="center"><img alt="Application state transitions" src="../../images/app_state_transitions.png" /></p>
- 
+
 
 
 <h2 id="prerequisites">Prerequisites</h2>
@@ -183,11 +183,11 @@
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a ui_app_lifecycle_callback_s object and initialize its contents to 0 */
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+    /* Create a ui_app_lifecycle_callback_s object and initialize its contents to 0 */
+    ui_app_lifecycle_callback_s event_callback = {0,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Run the application */
-&nbsp;&nbsp;&nbsp;&nbsp;return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, NULL);
+    /* Run the application */
+    return ui_app_main(&amp;argc, &amp;argv, &amp;event_callback, NULL);
 }
 </pre>
 </li>
@@ -223,79 +223,79 @@ main(int argc, char *argv[])
    to each callback invoked through the Application API
 */
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;char *several;
-&nbsp;&nbsp;&nbsp;&nbsp;char *fields;
+    char *several;
+    char *fields;
 };
 typedef struct appdata appdata_s;
 
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Hook to take necessary actions before main event loop starts; this
-&nbsp;&nbsp;&nbsp;&nbsp;   usually means initializing the UI and application data (the &quot;data&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;   parameter to this function)
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;create_gui(ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* If this function returns true, the main loop starts */
-&nbsp;&nbsp;&nbsp;&nbsp;/* If this function returns false, the application is terminated */
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    /*
+       Hook to take necessary actions before main event loop starts; this
+       usually means initializing the UI and application data (the "data"
+       parameter to this function)
+    */
+
+    appdata_s *ad = data;
+    create_gui(ad);
+
+    /* If this function returns true, the main loop starts */
+    /* If this function returns false, the application is terminated */
+    return true;
 }
 
 static void
 app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Handle the launch request, show the user the task requested through the
-&nbsp;&nbsp;&nbsp;&nbsp;   &quot;app_control&quot; parameter (see the next step)
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    /*
+       Handle the launch request, show the user the task requested through the
+       "app_control" parameter (see the next step)
+    */
 }
 
 static void
 app_pause(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take necessary actions when application becomes invisible */
+    /* Take necessary actions when application becomes invisible */
 }
 
 static void
 app_resume(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take necessary actions when application becomes visible */
+    /* Take necessary actions when application becomes visible */
 }
 
 static void
 app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release all resources */
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+    /* Release all resources */
+    appdata_s *ad = data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!ad)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (!ad)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   If specific steps are needed:
-&nbsp;&nbsp;&nbsp;&nbsp;   destroy_gui(ad);
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    /*
+       If specific steps are needed:
+       destroy_gui(ad);
+    */
 }
 
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the callbacks for the application logic */
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Note the &amp;ad below is how the struct is given to the callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    appdata_s ad = {0,};
+    ui_app_lifecycle_callback_s event_callback = {0,};
+
+    /* Set the callbacks for the application logic */
+    event_callback.create = app_create;
+    event_callback.terminate = app_terminate;
+    event_callback.pause = app_pause;
+    event_callback.resume = app_resume;
+    event_callback.app_control = app_control;
+
+    /* Note the &amp;ad below is how the struct is given to the callbacks */
+    return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
 }
 </pre>
 </li>
@@ -312,112 +312,112 @@ main(int argc, char *argv[])
 <p>For more information about launching other applications from your application using application controls, see <a href="app_controls_n.htm">Application Controls</a>.</p>
 </li>
 </ol>
- 
+
 <h2 id="allow_bg" name="allow_bg">Background Categories</h2>
 
 <p>Since Tizen 2.4, the application is not allowed to run on the background except when it is explicitly declared to do so. The following table lists the background categories that allow the application to run on the background.</p>
 
 <p align="center" class="Table"><strong>Table: Allowed background application policy</strong></p>
 <table id="allow_bg_table">
-   <tbody> 
-    <tr> 
-     <th>Background category</th> 
+   <tbody>
+    <tr>
+     <th>Background category</th>
      <th>Description</th>
 <th>Related APIs</th>
-<th>Manifest file &lt;background-category&gt; element value</th> 
-    </tr> 
-    <tr> 
-     <td>Media</td> 
+<th>Manifest file &lt;background-category&gt; element value</th>
+    </tr>
+    <tr>
+     <td>Media</td>
      <td>Playing audio, recording, and outputting streaming video on the background</td>
 <td>Multimedia API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">wearable</a> applications)</td>
-<td><code>media</code></td> 
-    </tr> 
-     <tr> 
-     <td>Download</td> 
+<td><code>media</code></td>
+    </tr>
+     <tr>
+     <td>Download</td>
      <td>Downloading data with the Tizen Download-manager API</td>
 <td>Download API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">mobile</a> applications)</td>
-<td><code>download</code></td> 
-    </tr> 
-    <tr> 
-     <td>Background network</td> 
+<td><code>download</code></td>
+    </tr>
+    <tr>
+     <td>Background network</td>
      <td>Processing general network operations on the background (such as sync-manager, IM, and VOIP)</td>
 <td>Sync Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> applications), Socket, and Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications)</td>
-<td><code>background-network</code></td> 
+<td><code>background-network</code></td>
     </tr>
-<tr> 
-     <td>Location</td> 
+<tr>
+     <td>Location</td>
      <td>Processing location data on the background</td>
 <td>Location API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">wearable</a> applications)</td>
-<td><code>location</code></td> 
+<td><code>location</code></td>
     </tr>
-<tr> 
-     <td>Sensor (context)</td> 
+<tr>
+     <td>Sensor (context)</td>
      <td>Processing context data from the sensors, such as gesture</td>
 <td>Sensor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications)</td>
-<td><code>sensor</code></td> 
+<td><code>sensor</code></td>
     </tr>
-<tr> 
-  <td>IoT Communication/Connectivity</td> 
+<tr>
+  <td>IoT Communication/Connectivity</td>
      <td>Communicating between external devices on the background (such as Wi-Fi and Bluetooth)</td>
 <td>Wi-Fi (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">wearable</a> applications) and Bluetooth API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications)</td>
-<td><code>iot-communication</code></td> 
+<td><code>iot-communication</code></td>
     </tr>
-  </tbody> 
+  </tbody>
   </table>
 
 <h3 id="bg-category" name="bg-category">Describing the Background Category</h3>
 <p>An application with a background running capability must declare the background category in its manifest file:</p>
 
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.4&quot; package=&quot;org.tizen.test&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;version=&quot;1.0.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.test&quot; exec=&quot;text&quot; type=&quot;capp&quot; multiple=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;taskmanage=&quot;true&quot; nodisplay=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;rest.png&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;rest&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--For API version 2.4 and higher--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;media&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;download&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;background-network&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
-&nbsp;&nbsp;&nbsp;&lt;service-application appid=&quot;org.tizen.test-service&quot; exec=&quot;test-service&quot; multiple=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&quot;capp&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;background-network&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;background-category value=&quot;location&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;manifest xmlns="http://tizen.org/ns/packages" api-version="2.4" package="org.tizen.test"
+          version="1.0.0"&gt;
+   &lt;ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false"
+                   taskmanage="true" nodisplay="false"&gt;
+      &lt;icon&gt;rest.png&lt;/icon&gt;
+      &lt;label&gt;rest&lt;/label&gt;
+      &lt;!--For API version 2.4 and higher--&gt;
+      &lt;background-category value="media"/&gt;
+      &lt;background-category value="download"/&gt;
+      &lt;background-category value="background-network"/&gt;
+   &lt;/ui-application&gt;
+   &lt;service-application appid="org.tizen.test-service" exec="test-service" multiple="false"
+                        type="capp"&gt;
+      &lt;background-category value="background-network"/&gt;
+      &lt;background-category value="location"/&gt;
+   &lt;/service-application&gt;
 &lt;/manifest&gt;
 </pre>
 
 <div class="note">
        <strong>Note</strong>
-       The <code>&lt;background-category&gt;</code> element is supported since the API version 2.4. An application with a <code>&lt;background-category&gt;</code> element declared can fail to be installed on devices with a Tizen version lower than 2.4. In this case, declare the background category as <code>&lt;metadata key=&quot;http://tizen.org/metadata/background-category/&lt;value&gt;&quot;/&gt;</code>.
+       The <code>&lt;background-category&gt;</code> element is supported since the API version 2.4. An application with a <code>&lt;background-category&gt;</code> element declared can fail to be installed on devices with a Tizen version lower than 2.4. In this case, declare the background category as <code>&lt;metadata key="http://tizen.org/metadata/background-category/&lt;value&gt;"/&gt;</code>.
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;org.tizen.test&quot; version=&quot;1.0.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.test&quot; exec=&quot;text&quot; type=&quot;capp&quot; multiple=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;taskmanage=&quot;true&quot; nodisplay=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;rest.png&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;rest&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--For API version lower than 2.4--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/media&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/download&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/background-network&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
-&nbsp;&nbsp;&nbsp;&lt;service-application appid=&quot;org.tizen.test-service&quot; exec=&quot;test-service&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiple=&quot;false&quot; type=&quot;capp&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/background-network&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/background-category/location&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;manifest xmlns="http://tizen.org/ns/packages" api-version="2.3"
+          package="org.tizen.test" version="1.0.0"&gt;
+   &lt;ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false"
+                   taskmanage="true" nodisplay="false"&gt;
+      &lt;icon&gt;rest.png&lt;/icon&gt;
+      &lt;label&gt;rest&lt;/label&gt;
+      &lt;!--For API version lower than 2.4--&gt;
+      &lt;metadata key="http://tizen.org/metadata/background-category/media"/&gt;
+      &lt;metadata key="http://tizen.org/metadata/background-category/download"/&gt;
+      &lt;metadata key="http://tizen.org/metadata/background-category/background-network"/&gt;
+   &lt;/ui-application&gt;
+   &lt;service-application appid="org.tizen.test-service" exec="test-service"
+                        multiple="false" type="capp"&gt;
+      &lt;metadata key="http://tizen.org/metadata/background-category/background-network"/&gt;
+      &lt;metadata key="http://tizen.org/metadata/background-category/location"/&gt;
+   &lt;/service-application&gt;
 &lt;/manifest&gt;
 </pre>
-<p>The <code>&lt;metadata key=&quot;http://tizen.org/metadata/bacgkround-category/&lt;value&gt;&quot;/&gt;</code> element has no effect on Tizen 2.3 devices, but, in Tizen 2.4 and higher devices, it has the same effect as the <code>&lt;background-category&gt;</code> element.</p>
+<p>The <code>&lt;metadata key="http://tizen.org/metadata/bacgkround-category/&lt;value&gt;"/&gt;</code> element has no effect on Tizen 2.3 devices, but, in Tizen 2.4 and higher devices, it has the same effect as the <code>&lt;background-category&gt;</code> element.</p>
 </div>
 
 <p>The background category of your application can be specified in the
 <a href="../../../../org.tizen.training/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the Tizen Studio.</p>
- 
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/app_management/event_n.htm b/org.tizen.guides/html/native/app_management/event_n.htm
index c7317ba..539b6e5 100644 (file)
--- a/org.tizen.guides/html/native/app_management/event_n.htm
+++ b/org.tizen.guides/html/native/app_management/event_n.htm
@@ -5,15 +5,15 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Event Broadcast and Subscription</title> 
- </head> 
+  <title>Event Broadcast and Subscription</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
@@ -28,8 +28,8 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#prerequisites">Prerequisites</a></li>
-                       <li><a href="#broadcast">Publishing an Event</a></li>   
-                       <li><a href="#manage">Subscribing to an Event</a></li> 
+                       <li><a href="#broadcast">Publishing an Event</a></li>
+                       <li><a href="#manage">Subscribing to an Event</a></li>
                        <li><a href="#launch">Managing Launch-On-Events</a></li>
                        <li><a href="#platform">Platform Event Types</a></li>
                </ul>
@@ -78,22 +78,22 @@
 <p>To use the functions and data types of the Event API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EVENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EVENT__MODULE.html">wearable</a> applications), include the <code>&lt;app_event.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;app_event.h&gt;
-</pre> 
+</pre>
 </li>
 <li>To use Launch-On-Events in your application, define the <code>http://tizen.org/appcontrol/operation/launch_on_event</code> operation in the <code>tizen-manifest.xml</code> file.
 <p>The URI name for the operation represents the event name in the Launch-On-Event format (<code>event://{Event_Name}</code>).</p>
 
 <pre class="prettyprint">
 &lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/launch_on_event&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;event://tizen.system.event.battery_charger_status&quot;/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/launch_on_event"/&gt;
+   &lt;uri name="event://tizen.system.event.battery_charger_status"/&gt;
 &lt;/app-control&gt;
 </pre>
 </li>
-</ol> 
+</ol>
 
  <h2 id="broadcast" name="broadcast">Publishing an Event</h2>
- 
+
 <p>To publish an event to all listeners:</p>
 
 <ol>
@@ -102,9 +102,9 @@
 static void
 user_event_cb(const char *event_name, bundle *event_data, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;user_event_cb: %s \n&quot;, event_name);
+    dlog_print(DLOG_INFO, LOG_TAG, "user_event_cb: %s \n", event_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
@@ -114,11 +114,11 @@ int ret = EVENT_ERROR_NONE;
 event_handler_h event_handler;
 bundle *event_data = NULL;
 
-ret = event_add_event_handler(&quot;event.org.tizen.senderapp.user_event&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_event_cb, &quot;CUSTOM_EVENT_KEY&quot;, &amp;event_handler);
+ret = event_add_event_handler("event.org.tizen.senderapp.user_event",
+                              user_event_cb, "CUSTOM_EVENT_KEY", &amp;event_handler);
 
 if (ret != EVENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "err: [%d]", ret);
 
 event_data = bundle_create();
 
@@ -127,10 +127,10 @@ ret = bundle_add_str(event_data, user_data_key, user_data);
 </li>
 <li>Use the <code>event_publish_app_event()</code> function to publish the event:
 <pre class="prettyprint">
-ret = event_publish_app_event(&quot;event.org.tizen.senderapp.user_event&quot;, event_data);
+ret = event_publish_app_event("event.org.tizen.senderapp.user_event", event_data);
 
 if (ret != EVENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "err: [%d]", ret);
 </pre>
 </li>
 <li>When no longer needed, free the bundle:
@@ -139,8 +139,8 @@ ret = bundle_free(event_data);
 </pre>
 </li>
 </ol>
- 
- 
+
+
  <h2 id="manage" name="manage">Subscribing to an Event</h2>
 
 <p>To subscribe to a predefined system event or user-defined event:</p>
@@ -153,25 +153,25 @@ ret = bundle_free(event_data);
 <pre class="prettyprint">
 static void
 battery_event_callback(const char *event_name, bundle *event_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                       void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* event_name is the event name */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;event_name is [%s]&quot;, event_name);
+    /* event_name is the event name */
+    dlog_print(DLOG_INFO, LOG_TAG, "event_name is [%s]", event_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* event_data is the event data, its type is bundle */
-&nbsp;&nbsp;&nbsp;&nbsp;char *battery_level_status = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;battery_level_status = bundle_get_val(event_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EVENT_KEY_BATTERY_LEVEL_STATUS);
+    /* event_data is the event data, its type is bundle */
+    char *battery_level_status = NULL;
+    battery_level_status = bundle_get_val(event_data,
+                                          EVENT_KEY_BATTERY_LEVEL_STATUS);
 }
 
 event_handler_h handler;
 
 /* Register the event handler */
 int ret = event_add_event_handler(SYSTEM_EVENT_BATTERY_LEVEL_STATUS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(event_cb)battery_event_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;handler);
+                                  (event_cb)battery_event_cb,
+                                  user_data, &amp;handler);
 if (ret != EVENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "err: [%d]", ret);
 </pre>
 </li>
 
@@ -179,18 +179,18 @@ if (ret != EVENT_ERROR_NONE)
 
 <p>When defining an event name for a user event (such as <code>event.org.tizen.senderapp.user_event</code>), the name format is <code>event.{sender appid}.{user-defined name}</code>. The <code>{user-defined name}</code> must:</p>
 <ul>
-       <li>Contain only the ASCII characters &quot;[A-Z][a-z][0-9]_&quot; and not begin with a digit.</li>
-       <li>Not contain the &#39;.&#39; (period) character.</li>
+       <li>Contain only the ASCII characters "[A-Z][a-z][0-9]_" and not begin with a digit.</li>
+       <li>Not contain the '.' (period) character.</li>
        <li>Not exceed the maximum name length (127 bytes).</li>
        <li>Be at least 1 byte in length.</li>
 </ul>
 <pre class="prettyprint">
-ret = event_add_event_handler(&quot;event.org.tizen.senderapp.user_event&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;utc_event_cb_with_valid_check,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CUSTOM_EVENT_KEY&quot;, &amp;event_handler);
+ret = event_add_event_handler("event.org.tizen.senderapp.user_event",
+                              utc_event_cb_with_valid_check,
+                              "CUSTOM_EVENT_KEY", &amp;event_handler);
 
 if (ret != EVENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "err: [%d]", ret);
 </pre>
 </li></ul></li>
 
@@ -200,16 +200,16 @@ if (ret != EVENT_ERROR_NONE)
 <pre class="prettyprint">
 ret = event_remove_event_handler(handler);
 if (ret != EVENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;err: [%d]&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "err: [%d]", ret);
 </pre>
 </li>
 
 </ol>
- 
+
  <h2 id="launch" name="launch">Managing Launch-On-Events</h2>
 
    <p>To register an interest in a Launch-On-Event, define the <code>http://tizen.org/appcontrol/operation/launch_on_event</code> operation in the <code>tizen-manifest.xml</code> file.</p>
-  
+
     <div class="note">
         <strong>Note</strong>
         Only service applications can register and receive Launch-On-Events.
@@ -227,15 +227,15 @@ if (ret != EVENT_ERROR_NONE)
                </tr>
                <tr>
                        <td><code>tizen.system.event.battery_charger_status</code></td>
-                       <td>When the charger state is <code>&quot;connected&quot;</code>.</td>
+                       <td>When the charger state is <code>"connected"</code>.</td>
                </tr>
                <tr>
                        <td><code>tizen.system.event.usb_status</code></td>
-                       <td>When the USB state is <code>&quot;connected&quot;</code>.</td>
+                       <td>When the USB state is <code>"connected"</code>.</td>
                </tr>
                <tr>
                        <td><code>tizen.system.event.earjack_status</code></td>
-                       <td>When the earjack status is <code>&quot;connected&quot;</code>.</td>
+                       <td>When the earjack status is <code>"connected"</code>.</td>
                </tr>
                <tr>
                        <td><code>tizen.system.event.incoming_msg</code></td>
@@ -250,27 +250,27 @@ if (ret != EVENT_ERROR_NONE)
 static void
 *app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *event_uri = &quot;event://tizen.system.event.battery_charger_status&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;char *operation;
-&nbsp;&nbsp;&nbsp;&nbsp;char *uri;
-&nbsp;&nbsp;&nbsp;&nbsp;char *event_value;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_get_operation(app_control, &amp;operation);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE &amp;&amp; operation &amp;&amp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strcmp(operation, APP_CONTROL_OPERATION_LAUNCH_ON_EVENT) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_get_uri(app_control, &amp;uri);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE &amp;&amp; uri) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strncmp(uri, event_uri, strlen(event_uri) + 1) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_get_extra_data(app_control, &quot;battery_charger_status&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;event_value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE &amp;&amp; event_value)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(event_value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Use event_add_event_handler() for further event subscriptions here */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(uri);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(operation);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    char *event_uri = "event://tizen.system.event.battery_charger_status";
+    char *operation;
+    char *uri;
+    char *event_value;
+    ret = app_control_get_operation(app_control, &amp;operation);
+
+    if (ret == APP_CONTROL_ERROR_NONE &amp;&amp; operation &amp;&amp;
+        strcmp(operation, APP_CONTROL_OPERATION_LAUNCH_ON_EVENT) == 0) {
+        ret = app_control_get_uri(app_control, &amp;uri);
+        if (ret == APP_CONTROL_ERROR_NONE &amp;&amp; uri) {
+            if (strncmp(uri, event_uri, strlen(event_uri) + 1) == 0) {
+                ret = app_control_get_extra_data(app_control, "battery_charger_status",
+                                                 &amp;event_value);
+                if (ret == APP_CONTROL_ERROR_NONE &amp;&amp; event_value)
+                    free(event_value);
+                /* Use event_add_event_handler() for further event subscriptions here */
+            }
+            free(uri);
+        }
+        free(operation);
+    }
 }
 </pre>
 <p>The application can get the event name and data in the first <code>app_control_cb()</code> callback, which is called after the application state changes to <code>created</code>.</p>
@@ -300,16 +300,16 @@ static void
                           <td><code>battery_charger_status</code></td>
                           <td>                         <ul>
                                <li>
-                               <p><code>&quot;disconnected&quot;</code>: Charger is not connected</p>
+                               <p><code>"disconnected"</code>: Charger is not connected</p>
                                </li>
                                <li>
-                               <p><code>&quot;connected&quot;</code>: Charger is connected</p>
+                               <p><code>"connected"</code>: Charger is connected</p>
                                </li>
                                <li>
-                               <p><code>&quot;charging&quot;</code>: Charging is enabled</p>
+                               <p><code>"charging"</code>: Charging is enabled</p>
                                </li>
                                <li>
-                               <p><code>&quot;discharging&quot;</code>: Charging is disabled (for example, 100% full state) </p>
+                               <p><code>"discharging"</code>: Charging is disabled (for example, 100% full state) </p>
                                </li>
                                </ul>
                                </td>
@@ -326,20 +326,20 @@ static void
                                <td>
                                <ul>
                                <li>
-                               <p><code>&quot;empty&quot;</code></p>
+                               <p><code>"empty"</code></p>
                                </li>
-                               <li><p><code>&quot;critical&quot;</code></p>
+                               <li><p><code>"critical"</code></p>
                                </li>
-                               <li><p><code>&quot;low&quot;</code></p>
+                               <li><p><code>"low"</code></p>
                                </li>
-                               <li><p><code>&quot;high&quot;</code></p>
+                               <li><p><code>"high"</code></p>
                                </li>
-                               <li><p><code>&quot;full&quot;</code></p>
+                               <li><p><code>"full"</code></p>
                                </li>
                                </ul>
                                </td>
                                <td>When the battery level has changed.</td>
-                               <td>You can get the current value with the <code>device_battery_get_level_status()</code> function.</td>                        
+                               <td>You can get the current value with the <code>device_battery_get_level_status()</code> function.</td>
           </tr>
           <tr>
                           <td rowspan="3">deviced</td>
@@ -347,10 +347,10 @@ static void
                           <td><code>tizen.system.event.usb_status</code></td>
                           <td><code>usb_status</code></td>
                           <td>                         <ul>
-                               <li><p><code>&quot;disconnected&quot;</code>: USB cable is not connected</p>
+                               <li><p><code>"disconnected"</code>: USB cable is not connected</p>
                                </li>
-                               <li><p><code>&quot;connected&quot;</code>: USB cable is connected, but the service is not available</p></li>
-                               <li><p><code>&quot;available&quot;</code>: USB service is available (for example, mtp or SDB)</p>
+                               <li><p><code>"connected"</code>: USB cable is connected, but the service is not available</p></li>
+                               <li><p><code>"available"</code>: USB service is available (for example, mtp or SDB)</p>
                                </li>
                                </ul>
                                </td>
@@ -365,10 +365,10 @@ static void
                                <td><code>earjack_status</code></td>
                                <td>                            <ul>
                                <li>
-                               <p><code>&quot;disconnected&quot;</code>: Earjack is not connected</p>
+                               <p><code>"disconnected"</code>: Earjack is not connected</p>
                                </li>
                                <li>
-                               <p><code>&quot;connected&quot;</code>: Earjack is connected</p>
+                               <p><code>"connected"</code>: Earjack is connected</p>
                                </li>
                                </ul>
                                </td>
@@ -382,11 +382,11 @@ static void
                                <td><code>tizen.system.event.display_state</code></td>
                                <td><code>display_state</code></td>
                                <td>                            <ul>
-                               <li><p><code>&quot;normal&quot;</code>: Display on, normal brightness</p>
+                               <li><p><code>"normal"</code>: Display on, normal brightness</p>
                                </li>
-                               <li><p><code>&quot;dim&quot;</code>: Display on, dimmed brightness</p>
+                               <li><p><code>"dim"</code>: Display on, dimmed brightness</p>
                                </li>
-                               <li><p><code>&quot;off&quot;</code>: Display off</p>
+                               <li><p><code>"off"</code>: Display off</p>
                                </li>
                                </ul>
                                </td>
@@ -399,11 +399,11 @@ static void
                           <td rowspan="2">system</td>
                           <td><code>tizen.system.event.boot_completed</code></td>
                           <td><code>N/A</code></td>
-                          <td><code>N/A</code> 
+                          <td><code>N/A</code>
                                </td>
                                <td>When platform booting has been completed.
                                </td>
-                       <td>You can treat the initial value as <code>false</code> before you receive this event. If the application is already in a boot-completed state before you register an event handler, you receive the event as soon as you register the event handler.</td>    
+                       <td>You can treat the initial value as <code>false</code> before you receive this event. If the application is already in a boot-completed state before you register an event handler, you receive the event as soon as you register the event handler.</td>
           </tr>
           <tr>
                                <td><code>tizen.system.event.system_shutdown</code></td>
@@ -421,10 +421,10 @@ static void
                           <td><code>tizen.system.event.low_memory</code></td>
                           <td><code>low_memory</code></td>
                           <td>                         <ul>
-                               <li><p><code>&quot;normal&quot;</code>: Available &gt; 200MB</p>
+                               <li><p><code>"normal"</code>: Available &gt; 200MB</p>
                                </li>
-                               <li><p><code>&quot;soft_warning&quot;</code>: 100MB &lt; available &lt;= 200MB</p></li>
-                               <li><p><code>&quot;hard_warning&quot;</code>: Available &lt;= 100MB</p></li>
+                               <li><p><code>"soft_warning"</code>: 100MB &lt; available &lt;= 200MB</p></li>
+                               <li><p><code>"hard_warning"</code>: Available &lt;= 100MB</p></li>
                                </ul>
                         <div class="note">
         <strong>Note</strong>
@@ -443,9 +443,9 @@ static void
                           <td><code>tizen.system.event.wifi_state</code></td>
                           <td><code>wifi_state</code></td>
                           <td>                         <ul>
-                               <li><p><code>&quot;on&quot;</code>: Wi-Fi on</p></li>
-                               <li><p><code>&quot;off&quot;</code>: Wi-Fi off</p></li>
-                               <li><p><code>&quot;connected&quot;</code>: Wi-Fi connection established</p></li>
+                               <li><p><code>"on"</code>: Wi-Fi on</p></li>
+                               <li><p><code>"off"</code>: Wi-Fi off</p></li>
+                               <li><p><code>"connected"</code>: Wi-Fi connection established</p></li>
                                </ul>
                                </td>
                                <td>
@@ -457,8 +457,8 @@ static void
                                <td rowspan="3"><code>tizen.system.event.bt_state</code></td>
                           <td><code>bt_state</code></td>
                           <td>                         <ul>
-                               <li><p><code>&quot;off&quot;</code>: Legacy Bluetooth off</p></li>
-                               <li><p><code>&quot;on&quot;</code>: Legacy Bluetooth on</p></li>
+                               <li><p><code>"off"</code>: Legacy Bluetooth off</p></li>
+                               <li><p><code>"on"</code>: Legacy Bluetooth on</p></li>
                                </ul>
                                </td>
                                <td>
@@ -469,8 +469,8 @@ static void
                <tr>
                        <td><code>bt_le_state</code></td>
                           <td><ul>
-                               <li><p><code>&quot;off&quot;</code>: LE function off</p></li>
-                               <li><p><code>&quot;on&quot;</code>: LE function on</p></li>
+                               <li><p><code>"off"</code>: LE function off</p></li>
+                               <li><p><code>"on"</code>: LE function on</p></li>
                                </ul>
                                </td>
                                <td>
@@ -481,12 +481,12 @@ static void
                <tr>
                        <td><code>bt_transfering_state</code></td>
                           <td><ul>
-                               <li><p><code>&quot;non_transfering&quot;</code>: Idle state</p></li>
-                               <li><p><code>&quot;transfering&quot;</code>: File is transferring</p></li>
+                               <li><p><code>"non_transfering"</code>: Idle state</p></li>
+                               <li><p><code>"transfering"</code>: File is transferring</p></li>
                                </ul>
                                </td>
                                <td>
-                               When the file transfer state has changed.       
+                               When the file transfer state has changed.
                                </td>
                                <td></td>
                </tr>
@@ -496,14 +496,14 @@ static void
                           <td><code>tizen.system.event.location_enable_state</code></td>
                           <td><code>location_enable_state</code></td>
                           <td><ul>
-                               <li><p><code>&quot;disabled&quot;</code>: Location disabled</p>
+                               <li><p><code>"disabled"</code>: Location disabled</p>
                                </li>
-                               <li><p><code>&quot;enabled&quot;</code>: Location enabled</p>
+                               <li><p><code>"enabled"</code>: Location enabled</p>
                                </li>
                                </ul>
                                </td>
                                <td>
-                               When the <code>location-enable_state</code> has been changed, for example, by the user toggling the location setting in the settings menu or quick panel.               
+                               When the <code>location-enable_state</code> has been changed, for example, by the user toggling the location setting in the settings menu or quick panel.
                                </td>
                                <td>You can get the current value with the <code>location_manager_is_enabled_method()</code> function.</td>
                </tr>
@@ -511,9 +511,9 @@ static void
                       <td><code>tizen.system.event.gps_enable_state</code></td>
                                <td><code>gps_enable_state</code></td>
                           <td>                         <ul>
-                               <li><p><code>&quot;disabled&quot;</code>: GPS disabled</p>
+                               <li><p><code>"disabled"</code>: GPS disabled</p>
                                </li>
-                               <li><p><code>&quot;enabled&quot;</code>: GPS enabled</p>
+                               <li><p><code>"enabled"</code>: GPS enabled</p>
                                </li>
                                </ul>
                                </td>
@@ -526,9 +526,9 @@ static void
                                <td><code>tizen.system.event.nps_enable_state</code></td>
                                <td><code>nps_enable_state</code></td>
                           <td>                         <ul>
-                               <li><p><code>&quot;disabled&quot;</code>: NPS disabled</p>
+                               <li><p><code>"disabled"</code>: NPS disabled</p>
                                </li>
-                               <li><p><code>&quot;enabled&quot;</code>: NPS enabled</p>
+                               <li><p><code>"enabled"</code>: NPS enabled</p>
                                </li>
                                </ul>
                                </td>
@@ -543,11 +543,11 @@ static void
                           <td rowspan="2"><code>tizen.system.event.incoming_msg</code></td>
                           <td><code>msg_type</code></td>
                           <td>                         <ul>
-                               <li><p><code>&quot;sms&quot;</code>: SMS-type message</p>
+                               <li><p><code>"sms"</code>: SMS-type message</p>
                                </li>
-                               <li><p><code>&quot;push&quot;</code>: Push-type message</p>
+                               <li><p><code>"push"</code>: Push-type message</p>
                                </li>
-                               <li><p><code>&quot;cb&quot;</code>: Cb-type message</p>
+                               <li><p><code>"cb"</code>: Cb-type message</p>
                                </li>
                                </ul>
                                </td>
@@ -580,7 +580,7 @@ static void
                           <td>time</td>
                           <td><code>tizen.system.event.time_zone</code></td>
                           <td><code>time_zone</code></td>
-                          <td>The value of this key is the time zone value of the time zone database, for example, &quot;Asia/Seoul&quot;, &quot;America/New_York&quot;. For more information, see the IANA Time Zone Database.
+                          <td>The value of this key is the time zone value of the time zone database, for example, "Asia/Seoul", "America/New_York". For more information, see the IANA Time Zone Database.
                                </td>
                                <td>
                                When the time zone has changed.
@@ -591,8 +591,8 @@ static void
                           <td rowspan="3">locale</td>
                           <td><code>tizen.system.event.hour_format</code></td>
                           <td><code>hour_format</code></td>
-                          <td><ul><li><code>&quot;12&quot;</code></li>
-                               <li><code>&quot;24&quot;</code></li></ul>
+                          <td><ul><li><code>"12"</code></li>
+                               <li><code>"24"</code></li></ul>
                                </td>
                                <td>
                                When the <code>hour_format</code> has changed, for example, by the user toggling the date and time settings for the 24-hour clock (where <strong>OFF</strong> stands for the 12-hour clock).
@@ -623,11 +623,11 @@ static void
                           <td>sound</td>
                           <td><code>tizen.system.event.silent_mode</code></td>
                           <td><code>silent_mode</code></td>
-                          <td><ul><li><code>&quot;on&quot;</code></li>
-                               <li><code>&quot;off&quot;</code></li></ul>
+                          <td><ul><li><code>"on"</code></li>
+                               <li><code>"off"</code></li></ul>
                                </td>
                                <td>
-                               When the ringtone has been changed to 0 or another mode. For example, if the call slider has been changed to 0, <code>silent_mode</code> is <code>&quot;on&quot;</code>. Otherwise, <code>silent_mode</code> is <code>&quot;off&quot;</code>.
+                               When the ringtone has been changed to 0 or another mode. For example, if the call slider has been changed to 0, <code>silent_mode</code> is <code>"on"</code>. Otherwise, <code>silent_mode</code> is <code>"off"</code>.
                                </td>
                                <td>You can get the current value with the <code>SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</code> key.</td>
                </tr>
@@ -635,8 +635,8 @@ static void
                           <td>vibration</td>
                           <td><code>tizen.system.event.vibration_state</code></td>
                           <td><code>vibration_state</code></td>
-                          <td><ul><li><code>&quot;on&quot;</code></li>
-                               <li><code>&quot;off&quot;</code></li></ul>
+                          <td><ul><li><code>"on"</code></li>
+                               <li><code>"off"</code></li></ul>
                                </td>
                                <td>
                                When the vibration state has changed.
@@ -647,8 +647,8 @@ static void
                           <td>screen</td>
                           <td><code>tizen.system.event.screen_autorotate_state</code></td>
                           <td><code>screen_autorotate_state</code></td>
-                          <td><ul><li><code>&quot;on&quot;</code></li>
-                               <li><code>&quot;off&quot;</code></li></ul>
+                          <td><ul><li><code>"on"</code></li>
+                               <li><code>"off"</code></li></ul>
                                </td>
                                <td>
                                When the <code>screen_autorotate_state</code> has been changed, for example, by the user toggling the display settings.
@@ -659,8 +659,8 @@ static void
                           <td rowspan="2">mobile</td>
                           <td><code>tizen.system.event.mobile_data_state</code></td>
                           <td><code>mobile_data_state</code></td>
-                          <td><ul><li><code>&quot;on&quot;</code></li>
-                               <li><code>&quot;off&quot;</code></li></ul>
+                          <td><ul><li><code>"on"</code></li>
+                               <li><code>"off"</code></li></ul>
                                </td>
                                <td>
                                When the <code>mobile_data_state</code> has been changed, for example, by the user toggling the network settings.
@@ -670,8 +670,8 @@ static void
                <tr>
                           <td><code>tizen.system.event.data_roaming_state</code></td>
                           <td><code>data_roaming_state</code></td>
-                          <td><ul><li><code>&quot;on&quot;</code></li>
-                               <li><code>&quot;off&quot;</code></li></ul>
+                          <td><ul><li><code>"on"</code></li>
+                               <li><code>"off"</code></li></ul>
                                </td>
                                <td>
                                When the <code>data_roaming_state</code> has been changed, for example, by the user toggling the network settings.
@@ -715,4 +715,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/message_port_n.htm b/org.tizen.guides/html/native/app_management/message_port_n.htm
index 9394304..2ce51a1 100644 (file)
--- a/org.tizen.guides/html/native/app_management/message_port_n.htm
+++ b/org.tizen.guides/html/native/app_management/message_port_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Message Port</title> 
- </head> 
+  <title>Message Port</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -34,7 +34,7 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Mobile Native</a></li>      
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Wearable Native</a></li>
                </ul>
        </div></div>
@@ -71,39 +71,39 @@
 #include &lt;message_port.h&gt;
 </pre></li>
 </ol>
- 
+
  <h2 id="uni" name="uni">Using Uni-directional Communication</h2>
 <p>To use uni-directional communication, you must check whether the message port of a remote application is registered with the <code>message_port_check_remote_port()</code> function. You can then send messages to the remote application using the <code>message_port_send_message()</code> function. The remote application can receive the messages using the <code>message_port_register_local_port()</code> function.</p>
-  <p align="center"><strong>Figure: Uni-directional message port communication</strong></p> 
-  <p align="center"><img alt="Uni-directional message port communication" src="../../images/message_port_uni-directional_communication.png" /></p> 
-<p>To send a message from Application 1 to Application 2 using the Message Port API:</p>     
+  <p align="center"><strong>Figure: Uni-directional message port communication</strong></p>
+  <p align="center"><img alt="Uni-directional message port communication" src="../../images/message_port_uni-directional_communication.png" /></p>
+<p>To send a message from Application 1 to Application 2 using the Message Port API:</p>
 
 <ol>
 
 <li>
        <p>Register a local port in Application 2.</p>
-       
+
 <p>To register the local port, call the <code>message_port_register_local_port()</code> function and implement a callback for it in Application 2:</p>
 
 <pre class="prettyprint">
 void
 message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool trusted_remote_port, bundle *message, void *user_data)
+                bool trusted_remote_port, bundle *message, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *command = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *data = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;command&quot;, &amp;command);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;data&quot;, &amp;data);
-&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Message from %s, command: %s data: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remote_app_id, command, data);
+    char *command = NULL;
+    char *data = NULL;
+    bundle_get_str(message, "command", &amp;command);
+    bundle_get_str(message, "data", &amp;data);
+
+    dlog_print(DLOG_INFO, TAG, "Message from %s, command: %s data: %s",
+               remote_app_id, command, data);
 }
 
 int port_id = message_port_register_local_port(local_port, message_port_cb, NULL);
 if (port_id &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Port register error: %d&quot;, port_id);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Port register error: %d", port_id);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;port_id: %d&quot;, port_id);
+    dlog_print(DLOG_INFO, LOG_TAG, "port_id: %d", port_id);
 </pre>
 </li>
 
@@ -115,14 +115,14 @@ else
 bool
 test_check_remote_port()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;bool found;
+    int ret;
+    bool found;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = message_port_check_remote_port(remote_app_id, remote_port, &amp;found);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MESSAGE_PORT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;message_port_check_remote_port error: %d&quot;, ret);
+    ret = message_port_check_remote_port(remote_app_id, remote_port, &amp;found);
+    if (ret != MESSAGE_PORT_ERROR_NONE)
+        dlog_print(DLOG_ERROR, TAG, "message_port_check_remote_port error: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return found;
+    return found;
 }
 </pre>
 </li>
@@ -137,75 +137,75 @@ test_check_remote_port()
 void
 send_message(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *b = bundle_create();
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;command&quot;, &quot;begin&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;data&quot;, &quot;dummy&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = message_port_send_message(remote_app_id, remote_port, b);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MESSAGE_PORT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;message_port_check_remote_port error: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Send message done&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(b);
+    int ret;
+    bundle *b = bundle_create();
+    bundle_add_str(b, "command", "begin");
+    bundle_add_str(b, "data", "dummy");
+    ret = message_port_send_message(remote_app_id, remote_port, b);
+    if (ret != MESSAGE_PORT_ERROR_NONE)
+        dlog_print(DLOG_ERROR, TAG, "message_port_check_remote_port error: %d", ret);
+    else
+        dlog_print(DLOG_INFO, TAG, "Send message done");
+    bundle_free(b);
 }
 </pre>
 </li></ol>
 
  <h2 id="bi" name="bi">Using Bi-directional Communication</h2>
- 
-<p>To use bi-directional communication, you must check whether the message port of a remote application is registered with the <code>message_port_check_remote_port()</code> function. You can then send messages and local message port information to the remote application using the <code>message_port_send_message_with_local_port()</code> function. The remote application can use the local message port information to send response messages after it receives your messages using the <code>message_port_register_local_port()</code> function.</p> 
- 
-  <p align="center"><strong>Figure: Bi-directional message port communication</strong></p> 
+
+<p>To use bi-directional communication, you must check whether the message port of a remote application is registered with the <code>message_port_check_remote_port()</code> function. You can then send messages and local message port information to the remote application using the <code>message_port_send_message_with_local_port()</code> function. The remote application can use the local message port information to send response messages after it receives your messages using the <code>message_port_register_local_port()</code> function.</p>
+
+  <p align="center"><strong>Figure: Bi-directional message port communication</strong></p>
   <p align="center"><img alt="Bi-directional message port communication" src="../../images/message_port_bi-directional_communication.png" /></p>
 <p>To send a message from Application 1 to Application 2, and from Application 2 to Application 1:</p>
   <ol>
 <li>
        <p>Implement the response logic in both applications:</p>
-  
-  
+
+
 <pre class="prettyprint">
 void
 message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool trusted_remote_port, bundle *message, void *user_data)
+                bool trusted_remote_port, bundle *message, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *command = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *data = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;command&quot;, &amp;command);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;data&quot;, &amp;data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Message from %s, command: %s data: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remote_app_id, command, data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *reply = bundle_create();
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(reply, &quot;result&quot;, &quot;GOT_IT&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = message_port_send_message(remote_app_id, remote_port, reply);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(reply);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MESSAGE_PORT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Port send message error: %d&quot;, ret);
+    int ret;
+    char *command = NULL;
+    char *data = NULL;
+    bundle_get_str(message, "command", &amp;command);
+    bundle_get_str(message, "data", &amp;data);
+
+    dlog_print(DLOG_INFO, TAG, "Message from %s, command: %s data: %s",
+               remote_app_id, command, data);
+
+    bundle *reply = bundle_create();
+    bundle_add_str(reply, "result", "GOT_IT");
+    ret = message_port_send_message(remote_app_id, remote_port, reply);
+    bundle_free(reply);
+    if (ret != MESSAGE_PORT_ERROR_NONE)
+        dlog_print(DLOG_ERROR, TAG, "Port send message error: %d", ret);
 }
 </pre>
 </li>
 
 <li>
        <p>Register the local port in Application 1.</p>
-       <p>Call the <code>message_port_register_local_port()</code> function in Application 1:</p>      
-       
+       <p>Call the <code>message_port_register_local_port()</code> function in Application 1:</p>
+
 <pre class="prettyprint">
 void
 message_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool trusted_remote_port, bundle *message, void *user_data)
+                bool trusted_remote_port, bundle *message, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *result = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_get_str(message, &quot;result&quot;, &amp;result);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Message from %s, result: %s &quot;, remote_app_id, result);
+    char *result = NULL;
+    bundle_get_str(message, "result", &amp;result);
+    dlog_print(DLOG_INFO, TAG, "Message from %s, result: %s ", remote_app_id, result);
 }
 
 int local_port_id = message_port_register_local_port(local_port, message_port_cb);
 if (local_port_id &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Port register error: %d&quot;, local_port_id);
+    dlog_print(DLOG_ERROR, TAG, "Port register error: %d", local_port_id);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;port_id: %d&quot;, port_id);
+    dlog_print(DLOG_INFO, TAG, "port_id: %d", port_id);
 </pre>
 </li>
 
@@ -216,39 +216,39 @@ else
 void
 send_message_with_local_port(int local_port_id)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *b = bundle_create();
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;command&quot;, &quot;begin&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(b, &quot;data&quot;, &quot;dummy&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = message_port_send_message_with_local_port(remote_app_id, remote_port,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b, local_port_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MESSAGE_PORT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;message_port_send_message_with_local_port error: %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Send message done&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(b);
+    int ret;
+    bundle *b = bundle_create();
+    bundle_add_str(b, "command", "begin");
+    bundle_add_str(b, "data", "dummy");
+
+    ret = message_port_send_message_with_local_port(remote_app_id, remote_port,
+                                                    b, local_port_id);
+    if (ret != MESSAGE_PORT_ERROR_NONE)
+        dlog_print(DLOG_ERROR, TAG,
+                   "message_port_send_message_with_local_port error: %d",
+                   ret);
+    else
+        dlog_print(DLOG_INFO, TAG, "Send message done");
+    bundle_free(b);
 }
 
 if (test_check_remote_port()) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Remote port check success.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;send_message_with_local_port(local_port_id);
+    dlog_print(DLOG_INFO, TAG, "Remote port check success.");
+    send_message_with_local_port(local_port_id);
 }
 </pre>
 </li>
 </ol>
 
  <h2 id="trusted_use" name="trusted_use">Using Trusted Communication</h2>
-<p>The trusted message port instance can be retrieved using the <code>message_port_register_trusted_local_port()</code> function. Communication over the trusted message port is allowed only if both applications are signed with a certificate that is uniquely assigned to its developer.</p> 
-  <p align="center"><strong>Figure: Trusted uni-directional message port communication</strong></p> 
+<p>The trusted message port instance can be retrieved using the <code>message_port_register_trusted_local_port()</code> function. Communication over the trusted message port is allowed only if both applications are signed with a certificate that is uniquely assigned to its developer.</p>
+  <p align="center"><strong>Figure: Trusted uni-directional message port communication</strong></p>
   <p align="center"><img alt="Trusted uni-directional message port communication" src="../../images/message_port_trusted_uni-directional_comm.png" /></p>
 
 <p>The trusted communication work similarly as normal message port communication. The only difference is that you must use trusted functions instead of normal functions, as defined in the following table.</p>
 
 <p align="center" class="Table"><strong>Table: Corresponding normal and trusted communication functions</strong></p>
-<table>        
+<table>
        <tbody>
                <tr>
                        <th>Normal communication</th>
@@ -291,4 +291,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/package_manager_n.htm b/org.tizen.guides/html/native/app_management/package_manager_n.htm
index 3138ba9..7caf115 100644 (file)
--- a/org.tizen.guides/html/native/app_management/package_manager_n.htm
+++ b/org.tizen.guides/html/native/app_management/package_manager_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Package Manager</title> 
- </head> 
+  <title>Package Manager</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -64,7 +64,7 @@
 <p>To use the Package Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/packagemanager.info&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/packagemanager.info&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -72,8 +72,8 @@
 <pre class="prettyprint">
 #include &lt;package_manager.h&gt;
 </pre></li>
-</ol> 
-  
+</ol>
+
 <h2 id="retrieve" name="retrieve">Retrieving All Package Information</h2>
 
 <p>To retrieve all package information of installed packages:</p>
@@ -85,54 +85,54 @@
 void
 package_info_cb(package_info_h package_info, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;char *pkg = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *label = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *icon = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *version = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *type = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_installed_storage_type_e storage;
-&nbsp;&nbsp;&nbsp;&nbsp;bool system;
-&nbsp;&nbsp;&nbsp;&nbsp;bool removable;
-&nbsp;&nbsp;&nbsp;&nbsp;bool preload;
-
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_get_package(package_info, &amp;pkg);
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_get_label(package_info, &amp;label);
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_get_icon(package_info, &amp;icon);
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_get_version(package_info, &amp;version);
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_get_type(package_info, &amp;type);
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_get_installed_storage(package_info, &amp;storage);
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_is_system_package(package_info, &amp;system);
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_is_removable_package(package_info, &amp;removable);
-&nbsp;&nbsp;&nbsp;&nbsp;package_info_is_preload_package(package_info, &amp;preload);
-
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;pkg \t= [%s]\n&quot;, pkg);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;label \t= [%s]\n&quot;, label);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;icon \t= [%s]\n&quot;, icon);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;version \t= [%s]\n&quot;, version);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;type \t= [%s]\n&quot;, type);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;storage \t= [%d]\n&quot;, storage);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;system \t= [%d]\n&quot;, system);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;removable \t= [%d]\n&quot;, removable);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;preload \t= [%d]\n&quot;, preload);
-
-&nbsp;&nbsp;&nbsp;&nbsp;free(pkg);
-&nbsp;&nbsp;&nbsp;&nbsp;free(label);
-&nbsp;&nbsp;&nbsp;&nbsp;free(icon);
-&nbsp;&nbsp;&nbsp;&nbsp;free(version);
-&nbsp;&nbsp;&nbsp;&nbsp;free(type);
+    int ret;
+
+    char *pkg = NULL;
+    char *label = NULL;
+    char *icon = NULL;
+    char *version = NULL;
+    char *type = NULL;
+    package_info_installed_storage_type_e storage;
+    bool system;
+    bool removable;
+    bool preload;
+
+    package_info_get_package(package_info, &amp;pkg);
+    package_info_get_label(package_info, &amp;label);
+    package_info_get_icon(package_info, &amp;icon);
+    package_info_get_version(package_info, &amp;version);
+    package_info_get_type(package_info, &amp;type);
+    package_info_get_installed_storage(package_info, &amp;storage);
+    package_info_is_system_package(package_info, &amp;system);
+    package_info_is_removable_package(package_info, &amp;removable);
+    package_info_is_preload_package(package_info, &amp;preload);
+
+    dlog_print(DLOG_INFO, TAG, "pkg \t= [%s]\n", pkg);
+    dlog_print(DLOG_INFO, TAG, "label \t= [%s]\n", label);
+    dlog_print(DLOG_INFO, TAG, "icon \t= [%s]\n", icon);
+    dlog_print(DLOG_INFO, TAG, "version \t= [%s]\n", version);
+    dlog_print(DLOG_INFO, TAG, "type \t= [%s]\n", type);
+    dlog_print(DLOG_INFO, TAG, "storage \t= [%d]\n", storage);
+    dlog_print(DLOG_INFO, TAG, "system \t= [%d]\n", system);
+    dlog_print(DLOG_INFO, TAG, "removable \t= [%d]\n", removable);
+    dlog_print(DLOG_INFO, TAG, "preload \t= [%d]\n", preload);
+
+    free(pkg);
+    free(label);
+    free(icon);
+    free(version);
+    free(type);
 }
 </pre></li>
 <li>Use the <code>package_manager_foreach_package_info()</code> function to retrieve all package information by invoking a callback for each retrieved package:
 <pre class="prettyprint">
 ret = package_manager_foreach_package_info(package_info_cb, NULL);
 if (ret != PACKAGE_MANAGER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;foreach_package_info error: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, TAG, "foreach_package_info error: %d", ret);
 </pre></li></ol>
 
  <h2 id="info" name="info">Retrieving Specific Package Information</h2>
- 
+
 <p>To get specific package information:</p>
 <ol>
 <li>Use the <code>package_manager_get_package_info()</code> function.
@@ -154,15 +154,15 @@ char *version = NULL;
 char *label = NULL;
 char *type = NULL;
 package_info_h package_info = NULL;
-package_manager_get_package_info(&quot;PACKAGE-ID&quot;, &amp;package_info);
+package_manager_get_package_info("PACKAGE-ID", &amp;package_info);
 
 package_info_get_version(package_info, &amp;version);
 package_info_get_label(package_info, &amp;label);
 package_info_get_type(package_info, &amp;type);
 
-dlog_print(DLOG_INFO, TAG, &quot;label \t= [%s]\n&quot;, label);
-dlog_print(DLOG_INFO, TAG, &quot;icon \t= [%s]\n&quot;, icon);
-dlog_print(DLOG_INFO, TAG, &quot;version \t= [%s]\n&quot;, version);
+dlog_print(DLOG_INFO, TAG, "label \t= [%s]\n", label);
+dlog_print(DLOG_INFO, TAG, "icon \t= [%s]\n", icon);
+dlog_print(DLOG_INFO, TAG, "version \t= [%s]\n", version);
 
 free(label);
 free(icon);
@@ -197,17 +197,17 @@ package_manager_set_event_status(manager, PACKAGE_MANAGER_STATUS_TYPE_ALL);
 <pre class="prettyprint">
 void
 event_cb(const char *type, const char *package, package_manager_event_type_e event_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package_manager_event_state_e event_state, int progress,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package_manager_error_e error, void *user_data)
+         package_manager_event_state_e event_state, int progress,
+         package_manager_error_e error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (event_state == PACKAGE_MANAGER_EVENT_STATE_STARTED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Started&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else if (event_state == PACKAGE_MANAGER_EVENT_STATE_PROCESSING)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Progress: %d&quot;, progress);
-&nbsp;&nbsp;&nbsp;&nbsp;else if (event_state == PACKAGE_MANAGER_EVENT_STATE_COMPLETED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Completed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed&quot;);
+    if (event_state == PACKAGE_MANAGER_EVENT_STATE_STARTED)
+        dlog_print(DLOG_INFO, LOG_TAG, "Started");
+    else if (event_state == PACKAGE_MANAGER_EVENT_STATE_PROCESSING)
+        dlog_print(DLOG_INFO, LOG_TAG, "Progress: %d", progress);
+    else if (event_state == PACKAGE_MANAGER_EVENT_STATE_COMPLETED)
+        dlog_print(DLOG_INFO, LOG_TAG, "Completed");
+    else
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed");
 }
 
 package_manager_set_event_cb(manager, event_cb, NULL);
@@ -244,4 +244,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/service_app_n.htm b/org.tizen.guides/html/native/app_management/service_app_n.htm
index 70d75a3..7998777 100644 (file)
--- a/org.tizen.guides/html/native/app_management/service_app_n.htm
+++ b/org.tizen.guides/html/native/app_management/service_app_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Service Applications</title> 
- </head> 
+  <title>Service Applications</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -35,7 +35,7 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Mobile Native</a></li> 
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Wearable Native</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Hybrid_Service" target="_blank">Hybrid Service Sample Description</a></li>
                </ul>
@@ -43,7 +43,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Service Applications</h1> 
+<h1>Service Applications</h1>
 
 <p>Service applications are Tizen native applications with no graphical user interface that run in the background. They can be very useful in performing activities (such as getting sensor data in the background) that need to run periodically or continuously, but do not require any user intervention.</p>
 
@@ -94,7 +94,7 @@
     </tr>
    </tbody>
   </table>
-  
+
 <p>Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category. For more information on using and defining a background category, see <a href="efl_ui_app_n.htm#allow_bg">Background Categories</a>.</p>
 
 <h2 id="register" name="register">Event Callbacks</h2>
@@ -137,7 +137,7 @@
     </tr>
     <tr>
      <td><code>service_app_low_memory_cb()</code></td>
-     <td>Used to take necessary actions in low memory situations. 
+     <td>Used to take necessary actions in low memory situations.
         <p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. Release any cached data in the main memory to secure more free memory.</p></td>
     </tr>
     <tr>
@@ -152,17 +152,17 @@
 <p>Describe your service application attributes in the manifest file. The attributes determine the application behavior. The following code example illustrates how you can define the attributes:</p>
 
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; package=&quot;org.tizen.message&quot; version=&quot;0.2.7&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;install-location=&quot;internal-only&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Message&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;description&gt;Message Application&lt;/description&gt;
-&nbsp;&nbsp;&nbsp;&lt;service-application appid=&quot;org.tizen.message&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exec=&quot;/usr/apps/org.tizen.message/bin/message&quot; nodisplay=&quot;true&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiple=&quot;false&quot; type=&quot;capp&quot; taskmanage=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;org.tizen.message.png&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Message&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;/service-application&gt;
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;manifest xmlns="http://tizen.org/ns/packages" package="org.tizen.message" version="0.2.7"
+          install-location="internal-only"&gt;
+   &lt;label&gt;Message&lt;/label&gt;
+   &lt;description&gt;Message Application&lt;/description&gt;
+   &lt;service-application appid="org.tizen.message"
+                        exec="/usr/apps/org.tizen.message/bin/message" nodisplay="true"
+                        multiple="false" type="capp" taskmanage="false"&gt;
+      &lt;icon&gt;org.tizen.message.png&lt;/icon&gt;
+      &lt;label&gt;Message&lt;/label&gt;
+   &lt;/service-application&gt;
 &lt;/manifest&gt;
 </pre>
 
@@ -170,7 +170,7 @@
 
 <ul><li><code>auto-restart</code>
 <p>If set to <code>true</code>, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.</p>
- 
+
   <div class="note">
         <strong>Note</strong>
         This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices. Because of this, the <code>auto-restart</code> attribute used in a lower API version package than 2.4 is ignored in the devices with the Tizen platform version 2.4 and higher.
@@ -263,9 +263,9 @@
 bool
 service_app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "%s", __func__);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -277,10 +277,10 @@ service_app_create(void *data)
 void
 service_app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_exit();
+    dlog_print(DLOG_DEBUG, LOG_TAG, "%s", __func__);
+    service_app_exit();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
@@ -291,10 +291,10 @@ service_app_terminate(void *data)
 void
 service_app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_exit();
+    dlog_print(DLOG_DEBUG, LOG_TAG, "%s", __func__);
+    service_app_exit();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
@@ -309,10 +309,10 @@ service_app_control(app_control_h app_control, void *data)
 void
 service_app_low_memory_callback(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_exit();
+    dlog_print(DLOG_DEBUG, LOG_TAG, "%s", __func__);
+    service_app_exit();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
@@ -323,10 +323,10 @@ service_app_low_memory_callback(void *data)
 void
 service_app_low_battery_callback(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_exit();
+    dlog_print(DLOG_DEBUG, LOG_TAG, "%s", __func__);
+    service_app_exit();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
@@ -340,18 +340,18 @@ service_app_low_battery_callback(void *data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_lifecycle_callback_s event_callback = {0,};
+    appdata_s ad = {0,};
+    service_app_lifecycle_callback_s event_callback = {0,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s&quot;, __func__);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "%s", __func__);
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = service_app_control;
+    event_callback.create = service_app_create;
+    event_callback.terminate = service_app_terminate;
+    event_callback.app_control = service_app_control;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;service_app_main() is called.&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "service_app_main() is called.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    return service_app_main(argc, argv, &amp;event_callback, &amp;ad);
 }
 </pre>
 </li>
@@ -379,4 +379,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/ui_app_n.htm b/org.tizen.guides/html/native/app_management/ui_app_n.htm
index 399a8ed..359bec4 100644 (file)
--- a/org.tizen.guides/html/native/app_management/ui_app_n.htm
+++ b/org.tizen.guides/html/native/app_management/ui_app_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>UI Applications</title>  
+       <title>UI Applications</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -35,13 +35,13 @@
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
  <h1>UI Applications</h1>
- 
+
 <p>UI applications are Tizen native applications with a graphical user interface that run in the foreground. Since they have a UI, they allow the user to easily interact with them.</p>
- 
+
 <p>A Tizen native UI application is similar to a conventional Linux application, with some additional features optimized for mobile and wearable devices. The additional features have constraints, such as a relatively small screen size and lack of system resources compared to a larger system. For example, for power management reasons, the application can take actions to reduce usage when it finds out that it has its display window covered over by another application window. State change events are delivered to make it possible to detect these situations.</p>
 
 <p>When creating a native UI application, you can select between EFL and DALi UI frameworks:</p>
@@ -50,14 +50,14 @@
 
        <li>EFL
         <p>The EFL application is based on the Enlightenment Foundation Library. The EFL application provides a 2D-based Tizen native application, and streamlined graphic core libraries you need to create powerful applications. EFL needs relatively low memory but provides high performance, and supports a retained mode graphics system and user-centric features, such as themes, 2D/3D effects, and accessibility. In addition, EFL supports various resolutions with the same layout, fast and small file systems, a variety of programming language bindings, and a separate UI and logic.</p>
-               
-               <p>For more information on the available application types with EFL, see <a href="efl_app_n.htm">EFL Applications</a>.</p>      
+
+               <p>For more information on the available application types with EFL, see <a href="efl_app_n.htm">EFL Applications</a>.</p>
        </li>
 
        <li>DALi
         <p>The DALi application is based on the Dynamic Animation Library. DALi internally defines a virtual 3D world (space) and maintains hierarchical objects in the 3D world. The hierarchical object tree is known as the scene graph. A node in the scene graph can have several children but often only a single parent, with the effect of a parent applied to all its child nodes; an operation performed on a group automatically propagates its effect to all of its members.</p>
-               
-               <p>For more information on the available application types with DALi, see <a href="dali_app_n.htm">DALi Applications</a>.</p>           
+
+               <p>For more information on the available application types with DALi, see <a href="dali_app_n.htm">DALi Applications</a>.</p>
        </li>
 
 </ul>
diff --git a/org.tizen.guides/html/native/app_management/watch_app_n.htm b/org.tizen.guides/html/native/app_management/watch_app_n.htm
index 807e9fb..4ecab17 100644 (file)
--- a/org.tizen.guides/html/native/app_management/watch_app_n.htm
+++ b/org.tizen.guides/html/native/app_management/watch_app_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>EFL Watch Application</title> 
- </head> 
+  <title>EFL Watch Application</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -52,7 +52,7 @@
 <p>Tizen allows you to create a watch application and manage its life-cycle to <a href="#current">retrieve the current date and time</a> and display it accurately on the screen.</p>
 
 <p>This feature is supported in wearable applications only.</p>
-          
+
 <p>The main features of the Watch Application API include:</p>
 <ul>
 <li>Managing the application life-cycle
@@ -72,14 +72,14 @@
                   <img alt="Clock menu" src="../../images/setting_to_clock.png" /></p>
 
 <h2 id="prerequisites">Prerequisites</h2>
-       
+
        <p>To enable your application to use the watch functionality:</p>
 <ol>
 <li>
-<p>To use the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API&#39;s <code>watch_app_ambient_tick_cb()</code> callback in the ambient mode, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
+<p>To use the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API's <code>watch_app_ambient_tick_cb()</code> callback in the ambient mode, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/alarm.set&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/alarm.set&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -90,8 +90,8 @@ bool support;
 int ret;
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;system_info_get_platform_bool(&quot;http://tizen.org/feature/screen.always_on.high_color&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;support);
+    system_info_get_platform_bool("http://tizen.org/feature/screen.always_on.high_color",
+                                  &amp;support);
 </pre>
 </li>
 
@@ -103,7 +103,7 @@ ret =
 <li>Edit the watch application settings in the <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#watch_app">manifest</a> file.</li>
 </ol>
 
-<h2 id="lifecycle" name="lifecycle">Managing the Application Life-cycle</h2> 
+<h2 id="lifecycle" name="lifecycle">Managing the Application Life-cycle</h2>
 <p>You can create and initialize a watch application with the <code>main()</code> function. To start an event loop, use the <code>watch_app_main()</code> function. Before calling this function, set up the <code>watch_app_lifecycle_callback_s</code> structure variable, which contains the required event callbacks.</p>
 
 
@@ -174,15 +174,15 @@ ret =
 <ol>
 <li><p>Register the necessary callbacks:</p>
 <ul>
-<li>The <code>create</code> event is triggered before the application main loop starts. In this callback, you can initialize the application resources, such as create windows and data structures. 
+<li>The <code>create</code> event is triggered before the application main loop starts. In this callback, you can initialize the application resources, such as create windows and data structures.
 <pre class="prettyprint">
 bool
 app_create(int width, int height, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Hook to take necessary actions before the main event loop starts */
-&nbsp;&nbsp;&nbsp;&nbsp;/* This usually means initializing the UI and application data */
+    /* Hook to take necessary actions before the main event loop starts */
+    /* This usually means initializing the UI and application data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -191,8 +191,8 @@ app_create(int width, int height, void* user_data)
 void
 app_control(app_control_h app_control, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the launch request */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the user the task requested through the &quot;app_control&quot; parameter */
+    /* Handle the launch request */
+    /* Show the user the task requested through the "app_control" parameter */
 }
 </pre>
 </li>
@@ -201,8 +201,8 @@ app_control(app_control_h app_control, void* user_data)
 void
 app_pause(void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take necessary actions when application becomes invisible */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the resources needed to draw the normal watch */
+    /* Take necessary actions when application becomes invisible */
+    /* Release the resources needed to draw the normal watch */
 }
 </pre>
 </li>
@@ -211,8 +211,8 @@ app_pause(void* user_data)
 void
 app_resume(void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take the necessary actions when application becomes visible */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Acquire the resources needed to draw the normal watch */
+    /* Take the necessary actions when application becomes visible */
+    /* Acquire the resources needed to draw the normal watch */
 }
 </pre>
 </li>
@@ -221,7 +221,7 @@ app_resume(void* user_data)
 void
 app_terminate(void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release all resources */
+    /* Release all resources */
 }
 </pre>
 </li>
@@ -230,8 +230,8 @@ app_terminate(void* user_data)
 void
 app_time_tick(watch_time_h watch_time, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Called at least once per second */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Draw a normal watch with the hour, minute, and second */
+    /* Called at least once per second */
+    /* Draw a normal watch with the hour, minute, and second */
 }
 </pre>
 </li>
@@ -242,22 +242,22 @@ app_time_tick(watch_time_h watch_time, void* user_data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;watch_app_lifecycle_callback_s callback = {0,};
-
-&nbsp;&nbsp;&nbsp;&nbsp;callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;callback.app_control = app_control;
-&nbsp;&nbsp;&nbsp;&nbsp;callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;&nbsp;callback.time_tick = app_time_tick;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Ambient mode callbacks */
-
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = watch_app_main(argc, argv, &amp;callback, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;watch_app_main() failed. err = %d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    appdata ad = {0,};
+    watch_app_lifecycle_callback_s callback = {0,};
+
+    callback.create = app_create;
+    callback.app_control = app_control;
+    callback.terminate = app_terminate;
+    callback.pause = app_pause;
+    callback.resume = app_resume;
+    callback.time_tick = app_time_tick;
+    /* Ambient mode callbacks */
+
+    int ret = watch_app_main(argc, argv, &amp;callback, &amp;ad);
+    if (ret != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() failed. err = %d", ret);
+
+    return ret;
 }
 </pre>
 </li>
@@ -267,7 +267,7 @@ main(int argc, char* argv[])
 
 <p>To manage callbacks related to system status changes:</p>
 
-<ol>   
+<ol>
 <li><p>Define the following callback functions:</p>
 <ul>
 <li><code>lang_changed()</code>: Triggered when the system language changes and the messages are translated.</li>
@@ -280,25 +280,25 @@ main(int argc, char* argv[])
 void
 lang_changed(app_event_info_h event_info, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take the necessary actions when the language setting changes */
+    /* Take the necessary actions when the language setting changes */
 }
 
 void
 region_changed(app_event_info_h event_info, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take the necessary actions when the region setting changes */
+    /* Take the necessary actions when the region setting changes */
 }
 
 void
 low_battery(app_event_info_h event_info, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take the necessary actions when the system is running low on battery */
+    /* Take the necessary actions when the system is running low on battery */
 }
 
 void
 low_memory(app_event_info_h event_info, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take the necessary actions when the system is running low on memory */
+    /* Take the necessary actions when the system is running low on memory */
 }
 </pre></li>
 <li><p>Register the callback functions:</p>
@@ -306,24 +306,24 @@ low_memory(app_event_info_h event_info, void* user_data)
 bool
 app_create(void *user_date)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register a callback for each system event */
-&nbsp;&nbsp;&nbsp;&nbsp;if (watch_app_add_event_handler(&amp;handler, APP_EVENT_LANGUAGE_CHANGED, lang_changed,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL) != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;watch_app_add_event_handler() failed&quot;);
+    /* Register a callback for each system event */
+    if (watch_app_add_event_handler(&amp;handler, APP_EVENT_LANGUAGE_CHANGED, lang_changed,
+                                    NULL) != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (watch_app_add_event_handler(&amp;handler, APP_EVENT_REGION_FORMAT_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;region_changed, NULL) != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;watch_app_add_event_handler() failed&quot;);
+    if (watch_app_add_event_handler(&amp;handler, APP_EVENT_REGION_FORMAT_CHANGED,
+                                    region_changed, NULL) != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (watch_app_add_event_handler(&amp;handler, APP_EVENT_LOW_BATTERY, low_battery, NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;watch_app_add_event_handler() failed&quot;);
+    if (watch_app_add_event_handler(&amp;handler, APP_EVENT_LOW_BATTERY, low_battery, NULL)
+        != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (watch_app_add_event_handler(&amp;handler, APP_EVENT_LOW_MEMORY, low_ memory, NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;watch_app_add_event_handler() failed&quot;);
+    if (watch_app_add_event_handler(&amp;handler, APP_EVENT_LOW_MEMORY, low_ memory, NULL)
+        != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li>
 </ol>
@@ -336,58 +336,58 @@ app_create(void *user_date)
 <li>Get the window object with the <code>watch_app_get_elm_win()</code> function:
 <pre class="prettyprint">
 struct _appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *evas;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label;
+    Evas *evas;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label;
 };
 typedef struct _appdata appdata;
 
 static void
 __create_base_gui(appdata *ad, int width, int height)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;watch_time_h watch_time = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = watch_app_get_elm_win(&amp;ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to get window. err = %d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;win, width, height);
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;label, width, height / 3);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;label, 0, height / 3);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
+    int ret;
+    watch_time_h watch_time = NULL;
+    ret = watch_app_get_elm_win(&amp;ad-&gt;win);
+
+    if (ret != APP_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to get window. err = %d", ret);
+
+        return;
+    }
+    evas_object_resize(ad-&gt;win, width, height);
+    ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+    evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+    evas_object_show(ad-&gt;conform);
+    ad-&gt;label = elm_label_add(ad-&gt;conform);
+    evas_object_resize(ad-&gt;label, width, height / 3);
+    evas_object_move(ad-&gt;label, 0, height / 3);
+    evas_object_show(ad-&gt;label);
 </pre>
 </li>
 <li>Get the time handle for the current time with the <code>watch_time_get_current_time()</code> function:
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;ret = watch_time_get_current_time(&amp;watch_time);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to get current time. err = %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;__update_watch(ad, watch_time);
+    ret = watch_time_get_current_time(&amp;watch_time);
+    if (ret != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to get current time. err = %d", ret);
+    __update_watch(ad, watch_time);
 }
 
 bool
 app_create(void *user_date)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Define system callbacks */
+    /* Define system callbacks */
 
-&nbsp;&nbsp;&nbsp;&nbsp;appdata *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;__create_base_gui(ad, width, height);
+    appdata *ad = data;
+    __create_base_gui(ad, width, height);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
-<li>When you no longer need the <code>watch_time_h</code> time handle, release it with the <code>watch_time_delete()</code> function. 
+<li>When you no longer need the <code>watch_time_h</code> time handle, release it with the <code>watch_time_delete()</code> function.
 </li>
 </ol>
 
@@ -405,29 +405,29 @@ app_create(void *user_date)
 static void
 __update_watch(appdata *ad, watch_time_h watch_time)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;watch_text[TEXT_BUF_SIZE];
-&nbsp;&nbsp;&nbsp;&nbsp;int hour24;
-&nbsp;&nbsp;&nbsp;&nbsp;int minute;
-&nbsp;&nbsp;&nbsp;&nbsp;int second;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (watch_time == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;watch_time_get_hour24(watch_time, &amp;hour24);
-&nbsp;&nbsp;&nbsp;&nbsp;watch_time_get_minute(watch_time, &amp;minute);
-&nbsp;&nbsp;&nbsp;&nbsp;watch_time_get_second(watch_time, &amp;second);
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(watch_text, TEXT_BUF_SIZE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;align=center&gt;Hello Watch&lt;br/&gt;%02d:%02d:%02d&lt;/align&gt;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hour24, minute, second);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, watch_text);
+    watch_text[TEXT_BUF_SIZE];
+    int hour24;
+    int minute;
+    int second;
+
+    if (watch_time == NULL)
+        return;
+
+    watch_time_get_hour24(watch_time, &amp;hour24);
+    watch_time_get_minute(watch_time, &amp;minute);
+    watch_time_get_second(watch_time, &amp;second);
+    snprintf(watch_text, TEXT_BUF_SIZE,
+             "&lt;align=center&gt;Hello Watch&lt;br/&gt;%02d:%02d:%02d&lt;/align&gt;",
+             hour24, minute, second);
+    elm_object_text_set(ad-&gt;label, watch_text);
 }
 
 static void
 __create_base_gui(appdata *ad, int width, int height)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the window object and time handle */
+    /* Get the window object and time handle */
 
-&nbsp;&nbsp;&nbsp;&nbsp;__update_watch(ad, watch_time);
+    __update_watch(ad, watch_time);
 }
 </pre>
 
@@ -441,24 +441,24 @@ __create_base_gui(appdata *ad, int width, int height)
 
 <p>To use the ambient mode:</p>
 <ol>
-<li>Define the ambient mode callbacks. 
+<li>Define the ambient mode callbacks.
 <ul><li><p>The <code>ambient_changed</code> event is triggered when the ambient mode is enabled or disabled in the device. You can use the callback to initialize your ambient mode UI.</p></li>
 <li><p>The <code>ambient_tick</code> event is triggered every minute while the device is in the ambient mode. You can use the callback to update the time on your watch application in the ambient mode. In this callback, do not perform time-consuming task and always update the UI as fast as possible. The platform can put the device to sleep shortly after the ambient tick expires.</p></li></ul>
 <pre class="prettyprint">
 void
 app_ambient_tick(watch_time_h watch_time, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata *ad = user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;__update_watch(ad, watch_time);
+    appdata *ad = user_data;
+    __update_watch(ad, watch_time);
 }
 
 void
 app_ambient_changed(bool ambient_mode, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (ambient_mode)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Prepare to enter the ambient mode */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Prepare to exit the ambient mode */
+    if (ambient_mode)
+        /* Prepare to enter the ambient mode */
+    else
+        /* Prepare to exit the ambient mode */
 }
 </pre>
 </li>
@@ -467,23 +467,23 @@ app_ambient_changed(bool ambient_mode, void* user_data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;watch_app_lifecycle_callback_s callback = {0,};
+    appdata ad = {0,};
+    watch_app_lifecycle_callback_s callback = {0,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Other life-cycle callbacks */
+    /* Other life-cycle callbacks */
 
-&nbsp;&nbsp;&nbsp;&nbsp;callback.ambient_tick = app_ambient_tick;
-&nbsp;&nbsp;&nbsp;&nbsp;callback.ambient_changed = app_ambient_changed;
+    callback.ambient_tick = app_ambient_tick;
+    callback.ambient_changed = app_ambient_changed;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = watch_app_main(argc, argv, &amp;callback, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;watch_app_main() failed. err = %d&quot;, ret);
+    int ret = watch_app_main(argc, argv, &amp;callback, &amp;ad);
+    if (ret != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() failed. err = %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 </li>
-</ol>  
+</ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
@@ -507,4 +507,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/app_management/widget_app_n.htm b/org.tizen.guides/html/native/app_management/widget_app_n.htm
index 2136d70..683093a 100644 (file)
--- a/org.tizen.guides/html/native/app_management/widget_app_n.htm
+++ b/org.tizen.guides/html/native/app_management/widget_app_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>EFL Widget Application</title> 
- </head> 
+  <title>EFL Widget Application</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,11 +31,11 @@
                        <li><a href="#app">Widget Application States and Events</a></li>
                        <li><a href="#instance">Widget Instance States and Events</a></li>
                        <li><a href="#prerequisites">Prerequisites</a></li>
-                       <li><a href="#create">Creating the Widget Application</a></li>   
-                       <li><a href="#life-cycle">Managing Widget Instance Life-cycle Callbacks</a></li>         
-                       <li><a href="#get_window">Drawing the Widget UI</a></li>         
+                       <li><a href="#create">Creating the Widget Application</a></li>
+                       <li><a href="#life-cycle">Managing Widget Instance Life-cycle Callbacks</a></li>
+                       <li><a href="#get_window">Drawing the Widget UI</a></li>
                        <li><a href="#get_instance">Managing the Widget Instance</a></li>
-                       <li><a href="#share">Data Sharing Between the Widget Application and Other Applications</a></li>                        
+                       <li><a href="#share">Data Sharing Between the Widget Application and Other Applications</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -68,7 +68,7 @@
         The widget application UI has a limitation with the scroll action to provide better user experience. Design the widget UI to display all the information within the given area of the screen points.
        <p>To draw the UI, use a single window that is returned by the <code>widget_app_get_elm_win()</code> function. Do not create additional windows. A stack of widget application windows gets corrupted, because the platform handles the widget application window in a special way.</p>
        </div>
-  
+
        </li>
   </ul>
 
@@ -110,7 +110,7 @@
           </tr>
           </tbody>
 </table>
-       
+
 <h2 id="instance" name="instance">Widget Instance States and Events</h2>
 
 <p>The following figure illustrates the widget instance states during the instance life-cycle:</p>
@@ -126,7 +126,7 @@
 
 
 <p>The following table lists the <a href="#life-cycle">callbacks you can use as the instance state changes</a>.</p>
-  
+
   <p align="center" class="Table"><strong>Table: Instance state change callbacks</strong></p>
 <table>
           <tbody>
@@ -162,24 +162,24 @@
                           <td>Called when an event for updating the widget is received.</td>
           </tr>
           </tbody>
-</table>       
-       
-<p>To register widget instance callbacks, use the <code>widget_app_class_create()</code> function within the <code>widget_app_create_cb()</code> callback function:</p>        
+</table>
+
+<p>To register widget instance callbacks, use the <code>widget_app_class_create()</code> function within the <code>widget_app_create_cb()</code> callback function:</p>
 
 <pre class="prettyprint">
 static widget_class_h
 widget_app_create(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s ops = {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.create = widget_instance_create,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.destroy = widget_instance_destroy,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.pause = widget_instance_pause,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resume = widget_instance_resume,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.update = widget_instance_update,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resize = widget_instance_resize,
-&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;return widget_app_class_create(ops, user_data);
+    widget_instance_lifecycle_callback_s ops = {
+        .create = widget_instance_create,
+        .destroy = widget_instance_destroy,
+        .pause = widget_instance_pause,
+        .resume = widget_instance_resume,
+        .update = widget_instance_update,
+        .resize = widget_instance_resize,
+    };
+
+    return widget_app_class_create(ops, user_data);
 }
 </pre>
 
@@ -200,7 +200,7 @@ widget_app_create(void *user_data)
 <li>Edit the widget application settings in the <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm#widget_app">manifest</a> file.</li>
 </ol>
 
- <h2 id="create">Creating the Widget Application</h2> 
+ <h2 id="create">Creating the Widget Application</h2>
 <p>The widget application starts with the <code>main()</code> function, which creates and initializes the application. The <code>widget_app_main()</code> function is used to start the application event loop. Before calling this function, set up the <code>widget_app_lifecycle_callback_s</code> structure variable, which is passed to the function.</p>
 
 <p>To create the widget application:</p>
@@ -212,17 +212,17 @@ widget_app_create(void *user_data)
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_lifecycle_callback_s ops = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    widget_app_lifecycle_callback_s ops = {0,};
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ops.create = widget_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;ops.terminate = widget_app_terminate;
+    ops.create = widget_app_create;
+    ops.terminate = widget_app_terminate;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = widget_app_main(argc, argv, &amp;ops, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != WIDGET_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;widget_app_main() failed. err = %d&quot;, ret);
+    ret = widget_app_main(argc, argv, &amp;ops, NULL);
+    if (ret != WIDGET_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "widget_app_main() failed. err = %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 </li>
@@ -231,31 +231,31 @@ main(int argc, char *argv[])
 widget_class_h
 widget_app_create(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Hook to take necessary actions before main event loop starts */
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s obj_callback = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+    /* Hook to take necessary actions before main event loop starts */
+    widget_instance_lifecycle_callback_s obj_callback = {0,};
+    app_event_handler_h handlers[5] = {NULL,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the callback functions for the widget instance life-cycle */
+    /* Register the callback functions for the widget instance life-cycle */
 </pre>
 </li>
 
 <li>Register the callback functions for the system events.
 <p>At the end of the <code>widget_app_create()</code> function, remember to create a widget instance class and return a handle for it, so that the handle can be used for making widget instances.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the callback functions for system events */
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_LOW_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget_app_low_battery, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget_app_low_memory, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_LANGUAGE_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget_app_lang_changed, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_REGION_FORMAT_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget_app_region_changed, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return widget_app_class_create(obj_callback, user_data);
+    /* Register the callback functions for system events */
+    widget_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY],
+                                 APP_EVENT_LOW_BATTERY,
+                                 widget_app_low_battery, NULL);
+    widget_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
+                                 widget_app_low_memory, NULL);
+    widget_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED],
+                                 APP_EVENT_LANGUAGE_CHANGED,
+                                 widget_app_lang_changed, NULL);
+    widget_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED],
+                                 APP_EVENT_REGION_FORMAT_CHANGED,
+                                 widget_app_region_changed, NULL);
+
+    return widget_app_class_create(obj_callback, user_data);
 }
 </pre>
 <p>When the system-related callback are no longer needed, remove them with the <code>widget_app_remove_event_handler()</code> function.</p>
@@ -266,33 +266,33 @@ widget_app_create(void *user_data)
 void
 widget_app_lang_changed(app_event_info_h event_info, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take actions when language setting changes and messages must be translated */
-&nbsp;&nbsp;&nbsp;&nbsp;char *locale = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_get_language(event_info, &amp;locale);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_language_set(locale);
-&nbsp;&nbsp;&nbsp;&nbsp;free(locale);
+    /* Take actions when language setting changes and messages must be translated */
+    char *locale = NULL;
+    app_event_get_language(event_info, &amp;locale);
+    elm_language_set(locale);
+    free(locale);
 }
 
 void
 widget_app_region_changed(app_event_info_h event_info, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take actions when the time zone changes */
+    /* Take actions when the time zone changes */
 }
 
 void
 widget_app_low_battery(app_event_info_h event_info, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take actions when system is running low on battery (less than 5%) */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Save the work and avoid battery-intensive processes */
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_exit();
+    /* Take actions when system is running low on battery (less than 5%) */
+    /* Save the work and avoid battery-intensive processes */
+    widget_app_exit();
 }
 
 void
 widget_app_low_memory(app_event_info_h event_info, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take actions when system is running on low memory */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Save the work and release resources; if necessary, some apps can be killed */
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_exit();
+    /* Take actions when system is running on low memory */
+    /* Save the work and release resources; if necessary, some apps can be killed */
+    widget_app_exit();
 }
 </pre>
 </li>
@@ -302,7 +302,7 @@ widget_app_low_memory(app_event_info_h event_info, void* user_data)
 static void
 widget_app_terminate(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release all resources */
+    /* Release all resources */
 }
 </pre>
 </li>
@@ -318,33 +318,33 @@ widget_app_terminate(void *user_data)
 <pre class="prettyprint">
 int
 widget_instance_create(widget_context_h context, bundle *content, int w, int h,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                       void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_data_s *wid =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(widget_instance_data_s*)malloc(sizeof(widget_instance_data_s));
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    widget_instance_data_s *wid =
+        (widget_instance_data_s*)malloc(sizeof(widget_instance_data_s));
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (content != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Recover the previous status with the bundle object */
+    if (content != NULL)
+        /* Recover the previous status with the bundle object */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the UI */
+    /* Create the UI */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre>
 </li>
 
-<li>This callback is triggered when the widget instance is destroyed. 
+<li>This callback is triggered when the widget instance is destroyed.
 <p>Release all widget resources. If the <code>reason</code> for the termination is not <code>WIDGET_APP_DESTROY_TYPE_PERMANENT</code>, store the current status with the incoming bundle.</p>
 <pre class="prettyprint">
 int
 widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle *content, void *user_data)
+                        bundle *content, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (reason != WIDGET_APP_DESTROY_TYPE_PERMANENT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save the current status at the bundle object */
+    if (reason != WIDGET_APP_DESTROY_TYPE_PERMANENT)
+        /* Save the current status at the bundle object */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre>
 
@@ -356,7 +356,7 @@ widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reas
 int
 widget_instance_pause(widget_context_h context, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre>
 </li>
@@ -366,7 +366,7 @@ widget_instance_pause(widget_context_h context, void *user_data)
 int
 widget_instance_resume(widget_context_h context, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre>
 </li>
@@ -376,8 +376,8 @@ widget_instance_resume(widget_context_h context, void *user_data)
 int
 widget_instance_resize(widget_context_h context, int w, int h, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
-} 
+    return WIDGET_ERROR_NONE;
+}
 </pre>
 </li>
 <li>This callback is triggered when a widget update event is received.
@@ -385,9 +385,9 @@ widget_instance_resize(widget_context_h context, int w, int h, void *user_data)
 <pre class="prettyprint">
 int
 widget_instance_update(widget_context_h context, bundle *content, int force,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                       void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre>
 </li>
@@ -399,18 +399,18 @@ widget_instance_update(widget_context_h context, bundle *content, int force,
 widget_class_h
 widget_app_create(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s obj_callback = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the callback functions */
-&nbsp;&nbsp;&nbsp;&nbsp;obj_callback.create = widget_instance_create;
-&nbsp;&nbsp;&nbsp;&nbsp;obj_callback.destroy = widget_instance_destroy;
-&nbsp;&nbsp;&nbsp;&nbsp;obj_callback.pause = widget_instance_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;obj_callback.resume = widget_instance_resume;
-&nbsp;&nbsp;&nbsp;&nbsp;obj_callback.resize = widget_instance_resize;
-&nbsp;&nbsp;&nbsp;&nbsp;obj_callback.update = widget_instance_update;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register system-related callbacks */
-
-&nbsp;&nbsp;&nbsp;&nbsp;return widget_app_class_create(obj_callback, user_data);
+    widget_instance_lifecycle_callback_s obj_callback = {0,};
+    /* Register the callback functions */
+    obj_callback.create = widget_instance_create;
+    obj_callback.destroy = widget_instance_destroy;
+    obj_callback.pause = widget_instance_pause;
+    obj_callback.resume = widget_instance_resume;
+    obj_callback.resize = widget_instance_resize;
+    obj_callback.update = widget_instance_update;
+
+    /* Register system-related callbacks */
+
+    return widget_app_class_create(obj_callback, user_data);
 }
 </pre>
 </li>
@@ -421,70 +421,70 @@ widget_app_create(void *user_data)
 <p>To draw the widget UI, you must get a window object with the <code>widget_app_get_elm_win()</code> function and create the UI on the home screen:</p>
 <pre class="prettyprint">
 struct widget_instance_data {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label;
 };
 typedef struct widget_instance_data widget_instance_data_s;
 
 static int
 widget_instance_create(widget_context_h context, bundle *content, int w, int h,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                       void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_data_s *wid =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(widget_instance_data_s*)malloc(sizeof(widget_instance_data_s));
+    widget_instance_data_s *wid =
+        (widget_instance_data_s*)malloc(sizeof(widget_instance_data_s));
 
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;if (content != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Recover the previous status with the bundle object */
+    int ret;
+    if (content != NULL)
+        /* Recover the previous status with the bundle object */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = widget_app_get_elm_win(context, &amp;wid-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != WIDGET_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to get window. err = %d&quot;, ret);
+    /* Window */
+    ret = widget_app_get_elm_win(context, &amp;wid-&gt;win);
+    if (ret != WIDGET_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to get window. err = %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_FAULT;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return WIDGET_ERROR_FAULT;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(wid-&gt;win, w, h);
+    evas_object_resize(wid-&gt;win, w, h);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Conformant */
-&nbsp;&nbsp;&nbsp;&nbsp;wid-&gt;conform = elm_conformant_add(wid-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(wid-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(wid-&gt;win, wid-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(wid-&gt;conform);
+    /* Conformant */
+    wid-&gt;conform = elm_conformant_add(wid-&gt;win);
+    evas_object_size_hint_weight_set(wid-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(wid-&gt;win, wid-&gt;conform);
+    evas_object_show(wid-&gt;conform);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Label */
-&nbsp;&nbsp;&nbsp;&nbsp;wid-&gt;label = elm_label_add(wid-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(wid-&gt;label, w, h / 3);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(wid-&gt;label, 0, h / 3);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(wid-&gt;label);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(wid-&gt;label, &quot;Hello widget&quot;);
+    /* Label */
+    wid-&gt;label = elm_label_add(wid-&gt;conform);
+    evas_object_resize(wid-&gt;label, w, h / 3);
+    evas_object_move(wid-&gt;label, 0, h / 3);
+    evas_object_show(wid-&gt;label);
+    elm_object_text_set(wid-&gt;label, "Hello widget");
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(wid-&gt;win);
+    /* Show the window after the base GUI is set up */
+    evas_object_show(wid-&gt;win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_context_set_tag(context, wid);
+    widget_app_context_set_tag(context, wid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 
 int
 widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle *content, void *user_data)
+                        bundle *content, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (reason != WIDGET_APP_DESTROY_TYPE_PERMANENT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save the current status at the bundle object */
+    if (reason != WIDGET_APP_DESTROY_TYPE_PERMANENT)
+        /* Save the current status at the bundle object */
 
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;wid);
+    widget_instance_data_s *wid = NULL;
+    widget_app_context_get_tag(context, (void**)&amp;wid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (wid-&gt;win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(wid-&gt;win);
+    if (wid-&gt;win)
+        evas_object_del(wid-&gt;win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(wid);
+    free(wid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre>
 
@@ -495,35 +495,35 @@ widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reas
 <li>You can set a customized widget instance with the <code>widget_app_context_set_tag()</code> function when the instance is created. To update or destroy the customized widget, get the instance with the <code>widget_app_context_get_tag()</code> function.
 <pre class="prettyprint">
 struct _user_defined_s {
-&nbsp;&nbsp;&nbsp;&nbsp;int val1;
+    int val1;
 };
 typedef struct _user_defined_s user_defined_s;
 
 int
 widget_instance_create(widget_context_h context, bundle *content, int w, int h,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                       void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;user_defined_s *uds = (user_defined_s*)malloc(sizeof(user_defined_s));
-&nbsp;&nbsp;&nbsp;&nbsp;uds-&gt;val1 = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_context_set_tag(context, uds);
+    user_defined_s *uds = (user_defined_s*)malloc(sizeof(user_defined_s));
+    uds-&gt;val1 = 0;
+    widget_app_context_set_tag(context, uds);
 }
 
 int
 widget_instance_destroy(widget_context_h context, widget_destroy_type_e reason,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle *content, void *user_data)
+                        bundle *content, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;user_defined_s *uds = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;uds);
-&nbsp;&nbsp;&nbsp;&nbsp;free(uds);
+    user_defined_s *uds = NULL;
+    widget_app_context_get_tag(context, (void**)&amp;uds);
+    free(uds);
 }
 
 int
 widget_instance_update(widget_context_h context, bundle *content, int force,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                       void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;user_defined_s *uds = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;uds);
-&nbsp;&nbsp;&nbsp;&nbsp;uds-&gt;val1 = 1;
+    user_defined_s *uds = NULL;
+    widget_app_context_get_tag(context, (void**)&amp;uds);
+    uds-&gt;val1 = 1;
 }
 </pre>
 </li>
@@ -532,10 +532,10 @@ widget_instance_update(widget_context_h context, bundle *content, int force,
 <pre class="prettyprint">
 int
 widget_instance_update(widget_context_h context, bundle *content, int force,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                       void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *inst_id = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;inst_id = widget_app_get_id(context);
+    const char *inst_id = NULL;
+    inst_id = widget_app_get_id(context);
 }
 </pre></li>
 </ol>
@@ -549,12 +549,12 @@ widget_instance_update(widget_context_h context, bundle *content, int force,
 <li>The Weather application is launched when user selects it from the application list.</li>
 <li>The widget is launched when the Home screen is on screen and is terminated when the Home screen is hidden.</li></ul>
 
-<p>Although the widget wants to share some data from the Weather application (such as the user&#39;s favorite city), it is ineffective for the widget to launch the Weather application every time to retrieve such data. This inefficiency makes it difficult to use typical IPC mechanisms, such as socket and <a href="message_port_n.htm">Message Port</a>, in which both the receiver and sender processes must be alive for communication. To overcome this issue, the widget application must use a communication type where the data is permanently stored somewhere in the system.</p> 
+<p>Although the widget wants to share some data from the Weather application (such as the user's favorite city), it is ineffective for the widget to launch the Weather application every time to retrieve such data. This inefficiency makes it difficult to use typical IPC mechanisms, such as socket and <a href="message_port_n.htm">Message Port</a>, in which both the receiver and sender processes must be alive for communication. To overcome this issue, the widget application must use a communication type where the data is permanently stored somewhere in the system.</p>
 
 <p>In the Tizen platform, applications in the same package (including widget applications) can access files in the <code>data</code> directory of the package installation path. This means that the UI (or service) application can first write files to the <code>data</code> directory, and the widget can later read them, or vice versa.</p>
 
-<p align="center"><strong>Figure: Sharing through the data directory</strong></p> 
-<p align="center"><img alt="Sharing through the data directory" src="../../images/widget_data_share.png" /></p> 
+<p align="center"><strong>Figure: Sharing through the data directory</strong></p>
+<p align="center"><img alt="Sharing through the data directory" src="../../images/widget_data_share.png" /></p>
 
 <p>To manage data through the <code>data</code> directory:</p>
 
@@ -569,7 +569,7 @@ widget_instance_update(widget_context_h context, bundle *content, int force,
 
 <p>The following figure illustrates typical data control flows between the set of UI, service, and widget applications.</p>
 
-<p align="center"><strong>Figure: Sharing through data control</strong></p> 
+<p align="center"><strong>Figure: Sharing through data control</strong></p>
 <p align="center"><img alt="Sharing through data control" src="../../images/widget_data_control_share.png" /></p>
 
 
@@ -601,4 +601,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/connectivity/bluetooth_n.htm b/org.tizen.guides/html/native/connectivity/bluetooth_n.htm
index 21712dc..0a2eab6 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/bluetooth_n.htm
+++ b/org.tizen.guides/html/native/connectivity/bluetooth_n.htm
@@ -62,7 +62,7 @@
                                </ul>
                        </li>
                        <li><a href="#release">Releasing All Resources</a></li>
-               </ul>           
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API for Mobile Native</a></li>
@@ -84,15 +84,15 @@
 <p>The main features of the Bluetooth API include:</p>
 
 <ul>
-       <li>Managing the local Bluetooth adapter 
+       <li>Managing the local Bluetooth adapter
        <p>The Bluetooth Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__MODULE.html">wearable</a> applications) provides functions for setting up Bluetooth and discovering other devices. The API is used to control the Bluetooth adapter: you must <a href="#enable">enable the adapter</a> before any other Bluetooth actions, and when you no longer need it, disable it to save device power. You can <a href="#state">check and monitor the adapter state</a>.</p>
        <p>You can control the visibility of the device, meaning whether its name appears to others searching for Bluetooth devices. In addition, you can discover neighboring Bluetooth devices. This process is asynchronous, so you must build and hold the list of devices in the neighborhood.</p>
        </li>
-       <li>Discovering devices 
+       <li>Discovering devices
        <p>The Bluetooth Device API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__DEVICE__MODULE.html">wearable</a> applications) provides functions for managing bonds with other devices and searching for supported services. The API is used to handle the connection with other devices and to search for services available on remote devices.</p>
        <p>You can <a href="#find">discover other Bluetooth devices</a>. The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones.</p>
        </li>
-       <li>Creating a bonding with a Bluetooth device 
+       <li>Creating a bonding with a Bluetooth device
        <p>You can create a bonding with another device with the Bluetooth Device API. The bonding allows the 2 devices to establish a connection.</p>
        <p>Connected devices exchange keys needed for encrypted communication, but each connection has to be approved by the latest application user. You can also set authorization of other devices. Authorized devices are connected automatically without the latest user being asked for authorization.</p>
        </li>
@@ -120,12 +120,12 @@
        <p><a href="#exc">Push and accept objects</a>, such as pictures.</p></li>
        <li>Exchanging data with Bluetooth LE
        <p>The Bluetooth LE Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__ADAPTER__LE__MODULE.html">wearable</a> applications) provides functions for managing the Bluetooth Low Energy (BLE) connections with other BLE devices and exchanging data between them.</p>
-       <p>You can control the visibility of the BLE device, meaning whether its name appears to others searching for BLE devices. In addition, you  discover neighboring BLE devices. This process is asynchronous, so you must build and hold the list of devices in the neighborhood.</p>    
+       <p>You can control the visibility of the BLE device, meaning whether its name appears to others searching for BLE devices. In addition, you  discover neighboring BLE devices. This process is asynchronous, so you must build and hold the list of devices in the neighborhood.</p>
        <p>You can use LE operations to <a href="#le_scan">manage scans</a>, <a href="#le_discovery">discover nearby devices</a>, <a href="#add_adv_data">add advertising data</a>, <a href="#set_adv_conn">set the advertising connectable mode</a>, <a href="#set_adv_mode">set the advertising mode</a>, and <a href="#start_adv">start and stop advertising</a>.</p>
-       </li>   
+       </li>
        <li>Controlling remote audio and video devices with Bluetooth AVRCP
        <p>The Bluetooth AVRCP feature (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__AVRCP__MODULE.html">mobile</a> applications) provides functions for remotely controlling audio and video devices.</p>
-       <p>Bluetooth AVRCP is used with A2DP. You can handle remote controls (such as play, pause, stop, equalizer, repeat, shuffle, and scan) through AVRCP.</p></li>  
+       <p>Bluetooth AVRCP is used with A2DP. You can handle remote controls (such as play, pause, stop, equalizer, repeat, shuffle, and scan) through AVRCP.</p></li>
 </ul>
 
 <p>Remember to <a href="#release">release all resources</a> when you are done.</p>
@@ -141,11 +141,11 @@
 <p>To use the Bluetooth API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/bluetooth&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/bluetooth&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
-<li>                   
+<li>
 <p>To use the functions and data types of the Bluetooth API, include the <code>&lt;bluetooth.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;bluetooth.h&gt;
@@ -160,19 +160,19 @@ bt_error_e ret;
 
 ret = bt_initialize();
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_initialize] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_initialize] failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre></li></ol>
 
  <h2 id="enable" name="enable">Enabling and Disabling Bluetooth</h2>
-                       
+
 <p>To allow the user to enable or disable Bluetooth, use the application control to display the Bluetooth activation settings.</p>
 <p>The Bluetooth API does not contain functions for enabling or disabling Bluetooth. You must display the Bluetooth activation settings application to allow the user to toggle the Bluetooth state.</p>
 
-  <p align="center"><strong>Figure: Bluetooth activation settings application (off screen on the left and on screen on the right)</strong></p> 
-  <p align="center"><img alt="Bluetooth activation settings application (off screen on the left and on screen on the right)" src="../../images/bluetooth_onoff.png" /></p> 
+  <p align="center"><strong>Figure: Bluetooth activation settings application (off screen on the left and on screen on the right)</strong></p>
+  <p align="center"><img alt="Bluetooth activation settings application (off screen on the left and on screen on the right)" src="../../images/bluetooth_onoff.png" /></p>
 
 <pre class="prettyprint">
 #include &lt;app_control.h&gt;
@@ -181,29 +181,29 @@ if (ret != BT_ERROR_NONE) {
 int
 bt_onoff_operation(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;service_create failed!\n&quot;);
+    int ret = 0;
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "service_create failed!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, &quot;APP_CONTROL_OPERATION_SETTING_BT_ENABLE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+        return 0;
+    }
+    app_control_set_operation(service, "APP_CONTROL_OPERATION_SETTING_BT_ENABLE");
+    ret = app_control_send_launch_request(service, NULL, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to Bluetooth On/Off app!\n&quot;);
+    app_control_destroy(service);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to Bluetooth On/Off app!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to relaunch Bluetooth On/Off app!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to relaunch Bluetooth On/Off app!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -218,14 +218,14 @@ bt_adapter_state_e adapter_state;
 /* Check whether the Bluetooth adapter is enabled */
 ret = bt_adapter_get_state(&amp;adapter_state);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_get_state] failed&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_get_state] failed");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 /* If the Bluetooth adapter is not enabled */
 if (adapter_state == BT_ADAPTER_DISABLED)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Bluetooth adapter is not enabled. You should enable Bluetooth!!&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "Bluetooth adapter is not enabled. You should enable Bluetooth!!");
 </pre>
 </li>
 
@@ -238,67 +238,67 @@ bt_error_e ret;
 void
 adapter_state_changed_cb(int result, bt_adapter_state_e adapter_state, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[adapter_state_changed_cb] failed! result=%d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (adapter_state == BT_ADAPTER_ENABLED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[adapter_state_changed_cb] Bluetooth is enabled!&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get information about Bluetooth adapter */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *local_address = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_get_address(&amp;local_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[adapter_state_changed_cb] Adapter address: %s.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;local_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (local_address)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(local_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *local_name;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_get_name(&amp;local_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[adapter_state_changed_cb] Adapter name: %s.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;local_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (local_name)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(local_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Visibility mode of the Bluetooth device */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_visibility_mode_e mode;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Duration until the visibility mode is changed
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   so that other devices cannot find your device
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int duration = 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_get_visibility(&amp;mode, &amp;duration);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (mode) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[adapter_state_changed_cb] Visibility: NON_DISCOVERABLE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[adapter_state_changed_cb] Visibility: GENERAL_DISCOVERABLE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_VISIBILITY_MODE_LIMITED_DISCOVERABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[adapter_state_changed_cb] Visibility: LIMITED_DISCOVERABLE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[adapter_state_changed_cb] Bluetooth is disabled!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   When you try to get device information
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   by invoking bt_adapter_get_name(), bt_adapter_get_address(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   or bt_adapter_get_visibility(), BT_ERROR_NOT_ENABLED occurs
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (result != BT_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "[adapter_state_changed_cb] failed! result=%d",
+                   result);
+
+        return;
+    }
+    if (adapter_state == BT_ADAPTER_ENABLED) {
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "[adapter_state_changed_cb] Bluetooth is enabled!");
+
+        /* Get information about Bluetooth adapter */
+        char *local_address = NULL;
+        bt_adapter_get_address(&amp;local_address);
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "[adapter_state_changed_cb] Adapter address: %s.",
+                   local_address);
+        if (local_address)
+            free(local_address);
+        char *local_name;
+        bt_adapter_get_name(&amp;local_name);
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "[adapter_state_changed_cb] Adapter name: %s.",
+                   local_name);
+        if (local_name)
+            free(local_name);
+        /* Visibility mode of the Bluetooth device */
+        bt_adapter_visibility_mode_e mode;
+        /*
+           Duration until the visibility mode is changed
+           so that other devices cannot find your device
+        */
+        int duration = 1;
+        bt_adapter_get_visibility(&amp;mode, &amp;duration);
+        switch (mode) {
+        case BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE:
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "[adapter_state_changed_cb] Visibility: NON_DISCOVERABLE");
+            break;
+        case BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE:
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "[adapter_state_changed_cb] Visibility: GENERAL_DISCOVERABLE");
+            break;
+        case BT_ADAPTER_VISIBILITY_MODE_LIMITED_DISCOVERABLE:
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "[adapter_state_changed_cb] Visibility: LIMITED_DISCOVERABLE");
+            break;
+        }
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "[adapter_state_changed_cb] Bluetooth is disabled!");
+        /*
+           When you try to get device information
+           by invoking bt_adapter_get_name(), bt_adapter_get_address(),
+           or bt_adapter_get_visibility(), BT_ERROR_NOT_ENABLED occurs
+        */
+    }
 }
 ret = bt_adapter_set_state_changed_cb(adapter_state_changed_cb, NULL);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_set_state_changed_cb()] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_state_changed_cb()] failed.");
 </pre></li>
 </ol>
 
@@ -323,61 +323,61 @@ if (ret != BT_ERROR_NONE)
 #include &lt;glib.h&gt; /* For GList */
 void
 adapter_device_discovery_state_changed_cb(int result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_device_discovery_state_e
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;discovery_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_device_discovery_info_s
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*discovery_info,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                                          bt_adapter_device_discovery_state_e
+                                          discovery_state,
+                                          bt_adapter_device_discovery_info_s
+                                          *discovery_info,
+                                          void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[adapter_device_discovery_state_changed_cb] failed!
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result(%d).&quot;, result);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;GList** searched_device_list = (GList**)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;switch (discovery_state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_DEVICE_DISCOVERY_STARTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;BT_ADAPTER_DEVICE_DISCOVERY_STARTED&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_DEVICE_DISCOVERY_FINISHED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;BT_ADAPTER_DEVICE_DISCOVERY_FINISHED&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_DEVICE_DISCOVERY_FOUND:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;BT_ADAPTER_DEVICE_DISCOVERY_FOUND&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (discovery_info != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Device Address: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;discovery_info-&gt;remote_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Device Name is: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;discovery_info-&gt;remote_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_device_discovery_info_s * new_device_info =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;malloc(sizeof(bt_adapter_device_discovery_info_s));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (new_device_info != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memcpy(new_device_info, discovery_info,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(bt_adapter_device_discovery_info_s));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_device_info-&gt;remote_address =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strdup(discovery_info-&gt;remote_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_device_info-&gt;remote_name =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strdup(discovery_info-&gt;remote_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*searched_device_list = g_list_append(*searched_device_list,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(gpointer)new_device_info);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (result != BT_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "[adapter_device_discovery_state_changed_cb] failed!
+                    result(%d).", result);
+
+        return;
+    }
+    GList** searched_device_list = (GList**)user_data;
+    switch (discovery_state) {
+    case BT_ADAPTER_DEVICE_DISCOVERY_STARTED:
+        dlog_print(DLOG_INFO, LOG_TAG, "BT_ADAPTER_DEVICE_DISCOVERY_STARTED");
+        break;
+    case BT_ADAPTER_DEVICE_DISCOVERY_FINISHED:
+        dlog_print(DLOG_INFO, LOG_TAG, "BT_ADAPTER_DEVICE_DISCOVERY_FINISHED");
+        break;
+    case BT_ADAPTER_DEVICE_DISCOVERY_FOUND:
+        dlog_print(DLOG_INFO, LOG_TAG, "BT_ADAPTER_DEVICE_DISCOVERY_FOUND");
+        if (discovery_info != NULL) {
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "Device Address: %s",
+                       discovery_info-&gt;remote_address);
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "Device Name is: %s",
+                       discovery_info-&gt;remote_name);
+            bt_adapter_device_discovery_info_s * new_device_info =
+                malloc(sizeof(bt_adapter_device_discovery_info_s));
+            if (new_device_info != NULL) {
+                memcpy(new_device_info, discovery_info,
+                       sizeof(bt_adapter_device_discovery_info_s));
+                new_device_info-&gt;remote_address =
+                    strdup(discovery_info-&gt;remote_address);
+                new_device_info-&gt;remote_name =
+                    strdup(discovery_info-&gt;remote_name);
+                *searched_device_list = g_list_append(*searched_device_list,
+                                                      (gpointer)new_device_info);
+            }
+        }
+        break;
+    }
 }
 
 GList *devices_list = NULL;
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_set_device_discovery_state_changed_cb(adapter_device_discovery_state_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void*)&amp;devices_list);
+    bt_adapter_set_device_discovery_state_changed_cb(adapter_device_discovery_state_changed_cb,
+                                                     (void*)&amp;devices_list);
 
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_adapter_set_device_discovery_state_changed_cb] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "[bt_adapter_set_device_discovery_state_changed_cb] failed.");
 </pre>
 </li>
 <li>Start the discovery process:
@@ -389,7 +389,7 @@ ret = bt_adapter_start_device_discovery();
 int bt_adapter_le_start_device_discovery(void);
 
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_start_device_discovery] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_start_device_discovery] failed.");
 </pre>
 <p>You can discover a nearby remote Bluetooth device, if the remote device Bluetooth is enabled and in a discovery mode.</p>
 
@@ -401,13 +401,13 @@ if (ret != BT_ERROR_NONE)
 <pre class="prettyprint">
 ret = bt_device_create_bond(bt_server_address);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_device_create_bond] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_create_bond] failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_device_create_bond] succeeded.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device_bond_created_cb callback will be called.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "[bt_device_create_bond] succeeded.
+                device_bond_created_cb callback will be called.");
 }
 </pre>
 
@@ -417,30 +417,30 @@ if (ret != BT_ERROR_NONE) {
 void
 device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_device_bond_created_cb] failed. result(%d).&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (device_info != NULL &amp;&amp; !strcmp(device_info-&gt;remote_address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remote_server_address)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Callback: A bond with chat_server is created.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Callback: The number of service - %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device_info-&gt;service_count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: is_bonded - %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device_info-&gt;is_bonded);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: is_connected - %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device_info-&gt;is_connected);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Callback: A bond with another device is created.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (result != BT_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "[bt_device_bond_created_cb] failed. result(%d).",
+                   result);
+
+        return;
+    }
+
+    if (device_info != NULL &amp;&amp; !strcmp(device_info-&gt;remote_address,
+                                       remote_server_address)) {
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "Callback: A bond with chat_server is created.");
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "Callback: The number of service - %d.",
+                   device_info-&gt;service_count);
+        int i = 0;
+        dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_bonded - %d.",
+                   device_info-&gt;is_bonded);
+        dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_connected - %d.",
+                   device_info-&gt;is_connected);
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "Callback: A bond with another device is created.");
+    }
 }
 
 /*
@@ -452,9 +452,9 @@ device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_dat
 
 ret = bt_device_set_bond_created_cb(device_bond_created_cb, bt_server_address);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_device_set_bond_created_cb] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_set_bond_created_cb] failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 
@@ -468,56 +468,56 @@ if (ret != BT_ERROR_NONE) {
 <pre class="prettyprint">
 /* Server address for connecting */
 char *bt_server_address = NULL;
-const char *remote_server_name = &quot;server device&quot;;
+const char *remote_server_name = "server device";
 
 bool
 adapter_bonded_device_cb(bt_device_info_s *device_info, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (device_info == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(device_info-&gt;remote_name, (char*)user_data)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The server device is found in bonded device list. address(%s)&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device_info-&gt;remote_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_server_address = strdup(device_info-&gt;remote_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* If you want to stop iterating, you can return &quot;false&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get information about bonded device */
-&nbsp;&nbsp;&nbsp;&nbsp;int count_of_bonded_device = 1;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Get information about the bonded device(%d)&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count_of_bonded_device);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote address = %s.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device_info-&gt;remote_address);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote name = %s.&quot;, device_info-&gt;remote_name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;service count = %d.&quot;, device_info-&gt;service_count);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bonded?? %d.&quot;, device_info-&gt;is_bonded);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;connected?? %d.&quot;, device_info-&gt;is_connected);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;authorized?? %d.&quot;, device_info-&gt;is_authorized);
-
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;major_device_class %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device_info-&gt;bt_class.major_device_class);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;minor_device_class %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device_info-&gt;bt_class.minor_device_class);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;major_service_class_mask %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device_info-&gt;bt_class.major_service_class_mask);
-&nbsp;&nbsp;&nbsp;&nbsp;count_of_bonded_device++;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Keep iterating */
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    if (device_info == NULL)
+        return true;
+    if (!strcmp(device_info-&gt;remote_name, (char*)user_data)) {
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "The server device is found in bonded device list. address(%s)",
+                   device_info-&gt;remote_address);
+        bt_server_address = strdup(device_info-&gt;remote_address);
+        /* If you want to stop iterating, you can return "false" */
+    }
+    /* Get information about bonded device */
+    int count_of_bonded_device = 1;
+    dlog_print(DLOG_INFO, LOG_TAG, "Get information about the bonded device(%d)",
+               count_of_bonded_device);
+    dlog_print(DLOG_INFO, LOG_TAG, "remote address = %s.",
+               device_info-&gt;remote_address);
+    dlog_print(DLOG_INFO, LOG_TAG, "remote name = %s.", device_info-&gt;remote_name);
+    dlog_print(DLOG_INFO, LOG_TAG, "service count = %d.", device_info-&gt;service_count);
+    dlog_print(DLOG_INFO, LOG_TAG, "bonded?? %d.", device_info-&gt;is_bonded);
+    dlog_print(DLOG_INFO, LOG_TAG, "connected?? %d.", device_info-&gt;is_connected);
+    dlog_print(DLOG_INFO, LOG_TAG, "authorized?? %d.", device_info-&gt;is_authorized);
+
+    dlog_print(DLOG_INFO, LOG_TAG, "major_device_class %d.",
+               device_info-&gt;bt_class.major_device_class);
+    dlog_print(DLOG_INFO, LOG_TAG, "minor_device_class %d.",
+               device_info-&gt;bt_class.minor_device_class);
+    dlog_print(DLOG_INFO, LOG_TAG, "major_service_class_mask %d.",
+               device_info-&gt;bt_class.major_service_class_mask);
+    count_of_bonded_device++;
+
+    /* Keep iterating */
+
+    return true;
 }
 
 ret = bt_adapter_foreach_bonded_device(adapter_bonded_device_cb, remote_server_name);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_foreach_bonded_device] failed!&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_foreach_bonded_device] failed!");
 
 if (bt_server_address != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;free(bt_server_address);
+    free(bt_server_address);
 </pre>
 <p>To remove a device from the bonded list, call the <code>bt_device_destroy_bond()</code> function.</p>
 </li></ul>
- 
-  
+
+
     <div class="note">
         <strong>Note</strong>
         A Bluetooth device must be in a discovery mode (visible) for other devices to find it and connect to it. If you want other devices to find your device, you must set the device to be visible.
@@ -538,12 +538,12 @@ bt_adapter_visibility_mode_e mode;
 int duration = 1;
 bt_adapter_get_visibility(&amp;mode, &amp;duration);
 if (mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The device is not discoverable.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The device is not discoverable.");
 else if (mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The device is discoverable. No time limit.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The device is discoverable. No time limit.");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The device is discoverable for a set period of time.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "The device is discoverable for a set period of time.");
 </pre>
 </li>
 <li>
@@ -558,29 +558,29 @@ else
 int
 bt_set_visibility_operation(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;service_create failed!\n&quot;);
+    int ret = 0;
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "service_create failed!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, &quot;APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+        return 0;
+    }
+    app_control_set_operation(service, "APP_CONTROL_OPERATION_SETTING_BT_VISIBILITY");
+    ret = app_control_send_launch_request(service, NULL, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to Bluetooth On/Off app!\n&quot;);
+    app_control_destroy(service);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to Bluetooth On/Off app!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to relaunch Bluetooth On/Off app!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to relaunch Bluetooth On/Off app!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
@@ -589,51 +589,51 @@ bt_set_visibility_operation(void)
 <pre class="prettyprint">
 void
 adapter_visibility_mode_changed_cb(int result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_visibility_mode_e visibility_mode,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                                   bt_adapter_visibility_mode_e visibility_mode,
+                                   void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[visibility_mode_changed_cb] None discoverable mode!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[visibility_mode_changed_cb] General discoverable mode!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[visibility_mode_changed_cb] Limited discoverable mode!&quot;);
+    if (result != BT_ERROR_NONE) {
+        /* Error handling */
+
+        return;
+    }
+    if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE)
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "[visibility_mode_changed_cb] None discoverable mode!");
+    else if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE)
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "[visibility_mode_changed_cb] General discoverable mode!");
+    else
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "[visibility_mode_changed_cb] Limited discoverable mode!");
 }
 
 ret = bt_adapter_set_visibility_mode_changed_cb(adapter_visibility_mode_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                NULL);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_adapter_set_visibility_mode_changed_cb] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "[bt_adapter_set_visibility_mode_changed_cb] failed.");
 </pre>
 </li>
 </ol>
 
  <h2 id="connect" name="connect">Connecting to Other Devices Using SPP</h2>
-                       
-<p>To connect to other devices:</p>                    
+
+<p>To connect to other devices:</p>
 <ul>
 <li>Connect as a server:
 <ol>
 <li>
 <p>To establish a connection with your device acting as a server, create an RFCOMM Bluetooth socket using the <code>bt_socket_create_rfcomm()</code> function.</p>
-<p>The first parameter is the UUID of the service, which uniquely identifies which service to provide. The UUID must match with the UUID in the client&#39;s incoming connection for the connection to be accepted. The second parameter is the RFCOMM socket file descriptor as an output parameter.</p>
+<p>The first parameter is the UUID of the service, which uniquely identifies which service to provide. The UUID must match with the UUID in the client's incoming connection for the connection to be accepted. The second parameter is the RFCOMM socket file descriptor as an output parameter.</p>
 <pre class="prettyprint">
-const char* my_uuid=&quot;00001101-0000-1000-8000-00805F9B34FB&quot;;
+const char* my_uuid="00001101-0000-1000-8000-00805F9B34FB";
 int server_socket_fd = -1;
 bt_error_e ret;
 
 ret = bt_socket_create_rfcomm(my_uuid, &amp;server_socket_fd);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_socket_create_rfcomm() failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "bt_socket_create_rfcomm() failed.");
 </pre>
 </li>
 <li>
@@ -641,14 +641,14 @@ if (ret != BT_ERROR_NONE)
 <pre class="prettyprint">
 ret = bt_socket_listen_and_accept_rfcomm(server_socket_fd, 5);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_listen_and_accept_rfcomm] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_listen_and_accept_rfcomm] failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_socket_listen_and_accept_rfcomm] Succeeded.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_socket_connection_state_changed_cb will be called.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Waiting for incoming connections */
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "[bt_socket_listen_and_accept_rfcomm] Succeeded.
+                bt_socket_connection_state_changed_cb will be called.");
+    /* Waiting for incoming connections */
 }
 </pre>
 </li>
@@ -658,56 +658,56 @@ if (ret != BT_ERROR_NONE) {
 <pre class="prettyprint">
 void
 socket_connection_state_changed(int result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_socket_connection_state_e connection_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_socket_connection_s *connection,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                bt_socket_connection_state_e connection_state,
+                                bt_socket_connection_s *connection,
+                                void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[socket_connection_state_changed_cb] failed.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result =%d.&quot;, result);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (connection_state == BT_SOCKET_CONNECTED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Connected.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (connection != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Socket of connection - %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection-&gt;socket_fd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Role of connection - %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection-&gt;local_role);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Callback: Address of connection - %s.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection-&gt;remote_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* socket_fd is used for sending data and disconnecting a device */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server_socket_fd = connection-&gt;socket_fd;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: No connection data&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: Disconnected.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (connection != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Callback: Socket of disconnection - %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection-&gt;socket_fd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Callback: Address of connection - %s.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection-&gt;remote_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Callback: No connection data&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (result != BT_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "[socket_connection_state_changed_cb] failed.
+                    result =%d.", result);
+
+        return;
+    }
+
+    if (connection_state == BT_SOCKET_CONNECTED) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Callback: Connected.");
+        if (connection != NULL) {
+            dlog_print(DLOG_INFO, LOG_TAG, "Callback: Socket of connection - %d.",
+                       connection-&gt;socket_fd);
+            dlog_print(DLOG_INFO, LOG_TAG, "Callback: Role of connection - %d.",
+                       connection-&gt;local_role);
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "Callback: Address of connection - %s.",
+                       connection-&gt;remote_address);
+            /* socket_fd is used for sending data and disconnecting a device */
+            server_socket_fd = connection-&gt;socket_fd;
+        } else {
+            dlog_print(DLOG_INFO, LOG_TAG, "Callback: No connection data");
+        }
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Callback: Disconnected.");
+        if (connection != NULL) {
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "Callback: Socket of disconnection - %d.",
+                       connection-&gt;socket_fd);
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "Callback: Address of connection - %s.",
+                       connection-&gt;remote_address);
+        } else {
+            dlog_print(DLOG_INFO, LOG_TAG, "Callback: No connection data");
+        }
+    }
 }
 
 bt_error_e ret;
 ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                NULL);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_socket_set_connection_state_changed_cb] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "[bt_socket_set_connection_state_changed_cb] failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 
@@ -722,15 +722,15 @@ if (ret != BT_ERROR_NONE) {
 <p>The callback is invoked whenever the connection state changes (for example, when you connect to the server device). </p>
 <pre class="prettyprint">
 ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                NULL);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_socket_set_connection_state_changed_cb] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "[bt_socket_set_connection_state_changed_cb] failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
-  
+
     <div class="note">
         <strong>Note</strong>
         When you connect to a Bluetooth server device, retrieve the server socket file descriptor (<code>bt_socket_connection_s-&gt;socket_fd</code>) in the callback and store it for later use. You need the file descriptor when sending data or disconnecting from the service.
@@ -740,17 +740,17 @@ if (ret != BT_ERROR_NONE) {
 <p>Request a connection to the Bluetooth server using the <code>bt_socket_connect_rfcomm()</code> function.</p>
 <p>The first parameter is the address of the remote device. You can get it from the <code>bt_device_info_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structbt__device__info__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structbt__device__info__s.html">wearable</a> applications), which is returned in a callback after you bond with the server device or query a previously bonded device. The second parameter is the UUID for the specific RFCOMM-based service on a remote device. The UUID must match the UUID used by the server device in the <code>bt_socket_create_rfcomm()</code> function.</p>
 <pre class="prettyprint">
-const char *service_uuid=&quot;00001101-0000-1000-8000-00805F9B34FB&quot;;
+const char *service_uuid="00001101-0000-1000-8000-00805F9B34FB";
 
 ret = bt_socket_connect_rfcomm(bt_server_address, service_uuid);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_connect_rfcomm] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_connect_rfcomm] failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_socket_connect_rfcomm] Succeeded.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_socket_connection_state_changed_cb will be called.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "[bt_socket_connect_rfcomm] Succeeded.
+                bt_socket_connection_state_changed_cb will be called.");
 }
 </pre>
 </li>
@@ -764,12 +764,12 @@ if (ret != BT_ERROR_NONE) {
 <ol><li><p>To write data, use the <code>bt_socket_send_data()</code> function. The first parameter is the socket file descriptor from the socket connection state change callback, the second parameter is the data to be sent, and the third parameter is the data length.</p>
 <pre class="prettyprint">
 bt_error_e ret;
-char data[] = &quot;Sending test&quot;;
+char data[] = "Sending test";
 int client_socket_fd = 0;
 
 ret = bt_socket_send_data(client_socket_fd, data, sizeof(data));
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_send_data] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_send_data] failed.");
 </pre>
 </li>
 <li><p>To read data from other devices, you must set up the data received callback, which is invoked when your device receives data from other Bluetooth devices.</p>
@@ -781,19 +781,19 @@ bt_error_e ret;
 void
 bt_socket_data_received_cb(bt_socket_received_data_s* data, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (data == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;No received data!&quot;);
+    if (data == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "No received data!");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Socket fd: %d&quot;, data-&gt;socket_fd);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Data: %s&quot;, data-&gt;data);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Size: %d&quot;, data-&gt;data_size);
+        return;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "Socket fd: %d", data-&gt;socket_fd);
+    dlog_print(DLOG_INFO, LOG_TAG, "Data: %s", data-&gt;data);
+    dlog_print(DLOG_INFO, LOG_TAG, "Size: %d", data-&gt;data_size);
 }
 
 ret = bt_socket_set_data_received_cb(bt_socket_data_received_cb, NULL);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_data_received_cb] regist failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_data_received_cb] regist failed.");
 </pre>
 
 </li></ol>
@@ -802,34 +802,34 @@ if (ret != BT_ERROR_NONE)
 
 <p>To disconnect from a device:</p>
 
-<ul><li>If your device is a Bluetooth server, disconnect from the client with the <code>bt_socket_destroy_rfcomm()</code> function: 
+<ul><li>If your device is a Bluetooth server, disconnect from the client with the <code>bt_socket_destroy_rfcomm()</code> function:
 <pre class="prettyprint">
 bt_error_e ret;
 
-/* You can get &quot;server_socket_fd&quot; from output of bt_socket_create_rfcomm() */
+/* You can get "server_socket_fd" from output of bt_socket_create_rfcomm() */
 ret = bt_socket_destroy_rfcomm(server_socket_fd);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_socket_destroy_rfcomm] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_destroy_rfcomm] failed.");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_socket_destroy_rfcomm] succeeded. socket_fd = %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server_socket_fd);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "[bt_socket_destroy_rfcomm] succeeded. socket_fd = %d",
+               server_socket_fd);
 </pre></li>
 
-<li>If your device is a Bluetooth client, disconnect from the server with the <code>bt_socket_disconnect_rfcomm()</code> function: 
+<li>If your device is a Bluetooth client, disconnect from the server with the <code>bt_socket_disconnect_rfcomm()</code> function:
 <pre class="prettyprint">
 bt_error_e ret;
 
-/* You can get &quot;server_socket_fd&quot; from bt_socket_connection_state_changed_cb() */
+/* You can get "server_socket_fd" from bt_socket_connection_state_changed_cb() */
 ret = bt_socket_disconnect_rfcomm(server_socket_fd);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_socket_destroy_rfcomm] failed. server_socket_fd = %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server_socket_fd);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "[bt_socket_destroy_rfcomm] failed. server_socket_fd = %d.",
+               server_socket_fd);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_socket_destroy_rfcomm] succeeded. server_socket_fd = %d.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server_socket_fd);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "[bt_socket_destroy_rfcomm] succeeded. server_socket_fd = %d.",
+               server_socket_fd);
 </pre></li></ul>
 
 <h2 id="pre_gatt" name="pre_gatt">Handling GATT Operation Preconditions</h2>
@@ -841,14 +841,14 @@ int ret = BT_ERROR_NONE;
 /* For information on the callback, see <a href="#le_scan">Managing Bluetooth LE Scans</a> */
 ret = bt_adapter_le_start_scan(__bt_adapter_le_scan_result_cb, NULL);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_le_start_scan] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] failed.");
 /* Wait while the system searches for the LE target you want to connect to */
 /* If you find the LE target you want, stop the scan */
 ret = bt_adapter_le_stop_scan();
 
 ret = bt_gatt_connect(ADDRESS_BLE_DEVICE_YOU_WANT, false);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to connect LE device.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to connect LE device.");
 </pre>
 
 <h2 id="gatt" name="gatt">Managing the GATT Client Operations</h2>
@@ -860,16 +860,16 @@ int ret = 0;
 /* Register for GATT connection callback */
 void
 __bt_gatt_connection_state_changed_cb(int result, bool connected,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *remote_address, void *user_data)
+                                      const char *remote_address, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (connected)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;LE connected&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;LE disconnected&quot;);
+    if (connected)
+        dlog_print(DLOG_INFO, LOG_TAG, "LE connected");
+    else
+        dlog_print(DLOG_INFO, LOG_TAG, "LE disconnected");
 }
 
 ret = bt_gatt_set_connection_state_changed_cb(__bt_gatt_connection_state_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                              NULL);
 </pre></li>
 
 <li>Create a client to connect to a remote service device:
@@ -878,7 +878,7 @@ int ret = 0;
 
 ret = bt_gatt_client_create(remote_addr, &amp;client);
 if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Success");
 
 return;
 </pre>
@@ -891,7 +891,7 @@ char *addr = NULL;
 
 ret = bt_gatt_client_get_remote_address(client, &amp;addr);
 if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Success");
 
 return;
 </pre>
@@ -903,9 +903,9 @@ return;
 int ret = 0;
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_client_foreach_services(client, __bt_gatt_client_foreach_svc_cb, NULL);
+    bt_gatt_client_foreach_services(client, __bt_gatt_client_foreach_svc_cb, NULL);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "failed");
 
 return;
 </pre>
@@ -914,24 +914,24 @@ return;
 <pre class="prettyprint">
 bool
 __bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *data)
+                                void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *uuid = NULL;
+    int ret;
+    char *uuid = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_get_uuid(svc_handle, &amp;uuid);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[%d / %d] uuid: (%s)&quot;, index, total, uuid);
+    bt_gatt_get_uuid(svc_handle, &amp;uuid);
+    dlog_print(DLOG_INFO, LOG_TAG, "[%d / %d] uuid: (%s)", index, total, uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuid);
+    g_free(uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_gatt_service_foreach_characteristics(svc_handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__bt_gatt_client_foreach_chr_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_service_foreach_characteristics failed: %d&quot;, ret);
+    ret = bt_gatt_service_foreach_characteristics(svc_handle,
+                                                  __bt_gatt_client_foreach_chr_cb,
+                                                  NULL);
+    if (ret != BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "bt_gatt_service_foreach_characteristics failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -939,44 +939,44 @@ __bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle,
 <pre class="prettyprint">
 bool
 __bt_gatt_client_foreach_chr_cb(int total, int index, bt_gatt_h chr_handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *data)
+                                void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *uuid = NULL;
+    int ret;
+    char *uuid = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_get_uuid(chr_handle, &amp;uuid);
+    bt_gatt_get_uuid(chr_handle, &amp;uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;\t[%d / %d] uuid: (%s)&quot;, index, total, uuid);
+    dlog_print(DLOG_INFO, LOG_TAG, "\t[%d / %d] uuid: (%s)", index, total, uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuid);
+    g_free(uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_characteristic_foreach_descriptors(chr_handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__bt_gatt_client_foreach_desc_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_characteristic_foreach_descriptors failed: %d&quot;, ret);
+    ret =
+        bt_gatt_characteristic_foreach_descriptors(chr_handle,
+                                                   __bt_gatt_client_foreach_desc_cb,
+                                                   NULL);
+    if (ret != BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "bt_gatt_characteristic_foreach_descriptors failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
-<li>Use the <code>bt_gatt_client_foreach_desc_cb()</code> callback to get the descriptor data: 
+<li>Use the <code>bt_gatt_client_foreach_desc_cb()</code> callback to get the descriptor data:
 <pre class="prettyprint">
 bool
 __bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *data)
+                                 void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *uuid = NULL;
+    char *uuid = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_get_uuid(desc_handle, &amp;uuid);
+    bt_gatt_get_uuid(desc_handle, &amp;uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;\t\t[%d / %d] uuid: (%s)&quot;, index, total, uuid);
+    dlog_print(DLOG_INFO, LOG_TAG, "\t\t[%d / %d] uuid: (%s)", index, total, uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuid);
+    g_free(uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -984,112 +984,112 @@ __bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handle,
 </li>
 <li>Read the value of the given attribute handle:
 <pre class="prettyprint">
-char *svc_uuid = &quot;0000180f-0000-1000-8000-00805f9b34fb&quot;; /* Battery service */
-char *chr_uuid = &quot;00002a19-0000-1000-8000-00805f9b34fb&quot;; /* Battery level */
+char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
+char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb"; /* Battery level */
 /* Client characteristic configuration */
-char *desc_uuid = &quot;00002902-0000-1000-8000-00805f9b34fb&quot;;
+char *desc_uuid = "00002902-0000-1000-8000-00805f9b34fb";
 bt_gatt_h svc = NULL;
 bt_gatt_h chr = NULL;
 bt_gatt_h desc = NULL;
 
 ret = bt_gatt_client_get_service(client, svc_uuid, &amp;svc);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_get_service failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;chr);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_service_get_characteristic failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_service_get_characteristic failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &amp;desc);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_characteristic_get_descriptor failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_characteristic_get_descriptor failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret = bt_gatt_client_read_value(desc, __bt_gatt_client_read_complete_cb, NULL);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_read_value failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_read_value failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
-</pre> 
+</pre>
 <p>After the reading operation is complete, use the <code>bt_gatt_client_read_complete_cb()</code> callback to handle values:</p>
 <pre class="prettyprint">
 void
 __bt_gatt_client_read_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *uuid = NULL;
+    char *uuid = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_get_uuid(gatt_handle, &amp;uuid);
+    bt_gatt_get_uuid(gatt_handle, &amp;uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Read %s for uuid: (%s)&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result == BT_ERROR_NONE ? &quot;Success&quot; : &quot;Fail&quot;, uuid);
+    dlog_print(DLOG_INFO, LOG_TAG, "Read %s for uuid: (%s)",
+               result == BT_ERROR_NONE ? "Success" : "Fail", uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuid);
+    g_free(uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (result != BT_ERROR_NONE)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
 <li>Set a value for the given attribute handle:
 
 <pre class="prettyprint">
-char *svc_uuid = &quot;0000180f-0000-1000-8000-00805f9b34fb&quot;; /* Battery service */
-char *chr_uuid = &quot;00002a19-0000-1000-8000-00805f9b34fb&quot;; /* Battery level */
+char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
+char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb"; /* Battery level */
 /* Client characteristic configuration */
-char *desc_uuid = &quot;00002902-0000-1000-8000-00805f9b34fb&quot;;
+char *desc_uuid = "00002902-0000-1000-8000-00805f9b34fb";
 bt_gatt_h svc = NULL;
 bt_gatt_h chr = NULL;
 bt_gatt_h desc = NULL;
 
 ret = bt_gatt_client_get_service(client, svc_uuid, &amp;svc);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_get_service failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;chr);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_service_get_characteristic failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_service_get_characteristic failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &amp;desc);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_characteristic_get_descriptor failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_characteristic_get_descriptor failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
-ret = __bt_gatt_client_set_value(&quot;int32&quot;, &quot;1234&quot;, desc);
+ret = __bt_gatt_client_set_value("int32", "1234", desc);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_set_value failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_set_value failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret = bt_gatt_client_write_value(desc, __bt_gatt_client_write_complete_cb, NULL);
 
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_write_value failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_write_value failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 <p>The <code>__bt_gatt_client_set_value()</code> function is defined below:</p>
@@ -1097,48 +1097,48 @@ if (ret != BT_ERROR_NONE) {
 int
 __bt_gatt_client_set_value(char *type, char *value, bt_gatt_h h)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int s_val;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int u_val;
-&nbsp;&nbsp;&nbsp;&nbsp;char *buf;
-&nbsp;&nbsp;&nbsp;&nbsp;int len;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (strcasecmp(type, &quot;int8&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_val = atoi(value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buf = (char *)&amp;s_val;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = 1;
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (strcasecmp(type, &quot;int16&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_val = atoi(value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buf = (char *)&amp;s_val;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = 2;
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (strcasecmp(type, &quot;int32&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_val = atoi(value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buf = (char *)&amp;s_val;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = 4;
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (strcasecmp(type, &quot;uint8&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;u_val = strtoul(value, NULL, 10);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buf = (char *)&amp;u_val;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = 1;
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (strcasecmp(type, &quot;uint16&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;u_val = strtoul(value, NULL, 10);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buf = (char *)&amp;u_val;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = 2;
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (strcasecmp(type, &quot;uint32&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;u_val = strtoul(value, NULL, 10);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buf = (char *)&amp;u_val;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = 4;
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (strcasecmp(type, &quot;str&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buf = value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = strlen(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return BT_ERROR_INVALID_PARAMETER;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_gatt_set_value(h, buf, len);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TC_PRT(&quot;bt_gatt_set_value failed: %d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    int ret;
+    int s_val;
+    unsigned int u_val;
+    char *buf;
+    int len;
+
+    if (strcasecmp(type, "int8") == 0) {
+        s_val = atoi(value);
+        buf = (char *)&amp;s_val;
+        len = 1;
+    } else if (strcasecmp(type, "int16") == 0) {
+        s_val = atoi(value);
+        buf = (char *)&amp;s_val;
+        len = 2;
+    } else if (strcasecmp(type, "int32") == 0) {
+        s_val = atoi(value);
+        buf = (char *)&amp;s_val;
+        len = 4;
+    } else if (strcasecmp(type, "uint8") == 0) {
+        u_val = strtoul(value, NULL, 10);
+        buf = (char *)&amp;u_val;
+        len = 1;
+    } else if (strcasecmp(type, "uint16") == 0) {
+        u_val = strtoul(value, NULL, 10);
+        buf = (char *)&amp;u_val;
+        len = 2;
+    } else if (strcasecmp(type, "uint32") == 0) {
+        u_val = strtoul(value, NULL, 10);
+        buf = (char *)&amp;u_val;
+        len = 4;
+    } else if (strcasecmp(type, "str") == 0) {
+        buf = value;
+        len = strlen(buf);
+    } else {
+        return BT_ERROR_INVALID_PARAMETER;
+    }
+
+    ret = bt_gatt_set_value(h, buf, len);
+    if (ret != BT_ERROR_NONE)
+        TC_PRT("bt_gatt_set_value failed: %d", ret);
+
+    return ret;
 }
 </pre>
 <p>After the writing operation is complete, use the <code>bt_gatt_client_write_complete_cb()</code> callback to finish the task:</p>
@@ -1146,50 +1146,50 @@ __bt_gatt_client_set_value(char *type, char *value, bt_gatt_h h)
 void
 __bt_gatt_client_write_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *uuid = NULL;
+    char *uuid = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_get_uuid(gatt_handle, &amp;uuid);
+    bt_gatt_get_uuid(gatt_handle, &amp;uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Write %s for uuid: (%s)&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result == BT_ERROR_NONE ? &quot;Success&quot; : &quot;Fail&quot;, uuid);
+    dlog_print(DLOG_INFO, LOG_TAG, "Write %s for uuid: (%s)",
+               result == BT_ERROR_NONE ? "Success" : "Fail", uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuid);
+    g_free(uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
 <li>Register a callback function to be invoked when the characteristic value changes on the remote device:
 
 <pre class="prettyprint">
-char *svc_uuid = &quot;0000180f-0000-1000-8000-00805f9b34fb&quot;;
-char *chr_uuid = &quot;00002a19-0000-1000-8000-00805f9b34fb&quot;;
+char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb";
+char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb";
 bt_gatt_h svc = NULL;
 bt_gatt_h chr = NULL;
 
 ret = bt_gatt_client_get_service(client, svc_uuid, &amp;svc);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_get_service failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;chr);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_service_get_characteristic failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_client_set_characteristic_value_changed_cb(chr,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__bt_gatt_client_value_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+    bt_gatt_client_set_characteristic_value_changed_cb(chr,
+                                                       __bt_gatt_client_value_changed_cb,
+                                                       NULL);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_client_set_characteristic_value_changed_cb failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_client_set_characteristic_value_changed_cb failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 <p>After registering the callback operation, use the <code>__bt_gatt_client_value_changed_cb()</code> callback to display the changed value:</p>
@@ -1197,48 +1197,48 @@ if (ret != BT_ERROR_NONE) {
 void
 __bt_gatt_client_value_changed_cb(bt_gatt_h chr, char *value, int len, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *uuid = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
+    char *uuid = NULL;
+    int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_get_uuid(chr, &amp;uuid);
+    bt_gatt_get_uuid(chr, &amp;uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Value changed for [%s]&quot;, uuid);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;len [%d]&quot;, len);
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;value %u&quot;, value[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuid);
+    dlog_print(DLOG_INFO, LOG_TAG, "Value changed for [%s]", uuid);
+    dlog_print(DLOG_INFO, LOG_TAG, "len [%d]", len);
+    for (i = 0; i &lt; len; i++)
+        dlog_print(DLOG_INFO, LOG_TAG, "value %u", value[i]);
+    g_free(uuid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 <p>When you no longer need the value change notifications, deregister the callback.</p>
 
 <pre class="prettyprint">
-char *svc_uuid = &quot;0000180f-0000-1000-8000-00805f9b34fb&quot;; /* Battery service */
-char *chr_uuid = &quot;00002a19-0000-1000-8000-00805f9b34fb&quot;; /* Battery level */
+char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
+char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb"; /* Battery level */
 bt_gatt_h svc = NULL;
 bt_gatt_h chr = NULL;
 
 ret = bt_gatt_client_get_service(client, svc_uuid, &amp;svc);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_get_service failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;chr);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_service_get_characteristic failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 ret = bt_gatt_client_unset_characteristic_value_changed_cb(chr);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_client_unset_characteristic_value_changed_cb failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_client_unset_characteristic_value_changed_cb failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
@@ -1253,7 +1253,7 @@ ret = bt_gatt_unset_connection_state_changed_cb();
 /* Destroy the client */
 ret = bt_gatt_client_destroy(client);
 if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Success");
 client = NULL;
 
 return;
@@ -1276,7 +1276,7 @@ bt_gatt_type_e gatt_type;
 
 ret = bt_gatt_get_type(gatt_handle, &amp;gatt_type);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_get_type failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_type failed: %d", ret);
 </pre></li>
 
 <li>Get the UUID of a service, characteristic, or descriptor handle:
@@ -1289,7 +1289,7 @@ char *uuid = NULL;
 
 ret = bt_gatt_get_uuid(gatt_handle, &amp;uuid);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_get_uuid failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_uuid failed: %d", ret);
 </pre></li>
 
 <li>Get the value of a characteristic or descriptor handle:
@@ -1303,7 +1303,7 @@ char *value = NULL;
 
 ret = bt_gatt_get_value(gatt_handle, &amp;value, &amp;len);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_get_value failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_value failed: %d", ret);
 </pre></li>
 
 <li>Get the value of a characteristic or descriptor handle as an <code>integer</code> type:
@@ -1318,7 +1318,7 @@ int value;
 
 ret = bt_gatt_get_int_value(gatt_handle, type, offset, &amp;value);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_get_int_value failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_int_value failed: %d", ret);
 </pre></li>
 
 <li>Get the value of a characteristic or descriptor handle as a <code>float</code> type:
@@ -1333,63 +1333,63 @@ float value;
 
 ret = bt_gatt_get_float_value(gatt_handle, type, offset, &amp;value);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_get_float_value failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_get_float_value failed: %d", ret);
 </pre></li>
 
 <li>Get a service handle with a specific UUID:
 <pre class="prettyprint">
-char *svc_uuid = &quot;0000180f-0000-1000-8000-00805f9b34fb&quot;; /* Battery service */
+char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
 bt_gatt_h svc = NULL;
 
 ret = bt_gatt_client_get_service(client, svc_uuid, &amp;svc);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_get_service failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed: %d", ret);
 </pre></li>
 
 <li>Get a characteristic handle with a specific UUID:
 <pre class="prettyprint">
-char *svc_uuid = &quot;0000180f-0000-1000-8000-00805f9b34fb&quot;; /* Battery service */
-char *chr_uuid = &quot;00002a19-0000-1000-8000-00805f9b34fb&quot;; /* Battery level */
+char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
+char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb"; /* Battery level */
 bt_gatt_h svc = NULL;
 bt_gatt_h chr = NULL;
 
 ret = bt_gatt_client_get_service(client, svc_uuid, &amp;svc);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_get_service failed: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed: %d", ret);
+    break;
 }
 
 ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;chr);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_service_get_characteristic failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed: %d", ret);
 </pre></li>
 
 <li>Get a descriptor handle with a specific UUID:
 <pre class="prettyprint">
-char *svc_uuid = &quot;0000180f-0000-1000-8000-00805f9b34fb&quot;; /* Battery service */
-char *chr_uuid = &quot;00002a19-0000-1000-8000-00805f9b34fb&quot;; /* Battery level */
+char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
+char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb"; /* Battery level */
 /* Client characteristic configuration */
-char *desc_uuid = &quot;00002902-0000-1000-8000-00805f9b34fb&quot;;
+char *desc_uuid = "00002902-0000-1000-8000-00805f9b34fb";
 bt_gatt_h svc = NULL;
 bt_gatt_h chr = NULL;
 bt_gatt_h desc = NULL;
 
 ret = bt_gatt_client_get_service(client, svc_uuid, &amp;svc);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_client_get_service failed: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service failed: %d", ret);
+    break;
 }
 
 ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;chr);
 if (ret != BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_service_get_characteristic failed: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed: %d", ret);
+    break;
 }
 
 ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &amp;desc);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_characteristic_get_descriptor failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_characteristic_get_descriptor failed: %d", ret);
 </pre></li>
 
 <li>Get the properties using the characteristic handle:
@@ -1401,8 +1401,8 @@ int properties;
 
 ret = bt_gatt_characteristic_get_properties(chr, &amp;properties);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_characteristic_get_properties failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_characteristic_get_properties failed: %d", ret);
 </pre></li>
 
 <li>Get the service handle to which the specified characteristic belongs:
@@ -1413,7 +1413,7 @@ bt_gatt_h chr = NULL;
 
 ret = bt_gatt_characteristic_get_service(chr, &amp;svc);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_characteristic_get_service failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_service failed: %d", ret);
 </pre></li>
 
 <li>Get the characteristic handle to which the specified descriptor belongs:
@@ -1424,8 +1424,8 @@ bt_gatt_h dsc = NULL;
 
 ret = bt_gatt_descriptor_get_characteristic(dsc, &amp;chr);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_descriptor_get_characteristic failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_descriptor_get_characteristic failed: %d", ret);
 </pre></li>
 
 <li>Get the client handle to which the specified service belongs:
@@ -1436,7 +1436,7 @@ bt_gatt_client_h client = NULL;
 
 ret = bt_gatt_service_get_client(svc, &amp;client);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;bt_gatt_service_get_client failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_client failed: %d", ret);
 </pre></li>
 
 <li>Get the write type of the specified characteristic:
@@ -1447,11 +1447,11 @@ bt_gatt_write_type_e write_type;
 
 ret = bt_gatt_characteristic_get_write_type(chr, &amp;write_type);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_characteristic_get_write_type failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_characteristic_get_write_type failed: %d", ret);
 </pre></li>
 
-<li>Get an included service&#39;s handle with a specific UUID:
+<li>Get an included service's handle with a specific UUID:
 <pre class="prettyprint">
 bt_gatt_h svc = NULL;
 bt_gatt_h included_svc = NULL;
@@ -1461,8 +1461,8 @@ bt_gatt_write_type_e write_type = NULL;
 
 ret = bt_gatt_service_get_included_service(svc, uuid, &amp;included_svc);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bt_gatt_service_get_included_service failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "bt_gatt_service_get_included_service failed: %d", ret);
 </pre></li>
 
 </ul>
@@ -1486,7 +1486,7 @@ bt_gatt_h characteristic_handle = NULL;
 
 ret = bt_gatt_set_value(characteristic_handle, char_value, 1);
 if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Success");
 </pre></li>
 
 <li>Set or update the characteristic value (<code>integer</code> type value):
@@ -1502,7 +1502,7 @@ bt_gatt_h characteristic_handle = NULL;
 
 ret = bt_gatt_set_int_value(characteristic_handle, BT_DATA_TYPE_UINT16, char_value, 1);
 if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Success");
 </pre></li>
 
 <li>Set or update the characteristic value (<code>float</code> type value):
@@ -1517,7 +1517,7 @@ bt_gatt_h characteristic_handle = NULL;
 */
 ret = bt_gatt_set_float_value(characteristic_handle, BT_DATA_TYPE_FLOAT, 123, -2, 1);
 if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Success");
 </pre></li>
 
 <li>Set the characteristic write type:
@@ -1525,51 +1525,51 @@ if (ret == BT_ERROR_NONE)
 void
 __write_completed_cb(int result, bt_gatt_h request_handle, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Write request failed&quot;);
+    if (result != BT_ERROR_NONE)
+    dlog_print(DLOG_INFO, LOG_TAG, "Write request failed");
 }
 
 int
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_h svc = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_h battery_svc = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;bt_gatt_h control_point = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *svc_uuid = &quot;0000180f-0000-1000-8000-00805f9b34fb&quot;; /* Battery service */
-&nbsp;&nbsp;&nbsp;&nbsp;char *chr_uuid = &quot;00002a19-0000-1000-8000-00805f9b34fb&quot;; /* Battery level */
+    int ret = 0;
+    bt_gatt_h svc = NULL;
+    bt_gatt_h battery_svc = NULL;
+    bt_gatt_h control_point = NULL;
+    char *svc_uuid = "0000180f-0000-1000-8000-00805f9b34fb"; /* Battery service */
+    char *chr_uuid = "00002a19-0000-1000-8000-00805f9b34fb"; /* Battery level */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_gatt_client_get_service(client, svc_uuid, &amp;battery_svc);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    ret = bt_gatt_client_get_service(client, svc_uuid, &amp;battery_svc);
+    if (ret == BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Success");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;control_point);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &amp;control_point);
+    if (ret == BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Success");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_gatt_characteristic_set_write_type(control_point,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_GATT_WRITE_TYPE_WRITE);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    ret = bt_gatt_characteristic_set_write_type(control_point,
+                                                BT_GATT_WRITE_TYPE_WRITE);
+    if (ret == BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Success");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_gatt_set_value(control_point, value, len);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    ret = bt_gatt_set_value(control_point, value, len);
+    if (ret == BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Success");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_gatt_client_write_value(control_point, __write_completed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success&quot;);
+    ret = bt_gatt_client_write_value(control_point, __write_completed_cb, NULL);
+    if (ret == BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Success");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre></li>
 </ul>
 
 
-  <h2 id="exc" name="exc">Exchanging Data Using OPP</h2>       
-                       
-<p>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 &quot;push&quot;), not the receiver, which is a server.</p>
-<p>To exchange data with Object Push Profile (OPP):</p>        
+  <h2 id="exc" name="exc">Exchanging Data Using OPP</h2>
+
+<p>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.</p>
+<p>To exchange data with Object Push Profile (OPP):</p>
 <ul>
 <li>Exchange data in a server role:
 <ol>
@@ -1584,18 +1584,18 @@ storage_get_directory(0, STORAGE_DIRECTORY_DOWNLOADS, &amp;directory);
 
 void
 connection_requested_cb_for_opp_server(const char *remote_address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                       void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote_address: %s&quot;, remote_address);
+    dlog_print(DLOG_INFO, LOG_TAG, "remote_address: %s", remote_address);
 }
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;bt_opp_server_initialize_by_connection_request(directory,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection_requested_cb_for_opp_server,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+    bt_opp_server_initialize_by_connection_request(directory,
+                                                   connection_requested_cb_for_opp_server,
+                                                   NULL);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[bt_opp_server_initialize_by_connection_request] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "[bt_opp_server_initialize_by_connection_request] failed.");
 free(directory);
 </pre>
 </li>
@@ -1603,35 +1603,35 @@ free(directory);
 <p>When a client requests a file push, accept or reject it using the following functions:</p>
 <pre class="prettyprint">
 bt_error_e ret;
-const char file_name [18] = &quot;tempfile&quot;;
+const char file_name [18] = "tempfile";
 
 void
 bt_opp_server_transfer_progress_cb_for_opp(const char *file, long long size,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int percent, void *user_data)
+                                           int percent, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;file: %s&quot;, file);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;size: %ld&quot;, size);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;percent: %d&quot;, percent);
+    dlog_print(DLOG_INFO, LOG_TAG, "file: %s", file);
+    dlog_print(DLOG_INFO, LOG_TAG, "size: %ld", size);
+    dlog_print(DLOG_INFO, LOG_TAG, "percent: %d", percent);
 }
 
 void
 bt_opp_server_transfer_finished_cb_for_opp(int result, const char *file,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long size, void *user_data)
+                                           long long size, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;result: %d&quot;, result);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;file: %s&quot;, file);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;size: %ld&quot;, size);
+    dlog_print(DLOG_INFO, LOG_TAG, "result: %d", result);
+    dlog_print(DLOG_INFO, LOG_TAG, "file: %s", file);
+    dlog_print(DLOG_INFO, LOG_TAG, "size: %ld", size);
 }
 
 ret = bt_opp_server_accept(bt_opp_server_transfer_progress_cb_for_opp,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_opp_server_transfer_finished_cb_for_opp,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;file_name, NULL, NULL);
+                           bt_opp_server_transfer_finished_cb_for_opp,
+                           file_name, NULL, NULL);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_opp_server_accept] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_accept] failed.");
 
 ret = bt_opp_server_reject();
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_opp_server_reject] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_reject] failed.");
 </pre>
 </li>
 </ol>
@@ -1645,9 +1645,9 @@ bt_error_e ret;
 
 ret = bt_opp_client_initialize();
 if (ret != BLUETOOTH_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_opp_client_initialize() failed&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_initialize() failed");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 </pre>
 </li>
@@ -1656,18 +1656,18 @@ if (ret != BLUETOOTH_ERROR_NONE) {
 <pre class="prettyprint">
 bt_error_e ret;
 char *resource_path = NULL;
-char caller_id_path[1024] = {&#39;\0&#39;,};
+char caller_id_path[1024] = {'\0',};
 
 resource_path = app_get_resource_path();
-snprintf(caller_id_path, sizeof(caller_id_path)-1, &quot;%s/image1.jpg&quot;, resource_path);
+snprintf(caller_id_path, sizeof(caller_id_path)-1, "%s/image1.jpg", resource_path);
 free(resource_path);
 
 ret = bt_opp_client_add_file(caller_id_path);
 
 if (ret != BLUETOOTH_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_opp_client_add_file() failed&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_add_file() failed");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 </pre>
 </li>
@@ -1679,40 +1679,40 @@ char remote_addr[18] = REMOTE_DEVICE_MAC_ADDRESS;
 
 void
 __bt_opp_client_push_responded_cb(int result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *remote_address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                  const char *remote_address,
+                                  void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;result: %d&quot;, result);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote_address: %s&quot;, remote_address);
+    dlog_print(DLOG_INFO, LOG_TAG, "result: %d", result);
+    dlog_print(DLOG_INFO, LOG_TAG, "remote_address: %s", remote_address);
 }
 
 void
 __bt_opp_client_push_progress_cb(const char *file,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long size,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int percent,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                 long long size,
+                                 int percent,
+                                 void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;size: %ld&quot;, (long)size);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;percent: %d&quot;, percent);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;file: %s&quot;, file);
+    dlog_print(DLOG_INFO, LOG_TAG, "size: %ld", (long)size);
+    dlog_print(DLOG_INFO, LOG_TAG, "percent: %d", percent);
+    dlog_print(DLOG_INFO, LOG_TAG, "file: %s", file);
 }
 
 void
 __bt_opp_client_push_finished_cb(int result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *remote_address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                 const char *remote_address,
+                                 void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;result: %d&quot;, result);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;remote_address: %s&quot;, remote_address);
+    dlog_print(DLOG_INFO, LOG_TAG, "result: %d", result);
+    dlog_print(DLOG_INFO, LOG_TAG, "remote_address: %s", remote_address);
 }
 
 ret = bt_opp_client_push_files(remote_addr, __bt_opp_client_push_responded_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__bt_opp_client_push_progress_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__bt_opp_client_push_finished_cb, NULL);
+                               __bt_opp_client_push_progress_cb,
+                               __bt_opp_client_push_finished_cb, NULL);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_opp_client_push_files] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_client_push_files] failed.");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;[bt_opp_client_push_files] succeeded.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "[bt_opp_client_push_files] succeeded.");
 </pre>
 </li>
 <li>
@@ -1723,17 +1723,17 @@ bt_error_e ret;
 /* Delete file info */
 ret = bt_opp_client_clear_files();
 if (ret != BLUETOOTH_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_opp_client_clear_files() failed&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_clear_files() failed");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
 ret = bt_opp_client_deinitialize();
 if (ret != BLUETOOTH_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;ERR(&quot;bt_opp_client_initialize &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;bt_opp_client_initialize failed.&quot;);
+    ERR("bt_opp_client_initialize ");
+    dlog_print(DLOG_ERROR, LOG_TAG, "bt_opp_client_initialize failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 </pre>
 </li>
@@ -1743,143 +1743,143 @@ if (ret != BLUETOOTH_ERROR_NONE) {
 
 
        <h2 id="le_scan" name="le_scan">Managing Bluetooth LE Scans</h2>
-       
+
        <p>To discover nearby LE devices, perform an LE scan operation:</p>
        <ol>
        <li>
        <p>To start the BLE scan:</p>
-       
+
 <pre class="prettyprint">
 int
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = BT_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_start_scan(__bt_adapter_le_scan_result_cb, NULL);
+    int ret = BT_ERROR_NONE;
+    ret = bt_adapter_le_start_scan(__bt_adapter_le_scan_result_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_le_start_scan] failed.&quot;);
+    if (ret != BT_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Wait while the system searches for the LE target you want to connect to
-&nbsp;&nbsp;&nbsp;&nbsp;   When you find the LE target you want, stop the LE scan
+    /*
+       Wait while the system searches for the LE target you want to connect to
+       When you find the LE target you want, stop the LE scan
 
-&nbsp;&nbsp;&nbsp;&nbsp;   bt_adapter_le_start_scan() operates continually
-&nbsp;&nbsp;&nbsp;&nbsp;   until you call bt_adapter_le_stop_scan()
-&nbsp;&nbsp;&nbsp;&nbsp;   If you do not call bt_adapter_le_stop_scan() after calling
-&nbsp;&nbsp;&nbsp;&nbsp;   bt_adapter_le_start_scan(), calling bt_adapter_le_start_scan() again
-&nbsp;&nbsp;&nbsp;&nbsp;   can cause an in-progress error
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+       bt_adapter_le_start_scan() operates continually
+       until you call bt_adapter_le_stop_scan()
+       If you do not call bt_adapter_le_stop_scan() after calling
+       bt_adapter_le_start_scan(), calling bt_adapter_le_start_scan() again
+       can cause an in-progress error
+    */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_stop_scan();
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_le_stop_scan] failed.&quot;);
+    ret = bt_adapter_le_stop_scan();
+    if (ret != BT_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_stop_scan] failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
        </li>
-       
-       <li><p>Use the callback defined in the <code>bt_adapter_le_start_scan()</code> function to retrieve the scan results. The callback contains information of all the LE scanned devices, such as the device names, scanned devices&#39; transmission level, service data list, appearance of the devices, and manufacture data of the devices.</p>
+
+       <li><p>Use the callback defined in the <code>bt_adapter_le_start_scan()</code> function to retrieve the scan results. The callback contains information of all the LE scanned devices, such as the device names, scanned devices' transmission level, service data list, appearance of the devices, and manufacture data of the devices.</p>
        <p>To handle the scan result:</p>
-       
+
 <pre class="prettyprint">
 int ret;
 int i;
 
 void
 __bt_adapter_le_scan_result_cb(int result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_device_scan_result_info_s *info,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                               bt_adapter_le_device_scan_result_info_s *info,
+                               void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_packet_type_e pkt_type = BT_ADAPTER_LE_PACKET_ADVERTISING;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (info == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;No discovery_info!&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (info-&gt;adv_data_len &gt; 31 || info-&gt;scan_data_len &gt; 31) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Data length exceeds 31&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_stop_scan();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Scanning stopped&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 2; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char **uuids;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *device_name;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int tx_power_level;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_service_data_s *data_list;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int appearance;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int manufacturer_id;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *manufacturer_data;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int manufacturer_data_len;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int count;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pkt_type += i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pkt_type == BT_ADAPTER_LE_PACKET_ADVERTISING &amp;&amp; info-&gt;adv_data == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pkt_type == BT_ADAPTER_LE_PACKET_SCAN_RESPONSE &amp;&amp; info-&gt;scan_data == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bt_adapter_le_get_scan_result_service_uuids(info, pkt_type, &amp;uuids,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;count) == BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;UUID[%d] = %s&quot;, i + 1, uuids[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuids[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuids);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bt_adapter_le_get_scan_result_device_name(info, pkt_type, &amp;device_name)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Device name = %s&quot;, device_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(device_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bt_adapter_le_get_scan_result_tx_power_level(info, pkt_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;tx_power_level)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;TX Power level = %d&quot;, tx_power_level);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bt_adapter_le_get_scan_result_service_solicitation_uuids(info, pkt_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;uuids, &amp;count)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Solicitation UUID[%d] = %s&quot;, i + 1, uuids[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuids[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(uuids);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bt_adapter_le_get_scan_result_service_data_list(info, pkt_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;data_list, &amp;count)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Service Data[%d] = [0x%2.2X%2.2X:0x%.2X...]&quot;, i + 1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_list[i].service_uuid[0], data_list[i].service_uuid[1],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data_list[i].service_data[0]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_free_service_data_list(data_list, count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bt_adapter_le_get_scan_result_appearance(info, pkt_type, &amp;appearance)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Appearance = %d&quot;, appearance);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bt_adapter_le_get_scan_result_manufacturer_data(info, pkt_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;manufacturer_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;manufacturer_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;manufacturer_data_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== BT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Manufacturer data[ID:%.4X, 0x%.2X%.2X...(len:%d)]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;manufacturer_id, manufacturer_data[0], manufacturer_data[1],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;manufacturer_data_len);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(manufacturer_data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    bt_adapter_le_packet_type_e pkt_type = BT_ADAPTER_LE_PACKET_ADVERTISING;
+
+    if (info == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "No discovery_info!");
+
+        return;
+    }
+
+    if (info-&gt;adv_data_len &gt; 31 || info-&gt;scan_data_len &gt; 31) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Data length exceeds 31");
+        bt_adapter_le_stop_scan();
+        dlog_print(DLOG_INFO, LOG_TAG, "Scanning stopped");
+
+        return;
+    }
+
+    for (i = 0; i &lt; 2; i++) {
+        char **uuids;
+        char *device_name;
+        int tx_power_level;
+        bt_adapter_le_service_data_s *data_list;
+        int appearance;
+        int manufacturer_id;
+        char *manufacturer_data;
+        int manufacturer_data_len;
+        int count;
+
+        pkt_type += i;
+        if (pkt_type == BT_ADAPTER_LE_PACKET_ADVERTISING &amp;&amp; info-&gt;adv_data == NULL)
+            continue;
+        if (pkt_type == BT_ADAPTER_LE_PACKET_SCAN_RESPONSE &amp;&amp; info-&gt;scan_data == NULL)
+            break;
+
+        if (bt_adapter_le_get_scan_result_service_uuids(info, pkt_type, &amp;uuids,
+                                                        &amp;count) == BT_ERROR_NONE) {
+            int i;
+            for (i = 0; i &lt; count; i++) {
+                dlog_print(DLOG_INFO, LOG_TAG, "UUID[%d] = %s", i + 1, uuids[i]);
+                g_free(uuids[i]);
+            }
+            g_free(uuids);
+        }
+        if (bt_adapter_le_get_scan_result_device_name(info, pkt_type, &amp;device_name)
+            == BT_ERROR_NONE) {
+            dlog_print(DLOG_INFO, LOG_TAG, "Device name = %s", device_name);
+            g_free(device_name);
+        }
+        if (bt_adapter_le_get_scan_result_tx_power_level(info, pkt_type,
+                                                         &amp;tx_power_level)
+            == BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "TX Power level = %d", tx_power_level);
+        if (bt_adapter_le_get_scan_result_service_solicitation_uuids(info, pkt_type,
+                                                                     &amp;uuids, &amp;count)
+            == BT_ERROR_NONE) {
+            int i;
+            for (i = 0; i &lt; count; i++) {
+                dlog_print(DLOG_INFO, LOG_TAG,
+                           "Solicitation UUID[%d] = %s", i + 1, uuids[i]);
+                g_free(uuids[i]);
+            }
+            g_free(uuids);
+        }
+        if (bt_adapter_le_get_scan_result_service_data_list(info, pkt_type,
+                                                            &amp;data_list, &amp;count)
+            == BT_ERROR_NONE) {
+            int i;
+            for (i = 0; i &lt; count; i++) {
+                dlog_print(DLOG_INFO, LOG_TAG,
+                           "Service Data[%d] = [0x%2.2X%2.2X:0x%.2X...]", i + 1,
+                           data_list[i].service_uuid[0], data_list[i].service_uuid[1],
+                           data_list[i].service_data[0]);
+            }
+            bt_adapter_le_free_service_data_list(data_list, count);
+        }
+        if (bt_adapter_le_get_scan_result_appearance(info, pkt_type, &amp;appearance)
+            == BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "Appearance = %d", appearance);
+        if (bt_adapter_le_get_scan_result_manufacturer_data(info, pkt_type,
+                                                            &amp;manufacturer_id,
+                                                            &amp;manufacturer_data,
+                                                            &amp;manufacturer_data_len)
+            == BT_ERROR_NONE) {
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "Manufacturer data[ID:%.4X, 0x%.2X%.2X...(len:%d)]",
+                       manufacturer_id, manufacturer_data[0], manufacturer_data[1],
+                       manufacturer_data_len);
+            g_free(manufacturer_data);
+        }
+    }
 }
 </pre>
 
@@ -1888,8 +1888,8 @@ __bt_adapter_le_scan_result_cb(int result,
 
 <h2 id="le_discovery" name="le_discovery">Discovering Bluetooth LE Devices</h2>
 
-<p>Perform the LE discovery operation to discover nearby Bluetooth LE devices. You can register and deregister a callback for the LE discovery operation through the set and unset callback functions. The registered device discovery callback provides details of the discovered devices and the state of the discovery (started, finished, found).</p> 
-  
+<p>Perform the LE discovery operation to discover nearby Bluetooth LE devices. You can register and deregister a callback for the LE discovery operation through the set and unset callback functions. The registered device discovery callback provides details of the discovered devices and the state of the discovery (started, finished, found).</p>
+
     <div class="note">
         <strong>Note</strong>
         The APIs used in this use case are deprecated since Tizen 2.3.1. For scanning nearby BLE devices in Tizen 2.3.1 and later, see <a href="#le_scan">Managing Bluetooth LE Scans</a>.
@@ -1900,54 +1900,54 @@ __bt_adapter_le_scan_result_cb(int result,
 <pre class="prettyprint">
 static void
 __bt_adapter_le_device_discovery_state_changed_cb(int result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_device_discovery_state_e
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;discovery_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_device_discovery_info_s
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*discovery_info,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                                  bt_adapter_le_device_discovery_state_e
+                                                  discovery_state,
+                                                  bt_adapter_le_device_discovery_info_s
+                                                  *discovery_info,
+                                                  void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (discovery_info == NULL &amp;&amp; discovery_state == BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;No discovery_info!&quot;);
+    if (discovery_info == NULL &amp;&amp; discovery_state == BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND)
+        dlog_print(DLOG_ERROR, LOG_TAG, "No discovery_info!");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (discovery_state != BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;LE discovery %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;discovery_state == BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Started&quot; : &quot;Finished&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%s Adv %d Scan resp %d RSSI %d Addr_type %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;discovery_info-&gt;remote_address, discovery_info-&gt;adv_data_len,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;discovery_info-&gt;scan_data_len, discovery_info-&gt;rssi,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;discovery_info-&gt;address_type);
+    if (discovery_state != BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND) {
+        dlog_print(DLOG_INFO, LOG_TAG, "LE discovery %s",
+                   discovery_state == BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED ?
+                   "Started" : "Finished");
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "%s Adv %d Scan resp %d RSSI %d Addr_type %d",
+                   discovery_info-&gt;remote_address, discovery_info-&gt;adv_data_len,
+                   discovery_info-&gt;scan_data_len, discovery_info-&gt;rssi,
+                   discovery_info-&gt;address_type);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (discovery_info-&gt;adv_data_len &gt; 31 || discovery_info-&gt;scan_data_len &gt; 31)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_stop_device_discovery();
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        if (discovery_info-&gt;adv_data_len &gt; 31 || discovery_info-&gt;scan_data_len &gt; 31)
+            bt_adapter_le_stop_device_discovery();
+    }
 }
 
 int
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = BT_ERROR_NONE;
+    int ret = BT_ERROR_NONE;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_set_device_discovery_state_changed_cb(__bt_adapter_le_device_discovery_state_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+    ret =
+        bt_adapter_le_set_device_discovery_state_changed_cb(__bt_adapter_le_device_discovery_state_changed_cb,
+                                                            NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_start_device_discovery();
+    ret = bt_adapter_le_start_device_discovery();
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_le_start_device_discovery] failed.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;/* To unset the LE device discovery state change callback */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_unset_device_discovery_state_changed_cb();
+    if (ret != BT_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_device_discovery] failed.");
+    /* To unset the LE device discovery state change callback */
+    ret = bt_adapter_le_unset_device_discovery_state_changed_cb();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
-       
-       <h2 id="add_adv_data" name="add_adv_data">Adding Advertising Data to the LE Advertisement</h2> 
-       
+
+       <h2 id="add_adv_data" name="add_adv_data">Adding Advertising Data to the LE Advertisement</h2>
+
        <p>LE advertising data can be added to the LE advertisement or the scan response data. You can add various information, such as the device name, service UUID, service solicitation UUID, advertising appearance, advertising transmission power level, device name, and manufacturer data.</p>
        <p>To add the advertising data:</p>
 <ol>
@@ -1966,91 +1966,91 @@ char manufacture_1[] = {0x01, 0x01, 0x01, 0x01};
 char manufacture_2[] = {0x02, 0x02, 0x02, 0x02};
 char manufacture_3[] = {0x03, 0x03, 0x03, 0x03};
 char service_data[] = {0x01, 0x02, 0x03};
-const char *time_svc_uuid_16 = &quot;1805&quot;;
-const char *battery_svc_uuid_16 = &quot;180f&quot;;
-const char *heart_rate_svc_uuid_16 = &quot;180d&quot;;
-const char *immediate_alert_svc_uuid_16 = &quot;1802&quot;;
-const char *ancs_uuid_128 = &quot;7905F431-B5CE-4E99-A40F-4B1E122D00D0&quot;;
+const char *time_svc_uuid_16 = "1805";
+const char *battery_svc_uuid_16 = "180f";
+const char *heart_rate_svc_uuid_16 = "180d";
+const char *immediate_alert_svc_uuid_16 = "1802";
+const char *ancs_uuid_128 = "7905F431-B5CE-4E99-A40F-4B1E122D00D0";
 int appearance = 192; /* 192 is a generic watch */
 
 advertiser = advertiser_list[advertiser_index];
 
 if (advertiser == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_create_advertiser(&amp;advertiser);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;created le advertiser(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;advertiser_list[advertiser_index] = advertiser;
+    ret = bt_adapter_le_create_advertiser(&amp;advertiser);
+    dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+    advertiser_list[advertiser_index] = advertiser;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_clear_advertising_data(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_ADVERTISING);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;clear advertising data [0x%04x]&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_clear_advertising_data(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_SCAN_RESPONSE);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;clear scan response data [0x%04x]&quot;, ret);
+    ret = bt_adapter_le_clear_advertising_data(advertiser,
+                                               BT_ADAPTER_LE_PACKET_ADVERTISING);
+    if (ret != BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "clear advertising data [0x%04x]", ret);
+    ret = bt_adapter_le_clear_advertising_data(advertiser,
+                                               BT_ADAPTER_LE_PACKET_SCAN_RESPONSE);
+    if (ret != BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "clear scan response data [0x%04x]", ret);
 }
 
 ret = bt_adapter_le_add_advertising_service_uuid(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_ADVERTISING,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_svc_uuid_16);
+                                                 BT_ADAPTER_LE_PACKET_ADVERTISING,
+                                                 time_svc_uuid_16);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add service_uuid [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
 
 ret = bt_adapter_le_add_advertising_service_uuid(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_ADVERTISING,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;battery_svc_uuid_16);
+                                                 BT_ADAPTER_LE_PACKET_ADVERTISING,
+                                                 battery_svc_uuid_16);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add service_uuid [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_ADVERTISING,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;heart_rate_svc_uuid_16);
+    bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser,
+                                                            BT_ADAPTER_LE_PACKET_ADVERTISING,
+                                                            heart_rate_svc_uuid_16);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add service_solicitation_uuid [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_ADVERTISING,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;immediate_alert_svc_uuid_16);
+    bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser,
+                                                            BT_ADAPTER_LE_PACKET_ADVERTISING,
+                                                            immediate_alert_svc_uuid_16);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add service_solicitation_uuid [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
 
 ret = bt_adapter_le_set_advertising_appearance(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_ADVERTISING,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appearance);
+                                               BT_ADAPTER_LE_PACKET_ADVERTISING,
+                                               appearance);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add appearance data [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add appearance data [0x%04x]", ret);
 
 ret = bt_adapter_le_set_advertising_tx_power_level(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_ADVERTISING,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true);
+                                                   BT_ADAPTER_LE_PACKET_ADVERTISING,
+                                                   true);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add tx_power_level [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add tx_power_level [0x%04x]", ret);
 
 manufacture = manufacture_3;
 
 /* Default scan response data */
 ret = bt_adapter_le_add_advertising_service_data(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_svc_uuid_16, service_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(service_data));
+                                                 BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
+                                                 time_svc_uuid_16, service_data,
+                                                 sizeof(service_data));
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add service_data [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add service_data [0x%04x]", ret);
 
 ret = bt_adapter_le_set_advertising_device_name(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true);
+                                                BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
+                                                true);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;set device name [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "set device name [0x%04x]", ret);
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_add_advertising_manufacturer_data(advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;manufacturer_id, manufacture,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(manufacture_0));
+    bt_adapter_le_add_advertising_manufacturer_data(advertiser,
+                                                    BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
+                                                    manufacturer_id, manufacture,
+                                                    sizeof(manufacture_0));
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add manufacturer data [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add manufacturer data [0x%04x]", ret);
 </pre>
 </li>
 <li>
@@ -2060,13 +2060,13 @@ int ret = BT_ERROR_NONE;
 ret = bt_adapter_le_destroy_advertiser(advertiser);
 
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_adapter_le_destroy_advertiser] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_destroy_advertiser] failed.");
 
 return;
 </pre>
 </li>
 </ol>
-       
+
        <h2 id="set_adv_conn" name="set_adv_conn">Setting the LE Advertising Connectable Mode</h2>
 
        <p>When advertising to a remote device, use the <code>bt_adapter_le_set_advertising_connectable()</code> function to define whether the advertising type is connectable or non-connectable:</p>
@@ -2080,18 +2080,18 @@ int type = BT_ADAPTER_LE_ADVERTISING_CONNECTABLE;
 advertiser = advertiser_list[advertiser_index];
 
 if (advertiser == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_create_advertiser(&amp;advertiser);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;created le advertiser(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;advertiser_list[advertiser_index] = advertiser;
+    ret = bt_adapter_le_create_advertiser(&amp;advertiser);
+    dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+    advertiser_list[advertiser_index] = advertiser;
 }
 
 ret = bt_adapter_le_set_advertising_connectable(advertiser, type);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add scan response data [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add scan response data [0x%04x]", ret);
 </pre>
-       
+
        <h2 id="set_adv_mode" name="set_adv_mode">Setting the LE Advertising Mode</h2>
-       
+
 <p>The advertising mode controls the advertising power and latency, and can be set to be balanced, low latency, or low energy.</p>
 
 <p>To set the advertising mode:</p>
@@ -2107,16 +2107,16 @@ int mode = BT_ADAPTER_LE_ADVERTISING_MODE_BALANCED;
 advertiser = advertiser_list[advertiser_index];
 
 if (advertiser == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_create_advertiser(&amp;advertiser);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;created le advertiser(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;advertiser_list[advertiser_index] = advertiser;
+    ret = bt_adapter_le_create_advertiser(&amp;advertiser);
+    dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+    advertiser_list[advertiser_index] = advertiser;
 }
 
 ret = bt_adapter_le_set_advertising_mode(advertiser, mode);
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;add scan response data [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "add scan response data [0x%04x]", ret);
 </pre>
-       
+
        <h2 id="start_adv" name="start_adv">Starting and Stopping LE Advertising</h2>
 <p>To manage advertising:</p>
 <ol>
@@ -2126,65 +2126,65 @@ if (ret != BT_ERROR_NONE)
 <pre class="prettyprint">
 static void
 __bt_adapter_le_advertising_state_changed_cb(int result, bt_advertiser_h advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_advertising_state_e
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adv_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                             bt_adapter_le_advertising_state_e
+                                             adv_state,
+                                             void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Result: %d&quot;, result);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Advertiser: %p&quot;, advertiser);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Advertising %s [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? &quot;started&quot; : &quot;stopped&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adv_state);
+    dlog_print(DLOG_INFO, LOG_TAG, "Result: %d", result);
+    dlog_print(DLOG_INFO, LOG_TAG, "Advertiser: %p", advertiser);
+    dlog_print(DLOG_INFO, LOG_TAG, "Advertising %s [%d]",
+               adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? "started" : "stopped",
+               adv_state);
 }
 
 static void
 __bt_adapter_le_advertising_state_changed_cb_2(int result, bt_advertiser_h advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_advertising_state_e
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adv_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                               bt_adapter_le_advertising_state_e
+                                               adv_state,
+                                               void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Result: %d&quot;, result);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Advertiser: %p&quot;, advertiser);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Advertising %s [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? &quot;started&quot; : &quot;stopped&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adv_state);
+    dlog_print(DLOG_INFO, LOG_TAG, "Result: %d", result);
+    dlog_print(DLOG_INFO, LOG_TAG, "Advertiser: %p", advertiser);
+    dlog_print(DLOG_INFO, LOG_TAG, "Advertising %s [%d]",
+               adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? "started" : "stopped",
+               adv_state);
 }
 
 static void
 __bt_adapter_le_advertising_state_changed_cb_3(int result, bt_advertiser_h advertiser,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_le_advertising_state_e
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adv_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                               bt_adapter_le_advertising_state_e
+                                               adv_state,
+                                               void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Result: %d&quot;, result);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Advertiser: %p&quot;, advertiser);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Advertising %s [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? &quot;started&quot; : &quot;stopped&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adv_state);
+    dlog_print(DLOG_INFO, LOG_TAG, "Result: %d", result);
+    dlog_print(DLOG_INFO, LOG_TAG, "Advertiser: %p", advertiser);
+    dlog_print(DLOG_INFO, LOG_TAG, "Advertising %s [%d]",
+               adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? "started" : "stopped",
+               adv_state);
 }
 
 bt_adapter_le_advertising_state_changed_cb cb;
 
 if (advertiser_index == 0)
-&nbsp;&nbsp;&nbsp;&nbsp;cb = __bt_adapter_le_advertising_state_changed_cb;
+    cb = __bt_adapter_le_advertising_state_changed_cb;
 else if
-&nbsp;&nbsp;&nbsp;&nbsp;(advertiser_index == 1) cb = __bt_adapter_le_advertising_state_changed_cb_2;
+    (advertiser_index == 1) cb = __bt_adapter_le_advertising_state_changed_cb_2;
 else
-&nbsp;&nbsp;&nbsp;&nbsp;cb = __bt_adapter_le_advertising_state_changed_cb_3;
+    cb = __bt_adapter_le_advertising_state_changed_cb_3;
 
 advertiser = advertiser_list[advertiser_index];
 advertiser_index++;
 advertiser_index %= 3;
 
 if (advertiser == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_create_advertiser(&amp;advertiser);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;created le advertiser(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;advertiser_list[advertiser_index] = advertiser;
+    ret = bt_adapter_le_create_advertiser(&amp;advertiser);
+    dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+    advertiser_list[advertiser_index] = advertiser;
 }
 
 ret = bt_adapter_le_start_advertising_new(advertiser, cb, NULL);
 if (ret &lt; BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;failed with [0x%04x]&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "failed with [0x%04x]", ret);
 </pre>
 </li>
 <li>
@@ -2192,13 +2192,13 @@ if (ret &lt; BT_ERROR_NONE)
 
 <pre class="prettyprint">
 if (advertiser != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_le_stop_advertising(advertiser);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret &lt; BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;failed with [0x%04x]&quot;, ret);
+    ret = bt_adapter_le_stop_advertising(advertiser);
+    if (ret &lt; BT_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "failed with [0x%04x]", ret);
 }
 </pre></li>
 </ol>
-       
+
 
  <h2 id="release" name="release">Releasing All Resources</h2>
 
@@ -2216,7 +2216,7 @@ bt_socket_unset_connection_state_changed_cb();
 /* Deinitialize Bluetooth */
 ret = bt_deinitialize();
 if (ret != BT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[bt_deinitialize] failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_deinitialize] failed.");
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/connectivity/connection_n.htm b/org.tizen.guides/html/native/connectivity/connection_n.htm
index aa7f136..4cdbdec 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/connection_n.htm
+++ b/org.tizen.guides/html/native/connectivity/connection_n.htm
@@ -29,7 +29,7 @@
         <ul class="toc">
                        <li><a href="#manager">Connection Manager</a></li>
                        <li><a href="#con_profile">Connection Profile</a></li>
-                       <li><a href="#statistics">Connection Statistics</a></li>                
+                       <li><a href="#statistics">Connection Statistics</a></li>
                        <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#detail">Getting Network Connection Details</a></li>
                        <li><a href="#info">Getting Connection Information</a></li>
@@ -43,8 +43,8 @@
                                <li><a href="#socket_create">Creating the Client-side Socket and Managing the Remote Host Connection</a></li>
                                <li><a href="#socket_createserver">Creating the Server-side Socket and Managing the Connection</a></li>
                                <li><a href="#socket_close">Closing the Socket</a></li>
-                       </ul></li>      
-               </ul>           
+                       </ul></li>
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API for Mobile Native</a></li>
@@ -101,155 +101,155 @@
 
 <p>The following table defines the available profile information, which you can get using the <code>connection_profile_get_XXX()</code> function.</p>
 
-   <p align="center" class="Table"><strong>Table: Common information</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
+   <p align="center" class="Table"><strong>Table: Common information</strong></p>
+<table>
+   <tbody>
+    <tr>
      <th colspan="2">Information</th>
-     <th>Description</th> 
+     <th>Description</th>
     </tr>
     <tr>
         <th rowspan="12">Common</th>
-     <td>DNS address</td> 
-     <td>DNS address; you can get the first and second DNS address</td> 
-    </tr> 
-    <tr> 
-     <td>Gateway address</td> 
-     <td>Gateway address</td> 
+     <td>DNS address</td>
+     <td>DNS address; you can get the first and second DNS address</td>
     </tr>
-    <tr> 
-     <td>IP address</td> 
-     <td>IP address</td> 
-    </tr> 
-    <tr> 
-     <td>IP configuration type</td> 
-     <td>IP address configuration type, such as static, dynamic, auto, or fixed</td> 
-    </tr> 
-    <tr> 
-     <td>Network interface name</td> 
-     <td>Name of the network interface, such as eth0 or pdp0</td> 
+    <tr>
+     <td>Gateway address</td>
+     <td>Gateway address</td>
+    </tr>
+    <tr>
+     <td>IP address</td>
+     <td>IP address</td>
+    </tr>
+    <tr>
+     <td>IP configuration type</td>
+     <td>IP address configuration type, such as static, dynamic, auto, or fixed</td>
+    </tr>
+    <tr>
+     <td>Network interface name</td>
+     <td>Name of the network interface, such as eth0 or pdp0</td>
     </tr>
-    <tr> 
-     <td>Profile ID</td> 
-     <td>Unique profile ID; when you create a new profile, this value is determined</td> 
+    <tr>
+     <td>Profile ID</td>
+     <td>Unique profile ID; when you create a new profile, this value is determined</td>
     </tr>
-    <tr> 
-     <td>Profile name</td> 
-     <td>Profile name associated with the profile ID</td> 
+    <tr>
+     <td>Profile name</td>
+     <td>Profile name associated with the profile ID</td>
     </tr>
-    <tr> 
-     <td>Profile state</td> 
-     <td>Profile state, such as disconnected, association, configuration, or connected</td> 
+    <tr>
+     <td>Profile state</td>
+     <td>Profile state, such as disconnected, association, configuration, or connected</td>
     </tr>
-    <tr> 
-     <td>Profile type</td> 
-     <td>Profile type indicating the network connection type</td> 
+    <tr>
+     <td>Profile type</td>
+     <td>Profile type indicating the network connection type</td>
     </tr>
-    <tr> 
-     <td>Proxy address</td> 
-     <td>Proxy address</td> 
+    <tr>
+     <td>Proxy address</td>
+     <td>Proxy address</td>
     </tr>
-    <tr> 
-     <td>Proxy type</td> 
-     <td>Proxy method, such as direct or auto</td> 
+    <tr>
+     <td>Proxy type</td>
+     <td>Proxy method, such as direct or auto</td>
     </tr>
-    <tr> 
-     <td>Subnet mask</td> 
-     <td>Subnet mask</td> 
+    <tr>
+     <td>Subnet mask</td>
+     <td>Subnet mask</td>
     </tr>
     <tr>
         <th rowspan="9">Wi-Fi-specific</th>
-     <td>BSSID</td> 
-     <td>Basic service set identifier</td> 
+     <td>BSSID</td>
+     <td>Basic service set identifier</td>
+    </tr>
+    <tr>
+     <td>ESSID</td>
+     <td>Extended service set identifier</td>
     </tr>
-    <tr> 
-     <td>ESSID</td> 
-     <td>Extended service set identifier</td> 
-    </tr> 
-    <tr> 
-     <td>Encryption type</td> 
-     <td>Type for encryption modes, such as WEP, TKIP, AES or TKIP/AES mixed</td> 
-    </tr> 
-    <tr> 
-     <td>Frequency</td> 
-     <td>Frequency (in MHz)</td> 
-    </tr> 
-    <tr> 
-     <td>Max speed</td> 
-     <td>Maximum speed (in Mbps)</td> 
-    </tr> 
-    <tr> 
-     <td>Passphrase required</td> 
-     <td>Passphrase compulsion</td> 
-    </tr> 
-    <tr> 
-     <td>RSSI</td> 
-     <td>Received signal strength indication</td> 
-    </tr> 
-    <tr> 
-     <td>Security type</td> 
-     <td>Wi-Fi security type; supports WEP, WPA-PSK, WPA2-PSK, and EAP</td> 
+    <tr>
+     <td>Encryption type</td>
+     <td>Type for encryption modes, such as WEP, TKIP, AES or TKIP/AES mixed</td>
+    </tr>
+    <tr>
+     <td>Frequency</td>
+     <td>Frequency (in MHz)</td>
+    </tr>
+    <tr>
+     <td>Max speed</td>
+     <td>Maximum speed (in Mbps)</td>
+    </tr>
+    <tr>
+     <td>Passphrase required</td>
+     <td>Passphrase compulsion</td>
+    </tr>
+    <tr>
+     <td>RSSI</td>
+     <td>Received signal strength indication</td>
+    </tr>
+    <tr>
+     <td>Security type</td>
+     <td>Wi-Fi security type; supports WEP, WPA-PSK, WPA2-PSK, and EAP</td>
     </tr>
        <tr>
         <td>WPS supported</td>
         <td>Whether WPS (Wi-Fi Protected Setup) is supported</td>
        </tr>
-    <tr> 
+    <tr>
         <th rowspan="10">Cellular-specific</th>
-     <td>APN</td> 
-     <td>Access Point Name</td> 
-    </tr> 
-           <tr> 
-     <td>Cellular authentication info</td> 
-     <td>Authentication information, including user name and password</td> 
+     <td>APN</td>
+     <td>Access Point Name</td>
     </tr>
-           <tr> 
-     <td>Cellular home URL</td> 
-     <td>Home URL</td> 
+           <tr>
+     <td>Cellular authentication info</td>
+     <td>Authentication information, including user name and password</td>
     </tr>
-           <tr> 
-     <td>Default</td> 
-     <td>Whether the profile is default</td> 
+           <tr>
+     <td>Cellular home URL</td>
+     <td>Home URL</td>
     </tr>
-           <tr> 
-     <td>Editable</td> 
-     <td>Whether the profile is editable</td> 
+           <tr>
+     <td>Default</td>
+     <td>Whether the profile is default</td>
     </tr>
-           <tr> 
-     <td>Hidden</td> 
-     <td>Whether the profile is hidden</td> 
+           <tr>
+     <td>Editable</td>
+     <td>Whether the profile is editable</td>
     </tr>
-           <tr> 
-     <td>PDN type</td> 
-     <td>Cellular PDN type</td> 
+           <tr>
+     <td>Hidden</td>
+     <td>Whether the profile is hidden</td>
     </tr>
-           <tr> 
-     <td>Roaming PDN type</td> 
-     <td>Cellular roaming PDN type</td> 
+           <tr>
+     <td>PDN type</td>
+     <td>Cellular PDN type</td>
     </tr>
-           <tr> 
-     <td>Roaming</td> 
-     <td>Roaming state</td> 
+           <tr>
+     <td>Roaming PDN type</td>
+     <td>Cellular roaming PDN type</td>
     </tr>
-           <tr> 
-     <td>Service type</td> 
-     <td>Cellular service type</td> 
+           <tr>
+     <td>Roaming</td>
+     <td>Roaming state</td>
     </tr>
-   </tbody> 
-  </table> 
-       
+           <tr>
+     <td>Service type</td>
+     <td>Cellular service type</td>
+    </tr>
+   </tbody>
+  </table>
+
 
 <h2 id="statistics" name="statistics">Connection Statistics</h2>
 
 <p>You can use the Connection Statistics API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">wearable</a> applications) to <a href="#info">gather statistics on the network usage</a>, such as the amount of sent or received data. You can also retrieve the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS). To define the specific type of statistics information you want, use the <code>connection_statistics_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html#ga24b29d70490e8cd9ee34f45615ea1c63">wearable</a> applications).</p>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         Statistics are supported for Wi-Fi and cellular connections only.
     </div>
-  
-<p>You can re-initialize the statistics with the <code>connection_reset_statistics()</code> function.</p>      
+
+<p>You can re-initialize the statistics with the <code>connection_reset_statistics()</code> function.</p>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -259,13 +259,13 @@
 <p>To use the Connection API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.set&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.profile&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.set&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.profile&lt;/privilege&gt;
 &lt;/privileges&gt;
-</pre>   
+</pre>
 </li>
-<li> 
+<li>
 <p>To use the functions and data types of the Connection API, include the <code>&lt;net_connection.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;net_connection.h&gt;
@@ -283,7 +283,7 @@ int error_code;
 
 error_code = connection_create(&amp;connection);
 if (error_code != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 </pre>
 </li>
 <li>
@@ -305,7 +305,7 @@ int error_code;
 connection_type_e net_state;
 error_code = connection_get_type(connection, &amp;net_state);
 if (error_code == CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Network connection type: %d&quot;, net_state);
+    dlog_print(DLOG_INFO, LOG_TAG, "Network connection type: %d", net_state);
 </pre>
 <p>To monitor changes in the connection type, register and define a callback:</p>
 
@@ -315,7 +315,7 @@ connection_set_type_changed_cb(connection, __connection_changed_cb, NULL);
 static void
 __connection_changed_cb(connection_type_e type, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Type changed callback, connection type: %d&quot;, type);
+    dlog_print(DLOG_INFO, LOG_TAG, "Type changed callback, connection type: %d", type);
 }
 </pre></li>
 
@@ -325,21 +325,21 @@ __connection_changed_cb(connection_type_e type, void* user_data)
 <pre class="prettyprint">
 char *ip_addr = NULL;
 error_code = connection_get_ip_address(connection, CONNECTION_ADDRESS_FAMILY_IPV4,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;ip_addr);
+                                       &amp;ip_addr);
 if (error_code == CONNECTION_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;IP address: %s&quot;, ip_addr);
-&nbsp;&nbsp;&nbsp;&nbsp;free(ip_addr);
+    dlog_print(DLOG_INFO, LOG_TAG, "IP address: %s", ip_addr);
+    free(ip_addr);
 }
 </pre></li>
 
-<li>To get the connection proxy information, use the <code>connection_get_proxy()</code> function. The following example prints the proxy address using the dlog util tool. 
+<li>To get the connection proxy information, use the <code>connection_get_proxy()</code> function. The following example prints the proxy address using the dlog util tool.
 <p>Free the memory allocated for the <code>proxy_addr</code> variable.</p>
 
 <pre class="prettyprint">
 error_code = connection_get_proxy(connection, address_family, &amp;proxy_addr);
 if (error_code == CONNECTION_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Proxy address: %s&quot;, proxy_addr);
-&nbsp;&nbsp;&nbsp;&nbsp;free(proxy_addr);
+    dlog_print(DLOG_INFO, LOG_TAG, "Proxy address: %s", proxy_addr);
+    free(proxy_addr);
 }
 </pre></li></ol>
 
@@ -356,26 +356,26 @@ connection_cellular_state_e cellular_state;
 connection_get_cellular_state(connection, &amp;cellular_state);
 switch (cellular_state) {
 case CONNECTION_CELLULAR_STATE_OUT_OF_SERVICE:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Out of service&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Out of service");
+    break;
 case CONNECTION_CELLULAR_STATE_FLIGHT_MODE:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Flight mode&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Flight mode");
+    break;
 case CONNECTION_CELLULAR_STATE_ROAMING_OFF:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Roaming is turned off&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Roaming is turned off");
+    break;
 case CONNECTION_CELLULAR_STATE_CALL_ONLY_AVAILABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Call only&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Call only");
+    break;
 case CONNECTION_CELLULAR_STATE_AVAILABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Available&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Available");
+    break;
 case CONNECTION_CELLULAR_STATE_CONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Connected&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Connected");
+    break;
 default:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "error");
+    break;
 }
 </pre></li>
 
@@ -388,17 +388,17 @@ connection_wifi_state_e wifi_state;
 connection_get_wifi_state(connection, &amp;wifi_state);
 switch (wifi_state) {
 case CONNECTION_WIFI_STATE_DEACTIVATED:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Deactivated state&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Deactivated state");
+    break;
 case CONNECTION_WIFI_STATE_DISCONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Disconnected state&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Disconnected state");
+    break;
 case CONNECTION_WIFI_STATE_CONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Connected state&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Connected state");
+    break;
 default:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "error");
+    break;
 }
 </pre></li>
 
@@ -415,46 +415,46 @@ default:
 <pre class="prettyprint">
 long long last_received_size;
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_CELLULAR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;last_received_size);
+                                       CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA,
+                                       &amp;last_received_size);
 /* Handle statistics */
 
 long long last_sent_size;
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_CELLULAR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;last_sent_size);
+                                       CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA,
+                                       &amp;last_sent_size);
 /* Handle statistics */
 
 long long total_received_size;
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_CELLULAR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;total_received_size);
+                                       CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA,
+                                       &amp;total_received_size);
 /* Handle statistics */
 
 long long total_sent_size;
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_CELLULAR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;total_sent_size);
+                                       CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA,
+                                       &amp;total_sent_size);
 /* Handle statistics */
 
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;last_received_size);
+                                       CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA,
+                                       &amp;last_received_size);
 /* Handle statistics */
 
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;last_sent_size);
+                                       CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA,
+                                       &amp;last_sent_size);
 /* Handle statistics */
 
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;total_received_size);
+                                       CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA,
+                                       &amp;total_received_size);
 /* Handle statistics */
 
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;total_sent_size);
+                                       CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA,
+                                       &amp;total_sent_size);
 /* Handle statistics */
 </pre></li></ol>
 
@@ -470,15 +470,15 @@ error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI,
 static void
 __ip_changed_cb(const char* ipv4_address, const char* ipv6_address, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%s callback, IPv4 address: %s, IPv6 address: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(char *)user_data, ipv4_address, (ipv6_address ? ipv6_address : &quot;NULL&quot;));
+    dlog_print(DLOG_INFO, LOG_TAG, "%s callback, IPv4 address: %s, IPv6 address: %s",
+               (char *)user_data, ipv4_address, (ipv6_address ? ipv6_address : "NULL"));
 }
 
 static void
 __proxy_changed_cb(const char* ipv4_address, const char* ipv6_address, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%s callback, IPv4 address: %s, IPv6 address: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(char *)user_data, ipv4_address, (ipv6_address ? ipv6_address : &quot;NULL&quot;));
+    dlog_print(DLOG_INFO, LOG_TAG, "%s callback, IPv4 address: %s, IPv6 address: %s",
+               (char *)user_data, ipv4_address, (ipv6_address ? ipv6_address : "NULL"));
 }
 </pre></li>
 
@@ -488,13 +488,13 @@ __proxy_changed_cb(const char* ipv4_address, const char* ipv6_address, void* use
 
 <pre class="prettyprint">
 error_code = connection_set_ip_address_changed_cb(connection, __ip_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;IP addr changed:&quot;);
+                                                  "IP addr changed:");
 if (error_code != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 error_code = connection_set_proxy_address_changed_cb(connection, __proxy_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Proxy IP addr changed:&quot;);
+                                                     "Proxy IP addr changed:");
 if (error_code != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li>Deregister the callback functions.
@@ -504,11 +504,11 @@ if (error_code != CONNECTION_ERROR_NONE)
 <pre class="prettyprint">
 error_code = connection_unset_ip_address_changed_cb(connection);
 if (error_code != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 error_code = connection_unset_proxy_address_changed_cb(connection);
 if (error_code != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li></ol>
 
 <h2 id="socket_init" name="socket_init">Initializing a Socket</h2>
@@ -529,73 +529,73 @@ if (error_code != CONNECTION_ERROR_NONE)
 int
 main(int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int rv = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int ip_type = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;char user_url[100] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;char user_port[10] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;char user_msg[200] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;char *local_ipv4 = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *local_ipv6 = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *interface_name = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;connection_type_e net_state;
-&nbsp;&nbsp;&nbsp;&nbsp;connection_h connection = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;connection_profile_h profile_h = NULL;
+    int rv = 0;
+    int ip_type = -1;
+    char user_url[100] = {0,};
+    char user_port[10] = {0,};
+    char user_msg[200] = {0,};
+    char *local_ipv4 = NULL;
+    char *local_ipv6 = NULL;
+    char *interface_name = NULL;
+
+    connection_type_e net_state;
+    connection_h connection = NULL;
+    connection_profile_h profile_h = NULL;
 </pre></li>
 <li><a href="#prerequisites">Include the required header file and create a connection handle</a>.
 </li>
 <li>Check whether the default connection is available:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;connection_type_e net_state;
+    connection_type_e net_state;
 
-&nbsp;&nbsp;&nbsp;&nbsp;rv = connection_get_type(connection, &amp;net_state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (rv != CONNECTION_ERROR_NONE || net_state == CONNECTION_TYPE_DISCONNECTED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Not connected %d\n&quot;, rv);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection_destroy(connection);
+    rv = connection_get_type(connection, &amp;net_state);
+    if (rv != CONNECTION_ERROR_NONE || net_state == CONNECTION_TYPE_DISCONNECTED) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Not connected %d\n", rv);
+        connection_destroy(connection);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 </pre>
 </li>
 <li>Check the address type of the default connection.
 <p>The address type can be IPv4 or IPv6.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;int ip_type = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;char *local_ipv4 = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *local_ipv6 = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;connection_profile_h profile_h = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;rv = connection_get_current_profile(connection, &amp;profile_h);
-&nbsp;&nbsp;&nbsp;&nbsp;if (rv != CONNECTION_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to get profile handle %d\n&quot;, rv);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;connection_destroy(connection);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV6,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;local_ipv6);
-&nbsp;&nbsp;&nbsp;&nbsp;if (rv == CONNECTION_ERROR_NONE &amp;&amp; g_strcmp0(local_ipv6, &quot;::&quot;) != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ip_type = CONNECTION_ADDRESS_FAMILY_IPV6;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;IPv6 address: %s\n&quot;, local_ipv6);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* If both IPv4 and IPv6 types are set, the IPv4 type is used as default here */
-&nbsp;&nbsp;&nbsp;&nbsp;rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV4,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;local_ipv4);
-&nbsp;&nbsp;&nbsp;&nbsp;if (rv == CONNECTION_ERROR_NONE &amp;&amp; g_strcmp0(local_ipv4, &amp;0.0.0.0&amp;) != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ip_type = CONNECTION_ADDRESS_FAMILY_IPV4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;IPv4 address: %s\n&quot;, local_ipv4);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (ip_type != CONNECTION_ADDRESS_FAMILY_IPV6
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; ip_type != CONNECTION_ADDRESS_FAMILY_IPV4) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;No IP address!\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;connection_profile_get_network_interface_name(profile_h, &amp;interface_name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Interface Name: %s\n&quot;, interface_name);
+    int ip_type = -1;
+    char *local_ipv4 = NULL;
+    char *local_ipv6 = NULL;
+    connection_profile_h profile_h = NULL;
+
+    rv = connection_get_current_profile(connection, &amp;profile_h);
+    if (rv != CONNECTION_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to get profile handle %d\n", rv);
+        connection_destroy(connection);
+
+        return -1;
+    }
+
+    rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV6,
+                                           &amp;local_ipv6);
+    if (rv == CONNECTION_ERROR_NONE &amp;&amp; g_strcmp0(local_ipv6, "::") != 0) {
+        ip_type = CONNECTION_ADDRESS_FAMILY_IPV6;
+        dlog_print(DLOG_INFO, LOG_TAG, "IPv6 address: %s\n", local_ipv6);
+    }
+
+    /* If both IPv4 and IPv6 types are set, the IPv4 type is used as default here */
+    rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV4,
+                                           &amp;local_ipv4);
+    if (rv == CONNECTION_ERROR_NONE &amp;&amp; g_strcmp0(local_ipv4, &amp;0.0.0.0&amp;) != 0) {
+        ip_type = CONNECTION_ADDRESS_FAMILY_IPV4;
+        dlog_print(DLOG_INFO, LOG_TAG, "IPv4 address: %s\n", local_ipv4);
+    }
+
+    if (ip_type != CONNECTION_ADDRESS_FAMILY_IPV6
+        &amp;&amp; ip_type != CONNECTION_ADDRESS_FAMILY_IPV4) {
+        dlog_print(DLOG_INFO, LOG_TAG, "No IP address!\n");
+        /* Error handling */
+    }
+
+    connection_profile_get_network_interface_name(profile_h, &amp;interface_name);
+    dlog_print(DLOG_INFO, LOG_TAG, "Interface Name: %s\n", interface_name);
 }
 </pre>
 </li>
@@ -620,10 +620,10 @@ main(int argc, char **argv)
 <pre class="prettyprint">
 int rv;
 rv = connection_get_default_cellular_service_profile(connection,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_CELLULAR_SERVICE_TYPE_INTERNET,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;profile);
+                                                     CONNECTION_CELLULAR_SERVICE_TYPE_INTERNET,
+                                                     &amp;profile);
 if (ret != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to get default cellular service profile\n&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to get default cellular service profile\n");
 </pre>
 </li>
 
@@ -631,7 +631,7 @@ if (ret != CONNECTION_ERROR_NONE)
 <pre class="prettyprint">
 rv = connection_open_profile(connection, profile, test_connection_opened_callback, NULL);
 if (rv != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to open profile\n&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to open profile\n");
 </pre>
 </li>
 <li>If the callback function is invoked with a success result, refresh the profile and get the interface name of the opened profile.
@@ -642,46 +642,46 @@ if (rv != CONNECTION_ERROR_NONE)
 static void
 test_connection_opened_callback(connection_error_e result, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int rv;
-&nbsp;&nbsp;&nbsp;&nbsp;char *interface_name;
-&nbsp;&nbsp;&nbsp;&nbsp;CURL *curl;
-&nbsp;&nbsp;&nbsp;&nbsp;CURLcode res;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == CONNECTION_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Refresh the profile */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rv = connection_profile_refresh(profile);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (rv != CONNECTION_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to refresh profile\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the interface name */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rv = connection_profile_get_network_interface_name(profile, &amp;interface_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (rv != CONNECTION_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Fail to get interface name!\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Interface name(%s)\n&quot;, interface_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl = curl_easy_init();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (curl) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl, CURLOPT_URL, &quot;https://www.tizen.org&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Bind the interface name with the socket */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl, CURLOPT_INTERFACE, interface_name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res = curl_easy_perform(curl);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (res != CURLE_OK)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;curl_easy_perform() failed&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_cleanup(curl);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to open profile&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    int rv;
+    char *interface_name;
+    CURL *curl;
+    CURLcode res;
+
+    if (result == CONNECTION_ERROR_NONE) {
+        /* Refresh the profile */
+        rv = connection_profile_refresh(profile);
+        if (rv != CONNECTION_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG, "Failed to refresh profile\n");
+
+            return;
+        }
+
+        /* Get the interface name */
+        rv = connection_profile_get_network_interface_name(profile, &amp;interface_name);
+        if (rv != CONNECTION_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG, "Fail to get interface name!\n");
+
+            return;
+        }
+
+        dlog_print(DLOG_ERROR, LOG_TAG, "Interface name(%s)\n", interface_name);
+        curl = curl_easy_init();
+        if (curl) {
+            curl_easy_setopt(curl, CURLOPT_URL, "https://www.tizen.org");
+            /* Bind the interface name with the socket */
+            curl_easy_setopt(curl, CURLOPT_INTERFACE, interface_name);
+
+            res = curl_easy_perform(curl);
+            if (res != CURLE_OK)
+                dlog_print(DLOG_ERROR, LOG_TAG, "curl_easy_perform() failed");
+
+            curl_easy_cleanup(curl);
+        }
+    }
+
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to open profile");
+
+    return;
 }
 </pre>
 </li></ol>
@@ -694,22 +694,22 @@ test_connection_opened_callback(connection_error_e result, void* user_data)
 <li>Retrieve the IP addresses:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;struct sockaddr_in6 *addr6;
-&nbsp;&nbsp;&nbsp;&nbsp;struct addrinfo hints;
-&nbsp;&nbsp;&nbsp;&nbsp;struct addrinfo *result;
-&nbsp;&nbsp;&nbsp;&nbsp;char user_url[100] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;char user_port[10] = {0,};
-
-&nbsp;&nbsp;&nbsp;&nbsp;memset(&amp;hints, 0x00, sizeof(struct addrinfo));
-
-&nbsp;&nbsp;&nbsp;&nbsp;hints.ai_family = PF_UNSPEC;
-&nbsp;&nbsp;&nbsp;&nbsp;hints.ai_socktype = SOCK_STREAM;
-&nbsp;&nbsp;&nbsp;&nbsp;hints.ai_protocol = IPPROTO_TCP;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (getaddrinfo(user_url, user_port, &amp;hints, &amp;result) != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;getaddrinfo() error\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    struct sockaddr_in6 *addr6;
+    struct addrinfo hints;
+    struct addrinfo *result;
+    char user_url[100] = {0,};
+    char user_port[10] = {0,};
+
+    memset(&amp;hints, 0x00, sizeof(struct addrinfo));
+
+    hints.ai_family = PF_UNSPEC;
+    hints.ai_socktype = SOCK_STREAM;
+    hints.ai_protocol = IPPROTO_TCP;
+
+    if (getaddrinfo(user_url, user_port, &amp;hints, &amp;result) != 0) {
+        dlog_print(DLOG_INFO, LOG_TAG, "getaddrinfo() error\n");
+        /* Error handling */
+    }
 }
 </pre>
 </li>
@@ -736,8 +736,8 @@ hints.ai_family = PF_UNSPEC;
 hints.ai_socktype = SOCK_STREAM;
 
 if (getaddrinfo(default_ip, argv[1], &amp;hints, &amp;result) != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;getaddrinfo() error\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;goto done;
+    printf("getaddrinfo() error\n");
+    goto done;
 }
 </pre>
 
@@ -745,7 +745,7 @@ if (getaddrinfo(default_ip, argv[1], &amp;hints, &amp;result) != 0) {
 
 <p>To create the socket and connect to a remote host:</p>
 <ol>
-<li>Find the proper address family and create the socket: 
+<li>Find the proper address family and create the socket:
 <pre class="prettyprint">
 int sockfd = -1;
 struct addrinfo *rp;
@@ -753,30 +753,30 @@ struct addrinfo *rp;
 rp = result;
 
 for (rp = result; rp != NULL; rp = rp-&gt;ai_next) {
-&nbsp;&nbsp;&nbsp;&nbsp;if (rp-&gt;ai_family == AF_INET &amp;&amp; ip_type == CONNECTION_ADDRESS_FAMILY_IPV4) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((sockfd = socket(AF_INET, SOCK_STREAM, 0)) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;socket error\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;IPv4\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (rp-&gt;ai_family == AF_INET6 &amp;&amp; ip_type == CONNECTION_ADDRESS_FAMILY_IPV6) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((sockfd = socket(AF_INET6, SOCK_STREAM, 0)) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;socket error\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;IPv6\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (rp-&gt;ai_family == AF_INET &amp;&amp; ip_type == CONNECTION_ADDRESS_FAMILY_IPV4) {
+        if ((sockfd = socket(AF_INET, SOCK_STREAM, 0)) &lt; 0) {
+            dlog_print(DLOG_INFO, LOG_TAG, "socket error\n");
+            freeaddrinfo(result);
+        }
+        dlog_print(DLOG_INFO, LOG_TAG, "IPv4\n");
+    } else if (rp-&gt;ai_family == AF_INET6 &amp;&amp; ip_type == CONNECTION_ADDRESS_FAMILY_IPV6) {
+        if ((sockfd = socket(AF_INET6, SOCK_STREAM, 0)) &lt; 0) {
+            dlog_print(DLOG_INFO, LOG_TAG, "socket error\n");
+            freeaddrinfo(result);
+        }
+        dlog_print(DLOG_INFO, LOG_TAG, "IPv6\n");
+    }
 }
 </pre>
 </li>
 <li>Connect to the remote host:
 <ul>
-<li>Use the IPv4 socket: 
+<li>Use the IPv4 socket:
 <pre class="prettyprint">
 if (connect(sockfd, rp-&gt;ai_addr, rp-&gt;ai_addrlen) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;connect() error: %s\n&quot;, strerror(errno));
-&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;close(sockfd);
+    dlog_print(DLOG_INFO, LOG_TAG, "connect() error: %s\n", strerror(errno));
+    freeaddrinfo(result);
+    close(sockfd);
 }
 </pre>
 </li>
@@ -786,15 +786,15 @@ if (connect(sockfd, rp-&gt;ai_addr, rp-&gt;ai_addrlen) &lt; 0) {
 char *interface_name = NULL;
 
 connection_profile_get_network_interface_name(profile_h, &amp;interface_name);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;Interface Name: %s\n&quot;, interface_name);
+dlog_print(DLOG_INFO, LOG_TAG, "Interface Name: %s\n", interface_name);
 
 addr6 = (struct sockaddr_in6 *)rp-&gt;ai_addr;
 addr6-&gt;sin6_scope_id = if_nametoindex(interface_name);
 
 if ((sockfd = connect(sockfd, (struct sockaddr *)addr6, rp-&gt;ai_addrlen)) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;connect() error: %s\n&quot;, strerror(errno));
-&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;close(sockfd);
+    dlog_print(DLOG_INFO, LOG_TAG, "connect() error: %s\n", strerror(errno));
+    freeaddrinfo(result);
+    close(sockfd);
 }
 </pre>
 </li>
@@ -804,12 +804,12 @@ if ((sockfd = connect(sockfd, (struct sockaddr *)addr6, rp-&gt;ai_addrlen)) &lt;
 <ul><li>Send a message to the remote host:
 <pre class="prettyprint">
 if ((count = write(sockfd, user_msg, 200)) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;write() error: %s\n&quot;, strerror(errno));
+    dlog_print(DLOG_INFO, LOG_TAG, "write() error: %s\n", strerror(errno));
 
-&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;close(sockfd);
+    freeaddrinfo(result);
+    close(sockfd);
 }
-dlog_print(DLOG_INFO, LOG_TAG, &quot;Sent count: %d, msg: %s\n&quot;, count, user_msg);
+dlog_print(DLOG_INFO, LOG_TAG, "Sent count: %d, msg: %s\n", count, user_msg);
 </pre>
 </li>
 <li>Read a message from the remote host:
@@ -818,13 +818,13 @@ char buf[257];
 memset(buf, 0x00, 257);
 
 if ((count = read(sockfd, buf, 256)) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;read() error: %s\n&quot;, strerror(errno));
+    dlog_print(DLOG_INFO, LOG_TAG, "read() error: %s\n", strerror(errno));
 
-&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;close(sockfd);
+    freeaddrinfo(result);
+    close(sockfd);
 }
-buf[count] = &#39;\0&#39;;
-dlog_print(DLOG_INFO, LOG_TAG, &quot;\nRead: %s\n&quot;, buf);
+buf[count] = '\0';
+dlog_print(DLOG_INFO, LOG_TAG, "\nRead: %s\n", buf);
 </pre>
 </li></ul></li></ol>
 
@@ -832,7 +832,7 @@ dlog_print(DLOG_INFO, LOG_TAG, &quot;\nRead: %s\n&quot;, buf);
 
 <p>To create the socket and manage the connection to a client:</p>
 <ol>
-<li>Find the proper address family and create the socket: 
+<li>Find the proper address family and create the socket:
 <pre class="prettyprint">
 int sockfd = -1;
 struct addrinfo *rp;
@@ -840,35 +840,35 @@ struct addrinfo *rp;
 rp = result;
 
 for (rp = result; rp != NULL; rp = rp-&gt;ai_next) {
-&nbsp;&nbsp;&nbsp;&nbsp;if (rp-&gt;ai_family == AF_INET &amp;&amp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ip_type == CONNECTION_ADDRESS_FAMILY_IPV4) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((sockfd = socket(AF_INET, SOCK_STREAM, 0)) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;socket error\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;goto done;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;IPv4\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (rp-&gt;ai_family == AF_INET6 &amp;&amp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ip_type == CONNECTION_ADDRESS_FAMILY_IPV6) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((sockfd = socket(AF_INET6, SOCK_STREAM, 0)) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;socket error\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;goto done;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;IPv6\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (rp-&gt;ai_family == AF_INET &amp;&amp;
+        ip_type == CONNECTION_ADDRESS_FAMILY_IPV4) {
+        if ((sockfd = socket(AF_INET, SOCK_STREAM, 0)) &lt; 0) {
+            printf("socket error\n");
+            freeaddrinfo(result);
+            goto done;
+        }
+        printf("IPv4\n");
+    } else if (rp-&gt;ai_family == AF_INET6 &amp;&amp;
+             ip_type == CONNECTION_ADDRESS_FAMILY_IPV6) {
+        if ((sockfd = socket(AF_INET6, SOCK_STREAM, 0)) &lt; 0) {
+            printf("socket error\n");
+            freeaddrinfo(result);
+            goto done;
+        }
+        printf("IPv6\n");
+    }
 }
 </pre>
 </li>
 <li>Bind the found address:
 <pre class="prettyprint">
 if (bind(sockfd, rp-&gt;ai_addr, rp-&gt;ai_addrlen) != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;bind() error: %s\n&quot;, strerror(errno));
+    printf("bind() error: %s\n", strerror(errno));
 
-&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;close(sockfd);
+    freeaddrinfo(result);
+    close(sockfd);
 
-&nbsp;&nbsp;&nbsp;&nbsp;goto done;
+    goto done;
 }
 </pre>
 </li>
@@ -876,12 +876,12 @@ if (bind(sockfd, rp-&gt;ai_addr, rp-&gt;ai_addrlen) != 0) {
 <p>Mark the <code>sockfd</code> socket as a passive socket.</p>
 <pre class="prettyprint">
 if (listen(sockfd, 5) != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;listen() error: %s\n&quot;, strerror(errno));
+    printf("listen() error: %s\n", strerror(errno));
 
-&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;close(sockfd);
+    freeaddrinfo(result);
+    close(sockfd);
 
-&nbsp;&nbsp;&nbsp;&nbsp;goto done;
+    goto done;
 }
 </pre>
 </li>
@@ -893,30 +893,30 @@ char buf[257];
 memset(buf, 0x00, 257);
 
 if ((count = read(csockfd, buf, 256)) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;read() error: %s\n&quot;, strerror(errno));
+    printf("read() error: %s\n", strerror(errno));
 
-&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;close(sockfd);
-&nbsp;&nbsp;&nbsp;&nbsp;close(csockfd);
-&nbsp;&nbsp;&nbsp;&nbsp;goto done;
+    freeaddrinfo(result);
+    close(sockfd);
+    close(csockfd);
+    goto done;
 }
-buf[count] = &#39;\0&#39;;
-printf(&quot;\nRead: %s\n&quot;, buf);
+buf[count] = '\0';
+printf("\nRead: %s\n", buf);
 </pre>
 </li>
 <li>Echo the received message back to the client:
 <pre class="prettyprint">
 if ((count = write(csockfd, buf, 256)) &lt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;write() error: %s\n&quot;, strerror(errno));
+    printf("write() error: %s\n", strerror(errno));
 
-&nbsp;&nbsp;&nbsp;&nbsp;freeaddrinfo(result);
-&nbsp;&nbsp;&nbsp;&nbsp;close(sockfd);
-&nbsp;&nbsp;&nbsp;&nbsp;close(csockfd);
+    freeaddrinfo(result);
+    close(sockfd);
+    close(csockfd);
 
-&nbsp;&nbsp;&nbsp;&nbsp;goto done;
+    goto done;
 }
 
-printf(&quot;sent count: %d, msg: %s\n&quot;, count, buf);
+printf("sent count: %d, msg: %s\n", count, buf);
 close(csockfd);
 </pre>
 </li>
@@ -924,20 +924,20 @@ close(csockfd);
 
 <h2 id="socket_close" name="socket_close">Closing the Socket</h2>
 
-<p>To close the client or server-side socket and release the resources:</p> 
+<p>To close the client or server-side socket and release the resources:</p>
 <pre class="prettyprint">
 freeaddrinfo(result);
 close(sockfd);
 
 done:
-&nbsp;&nbsp;&nbsp;&nbsp;connection_profile_destroy(profile_h);
-&nbsp;&nbsp;&nbsp;&nbsp;connection_destroy(connection);
+    connection_profile_destroy(profile_h);
+    connection_destroy(connection);
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(local_ipv6);
-&nbsp;&nbsp;&nbsp;&nbsp;free(local_ipv4);
-&nbsp;&nbsp;&nbsp;&nbsp;free(interface_name);
+    free(local_ipv6);
+    free(local_ipv4);
+    free(interface_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm b/org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm
index ee82ce2..656e20d 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm
+++ b/org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Connectivity and Wireless</title>  
+       <title>Connectivity and Wireless</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,7 +32,7 @@
                        <li><a href="../../../../org.tizen.training/html/native/feature/app_contentshare_n.htm">Creating Applications with Content Sharing</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Connectivity and Wireless</h1>
@@ -94,7 +94,7 @@
 
 <p>You can open logical channels for exchanging messages across devices, and start and control applications on a remote device. Convergence services allow applications and devices in the network to discover, connect, and communicate to each other.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/connectivity/curl_n.htm b/org.tizen.guides/html/native/connectivity/curl_n.htm
index 20c5671..28bce9c 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/curl_n.htm
+++ b/org.tizen.guides/html/native/connectivity/curl_n.htm
@@ -30,7 +30,7 @@
                        <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#manage">Managing the Proxy Address</a></li>
                        <li><a href="#request">Transferring HTTP Requests</a></li>
-               </ul>           
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">Curl API for Mobile Native</a></li>
@@ -42,7 +42,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Curl</h1>
 
-<p>You can implement URL-related transfer activities in Tizen without a Web browser using the open source <a href="http://curl.haxx.se/libcurl/" target="_blank">libcurl</a> library, version 7.40. libcurl is a client-side URL transfer library that supports, among other protocols,  HTTP, HTTPS, FTP, and file URIs.</p> 
+<p>You can implement URL-related transfer activities in Tizen without a Web browser using the open source <a href="http://curl.haxx.se/libcurl/" target="_blank">libcurl</a> library, version 7.40. libcurl is a client-side URL transfer library that supports, among other protocols,  HTTP, HTTPS, FTP, and file URIs.</p>
 
 <p>The main features of the Curl API include:</p>
   <ul>
@@ -54,15 +54,15 @@
         In some cases, such as with Internet access, your application requires some privileges. For more information on which privileges to set in the application manifest file, see <a href="../../../../org.tizen.training/html/native/details/sec_privileges_n.htm#nonAPI">Non-API Bound Privileges</a>.
     </div>
   </li>
-  
+
   <li>Managing the proxy address
   <p>You can <a href="#manage">get and set the proxy address</a> in multiple ways.</p>
-  
+
     <div class="note">
         <strong>Note</strong>
         In a proxy environment, the libcurl library does not know the proxy address. To handle HTTP and HTTPS requests in a proxy environment, first get the proxy address using the <a href="connection_n.htm#manager">connection manager</a>, and then set the proxy address using the Curl API.
     </div>
-    
+
   </li>
   <li>Transferring HTTP requests
   <p>You can <a href="#request">transfer HTTP requests</a> using the <code>curl_easy_setopt()</code> function.</p></li>
@@ -75,7 +75,7 @@
 <p>To use the Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications) and the libcurl library, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -101,9 +101,9 @@ connection_h connection;
 int conn_err;
 conn_err = connection_create(&amp;connection);
 if (conn_err != CONNECTION_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
@@ -124,31 +124,31 @@ connection_destroy(connection);
 <pre class="prettyprint">
 char *proxy_address;
 conn_err = connection_get_proxy(connection, CONNECTION_ADDRESS_FAMILY_IPV4,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;proxy_address);
+                                &amp;proxy_address);
 </pre>
 <p>To set the proxy address, use the <code>curl_easy_setopt()</code> function with the <code>CURLOPT_PROXY</code> parameter:</p>
 <pre class="prettyprint">
 if (conn_err == CONNECTION_ERROR_NONE &amp;&amp; proxy_address)
-&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl, CURLOPT_PROXY, proxy_address);
+    curl_easy_setopt(curl, CURLOPT_PROXY, proxy_address);
 </pre>
 </li>
 <li>To be notified whenever the proxy address changes, register a callback with the <code>connection_set_proxy_address_changed_cb()</code> function of the Connection Manager API:
 <pre class="prettyprint">
 conn_err = connection_set_proxy_address_changed_cb(connection,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__proxy_address_changed_cb, NULL);
+                                                   __proxy_address_changed_cb, NULL);
 if (conn_err != CONNECTION_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 <p>The new proxy address is passed in the callback parameters. To set the proxy address, use the <code>curl_easy_setopt()</code> function with the <code>CURLOPT_PROXY</code> parameter:</p>
 <pre class="prettyprint">
 static void
 __proxy_address_changed_cb(const char *ipv4_address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *ipv6_address, void *user_data)
+                           const char *ipv6_address, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl, CURLOPT_PROXY, ipv4_address);
+    curl_easy_setopt(curl, CURLOPT_PROXY, ipv4_address);
 }
 </pre>
 </li>
@@ -158,10 +158,10 @@ __proxy_address_changed_cb(const char *ipv4_address,
 
 <p>To transfer HTTP requests, set the URL with the <code>curl_easy_setopt()</code> function and start the transfer with the <code>curl_easy_perform()</code> function:</p>
 <pre class="prettyprint">
-curl_easy_setopt(curl, CURLOPT_URL, &quot;https://www.tizen.org/&quot;);
+curl_easy_setopt(curl, CURLOPT_URL, "https://www.tizen.org/");
 curl_err = curl_easy_perform(curl);
 if (curl_err != CURLE_OK)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/connectivity/d2d_connectivity_n.htm b/org.tizen.guides/html/native/connectivity/d2d_connectivity_n.htm
index 73b0ec1..b4ee2bc 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/d2d_connectivity_n.htm
+++ b/org.tizen.guides/html/native/connectivity/d2d_connectivity_n.htm
@@ -38,7 +38,7 @@
                                <li><a href="#send_message">Sending Messages to the Server Application</a></li>
                        </ul></li>
                        <li>Remote App Control Service
-                       <ul class="toc">                        
+                       <ul class="toc">
                                <li><a href="#init_remote">Using the Remote App Control Service</a></li>
                        </ul></li>
                        <li><a href="#payload">Predefined Payload Fields</a></li>
@@ -63,7 +63,7 @@
        The D2D connectivity framework supports only Wi-Fi networks. More connectivity types, such as Bluetooth, Bluetooth Low Energy, and Wi-Fi Direct&trade;, are going to be added in future versions.
      <p>Only 2 services, app communication and remote app control, are currently supported. More services are going to be introduced in the future versions of Tizen. All convergence services are predefined in the platform, which means that you cannot add new ones on your own.</p>
 </div>
-  
+
 <p>The main features of the Convergence API include:</p>
 <ul>
 <li>Discovering and connecting to devices
@@ -83,7 +83,7 @@
 
 
 
-<h2 id="app_communication">App Communication Service</h2> 
+<h2 id="app_communication">App Communication Service</h2>
 
 <p>The convergence architecture allows the app communication service to launch an application on a device equipped with the remote server, and communicate with the server application by <a href="#send_message">sending a payload</a>. The remote server application can also use the app communication service to send responses to the local (client-side) application. In this way, a sophisticated data exchange protocol can be established. Before using the app communication service, <a href="#init_app_communication">set up the listener callbacks and initialize the application</a>.</p>
 
@@ -109,8 +109,8 @@
 
 <p>The app communication service channel specifies the server application the client wants to connect with. The channel data is composed of a URI and channel ID, which are assigned to the channel handle:</p>
 <pre class="prettyprint">
-conv_channel_set_string(channel_handle, &quot;uri&quot;, &quot;org.example.d2d_test&quot;);
-conv_channel_set_string(channel_handle, &quot;channel_id&quot;, &quot;test&quot;);
+conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+conv_channel_set_string(channel_handle, "channel_id", "test");
 </pre>
 <p>The channel URI is the URI of the server side application, while the channel ID is a developer-defined value. Note that both URI and ID fields are mandatory for using the app communication service. If not provided, the <code>CONV_ERROR_INVALID_PARAMETER</code> error occurs. You must know the server side application URI: you either develop both the client and server application yourself, or acquire the server application URI from other sources.</p>
 
@@ -143,15 +143,15 @@ conv_channel_set_string(channel_handle, &quot;channel_id&quot;, &quot;test&quot;
 <p align="center"><img src="../../images/d2d_tizen_connect.png" alt="Tizen Connect" /></p>
 
 <h2 id="prerequisites">Prerequisites</h2>
-  
+
 <p>To enable your application to use the D2D connectivity functionality:</p>
 <ol>
 <li>To use the Convergence API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONVERGENCE__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONVERGENCE__FRAMEWORK.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/bluetooth&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/d2d.datasharing&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/bluetooth&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/d2d.datasharing&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -171,21 +171,21 @@ conv_channel_set_string(channel_handle, &quot;channel_id&quot;, &quot;test&quot;
 <p>During the discovery process, the framework returns handles of found devices (JSON objects with basic device information and lists of available services). The following example shows the conceptual structure of device handle:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;device_id&quot;: &quot;DEVICE_ID&quot;, /* Unique device ID */
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;device_name&quot;: &quot;DEVICE_NAME&quot;, /* Unique device name */
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;device_type&quot;: &quot;DEVICE_TYPE&quot;, /* Device profile, such as mobile or wearable */
-&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle for service A */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_type: TYPE_A,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jservice: JSON auxiliary data of service A
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle for service B */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_type: TYPE_B,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jservice: JSON auxiliary of service B
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;]
+    "device_id": "DEVICE_ID", /* Unique device ID */
+    "device_name": "DEVICE_NAME", /* Unique device name */
+    "device_type": "DEVICE_TYPE", /* Device profile, such as mobile or wearable */
+    [
+        /* Handle for service A */
+        {
+            service_type: TYPE_A,
+            jservice: JSON auxiliary data of service A
+        },
+        /* Handle for service B */
+        {
+            service_type: TYPE_B,
+            jservice: JSON auxiliary of service B
+        },
+    ]
 }
 </pre>
 
@@ -205,77 +205,77 @@ conv_channel_set_string(channel_handle, &quot;channel_id&quot;, &quot;test&quot;
 <li>Start the discovery by calling the <code>conv_discovery_start()</code> function. The discovered device handles are retrieved in the <code>conv_discovery_cb()</code> callback.
 <p>In the following example, the <code>conv_discovery_start()</code> function runs a 30 seconds long discovery procedure. Each time a nearby device is discovered, the framework invokes the <code>discovery_cb()</code> callback with the device handle and the <code>CONV_DISCOVERY_RESULT_SUCCESS</code> result code. At the end of discovery procedure, the callback is invoked with the <code>CONV_DISCOVERY_RESULT_FINISHED</code> result code and an empty device handle.</p>
 <p>The result codes are defined in the <code>conv_discovery_result_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__FRAMEWORK.html#gaac8da8a6d95bf9c77039c4d9360b31e3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__FRAMEWORK.html#gaac8da8a6d95bf9c77039c4d9360b31e3">wearable</a> applications).</p>
-<p>The device ID, name, and type can be read from the device handle by passing the <code>CONV_DEVICE_ID</code>, <code>CONV_DEVICE_NAME</code>, and <code>CONV_DEVICE_TYPE</code> keys to the <code>conv_device_get_property_string()</code> function. To use the discovered device handle outside the callback, it must be cloned with the <code>conv_device_clone()</code> function.</p> 
+<p>The device ID, name, and type can be read from the device handle by passing the <code>CONV_DEVICE_ID</code>, <code>CONV_DEVICE_NAME</code>, and <code>CONV_DEVICE_TYPE</code> keys to the <code>conv_device_get_property_string()</code> function. To use the discovered device handle outside the callback, it must be cloned with the <code>conv_device_clone()</code> function.</p>
 <pre class="prettyprint">
 static void
 discovery_cb(conv_device_h device, int result, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == CONV_DISCOVERY_RESULT_SUCCESS) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Discovered device */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char* device_id = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char* device_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char* device_type = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_device_get_property_string(device, CONV_DEVICE_ID, &amp;device_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;device id = %s\n&quot;, device_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(device_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_device_get_property_string(device, CONV_DEVICE_NAME, &amp;device_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;device name = %s\n&quot;, device_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(device_name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_device_get_property_string(device, CONV_DEVICE_TYPE, &amp;device_type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;device TYPE = %s\n&quot;, device_type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(device_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clone the device handle for use outside this callback */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_device_h clone_device;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_device_clone(device, &amp;clone_device);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (result == CONV_DISCOVERY_RESULT_FINISHED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Discovery has finished */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (result == CONV_DISCOVERY_RESULT_ERROR) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Discovery has triggered an error */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (result == CONV_DISCOVERY_RESULT_SUCCESS) {
+        /* Discovered device */
+        char* device_id = NULL;
+        char* device_name = NULL;
+        char* device_type = NULL;
+
+        conv_device_get_property_string(device, CONV_DEVICE_ID, &amp;device_id);
+        printf("device id = %s\n", device_id);
+        free(device_id);
+
+        conv_device_get_property_string(device, CONV_DEVICE_NAME, &amp;device_name);
+        printf("device name = %s\n", device_name);
+        free(device_name);
+
+        conv_device_get_property_string(device, CONV_DEVICE_TYPE, &amp;device_type);
+        printf("device TYPE = %s\n", device_type);
+        free(device_type);
+
+        /* Clone the device handle for use outside this callback */
+        conv_device_h clone_device;
+        conv_device_clone(device, &amp;clone_device);
+    } else if (result == CONV_DISCOVERY_RESULT_FINISHED) {
+        /* Discovery has finished */
+        /* Do something */
+    } else if (result == CONV_DISCOVERY_RESULT_ERROR) {
+        /* Discovery has triggered an error */
+        /* Error handling */
+    }
 }
 
 static void
 start_discovery_example()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a convergence manager */
-&nbsp;&nbsp;&nbsp;&nbsp;int error = conv_create(&amp;conv_h);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error != CONV_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Start discovery */
-&nbsp;&nbsp;&nbsp;&nbsp;error = conv_discovery_start(conv_h, 30, discovery_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error != CONV_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Create a convergence manager */
+    int error = conv_create(&amp;conv_h);
+    if (error != CONV_ERROR_NONE)
+        /* Error handling */
+
+    /* Start discovery */
+    error = conv_discovery_start(conv_h, 30, discovery_cb, NULL);
+    if (error != CONV_ERROR_NONE)
+        /* Error handling */
 }
 </pre>
 <p>To stop the ongoing discovery process, call the <code>conv_discovery_stop()</code> function.</p>
 </li>
-<li>Get the list of services. 
+<li>Get the list of services.
 <p>The remaining part of the device handle is a list of services. Pull this information by using the <code>conv_device_foreach_service()</code> function:</p>
 <pre class="prettyprint">
 static void
 service_foreach_cb(conv_service_h service_handle, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_e e = CONV_SERVICE_NONE;
+    conv_service_e e = CONV_SERVICE_NONE;
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_get_type(service_handle, &amp;e);
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;service_get_type = %d\n&quot;, (int)e);
+    conv_service_get_type(service_handle, &amp;e);
+    printf("service_get_type = %d\n", (int)e);
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_h clone_service_handle;
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_clone(service_handle, &amp;clone_service_handle);
+    conv_service_h clone_service_handle;
+    conv_service_clone(service_handle, &amp;clone_service_handle);
 }
 
 static void
 foreach_service_example()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;conv_device_h device = data;
-&nbsp;&nbsp;&nbsp;&nbsp;conv_device_foreach_service(device, service_foreach_cb, NULL);
+    conv_device_h device = data;
+    conv_device_foreach_service(device, service_foreach_cb, NULL);
 }
 </pre>
 <p>While iterating through the available services, the framework generates a new handle for each service and passes it to the <code>conv_service_foreach_cb()</code> type callback. To use the service handle outside the callback, clone it with the <code>conv_service_clone()</code> function.</p>
@@ -291,7 +291,7 @@ foreach_service_example()
 conv_service_connection_state_e state = CONV_SERVICE_CONNECTION_STATE_NONE;
 conv_service_get_connection_state(service_handle, &amp;state);
 if (state == CONV_SERVICE_CONNECTION_STATE_NOT_CONNECTED)
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_connect(service_handle, callback, NULL);
+    conv_service_connect(service_handle, callback, NULL);
 </pre>
 <p>You can check the connection state with the <code>conv_service_get_connection()</code> function, which returns one of values defined in the <code>conv_service_connection_state_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__SERVICE__MODULE.html#ga5da79e1a7ca434991e5ff6d28c0b0e13">mobile</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__SERVICE__MODULE.html#ga5da79e1a7ca434991e5ff6d28c0b0e13">wearable</a> applications). If the service is not connected yet, the connection state is <code>CONV_SERVICE_CONNECTION_STATE_NOT_CONNECTED</code> and the service must be connected using the <code>conv_service_connect()</code> function.</p>
 
@@ -299,14 +299,14 @@ if (state == CONV_SERVICE_CONNECTION_STATE_NOT_CONNECTED)
        <strong>Note</strong>
        Repeated attempts to connect to an already connected service result in the invalid state error. Attempts to start, publish, read, or stop a disconnected service also result in the invalid state error.
 </div>
-  
+
 <p>Technically, in case of the Wi-Fi network, when the framework runs the discovery procedure, all devices are already connected to the Access Point (AP), which means that the <code>conv_service_get_connection_state()</code> function always returns the <code>Connected</code> state and the <code>conv_service_connect()</code> function can be omitted. It is especially applied for the Tizen 3.0 convergence framework, which supports only Wi-Fi networks. In future versions with support for Bluetooth, Bluetooth Low Energy, or Wi-Fi Direct&trade;, the connection procedure is mandatory. For the sake of future extensibility and compatibility, use the <code>conv_service_connect()</code> function even in Tizen 3.0.</p>
 
 
 <h2 id="init_app_communication">Initializing the App Communication Service</h2>
 <p>To initialize the app communication service:</p>
 <ol>
-<li id="listener_callback">Register the listener callback with the <code>conv_service_set_listener_cb()</code> function. This function must be called only once, regardless of the number of used service channels. In the runtime, all payloads from all channels are delivered there. 
+<li id="listener_callback">Register the listener callback with the <code>conv_service_set_listener_cb()</code> function. This function must be called only once, regardless of the number of used service channels. In the runtime, all payloads from all channels are delivered there.
 
 <div class="note">
        <strong>Note</strong>
@@ -319,61 +319,61 @@ if (state == CONV_SERVICE_CONNECTION_STATE_NOT_CONNECTED)
 /* Client side callback */
 void
 listener_example(conv_service_h handle, conv_channel_h channel, int error,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_h result, void *user_data)
+                 conv_payload_h result, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *result_type = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *payload_type = NULL; /* User-defined payload key */
-
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_get_string(result, &quot;result_type&quot;, &amp;result_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(result_type, &quot;onConnect&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something for onConnect */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(result_type, &quot;onStart&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something for onStart */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(result_type, &quot;onPublish&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something for onPublish */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(result_type, &quot;onStop&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something for onStop */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(result_type, &quot;onDisconnect&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something for onDisconnect */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(result_type, &quot;onClientDisconnect&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something for onClientDisconnect */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(result_type, &quot;onRead&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something for onRead */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Parsing user-defined portion of the payload */
+    char *result_type = NULL;
+    char *payload_type = NULL; /* User-defined payload key */
+
+    conv_payload_get_string(result, "result_type", &amp;result_type);
+
+    if (!strcmp(result_type, "onConnect"))
+        /* Do something for onConnect */
+    else if (!strcmp(result_type, "onStart"))
+        /* Do something for onStart */
+    else if (!strcmp(result_type, "onPublish"))
+        /* Do something for onPublish */
+    else if (!strcmp(result_type, "onStop"))
+        /* Do something for onStop */
+    else if (!strcmp(result_type, "onDisconnect"))
+        /* Do something for onDisconnect */
+    else if (!strcmp(result_type, "onClientDisconnect"))
+        /* Do something for onClientDisconnect */
+    else if (!strcmp(result_type, "onRead"))
+        /* Do something for onRead */
+    else
+        /* Parsing user-defined portion of the payload */
 }
 </pre>
 <p>The structure of the listener is the same for both server and client sides.</p>
 </li>
 <li>If the application sends a payload using the <code>conv_service_publish()</code> function, the listener callback in the receiver side gets the following packet:
 <pre class="prettyprint">
-&quot;result_type&quot;: &quot;onMessage&quot;
-&quot;from&quot;: unique ID of a client which sends the message
-&quot;user_defined_key&quot;: custom user-defined key in the payload
+"result_type": "onMessage"
+"from": unique ID of a client which sends the message
+"user_defined_key": custom user-defined key in the payload
 </pre>
 <p>The following example demonstrates how to process a custom payload:</p>
 <pre class="prettyprint">
 void
 custom_listener_example(conv_service_h handle, conv_channel_h channel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int error, conv_payload_h result, void *user_data)
+                        int error, conv_payload_h result, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *result_type = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *payload_type = NULL; /* User-defined payload key */
-
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_get_string(result, &quot;result_type&quot;, &amp;result_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(result_type, &quot;onMessage&quot;)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Parsing user-defined portion of the payload */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_get_string(result, &quot;payload_type&quot;, &amp;payload_type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(payload_type, &quot;Good_News&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something for the payload of the &quot;Good News&quot; type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(payload_type, &quot;Bad_News&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something for the payload of the &quot;Bad News&quot; type */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    char *result_type = NULL;
+    char *payload_type = NULL; /* User-defined payload key */
+
+    conv_payload_get_string(result, "result_type", &amp;result_type);
+
+    if (!strcmp(result_type, "onMessage")) {
+        /* Parsing user-defined portion of the payload */
+        conv_payload_get_string(result, "payload_type", &amp;payload_type);
+        if (!strcmp(payload_type, "Good_News"))
+            /* Do something for the payload of the "Good News" type */
+        else if (!strcmp(payload_type, "Bad_News"))
+            /* Do something for the payload of the "Bad News" type */
+    }
 }
 </pre>
-<p>The example assumes that the message has a custom <code>payload_type</code> key and a string value that takes 1 of 2 variants: <code>&quot;Good_News&quot;</code> and <code>&quot;Bad_News&quot;</code>.</p>
+<p>The example assumes that the message has a custom <code>payload_type</code> key and a string value that takes 1 of 2 variants: <code>"Good_News"</code> and <code>"Bad_News"</code>.</p>
 <p>In addition to strings, you can use a raw byte array payload. The <code>conv_payload_set_string()</code>, <code>conv_payload_get_string()</code>, <code>conv_payload_set_byte()</code>, and <code>conv_payload_get_byte()</code> functions are useful for working with payload types.</p>
 </li>
 </ul>
@@ -386,20 +386,20 @@ custom_listener_example(conv_service_h handle, conv_channel_h channel,
 static void
 server_application_initialization_example()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating an instance of the app communication service */
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_create(&amp;service_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_set_type(service_handle, CONV_SERVICE_APP_TO_APP_COMMUNICATION);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Specifying service channel */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Note, the URI value corresponds to URI of your server-side app */
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_create(&amp;channel_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_set_string(channel_handle, &quot;uri&quot;, &quot;org.example.d2d_test&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_set_string(channel_handle, &quot;channel_id&quot;, &quot;test&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Starting the service */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Note that the listener must be set before starting the service */
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_set_listener_cb(service_handle, server_message_listener, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_start(service_handle, channel_handle, NULL);
+    /* Creating an instance of the app communication service */
+    conv_service_create(&amp;service_handle);
+    conv_service_set_type(service_handle, CONV_SERVICE_APP_TO_APP_COMMUNICATION);
+
+    /* Specifying service channel */
+    /* Note, the URI value corresponds to URI of your server-side app */
+    conv_channel_create(&amp;channel_handle);
+    conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+    conv_channel_set_string(channel_handle, "channel_id", "test");
+
+    /* Starting the service */
+    /* Note that the listener must be set before starting the service */
+    conv_service_set_listener_cb(service_handle, server_message_listener, NULL);
+    conv_service_start(service_handle, channel_handle, NULL);
 }
 </pre>
 </li>
@@ -411,17 +411,17 @@ server_application_initialization_example()
 int
 app_communication_start_client_example()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_connect(service_handle, connect_cb, NULL);
+    conv_service_connect(service_handle, connect_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_h channel_handle = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_create(&amp;channel_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_set_string(channel_handle, &quot;uri&quot;, &quot;org.example.d2d_test&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_set_string(channel_handle, &quot;channel_id&quot;, &quot;test&quot;);
+    conv_channel_h channel_handle = NULL;
+    conv_channel_create(&amp;channel_handle);
+    conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+    conv_channel_set_string(channel_handle, "channel_id", "test");
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_set_listener_cb(service_handle, message_listener, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_start(service_handle, channel_handle, NULL);
+    conv_service_set_listener_cb(service_handle, message_listener, NULL);
+    conv_service_start(service_handle, channel_handle, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_destroy(channel_handle);
+    conv_channel_destroy(channel_handle);
 }
 </pre>
 <p>The service must be connected to the remote device using the <code>conv_service_connect()</code> function. The <code>service_handle</code> in this example is the one that the client application discovered earlier. The connection callback is omitted in this example for simplicity. However, it is meaningful to carefully implement it and observe that the connection result is <code>CONV_ERROR_NONE</code>. The payload retrieved to the callback is typically empty.</p>
@@ -434,14 +434,14 @@ app_communication_start_client_example()
 int
 app_communication_stop_client_example()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_h channel_handle = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_create(&amp;channel_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_set_string(channel_handle, &quot;uri&quot;, &quot;org.example.d2d_test&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_set_string(channel_handle, &quot;channel_id&quot;, &quot;test&quot;);
+    conv_channel_h channel_handle = NULL;
+    conv_channel_create(&amp;channel_handle);
+    conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+    conv_channel_set_string(channel_handle, "channel_id", "test");
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_stop(service_handle, channel_handle, NULL); 
+    conv_service_stop(service_handle, channel_handle, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_destroy(channel_handle);
+    conv_channel_destroy(channel_handle);
 }
 </pre>
 </li>
@@ -457,22 +457,22 @@ app_communication_stop_client_example()
 int
 publish_example()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_h service_handle = (conv_service_h)data;
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_h channel_handle;
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_h payload_handle;
+    conv_service_h service_handle = (conv_service_h)data;
+    conv_channel_h channel_handle;
+    conv_payload_h payload_handle;
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_create(&amp;channel_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_set_string(channel_handle, &quot;uri&quot;, &quot;org.example.d2d_test&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_channel_set_string(channel_handle, &quot;channel_id&quot;, &quot;test&quot;);
+    conv_channel_create(&amp;channel_handle);
+    conv_channel_set_string(channel_handle, "uri", "org.example.d2d_test");
+    conv_channel_set_string(channel_handle, "channel_id", "test");
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_create(&amp;payload_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_set_string(payload_handle, &quot;user_defined_key&quot;, &quot;user_defined_value&quot;);
+    conv_payload_create(&amp;payload_handle);
+    conv_payload_set_string(payload_handle, "user_defined_key", "user_defined_value");
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_publish(service_handle, channel_handle, payload_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;/* or conv_service_read(service_handle, channel_handle, NULL); */
+    conv_service_publish(service_handle, channel_handle, payload_handle);
+    /* or conv_service_read(service_handle, channel_handle, NULL); */
 }
 </pre>
-<p>The channel used in this example is the same as described before. The <code>conv_service_publish()</code> function delivers the payload, composed of the <code>&quot;user_defined_key&quot;</code> and <code>&quot;user_defined_value&quot;</code> pairs, through the network to the remote server application where it is passed in the listener callback.</p>
+<p>The channel used in this example is the same as described before. The <code>conv_service_publish()</code> function delivers the payload, composed of the <code>"user_defined_key"</code> and <code>"user_defined_value"</code> pairs, through the network to the remote server application where it is passed in the listener callback.</p>
 
 <p>In the app communication service, the <code>conv_service_read()</code> function is only a command to get the information about the clients connected to the same channel. The <code>conv_service_read()</code> is called with <code>NULL</code> payload and it does not require additional parameters. You can <a href="#result_type">receive various information</a> in the <code>conv_service_read()</code> function.</p>
 
@@ -485,64 +485,64 @@ publish_example()
 <li>Register a listener callback.
 <p>In the remote app control service, the application control, delivered to a remote device, is directly processed just like a local application control. It means that there is no need for a receiver to implement a special receiving routine in the remote device, and no need to register a listener callback on the receiver side. Instead, the listener callback is useful in the sender side to check whether the function is delivered to the remote device and processed correctly.</p>
 
-<p>The following example shows a listener callback, which handled the result of the access control process related to the remote app control service. After the user of the remote device has decided to allow or deny access with the passcode, the user choice is delivered to the remote device with the <code>&quot;onStart&quot;</code> result type and predefined error types:</p>
-<ul><li>If the passcode is entered correctly, the <code>&quot;onStart&quot;</code> returns with the <code>CONV_ERROR_NONE</code> value.</li>
-<li>Otherwise, the <code>&quot;onStart&quot;</code> comes with the <code>CONV_ERROR_INVALID_OPERATION</code> value.</li></ul>
+<p>The following example shows a listener callback, which handled the result of the access control process related to the remote app control service. After the user of the remote device has decided to allow or deny access with the passcode, the user choice is delivered to the remote device with the <code>"onStart"</code> result type and predefined error types:</p>
+<ul><li>If the passcode is entered correctly, the <code>"onStart"</code> returns with the <code>CONV_ERROR_NONE</code> value.</li>
+<li>Otherwise, the <code>"onStart"</code> comes with the <code>CONV_ERROR_INVALID_OPERATION</code> value.</li></ul>
 <pre class="prettyprint">
 static void
 service_result_callback(conv_service_h service_handle, conv_channel_h channel_handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_error_e error, conv_payload_h result, void* user_data)
+                        conv_error_e error, conv_payload_h result, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *reply_result = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_get_string(result, &quot;result_type&quot;, &amp;reply_result);
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(reply_result, &quot;onStart&quot;)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error == CONV_ERROR_NONE) { 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Allowed */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_service_publish(service_handle, NULL, payload_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_service_stop(service_handle, NULL, payload_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_destroy(payload_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;payload_handle = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (error == CONV_ERROR_INVALID_OPERATION) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Denied */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_service_stop(service_handle, NULL, payload_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_destroy(payload_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;payload_handle = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;free(reply_result);
+    char *reply_result = NULL;
+    conv_payload_get_string(result, "result_type", &amp;reply_result);
+    if (!strcmp(reply_result, "onStart")) {
+        if (error == CONV_ERROR_NONE) {
+            /* Allowed */
+            conv_service_publish(service_handle, NULL, payload_handle);
+            conv_service_stop(service_handle, NULL, payload_handle);
+            conv_payload_destroy(payload_handle);
+            payload_handle = NULL;
+        } else if (error == CONV_ERROR_INVALID_OPERATION) {
+            /* Denied */
+            conv_service_stop(service_handle, NULL, payload_handle);
+            conv_payload_destroy(payload_handle);
+            payload_handle = NULL;
+        }
+    }
+    free(reply_result);
 }
 </pre>
 </li>
-<li>Start the remote app control service. 
+<li>Start the remote app control service.
 <p>After registering the listener callback, start the service with the service handle, obtained from the near-by device discovery previously. Build an application control handle in a payload to launch an application in a remote device.</p>
-<p>The following example launches the <code>&quot;org.example.d2d_test&quot;</code> application:</p>
+<p>The following example launches the <code>"org.example.d2d_test"</code> application:</p>
 <pre class="prettyprint">
 int
 app_control_service()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_set_listener_cb(service_handle, message_listener, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_start(service_handle, NULL, NULL);
+    conv_service_set_listener_cb(service_handle, message_listener, NULL);
+    conv_service_start(service_handle, NULL, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_h payload_handle;
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_create(&amp;payload_handle);
+    conv_payload_h payload_handle;
+    conv_payload_create(&amp;payload_handle);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;app_control);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_app_id(app_control, &quot;org.example.d2d_test&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(app_control, APP_CONTROL_OPERATION_MAIN);
+    app_control_h app_control = NULL;
+    app_control_create(&amp;app_control);
+    app_control_set_app_id(app_control, "org.example.d2d_test");
+    app_control_set_operation(app_control, APP_CONTROL_OPERATION_MAIN);
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_set_app_control(payload_handle, &quot;app_control&quot;, app_control);
-&nbsp;&nbsp;&nbsp;&nbsp;conv_payload_set_string(payload_handle, &quot;reply&quot;, &quot;1&quot;);
+    conv_payload_set_app_control(payload_handle, "app_control", app_control);
+    conv_payload_set_string(payload_handle, "reply", "1");
 
-&nbsp;&nbsp;&nbsp;&nbsp;conv_service_publish(service_handle, NULL, payload_handle);
+    conv_service_publish(service_handle, NULL, payload_handle);
 }
 </pre>
-<p>The application control handle can be built <a href="../app_management/app_controls_n.htm">using the App Control functions</a>. In the payload, there is a special <code>&quot;reply&quot;</code> string field, which indicates if an application control reply is returned after the sent application control is processed remotely. In other words, if <code>&quot;reply&quot;</code> is <code>&quot;1&quot;</code>, the remote device processes the application control and sends the resulting application control to the original device. In this case, the listener callback in the original device waits for an application control reply. This can be useful in designing interactive applications, such as chatting applications, in which bi-directional interplay service is required. If <code>&quot;reply&quot;</code> is <code>&quot;0&quot;</code> or this field is omitted, no response is received in the listener.</p>
+<p>The application control handle can be built <a href="../app_management/app_controls_n.htm">using the App Control functions</a>. In the payload, there is a special <code>"reply"</code> string field, which indicates if an application control reply is returned after the sent application control is processed remotely. In other words, if <code>"reply"</code> is <code>"1"</code>, the remote device processes the application control and sends the resulting application control to the original device. In this case, the listener callback in the original device waits for an application control reply. This can be useful in designing interactive applications, such as chatting applications, in which bi-directional interplay service is required. If <code>"reply"</code> is <code>"0"</code> or this field is omitted, no response is received in the listener.</p>
 </li>
 </ol>
 
 <h2 id="payload">Predefined Payload Fields</h2>
-               
+
 <p>To send payloads, you can use various functions: use the <code>conv_service_start()</code> function to start a service, the <code>conv_service_read()</code> function to read information of the remote device, the <code>conv_service publish()</code> function to send data or messages, and the <code>conv_service_stop()</code> function to stop the service. The app communication service recognizes several predefined payload fields, including the <code>result_type</code>, which are used to specify the payload type or the quick response of some functions. The service implicitly adds these fields to the payload.</p>
 
 <div class="note">
@@ -555,9 +555,9 @@ app_control_service()
 <p>The success or failure result (including the correctness of the passcode input in the access control popup in the remote app control service) is delivered by the <code>conv_error_e</code> error parameter (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__FRAMEWORK.html#ga37d3a4410cd70ca1253f20ce4005ac60">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__D2D__CONVERGENCE__MANAGER__FRAMEWORK.html#ga37d3a4410cd70ca1253f20ce4005ac60">wearable</a> applications) of the listener callback.</p>
 
 <p align="center" class="Table"><strong>Table: Predefined fields for the app communication service payloads</strong></p>
-<table id="result_type"> 
-   <tbody> 
-    <tr> 
+<table id="result_type">
+   <tbody>
+    <tr>
      <th>Function</th>
         <th>Predefined payload field</th>
        </tr>
@@ -565,59 +565,59 @@ app_control_service()
                <td rowspan="3"><code>conv_service_start()</code></td>
                <td>Sent to the device that calls the function when connected to the remote server:
                        <ul>
-                               <li><code>&quot;result_type&quot;</code>: <code>&quot;onConnect&quot;</code></li>
-                               <li><code>&quot;client_is_host&quot;</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
-                               <li><code>&quot;client_connect_time&quot;</code>: Connection time</li>
-                               <li><code>&quot;client_id&quot;</code>: Unique client ID</li>
+                               <li><code>"result_type"</code>: <code>"onConnect"</code></li>
+                               <li><code>"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
+                               <li><code>"client_connect_time"</code>: Connection time</li>
+                               <li><code>"client_id"</code>: Unique client ID</li>
                        </ul>
                </td>
        </tr>
        <tr>
                <td>Sent to the device that calls the function when the application launch succeeds or fails:
                        <ul>
-                               <li><code>&quot;result_type&quot;</code>: <code>&quot;onStart&quot;</code></li>
+                               <li><code>"result_type"</code>: <code>"onStart"</code></li>
                        </ul>
                </td>
        </tr>
        <tr>
                <td>Sent to other clients connected to the remote server:
                        <ul>
-                               <li><code>&quot;result_type&quot;</code>: <code>&quot;onClientConnect&quot;</code></li>
-                               <li><code>&quot;client_is_host&quot;</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
-                               <li><code>&quot;client_connect_time&quot;</code>: Connection time</li>
-                               <li><code>&quot;client_id&quot;</code>: Unique client ID</li>
+                               <li><code>"result_type"</code>: <code>"onClientConnect"</code></li>
+                               <li><code>"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
+                               <li><code>"client_connect_time"</code>: Connection time</li>
+                               <li><code>"client_id"</code>: Unique client ID</li>
                        </ul>
                </td>
        </tr>
        <tr>
                <td><code>conv_service_publish()</code></td>
-               <td><code>&quot;result_type&quot;</code>: <code>&quot;onPublish&quot;</code></td>
+               <td><code>"result_type"</code>: <code>"onPublish"</code></td>
        </tr>
        <tr>
                <td rowspan="3"><code>conv_service_stop()</code></td>
                <td>Sent to the device which calls the function when the server application stops:
                        <ul>
-                               <li><code>&quot;result_type&quot;: &quot;onStop&quot;</code></li>
+                               <li><code>"result_type": "onStop"</code></li>
                        </ul>
                </td>
        </tr>
        <tr>
                <td>Sent to the device which calls the function when disconnected from the remote server:
                        <ul>
-                               <li><code>&quot;result_type&quot;</code>: <code>&quot;onDisconnect&quot;</code></li>
-                               <li><code>&quot;client_is_host&quot;</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
-                               <li><code>&quot;client_connect_time&quot;</code>: Connection time</li>
-                               <li><code>&quot;client_id&quot;</code>: Unique client ID</li>
+                               <li><code>"result_type"</code>: <code>"onDisconnect"</code></li>
+                               <li><code>"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
+                               <li><code>"client_connect_time"</code>: Connection time</li>
+                               <li><code>"client_id"</code>: Unique client ID</li>
                        </ul>
                </td>
        </tr>
        <tr>
                <td>Sent to other clients connected to the remote server:
                        <ul>
-                               <li><code>&quot;result_type&quot;</code>: <code>&quot;onClientDisconnect&quot;</code></li>
-                               <li><code>&quot;client_is_host&quot;</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
-                               <li><code>&quot;client_connect_time&quot;</code>: Connection time</li>
-                               <li><code>&quot;client_id&quot;</code>: Unique client ID</li>
+                               <li><code>"result_type"</code>: <code>"onClientDisconnect"</code></li>
+                               <li><code>"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</li>
+                               <li><code>"client_connect_time"</code>: Connection time</li>
+                               <li><code>"client_id"</code>: Unique client ID</li>
                        </ul>
                </td>
        </tr>
@@ -625,12 +625,12 @@ app_control_service()
                <td><code>conv_service_read()</code></td>
                <td>
                        <ul>
-                               <li><code>&quot;result_type&quot;</code>: <code>&quot;onRead&quot;</code></li>
-                               <li><code>&quot;read_type&quot;</code>: <code>&quot;getClients&quot;</code></li>
-                               <li><code>&quot;client_list&quot;</code>: <code>json-array</code> type client lists
-                               <p><code>[ {&quot;client_is_host&quot;</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</p>
-                               <p><code>&quot;client_connect_time&quot;</code>: Connection time</p>
-                               <p><code>&quot;client_id&quot;</code>: Unique client ID</p>
+                               <li><code>"result_type"</code>: <code>"onRead"</code></li>
+                               <li><code>"read_type"</code>: <code>"getClients"</code></li>
+                               <li><code>"client_list"</code>: <code>json-array</code> type client lists
+                               <p><code>[ {"client_is_host"</code>: Whether the device is a server application (remote server). The possible values are 0 and 1.</p>
+                               <p><code>"client_connect_time"</code>: Connection time</p>
+                               <p><code>"client_id"</code>: Unique client ID</p>
                                <p><code>}, ... ]</code></p>
                                </li>
                        </ul>
@@ -642,8 +642,8 @@ app_control_service()
                </td>
                <td>Sent to other clients and server applications, registered listener callback:
                        <ul>
-                               <li><code>&quot;result_type&quot;</code>: <code>&quot;onMessage&quot;</code></li>
-                               <li><code>&quot;from&quot;</code>: Unique client ID which sends the message</li>
+                               <li><code>"result_type"</code>: <code>"onMessage"</code></li>
+                               <li><code>"from"</code>: Unique client ID which sends the message</li>
                        </ul>
                </td>
        </tr>
@@ -651,30 +651,30 @@ app_control_service()
 </table>
 
 <p align="center" class="Table"><strong>Table: Predefined fields for receiving the remote app control service payloads</strong></p>
-<table> 
-   <tbody> 
-    <tr> 
+<table>
+   <tbody>
+    <tr>
                <th>Function</th>
                <th>Predefined fields</th>
        </tr>
        <tr>
                <td><code>conv_service_start()</code></td>
-               <td><code>&quot;result_type&quot;</code>: <code>&quot;onStart&quot;</code></td>
+               <td><code>"result_type"</code>: <code>"onStart"</code></td>
        </tr>
        <tr>
                <td><code>conv_service_publish()</code></td>
                <td>
                        <ul>
-                               <li><code>&quot;result_type&quot;</code>: <code>&quot;onPublish&quot;</code></li>
-                               <li><code>&quot;app_control_reply&quot;</code>: Application control data, only valid if the receiver replied with an <code>app_control</code>, which means that the sender sent a payload with a <code>&quot;reply&quot;</code> of <code>&quot;1&quot;</code>.</li>
-                               <li><code>&quot;app_control_request&quot;</code>: Requested application control data, only valid if the receiver replied with an <code>app_control</code> value, which means that the sender sent a payload with a <code>&quot;reply&quot;</code> of <code>&quot;1&quot;</code>.</li>
-                               <li><code>&quot;app_control_result&quot;</code>: The <code>app_control_result_e</code> value for the request, only valid if the receiver replied with a value, which means that the sender sent a payload with a <code>&quot;reply&quot;</code> of <code>&quot;1&quot;</code>.</li>
+                               <li><code>"result_type"</code>: <code>"onPublish"</code></li>
+                               <li><code>"app_control_reply"</code>: Application control data, only valid if the receiver replied with an <code>app_control</code>, which means that the sender sent a payload with a <code>"reply"</code> of <code>"1"</code>.</li>
+                               <li><code>"app_control_request"</code>: Requested application control data, only valid if the receiver replied with an <code>app_control</code> value, which means that the sender sent a payload with a <code>"reply"</code> of <code>"1"</code>.</li>
+                               <li><code>"app_control_result"</code>: The <code>app_control_result_e</code> value for the request, only valid if the receiver replied with a value, which means that the sender sent a payload with a <code>"reply"</code> of <code>"1"</code>.</li>
                        </ul>
                </td>
        </tr>
        <tr>
                <td><code>conv_service_stop()</code></td>
-               <td><code>&quot;result_type&quot;</code>: <code>&quot;onStop&quot;</code></td>
+               <td><code>"result_type"</code>: <code>"onStop"</code></td>
        </tr>
        </tbody>
 </table>
diff --git a/org.tizen.guides/html/native/connectivity/download_n.htm b/org.tizen.guides/html/native/connectivity/download_n.htm
index 5f2f11d..805d95d 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/download_n.htm
+++ b/org.tizen.guides/html/native/connectivity/download_n.htm
@@ -25,7 +25,7 @@
                        <li>Tizen 2.4 and Higher for Mobile</li>
                </ul>
         <p class="toc-title">Content</p>
-        <ul class="toc">             
+        <ul class="toc">
                        <li><a href="#state">Download States</a></li>
                        <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#download">Download Content from a URL</a></li>
@@ -38,37 +38,37 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-   
+
    <h1>Download</h1>
  <p>You can create and manage one or more download requests at a time. Each download process goes through a <a href="#state">set of states</a>, and you can manage the process though the states with specific functions.</p>
- 
+
 <p>This feature is supported in mobile applications only.</p>
- 
+
 <p>The following figure illustrates the user scenario for the download:</p>
 
 <ol>
 <li>When the user wants to download a file, you can <a href="#download">create a new download process</a>, configure the download URL or destination, and launch the process.</li>
 <li>During the download, you can pause, resume, or stop the process programmatically, or as a response to user requests. In addition, you can monitor the progress of the download process.</li>
 </ol>
- 
-  <p align="center"><strong>Figure: User scenario</strong></p> 
-  <p align="center"><img alt="User scenario" src="../../images/user_scenario.png" /></p> 
+
+  <p align="center"><strong>Figure: User scenario</strong></p>
+  <p align="center"><img alt="User scenario" src="../../images/user_scenario.png" /></p>
 
  <h2 id="state" name="state">Download States</h2>
- 
+
  <p>The following figure illustrates the various download states (such as READY and DOWNLOADING), and the functions (such as <code>download_start()</code>) that cause transitions between the states. The download states are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gae9d05ac4ab7a2ba2fe6b3c329d273810">download_state_e</a> enumerator.</p>
 
 <p>Each function can only be called when the download process is in a specific state. To avoid undefined behavior in the application, make sure that you handle every possible scenario in the code.</p>
 
-  <p align="center"><strong>Figure: Download states</strong></p> 
-  <p align="center"><img alt="Download states" src="../../images/download_state.png" /></p> 
+  <p align="center"><strong>Figure: Download states</strong></p>
+  <p align="center"><img alt="Download states" src="../../images/download_state.png" /></p>
 
 <p>When you stop the download:</p>
 <ul>
 <li>Use the <code>download_cancel()</code> function. It changes the download state to <code>DOWNLOAD_STATE_CANCELED</code>. From this state, you can restart the download with the <code>download_start()</code> function.</li>
 
 <li>After you stop a download, the download handle ID is stored for 48 hours (even if the device is powered off), allowing you to resume the download later on. If you have no need to resume the process later on, unload all data concerning the download handle from the memory with the <code>download_destroy()</code> function.</li>
-</ul> 
+</ul>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -109,7 +109,7 @@ error = download_set_progress_cb(download_id, progress_cb, &amp;content_size);
 <li>Set the download URL and destination.
 <p>Before the download can be started, set the URL source path for the download:</p>
 <pre class="prettyprint">
-error = download_set_url(download_id, &quot;http://tizen.org&quot;;
+error = download_set_url(download_id, "http://tizen.org";
 </pre>
 <p>You can also set the destination path and file name. If the values are not given, the default storage and an auto-generated file name are used. </p>
 <pre class="prettyprint">
@@ -117,7 +117,7 @@ char *data_path = app_get_data_path();
 error = download_set_destination(download_id, data_path);
 free(data_path);
 
-error = download_set_file_name(download_id, &quot;downloaded_file.bin&quot;);
+error = download_set_file_name(download_id, "downloaded_file.bin");
 </pre></li>
 
 <li>Set the download options:
@@ -150,15 +150,15 @@ error_code = download_get_network_type(download_id, &amp;value);
 <li>When clicking a completed notification message, the proper application for playing the downloaded content is launched. If there is no proper application, an error message is shown at the status tray.</li>
 <li>When clicking a failed notification message, the client application requesting the download is launched.</li>
 </ul>
-       
+
 <pre class="prettyprint">
 app_control_h app_control = NULL;
 error = app_control_create(&amp;app_control);
-error = app_control_set_app_id(app_control, &quot;org.tizen.tutorialdownload&quot;);
+error = app_control_set_app_id(app_control, "org.tizen.tutorialdownload");
 error =
-&nbsp;&nbsp;&nbsp;&nbsp;download_set_notification_app_control(download_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DOWNLOAD_NOTIFICATION_APP_CONTROL_TYPE_FAILED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control);
+    download_set_notification_app_control(download_id,
+                                          DOWNLOAD_NOTIFICATION_APP_CONTROL_TYPE_FAILED,
+                                          app_control);
 
 download_notification_type_e noti_type = 0;
 char *title = NULL;
@@ -167,9 +167,9 @@ error = download_get_notification_type(download_id, &amp;noti_type);
 error = download_get_notification_title(download_id, &amp;title);
 error = download_get_notification_description(download_id, &amp;desc);
 error =
-&nbsp;&nbsp;&nbsp;&nbsp;download_get_notification_app_control(download_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DOWNLOAD_NOTIFICATION_APP_CONTROL_TYPE_FAILED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;app_control);
+    download_get_notification_app_control(download_id,
+                                          DOWNLOAD_NOTIFICATION_APP_CONTROL_TYPE_FAILED,
+                                          &amp;app_control);
 error = app_control_destroy(app_control);
 </pre>
 </li>
@@ -209,15 +209,15 @@ download_state_e state = 0;
 content_size = 0;
 error = download_get_state(download_id, &amp;state);
 if (state == DOWNLOAD_STATE_DOWNLOADING)
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_get_content_size(download_id, &amp;content_size);
+    error = download_get_content_size(download_id, &amp;content_size);
 </pre></li>
 <li>The received parameter of the <code>progress_cb()</code> callback function contains the size of the data received in bytes. In this example, print out the value and the total download size.
 <pre class="prettyprint">
 static void
 progress_cb(int download_id, unsigned long long received, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;received: %llu of %llu&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;received, *((unsigned long long*)user_data));
+    dlog_print(DLOG_INFO, LOG_TAG, "received: %llu of %llu",
+               received, *((unsigned long long*)user_data));
 }
 </pre></li></ol></li>
 
@@ -229,7 +229,7 @@ download_error_e error_val = 0;
 error = download_get_error(download_id, &amp;error_val);
 </pre>
 <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#ga2d9ccc088c02cf1ab70879f1beda1cd1">download_error_e</a> enumeration defines the available error types.</p></li>
-  
+
 <li>Clean up.
 <p>When the registered download is no longer needed (the downloading is finished or has been canceled), delete it using the <code>download_destroy()</code> function. In addition, unset all callback functions.</p>
 <pre class="prettyprint">
@@ -237,7 +237,7 @@ download_unset_progress_cb(download_id);
 download_unset_state_changed_cb(download_id);
 error = download_destroy(download_id);
 </pre></li></ol>
-   
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/connectivity/http_n.htm b/org.tizen.guides/html/native/connectivity/http_n.htm
index 4476c4b..d3e4b40 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/http_n.htm
+++ b/org.tizen.guides/html/native/connectivity/http_n.htm
@@ -30,7 +30,7 @@
                        <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#session">Managing Sessions</a></li>
                        <li><a href="#transaction">Managing Transactions</a></li>
-               </ul>  
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__HTTP__MODULE.html">HTTP API for Mobile Native</a></li>
@@ -79,7 +79,7 @@ int ret = HTTP_ERROR_NONE;
 
 ret = http_init();
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_init failed: %d&quot;, ret);
+    printf("http_init failed: %d", ret);
 </pre>
 
 <p>When no longer needed, deinitialize the HTTP functionality:</p>
@@ -88,7 +88,7 @@ int ret = HTTP_ERROR_NONE;
 
 ret = http_deinit();
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_deinit failed: %d&quot;, ret);
+    printf("http_deinit failed: %d", ret);
 </pre>
 </li>
 </ol>
@@ -101,7 +101,7 @@ if (ret != HTTP_ERROR_NONE)
 <li>The pipelining mode (<code>HTTP_SESSION_MODE_PIPELINING</code>) means that multiple transactions can be processed concurrently. This mode can reduce the network latency.</li>
 </ul>
 <p></p>
- 
+
 <p>To manage HTTP sessions:</p>
 
 <ol><li>Create an HTTP session handle with the <code>http_session_create()</code> function:
@@ -111,7 +111,7 @@ http_session_h session = NULL;
 
 ret = http_session_create(HTTP_SESSION_MODE_NORMAL, &amp;session);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_session_create failed: %d&quot;, ret);
+    printf("http_session_create failed: %d", ret);
 </pre>
 </li>
 <li>Set the auto redirection for the session with the <code>http_session_set_auto_redirection()</code> function:
@@ -121,7 +121,7 @@ bool auto_redirect = true;
 
 ret = http_session_set_auto_redirection(session, auto_redirect);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_session_set_auto_redirection failed: %d&quot;, ret);
+    printf("http_session_set_auto_redirection failed: %d", ret);
 </pre>
 </li>
 <li>When no longer needed, destroy all transactions and the session:
@@ -130,11 +130,11 @@ int ret = HTTP_ERROR_NONE;
 
 ret = http_session_destroy_all_transactions(session);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_session_destroy_all_transactions failed: %d&quot;, ret);
+    printf("http_session_destroy_all_transactions failed: %d", ret);
 
 ret = http_session_destroy(&amp;session);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_session_destroy failed: %d&quot;, ret);
+    printf("http_session_destroy failed: %d", ret);
 </pre>
 </li>
 </ol>
@@ -159,7 +159,7 @@ int ret = HTTP_ERROR_NONE;
 http_transaction_h transaction = NULL;
 ret = http_session_open_transaction(session, HTTP_METHOD_GET, &amp;transaction);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_session_open_transaction failed: %d&quot;, ret);
+    printf("http_session_open_transaction failed: %d", ret);
 </pre>
 <p>The transaction handle is used to manage the request and response.</p>
 </li>
@@ -175,21 +175,21 @@ if (ret != HTTP_ERROR_NONE)
 /* Callback for receiving the response header */
 void
 header_cb(http_transaction_h transaction, char* header, size_t header_len,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data) {}
+          void* user_data) {}
 
 http_transaction_set_received_header_cb(transaction, header_cb, NULL);
 
 /* Callback for receiving the response body */
 void
 body_cb(http_transaction_h transaction, char* body, size_t size, size_t nmemb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data) {}
+        void* user_data) {}
 
 http_transaction_set_received_body_cb(transaction, body_cb, NULL);
 
 /* Callback for monitoring data uploads */
 void
 uploaded_cb(http_transaction_h transaction, char* body, int recommended_chunk,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data) {}
+            void* user_data) {}
 
 http_transaction_set_uploaded_cb(transaction, uploaded_cb, NULL);
 
@@ -212,11 +212,11 @@ http_transaction_set_aborted_cb(transaction, aborted_cb, NULL);
 <li>Set the request URI for the transaction:
 <pre class="prettyprint">
 int ret = HTTP_ERROR_NONE;
-char uri[1024] = &quot;www.example.com&quot;;
+char uri[1024] = "www.example.com";
 
 ret = http_transaction_request_set_uri(transaction, uri);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_transaction_request_set_uri failed: %d&quot;, ret);
+    printf("http_transaction_request_set_uri failed: %d", ret);
 </pre>
 </li>
 <li>Set the request method:
@@ -226,7 +226,7 @@ http_method_e method = HTTP_METHOD_GET;
 
 ret = http_transaction_request_set_method(transaction, method);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_transaction_request_set_method failed: %d&quot;, ret);
+    printf("http_transaction_request_set_method failed: %d", ret);
 </pre>
 </li>
 <li>Set the HTTP version of the transaction:
@@ -236,7 +236,7 @@ http_version_e version = HTTP_VERSION_1_1;
 
 ret = http_transaction_request_set_version(transaction, version);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_transaction_request_set_version failed: %d&quot;, ret);
+    printf("http_transaction_request_set_version failed: %d", ret);
 </pre>
 </li>
 <li>Submit the transaction for the defined request URI:
@@ -245,7 +245,7 @@ int ret = HTTP_ERROR_NONE;
 
 ret = http_transaction_submit(transaction);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_transaction_submit failed: %d&quot;, ret);
+    printf("http_transaction_submit failed: %d", ret);
 </pre>
 </li>
 </ol>
@@ -260,7 +260,7 @@ http_status_code_e status_code = -1;
 
 ret = http_transaction_response_get_status_code(transaction, &amp;status_code);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_transaction_response_get_status_code failed: %d&quot;, ret);
+    printf("http_transaction_response_get_status_code failed: %d", ret);
 </pre>
 </li>
 <li>Get the status version of the submitted transaction:
@@ -270,7 +270,7 @@ http_version_e version = -1;
 
 ret = http_transaction_response_get_version(transaction, &amp;version);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_transaction_response_get_version failed: %d&quot;, ret);
+    printf("http_transaction_response_get_version failed: %d", ret);
 </pre>
 </li>
 </ul>
@@ -281,7 +281,7 @@ int ret = HTTP_ERROR_NONE;
 
 ret = http_transaction_destroy(transaction);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_transaction_destroy failed: %d&quot;, ret);
+    printf("http_transaction_destroy failed: %d", ret);
 </pre>
 </li>
 </ol>
@@ -291,18 +291,18 @@ if (ret != HTTP_ERROR_NONE)
 <pre class="prettyprint">
 int ret = HTTP_ERROR_NONE;
 /* Request URI for HTTP GET */
-char uri[1024] = &quot;www.example.com&quot;;
+char uri[1024] = "www.example.com";
 /*
    Request URI for HTTPS GET:
-   char uri[1024] = &quot;https://httpbin.org/get&quot;;
+   char uri[1024] = "https://httpbin.org/get";
    Request URI and data for HTTP POST:
-   char uri[1024] = &quot;http://posttestserver.com/post.php&quot;;
-   const char* post_msg = &quot;name=tizen&amp;project=http&quot;;
+   char uri[1024] = "http://posttestserver.com/post.php";
+   const char* post_msg = "name=tizen&amp;project=http";
 */
 
 ret = http_session_create(HTTP_SESSION_MODE_NORMAL, &amp;session);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_session_create failed: %d&quot;, ret);
+    printf("http_session_create failed: %d", ret);
 
 /* Transaction for HTTP and HTTPS GET */
 ret = http_session_open_transaction(session, HTTP_METHOD_GET, &amp;transaction);
@@ -311,11 +311,11 @@ ret = http_session_open_transaction(session, HTTP_METHOD_GET, &amp;transaction);
    ret = http_session_open_transaction(session, HTTP_METHOD_POST, &amp;transaction);
 */
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_session_open_transaction failed: %d&quot;, ret);
+    printf("http_session_open_transaction failed: %d", ret);
 
 ret = http_transaction_request_set_uri(transaction, uri);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_transaction_request_set_uri failed: %d&quot;, ret);
+    printf("http_transaction_request_set_uri failed: %d", ret);
 
 /*
    Data management for HTTP POST:
@@ -325,7 +325,7 @@ if (ret != HTTP_ERROR_NONE)
 
 ret = http_transaction_submit(transaction);
 if (ret != HTTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;http_transaction_submit failed: %d&quot;, ret);
+    printf("http_transaction_submit failed: %d", ret);
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/connectivity/internet_download_n.htm b/org.tizen.guides/html/native/connectivity/internet_download_n.htm
index c657d76..bee8773 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/internet_download_n.htm
+++ b/org.tizen.guides/html/native/connectivity/internet_download_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Internet and Content Downloads</title>  
+       <title>Internet and Content Downloads</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,10 +28,10 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.training/html/native/feature/app_connectivity_n.htm">Creating Applications with Connectivity and Network</a></li> 
+                       <li><a href="../../../../org.tizen.training/html/native/feature/app_connectivity_n.htm">Creating Applications with Connectivity and Network</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Internet and Content Downloads</h1>
@@ -64,7 +64,7 @@
 
 <p>You can access Web pages and Web content in your application. You can also use various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/connectivity/iotcon_n.htm b/org.tizen.guides/html/native/connectivity/iotcon_n.htm
index b6d0a94..94d1947 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/iotcon_n.htm
+++ b/org.tizen.guides/html/native/connectivity/iotcon_n.htm
@@ -47,8 +47,8 @@
 
 <p><a href="https://www.iotivity.org/" target="_blank">IoTivity</a> offers seamless device-to-device connectivity to address the emerging needs of the Internet of Things (IoT) through the open source reference implementation of the OCF (Open Connectivity Foundation) standard specifications. IoT connectivity (Iotcon) provides the means of using IoTivity in Tizen.</p>
 
-<p align="center"><strong>Figure: IoTivity in Tizen</strong></p> 
-<p align="center"><img alt="IoTivity in Tizen" src="../../images/iotivity.png" /></p> 
+<p align="center"><strong>Figure: IoTivity in Tizen</strong></p>
+<p align="center"><img alt="IoTivity in Tizen" src="../../images/iotivity.png" /></p>
 
 <p>IoT connectivity handles the resources between a server and client. The server is responsible for creating and providing resources, and the client can access and control those resources through requests.</p>
 
@@ -76,7 +76,7 @@
 <p>You can use the client to get various information about the resource through the <code>iotcon_remote_resource_h</code> handle and the <code>iotcon_remote_resource_get_XXX()</code> functions. You can retrieve, for example, the resource URI path, host address, type, and interfaces. You can also retrieve the device ID, which defines the device to which the resource belongs. Different resources in the same device have the same device ID.</p>
 </li>
 
-<li>CRUDN request and response 
+<li>CRUDN request and response
 <p>The client can send various requests to the server resources using the Remote Resource API:</p>
 <ul>
 <li>GET request: Use the <code>iotcon_remote_resource_get()</code> function to read the resource information and <a href="#send_get">get a representation of the resource</a> from the server.</li>
@@ -87,19 +87,19 @@
 
 <p>The server receives the request, processes it using the <code>iotcon_request_handler_cb()</code> callback, and sends a response to the client using the <code>iotcon_response_send()</code> function of the Response API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__RESPONSE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__RESPONSE__MODULE.html">wearable</a> applications).</p>
 <p>The client can check the result and the response in the <code>iotcon_remote_resource_response_cb()</code> callback. If the result of the request differs from <code>IOTCON_ERROR_NONE</code>, the response information is not reliable.</p>
- 
-<p align="center"><strong>Figure: Requests and responses</strong></p> 
-<p align="center"><img alt="Requests and responses" src="../../images/iotivity_request.png" /></p>   
+
+<p align="center"><strong>Figure: Requests and responses</strong></p>
+<p align="center"><img alt="Requests and responses" src="../../images/iotivity_request.png" /></p>
 
 <p>If the server resource is observable, the client can register a callback with the <code>iotcon_remote_resource_observe_register()</code> function of the Remote Resource API to <a href="#observe">observe the resource</a>. When the resource state changes, the server notifies the client through the registered callback. Note that, depending on the network environment, the order in which the notifications are sent can be mixed. If the <code>observe_policy</code> (the second parameter of the registration function) is <code>IOTCON_OBSERVE_IGNORE_OUT_OF_ORDER</code>, the client only receives up-to-date notifications. Otherwise, it receives all notifications, including stale notifications.</p>
 <p>If the resource is not observable, the client cannot receive any notifications.</p>
 
-<p align="center"><strong>Figure: Observe and notify</strong></p> 
-<p align="center"><img alt="Observe and notify" src="../../images/iotivity_observe.png" /></p> 
+<p align="center"><strong>Figure: Observe and notify</strong></p>
+<p align="center"><img alt="Observe and notify" src="../../images/iotivity_observe.png" /></p>
 </li>
 
 <li>Resource representation
-<p>Resource representation is a snapshot of a resource at a particular time, representing the resource information exchanged in the request and response interactions between the server and client. The resource representation contains resource properties and the state of the resource.</p> 
+<p>Resource representation is a snapshot of a resource at a particular time, representing the resource information exchanged in the request and response interactions between the server and client. The resource representation contains resource properties and the state of the resource.</p>
 
 <p>To manage the representation, use the Representation API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__REPRESENTATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__REPRESENTATION__MODULE.html">wearable</a> applications):</p>
 <ul>
@@ -118,8 +118,8 @@
 <p>To use the IoTCon API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -144,7 +144,7 @@ iotcon_deinitialize();
 </li>
 </ol>
 
-<h2 id="register" name="register">Registering Resources</h2> 
+<h2 id="register" name="register">Registering Resources</h2>
 
 <p>To create and register resources:</p>
 
@@ -152,16 +152,16 @@ iotcon_deinitialize();
 <li>Create the resource types using the <code>iotcon_resource_types_create()</code> function. The resource type string can be added using the <code>iotcon_resource_types_add()</code> function.
 <pre class="prettyprint">
 int ret;
-const char *res_type = &quot;org.tizen.light&quot;;
+const char *res_type = "org.tizen.light";
 iotcon_resource_types_h res_types = NULL;
 
 ret = iotcon_resource_types_create(&amp;res_types);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = iotcon_resource_types_add(res_types, res_type);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 <li>Register the resource by calling the <code>iotcon_resource_create()</code> function.
@@ -171,13 +171,13 @@ if (IOTCON_ERROR_NONE != ret)
 <pre class="prettyprint">
 int res_interfaces = IOTCON_INTERFACE_DEFAULT;
 int res_properties = IOTCON_RESOURCE_DISCOVERABLE | IOTCON_RESOURCE_OBSERVABLE;
-const char *res_uri = &quot;/light/1&quot;;
+const char *res_uri = "/light/1";
 iotcon_resource_h resource = NULL;
 
 ret = iotcon_resource_create(res_uri, res_types, res_interfaces, res_properties,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_request_handler, NULL, &amp;resource);
+                             _request_handler, NULL, &amp;resource);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 <li>When no longer needed, destroy the resource types handle using the <code>iotcon_resource_types_destroy()</code> function:
@@ -187,31 +187,31 @@ iotcon_resource_types_destroy(resource_types);
 </li>
 </ol>
 
-<h2 id="find" name="find">Finding Resources</h2> 
+<h2 id="find" name="find">Finding Resources</h2>
 
 <p>To find resources:</p>
 <ol>
-<li>To find a resource, call the <code>iotcon_find_resource()</code> function. 
+<li>To find a resource, call the <code>iotcon_find_resource()</code> function.
 <p>In the function, set the host address, connectivity type (an <code>iotcon_connectivity_type_e</code> enumeration value in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#gad35385ec940df271d516337a17185453">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__COMMON__MODULE.html#gad35385ec940df271d516337a17185453">wearable</a> applications), query, secure flag, and the found callback function called whenever the resource is found during the timeout.</p>
 <p>The host address can be <code>IOTCON_MULTICAST_ADDRESS</code> for multicast.</p>
 <pre class="prettyprint">
 int ret;
 iotcon_query_h query;
-const char *res_type = &quot;org.tizen.light&quot;;
+const char *res_type = "org.tizen.light";
 
 ret = iotcon_query_create(&amp;query);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = iotcon_query_set_resource_type(query, res_type);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = iotcon_find_resource(IOTCON_MULTICAST_ADDRESS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IOTCON_CONNECTIVITY_IP | IOTCON_CONNECTIVITY_PREFER_UDP,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res_type, query, _found_cb, NULL);
+                           IOTCON_CONNECTIVITY_IP | IOTCON_CONNECTIVITY_PREFER_UDP,
+                           res_type, query, _found_cb, NULL);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 <li>To get the remote resource handle information, use the found callback registered in the <code>iotcon_find_resource()</code> function:
@@ -219,22 +219,22 @@ if (IOTCON_ERROR_NONE != ret)
 static bool
 _found_cb(iotcon_remote_resource_h resource, iotcon_error_e err, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *address;
-&nbsp;&nbsp;&nbsp;&nbsp;char *uri_path;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != err)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_remote_resource_get_host_address(resource, &amp;address);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;host_address: %s&quot;, address);
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_remote_resource_get_uri_path(resource, &amp;uri_path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;uri_path: %s&quot;, uri_path);
+    int ret;
+    char *address;
+    char *uri_path;
+
+    if (IOTCON_ERROR_NONE != err)
+        /* Error handling */
+
+    ret = iotcon_remote_resource_get_host_address(resource, &amp;address);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
+    dlog_print(DLOG_DEBUG, LOG_TAG, "host_address: %s", address);
+
+    ret = iotcon_remote_resource_get_uri_path(resource, &amp;uri_path);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
+    dlog_print(DLOG_DEBUG, LOG_TAG, "uri_path: %s", uri_path);
 }
 </pre>
 
@@ -244,13 +244,13 @@ _found_cb(iotcon_remote_resource_h resource, iotcon_error_e err, void *user_data
        The callback parameters are valid only within the callback function. Use the clone handle, if you want to use a parameter after the callback function.
 </div>
 </li>
-<li>To set the timeout interval (in seconds) for the asynchronous functions of the Client (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">wearable</a> applications) and Remote Resource (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">wearable</a> applications) APIs, use the <code>iotcon_set_timeout()</code> function:  
+<li>To set the timeout interval (in seconds) for the asynchronous functions of the Client (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__MODULE.html">wearable</a> applications) and Remote Resource (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__CLIENT__REMOTE__RESOURCE__MODULE.html">wearable</a> applications) APIs, use the <code>iotcon_set_timeout()</code> function:
 <pre class="prettyprint">
 int ret;
 
 ret = iotcon_set_timeout(10);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 
 <div class="note">
@@ -269,7 +269,7 @@ if (IOTCON_ERROR_NONE != ret)
 </li>
 </ol>
 
-<h2 id="send_get" name="send_get">Sending GET Requests</h2> 
+<h2 id="send_get" name="send_get">Sending GET Requests</h2>
 
 <p>To send GET requests to a server:</p>
 
@@ -281,14 +281,14 @@ static iotcon_remote_resource_h _light_resource = NULL;
 static bool
 _found_cb(iotcon_remote_resource_h resource, iotcon_error_e err, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != err)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (IOTCON_ERROR_NONE != err)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_remote_resource_clone(resource, &amp;_light_resource);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_remote_resource_clone(resource, &amp;_light_resource);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -299,7 +299,7 @@ int ret;
 
 ret = iotcon_remote_resource_get(_light_resource, NULL, _on_get, NULL);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 <li>On the server side, the <code>_request_handler()</code> callback function is called when a request arrives from the client. The resource and request handles are passed to the callback.
@@ -308,28 +308,28 @@ if (IOTCON_ERROR_NONE != ret)
 static void
 _request_handler(iotcon_resource_h resource, iotcon_request_h request, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_request_type_e req_type;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_response_result_e result = IOTCON_RESPONSE_ERROR;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_h repr = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_request_get_type(request, &amp;req_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (req_type) {
-&nbsp;&nbsp;&nbsp;&nbsp;case IOTCON_REQUEST_GET:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = _get_repr(resource, &amp;repr);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (0 == ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = IOTCON_RESPONSE_OK;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;type: %d&quot;, req_type);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;_send_response(request, repr, result);
-&nbsp;&nbsp;&nbsp;&nbsp;if (repr)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_destroy(repr);
+    int ret;
+    iotcon_request_type_e req_type;
+    iotcon_response_result_e result = IOTCON_RESPONSE_ERROR;
+    iotcon_representation_h repr = NULL;
+
+    ret = iotcon_request_get_type(request, &amp;req_type);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
+
+    switch (req_type) {
+    case IOTCON_REQUEST_GET:
+        ret = _get_repr(resource, &amp;repr);
+        if (0 == ret)
+            result = IOTCON_RESPONSE_OK;
+        break;
+    default:
+        dlog_print(DLOG_DEBUG, LOG_TAG, "type: %d", req_type);
+    }
+
+    _send_response(request, repr, result);
+    if (repr)
+        iotcon_representation_destroy(repr);
 }
 </pre>
 </li>
@@ -340,73 +340,73 @@ static int _light_brightness;
 int
 _get_repr(iotcon_resource_h resource, iotcon_representation_h *representation)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *uri_path;
-&nbsp;&nbsp;&nbsp;&nbsp;int interfaces;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_resource_types_h res_types;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_attributes_h attr;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_h repr;
+    int ret;
+    char *uri_path;
+    int interfaces;
+    iotcon_resource_types_h res_types;
+    iotcon_attributes_h attr;
+    iotcon_representation_h repr;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_representation_create(&amp;repr);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_representation_create(&amp;repr);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_attributes_create(&amp;attr);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_attributes_create(&amp;attr);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_resource_get_uri_path(resource, &amp;uri_path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_resource_get_uri_path(resource, &amp;uri_path);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_representation_set_uri_path(repr, uri_path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_representation_set_uri_path(repr, uri_path);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_attributes_add_int(attr, &quot;brightness&quot;, _light_brightness);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_attributes_add_int(attr, "brightness", _light_brightness);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_representation_set_attributes(repr, attr);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_attributes_destroy(attr);
+    ret = iotcon_representation_set_attributes(repr, attr);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
+    iotcon_attributes_destroy(attr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;*representation = repr;
+    *representation = repr;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
 <li>To send a response to the client, use the <code>iotcon_response_send()</code> function.
-<p>In the function, set the response handle that can include the mandatory response result and optional representation.</p> 
+<p>In the function, set the response handle that can include the mandatory response result and optional representation.</p>
 <pre class="prettyprint">
 void
 _send_response(iotcon_request_h request, iotcon_representation_h repr,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iotcon_response_result_e result)
+               iotcon_response_result_e result)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_response_h resp;
+    int ret;
+    iotcon_response_h resp;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_response_create(request, &amp;resp);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_response_create(request, &amp;resp);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_response_set_result(resp, result);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_response_set_result(resp, result);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (repr) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_response_set_representation(resp, repr);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (repr) {
+        ret = iotcon_response_set_representation(resp, repr);
+        if (IOTCON_ERROR_NONE != ret)
+            /* Error handling */
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_response_send(resp);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_response_send(resp);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_response_destroy(resp);
+    iotcon_response_destroy(resp);
 }
 </pre>
 </li>
@@ -415,44 +415,44 @@ _send_response(iotcon_request_h request, iotcon_representation_h repr,
 static void
 _parse_representation(iotcon_representation_h repr)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int brightness;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_attributes_h attr = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_representation_get_attributes(repr, &amp;attr);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_attributes_get_int(attr, &quot;brightness&quot;, &amp;brightness);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Brightness: %d&quot;, brightness);
+    int ret;
+    int brightness;
+    iotcon_attributes_h attr = NULL;
+
+    ret = iotcon_representation_get_attributes(repr, &amp;attr);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
+
+    ret = iotcon_attributes_get_int(attr, "brightness", &amp;brightness);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Brightness: %d", brightness);
 }
 
 static void
 _on_get(iotcon_remote_resource_h resource, iotcon_error_e err,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iotcon_request_type_e request_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iotcon_response_h response, void *user_data)
+        iotcon_request_type_e request_type,
+        iotcon_response_h response, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_h repr;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_response_result_e result;
+    int ret;
+    iotcon_representation_h repr;
+    iotcon_response_result_e result;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != err)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (IOTCON_ERROR_NONE != err)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_response_get_result(response, &amp;result);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_response_get_result(response, &amp;result);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_RESPONSE_OK != result)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (IOTCON_RESPONSE_OK != result)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_response_get_representation(response, &amp;repr);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_response_get_representation(response, &amp;repr);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;_parse_representation(repr);
+    _parse_representation(repr);
 }
 </pre>
 </li>
@@ -471,24 +471,24 @@ iotcon_attributes_h attr;
 
 ret = iotcon_representation_create(&amp;repr);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = iotcon_attributes_create(&amp;attr);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = iotcon_attributes_add_int(attr, &quot;brightness&quot;, 20);
+ret = iotcon_attributes_add_int(attr, "brightness", 20);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = iotcon_representation_set_attributes(repr, attr);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 iotcon_attributes_destroy(attr);
 
 ret = iotcon_remote_resource_put(_light_resource, repr, NULL, _on_put, NULL);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 iotcon_representation_destroy(repr);
 </pre>
@@ -499,53 +499,53 @@ iotcon_representation_destroy(repr);
 static void
 _handle_put(iotcon_request_h request)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int value;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_h repr;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_attributes_h attr;
+    int ret;
+    int value;
+    iotcon_representation_h repr;
+    iotcon_attributes_h attr;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_request_get_representation(request, &amp;repr);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_request_get_representation(request, &amp;repr);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_representation_get_attributes(repr, &amp;attr);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_representation_get_attributes(repr, &amp;attr);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_attributes_get_bool(attr, &quot;brightness&quot;, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_attributes_get_bool(attr, "brightness", &amp;value);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;_light_brightness = value;
+    _light_brightness = value;
 }
 
 static void
 _request_handler(iotcon_resource_h resource, iotcon_request_h request, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_request_type_e req_type;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_response_result_e result = IOTCON_RESPONSE_ERROR;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_h repr = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_request_get_request_type(request, &amp;req_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (req_type) {
-&nbsp;&nbsp;&nbsp;&nbsp;case IOTCON_REQUEST_PUT:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_handle_put(request);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = _get_repr(resource, &amp;repr);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (0 == ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = IOTCON_RESPONSE_OK;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;type: %d&quot;, req_type);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;_send_response(request, repr, result);
-&nbsp;&nbsp;&nbsp;&nbsp;if (repr)
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_destroy(repr);
+    int ret;
+    iotcon_request_type_e req_type;
+    iotcon_response_result_e result = IOTCON_RESPONSE_ERROR;
+    iotcon_representation_h repr = NULL;
+
+    ret = iotcon_request_get_request_type(request, &amp;req_type);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
+
+    switch (req_type) {
+    case IOTCON_REQUEST_PUT:
+        _handle_put(request);
+        ret = _get_repr(resource, &amp;repr);
+        if (0 == ret)
+            result = IOTCON_RESPONSE_OK;
+        break;
+    default:
+        dlog_print(DLOG_DEBUG, LOG_TAG, "type: %d", req_type);
+    }
+
+    _send_response(request, repr, result);
+    if (repr)
+
+        iotcon_representation_destroy(repr);
 }
 </pre>
 </li>
@@ -553,33 +553,33 @@ _request_handler(iotcon_resource_h resource, iotcon_request_h request, void *dat
 <pre class="prettyprint">
 static void
 _on_put(iotcon_remote_resource_h resource, iotcon_error_e err,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iotcon_request_type_e request_type, iotcon_response_h response, void *user_data)
+        iotcon_request_type_e request_type, iotcon_response_h response, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_h repr;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_response_result_e result;
+    int ret;
+    iotcon_representation_h repr;
+    iotcon_response_result_e result;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != err)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (IOTCON_ERROR_NONE != err)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_response_get_result(response, &amp;result);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_response_get_result(response, &amp;result);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_RESPONSE_OK != result)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (IOTCON_RESPONSE_OK != result)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_response_get_representation(response, &amp;repr);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_response_get_representation(response, &amp;repr);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;_parse_representation(repr);
+    _parse_representation(repr);
 }
 </pre>
 </li>
 </ol>
 
-<h2 id="observe" name="observe">Observing Resources</h2> 
+<h2 id="observe" name="observe">Observing Resources</h2>
 
 <p>To monitor the changes in a resource:</p>
 <ol>
@@ -588,63 +588,63 @@ _on_put(iotcon_remote_resource_h resource, iotcon_error_e err,
 int ret;
 
 ret = iotcon_remote_resource_observe_register(_light_resource,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IOTCON_OBSERVE_IGNORE_OUT_OF_ORDER,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, _observe_cb, NULL);
+                                              IOTCON_OBSERVE_IGNORE_OUT_OF_ORDER,
+                                              NULL, _observe_cb, NULL);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
-<li>On the server side, the request handler callback is called when the observe request arrives from the client. To manage the observers, use the <code>iotcon_observers_h</code> handle. 
+<li>On the server side, the request handler callback is called when the observe request arrives from the client. To manage the observers, use the <code>iotcon_observers_h</code> handle.
 <pre class="prettyprint">
 static iotcon_observers_h _observers;
 
 static void
 _handle_observe(iotcon_request_h request, bool is_register)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int observe_id;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_request_get_observe_id(request, &amp;observe_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (is_register) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == _observers) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_observers_create(&amp;_observers);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_observers_add(_observers, observe_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_observers_remove(_observers, observe_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret;
+    int observe_id;
+
+    ret = iotcon_request_get_observe_id(request, &amp;observe_id);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
+
+    if (is_register) {
+        if (NULL == _observers) {
+            ret = iotcon_observers_create(&amp;_observers);
+            if (IOTCON_ERROR_NONE != ret)
+                /* Error handling */
+        }
+        ret = iotcon_observers_add(_observers, observe_id);
+        if (IOTCON_ERROR_NONE != ret)
+            /* Error handling */
+    } else {
+        ret = iotcon_observers_remove(_observers, observe_id);
+        if (IOTCON_ERROR_NONE != ret)
+            /* Error handling */
+    }
 }
 
 static void
 _request_handler(iotcon_resource_h resource, iotcon_request_h request, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_observe_type_e observe_type;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_request_get_observe_type(request, &amp;observe_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (observe_type) {
-&nbsp;&nbsp;&nbsp;&nbsp;case IOTCON_OBSERVE_REGISTER:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_handle_observe(request, true);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case IOTCON_OBSERVE_DEREGISTER:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_handle_observe(request, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case IOTCON_OBSERVE_NO_TYPE:
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;type: %d&quot;, observe_type);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret;
+    iotcon_observe_type_e observe_type;
+
+    ret = iotcon_request_get_observe_type(request, &amp;observe_type);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
+
+    switch (observe_type) {
+    case IOTCON_OBSERVE_REGISTER:
+        _handle_observe(request, true);
+        break;
+    case IOTCON_OBSERVE_DEREGISTER:
+        _handle_observe(request, false);
+        break;
+    case IOTCON_OBSERVE_NO_TYPE:
+    default:
+        dlog_print(DLOG_DEBUG, LOG_TAG, "type: %d", observe_type);
+    }
 }
 </pre>
 </li>
@@ -655,33 +655,33 @@ iotcon_representation_h repr = NULL;
 
 ret = _get_repr(resource, &amp;repr);
 if (0 != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = iotcon_resource_notify(resource, _observers, repr, IOTCON_QOS_HIGH);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 if (repr)
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_destroy(repr);
+    iotcon_representation_destroy(repr);
 </pre>
 </li>
 <li>On the client side, the <code>_observe_cb()</code> callback is called when the notify function is called from the server side. The remote resource handle, sequence number, and response handle are passed to the callback.
 <pre class="prettyprint">
 static void
 _observe_cb(iotcon_remote_resource_h resource, iotcon_error_e err,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int sequence_number, iotcon_response_h response, void *user_data)
+            int sequence_number, iotcon_response_h response, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;iotcon_representation_h repr;
+    int ret;
+    iotcon_representation_h repr;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != err)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;sequence: %d&quot;, sequence_number);
+    if (IOTCON_ERROR_NONE != err)
+        /* Error handling */
+    dlog_print(DLOG_DEBUG, LOG_TAG, "sequence: %d", sequence_number);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = iotcon_response_get_representation(response, &amp;repr);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = iotcon_response_get_representation(response, &amp;repr);
+    if (IOTCON_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;_parse_representation(repr);
+    _parse_representation(repr);
 }
 </pre>
 </li>
@@ -691,7 +691,7 @@ int ret;
 
 ret = iotcon_remote_resource_observe_deregister(_light_resource);
 if (IOTCON_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 </ol>
diff --git a/org.tizen.guides/html/native/connectivity/mtp_n.htm b/org.tizen.guides/html/native/connectivity/mtp_n.htm
index c4e2db5..8e98f5d 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/mtp_n.htm
+++ b/org.tizen.guides/html/native/connectivity/mtp_n.htm
@@ -57,7 +57,7 @@
 <ul>
 <li>MTP device is a device that supports MTP. It has an MTP responder role and 1 or more MTP storages.</li>
 <li>MTP storage is the storage in the MTP device. It has zero or more MTP objects.</li>
-<li>MTP object is the actual file. Each file in the device has a unique handle called &quot;object handle&quot;. (The handle is not unique in each storage.)
+<li>MTP object is the actual file. Each file in the device has a unique handle called "object handle". (The handle is not unique in each storage.)
 <p>The MTP object has a parent object, so it can indicate a file hierarchy. If the parent object is 0, the object is in the root of the storage.</p></li>
 </ul>
 
@@ -71,17 +71,17 @@
 <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__DEVICEINFO__MODULE.html">MTP Device Information</a> API allows you to <a href="#device_info">obtain various device details</a>, such as the device manufacturer name, model name, serial number, and version.</p></li>
 <li>Retrieving storage information
 <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__STORAGEINFO__MODULE.html">MTP Storage Information</a> API allows you to <a href="#storage_info">obtain various storage details</a>, such as the storage free space, description, and type.</p></li>
-<li>Retrieving object information 
+<li>Retrieving object information
 <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__OBJECTINFO__MODULE.html">MTP Object Information</a> API allows you to <a href="#object_info">obtain various object details</a>, such as the object format, name, and size.</p></li>
 </ul>
 
 <p>The MTP API can be used in other profiles, but it is most popular in the TV profile.</p>
 
 <p>The internal implementation of the MTP references the <a href="http://www.usb.org/developers/docs/devclass_docs/MTPv1_1.zip" target="_blank">MTP specification</a> and uses <a href="http://libmtp.sourceforge.net/" target="_blank">LIBMTP</a>.</p>
-  
+
     <div class="note">
         <strong>Note</strong>
-        Currently, the MTP API has the following limitations in Tizen 3.0: 
+        Currently, the MTP API has the following limitations in Tizen 3.0:
 <ul><li>Only the PTP subset of the MTP is supported.</li>
 <li>The transportation layer is possible only through USB.</li></ul>
     </div>
@@ -94,11 +94,11 @@
 <p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__MODULE.html">MTP</a> API, the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/mtp&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To store a file if the input or output path leads to a media storage--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/mediastorage&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To store a file if the input or output path leads to an external storage--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/externalstorage&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/mtp&lt;/privilege&gt;
+   &lt;!--To store a file if the input or output path leads to a media storage--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/mediastorage&lt;/privilege&gt;
+   &lt;!--To store a file if the input or output path leads to an external storage--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/externalstorage&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -115,15 +115,15 @@
 int
 manager_test_initialize(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_initialize();
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == MTP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;Initialize successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;Initialize failed, ret [%d]&quot;, ret);
+    ret = mtp_initialize();
+    if (ret == MTP_ERROR_NONE)
+        dlog_print("Initialize successful");
+    else
+        dlog_print("Initialize failed, ret [%d]", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 </li>
@@ -133,12 +133,12 @@ manager_test_initialize(void)
 int
 manager_test_deinitialize(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_deinitialize();
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: deinitialize&quot;, ret);
+    ret = mtp_deinitialize();
+    dlog_print("ret[%d]: deinitialize", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 </li>
@@ -148,52 +148,52 @@ manager_test_deinitialize(void)
 
 <p>To get the MTP devices connected to the MTP initiator, retrieve the MTP device list with the <code>mtp_get_devices()</code> function.</p>
 
-<p>To select the device you want, retrieve information about the devices in the device list with the <code>mtp_deviceinfo_get_XXX()</code> functions. The following example retrieves the manufacturer (for example, &quot;Samsung Electronics Co., Ltd.&quot;) and model name (for example, &quot;SM-A700L&quot;) for each device in the list.</p>
+<p>To select the device you want, retrieve information about the devices in the device list with the <code>mtp_deviceinfo_get_XXX()</code> functions. The following example retrieves the manufacturer (for example, "Samsung Electronics Co., Ltd.") and model name (for example, "SM-A700L") for each device in the list.</p>
 
 <pre class="prettyprint">
 int
 manager_test_get_devices(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int bus_location = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int device_number = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int device_count;
-&nbsp;&nbsp;&nbsp;&nbsp;mtp_device_h *mtp_devices = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
+    int i;
+    int ret = 0;
+    int bus_location = 0;
+    int device_number = 0;
+    int device_count;
+    mtp_device_h *mtp_devices = NULL;
+    char *name = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_get_devices(&amp;mtp_devices, &amp;device_count);
+    ret = mtp_get_devices(&amp;mtp_devices, &amp;device_count);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MTP_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;mtp_get_devices failed!!!&quot;);
+    if (ret != MTP_ERROR_NONE) {
+        dlog_print("mtp_get_devices failed!!!");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (device_count == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;device does not exist!!!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;END();
+    if (device_count == 0) {
+        dlog_print("device does not exist!!!");
+        END();
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; device_count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;mtp_device[%d] handle - %d&quot;, i, mtp_devices[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_deviceinfo_get_manufacturer_name(mtp_devices[i], &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_deviceinfo_get_model_name(mtp_devices[i], &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_free(name);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    for (i = 0; i &lt; device_count; i++) {
+        dlog_print("mtp_device[%d] handle - %d", i, mtp_devices[i]);
+        ret = mtp_deviceinfo_get_manufacturer_name(mtp_devices[i], &amp;name);
+        g_free(name);
+        ret = mtp_deviceinfo_get_model_name(mtp_devices[i], &amp;name);
+        g_free(name);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;Select first device&quot;);
+    dlog_print("Select first device");
 
-&nbsp;&nbsp;&nbsp;&nbsp;mtp_device = mtp_devices[0];
+    mtp_device = mtp_devices[0];
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: 1st mtp device [%d]&quot;, ret, mtp_device);
+    dlog_print("ret[%d]: 1st mtp device [%d]", ret, mtp_device);
 
-&nbsp;&nbsp;&nbsp;&nbsp;END();
+    END();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -209,16 +209,16 @@ mtp_device_h mtp_device; /* Get this variable using mtp_get_devices() */
 int
 deviceinfo_test_get_serialnumber(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *serial_number = NULL;
+    int ret = 0;
+    char *serial_number = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_deviceinfo_get_serial_number(mtp_device, &amp;serial_number);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: serialnumber[%s]&quot;, ret, serial_number);
+    ret = mtp_deviceinfo_get_serial_number(mtp_device, &amp;serial_number);
+    dlog_print("ret[%d]: serialnumber[%s]", ret, serial_number);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (serial_number == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(serial_number);
+    if (serial_number == NULL)
+        free(serial_number);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -237,24 +237,24 @@ mtp_device_h mtp_device; /* Get this variable using mtp_get_devices() */
 int
 manager_test_get_storages(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;mtp_storage_h *mtp_storages = NULL;
+    mtp_storage_h *mtp_storages = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_get_storages(mtp_device, &amp;mtp_storages, &amp;storage_count);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: storage_count[%d]&quot;, ret, storage_count);
+    ret = mtp_get_storages(mtp_device, &amp;mtp_storages, &amp;storage_count);
+    dlog_print("ret[%d]: storage_count[%d]", ret, storage_count);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (storage_count == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;storage does not exist!!!&quot;);
+    if (storage_count == 0) {
+        dlog_print("storage does not exist!!!");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; storage_count; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;mtp storage %d [%d]&quot;, i, mtp_storages[i]);
+    for (i = 0; i &lt; storage_count; i++)
+        dlog_print("mtp storage %d [%d]", i, mtp_storages[i]);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (mtp_storages != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(mtp_storages);
+    if (mtp_storages != NULL)
+        free(mtp_storages);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -271,16 +271,16 @@ mtp_storage_h mtp_storage; /* Get this variable using mtp_get_storages() */
 int
 storageinfo_test_get_description(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *description = NULL;
+    int ret = 0;
+    char *description = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_storageinfo_get_description(mtp_device, mtp_storage, &amp;description);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: description[%s]&quot;, ret, description);
+    ret = mtp_storageinfo_get_description(mtp_device, mtp_storage, &amp;description);
+    dlog_print("ret[%d]: description[%s]", ret, description);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (description != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(description);
+    if (description != NULL)
+        free(description);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -303,32 +303,32 @@ mtp_storage_h mtp_storage;
 int
 manager_test_get_object_handles(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;mtp_object_h *folder_list;
-&nbsp;&nbsp;&nbsp;&nbsp;mtp_object_h *file_list;
-&nbsp;&nbsp;&nbsp;&nbsp;int folder_count;
-&nbsp;&nbsp;&nbsp;&nbsp;int file_count;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_get_object_handles(mtp_device, mtp_storage, MTP_FILETYPE_FOLDER,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, &amp;folder_list, &amp;folder_count);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: folder_count in root [%d]&quot;, ret, folder_count);
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; folder_count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_objectinfo_get_file_name(mtp_device, folder_list[i], &amp;folder_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: object handle [%d], folder name [%s]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret, folder_list[i], folder_name);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_get_object_handles(mtp_device, mtp_storage, MTP_FILETYPE_JPEG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mtp_object, &amp;file_list, &amp;file_count);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: file_count in root [%d]&quot;, ret, file_count);
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; file_count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_objectinfo_get_file_name(mtp_device, file_list[i], &amp;file_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: object handle [%d] file name [%s]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret, file_list[i], file_name);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    mtp_object_h *folder_list;
+    mtp_object_h *file_list;
+    int folder_count;
+    int file_count;
+
+    ret = mtp_get_object_handles(mtp_device, mtp_storage, MTP_FILETYPE_FOLDER,
+                                 0, &amp;folder_list, &amp;folder_count);
+    dlog_print("ret[%d]: folder_count in root [%d]", ret, folder_count);
+
+    for (i = 0; i &lt; folder_count; i++) {
+        ret = mtp_objectinfo_get_file_name(mtp_device, folder_list[i], &amp;folder_name);
+        dlog_print("ret[%d]: object handle [%d], folder name [%s]",
+                   ret, folder_list[i], folder_name);
+    }
+
+    ret = mtp_get_object_handles(mtp_device, mtp_storage, MTP_FILETYPE_JPEG,
+                                 mtp_object, &amp;file_list, &amp;file_count);
+    dlog_print("ret[%d]: file_count in root [%d]", ret, file_count);
+
+    for (i = 0; i &lt; file_count; i++) {
+        ret = mtp_objectinfo_get_file_name(mtp_device, file_list[i], &amp;file_name);
+        dlog_print("ret[%d]: object handle [%d] file name [%s]",
+                   ret, file_list[i], file_name);
+    }
+
+    return ret;
 }
 </pre>
 
@@ -353,16 +353,16 @@ mtp_object_h mtp_object; /* Get this variable using mtp_get_object_handles() */
 int
 objectinfo_test_get_filename(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
+    int ret = 0;
+    char *name = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_objectinfo_get_file_name(mtp_device, mtp_object, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: object id[%d] filename[%s]&quot;, ret, mtp_object, name);
+    ret = mtp_objectinfo_get_file_name(mtp_device, mtp_object, &amp;name);
+    dlog_print("ret[%d]: object id[%d] filename[%s]", ret, mtp_object, name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (name != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(name);
+    if (name != NULL)
+        free(name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -380,14 +380,14 @@ mtp_object_h mtp_object_handle;
 int
 manager_test_get_object(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char filepath[100] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(filepath, 100, &quot;/opt/usr/media/Downloads/JpegObject_%d.jpg&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mtp_object_handle);
+    char filepath[100] = {0,};
+    snprintf(filepath, 100, "/opt/usr/media/Downloads/JpegObject_%d.jpg",
+             mtp_object_handle);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_get_object(mtp_device, mtp_object_handle, filepath);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: input id[%d]&quot;, ret, mtp_object_handle);
+    ret = mtp_get_object(mtp_device, mtp_object_handle, filepath);
+    dlog_print("ret[%d]: input id[%d]", ret, mtp_object_handle);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 </li>
@@ -400,14 +400,14 @@ mtp_object_h mtp_object_handle;
 int
 manager_test_get_object(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char filepath[100] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(filepath, 100, &quot;/opt/usr/media/Downloads/JpegObject_%d.jpg&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mtp_object_handle);
+    char filepath[100] = {0,};
+    snprintf(filepath, 100, "/opt/usr/media/Downloads/JpegObject_%d.jpg",
+             mtp_object_handle);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_get_thumbnail(mtp_device, mtp_object_handle, filepath);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: input id[%d]&quot;, ret, mtp_object_handle);
+    ret = mtp_get_thumbnail(mtp_device, mtp_object_handle, filepath);
+    dlog_print("ret[%d]: input id[%d]", ret, mtp_object_handle);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 </li>
@@ -431,36 +431,36 @@ manager_test_get_object(void)
 void
 __test_mtp_event_cb(mtp_event_e state, int event_parameter, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;state [%d]: %d&quot;, state, event_parameter);
-&nbsp;&nbsp;&nbsp;&nbsp;if (state == MTP_EVENT_DEVICE_ADDED || state == MTP_EVENT_DEVICE_REMOVED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mtp_device_h mtp_device = (mtp_device_h) event_parameter;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (state == MTP_EVENT_STORAGE_ADDED || state == MTP_EVENT_STORAGE_REMOVED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mtp_storage_h mtp_storage = (mtp_storage_h) event_parameter;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (state == MTP_EVENT_OBJECT_ADDED || state == MTP_EVENT_OBJECT_ADDED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mtp_object_h mtp_object = (mtp_object_h) event_parameter;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (state == MTP_EVENT_TURNED_OFF) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_deinitialize();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;ret[%d]: Terminated daemon&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret = 0;
+    dlog_print("state [%d]: %d", state, event_parameter);
+    if (state == MTP_EVENT_DEVICE_ADDED || state == MTP_EVENT_DEVICE_REMOVED) {
+        mtp_device_h mtp_device = (mtp_device_h) event_parameter;
+        /* Do something */
+    } else if (state == MTP_EVENT_STORAGE_ADDED || state == MTP_EVENT_STORAGE_REMOVED) {
+        mtp_storage_h mtp_storage = (mtp_storage_h) event_parameter;
+        /* Do something */
+    } else if (state == MTP_EVENT_OBJECT_ADDED || state == MTP_EVENT_OBJECT_ADDED) {
+        mtp_object_h mtp_object = (mtp_object_h) event_parameter;
+        /* Do something */
+    } else if (state == MTP_EVENT_TURNED_OFF) {
+        ret = mtp_deinitialize();
+        dlog_print("ret[%d]: Terminated daemon", ret);
+    } else {
+        /* Error handling */
+    }
 }
 
 int
 application_test_event_callback(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = mtp_add_mtp_event_cb(__test_mtp_event_cb, NULL);
+    ret = mtp_add_mtp_event_cb(__test_mtp_event_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
-  
+
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/native/connectivity/nfc_n.htm b/org.tizen.guides/html/native/connectivity/nfc_n.htm
index b5f8e41..0753df3 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/nfc_n.htm
+++ b/org.tizen.guides/html/native/connectivity/nfc_n.htm
@@ -42,7 +42,7 @@
                                        <li><a href="#prepare_p2p">Preparing NFC P2P</a></li>
                                        <li><a href="#send">Sending and Receiving a Message through NFC P2P</a></li>
                                </ul>
-                       </li>                   
+                       </li>
                </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -73,7 +73,7 @@
 </ul>
 </li>
     <li>NDEF support
-               
+
 <p>The NFC Data Exchange Format (NDEF) is a packet message format used in the reader/writer and peer-to-peer modes.</p>
 
 <p>With the NDEF API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">wearable</a> applications), you can:</p>
@@ -94,7 +94,7 @@
     <li>Write an NDEF message to a tag.</li>
     <li>Format a tag for using NDEF.</li>
     <li>Handle type-specific tag operations (currently only MIFARE).</li>
-</ul>  
+</ul>
     </li>
     <li>Peer-to-peer mode
        <p>With the Peer to Peer API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">wearable</a> applications), you can:</p>
@@ -109,9 +109,9 @@
                <p>The card emulation mode allows an NFC device to <a href="#cardemulation">function as a smart card</a>. The mode provides access to secure elements (SEs).</p>
 <p>The NFC controller in the device routes all data from the reader directly to the secure element, and an applet handles all of the data in the SE. The user does not participate at all in the operation.</p>
 
-<p align="center"><strong>Figure: Traditional card emulation</strong></p> 
-<p align="center"> <img alt="Traditional card emulation" src="../../images/nfc_card_emulation.png" /> </p> 
-               
+<p align="center"><strong>Figure: Traditional card emulation</strong></p>
+<p align="center"> <img alt="Traditional card emulation" src="../../images/nfc_card_emulation.png" /> </p>
+
 <p>With the Card Emulation API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">wearable</a> applications), you can:</p>
 
 <ul>
@@ -129,11 +129,11 @@
                        <li>Security problems can occur in some Card Emulation APIs. The security level can be determined by the manufacturer usage. If a security issue occurs, contact the product manufacturer. For more information on the security levels, see the <a href="http://www.gsma.com/digitalcommerce/wp-content/uploads/2013/12/GSMA-NFC05-NFC-Handset-APIs-Requirement-Specification-version-4-1.pdf" target ="blank">GSMA specification</a>.</li></ul>
     </div>
     </li>
-       <li>Host-based card emulation (HCE) 
-<p>HCE is on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element (SE). The data is routed to the user space on which Tizen applications reside, instead of routing the data to a secure element.</p> 
- 
-<p align="center"><strong>Figure: Card emulation with HCE</strong></p> 
-<p align="center"> <img alt="Card emulation with HCE" src="../../images/nfc_card_emulation_hce.png" /> </p>  
+       <li>Host-based card emulation (HCE)
+<p>HCE is on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element (SE). The data is routed to the user space on which Tizen applications reside, instead of routing the data to a secure element.</p>
+
+<p align="center"><strong>Figure: Card emulation with HCE</strong></p>
+<p align="center"> <img alt="Card emulation with HCE" src="../../images/nfc_card_emulation_hce.png" /> </p>
 <p>HCE allows you to create your own card emulation system and bypass the SE. This approach brings 2 advantages:</p>
 
 <ul>
@@ -143,12 +143,12 @@
 <p>To understand HCE behavior, mainly how data is internally routed to the correct application, consider how Tizen handles NFC routing:</p>
 
 <ol><li>Assume that the user has an HCE application or installs one.
-<p>The application has a &quot;AID&quot; value, which is stored in NFC routing table (blue arrow in the following figure).</p></li>
-<li>When the NFC reader attempts card emulation, the NFC controller checks the routing table to find the application to which the data is sent for emulation (red arrows in the following figure).</li> 
+<p>The application has a "AID" value, which is stored in NFC routing table (blue arrow in the following figure).</p></li>
+<li>When the NFC reader attempts card emulation, the NFC controller checks the routing table to find the application to which the data is sent for emulation (red arrows in the following figure).</li>
 <li>When the application is uninstalled, the AID value is deleted from the routing table.</li></ol>
 
-<p align="center"><strong>Figure: HCE routing</strong></p> 
-<p align="center"> <img alt="HCE routing" src="../../images/nfc_hce_routing.png" /> </p> 
+<p align="center"><strong>Figure: HCE routing</strong></p>
+<p align="center"> <img alt="HCE routing" src="../../images/nfc_hce_routing.png" /> </p>
        </li>
 </ul>
 
@@ -160,9 +160,9 @@
 <p>To use the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/nfc&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To create a host-based card emulation (HCE) application--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/nfc.cardemulation&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/nfc&lt;/privilege&gt;
+   &lt;!--To create a host-based card emulation (HCE) application--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/nfc.cardemulation&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -179,10 +179,10 @@
 void
 Network_NFC_startup(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;gmainloop = g_main_loop_new(NULL, FALSE);
-&nbsp;&nbsp;&nbsp;&nbsp;bool is_nfc_supported = nfc_manager_is_supported();
-&nbsp;&nbsp;&nbsp;&nbsp;if (!is_nfc_supported)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;is_nfc_supported NOT SUPPORTED&quot;);
+    gmainloop = g_main_loop_new(NULL, FALSE);
+    bool is_nfc_supported = nfc_manager_is_supported();
+    if (!is_nfc_supported)
+        dlog_print(DLOG_INFO, LOG_TAG, "is_nfc_supported NOT SUPPORTED");
 }
 </pre>
 
@@ -194,7 +194,7 @@ int error_code = NFC_ERROR_NONE;
 
 error_code = nfc_manager_initialize();
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 
 g_timeout_add(1000, timeout_func, gmainloop);
 g_main_loop_run(gmainloop);
@@ -208,13 +208,13 @@ g_main_loop_run(gmainloop);
 void
 Network_NFC_cleanup(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;g_main_loop_unref(gmainloop);
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_manager_deinitialize();
+    g_main_loop_unref(gmainloop);
+    nfc_manager_deinitialize();
 }
 </pre></li></ol>
 
  <h2 id="enable" name="enable">Enabling and Disabling NFC</h2>
-                       
+
 <p>To allow the user to enable or disable NFC, use the <a href="../app_management/common_appcontrol_n.htm#settings_nfc">application control</a> to display the NFC settings.</p>
 <p>The NFC API does not contain functions for enabling or disabling NFC. You must display the NFC settings application to allow the user to toggle the NFC state.</p>
   <p align="center"><strong>Figure: NFC settings application (off screen on the left and on screen on the right)</strong></p>
@@ -227,29 +227,29 @@ Network_NFC_cleanup(void)
 int
 nfc_onoff_operation(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
-&nbsp;&nbsp;&nbsp;&nbsp;if (service == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;service_create failed!\n&quot;);
+    int ret = 0;
+    app_control_h service = NULL;
+    app_control_create(&amp;service);
+    if (service == NULL) {
+        dlog_print(DLOG_INFO, LOG_TAG, "service_create failed!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_NFC);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+        return 0;
+    }
+    app_control_set_operation(service, APP_CONTROL_OPERATION_SETTING_NFC);
+    ret = app_control_send_launch_request(service, NULL, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_destroy(service);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Succeeded to NFC On/Off app!\n&quot;);
+    app_control_destroy(service);
+    if (ret == APP_CONTROL_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Succeeded to NFC On/Off app!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to relaunch NFC On/Off app!\n&quot;);
+        return 0;
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to relaunch NFC On/Off app!\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -265,7 +265,7 @@ nfc_onoff_operation(void)
 <p>Call the <code>nfc_manager_set_activation_changed_cb()</code> function to register a callback that is invoked every time the activation state of NFC changes:</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_manager_set_activation_changed_cb(on_nfc_activation_changed, NULL);
+    nfc_manager_set_activation_changed_cb(on_nfc_activation_changed, NULL);
 </pre>
 
 <p>Define the callback. In this example, it only informs the user that the activation state has changed.</p>
@@ -273,10 +273,10 @@ error_code =
 static void
 on_nfc_activation_changed(bool activated, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (activated)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC activated&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC deactivated&quot;);
+    if (activated)
+        dlog_print(DLOG_INFO, LOG_TAG, "NFC activated");
+    else
+        dlog_print(DLOG_INFO, LOG_TAG, "NFC deactivated");
 }
 </pre>
 </li>
@@ -292,54 +292,54 @@ nfc_manager_set_tag_filter(NFC_TAG_FILTER_ALL_ENABLE);
 <pre class="prettyprint">
 error_code = nfc_manager_set_tag_discovered_cb(on_nfc_tag_discovered, NULL);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 </li>
-<li>Use the <code>nfc_manager_set_ndef_discovered_cb()</code> function to register an NDEF event callback: 
+<li>Use the <code>nfc_manager_set_ndef_discovered_cb()</code> function to register an NDEF event callback:
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_manager_set_ndef_discovered_cb(on_nfc_ndef_discovered, NULL);
+    nfc_manager_set_ndef_discovered_cb(on_nfc_ndef_discovered, NULL);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 </li>
-<li>Use the <code>nfc_manager_set_p2p_target_discovered_cb()</code> function to register a peer-to-peer event callback: 
+<li>Use the <code>nfc_manager_set_p2p_target_discovered_cb()</code> function to register a peer-to-peer event callback:
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_manager_set_p2p_target_discovered_cb(on_nfc_p2p_target_discovered,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+    nfc_manager_set_p2p_target_discovered_cb(on_nfc_p2p_target_discovered,
+                                             NULL);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre></li>
 <li>Use the <code>nfc_manager_set_se_event_cb()</code> function to register a secure element event callback:
 <pre class="prettyprint">
 error_code = nfc_manager_set_se_event_cb(on_nfc_se_event, NULL);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre></li>
-<li>Use the <code>nfc_manager_set_se_transaction_event_cb()</code> function to register a secure element transaction event callback: 
+<li>Use the <code>nfc_manager_set_se_transaction_event_cb()</code> function to register a secure element transaction event callback:
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_manager_set_se_transaction_event_cb(NFC_SE_TYPE_ESE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on_nfc_se_transaction_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+    nfc_manager_set_se_transaction_event_cb(NFC_SE_TYPE_ESE,
+                                            on_nfc_se_transaction_event,
+                                            NULL);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre></li></ul>
 </li>
 
-<li><p>Use the <code>nfc_manager_is_system_handler_enabled()</code> function to check whether system handling for tag and target discovery is enabled.</p> 
+<li><p>Use the <code>nfc_manager_is_system_handler_enabled()</code> function to check whether system handling for tag and target discovery is enabled.</p>
 <p>By default, the system handling is enabled. If the function returns <code>FALSE</code>, enable system handling using the <code>nfc_manager_set_system_handler_enable()</code> function and pass <code>TRUE</code> as an input parameter.</p>
 <pre class="prettyprint">
 if (nfc_manager_is_system_handler_enabled() != true)
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_manager_set_system_handler_enable(true);
+    nfc_manager_set_system_handler_enable(true);
 </pre></li></ol>
 
 <p>After registering the callbacks, you can start using NFC on the device. You can connect to other devices, resulting in launching the code from the registered callbacks.</p>
 </li>
 <li id="tag_work" name="tag_work">Handling NFC tags and related events:
 <ol type="a">
-<li>Get basic tag information. 
+<li>Get basic tag information.
 <p>When a tag is discovered, the <code>on_nfc_tag_discovered()</code> callback registered earlier is called. In the callback, you can check the NFC discovered type from the first callback parameter. The <code>nfc_discovered_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">wearable</a> applications) defines the possible values. If the value is <code>NFC_DISCOVERED_TYPE_ATTACHED</code>, the tag has connected to the device, and you can read and print out information from the tag:</p>
 <ol type="a">
 <li>
@@ -364,20 +364,20 @@ nfc_tag_get_maximum_ndef_size(tag, &amp;maximum_ndef_bytes_size);
 <p>Retrieve all remaining tag information by calling the <code>nfc_tag_foreach_information()</code> function. The parameters are the tag that is operated on, the callback that is called for each found key and value pair in the tag, and the user data that can be passed to the callback. If there is no need to pass any data, <code>NULL</code> is passed as the last parameter.</p>
 <pre class="prettyprint">
 error_code = nfc_tag_foreach_information(tag, on_nfc_tag_information_event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                         NULL);
 
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 
 <p>The <code>on_nfc_tag_information_event()</code> callback prints out the found keys and their values.</p>
 <pre class="prettyprint">
 on_nfc_tag_information_event(const char *key, const unsigned char *value,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int value_size, void *user_data)
+                             int value_size, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Title: %s, Value: %s&quot;, key, (char*)value);
+    dlog_print(DLOG_INFO, LOG_TAG, "Title: %s, Value: %s", key, (char*)value);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 <p>The iteration over the key and value pairs continues while the callback returns <code>true</code>.</p>
@@ -395,16 +395,16 @@ filter = nfc_manager_get_tag_filter();
 <pre class="prettyprint">
 error_code = nfc_tag_read_ndef(tag, on_nfc_tag_read_completed, NULL);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 
 <p>After the tag message has been read, the <code>on_nfc_tag_read_completed()</code> callback is called. The parameters are the status of reading the message, the message read from the tag, and data passed to the callback. The last one can be <code>NULL</code> if no data need to be passed.</p>
 <pre class="prettyprint">
 static void
 on_nfc_tag_read_completed(int error_code, nfc_ndef_message_h message,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                          void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_read_cb(clone_message(message));
+    nfc_ndef_message_read_cb(clone_message(message));
 }</pre>
 </li>
 <li>
@@ -424,26 +424,26 @@ nfc_ndef_message_read_cb(clone_message(message));
 static
 nfc_ndef_message_h clone_message(nfc_ndef_message_h msg)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *rawdata;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int rawdata_size;
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_h msg_cp;
+    unsigned char *rawdata;
+    unsigned int rawdata_size;
+    nfc_ndef_message_h msg_cp;
 </pre>
 </li>
 <li>
 <p>Get the copy of the bytes array of the NDEF message with the <code>nfc_ndef_message_get_rawdata()</code> function. The parameters are the handle to the NDEF message, the 2-dimensional bytes array, and the size of the bytes array.</p>
 <p>The parameters are variables that must be passed to be fulfilled inside the called function. </p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_get_rawdata(msg, &amp;rawdata, &amp;rawdata_size);
+    nfc_ndef_message_get_rawdata(msg, &amp;rawdata, &amp;rawdata_size);
 </pre>
 </li>
 <li>
 <p>Create an NDEF handle from raw serial bytes with the <code>nfc_ndef_message_create_from_rawdata()</code> function. Use it to create a copy of the message retrieved from the tag to make it possible to read information from the copy. The parameters are the message handle, <code>rawdata</code>, and <code>rawdata_size</code>.</p>
 <p>In the end, <code>rawdata</code> must be released with the <code>free()</code> function.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_create_from_rawdata(&amp;msg_cp, rawdata, rawdata_size);
-&nbsp;&nbsp;&nbsp;&nbsp;free(rawdata);
+    nfc_ndef_message_create_from_rawdata(&amp;msg_cp, rawdata, rawdata_size);
+    free(rawdata);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return msg_cp;
+    return msg_cp;
 }
 </pre>
 </li>
@@ -454,7 +454,7 @@ nfc_ndef_message_h clone_message(nfc_ndef_message_h msg)
 <pre class="prettyprint">
 error_code = nfc_ndef_message_get_record_count(message, &amp;count);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 </li>
 <li>
@@ -462,7 +462,7 @@ if (NFC_ERROR_NONE != error_code)
 <pre class="prettyprint">
 error_code = nfc_ndef_message_get_record(message, i, &amp;rec);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 
 <p>Now, when the pointer to the specific record exists, get the record data:</p>
@@ -471,58 +471,58 @@ if (NFC_ERROR_NONE != error_code)
 <pre class="prettyprint">
 error_code = nfc_ndef_record_get_id(rec, &amp;id, &amp;id_len);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre></li>
 
 <li>Get the record type using the <code>nfc_ndef_record_get_type()</code> function:
 <pre class="prettyprint">
 error_code = nfc_ndef_record_get_type(rec, &amp;type_str, &amp;type_len);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre></li>
 
 <li>Get the record TNF (Type Name Format) with the <code>nfc_ndef_record_get_tnf()</code> function:
 <pre class="prettyprint">
 error_code = nfc_ndef_record_get_tnf(rec, &amp;tnf);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre></li>
 
 <li>Get the record payload by calling the <code>nfc_ndef_record_get_payload()</code> function:
 <pre class="prettyprint">
 error_code = nfc_ndef_record_get_payload(record, &amp;payload, &amp;payload_len);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre></li></ul>
 </li>
 <li>
 <p>To get more information from the tag, specify what type of a tag message you are dealing with:</p>
 <ul>
-<li>If there is a message with <code>Type = &quot;T&quot;</code> and the TNF is <code>NFC_RECORD_TNF_WELL_KNOWN</code>, it is possible to get the following data:
+<li>If there is a message with <code>Type = "T"</code> and the TNF is <code>NFC_RECORD_TNF_WELL_KNOWN</code>, it is possible to get the following data:
 <pre class="prettyprint">
 /* Get the record text */
 error_code = nfc_ndef_record_get_text(record, &amp;text);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 
 /* Get the record text language code */
 error_code = nfc_ndef_record_get_langcode(record, &amp;language);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 
 /* Get the record text encoding type */
 error_code = nfc_ndef_record_get_encode_type(record, &amp;encode);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 </li>
 <li>
-<p>If there is a message with <code>Type=&quot;U&quot;</code> and TNF is also <code>NFC_RECORD_TNF_WELL_KNOWN</code>, you can get the URI using the <code>nfc_ndef_record_get_uri()</code> function:</p>
+<p>If there is a message with <code>Type="U"</code> and TNF is also <code>NFC_RECORD_TNF_WELL_KNOWN</code>, you can get the URI using the <code>nfc_ndef_record_get_uri()</code> function:</p>
 
 <pre class="prettyprint">
 error_code = nfc_ndef_record_get_uri(record, &amp;uri);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 </li>
 <li>
@@ -530,7 +530,7 @@ if (NFC_ERROR_NONE != error_code)
 <pre class="prettyprint">
 error_code = nfc_ndef_record_get_mime_type(record, &amp;mime);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 </li>
 </ul>
@@ -541,7 +541,7 @@ if (NFC_ERROR_NONE != error_code)
 </li>
 
 
-<li>Handling NFC NDEF messages and related events: 
+<li>Handling NFC NDEF messages and related events:
 
 <p>NFC NDEF messages are handled in the same way as NFC tag NDEF messages, described above.</p>
 
@@ -551,20 +551,20 @@ if (NFC_ERROR_NONE != error_code)
 static void
 on_nfc_ndef_discovered(nfc_ndef_message_h message, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int count;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int size;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char * payload;
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_record_h record;
-
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_get_record_count(message, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;on_nfc_ndef_discovered %d&quot;, count);
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_get_record(message, i, &amp;record);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_record_get_payload(record, &amp;payload, &amp;size);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Record Number: %d, Payload: %s&quot;, i, payload);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int count;
+    int i;
+    unsigned int size;
+    unsigned char * payload;
+    nfc_ndef_record_h record;
+
+    nfc_ndef_message_get_record_count(message, &amp;count);
+    dlog_print(DLOG_INFO, LOG_TAG, "on_nfc_ndef_discovered %d", count);
+
+    for (i = 0; i &lt; count; i++) {
+        nfc_ndef_message_get_record(message, i, &amp;record);
+        nfc_ndef_record_get_payload(record, &amp;payload, &amp;size);
+        dlog_print(DLOG_INFO, LOG_TAG, "Record Number: %d, Payload: %s", i, payload);
+    }
 }
 </pre>
 </li>
@@ -576,7 +576,7 @@ on_nfc_ndef_discovered(nfc_ndef_message_h message, void *user_data)
 <p>In the registered <code>on_nfc_p2p_target_discovered()</code> callback, check the value of the first parameter, which defines the type of the NFC discovery using the <code>nfc_discovered_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html#ga27acb1707c933da6d9180d80a03f4402">wearable</a> applications). If the type is <code>NFC_DISCOVERED_TYPE_ATTACHED</code>, the remote device is attached to the device:</p>
 <pre class="prettyprint">
 if (type == NFC_DISCOVERED_TYPE_ATTACHED)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Remote device is attached; execute code */
+    /* Remote device is attached; execute code */
 </pre>
 </li>
 <li>
@@ -584,20 +584,20 @@ if (type == NFC_DISCOVERED_TYPE_ATTACHED)
 <pre class="prettyprint">
 error_code = nfc_p2p_set_data_received_cb(target, on_nfc_p2p_read_completed, 0);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 
 <p>Use the callback to read the received message. You can check its number of records using the <code>nfc_ndef_message_get_record_count()</code> function and get more detailed info about the message itself by calling the <code>nfc_ndef_message_read_cb()</code> function, similarly as with the NFC tag messages described earlier.</p>
 <pre class="prettyprint">
 static void
 on_nfc_p2p_read_completed(nfc_p2p_target_h target, nfc_ndef_message_h message,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                          void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int count;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;on_nfc_p2p_read_completed&quot;);
+    int count;
+    dlog_print(DLOG_INFO, LOG_TAG, "on_nfc_p2p_read_completed");
 
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_get_record_count(message, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_ndef_message_read_cb(clone_message(message));
+    nfc_ndef_message_get_record_count(message, &amp;count);
+    nfc_ndef_message_read_cb(clone_message(message));
 }
 </pre>
 </li>
@@ -612,63 +612,63 @@ on_nfc_p2p_read_completed(nfc_p2p_target_h target, nfc_ndef_message_h message,
 static void
 on_nfc_se_event(nfc_se_event_e event, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;switch (event) {
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_START_TRANSACTION:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   This event notifies the terminal host that it launches
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   an application associated with an NFC application in a
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   UICC (Universal Integrated Circuit Card) host
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Start Transaction&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_END_TRANSACTION:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   This event notifies the terminal host that the current transaction
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   in process was ended
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: End Transaction&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_CONNECTIVITY:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   This event is a ready signal for UICC (Universal Integrated Circuit
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Card) to communicate with terminal host. UICC
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   creates a pipe and opens the pipe channel. Then it sends the signal
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   to terminal host or host controller
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Connectivity&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_FIELD_ON:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   When the CLF (Contactless Front-end) detects a 5ra RF field, the card
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   RF gate sends the event #NFC_SE_EVENT_FIELD_ON to the card
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   application gate. When there are multiple open card RF gates,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   the CLF sends the #NFC_SE_EVENT_FIELD_ON on all open pipes
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   to these gates. Next the CLF starts the initialization
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   and anti-collision process as defined in ISO/IEC 14443-3 [6]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Field ON&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_FIELD_OFF:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   When the CLF (Contactless Front-end) detects that the RF field
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   is off, the card RF gate sends the event #NFC_SE_EVENT_FIELD_OFF to
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   the card application gate. When there are multiple open card RF
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   gates the CLF sends the #NFC_SE_EVENT_FIELD_OFF to one gate
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   only
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Field OFF&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_SE_EVENT_TRANSACTION:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   This event signals that an external reader is trying to access a secure
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   element
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: Remote Start Transaction&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;NFC EVENT: DEFAULT:OTHER&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    switch (event) {
+    case NFC_SE_EVENT_START_TRANSACTION:
+        /*
+           This event notifies the terminal host that it launches
+           an application associated with an NFC application in a
+           UICC (Universal Integrated Circuit Card) host
+        */
+        dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Start Transaction");
+        break;
+    case NFC_SE_EVENT_END_TRANSACTION:
+        /*
+           This event notifies the terminal host that the current transaction
+           in process was ended
+        */
+        dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: End Transaction");
+        break;
+    case NFC_SE_EVENT_CONNECTIVITY:
+        /*
+           This event is a ready signal for UICC (Universal Integrated Circuit
+           Card) to communicate with terminal host. UICC
+           creates a pipe and opens the pipe channel. Then it sends the signal
+           to terminal host or host controller
+        */
+        dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Connectivity");
+        break;
+    case NFC_SE_EVENT_FIELD_ON:
+        /*
+           When the CLF (Contactless Front-end) detects a 5ra RF field, the card
+           RF gate sends the event #NFC_SE_EVENT_FIELD_ON to the card
+           application gate. When there are multiple open card RF gates,
+           the CLF sends the #NFC_SE_EVENT_FIELD_ON on all open pipes
+           to these gates. Next the CLF starts the initialization
+           and anti-collision process as defined in ISO/IEC 14443-3 [6]
+        */
+        dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Field ON");
+        break;
+    case NFC_SE_EVENT_FIELD_OFF:
+        /*
+           When the CLF (Contactless Front-end) detects that the RF field
+           is off, the card RF gate sends the event #NFC_SE_EVENT_FIELD_OFF to
+           the card application gate. When there are multiple open card RF
+           gates the CLF sends the #NFC_SE_EVENT_FIELD_OFF to one gate
+           only
+        */
+        dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Field OFF");
+        break;
+    case NFC_SE_EVENT_TRANSACTION:
+        /*
+           This event signals that an external reader is trying to access a secure
+           element
+        */
+        dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: Remote Start Transaction");
+        break;
+    default:
+        dlog_print(DLOG_INFO, LOG_TAG, "NFC EVENT: DEFAULT:OTHER");
+        break;
+    }
 }
 </pre>
 </li>
@@ -677,11 +677,11 @@ on_nfc_se_event(nfc_se_event_e event, void *user_data)
 <pre class="prettyprint">
 static void
 on_nfc_se_transaction_event(nfc_se_type_e se_type, unsigned char *aid, int aid_size,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *param, int param_size, void *user_data)
+                            unsigned char *param, int param_size, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Secure Element(SIM/UICC(Universal Integrated Circuit Card))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transaction event data&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "Secure Element(SIM/UICC(Universal Integrated Circuit Card))
+                transaction event data");
 }
 </pre>
 </li>
@@ -701,7 +701,7 @@ nfc_manager_set_tag_filter(NFC_TAG_FILTER_ALL_ENABLE);
 <li>Enable the NFC system handler:
 <pre class="prettyprint">
 if (nfc_manager_is_system_handler_enabled() != true)
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_manager_set_system_handler_enable(true);
+    nfc_manager_set_system_handler_enable(true);
 </pre></li>
 <li>Get the cached message by calling the <code>nfc_manager_get_cached_message()</code> function. Pass a variable of the <code>nfc_ndef_message_h</code> type, which is fulfilled with the cached message by the function.
 <pre class="prettyprint">
@@ -709,12 +709,12 @@ nfc_ndef_message_h message = NULL;
 
 error_code = nfc_manager_get_cached_message(&amp;message);
 if (NFC_ERROR_NONE != error_code)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
+    /* Error occurred */
 </pre>
 <p>After getting the message, get the detailed information from the message as described in <a href="#work">Working with NFC Connections and Messages</a>. First check whether there are any errors and that the message is not <code>NULL</code>:</p>
 <pre class="prettyprint">
 if (message != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;on_nfc_ndef_discovered(clone_message(message), NULL);
+    on_nfc_ndef_discovered(clone_message(message), NULL);
 </pre></li>
 <li>Clean up at the application end.</li>
 </ol>
@@ -733,9 +733,9 @@ int ret = NFC_ERROR_NONE;
 ret = nfc_manager_initialize();
 
 if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;nfc_manager_initialize failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_initialize failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 </pre>
 </li>
@@ -747,18 +747,18 @@ nfc_se_card_emulation_mode_type_e ce_type;
 ret = nfc_se_get_card_emulation_mode(&amp;ce_type);
 
 if (ret == NFC_ERROR_NONE &amp;&amp; ce_type != true) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = nfc_se_enable_card_emulation();
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc_se_enable_card_emulation failed: %d&quot;, ret);
+    ret = nfc_se_enable_card_emulation();
+    if (ret != NFC_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "nfc_se_enable_card_emulation failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc_se_get_card_emulation_mode failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "nfc_se_get_card_emulation_mode failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 </pre></li>
 <li><p>Specify an <code>AID</code> value for the application:</p>
@@ -766,19 +766,19 @@ if (ret == NFC_ERROR_NONE &amp;&amp; ce_type != true) {
 <li>
 <p>To tell the platform which AID groups are requested by the application, a metadata element must be included in the manifest file:</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3.1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;org.tizen.basicuiapplication&quot; version=&quot;1.0.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;profile name=&quot;wearable&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.basicuiapplication&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exec=&quot;basicuiapplication&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&quot;capp&quot; multiple=&quot;false&quot; taskmanage=&quot;true&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodisplay=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;basicuiapplication.png&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;basicuiapplication&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;http://tizen.org/metadata/nfc_cardemulation&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;/shared/res/wallet.xml&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1"
+          package="org.tizen.basicuiapplication" version="1.0.0"&gt;
+   &lt;profile name="wearable"/&gt;
+   &lt;ui-application appid="org.tizen.basicuiapplication"
+                   exec="basicuiapplication"
+                   type="capp" multiple="false" taskmanage="true"
+                   nodisplay="false"&gt;
+      &lt;icon&gt;basicuiapplication.png&lt;/icon&gt;
+      &lt;label&gt;basicuiapplication&lt;/label&gt;
+      &lt;metadata key="http://tizen.org/metadata/nfc_cardemulation"
+                value="/shared/res/wallet.xml"/&gt;
+   &lt;/ui-application&gt;
 &lt;/manifest&gt;
 </pre>
 <ul><li>The <code>metadata</code> element must contain the <code>key</code> and <code>value</code> attributes.</li>
@@ -789,14 +789,14 @@ if (ret == NFC_ERROR_NONE &amp;&amp; ce_type != true) {
 </li>
 <li><p>The metadata element points to an AID XML file. The following is an example of the file with an AID declaration:</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;application name=&quot;org.tizen.basicuiapplication&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;wallet&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;aid-group category=&quot;payment&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;aid aid=&quot;325041592E5359532E4444463031&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;se_type=&quot;hce&quot; unlock=&quot;false&quot; power=&quot;sleep&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/aid-group&gt;
-&nbsp;&nbsp;&nbsp;&lt;/wallet&gt;
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;application name="org.tizen.basicuiapplication"&gt;
+   &lt;wallet&gt;
+      &lt;aid-group category="payment"&gt;
+         &lt;aid aid="325041592E5359532E4444463031"
+              se_type="hce" unlock="false" power="sleep"/&gt;
+      &lt;/aid-group&gt;
+   &lt;/wallet&gt;
 &lt;/application&gt;
 </pre>
 <ul><li>The <code>application</code> element must contain a <code>name</code> attribute with an application name.</li>
@@ -826,45 +826,45 @@ if (ret == NFC_ERROR_NONE &amp;&amp; ce_type != true) {
 <pre class="prettyprint">
 static void
 _hce_event_cb(nfc_se_h handle, nfc_hce_event_type_e event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *apdu, unsigned int apdu_len, void *user_data)
+              unsigned char *apdu, unsigned int apdu_len, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;switch (event) {
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_HCE_EVENT_DEACTIVATED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Do something when NFC_HCE_EVENT_DEACTIVATED event arrives
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   When the event arrives, apdu and apdu len is NULL and 0
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_HCE_EVENT_ACTIVATED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Do something when NFC_HCE_EVENT_ACTIVATED event arrives
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   When the event arrives, apdu and apdu len is NULL and 0
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_HCE_EVENT_APDU_RECEIVED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char resp[] = {0x00, 0x01, 0x02, 0x03};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Do something when NFC_HCE_EVENT_APDU_RECEIVED event arrives
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   You can use the arrival apdu and apdu_len
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   and send a response to the NFC reader
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_hce_send_apdu_response(handle, NULL, 4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    switch (event) {
+    case NFC_HCE_EVENT_DEACTIVATED:
+        /*
+           Do something when NFC_HCE_EVENT_DEACTIVATED event arrives
+           When the event arrives, apdu and apdu len is NULL and 0
+        */
+        break;
+    case NFC_HCE_EVENT_ACTIVATED:
+        /*
+           Do something when NFC_HCE_EVENT_ACTIVATED event arrives
+           When the event arrives, apdu and apdu len is NULL and 0
+        */
+        break;
+    case NFC_HCE_EVENT_APDU_RECEIVED:
+        unsigned char resp[] = {0x00, 0x01, 0x02, 0x03};
+
+        /*
+           Do something when NFC_HCE_EVENT_APDU_RECEIVED event arrives
+           You can use the arrival apdu and apdu_len
+           and send a response to the NFC reader
+        */
+
+        nfc_hce_send_apdu_response(handle, NULL, 4);
+        break;
+    default:
+        /* Error handling */
+        break;
+    }
 }
 
 ret = nfc_manager_set_hce_event_cb(_hce_event_cb, NULL);
 
 if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc_manager_set_hce_event_cb failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "nfc_manager_set_hce_event_cb failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 </pre>
 </li>
@@ -877,37 +877,37 @@ const char aid[] = {0x00, 0x01, 0x02, 0x03};
 bool is_activated_handler = false;
 
 ret = nfc_se_is_activated_handler_for_aid(NFC_SE_TYPE_HCE, aid,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;is_activated_handler);
+                                          &amp;is_activated_handler);
 
 if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;if (is_activated_handler == true) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;is_activate_handler is true&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;is_activate_handler is false&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (is_activated_handler == true) {
+        dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is true");
+        /* Do something */
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is false");
+        /* Do something */
+    }
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc_se_is_activated_handler_for_aid failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "nfc_se_is_activated_handler_for_aid failed: %d", ret);
 }
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_se_is_activated_handler_for_category(NFC_SE_TYPE_HCE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NFC_CARD_EMULATION_CATEGORY_PAYMENT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;is_activated_handler);
+    nfc_se_is_activated_handler_for_category(NFC_SE_TYPE_HCE,
+                                             NFC_CARD_EMULATION_CATEGORY_PAYMENT,
+                                             &amp;is_activated_handler);
 
 if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;if (is_activated_handler == true) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;is_activate_handler is true&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;is_activate_handler is false&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (is_activated_handler == true) {
+        dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is true");
+        /* Do something */
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is false");
+        /* Do something */
+    }
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc_se_is_activated_handler_for_category failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "nfc_se_is_activated_handler_for_category failed: %d", ret);
 }
 </pre></li>
 <li>To register or deregister the AID at application runtime, use the <code>nfc_se_register_aid()</code> and <code>nfc_se_unregister_aid()</code> functions:
@@ -916,44 +916,44 @@ int ret = NFC_ERROR_NONE;
 const char aid[] = {0x0A, 0x0B, 0x0C, 0x0D};
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_se_register_aid(NFC_SE_TYPE_HCE, NFC_CARD_EMULATION_CATEGORY_OTHER,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aid);
+    nfc_se_register_aid(NFC_SE_TYPE_HCE, NFC_CARD_EMULATION_CATEGORY_OTHER,
+                        aid);
 
 if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;nfc_se_register_aid failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_register_aid failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_se_unregister_aid(NFC_SE_TYPE_HCE, NFC_CARD_EMULATION_CATEGORY_OTHER,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aid);
+    nfc_se_unregister_aid(NFC_SE_TYPE_HCE, NFC_CARD_EMULATION_CATEGORY_OTHER,
+                          aid);
 
 if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;nfc_se_unregister_aid failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_unregister_aid failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 </pre></li>
 <li>To check whether the application has a registered AID (including a registered AID at the install time), use the <code>nfc_se_foreach_registered_aids()</code> function (the callback is called for each AID value separately):
 <pre class="prettyprint">
 static void
 _registered_aid_cb(nfc_se_type_e se_type, const char *aid,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool read_only, void *user_data)
+                   bool read_only, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;registered_aids callback is called&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
+    dlog_print(DLOG_INFO, LOG_TAG, "registered_aids callback is called");
+    /* Do something */
 }
 
 ret = nfc_se_foreach_registered_aids(NFC_SE_TYPE_HCE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NFC_CARD_EMULATION_CATEGORY_OTHER,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_registered_aid_cb, NULL);
+                                     NFC_CARD_EMULATION_CATEGORY_OTHER,
+                                     _registered_aid_cb, NULL);
 
 if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc_se_foreach_registered_aids failed: %d&quot;, ret);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "nfc_se_foreach_registered_aids failed: %d", ret);
+
+    return false;
 }
 </pre>
 <p>When an application receives an app control event, the application can receive the AID value using the <code>data</code> app control extra key.</p></li>
@@ -966,7 +966,7 @@ nfc_manager_unset_hce_event_cb();
 
 ret = nfc_manager_deinitialize();
 if (ret != NFC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;nfc_manager_deinitialize failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_deinitialize failed: %d", ret);
 </pre>
 </li>
 
@@ -980,186 +980,186 @@ if (ret != NFC_ERROR_NONE)
 
 static void
 _hce_event_cb(nfc_se_h handle, nfc_hce_event_type_e event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *apdu, unsigned int apdu_len, void *user_data)
+              unsigned char *apdu, unsigned int apdu_len, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;switch (event) {
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_HCE_EVENT_DEACTIVATED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Do something when NFC_HCE_EVENT_DEACTIVATED event arrives
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   When the event arrives, apdu and apdu len is NULL and 0
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_HCE_EVENT_ACTIVATED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Do something when NFC_HCE_EVENT_ACTIVATED event arrives
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   When the event arrives, apdu and apdu len is NULL and 0
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case NFC_HCE_EVENT_APDU_RECEIVED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char resp[] = {0x00, 0x01, 0x02, 0x03};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Do something when NFC_HCE_EVENT_APDU_RECEIVED event arrives
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   You can use the arrival apdu and apdu_len
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   and send a response to the NFC reader
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_hce_send_apdu_response(handle, resp, 4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    switch (event) {
+    case NFC_HCE_EVENT_DEACTIVATED:
+        /*
+           Do something when NFC_HCE_EVENT_DEACTIVATED event arrives
+           When the event arrives, apdu and apdu len is NULL and 0
+        */
+        break;
+    case NFC_HCE_EVENT_ACTIVATED:
+        /*
+           Do something when NFC_HCE_EVENT_ACTIVATED event arrives
+           When the event arrives, apdu and apdu len is NULL and 0
+        */
+        break;
+    case NFC_HCE_EVENT_APDU_RECEIVED:
+        unsigned char resp[] = {0x00, 0x01, 0x02, 0x03};
+
+        /*
+           Do something when NFC_HCE_EVENT_APDU_RECEIVED event arrives
+           You can use the arrival apdu and apdu_len
+           and send a response to the NFC reader
+        */
+
+        nfc_hce_send_apdu_response(handle, resp, 4);
+        break;
+    default:
+        /* Error handling */
+        break;
+    }
 }
 
 bool
 service_app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = NFC_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_se_card_emulation_mode_type_e ce_type;
+    int ret = NFC_ERROR_NONE;
+    nfc_se_card_emulation_mode_type_e ce_type;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = nfc_manager_initialize();
+    ret = nfc_manager_initialize();
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;nfc_manager_initialize failed: %d&quot;, ret);
+    if (ret != NFC_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_initialize failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* App control */
+    /* App control */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = nfc_se_get_card_emulation_mode(&amp;ce_type);
+    ret = nfc_se_get_card_emulation_mode(&amp;ce_type);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == NFC_ERROR_NONE &amp;&amp; ce_type != true) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nfc_se_enable_card_emulation();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc_se_enable_card_emulation failed: %d&quot;, ret);
+    if (ret == NFC_ERROR_NONE &amp;&amp; ce_type != true) {
+        nfc_se_enable_card_emulation();
+        if (ret != NFC_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "nfc_se_enable_card_emulation failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc_se_get_card_emulation_mode failed: %d&quot;, ret);
+            return false;
+        }
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "nfc_se_get_card_emulation_mode failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = nfc_manager_set_hce_event_cb(_hce_event_cb, NULL);
+    ret = nfc_manager_set_hce_event_cb(_hce_event_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != NFC_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc_manager_set_hce_event_cb failed: %d&quot;, ret);
+    if (ret != NFC_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "nfc_manager_set_hce_event_cb failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 service_app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = NFC_ERROR_NONE;
+    int ret = NFC_ERROR_NONE;
 
-&nbsp;&nbsp;&nbsp;&nbsp;nfc_manager_unset_hce_event_cb();
+    nfc_manager_unset_hce_event_cb();
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = nfc_manager_deinitialize();
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != NFC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;nfc_manager_deinitialize failed: %d&quot;, ret);
+    ret = nfc_manager_deinitialize();
+    if (ret != NFC_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_deinitialize failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 void
 service_app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Todo: add your code here */
+    /* Todo: add your code here */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 void
 service_app_low_memory_callback(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Todo: add your code here */
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_exit();
+    /* Todo: add your code here */
+    service_app_exit();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 void
 service_app_low_battery_callback(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Todo: add your code here */
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_exit();
+    /* Todo: add your code here */
+    service_app_exit();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char ad[50] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_event_callback_s event_callback;
+    char ad[50] = {0,};
+    service_app_event_callback_s event_callback;
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = service_app_control;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.low_memory = service_app_low_memory_callback;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.low_battery = service_app_low_battery_callback;
+    event_callback.create = service_app_create;
+    event_callback.terminate = service_app_terminate;
+    event_callback.app_control = service_app_control;
+    event_callback.low_memory = service_app_low_memory_callback;
+    event_callback.low_battery = service_app_low_battery_callback;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, ad);
+    return service_app_main(argc, argv, &amp;event_callback, ad);
 }
 </pre>
 </li>
 <li>To create a preferred application:
-<p>You can register your application as a preferred handler through the &quot;preferred&quot; functions. Instead of the default handler selected in the NFC settings (the wallet application), the preferred handler receives a card emulation event.</p>
+<p>You can register your application as a preferred handler through the "preferred" functions. Instead of the default handler selected in the NFC settings (the wallet application), the preferred handler receives a card emulation event.</p>
 
-<p>The &quot;preferred&quot; functions can be called when the application is on the foreground:</p>
+<p>The "preferred" functions can be called when the application is on the foreground:</p>
 
 <ul>
 <li>Call the <code>nfc_se_set_preferred_handler()</code> function when the application is resumed from the paused state.</li>
 <li>Call the <code>nfc_se_unset_preferred_handler()</code> function when the application is paused.</li>
 </ul>
-       
+
          <div class="note">
         <strong>Note</strong>
-        The &quot;preferred&quot; functions are available since Tizen 3.0. 
-        <p>Because of security issues, the API usage policy is different for each Tizen device. For example, if the application is in the payment category, using the &quot;preferred&quot; functions can be prohibited depending on the device.</p>
+        The "preferred" functions are available since Tizen 3.0.
+        <p>Because of security issues, the API usage policy is different for each Tizen device. For example, if the application is in the payment category, using the "preferred" functions can be prohibited depending on the device.</p>
     </div>
 <p>The following example shows the entire preferred application sample code:</p>
 <pre class="prettyprint">
 static void
 _on_resume_cb(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = nfc_se_set_preferred_handler();
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != NFC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;Set preferred handler failed! %s&quot;, get_error_message(ret));
+    int ret;
+    ret = nfc_se_set_preferred_handler();
+    if (ret != NFC_ERROR_NONE)
+        dlog_print("Set preferred handler failed! %s", get_error_message(ret));
 }
 
 static void
 _on_pause_cb(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = nfc_se_unset_preferred_handler();
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != NFC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(&quot;Unset preferred handler failed! %s&quot;, get_error_message(ret));
+    int ret;
+    ret = nfc_se_unset_preferred_handler();
+    if (ret != NFC_ERROR_NONE)
+        dlog_print("Unset preferred handler failed! %s", get_error_message(ret));
 }
 
 int
 app_run(app_data *user_data, int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s cbs = {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.create = _on_create_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.terminate = _on_terminate_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.pause = _on_pause_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resume = _on_resume_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.app_control = _on_app_control_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;cbs, user_data);
+    ui_app_lifecycle_callback_s cbs = {
+        .create = _on_create_cb,
+        .terminate = _on_terminate_cb,
+        .pause = _on_pause_cb,
+        .resume = _on_resume_cb,
+        .app_control = _on_app_control_cb,
+    };
+
+    return ui_app_main(argc, argv, &amp;cbs, user_data);
 }
 </pre>
 
@@ -1196,59 +1196,59 @@ app_run(app_data *user_data, int argc, char **argv)
 <li>
 <p>To tell the platform that your application is registered for the operation, add the applicable operations to the manifest file:</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3.1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;org.tizen.basicuiapplication&quot; version=&quot;1.0.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;profile name=&quot;wearable&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;ui-application appid=&quot;org.tizen.basicuiapplication&quot; exec=&quot;basicuiapplication&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&quot;capp&quot; multiple=&quot;false&quot; taskmanage=&quot;true&quot; nodisplay=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon&gt;basicuiapplication.png&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;basicuiapplication&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ui-application&gt;
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1"
+          package="org.tizen.basicuiapplication" version="1.0.0"&gt;
+   &lt;profile name="wearable"/&gt;
+   &lt;ui-application appid="org.tizen.basicuiapplication" exec="basicuiapplication"
+                   type="capp" multiple="false" taskmanage="true" nodisplay="false"&gt;
+      &lt;icon&gt;basicuiapplication.png&lt;/icon&gt;
+      &lt;label&gt;basicuiapplication&lt;/label&gt;
+      &lt;app-control&gt;
+         &lt;operation name="http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed"/&gt;
+         &lt;operation name="http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service"/&gt;
+         &lt;operation name="http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service"/&gt;
+      &lt;/app-control&gt;
+   &lt;/ui-application&gt;
 &lt;/manifest&gt;
 </pre>
 </li>
 <li>
 <p>Define the callback and register it to <code>ui_app_lifecycle_callback::app_control</code>:</p>
 <pre class="prettyprint">
-#define NFC_APPCONTROL_STRING &quot;http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service&quot;
+#define NFC_APPCONTROL_STRING "http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service"
 
 bool
 service_app_control(app_control_h service, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;struct _appdata *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;char *operation;
-&nbsp;&nbsp;&nbsp;&nbsp;char *aid;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_operation(service, &amp;operation);
-&nbsp;&nbsp;&nbsp;&nbsp;if ((strncmp(operation, NFC_APPCONTROL_STRING,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strlen(NFC_APPCONTROL_STRING)) == 0)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;HCETESTAPP&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;nfc appcontrol operation: [%s]&quot;, operation);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(service, &quot;data&quot;, &amp;aid);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;HCETESTAPP&quot;, &quot;nfc appcontrol uri: [%s]&quot;, aid);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    struct _appdata *ad = data;
+    char *operation;
+    char *aid;
+    int ret = 0;
+
+    app_control_get_operation(service, &amp;operation);
+    if ((strncmp(operation, NFC_APPCONTROL_STRING,
+                 strlen(NFC_APPCONTROL_STRING)) == 0)) {
+        dlog_print(DLOG_INFO, "HCETESTAPP",
+                   "nfc appcontrol operation: [%s]", operation);
+        app_control_get_extra_data(service, "data", &amp;aid);
+        dlog_print(DLOG_INFO, "HCETESTAPP", "nfc appcontrol uri: [%s]", aid);
+    }
 }
 
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char ad[50] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_event_callback_s event_callback;
+    char ad[50] = {0,};
+    service_app_event_callback_s event_callback;
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = service_app_control;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.low_memory = service_app_low_memory_callback;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.low_battery = service_app_low_battery_callback;
+    event_callback.create = service_app_create;
+    event_callback.terminate = service_app_terminate;
+    event_callback.app_control = service_app_control;
+    event_callback.low_memory = service_app_low_memory_callback;
+    event_callback.low_battery = service_app_low_battery_callback;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, ad);
+    return service_app_main(argc, argv, &amp;event_callback, ad);
 }
 </pre>
 </li>
@@ -1273,9 +1273,9 @@ nfc_manager_initialize();
 <li><p>After the initialization of the NFC manager, ensure that NFC is supported and activated on the device. The <code>nfc_manager_is_supported()</code> function checks whether NFC is supported. The <code>nfc_manager_is_activated()</code> function gets the NFC activation state. </p>
 <pre class="prettyprint">
 if (!nfc_manager_is_supported())
-&nbsp;&nbsp;&nbsp;&nbsp;/* Report error, end the application */
+    /* Report error, end the application */
 if (!nfc_manager_is_activated())
-&nbsp;&nbsp;&nbsp;&nbsp;/* Report error, ask the user to switch on NFC */
+    /* Report error, ask the user to switch on NFC */
 </pre></li>
 
 <li><p>At the end of the application life-cycle, call the <code>nfc_manager_deinitialize()</code> function. It releases all resources of the NFC manager and disconnects the session between it and your application.</p>
@@ -1300,13 +1300,13 @@ nfc_ndef_record_h ndef_name_record = NULL;
 nfc_ndef_record_h ndef_phone_record = NULL;
 nfc_ndef_record_h ndef_email_record = NULL;
 
-const char *name = &quot;John Doe&quot;;
-const char *phone = &quot;+82556666888&quot;;
-const char *email = &quot;john.doe@tizen.org&quot;;
+const char *name = "John Doe";
+const char *phone = "+82556666888";
+const char *email = "john.doe@tizen.org";
 
-nfc_ndef_record_create_text(&amp;ndef_name_record, name, &quot;en-US&quot;, NFC_ENCODE_UTF_8);
-nfc_ndef_record_create_text(&amp;ndef_phone_record, phone, &quot;en-US&quot;, NFC_ENCODE_UTF_8);
-nfc_ndef_record_create_text(&amp;ndef_email_record, email, &quot;en-US&quot;, NFC_ENCODE_UTF_8);
+nfc_ndef_record_create_text(&amp;ndef_name_record, name, "en-US", NFC_ENCODE_UTF_8);
+nfc_ndef_record_create_text(&amp;ndef_phone_record, phone, "en-US", NFC_ENCODE_UTF_8);
+nfc_ndef_record_create_text(&amp;ndef_email_record, email, "en-US", NFC_ENCODE_UTF_8);
 </pre>
 </li>
 <li>
@@ -1326,7 +1326,7 @@ nfc_ndef_message_append_record(ndef_message, ndef_email_record);
 </ol>
 </li>
 
-<li>Register a callback to receive notifications about discovered P2P targets. 
+<li>Register a callback to receive notifications about discovered P2P targets.
 <p>To exchange messages using P2P, register a callback for receiving notifications about discovered P2P targets using the <code>nfc_manager_set_p2p_target_discovered_cb()</code> function. When the P2P target is discovered, the callback provides a handle to that device and information on whether it is attached or detached.</p>
 <pre class="prettyprint">
 nfc_manager_set_p2p_target_discovered_cb(on_target_discovered, NULL);
diff --git a/org.tizen.guides/html/native/connectivity/nsd_n.htm b/org.tizen.guides/html/native/connectivity/nsd_n.htm
index 09db4f0..ade7bd6 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/nsd_n.htm
+++ b/org.tizen.guides/html/native/connectivity/nsd_n.htm
@@ -33,14 +33,14 @@
                        <li><a href="#dnssd_service">Managing a Local Service with DNSSD</a></li>
                        <li><a href="#dnssd_search">Browsing Remote Services with DNSSD</a></li>
                        </ul>
-                       </li>                   
+                       </li>
                        <li>SSDP
                        <ul class="toc">
                        <li><a href="#ssdp_service">Managing a Local Service with SSDP</a></li>
                        <li><a href="#ssdp_search">Browsing Remote Services with SSDP</a></li>
                        </ul>
                        </li>
-        </ul>  
+        </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__DNSSD__MODULE.html">DNSSD API for Mobile Native</a></li>
@@ -99,10 +99,10 @@ int error_code;
 
 error_code = dnssd_initialize();
 if (error_code != DNSSD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 </pre>
 
-<p>When no longer needed, release the DNS-SD:</p> 
+<p>When no longer needed, release the DNS-SD:</p>
 <pre class="prettyprint">
 dnssd_deinitialize();
 </pre>
@@ -124,10 +124,10 @@ int error_code;
 
 error_code = ssdp_initialize();
 if (error_code != SSDP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 </pre>
 
-<p>When no longer needed, release the SSDP:</p> 
+<p>When no longer needed, release the SSDP:</p>
 <pre class="prettyprint">
 ssdp_deinitialize();
 </pre>
@@ -137,7 +137,7 @@ ssdp_deinitialize();
 </ul>
 
  <h2 id="dnssd_service" name="dnssd_service">Managing a Local Service with DNSSD</h2>
- 
+
 <p>To announce a local service, create a local service handle using the <code>dnssd_create_local_service()</code> function, and set the service information using the handle. Afterwards, you can register the local service using the <code>dnssd_register_local_service()</code> function.</p>
 
 <p>To manage a local service, you must create and register the service:</p>
@@ -150,46 +150,46 @@ ssdp_deinitialize();
 
 <pre class="prettyprint">
 dnssd_service_h service_handle;
-char *service_type = &quot;_http._tcp&quot;;
+char *service_type = "_http._tcp";
 int error_code;
 
 error_code = dnssd_create_local_service(service_type, &amp;service_handle);
 if (error_code == DNSSD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in creating a service handle.&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in creating a service handle.");
 </pre>
 </li>
 
 <li>Set a unique service name and a port number for the created service:
 <pre class="prettyprint">
-char* service_name = &quot;SamsungTest&quot;;
+char* service_name = "SamsungTest";
 int port = 80;
 
 if (dnssd_service_set_name(service_handle, service_name) == DNSSD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in setting service name&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting service name");
 if (dnssd_service_set_port(service_handle, port) == DNSSD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in setting port&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting port");
 </pre>
 </li>
 <li>You can add a TXT record, which gives additional information about the created service. The TXT record is stored in a structured form using key-value pairs.
 <p>For more information, see section 6 of <a href="http://files.dns-sd.org/draft-cheshire-dnsext-dns-sd.txt" target="_blank">http://files.dns-sd.org/draft-cheshire-dnsext-dns-sd.txt</a>. The TXT record of the known service types can be found at <a href="http://www.dns-sd.org/ServiceTypes.html" target="_blank">http://www.dns-sd.org/ServiceTypes.html</a>.</p>
 
 <pre class="prettyprint">
-char* key = &quot;path&quot;;
-char* value = &quot;http://www.samsung.com&quot;;
+char* key = "path";
+char* value = "http://www.samsung.com";
 int length = 30;
 
 if (dnssd_service_add_txt_record_value(service_handle, key, length, value)
-&nbsp;&nbsp;&nbsp;&nbsp;== DNSSD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in setting service TXT&quot;);
+    == DNSSD_ERROR_NONE)
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting service TXT");
 </pre>
 
-<p>When no longer needed, you can remove the TXT record from the created service:</p> 
+<p>When no longer needed, you can remove the TXT record from the created service:</p>
 
 <pre class="prettyprint">
-char* key = &quot;path&quot;;
+char* key = "path";
 
 if (dnssd_service_remove_txt_record_value(service_handle, key) == DNSSD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in removing service TXT&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in removing service TXT");
 </pre>
 </li>
 </ol>
@@ -201,28 +201,28 @@ if (dnssd_service_remove_txt_record_value(service_handle, key) == DNSSD_ERROR_NO
 <pre class="prettyprint">
 error_code = dnssd_register_local_service(service_handle, __registered_cb, NULL);
 if (error_code == DNSSD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in registering a local service.&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in registering a local service.");
 </pre>
 </li>
 <li>The callback defined in the <code>dnssd_register_local_service()</code> function is called when the service registration is finished:
 <pre class="prettyprint">
 void
 __registered_cb(dnssd_error_e result, dnssd_service_h dnssd_service,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == DNSSD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Service is registered successfully */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Registered&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (result == DNSSD_NAME_CONFLICT) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Name conflict exists */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Name conflict&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (result == DNSSD_ALREADY_REGISTERED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Service is already registered */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Already registered&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Result is unknown */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Unknown result&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (result == DNSSD_ERROR_NONE) {
+        /* Service is registered successfully */
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Registered");
+    } else if (result == DNSSD_NAME_CONFLICT) {
+        /* Name conflict exists */
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Name conflict");
+    } else if (result == DNSSD_ALREADY_REGISTERED) {
+        /* Service is already registered */
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Already registered");
+    } else {
+        /* Result is unknown */
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Unknown result");
+    }
 }
 </pre>
 </li>
@@ -238,7 +238,7 @@ dnssd_destroy_local_service(service_handle);
 </ol>
 
  <h2 id="dnssd_search" name="dnssd_search">Browsing Remote Services with DNSSD</h2>
- 
+
 <p>To search for available services on a network, use a service type or target information:</p>
 
 <ol>
@@ -247,13 +247,13 @@ dnssd_destroy_local_service(service_handle);
 
 <pre class="prettyprint">
 dnssd_browser_h browser_handle;
-char *service_type = &quot;_ftp._tcp&quot;;
+char *service_type = "_ftp._tcp";
 int error_code;
 
 error_code = dnssd_start_browsing_service(service_type, &amp;browser_handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__found_cb, NULL);
+                                          __found_cb, NULL);
 if (error_code == DNSSD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Start browsing&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Start browsing");
 </pre>
 </li>
 <li>The callback defined in the <code>dnssd_start_browsing_service()</code> function is called when the remote service becomes available or unavailable:
@@ -261,85 +261,85 @@ if (error_code == DNSSD_ERROR_NONE)
 void
 __dnssd_print_found(dnssd_service_h dnssd_remote_service)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handling the found service */
-&nbsp;&nbsp;&nbsp;&nbsp;char *service_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *service_type = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *ip_v4_address = NULL
-&nbsp;&nbsp;&nbsp;&nbsp;char *ip_v6_address = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *txt_record_value = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int length = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int port = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = dnssd_service_get_name(dnssd_remote_service, &amp;service_name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == DNSSD_ERROR_NONE &amp;&amp; service_ name!= NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Service name [%s]&quot;, service_ name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = dnssd_service_get_type(dnssd_remote_service, &amp;service_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == DNSSD_ERROR_NONE &amp;&amp; service_type != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Service type [%s]&quot;, service_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = dnssd_service_get_ip(dnssd_remote_service, &amp;ip_v4_address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;ip_v6_address)
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == DNSSD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ip_v4_address)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;IPV4 address [%s]&quot;, ip_v4_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ip_v6_address)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;IPV6 address [%s]&quot;, ip_v6_address);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = dnssd_service_get_port(dnssd_remote_service, &amp;port)
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == DNSSD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Service port [%d]&quot;, port);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = dnssd_service_get_txt_record_value(dnssd_remote_service,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;txt_record_value,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == DNSSD_ERROR_NONE &amp;&amp; txt_record_value!= NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Service TXT [%s]&quot;, txt_record_value);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_name)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(service_name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_type)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(service_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ip_v4_address)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(ip_v4_address);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ip_v6_address)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(ip_v6_address);
-&nbsp;&nbsp;&nbsp;&nbsp;if (txt_record_value)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(txt_record_value);
+    /* Handling the found service */
+    char *service_name = NULL;
+    char *service_type = NULL;
+    char *ip_v4_address = NULL
+    char *ip_v6_address = NULL;
+    char *txt_record_value = NULL;
+    int length = 0;
+    int port = 0;
+    error_code = dnssd_service_get_name(dnssd_remote_service, &amp;service_name);
+    if (error_code == DNSSD_ERROR_NONE &amp;&amp; service_ name!= NULL)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Service name [%s]", service_ name);
+
+    error_code = dnssd_service_get_type(dnssd_remote_service, &amp;service_type);
+    if (error_code == DNSSD_ERROR_NONE &amp;&amp; service_type != NULL)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Service type [%s]", service_type);
+
+    error_code = dnssd_service_get_ip(dnssd_remote_service, &amp;ip_v4_address,
+                                      &amp;ip_v6_address)
+    if (error_code == DNSSD_ERROR_NONE) {
+        if (ip_v4_address)
+            dlog_print(DLOG_DEBUG, LOG_TAG, "IPV4 address [%s]", ip_v4_address);
+        if (ip_v6_address)
+            dlog_print(DLOG_DEBUG, LOG_TAG, "IPV6 address [%s]", ip_v6_address);
+    }
+
+    error_code = dnssd_service_get_port(dnssd_remote_service, &amp;port)
+    if (error_code == DNSSD_ERROR_NONE)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Service port [%d]", port);
+    error_code = dnssd_service_get_txt_record_value(dnssd_remote_service,
+                                                    &amp;txt_record_value,
+                                                    &amp;value);
+    if (error_code == DNSSD_ERROR_NONE &amp;&amp; txt_record_value!= NULL)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Service TXT [%s]", txt_record_value);
+
+    if (service_name)
+        free(service_name);
+    if (service_type)
+        free(service_type);
+    if (ip_v4_address)
+        free(ip_v4_address);
+    if (ip_v6_address)
+        free(ip_v6_address);
+    if (txt_record_value)
+        free(txt_record_value);
 }
 
 void
 __found_cb(dnssd_service_h dnssd_remote_service, dnssd_service_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+           void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Browse Service Callback\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Handler: %u\n&quot;, dnssd_remote_service);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;State: &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;switch (browse_state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case DNSSD_SERVICE_STATE_AVAILABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* DNS-SD service found */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__dnssd_print_found(dnssd_remote_service);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Available\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case DNSSD_SERVICE_STATE_UNAVAILABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* DNS-SD service becomes unavailable */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Un-Available\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case DNSSD_SERVICE_STATE_NAME_LOOKUP_FAILED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Browsing failed */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Browse Failure\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case DNSSD_SERVICE_STATE_HOST_NAME_LOOKUP_FAILED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Resolving service name failed */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Resolve Service Name Failure\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case DNSSD_SERVICE_STATE_ADDRESS_LOOKUP_FAILED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Resolving service address failed */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Resolve Service Address\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Unknown Browse State\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Browse Service Callback\n");
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Handler: %u\n", dnssd_remote_service);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "State: ");
+    switch (browse_state) {
+    case DNSSD_SERVICE_STATE_AVAILABLE:
+        /* DNS-SD service found */
+        __dnssd_print_found(dnssd_remote_service);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Available\n");
+        break;
+    case DNSSD_SERVICE_STATE_UNAVAILABLE:
+        /* DNS-SD service becomes unavailable */
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Un-Available\n");
+        break;
+    case DNSSD_SERVICE_STATE_NAME_LOOKUP_FAILED:
+        /* Browsing failed */
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Browse Failure\n");
+        break;
+    case DNSSD_SERVICE_STATE_HOST_NAME_LOOKUP_FAILED:
+        /* Resolving service name failed */
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Resolve Service Name Failure\n");
+        break;
+    case DNSSD_SERVICE_STATE_ADDRESS_LOOKUP_FAILED:
+        /* Resolving service address failed */
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Resolve Service Address\n");
+        break;
+    default:
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Unknown Browse State\n");
+        break;
+    }
 }
 </pre>
 </li>
@@ -352,7 +352,7 @@ dnssd_stop_browsing_service(browser_handle);
 
 
  <h2 id="ssdp_service" name="ssdp_service">Managing a Local Service with SSDP</h2>
- 
+
 <p>To announce a local service, create a local service handle using the <code>ssdp_create_local_service()</code> function, and set the service information using the handle. Afterwards, you can register the local service using the <code>ssdp_register_local_service()</code> function.</p>
 
 <p>To manage a local service, you must create and register the service:</p>
@@ -365,25 +365,25 @@ dnssd_stop_browsing_service(browser_handle);
 
 <pre class="prettyprint">
 ssdp_service_h service_handle;
-char *target = &quot;upnp:rootdevice&quot;;
+char *target = "upnp:rootdevice";
 int error_code;
 
 error_code = ssdp_create_local_service(target, &amp;service_handle);
 if (error_code == SSDP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in creating a service handle.&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in creating a service handle.");
 </pre>
 </li>
 
 <li>Set a USN (Unique Service Name) and a URL (Uniform Resource Locator) for the created service.
 <p>The USN format is also specified in the UPnP forum. For the URL, see the RFC 3986.</p>
 <pre class="prettyprint">
-char* usn = &quot;uuid:1234abcd-12ab-12ab-12ab-1234567abc12::upnp:rootdevice&quot;;
-char* url = &quot;192.168.0.2:1234&quot;;
+char* usn = "uuid:1234abcd-12ab-12ab-12ab-1234567abc12::upnp:rootdevice";
+char* url = "192.168.0.2:1234";
 
 if (ssdp_service_set_usn(service_handle, usn) == SSDP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in setting USN&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting USN");
 if (ssdp_service_set_url(service_handle, url) == SSDP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in setting URL&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting URL");
 </pre>
 </li>
 </ol>
@@ -396,7 +396,7 @@ if (ssdp_service_set_url(service_handle, url) == SSDP_ERROR_NONE)
 <pre class="prettyprint">
 error_code = ssdp_register_local_service(service_handle, __registered_cb, NULL);
 if (error_code == SSDP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Success in registering a local service.&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Success in registering a local service.");
 </pre>
 </li>
 <li>The callback defined in the <code>ssdp_register_local_service()</code> function is called when the service registration is finished:
@@ -404,7 +404,7 @@ if (error_code == SSDP_ERROR_NONE)
 void
 __registered_cb(ssdp_error_e result, ssdp_service_h ssdp_service, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Register result: %d\n&quot;, result);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Register result: %d\n", result);
 }
 </pre>
 </li>
@@ -429,28 +429,28 @@ ssdp_destroy_local_service(service_handle);
 
 <pre class="prettyprint">
 ssdp_browser_h browser_handle;
-char *target = &quot;upnp:rootdevice&quot;;
+char *target = "upnp:rootdevice";
 int error_code;
 
 error_code = ssdp_start_browsing_service(target, &amp;browser_handle, __found_cb, NULL);
 if (error_code == SSDP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Start browsing&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Start browsing");
 </pre>
 </li>
 <li>The callback defined in the <code>ssdp_start_browsing_service()</code> function is called when the remote service becomes available or unavailable:
 <pre class="prettyprint">
 void
 __found_cb(ssdp_service_h ssdp_remote_service, ssdp_service_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+           void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *usn;
-&nbsp;&nbsp;&nbsp;&nbsp;char *url;
-&nbsp;&nbsp;&nbsp;&nbsp;ssdp_service_get_usn(ssdp_remote_service, &amp;usn);
-&nbsp;&nbsp;&nbsp;&nbsp;ssdp_service_get_url(ssdp_remote_service, &amp;url);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;state: %s\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state==SSDP_SERVICE_STATE_AVAILABLE ? &quot;AVAILABLE&quot; : &quot;UNAVAILABLE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;usn: %s\n&quot;, usn);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;url: %s\n&quot;, url);
+    char *usn;
+    char *url;
+    ssdp_service_get_usn(ssdp_remote_service, &amp;usn);
+    ssdp_service_get_url(ssdp_remote_service, &amp;url);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "state: %s\n",
+               state==SSDP_SERVICE_STATE_AVAILABLE ? "AVAILABLE" : "UNAVAILABLE");
+    dlog_print(DLOG_DEBUG, LOG_TAG, "usn: %s\n", usn);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "url: %s\n", url);
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/connectivity/plugins_n.htm b/org.tizen.guides/html/native/connectivity/plugins_n.htm
index c9efd87..dcf2b74 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/plugins_n.htm
+++ b/org.tizen.guides/html/native/connectivity/plugins_n.htm
@@ -35,7 +35,7 @@
             <li><a href="#File_upload">Uploading Files</a></li>
             <li><a href="#File_download">Downloading Files</a></li>
             <li><a href="#File_remove">Removing Files</a></li>
-        </ul>          
+        </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor API for Mobile Native</a></li>
@@ -56,18 +56,18 @@
 <p>The main feature of the Service Adaptor API is to connect adaptors to and disconnect them from the Service Adaptor Client though D-Bus. The Service Adaptor uses 2 path types:</p>
     <ul>
         <li><strong>Logical path</strong>
-<p>The path of the root file system. It starts from the root path (&quot;/&quot;), and you can use the path like in Linux (for example, &quot;/folder1/image1.jpg&quot;).</p>
+<p>The path of the root file system. It starts from the root path ("/"), and you can use the path like in Linux (for example, "/folder1/image1.jpg").</p>
         </li>
         <li><strong>Physical path</strong>
-<p>A specific URI used for the cloud server. Some clouds use a logical path, but others use a specific key or URL (for example, &quot;/&quot; is &quot;ZmNhMWY2MTZlY2M1NDg4OGJmZDY4O&quot; and &quot;/folder1&quot; is &quot;2JI32UNJDWQEQWQWEADSSAD&quot;).</p>
+<p>A specific URI used for the cloud server. Some clouds use a logical path, but others use a specific key or URL (for example, "/" is "ZmNhMWY2MTZlY2M1NDg4OGJmZDY4O" and "/folder1" is "2JI32UNJDWQEQWQWEADSSAD").</p>
         </li>
     </ul>
-       
+
 <p align="center"><strong>Figure: Service Adaptor structure</strong></p>
 <p style="text-align:center;"><img alt="Service Adaptor structure" src="../../images/service_adaptor_structure.png"/></p>
 
-<h2 id="adaptors" name="adaptors">Available Adaptors</h2>      
-       
+<h2 id="adaptors" name="adaptors">Available Adaptors</h2>
+
 <p>The following adaptors are provided:</p>
 
 <ul>
@@ -76,7 +76,7 @@
     <ul>
         <li>Get the Auth Plugin list.</li>
         <li>Set the Plugin.</li>
-        <li>Request the Channel Auth, such as the service name (&quot;com.serviceadaptor.message&quot;), app ID, service ID (0: contact, 1: free message), and mobile station identification number (IMSI).</li>
+        <li>Request the Channel Auth, such as the service name ("com.serviceadaptor.message"), app ID, service ID (0: contact, 1: free message), and mobile station identification number (IMSI).</li>
     </ul>
 </li>
     <li>Storage adaptor
@@ -88,7 +88,7 @@
         <li>Cancel, pause, and resume a file transfer.</li>
                <li><a href="#File_remove">Remove a file from the storage</a>.</li>
     </ul>
-       </li> 
+       </li>
        <li>Contact adaptor
 <p>This adaptor manages contact information in the Contact server, including the contact profiles and service registration information. It allows you to:</p>
     <ul>
@@ -151,29 +151,29 @@ ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb, (void
 bool
 _plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *list = (Evas_Object *)user_data;
+    Evas_Object *list = (Evas_Object *)user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!plugin_uri || !list)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    if (!plugin_uri || !list)
+        return false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if ((service_mask &amp; SERVICE_PLUGIN_SERVICE_AUTH)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; (service_mask &amp; SERVICE_PLUGIN_SERVICE_STORAGE)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_list_item_append(list, plugin_uri, NULL, NULL, _show_plugin_view, plugin_uri);
+    if ((service_mask &amp; SERVICE_PLUGIN_SERVICE_AUTH)
+        &amp;&amp; (service_mask &amp; SERVICE_PLUGIN_SERVICE_STORAGE)) {
+        elm_list_item_append(list, plugin_uri, NULL, NULL, _show_plugin_view, plugin_uri);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_plugin_h plugin = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_adaptor_create_plugin(service_adaptor, plugin_uri, &amp;plugin);
+        service_plugin_h plugin = NULL;
+        service_adaptor_create_plugin(service_adaptor, plugin_uri, &amp;plugin);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Hide this using config file or user input, because it is security information */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;enasvv4l8hdbmhn&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;uqhl4pp8mo7hmgn&quot;);
+        /* Hide this using config file or user input, because it is security information */
+        service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY,
+                                    "enasvv4l8hdbmhn");
+        service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET,
+                                    "uqhl4pp8mo7hmgn");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_plugin_start(plugin, (SERVICE_PLUGIN_SERVICE_AUTH
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| SERVICE_PLUGIN_SERVICE_STORAGE));
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        service_plugin_start(plugin, (SERVICE_PLUGIN_SERVICE_AUTH
+                                      | SERVICE_PLUGIN_SERVICE_STORAGE));
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 
@@ -196,10 +196,10 @@ static service_adaptor_h service_adaptor;
 void
 service_adaptor_init()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = service_adaptor_create(&amp;service_adaptor);
+    int ret = service_adaptor_create(&amp;service_adaptor);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SERVICE_ADAPTOR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (ret != SERVICE_ADAPTOR_ERROR_NONE)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -210,10 +210,10 @@ service_adaptor_init()
 static void
 service_adaptor_deinit(int result, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = service_adaptor_destroy(service_adaptor);
+    int ret = service_adaptor_destroy(service_adaptor);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SERVICE_ADAPTOR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (ret != SERVICE_ADAPTOR_ERROR_NONE)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -229,8 +229,8 @@ service_adaptor_deinit(int result, void *user_data)
 <p>Create a data structure for storing the service plugin handles:</p>
 <pre class="prettyprint">
 struct plugin_list_item_s {
-&nbsp;&nbsp;&nbsp;&nbsp;service_plugin_h plugin;
-&nbsp;&nbsp;&nbsp;&nbsp;struct plugin_list_item_s *next;
+    service_plugin_h plugin;
+    struct plugin_list_item_s *next;
 };
 
 typedef struct plugin_list_item_s plugin_list_item_t;
@@ -249,38 +249,38 @@ static plugin_list_t plugins;
 static bool
 _plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;plugin_list_item_h plugin_item =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(plugin_list_item_h)calloc(1, sizeof(plugin_list_item_t));
+    plugin_list_item_h plugin_item =
+        (plugin_list_item_h)calloc(1, sizeof(plugin_list_item_t));
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the plugin handle */
-&nbsp;&nbsp;&nbsp;&nbsp;service_adaptor_create_plugin(service_adaptor, plugin_uri, &amp;plugin_item-&gt;plugin);
+    /* Create the plugin handle */
+    service_adaptor_create_plugin(service_adaptor, plugin_uri, &amp;plugin_item-&gt;plugin);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the plugin properties */
-&nbsp;&nbsp;&nbsp;&nbsp;service_plugin_add_property(plugin_item-&gt;plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;app_key&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;service_plugin_add_property(plugin_item-&gt;plugin,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SERVICE_PLUGIN_PROPERTY_APP_SECRET,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;app_secret&quot;);
+    /* Set the plugin properties */
+    service_plugin_add_property(plugin_item-&gt;plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY,
+                                "app_key");
+    service_plugin_add_property(plugin_item-&gt;plugin,
+                                SERVICE_PLUGIN_PROPERTY_APP_SECRET,
+                                "app_secret");
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize the plugin */
-&nbsp;&nbsp;&nbsp;&nbsp;service_plugin_start(plugin_item-&gt;plugin, service_mask);
+    /* Initialize the plugin */
+    service_plugin_start(plugin_item-&gt;plugin, service_mask);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 /* Retrieve the plugin list */
 void
 plugin_lookup()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Iterate through the plugin list */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use the callback to separately handle each plugin in the list */
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;plugins);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == SERVICE_ADAPTOR_ERROR_NO_DATA)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle no plugins */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (ret != SERVICE_ADAPTOR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Iterate through the plugin list */
+    /* Use the callback to separately handle each plugin in the list */
+    int ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb,
+                                             &amp;plugins);
+
+    if (ret == SERVICE_ADAPTOR_ERROR_NO_DATA)
+        /* Handle no plugins */
+    else if (ret != SERVICE_ADAPTOR_ERROR_NONE)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -298,7 +298,7 @@ plugin_lookup()
 void
 plugin_get_file_list(service_plugin_h plugin)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;service_storage_get_file_list(plugin, &quot;/&quot;, _service_storage_result_cb, NULL);
+    service_storage_get_file_list(plugin, "/", _service_storage_result_cb, NULL);
 }
 </pre>
 </li>
@@ -310,9 +310,9 @@ plugin_get_file_list(service_plugin_h plugin)
 static void
 _service_storage_result_cb(int result, service_storage_file_list_h list, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Iterate through the list */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use the callback to separately handle each file in the list */
-&nbsp;&nbsp;&nbsp;&nbsp;service_storage_file_list_foreach_file(list, _file_iterator_cb, NULL);
+    /* Iterate through the list */
+    /* Use the callback to separately handle each file in the list */
+    service_storage_file_list_foreach_file(list, _file_iterator_cb, NULL);
 }
 </pre>
 </li>
@@ -324,16 +324,16 @@ _service_storage_result_cb(int result, service_storage_file_list_h list, void *u
 static bool
 _file_iterator_cb(service_storage_file_h file, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned long long size = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;bool is_dir = false;
+    char *name = NULL;
+    unsigned long long size = 0;
+    bool is_dir = false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get basic file information */
-&nbsp;&nbsp;&nbsp;&nbsp;service_storage_file_is_dir(file, &amp;is_dir);
-&nbsp;&nbsp;&nbsp;&nbsp;service_storage_file_get_size(file, &amp;size);
-&nbsp;&nbsp;&nbsp;&nbsp;service_storage_file_get_logical_path(file, &amp;name);
+    /* Get basic file information */
+    service_storage_file_is_dir(file, &amp;is_dir);
+    service_storage_file_get_size(file, &amp;size);
+    service_storage_file_get_logical_path(file, &amp;name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -352,23 +352,23 @@ _file_iterator_cb(service_storage_file_h file, void *user_data)
 static void
 task_progress_cb(unsigned long long progress, unsigned long long total, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the task progress */
+    /* Handle the task progress */
 }
 
 static void
 task_state_cb(service_storage_task_state_e state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle task states */
-&nbsp;&nbsp;&nbsp;&nbsp;switch (state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case SERVICE_STORAGE_TASK_IN_PROGRESS:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SERVICE_STORAGE_TASK_COMPLETED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SERVICE_STORAGE_TASK_CANCELED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SERVICE_STORAGE_TASK_FAILED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* Handle task states */
+    switch (state) {
+    case SERVICE_STORAGE_TASK_IN_PROGRESS:
+        break;
+    case SERVICE_STORAGE_TASK_COMPLETED:
+        break;
+    case SERVICE_STORAGE_TASK_CANCELED:
+        break;
+    case SERVICE_STORAGE_TASK_FAILED:
+        break;
+    }
 }
 </pre>
 </li>
@@ -378,49 +378,49 @@ task_state_cb(service_storage_task_state_e state, void *user_data)
 <pre class="prettyprint">
 void
 plugin_upload_file(service_plugin_h plugin, const char *local_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *storage_path)
+                   const char *storage_path)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;service_storage_task_h task;
+    service_storage_task_h task;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Upload a local file to the storage */
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_storage_create_upload_task(plugin, local_path, storage_path, &amp;task)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= SERVICE_ADAPTOR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Upload a local file to the storage */
+    if (service_storage_create_upload_task(plugin, local_path, storage_path, &amp;task)
+        != SERVICE_ADAPTOR_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 </pre>
 </li>
 
 <li>
 <p>Register the defined callbacks:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the task progress change callback */
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_storage_set_task_progress_cb(task, task_progress_cb, NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= SERVICE_ADAPTOR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Register the task progress change callback */
+    if (service_storage_set_task_progress_cb(task, task_progress_cb, NULL)
+        != SERVICE_ADAPTOR_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the task state change callback */
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_storage_set_task_state_changed_cb(task, task_state_cb, NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= SERVICE_ADAPTOR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Register the task state change callback */
+    if (service_storage_set_task_state_changed_cb(task, task_state_cb, NULL)
+        != SERVICE_ADAPTOR_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 </pre>
 </li>
 
 <li>
 <p>Start the upload task:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_storage_start_task(task) != SERVICE_ADAPTOR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (service_storage_start_task(task) != SERVICE_ADAPTOR_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 }
 </pre>
 </li>
@@ -438,38 +438,38 @@ plugin_upload_file(service_plugin_h plugin, const char *local_path,
 <pre class="prettyprint">
 void
 plugin_download_file(service_plugin_h plugin, const char *storage_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *local_path)
+                     const char *local_path)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;service_storage_task_h task;
+    service_storage_task_h task;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Download a file from the storage to a local directory */
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_storage_create_download_task(plugin, storage_path, local_path, &amp;task)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= SERVICE_ADAPTOR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Download a file from the storage to a local directory */
+    if (service_storage_create_download_task(plugin, storage_path, local_path, &amp;task)
+        != SERVICE_ADAPTOR_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 </pre>
 </li>
 
 <li>
 <p>Register callbacks for monitoring the download task progress and state:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the task progress change callback */
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_storage_set_task_progress_cb(task, task_progress_cb, NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= SERVICE_ADAPTOR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Register the task progress change callback */
+    if (service_storage_set_task_progress_cb(task, task_progress_cb, NULL)
+        != SERVICE_ADAPTOR_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the task state change callback */
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_storage_set_task_state_changed_cb(task, task_state_cb, NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= SERVICE_ADAPTOR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Register the task state change callback */
+    if (service_storage_set_task_state_changed_cb(task, task_state_cb, NULL)
+        != SERVICE_ADAPTOR_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 </pre>
 
 <p>The file upload and download processes use the same callback types. You can use the callbacks defined for the file upload, or define separate callbacks, as needed.</p>
@@ -479,11 +479,11 @@ plugin_download_file(service_plugin_h plugin, const char *storage_path,
 <li>
 <p>Start the download task:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;if (service_storage_start_task(task) != SERVICE_ADAPTOR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (service_storage_start_task(task) != SERVICE_ADAPTOR_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 }
 </pre>
 </li>
@@ -498,18 +498,18 @@ plugin_download_file(service_plugin_h plugin, const char *storage_path,
 static void
 file_remove_cb(int result, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != SERVICE_ADAPTOR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (result != SERVICE_ADAPTOR_ERROR_NONE)
+        /* Error handling */
 }
 
 /* Remove the file */
 void
 plugin_remove_file(service_plugin_h plugin, const char *file)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = service_storage_remove(plugin, file, file_remove_cb, NULL);
+    int ret = service_storage_remove(plugin, file, file_remove_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SERVICE_ADAPTOR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (ret != SERVICE_ADAPTOR_ERROR_NONE)
+        /* Error handling */
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/connectivity/smartcard_n.htm b/org.tizen.guides/html/native/connectivity/smartcard_n.htm
index f31a32f..2c32f24 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/smartcard_n.htm
+++ b/org.tizen.guides/html/native/connectivity/smartcard_n.htm
@@ -32,7 +32,7 @@
                        <li><a href="#reader">Managing the Reader</a></li>
                        <li><a href="#session">Managing Sessions</a></li>
                        <li><a href="#channel">Managing Channels</a></li>
-                       <li><a href="#send">Sending a Transmission</a></li>                     
+                       <li><a href="#send">Sending a Transmission</a></li>
                </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -54,7 +54,7 @@
                <p>The SE Service API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__SE__SERVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__SE__SERVICE__MODULE.html">wearable</a> applications) allows you to <a href="#service">initialize and deinitialize the smart card features</a>, and get the available readers. The SE service functions as a connector to the SE framework system.</p>
     </li>
     <li>Reader
-<p>The Reader API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">wearable</a> applications) allows you to access the SE connected with the selected reader. You can <a href="#reader">get the reader name and open and close sessions</a>.</p>           
+<p>The Reader API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">wearable</a> applications) allows you to access the SE connected with the selected reader. You can <a href="#reader">get the reader name and open and close sessions</a>.</p>
     </li>
     <li>Session
        <p>A session is an open connection between an application on the device and a SE. The Session API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__SESSION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__SESSION__MODULE.html">wearable</a> applications) allows you to <a href="#session">open and close basic and logical channels</a>, and get ATR (answer to reset).</p>
@@ -67,14 +67,14 @@
 <p>All of the above are used when you <a href="#send">send a transmission</a>.</p>
 
 <p>The following figure illustrates the smart card service architecture in Tizen. The smart card service sends and receives data through the terminal of each SE.</p>
-<p align="center"><strong>Figure: Smart card service architecture</strong></p> 
-<p align="center"> <img alt="Smart card service architecture" src="../../images/smartcard_architecture.png" /> </p>  
+<p align="center"><strong>Figure: Smart card service architecture</strong></p>
+<p align="center"> <img alt="Smart card service architecture" src="../../images/smartcard_architecture.png" /> </p>
 
 <p>The Smartcard API is a reference implementation of the SIMalliance Open Mobile 3.0 API specification that enables Tizen applications to communicate with secure elements. For more information, see the <a href="http://simalliance.org/" target="_blank">SimAlliance</a>. The Tizen implementation differs from the original as follows:</p>
 
 <ul><li>Only the transport layer is provided. There is no service layer support in Tizen.</li>
-<li>The &quot;get version&quot; function does not exist. In Tizen, version management is not performed through a function.</li>
-<li>Allocation style differs dramatically. 
+<li>The "get version" function does not exist. In Tizen, version management is not performed through a function.</li>
+<li>Allocation style differs dramatically.
 The Open Mobile API can facilitate the memory management by calling the API twice (for an example, see section 6.3.1, Usage pattern, in the SIMalliance Open Mobile 3.0 API specification). However, Tizen Smartcard API does not follow this allocation style.</li>
 <li>For the <code>SE Service</code> object management, Tizen provides functions for initialization and deinitialization.</li></ul>
 
@@ -101,7 +101,7 @@ device_power_release_lock(POWER_LOCK_CPU);
 <p>To use the Smartcard API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/secureelement&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/secureelement&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -125,18 +125,18 @@ int ret;
 ret = smartcard_initialize();
 
 if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard initialize successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard initialize successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard initialize failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard initialize failed");
 </pre>
 <p>When the service is no longer needed, deinitialize it:</p>
 <pre class="prettyprint">
 ret = smartcard_deinitialize();
 
 if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard deinitialize successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard deinitialize successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard deinitialize failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard deinitialize failed");
 </pre>
 </li>
 
@@ -148,20 +148,20 @@ int *phReaders = NULL;
 ret = smartcard_get_readers(&amp;phReaders, &amp;pLength);
 
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_get_readers successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;readers length: %d&quot;, pLength);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_get_readers successful");
+    dlog_print(DLOG_INFO, LOG_TAG, "readers length: %d", pLength);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_get_readers failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_get_readers failed: %d", ret);
 }
 
 if (phReaders != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;free(phReaders);
+    free(phReaders);
 </pre></li>
 </ol>
 
  <h2 id="reader" name="reader">Managing the Reader</h2>
-                       
-<p>To manage a reader:</p>                     
+
+<p>To manage a reader:</p>
 
 <ol><li>
 <p>Retrieve the name of the reader with the <code>smartcard_reader_get_name()</code> function:</p>
@@ -172,10 +172,10 @@ char * pReader = NULL;
 
 ret = smartcard_reader_get_name(reader, &amp;pReader);
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_reader_get_name successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;reader name: %s&quot;, pReader);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_reader_get_name successful");
+    dlog_print(DLOG_INFO, LOG_TAG, "reader name: %s", pReader);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_reader_get_name failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_reader_get_name failed: %d", ret);
 }
 </pre>
 </li>
@@ -187,12 +187,12 @@ bool is_present = false;
 
 ret = smartcard_reader_is_secure_element_present(reader, &amp;is_present);
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;smartcard_reader_is_secure_element_present successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;reader secure element present: %d&quot;, is_present);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "smartcard_reader_is_secure_element_present successful");
+    dlog_print(DLOG_INFO, LOG_TAG, "reader secure element present: %d", is_present);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;smartcard_reader_is_secure_element_present failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "smartcard_reader_is_secure_element_present failed: %d", ret);
 }
 </pre>
 </li>
@@ -205,14 +205,14 @@ int session;
 ret = smartcard_reader_open_session(reader, &amp;session);
 
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = smartcard_reader_close_sessions(reader);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_reader_close_sessions successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;smartcard_reader_close_sessions failed: %d&quot;, ret);
+    ret = smartcard_reader_close_sessions(reader);
+    if (ret == SMARTCARD_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "smartcard_reader_close_sessions successful");
+    else
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "smartcard_reader_close_sessions failed: %d", ret);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;open session failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "open session failed: %d", ret);
 }
 </pre></li>
 </ol>
@@ -220,8 +220,8 @@ if (ret == SMARTCARD_ERROR_NONE) {
 
  <h2 id="session" name="session">Managing Sessions</h2>
 
-<p>You can manage a session using the session instance that you have created when opening the session with a reader. The session instance is the first parameter in all session-related APIs.</p> 
- 
+<p>You can manage a session using the session instance that you have created when opening the session with a reader. The session instance is the first parameter in all session-related APIs.</p>
+
 <p>To manage sessions:</p>
 
 <ul><li>Retrieve the reader that provides the session:
@@ -232,10 +232,10 @@ int reader;
 ret = smartcard_session_get_reader(session, &amp;reader);
 ret = smartcard_reader_get_name(reader, &amp;pReader);
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_get_reader successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;reader name: %s&quot;, pReader);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_get_reader successful");
+    dlog_print(DLOG_INFO, LOG_TAG, "reader name: %s", pReader);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_get_reader failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_get_reader failed");
 }
 </pre></li>
 <li>Retrieve the answer to reset (ATR) of the SE:
@@ -248,11 +248,11 @@ int pLength;
 ret = smartcard_session_get_atr(session, &amp;pAtr, &amp;pLength);
 
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_get_atr successful: %d&quot;, pLength);
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; pLength; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%x &quot;, (int)pAtr[i]);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_get_atr successful: %d", pLength);
+    for (i = 0; i &lt; pLength; i++)
+        dlog_print(DLOG_INFO, LOG_TAG, "%x ", (int)pAtr[i]);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_get_atr failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_get_atr failed");
 }
 </pre></li>
 <li>Open a basic or logical channel.
@@ -266,20 +266,20 @@ int channel;
 ret = smartcard_session_open_basic_channel(session, aid, 4, 0x00, &amp;channel);
 
 if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;smartcard_session_open_basic_channel successful: %d&quot;, channel);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "smartcard_session_open_basic_channel successful: %d", channel);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_open_basic_channel failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_open_basic_channel failed");
 
 /* Open logical channel */
 ret = smartcard_session_open_logical_channel(session, aid, 12, 0x04, &amp;channel);
 
 if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;smartcard_session_open_logical_channel successful: %d&quot;, (channel);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "smartcard_session_open_logical_channel successful: %d", (channel);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_open_logical_channel failed: %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_open_logical_channel failed: %d",
+               ret);
 </pre>
 </li>
 <li>Close all channels opened for a specific session:
@@ -289,9 +289,9 @@ int ret;
 ret = smartcard_session_close_channels(session);
 
 if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_close_channels successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_close_channels successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_close_channels failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_close_channels failed");
 </pre>
 </li>
 <li>Close a session and check that it is truly closed:
@@ -303,23 +303,23 @@ bool is_closed;
 ret = smartcard_session_close(session);
 
 if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_close successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_close successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_close failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_close failed");
 
 ret = smartcard_session_is_closed(session, &amp;is_closed);
 
 if (ret == SMARTCARD_ERROR_NONE &amp;&amp; is_closed == true)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_is_closed successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_is_closed successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_session_is_closed failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_is_closed failed");
 </pre>
 </li></ul>
 
  <h2 id="channel" name="channel">Managing Channels</h2>
 
-<p>You can manage a channel using the channel instance that you have created when opening the channel with a session. The channel instance is the first parameter in all channel-related APIs.</p>  
- 
+<p>You can manage a channel using the channel instance that you have created when opening the channel with a session. The channel instance is the first parameter in all channel-related APIs.</p>
+
 <p>To manage channels:</p>
 
 <ul>
@@ -330,13 +330,13 @@ int session_handle;
 
 ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &amp;channel);
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = smartcard_channel_get_session(channel, &amp;session_handle);
+    ret = smartcard_channel_get_session(channel, &amp;session_handle);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;smartcard_channel_get_session successful: %d&quot;, session_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_get_session failed&quot;);
+    if (ret == SMARTCARD_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "smartcard_channel_get_session successful: %d", session_handle);
+    else
+        dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_get_session failed");
 }
 </pre></li>
 
@@ -348,21 +348,21 @@ bool is_basic;
 ret = smartcard_channel_is_basic_channel(channel, &amp;is_basic);
 
 if (ret == SMARTCARD_ERROR_NONE &amp;&amp; is_basic == false)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_is_basic_channel successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_is_basic_channel successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_is_basic_channel failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_is_basic_channel failed");
 </pre></li>
 
 <li>Select the next applet on the specific channel that matches to the partial Application ID (AID):
 <pre class="prettyprint">
 ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &amp;channel);
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;bool is_next = true;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = smartcard_channel_select_next(channel, &amp;is_next);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == SMARTCARD_ERROR_NONE &amp;&amp; is_next == false)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_select_next successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_select_next failed&quot;);
+    bool is_next = true;
+    ret = smartcard_channel_select_next(channel, &amp;is_next);
+    if (ret == SMARTCARD_ERROR_NONE &amp;&amp; is_next == false)
+        dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_select_next successful");
+    else
+        dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_select_next failed");
 }
 </pre>
 <p>To get a response for the selection command, use the <code>smartcard_channel_get_select_response()</code> function:</p>
@@ -375,11 +375,11 @@ int pLength;
 ret = smartcard_channel_get_select_response(channel, &amp;pSelectResponse, &amp;pLength);
 
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_get_select_response successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; pLength; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;%x &quot;, (int)pSelectResponse[i]);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_get_select_response successful");
+    for (i = 0; i &lt; pLength; i++)
+        g_print("%x ", (int)pSelectResponse[i]);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_get_select_response failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_get_select_response failed");
 }
 </pre>
 </li>
@@ -394,9 +394,9 @@ ret = smartcard_channel_close(channel);
 ret = smartcard_channel_is_closed(channel, &amp;is_close);
 
 if (ret == SMARTCARD_ERROR_NONE &amp;&amp; is_close == true)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_is_closed successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_is_closed successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_is_closed failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_is_closed failed");
 </pre>
 </li>
 <li>Close the channel opened for a specific SE:
@@ -407,9 +407,9 @@ int ret;
 ret = smartcard_channel_close(channel);
 
 if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_close successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_close successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_close failed: %d&quot;, ret);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_close failed: %d", ret);
 </pre>
 </li>
 <li>Transmit an APDU command (as per ISO/IEC 7816-4) to the SE:
@@ -424,13 +424,13 @@ unsigned char command[] = {0x00, 0x01, 0x02, 0x03};
 ret = smartcard_channel_transmit(channel, command, 4, &amp;response, &amp;resp_len);
 
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_transmit successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;response is &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; resp_len; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%x &quot;, (int)response[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_transmit successful");
+    dlog_print(DLOG_INFO, LOG_TAG, "response is ");
+    for (i = 0; i &lt; resp_len; i++)
+        dlog_print(DLOG_INFO, LOG_TAG, "%x ", (int)response[i]);
+    dlog_print(DLOG_INFO, LOG_TAG, "\n");
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_transmit failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_transmit failed");
 }
 </pre>
 <p>To get a response for the transmission, use the <code>smartcard_channel_transmit_retrieve_response()</code> function:</p>
@@ -440,20 +440,20 @@ unsigned char * ptransmitResponse;
 
 ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &amp;channel);
 if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = smartcard_channel_transmit(channel, command, 11, &amp;response, &amp;resp_len);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = smartcard_channel_transmit_retrieve_response(channel, &amp;ptransmitResponse,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;pLength);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;smartcard_channel_transmit_get_response successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;response is &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; pLength; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%x &quot;, (int)ptransmitResponse[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_transmit_get_response failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    ret = smartcard_channel_transmit(channel, command, 11, &amp;response, &amp;resp_len);
+    ret = smartcard_channel_transmit_retrieve_response(channel, &amp;ptransmitResponse,
+                                                       &amp;pLength);
+
+    if (ret == SMARTCARD_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "smartcard_channel_transmit_get_response successful");
+        dlog_print(DLOG_INFO, LOG_TAG, "response is ");
+        for (i = 0; i &lt; pLength; i++)
+            dlog_print(DLOG_INFO, LOG_TAG, "%x ", (int)ptransmitResponse[i]);
+        dlog_print(DLOG_INFO, LOG_TAG, "\n");
+    } else {
+        dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_transmit_get_response failed");
+    }
 }
 </pre>
 </li></ul>
@@ -472,16 +472,16 @@ int *phReaders = NULL;
 int session;
 int channel;
 unsigned char aid[] = {0xA0, 0x00, 0x00, 0x00, 0x63, 0x50, 0x4B,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0x43, 0x53, 0x2D, 0x31, 0x35};
+                       0x43, 0x53, 0x2D, 0x31, 0x35};
 unsigned char command[] = {0x00, 0x28, 0x00, 0x00};
 unsigned char *response = NULL;
 int resp_len = 50;
 
 ret = smartcard_initialize();
 if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard initialize successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard initialize successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard initialize failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard initialize failed");
 </pre>
 </li>
 
@@ -494,37 +494,37 @@ ret = smartcard_get_readers(&amp;phReaders, &amp;pLength);
 <li>Open a session:
 <pre class="prettyprint">
 if (ret == SMARTCARD_ERROR_NONE &amp;&amp; pLength != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = smartcard_reader_open_session(phReaders[0], &amp;session);
+    ret = smartcard_reader_open_session(phReaders[0], &amp;session);
 </pre>
 </li>
 
 <li>Open a logical channel:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == SMARTCARD_ERROR_NONE &amp;&amp; session != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &amp;channel);
+    if (ret == SMARTCARD_ERROR_NONE &amp;&amp; session != 0) {
+        ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &amp;channel);
 </pre>
 </li>
 
 <li>Transmit the command:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = smartcard_channel_transmit(channel, command, 4, &amp;response, &amp;resp_len);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == SMARTCARD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_transmit successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;response is &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; resp_len; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%x &quot;, (int)response[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard_channel_transmit failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        if (ret == SMARTCARD_ERROR_NONE) {
+            ret = smartcard_channel_transmit(channel, command, 4, &amp;response, &amp;resp_len);
+            if (ret == SMARTCARD_ERROR_NONE) {
+                dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_transmit successful");
+                dlog_print(DLOG_INFO, LOG_TAG, "response is ");
+                for (i = 0; i &lt; resp_len; i++)
+                    dlog_print(DLOG_INFO, LOG_TAG, "%x ", (int)response[i]);
+                dlog_print(DLOG_INFO, LOG_TAG, "\n");
+            } else {
+                dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_transmit failed");
+            }
+        }
+    }
 </pre>
 </li>
 <li>Close the session:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;ret = smartcard_session_close(session);
+    ret = smartcard_session_close(session);
 }
 </pre>
 </li>
@@ -533,9 +533,9 @@ if (ret == SMARTCARD_ERROR_NONE &amp;&amp; pLength != 0) {
 ret = smartcard_deinitialize();
 
 if (ret == SMARTCARD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard deinitialize successful&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard deinitialize successful");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;smartcard deinitialize failed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "smartcard deinitialize failed");
 </pre>
 </li>
 
diff --git a/org.tizen.guides/html/native/connectivity/telephony_n.htm b/org.tizen.guides/html/native/connectivity/telephony_n.htm
index 3d82f3f..c29bd57 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/telephony_n.htm
+++ b/org.tizen.guides/html/native/connectivity/telephony_n.htm
@@ -36,7 +36,7 @@
                        <li><a href="#sim_use">Getting SIM Card Information</a></li>
                        <li><a href="#network_use">Getting Network Information</a></li>
                        <li><a href="#modem_use">Getting Modem Information</a></li>
-               </ul>           
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information API for Mobile Native</a></li>
@@ -49,7 +49,7 @@
 <h1>Telephony Information</h1>
   <p>Telephony information features include call, SIM, network, and modem information using the Telephony Service.</p>
 
- 
+
 <p>The main Telephony Information API features are:</p>
 
 <ul>
@@ -68,7 +68,7 @@
 
 <p>The following figure illustrates the Telephony Service and APIs.</p>
 
-  <p align="center"><strong>Figure: Telephony APIs and Telephony Service</strong></p> 
+  <p align="center"><strong>Figure: Telephony APIs and Telephony Service</strong></p>
   <p align="center"><img alt="Telephony APIs and Telephony Service" src="../../images/telephony.png" /></p>
 
 <h2 id="call" name="call">Call Information</h2>
@@ -99,14 +99,14 @@
 
 <p>The following table defines the available notification IDs.</p>
 
-   <p align="center" class="Table"><strong>Table: Call information notification IDs</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Change in state</th> 
-     <th>Notification ID</th> 
-    </tr> 
-    <tr> 
+   <p align="center" class="Table"><strong>Table: Call information notification IDs</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Change in state</th>
+     <th>Notification ID</th>
+    </tr>
+    <tr>
      <td>Voice status idle</td>
      <td><code>TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE</code></td>
     </tr>
@@ -154,7 +154,7 @@
      <td>Preferred voice subscription</td>
      <td><code>TELEPHONY_NOTI_CALL_PREFERRED_VOICE_SUBSCRIPTION</code></td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 
 
@@ -174,7 +174,7 @@
 <li><code>telephony_sim_get_subscriber_number()</code>
 <p>Gets the subscriber number embedded in the SIM card. This value contains the MSISDN related to the subscriber. You get the subscriber number as a string, which needs to be freed by the application.</p></li>
 <li><code>telephony_sim_get_state()</code>
-<p>Gets the state of the SIM. It returns one of the <code>telephony_sim_state_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications).</p></li> 
+<p>Gets the state of the SIM. It returns one of the <code>telephony_sim_state_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications).</p></li>
 <li><code>telephony_sim_is_changed()</code>
 <p>Checks whether the current SIM card differs from the previous SIM card.</p></li>
 <li><code>telephony_sim_get_application_list()</code>
@@ -193,21 +193,21 @@
 
 <p>The following table defines the available notification IDs.</p>
 
- <p align="center" class="Table"><strong>Table: SIM information notification IDs</strong></p> 
+ <p align="center" class="Table"><strong>Table: SIM information notification IDs</strong></p>
 <table>
-   <tbody> 
-    <tr> 
-     <th>Change in state</th> 
-     <th>Notification ID</th> 
-    </tr> 
-    <tr> 
-     <td>SIM state</td> 
-     <td><code>TELEPHONY_NOTI_SIM_STATUS</code></td> 
-    </tr> 
-   </tbody> 
+   <tbody>
+    <tr>
+     <th>Change in state</th>
+     <th>Notification ID</th>
+    </tr>
+    <tr>
+     <td>SIM state</td>
+     <td><code>TELEPHONY_NOTI_SIM_STATUS</code></td>
+    </tr>
+   </tbody>
   </table>
 
-       
+
          <div class="note">
         <strong>Note</strong>
         Before retrieving information from the SIM card, you must retrieve the state of the SIM card. You can get SIM-related information only if the SIM state is <code>TELEPHONY_SIM_STATE_AVAILABLE</code>.
@@ -263,28 +263,28 @@
 <p>To get network-related information change notifications, the application must register for the notifications with the <code>telephony_set_noti_cb()</code> function, by specifying the notification ID.</p>
 
 <p>The following table defines the available notification IDs.</p>
-   <p align="center" class="Table"><strong>Table: Network information notification IDs</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Change in state</th> 
-     <th>Notification ID</th> 
-    </tr> 
-    <tr> 
-     <td>Network service state</td> 
-     <td><code>TELEPHONY_NOTI_NETWORK_SERVICE_STATE</code></td> 
+   <p align="center" class="Table"><strong>Table: Network information notification IDs</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Change in state</th>
+     <th>Notification ID</th>
+    </tr>
+    <tr>
+     <td>Network service state</td>
+     <td><code>TELEPHONY_NOTI_NETWORK_SERVICE_STATE</code></td>
     </tr>
        <tr>
-     <td>Cell ID</td> 
-     <td><code>TELEPHONY_NOTI_NETWORK_CELLID</code></td> 
+     <td>Cell ID</td>
+     <td><code>TELEPHONY_NOTI_NETWORK_CELLID</code></td>
     </tr>
        <tr>
-     <td>Roaming status</td> 
+     <td>Roaming status</td>
      <td><code>TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</code></td>
     </tr>
        <tr>
-     <td>Signal strength</td> 
-     <td><code>TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</code></td> 
+     <td>Signal strength</td>
+     <td><code>TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</code></td>
     </tr>
     <tr>
      <td>Network name</td>
@@ -330,10 +330,10 @@
         <td>Base station longitude</td>
         <td><code>TELEPHONY_NOTI_NETWORK_BS_LONGITUDE</code></td>
        </tr>
-   </tbody> 
+   </tbody>
   </table>
 
-  
+
 <h2 id="modem" name="modem">Modem Information</h2>
 
 <p>The Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications) provides the following functions:</p>
@@ -343,7 +343,7 @@
 <p>Gets the power status of the modem. It returns one of the <code>telephony_modem_power_status_e</code> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html#gabbd5f448dbe923fd92b994378cdee4b5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html#gabbd5f448dbe923fd92b994378cdee4b5">wearable</a> applications).</p></li>
 <li><code>telephony_modem_get_meid()</code>
 <p>Gets the MEID (Mobile Equipment Identifier) of a mobile phone. You get the MEID as a string, which needs to be freed by the application.</p></li>
-</ul>  
+</ul>
 
 <h2 id="prerequisites" name="prerequisites">Prerequisites</h2>
 
@@ -353,23 +353,23 @@
 <p>To use the Telephony Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/telephony&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/location.coarse&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/telephony&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/location.coarse&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
-<li>                   
+<li>
 <p>To use the functions and data types of the Telephony Information API, include the <code>&lt;telephony.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;telephony.h&gt;
-</pre></li>    
+</pre></li>
 <li>
 <p>To create a telephony handle, use the <code>telephony_handle_list_s</code> structure that holds the handles for all the subscriptions defined in the <code>telephony_common.h</code> header file:</p>
 
 <pre class="prettyprint">
 struct _telephony_handle_list_s {
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count;
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_h *handle;
+    unsigned int count;
+    telephony_h *handle;
 };
 typedef struct _telephony_handle_list_s telephony_handle_list_s;
 </pre>
@@ -383,21 +383,21 @@ telephony_handle_list_s handle_list;
 int
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
+    int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* In case of single SIM, you get only one handle */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_init(&amp;handle_list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* In case of single SIM, you get only one handle */
+    ret = telephony_init(&amp;handle_list);
+    if (ret != TELEPHONY_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; handle_list.count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;telephony handle[%p] for subscription[%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handle_list.handle[i], i);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
+    for (i = 0; i &lt; handle_list.count; i++) {
+        dlog_print(DLOG_INFO, LOG_TAG, "telephony handle[%p] for subscription[%d]",
+                   handle_list.handle[i], i);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre></li>
 
@@ -406,19 +406,19 @@ main()
 void
 tutorial_telephony_deinit()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_deinit(&amp;handle_list);
+    ret = telephony_deinit(&amp;handle_list);
 }
 </pre></li></ol>
 
  <h2 id="call_use" name="call_use">Getting Call Information</h2>
- 
+
 <p>To get the voice and video call state and be notified when the user makes a voice or video call or hangs up the phone, use the Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications).</p>
  <p>Getting call information involves:</p>
  <ul>
        <li><a href="#call_list">Getting the current call list</a></li>
        <li><a href="#change_noti">Receiving change notifications for the call state</a></li>
 </ul>
- 
+
 
 
 <h3 name="call_list" id="call_list">Getting the Current Call List</h3>
@@ -434,52 +434,52 @@ telephony_call_h *call_list;
 void
 tutorial_telephony_call_get_call_list()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_error_e ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_call_get_call_list(handle_list.handle[0], &amp;count, &amp;call_list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int handle_id = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *number = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_type_e type = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_status_e status = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_direction_e direction = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool conf_status = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (count == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;count[%d], No calls&quot;, count);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_handle_id(call_list[i], &amp;handle_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_number(call_list[i], &amp;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_type(call_list[i], &amp;type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_status(call_list[i], &amp;status);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_direction(call_list[i], &amp;direction);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_conference_status(call_list[i], &amp;conf_status);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;id[%d] number[%s] type[%s] status[%s]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction[%s] conference_status[%s]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handle_id, number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type == TELEPHONY_CALL_TYPE_VOICE ? &quot;VOICE&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type == TELEPHONY_CALL_TYPE_VIDEO ? &quot;VIDEO&quot; : &quot;E911&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_IDLE ? &quot;IDLE&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_ACTIVE ? &quot;ACTIVE&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_HELD ? &quot;HELD&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_DIALING ? &quot;DIALING&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_ALERTING ? &quot;ALERTING&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_INCOMING ? &quot;INCOMING&quot; : &quot;UNKNOWN&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction == TELEPHONY_CALL_DIRECTION_MO ? &quot;MO&quot; : &quot;MT&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conf_status ? &quot;TRUE&quot; : &quot;FALSE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_release_call_list(count, &amp;call_list);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    telephony_error_e ret;
+
+    ret = telephony_call_get_call_list(handle_list.handle[0], &amp;count, &amp;call_list);
+    if (ret != TELEPHONY_ERROR_NONE) {
+        /* Error handling */
+    } else {
+        int i;
+        unsigned int handle_id = 0;
+        char *number = NULL;
+        telephony_call_type_e type = 0;
+        telephony_call_status_e status = 0;
+        telephony_call_direction_e direction = 0;
+        bool conf_status = 0;
+
+        if (count == 0) {
+            dlog_print(DLOG_INFO, LOG_TAG, "count[%d], No calls", count);
+
+            return;
+        }
+
+        for (i = 0; i &lt; count; i++) {
+            telephony_call_get_handle_id(call_list[i], &amp;handle_id);
+            telephony_call_get_number(call_list[i], &amp;number);
+            telephony_call_get_type(call_list[i], &amp;type);
+            telephony_call_get_status(call_list[i], &amp;status);
+            telephony_call_get_direction(call_list[i], &amp;direction);
+            telephony_call_get_conference_status(call_list[i], &amp;conf_status);
+
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "id[%d] number[%s] type[%s] status[%s]
+                        direction[%s] conference_status[%s]",
+                       handle_id, number,
+                       type == TELEPHONY_CALL_TYPE_VOICE ? "VOICE" :
+                       type == TELEPHONY_CALL_TYPE_VIDEO ? "VIDEO" : "E911",
+                       status == TELEPHONY_CALL_STATUS_IDLE ? "IDLE" :
+                       status == TELEPHONY_CALL_STATUS_ACTIVE ? "ACTIVE" :
+                       status == TELEPHONY_CALL_STATUS_HELD ? "HELD" :
+                       status == TELEPHONY_CALL_STATUS_DIALING ? "DIALING" :
+                       status == TELEPHONY_CALL_STATUS_ALERTING ? "ALERTING" :
+                       status == TELEPHONY_CALL_STATUS_INCOMING ? "INCOMING" : "UNKNOWN",
+                       direction == TELEPHONY_CALL_DIRECTION_MO ? "MO" : "MT",
+                       conf_status ? "TRUE" : "FALSE");
+            free(number);
+        }
+        telephony_call_release_call_list(count, &amp;call_list);
+    }
 }
 </pre>
 </li>
@@ -489,7 +489,7 @@ tutorial_telephony_call_get_call_list()
 void
 tutorial_telephony_call_release_call_list()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_release_call_list(count, &amp;call_list);
+    telephony_call_release_call_list(count, &amp;call_list);
 }
 </pre></li></ol>
 
@@ -505,112 +505,112 @@ tutorial_telephony_call_release_call_list()
 static int
 voice_call_noti_tbl[] =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE,
-&nbsp;&nbsp;&nbsp;&nbsp;TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE,
-&nbsp;&nbsp;&nbsp;&nbsp;TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD,
-&nbsp;&nbsp;&nbsp;&nbsp;TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING,
-&nbsp;&nbsp;&nbsp;&nbsp;TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING,
-&nbsp;&nbsp;&nbsp;&nbsp;TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING,
+    TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE,
+    TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE,
+    TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD,
+    TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING,
+    TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING,
+    TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING,
 };
 
 void
 voice_call_status_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                          void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret_value;
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_h *call_list;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (noti_id) {
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Noti!!! Voice Call Status Idle!!! [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*(int *)data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Noti!!! Voice Call Status Active!!! [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*(int *)data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Noti!!! Voice Call Status Held!!! [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*(int *)data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Noti!!! Voice Call Status Dialing!!! [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*(int *)data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Noti!!! Voice Call Status Alerting!!! [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*(int *)data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Noti!!! Voice Call Status Incoming!!! [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*(int *)data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Unknown noti&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret_value = telephony_call_get_call_list(handle_list.handle[0], &amp;count, &amp;call_list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret_value != TELEPHONY_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;telephony_call_get_call_list() failed!!! [0x%x]&quot;, ret_value);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int handle_id = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *number = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_type_e type = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_status_e status = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_direction_e direction = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool conf_status = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_handle_id(call_list[i], &amp;handle_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_number(call_list[i], &amp;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_type(call_list[i], &amp;type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_status(call_list[i], &amp;status);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_direction(call_list[i], &amp;direction);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_get_conference_status(call_list[i], &amp;conf_status);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;id[%d] number[%s] type[%s] status[%s]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction[%s] conference_status[%s]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handle_id, number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type == TELEPHONY_CALL_TYPE_VOICE ? &quot;VOICE&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type == TELEPHONY_CALL_TYPE_VIDEO ? &quot;VIDEO&quot; : &quot;E911&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_IDLE ? &quot;IDLE&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_ACTIVE ? &quot;ACTIVE&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_HELD ? &quot;HELD&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_DIALING ? &quot;DIALING&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_ALERTING ? &quot;ALERTING&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status == TELEPHONY_CALL_STATUS_INCOMING ? &quot;INCOMING&quot; : &quot;UNKNOWN&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction == TELEPHONY_CALL_DIRECTION_MO ? &quot;MO&quot; : &quot;MT&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conf_status ? &quot;TRUE&quot; : &quot;FALSE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;telephony_call_release_call_list(count, &amp;call_list);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret_value;
+    telephony_call_h *call_list;
+    unsigned int count = 0;
+
+    switch (noti_id) {
+    case TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE:
+        dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Idle!!! [%d]",
+                   *(int *)data);
+        break;
+    case TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE:
+        dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Active!!! [%d]",
+                   *(int *)data);
+        break;
+    case TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD:
+        dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Held!!! [%d]",
+                   *(int *)data);
+        break;
+    case TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING:
+        dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Dialing!!! [%d]",
+                   *(int *)data);
+        break;
+    case TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING:
+        dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Alerting!!! [%d]",
+                   *(int *)data);
+        break;
+    case TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING:
+        dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Incoming!!! [%d]",
+                   *(int *)data);
+        break;
+    default:
+        dlog_print(DLOG_INFO, LOG_TAG, "Unknown noti");
+        break;
+    }
+
+    ret_value = telephony_call_get_call_list(handle_list.handle[0], &amp;count, &amp;call_list);
+    if (ret_value != TELEPHONY_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "telephony_call_get_call_list() failed!!! [0x%x]", ret_value);
+    } else {
+        int i;
+        unsigned int handle_id = 0;
+        char *number = NULL;
+        telephony_call_type_e type = 0;
+        telephony_call_status_e status = 0;
+        telephony_call_direction_e direction = 0;
+        bool conf_status = 0;
+
+        for (i = 0; i &lt; count; i++) {
+            telephony_call_get_handle_id(call_list[i], &amp;handle_id);
+            telephony_call_get_number(call_list[i], &amp;number);
+            telephony_call_get_type(call_list[i], &amp;type);
+            telephony_call_get_status(call_list[i], &amp;status);
+            telephony_call_get_direction(call_list[i], &amp;direction);
+            telephony_call_get_conference_status(call_list[i], &amp;conf_status);
+
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "id[%d] number[%s] type[%s] status[%s]
+                        direction[%s] conference_status[%s]",
+                       handle_id, number,
+                       type == TELEPHONY_CALL_TYPE_VOICE ? "VOICE" :
+                       type == TELEPHONY_CALL_TYPE_VIDEO ? "VIDEO" : "E911",
+                       status == TELEPHONY_CALL_STATUS_IDLE ? "IDLE" :
+                       status == TELEPHONY_CALL_STATUS_ACTIVE ? "ACTIVE" :
+                       status == TELEPHONY_CALL_STATUS_HELD ? "HELD" :
+                       status == TELEPHONY_CALL_STATUS_DIALING ? "DIALING" :
+                       status == TELEPHONY_CALL_STATUS_ALERTING ? "ALERTING" :
+                       status == TELEPHONY_CALL_STATUS_INCOMING ? "INCOMING" : "UNKNOWN",
+                       direction == TELEPHONY_CALL_DIRECTION_MO ? "MO" : "MT",
+                       conf_status ? "TRUE" : "FALSE");
+            free(number);
+        }
+        telephony_call_release_call_list(count, &amp;call_list);
+    }
 }
 
 void
 tutorial_telephony_set_noti_cb_voice()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_error_e ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; (sizeof(voice_call_noti_tbl) / sizeof(int)); i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_set_noti_cb(handle_list.handle[0], voice_call_noti_tbl[i],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;voice_call_status_noti_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    telephony_error_e ret;
+    int i;
+
+    for (i = 0; i &lt; (sizeof(voice_call_noti_tbl) / sizeof(int)); i++) {
+        ret = telephony_set_noti_cb(handle_list.handle[0], voice_call_noti_tbl[i],
+                                    voice_call_status_noti_cb, NULL);
+        if (ret != TELEPHONY_ERROR_NONE)
+            /* Error handling */
+    }
 }
 </pre>
 
 
 
  <h2 id="sim_use" name="sim_use">Getting SIM Card Information</h2>
- 
+
  <p>To extract information stored on a SIM card, use the SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications).</p>
  <p>Getting SIM information involves:</p>
  <ul>
@@ -630,15 +630,15 @@ tutorial_telephony_set_noti_cb_voice()
 void
 tutorial_telephony_sim_get_state()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_sim_state_e state;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_sim_get_state(handle_list.handle[0], &amp;state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;SIM status: [%d]&quot;, status);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    telephony_sim_state_e state;
+    ret = telephony_sim_get_state(handle_list.handle[0], &amp;state);
+    if (ret != TELEPHONY_ERROR_NONE) {
+        /* Error handling */
+        return -1;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "SIM status: [%d]", status);
+
+    return 0;
 }
 </pre>
 
@@ -652,20 +652,20 @@ tutorial_telephony_sim_get_state()
 void
 sim_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_sim_state_e sim_state = *(int *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;SIM state: [%d]&quot;, sim_state);
+    telephony_sim_state_e sim_state = *(int *)data;
+    dlog_print(DLOG_INFO, LOG_TAG, "SIM state: [%d]", sim_state);
 }
 
 void
 tutorial_telephony_set_noti_cb_sim()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_error_e ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_SIM_STATUS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sim_state_noti_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    telephony_error_e ret;
+    ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_SIM_STATUS,
+                                sim_state_noti_cb, NULL);
+    if (ret != TELEPHONY_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -681,19 +681,19 @@ tutorial_telephony_set_noti_cb_sim()
 void
 tutorial_telephony_sim_get_icc_id()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_error_e ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *iccid;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_sim_get_icc_id(handle_list.handle[0], &amp;iccid);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == TELEPHONY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Integrated Circuit Card IDentification: %s&quot;, iccid);
-&nbsp;&nbsp;&nbsp;&nbsp;free(iccid);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    telephony_error_e ret;
+    char *iccid;
+    ret = telephony_sim_get_icc_id(handle_list.handle[0], &amp;iccid);
+    if (ret == TELEPHONY_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Integrated Circuit Card IDentification: %s", iccid);
+    free(iccid);
+
+    return ret;
 }
 </pre>
 
  <h2 id="network_use" name="network_use">Getting Network Information</h2>
- 
+
  <p>To access information about the current cellular network and telephony service, use the Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications).</p>
  <p>Getting network information involves:</p>
  <ul>
@@ -701,7 +701,7 @@ tutorial_telephony_sim_get_icc_id()
  <li><a href="#network_noti">Receiving change notifications for the network service state</a></li>
  <li><a href="#network_info">Getting network details</a></li>
  </ul>
- 
+
 
 
 
@@ -714,18 +714,18 @@ tutorial_telephony_sim_get_icc_id()
 void
 tutorial_telephony_network_get_service_state()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_network_service_state_e network_service_state;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_network_get_service_state(handle_list.handle[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;network_service_state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Network Service State [%d]&quot;, network_service_state);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    telephony_network_service_state_e network_service_state;
+    int ret;
+    ret = telephony_network_get_service_state(handle_list.handle[0],
+                                              &amp;network_service_state);
+    if (ret != TELEPHONY_ERROR_NONE) {
+        /* Error handling */
+
+        return -1;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "Network Service State [%d]", network_service_state);
+
+    return 0;
 }
 </pre>
 
@@ -739,22 +739,22 @@ tutorial_telephony_network_get_service_state()
 <pre class="prettyprint">
 void
 network_service_state_noti_cb(telephony_h handle, telephony_noti_e noti_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *data, void* user_data)
+                              void *data, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_network_service_state_e network_state = *(int *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Network service state: [%d]&quot;, network_state);
+    telephony_network_service_state_e network_state = *(int *)data;
+    dlog_print(DLOG_INFO, LOG_TAG, "Network service state: [%d]", network_state);
 }
 
 void
 tutorial_telephony_set_noti_cb_network()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_error_e ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_NETWORK_SERVICE_STATE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;network_service_state_noti_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    telephony_error_e ret;
+    ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_NETWORK_SERVICE_STATE,
+                                network_service_state_noti_cb, NULL);
+    if (ret != TELEPHONY_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -769,27 +769,27 @@ tutorial_telephony_set_noti_cb_network()
 void
 tutorial_telephony_network_get_cell_id()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_error_e ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int cell_id;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_network_get_cell_id(handle_list.handle[0], &amp;cell_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == TELEPHONY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Cell Id: %d&quot;, cell_id);
+    telephony_error_e ret;
+    int cell_id;
+    ret = telephony_network_get_cell_id(handle_list.handle[0], &amp;cell_id);
+    if (ret == TELEPHONY_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Cell Id: %d", cell_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 
 /* MNC */
 void
 tutorial_telephony_network_get_mnc()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_error_e ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *mnc;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_network_get_mnc(handle_list.handle[0], &amp;mnc);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == TELEPHONY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;mnc: %s&quot;, mnc);
-&nbsp;&nbsp;&nbsp;&nbsp;free(mnc);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    telephony_error_e ret;
+    char *mnc;
+    ret = telephony_network_get_mnc(handle_list.handle[0], &amp;mnc);
+    if (ret == TELEPHONY_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "mnc: %s", mnc);
+    free(mnc);
+
+    return ret;
 }
 </pre>
 
@@ -804,14 +804,14 @@ tutorial_telephony_network_get_mnc()
 void
 tutorial_telephony_modem_get_imei()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_error_e ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *imei;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_modem_get_imei(handle_list.handle[0], &amp;imei);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == TELEPHONY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;imei: %s&quot;, imei);
-&nbsp;&nbsp;&nbsp;&nbsp;free(imei);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    telephony_error_e ret;
+    char *imei;
+    ret = telephony_modem_get_imei(handle_list.handle[0], &amp;imei);
+    if (ret == TELEPHONY_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "imei: %s", imei);
+    free(imei);
+
+    return ret;
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/connectivity/usb_host_n.htm b/org.tizen.guides/html/native/connectivity/usb_host_n.htm
index f18f91c..f8611da 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/usb_host_n.htm
+++ b/org.tizen.guides/html/native/connectivity/usb_host_n.htm
@@ -67,7 +67,7 @@
 <p align="center"><img src="../../images/usb_host_architecture.png" alt="USB host architecture" /></p>
 
        <h2 id="prerequisites">Prerequisites</h2>
-       
+
 <p>To enable your application to use the USB host functionality:</p>
 <ol>
 <li>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__USB__HOST__MODULE.html">USB Host</a> API does not require any Tizen privileges to be defined, instead the user is asked for confirmation when performing a potentially privileged operation.
@@ -78,7 +78,7 @@
 #include &lt;usb_host.h&gt;
 </pre>
 </li>
-<li>Initialize the interface context. 
+<li>Initialize the interface context.
 <p>A single instance is enough for the entire lifetime of your program.</p>
 <pre class="prettyprint">
 usb_host_context_h context;
@@ -86,9 +86,9 @@ int ret;
 
 ret = usb_host_create(&amp;context);
 if (ret == USB_HOST_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB Host initialized&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "USB Host initialized");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB Host failed to initialize&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "USB Host failed to initialize");
 </pre>
 </li>
 <li>When the functionality is no longer needed, deinitialize it:
@@ -98,18 +98,18 @@ int ret;
 
 ret = usb_host_destroy(context);
 if (ret == USB_HOST_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB Host deinitialized&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "USB Host deinitialized");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB Host failed to deinitialize&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "USB Host failed to deinitialize");
 </pre>
 </li>
 </ol>
 
 
        <h2 id="find_open">Finding and Opening a Device</h2>
-       
+
 <p>To begin working with a device, you must find it in the device list.</p>
-       
+
 <p>To find and open a device:</p>
 <ol>
 <li>Get the device list:
@@ -122,12 +122,12 @@ int device_count;
 
 ret = usb_host_get_device_list(context, &amp;devices, &amp;device_count);
 if (ret == USB_HOST_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB Host device list retrieved&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "USB Host device list retrieved");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Unable to retrieve USB device list&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Unable to retrieve USB device list");
 </pre>
 </li>
-<li>Gather information about the device by looping through the device list. 
+<li>Gather information about the device by looping through the device list.
 <p>Various USB Host API functions allow you to get some basic information about the USB devices in the device list. You can get values, such as vendor ID or product ID, from the descriptors sent by the device. By checking the device information, you can select a device suitable for your communication needs. Usually, the USB device vendor ID and product ID are used to uniquely identify the device.</p>
 <p>All the USB Host API functions can operate on a device even if it has not been opened.</p>
 
@@ -135,55 +135,55 @@ else
 int i;
 
 for (i = 0; i &lt; device_count; ++i) {
-&nbsp;&nbsp;&nbsp;&nbsp;usb_host_device_h device = devices[i];
-&nbsp;&nbsp;&nbsp;&nbsp;int vendor_id;
-&nbsp;&nbsp;&nbsp;&nbsp;int product_id;
+    usb_host_device_h device = devices[i];
+    int vendor_id;
+    int product_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;usb_host_device_get_id_vendor(device, &amp;vendor_id);
-&nbsp;&nbsp;&nbsp;&nbsp;usb_host_device_get_id_product(device, &amp;product_id);
+    usb_host_device_get_id_vendor(device, &amp;vendor_id);
+    usb_host_device_get_id_product(device, &amp;product_id);
 </pre>
 </li>
 <li>Open the device.
 <p>After the device is uniquely identified and you have found the one you need, open it for further use:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;if (vendor_id == 0x1234 &amp;&amp; product_id == 0x5678)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = usb_host_device_open(device);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == USB_HOST_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB Host device opened&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Unable to open USB Host device&quot;);
+    if (vendor_id == 0x1234 &amp;&amp; product_id == 0x5678)
+        ret = usb_host_device_open(device);
+        if (ret == USB_HOST_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "USB Host device opened");
+        else
+            dlog_print(DLOG_INFO, LOG_TAG, "Unable to open USB Host device");
 </pre>
 </li>
 <li>While the device is open, you can get strings from it.
 <p>Identify the device using strings, such as the string associated with the manufacturer.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char buf[256];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int len = sizeof(buf);
+        char buf[256];
+        int len = sizeof(buf);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usb_host_device_get_manufacturer(dev, &amp;len, buf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB Host device manufacturer: %s&quot;, buf);}
+        usb_host_device_get_manufacturer(dev, &amp;len, buf);
+        dlog_print(DLOG_INFO, LOG_TAG, "USB Host device manufacturer: %s", buf);}
 </pre>
 </li>
 <li>When the device is no longer needed, close it and free the device list.
 <p>The device must be closed before deinitializing the interface context.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = usb_host_device_close(device);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == USB_HOST_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB Host device closed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Unable to close USB Host device&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        ret = usb_host_device_close(device);
+        if (ret == USB_HOST_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "USB Host device closed");
+        else
+            dlog_print(DLOG_INFO, LOG_TAG, "Unable to close USB Host device");
+    }
 }
 
 ret = usb_host_free_device_list(devices, 1);
 if (ret == USB_HOST_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB Host device list freed&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "USB Host device list freed");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Unable to release USB Host device list&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Unable to release USB Host device list");
 </pre>
 </li>
 </ol>
-       
+
        <h2 id="find_endpoint">Finding the Interface and Endpoints</h2>
 
 <p>USB communication always happens between the host and one of the endpoints. The endpoints are grouped into interfaces and interfaces into configurations. A device can have multiple configurations, but only one can be active at a time. All interfaces inside an active configuration can be used at the same time.</p>
@@ -194,7 +194,7 @@ usb_host_interface_h interface;
 usb_host_endpoint_h in_ep;
 usb_host_endpoint_h out_ep;
 
-usb_host_device_get_active_config(device, &amp;config); 
+usb_host_device_get_active_config(device, &amp;config);
 usb_host_config_get_interface(config, 0, &amp;interface);
 usb_host_interface_get_endpoint(interface, 0, &amp;in_ep);
 usb_host_interface_get_endpoint(interface, 1, &amp;out_ep);
@@ -203,15 +203,15 @@ usb_host_interface_get_endpoint(interface, 1, &amp;out_ep);
 <p>The second parameter in the <code>usb_host_interface_get_endpoint()</code> function is not the endpoint address but its index inside the interface.</p>
 
 <p>Programs which are dedicated for one specific device often hardcode the interface index and endpoints numbers. More flexible programs must go through a list of interfaces in a configuration, check the basic interface information (such as class), and check the endpoints. After finding a suitable interface, they claim it before starting communication with any of its endpoints.</p>
-       
+
        <h2 id="transfer">Transferring Data</h2>
-       
+
 <p>To transfer data, claim the interface with the <code>usb_host_claim_interface()</code> function. This operation does not involve any USB traffic, but allows you to exclusively reserve the interface as a system resource.</p>
 <p>After claiming the interface, you can send or receive data through it. Release the interface after use.</p>
 <pre class="prettyprint">
 unsigned char buffer [1024];
-sprintf(buffer, &quot;Hello world&quot;);
-int bytes_transferred; 
+sprintf(buffer, "Hello world");
+int bytes_transferred;
 
 usb_host_claim_interface(interface);
 
@@ -219,8 +219,8 @@ usb_host_transfer(out_ep, buffer, sizeof(buffer), &amp;bytes_transferred, 500);
 usb_host_transfer(in_ep, buffer, sizeof(buffer), &amp;bytes_transferred, 500);
 
 usb_host_release_interface(interface);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;%d bytes of response received: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bytes_transferred, buffer);
+dlog_print(DLOG_INFO, LOG_TAG, "%d bytes of response received: %s",
+           bytes_transferred, buffer);
 </pre>
 
 
diff --git a/org.tizen.guides/html/native/connectivity/vpn_n.htm b/org.tizen.guides/html/native/connectivity/vpn_n.htm
index a2ed5b5..1a7b7d4 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/vpn_n.htm
+++ b/org.tizen.guides/html/native/connectivity/vpn_n.htm
@@ -50,13 +50,13 @@
 
 <p>The main features of the VPN Service API include:</p>
 <ul>
-<li>VPN manager 
+<li>VPN manager
 <p>You can create or initialize the tunnel interface for the VPN device with various functions. The application can use those functions to <a href="#get_param">get various tunnel details</a>, such as the tunnel ID and tunnel name, MTU for the tunnel interface, and connection statistics.</p>
 <p>You can also <a href="#set_param">set various details</a>, such as the MTU for the tunnel interface, and the session name.</p>
 <p>The <code>vpnsvc_tun_s</code> structure contains detailed information about the tunnel interface, such as the ID, name, and MTU. The possible errors are defined with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html#ga8d8e9c964218d7aad622115bb51491e8">vpnsvc_error_e</a> enumerator.</p>
 
 <p align="center" class="Table"><strong>Table: Common macros</strong></p>
-<table> 
+<table>
 <tbody>
 <tr>
        <th>Macro</th>
@@ -89,7 +89,7 @@
 </tbody>
 </table>
 </li>
-<li>VPN profile 
+<li>VPN profile
 <p>You can map the VPN profile and get details about the VPN service using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html#gaef3a3f46336ee7e8c43dd16144b22ac5">vpnsvc_h</a> handle.</p>
 <p>The VPN profile provides different functions for routing management, DNS management, and firewall management:</p>
 <ul>
@@ -107,15 +107,15 @@
 
 <p>The VPN service uses 2 mechanisms for managing access control between the application and service:</p>
 <ul>
-<li>Privilege: 
+<li>Privilege:
 <p>The application needs the partner level privilege for accessing the VPN service daemon.</p>
 </li>
 <li>VPN license:
-<p>The VPN configurations, such as DNS, routing, and firewall (iptables), need an admin capability. The VPN service daemon checks the application&#39;s VPN license to verify that the client application has the admin capability.</p>
+<p>The VPN configurations, such as DNS, routing, and firewall (iptables), need an admin capability. The VPN service daemon checks the application's VPN license to verify that the client application has the admin capability.</p>
 </li>
 </ul>
 
-<h2 id="components">VPN Connection Components</h2> 
+<h2 id="components">VPN Connection Components</h2>
 
 <p>A VPN connection includes the following components:</p>
 <ul>
@@ -151,7 +151,7 @@
 <li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html">VPN Service</a> API, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://developer.samsung.com/tizen/vpnservice&lt;/privilege&gt;
+   &lt;privilege&gt;http://developer.samsung.com/tizen/vpnservice&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -173,13 +173,13 @@ int ret = VPNSVC_ERROR_NONE;
 ret = vpnsvc_init(name, &amp;handle);
 
 if (ret != VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_init failed: %d\n&quot;, ret);
+    printf("vpnsvc_init failed: %d\n", ret);
 </pre>
 </li>
 <li>When the VPN handle is no longer needed, destroy it using the <code>vpnsvc_deinit()</code> function:
 <pre class="prettyprint">
 if (handle)
-&nbsp;&nbsp;&nbsp;&nbsp;vpnsvc_deinit(handle);
+    vpnsvc_deinit(handle);
 
 handle = NULL;
 </pre>
@@ -187,7 +187,7 @@ handle = NULL;
 </ol>
 
 
-<h2 id="get_param" name="get_param">Getting Interface Parameters</h2> 
+<h2 id="get_param" name="get_param">Getting Interface Parameters</h2>
 
 <p>To get the interface parameters after successfully initializing the VPN service:</p>
 <ul>
@@ -196,7 +196,7 @@ handle = NULL;
 int int_value;
 
 if (vpnsvc_get_tun_fd(handle, &amp;int_value) == VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;tun_fd: %d\n&quot;, int_value);
+    printf("tun_fd: %d\n", int_value);
 </pre>
 </li>
 <li>Get the tunnel index using the <code>vpnsvc_get_tun_index()</code> function:
@@ -204,7 +204,7 @@ if (vpnsvc_get_tun_fd(handle, &amp;int_value) == VPNSVC_ERROR_NONE)
 int int_value;
 
 if (vpnsvc_get_tun_index(handle, &amp;int_value) == VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;tun_index: %d\n&quot;, int_value);
+    printf("tun_index: %d\n", int_value);
 </pre>
 </li>
 <li>Get the tunnel name using the <code>vpnsvc_get_tun_name()</code> function:
@@ -214,7 +214,7 @@ int ret = VPNSVC_ERROR_NONE;
 
 ret = vpnsvc_get_tun_name(handle, &amp;result_name);
 if (ret == VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;tun_name: %s\n&quot;, result_name);
+    printf("tun_name: %s\n", result_name);
 </pre>
 </li>
 <li>Get the session for the tunnel interface using the <code>vpnsvc_get_session()</code> function:
@@ -223,15 +223,15 @@ int ret = VPNSVC_ERROR_NONE;
 char *get_session = NULL;
 
 ret = vpnsvc_get_session(handle, &amp;get_session);
-printf(&quot;Session Name = %s\n&quot;, get_session);
-printf(&quot;vpnsvc_set_session succeeded!\n&quot;);
+printf("Session Name = %s\n", get_session);
+printf("vpnsvc_set_session succeeded!\n");
 </pre>
 </li>
 </ul>
 
 <h2 id="set_param" name="set_param">Setting Interface Parameters</h2>
 
-<p>To set the interface parameters:</p> 
+<p>To set the interface parameters:</p>
 <ul>
 <li>Set the MTU configuration for the tunnel interface using the <code>vpnsvc_set_mtu()</code> function. The MTU value is used when the user brings up the VPN interface using the VPN UP API.
 <pre class="prettyprint">
@@ -239,61 +239,61 @@ int ret;
 
 ret = vpnsvc_set_mtu(handle, 9000);
 if (ret != VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_set_mtu failed!\n&quot;);
+    printf("vpnsvc_set_mtu failed!\n");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_set_mtu succeeded!\n&quot;);
+    printf("vpnsvc_set_mtu succeeded!\n");
 </pre>
 </li>
 <li>Set the session name for the tunnel interface using the <code>vpnsvc_set_session()</code> function:
 <pre class="prettyprint">
-char *set_session = &quot;vpnsvc_test VPN Session&quot;;
+char *set_session = "vpnsvc_test VPN Session";
 int ret;
 
 ret = vpnsvc_set_session(handle, set_session);
 if (ret != VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_set_session failed!\n&quot;);
+    printf("vpnsvc_set_session failed!\n");
 </pre>
 </li>
 </ul>
 
-<h2 id="config" name="config">Configuring the Interface</h2> 
+<h2 id="config" name="config">Configuring the Interface</h2>
 
 <p>To configure the interface:</p>
-<ol> 
+<ol>
 <li>Protect the underlying VPN traffic to be routed to the VPN itself by binding the socket to the underlying network interface, such as <code>wlan0</code>:
 <pre class="prettyprint">
 int sock;
 int ret;
 
-ret = vpnsvc_protect(handle, sock, &quot;wlan0&quot;);
+ret = vpnsvc_protect(handle, sock, "wlan0");
 if (ret != VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_protect failed!\n&quot;);
+    printf("vpnsvc_protect failed!\n");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_protect succeeded!\n&quot;);
+    printf("vpnsvc_protect succeeded!\n");
 </pre>
 </li>
-<li>Set up the tunnel interface. 
+<li>Set up the tunnel interface.
 <p>The <code>vpnsvc_up()</code> function configures the VPN tunnel interface based on the configured parameters passed by the client application.</p>
 <p>To change the MTU parameter of the configured interface, the client application must invoke the <code>vpnsvc_set_mtu()</code> function that is used to set the MTU value. The client application must invoke the function before the <code>vpnsvc_up()</code> function call.</p>
 <pre class="prettyprint">
 int ret;
-char local[VPNSVC_IP4_STRING_LEN] = {&#39;\0&#39;,};
-char remote[VPNSVC_IP4_STRING_LEN] = {&#39;\0&#39;,};
+char local[VPNSVC_IP4_STRING_LEN] = {'\0',};
+char remote[VPNSVC_IP4_STRING_LEN] = {'\0',};
 char *routes[2];
 int prefix[2];
 int nr_routes = 2;
 const char *dns_server[2];
 int nr_dns = 2;
-char dns_suffix[100] = &quot;tizen.org&quot;;
+char dns_suffix[100] = "tizen.org";
 
 if (!handle) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;invalid handle\n&quot;);
+    printf("invalid handle\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
-strncpy(local, &quot;192.168.0.82&quot;, VPNSVC_IP4_STRING_LEN);
-strncpy(remote, &quot;192.168.0.1&quot;, VPNSVC_IP4_STRING_LEN);
+strncpy(local, "192.168.0.82", VPNSVC_IP4_STRING_LEN);
+strncpy(remote, "192.168.0.1", VPNSVC_IP4_STRING_LEN);
 
 routes[0] = malloc(sizeof(char) * VPNSVC_IP4_STRING_LEN);
 routes[1] = malloc(sizeof(char) * VPNSVC_IP4_STRING_LEN);
@@ -301,25 +301,25 @@ routes[1] = malloc(sizeof(char) * VPNSVC_IP4_STRING_LEN);
 memset(routes[0], 0, sizeof(char) * VPNSVC_IP4_STRING_LEN);
 memset(routes[1], 0, sizeof(char) * VPNSVC_IP4_STRING_LEN);
 
-strncpy(routes[0], &quot;192.168.0.10&quot;, VPNSVC_IP4_STRING_LEN);
+strncpy(routes[0], "192.168.0.10", VPNSVC_IP4_STRING_LEN);
 prefix[0] = 32;
 
-strncpy(routes[1], &quot;192.168.0.11&quot;, VPNSVC_IP4_STRING_LEN);
+strncpy(routes[1], "192.168.0.11", VPNSVC_IP4_STRING_LEN);
 prefix[1] = 32;
 
-char *dns1 = &quot;1.1.1.1&quot;;
-char *dns2 = &quot;2.2.2.2&quot;;
+char *dns1 = "1.1.1.1";
+char *dns2 = "2.2.2.2";
 
 dns_server[0] = dns1;
 dns_server[1] = dns2;
 
 ret = vpnsvc_up(handle, local, remote, routes, prefix, nr_routes,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dns_server, nr_dns, dns_suffix);
+                dns_server, nr_dns, dns_suffix);
 
 if (ret != VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_up failed!\n&quot;);
+    printf("vpnsvc_up failed!\n");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_up succeeded!\n&quot;);
+    printf("vpnsvc_up succeeded!\n");
 </pre>
 </li>
 <li>Set down the tunnel interface, and remove it using the <code>vpnsvc_down()</code> function:
@@ -327,22 +327,22 @@ else
 int ret;
 
 if (!handle) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;invalid handle\n&quot;);
+    printf("invalid handle\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
 ret = vpnsvc_down(handle);
 
 if (ret != VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_down failed!\n&quot;);
+    printf("vpnsvc_down failed!\n");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_down succeeded!\n&quot;);
+    printf("vpnsvc_down succeeded!\n");
 </pre>
 </li>
 </ol>
 
-<h2 id="block" name="block">Blocking and Unblocking Networks</h2> 
+<h2 id="block" name="block">Blocking and Unblocking Networks</h2>
 
 <p>To block or unblock the network:</p>
 <ul>
@@ -357,36 +357,36 @@ int allow_nr_nets = 2;
 int ret;
 
 if (!handle) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;invalid handle\n&quot;);
+    printf("invalid handle\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
 block_nets[0] = malloc(sizeof(char) * VPNSVC_IP4_STRING_LEN);
 block_nets[1] = malloc(sizeof(char) * VPNSVC_IP4_STRING_LEN);
 memset(block_nets[0], 0, sizeof(char) * VPNSVC_IP4_STRING_LEN);
 memset(block_nets[1], 0, sizeof(char) * VPNSVC_IP4_STRING_LEN);
-strncpy(block_nets[0], &quot;125.209.222.141&quot;, VPNSVC_IP4_STRING_LEN);
+strncpy(block_nets[0], "125.209.222.141", VPNSVC_IP4_STRING_LEN);
 block_prefix[0] = 32;
-strncpy(block_nets[1], &quot;180.70.134.19&quot;, VPNSVC_IP4_STRING_LEN);
+strncpy(block_nets[1], "180.70.134.19", VPNSVC_IP4_STRING_LEN);
 block_prefix[1] = 32;
 
 allow_nets[0] = malloc(sizeof(char) * VPNSVC_IP4_STRING_LEN);
 allow_nets[1] = malloc(sizeof(char) * VPNSVC_IP4_STRING_LEN);
 memset(allow_nets[0], 0, sizeof(char) * VPNSVC_IP4_STRING_LEN);
 memset(allow_nets[1], 0, sizeof(char) * VPNSVC_IP4_STRING_LEN);
-strncpy(allow_nets[0], &quot;216.58.221.142&quot;, VPNSVC_IP4_STRING_LEN);
+strncpy(allow_nets[0], "216.58.221.142", VPNSVC_IP4_STRING_LEN);
 allow_prefix[0] = 32;
-strncpy(allow_nets[1], &quot;206.190.36.45&quot;, VPNSVC_IP4_STRING_LEN);
+strncpy(allow_nets[1], "206.190.36.45", VPNSVC_IP4_STRING_LEN);
 allow_prefix[1] = 32;
 
 ret = vpnsvc_block_networks(handle, block_nets, block_prefix, block_nr_nets,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allow_nets, allow_prefix, allow_nr_nets);
+                            allow_nets, allow_prefix, allow_nr_nets);
 
 if (ret != VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_block_networks failed!\n&quot;);
+    printf("vpnsvc_block_networks failed!\n");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_block_networks succeeded!\n&quot;);
+    printf("vpnsvc_block_networks succeeded!\n");
 </pre>
 </li>
 <li>Remove any restrictions from the VPN network:
@@ -394,17 +394,17 @@ else
 int ret;
 
 if (!handle) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;invalid handle\n&quot;);
+    printf("invalid handle\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
 ret = vpnsvc_unblock_networks(handle);
 
 if (ret != VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_unblock_networks failed!\n&quot;);
+    printf("vpnsvc_unblock_networks failed!\n");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_unblock_networks succeeded!\n&quot;);
+    printf("vpnsvc_unblock_networks succeeded!\n");
 </pre>
 </li>
 </ul>
@@ -421,22 +421,22 @@ int timeout_ms = 20;
 ret = vpnsvc_read(handle, timeout_ms);
 
 if (ret == VPNSVC_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_read: Data available to read!\n&quot;);
+    printf("vpnsvc_read: Data available to read!\n");
 </pre>
 </li>
 <li>Write data directly to the underlying socket using a system call for performance. The number of bytes written is returned on success (the same as the system write call).
 <pre class="prettyprint">
 int ret;
-char *message = &quot;test message&quot;;
+char *message = "test message";
 
 ret = vpnsvc_write(handle, message, strlen(message));
 
 if (ret &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_write: failed!\n&quot;);
+    printf("vpnsvc_write: failed!\n");
 else if (ret == 0)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_write: Nothing written!\n&quot;);
+    printf("vpnsvc_write: Nothing written!\n");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;vpnsvc_read: %d bytes written!\n&quot;, ret);
+    printf("vpnsvc_read: %d bytes written!\n", ret);
 </pre>
 </li>
 </ul>
diff --git a/org.tizen.guides/html/native/connectivity/web_view_n.htm b/org.tizen.guides/html/native/connectivity/web_view_n.htm
index 7b1e016..ffb31d0 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/web_view_n.htm
+++ b/org.tizen.guides/html/native/connectivity/web_view_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Web View</title>  
+       <title>Web View</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -42,17 +42,17 @@
                        </li>
                        <li><a href="#finalize">Finalizing the Application</a>
                        </li>
-               </ul>           
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Web View</h1> 
+<h1>Web View</h1>
 <p>The Web view features include accessing Web pages and Web content in your application.</p>
 <p>The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. The EFL APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">wearable</a> applications), such as <code>evas_*</code>, <code>elm_*</code>, and <code>eina_*</code>, are used to build up a complete application supporting Web browsing.</p>
 
@@ -73,24 +73,24 @@
 <p>To use the Web API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To launch another application conditionally--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To create, update, and delete content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/content.write&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To use the Internet connection--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To provide user notifications, such as messages and badges--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/notification&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To use the user location data--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/location&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To manage the device cameras to preview and capture pictures--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/camera&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To access, read, and write to the external storage--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/externalstorage&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To access the display--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/display&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To create a network connection--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
+   &lt;!--To launch another application conditionally--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
+   &lt;!--To create, update, and delete content--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/content.write&lt;/privilege&gt;
+   &lt;!--To use the Internet connection--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
+   &lt;!--To provide user notifications, such as messages and badges--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/notification&lt;/privilege&gt;
+   &lt;!--To use the user location data--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/location&lt;/privilege&gt;
+   &lt;!--To manage the device cameras to preview and capture pictures--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/camera&lt;/privilege&gt;
+   &lt;!--To access, read, and write to the external storage--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/externalstorage&lt;/privilege&gt;
+   &lt;!--To access the display--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/display&lt;/privilege&gt;
+   &lt;!--To create a network connection--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -112,26 +112,26 @@
 <li>The sample browser uses several Evas objects to build the browser UI. To easily manage the UI elements, store the browser window data (including the <code>Evas_Object</code> instances) in the <code>Browser_window</code> data structure:
 <pre class="prettyprint">
 struct _Browser_Window {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *elm_window;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ewk_view;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *back_button;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *forward_button;
+    Evas_Object *elm_window;
+    Evas_Object *ewk_view;
+    Evas_Object *back_button;
+    Evas_Object *forward_button;
 };
 typedef struct _Browser_Window Browser_Window;
 
 EXPORT_API int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int args = 1;
-&nbsp;&nbsp;&nbsp;&nbsp;Browser_Window window;
-&nbsp;&nbsp;&nbsp;&nbsp;memset(&amp;window, 0x00, sizeof(Browser_Window));
+    int args = 1;
+    Browser_Window window;
+    memset(&amp;window, 0x00, sizeof(Browser_Window));
 
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s ops;
-&nbsp;&nbsp;&nbsp;&nbsp;memset(&amp;ops, 0x00, sizeof(ui_app_lifecycle_callback_s));
+    ui_app_lifecycle_callback_s ops;
+    memset(&amp;ops, 0x00, sizeof(ui_app_lifecycle_callback_s));
 
-&nbsp;&nbsp;&nbsp;&nbsp;ops.create = br_app_create;
+    ops.create = br_app_create;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;ops, &amp;window);
+    return ui_app_main(argc, argv, &amp;ops, &amp;window);
 }
 </pre></li>
 
@@ -145,37 +145,37 @@ window = window_create(NULL, 0, 0, EINA_FALSE);
 <p>To create a window object:</p>
 <ol>
 <li>To create a window object, use the <code>elm_win_add()</code> function:
- 
+
 <pre class="prettyprint">
 static Browser_Window*
 window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Allocate memory */
-&nbsp;&nbsp;&nbsp;&nbsp;Browser_Window *window = calloc(1, sizeof(Browser_Window));
-&nbsp;&nbsp;&nbsp;&nbsp;if (!window) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* &quot;ERROR: could not create browser window.&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* If you want to use GPU acceleration, use the following function */
-&nbsp;&nbsp;&nbsp;&nbsp;/* elm_config_accel_preference_set(&quot;opengl:depth24:stencil8&quot;); */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create window */
-&nbsp;&nbsp;&nbsp;&nbsp;window-&gt;elm_window = elm_win_add(NULL, &quot;minibrowser-window&quot;, ELM_WIN_BASIC);
+    /* Allocate memory */
+    Browser_Window *window = calloc(1, sizeof(Browser_Window));
+    if (!window) {
+        /* "ERROR: could not create browser window." */
+        return NULL;
+    }
+
+    /* If you want to use GPU acceleration, use the following function */
+    /* elm_config_accel_preference_set("opengl:depth24:stencil8"); */
+
+    /* Create window */
+    window-&gt;elm_window = elm_win_add(NULL, "minibrowser-window", ELM_WIN_BASIC);
 </pre></li>
 
-<li>Add a smart callback to the window to handle the window deletion event. 
+<li>Add a smart callback to the window to handle the window deletion event.
 <p>In the callback, call the <code>window_close()</code> function for the object returned from the <code>window_find_with_elm_window()</code> function call.</p>
- 
+
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(window-&gt;elm_window, &quot;delete,request&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on_window_deletion, &amp;window);
+    evas_object_smart_callback_add(window-&gt;elm_window, "delete,request",
+                                   on_window_deletion, &amp;window);
 }
 
 static void
 on_window_deletion(void *user_data, Evas_Object *elm_window, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;window_close(window_find_with_elm_window(elm_window));
+    window_close(window_find_with_elm_window(elm_window));
 }
 </pre></li></ol>
 
@@ -232,17 +232,17 @@ evas_object_show(horizontal_layout);
 static Browser_Window*
 window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *evas = evas_object_evas_get(window-&gt;elm_window);
-&nbsp;&nbsp;&nbsp;&nbsp;window-&gt;ewk_view = ewk_view_add(evas);
+    Evas *evas = evas_object_evas_get(window-&gt;elm_window);
+    window-&gt;ewk_view = ewk_view_add(evas);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ewk_view_user_agent_set(window-&gt;ewk_view, user_agent_string);
+    ewk_view_user_agent_set(window-&gt;ewk_view, user_agent_string);
 }
 </pre>
 </li>
 </ol>
 
  <h2 id="keymouse" name="keymouse">Handling Key and Mouse Events</h2>
- 
+
 <p>To handle mouse or key events in the window:</p>
 <ol>
 <li>Set callbacks for the mouse and key events using the <code>evas_object_event_callback_add()</code> function:
@@ -251,12 +251,12 @@ window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
 static Browser_Window*
 window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Key down event */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(window-&gt;ewk_view, EVAS_CALLBACK_KEY_DOWN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on_key_down, window);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Mouse down event */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(window-&gt;ewk_view, EVAS_CALLBACK_MOUSE_DOWN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on_mouse_down, window);
+    /* Key down event */
+    evas_object_event_callback_add(window-&gt;ewk_view, EVAS_CALLBACK_KEY_DOWN,
+                                   on_key_down, window);
+    /* Mouse down event */
+    evas_object_event_callback_add(window-&gt;ewk_view, EVAS_CALLBACK_MOUSE_DOWN,
+                                   on_mouse_down, window);
 }
 </pre>
 </li>
@@ -268,53 +268,53 @@ window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
 static void
 on_key_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Browser_Window *window = (Browser_Window *)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Event_Key_Down *ev = (Evas_Event_Key_Down*)event_info;
+    Browser_Window *window = (Browser_Window *)user_data;
+    Evas_Event_Key_Down *ev = (Evas_Event_Key_Down*)event_info;
 
-&nbsp;&nbsp;&nbsp;&nbsp;const Evas_Modifier *mod = evas_key_modifier_get(e);
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool ctrlPressed = evas_key_modifier_is_set(mod, &quot;Control&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool altPressed = evas_key_modifier_is_set(mod, &quot;Alt&quot;);
+    const Evas_Modifier *mod = evas_key_modifier_get(e);
+    Eina_Bool ctrlPressed = evas_key_modifier_is_set(mod, "Control");
+    Eina_Bool altPressed = evas_key_modifier_is_set(mod, "Alt");
 }
 </pre>
 
-<p>For example, if the <strong>Alt + Left Arrow</strong> key combination is pressed, the <code>(!strcmp(ev-&gt;key, &quot;Left&quot;) &amp;&amp; altPressed)</code> statement must evaluate to <code>TRUE</code>.</p>
+<p>For example, if the <strong>Alt + Left Arrow</strong> key combination is pressed, the <code>(!strcmp(ev-&gt;key, "Left") &amp;&amp; altPressed)</code> statement must evaluate to <code>TRUE</code>.</p>
 
 <p>The following table shows how the key combinations match to specific view functions.</p>
-<p align="center" class="Table"><strong>Table: Key behavior</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Key</th> 
+<p align="center" class="Table"><strong>Table: Key behavior</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Key</th>
      <th>Behavior</th>
-        <th>API</th>    
-    </tr> 
-    <tr> 
+        <th>API</th>
+    </tr>
+    <tr>
        <td>Alt+Left</td>
      <td>Go to the previous view in the browsing history.</td>
-       <td><code>ewk_view_back()</code></td>        
-    </tr>      
-    <tr> 
+       <td><code>ewk_view_back()</code></td>
+    </tr>
+    <tr>
        <td>Alt+Right</td>
      <td>Go to the next view in the browsing history.</td>
-       <td><code>ewk_view_forward()</code></td>             
-    </tr> 
-           <tr> 
+       <td><code>ewk_view_forward()</code></td>
+    </tr>
+           <tr>
        <td>F5</td>
      <td>Reload the view.</td>
-       <td><code>ewk_view_reload()</code></td>      
-    </tr> 
-           <tr> 
+       <td><code>ewk_view_reload()</code></td>
+    </tr>
+           <tr>
        <td>Alt+F5</td>
      <td>Reload the view bypassing the cache.</td>
-       <td><code>ewk_view_bypass_cache()</code></td>        
-    </tr> 
-           <tr> 
+       <td><code>ewk_view_bypass_cache()</code></td>
+    </tr>
+           <tr>
        <td>F6</td>
      <td>Stop loading the view.</td>
-       <td><code>ewk_view_stop()</code></td>        
-    </tr> 
-   </tbody> 
-</table> 
+       <td><code>ewk_view_stop()</code></td>
+    </tr>
+   </tbody>
+</table>
 </li>
 <li>Define the mouse down event callback.
 <p>The mouse down event information is stored in the <code>Evas_Event_Mouse_Down</code> instance. Similarly as in the key events, the <code>ev-&gt;button</code> instance contains information on which button was pressed.</p>
@@ -324,11 +324,11 @@ on_key_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info)
 static void
 on_mouse_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Browser_Window *window = (Browser_Window *)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Down *ev = (Evas_Event_Mouse_Down *)event_info;
+    Browser_Window *window = (Browser_Window *)user_data;
+    Evas_Event_Mouse_Down *ev = (Evas_Event_Mouse_Down *)event_info;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ev-&gt;button == 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view_focus_set(window, EINA_TRUE);
+    if (ev-&gt;button == 1)
+        view_focus_set(window, EINA_TRUE);
 }
 </pre>
 </li>
@@ -347,13 +347,13 @@ on_mouse_down(void *user_data, Evas *e, Evas_Object *ewk_view, void *event_info)
 static void
 view_focus_set(Browser_Window *window, Eina_Bool focus)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   You steal focus away from the elm focus model and start to do things
-&nbsp;&nbsp;&nbsp;&nbsp;   manually, so elm has no clue what is up. Tell elm to unfocus
-&nbsp;&nbsp;&nbsp;&nbsp;   the top level UI component
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_focus_set(elm_object_top_widget_get(window-&gt;elm_window), EINA_FALSE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_focus_set(window-&gt;ewk_view, focus);
+    /*
+       You steal focus away from the elm focus model and start to do things
+       manually, so elm has no clue what is up. Tell elm to unfocus
+       the top level UI component
+    */
+    elm_object_focus_set(elm_object_top_widget_get(window-&gt;elm_window), EINA_FALSE);
+    evas_object_focus_set(window-&gt;ewk_view, focus);
 };
 </pre>
 </li>
@@ -363,21 +363,21 @@ view_focus_set(Browser_Window *window, Eina_Bool focus)
 <pre class="prettyprint">
 window_create()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(window-&gt;elm_window, window-&gt;ewk_view);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(window-&gt;ewk_view);
+    elm_win_resize_object_add(window-&gt;elm_window, window-&gt;ewk_view);
+    evas_object_show(window-&gt;ewk_view);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(window-&gt;elm_window);
+    evas_object_show(window-&gt;elm_window);
 
-&nbsp;&nbsp;&nbsp;&nbsp;view_focus_set(window, EINA_TRUE);
+    view_focus_set(window, EINA_TRUE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return window;
+    return window;
 }
 </pre>
 </li>
 </ol>
 
  <h2 id="helper" name="helper">Finding a Window</h2>
- 
+
 <p>You can use helper functions to find window structures:</p>
 <ul>
 <li>The <code>window_find_with_elm_window()</code> helper function takes the <code>elm_window</code> as a parameter and returns a pointer to the <code>Browser_Window</code> object that the window is part of.</li>
@@ -389,37 +389,37 @@ window_create()
 static Browser_Window*
 window_find_with_elm_window(Evas_Object *elm_window)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_List *l;
-&nbsp;&nbsp;&nbsp;&nbsp;void *data;
+    Eina_List *l;
+    void *data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!elm_window)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+    if (!elm_window)
+        return NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(windows, l, data) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Browser_Window *window = (Browser_Window *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (window-&gt;elm_window == elm_window)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return window;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    EINA_LIST_FOREACH(windows, l, data) {
+        Browser_Window *window = (Browser_Window *)data;
+        if (window-&gt;elm_window == elm_window)
+            return window;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+    return NULL;
 }
 
 static Browser_Window*
 window_find_with_ewk_view(Evas_Object *ewk_view)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_List *l;
-&nbsp;&nbsp;&nbsp;&nbsp;void *data;
+    Eina_List *l;
+    void *data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!ewk_view)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+    if (!ewk_view)
+        return NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(windows, l, data) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Browser_Window *window = (Browser_Window *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (window-&gt;ewk_view == ewk_view)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return window;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    EINA_LIST_FOREACH(windows, l, data) {
+        Browser_Window *window = (Browser_Window *)data;
+        if (window-&gt;ewk_view == ewk_view)
+            return window;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+    return NULL;
 }
 </pre>
 
@@ -433,7 +433,7 @@ window_find_with_ewk_view(Evas_Object *ewk_view)
 static void
 br_app_terminate(void *app_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ewk_shutdown();
+    ewk_shutdown();
 }
 </pre>
 </li>
@@ -443,10 +443,10 @@ br_app_terminate(void *app_data)
 <pre class="prettyprint">
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ops.create = br_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;ops.terminate = br_app_terminate;
+    ops.create = br_app_create;
+    ops.terminate = br_app_terminate;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;ops, &amp;window);
+    return ui_app_main(argc, argv, &amp;ops, &amp;window);
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/connectivity/wifi_direct_n.htm b/org.tizen.guides/html/native/connectivity/wifi_direct_n.htm
index 0af7ca0..17e3ad0 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/wifi_direct_n.htm
+++ b/org.tizen.guides/html/native/connectivity/wifi_direct_n.htm
@@ -27,12 +27,12 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#prerequisites">Prerequisites</a></li>
-                       <li><a href="#activating">Activating Wi-Fi Direct&trade;</a></li>       
+                       <li><a href="#activating">Activating Wi-Fi Direct&trade;</a></li>
                        <li>Peers and groups
                        <ul class="toc">
-                       <li><a href="#getting_device_info">Getting the Wi-Fi Direct&trade; Peer Device Information</a></li>                     
-                       <li><a href="#connecting_device">Connecting to a Specific Wi-Fi Direct&trade; Peer Device</a></li>                      
-                       <li><a href="#creating_group">Managing Wi-Fi Direct&trade; Groups</a></li>      
+                       <li><a href="#getting_device_info">Getting the Wi-Fi Direct&trade; Peer Device Information</a></li>
+                       <li><a href="#connecting_device">Connecting to a Specific Wi-Fi Direct&trade; Peer Device</a></li>
+                       <li><a href="#creating_group">Managing Wi-Fi Direct&trade; Groups</a></li>
                        </ul></li>
                        <li><a href="#deactivating">Deactivating Wi-Fi Direct&trade;</a></li>
                </ul>
@@ -79,7 +79,7 @@
 <p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct</a> API, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/wifidirect&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/wifidirect&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -101,8 +101,8 @@ error_code = wifi_direct_initialize();
 <pre class="prettyprint">
 void
 device_state_changed_cb(wifi_direct_error_e error_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_device_state_e device_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data);
+                        wifi_direct_device_state_e device_state,
+                        void *user_data);
 
 error_code = wifi_direct_set_device_state_changed_cb(device_state_changed_cb, NULL);
 </pre>
@@ -113,11 +113,11 @@ error_code = wifi_direct_set_device_state_changed_cb(device_state_changed_cb, NU
 <pre class="prettyprint">
 void
 discovery_state_changed_cb(wifi_direct_error_e error_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_discovery_state_e discovery_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data);
+                           wifi_direct_discovery_state_e discovery_state,
+                           void *user_data);
 
 error_code = wifi_direct_set_discovery_state_changed_cb(discovery_state_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                        NULL);
 </pre>
 </li>
 
@@ -126,11 +126,11 @@ error_code = wifi_direct_set_discovery_state_changed_cb(discovery_state_changed_
 <pre class="prettyprint">
 void
 connection_state_changed_cb(wifi_direct_error_e error_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_connection_state_e connection_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data);
+                            wifi_direct_connection_state_e connection_state,
+                            void *user_data);
 
 error_code = wifi_direct_set_connection_state_changed_cb(connection_state_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                         NULL);
 </pre>
 </li></ol>
 
@@ -145,16 +145,16 @@ error_code = wifi_direct_set_connection_state_changed_cb(connection_state_change
 <pre class="prettyprint">
 static void
 device_state_changed_cb(wifi_direct_error_e error_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_discovery_state_e discovery_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                        wifi_direct_discovery_state_e discovery_state,
+                        void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (device_state == WIFI_DIRECT_DEVICE_STATE_ACTIVATED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Activate Wi-Fi Direct&trade; device!\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (device_state == WIFI_DIRECT_DEVICE_STATE_DEACTIVATED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Deactivate Wi-Fi Direct&trade; device!\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (device_state == WIFI_DIRECT_DEVICE_STATE_ACTIVATED) {
+        printf("Activate Wi-Fi Direct&trade; device!\n");
+        /* Handle the event */
+    } else if (device_state == WIFI_DIRECT_DEVICE_STATE_DEACTIVATED) {
+        printf("Deactivate Wi-Fi Direct&trade; device!\n");
+        /* Handle the event */
+    }
 }
 </pre></li>
 
@@ -171,7 +171,7 @@ error_code = wifi_activate(NULL);
 <pre class="prettyprint">
 wifi_direct_state_e state = WIFI_DIRECT_STATE_DEACTIVATED;
 wifi_direct_get_state(&amp;state);
-printf(&quot;Wi-Fi Direct&trade; state: %d.\n&quot;, state);
+printf("Wi-Fi Direct&trade; state: %d.\n", state);
 </pre></li></ol>
 
  <h2 id="getting_device_info" name="getting_device_info">Getting the Wi-Fi Direct&trade; Peer Device Information</h2>
@@ -183,31 +183,31 @@ printf(&quot;Wi-Fi Direct&trade; state: %d.\n&quot;, state);
 <pre class="prettyprint">
 void
 discovery_state_changed_cb(wifi_direct_error_e error_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_discovery_state_e discovery_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                           wifi_direct_discovery_state_e discovery_state,
+                           void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;switch (discovery_state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_ONLY_LISTEN_STARTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
+    switch (discovery_state) {
+    case WIFI_DIRECT_ONLY_LISTEN_STARTED:
+        /* Handle the event */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;DISCOVERY_STATE: ONLY_LISTEN_STARTED&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCOVERY_STARTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
+        return "DISCOVERY_STATE: ONLY_LISTEN_STARTED";
+    case WIFI_DIRECT_DISCOVERY_STARTED:
+        /* Handle the event */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;DISCOVERY_STATE: DISCOVERY_STARTED&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCOVERY_FOUND:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
+        return "DISCOVERY_STATE: DISCOVERY_STARTED";
+    case WIFI_DIRECT_DISCOVERY_FOUND:
+        /* Handle the event */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;DISCOVERY_STATE: DISCOVERY_FOUND&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCOVERY_FINISHED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
+        return "DISCOVERY_STATE: DISCOVERY_FOUND";
+    case WIFI_DIRECT_DISCOVERY_FINISHED:
+        /* Handle the event */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;DISCOVERY_STATE: DISCOVERY_FINISHED&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;UNKNOWN_DISCOVERY_STATE&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return "DISCOVERY_STATE: DISCOVERY_FINISHED";
+    default:
+        return "UNKNOWN_DISCOVERY_STATE";
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return &quot;UNKNOWN_DISCOVERY_STATE&quot;;
+    return "UNKNOWN_DISCOVERY_STATE";
 }
 </pre></li>
 
@@ -226,15 +226,15 @@ wifi_direct_start_discovery(false, 0);
 bool
 discovered_peer_cb(wifi_direct_discovered_peer_info_s *peer, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL != peer) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;\nDevice Name: %s&quot;, peer-&gt;device_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;\nMac Address: %s&quot;, peer-&gt;mac_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (NULL != peer) {
+        printf("\nDevice Name: %s", peer-&gt;device_name);
+        printf("\nMac Address: %s", peer-&gt;mac_address);
+        /* Handle the event */
+
+        return 1;
+    } else {
+        return false;
+    }
 }
 
 int rv = wifi_direct_foreach_discovered_peers(discovered_peer_cb, NULL);
@@ -253,64 +253,64 @@ int rv = wifi_direct_foreach_discovered_peers(discovered_peer_cb, NULL);
 <pre class="prettyprint">
 static void
 connection_state_changed_cb(wifi_direct_error_e error_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_connection_state_e connection_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *mac_address, void *user_data)
+                            wifi_direct_connection_state_e connection_state,
+                            const char *mac_address, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Connection state changed to: [%d] [%s]\n&quot;, connection_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test_wfd_convert_connection_state_to_string(connection_state));
-
-&nbsp;&nbsp;&nbsp;&nbsp;bool accept_connection = false;
-&nbsp;&nbsp;&nbsp;&nbsp;int rv = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (connection_state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_WPS_REQ:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Outgoing requests */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_wps_type_e wps_mode;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_get_local_wps_type(&amp;wps_mode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_REQ:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Incoming requests */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_wps_type_e wps_mode;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_get_local_wps_type(&amp;wps_mode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_INVITATION_REQ:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Invitation request from peer */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISASSOCIATION_IND:
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCONNECTION_IND:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Peer: [%s] disconnected.\n&quot;, mac_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_IN_PROGRESS:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Connection in progress\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_RSP:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == WIFI_DIRECT_ERROR_CONNECTION_FAILED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(MAKE_RED&quot;Time Out or connection failed&quot;RESET_COLOR&quot;\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_GROUP_CREATED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_GROUP_DESTROYED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCONNECTION_RSP:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Unknown State Received\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    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;
+
+    switch (connection_state) {
+    case WIFI_DIRECT_CONNECTION_WPS_REQ:
+        /* Outgoing requests */
+        wifi_direct_wps_type_e wps_mode;
+        wifi_direct_get_local_wps_type(&amp;wps_mode);
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_CONNECTION_REQ:
+        /* Incoming requests */
+        wifi_direct_wps_type_e wps_mode;
+        wifi_direct_get_local_wps_type(&amp;wps_mode);
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_INVITATION_REQ:
+        /* Invitation request from peer */
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_DISASSOCIATION_IND:
+    case WIFI_DIRECT_DISCONNECTION_IND:
+        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 */
+    case WIFI_DIRECT_CONNECTION_RSP:
+        if (error_code == WIFI_DIRECT_ERROR_CONNECTION_FAILED) {
+            printf(MAKE_RED"Time Out or connection failed"RESET_COLOR"\n");
+            /* Handle the event */
+        }
+        break;
+    case WIFI_DIRECT_GROUP_CREATED:
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_GROUP_DESTROYED:
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_DISCONNECTION_RSP:
+        /* Handle the event */
+        break;
+    default:
+        printf("Unknown State Received\n");
+    }
 }
 </pre></li>
 
 <li>Connect with a Wi-Fi Direct&trade; peer device.
 
-<p>Check whether Wi-Fi Direct&trade; is activated using the <code>wifi_direct_get_state()</code> function, and then get the specific device address.</p> 
+<p>Check whether Wi-Fi Direct&trade; is activated using the <code>wifi_direct_get_state()</code> function, and then get the specific device address.</p>
 <p>You can obtain the address directly from the user (as in the following example), or by calling the <code>wifi_direct_foreach_discovered_peers()</code> function to the address through the device discovery process.</p>
 
 <pre class="prettyprint">
@@ -320,32 +320,32 @@ int error_code;
 
 wifi_direct_get_state(&amp;state);
 if (state &lt; WIFI_DIRECT_STATE_ACTIVATED)
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 
 mac_address = calloc(1, 32*sizeof(char));
 if (!mac_address) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;cannot allocate memory&quot;);
+    printf("cannot allocate memory");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
-printf(&quot;\nEnter Mac_address: &quot;);
-if (scanf(&quot; %s&quot;, mac_address) &lt; 1) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(mac_address);
+printf("\nEnter Mac_address: ");
+if (scanf(" %s", mac_address) &lt; 1) {
+    free(mac_address);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 if (strlen(mac_address) &gt; 23)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;\nWrong Mac_address&quot;);
+    printf("\nWrong Mac_address");
 
 error_code = wifi_direct_connect(mac_address);
 if (error_code != WIFI_DIRECT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Failed to connect\n&quot;);
+    printf("Failed to connect\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
-printf(&quot;Connection step finished\n&quot;);
+printf("Connection step finished\n");
 </pre></li>
 
 <li>When the connection is no longer needed, disconnect from the Wi-Fi Direct&trade; device:
@@ -357,32 +357,32 @@ int error_code;
 
 wifi_direct_get_state(&amp;state);
 if (state &lt; WIFI_DIRECT_STATE_ACTIVATED)
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 
 mac_address = calloc(1, 32*sizeof(char));
 if (!mac_address) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;cannot allocate memory&quot;);
+    printf("cannot allocate memory");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
-printf(&quot;\nEnter Mac_address: &quot;);
-if (scanf(&quot; %s&quot;, mac_address) &lt; 1) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(mac_address);
+printf("\nEnter Mac_address: ");
+if (scanf(" %s", mac_address) &lt; 1) {
+    free(mac_address);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 if (strlen(mac_address) &gt; 23)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;\nWrong Mac_address&quot;);
+    printf("\nWrong Mac_address");
 
 error_code = wifi_direct_disconnect(mac_address);
 if (error_code != WIFI_DIRECT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Failed to disconnect\n&quot;);
+    printf("Failed to disconnect\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
-printf(&quot;Disconnection step finished\n&quot;);
+printf("Disconnection step finished\n");
 </pre></li></ol>
 
  <h2 id="creating_group" name="creating_group">Managing Wi-Fi Direct&trade; Groups</h2>
@@ -397,16 +397,16 @@ int error_code;
 
 wifi_direct_get_state(&amp;state);
 if (state &lt; WIFI_DIRECT_STATE_ACTIVATED || state &gt; WIFI_DIRECT_STATE_DISCOVERING)
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 
 error_code = wifi_direct_create_group();
 if (error_code != WIFI_DIRECT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Failed to create wifi direct group\n&quot;);
+    printf("Failed to create wifi direct group\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
-printf(&quot;Connection step finished\n&quot;);
+printf("Connection step finished\n");
 </pre></li>
 
 <li>When Wi-Fi Direct &trade; connections or group is no longer needed, destroy all connections and the group:
@@ -417,16 +417,16 @@ int error_code;
 
 wifi_direct_get_state(&amp;state);
 if (state &lt; WIFI_DIRECT_STATE_CONNECTED)
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 
 error_code = wifi_direct_destroy_group();
 if (error_code != WIFI_DIRECT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Failed to destroy wifi direct group\n&quot;);
+    printf("Failed to destroy wifi direct group\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
-printf(&quot;Disconnection step finished\n&quot;);
+printf("Disconnection step finished\n");
 </pre></li></ol>
 
  <h2 id="deactivating" name="deactivating">Deactivating Wi-Fi Direct&trade;</h2>
diff --git a/org.tizen.guides/html/native/connectivity/wifi_n.htm b/org.tizen.guides/html/native/connectivity/wifi_n.htm
index 0628c71..ee4157a 100644 (file)
--- a/org.tizen.guides/html/native/connectivity/wifi_n.htm
+++ b/org.tizen.guides/html/native/connectivity/wifi_n.htm
@@ -34,7 +34,7 @@
                        <li><a href="#activate">Activating a Wi-Fi Device</a></li>
                        <li><a href="#scan">Scanning for Access Points</a></li>
                        <li><a href="#connect">Connecting to a Specific Access Point</a></li>
-               </ul>                   
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">Wi-Fi Manager API for Mobile Native</a></li>
@@ -57,14 +57,14 @@
 <p>You can use the <a href="#wifi_monitor">Wi-Fi Monitor</a> to monitor the Wi-Fi connection state.</p></li>
 </ul>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         You can test the Wi-Fi functionality only on a target device. The emulator does not support this feature.
     </div>
 
-  
-<h2 id="wifi_manager" name="wifi_manager">Wi-Fi Manager</h2>  
+
+<h2 id="wifi_manager" name="wifi_manager">Wi-Fi Manager</h2>
 
 <p>The Tizen Wi-Fi Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">wearable</a> applications) provides functions for using a Wi-Fi connection. </p>
 <p>Using the Wi-Fi Manager, you can implement features that allow the users of your application to:</p>
@@ -79,7 +79,7 @@
 <p>To <a href="#scan">scan access points</a>, use the <code>wifi_manager_scan()</code> and <code>wifi_manager_foreach_found_ap()</code> functions.</p>
 <p>The <code>wifi_manager_scan()</code> function starts the scan asynchronously. When the scan is finished, a callback function is called. The <code>wifi_manager_foreach_found_ap()</code> function allows you to get the result of the scan. It also invokes a callback function.</p></li></ul>
 
-<h2 id="ap" name="ap">Access Point</h2> 
+<h2 id="ap" name="ap">Access Point</h2>
 
 <p>The Access Point API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__MODULE.html">wearable</a> applications) provides functions for managing access points (AP). You need to create an AP handle (<code>wifi_manager_ap_h</code>) for using the API functions. </p>
 
@@ -89,129 +89,129 @@
 <li>Getting the security information</li></ul>
 
 <p>The following table lists the network information details you can access with the Network Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__NETWORK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__NETWORK__MODULE.html">wearable</a> applications).</p>
-  
+
 <p align="center" class="Table"><strong>Table: Network information details</strong></p>
-   <table> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>Bssid</td> 
-     <td>Basic service set identifier</td> 
-    </tr> 
-           <tr> 
-     <td>Connection state</td> 
-     <td>Connection state</td> 
+   <table>
+   <tbody>
+    <tr>
+     <th>Information</th>
+     <th>Description</th>
     </tr>
-           <tr> 
-     <td>DNS address</td> 
-     <td>DNS address</td> 
+    <tr>
+     <td>Bssid</td>
+     <td>Basic service set identifier</td>
     </tr>
-           <tr> 
-     <td>Essid</td> 
-     <td>Extended service set identifier</td> 
+           <tr>
+     <td>Connection state</td>
+     <td>Connection state</td>
     </tr>
-           <tr> 
-     <td>Frequency</td> 
-     <td>Frequency (in MHz)</td> 
+           <tr>
+     <td>DNS address</td>
+     <td>DNS address</td>
     </tr>
-           <tr> 
-     <td>IP address</td> 
-     <td>IP address</td> 
+           <tr>
+     <td>Essid</td>
+     <td>Extended service set identifier</td>
     </tr>
-           <tr> 
-     <td>IP config type</td> 
-     <td>Net IP configuration type</td> 
+           <tr>
+     <td>Frequency</td>
+     <td>Frequency (in MHz)</td>
     </tr>
-           <tr> 
-     <td>Max speed</td> 
-     <td>Maximum speed (in Mbps)</td> 
+           <tr>
+     <td>IP address</td>
+     <td>IP address</td>
     </tr>
-           <tr> 
-     <td>Proxy address</td> 
-     <td>Proxy address</td> 
+           <tr>
+     <td>IP config type</td>
+     <td>Net IP configuration type</td>
     </tr>
-           <tr> 
-     <td>Proxy type</td> 
-     <td>Proxy method type</td> 
+           <tr>
+     <td>Max speed</td>
+     <td>Maximum speed (in Mbps)</td>
     </tr>
-           <tr> 
-     <td>Rssi</td> 
-     <td>Received signal strength indication</td> 
+           <tr>
+     <td>Proxy address</td>
+     <td>Proxy address</td>
     </tr>
-           <tr> 
-     <td>Subnet mask</td> 
-     <td>Subnet mask</td> 
+           <tr>
+     <td>Proxy type</td>
+     <td>Proxy method type</td>
     </tr>
-   </tbody> 
-  </table> 
+           <tr>
+     <td>Rssi</td>
+     <td>Received signal strength indication</td>
+    </tr>
+           <tr>
+     <td>Subnet mask</td>
+     <td>Subnet mask</td>
+    </tr>
+   </tbody>
+  </table>
 
 
 <p>The following table lists the security information details you can access with the Security Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__SECURITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__AP__SECURITY__MODULE.html">wearable</a> applications).</p>
 <p align="center" class="Table"><strong>Table: Security information details</strong></p>
- <table> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-       <tr> 
-     <td>Encryption type</td> 
-     <td>Wi-Fi encryption type, used in the infrastructure and ad-hoc mode</td> 
+ <table>
+   <tbody>
+    <tr>
+     <th>Information</th>
+     <th>Description</th>
+    </tr>
+       <tr>
+     <td>Encryption type</td>
+     <td>Wi-Fi encryption type, used in the infrastructure and ad-hoc mode</td>
     </tr>
-       <tr> 
-     <td>Security type</td> 
-     <td>Wi-Fi security type</td> 
+       <tr>
+     <td>Security type</td>
+     <td>Wi-Fi security type</td>
     </tr>
-       <tr> 
-     <td>Passphrase required</td> 
-     <td>Whether the passphrase is required</td> 
+       <tr>
+     <td>Passphrase required</td>
+     <td>Whether the passphrase is required</td>
     </tr>
-           <tr> 
-     <td>WPS supported</td> 
-     <td>Whether the WPS (Wi-Fi Protected Setup) is supported</td> 
+           <tr>
+     <td>WPS supported</td>
+     <td>Whether the WPS (Wi-Fi Protected Setup) is supported</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
 
 <p>You can also obtain the EAP information listed in the following table.</p>
 <p align="center" class="Table"><strong>Table: EAP information details</strong></p>
- <table> 
-   <tbody> 
-    <tr> 
-     <th>Information</th> 
-     <th>Description</th> 
-    </tr> 
-           <tr> 
-     <td>Authentication type</td> 
-     <td>Type of EAP phase2 authentication of Wi-Fi</td> 
+ <table>
+   <tbody>
+    <tr>
+     <th>Information</th>
+     <th>Description</th>
     </tr>
-                   <tr> 
-     <td>CA certificate</td> 
-     <td>EAP CA certificate (valid only if the EAP type is TLS)</td> 
+           <tr>
+     <td>Authentication type</td>
+     <td>Type of EAP phase2 authentication of Wi-Fi</td>
     </tr>
-                   <tr> 
-     <td>Client Certificate</td> 
-     <td>EAP client certificate (valid only if the EAP type is TLS)</td> 
+                   <tr>
+     <td>CA certificate</td>
+     <td>EAP CA certificate (valid only if the EAP type is TLS)</td>
     </tr>
-                   <tr> 
-     <td>Passphrase</td> 
+                   <tr>
+     <td>Client Certificate</td>
+     <td>EAP client certificate (valid only if the EAP type is TLS)</td>
+    </tr>
+                   <tr>
+     <td>Passphrase</td>
      <td>EAP passphrase (valid if the EAP type is PEAP or TTLS)</td>
     </tr>
-                   <tr> 
-     <td>Private key file</td> 
-     <td>EAP private key file (valid only if the EAP type is TLS)</td> 
+                   <tr>
+     <td>Private key file</td>
+     <td>EAP private key file (valid only if the EAP type is TLS)</td>
+    </tr>
+           <tr>
+     <td>EAP type</td>
+     <td>EAP type of Wi-Fi</td>
     </tr>
-           <tr> 
-     <td>EAP type</td> 
-     <td>EAP type of Wi-Fi</td> 
-    </tr>      
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
 
-<h2 id="wifi_monitor" name="wifi_monitor">Wi-Fi Monitor</h2> 
+<h2 id="wifi_monitor" name="wifi_monitor">Wi-Fi Monitor</h2>
 
 <p>The Wi-Fi Monitor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MONITOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MONITOR__MODULE.html">wearable</a> applications) provides functions for monitoring the Wi-Fi connection state.</p>
 
@@ -230,27 +230,27 @@
 
 <p>The Wi-Fi Monitor also allows monitoring the changes in Wi-Fi. With the Wi-Fi Monitor, you can register callback functions, which notify you when Wi-Fi properties change. The property changes resulting in notifications are listed in the following table.</p>
 
-<p align="center" class="Table"><strong>Table: Property changes</strong></p> 
-<table>  
-   <tbody> 
-    <tr> 
-     <th>Change in</th> 
-     <th>Description</th> 
-    </tr> 
-       <tr> 
-     <td>Connection state</td> 
-     <td>The callback is called when the connection state is changed.</td> 
+<p align="center" class="Table"><strong>Table: Property changes</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Change in</th>
+     <th>Description</th>
+    </tr>
+       <tr>
+     <td>Connection state</td>
+     <td>The callback is called when the connection state is changed.</td>
+    </tr>
+       <tr>
+     <td>Device state</td>
+     <td>The callback is called when the device state changes.</td>
     </tr>
-       <tr> 
-     <td>Device state</td> 
-     <td>The callback is called when the device state changes.</td> 
+       <tr>
+     <td>RSSI level</td>
+     <td>The callback is called when the RSSI of the connected Wi-Fi changes.</td>
     </tr>
-       <tr> 
-     <td>RSSI level</td> 
-     <td>The callback is called when the RSSI of the connected Wi-Fi changes.</td> 
-    </tr>      
-   </tbody> 
-  </table>     
+   </tbody>
+  </table>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -260,11 +260,11 @@
 <p>To use the Wi-Fi Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.set&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.profile&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.set&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.profile&lt;/privilege&gt;
 &lt;/privileges&gt;
-</pre>         
+</pre>
 </li>
 <li>
 <p>To use the functions and data types of the Wi-Fi Manager API, include the <code>&lt;wifi-manager.h&gt;</code> header file in your application:</p>
@@ -280,7 +280,7 @@ int error_code;
 
 error_code = wifi_manager_initialize(wifi);
 if (error_code != WIFI_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 </pre>
 </li>
 <li>
@@ -313,8 +313,8 @@ error_code = wifi_manager_activate(wifi, __wifi_manager_activated_cb, NULL);
 static void
 __wifi_manager_activated_cb(wifi_error_e result, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == WIFI_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success to activate Wi-Fi device!&quot;);
+    if (result == WIFI_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Success to activate Wi-Fi device!");
 }
 </pre></li>
 
@@ -324,9 +324,9 @@ __wifi_manager_activated_cb(wifi_error_e result, void *user_data)
 bool wifi_manager_activated = false;
 wifi_manager_is_activated(wifi, &amp;wifi_manager_activated);
 if (wifi_manager_activated)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success to get Wi-Fi device state.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Success to get Wi-Fi device state.");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to get Wi-Fi device state.&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to get Wi-Fi device state.");
 </pre></li>
 <li>
 <p>To deactivate the Wi-Fi device when Wi-Fi is no longer needed (or the application is exiting), use the <code>wifi_manager_deactivate()</code> function:</p>
@@ -341,21 +341,21 @@ wifi_manager_deactivate(wifi, NULL, NULL);
 <p>To scan nearby access points and print the scanning result, such as the AP name and state:</p>
 
 <ol><li>Scan nearby access points asynchronously:
- 
+
 <pre class="prettyprint">
 wifi_manager_scan(wifi, __scan_request_cb, NULL);
 </pre></li>
 
 <li>Define a callback, which is invoked when the scan is finished.
 <p>In the following example, the callback calls the <code>wifi_manager_foreach_found_ap()</code> function for getting information on the found AP. The <code>wifi_manager_foreach_found_ap()</code> function gets the result of the scan, and the <code>__wifi_manager_found_ap_cb()</code> callback is called for each found access point.</p>
- 
+
 <pre class="prettyprint">
 void
 __scan_request_cb(wifi_error_e error_code, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = wifi_manager_foreach_found_ap(wifi, __wifi_manager_found_ap_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to scan&quot;);
+    error_code = wifi_manager_foreach_found_ap(wifi, __wifi_manager_found_ap_cb, NULL);
+    if (error_code != WIFI_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to scan");
 }
 </pre></li>
 
@@ -366,40 +366,40 @@ __scan_request_cb(wifi_error_e error_code, void *user_data)
 bool
 __wifi_manager_found_ap_cb(wifi_ap_h ap, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *ap_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;wifi_connection_state_e state;
+    int error_code = 0;
+    char *ap_name = NULL;
+    wifi_connection_state_e state;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = wifi_manager_ap_get_essid(ap, &amp;ap_name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to get AP name.&quot;);
+    error_code = wifi_manager_ap_get_essid(ap, &amp;ap_name);
+    if (error_code != WIFI_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to get AP name.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = wifi_manager_ap_get_connection_state(ap, &amp;state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to get state.&quot;);
+        return false;
+    }
+    error_code = wifi_manager_ap_get_connection_state(ap, &amp;state);
+    if (error_code != WIFI_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to get state.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;AP name: %s, state: %s&quot;, ap_name, print_state(state));
+        return false;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "AP name: %s, state: %s", ap_name, print_state(state));
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 static const char*
 print_state(wifi_connection_state_e state)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;switch (state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_CONNECTION_STATE_DISCONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Disconnected&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_CONNECTION_STATE_ASSOCIATION:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Association&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_CONNECTION_STATE_CONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Connected&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_CONNECTION_STATE_CONFIGURATION:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Configuration&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    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";
+    }
 }
 </pre>
 
@@ -418,77 +418,77 @@ bool state = false;
 
 wifi_manager_is_activated(wifi, &amp;state);
 if (state == false)
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 
-dlog_print(DLOG_INFO, LOG_TAG, &quot;Input a part of AP name to connect: &quot;);
-error_code = scanf(&quot;%32s&quot;, ap_name);
+dlog_print(DLOG_INFO, LOG_TAG, "Input a part of AP name to connect: ");
+error_code = scanf("%32s", ap_name);
 
 error_code = wifi_manager_foreach_found_ap(wifi, __found_connect_ap_cb, ap_name);
 if (error_code != WIFI_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to connect (can&#39;t get AP list)&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to connect (can't get AP list)");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 
-dlog_print(DLOG_INFO, LOG_TAG, &quot;Connection step finished&quot;);
+dlog_print(DLOG_INFO, LOG_TAG, "Connection step finished");
 </pre></li>
 
 <li>Make a connection with an access point.
 <p>Define the <code>__found_connect_ap_cb()</code> callback invoked by the <code>wifi_manager_foreach_found_ap()</code> function.</p>
-<p>The callback compares <code>user_data</code> (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 <code>wifi_manager_ap_set_passphrase()</code> function.</p> 
+<p>The callback compares <code>user_data</code> (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 <code>wifi_manager_ap_set_passphrase()</code> function.</p>
 <p>Finally, connect to a specific AP using the <code>wifi_manager_connect()</code> function.</p>
 
 <pre class="prettyprint">
 static bool
 __found_connect_ap_cb(wifi_ap_h ap, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *ap_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *ap_name_part = (char*)user_data;
+    int error_code = 0;
+    char *ap_name = NULL;
+    char *ap_name_part = (char*)user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = wifi_manager_ap_get_essid(ap, &amp;ap_name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to get AP name&quot;);
+    error_code = wifi_manager_ap_get_essid(ap, &amp;ap_name);
+    if (error_code != WIFI_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to get AP name");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (strstr(ap_name, ap_name_part) != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool required = false;
+    if (strstr(ap_name, ap_name_part) != NULL) {
+        bool required = false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (wifi_manager_ap_is_passphrase_required(ap, &amp;required) == WIFI_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Passphrase required: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required ? &quot;True&quot; : &quot;False&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to get Passphrase required&quot;);
+        if (wifi_manager_ap_is_passphrase_required(ap, &amp;required) == WIFI_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "Passphrase required: %s",
+                       required ? "True" : "False");
+        else
+            dlog_print(DLOG_INFO, LOG_TAG, "Failed to get Passphrase required");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (required) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char passphrase[100];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Input passphrase for %s: &quot;, passphrase);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = scanf(&quot;99%s&quot;, passphrase);
+        if (required) {
+            char passphrase[100];
+            dlog_print(DLOG_INFO, LOG_TAG, "Input passphrase for %s: ", passphrase);
+            error_code = scanf("99%s", passphrase);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = wifi_manager_ap_set_passphrase(ap, passphrase);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to set passphrase&quot;);
+            error_code = wifi_manager_ap_set_passphrase(ap, passphrase);
+            if (error_code != WIFI_ERROR_NONE) {
+                dlog_print(DLOG_INFO, LOG_TAG, "Failed to set passphrase");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+                return false;
+            }
+        }
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = wifi_manager_connect(wifi, ap, __connected_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != WIFI_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed in connection request&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Success in connection request&quot;);
+        error_code = wifi_manager_connect(wifi, ap, __connected_cb, NULL);
+        if (error_code != WIFI_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "Failed in connection request");
+        else
+            dlog_print(DLOG_INFO, LOG_TAG, "Success in connection request");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(ap_name);
+        free(ap_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(ap_name);
+    free(ap_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li>
 
@@ -499,10 +499,10 @@ __found_connect_ap_cb(wifi_ap_h ap, void *user_data)
 static void
 __connected_cb(wifi_error_e result, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == WIFI_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Wi-Fi Connection Succeeded&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Wi-Fi Connection Failed!&quot;);
+    if (result == WIFI_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Wi-Fi Connection Succeeded");
+    else
+        dlog_print(DLOG_INFO, LOG_TAG, "Wi-Fi Connection Failed!");
 }
 </pre></li></ol>
 
diff --git a/org.tizen.guides/html/native/data/data_cover_n.htm b/org.tizen.guides/html/native/data/data_cover_n.htm
index 857fe85..2589291 100644 (file)
--- a/org.tizen.guides/html/native/data/data_cover_n.htm
+++ b/org.tizen.guides/html/native/data/data_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Data Storage and Management</title>  
+       <title>Data Storage and Management</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Data Storage and Management</h1>
@@ -45,7 +45,7 @@
 
 <p>You can access SQLite and OpenSSL open source modules. They enable you to store application data in a database, and encrypt it for protection.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/data/data_storages_n.htm b/org.tizen.guides/html/native/data/data_storages_n.htm
index 0f2eb61..04e695b 100644 (file)
--- a/org.tizen.guides/html/native/data/data_storages_n.htm
+++ b/org.tizen.guides/html/native/data/data_storages_n.htm
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,11 +29,11 @@
                </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-                       <li><a href="#prerequisites">Prerequisites</a></li>             
+                       <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#memory">Retrieving Memory Sizes</a></li>
                        <li><a href="#storage">Retrieving Storage Information</a></li>
                        <li><a href="#state">Monitoring Storage State Changes</a></li>
-                       <li><a href="#space">Retrieving Storage Space Information</a></li>              
+                       <li><a href="#space">Retrieving Storage Space Information</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -46,7 +46,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Data Storages</h1>
 
-  <p>Tizen enables you to get storage information and manage directories.</p> 
+  <p>Tizen enables you to get storage information and manage directories.</p>
   <p>The Storage API provides access to accessible parts of the file system, which are represented as virtual root locations. The virtual roots form a collection of locations that function as a single virtual device file system. The following table lists the supported virtual roots.</p>
 <p align="center" class="Table"><strong>Table: Filesystem virtual roots</strong></p>
   <table border="1" style="width: 100%">
@@ -147,15 +147,15 @@ error = storage_get_external_memory_size(&amp;s);
 static int internal_storage_id;
 static bool
 storage_cb(int storage_id, storage_type_e type, storage_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *path, void *user_data)
+           const char *path, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+    if (type == STORAGE_TYPE_INTERNAL) {
+        internal_storage_id = storage_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 int error;
@@ -220,9 +220,9 @@ error = storage_get_state(internal_storage_id, &amp;state);
 static void
 storage_changed_cb(int storage_id, storage_state_e state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (storage_id != internal_storage_id)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;state changed to %d&quot;, state);
+    if (storage_id != internal_storage_id)
+        return;
+    dlog_print(DLOG_DEBUG, LOG_TAG, "state changed to %d", state);
 }
 </pre>
 </li>
@@ -243,7 +243,7 @@ error = storage_unset_state_changed_cb(internal_storage_id, storage_changed_cb);
 
 <h2 id="space" name="space">Retrieving Storage Space Information</h2>
 
-<p>To get the available and total space size of the storage, use the  <code>storage_get_total_space()</code> and <code>storage_get_available_space()</code> functions. They return the storage size, excluding the minimum memory size to launch the low memory pop-up in case of a low memory situation. Consequently, the available size must be less than the original available size, and you must use these functions to get the memory size. For the same reason, you cannot use the <code>statvfs</code> function directly in Tizen. Instead, use <code>storage_get_internal_memory_size()</code> and <code>storage_get_external_memory_size()</code>. The Statvfs structure has a different structure size defined by &quot;__USE_FILE_OFFSET64&quot;. However, you can ignore this, since the Storage API uses a proper function automatically.</p>
+<p>To get the available and total space size of the storage, use the  <code>storage_get_total_space()</code> and <code>storage_get_available_space()</code> functions. They return the storage size, excluding the minimum memory size to launch the low memory pop-up in case of a low memory situation. Consequently, the available size must be less than the original available size, and you must use these functions to get the memory size. For the same reason, you cannot use the <code>statvfs</code> function directly in Tizen. Instead, use <code>storage_get_internal_memory_size()</code> and <code>storage_get_external_memory_size()</code>. The Statvfs structure has a different structure size defined by "__USE_FILE_OFFSET64". However, you can ignore this, since the Storage API uses a proper function automatically.</p>
 
 <p>To retrieve storage space information:</p>
 <ul>
diff --git a/org.tizen.guides/html/native/data/sql_n.htm b/org.tizen.guides/html/native/data/sql_n.htm
index 5f8e9ac..dbbcb23 100644 (file)
--- a/org.tizen.guides/html/native/data/sql_n.htm
+++ b/org.tizen.guides/html/native/data/sql_n.htm
@@ -42,7 +42,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>SQL Database Engine, Sqlite</h1>
 
-  
+
 <p>You can use the open source modules, whose functions provide access to SQLite and OpenSSL and demonstrate how to encrypt and store application data. The open source modules supported by Tizen are listed in the <a href="../../../../org.tizen.training/html/native/details/tizen_apis_n.htm">API modules</a>.</p>
 
 <p>The main features of the Sqlite API include:</p>
@@ -57,12 +57,12 @@
 <h2 id="prepare">Preparing the Database</h2>
 
 <p>This guide only covers the basics of encryption and database usage. For more information, see <a href="http://www.openssl.org" target="_blank">OpenSSL</a> and <a href="http://www.sqlite.org" target="_blank">SQLite</a> Web pages.</p>
-  
+
     <div class="note">
         <strong>Note</strong>
         While operating with real data, make sure that you fulfill all security requirements. This guide demonstrates how to use the library APIs on Tizen, but does not show how to perform fully secure encryption.
     </div>
-       
+
 <p>To prepare the database:</p>
 
 <ol><li>Define the needed variables:
@@ -71,7 +71,7 @@
 const int key_len = 256; /* AES key length */
 
 /* Password to generate key */
-static const unsigned char password[] = {&quot;DummyPassword&quot;};
+static const unsigned char password[] = {"DummyPassword"};
 
 sqlite3 *db; /* Database handle */
 
@@ -103,8 +103,8 @@ char *document_path;
 */
 int internal_storage_id = 0;
 storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_DOCUMENTS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;document_path);
-snprintf(file_path, size, &quot;%s/test.db&quot;, document_path);
+                      &amp;document_path);
+snprintf(file_path, size, "%s/test.db", document_path);
 free(document_path);
 
 sqlite3_open(file_path, &amp;db);
@@ -122,20 +122,20 @@ CreateTable();
 static int
 CreateTable()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *ErrMsg;
-&nbsp;&nbsp;&nbsp;&nbsp;char *sql =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CREATE TABLE IF NOT EXISTS EncryptedData(&quot;  \
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DATA TEXT NOT NULL,&quot; \
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ENCRYPTED INT NOT NULL,&quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SALT TEXT NOT NULL,&quot; \
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;IV TEXT NOT NULL,&quot; \
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;PART INTEGER,&quot; \
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;KEY INTEGER PRIMARY KEY);&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;sqlite3_exec(db, sql, callback, 0, &amp;ErrMsg);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    int ret;
+    char *ErrMsg;
+    char *sql =
+        "CREATE TABLE IF NOT EXISTS EncryptedData("  \
+                                                  "DATA TEXT NOT NULL," \
+                                                  "ENCRYPTED INT NOT NULL,"\
+                                                  "SALT TEXT NOT NULL," \
+                                                  "IV TEXT NOT NULL," \
+                                                  "PART INTEGER," \
+                                                  "KEY INTEGER PRIMARY KEY);";
+
+    sqlite3_exec(db, sql, callback, 0, &amp;ErrMsg);
+
+    return 0;
 }
 </pre>
 </li>
@@ -162,14 +162,14 @@ PrepareToSQL(iv);
 void
 PrepareToSQL(unsigned char* msg)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int i = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;while (msg[i] != 0x00) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (msg[i] == &#39;\&#39;&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg[i] = &#39;a&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (msg[i] == &#39;\&quot;&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg[i] = &#39;b&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++i;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int i = 0;
+    while (msg[i] != 0x00) {
+        if (msg[i] == '\'')
+            msg[i] = 'a';
+        if (msg[i] == '\"')
+            msg[i] = 'b';
+        ++i;
+    }
 }
 </pre></li>
 <li>
@@ -188,7 +188,7 @@ PrepareToSQL(unsigned char* msg)
 <p>The <code>time.h</code> is obtained to create an example message to encrypt and store.</p></li></ol>
 
  <h2 id="store" name="store">Storing Encrypted Data</h2>
- 
+
 <p>This use case shows how to:</p>
 <ol>
 <li>Encrypt a message with OpenSSL, prepare it, and store it in the SQLite database with the Base64 encoding.</li>
@@ -200,7 +200,7 @@ PrepareToSQL(unsigned char* msg)
 <ol>
 <li>Store a short message.
 <pre class="prettyprint">
-char *ShortMsg = &quot;Short Msg.&quot;;
+char *ShortMsg = "Short Msg.";
 EncryptMsg(ShortMsg, decrypted_out, password, salt, iv);
 InsertRecord(decrypted_out, 1, 0, strlen(ShortMsg));
 </pre>
@@ -208,52 +208,52 @@ InsertRecord(decrypted_out, 1, 0, strlen(ShortMsg));
 <ol type="a">
 <li>Encrypt plain text with the <code>EncryptMsg()</code> function:
 <ol type="a">
-<li>Generate a string for key generation from a password and salt using <code>PKCS5_PBKDF2_HMAC_SHA1()</code>. 
+<li>Generate a string for key generation from a password and salt using <code>PKCS5_PBKDF2_HMAC_SHA1()</code>.
 <p>An initial vector can be used in different hash functions. In this example, only the first byte of the initial vector is used as an iteration variable for a hash algorithm.</p></li>
-<li>Generate the encryption key using the <code>AES_set_encrypt_key()</code> function. 
+<li>Generate the encryption key using the <code>AES_set_encrypt_key()</code> function.
 <p>The second parameter defines the AES key length. Check the actual recommended length and encoding type before use. This example uses AES 256 (defined in <a href="#prepare">Preparing the Database</a>).</p></li>
 <li>Encrypt the data with the <code>AES_encrypt()</code> function.</li>
-<li>Encode Base64 with the <code>base64_encode()</code> function. 
+<li>Encode Base64 with the <code>base64_encode()</code> function.
 <p>The data is encoded to make it safe to insert it to the database. Base 64 does not contain any special characters. For the encoding and decoding function details, see <a href="#base64">Base64 functions</a>.</p></li>
 <li>Add a delimiting 0x00 character at the end of the byte array.</li>
 </ol>
 <pre class="prettyprint">
 static int
 EncryptMsg(char* in, unsigned char* out, const unsigned char* password,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *localsalt, unsigned char *vector)
+           unsigned char *localsalt, unsigned char *vector)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;AES_KEY encryption_key;
-&nbsp;&nbsp;&nbsp;&nbsp;int iter = (int)vector[0];
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char key[key_len + 1];
-&nbsp;&nbsp;&nbsp;&nbsp;char *msgbuff;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char buf[BUFLEN];
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int retlen;
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
+    AES_KEY encryption_key;
+    int iter = (int)vector[0];
+    unsigned char key[key_len + 1];
+    char *msgbuff;
+    unsigned char buf[BUFLEN];
+    unsigned int retlen;
+    int x;
 
-&nbsp;&nbsp;&nbsp;&nbsp;memset(buf, 0x00, BUFLEN);
+    memset(buf, 0x00, BUFLEN);
 
-&nbsp;&nbsp;&nbsp;&nbsp;PKCS5_PBKDF2_HMAC_SHA1((char *)password,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(password)/sizeof(unsigned char),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localsalt,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(localsalt)/sizeof(unsigned char),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key_len,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key);
+    PKCS5_PBKDF2_HMAC_SHA1((char *)password,
+                           sizeof(password)/sizeof(unsigned char),
+                           localsalt,
+                           sizeof(localsalt)/sizeof(unsigned char),
+                           iter,
+                           key_len,
+                           key);
 
-&nbsp;&nbsp;&nbsp;&nbsp;AES_set_encrypt_key(key, key_len, &amp;encryption_key);
-&nbsp;&nbsp;&nbsp;&nbsp;AES_encrypt((unsigned char *)in, (unsigned char *)buf, &amp;encryption_key);
+    AES_set_encrypt_key(key, key_len, &amp;encryption_key);
+    AES_encrypt((unsigned char *)in, (unsigned char *)buf, &amp;encryption_key);
 
-&nbsp;&nbsp;&nbsp;&nbsp;msgbuff = base64_encode(buf, 16, &amp;retlen);
+    msgbuff = base64_encode(buf, 16, &amp;retlen);
 
-&nbsp;&nbsp;&nbsp;&nbsp;memcpy(buf, msgbuff, retlen);
-&nbsp;&nbsp;&nbsp;&nbsp;buf[retlen + 1] = 0x00;
-&nbsp;&nbsp;&nbsp;&nbsp;free(msgbuff);
+    memcpy(buf, msgbuff, retlen);
+    buf[retlen + 1] = 0x00;
+    free(msgbuff);
 
-&nbsp;&nbsp;&nbsp;&nbsp;memcpy(out, buf, retlen + 1);
+    memcpy(out, buf, retlen + 1);
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; buf[x] != 0x00; x++);
+    for (x = 0; buf[x] != 0x00; x++);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return x;
+    return x;
 }
 </pre>
 </li>
@@ -263,21 +263,21 @@ EncryptMsg(char* in, unsigned char* out, const unsigned char* password,
 <pre class="prettyprint">
 static int
 InsertRecord(unsigned char *msg, int encrypted,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int part, int len)
+             int part, int len)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char sqlbuff[BUFLEN];
-&nbsp;&nbsp;&nbsp;&nbsp;char *ErrMsg;
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(sqlbuff, BUFLEN, &quot;INSERT INTO EncryptedData
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VALUES(\&#39;%s\&#39;, %d, \&#39;%s\&#39;, \&#39;%s\&#39;, %d, NULL);&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg, encrypted, salt, iv, part);
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = sqlite3_exec(db, sqlbuff, callback, 0, &amp;ErrMsg);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Error: %s\n&quot;, ErrMsg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlite3_free(ErrMsg);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    char sqlbuff[BUFLEN];
+    char *ErrMsg;
+    snprintf(sqlbuff, BUFLEN, "INSERT INTO EncryptedData
+             VALUES(\'%s\', %d, \'%s\', \'%s\', %d, NULL);",
+             msg, encrypted, salt, iv, part);
+
+    ret = sqlite3_exec(db, sqlbuff, callback, 0, &amp;ErrMsg);
+    if (ret) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Error: %s\n", ErrMsg);
+        sqlite3_free(ErrMsg);
+    }
+
+    return 0;
 }
 </pre>
 </li>
@@ -290,41 +290,41 @@ ret = InsertMessage((unsigned char *)text);
 static int
 InsertMessage(unsigned char* text)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char encrypted_out[BUFLEN];
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;int len;
-&nbsp;&nbsp;&nbsp;&nbsp;int retlen;
-&nbsp;&nbsp;&nbsp;&nbsp;int parts = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int pos;
-&nbsp;&nbsp;&nbsp;&nbsp;char membuf[17];
+    unsigned char encrypted_out[BUFLEN];
+    int ret = 0;
+    int x;
+    int len;
+    int retlen;
+    int parts = 0;
+    int pos;
+    char membuf[17];
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (len = 0; text[len] != 0x00; len++);
+    for (len = 0; text[len] != 0x00; len++);
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (pos = 0; (len - pos) &gt; 16; pos += 16) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memcpy(membuf, &amp;text[pos], 16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;membuf[16] = 0x00;
+    for (pos = 0; (len - pos) &gt; 16; pos += 16) {
+        memcpy(membuf, &amp;text[pos], 16);
+        membuf[16] = 0x00;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EncryptMsg((char *)membuf, encrypted_out, password, salt, iv);
+        EncryptMsg((char *)membuf, encrypted_out, password, salt, iv);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; encrypted_out[x] != 0x00; x++);
+        for (x = 0; encrypted_out[x] != 0x00; x++);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;InsertRecord(encrypted_out, 1, parts, x);
+        InsertRecord(encrypted_out, 1, parts, x);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts++;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        parts++;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (len - pos &gt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;retlen = EncryptMsg((char *)&amp;text[pos],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encrypted_out, password, salt, iv);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;InsertRecord(encrypted_out, 1, parts, retlen);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (len - pos &gt; 0) {
+        retlen = EncryptMsg((char *)&amp;text[pos],
+                            encrypted_out, password, salt, iv);
+        InsertRecord(encrypted_out, 1, parts, retlen);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
        </li>
-       
+
        <li>List the database content.
        <p>After the previous step, the database contains AES-encrypted content, stored in a Base64 notation. For example:</p>
 <pre class="prettyprint">
@@ -333,9 +333,9 @@ InsertMessage(unsigned char* text)
 </pre>
 <p>To list the records in the database, use the <code>ShowRecords()</code> function:</p>
 <ul>
-<li>To list all records, use the <code>SELECT * FROM EncryptedData</code> query. 
+<li>To list all records, use the <code>SELECT * FROM EncryptedData</code> query.
 <p>The callback function is invoked for each record returned by SQLite. To pass user data to the callback, use the fourth parameter of the <code>sqlite3_exec()</code> function.</p></li>
-<li>The callback simply prints the obtained record. 
+<li>The callback simply prints the obtained record.
 <p>The record is passed in the form of a few arrays of strings: the <code>argv</code> array contains the column content and <code>azColName</code> the column name. The <code>argc</code> parameter is the number of columns.</p>
 <p>The first parameter, <code>counter</code>, is the user data, which in this example is used to indicate the record number in a row (not a SQL primary key) while listing.</p>
 <p>If the content of any column is empty, the <code>NULL</code> string is printed.</p>
@@ -345,33 +345,33 @@ InsertMessage(unsigned char* text)
 static void
 ShowRecords()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *sql = &quot;select * from EncryptedData&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;int counter = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *ErrMsg;
+    char *sql = "select * from EncryptedData";
+    int counter = 0;
+    int ret = 0;
+    char *ErrMsg;
 
-&nbsp;&nbsp;&nbsp;&nbsp;sqlite3_exec(db, sql, callback, &amp;counter, &amp;ErrMsg);
+    sqlite3_exec(db, sql, callback, &amp;counter, &amp;ErrMsg);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 static int
 callback(void *counter, int argc, char **argv, char **azColName)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int *localcounter = (int *)counter;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
+    int *localcounter = (int *)counter;
+    int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;-%d: &quot;, *localcounter);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "-%d: ", *localcounter);
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; argc; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;%s = %s | &quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;azColName[i], argv[i] ? argv[i] : &quot;NULL&quot;);
+    for (i = 0; i &lt; argc; i++)
+        dlog_print(DLOG_DEBUG, LOG_TAG,
+                   "%s = %s | ",
+                   azColName[i], argv[i] ? argv[i] : "NULL");
 
-&nbsp;&nbsp;&nbsp;&nbsp;(*localcounter)++;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;\n&quot;);
+    (*localcounter)++;
+    dlog_print(DLOG_DEBUG, LOG_TAG, "\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
@@ -379,9 +379,9 @@ callback(void *counter, int argc, char **argv, char **azColName)
 <li>Decrypt the database records.
 <p>Use the <code>DecryptRecords()</code> function to select all encrypted records from the database, and decrypt and list them:</p>
 <ul>
-<li>Use the <code>SELECT * FROM EncryptedData</code> query where <code>ENCRYPTED=&#39;1&#39;</code> query to retrieve all encrypted records.</li> 
+<li>Use the <code>SELECT * FROM EncryptedData</code> query where <code>ENCRYPTED='1'</code> query to retrieve all encrypted records.</li>
 <li>The <code>callbackdecrypt()</code> callback is invoked for each found record. In case of an error, the SQLite API requires you to release the error message memory with the <code>sqlite3_free()</code> function.</li>
-<li>The callback is similar to the earlier callback used to list the database content. 
+<li>The callback is similar to the earlier callback used to list the database content.
 <p>There is an action added for the <code>argv[ i ] &amp;&amp; i == 0</code> case, which includes the encrypted content in columns that are not empty and are DATA.</p>
 <p>To decrypt the message, decode the data from Base 64, add a delimiting character, perform the actual decryption with the <code>DecryptMsg()</code> function, and list the decrypted data.</p></li>
 </ul>
@@ -389,85 +389,85 @@ callback(void *counter, int argc, char **argv, char **azColName)
 static void
 DecryptRecords()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *sql = &quot;select * from EncryptedData where ENCRYPTED=&#39;1&#39;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;int counter = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *ErrMsg;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = sqlite3_exec(db, sql, callbackdecrypt, &amp;counter, &amp;ErrMsg);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Error: %s\n&quot;, ErrMsg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlite3_free(ErrMsg);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    char *sql = "select * from EncryptedData where ENCRYPTED='1'";
+    int counter = 0;
+    int ret = 0;
+    char *ErrMsg;
+
+    ret = sqlite3_exec(db, sql, callbackdecrypt, &amp;counter, &amp;ErrMsg);
+    if (ret) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Error: %s\n", ErrMsg);
+        sqlite3_free(ErrMsg);
+    }
 }
 
 static int
 callbackdecrypt(void *counter, int argc, char **argv, char **azColName)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char decrypted_out[BUFLEN];
-&nbsp;&nbsp;&nbsp;&nbsp;int *localcounter = (int *)counter;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int olen;
+    unsigned char decrypted_out[BUFLEN];
+    int *localcounter = (int *)counter;
+    int i;
+    unsigned int olen;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;-%d: &quot;, *localcounter);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "-%d: ", *localcounter);
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; argc; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (argv[i] &amp;&amp; i == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *basebuffer = base64_decode(argv[i], strlen(argv[i]), &amp;olen);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *decryptbuffer = malloc(sizeof(char)* olen + 1);
+    for (i = 0; i &lt; argc; i++) {
+        if (argv[i] &amp;&amp; i == 0) {
+            unsigned char *basebuffer = base64_decode(argv[i], strlen(argv[i]), &amp;olen);
+            unsigned char *decryptbuffer = malloc(sizeof(char)* olen + 1);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memset(decryptbuffer, 0x00, olen + 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memcpy(decryptbuffer, basebuffer, olen);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;decryptbuffer[olen] = 0x00;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(basebuffer);
+            memset(decryptbuffer, 0x00, olen + 1);
+            memcpy(decryptbuffer, basebuffer, olen);
+            decryptbuffer[olen] = 0x00;
+            free(basebuffer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DecryptMsg((unsigned char *)decryptbuffer, decrypted_out,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;password, (unsigned char *)argv[2], (unsigned char *)argv[3]);
+            DecryptMsg((unsigned char *)decryptbuffer, decrypted_out,
+                       password, (unsigned char *)argv[2], (unsigned char *)argv[3]);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(decryptbuffer);
+            free(decryptbuffer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s = %s | &quot;, azColName[i],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(char*)decrypted_out);
+            dlog_print(DLOG_DEBUG, LOG_TAG, "%s = %s | ", azColName[i],
+                       (char*)decrypted_out);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%s = %s | &quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;azColName[i], argv[i] ? argv[i] : &quot;NULL&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        } else {
+            dlog_print(DLOG_DEBUG, LOG_TAG, "%s = %s | ",
+                       azColName[i], argv[i] ? argv[i] : "NULL");
+        }
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;(*localcounter)++;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;\n&quot;);
+    (*localcounter)++;
+    dlog_print(DLOG_DEBUG, LOG_TAG, "\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 <p>The actual decryption routine is similar to encryption:</p>
 <pre class="prettyprint">
 static int
 DecryptMsg(unsigned char* in, unsigned char* out, const unsigned char* password,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned char* localsalt, unsigned char* vector)
+           unsigned char* localsalt, unsigned char* vector)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;AES_KEY decryption_key;
-&nbsp;&nbsp;&nbsp;&nbsp;int iter = (int)vector[0];
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char key[key_len + 1];
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
+    AES_KEY decryption_key;
+    int iter = (int)vector[0];
+    unsigned char key[key_len + 1];
+    int x;
 
-&nbsp;&nbsp;&nbsp;&nbsp;memset(out, 0x00, BUFLEN);
+    memset(out, 0x00, BUFLEN);
 
-&nbsp;&nbsp;&nbsp;&nbsp;PKCS5_PBKDF2_HMAC_SHA1((char *)password,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(password)/sizeof(unsigned char),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localsalt,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(localsalt)/sizeof(unsigned char),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key_len,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key);
+    PKCS5_PBKDF2_HMAC_SHA1((char *)password,
+                           sizeof(password)/sizeof(unsigned char),
+                           localsalt,
+                           sizeof(localsalt)/sizeof(unsigned char),
+                           iter,
+                           key_len,
+                           key);
 
-&nbsp;&nbsp;&nbsp;&nbsp;AES_set_decrypt_key(key, key_len, &amp;decryption_key);
-&nbsp;&nbsp;&nbsp;&nbsp;AES_decrypt((unsigned char *)in, out, &amp;decryption_key);
+    AES_set_decrypt_key(key, key_len, &amp;decryption_key);
+    AES_decrypt((unsigned char *)in, out, &amp;decryption_key);
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; out[x] != 0x00; x++);
+    for (x = 0; out[x] != 0x00; x++);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return x;
+    return x;
 }
 </pre>
 </li>
@@ -485,102 +485,102 @@ sqlite3_shutdown();
 <li>Base64 functions:
 <pre class="prettyprint">
 static char
-encoding_table[] = {&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;E&#39;, &#39;F&#39;, &#39;G&#39;, &#39;H&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;I&#39;, &#39;J&#39;, &#39;K&#39;, &#39;L&#39;, &#39;M&#39;, &#39;N&#39;, &#39;O&#39;, &#39;P&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Q&#39;, &#39;R&#39;, &#39;S&#39;, &#39;T&#39;, &#39;U&#39;, &#39;V&#39;, &#39;W&#39;, &#39;X&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Y&#39;, &#39;Z&#39;, &#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39;, &#39;f&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;g&#39;, &#39;h&#39;, &#39;i&#39;, &#39;j&#39;, &#39;k&#39;, &#39;l&#39;, &#39;m&#39;, &#39;n&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;o&#39;, &#39;p&#39;, &#39;q&#39;, &#39;r&#39;, &#39;s&#39;, &#39;t&#39;, &#39;u&#39;, &#39;v&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;w&#39;, &#39;x&#39;, &#39;y&#39;, &#39;z&#39;, &#39;0&#39;, &#39;1&#39;, &#39;2&#39;, &#39;3&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;4&#39;, &#39;5&#39;, &#39;6&#39;, &#39;7&#39;, &#39;8&#39;, &#39;9&#39;, &#39;+&#39;, &#39;/&#39;};
+encoding_table[] = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
+                    'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
+                    'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
+                    'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
+                    'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
+                    'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
+                    'w', 'x', 'y', 'z', '0', '1', '2', '3',
+                    '4', '5', '6', '7', '8', '9', '+', '/'};
 static char *decoding_table = NULL;
 static int mod_table[] = {0, 2, 1};
 
 void
 build_decoding_table()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;decoding_table = malloc(256);
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 64; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;decoding_table[(unsigned char)encoding_table[i]] = i;
+    decoding_table = malloc(256);
+    int i;
+    for (i = 0; i &lt; 64; i++)
+        decoding_table[(unsigned char)encoding_table[i]] = i;
 }
 
 char
 *base64_encode(const unsigned char *data, size_t input_length, size_t *output_length)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;*output_length = 4 * ((input_length + 2) / 3);
-
-&nbsp;&nbsp;&nbsp;&nbsp;char *encoded_data = malloc(*output_length);
-&nbsp;&nbsp;&nbsp;&nbsp;if (encoded_data == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;int j;
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0, j = 0; i &lt; input_length;) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t octet_a = i &lt; input_length ? (unsigned char)data[i++] : 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t octet_b = i &lt; input_length ? (unsigned char)data[i++] : 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t octet_c = i &lt; input_length ? (unsigned char)data[i++] : 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t triple = (octet_a &lt;&lt; 0x10) + (octet_b &lt;&lt; 0x08) + octet_c;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encoded_data[j++] = encoding_table[(triple &gt;&gt; 3 * 6) &amp; 0x3F];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encoded_data[j++] = encoding_table[(triple &gt;&gt; 2 * 6) &amp; 0x3F];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encoded_data[j++] = encoding_table[(triple &gt;&gt; 1 * 6) &amp; 0x3F];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encoded_data[j++] = encoding_table[(triple &gt;&gt; 0 * 6) &amp; 0x3F];
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; mod_table[input_length % 3]; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;encoded_data[*output_length - 1 - i] = &#39;=&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;return encoded_data;
+    *output_length = 4 * ((input_length + 2) / 3);
+
+    char *encoded_data = malloc(*output_length);
+    if (encoded_data == NULL)
+        return NULL;
+
+    int i;
+    int j;
+    for (i = 0, j = 0; i &lt; input_length;) {
+        uint32_t octet_a = i &lt; input_length ? (unsigned char)data[i++] : 0;
+        uint32_t octet_b = i &lt; input_length ? (unsigned char)data[i++] : 0;
+        uint32_t octet_c = i &lt; input_length ? (unsigned char)data[i++] : 0;
+        uint32_t triple = (octet_a &lt;&lt; 0x10) + (octet_b &lt;&lt; 0x08) + octet_c;
+
+        encoded_data[j++] = encoding_table[(triple &gt;&gt; 3 * 6) &amp; 0x3F];
+        encoded_data[j++] = encoding_table[(triple &gt;&gt; 2 * 6) &amp; 0x3F];
+        encoded_data[j++] = encoding_table[(triple &gt;&gt; 1 * 6) &amp; 0x3F];
+        encoded_data[j++] = encoding_table[(triple &gt;&gt; 0 * 6) &amp; 0x3F];
+    }
+
+    for (i = 0; i &lt; mod_table[input_length % 3]; i++)
+        encoded_data[*output_length - 1 - i] = '=';
+
+    return encoded_data;
 }
 
 unsigned char
 *base64_decode(const char *data, size_t input_length, size_t *output_length)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (decoding_table == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;build_decoding_table();
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (input_length % 4 != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;*output_length = input_length / 4 * 3;
-&nbsp;&nbsp;&nbsp;&nbsp;if (data[input_length - 1] == &#39;=&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(*output_length)--;
-&nbsp;&nbsp;&nbsp;&nbsp;if (data[input_length - 2] == &#39;=&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(*output_length)--;
-
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *decoded_data = malloc(*output_length);
-&nbsp;&nbsp;&nbsp;&nbsp;if (decoded_data == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;int j;
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0, j = 0; i &lt; input_length;) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t sextet_a = data[i] == &#39;=&#39; ? 0 &amp; i++ : decoding_table[(int)data[i++]];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t sextet_b = data[i] == &#39;=&#39; ? 0 &amp; i++ : decoding_table[(int)data[i++]];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t sextet_c = data[i] == &#39;=&#39; ? 0 &amp; i++ : decoding_table[(int)data[i++]];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t sextet_d = data[i] == &#39;=&#39; ? 0 &amp; i++ : decoding_table[(int)data[i++]];
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint32_t triple = (sextet_a &lt;&lt; 3 * 6) + (sextet_b &lt;&lt; 2 * 6)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (sextet_c &lt;&lt; 1 * 6) + (sextet_d &lt;&lt; 0 * 6);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (j &lt; *output_length)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;decoded_data[j++] = (triple &gt;&gt; 2 * 8) &amp; 0xFF;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (j &lt; *output_length)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;decoded_data[j++] = (triple &gt;&gt; 1 * 8) &amp; 0xFF;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (j &lt; *output_length)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;decoded_data[j++] = (triple &gt;&gt; 0 * 8) &amp; 0xFF;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return decoded_data;
+    if (decoding_table == NULL)
+        build_decoding_table();
+
+    if (input_length % 4 != 0)
+        return NULL;
+
+    *output_length = input_length / 4 * 3;
+    if (data[input_length - 1] == '=')
+        (*output_length)--;
+    if (data[input_length - 2] == '=')
+        (*output_length)--;
+
+    unsigned char *decoded_data = malloc(*output_length);
+    if (decoded_data == NULL)
+        return NULL;
+
+    int i;
+    int j;
+
+    for (i = 0, j = 0; i &lt; input_length;) {
+        uint32_t sextet_a = data[i] == '=' ? 0 &amp; i++ : decoding_table[(int)data[i++]];
+        uint32_t sextet_b = data[i] == '=' ? 0 &amp; i++ : decoding_table[(int)data[i++]];
+        uint32_t sextet_c = data[i] == '=' ? 0 &amp; i++ : decoding_table[(int)data[i++]];
+        uint32_t sextet_d = data[i] == '=' ? 0 &amp; i++ : decoding_table[(int)data[i++]];
+
+        uint32_t triple = (sextet_a &lt;&lt; 3 * 6) + (sextet_b &lt;&lt; 2 * 6)
+                          + (sextet_c &lt;&lt; 1 * 6) + (sextet_d &lt;&lt; 0 * 6);
+
+        if (j &lt; *output_length)
+            decoded_data[j++] = (triple &gt;&gt; 2 * 8) &amp; 0xFF;
+        if (j &lt; *output_length)
+            decoded_data[j++] = (triple &gt;&gt; 1 * 8) &amp; 0xFF;
+        if (j &lt; *output_length)
+            decoded_data[j++] = (triple &gt;&gt; 0 * 8) &amp; 0xFF;
+    }
+
+    return decoded_data;
 }
 
 void
 base64_cleanup()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;free(decoding_table);
-&nbsp;&nbsp;&nbsp;&nbsp;decoding_table = NULL;
+    free(decoding_table);
+    decoding_table = NULL;
 }
 </pre>
 </li>
@@ -590,48 +590,48 @@ base64_cleanup()
 int
 OpenSQL_AES_example_1(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char decrypted_out[BUFLEN];
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *hellomsg = {&quot;Hello Tizen! SQLite OpenSSL&quot;};
-&nbsp;&nbsp;&nbsp;&nbsp;char text[BUFLEN];
-&nbsp;&nbsp;&nbsp;&nbsp;time_t rawtime;
-&nbsp;&nbsp;&nbsp;&nbsp;struct tm *timeinfo;
+    unsigned char decrypted_out[BUFLEN];
+    int ret;
+    char *hellomsg = {"Hello Tizen! SQLite OpenSSL"};
+    char text[BUFLEN];
+    time_t rawtime;
+    struct tm *timeinfo;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (init_err) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Initial error\n&quot;);
+    if (init_err) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Initial error\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return 1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;time(&amp;rawtime);
-&nbsp;&nbsp;&nbsp;&nbsp;timeinfo = localtime(&amp;rawtime);
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(text, &quot;%s %s&quot;, hellomsg, asctime(timeinfo));
+    time(&amp;rawtime);
+    timeinfo = localtime(&amp;rawtime);
+    sprintf(text, "%s %s", hellomsg, asctime(timeinfo));
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Insert long message */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = InsertMessage((unsigned char *)text);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Insert ENCRYPTED MessageError\n&quot;);
+    /* Insert long message */
+    ret = InsertMessage((unsigned char *)text);
+    if (ret) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Insert ENCRYPTED MessageError\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return 1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Insert message up to 16 characters */
-&nbsp;&nbsp;&nbsp;&nbsp;char *ShortMsg = &quot;Short Msg.&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;EncryptMsg(ShortMsg, decrypted_out, password, salt, iv);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = InsertRecord(decrypted_out, 1, 0, strlen(ShortMsg));
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Insert ENCRYPTED MessageError\n&quot;);
+    /* Insert message up to 16 characters */
+    char *ShortMsg = "Short Msg.";
+    EncryptMsg(ShortMsg, decrypted_out, password, salt, iv);
+    ret = InsertRecord(decrypted_out, 1, 0, strlen(ShortMsg));
+    if (ret) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Insert ENCRYPTED MessageError\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return 1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show raw database */
-&nbsp;&nbsp;&nbsp;&nbsp;ShowRecords();
+    /* Show raw database */
+    ShowRecords();
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show decrypted database */
-&nbsp;&nbsp;&nbsp;&nbsp;DecryptRecords();
+    /* Show decrypted database */
+    DecryptRecords();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/device/attached_devices_n.htm b/org.tizen.guides/html/native/device/attached_devices_n.htm
index aefcbeb..06e5227 100644 (file)
--- a/org.tizen.guides/html/native/device/attached_devices_n.htm
+++ b/org.tizen.guides/html/native/device/attached_devices_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Attached Devices</title>  
+       <title>Attached Devices</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -47,13 +47,13 @@
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Attached Devices</h1>
 
    <p>The attached device features provide functions to control attached devices and monitor device changes.</p>
-   
+
    <p>The main features of the Device API include:</p>
    <ul><li>Battery information
    <p>You can <a href="#battery">get battery details</a>, such as the current percentage, the charging state, and the current level state, using the Battery API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">wearable</a> applications).</p></li>
@@ -83,12 +83,12 @@
 <p>To use the Device API submodules (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To use the Display API--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/display&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To use the Haptic API--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/haptic&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To use the Led API--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/led&lt;/privilege&gt;
+   &lt;!--To use the Display API--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/display&lt;/privilege&gt;
+   &lt;!--To use the Haptic API--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/haptic&lt;/privilege&gt;
+   &lt;!--To use the Led API--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/led&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -103,7 +103,7 @@
 <li>For the Power API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">wearable</a> applications), include <code>&lt;device/power.h&gt;</code>.</li>
 <li>For the Callback API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html">wearable</a> applications), include <code>&lt;device/callback.h&gt;</code>.</li>
 </ul>
-       
+
 <pre class="prettyprint">
 /* To retrieve battery information */
 #include &lt;device/battery.h&gt;
@@ -122,10 +122,10 @@
 </pre>
 </li>
 </ol>
-       
+
 <h2 id="battery" name="battery">Retrieving Battery Information</h2>
 
-               <p>To retrieve battery information:</p>                 
+               <p>To retrieve battery information:</p>
                        <ul>
                                <li>Get the battery percentage with the <code>device_battery_get_percent()</code> function.
                                <p>The function returns the current battery percentage as an integer value from 0 to 100 that indicates the remaining battery charge as a percentage of the maximum level.</p>
@@ -166,7 +166,7 @@ int num;
 error = device_display_get_numbers(&amp;num);
 </pre>
                </li>
-               
+
                <li>Get the maximum brightness with the <code>device_display_get_max_brightness()</code> function.
                <p>The function returns the maximum brightness value that can be set.</p>
 
@@ -176,7 +176,7 @@ int max;
 error = device_display_get_max_brightness(0, &amp;max);
 </pre>
                </li>
-                       
+
                <li>Get and set the display brightness with the <code>device_display_get_brightness()</code> and <code>device_display_set_brightness()</code> functions:
 
 <pre class="prettyprint">
@@ -201,7 +201,7 @@ error = device_display_change_state(DISPLAY_STATE_NORMAL);
 
                </li>
                </ul>
-               
+
 <h2 id="haptic" name="haptic">Controlling Haptic Devices</h2>
 
 <p>To control haptic devices:</p>
@@ -344,11 +344,11 @@ error = device_power_release_lock(POWER_LOCK_CPU);
 static void
 changed_cb(device_callback_e type, void *value, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int val;
-&nbsp;&nbsp;&nbsp;&nbsp;if (type != DEVICE_CALLBACK_DISPLAY_STATE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;val = (int)value;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;current display state: %d&quot;, val);
+    int val;
+    if (type != DEVICE_CALLBACK_DISPLAY_STATE)
+        return;
+    val = (int)value;
+    dlog_print(DLOG_DEBUG, LOG_TAG, "current display state: %d", val);
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/device/device_cover_n.htm b/org.tizen.guides/html/native/device/device_cover_n.htm
index 767f3b2..1145540 100644 (file)
--- a/org.tizen.guides/html/native/device/device_cover_n.htm
+++ b/org.tizen.guides/html/native/device/device_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Device Settings and Systems</title>  
+       <title>Device Settings and Systems</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Device Settings and Systems</h1>
@@ -61,7 +61,7 @@
 
 <p>You can play a feedback pattern using sound or vibration. You can use specific patterns, or specific type and pattern. You can also check whether a specific pattern is supported.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/device/ext_output_n.htm b/org.tizen.guides/html/native/device/ext_output_n.htm
index ed7b55b..2f56f93 100644 (file)
--- a/org.tizen.guides/html/native/device/ext_output_n.htm
+++ b/org.tizen.guides/html/native/device/ext_output_n.htm
@@ -32,7 +32,7 @@
                  <li><a href="#presentation">Setting the Presentation Mode</a></li>
                  <li><a href="#setwin">Setting the External Window</a></li>
                  <li><a href="#getstatus">Getting the Status of the External Output Device</a></li>
-               </ul>           
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager API for Mobile Native</a></li>
@@ -43,7 +43,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
- 
+
 <h1>External Output Devices</h1>
 
 <p>The External Output Manager (EOM) is a module for controlling the external output devices.</p>
@@ -56,12 +56,12 @@
 
                        <p align="center"><strong>Figure: Mirror mode</strong></p>
                        <p align="center"><img alt="Mirror mode" src="../../images/eom_mirror_mode.png" /></p>
- 
+
                </li>
                <li>The presentation mode can be set by an application. If the application wants to display an image or video only in an external output device, the presentation mode must be used.
                        <p align="center"><strong>Figure: Presentation mode</strong></p>
                        <p align="center"><img alt="Presentation mode" src="../../images/eom_presentation_mode.png" /></p>
-    
+
                        <p>You must use the EOM attributes to set the presentation mode by defining the EOM priority. With these attributes, you can display a fullscreen window on the external output device.</p>
                        <p align="center" class="Table"><strong>Table: Presentation mode attributes</strong></p>
                                <table>
@@ -117,105 +117,105 @@
 </li>
 <li>Initialize the application with the <code>eom_init()</code> function.</li>
 </ol>
-       
+
       <h2 id="getid" name="getid">Getting the Output ID</h2>
-         
+
 <p>To retrieve the output ID, use the <code>eom_get_eom_output_ids()</code> function. You need the ID to get information about the output device and to control the external window.</p>
 <pre class="prettyprint">
 int
 sample_get_output_id(const char *output_name)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;eom_output_id *output_ids = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;eom_output_id output_id = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;eom_output_type_e output_type = EOM_OUTPUT_TYPE_UNKNOWN;
-&nbsp;&nbsp;&nbsp;&nbsp;int id_cnt = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;&nbsp;output_ids = eom_get_eom_output_ids(&amp;id_cnt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (id_cnt == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;no external outputs supported\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; id_cnt; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_get_output_type(output_ids[i], &amp;output_type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strncmp(output_name, &quot;HDMI&quot;, 4)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (output_type == EOM_OUTPUT_TYPE_HDMIA
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|| output_type == EOM_OUTPUT_TYPE_HDMIB) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output_id = output_ids[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (!strncmp(output_name, &quot;Virtual&quot;, 7)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (output_type == EOM_OUTPUT_TYPE_VIRTUAL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output_id = output_ids[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (output_ids)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(output_ids);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return output_id;
+    eom_output_id *output_ids = NULL;
+    eom_output_id output_id = 0;
+    eom_output_type_e output_type = EOM_OUTPUT_TYPE_UNKNOWN;
+    int id_cnt = 0;
+    int i;
+
+    output_ids = eom_get_eom_output_ids(&amp;id_cnt);
+    if (id_cnt == 0) {
+        printf("no external outputs supported\n");
+
+        return 0;
+    }
+
+    for (i = 0; i &lt; id_cnt; i++) {
+        eom_get_output_type(output_ids[i], &amp;output_type);
+        if (!strncmp(output_name, "HDMI", 4)) {
+            if (output_type == EOM_OUTPUT_TYPE_HDMIA
+                || output_type == EOM_OUTPUT_TYPE_HDMIB) {
+                output_id = output_ids[i];
+                break;
+            }
+        } else if (!strncmp(output_name, "Virtual", 7)) {
+            if (output_type == EOM_OUTPUT_TYPE_VIRTUAL) {
+                output_id = output_ids[i];
+                break;
+            }
+        }
+    }
+
+    if (output_ids)
+        free(output_ids);
+
+    return output_id;
 }
 </pre>
-   
-   
+
+
     <h2 id="presentation" name="presentation">Setting the Presentation Mode</h2>
-       
+
 <p>To connect to an external output device in the presentation mode, use the <code>eom_set_output_attribute()</code> function to set the presentation mode priority attribute.</p>
 <p>If the setting is successful, the External Output Manager module uses the presentation mode when the external output device connected.</p>
 <pre class="prettyprint">
 int
 set_attribute()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;m_output_id output_id = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    m_output_id output_id = 0;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;output_id = sample_get_output_id(&quot;HDMI&quot;);
+    output_id = sample_get_output_id("HDMI");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = eom_set_output_attribute(output_id, EOM_OUTPUT_ATTRIBUTE_NORMAL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EOM_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Attribute setting failed, the external output device cannot be used */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Deinitializing */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_deinit();
+    ret = eom_set_output_attribute(output_id, EOM_OUTPUT_ATTRIBUTE_NORMAL);
+    if (ret != EOM_ERROR_NONE) {
+        /* Attribute setting failed, the external output device cannot be used */
+        /* Deinitializing */
+        eom_deinit();
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
 <p>If the <code>EOM_ERROR_NONE</code> response is received from the <code>eom_set_output_attribute()</code> function, the application can use the external output device.</p>
- 
+
       <h2 id="setwin" name="setwin">Setting the External Window</h2>
-         
+
 <p>To set an external window, use the <code>eom_set_output_window()</code> function. This function moves the window to the external output and automatically resizes it to the best resolution of the external output device.</p>
 <p>Before calling this function, you must receive a success return from the <code>eom_set_output_attribute()</code> function.</p>
 <pre class="prettyprint">
 int
 make_external_window()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *window;
-&nbsp;&nbsp;&nbsp;&nbsp;window = elm_win_add(NULL, &quot;external_window&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;&nbsp;if (eom_set_output_window(output_id, window) == EOM_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(window);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    Evas_Object *window;
+    window = elm_win_add(NULL, "external_window", ELM_WIN_BASIC);
+    if (eom_set_output_window(output_id, window) == EOM_ERROR_NONE) {
+        return 0;
+    } else {
+        evas_object_del(window);
+
+        return -1;
+    }
 }
 </pre>
-   
+
       <h2 id="getstatus" name="getstatus">Getting the Status of the External Output Device</h2>
-         
+
 <p>To get information about the external output device:</p>
 
 <ul>
-<li>You can retrieve information about the external output device details with the following functions:        
+<li>You can retrieve information about the external output device details with the following functions:
 <ul>
 <li><code>eom_get_output_type()</code>: Get the connection type of the external output.</li>
 <li><code>eom_get_output_mode()</code>: Get the external output mode.
@@ -237,8 +237,8 @@ make_external_window()
 <li>Define the callbacks for various state changes:
 <pre class="prettyprint">
 struct _SampleInfo {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *external_window;
-&nbsp;&nbsp;&nbsp;&nbsp;int output_id;
+    Evas_Object *external_window;
+    int output_id;
 };
 typedef struct _SampleInfo SampleInfo;
 
@@ -246,60 +246,60 @@ typedef struct _SampleInfo SampleInfo;
 static void
 sample_notify_cb_output_add(eom_output_id output_id, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;SampleInfo *info = (SampleInfo*)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;if (!info-&gt;external_window) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the external window */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;make_external_window(info-&gt;external_window);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    SampleInfo *info = (SampleInfo*)user_data;
+    if (!info-&gt;external_window) {
+        /* Create the external window */
+        make_external_window(info-&gt;external_window);
+    }
 }
 
 /* Triggered when the external output is disconnected */
 static void
 sample_notify_cb_output_remove(eom_output_id output_id, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;SampleInfo *info = (SampleInfo*)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;if (!info-&gt;external_window) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(info-&gt;external_window)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;info-&gt;external_window = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    SampleInfo *info = (SampleInfo*)user_data;
+    if (!info-&gt;external_window) {
+        evas_object_del(info-&gt;external_window)
+        info-&gt;external_window = NULL;
+    }
 }
 
 /* Triggered when the state of the EOM output attribute changes */
 static void
 sample_notify_cb_attribute_changed(eom_output_id output_id, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;SampleInfo *info = (SampleInfo*)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;eom_output_attribute_e attribute = EOM_OUTPUT_ATTRIBUTE_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;eom_output_attribute_state_e state = EOM_OUTPUT_ATTRIBUTE_STATE_NONE;
-
-&nbsp;&nbsp;&nbsp;&nbsp;eom_get_output_attribute(output_id, &amp;attribute);
-&nbsp;&nbsp;&nbsp;&nbsp;eom_get_output_attribute_state(output_id, &amp;state);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (state == EOM_OUTPUT_ATTRIBUTE_STATE_ACTIVE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Start displaying the image to the external output
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   (info-&gt;external_window);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_INACTIVE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Stop displaying the image */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the external_window */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (info-&gt;external_window) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(info-&gt;external_window);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;info-&gt;external_window = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_LOST) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Stop displaying the image */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the external_window */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (info-&gt;external_window) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(info-&gt;external_window);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;info-&gt;external_window = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Remove the callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_unset_output_added_cb(sample_notify_cb_output_add);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_unset_output_removed_cb(sample_notify_cb_output_remove);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_unset_attribute_changed_cb(sample_notify_cb_attribute_changed);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_deinit();
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    SampleInfo *info = (SampleInfo*)user_data;
+    eom_output_attribute_e attribute = EOM_OUTPUT_ATTRIBUTE_NONE;
+    eom_output_attribute_state_e state = EOM_OUTPUT_ATTRIBUTE_STATE_NONE;
+
+    eom_get_output_attribute(output_id, &amp;attribute);
+    eom_get_output_attribute_state(output_id, &amp;state);
+
+    if (state == EOM_OUTPUT_ATTRIBUTE_STATE_ACTIVE) {
+        /*
+           Start displaying the image to the external output
+           (info-&gt;external_window);
+        */
+    } else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_INACTIVE) {
+        /* Stop displaying the image */
+        /* Destroy the external_window */
+        if (info-&gt;external_window) {
+            evas_object_del(info-&gt;external_window);
+            info-&gt;external_window = NULL;
+        }
+    } else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_LOST) {
+        /* Stop displaying the image */
+        /* Destroy the external_window */
+        if (info-&gt;external_window) {
+            evas_object_del(info-&gt;external_window);
+            info-&gt;external_window = NULL;
+        }
+        /* Remove the callbacks */
+        eom_unset_output_added_cb(sample_notify_cb_output_add);
+        eom_unset_output_removed_cb(sample_notify_cb_output_remove);
+        eom_unset_attribute_changed_cb(sample_notify_cb_attribute_changed);
+        eom_deinit();
+    }
 }
 </pre>
 
@@ -311,47 +311,47 @@ sample_notify_cb_attribute_changed(eom_output_id output_id, void *user_data)
 int
 elm_main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;SampleInfo *info;
-&nbsp;&nbsp;&nbsp;&nbsp;eom_output_mode_e output_mode = EOM_OUTPUT_MODE_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;info = calloc(sizeof(SampleInfo));
-
-&nbsp;&nbsp;&nbsp;&nbsp;eom_init();
-&nbsp;&nbsp;&nbsp;&nbsp;info-&gt;output_id = sample_get_output_id(&quot;HDMI&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = eom_set_output_attribute(info-&gt;hdmi_output_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EOM_OUTPUT_ATTRIBUTE_NORMAL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EOM_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Cannot use the external output device */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_deinit();
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_get_output_mode(info-&gt;output_id, &amp;output_mode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (output_mode != EOM_OUTPUT_MODE_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the external window */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;make_external_window(info-&gt;external_window);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add the callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_set_output_added_cb(sample_notify_cb_output_add, info);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_set_output_removed_cb(sample_notify_cb_output_remove, info);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eom_set_attribute_changed_cb(sample_notify_cb_attribute_changed, info);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;elm_run();
+    SampleInfo *info;
+    eom_output_mode_e output_mode = EOM_OUTPUT_MODE_NONE;
+    int ret;
+
+    info = calloc(sizeof(SampleInfo));
+
+    eom_init();
+    info-&gt;output_id = sample_get_output_id("HDMI");
+
+    ret = eom_set_output_attribute(info-&gt;hdmi_output_id,
+                                   EOM_OUTPUT_ATTRIBUTE_NORMAL);
+    if (ret != EOM_ERROR_NONE) {
+        /* Cannot use the external output device */
+        eom_deinit();
+    } else {
+        eom_get_output_mode(info-&gt;output_id, &amp;output_mode);
+        if (output_mode != EOM_OUTPUT_MODE_NONE) {
+            /* Create the external window */
+            make_external_window(info-&gt;external_window);
+        }
+
+        /* Add the callbacks */
+        eom_set_output_added_cb(sample_notify_cb_output_add, info);
+        eom_set_output_removed_cb(sample_notify_cb_output_remove, info);
+        eom_set_attribute_changed_cb(sample_notify_cb_attribute_changed, info);
+    }
+
+    elm_run();
 </pre>
 <p>To register the <code>eom_mode_change_cb</code> callback, use the <code>eom_set_mode_changed_cb()</code> function.</p>
 </li>
 
 <li>When no longer needed, delete the callbacks:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;eom_unset_output_added_cb(sample_notify_cb_output_add);
-&nbsp;&nbsp;&nbsp;&nbsp;eom_unset_output_removed_cb(sample_notify_cb_output_remove);
-&nbsp;&nbsp;&nbsp;&nbsp;eom_unset_attribute_changed_cb(sample_notify_cb_attribute_changed);
-&nbsp;&nbsp;&nbsp;&nbsp;eom_deinit();
-&nbsp;&nbsp;&nbsp;&nbsp;elm_shutdown();
+    eom_unset_output_added_cb(sample_notify_cb_output_add);
+    eom_unset_output_removed_cb(sample_notify_cb_output_remove);
+    eom_unset_attribute_changed_cb(sample_notify_cb_attribute_changed);
+    eom_deinit();
+    elm_shutdown();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -368,9 +368,9 @@ elm_main()
 
 <a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
 
-<div id="footer"> 
+<div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/device/feedback_n.htm b/org.tizen.guides/html/native/device/feedback_n.htm
index c053092..00c4f37 100644 (file)
--- a/org.tizen.guides/html/native/device/feedback_n.htm
+++ b/org.tizen.guides/html/native/device/feedback_n.htm
@@ -58,13 +58,13 @@
        </ul>
        <p>You can play a feedback pattern using sound or vibration:</p>
        <ul>
-   <li>Sound management 
-   <p>You can request the sound-server to play a sound by using the mm-keysound library.</p> 
+   <li>Sound management
+   <p>You can request the sound-server to play a sound by using the mm-keysound library.</p>
    <p>You can use sound feedback with the <code>feedback_play()</code> or <code>feedback_play_type()</code> function. The attribute for the sound type is <code>FEEDBACK_TYPE_SOUND</code>.</p>
    </li>
    <li>Vibration management
-   <p>You can request the device to vibrate by using a dbus method call. A haptic monotone or haptic effect is requested to device, based on the vibration data type in the <code>vibration.conf</code> configuration.</p> 
-   <p>You can use vibration feedback with the <code>feedback_play()</code> or <code>feedback_play_type()</code> function. The attribute for the vibration type is <code>FEEDBACK_TYPE_VIBRATION</code>.</p></li></ul>  
+   <p>You can request the device to vibrate by using a dbus method call. A haptic monotone or haptic effect is requested to device, based on the vibration data type in the <code>vibration.conf</code> configuration.</p>
+   <p>You can use vibration feedback with the <code>feedback_play()</code> or <code>feedback_play_type()</code> function. The attribute for the vibration type is <code>FEEDBACK_TYPE_VIBRATION</code>.</p></li></ul>
 
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the functions and data types of the Feedback API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">wearable</a> applications), include the <code>&lt;feedback.h&gt;</code> header file in your application:</p>
diff --git a/org.tizen.guides/html/native/device/runtime_n.htm b/org.tizen.guides/html/native/device/runtime_n.htm
index d693d6e..6782800 100644 (file)
--- a/org.tizen.guides/html/native/device/runtime_n.htm
+++ b/org.tizen.guides/html/native/device/runtime_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Runtime Information</title>  
+       <title>Runtime Information</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -37,16 +37,16 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Mobile Native</a></li>               
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Wearable Native</a></li>                           
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Mobile Native</a></li>
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Runtime Information</h1>
 
-  <p>Tizen provides various runtime information and enables your application to access it and monitor changes in it.</p> 
+  <p>Tizen provides various runtime information and enables your application to access it and monitor changes in it.</p>
   <p>The main features of the Runtime Information API include:</p>
   <ul>
   <li>Getting runtime information with a key-value pair
@@ -55,7 +55,7 @@
        <p>You can <a href="#get_function">retrieve runtime information using a function</a> specific to a certain information.</p></li>
        <li>Monitoring runtime information changes
        <p>You can <a href="#monitor">register a callback function to monitor specific changes</a> in the runtime information.</p></li>
-       </ul>   
+       </ul>
 
 
 <h2 id="prerequisites">Prerequisites</h2>
@@ -73,55 +73,55 @@
 <li>Check whether Bluetooth is enabled.
 <p>Use the <code>RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</code> key  with the data type-specific get function.</p>
 <p>The Bluetooth enabled key data type is <code>bool</code>, which means that you need to use the <code>runtime_info_get_value_bool()</code> function.</p>
-       
+
 <pre class="prettyprint">
 #include &lt;stdbool.h&gt;
 
 void
 func(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bool value;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = runtime_info_get_value_bool(RUNTIME_INFO_KEY_BLUETOOTH_ENABLED, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Bluetooth: %s&quot;, value ? &quot;Enabled&quot; : &quot;Disabled&quot;);
+    bool value;
+    int ret;
+
+    ret = runtime_info_get_value_bool(RUNTIME_INFO_KEY_BLUETOOTH_ENABLED, &amp;value);
+    if (ret != RUNTIME_INFO_ERROR_NONE) {
+        /* Error handling */
+        return;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "Bluetooth: %s", value ? "Enabled" : "Disabled");
 }
 </pre></li>
 <li>Get the audio jack connection status.
 <p>Use the <code>RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</code> key with the data type-specific get function.</p>
 <p>The audio jack status key data type is <code>integer</code>, which means that you need to use the <code>runtime_info_get_value_int()</code> function.</p>
-       
+
 <pre class="prettyprint">
 void
 func(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int value;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = runtime_info_get_value_int(RUNTIME_INFO_KEY_AUDIO_JACK_STATUS, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Audio jack status: %d&quot;, value);
-&nbsp;&nbsp;&nbsp;&nbsp;switch (value) {
-&nbsp;&nbsp;&nbsp;&nbsp;case RUNTIME_INFO_AUDIO_JACK_STATUS_UNCONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Audio jack is disconnected */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case RUNTIME_INFO_AUDIO_JACK_STATUS_CONNECTED_3WIRE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* 3-conductor wire is connected */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case RUNTIME_INFO_AUDIO_JACK_STATUS_CONNECTED_4WIRE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* 4-conductor wire is connected */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int value;
+    int ret;
+
+    ret = runtime_info_get_value_int(RUNTIME_INFO_KEY_AUDIO_JACK_STATUS, &amp;value);
+    if (ret != RUNTIME_INFO_ERROR_NONE) {
+        /* Error handling */
+        return;
+    }
+
+    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;
+    }
 }
-</pre></li></ol>  
+</pre></li></ol>
 
 
 <h2 id="get_function" name="get_function">Getting Runtime Information with a Function</h2>
@@ -133,17 +133,17 @@ func(void)
 void
 func(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int core_idx = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int freq;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    int core_idx = 0;
+    int freq;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = runtime_info_get_processor_current_frequency(core_idx, &amp;freq);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = runtime_info_get_processor_current_frequency(core_idx, &amp;freq);
+    if (ret != RUNTIME_INFO_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The frequency of CPU core 0: %d&quot;, freq);
+        return;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "The frequency of CPU core 0: %d", freq);
 }
 </pre>
 
@@ -162,149 +162,149 @@ func(void)
 void
 usb_connection_changed(runtime_info_key_e key, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bool value;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    bool value;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (key != RUNTIME_INFO_KEY_USB_CONNECTED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (key != RUNTIME_INFO_KEY_USB_CONNECTED)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = runtime_info_get_value_bool(key, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    ret = runtime_info_get_value_bool(key, &amp;value);
+    if (ret != RUNTIME_INFO_ERROR_NONE) {
+        /* Error handling */
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;USB status: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value ? &quot;Connected&quot; : &quot;Disconnected&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "USB status: %s",
+               value ? "Connected" : "Disconnected");
 }
 
 /* Register and deregister */
 void
 func(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;void *data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = runtime_info_set_changed_cb(RUNTIME_INFO_KEY_USB_CONNECTED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usb_connection_changed, data);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret;
+    void *data;
+
+    ret = runtime_info_set_changed_cb(RUNTIME_INFO_KEY_USB_CONNECTED,
+                                      usb_connection_changed, data);
+    if (ret != RUNTIME_INFO_ERROR_NONE) {
+        /* Error handling */
+        return;
+    }
 </pre>
 </li>
 <li>When no longer needed, deregister the callback with the <code>runtime_info_unset_changed_cb()</code> function:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;ret = runtime_info_unset_changed_cb(RUNTIME_INFO_KEY_USB_CONNECTED);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != RUNTIME_INFO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    ret = runtime_info_unset_changed_cb(RUNTIME_INFO_KEY_USB_CONNECTED);
+    if (ret != RUNTIME_INFO_ERROR_NONE) {
+        /* Error handling */
+        return;
+    }
 }
 </pre>
 </li></ol>
 
 
 <h2 id="keys">Runtime Information Keys</h2>
-       
-  <p>The following table lists the available runtime information keys.</p> 
-   
-  <p align="center" class="Table"><strong>Table: Runtime information keys</strong></p> 
-  <table id="runtime_information_keys" border="1"> 
-   <tbody> 
-    <tr> 
-     <th>Key</th> 
-     <th>Type</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether Bluetooth is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_WIFI_HOTSPOT_ENABLED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether a Wi-Fi hotspot is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_BLUETOOTH_TETHERING_ENABLED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether Bluetooth tethering is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_USB_TETHERING_ENABLED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether USB tethering is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_LOCATION_SERVICE_ENABLED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether the location service is allowed to use location data from GPS satellites.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_LOCATION_NETWORK_POSITION_ENABLED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether the location service is allowed to use location data from cellular and Wi-Fi.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_PACKET_DATA_ENABLED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether the packet data through 3G network is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_DATA_ROAMING_ENABLE</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether data roaming is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_VIBRATION_ENABLED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether vibration is enabled.</td> 
-    </tr> 
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_AUDIO_JACK_CONNECTED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether an audio jack is connected.</td> 
+
+  <p>The following table lists the available runtime information keys.</p>
+
+  <p align="center" class="Table"><strong>Table: Runtime information keys</strong></p>
+  <table id="runtime_information_keys" border="1">
+   <tbody>
+    <tr>
+     <th>Key</th>
+     <th>Type</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_BLUETOOTH_ENABLED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether Bluetooth is enabled.</td>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_WIFI_HOTSPOT_ENABLED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether a Wi-Fi hotspot is enabled.</td>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_BLUETOOTH_TETHERING_ENABLED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether Bluetooth tethering is enabled.</td>
     </tr>
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_GPS_STATUS</code></td> 
-     <td><code>int</code></td> 
-     <td>Indicates the current status of GPS.</td> 
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_USB_TETHERING_ENABLED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether USB tethering is enabled.</td>
     </tr>
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_BATTERY_IS_CHARGING</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether the battery is currently charging.</td> 
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_LOCATION_SERVICE_ENABLED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether the location service is allowed to use location data from GPS satellites.</td>
     </tr>
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_TV_OUT_CONNECTED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether TV out is connected.</td> 
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_LOCATION_NETWORK_POSITION_ENABLED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether the location service is allowed to use location data from cellular and Wi-Fi.</td>
     </tr>
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</code></td> 
-     <td><code>int</code></td> 
-     <td>Indicates the current status of the audio jack.</td> 
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_PACKET_DATA_ENABLED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether the packet data through 3G network is enabled.</td>
     </tr>
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_USB_CONNECTED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether USB is connected.</td> 
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_DATA_ROAMING_ENABLE</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether data roaming is enabled.</td>
     </tr>
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_CHARGER_CONNECTED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether a charger is connected.</td> 
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_VIBRATION_ENABLED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether vibration is enabled.</td>
     </tr>
-    <tr> 
-     <td><code>RUNTIME_INFO_KEY_AUTO_ROTATION_ENABLED</code></td> 
-     <td><code>bool</code></td> 
-     <td>Indicates whether auto-rotation is enabled.</td> 
-    </tr>      
-   </tbody> 
-  </table> 
-  
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_AUDIO_JACK_CONNECTED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether an audio jack is connected.</td>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_GPS_STATUS</code></td>
+     <td><code>int</code></td>
+     <td>Indicates the current status of GPS.</td>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_BATTERY_IS_CHARGING</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether the battery is currently charging.</td>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_TV_OUT_CONNECTED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether TV out is connected.</td>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_AUDIO_JACK_STATUS</code></td>
+     <td><code>int</code></td>
+     <td>Indicates the current status of the audio jack.</td>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_USB_CONNECTED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether USB is connected.</td>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_CHARGER_CONNECTED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether a charger is connected.</td>
+    </tr>
+    <tr>
+     <td><code>RUNTIME_INFO_KEY_AUTO_ROTATION_ENABLED</code></td>
+     <td><code>bool</code></td>
+     <td>Indicates whether auto-rotation is enabled.</td>
+    </tr>
+   </tbody>
+  </table>
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/device/settings_n.htm b/org.tizen.guides/html/native/device/settings_n.htm
index 738a8c8..57b077a 100644 (file)
--- a/org.tizen.guides/html/native/device/settings_n.htm
+++ b/org.tizen.guides/html/native/device/settings_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>System Settings</title>  
+       <title>System Settings</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,17 +29,17 @@
                </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-                       <li><a href="#prerequisites">Prerequisites</a></li>             
+                       <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#settings">Managing System Settings</a></li>
                        <li><a href="#details">System Setting Keys</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc">        
+               <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>System Settings</h1>
@@ -74,11 +74,11 @@
 <p>The following example shows a typical use case. An application sees the name of the current wallpaper and you want to print out a message when the wallpaper changes:</p>
 
 <pre class="prettyprint">
-void 
+void
 _img_cb(system_settings_key_e key, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;THIS IS CALLED BY USER APPLICATION WHEN THE WALLPAPER CHANGES \n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "THIS IS CALLED BY USER APPLICATION WHEN THE WALLPAPER CHANGES \n");
 }
 
 /* NOTIFIER 1 - Registering a callback function */
@@ -87,7 +87,7 @@ char * path;
 
 /* GETTER */
 system_settings_get_value_string(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, &amp;path);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;path of the current wallpaper is %s \n&quot;, path);
+dlog_print(DLOG_INFO, LOG_TAG, "path of the current wallpaper is %s \n", path);
 
 /* NOTIFIER 2 - Deregistering a callback function */
 system_settings_unset_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN);
@@ -107,58 +107,58 @@ system_settings_unset_changed_cb(SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN);
 
 <pre class="prettyprint">
 struct _ret_type_define {
-&nbsp;&nbsp;&nbsp;&nbsp;system_settings_key_e key;
-&nbsp;&nbsp;&nbsp;&nbsp;int returns;
+    system_settings_key_e key;
+    int returns;
 };
 
 typedef
 enum {
-&nbsp;&nbsp;&nbsp;&nbsp;_RET_BOOL = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;_RET_INT,
-&nbsp;&nbsp;&nbsp;&nbsp;_RET_STRING
+    _RET_BOOL = 0,
+    _RET_INT,
+    _RET_STRING
 } _SYSTEM_SETTINGS_TYPES;
 
 struct _ret_type_define
 _ret_type[] = {
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE, _RET_STRING
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, _RET_STRING
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, _RET_STRING
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYSTEM_SETTINGS_KEY_FONT_SIZE, _RET_INT
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYSTEM_SETTINGS_KEY_FONT_TYPE, _RET_STRING
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION, _RET_BOOL
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Others */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    {
+        SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE, _RET_STRING
+    },
+    {
+        SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN, _RET_STRING
+    },
+    {
+        SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, _RET_STRING
+    },
+    {
+        SYSTEM_SETTINGS_KEY_FONT_SIZE, _RET_INT
+    },
+    {
+        SYSTEM_SETTINGS_KEY_FONT_TYPE, _RET_STRING
+    },
+    {
+        SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION, _RET_BOOL
+    },
+    {
+        /* Others */
+    }
 };
 
 static const char*
 _info_key[SYS_INFO_COUNT] = {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_FONT_SIZE&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_FONT_TYPE&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;/* Others */
+    "SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE",
+    "SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN",
+    "SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN",
+    "SYSTEM_SETTINGS_KEY_FONT_SIZE",
+    "SYSTEM_SETTINGS_KEY_FONT_TYPE",
+    "SYSTEM_SETTINGS_KEY_MOTION_ACTIVATION",
+    /* Others */
 };
 </pre>
 </li>
 
 <li><p>Obtain the setting data.</p>
 <p>The available settings are defined in the <code>system_settings_key_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">wearable</a> applications).</p>
- 
+
 <p>Read the data using the following functions, according to the data type of the value you want to read:</p>
 
 <ul><li><code>system_settings_get_value_int()</code></li>
@@ -172,25 +172,25 @@ _info_key[SYS_INFO_COUNT] = {
 
 int i;
 for (i = 0; i &lt; SYS_INFO_COUNT; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;%d- System_settings: %s: &quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i, _info_key[_ret_type[i].key]);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (_ret_type[i].returns==_RET_BOOL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;system_settings_get_value_bool(_ret_type[i].key, &amp;_bool_ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;%d&quot;, _bool_ret);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (_ret_type[i].returns==_RET_INT) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;system_settings_get_value_int(_ret_type[i].key, &amp;_int_ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;%d&quot;, _int_ret);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (_ret_type[i].returns==_RET_STRING) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;system_settings_get_value_string(_ret_type[i].key, &amp;_string_ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;%s&quot;, _string_ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(_string_ret);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (_ret_type[i].returns==_RET_DOUBLE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;system_settings_get_value_double(_ret_type[i].key, &amp;_double_ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;%f&quot;, _double_ret);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Undefined return type&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    dlog_print(DLOG_ERROR, LOG_TAG, "%d- System_settings: %s: ",
+               i, _info_key[_ret_type[i].key]);
+
+    if (_ret_type[i].returns==_RET_BOOL) {
+        system_settings_get_value_bool(_ret_type[i].key, &amp;_bool_ret);
+        dlog_print(DLOG_ERROR, LOG_TAG, "%d", _bool_ret);
+    } else if (_ret_type[i].returns==_RET_INT) {
+        system_settings_get_value_int(_ret_type[i].key, &amp;_int_ret);
+        dlog_print(DLOG_ERROR, LOG_TAG, "%d", _int_ret);
+    } else if (_ret_type[i].returns==_RET_STRING) {
+        system_settings_get_value_string(_ret_type[i].key, &amp;_string_ret);
+        dlog_print(DLOG_ERROR, LOG_TAG, "%s", _string_ret);
+        free(_string_ret);
+    } else if (_ret_type[i].returns==_RET_DOUBLE) {
+        system_settings_get_value_double(_ret_type[i].key, &amp;_double_ret);
+        dlog_print(DLOG_ERROR, LOG_TAG, "%f", _double_ret);
+    } else {
+        dlog_print(DLOG_ERROR, LOG_TAG, "Undefined return type");
+    }
 }
 </pre>
 </li>
@@ -201,8 +201,8 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++) {
 
 <pre class="prettyprint">
 for (i = 0; i &lt; SYS_INFO_COUNT; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;system_settings_set_changed_cb(_ret_type[i].key,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_system_settings_changed_cb, 0);
+    system_settings_set_changed_cb(_ret_type[i].key,
+                                   _system_settings_changed_cb, 0);
 </pre></li>
 
 <li><p>Define the callback to be invoked after each change.</p>
@@ -212,7 +212,7 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
 static void
 _system_settings_changed_cb(system_settings_key_e key, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Runtime Info changed: %s&quot;, _info_key[key]);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Runtime Info changed: %s", _info_key[key]);
 }
 </pre></li>
 
@@ -220,8 +220,8 @@ _system_settings_changed_cb(system_settings_key_e key, void *user_data)
 
 <pre class="prettyprint">
 for (i = 0; i &lt; SYS_INFO_COUNT; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;system_settings_unset_changed_cb(_ret_type[i].key,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_system_settings_changed_cb, 0);
+    system_settings_unset_changed_cb(_ret_type[i].key,
+                                     _system_settings_changed_cb, 0);
 </pre></li></ol>
 </li>
 
@@ -233,15 +233,15 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
 <p>The <code>system_settings_key_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">wearable</a> applications) defines all enumerations that work as parameters for the System Settings API.</p>
 
 <p>The following table lists the available system setting keys.</p>
- <p align="center" class="Table"><strong>Table: System settings keys</strong></p> 
+ <p align="center" class="Table"><strong>Table: System settings keys</strong></p>
 <table id="input" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Supported function type </th> 
-        <th>Description</th> 
-    </tr> 
+        <th>Supported function type </th>
+        <th>Description</th>
+    </tr>
 
        <tr>
        <td><code>SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</code></td>
@@ -256,7 +256,7 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
        <td><code>GETTER, NOTIFIER</code></td>
        <td>Device name.</td>
        </tr>
-       
+
        <tr>
        <td><code>SYSTEM_SETTINGS_KEY_DISPLAY_SCREEN_ROTATION_AUTO</code></td>
        <td><code>bool</code></td>
@@ -270,7 +270,7 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
        <td><code>GETTER, NOTIFIER</code></td>
        <td>File path of the current email alert ringtone.</td>
        </tr>
-       
+
        <tr>
        <td><code>SYSTEM_SETTINGS_KEY_FONT_SIZE</code></td>
        <td><code>int</code></td>
@@ -283,15 +283,15 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
        <td><code>string</code></td>
        <td><code>GETTER, NOTIFIER</code></td>
        <td>Current system font type.</td>
-       </tr>   
-       
+       </tr>
+
        <tr>
        <td><code>SYSTEM_SETTINGS_KEY_INCOMING_CALL_RINGTONE</code></td>
        <td><code>string</code></td>
        <td><code>GETTER, NOTIFIER</code></td>
        <td>File path of the current ringtone.</td>
-       </tr>   
-       
+       </tr>
+
        <tr>
        <td><code>SYSTEM_SETTINGS_KEY_LOCALE_COUNTRY</code></td>
        <td><code>string</code></td>
@@ -326,9 +326,9 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
        <td><code>GETTER, NOTIFIER</code></td>
        <td>Indicates whether the motion service is activated.</td>
        </tr>
-       
+
        <tr>
-       <td><code>SYSTEM_SETTINGS_KEY_NETWORK_FLIGHT_MODE</code></td>                   
+       <td><code>SYSTEM_SETTINGS_KEY_NETWORK_FLIGHT_MODE</code></td>
        <td><code>bool</code></td>
        <td><code>GETTER, NOTIFIER</code></td>
        <td>Indicates whether the device is in the flight mode.</td>
@@ -342,12 +342,12 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
        </tr>
 
        <tr>
-       <td><code>SYSTEM_SETTINGS_KEY_SOUND_LOCK</code></td>                                    
+       <td><code>SYSTEM_SETTINGS_KEY_SOUND_LOCK</code></td>
        <td><code>bool</code></td>
        <td><code>GETTER, NOTIFIER</code></td>
        <td>Indicates whether the screen lock sound is enabled on the device (for example, whether the LCD on/off sound is enabled). </td>
        </tr>
-       
+
        <tr>
        <td><code>SYSTEM_SETTINGS_KEY_SOUND_NOTIFICATION</code></td>
        <td><code>string</code></td>
@@ -363,7 +363,7 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
        </tr>
 
        <tr>
-       <td><code>SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</code></td>                     
+       <td><code>SYSTEM_SETTINGS_KEY_SOUND_SILENT_MODE</code></td>
        <td><code>bool</code></td>
        <td><code>GETTER, NOTIFIER</code></td>
        <td>Indicates whether the device is in the silent mode.</td>
@@ -389,7 +389,7 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
        <td><code>GETTER, NOTIFIER</code></td>
        <td>Indicates whether the USB debugging is enabled.</td>
        </tr>
-       
+
        <tr>
        <td><code>SYSTEM_SETTINGS_KEY_WALLPAPER_HOME_SCREEN</code></td>
        <td><code>string</code></td>
@@ -403,7 +403,7 @@ for (i = 0; i &lt; SYS_INFO_COUNT; i++)
        <td><code>GETTER, NOTIFIER</code></td>
        <td>File path of the current lock screen wallpaper.</td>
        </tr>
-   </tbody> 
+   </tbody>
   </table>
 
 
diff --git a/org.tizen.guides/html/native/device/system_n.htm b/org.tizen.guides/html/native/device/system_n.htm
index 04a82e1..d392063 100644 (file)
--- a/org.tizen.guides/html/native/device/system_n.htm
+++ b/org.tizen.guides/html/native/device/system_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>System Information</title>  
+       <title>System Information</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,12 +29,12 @@
                </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-                       <li><a href="#prerequisites">Prerequisites</a></li>             
+                       <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#model">Getting the Device Model Name</a></li>
                        <li><a href="#check">Checking for Supported Features</a></li>
                        <li><a href="#feature">Feature Keys</a></li>
                        <li><a href="#system">System Keys</a></li>
-               </ul>           
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information API for Mobile Native</a></li>
@@ -42,13 +42,13 @@
                        <li><a href="https://developer.tizen.org/development/sample/native/System/System-info" target="_blank">System-info Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>System Information</h1> 
+<h1>System Information</h1>
+
+  <p>System information features enable your application to retrieve information about fixed platform features or device capabilities by querying system information keys. You can also check for supported features.</p>
 
-  <p>System information features enable your application to retrieve information about fixed platform features or device capabilities by querying system information keys. You can also check for supported features.</p> 
-  
   <p>The main features of the System Information API include:</p>
   <ul>
   <li>Getting system information
@@ -56,27 +56,27 @@
   <li>Checking for supported features
   <p>You can <a href="#check">check whether the device supports a feature</a>, such as camera.</p></li>
   </ul>
-  
-    <p align="center" class="Table"><strong>Table: Device-specific information categories</strong></p> 
-       <table border="1"> 
-     <tbody> 
-      <tr> 
-       <th>Category</th> 
-       <th>Description</th> 
+
+    <p align="center" class="Table"><strong>Table: Device-specific information categories</strong></p>
+       <table border="1">
+     <tbody>
+      <tr>
+       <th>Category</th>
+       <th>Description</th>
+      </tr>
+      <tr>
+       <td>Platform information</td>
+       <td>Platform or API version, screen coordination system, and CPU and FPU architecture.</td>
       </tr>
-      <tr> 
-       <td>Platform information</td> 
-       <td>Platform or API version, screen coordination system, and CPU and FPU architecture.</td> 
-      </tr> 
-      <tr> 
-       <td>Device capabilities</td> 
-       <td>Sensors, networks, connections, and additional components.</td> 
-      </tr> 
-     </tbody> 
-    </table>  
+      <tr>
+       <td>Device capabilities</td>
+       <td>Sensors, networks, connections, and additional components.</td>
+      </tr>
+     </tbody>
+    </table>
 
   <p>To obtain the information, query a feature or system key.</p>
-  
+
 <p align="center" class="Table"><strong>Table: System information keys</strong></p>
   <table>
 <tbody>
@@ -153,7 +153,7 @@
   <td></td>
  </tr>
  </tbody></table>
-  
+
     <div class="note">
         <strong>Note</strong>
         Some device-specific information keys look similar to feature keys for application filtering, but their usage differs. Feature keys for device-specific information are used to determine whether the feature is supported in the system. Feature keys for application filtering let the Tizen store filter applications based on features.
@@ -168,27 +168,27 @@
 
 <h2 id="model" name="model">Getting the Device Model Name</h2>
 
-<p>Device-specific information consists of &quot;key, value&quot; pairs. To get the device model name, use the <code>http://tizen.org/system/model_name</code> key with the data type-specific get function.</p>
+<p>Device-specific information consists of "key, value" pairs. To get the device model name, use the <code>http://tizen.org/system/model_name</code> key with the data type-specific get function.</p>
 <p>The model name key data type is <code>string</code>, which means that you need to use the <code>system_info_get_platform_string()</code> function.</p>
 <p>When no longer needed, release the value of the key with the <code>free()</code> function.</p>
- 
+
 <pre class="prettyprint">
 void
 func(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *value;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    char *value;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = system_info_get_platform_string(&quot;http://tizen.org/system/model_name&quot;, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SYSTEM_INFO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = system_info_get_platform_string("http://tizen.org/system/model_name", &amp;value);
+    if (ret != SYSTEM_INFO_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Model name: %s&quot;, value);
+    dlog_print(DLOG_INFO, LOG_TAG, "Model name: %s", value);
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(value); /* Release after use */
+    free(value); /* Release after use */
 }
 </pre>
 
@@ -203,237 +203,237 @@ func(void)
 void
 func(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bool value;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    bool value;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = system_info_get_platform_bool(&quot;http://tizen.org/feature/camera&quot;, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SYSTEM_INFO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = system_info_get_platform_bool("http://tizen.org/feature/camera", &amp;value);
+    if (ret != SYSTEM_INFO_ERROR_NONE) {
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Camera: %s&quot;, value ? &quot;Supported&quot; : &quot;Not supported&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Camera: %s", value ? "Supported" : "Not supported");
 }
 </pre>
-  
+
   <h2 id="feature">Feature Keys</h2>
 
 <p>The following table lists the battery feature keys.</p>
  <p align="center" class="Table"><strong>Table: Battery feature keys</strong></p>
- 
- <table id="battery" border="1"> 
-   <tbody> 
-    <tr> 
+
+ <table id="battery" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/battery</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device has a battery.</td>
     </tr>
-   </tbody> 
-  </table>  
-  
+   </tbody>
+  </table>
+
 <p>The following table lists the camera feature keys.</p>
-<p align="center" class="Table"><strong>Table: Camera feature keys</strong></p>  
-<table id="camera" border="1"> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Camera feature keys</strong></p>
+<table id="camera" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/camera</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device provides any kind of a camera.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/camera.back</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/camera</code> key, if the device provides a back-facing camera.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/camera.back.flash</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/camera.back</code> key, if the device provides a back-facing camera with a flash.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/camera.front</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/camera</code> key, if the device provides a front-facing camera.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/camera.front.flash</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/camera.front</code> key, if the device provides a front-facing camera with a flash.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the consumer IR feature keys.</p>
-<p align="center" class="Table"><strong>Table: Consumer IR feature keys</strong></p> 
-<table id="consumer" border="1"> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Consumer IR feature keys</strong></p>
+<table id="consumer" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/consumer_ir</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the Consumer Infrared (CIR) feature.</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
 <p>The following table lists the convergence D2D feature keys.</p>
-<p align="center" class="Table"><strong>Table: Convergence D2D feature keys</strong></p> 
-<table id="convergence" border="1"> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Convergence D2D feature keys</strong></p>
+<table id="convergence" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/convergence.d2d</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device  supports a service for the discovery of near-by devices and the communication with the remote devices. The device must support 1 or more network features.</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
 <p>The following table lists the database feature keys.</p>
 <p align="center" class="Table"><strong>Table: Database feature keys</strong></p>
-<table id="database" border="1"> 
-   <tbody> 
-    <tr> 
+<table id="database" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/database.encryption</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports database encryption.</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
   <p>The following table lists the datasync feature keys.</p>
   <p align="center" class="Table"><strong>Table: Datasync feature keys</strong></p>
 <table id="datasync" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/datasync</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the DataSynchronization API.</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
   <p>The following table lists the download feature keys.</p>
-<p align="center" class="Table"><strong>Table: Download feature keys</strong></p> 
-<table id="download" border="1">   
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Download feature keys</strong></p>
+<table id="download" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/download</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the Download API.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the FIDO feature keys.</p>
-<p align="center" class="Table"><strong>Table: FIDO feature keys</strong></p> 
-<table id="fido" border="1"> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: FIDO feature keys</strong></p>
+<table id="fido" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/fido.uaf</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the FIDO (Fast Identity Online) UAF (Universal Authentication Framework) client API.</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
  <p>The following table lists the FM radio feature keys.</p>
- <p align="center" class="Table"><strong>Table: FM radio feature keys</strong></p> 
- <table id="fmradio" border="1"> 
-   <tbody> 
-    <tr> 
+ <p align="center" class="Table"><strong>Table: FM radio feature keys</strong></p>
+ <table id="fmradio" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/fmradio</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports an FM radio.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
-  <p>The following table lists the graphics feature keys.</p> 
-  <p align="center" class="Table"><strong>Table: Graphics feature keys</strong></p>  
+  <p>The following table lists the graphics feature keys.</p>
+  <p align="center" class="Table"><strong>Table: Graphics feature keys</strong></p>
    <table id="graphics" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
+        <th>Description</th>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/graphics.acceleration</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports graphics hardware acceleration.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
    <p>The following table lists the human activity monitor feature keys.</p>
 <p align="center" class="Table"><strong>Table: Human activity monitor feature keys</strong></p>
- <table id="ham" border="1">    
-   <tbody> 
-    <tr> 
+ <table id="ham" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/humanactivitymonitor</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports any of the human activity monitor sensors.</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
   <p>The following table lists the input feature keys.</p>
-<p align="center" class="Table"><strong>Table: Input feature keys</strong></p> 
-  <table id="input" border="1">     
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Input feature keys</strong></p>
+  <table id="input" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/input.keyboard</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device provides a built-in keyboard supporting any keyboard layout.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/input.keyboard.layout</code></td>
-     <td><code>String</code></td> 
+     <td><code>String</code></td>
         <td>The platform returns the keyboard layout (such as <code>qwerty</code>) supported by the built-in keyboard for this key and returns <code>true</code> for the <code>http://tizen.org/feature/input.keyboard</code> key.
        <p>If the device does not provide a built-in keyboard, the  platform returns an empty string for this key and returns <code>false</code> for the <code>http://tizen.org/feature/input.keyboard</code> key.</p></td>
     </tr>
@@ -442,24 +442,24 @@ func(void)
      <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the rotating bezel feature.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
  <p>The following table lists the IOT feature keys.</p>
  <p align="center" class="Table"><strong>Table: IOT feature keys</strong></p>
 <table id="iot" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/iot.ocf</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the Open Connectivity Foundation (OCF) framework.</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
   <p>The following table lists the LED feature keys.</p>
 <p align="center" class="Table"><strong>Table: LED feature keys</strong></p>
    <table id="led" border="1">
@@ -477,61 +477,61 @@ func(void)
    </tbody>
   </table>
   <p>The following table lists the location feature keys.</p>
-  <p align="center" class="Table"><strong>Table: Location feature keys</strong></p>  
+  <p align="center" class="Table"><strong>Table: Location feature keys</strong></p>
 <table id="location" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
+        <th>Description</th>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/location</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports location positioning.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/location.batch</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location</code> key, if the device supports the GPS batch feature.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/location.geofence</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location</code> key, if the device supports the geofence feature.</td>
-    </tr>      
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/location.gps</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location</code> key, if the device supports the Global Positioning System (GPS).</td>
     </tr>
                <tr>
        <td><code>http://tizen.org/feature/location.gps.satellite</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location.gps</code> key, if the device has a GPS chip that supports satellite information.</td>
     </tr>
                <tr>
        <td><code>http://tizen.org/feature/location.wps</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/location</code> key, if the device supports  the Wi-Fi-based Positioning System (WPS).</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the maps feature keys.</p>
  <p align="center" class="Table"><strong>Table: Maps feature keys</strong></p>
-<table id="maps" border="1"> 
-   <tbody> 
-    <tr> 
+<table id="maps" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/maps</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the map service feature.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
   <p>The following table lists the media feature keys.</p>
   <p align="center" class="Table"><strong>Table: Media feature keys</strong></p>
@@ -557,25 +557,25 @@ func(void)
      <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the  video recording feature.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the microphone feature keys.</p>
-<p align="center" class="Table"><strong>Table: Microphone feature keys</strong></p> 
-<table id="microphone" border="1"> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Microphone feature keys</strong></p>
+<table id="microphone" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/microphone</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports a microphone.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
-<p>The following table lists the multimedia feature keys.</p> 
+<p>The following table lists the multimedia feature keys.</p>
 <p align="center" class="Table"><strong>Table: Multimedia feature keys</strong></p>
 <table id="multimedia" border="1">
    <tbody>
@@ -594,37 +594,37 @@ func(void)
   <p>The following table lists the multi-point touch feature keys.</p>
 <p align="center" class="Table"><strong>Table: Multi-point touch feature keys</strong></p>
    <table id="multipoint" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/multi_point_touch.pinch_zoom</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports pinch zoom gestures.</td>
     </tr>
            <tr>
        <td><code>http://tizen.org/feature/multi_point_touch.point_count</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the maximum number of supported multi-touch points for this key.
         <p>The platform returns a value less than 2 for this key, if the device does not support multi-point touch.</p></td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
   <p>The following table lists the network feature keys.</p>
    <p align="center" class="Table"><strong>Table: Network feature keys</strong></p>
-   <table id="network" border="1"> 
-   <tbody> 
-    <tr> 
+   <table id="network" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.bluetooth</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports Bluetooth.</td>
     </tr>
        <tr>
@@ -676,7 +676,7 @@ func(void)
     <td><code>http://tizen.org/feature/network.ethernet</code></td>
     <td><code>bool</code></td>
     <td>The platform returns <code>true</code> for this key, if the device supports Ethernet.</td>
-    </tr>      
+    </tr>
     <tr>
     <td><code>http://tizen.org/feature/network.internet</code></td>
     <td><code>bool</code></td>
@@ -694,7 +694,7 @@ func(void)
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.nfc</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports Adapter and NDEF APIs which require Near Field Communication (NFC).</td>
     </tr>
         <tr>
@@ -714,7 +714,7 @@ func(void)
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.nfc.reserved_push</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key  and the <code>http://tizen.org/feature/network.nfc</code> key, if the device supports the NFC reserved push feature.</td>
     </tr>
         <tr>
@@ -724,13 +724,13 @@ func(void)
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.push</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the IP push service provided by
 the Tizen reference implementation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.secure_element</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports secure elements.</td>
     </tr><tr>
        <td><code>http://tizen.org/feature/network.secure_element.ese</code></td>
@@ -743,112 +743,112 @@ the Tizen reference implementation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.service_discovery.dnssd</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the DNS-based Service Discovery Feature (DNSSD).</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.service_discovery.ssdp</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the Simple Service Discovery Protocol feature (SSDP).</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports telephony.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.mms</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.telephony</code> key, if the device supports MMS.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.service.cdma</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the CDMA service.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.service.edge</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the EDGE service.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.service.gprs</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the GPRS service.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.service.gsm</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the GSM service.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.service.hsdpa</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the HSDPA service.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.service.hspa</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the HSPA service.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.service.hsupa</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the HSUPA service.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.service.lte</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the LTE service.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.service.umts</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the UMTS service.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.sms</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.telephony</code> key, if the device supports SMS.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.telephony.sms.cbs</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.telephony</code> key, if the device supports the cell broadcast service (CBS) for SMS.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.tethering</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports any kind of tethering.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.tethering.bluetooth</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.tethering</code> key, if the device supports tethering over Bluetooth.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.tethering.usb</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.tethering</code> key, if the device supports tethering over USB connection.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.tethering.wifi</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.tethering</code> key, if the device supports tethering over Wi-Fi.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.vpn</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the Virtual Private Network feature (VPN).</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.wifi</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports all APIs which require Wi-Fi.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/network.wifi.direct</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/network.wifi</code> key, if the device supports Wi-Fi Direct&trade;.</td>
     </tr><tr>
        <td><code>http://tizen.org/feature/network.wifi.direct.display</code></td>
@@ -863,66 +863,66 @@ the Tizen reference implementation.</td>
      <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the Wi-Fi Tunneled Direct Link Setup (TDLS).</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the OpenGL&reg; ES feature keys.</p>
 <p align="center" class="Table"><strong>Table: OpenGL&reg; ES feature keys</strong></p>
-<table id="opengl" border="1"> 
-   <tbody> 
-    <tr> 
+<table id="opengl" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/opengles</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports any OpenGL&reg; ES version and any texture format.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/opengles.texture_format</code></td>
-     <td><code>String</code></td> 
+     <td><code>String</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports any OpenGL&reg; ES or compressed texture format.
         <p>If the device supports no formats, the platform returns an empty string for this key.</p></td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/opengles.texture_format.3dc</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the 3DC texture format for OpenGL&reg; ES.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/opengles.texture_format.atc</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the ATC texture format for OpenGL&reg; ES.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/opengles.texture_format.etc</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the ETC texture format for OpenGL&reg; ES.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/opengles.texture_format.ptc</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the PTC texture format for OpenGL&reg; ES.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/opengles.texture_format.pvrtc</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the PVRTC texture format for OpenGL&reg; ES.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/opengles.texture_format.utc</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the UTC texture format for OpenGL&reg; ES.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/opengles.version.1_1</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the OpenGL&reg; ES version 1.1.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/opengles.version.2_0</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the OpenGL&reg; ES version 2.0.</td>
     </tr>
      <tr>
@@ -930,82 +930,82 @@ the Tizen reference implementation.</td>
      <td><code>bool</code></td>
       <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/opengles</code> key, if the device supports the OpenGL&reg; ES version 3.0.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the platform feature keys.</p>
- <p align="center" class="Table"><strong>Table: Platform feature keys</strong></p>  
- <table id="platformfeat" border="1"> 
-   <tbody> 
-    <tr> 
+ <p align="center" class="Table"><strong>Table: Platform feature keys</strong></p>
+ <table id="platformfeat" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
+        <th>Description</th>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/platform.core.api.version</code></td>
-     <td><code>String</code></td> 
-        <td>The platform returns the version of the Tizen Core API in the &quot;[Major].[Minor]&quot; format.
+     <td><code>String</code></td>
+        <td>The platform returns the version of the Tizen Core API in the "[Major].[Minor]" format.
         <p>If a device does not provide the Tizen Core API, it returns an empty string for this key.</p></td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/platform.core.cpu.arch</code></td>
-     <td><code>String</code></td> 
+     <td><code>String</code></td>
         <td>The platform returns the CPU architecture.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/platform.core.cpu.arch.armv6</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device runs on the ARMv6 CPU architecture.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.core.cpu.arch.armv7</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device runs on the ARMv7 CPU architecture.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.core.cpu.arch.x86</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device runs on the x86 CPU architecture.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/platform.core.cpu.frequency</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the frequency at which a core CPU is running.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/platform.core.fpu.arch</code></td>
-     <td><code>String</code></td> 
+     <td><code>String</code></td>
         <td>The platform returns the FPU architecture.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.core.fpu.arch.sse2</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device runs on the SSE2 FPU architecture.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.core.fpu.arch.sse3</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device runs on the SSE3 FPU architecture.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.core.fpu.arch.ssse3</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device runs on the SSSE3 FPU architecture.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv2</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device runs on the VFPV2 FPU architecture.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv3</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device runs on the VFPV3 FPU architecture.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.native.api.version</code></td>
      <td><code>String</code></td>
-        <td>The platform returns the version of the native API in the &quot;[Major].[Minor]&quot; format.</td>
+        <td>The platform returns the version of the native API in the "[Major].[Minor]" format.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.native.osp_compatible</code></td>
@@ -1015,7 +1015,7 @@ the Tizen reference implementation.</td>
        <tr>
        <td><code>http://tizen.org/feature/platform.version</code></td>
      <td><code>String</code></td>
-        <td>The platform returns the version of the platform in the &quot;[Major].[Minor].[Patch Version]&quot; format.</td>
+        <td>The platform returns the version of the platform in the "[Major].[Minor].[Patch Version]" format.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/platform.version.name</code></td>
@@ -1025,38 +1025,38 @@ the Tizen reference implementation.</td>
        <tr>
        <td><code>http://tizen.org/feature/platform.web.api.version</code></td>
      <td><code>String</code></td>
-        <td>The platform returns the version of the Web API in the &quot;[Major].[Minor]&quot; format.</td>
+        <td>The platform returns the version of the Web API in the "[Major].[Minor]" format.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the profile feature keys.</p>
 <p align="center" class="Table"><strong>Table: Profile feature keys</strong></p>
-<table id="profile_feat" border="1"> 
-   <tbody> 
-    <tr> 
+<table id="profile_feat" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/profile</code></td>
-     <td><code>String</code></td> 
+     <td><code>String</code></td>
         <td>The platform returns a compliant device profile (such as <code>mobile-full</code>) for this key.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
   <p>The following table lists the screen feature keys.</p>
 <p align="center" class="Table"><strong>Table: Screen feature keys</strong></p>
- <table id="screen" border="1"> 
-   <tbody> 
-    <tr> 
+ <table id="screen" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/screen</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device has a display screen.</td>
     </tr>
     <tr>
@@ -1071,42 +1071,42 @@ the Tizen reference implementation.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/screen.auto_rotation</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports screen auto-rotation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.bpp</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the number of bits per pixel supported by the device for this key. The value depends on the screen, and is typically 8, 16, 24, or 32.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.coordinate_system.size.large</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the large screen size for the coordinate system.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.coordinate_system.size.normal</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the normal screen size for the coordinate system.</td>
-    </tr>      
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.dpi</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the number of dots per inch supported by the device for this key.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.height</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the height of the screen in pixels supported by the device for this key.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.output.hdmi</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports HDMI output.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.output.rca</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports RCA output.</td>
     </tr>
     <tr>
@@ -1123,21 +1123,21 @@ the Tizen reference implementation.</td>
        <td><code>http://tizen.org/feature/screen.size.all</code></td>
      <td><code>bool</code></td>
         <td>The platform always returns <code>true</code>, if the device supports any screen sizes and resolutions.</td>
-    </tr>      
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.size.large</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the large screen size.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.size.normal</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform always returns <code>false</code> for this key.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td>
-     <td><code>bool</code></td> 
-        <td>The platform returns <code>true</code> for this key, if the device supports the 240 x 400 resolution for the normal screen size. 
+     <td><code>bool</code></td>
+        <td>The platform returns <code>true</code> for this key, if the device supports the 240 x 400 resolution for the normal screen size.
 <p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
     </tr>
        <tr>
@@ -1148,8 +1148,8 @@ the Tizen reference implementation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td>
-     <td><code>bool</code></td> 
-        <td>The platform returns <code>true</code> for this key, if the device supports the 320 x 480 resolution for the normal screen size. 
+     <td><code>bool</code></td>
+        <td>The platform returns <code>true</code> for this key, if the device supports the 320 x 480 resolution for the normal screen size.
 <p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
     </tr>
        <tr>
@@ -1166,58 +1166,58 @@ the Tizen reference implementation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td>
-     <td><code>bool</code></td> 
-        <td>The platform returns <code>true</code> for this key, if the device supports the 480 x 800 resolution for the normal screen size. 
+     <td><code>bool</code></td>
+        <td>The platform returns <code>true</code> for this key, if the device supports the 480 x 800 resolution for the normal screen size.
 <p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td>
-     <td><code>bool</code></td> 
-        <td>The platform returns <code>true</code> for this key, if the device supports the 540 x 960 resolution for the normal screen size. 
+     <td><code>bool</code></td>
+        <td>The platform returns <code>true</code> for this key, if the device supports the 540 x 960 resolution for the normal screen size.
 <p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td>
-     <td><code>bool</code></td> 
-        <td>The platform returns <code>true</code> for this key, if the device supports the 600 x 1024 resolution for the normal screen size. 
+     <td><code>bool</code></td>
+        <td>The platform returns <code>true</code> for this key, if the device supports the 600 x 1024 resolution for the normal screen size.
 <p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td>
-     <td><code>bool</code></td> 
-       <td>The platform returns <code>true</code> for this key, if the device supports the 720 x 1280 resolution for the normal screen size. 
+     <td><code>bool</code></td>
+       <td>The platform returns <code>true</code> for this key, if the device supports the 720 x 1280 resolution for the normal screen size.
 <p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td>
-     <td><code>bool</code></td> 
-       <td>The platform returns <code>true</code> for this key, if the device supports the 1080 x 1290 resolution for the normal screen size. 
+     <td><code>bool</code></td>
+       <td>The platform returns <code>true</code> for this key, if the device supports the 1080 x 1290 resolution for the normal screen size.
 <p>The platform can return <code>true</code> for multiple resolution keys.</p></td>
-    </tr>      
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/screen.width</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the width of the screen in pixels supported by the device for this key.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the sensor feature keys.</p>
-<p align="center" class="Table"><strong>Table: Sensor feature keys</strong></p>  
-<table id="sensor" border="1"> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Sensor feature keys</strong></p>
+<table id="sensor" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/sensor.accelerometer</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the acceleration sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.accelerometer.wakeup</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.accelerometer</code> key, if the device supports the wake-up operation by the acceleration sensor.</td>
     </tr>
        <tr>
@@ -1227,19 +1227,19 @@ the Tizen reference implementation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.barometer</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the barometer sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.barometer.wakeup</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.barometer</code> key, if the device supports the wake-up operation by the barometer sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.geomagnetic_rotation_vector</code></td>
      <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the  geomagnetic-based rotation vector sensor.</td>
-    </tr>      
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.gesture_recognition</code></td>
      <td><code>bool</code></td>
@@ -1252,22 +1252,22 @@ the Tizen reference implementation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.gyroscope</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the gyro sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the gyroscope-based rotation vector sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.gyroscope.uncalibrated</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the uncalibrated gyroscope sensor.</td>
-    </tr>      
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.gyroscope.wakeup</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.gyroscope</code> key, if the device supports the wake-up operation by the gyro sensor.</td>
     </tr>
        <tr>
@@ -1302,17 +1302,17 @@ the Tizen reference implementation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.magnetometer</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the magnetic sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.magnetometer.uncalibrated</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the uncalibrated geomagnetic sensor.</td>
-    </tr>      
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.magnetometer.wakeup</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.magnetometer</code> key, if the device supports the wake-up operation by the magnetic sensor.</td>
     </tr>
        <tr>
@@ -1322,22 +1322,22 @@ the Tizen reference implementation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.photometer</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the photo (light) sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.photometer.wakeup</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.photometer</code> key, if the device supports the wake-up operation by the photo sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.proximity</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the proximity sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.proximity.wakeup</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.proximity</code> key, if the device supports the wake-up operation by the proximity sensor.</td>
     </tr>
        <tr>
@@ -1362,12 +1362,12 @@ the Tizen reference implementation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.tiltmeter</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the tilt sensor.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/sensor.tiltmeter.wakeup</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/sensor.tiltmeter</code> key, if the device supports the wake-up operation by the tilt sensor.</td>
     </tr>
        <tr>
@@ -1381,190 +1381,190 @@ the Tizen reference implementation.</td>
         <td>The platform returns <code>true</code> for this key, if the device supports the wrist up action.</td>
     </tr>
 
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the shell feature keys.</p>
-<p align="center" class="Table"><strong>Table: Shell feature keys</strong></p> 
-<table id="shell" border="1"> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Shell feature keys</strong></p>
+<table id="shell" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/shell.appwidget</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the AppWidget.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
- <p>The following table lists the sip feature keys.</p> 
-  <p align="center" class="Table"><strong>Table: Sip feature keys</strong></p> 
+ <p>The following table lists the sip feature keys.</p>
+  <p align="center" class="Table"><strong>Table: Sip feature keys</strong></p>
   <table id="sip" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/sip.voip</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the Voice over Internet Protocol (VoIP).</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
  <p>The following table lists the speech feature keys.</p>
   <p align="center" class="Table"><strong>Table: Speech feature keys</strong></p>
-  <table id="speech" border="1">   
-   <tbody> 
-    <tr> 
+  <table id="speech" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
        <tr>
        <td><code>http://tizen.org/feature/speech.control</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports voice control.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/speech.recognition</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports speech recognition (STT).</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/speech.synthesis</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports speech synthesis (TTS).</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
 <p>The following table lists the system setting feature keys.</p>
-<p align="center" class="Table"><strong>Table: System setting feature keys</strong></p> 
-<table id="systemsetting" border="1"> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: System setting feature keys</strong></p>
+<table id="systemsetting" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/systemsetting</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the SystemSetting API.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/systemsetting.home_screen</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/systemsetting</code> key, if the device supports a way to change or get the picture on the home screen.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/systemsetting.incoming_call</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/systemsetting</code> key, if the device supports a way to change or get a ringtone for all incoming calls.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/systemsetting.lock_screen</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/systemsetting</code> key, if the device supports a way to change or get the lock screen wallpaper.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/systemsetting.notification_email</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key and the <code>http://tizen.org/feature/systemsetting</code> key, if the device supports a way to change or get a ringtone for all email notifications.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
- <p>The following table lists the USB feature keys.</p> 
-    <p align="center" class="Table"><strong>Table: USB feature keys</strong></p>   
+ <p>The following table lists the USB feature keys.</p>
+    <p align="center" class="Table"><strong>Table: USB feature keys</strong></p>
        <table id="usb" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/usb.accessory</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the USB client or accessory mode.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/usb.host</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the USB host mode.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
   <p>The following table lists the vision feature keys.</p>
-   <p align="center" class="Table"><strong>Table: Vision feature keys</strong></p> 
-   <table id="vision" border="1"> 
-   <tbody> 
-    <tr> 
+   <p align="center" class="Table"><strong>Table: Vision feature keys</strong></p>
+   <table id="vision" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/vision.barcode_detection</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the barcode detection feature.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/vision.barcode_generation</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the barcode generation feature.</td>
-    </tr>      
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/vision.face_recognition</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports face recognition.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/vision.image_recognition</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports image recognition.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/vision.qrcode_generation</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports QR code generation.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/feature/vision.qrcode_recognition</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports QR code recognition.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 <p>The following table lists the Web feature keys.</p>
-<p align="center" class="Table"><strong>Table: Web feature keys</strong></p>  
-<table id="web" border="1"> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Web feature keys</strong></p>
+<table id="web" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/feature/web.ime</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports Web IME.</td>
     </tr>
     <tr>
        <td><code>http://tizen.org/feature/web.service</code></td>
-     <td><code>bool</code></td> 
+     <td><code>bool</code></td>
         <td>The platform returns <code>true</code> for this key, if the device supports the Web service model.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
 
   <h2 id="system">System Keys</h2>
 
   <p>The following table lists the build system keys.</p>
-   <p align="center" class="Table"><strong>Table: Build system keys</strong></p> 
+   <p align="center" class="Table"><strong>Table: Build system keys</strong></p>
    <table id="build" border="1">
    <tbody>
     <tr>
@@ -1595,7 +1595,7 @@ the Tizen reference implementation.</td>
        <tr>
         <td><code>http://tizen.org/system/build.type</code></td>
         <td><code>String</code></td>
-        <td>The platform returns the build type, such as &quot;user&quot; or &quot;eng&quot;. The build type is made when the platform image is created. </td>
+        <td>The platform returns the build type, such as "user" or "eng". The build type is made when the platform image is created. </td>
        </tr>
        <tr>
         <td><code>http://tizen.org/system/build.variant</code></td>
@@ -1640,83 +1640,83 @@ the Tizen reference implementation.</td>
         <td>The platform returns the manufacturer name. </td>
     </tr>
    </tbody>
-  </table> 
+  </table>
 
   <p>The following table lists the model name system keys.</p>
-    <p align="center" class="Table"><strong>Table: Model name system keys</strong></p>   
+    <p align="center" class="Table"><strong>Table: Model name system keys</strong></p>
        <table id="modelname" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/system/model_name</code></td>
-     <td><code>String</code></td> 
+     <td><code>String</code></td>
         <td>The platform returns the device model name.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
   <p>The following table lists the platform system keys.</p>
-       <p align="center" class="Table"><strong>Table: Platform system keys</strong></p> 
-          <table id="platformsys" border="1"> 
-   <tbody> 
-    <tr> 
+       <p align="center" class="Table"><strong>Table: Platform system keys</strong></p>
+          <table id="platformsys" border="1">
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/system/platform.communication_processor</code></td>
-     <td><code>String</code></td> 
+     <td><code>String</code></td>
         <td>The platform returns the device communication processor name.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/system/platform.name</code></td>
-     <td><code>String</code></td> 
+     <td><code>String</code></td>
         <td>The platform returns the platform name.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/system/platform.processor</code></td>
-     <td><code>String</code></td> 
+     <td><code>String</code></td>
         <td>The platform returns the device processor name.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
-  
+
   <p>The following table lists the sound system keys.</p>
-    <p align="center" class="Table"><strong>Table: Sound system keys</strong></p> 
+    <p align="center" class="Table"><strong>Table: Sound system keys</strong></p>
        <table id="sound" border="1">
-   <tbody> 
-    <tr> 
+   <tbody>
+    <tr>
      <th>Key</th>
         <th>Type</th>
-        <th>Description</th> 
-    </tr> 
+        <th>Description</th>
+    </tr>
     <tr>
        <td><code>http://tizen.org/system/sound.media.volume.resolution.max</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the maximum sound volume level of the media category.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/system/sound.notification.volume.resolution.max</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the maximum sound volume level of the notification category.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/system/sound.ringtone.volume.resolution.max</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the maximum sound volume level of the ringtone category.</td>
     </tr>
        <tr>
        <td><code>http://tizen.org/system/sound.system.volume.resolution.max</code></td>
-     <td><code>int</code></td> 
+     <td><code>int</code></td>
         <td>The platform returns the maximum sound volume level of the system category.</td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
-  
+
    <p>The following table lists the TizenID system keys.</p>
    <p align="center" class="Table"><strong>Table: TizenID system keys</strong></p>
    <table id="tizenid" border="1">
diff --git a/org.tizen.guides/html/native/error/error_cover_n.htm b/org.tizen.guides/html/native/error/error_cover_n.htm
index ce53534..6ac00eb 100644 (file)
--- a/org.tizen.guides/html/native/error/error_cover_n.htm
+++ b/org.tizen.guides/html/native/error/error_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Error Handling</title>  
+       <title>Error Handling</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Error Handling</h1>
@@ -45,7 +45,7 @@
 
 <p>You can collect log messages with the dlog logging service. You can define the message details, and ensure that the service sends the messages to a log device, from where you can access them to ease troubleshooting.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/error/error_handling_n.htm b/org.tizen.guides/html/native/error/error_handling_n.htm
index 01df9e1..09fde58 100644 (file)
--- a/org.tizen.guides/html/native/error/error_handling_n.htm
+++ b/org.tizen.guides/html/native/error/error_handling_n.htm
@@ -5,21 +5,21 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Error Handling</title> 
- </head> 
- 
+  <title>Error Handling</title>
+ </head>
+
  <body onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -27,10 +27,10 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-       
+
   <h1>Error Handling</h1>
 
 <p>How to query error codes for a certain API function is determined by how the function returns error codes.
@@ -41,7 +41,7 @@ In this sense, there are 2 kinds of native APIs in Tizen:</p>
 <p>All API functions which return error codes have the following section in their description:</p>
 <pre class="prettyprint">
 Returns:
-&nbsp;&nbsp;&nbsp;&nbsp;0 on success, otherwise a negative error value
+    0 on success, otherwise a negative error value
 </pre>
 
 <p>To see all of the available error values, see the Return values section in each API function description.</p>
@@ -49,10 +49,10 @@ Returns:
 
 <pre class="prettyprint">
 Return values:
-&nbsp;&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_NONE /* Successful */
-&nbsp;&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_INVALID_PARAMETER /* Invalid parameter */
-&nbsp;&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_SERVER_NOT_READY /* Server is not ready */
-&nbsp;&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_COMMUNICATION_WITH_SERVER_FAILED /* Server communication failed */
+    MESSAGES_ERROR_NONE /* Successful */
+    MESSAGES_ERROR_INVALID_PARAMETER /* Invalid parameter */
+    MESSAGES_ERROR_SERVER_NOT_READY /* Server is not ready */
+    MESSAGES_ERROR_COMMUNICATION_WITH_SERVER_FAILED /* Server communication failed */
 </pre>
 </li>
 <li>APIs returning values (indirectly returning error codes)
@@ -81,15 +81,15 @@ location_manager_h location_handle;
 int result = location_manager_create(LOCATION_METHOD_GPS, location_handle);
 
 if (LOCATIONS_ERROR_NONE != result) {
-&nbsp;&nbsp;&nbsp;&nbsp;errMsg = get_error_message(result);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;%s&quot;, errMsg);
+    errMsg = get_error_message(result);
+    dlog_print(DLOG_INFO, "MyTag", "%s", errMsg);
 }
 </pre>
-<p>The <code>get_error_message()</code> function takes an error code as an input and returns its corresponding error messages, such as &quot;Location service is not available&quot;.</p>
+<p>The <code>get_error_message()</code> function takes an error code as an input and returns its corresponding error messages, such as "Location service is not available".</p>
 </li>
 </ul>
-<p>Every error code in the Tizen native API is represented as an integer value.</p>   
-   
+<p>Every error code in the Tizen native API is represented as an integer value.</p>
+
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/native/error/system_logs_n.htm b/org.tizen.guides/html/native/error/system_logs_n.htm
index 5d04ba3..7d4aea8 100644 (file)
--- a/org.tizen.guides/html/native/error/system_logs_n.htm
+++ b/org.tizen.guides/html/native/error/system_logs_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>System Logs</title>  
+       <title>System Logs</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -37,12 +37,12 @@
                                <li><a href="#check">Checking the Output Logs</a></li>
         </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc">        
+               <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>System Logs</h1>
@@ -67,11 +67,11 @@
 <p align="center"><img alt="Messages in the Log view"  src="../../images/debugging.png"/></p></li>
 </ul>
 </li></ul>
- 
-<p>The following figure illustrates the general architecture of the dlog logging service.</p> 
+
+<p>The following figure illustrates the general architecture of the dlog logging service.</p>
 <p align="center"><strong>Figure: Architecture</strong></p>
 
-<p align="center"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p> 
+<p align="center"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p>
 
 <h2 id="message" name="message">Log Message Content</h2>
 
@@ -82,30 +82,30 @@
 <p>The priority level indicates the urgency of the log message.</p>
 
 <p align="center" class="Table"><strong>Table: Priority levels</strong></p>
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Priority</th> 
-     <th>Description</th>       
-    </tr> 
-    <tr> 
-     <td><code>DLOG_DEBUG</code></td> 
-     <td>Debugging message for an unexpected exception that needs to be checked</td> 
-    </tr> 
-    <tr> 
-     <td><code>DLOG_INFO</code></td> 
-     <td>Information message describing normal operation</td> 
-    </tr> 
-    <tr> 
-     <td><code>DLOG_WARN</code></td> 
-     <td>Warning message, which means that an error is likely to occur if no action is taken</td> 
-    </tr> 
-    <tr> 
-     <td><code>DLOG_ERROR</code></td> 
-     <td>Error message describing a problem</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<table>
+   <tbody>
+    <tr>
+     <th>Priority</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>DLOG_DEBUG</code></td>
+     <td>Debugging message for an unexpected exception that needs to be checked</td>
+    </tr>
+    <tr>
+     <td><code>DLOG_INFO</code></td>
+     <td>Information message describing normal operation</td>
+    </tr>
+    <tr>
+     <td><code>DLOG_WARN</code></td>
+     <td>Warning message, which means that an error is likely to occur if no action is taken</td>
+    </tr>
+    <tr>
+     <td><code>DLOG_ERROR</code></td>
+     <td>Error message describing a problem</td>
+    </tr>
+   </tbody>
+  </table>
 </li>
 <li><p>The tag is a short name indicating the system component from which the message originates.</p>
 <p>There are no naming limitations, but do not forget that the tag is an identification of a module, and each tag must be unique.</p>
@@ -125,10 +125,10 @@ location_manager_h location_handle;
 int result = location_manager_create(LOCATION_METHOD_GPS, location_handle);
 /* Return value check */
 if (result != LOCATIONS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* If the function failed, provide information in a log message */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;Creation of the location manager failed.&quot;);
+    /* If the function failed, provide information in a log message */
+    dlog_print(DLOG_INFO, "MyTag", "Creation of the location manager failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 </pre>
 
@@ -140,12 +140,12 @@ if (result != LOCATIONS_ERROR_NONE) {
 int
 main(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int integer = 21;
-&nbsp;&nbsp;&nbsp;&nbsp;char string[] = &quot;test dlog&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;USR_TAG&quot;, &quot;test dlog&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;USR_TAG&quot;, &quot;%s, %d&quot;, string, integer);
+    int integer = 21;
+    char string[] = "test dlog";
+    dlog_print(DLOG_INFO, "USR_TAG", "test dlog");
+    dlog_print(DLOG_INFO, "USR_TAG", "%s, %d", string, integer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 
 /* dlog_vprint */
@@ -153,19 +153,19 @@ main(void)
 void
 my_debug_print(char *format, ...)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;va_list ap;
-&nbsp;&nbsp;&nbsp;&nbsp;va_start(ap, format);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_vprint(DLOG_INFO, &quot;USR_TAG&quot;, format, ap);
-&nbsp;&nbsp;&nbsp;&nbsp;va_end(ap);
+    va_list ap;
+    va_start(ap, format);
+    dlog_vprint(DLOG_INFO, "USR_TAG", format, ap);
+    va_end(ap);
 }
 
 int
 main(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;my_debug_print(&quot;%s&quot;, &quot;test dlog&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;my_debug_print(&quot;%s, %d&quot;, &quot;test dlog&quot;, 21);
+    my_debug_print("%s", "test dlog");
+    my_debug_print("%s, %d", "test dlog", 21);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -175,24 +175,24 @@ main(void)
   <li>Information message with the <code>DLOG_INFO</code> priority and the <code>MyTag</code> tag:
     <pre class="prettyprint">
 /* Print the info message with the tag to the console */
-dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;Initialization successful.&quot;);
+dlog_print(DLOG_INFO, "MyTag", "Initialization successful.");
 </pre></li>
   <li>Debug message with the <code>DLOG_DEBUG</code> priority and the <code>MyTag</code> tag:
     <pre class="prettyprint">
 /* Print the debug message with the tag to the console */
-dlog_print(DLOG_DEBUG, &quot;MyTag&quot;, &quot;string:&quot;,&quot;%s&quot;, &quot;Test&quot;);
+dlog_print(DLOG_DEBUG, "MyTag", "string:","%s", "Test");
 </pre></li>
   <li>Error message with the <code>DLOG_ERROR</code> priority and the <code>MyTag</code> tag:
     <pre class="prettyprint">
 if (something_wrong) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Print the error message with the tag to the console */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, &quot;MyTag&quot;, &quot;An unexpected error occurred&quot;);
+    /* Print the error message with the tag to the console */
+    dlog_print(DLOG_ERROR, "MyTag", "An unexpected error occurred");
 }
 </pre></li>
   <li>Warning message with the <code>DLOG_WARN</code> priority and the <code>MyTag</code> tag:
     <pre class="prettyprint">
 /* Print the warning message with the tag to the console */
-dlog_print(DLOG_WARN, &quot;MyTag&quot;, &quot;warning!&quot;);
+dlog_print(DLOG_WARN, "MyTag", "warning!");
 </pre></li>
 </ul>
 
@@ -208,61 +208,61 @@ dlogutil &lt;option&gt; &lt;filter-spec&gt;
 <p>The following table lists the available options for the <code>dlogutil</code> command.</p>
    <p align="center" class="Table"><strong>Table: Command options</strong></p>
    <table>
-   <tbody> 
-    <tr> 
-     <th>Option</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>-b &lt;buffer&gt;</code></td> 
-     <td>Alternates the log buffer. The main buffer is used by the default buffer.</td> 
-    </tr> 
-     <tr> 
-     <td><code>-c</code></td> 
-     <td>Clears the entire log and exits.</td> 
-    </tr> 
-    <tr> 
-     <td><code>-d</code></td> 
-     <td>Dumps the log and exits.</td> 
-    </tr> 
-    <tr> 
-     <td><code>-f &lt;filename&gt;</code></td> 
-     <td>Writes the log to &lt;filename&gt;. The default filename is <code>stdout</code>.</td> 
-    </tr> 
-    <tr> 
-     <td><code>-g</code></td> 
-     <td>Prints the size of the specified log buffer and exits.</td> 
-    </tr> 
-    <tr> 
-     <td><code>-n &lt;count&gt;</code></td> 
-     <td>Sets the maximum number of rotated logs to &lt;count&gt;. The default value is 4. Requires the <code>-r</code> option.</td> 
-    </tr> 
-    <tr> 
-     <td><code>-r &lt;Kbytes&gt;</code></td> 
-     <td>Rotates the log file every &lt;Kbytes&gt; of output. The default value is 16. Requires the <code>-f</code> option.</td> 
-    </tr> 
-    <tr> 
-     <td><code>-s</code></td> 
-     <td>Sets the default filter spec to silent.</td> 
-    </tr> 
-    <tr> 
-     <td><code>-v &lt;format&gt;</code></td> 
-     <td>Sets the output format for log messages. 
+   <tbody>
+    <tr>
+     <th>Option</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>-b &lt;buffer&gt;</code></td>
+     <td>Alternates the log buffer. The main buffer is used by the default buffer.</td>
+    </tr>
+     <tr>
+     <td><code>-c</code></td>
+     <td>Clears the entire log and exits.</td>
+    </tr>
+    <tr>
+     <td><code>-d</code></td>
+     <td>Dumps the log and exits.</td>
+    </tr>
+    <tr>
+     <td><code>-f &lt;filename&gt;</code></td>
+     <td>Writes the log to &lt;filename&gt;. The default filename is <code>stdout</code>.</td>
+    </tr>
+    <tr>
+     <td><code>-g</code></td>
+     <td>Prints the size of the specified log buffer and exits.</td>
+    </tr>
+    <tr>
+     <td><code>-n &lt;count&gt;</code></td>
+     <td>Sets the maximum number of rotated logs to &lt;count&gt;. The default value is 4. Requires the <code>-r</code> option.</td>
+    </tr>
+    <tr>
+     <td><code>-r &lt;Kbytes&gt;</code></td>
+     <td>Rotates the log file every &lt;Kbytes&gt; of output. The default value is 16. Requires the <code>-f</code> option.</td>
+    </tr>
+    <tr>
+     <td><code>-s</code></td>
+     <td>Sets the default filter spec to silent.</td>
+    </tr>
+    <tr>
+     <td><code>-v &lt;format&gt;</code></td>
+     <td>Sets the output format for log messages.
 <p>The log messages contain a number of metadata fields in addition to tag and priority. This option modifies the output format for messages so that they display a specific metadata field. The supported output formats are:</p>
 
 <ul>
        <li><code>brief</code> (default): Displays the priority/tag and PID of the originating process.</li>
-       <li><code>process</code>: Displays the PID only.</li> 
+       <li><code>process</code>: Displays the PID only.</li>
        <li><code>tag</code>: Displays the priority/tag only.</li>
-       <li><code>thread</code>: Displays the process:thread and priority/tag only.</li> 
-       <li><code>raw</code>: Displays the raw log message, with no other metadata fields.</li> 
-       <li><code>time</code>: Displays the date, invocation time, priority/tag, and PID of the originating process.</li> 
+       <li><code>thread</code>: Displays the process:thread and priority/tag only.</li>
+       <li><code>raw</code>: Displays the raw log message, with no other metadata fields.</li>
+       <li><code>time</code>: Displays the date, invocation time, priority/tag, and PID of the originating process.</li>
        <li><code>long</code>: Displays all metadata fields and separates messages with blank lines.</li>
-</ul></td> 
-    </tr>      
-   </tbody> 
+</ul></td>
+    </tr>
+   </tbody>
   </table>
-  
+
 <p>For example, to print out all log messages using a format that only includes the message PID:</p>
 <pre class="prettyprint">
 # dlogutil -v &lt;process&gt;
@@ -298,7 +298,7 @@ dlogutil &lt;option&gt; &lt;filter-spec&gt;
 <ol><li><p>To use the functions and data types of the dlog API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">wearable</a> applications), include the <code>&lt;dlog.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;dlog.h&gt;
-</pre></li>            
+</pre></li>
 <li>Make sure you have the necessary tools:
        <ul>
        <li>dlog library: <code>libdlog.so</code>
@@ -313,21 +313,21 @@ dlogutil &lt;option&gt; &lt;filter-spec&gt;
 <p>To send a log message with the <code>MY_APP</code> tag with various priorities, use the <code>dlog_print()</code> function:</p>
 
 <pre class="prettyprint">
-#define TAG &quot;MY_APP&quot;
+#define TAG "MY_APP"
 
 int
 main(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int integer = 21;
-&nbsp;&nbsp;&nbsp;&nbsp;char string[] = &quot;test dlog&quot;;
+    int integer = 21;
+    char string[] = "test dlog";
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, TAG, &quot;debug message&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;info message&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_WARN, TAG, &quot;warning message&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;error message&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;%s, %d&quot;, string, integer);
+    dlog_print(DLOG_DEBUG, TAG, "debug message");
+    dlog_print(DLOG_INFO, TAG, "info message");
+    dlog_print(DLOG_WARN, TAG, "warning message");
+    dlog_print(DLOG_ERROR, TAG, "error message");
+    dlog_print(DLOG_INFO, TAG, "%s, %d", string, integer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -367,7 +367,7 @@ arc = 2, optind = 1, Kb 0, rotate 4
 --------- beginning of /dev/log_system
 --------- beginning of /dev/log_main
 E/MY_APP  (11097): error message
-sh-3.2# dlogutil -v time MY_APP  
+sh-3.2# dlogutil -v time MY_APP
 arc = 4, optind = 3, Kb 0, rotate 4
 --------- beginning of /dev/log_system
 --------- beginning of /dev/log_main
@@ -422,7 +422,7 @@ W/MY_APP  (11097): warning message
 E/MY_APP  (11097): error message
 I/MY_APP  (11097): test dlog, 21
 </pre>
- 
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/graphics/adv_performance_n.htm b/org.tizen.guides/html/native/graphics/adv_performance_n.htm
index 59e93e8..3a685e3 100644 (file)
--- a/org.tizen.guides/html/native/graphics/adv_performance_n.htm
+++ b/org.tizen.guides/html/native/graphics/adv_performance_n.htm
@@ -31,7 +31,7 @@
 <div id="container"><div id="contents"><div class="content">
 
 <h1>Advanced Performance</h1>
- 
+
 <p>The following general principles can help you to resolve performance problems on Tizen devices. (Some principles are valid for general embedded systems.)</p>
 
 <p>The first 2 principles are very basic, but still quite important, since the CPU-GPU bandwidth and memory capacity of embedded systems are limited in general.</p>
@@ -43,14 +43,14 @@
 <li>You are not required to clear every buffer, or to clear them at the same time. Instead, you can obtain the best performance by calling the <code>glClear()</code> function once per frame with all the buffers to be simultaneously cleared.</li>
 <li>Do not create and destroy the graphic resources (such as textures and FBO) per frame. You can create and store them in the <code>app_data</code> structure in the <code>init_glview()</code> callback and reuse them later.</li>
 <li>Try to avoid using the <code>if</code> statement in the shader code. Since the vertex and fragment shaders are executed in parallel (in batches) on most GPU architectures, <code>if-then-else</code> statement can block some other batches to determine which one can be run next. It means that parallel processing cannot be fully implemented.</li>
-<li>Try to avoid writing a heavy fragment shader. If the same data apply to all fragments, do not compute the data in the fragment shader but compute them at the CPU side and provide them as uniforms. On the other hand, whenever the data can be computed at the vertex shader, use it.</li>  
+<li>Try to avoid writing a heavy fragment shader. If the same data apply to all fragments, do not compute the data in the fragment shader but compute them at the CPU side and provide them as uniforms. On the other hand, whenever the data can be computed at the vertex shader, use it.</li>
 <li>In general, the <code>glReadPixels()</code> function is quite slow, because it reinforces CPU-GPU synchronization, drastically decreasing the overall performance. In most cases, it is possible to obtain the desired result with the framebuffer object (FBO), avoiding the use of <code>glReadPixels()</code>. With FBO, you can access the pixels of the framebuffer (the output of GPU processing) through a texture object (render-to-texture). Since it uses texture data from a GPU stage to another GPU stage, CPU does not have to be synchronized. If the application must use the <code>glReadPixels()</code>function, use another thread to avoid blocking the main thread.</li>
 <li>With FBO, various effects can be made. Consider an application requiring a number of rendering chains for making a complex effect: A framebuffer is mapped to a texture, the texture is used to render another framebuffer, the framebuffer is mapped to another texture, and so on. This enables you to create a very complex scene, but unfortunately the rendering chain cannot be parallelized. Make the rendering chains as small as possible.</li>
-<li>According to the <a href="../app_management/efl_ui_app_n.htm#state_trans">application life-cycle</a>, the application gets the <code>app_pause()</code> callback when the application runs at the background. Then, you must stop calling drawcalls during the pause state. 
+<li>According to the <a href="../app_management/efl_ui_app_n.htm#state_trans">application life-cycle</a>, the application gets the <code>app_pause()</code> callback when the application runs at the background. Then, you must stop calling drawcalls during the pause state.
 <p>As presented in <a href="interactive_ui_n.htm">Interactive UI</a>, the application can control the rendering loop by using an animator internally and then stop the animator in the <code>app_pause()</code> callback.</p></li>
 </ol>
 
- 
+
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/native/graphics/adv_rendering_n.htm b/org.tizen.guides/html/native/graphics/adv_rendering_n.htm
index 198e82c..7d5a645 100644 (file)
--- a/org.tizen.guides/html/native/graphics/adv_rendering_n.htm
+++ b/org.tizen.guides/html/native/graphics/adv_rendering_n.htm
@@ -46,40 +46,40 @@
 
 <p>In order to increase reusability, this section presents a simple OpenGL ES (GL)-based renderer and a sample view architecture based on the renderer. Its class diagram is shown in the following figure. SampleLauncher creates a sample view instance, such as TexturingView. Each sample view inherits from the SampleView class, which creates the GLView and BasicRenderer instances.</p>
 
-<p align="center"><strong>Figure: Class diagram for sample views and renderer</strong></p> 
-<p align="center"><img alt="Class diagram for sample views and renderer" src="../../images/adv_render_class.png" /></p> 
+<p align="center"><strong>Figure: Class diagram for sample views and renderer</strong></p>
+<p align="center"><img alt="Class diagram for sample views and renderer" src="../../images/adv_render_class.png" /></p>
 
 <p>The callback functions for GLView are registered as presented in <a href="creating_opengles_n.htm">Creating OpenGL ES Applications</a>. At the initialization stage, the sample view uses the FileLoader class to read the resource files, such as shaders, 3D objects, and texture images, from the Tizen application resource file path. These data are passed to BasicRenderer. At the initialization stage when the <code>init_glview()</code> callback is invoked, BasicRenderer uses the shader code and BasicShader to create, compile, and link the program object. </p>
-<p>In addition to BasicShader, BasicRenderer uses, for example, BasicCamera, vertex array, and texture object ID, for rendering a scene. When rendering is requested by the sample view, BasicRenderer initializes color and depth buffers through the <code>glClear()</code> function, and then computes many data needed for rendering, such as world, view, and projection matrices. These are transferred to BasicShader, which invokes the <code>glUniformXXX()</code> function to pass them to the current program object. Finally, the <code>glDrawElements()</code> function is invoked.</p> 
+<p>In addition to BasicShader, BasicRenderer uses, for example, BasicCamera, vertex array, and texture object ID, for rendering a scene. When rendering is requested by the sample view, BasicRenderer initializes color and depth buffers through the <code>glClear()</code> function, and then computes many data needed for rendering, such as world, view, and projection matrices. These are transferred to BasicShader, which invokes the <code>glUniformXXX()</code> function to pass them to the current program object. Finally, the <code>glDrawElements()</code> function is invoked.</p>
 <p>For handling texture images, the sample uses the TexData class. The sample application creates a TexData instance and passes it to FileLoader together with the file name of the texture image. Then, FileLoader stores the decoded pixel data into the TexData instance. When the TexData instance is given to BasicRender, GL functions, such as <code>glGenTexture()</code> and <code>glTexImage2D()</code>, are invoked. After the texture object is created and sampler uniforms, such as <code>sampler2D</code> and <code>samplerCube</code>, are passed to the fragment shader, texturing can be done.</p>
 <p>For convenience, use the OpenGL mathematics library, GLM. GLM is a header only C++ mathematics library for graphics software based on the OpenGL shading language (GLSL) specification. GLM provides classes and functions designed and implemented with the same naming conventions and functionalities as in GLSL.</p>
 
 <h2 id="framebuffer" name="framebuffer">Framebuffer Object and Render-to-texture</h2>
 
-<p>In Tizen, the drawing surface is created by GLView. To render a scene, GL receives this surface, which is called &#39;on-screen buffer&#39;. For simple applications, the on-screen-buffer alone is sufficient. However, if the application needs to render to a texture, for example, an &#39;off-screen-buffer&#39; is helpful as it can be used as a texture. In GL, the Framebuffer Object (FBO) can be an &#39;off-screen-buffer&#39; and also supports &#39;render to texture.&#39;</p>
+<p>In Tizen, the drawing surface is created by GLView. To render a scene, GL receives this surface, which is called 'on-screen buffer'. For simple applications, the on-screen-buffer alone is sufficient. However, if the application needs to render to a texture, for example, an 'off-screen-buffer' is helpful as it can be used as a texture. In GL, the Framebuffer Object (FBO) can be an 'off-screen-buffer' and also supports 'render to texture.'</p>
 <p>GL provides functions to generate, bind, and configure an FBO. As shown in the following figure, the FBO consists of color, depth, and stencil attachments. It can be used as a texture by binding a texture object to its color or depth attachment point. On the other hand, GL supports a renderbuffer object, which is a 2D image buffer and can be bound to color, depth or stencil attachment point. FBO is useful for environment mapping, shadow mapping, post-processing and effects, including, for example, motion blur.</p>
 
-<p align="center"><strong>Figure: Framebuffer, renderbuffer, and texture objects</strong></p> 
-<p align="center"><img alt="Framebuffer, renderbuffer, and texture objects" src="../../images/adv_render_framebuffer.png" /></p> 
+<p align="center"><strong>Figure: Framebuffer, renderbuffer, and texture objects</strong></p>
+<p align="center"><img alt="Framebuffer, renderbuffer, and texture objects" src="../../images/adv_render_framebuffer.png" /></p>
 
-<p>FBO is defined as follows:</p> 
+<p>FBO is defined as follows:</p>
 
 <ol>
-<li>A texture or renderbuffer object is generated using the <code>glGenTextures()</code> or <code>glGenRenderbuffers()</code> function.</li> 
-<li>Binding is made using the <code>glBindTexture()</code> or <code>glBindRenderbuffer()</code> function before being attached to the FBO.</li> 
-<li>The <code>glTexParameteri()</code> or <code>glRenderbufferStorage()</code> function is called to specify the properties of the object.</li> 
+<li>A texture or renderbuffer object is generated using the <code>glGenTextures()</code> or <code>glGenRenderbuffers()</code> function.</li>
+<li>Binding is made using the <code>glBindTexture()</code> or <code>glBindRenderbuffer()</code> function before being attached to the FBO.</li>
+<li>The <code>glTexParameteri()</code> or <code>glRenderbufferStorage()</code> function is called to specify the properties of the object.</li>
 <li>The <code>glFramebufferRenderbuffer()</code> or <code>glFramebufferTexture2D()</code> function is invoked to attach the object to the FBO.</li>
 </ol>
 
-<p>The following code creates an FBO as an &#39;off-screen-buffer&#39; that enables render-to-texture:</p>
+<p>The following code creates an FBO as an 'off-screen-buffer' that enables render-to-texture:</p>
 
 <pre class="prettyprint">
 /*
    This function shows how to create new framebuffer object
-   with texture color buffer and depth render buffer 
-   To render a texture, bind framebuffer to &#39;newFbo&#39; using
+   with texture color buffer and depth render buffer
+   To render a texture, bind framebuffer to 'newFbo' using
    glBindeFramebuffer() and make a drawcall. Then, just
-   use &#39;colorTex&#39; as a general texture
+   use 'colorTex' as a general texture
    This function does not make a stencil buffer
    To use stencil buffer for off-screen-buffer, make another
    renderbuffer object and attach to framebuffer using
@@ -88,49 +88,49 @@
 void
 createFbo()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;GLuint colorTex, depthRbo, newFbo;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Size of texture and renderbuffer object */
-&nbsp;&nbsp;&nbsp;&nbsp;/* 
-&nbsp;&nbsp;&nbsp;&nbsp;   Check whether GL_MAX_RENDERBUFFER_SIZE &gt;= width and height
-&nbsp;&nbsp;&nbsp;&nbsp;   using glGetIntegerv(GL_MAX_RENDERBUFFER_SIZE, &amp;maxSize)
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;GLint  texWidth = 256, texHeight = 256;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Generate texture object */
-&nbsp;&nbsp;&nbsp;&nbsp;glGenTextures(1, &amp;colorTex);
-&nbsp;&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, colorTex);
-&nbsp;&nbsp;&nbsp;&nbsp;glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;texWidth, texHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set texture wrapping and filtering mode */
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Generate renderbuffer object */
-&nbsp;&nbsp;&nbsp;&nbsp;glGenRenderbuffers(1, &amp;depthRbo);
-&nbsp;&nbsp;&nbsp;&nbsp;glBindRenderbuffer(GL_RENDERBUFFER, depthRbo);
-&nbsp;&nbsp;&nbsp;&nbsp;glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;texWidth, texWidth); /* 16-bit depthbuffer */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Generate framebuffer object and bind texture and
-&nbsp;&nbsp;&nbsp;&nbsp;   renderbuffer object to attachment points
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;glGenFramebuffers(1, &amp;newFbo);
-&nbsp;&nbsp;&nbsp;&nbsp;glBindFramebuffer(GL_FRAMEBUFFER, newFbo);
-&nbsp;&nbsp;&nbsp;&nbsp;glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_TEXTURE_2D, colorTex, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_RENDERBUFFER, depthRbo);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Check for framebuffer complete */
-&nbsp;&nbsp;&nbsp;&nbsp;if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;FrameBufferObject is not complete!\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;glBindFramebuffer(GL_FRAMEBUFFER, 0);
+    GLuint colorTex, depthRbo, newFbo;
+
+    /* Size of texture and renderbuffer object */
+    /*
+       Check whether GL_MAX_RENDERBUFFER_SIZE &gt;= width and height
+       using glGetIntegerv(GL_MAX_RENDERBUFFER_SIZE, &amp;maxSize)
+    */
+    GLint  texWidth = 256, texHeight = 256;
+
+    /* Generate texture object */
+    glGenTextures(1, &amp;colorTex);
+    glBindTexture(GL_TEXTURE_2D, colorTex);
+    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA,
+                 texWidth, texHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
+
+    /* Set texture wrapping and filtering mode */
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
+
+    /* Generate renderbuffer object */
+    glGenRenderbuffers(1, &amp;depthRbo);
+    glBindRenderbuffer(GL_RENDERBUFFER, depthRbo);
+    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16,
+                          texWidth, texWidth); /* 16-bit depthbuffer */
+
+    /*
+       Generate framebuffer object and bind texture and
+       renderbuffer object to attachment points
+    */
+    glGenFramebuffers(1, &amp;newFbo);
+    glBindFramebuffer(GL_FRAMEBUFFER, newFbo);
+    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,
+                           GL_TEXTURE_2D, colorTex, 0);
+    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT,
+                              GL_RENDERBUFFER, depthRbo);
+
+    /* Check for framebuffer complete */
+    if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "FrameBufferObject is not complete!\n");
+
+    glBindFramebuffer(GL_FRAMEBUFFER, 0);
 }
 </pre>
 
@@ -138,59 +138,59 @@ createFbo()
 
 <p><strong>Environment mapping</strong> is a technique to simulate a shiny object reflecting its surrounding environment, as shown in the following figure. Among several implementations of environment mapping, the most popular is <strong>cube mapping</strong>. It uses a <strong>cube map</strong> composed of 6 square image textures. The images are textured to the surface of the shiny object.</p>
 
-<p align="center"><strong>Figure: Cube mapping example</strong></p> 
-<p align="center"><img alt="Cube mapping example" src="../../images/adv_render_cube.png" /></p>  
+<p align="center"><strong>Figure: Cube mapping example</strong></p>
+<p align="center"><img alt="Cube mapping example" src="../../images/adv_render_cube.png" /></p>
 
 
 <p>A cube map is created by positioning a camera at the center of the object and rendering along each positive/negative principal axis directions using a 90-degree field of view. The following figure shows how a cube map texture is composed. For a static environment, this is made at the preprocessing stage.</p>
 
-<p align="center"><strong>Figure: Composition of the cubemap texture</strong></p> 
-<p align="center"><img alt="Composition of the cubemap texture" src="../../images/adv_render_cube_composition.png" /></p>  
+<p align="center"><strong>Figure: Composition of the cubemap texture</strong></p>
+<p align="center"><img alt="Composition of the cubemap texture" src="../../images/adv_render_cube_composition.png" /></p>
 
 
-<p>The <a href="texturing_n.htm">Texturing</a> topic presents how to create texture objects using GL APIs. For using a cube map texture, provide <code>GL_TEXTURE_CUBE_MAP</code> instead of <code>GL_TEXTURE_2D</code> for the <code>glGenTexture()</code> and <code>glBindTexture()</code> functions.</p> 
+<p>The <a href="texturing_n.htm">Texturing</a> topic presents how to create texture objects using GL APIs. For using a cube map texture, provide <code>GL_TEXTURE_CUBE_MAP</code> instead of <code>GL_TEXTURE_2D</code> for the <code>glGenTexture()</code> and <code>glBindTexture()</code> functions.</p>
 <p>The following code creates a cube map texture for environment mapping:</p>
 <pre class="prettyprint">
 void
 ImlRenderer::CreateCubeTex(const TexData *cubeTex, GLuint &amp;target)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;checkGlError(&quot;glPixelStorei&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;glGenTextures(1, &amp;target);
-&nbsp;&nbsp;&nbsp;&nbsp;checkGlError(&quot;glGenTextures&quot;);
+    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
+    checkGlError("glPixelStorei");
+    glGenTextures(1, &amp;target);
+    checkGlError("glGenTextures");
 
-&nbsp;&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_CUBE_MAP, target);
-&nbsp;&nbsp;&nbsp;&nbsp;checkGlError(&quot;glBindTexture&quot;);
+    glBindTexture(GL_TEXTURE_CUBE_MAP, target);
+    checkGlError("glBindTexture");
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; 6; ++i)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TexBuffer((GLenum)GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, cubeTex[i]);
+    for (int i = 0; i &lt; 6; ++i)
+        TexBuffer((GLenum)GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, cubeTex[i]);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glGenerateMipmap(GL_TEXTURE_CUBE_MAP);
-&nbsp;&nbsp;&nbsp;&nbsp;checkGlError(&quot;glGenerateMipmap&quot;);
+    glGenerateMipmap(GL_TEXTURE_CUBE_MAP);
+    checkGlError("glGenerateMipmap");
 
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_LINEAR_MIPMAP_LINEAR);
-&nbsp;&nbsp;&nbsp;&nbsp;checkGlError(&quot;glTexParameteri&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
-&nbsp;&nbsp;&nbsp;&nbsp;checkGlError(&quot;glTexParameteri&quot;);
+    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER,
+                    GL_LINEAR_MIPMAP_LINEAR);
+    checkGlError("glTexParameteri");
+    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
+    checkGlError("glTexParameteri");
 
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_REPEAT);
-&nbsp;&nbsp;&nbsp;&nbsp;checkGlError(&quot;glTexParameteri&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_REPEAT);
-&nbsp;&nbsp;&nbsp;&nbsp;checkGlError(&quot;glTexParameteri&quot;);
+    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_REPEAT);
+    checkGlError("glTexParameteri");
+    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_REPEAT);
+    checkGlError("glTexParameteri");
 
-&nbsp;&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_CUBE_MAP, 0);
+    glBindTexture(GL_TEXTURE_CUBE_MAP, 0);
 }
 
 void
 ImlRenderer::TexBuffer(GLenum type, const TexData&amp; newTex)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;ImlRenderer::TexBuffer&quot;);
+    LOGI("ImlRenderer::TexBuffer");
 
-&nbsp;&nbsp;&nbsp;&nbsp;glTexImage2D(type, 0, newTex.format, newTex.width, newTex.height, 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(GLenum)newTex.format, GL_UNSIGNED_BYTE, (void*)newTex.pixels);
+    glTexImage2D(type, 0, newTex.format, newTex.width, newTex.height, 0,
+                 (GLenum)newTex.format, GL_UNSIGNED_BYTE, (void*)newTex.pixels);
 
-&nbsp;&nbsp;&nbsp;&nbsp;checkGlError(&quot;glTexImage2D&quot;);
+    checkGlError("glTexImage2D");
 }
 </pre>
 <p>In the above code, see <code>GL_TEXTURE_CUBE_MAP_POSITIVE_X</code>, a parameter of the <code>TexBuffer()</code> function. It represents which side of the environment is contained in the cube map texture.</p>
@@ -207,33 +207,33 @@ varying vec2 v_texCoord;
 void
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 nor = normalize(v_normal);
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 ray = normalize(eyePos);
+    vec3 nor = normalize(v_normal);
+    vec3 ray = normalize(eyePos);
 
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 reflec = 2.0 * nor * dot(nor, ray) - ray;
-&nbsp;&nbsp;&nbsp;&nbsp;vec4 envColor = textureCube(s_texCube, reflec);
+    vec3 reflec = 2.0 * nor * dot(nor, ray) - ray;
+    vec4 envColor = textureCube(s_texCube, reflec);
 
-&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = envColor;
+    gl_FragColor = envColor;
 }
 </pre>
 
 <h2 id="normal_map" name="normal_map">Normal Mapping with Multi-texturing</h2>
 
-<p>A <strong>normal map</strong> is a 2D texture that stores a normal vector at each texel. The red channel represents the <code>x</code> component, the green channel the <code>y</code> component, and the blue channel the <code>z</code> component. This triple is scaled and biased in the shader to map to a normal, each component of which is in [-1, 1].</p> 
-<p>The normals of a normal map are defined in the <strong>tangent spaces</strong> of the object surface. In a tangent space, the Z axis corresponds to the surface normal. The left side of the following figure shows 2 tangent spaces, one defined for a surface point <code>p</code> and the other for another point <code>q</code>. Observe that the tangent spaces vary across the object surface. Assuming that a tangent space is defined for a surface point to be normal-mapped, the normal fetched from the normal map is taken as being defined in the tangent space of the point. In this respect, it is named the <strong>tangent-space normal</strong>. The tangent-space normals perturb the surface normal.</p> 
+<p>A <strong>normal map</strong> is a 2D texture that stores a normal vector at each texel. The red channel represents the <code>x</code> component, the green channel the <code>y</code> component, and the blue channel the <code>z</code> component. This triple is scaled and biased in the shader to map to a normal, each component of which is in [-1, 1].</p>
+<p>The normals of a normal map are defined in the <strong>tangent spaces</strong> of the object surface. In a tangent space, the Z axis corresponds to the surface normal. The left side of the following figure shows 2 tangent spaces, one defined for a surface point <code>p</code> and the other for another point <code>q</code>. Observe that the tangent spaces vary across the object surface. Assuming that a tangent space is defined for a surface point to be normal-mapped, the normal fetched from the normal map is taken as being defined in the tangent space of the point. In this respect, it is named the <strong>tangent-space normal</strong>. The tangent-space normals perturb the surface normal.</p>
 
-<p align="center"><strong>Figure: Tangent spaces</strong></p> 
-<p align="center"><img alt="Tangent spaces" src="../../images/adv_render_tangent1.png" /> <img alt="Tangent spaces" src="../../images/adv_render_tangent2.png" /></p> 
+<p align="center"><strong>Figure: Tangent spaces</strong></p>
+<p align="center"><img alt="Tangent spaces" src="../../images/adv_render_tangent1.png" /> <img alt="Tangent spaces" src="../../images/adv_render_tangent2.png" /></p>
 
 
-<p>The surface normal of a polygon mesh is computed per vertex at the modeling stage. It is the vertex normal. The tangent space is constructed per vertex so that its Z axis corresponds to the vertex normal, as shown in the right side of the above figure.</p> 
-<p>3 orthonormal vectors define the tangent space:</p> 
+<p>The surface normal of a polygon mesh is computed per vertex at the modeling stage. It is the vertex normal. The tangent space is constructed per vertex so that its Z axis corresponds to the vertex normal, as shown in the right side of the above figure.</p>
+<p>3 orthonormal vectors define the tangent space:</p>
 <ul>
 <li>Vertex normal denoted by <code>N</code></li>
 <li>Vector denoted by <code>T</code> (for <strong>tangent</strong>)</li>
 <li>Vector denoted by <code>B</code> (for <strong>binormal</strong>)</li>
 </ul>
-<p>Tangent vectors (<code>T</code>) are computed in BasicRenderer. Then, <code>N</code> and <code>T</code> are passed to the vertex shader, where <code>B</code> is computed by taking the cross product of <code>N</code> and <code>T</code> and then a rotation matrix is constructed from the <code>TBN</code> vectors. This <strong>basis-change matrix</strong> converts the world space light vector into the tangent space, so that lighting is computed at the tangent space by the fragment shader.</p> 
+<p>Tangent vectors (<code>T</code>) are computed in BasicRenderer. Then, <code>N</code> and <code>T</code> are passed to the vertex shader, where <code>B</code> is computed by taking the cross product of <code>N</code> and <code>T</code> and then a rotation matrix is constructed from the <code>TBN</code> vectors. This <strong>basis-change matrix</strong> converts the world space light vector into the tangent space, so that lighting is computed at the tangent space by the fragment shader.</p>
 <p>The following vertex shader presents how to construct the basis-change matrix from the <code>TBN</code> vectors:</p>
 
 <pre class="prettyprint">
@@ -256,19 +256,19 @@ varying vec3 v_viewTS;
 void
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;vec4 world_pos = worldMat * vec4(position, 1.0);
-&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = projMat * viewMat * world_pos;
-&nbsp;&nbsp;&nbsp;&nbsp;v_texCoord = texCoord;
-
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 nor = mat3(worldMat) * normal;
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 tan = mat3(worldMat) * normalize(tangent);
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 bin = cross(nor, tan);
-&nbsp;&nbsp;&nbsp;&nbsp;mat3 worldToTangentSpace = mat3(tan.x, bin.x, nor.x,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tan.y, bin.y, nor.y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tan.z, bin.z, nor.z);
-
-&nbsp;&nbsp;&nbsp;&nbsp;v_lightDirTS = worldToTangentSpace * (lightPos - world_pos.xyz);
-&nbsp;&nbsp;&nbsp;&nbsp;v_viewTS = worldToTangentSpace * (eyePos - world_pos.xyz);
+    vec4 world_pos = worldMat * vec4(position, 1.0);
+    gl_Position = projMat * viewMat * world_pos;
+    v_texCoord = texCoord;
+
+    vec3 nor = mat3(worldMat) * normal;
+    vec3 tan = mat3(worldMat) * normalize(tangent);
+    vec3 bin = cross(nor, tan);
+    mat3 worldToTangentSpace = mat3(tan.x, bin.x, nor.x,
+                                    tan.y, bin.y, nor.y,
+                                    tan.z, bin.z, nor.z);
+
+    v_lightDirTS = worldToTangentSpace * (lightPos - world_pos.xyz);
+    v_viewTS = worldToTangentSpace * (eyePos - world_pos.xyz);
 }
 </pre>
 
@@ -289,14 +289,14 @@ vec3 phongLightFragNormal(vec3 Md, vec3 normal);
 void
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 md = texture2D(s_tex0, v_texCoord).xyz;
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 tanNor = normalize(texture2D(s_texNor, v_texCoord).xyz * 2.0 - vec3(1.0));
-&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = vec4(phongLightFragNormal(md, tanNor), 1.0);
+    vec3 md = texture2D(s_tex0, v_texCoord).xyz;
+    vec3 tanNor = normalize(texture2D(s_texNor, v_texCoord).xyz * 2.0 - vec3(1.0));
+    gl_FragColor = vec4(phongLightFragNormal(md, tanNor), 1.0);
 }
 </pre>
 
-<p align="center"><strong>Figure: Normal mapping example</strong></p> 
-<p align="center"><img alt="Normal mapping example" src="../../images/adv_render_normal_map.png" /></p>  
+<p align="center"><strong>Figure: Normal mapping example</strong></p>
+<p align="center"><img alt="Normal mapping example" src="../../images/adv_render_normal_map.png" /></p>
 
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/graphics/assembly_n.htm b/org.tizen.guides/html/native/graphics/assembly_n.htm
index fd451d7..fad31b7 100644 (file)
--- a/org.tizen.guides/html/native/graphics/assembly_n.htm
+++ b/org.tizen.guides/html/native/graphics/assembly_n.htm
@@ -36,7 +36,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-<h1>Primitive Assembly and Rasterization</h1> 
+<h1>Primitive Assembly and Rasterization</h1>
 
 <p>The vertex shader passes the clip-space vertices to the next stage named <strong>primitive assembly and rasterization</strong>. The goal of the primitive assembly is to combine the clip-space vertices into a sequence of <strong>primitives</strong>. The primitives are classified into points, lines, and triangles. Then, various operations are performed on each primitive. The operations include back-face culling, viewport transform, and scan conversion. The last operation, scan conversion, is a key in real-time graphics and is often called rasterization. The stage for primitive assembly and rasterization is hardwired, but to control the behaviors, it is necessary to understand how its substages work.</p>
 
@@ -87,7 +87,7 @@
 <p align="center"><strong>Figure: Interpolated normals</strong></p>
 <p align="center"><img src="../../images/interpolated_normals.png" alt="Interpolated normals" /></p>
 
-         
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/graphics/cairo_n.htm b/org.tizen.guides/html/native/graphics/cairo_n.htm
index b0a67bc..fa43c89 100644 (file)
--- a/org.tizen.guides/html/native/graphics/cairo_n.htm
+++ b/org.tizen.guides/html/native/graphics/cairo_n.htm
@@ -107,7 +107,7 @@
 \r
 <h3>Creating a Cairo Image Surface in the Evas GL Backend</h3>\r
 \r
-<p>To develop an application with Elementary, you create a window by using the elementary utility function, <code>elm_win_util_standard_add()</code>. And, in order to make the GL application use the GPU, you must call the <code>elm_config_accel_preference_set()</code> function before creating the window. You also place an <code>Evas_Object</code> image into your application&#39;s main window. For more information about creating and placing an <code>Evas_Object</code> image, see <a href="../ui/efl/evas_basic_objects_n.htm">Manipulating Graphical Objects</a>.</p>\r
+<p>To develop an application with Elementary, you create a window by using the elementary utility function, <code>elm_win_util_standard_add()</code>. And, in order to make the GL application use the GPU, you must call the <code>elm_config_accel_preference_set()</code> function before creating the window. You also place an <code>Evas_Object</code> image into your application's main window. For more information about creating and placing an <code>Evas_Object</code> image, see <a href="../ui/efl/evas_basic_objects_n.htm">Manipulating Graphical Objects</a>.</p>\r
 \r
 <p>In the Cairo Image backend, you can create a new Cairo image surface by using the <code>cairo_image_surface_create()</code> or <code>cairo_image_surface_create_for_data()</code> function. The former function requires only the pixel format and dimensions to be specified, while the latter function requires additional data, such as a pointer to an image buffer (supplied by the application) in which to write the content. In order to display a result of Cairo rendering, you must also link an Evas image object to the created Cairo image surface. For this purpose, use the <code>evas_object_image_data_set()</code> function.</p>\r
 \r
@@ -119,9 +119,9 @@
 <p>Call the <code>cairo_image_surface_get_data()</code> function before calling the <code>evas_object_image_data_set()</code> function. The <code>cairo_image_surface_get_data()</code> function returns a pointer to the raw image data of the created image surface. This pointer is used for the raw data to be linked with an Evas image object in the  <code>evas_object_image_data_set()</code> function.</p>\r
 \r
 <pre class="prettyprint">\r
-elm_config_accel_preference_set(&quot;opengl&quot;);\r
-Evas_Object *win = elm_win_util_standard_add(&quot;Cairo Image Backend guide&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot; Cairo Image Backend guide&quot;);\r
+elm_config_accel_preference_set("opengl");\r
+Evas_Object *win = elm_win_util_standard_add("Cairo Image Backend guide",\r
+                                             " Cairo Image Backend guide");\r
 Evas_Object *img = evas_object_image_filled_add(evas_object_evas_get(win));\r
 evas_object_geometry_get(win, NULL, NULL, &amp;WIDTH, &amp;HEIGHT);\r
 \r
@@ -133,7 +133,7 @@ evas_object_image_alpha_set(img, 0);
 evas_object_show(img);\r
 \r
 cairo_surface_t *cairo_surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WIDTH, HEIGHT);\r
+                                                            WIDTH, HEIGHT);\r
 cairo_t *cairo = cairo_create(cairo_surface);\r
 /* Cairo drawing */\r
 \r
@@ -153,8 +153,8 @@ evas_object_image_data_update_add(img, 0, 0, WIDTH, HEIGHT);
 <p>To update a rectangular region on the screen, the <code>evas_object_image_data_update_add()</code> function can be used. For more information about the image object functions of Evas, see <a href="../ui/efl/evas_objects_n.htm#image">Image Objects</a>.</p>\r
  \r
 <pre class="prettyprint">\r
-Evas_Object *win = elm_win_util_standard_add(&quot;Cairo Image Backend guide&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot; Cairo Image Backend guide&quot;);\r
+Evas_Object *win = elm_win_util_standard_add("Cairo Image Backend guide",\r
+                                             " Cairo Image Backend guide");\r
 Evas_Object *img = evas_object_image_filled_add(evas_object_evas_get(win));\r
 evas_object_geometry_get(win, NULL, NULL, &amp;WIDTH, &amp;HEIGHT);\r
 \r
@@ -168,8 +168,8 @@ evas_object_show(img);
 int row_stride = cairo_format_stride_for_width(CAIRO_FORMAT_ARGB32, WIDTH);\r
 unsigned char *imageData = (unsigned char *)evas_object_image_data_get(img, EINA_TRUE);\r
 cairo_surface_t *cairo_surface =\r
-&nbsp;&nbsp;&nbsp;&nbsp;cairo_image_surface_create_for_data(imageData, CAIRO_FORMAT_ARGB32,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WIDTH, HEIGHT, row_stride);\r
+    cairo_image_surface_create_for_data(imageData, CAIRO_FORMAT_ARGB32,\r
+                                        WIDTH, HEIGHT, row_stride);\r
 cairo_t *cairo = cairo_create(cairo_surface);\r
 /* Cairo drawing */\r
 \r
@@ -198,8 +198,8 @@ evas_object_image_data_update_add(img, 0, 0, WIDTH, HEIGHT);
 <p>Afterwards, the <code>evas_gl_config</code>, <code>evas_gl_surface</code>, and <code>evas_gl_context</code> instances are created in that order. For more information on using Evas GL, see <a href="creating_opengles_n.htm">Creating OpenGL ES Applications</a> and the <a href="opengl_n.htm">OpenGL ES</a> guide.</p>\r
  \r
 <pre class="prettyprint">\r
-Evas_Object *win = elm_win_util_standard_add(&quot;Cairo GL Backend guide&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot; Cairo GL Backend guide&quot;);\r
+Evas_Object *win = elm_win_util_standard_add("Cairo GL Backend guide",\r
+                                             " Cairo GL Backend guide");\r
 Evas_Object *img = evas_object_image_filled_add(evas_object_evas_get(win));\r
 \r
 Evas_Native_Surface ns;\r
@@ -210,7 +210,7 @@ evas_gl_config-&gt;stencil_bits = EVAS_GL_STENCIL_BIT_8;
 evas_gl_config-&gt;multisample_bits = EVAS_GL_MULTISAMPLE_MED;\r
 \r
 Evas_GL_Surface *evas_gl_surface = evas_gl_surface_create(evas_gl, evas_gl_config,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WIDTH, HEIGHT);\r
+                                                          WIDTH, HEIGHT);\r
 Evas_GL_Context *evas_gl_context = evas_gl_context_create(evas_gl, NULL);\r
 evas_gl_native_surface_get(evas_gl, evas_gl_surface, &amp;ns);\r
 evas_object_image_native_surface_set(img, &amp;ns);\r
@@ -238,15 +238,15 @@ evas_object_image_pixels_get_callback_set(img, cairo_drawing, 0);
 </ul>\r
 \r
 <pre class="prettyprint">\r
-setenv(&quot;CAIRO_GL_COMPOSITOR&quot;, &quot;msaa&quot;, 1);\r
+setenv("CAIRO_GL_COMPOSITOR", "msaa", 1);\r
 cairo_device_t *cairo_device = cairo_evas_gl_device_create(evas_gl, evas_gl_context);\r
 cairo_boot_t thread_aware = 0;\r
 cairo_gl_device_set_thread_aware(cairo_device, thread_aware);\r
 cairo_surface_t *cairo_surface = cairo_gl_surface_create_for_evas_gl(cairo_device,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_surface,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_config,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WIDTH,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HEIGHT);\r
+                                                                     evas_gl_surface,\r
+                                                                     evas_gl_config,\r
+                                                                     WIDTH,\r
+                                                                     HEIGHT);\r
 cairo_t *cairo = cairo_create(cairo_surface);\r
 /* Cairo drawing */\r
 </pre>\r
@@ -275,22 +275,22 @@ cairo_surface_flush(cairo_surface);
 <pre class="prettyprint">\r
 /* Create a surface for destination */\r
 cairo_surface_t *cairo_surface = cairo_gl_surface_create_for_evas_gl(cr, evas_gl_surface,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_config,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WIDTH, HEIGHT);\r
+                                                                     evas_gl_config,\r
+                                                                     WIDTH, HEIGHT);\r
 \r
 Evas_GL_Config *evas_gl_config_source = evas_gl_config_new();\r
 evas_gl_config_source-&gt;color_format = EVAS_GL_RGBA_8888;\r
 evas_gl_config_source-&gt;stencil_bits = EVAS_GL_STENCIL_BIT_1;\r
 evas_gl_config_source-&gt;multisample_bits = EVAS_GL_MULTISAMPLE_LOW;\r
 evas_gl_surface_source = evas_gl_surface_create(evas_gl, evas_gl_config_source,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WIDTH, HEIGHT);\r
+                                                WIDTH, HEIGHT);\r
 \r
 /* Create a surface for source */\r
 cairo_surface_t *image_surface = cairo_image_surface_create_from_png(image);\r
 cairo_surface_t *gl_surface = cairo_gl_surface_create(cairo_device,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CAIRO_CONTENT_COLOR_ALPHA,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_width,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_height);\r
+                                                      CAIRO_CONTENT_COLOR_ALPHA,\r
+                                                      image_width,\r
+                                                      image_height);\r
 cairo_t *cairo = cairo_create(gl_surface);\r
 cairo_set_source_surface(cairo, image_surface, 0, 0);\r
 cairo_paint(cairo);\r
@@ -302,7 +302,7 @@ cairo_pattern_create_for_surface(gl_surface);
 <p>Cairo does not support a functionality for reading image files in JPEG or SPI format; only PNG is supported. With a PNG file, you can use the <code>cairo_image_surface_create_from_png()</code> function to make a new image surface from the image. However, handle this function with care, because it is experimental and only offers very simple functionality for reading PNG files.</p>\r
  \r
 <pre class="prettyprint">\r
-cairo_surface_t *image = cairo_image_surface_create_from_png(&quot;test_image.png&quot;);\r
+cairo_surface_t *image = cairo_image_surface_create_from_png("test_image.png");\r
 cairo_set_source_surface(cairo, image, 0, 0);\r
 cairo_paint(cairo);\r
 cairo_surface_destroy(image);\r
@@ -317,13 +317,13 @@ cairo_surface_destroy(image);
 \r
 <pre class="prettyprint">\r
 evas_object_geometry_get(win, NULL, NULL, &amp;surface_w, &amp;surface_h);\r
-Evas_Object *inline_buffr = elm_win_add(win, &quot;Img Read&quot;, ELM_WIN_INLINED_IMAGE);\r
+Evas_Object *inline_buffr = elm_win_add(win, "Img Read", ELM_WIN_INLINED_IMAGE);\r
 evas_object_move(inline_buffr, 0, 0);\r
 evas_object_resize(inline_buffr, surface_w, surface_h);\r
 \r
 /* As a temporary buffer */\r
 Evas_Object *decoded_img = evas_object_image_add(evas_object_evas_get(inline_buffer));\r
-evas_object_image_file_set(decoded_img, &quot;test_image.jpeg&quot;, NULL);\r
+evas_object_image_file_set(decoded_img, "test_image.jpeg", NULL);\r
 evas_object_image_size_get(decoded_img, &amp;w, &amp;h);\r
 evas_object_image_fill_set(decoded_img, 0, 0, w, h);\r
 evas_object_image_filled_set(decoded_img, EINA_TRUE);\r
@@ -335,8 +335,8 @@ evas_object_resize(decoded_img, w, h);
 <pre class="prettyprint">\r
 src_buffer = (unsigned char *)evas_object_image_data_get(decoded_img, EINA_TRUE);\r
 cairo_surface_t *source =\r
-&nbsp;&nbsp;&nbsp;&nbsp;cairo_image_surface_create_for_data(src_buffer, CAIRO_FORMAT_ARGB32, w, h,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_stride_get(decoded_img));\r
+    cairo_image_surface_create_for_data(src_buffer, CAIRO_FORMAT_ARGB32, w, h,\r
+                                        evas_object_image_stride_get(decoded_img));\r
 cairo_set_source_surface(cr, source, 0, 0);\r
 cairo_paint(cr);\r
 \r
@@ -365,7 +365,7 @@ cairo_surface_destroy(img);
 cairo_set_source_rgba(cairo, 1.0, 0.0, 0.0, 1.0);\r
 </pre>\r
 </li>\r
-<li>Gradients describe a progression of colors by setting a start and stop reference location and a series of &quot;stops&quot; along the way. There are linear and radial gradients built from 2 points. Stops are added to the gradient with the <code>cairo_add_color_stop_rgb()</code> and <code>cairo_add_color_stop_rgba()</code> functions which take a color like the <code>cairo_add_color_stop_rgb()</code> or <code>cairo_add_color_stop_rgba()</code> function, as well as an offset to indicate where it lies between the reference locations.</li>\r
+<li>Gradients describe a progression of colors by setting a start and stop reference location and a series of "stops" along the way. There are linear and radial gradients built from 2 points. Stops are added to the gradient with the <code>cairo_add_color_stop_rgb()</code> and <code>cairo_add_color_stop_rgba()</code> functions which take a color like the <code>cairo_add_color_stop_rgb()</code> or <code>cairo_add_color_stop_rgba()</code> function, as well as an offset to indicate where it lies between the reference locations.</li>\r
 <li>Images include both surfaces loaded from the existing files with the <code>cairo_image_surface_create_from_png()</code> function and surfaces created from within Cairo as an earlier destination. For more information about these Cairo APIs, see <a href="http://www.cairographics.org/manual/cairo-cairo-pattern-t.html" target="_blank">the cairo_pattern_t in cairographics.org</a>.</li>\r
 </ul>\r
 </li>\r
@@ -480,12 +480,12 @@ cairo_surface_destroy(surface);
 <p>To paint with image files:</p>\r
 <ol>\r
 <li>Get the image resource.\r
-<p>The following code snippet shows how to prepare image data for your application. To get an application&#39;s resource image data, use the <code>app_get_resource_path()</code> function. This gets a stored PNG image file path to use as a resource. For more information about the <code>app_get_resource_path()</code> function, see the App Common API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications.</p>\r
+<p>The following code snippet shows how to prepare image data for your application. To get an application's resource image data, use the <code>app_get_resource_path()</code> function. This gets a stored PNG image file path to use as a resource. For more information about the <code>app_get_resource_path()</code> function, see the App Common API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications.</p>\r
 <pre class="prettyprint">\r
 char image_filepath[256];\r
-char *source_filename = &quot;image.png&quot;;\r
+char *source_filename = "image.png";\r
 char *resource_path = app_get_resource_path();\r
-snprintf(image_filepath, 256, &quot;%s/%s&quot;, resource_path, source_filename);\r
+snprintf(image_filepath, 256, "%s/%s", resource_path, source_filename);\r
 free(resource_path);\r
 </pre>\r
 </li>\r
@@ -517,14 +517,14 @@ cairo_paint(cairo);
 <ol>\r
 <li>Prepare a text to use as a resource:\r
 <pre class="prettyprint">\r
-const char *utf8 = &quot;Hello, Tizen!&quot;;\r
+const char *utf8 = "Hello, Tizen!";\r
 </pre>\r
 </li>\r
 <li>Set text configurations.\r
-<p>In this example, create a font face implicitly using the <code>cairo_select_font_face()</code> function. The text is a kind of &quot;mask&quot; you are about to work with. To use a mask, you need a font type and font size. Set the font type as &quot;Sans&quot;, and font size as 52.</p>\r
+<p>In this example, create a font face implicitly using the <code>cairo_select_font_face()</code> function. The text is a kind of "mask" you are about to work with. To use a mask, you need a font type and font size. Set the font type as "Sans", and font size as 52.</p>\r
 <pre class="prettyprint">\r
-cairo_select_font_face(cairo, &quot;Sans&quot;, CAIRO_FONT_SLANT_NORMAL,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CAIRO_FONT_WEIGHT_NORMAL);\r
+cairo_select_font_face(cairo, "Sans", CAIRO_FONT_SLANT_NORMAL,\r
+                       CAIRO_FONT_WEIGHT_NORMAL);\r
 cairo_set_font_size(cairo, 52.0);\r
 </pre>\r
 </li>\r
diff --git a/org.tizen.guides/html/native/graphics/creating_opengles_n.htm b/org.tizen.guides/html/native/graphics/creating_opengles_n.htm
index e57c3c7..e33ce12 100644 (file)
--- a/org.tizen.guides/html/native/graphics/creating_opengles_n.htm
+++ b/org.tizen.guides/html/native/graphics/creating_opengles_n.htm
@@ -30,21 +30,21 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-<h1>Creating OpenGL ES Applications</h1>  
+<h1>Creating OpenGL ES Applications</h1>
 
 <p>The easiest way to use the OpenGL ES API in a Tizen application is to rely on the <code>Elm_GLView</code> component. The <code>Elm_GLView</code> component is one of the Elementary UI components, which creates an OpenGL ES (GL) target surface and a context. The <code>Elm_GLView</code> component can be embedded in any Tizen UI application. It is basically a wrapper of <code>Evas_GL</code>, the GL/EGL abstraction layer of EFL. By using the <code>Elm_GLView</code> component, you avoid having to consider how EGL environment is coupled with the native windowing systems. Some macros provided by EFL also allow you to use GL APIs directly. In addition, the UI framework can access the surface where the GPU outputs the rendering result and make the entire scene as a combination of 2D and 3D components in a single canvas.</p>
 
 <p>The following example shows the steps to create a GL application. From now on, the <code>Elm_GLView</code> component is shortened to GLView.</p>
 <ol>
 <li>Create a basic application as presented in the <a href="../../../../org.tizen.training/html/native/mobile/first_app_mn.htm#create">mobile</a> and <a href="../../../../org.tizen.training/html/native/wearable/first_app_wn.htm#create">wearable</a> Tizen first application example.
-<p>The UI application&#39;s skeleton makes available the window object, which can contain the GLView component.</p></li>
+<p>The UI application's skeleton makes available the window object, which can contain the GLView component.</p></li>
 <li>Enable hardware acceleration.
 <p>To develop a GL application, call the <code>elm_config_accel_preference_set()</code> function  before creating the window. It makes an application use the GPU.</p>
 <p>For developing an application with Elementary, create a window with the <code>elm_win_util_standard_add()</code> Elementary utility function.</p>
 <pre class="prettyprint">
 Evas_Object *win;
-elm_config_accel_preference_set(&quot;opengl&quot;);
-win = elm_win_util_standard_add(name, &quot;OpenGL example&quot;);
+elm_config_accel_preference_set("opengl");
+win = elm_win_util_standard_add(name, "OpenGL example");
 </pre>
 <p>You must also set hardware acceleration in the manifest file. For more information, see <a href="hw_acceleration_n.htm">Hardware Acceleration</a>.</p></li>
 <li>Initialize the GLView.
@@ -80,13 +80,13 @@ ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
 static Evas_Object*
 add_glview(Evas_Object* parent, appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object* glview;
+    Evas_Object* glview;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create and initialize GLView */
-&nbsp;&nbsp;&nbsp;&nbsp;glview = elm_glview_add(parent);
+    /* Create and initialize GLView */
+    glview = elm_glview_add(parent);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Prepare to use OpenGL ES APIs directly */
-&nbsp;&nbsp;&nbsp;&nbsp;ELEMENTARY_GLVIEW_GLOBAL_USE(glview);
+    /* Prepare to use OpenGL ES APIs directly */
+    ELEMENTARY_GLVIEW_GLOBAL_USE(glview);
 }
 </pre>
 <p>The <code>ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</code> and <code>ELEMENTARY_GLVIEW_GLOBAL_USE()</code> macros must be in the same source code. If you have a global header file in your application, the <code>ELEMENTARY_GLVIEW_GLOBAL_DECLARE()</code> macro can be in the header file. However, you must be very careful when using these macros. The recommended solution is to use the <code>ELEMENTARY_GLVIEW_USE()</code> macro in every client function. The following are some situations where you must not use the helper macros:</p>
@@ -122,12 +122,12 @@ elm_glview_del_func_set(glview, del_glview);
 static void
 init_glview(Evas_Object *glview)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set GL state color to pink */
-&nbsp;&nbsp;&nbsp;&nbsp;glClearColor(1.0, 0.2, 0.6, 1.0);
+    /* Set GL state color to pink */
+    glClearColor(1.0, 0.2, 0.6, 1.0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Do any form of OpenGL ES initialization here */
-&nbsp;&nbsp;&nbsp;&nbsp;/* init_shaders(); */
-&nbsp;&nbsp;&nbsp;&nbsp;/* init_vertices(); */
+    /* Do any form of OpenGL ES initialization here */
+    /* init_shaders(); */
+    /* init_vertices(); */
 }
 </pre>
 </li>
@@ -138,10 +138,10 @@ init_glview(Evas_Object *glview)
 static void
 resize_glview(Evas_Object *glview)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int w;
-&nbsp;&nbsp;&nbsp;&nbsp;int h;
-&nbsp;&nbsp;&nbsp;&nbsp;elm_glview_size_get(glview, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;&nbsp;glViewport(0, 0, w, h);
+    int w;
+    int h;
+    elm_glview_size_get(glview, &amp;w, &amp;h);
+    glViewport(0, 0, w, h);
 }
 </pre>
 </li>
@@ -152,11 +152,11 @@ resize_glview(Evas_Object *glview)
 static void
 draw_glview(Evas_Object *glview)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Paint it pink */
-&nbsp;&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+    /* Paint it pink */
+    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Usual OpenGL ES draw commands come here */
-&nbsp;&nbsp;&nbsp;&nbsp;/* draw_scene(); */
+    /* Usual OpenGL ES draw commands come here */
+    /* draw_scene(); */
 }
 </pre>
 </li>
@@ -167,9 +167,9 @@ draw_glview(Evas_Object *glview)
 static void
 del_glview(Evas_Object *glview)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy all the OpenGL ES resources here */
-&nbsp;&nbsp;&nbsp;&nbsp;/* destroy_shaders(); */
-&nbsp;&nbsp;&nbsp;&nbsp;/* destroy_objects(); */
+    /* Destroy all the OpenGL ES resources here */
+    /* destroy_shaders(); */
+    /* destroy_objects(); */
 }
 </pre>
 </li>
@@ -184,7 +184,7 @@ del_glview(Evas_Object *glview)
                  <p>If Direct Rendering is enabled, all GL functions must be called from the 4 GLView callback functions only. All other operations can break the rendering order and cause unexpected rendering.</p>
     </div>
 
-         
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/graphics/fragment_shader_n.htm b/org.tizen.guides/html/native/graphics/fragment_shader_n.htm
index f2d3e70..e40de2f 100644 (file)
--- a/org.tizen.guides/html/native/graphics/fragment_shader_n.htm
+++ b/org.tizen.guides/html/native/graphics/fragment_shader_n.htm
@@ -39,17 +39,17 @@
 <h1>Fragment Shader</h1>
 
 <p>The fragment shader has 2 important tasks: <strong>texturing</strong> and <strong>lighting</strong>. The texturing basics are covered in <a href="texturing_n.htm">Texturing</a>, and the lighting is handled here.</p>
-<p>The inputs to the fragment shader consist of:</p> 
+<p>The inputs to the fragment shader consist of:</p>
 
 <ul>
 <li>Varyings: Per-fragment variables, which are determined by interpolating the per-vertex output variables produced by the vertex shader</li>
 <li>Uniforms</li>
-<li>Samplers: Textures</li> 
+<li>Samplers: Textures</li>
 </ul>
-<p>The output of the fragment shader is the fragment color that is passed to the output merger.</p> 
+<p>The output of the fragment shader is the fragment color that is passed to the output merger.</p>
 
-<p id="output" align="center"><strong>Figure: Vertex and fragment shader outputs</strong></p> 
-<p align="center"><img alt="Vertex and fragment shader outputs" src="../../images/fragment_output.png" /></p>  
+<p id="output" align="center"><strong>Figure: Vertex and fragment shader outputs</strong></p>
+<p align="center"><img alt="Vertex and fragment shader outputs" src="../../images/fragment_output.png" /></p>
 
 
 <p>The following example is a simplest fragment shader, which performs just texturing. Given an <code>s_tex0</code> 2D image texture and the <code>v_texCoord</code> interpolated texture coordinates, the shader invokes the built-in <code>texture2D()</code> function to determine the color to be output to the built-in <code>gl_FragColor</code> variable:</p>
@@ -61,31 +61,31 @@ varying vec2 v_texCoord;
 void
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = texture2D(s_tex0, v_texCoord);
+    gl_FragColor = texture2D(s_tex0, v_texCoord);
 }
 </pre>
 
-<h2 id="phong" name="phong">Phong Lighting Model</h2> 
+<h2 id="phong" name="phong">Phong Lighting Model</h2>
 <p>Obviously, texturing alone is never enough to make an object look realistic. You need lighting or illumination, which refers to the technique handling the interaction between light sources and objects. The most popular real-time lighting technique is based on the <strong>Phong lighting model</strong>. It is composed of diffuse, specular, ambient, and emissive terms. For the sake of simplicity, this topic presents only the diffuse term. (For more information, see <a href="https://en.wikipedia.org/wiki/Phong_reflection_model" target="_blank">Phong reflection model</a> in Wikipedia.)</p>
 <p>The diffuse term is for the reflections from ideally diffuse surfaces, which are scattered with equal intensity in all directions (see the left image in the following figure). The amount of reflection perceived by the eye is proportional to the amount of incoming light. Consider a normalized <strong>light vector</strong> (denoted by <code>l</code>) connecting the surface point and the light source. The amount of incoming light is inversely proportional to the angle between <code>l</code> and the surface normal <code>n</code> (as shown in the middle image), and is described as <code>n&#8901;l</code>. In order to avoid negative reflection, it is modified into <code>max(n&#8901;l, 0)</code>.</p>
 
-<p id="diffuse" align="center"><strong>Figure: Diffuse reflection</strong></p> 
-<p align="center"><img alt="Diffuse reflection" src="../../images/fragment_diffuse.png" /></p>  
+<p id="diffuse" align="center"><strong>Figure: Diffuse reflection</strong></p>
+<p align="center"><img alt="Diffuse reflection" src="../../images/fragment_diffuse.png" /></p>
 
 
-<p>The reflected color of an object is determined by component-wise multiplication, as shown in the following figure. Suppose a white light source, (1,1,1). If an object lit by the light appears yellow, it means that the object reflects R and G and absorbs B. This kind of filtering can be implemented through the material parameter. For example, if it is (1,1,0), the reflected color is (1,1,1) &#8855; (1,1,0) = (1,1,0) where &#8855; is a component-wise multiplication.</p> 
+<p>The reflected color of an object is determined by component-wise multiplication, as shown in the following figure. Suppose a white light source, (1,1,1). If an object lit by the light appears yellow, it means that the object reflects R and G and absorbs B. This kind of filtering can be implemented through the material parameter. For example, if it is (1,1,0), the reflected color is (1,1,1) &#8855; (1,1,0) = (1,1,0) where &#8855; is a component-wise multiplication.</p>
+
+<p align="center"><strong>Figure: Component-wise multiplication for diffuse color</strong></p>
+<p align="center"><img alt="Component-wise multiplication for diffuse color" src="../../images/fragment_diffuse_color.png" /></p>
 
-<p align="center"><strong>Figure: Component-wise multiplication for diffuse color</strong></p> 
-<p align="center"><img alt="Component-wise multiplication for diffuse color" src="../../images/fragment_diffuse_color.png" /></p> 
- 
 
 
 <p>The diffuse term combines the intensity and color: <code>max(n&#8901;l, 0) s<sub>d</sub> &#8855; m<sub>d</sub></code> where <code>s<sub>d</sub></code> is the light source color and <code>m<sub>d</sub></code> is the object material color. The right side of the <a href="#diffuse">Diffuse reflection</a> figure shows an object lit with the diffuse term only.</p>
 
 <h2 id="shader" name="shader">Fragment Shader for Lighting and Texturing</h2>
 
-<p>The following example shows how to implement Phong lighting (with the diffuse term only) and texturing.</p> 
-<p>The vertex shader in the example computes the clip space vertex position and bypasses the texture coordinates, as usual. In addition, it outputs the &#39;world space&#39; vertex position and normal of each vertex. The <code>v_position</code>, <code>v_normal</code>, and <code>v_texCoord</code> output variables are interpolated for fragments and the per-fragment attributes are provided for the fragment shader.</p>
+<p>The following example shows how to implement Phong lighting (with the diffuse term only) and texturing.</p>
+<p>The vertex shader in the example computes the clip space vertex position and bypasses the texture coordinates, as usual. In addition, it outputs the 'world space' vertex position and normal of each vertex. The <code>v_position</code>, <code>v_normal</code>, and <code>v_texCoord</code> output variables are interpolated for fragments and the per-fragment attributes are provided for the fragment shader.</p>
 
 <pre class="prettyprint">
 uniform mat4 viewProjMat;
@@ -102,14 +102,14 @@ varying vec2 v_texCoord;
 void
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = viewProjMat * worldMat * vec4(position, 1.0);
-&nbsp;&nbsp;&nbsp;&nbsp;v_position = (worldMat * vec4(position, 1.0)).xyz;
-&nbsp;&nbsp;&nbsp;&nbsp;v_normal = mat3(worldMat) * normal;
-&nbsp;&nbsp;&nbsp;&nbsp;v_texCoord = texCoord;
+    gl_Position = viewProjMat * worldMat * vec4(position, 1.0);
+    v_position = (worldMat * vec4(position, 1.0)).xyz;
+    v_normal = mat3(worldMat) * normal;
+    v_texCoord = texCoord;
 }
 </pre>
 
-<p>The following fragment shader obtains the object material color (<code>m<sub>d</sub></code>) by filtering the texture and then asks the user-defined <code>phongDiffuse()</code> function to compute the diffuse term. It uses the <code>uniform vec3 lightPos</code> for calculating the light vector <code>l</code> (<code>lightDirection</code>) and simply implements <code>max(n&#8901;l, 0) s<sub>d</sub> &#8855; m<sub>d</sub></code> presented in <a href="#phong">Phong Lighting Model</a>.</p> 
+<p>The following fragment shader obtains the object material color (<code>m<sub>d</sub></code>) by filtering the texture and then asks the user-defined <code>phongDiffuse()</code> function to compute the diffuse term. It uses the <code>uniform vec3 lightPos</code> for calculating the light vector <code>l</code> (<code>lightDirection</code>) and simply implements <code>max(n&#8901;l, 0) s<sub>d</sub> &#8855; m<sub>d</sub></code> presented in <a href="#phong">Phong Lighting Model</a>.</p>
 
 <pre class="prettyprint">
 uniform sampler2D s_tex0;
@@ -125,24 +125,24 @@ vec3 phongDiffuse(vec3 Md); /* Forward declaration */
 void
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 Md = texture2D(s_tex0, v_texCoord).xyz;
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 phongColor = phongDiffuse(Md);
+    vec3 Md = texture2D(s_tex0, v_texCoord).xyz;
+    vec3 phongColor = phongDiffuse(Md);
 
-&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = vec4(phongColor, 1.0);
+    gl_FragColor = vec4(phongColor, 1.0);
 }
 
 vec3
 phongDiffuse(vec3 Md)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Diffuse term of Phong model per fragment */
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 lightDirection = normalize(lightPos - v_position);
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 nor = normalize(v_normal);
+    /* Diffuse term of Phong model per fragment */
+    vec3 lightDirection = normalize(lightPos - v_position);
+    vec3 nor = normalize(v_normal);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Diffuse term */
-&nbsp;&nbsp;&nbsp;&nbsp;float Diffuse = max(dot(nor, lightDirection), 0.0);
-&nbsp;&nbsp;&nbsp;&nbsp;vec3 PhongDiffuse = Diffuse * Sd * Md;
+    /* Diffuse term */
+    float Diffuse = max(dot(nor, lightDirection), 0.0);
+    vec3 PhongDiffuse = Diffuse * Sd * Md;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return PhongDiffuse;
+    return PhongDiffuse;
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/graphics/graphic_buffer_n.htm b/org.tizen.guides/html/native/graphics/graphic_buffer_n.htm
index c7ec36c..255ff30 100644 (file)
--- a/org.tizen.guides/html/native/graphics/graphic_buffer_n.htm
+++ b/org.tizen.guides/html/native/graphics/graphic_buffer_n.htm
@@ -42,7 +42,7 @@
 
 
 <h1>Graphic Buffer and Surface</h1>
- 
+
  <p>The Tizen Buffer Manager (TBM) surface allows you to manage the graphic buffer in Tizen. The TBM provides an abstraction interface for the graphic buffer and a user interface for the TBM surface. It supports the RGB and YUV graphic formats, as well as multiple plane graphic buffers.</p>
 
 <p>The TBM surface provides the following main features:</p>
@@ -76,7 +76,7 @@ tbm_format *formats;
 uint32_t format_num;
 
 if (tbm_surface_query_formats(&amp;formats, &amp;format_num) != TBM_SURFACE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to get formats supported by the system\n&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to get formats supported by the system\n");
 </pre>
 </li>
 
@@ -87,15 +87,15 @@ int i;
 tbm_surface_h surface = NULL;
 
 for (i = 0; i &lt; format_num; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;if (formats[i] == TBM_FORMAT_ARGB8888) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;surface = tbm_surface_create(128, 128, TBM_FORMAT_ARGB8888);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (surface == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to create tbm_surface\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (formats[i] == TBM_FORMAT_ARGB8888) {
+        surface = tbm_surface_create(128, 128, TBM_FORMAT_ARGB8888);
+        if (surface == NULL)
+            dlog_print(DLOG_ERROR, LOG_TAG, "Failed to create tbm_surface\n");
+        break;
+    }
 }
 if (i == format_num)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;format not supported\n&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "format not supported\n");
 </pre>
 </li>
 
@@ -105,8 +105,8 @@ if (i == format_num)
 tbm_surface_info_s surface_info;
 
 if (tbm_surface_map(surface, TBM_SURF_OPTION_READ|TBM_SURF_OPTION_WRITE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;surface_info) != TBM_SURFACE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to map tbm_surface\n&quot;);
+                    &amp;surface_info) != TBM_SURFACE_ERROR_NONE)
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to map tbm_surface\n");
 </pre>
 </li>
 
@@ -114,16 +114,16 @@ if (tbm_surface_map(surface, TBM_SURF_OPTION_READ|TBM_SURF_OPTION_WRITE,
 <p>Store data at the <code>tbm_surface</code> instance by using a pointer of each plane:</p>
 <pre class="prettyprint">
 for (i = 0; i &lt; surface_info.num_planes; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;memset(surface_info.planes[i].ptr, 0x0, surface_info.planes[i].size);
+    memset(surface_info.planes[i].ptr, 0x0, surface_info.planes[i].size);
 </pre>
 </li>
 
 <li>When no longer needed, unmap and destroy the <code>tbm_surface</code> instance:
 <pre class="prettyprint">
 if (tbm_surface_unmap(surface) != TBM_SURFACE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to unmap tbm_surface\n&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to unmap tbm_surface\n");
 if (tbm_surface_destroy(surface) != TBM_SURFACE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to destroy tbm_surface\n&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to destroy tbm_surface\n");
 free(formats);
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/graphics/graphics_cover_n.htm b/org.tizen.guides/html/native/graphics/graphics_cover_n.htm
index dfdff88..acb700d 100644 (file)
--- a/org.tizen.guides/html/native/graphics/graphics_cover_n.htm
+++ b/org.tizen.guides/html/native/graphics/graphics_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Graphics</title>  
+       <title>Graphics</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -31,7 +31,7 @@
                        <li><a href="../../../../org.tizen.training/html/native/feature/app_graphics_n.htm">Creating Applications with Graphics and Animation</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Graphics</h1>
@@ -60,7 +60,7 @@
 <li><a href="vulkan_n.htm">SDL Graphics with Vulkan</a>
 <p>You can get high-efficiency access to graphics and computing on modern GPUs with Vulkan. You can use cutting edge 3D programming tools to create high-quality games and real-time graphics in your applications.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/graphics/hw_acceleration_n.htm b/org.tizen.guides/html/native/graphics/hw_acceleration_n.htm
index 2b5ca29..dc25038 100644 (file)
--- a/org.tizen.guides/html/native/graphics/hw_acceleration_n.htm
+++ b/org.tizen.guides/html/native/graphics/hw_acceleration_n.htm
@@ -12,7 +12,7 @@
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
   <title>Hardware Acceleration</title>
  </head>
- 
+
  <body onload="prettyPrint()" style="overflow: auto;">
 
  <div id="toc-navigation">
@@ -29,20 +29,20 @@
     </div></div>
 </div>
 
-<div id="container"><div id="contents"><div class="content"> 
+<div id="container"><div id="contents"><div class="content">
 
 <h1>Hardware Acceleration</h1>
- 
+
 <p>Tizen supports hardware acceleration since Tizen 2.3.1. If hardware acceleration is enabled, it increases rendering performance and allows you to use OpenGL ES.</p>
 
-<p>You can enable hardware acceleration in the <code>tizen-manifest</code> file, using the manifest editor&#39;s <strong>Advanced</strong> tab.</p>
+<p>You can enable hardware acceleration in the <code>tizen-manifest</code> file, using the manifest editor's <strong>Advanced</strong> tab.</p>
+
+<p align="center"><strong>Figure: Hardware acceleration option</strong></p>
+<p align="center"><img alt="Hardware acceleration option" src="../../images/hw_acceleration.png" /></p>
 
-<p align="center"><strong>Figure: Hardware acceleration option</strong></p> 
-<p align="center"><img alt="Hardware acceleration option" src="../../images/hw_acceleration.png" /></p> 
- 
 <p>In the <code>tizen-manifest</code> file, the option is shows as follows:</p>
 <pre class="prettyprint">
-&lt;ui-application appid=&quot;example&quot; hw-acceleration=&quot;on&quot;&gt;
+&lt;ui-application appid="example" hw-acceleration="on"&gt;
 </pre>
 
 <p>The possible values are <code>on</code> (enabled) and <code>off</code> (disabled). If the value is not defined, the default system policy determines whether the hardware acceleration is enabled.</p>
@@ -54,15 +54,15 @@
 
 <p>In an indirect rendering mode:</p>
 <pre class="prettyprint">
-elm_config_accel_preference_set(&quot;opengl&quot;);
-win = elm_win_util_standard_add(name, &quot;OpenGL example&quot;);
+elm_config_accel_preference_set("opengl");
+win = elm_win_util_standard_add(name, "OpenGL example");
 </pre>
 <p>This function and option are supported since Tizen 2.3.</p>
 
 <p>In a direct rendering mode, if you want to use depth and stencil buffers or multisample, you have to specify them in the  <code>elm_config_accel_preference_set()</code> function:</p>
 <pre class="prettyprint">
-elm_config_accel_preference_set(&quot;opengl:depth24:stencil8:msaa_high&quot;);
-win = elm_win_util_standard_add(name, &quot;OpenGL example&quot;);
+elm_config_accel_preference_set("opengl:depth24:stencil8:msaa_high");
+win = elm_win_util_standard_add(name, "OpenGL example");
 </pre>
 <p>In the above example, the depth buffer size is 24 bit, stencil buffer size is 8 bit and MSAA is on with a high bit.</p>
 <p>These special options are supported since Tizen 2.3.1. For more information, see the <a href="opengl_n.htm">OpenGL ES</a> guide.</p>
@@ -70,8 +70,8 @@ win = elm_win_util_standard_add(name, &quot;OpenGL example&quot;);
 <li>EFL WebKit (EWK) application
 <p>In addition to enabling hardware acceleration in the manifest file, you must also call the <code>elm_config_accel_preference_set()</code> function before creating an elm window. Because EWK uses a 24-bit depth buffer and a 8-bit stencil buffer, you must also specify them in the <code>elm_config_accel_preference_set()</code> function:</p>
 <pre class="prettyprint">
-elm_config_accel_preference_set(&quot;opengl:depth24:stencil8&quot;);
-win = elm_win_util_standard_add(name, &quot;EWK example&quot;);
+elm_config_accel_preference_set("opengl:depth24:stencil8");
+win = elm_win_util_standard_add(name, "EWK example");
 </pre>
 <p>These special options are supported since Tizen 2.3.1. For more information, see the <a href="../connectivity/web_view_n.htm">Web View</a> guide.</p>
 </li></ul>
diff --git a/org.tizen.guides/html/native/graphics/interactive_ui_n.htm b/org.tizen.guides/html/native/graphics/interactive_ui_n.htm
index 14482fd..160043e 100644 (file)
--- a/org.tizen.guides/html/native/graphics/interactive_ui_n.htm
+++ b/org.tizen.guides/html/native/graphics/interactive_ui_n.htm
@@ -39,15 +39,15 @@
 
 <h1>Interactive UI</h1>
 
-<p>The 2D canvas in Tizen (the <code>Evas object</code>) has been designed to draw scenes optimally. This means that when drawing a new frame, it does not always read the <code>Evas_Object</code> data. This mechanism can cause a problem for a 3D scene, because the 3D scene is updated by the external module, such as the GPU, and <code>Evas</code> does not know whether the 3D scene is updated.</p> 
+<p>The 2D canvas in Tizen (the <code>Evas object</code>) has been designed to draw scenes optimally. This means that when drawing a new frame, it does not always read the <code>Evas_Object</code> data. This mechanism can cause a problem for a 3D scene, because the 3D scene is updated by the external module, such as the GPU, and <code>Evas</code> does not know whether the 3D scene is updated.</p>
 <p>To solve the problem, GLView provides the <code>elm_glview_changed_set()</code> function to notify Evas that the 3D scene must be updated in the next frame. The <code>draw_glview()</code> callback is then invoked while Evas renders the next frame. The application must call the <code>elm_glview_changed_set()</code> function whenever necessary:</p>
 <ul>
 <li><a href="#touch">Touch Event Handling</a> updates the scene by touch event, and you have to invoke the <code>elm_glview_changed_set()</code> function.</li>
 <li><a href="#update">Automatic Update</a> must be enabled to be used, and also requires calling the <code>elm_glview_changed_set()</code> function.</li>
 </ul>
 
-<h2 id="touch" name="touch">Touch Event Handling</h2> 
-<p>To handle touch events in Tizen, you must connect the event callback functions with <code>Evas_object</code>. The functions are registered by the <code>evas_object_event_callback_add()</code> function for a set of specific events which are already defined in EFL. To learn more about EFL event handling, see the <a href="../ui/efl/event_handling_n.htm">Event Handling</a>.</p> 
+<h2 id="touch" name="touch">Touch Event Handling</h2>
+<p>To handle touch events in Tizen, you must connect the event callback functions with <code>Evas_object</code>. The functions are registered by the <code>evas_object_event_callback_add()</code> function for a set of specific events which are already defined in EFL. To learn more about EFL event handling, see the <a href="../ui/efl/event_handling_n.htm">Event Handling</a>.</p>
 <p>The following examples show how to register callback functions for handling touch information and rotating a cube object:</p>
 
 <ol><li>Registering callback functions
@@ -57,16 +57,16 @@
 static Evas_Object*
 add_glview(Evas_Object *parent, appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *glview;
+    Evas_Object *glview;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create and initialize GLView */
-&nbsp;&nbsp;&nbsp;&nbsp;glview = elm_glview_add(parent);
+    /* Create and initialize GLView */
+    glview = elm_glview_add(parent);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize elm_GLView and set the rendering callback functions */
+    /* Initialize elm_GLView and set the rendering callback functions */
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
+    evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
+    evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
+    evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
 }
 </pre>
 </li>
@@ -77,45 +77,45 @@ add_glview(Evas_Object *parent, appdata_s *ad)
 static void
 mouse_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;&nbsp;elm_glview_changed_set(obj);
+    appdata_s *ad = (appdata_s *)data;
+    ad-&gt;mouse_down = EINA_TRUE;
+    elm_glview_changed_set(obj);
 }
 
 static void
 mouse_move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev;
-&nbsp;&nbsp;&nbsp;&nbsp;ev = (Evas_Event_Mouse_Move *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;float dx = 0, dy = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;mouse_down) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = ev-&gt;cur.canvas.x - ev-&gt;prev.canvas.x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = ev-&gt;cur.canvas.y - ev-&gt;prev.canvas.y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;xangle += dy;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;yangle += dx;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;elm_glview_changed_set(obj);
+    Evas_Event_Mouse_Move *ev;
+    ev = (Evas_Event_Mouse_Move *)event_info;
+    appdata_s *ad = (appdata_s *)data;
+
+    float dx = 0, dy = 0;
+
+    if (ad-&gt;mouse_down) {
+        dx = ev-&gt;cur.canvas.x - ev-&gt;prev.canvas.x;
+        dy = ev-&gt;cur.canvas.y - ev-&gt;prev.canvas.y;
+        ad-&gt;xangle += dy;
+        ad-&gt;yangle += dx;
+    }
+    elm_glview_changed_set(obj);
 }
 
 static void
 mouse_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+    appdata_s *ad = (appdata_s *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;mouse_down = EINA_FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;elm_glview_changed_set(obj);
+    ad-&gt;mouse_down = EINA_FALSE;
+    elm_glview_changed_set(obj);
 }
 </pre>
 
-<p>Each callback function has the <code>void *event_info</code> parameter in their signature. However, the parameter works differently depending on the registered events. In the <code>mouse_move_cb()</code> function, the void pointer <code>event_info</code> is cast to the <code>Evas_Event_Mouse_Move</code> type, which is associated with <code>EVAS_CALLBACK_MOUSE_MOVE</code>. Therefore, you can get the information about the screen point when the user touches the screen. Using this information, the angles, <code>xangle</code> and <code>yangle</code>, are accumulated and the accumulated data are used for calculating the rotation matrix in the <code>draw_glview()</code> callback functions.</p> 
+<p>Each callback function has the <code>void *event_info</code> parameter in their signature. However, the parameter works differently depending on the registered events. In the <code>mouse_move_cb()</code> function, the void pointer <code>event_info</code> is cast to the <code>Evas_Event_Mouse_Move</code> type, which is associated with <code>EVAS_CALLBACK_MOUSE_MOVE</code>. Therefore, you can get the information about the screen point when the user touches the screen. Using this information, the angles, <code>xangle</code> and <code>yangle</code>, are accumulated and the accumulated data are used for calculating the rotation matrix in the <code>draw_glview()</code> callback functions.</p>
 <p>Notice the <code>elm_glview_changed_set()</code> function. It notifies EFL that there has been a change in GLView. Then, the main loop of EFL invokes the rendering callback functions in GLView.</p></li></ol>
 
-<h2 id="update" name="update">Automatic Update</h2> 
-<p>In order to allow GLView to update scenes continuously, you must trigger the GLView rendering at every frame. The <code>Ecore_Animator</code> represents a method to enable the automatic update. It invokes the registered callback at every <code>N</code> seconds where <code>N</code> is the frametime interval set by the <code>ecore_animator_frametime_set()</code> function. Then you can call the <code>elm_glview_changed_set()</code> function at the animator&#39;s callback to keep the 3D scene being rendered while the animator works.</p> 
-<p>The <code>Ecore_Animator</code> instance can be replaced by <code>Ecore_Timer</code>, which produces the same result as <code>Ecore_Animator</code>. However, since <code>Ecore_Animator</code> provides more advantages in maintaining the updating loop, prefer <code>Ecore_Animator</code> instead of <code>Ecore_Timer</code>. For more information, see the Ecore Animator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Animator__Group.html">wearable</a> applications).</p> 
+<h2 id="update" name="update">Automatic Update</h2>
+<p>In order to allow GLView to update scenes continuously, you must trigger the GLView rendering at every frame. The <code>Ecore_Animator</code> represents a method to enable the automatic update. It invokes the registered callback at every <code>N</code> seconds where <code>N</code> is the frametime interval set by the <code>ecore_animator_frametime_set()</code> function. Then you can call the <code>elm_glview_changed_set()</code> function at the animator's callback to keep the 3D scene being rendered while the animator works.</p>
+<p>The <code>Ecore_Animator</code> instance can be replaced by <code>Ecore_Timer</code>, which produces the same result as <code>Ecore_Animator</code>. However, since <code>Ecore_Animator</code> provides more advantages in maintaining the updating loop, prefer <code>Ecore_Animator</code> instead of <code>Ecore_Timer</code>. For more information, see the Ecore Animator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Animator__Group.html">wearable</a> applications).</p>
 <p>The following example adds and deletes an animator with the callback function:</p>
 <ol><li>Adding <code>Ecore_Animator</code>
 <pre class="prettyprint">
@@ -130,7 +130,7 @@ mouse_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 */
 
 Ecore_Animator *ani = ecore_animator_add(anim_cb, glview);
-evas_object_data_set(glview, &quot;ani&quot;, ani);
+evas_object_data_set(glview, "ani", ani);
 evas_object_event_callback_add(glview, EVAS_CALLBACK_DEL, del_anim_cb, ad);
 </pre>
 </li>
@@ -139,21 +139,21 @@ evas_object_event_callback_add(glview, EVAS_CALLBACK_DEL, del_anim_cb, ad);
 static void
 del_anim_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Animator *ani = (Ecore_Animator *)evas_object_data_get(obj, &quot;ani&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_del(ani);
+    Ecore_Animator *ani = (Ecore_Animator *)evas_object_data_get(obj, "ani");
+    ecore_animator_del(ani);
 }
 
 static Eina_Bool
 anim_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_glview_changed_set((Evas_Object *)data);
+    elm_glview_changed_set((Evas_Object *)data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    return EINA_TRUE;
 }
 </pre>
 <p>The animator callback function is also triggered when the display is off. Use the <code>ecore_animator_freeze()</code> and <code>ecore_animator_thaw()</code> functions in the <code>app_pause_cb()</code> and <code>app_resume_cb()</code> callbacks for power saving.</p></li></ol>
 
-<h2 id="scene" name="scene">Integrating 3D Scene and 2D UI Components</h2> 
+<h2 id="scene" name="scene">Integrating 3D Scene and 2D UI Components</h2>
 <p>GLView can be used together with Elementary UI components. The following example creates a GLView and Elementary button component together in a simple box container. It is also possible to support interactions between 2D components and 3D scene.</p>
 <pre class="prettyprint">
 /* Create the box */
@@ -174,35 +174,35 @@ elm_box_pack_end(box, ad-&gt;glview);
 Evas_Object *button = elm_button_add(box);
 evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_FILL);
 evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 1);
-elm_object_text_set(button, &quot;Reset Animation&quot;);
-evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, ad);
+elm_object_text_set(button, "Reset Animation");
+evas_object_smart_callback_add(button, "clicked", clicked_cb, ad);
 evas_object_show(button);
 elm_box_pack_end(box, button);
 
 static void
 clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)user_data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   It is possible to change the 3D scene
-&nbsp;&nbsp;&nbsp;&nbsp;   For example, start animator to rotate the cube
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;if (!ad-&gt;reset_anim) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;reset_anim = EINA_TRUE;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Setting animation angle for 0.75 seconds */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;tic_xangle = (ad-&gt;xangle - 45.0f) / 45.0f;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;tic_yangle = (ad-&gt;yangle - 45.0f) / 45.0f;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Add animator which calls elm_glview_changed_set() per frame
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   This rotates the object tic_x(y)angle along X(Y)-axis
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   until object reaches the initial angle
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;ani = ecore_animator_add(anim_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_DEL, del_anim, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    appdata_s *ad = (appdata_s *)user_data;
+
+    /*
+       It is possible to change the 3D scene
+       For example, start animator to rotate the cube
+    */
+    if (!ad-&gt;reset_anim) {
+        ad-&gt;reset_anim = EINA_TRUE;
+
+        /* Setting animation angle for 0.75 seconds */
+        ad-&gt;tic_xangle = (ad-&gt;xangle - 45.0f) / 45.0f;
+        ad-&gt;tic_yangle = (ad-&gt;yangle - 45.0f) / 45.0f;
+
+        /*
+           Add animator which calls elm_glview_changed_set() per frame
+           This rotates the object tic_x(y)angle along X(Y)-axis
+           until object reaches the initial angle
+        */
+        ad-&gt;ani = ecore_animator_add(anim_cb, ad);
+        evas_object_event_callback_add(ad-&gt;glview, EVAS_CALLBACK_DEL, del_anim, ad);
+    }
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/graphics/opengl_n.htm b/org.tizen.guides/html/native/graphics/opengl_n.htm
index 2f497d7..32be2f0 100644 (file)
--- a/org.tizen.guides/html/native/graphics/opengl_n.htm
+++ b/org.tizen.guides/html/native/graphics/opengl_n.htm
@@ -26,7 +26,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
                <p class="toc-title">Content</p>
-               <ul class="toc">         
+               <ul class="toc">
                 <li>EvasGL
                         <ul class="toc">
                                <li><a href="#prerequisites">Prerequisites</a></li>
@@ -40,7 +40,7 @@
                 <li><a href="#ext">Using OpenGL ES Extensions</a></li>
             <li><a href="#evas_ext">Using EvasGL Extensions</a></li>
             <li><a href="#direct">Using Direct Rendering</a></li>
-            <li><a href="#client">Using Client-side Rotation</a></li>   
+            <li><a href="#client">Using Client-side Rotation</a></li>
                </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -54,7 +54,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-<h1>OpenGL ES</h1>  
+<h1>OpenGL ES</h1>
 
 <p>Today, most smart devices are equipped with Graphics Processing Units (GPU). This is the case for Tizen devices, as well. OpenGL ES is an interface to the GPU that consists of well-defined subsets of the desktop OpenGL API.</p>
 <p>Tizen native applications can use OpenGL ES not only for creating a 3D scene but also for a 2D scene that requires fast interaction. OpenGL ES is also good for improving performance and reducing power consumption when the native application performs computation-intensive tasks that can be run in parallel.</p>
@@ -71,7 +71,7 @@
           <li>Using callbacks
           <p>You can <a href="#callbacks">set the callbacks</a>.</p></li>
           <li>Setting a surface into the image object
-          <p>You can <a href="#nativeset">set a native surface into the image object</a>.</p></li> 
+          <p>You can <a href="#nativeset">set a native surface into the image object</a>.</p></li>
          <li>Using OpenGL ES extensions
          <p>You can <a href="#ext">check whether an extension is available, and call it</a>.</p></li>
          <li>Using EvasGL extensions
@@ -127,43 +127,43 @@ EVAS_GL_GLOBAL_GLES2_DEFINE();
 
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win; /* Application window */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img; /* OpenGL ES canvas */
-
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_GL *evasgl; /* EvasGL object for rendering GL in Evas */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_GL_Context *ctx; /* EvasGL context object, a GL rendering context in Evas GL */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_GL_Surface *sfc; /* EvasGL surface object, a GL rendering target in Evas GL */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_GL_Config *cfg; /* EvasGL surface configuration object for surface creation */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord sfc_w;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord sfc_h;
-
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int program;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int vtx_shader;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int fgmt_shader;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int vbo;
+    Evas_Object *win; /* Application window */
+    Evas_Object *img; /* OpenGL ES canvas */
+
+    Evas_GL *evasgl; /* EvasGL object for rendering GL in Evas */
+    Evas_GL_Context *ctx; /* EvasGL context object, a GL rendering context in Evas GL */
+    Evas_GL_Surface *sfc; /* EvasGL surface object, a GL rendering target in Evas GL */
+    Evas_GL_Config *cfg; /* EvasGL surface configuration object for surface creation */
+    Evas_Coord sfc_w;
+    Evas_Coord sfc_h;
+
+    unsigned int program;
+    unsigned int vtx_shader;
+    unsigned int fgmt_shader;
+    unsigned int vbo;
 };
 typedef struct appdata appdata_s;
 </pre>
- 
+
 <h2 id="creating" name="creating">Creating the Elm Window and EvasGL</h2>
 
 <p>To create the Elm window and EvasGL:</p>
 <ol>
     <li>Create a window and EvasGL.
        <p>For developing an application with Elementary, you create a window by using the Elementary utility function, <code>elm_win_util_standard_add()</code>. To develop a GL application and make the application use the GPU, you must call the <code>elm_config_accel_preference_set()</code> function before creating the window.</p>
- 
+
 <pre class="prettyprint">
 Evas_Object *win;
 
 /*
    To use OpenGL ES, the application must switch on hardware acceleration
-   To enable that, call elm_config_accel_preference_set() with &quot;opengl&quot;
+   To enable that, call elm_config_accel_preference_set() with "opengl"
    before creating the Elm window
    This function is supported since 2.3.
 */
-elm_config_accel_preference_set(&quot;opengl&quot;);
+elm_config_accel_preference_set("opengl");
 /* Creating Elm window */
-ad-&gt;win = elm_win_util_standard_add(&quot;Evas_GL Example&quot;, &quot;Evas_GL Example&quot;);
+ad-&gt;win = elm_win_util_standard_add("Evas_GL Example", "Evas_GL Example");
 </pre>
 
 <p>You can create the EvasGL handler using the <code>evas_gl_new()</code> function. This initializer takes the Evas canvas on which OpenGL ES is to be used as a parameter. When developing an application with Elementary, use the canvas of your window:</p>
@@ -241,7 +241,7 @@ ad-&gt;img = evas_object_image_filled_add(evas_object_evas_get(ad-&gt;win));
 </li>
 
 <li>
-<p>Define the &quot;OpenGL ES main loop&quot; function that is called every time the program attempts to get pixels from the image. Put all the OpenGL ES statements in charge of rendering the scene in this callback.</p>
+<p>Define the "OpenGL ES main loop" function that is called every time the program attempts to get pixels from the image. Put all the OpenGL ES statements in charge of rendering the scene in this callback.</p>
 
 <pre class="prettyprint">
 evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixels_get_cb, ad);
@@ -255,23 +255,23 @@ evas_object_image_pixels_get_callback_set(ad-&gt;img, img_pixels_get_cb, ad);
 static void
 img_pixels_get_cb(void *data, Evas_Object *obj)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Rendering process */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_make_current(ad-&gt;evasgl, ad-&gt;sfc, ad-&gt;ctx);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Because the surface size can be changed, set the viewport in this callback */
-&nbsp;&nbsp;&nbsp;&nbsp;glViewport(0, 0, ad-&gt;sfc_w, ad-&gt;sfc_h);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Paint it blue */
-&nbsp;&nbsp;&nbsp;&nbsp;glClearColor(0.2, 0.2, 0.6, 1.0);
-&nbsp;&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Usual OpenGL ES draw commands come here */
-&nbsp;&nbsp;&nbsp;&nbsp;/* draw_scene(); */
+    appdata_s *ad = data;
+    /* Rendering process */
+    evas_gl_make_current(ad-&gt;evasgl, ad-&gt;sfc, ad-&gt;ctx);
+    /* Because the surface size can be changed, set the viewport in this callback */
+    glViewport(0, 0, ad-&gt;sfc_w, ad-&gt;sfc_h);
+    /* Paint it blue */
+    glClearColor(0.2, 0.2, 0.6, 1.0);
+    glClear(GL_COLOR_BUFFER_BIT);
+    /* Usual OpenGL ES draw commands come here */
+    /* draw_scene(); */
 }</pre>
 
 <p>At every tick, set the given context as a current context for the given surface using the <code>evas_gl_make_current()</code> function.</p>
 </li>
 
 <li>You can use the <code>Ecore_Animator</code> to define the OpenGL ES main loop.
-<p>To use the <code>Ecore_Animator</code>, create a callback that is called on every animation tick. This animation callback is used only to mark the image as &quot;dirty&quot;, meaning that it needs an update next time Evas renders. It calls the pixel get callback that redraws the scene.</p>
+<p>To use the <code>Ecore_Animator</code>, create a callback that is called on every animation tick. This animation callback is used only to mark the image as "dirty", meaning that it needs an update next time Evas renders. It calls the pixel get callback that redraws the scene.</p>
 
 <p>The animator callback function is also triggered when the display is off. Use the <code>ecore_animator_freeze()</code> and <code>ecore_animator_thaw()</code> functions in the <code>app_pause_cb()</code> and <code>app_resume_cb()</code> callbacks for power saving.</p>
 
@@ -279,10 +279,10 @@ img_pixels_get_cb(void *data, Evas_Object *obj)
 static Eina_Bool
 animate_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = data;
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(img, EINA_TRUE);
+    Evas_Object *img = data;
+    evas_object_image_pixels_dirty_set(img, EINA_TRUE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    return ECORE_CALLBACK_RENEW;
 }
 
 ecore_animator_add(animate_cb, ad-&gt;img);
@@ -300,38 +300,38 @@ evas_object_event_callback_add(ad-&gt;win, EVAS_CALLBACK_RESIZE, win_resize_cb,
 
 <li>
 <p>Because the window size can be changed, set a resize callback for the window. In the callback, you must recreate an <code>Evas_GL_Surface</code> and reset the viewport size with the new window size:</p>
- 
+
 <pre class="prettyprint">
 static void
 win_resize_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;sfc) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_surface_destroy(ad-&gt;evasgl, ad-&gt;sfc);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, NULL, NULL, &amp;ad-&gt;sfc_w, &amp;ad-&gt;sfc_h);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_size_set(ad-&gt;img, ad-&gt;sfc_w, ad-&gt;sfc_h);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;img, ad-&gt;sfc_w, ad-&gt;sfc_h);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;img);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (!ad-&gt;sfc) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Native_Surface ns;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, ad-&gt;sfc_w, ad-&gt;sfc_h);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_pixels_dirty_set(ad-&gt;img, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    appdata_s *ad = data;
+
+    if (ad-&gt;sfc) {
+        evas_object_image_native_surface_set(ad-&gt;img, NULL);
+        evas_gl_surface_destroy(ad-&gt;evasgl, ad-&gt;sfc);
+        ad-&gt;sfc = NULL;
+    }
+
+    evas_object_geometry_get(obj, NULL, NULL, &amp;ad-&gt;sfc_w, &amp;ad-&gt;sfc_h);
+    evas_object_image_size_set(ad-&gt;img, ad-&gt;sfc_w, ad-&gt;sfc_h);
+    evas_object_resize(ad-&gt;img, ad-&gt;sfc_w, ad-&gt;sfc_h);
+    evas_object_show(ad-&gt;img);
+
+    if (!ad-&gt;sfc) {
+        Evas_Native_Surface ns;
+        ad-&gt;sfc = evas_gl_surface_create(ad-&gt;evasgl, ad-&gt;cfg, ad-&gt;sfc_w, ad-&gt;sfc_h);
+        evas_gl_native_surface_get(ad-&gt;evasgl, ad-&gt;sfc, &amp;ns);
+        evas_object_image_native_surface_set(ad-&gt;img, &amp;ns);
+        evas_object_image_pixels_dirty_set(ad-&gt;img, EINA_TRUE);
+    }
 }
 </pre></li>
 </ol>
 
 <h2 id="nativeset" name="nativeset">Setting a Surface into the Image Object</h2>
 
-<p>You can fill in the native surface information from the given EvasGL surface. For example, to adapt the surface to the target image when the size of the canvas changes:</p>  
+<p>You can fill in the native surface information from the given EvasGL surface. For example, to adapt the surface to the target image when the size of the canvas changes:</p>
 
 <pre class="prettyprint">
 Evas_Native_Surface ns;
@@ -356,7 +356,7 @@ Evas_GL_API *gl = elm_glview_api_get(glview);
 
 /* Check for support for the Program Binary OES extension */
 if (gl-&gt;glGetProgramBinaryOES)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Program binary extension is supported.\n&quot;);
+    printf("Program binary extension is supported.\n");
 </pre>
        </li>
        <li>Call an extension.
@@ -364,10 +364,10 @@ if (gl-&gt;glGetProgramBinaryOES)
 
 <pre class="prettyprint">
 if (gl-&gt;glGetProgramBinaryOES) {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[4096];
-&nbsp;&nbsp;&nbsp;&nbsp;size_t len;
-&nbsp;&nbsp;&nbsp;&nbsp;Glenum fmt;
-&nbsp;&nbsp;&nbsp;&nbsp;gl-&gt;glGetProgramBinaryOES(prgid, sizeof(buf), &amp;len, &amp;fmt, buf);
+    char buf[4096];
+    size_t len;
+    Glenum fmt;
+    gl-&gt;glGetProgramBinaryOES(prgid, sizeof(buf), &amp;len, &amp;fmt, buf);
 }
 </pre>
        </li>
@@ -390,7 +390,7 @@ if (gl-&gt;glGetProgramBinaryOES) {
 
 <pre class="prettyprint">
 if (gl-&gt;evasglCreateImageForContext &amp;&amp; gl-&gt;evasglDestroyImage)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Good... */
+    /* Good... */
 </pre>
        </li>
        <li>Create an image.
@@ -411,14 +411,14 @@ gl-&gt;glGenRenderbuffers(1, &amp;color_rb);
 gl-&gt;glBindRenderbuffer(GL_RENDERBUFFER_EXT, color_rb);
 gl-&gt;glRenderbufferStorage(GL_RENDERBUFFER_EXT, GL_RGBA, width, height);
 gl-&gt;glFramebufferRenderbufferEXT(GL_FRAMEBUFFER_EXT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_COLOR_ATTACHMENT0_EXT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_RENDERBUFFER_EXT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color_rb);
+                                 GL_COLOR_ATTACHMENT0_EXT,
+                                 GL_RENDERBUFFER_EXT,
+                                 color_rb);
 
 evgl = elm_glview_evas_gl_get(glview);
 ctx = evas_gl_current_context_get(evgl);
 image = gl-&gt;evasglCreateImageForContext(evgl, ctx, EVAS_GL_TEXTURE_2D,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)(intptr_t)color_rb, NULL);
+                                        (void *)(intptr_t)color_rb, NULL);
 </pre>
 
        <p>The EvasGL image is now created and available for use from another context.</p>
@@ -485,7 +485,7 @@ gl-&gt;evasglDestroyImage(image);
 
 <pre class="prettyprint">
 if (gl-&gt;evasglCreateSync)
-&nbsp;&nbsp;&nbsp;&nbsp;/* fence_sync must be supported */
+    /* fence_sync must be supported */
 </pre>
 </li>
 </ul>
@@ -497,33 +497,33 @@ if (gl-&gt;evasglCreateSync)
 <li>
 <p>To use direct rendering in GLView:</p>
 
-<p>In GLView, the <code>ELM_GLVIEW_DIRECT</code> option is one of GLView mode&#39;s enums and the option can be enabled using the <code>elm_glview_mode_set()</code> function.</p>
+<p>In GLView, the <code>ELM_GLVIEW_DIRECT</code> option is one of GLView mode's enums and the option can be enabled using the <code>elm_glview_mode_set()</code> function.</p>
 <pre class="prettyprint">
 /* Tizen 2.3 */
-/* elm_config_accel_preference_set(&quot;opengl&quot;); */
+/* elm_config_accel_preference_set("opengl"); */
 
 /* Since Tizen 2.3.1 */
-elm_config_accel_preference_set(&quot;opengl:depth24:stencil8:msaa_high&quot;);
-Evas_Object *win = elm_win_util_standard_add(&quot;sample&quot;, &quot;sample&quot;);
+elm_config_accel_preference_set("opengl:depth24:stencil8:msaa_high");
+Evas_Object *win = elm_win_util_standard_add("sample", "sample");
 
 Evas_Object *glview = elm_glview_add(win);
 elm_glview_mode_set(glview, ELM_GLVIEW_DEPTH_24 | ELM_GLVIEW_STENCIL_8
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| ELM_GLVIEW_MULTISAMPLE_HIGH);
+                            | ELM_GLVIEW_MULTISAMPLE_HIGH);
 </pre>
 
-<p>To use the Direct Rendering mode since Tizen 2.3.1, set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the <code>elm_config_accel_preference_set()</code> function and to a GLView object using the <code>elm_glview_mode_set()</code> function. If the GLView object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled.</p>
+<p>To use the Direct Rendering mode since Tizen 2.3.1, set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the <code>elm_config_accel_preference_set()</code> function and to a GLView object using the <code>elm_glview_mode_set()</code> function. If the GLView object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.</p>
 </li>
 <li>
 <p>To use direct rendering in EvasGL:</p>
 
-<p>In EvasGL, the <code>EVAS_GL_OPTIONS_DIRECT</code> is one of EvasGL&#39;s config options and the option can be enabled by setting the <code>Evas_GL_Config</code> option.</p>
+<p>In EvasGL, the <code>EVAS_GL_OPTIONS_DIRECT</code> is one of EvasGL's config options and the option can be enabled by setting the <code>Evas_GL_Config</code> option.</p>
 <pre class="prettyprint">
 /* Tizen 2.3 */
-/* elm_config_accel_preference_set(&quot;opengl&quot;); */
+/* elm_config_accel_preference_set("opengl"); */
 
 /* Since Tizen 2.3.1 */
-elm_config_accel_preference_set(&quot;opengl:depth24:stencil8:msaa_high&quot;);
-Evas_Object *win = elm_win_util_standard_add(&quot;sample&quot;, &quot;sample&quot;);
+elm_config_accel_preference_set("opengl:depth24:stencil8:msaa_high");
+Evas_Object *win = elm_win_util_standard_add("sample", "sample");
 
 Evas_GL_Config *cfg = evas_gl_config_new();
 cfg = evas_gl_config_new();
@@ -535,9 +535,9 @@ cfg-&gt;options_bits = EVAS_GL_OPTIONS_DIRECT;
 cfg-&gt;multisample_bits = EVAS_GL_MULTISAMPLE_HIGH;
 </pre>
 
-<p>To use the Direct Rendering mode since Tizen 2.3.1, set the same option values (depth, stencil, and MSAA) to a rendering engine and an <code>Evas_GL_Config</code> object. You can set the option values to a rendering engine using the <code>elm_config_accel_preference_set()</code> function. If the <code>Evas_GL_Config</code> object option values are bigger or higher than the rendering engine&#39;s, the Direct Rendering mode is disabled.</p>
+<p>To use the Direct Rendering mode since Tizen 2.3.1, set the same option values (depth, stencil, and MSAA) to a rendering engine and an <code>Evas_GL_Config</code> object. You can set the option values to a rendering engine using the <code>elm_config_accel_preference_set()</code> function. If the <code>Evas_GL_Config</code> object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.</p>
+
 
-  
     <div class="note">
         <strong>Note</strong>
         If direct rendering is enabled, EvasGL renders directly to the back buffer of the window. Otherwise, EvasGL renders to the off screen buffer, then composited to the back buffer of the window.
@@ -545,18 +545,18 @@ cfg-&gt;multisample_bits = EVAS_GL_MULTISAMPLE_HIGH;
 <p>Although direct rendering is enabled, EvasGL not always renders directly to the back buffer. The following conditions disable direct rendering and force a fallback to indirect rendering in a frame buffer:</p>
 
 <ul>
-       <li>If the object&#39;s color is not 255,255,255,255.</li>
+       <li>If the object's color is not 255,255,255,255.</li>
        <li>If the object has an Evas map.</li>
        <li>If the object size is different from the viewport (<code>RESIZE_POLICY_SCALE</code>).</li>
        <li>If the window is rotated and <code>CLIENT_SIDE_ROTATION</code> is not set.</li>
        <li>If the GLView policy is set to <code>ALWAYS</code> render or the EvasGL does not use pixel getter callback.</li>
 </ul>
     </div>
-  
+
     <div class="note">
         <strong>Caution</strong>
         In the render callback function, call only GL functions.
-<p>In case the GL functions are called outside the render callback function, you must call the <code>evas_gl_make_current()</code> function before the GL function calls. However, this results in a performance degradation due to context switching, and only works if the target surface is not an <code>Evas_GL_Surface</code> with Direct Rendering enabled.</p>   
+<p>In case the GL functions are called outside the render callback function, you must call the <code>evas_gl_make_current()</code> function before the GL function calls. However, this results in a performance degradation due to context switching, and only works if the target surface is not an <code>Evas_GL_Surface</code> with Direct Rendering enabled.</p>
 
 <p>If the target buffer is an <code>Evas_GL_Surface</code> with Direct Rendering enabled, all GL functions must be called from the render callback function only. All other operations can break the rendering order and the unexpected rendering occurs.</p>
     </div>
@@ -572,19 +572,19 @@ cfg-&gt;multisample_bits = EVAS_GL_MULTISAMPLE_HIGH;
 <ul>
 <li>To use GLView rotation:
 
-<p>In GLView, the <code>ELM_GLVIEW_CLIENT_SIDE_ROTATION</code> option is one of GLView mode&#39;s enums and the option can be enabled by using the <code>elm_glview_mode_set()</code> function. This option is needed only when Direct Rendering is enabled.</p>
+<p>In GLView, the <code>ELM_GLVIEW_CLIENT_SIDE_ROTATION</code> option is one of GLView mode's enums and the option can be enabled by using the <code>elm_glview_mode_set()</code> function. This option is needed only when Direct Rendering is enabled.</p>
 <pre class="prettyprint">
 Evas_Object *gl;
 gl = elm_glview_add(win);
 
 elm_glview_mode_set(gl, ELM_GLVIEW_DEPTH | ELM_GLVIEW_DIRECT
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| ELM_GLVIEW_CLIENT_SIDE_ROTATION);
+                        | ELM_GLVIEW_CLIENT_SIDE_ROTATION);
 </pre>
 </li>
 
 <li>To use EvasGL rotation:
 
-<p>In EvasGL, the <code>EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</code> is one of EvasGL&#39;s config options and this option can be enabled by setting the <code>Evas_GL_Config</code> option.</p>
+<p>In EvasGL, the <code>EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</code> is one of EvasGL's config options and this option can be enabled by setting the <code>Evas_GL_Config</code> option.</p>
 <pre class="prettyprint">
 Evas_GL_Config *cfg;
 cfg = evas_gl_config_new();
@@ -597,14 +597,14 @@ cfg-&gt;options_bits = EVAS_GL_OPTIONS_DIRECT | EVAS_GL_OPTIONS_CLIENT_SIDE_ROTA
 static void
 _draw_gl(Evas_Object *obj)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int w;
-&nbsp;&nbsp;&nbsp;&nbsp;int h;
-&nbsp;&nbsp;&nbsp;&nbsp;int rotation;
-&nbsp;&nbsp;&nbsp;&nbsp;elm_glview_size_get(obj, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;&nbsp;rotation = evas_gl_rotation_get(ad-&gt;evasgl);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (rotation % 180)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Adjust gl size */
+    int w;
+    int h;
+    int rotation;
+    elm_glview_size_get(obj, &amp;w, &amp;h);
+    rotation = evas_gl_rotation_get(ad-&gt;evasgl);
+
+    if (rotation % 180)
+        /* Adjust gl size */
 }
 </pre>
 
@@ -614,7 +614,7 @@ _draw_gl(Evas_Object *obj)
 
 <p align="center"><strong>Figure: OpenGL ES and EFL</strong></p>
 <p align="center"><img src="../../images/opengl_es_efl.png" alt="OpenGL ES and EFL" /></p>
-         
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/graphics/output_merging_n.htm b/org.tizen.guides/html/native/graphics/output_merging_n.htm
index 9500631..c780a75 100644 (file)
--- a/org.tizen.guides/html/native/graphics/output_merging_n.htm
+++ b/org.tizen.guides/html/native/graphics/output_merging_n.htm
@@ -38,20 +38,20 @@
 
 <h1>Output Merging</h1>
 
-<p>The fragment shader returns a colored fragment, often called the <strong>RGBAZ</strong> fragment. A (for alpha) represents the fragment&#39;s opacity whereas Z represents the depth. In the output merger, the fragment competes or combines with the pixel in the <strong>color buffer</strong> to update the pixel&#39;s color. A and Z are used in this process. In addition to the color buffer, OpenGL ES (GL) supports another buffer named <strong>depth buffer</strong> or <strong>z-buffer</strong>. It has the same resolution as the color buffer and stores the depth values of the pixels.</p> 
+<p>The fragment shader returns a colored fragment, often called the <strong>RGBAZ</strong> fragment. A (for alpha) represents the fragment's opacity whereas Z represents the depth. In the output merger, the fragment competes or combines with the pixel in the <strong>color buffer</strong> to update the pixel's color. A and Z are used in this process. In addition to the color buffer, OpenGL ES (GL) supports another buffer named <strong>depth buffer</strong> or <strong>z-buffer</strong>. It has the same resolution as the color buffer and stores the depth values of the pixels.</p>
 
 <h2 id="depth" name="depth">Depth Buffering</h2>
-<p>In the following figure, assume that <code>MinZ</code> of the viewport is 0.0, <code>MaxZ</code> is 1.0, the red triangle&#39;s depth is 0.8, and the blue triangle&#39;s is 0.5. By calling the <code>glClear()</code> function once per frame, the color and depth buffers are simultaneously cleared with the default values selected by the <code>glClearColor()</code> and <code>glClearDepthf()</code> functions, respectively.</p> 
+<p>In the following figure, assume that <code>MinZ</code> of the viewport is 0.0, <code>MaxZ</code> is 1.0, the red triangle's depth is 0.8, and the blue triangle's is 0.5. By calling the <code>glClear()</code> function once per frame, the color and depth buffers are simultaneously cleared with the default values selected by the <code>glClearColor()</code> and <code>glClearDepthf()</code> functions, respectively.</p>
 
-<p id="buffer" align="center"><strong>Figure: Depth buffering visualization: the rendering order is red to blue triangles</strong></p> 
-<p align="center"><img alt="Depth buffering visualization: the rendering order is red to blue triangles" src="../../images/output_depth_buffer1.png" /> <img alt="Depth buffering visualization: the rendering order is red to blue triangles" src="../../images/output_depth_buffer2.png" /></p> 
-  
+<p id="buffer" align="center"><strong>Figure: Depth buffering visualization: the rendering order is red to blue triangles</strong></p>
+<p align="center"><img alt="Depth buffering visualization: the rendering order is red to blue triangles" src="../../images/output_depth_buffer1.png" /> <img alt="Depth buffering visualization: the rendering order is red to blue triangles" src="../../images/output_depth_buffer2.png" /></p>
 
-<p>When a fragment at <code>(x,y)</code> is passed from the fragment shader, its depth value is compared with the depth buffer value at <code>(x,y)</code>. If the fragment has a smaller depth value, its color and depth update the color buffer and depth buffer at <code>(x,y)</code>, respectively. Otherwise, the fragment is discarded. The above figure shows how the depth buffer is used for filling the color buffer. This method is called <strong>depth buffering</strong> or <strong>z-buffering</strong>.</p> 
+
+<p>When a fragment at <code>(x,y)</code> is passed from the fragment shader, its depth value is compared with the depth buffer value at <code>(x,y)</code>. If the fragment has a smaller depth value, its color and depth update the color buffer and depth buffer at <code>(x,y)</code>, respectively. Otherwise, the fragment is discarded. The above figure shows how the depth buffer is used for filling the color buffer. This method is called <strong>depth buffering</strong> or <strong>z-buffering</strong>.</p>
 
 <h2 id="alpha" name="alpha">Alpha Blending</h2>
-<p>Suppose that the current fragment has a smaller depth than the pixel in the color buffer and is translucent. Then, the pixel must show through the fragment. This is achieved by blending the fragment color with the pixel color. The process uses the alpha value of the fragment, which is in the range of [0,1]: 0 denotes fully transparent and 1 denotes fully opaque.</p> 
-<p>A typical blending equation is <code>αc<sub>f</sub> + (1-α)c<sub>p</sub></code>, where <code>α</code> represents the fragment&#39;s opacity, <code>c<sub>f</sub></code> is the fragment color, and <code>c<sub>p</sub></code> is the pixel color. Assume that, in the <a href="#buffer">Depth buffering visualization</a> figure, all vertices of the blue triangle have the RGBA color, (0,0,1,0.5), and those of the red triangle have (1,0,0,1). The scan conversion algorithm interpolates the RGB channels and the alpha channel in the same manner. Therefore, all fragments of the blue triangle are assigned (0,0,1,0.5), and those of the red triangle are (1,0,0,1). Then, the blue fragment is blended with the red pixel at 3 pixel positions. The blended color is (0.5,0,0.5). This process is named <strong>alpha blending</strong>.</p>
+<p>Suppose that the current fragment has a smaller depth than the pixel in the color buffer and is translucent. Then, the pixel must show through the fragment. This is achieved by blending the fragment color with the pixel color. The process uses the alpha value of the fragment, which is in the range of [0,1]: 0 denotes fully transparent and 1 denotes fully opaque.</p>
+<p>A typical blending equation is <code>αc<sub>f</sub> + (1-α)c<sub>p</sub></code>, where <code>α</code> represents the fragment's opacity, <code>c<sub>f</sub></code> is the fragment color, and <code>c<sub>p</sub></code> is the pixel color. Assume that, in the <a href="#buffer">Depth buffering visualization</a> figure, all vertices of the blue triangle have the RGBA color, (0,0,1,0.5), and those of the red triangle have (1,0,0,1). The scan conversion algorithm interpolates the RGB channels and the alpha channel in the same manner. Therefore, all fragments of the blue triangle are assigned (0,0,1,0.5), and those of the red triangle are (1,0,0,1). Then, the blue fragment is blended with the red pixel at 3 pixel positions. The blended color is (0.5,0,0.5). This process is named <strong>alpha blending</strong>.</p>
 <p>GL supports the <code>glBlendFunc()</code> function, where the first parameter specifies the blending coefficient for the incoming (source) fragment and the second parameter specifies the blending coefficient for the destination pixel. Many values, such as <code>GL_ZERO</code> and <code>GL_ONE</code>, can be assigned to the parameters, but <code>GL_SRC_ALPHA</code> best fits the incoming fragment while <code>GL_ONE_MINUS_SRC_ALPHA</code> best fits the destination pixel.</p>
 
 
diff --git a/org.tizen.guides/html/native/graphics/polygon_mesh_n.htm b/org.tizen.guides/html/native/graphics/polygon_mesh_n.htm
index 6a5c8c5..f33d2e9 100644 (file)
--- a/org.tizen.guides/html/native/graphics/polygon_mesh_n.htm
+++ b/org.tizen.guides/html/native/graphics/polygon_mesh_n.htm
@@ -35,7 +35,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-<h1>Polygon Mesh in OpenGL ES</h1>  
+<h1>Polygon Mesh in OpenGL ES</h1>
 
 <p>In real-time applications, such as games, an object is usually represented as a <strong>polygon mesh</strong>. The only polygon that OpenGL ES (GL) supports is a triangle and because of this, a polygon mesh in GL implies a <strong>triangle mesh</strong>. Given an object, its polygon mesh can have different resolutions, as shown in the following figure.</p>
 <p>As the resolution is increased or the number of vertices increased, the polygon mesh samples the original smooth surface more accurately. However, rendering the mesh requires more time.</p>
@@ -65,7 +65,7 @@
 
 <p align="center"><strong>Figure: Computation of the vertex normals</strong></p>
 <p align="center"><img src="../../images/vertex_normals.png" alt="Computation of the vertex normals" /></p>
-         
+
 
 <h2 id="import_export">Polygon Mesh Export and Import</h2>
 
@@ -82,7 +82,7 @@
 <p align="center"><strong>Figure: Vertex and index arrays of a low-resolution sphere mesh</strong></p>
 <p align="center"><img src="../../images/low_res_arrays.png" alt="Vertex and index arrays of a low-resolution sphere mesh" /></p>
 
-         
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/graphics/texturing_n.htm b/org.tizen.guides/html/native/graphics/texturing_n.htm
index 333053b..3166cfb 100644 (file)
--- a/org.tizen.guides/html/native/graphics/texturing_n.htm
+++ b/org.tizen.guides/html/native/graphics/texturing_n.htm
@@ -42,63 +42,63 @@
 <h1>Texturing</h1>
 
 <p>While the vertex shader outputs the clip space vertices, the rasterizer outputs a set of fragments at the window space. The per-fragment attributes usually include a normal and a set of texture coordinates. Using these data, the fragment shader determines the final color of each fragment. The most important things to do in the fragment shader are <strong>lighting</strong> and <strong>texturing</strong>.</p>
-<p>Before moving on to the fragment shader, consider the basics of texturing. The simplest among the various texturing methods is image texturing. An image texture is a 2D array of <strong>texels</strong> (texture elements). Each texel has a unique position. In the first of the following figures, for example, the lower-left texel&#39;s position is (0.5,0.5). For accessing a texture, you can use &#39;normalized&#39; texture coordinates (<code>s,t</code>) instead of the texel position (as shown in the second of the following figures).</p>
+<p>Before moving on to the fragment shader, consider the basics of texturing. The simplest among the various texturing methods is image texturing. An image texture is a 2D array of <strong>texels</strong> (texture elements). Each texel has a unique position. In the first of the following figures, for example, the lower-left texel's position is (0.5,0.5). For accessing a texture, you can use 'normalized' texture coordinates (<code>s,t</code>) instead of the texel position (as shown in the second of the following figures).</p>
 
-<p align="center"><strong>Figure: 2D array of texels</strong></p> 
-<p align="center"><img alt="2D array of texels" src="../../images/texturing_texel.png" /></p>  
+<p align="center"><strong>Figure: 2D array of texels</strong></p>
+<p align="center"><img alt="2D array of texels" src="../../images/texturing_texel.png" /></p>
+
+<p align="center"><strong>Figure: Accessing textures using normalized texture coordinates</strong></p>
+<p align="center"><img alt="Accessing textures using normalized texture coordinates" src="../../images/texturing_normalise.png" /></p>
 
-<p align="center"><strong>Figure: Accessing textures using normalized texture coordinates</strong></p> 
-<p align="center"><img alt="Accessing textures using normalized texture coordinates" src="../../images/texturing_normalise.png" /></p> 
- 
 
 
 <h2 id="process" name="process">Processing Texture Coordinates</h2>
 
 <p>The texture coordinates are assigned to the vertices of the polygon mesh. (This process is called <strong>surface parameterization</strong> or simply <strong>parameterization</strong>, and it is done by graphics packages, such as 3ds Max.) The scan conversion is also done with the texture coordinates. In the following figure, the scan conversion interpolates the per-vertex texture coordinates to determine the per-fragment texture coordinates. For example, the lower-left corner fragment is assigned the texture coordinates, (1/8,1/8). OpenGL ES (GL) simply multiplies the per-fragment texture coordinates by the texture resolution, <code>r<sub>x</sub></code> and <code>r<sub>y</sub></code>. If the resolution is 4x4, the texture coordinates, (1/8,1/8), are mapped to (0.5,0.5) and the lower-left corner texel is retrieved from the image texture.</p>
 
-<p align="center"><strong>Figure: From the texture coordinates to the texel position</strong></p> 
-<p align="center"><img alt="From the texture coordinates to the texel position" src="../../images/texturing_position1.png" /> <img alt="From the texture coordinates to the texel position" src="../../images/texturing_position2.png" /> <img alt="From the texture coordinates to the texel position" src="../../images/texturing_position3.png" /></p>    
+<p align="center"><strong>Figure: From the texture coordinates to the texel position</strong></p>
+<p align="center"><img alt="From the texture coordinates to the texel position" src="../../images/texturing_position1.png" /> <img alt="From the texture coordinates to the texel position" src="../../images/texturing_position2.png" /> <img alt="From the texture coordinates to the texel position" src="../../images/texturing_position3.png" /></p>
 
 
 <h2 id="filter" name="filter">Texture Filtering</h2>
-<p>For a fragment located at (<code>x,y</code>) in the window, its texture coordinates (<code>s,t</code>) are mapped to (<code>s&#39;,t&#39;</code>) as presented above. Basically, the fragment at (<code>x,y</code>) is <strong>projected</strong> onto (<code>s&#39;,t&#39;</code>). In the contrived example given above, (<code>s&#39;,t&#39;</code>) exactly falls into the center of a texel. In reality, however, this rarely happens. Then, the texels around (<code>s&#39;,t&#39;</code>) are collected and combined to determine the texture color of the fragment. This process is called <strong>texture filtering</strong>.</p>
+<p>For a fragment located at (<code>x,y</code>) in the window, its texture coordinates (<code>s,t</code>) are mapped to (<code>s',t'</code>) as presented above. Basically, the fragment at (<code>x,y</code>) is <strong>projected</strong> onto (<code>s',t'</code>). In the contrived example given above, (<code>s',t'</code>) exactly falls into the center of a texel. In reality, however, this rarely happens. Then, the texels around (<code>s',t'</code>) are collected and combined to determine the texture color of the fragment. This process is called <strong>texture filtering</strong>.</p>
 
 <p>Suppose a quad composed of 2 triangles. Depending on the view, view frustum, and viewport parameters, the quad size in the window space may vary. In the following figure, the top row shows a case where the window space quad appears larger than the given image texture. Then, the texture is <strong>magnified</strong> so as to be pasted onto the quad. In contrast, the window space quad in the bottom row appears smaller than the image texture, and the texture is <strong>minified</strong>. Note that the fragments are sparsely projected onto the texture space.</p>
 <p>In the figure, the texture is depicted as a grid of dotted lines, where a texel is located in a grid cell. The gold dots represent the window space fragments projected onto the texture space.</p>
 
-<p align="center"><strong>Figure: Magnification (top) vs. minification (bottom)</strong></p> 
-<p align="center"><img alt="Magnification (top) vs. minification (bottom)" src="../../images/texturing_magnification.png" /></p>  
-<p align="center"><img alt="Magnification (top) vs. minification (bottom)" src="../../images/texturing_minification.png" /></p>  
- 
+<p align="center"><strong>Figure: Magnification (top) vs. minification (bottom)</strong></p>
+<p align="center"><img alt="Magnification (top) vs. minification (bottom)" src="../../images/texturing_magnification.png" /></p>
+<p align="center"><img alt="Magnification (top) vs. minification (bottom)" src="../../images/texturing_minification.png" /></p>
+
 
 <h3>Filtering for Magnification</h3>
 <p>In case of magnification, you have 2 options. The first is <strong>nearest point sampling</strong>. Then, as you can see in the left example below, a block of fragments can be mapped to a single texel. Consequently, a blocky image is often produced. The second option is <strong>bilinear interpolation</strong> illustrated in the right example below. In general, bilinear interpolation is preferred to nearest point sampling.</p>
 
-<p align="center"><strong>Figure: Nearest point sampling (left) vs. bilinear interpolation (right)</strong></p> 
-<p align="center"><img alt="Nearest point sampling (left) vs. bilinear interpolation (right)" src="../../images/texturing_nearest.png" /> <img alt="Nearest point sampling (left) vs. bilinear interpolation (right)" src="../../images/texturing_bilinear.png" /></p>       
+<p align="center"><strong>Figure: Nearest point sampling (left) vs. bilinear interpolation (right)</strong></p>
+<p align="center"><img alt="Nearest point sampling (left) vs. bilinear interpolation (right)" src="../../images/texturing_nearest.png" /> <img alt="Nearest point sampling (left) vs. bilinear interpolation (right)" src="../../images/texturing_bilinear.png" /></p>
 
 
 <h3>Filtering for Minification</h3>
 <p>Consider the checkerboard image texture in the following figure. If all fragments are surrounded by dark-gray texels, the textured primitive appears dark gray. If all fragments are surrounded by light-gray texels, the textured primitive appears light gray.</p>
 
-<p align="center"><strong>Figure: Minification problem</strong></p> 
-<p align="center"><img alt="Minification problem" src="../../images/texturing_problem.png" /></p>  
+<p align="center"><strong>Figure: Minification problem</strong></p>
+<p align="center"><img alt="Minification problem" src="../../images/texturing_problem.png" /></p>
 
 
 <h2 id="mipmap" name="mipmap">Mipmapping</h2>
 
-<p>The filtering for minification process discussed above has a problem, because the texture is larger than the window space primitive and therefore many texels are not involved in texture filtering. The solution is to make the texture smaller, so that all texels are involved for texture filtering. The best case is that the window space primitive and the texture have the same size.</p> 
-<p>To make the texture smaller, it is repeatedly down-sampled to a quarter size, and the colors of 2x2 neighboring texels are averaged to determine the color of a texel in the quarter texture, as shown in the following figure. Given an original texture of 2<code><sup>l</sup></code>x2<code><sup>l</sup></code> resolution, a texture pyramid of (<code>l</code> + 1) levels is constructed, where the original texture is located at level 0. The pyramid is called a <strong>mipmap</strong>.</p> 
+<p>The filtering for minification process discussed above has a problem, because the texture is larger than the window space primitive and therefore many texels are not involved in texture filtering. The solution is to make the texture smaller, so that all texels are involved for texture filtering. The best case is that the window space primitive and the texture have the same size.</p>
+<p>To make the texture smaller, it is repeatedly down-sampled to a quarter size, and the colors of 2x2 neighboring texels are averaged to determine the color of a texel in the quarter texture, as shown in the following figure. Given an original texture of 2<code><sup>l</sup></code>x2<code><sup>l</sup></code> resolution, a texture pyramid of (<code>l</code> + 1) levels is constructed, where the original texture is located at level 0. The pyramid is called a <strong>mipmap</strong>.</p>
 
-<p align="center"><strong>Figure: Mipmap generation process</strong></p> 
-<p align="center"><img alt="Mipmap generation process" src="../../images/texturing_mipmap1.png" /> <img alt="Mipmap generation process" src="../../images/texturing_mipmap2.png" /></p>   
+<p align="center"><strong>Figure: Mipmap generation process</strong></p>
+<p align="center"><img alt="Mipmap generation process" src="../../images/texturing_mipmap1.png" /> <img alt="Mipmap generation process" src="../../images/texturing_mipmap2.png" /></p>
 
 
 <h3>Mipmap Generation in GL</h3>
 <p>To automatically generate a mipmap, GL invokes the <code>glGenerateMipmap()</code> function, where the parameter can be, for example, <code>GL_TEXTURE_2D</code> or <code>GL_TEXTURE_CUBE_MAP</code> (textures in GL 2.0 come in 2 forms: 2D textures and cube map textures). Use <code>GL_TEXTURE_2D</code> for general image texturing.</p>
 
-<h3 id="mipmap_mini">Mipmapping for Minification</h3> 
-<p>In any given a mipmap, you must decide which level you want to use for texture filtering. Observe that a pixel (fragment) covers an area on the screen. For simplicity, consider the area as a square so that the entire screen is tiled by an array of square pixels. Then, a pixel&#39;s projection onto the texture space is not a &#39;point&#39;, but an &#39;area&#39; centered at (<code>s&#39;,t&#39;</code>). The projected area is called the <strong>footprint</strong> of the pixel.</p> 
+<h3 id="mipmap_mini">Mipmapping for Minification</h3>
+<p>In any given a mipmap, you must decide which level you want to use for texture filtering. Observe that a pixel (fragment) covers an area on the screen. For simplicity, consider the area as a square so that the entire screen is tiled by an array of square pixels. Then, a pixel's projection onto the texture space is not a 'point', but an 'area' centered at (<code>s',t'</code>). The projected area is called the <strong>footprint</strong> of the pixel.</p>
 <p>As a simple example, consider a footprint that covers <code>m x m</code> texels of the level-0 texture. Then, the GPU computes <code>log<sub>2</sub>m</code>, which is denoted by &#955;. In the following figure, &#955; = log<sub>2</sub>3 &#8776; 1.585. Consider then &#8970;&#955;&#8971; and &#8968;&#955;&#8969;, which in this example are levels 1 and 2. You have 2 options:</p>
 
 <ul>
@@ -108,19 +108,19 @@
 <li>In contrast, you can do bilinear interpolation.</li>
 </ul>
 </li>
-<li>Consider both &#8970;&#955;&#8971; and &#8968;&#955;&#8969; and then linearly interpolate the filtering results. Of course, each level can be filtered either by nearest point sampling or by bilinear interpolation.  
+<li>Consider both &#8970;&#955;&#8971; and &#8968;&#955;&#8969; and then linearly interpolate the filtering results. Of course, each level can be filtered either by nearest point sampling or by bilinear interpolation.
 <p>For example: Take &#8970;&#955;&#8971; and &#8968;&#955;&#8969; and linearly interpolate the filtering results.</p>
 <ul><li>At each level, you can take the nearest point.</li>
 <li>In contrast, you can do bilinear interpolation.</li></ul>
 </li></ul>
 <p>Note that the last case performs 3 levels of linear interpolations. It is called <strong>trilinear interpolation</strong>.</p>
 
-<p align="center"><strong>Figure: Selecting the mipmap levels</strong></p> 
-<p align="center"><img alt="Selecting the mipmap levels" src="../../images/texturing_mipmap_levels.png" /></p>  
+<p align="center"><strong>Figure: Selecting the mipmap levels</strong></p>
+<p align="center"><img alt="Selecting the mipmap levels" src="../../images/texturing_mipmap_levels.png" /></p>
 
 <p>There is of course a third option: not to do mipmapping but to use the original image (at level 0) instead. It can be filtered either by nearest point sampling or by bilinear interpolation. Therefore, minification has 6 varieties in total.</p>
 
-<h2 id="gl" name="gl">Texturing in GL</h2>     
+<h2 id="gl" name="gl">Texturing in GL</h2>
 
 <p>When an image file is to be used as a texture, it is first loaded into the GL program. Then, you must take the following steps:</p>
 
@@ -129,7 +129,7 @@
 <li>Use the <code>glBindTexture()</code> function, where the first parameter specifies what the texture is used for as, for example, <code>GL_TEXTURE_2D</code> or <code>GL_TEXTURE_CUBE_MAP</code>.</li>
 <li>After a texture object is generated and bound, the image data must be loaded using the <code>glTexImage2D()</code> function, where the first parameter is either <code>GL_TEXTURE_2D</code> or one of the cube-map faces, such as <code>GL_TEXTURE_CUBE_MAP_POSITIVE_X</code>, the second parameter specifies the mipmap level, and the eighth parameter can be, for example, <code>GL_UNSIGNED_SHORT_4_4_4_4</code> or <code>GL_UNSIGNED_SHORT_5_6_5</code>.</li>
 <li>The GPU itself makes a choice between minification and magnification, but allows you to select what kind of filtering to use in each case. For this purpose, invoke the <code>glTexParameteri()</code> function. If the second parameter (parameter name) is <code>GL_TEXTURE_MAG_FILTER</code>, the third parameter is either <code>GL_NEAREST</code> or <code>GL_LINEAR</code>. If the second parameter is <code>GL_TEXTURE_MIN_FILTER</code>, the third parameter is either <code>GL_NEAREST_MIPMAP_NEAREST</code>, <code>GL_LINEAR_MIPMAP_NEAREST</code>, <code>GL_NEAREST_MIPMAP_LINEAR</code>, <code>GL_LINEAR_MIPMAP_LINEAR</code>, <code>GL_NEAREST</code>, or <code>GL_LINEAR</code>. These 6 options are those presented in <a href="#mipmap_mini">Mipmapping for Minification</a>.</li>
-</ol> 
+</ol>
 
 <h2 id="example" name="example">Texturing Example</h2>
 <p>In order to generate a texture in GL, you usually have to decode the image file stored in the file system. In Tizen, you can use the Evas API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">wearable</a> applications) to get the decoded bitmap buffer from the image file, as shown in the following example. The code creates an independent <code>Ecore_Evas</code> object, which contains <code>Evas_Object</code>. It provides a method to decode the designated image file and store the bitmap data into its own buffer. You can get the internal buffer pointer and then upload the buffer to the texture.</p>
@@ -144,56 +144,56 @@
 unsigned int
 create_texture(Evas_Object *parent, const char *filename)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int gltex_object;
-&nbsp;&nbsp;&nbsp;&nbsp;int w;
-&nbsp;&nbsp;&nbsp;&nbsp;int h;
-&nbsp;&nbsp;&nbsp;&nbsp;int surface_w;
-&nbsp;&nbsp;&nbsp;&nbsp;int surface_h;
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_geometry_get(parent, NULL, NULL, &amp;surface_w, &amp;surface_h);
+    unsigned int gltex_object;
+    int w;
+    int h;
+    int surface_w;
+    int surface_h;
+    evas_object_geometry_get(parent, NULL, NULL, &amp;surface_w, &amp;surface_h);
 
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *inline_buffer = elm_win_add(parent, &quot;Img Read&quot;, ELM_WIN_INLINED_IMAGE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(inline_buffer, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(inline_buffer, surface_w, surface_h);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(inline_buffer);
+    Evas_Object *inline_buffer = elm_win_add(parent, "Img Read", ELM_WIN_INLINED_IMAGE);
+    evas_object_move(inline_buffer, 0, 0);
+    evas_object_resize(inline_buffer, surface_w, surface_h);
+    evas_object_show(inline_buffer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *canvas = evas_object_evas_get(inline_buffer);
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *image = evas_object_image_add(canvas);
+    Evas *canvas = evas_object_evas_get(inline_buffer);
+    Evas_Object *image = evas_object_image_add(canvas);
 
-&nbsp;&nbsp;&nbsp;&nbsp;char path[200];
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(path, &quot;%s%s&quot;, app_get_resource_path(), filename);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(image, path, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_size_get(image, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(image, 0, 0, w, h);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_filled_set(image, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(image, w, h);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(image);
+    char path[200];
+    sprintf(path, "%s%s", app_get_resource_path(), filename);
+    evas_object_image_file_set(image, path, NULL);
+    evas_object_image_size_get(image, &amp;w, &amp;h);
+    evas_object_image_fill_set(image, 0, 0, w, h);
+    evas_object_image_filled_set(image, EINA_TRUE);
+    evas_object_resize(image, w, h);
+    evas_object_show(image);
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_render(inline_buffer);
+    elm_win_render(inline_buffer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;GLubyte *pixels;
-&nbsp;&nbsp;&nbsp;&nbsp;pixels = (GLubyte *)evas_object_image_data_get(image, EINA_FALSE);
+    GLubyte *pixels;
+    pixels = (GLubyte *)evas_object_image_data_get(image, EINA_FALSE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;glGenTextures(1, &amp;gltex_object);
+    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
+    glGenTextures(1, &amp;gltex_object);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, gltex_object);
+    glBindTexture(GL_TEXTURE_2D, gltex_object);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glTexImage2D(GL_TEXTURE_2D, 0, GL_BGRA_EXT, w, h, 0, GL_BGRA_EXT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_BYTE, pixels);
+    glTexImage2D(GL_TEXTURE_2D, 0, GL_BGRA_EXT, w, h, 0, GL_BGRA_EXT,
+                 GL_UNSIGNED_BYTE, pixels);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glGenerateMipmap(GL_TEXTURE_2D);
+    glGenerateMipmap(GL_TEXTURE_2D);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
-&nbsp;&nbsp;&nbsp;&nbsp;glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, 0);
+    glBindTexture(GL_TEXTURE_2D, 0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(inline_buffer);
+    evas_object_del(inline_buffer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return gltex_object;
+    return gltex_object;
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/graphics/vertex_shader_n.htm b/org.tizen.guides/html/native/graphics/vertex_shader_n.htm
index 11b1846..8a95917 100644 (file)
--- a/org.tizen.guides/html/native/graphics/vertex_shader_n.htm
+++ b/org.tizen.guides/html/native/graphics/vertex_shader_n.htm
@@ -41,9 +41,9 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-<h1>Vertex Shader</h1> 
- 
-<p>The GPU rendering pipeline is split into <strong>programmable</strong> stages (vertex and fragment shaders) and <strong>hard-wired</strong> stages (&quot;primitive assembler &amp; rasterizer&quot; and &quot;output merger&quot;). </p>
+<h1>Vertex Shader</h1>
+
+<p>The GPU rendering pipeline is split into <strong>programmable</strong> stages (vertex and fragment shaders) and <strong>hard-wired</strong> stages ("primitive assembler &amp; rasterizer" and "output merger"). </p>
 
 <p align="center"><strong>Figure: Stages of the GPU rendering pipeline</strong></p>
 <p align="center"><img src="../../images/gpu_stages.png" alt="Stages of the GPU rendering pipeline" /></p>
@@ -56,7 +56,7 @@
 <h2 id="object_world_space">Object Space, World Space, and World Transform</h2>
 
 <p>Whereas the coordinate system used for creating an object is named <strong>object space</strong>, the virtual world containing all required objects is associated with the <strong>world space</strong>. The size, position, and orientation of an object in the world space are determined by what is called <strong>world transform</strong>. (GL calls this <strong>model transform</strong>.) Its main components are scaling, translation, and rotation. A distinct object has its own world transform. The following figure shows a world-transform example.</p>
-<p>In the world space, many objects can exist. Among them, consider a teapot. In this example, its world transform is the combination of &quot;rotation about the Y axis by 90 degrees&quot; and &quot;translation along the X axis by 7 units&quot;.</p>
+<p>In the world space, many objects can exist. Among them, consider a teapot. In this example, its world transform is the combination of "rotation about the Y axis by 90 degrees" and "translation along the X axis by 7 units".</p>
 <p align="center"><strong>Figure: Transformation of a teapot object</strong></p>
 <p align="center"><img src="../../images/teapot_transformation.png" alt="Transformation of a teapot object" /></p>
 
@@ -73,13 +73,13 @@
 <p align="center"><strong>Figure: Computing the view space</strong></p>
 <p align="center"><img src="../../images/view_space.png" alt="Computing the view space" /></p>
 
-<p>There are 2 coordinate systems, world space and view space. Note that a point is given different coordinates in different spaces. Suppose that, as shown in the following figure, <strong>AT</strong> is located at the teapot&#39;s mouth end (10,2,0) and <strong>EYE</strong> is at (18,8,0). Then, the teapot&#39;s mouth end has the view-space coordinates (0,0,-10) whereas its world-space coordinates are (10,2,0).</p>
-<p>The red dot is on the end of the teapot&#39;s mouth. It has been taken as <strong>AT</strong> and so its u and v coordinates are 0. If <strong>EYE</strong> is located at (18,8,0), the distance between <strong>EYE</strong> and <strong>AT</strong> is 10 and so the red dot&#39;s n coordinate is -10.</p>
+<p>There are 2 coordinate systems, world space and view space. Note that a point is given different coordinates in different spaces. Suppose that, as shown in the following figure, <strong>AT</strong> is located at the teapot's mouth end (10,2,0) and <strong>EYE</strong> is at (18,8,0). Then, the teapot's mouth end has the view-space coordinates (0,0,-10) whereas its world-space coordinates are (10,2,0).</p>
+<p>The red dot is on the end of the teapot's mouth. It has been taken as <strong>AT</strong> and so its u and v coordinates are 0. If <strong>EYE</strong> is located at (18,8,0), the distance between <strong>EYE</strong> and <strong>AT</strong> is 10 and so the red dot's n coordinate is -10.</p>
 
 <p align="center"><strong>Figure: Different coordinates in different spaces</strong></p>
 <p align="center"><img src="../../images/coord_space.png" alt="Different coordinates in different spaces" /></p>
 
-<p>It becomes much easier to develop the rendering algorithms if all the world-space objects are newly defined in terms of the view space in the manner of the teapot&#39;s mouth end. This is done by the <strong>view transform</strong>, which is defined as a translation followed by a rotation. The following view matrix applies to all objects in the world space. </p>
+<p>It becomes much easier to develop the rendering algorithms if all the world-space objects are newly defined in terms of the view space in the manner of the teapot's mouth end. This is done by the <strong>view transform</strong>, which is defined as a translation followed by a rotation. The following view matrix applies to all objects in the world space. </p>
 
 <p align="center"><strong>Figure: View matrix</strong></p>
 <p align="center"><img src="../../images/view_matrix.png" alt="View matrix" /></p>
@@ -90,9 +90,9 @@
 <p>Because the world space is no longer needed, denote the basis of the view space by <code>{x, y, z}</code> instead of <code>{u, v, n}</code> simply because <code>{x, y, z}</code> is more familiar. In the view space, define how much of the space to see. For this, give 4 parameters:</p>
 <ul>
 <li><code>fovy</code> which stands for the field of view along the Y axis</li>
-<li><code>aspect</code> for the field of view&#39;s aspect ratio</li>
-<li><code>n</code> for the distance from <strong>EYE</strong> to the &#39;near clipping plane&#39;</li>
-<li><code>f</code> for the distance from <strong>EYE</strong> to the &#39;far clipping plane&#39;</li>
+<li><code>aspect</code> for the field of view's aspect ratio</li>
+<li><code>n</code> for the distance from <strong>EYE</strong> to the 'near clipping plane'</li>
+<li><code>f</code> for the distance from <strong>EYE</strong> to the 'far clipping plane'</li>
 </ul>
 <p>This set of 4 parameters defines a truncated pyramid whose apex is located at <strong>EYE</strong>, as shown in the following figure. It is called <strong>view frustum</strong>.</p>
 
@@ -119,7 +119,7 @@
 <p align="center"><strong>Figure: Input and output of the vertex shader</strong></p>
 <p align="center"><img src="../../images/input_output_vertex.png" alt="Input and output of the vertex shader" /></p>
 
-<p>The following code shows an example vertex shader. The shader language is C-like but provides specialized types. For example, <code>mat4</code> is a 4x4 matrix and <code>vec3</code> is a 3D vector. The following vertex shader example has 5 input values: <code>viewProjMat</code> and <code>worldMat</code> are &#39;uniforms&#39; described by the keyword uniform, whereas <code>position</code>, <code>normal</code>, and <code>texCoord</code> are &#39;attributes&#39; described by the keyword attribute.</p>
+<p>The following code shows an example vertex shader. The shader language is C-like but provides specialized types. For example, <code>mat4</code> is a 4x4 matrix and <code>vec3</code> is a 3D vector. The following vertex shader example has 5 input values: <code>viewProjMat</code> and <code>worldMat</code> are 'uniforms' described by the keyword uniform, whereas <code>position</code>, <code>normal</code>, and <code>texCoord</code> are 'attributes' described by the keyword attribute.</p>
 <pre class="prettyprint">
 uniform mat4 viewProjMat; /* 4x4 matrix for view+projection transforms */
 uniform mat4 worldMat; /* 4x4 matrix for world transform */
@@ -134,9 +134,9 @@ varying vec2 v_texCoord;
 void
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = viewProjMat * worldMat * vec4(position, 1.0);
-&nbsp;&nbsp;&nbsp;&nbsp;v_normal = mat3(worldMat) * normal;
-&nbsp;&nbsp;&nbsp;&nbsp;v_texCoord = texCoord;
+    gl_Position = viewProjMat * worldMat * vec4(position, 1.0);
+    v_normal = mat3(worldMat) * normal;
+    v_texCoord = texCoord;
 }
 </pre>
 <p>The output of the vertex shader must include the built-in variable, <code>gl_Position</code>, which stores the <strong>clip-space</strong> vertex position. This is the only required output of the vertex shader. Optional output variables are described with the keyword <code>varying</code>. The output usually includes vertex normal and texture coordinates. In the above example, the object-space vertex normal is transformed to the world space and output to <code>v_normal</code>. On the other hand, the texture coordinates, <code>texCoord</code>, is simply copied to <code>v_texCoord</code>.</p>
@@ -148,7 +148,7 @@ main()
 <ol>
 <li>Load its source code into the GL program.</li>
 <li>Create a new shader object using the <code>glCreateShader()</code> function, which takes either the <code>GL_VERTEX_SHADER</code> or <code>GL_FRAGMENT_SHADER</code> attribute and returns the ID of the shader object.</li>
-<li>Store the source code into the shader object using the <code>glShaderSource()</code> function with the vertex or fragment shader&#39;s source code and the shader object ID.</li>
+<li>Store the source code into the shader object using the <code>glShaderSource()</code> function with the vertex or fragment shader's source code and the shader object ID.</li>
 <li>Compile the shader object using the <code>glCompileShader()</code> function.</li>
 </ol>
 <p>Using the shader objects, create the <strong>program object</strong>:</p>
@@ -164,12 +164,12 @@ main()
 <p>Consider a dynamic environment, where the scene objects continuously move. In the example vertex shader, worldMat must be updated per frame. On the other hand, <code>viewProjMat</code> must be updated if the eye moves. The GL program must update and provide them for the vertex shader. For this purpose, first find the uniform locations that have been determined during the link phase. Given a uniform name in the shader, the <code>glGetUniformLocation()</code> function returns its location (denoted by an integer) in the program.</p>
 <pre class="prettyprint">
 /* mProgram denotes the program object */
-GLint mWHandle = glGetUniformLocation(mProgram, &quot;worldMat&quot;)
+GLint mWHandle = glGetUniformLocation(mProgram, "worldMat")
 </pre>
 <p>Then, use the <code>glUniformMatrix4fv()</code> function to load the uniform with the updated <code>matrix</code>, <code>worldMat</code>. A list of functions for loading various uniforms is available and is collectively named <code>glUniformXXX()</code>, representing a set of variations including the <code>glUniform3f()</code> and <code>glUniformMatrix4x3fv()</code> functions.</p>
 
 <p>Next, consider the attributes.</p>
-<p>The vertex and index arrays for a polygon mesh are stored in the CPU memory, which is often called <strong>client memory</strong>. For rendering a mesh, make a <strong>drawcall</strong>. For every drawcall, the arrays have to be &#39;copied&#39; from the client memory to the GPU memory.</p>
+<p>The vertex and index arrays for a polygon mesh are stored in the CPU memory, which is often called <strong>client memory</strong>. For rendering a mesh, make a <strong>drawcall</strong>. For every drawcall, the arrays have to be 'copied' from the client memory to the GPU memory.</p>
 <p>Instead of resending the arrays every time a mesh is drawn, a more efficient way is to cache the data in the GPU memory. The arrays are transferred only once, and the rendering is done from the GPU memory cache. To achieve this, use <strong>vertex buffer objects</strong> (VBO).</p>
 <p>There are 2 types of buffer objects in GL:</p>
 <ul>
@@ -187,17 +187,17 @@ GLint mWHandle = glGetUniformLocation(mProgram, &quot;worldMat&quot;)
 <pre class="prettyprint">
 glGenBuffers(2, &amp;VBO);
 glBindBuffer(GL_ARRAY_BUFFER, /* Target */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VBO[0]); /* Buffer */
+             VBO[0]); /* Buffer */
 glBufferData(GL_ARRAY_BUFFER, /* Target */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(vertices), /* Size */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertices, /* Data */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_STATIC_DRAW); /* Usage */
+             sizeof(vertices), /* Size */
+             vertices, /* Data */
+             GL_STATIC_DRAW); /* Usage */
 
 glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, VBO[1]);
 glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indices, GL_STATIC_DRAW));
+             indices, GL_STATIC_DRAW));
 </pre>
-<p>The vertex array is often described as an &quot;array of structures&quot;, where a structure contains a set of attributes: position, normal, and texCoord in the example shader.</p>
+<p>The vertex array is often described as an "array of structures", where a structure contains a set of attributes: position, normal, and texCoord in the example shader.</p>
 <p align="center"><strong>Figure: Array of vertex structures</strong></p>
 <p align="center"><img src="../../images/vertex_structure_array.png" alt="Array of vertex structures" /></p>
 
@@ -209,9 +209,9 @@ int offset = 0;
 /* Position attribute */
 glEnableVertexAttribArray(0); /* Position index = 0 */
 glVertexAttribPointer(0, /* Index */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3, /* Size */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_FLOAT, /* Type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_FALSE, stride, (GLvoid*)offset);
+                      3, /* Size */
+                      GL_FLOAT, /* Type */
+                      GL_FALSE, stride, (GLvoid*)offset);
 
 offset += sizeof(vec3); /* For accessing normal */
 glEnableVertexAttribArray(1); /* Normal index = 1 */
@@ -230,19 +230,19 @@ glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, stride, (GLvoid*)offset);
 <li><code>glDrawArrays()</code> for non-indexed mesh representation</li>
 <li><code>glDrawElements()</code> for indexed mesh representation</li>
 </ul>
-<p>Assuming that you have only the vertex array for the low-resolution sphere, the <code>glDrawArrays()</code> function is invoked. In the following example, the first parameter specifies what kind of primitives to render. Valid values include, for example, <code>GL_POINTS</code>, GL_LINES, GL_TRIANGLES, and GL_TRIANGLE_FAN. The second parameter specifies the starting index &quot;in the vertex array&quot;. The last parameter specifies the number of vertices to be drawn.</p>
+<p>Assuming that you have only the vertex array for the low-resolution sphere, the <code>glDrawArrays()</code> function is invoked. In the following example, the first parameter specifies what kind of primitives to render. Valid values include, for example, <code>GL_POINTS</code>, GL_LINES, GL_TRIANGLES, and GL_TRIANGLE_FAN. The second parameter specifies the starting index "in the vertex array". The last parameter specifies the number of vertices to be drawn.</p>
 <pre class="prettyprint">
 glDrawArrays(GL_TRIANGLES, /* Mode */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, /* First */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;144); /* Count */
+             0, /* First */
+             144); /* Count */
 </pre>
 
-<p>When you have both the vertex array and index array, the <code>glDrawElements()</code> function is invoked. The first parameter is the same as in the <code>glDrawArrays()</code> function. The second parameter specifies the number of elements &quot;in the index array&quot;. The third parameter specifies the type of the values in the indices. It must be <code>GL_UNSIGNED_BYTE</code> or <code>GL_UNSIGNED_SHORT</code>. The last parameter points to the offset in bytes into the storage allocated by the <code>glBufferData()</code> function.</p>
+<p>When you have both the vertex array and index array, the <code>glDrawElements()</code> function is invoked. The first parameter is the same as in the <code>glDrawArrays()</code> function. The second parameter specifies the number of elements "in the index array". The third parameter specifies the type of the values in the indices. It must be <code>GL_UNSIGNED_BYTE</code> or <code>GL_UNSIGNED_SHORT</code>. The last parameter points to the offset in bytes into the storage allocated by the <code>glBufferData()</code> function.</p>
 <pre class="prettyprint">
 glDrawElements(GL_TRIANGLES, /* Mode */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;144, /* Count */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_UNSIGNED_SHORT, /* Type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0); /* Indices */
+               144, /* Count */
+               GL_UNSIGNED_SHORT, /* Type */
+               0); /* Indices */
 </pre>
 
 
@@ -254,79 +254,79 @@ glDrawElements(GL_TRIANGLES, /* Mode */
 static void
 init_glview(Evas_Object *glview)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set GL state color to black */
-&nbsp;&nbsp;&nbsp;&nbsp;glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
+    /* Set GL state color to black */
+    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
 
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)evas_object_data_get(glview, &quot;ad&quot;);
+    appdata_s *ad = (appdata_s *)evas_object_data_get(glview, "ad");
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!ad-&gt;initialized) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init_shader_program(ad); /* Compile and link shader */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;create_vbo(ad); /* Create vertex buffer object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;texture = create_texture(ad-&gt;win, &quot;tizen_noalpha.png&quot;);
+    if (!ad-&gt;initialized) {
+        init_shader_program(ad); /* Compile and link shader */
+        create_vbo(ad); /* Create vertex buffer object */
+        ad-&gt;texture = create_texture(ad-&gt;win, "tizen_noalpha.png");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glEnable(GL_DEPTH_TEST);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;initialized = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        glEnable(GL_DEPTH_TEST);
+        ad-&gt;initialized = EINA_TRUE;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize application variables */
+    /* Initialize application variables */
 }
 
 static void
 init_shader_program(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *p;
+    const char *p;
 
-&nbsp;&nbsp;&nbsp;&nbsp;p = vertex_tex_shader;
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);
-&nbsp;&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;vtx_shader);
+    p = vertex_tex_shader;
+    ad-&gt;vtx_shader = glCreateShader(GL_VERTEX_SHADER);
+    glShaderSource(ad-&gt;vtx_shader, 1, &amp;p, NULL);
+    glCompileShader(ad-&gt;vtx_shader);
 
-&nbsp;&nbsp;&nbsp;&nbsp;p = fragment_tex_shader;
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
-&nbsp;&nbsp;&nbsp;&nbsp;glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;glCompileShader(ad-&gt;fgmt_shader);
+    p = fragment_tex_shader;
+    ad-&gt;fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
+    glShaderSource(ad-&gt;fgmt_shader, 1, &amp;p, NULL);
+    glCompileShader(ad-&gt;fgmt_shader);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;program = glCreateProgram();
-&nbsp;&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
-&nbsp;&nbsp;&nbsp;&nbsp;glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);
+    ad-&gt;program = glCreateProgram();
+    glAttachShader(ad-&gt;program, ad-&gt;vtx_shader);
+    glAttachShader(ad-&gt;program, ad-&gt;fgmt_shader);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glLinkProgram(ad-&gt;program);
+    glLinkProgram(ad-&gt;program);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;idx_a_position = glGetAttribLocation(ad-&gt;program, &quot;a_position&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;idx_a_tex = glGetAttribLocation(ad-&gt;program, &quot;a_tex&quot;);
+    ad-&gt;idx_a_position = glGetAttribLocation(ad-&gt;program, "a_position");
+    ad-&gt;idx_a_tex = glGetAttribLocation(ad-&gt;program, "a_tex");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;idx_wvp = glGetUniformLocation(ad-&gt;program, &quot;u_wvpMatrix&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;idx_tex = glGetUniformLocation(ad-&gt;program, &quot;u_texSampler&quot;);
+    ad-&gt;idx_wvp = glGetUniformLocation(ad-&gt;program, "u_wvpMatrix");
+    ad-&gt;idx_tex = glGetUniformLocation(ad-&gt;program, "u_texSampler");
 
-&nbsp;&nbsp;&nbsp;&nbsp;glUseProgram(ad-&gt;program);
+    glUseProgram(ad-&gt;program);
 }
 
 static void
 create_vbo(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vbo_vertex);
-&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vbo_color);
-&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vbo_texture);
-
-&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo_vertex);
-&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(cube_vertices), cube_vertices,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_STATIC_DRAW);
-&nbsp;&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_a_position, 3, GL_FLOAT, GL_FALSE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3 * sizeof(float), 0);
-
-&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo_texture);
-&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ARRAY_BUFFER, sizeof(cube_texs), cube_texs,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GL_STATIC_DRAW);
-&nbsp;&nbsp;&nbsp;&nbsp;glVertexAttribPointer(ad-&gt;idx_a_tex, 2, GL_FLOAT, GL_FALSE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2 * sizeof(float), 0);
-
-&nbsp;&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_a_position);
-&nbsp;&nbsp;&nbsp;&nbsp;glEnableVertexAttribArray(ad-&gt;idx_a_tex);
-
-&nbsp;&nbsp;&nbsp;&nbsp;glGenBuffers(1, &amp;ad-&gt;vbo_index);
-&nbsp;&nbsp;&nbsp;&nbsp;glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ad-&gt;vbo_index);
-&nbsp;&nbsp;&nbsp;&nbsp;glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(cube_indices),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cube_indices, GL_STATIC_DRAW);
+    glGenBuffers(1, &amp;ad-&gt;vbo_vertex);
+    glGenBuffers(1, &amp;ad-&gt;vbo_color);
+    glGenBuffers(1, &amp;ad-&gt;vbo_texture);
+
+    glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo_vertex);
+    glBufferData(GL_ARRAY_BUFFER, sizeof(cube_vertices), cube_vertices,
+                 GL_STATIC_DRAW);
+    glVertexAttribPointer(ad-&gt;idx_a_position, 3, GL_FLOAT, GL_FALSE,
+                          3 * sizeof(float), 0);
+
+    glBindBuffer(GL_ARRAY_BUFFER, ad-&gt;vbo_texture);
+    glBufferData(GL_ARRAY_BUFFER, sizeof(cube_texs), cube_texs,
+                 GL_STATIC_DRAW);
+    glVertexAttribPointer(ad-&gt;idx_a_tex, 2, GL_FLOAT, GL_FALSE,
+                          2 * sizeof(float), 0);
+
+    glEnableVertexAttribArray(ad-&gt;idx_a_position);
+    glEnableVertexAttribArray(ad-&gt;idx_a_tex);
+
+    glGenBuffers(1, &amp;ad-&gt;vbo_index);
+    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ad-&gt;vbo_index);
+    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(cube_indices),
+                 cube_indices, GL_STATIC_DRAW);
 }
 </pre>
 
@@ -336,37 +336,37 @@ create_vbo(appdata_s *ad)
 static void
 draw_glview(Evas_Object *glview)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)evas_object_data_get(glview, &quot;ad&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;float world[16], viewproj[16];
-&nbsp;&nbsp;&nbsp;&nbsp;float aspect;
+    appdata_s *ad = (appdata_s *)evas_object_data_get(glview, "ad");
+    float world[16], viewproj[16];
+    float aspect;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!ad)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (!ad)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;init_matrix(world);
-&nbsp;&nbsp;&nbsp;&nbsp;init_matrix(viewproj);
+    init_matrix(world);
+    init_matrix(viewproj);
 
-&nbsp;&nbsp;&nbsp;&nbsp;aspect = (float) ad-&gt;glview_w / (float) ad-&gt;glview_h;
+    aspect = (float) ad-&gt;glview_w / (float) ad-&gt;glview_h;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* View matrix is the identity matrix */
-&nbsp;&nbsp;&nbsp;&nbsp;view_set_perspective(viewproj, 60.0f, aspect, 1.0f, 20.0f);
+    /* View matrix is the identity matrix */
+    view_set_perspective(viewproj, 60.0f, aspect, 1.0f, 20.0f);
 
-&nbsp;&nbsp;&nbsp;&nbsp;translate_xyz(world, 0.0f, 0.0f, -2.5f);
-&nbsp;&nbsp;&nbsp;&nbsp;rotate_xyz(world, ad-&gt;xangle, ad-&gt;yangle, 0.0f);
+    translate_xyz(world, 0.0f, 0.0f, -2.5f);
+    rotate_xyz(world, ad-&gt;xangle, ad-&gt;yangle, 0.0f);
 
-&nbsp;&nbsp;&nbsp;&nbsp;multiply_matrix(ad-&gt;wvp, viewproj, world);
+    multiply_matrix(ad-&gt;wvp, viewproj, world);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glUniformMatrix4fv(ad-&gt;idx_wvp, 1, GL_FALSE, ad-&gt;wvp);
+    glUniformMatrix4fv(ad-&gt;idx_wvp, 1, GL_FALSE, ad-&gt;wvp);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glBindTexture(GL_TEXTURE_2D, ad-&gt;texture);
-&nbsp;&nbsp;&nbsp;&nbsp;glActiveTexture(GL_TEXTURE0);
-&nbsp;&nbsp;&nbsp;&nbsp;glUniform1i(ad-&gt;idx_tex, 0);
+    glBindTexture(GL_TEXTURE_2D, ad-&gt;texture);
+    glActiveTexture(GL_TEXTURE0);
+    glUniform1i(ad-&gt;idx_tex, 0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glDrawElements(GL_TRIANGLES, cube_indices_count, GL_UNSIGNED_SHORT, 0);
+    glDrawElements(GL_TRIANGLES, cube_indices_count, GL_UNSIGNED_SHORT, 0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;glFlush();
+    glFlush();
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/graphics/vulkan_n.htm b/org.tizen.guides/html/native/graphics/vulkan_n.htm
index 5488f9a..39bbbe4 100644 (file)
--- a/org.tizen.guides/html/native/graphics/vulkan_n.htm
+++ b/org.tizen.guides/html/native/graphics/vulkan_n.htm
@@ -47,7 +47,7 @@
 
 <h1>SDL Graphics with Vulkan</h1>
 
-<p>Vulkan is a generation API for high-efficiency access to graphics and computing on modern GPUs. It is an open-standard, cross-platform API designed from the ground-up by industry experts collaborating under the Khronos consortium. It aims to address the inefficiencies of existing 3D APIs, such as OpenGL, which are designed for single-core processors and lag to map modern hardware. It provides a much lower-level fine-grained control over the GPU to maximize performance and achieve consistent user experience across different operating environments. For general information on Vulkan, and the comparative merits of Vulkan and OpenGL, see the official Khronos&#39;s <a href="https://www.khronos.org/vulkan/" target="_blank">Vulkan Web site</a> and <a href="#vulkan_1">OpenGL vs. Vulkan</a>.</p>
+<p>Vulkan is a generation API for high-efficiency access to graphics and computing on modern GPUs. It is an open-standard, cross-platform API designed from the ground-up by industry experts collaborating under the Khronos consortium. It aims to address the inefficiencies of existing 3D APIs, such as OpenGL, which are designed for single-core processors and lag to map modern hardware. It provides a much lower-level fine-grained control over the GPU to maximize performance and achieve consistent user experience across different operating environments. For general information on Vulkan, and the comparative merits of Vulkan and OpenGL, see the official Khronos's <a href="https://www.khronos.org/vulkan/" target="_blank">Vulkan Web site</a> and <a href="#vulkan_1">OpenGL vs. Vulkan</a>.</p>
 <p>The Tizen platform supports the Vulkan API in order to provide the most cutting edge 3D programming tools for you to create high-quality games and real-time graphics in applications. Vulkan is especially recommended for performance- or latency-sensitive applications. With Vulkan, you can achieve a much smoother user experience by parallelizing the rendering job across multiple threads which can feed the GPU to the max. Applications demanding explicit control on work submission, synchronization, and less power consumption can seriously consider migrating to Vulkan as well. Tizen allows the <a href="#render">use of the Vulkan API</a> through <a href="#sdl">SDL</a>.</p>
 
 <p align="center"><strong>Figure: Vulkan in Tizen</strong></p>
@@ -57,14 +57,14 @@
 
 <ul>
 <li><strong>Cross-platform</strong>
-<p>Vulkan is designed to run on a wide range of platforms and hardware with very different form factors and power envelopes. While OpenGL has the OpenGL ES variant for mobile and embedded systems and OpenGL for desktops, Vulkan provides a unified API that is completely identical across all these platforms. You simply link to the same library, with the same header and the same code on all targeted platforms, and the application runs everywhere. By not limiting itself to a subset of platforms, Vulkan enables you to &quot;write once and run everywhere&quot;. This means that by targeting this API, you can achieve a large market share across both mobile and desktop devices.</p></li>
+<p>Vulkan is designed to run on a wide range of platforms and hardware with very different form factors and power envelopes. While OpenGL has the OpenGL ES variant for mobile and embedded systems and OpenGL for desktops, Vulkan provides a unified API that is completely identical across all these platforms. You simply link to the same library, with the same header and the same code on all targeted platforms, and the application runs everywhere. By not limiting itself to a subset of platforms, Vulkan enables you to "write once and run everywhere". This means that by targeting this API, you can achieve a large market share across both mobile and desktop devices.</p></li>
 
 <li><strong>Explicit control</strong>
-<p>Vulkan is an explicit API, and wants you to define &quot;exactly what you want&quot;, rather than relying on hidden driver heuristics to do the right thing. Vulkan, by design, is a very low-level API that provides applications direct control over the GPU. Older higher-level APIs hide most of the costly operations, such as memory management and resource synchronization, denying you any control over them.</p>
-<p>Vulkan attempts to turn as much of the problematic &quot;implicitness&quot; of older APIs as possible into &quot;explicit&quot; application choices. It provides a number of explicit mechanisms for many operations, such as memory allocation, synchronization, and work submission, allowing applications to be more expressive.</p></li>
+<p>Vulkan is an explicit API, and wants you to define "exactly what you want", rather than relying on hidden driver heuristics to do the right thing. Vulkan, by design, is a very low-level API that provides applications direct control over the GPU. Older higher-level APIs hide most of the costly operations, such as memory management and resource synchronization, denying you any control over them.</p>
+<p>Vulkan attempts to turn as much of the problematic "implicitness" of older APIs as possible into "explicit" application choices. It provides a number of explicit mechanisms for many operations, such as memory allocation, synchronization, and work submission, allowing applications to be more expressive.</p></li>
 
 <li><strong>Multi-core friendly</strong>
-<p>Older APIs written in the single-core processor age do not do enough to take advantage of today&#39;s multi-core processors and thereby max out the single core by over-burdening the render thread with all heavy tasks, such as error checking, implicit resource tracking, synchronization, and state validation.</p>
+<p>Older APIs written in the single-core processor age do not do enough to take advantage of today's multi-core processors and thereby max out the single core by over-burdening the render thread with all heavy tasks, such as error checking, implicit resource tracking, synchronization, and state validation.</p>
 <p>Vulkan provides tools and design choices to spread its workload across multiple threads. It achieves this by removing from the driver the thread-specific features, such as global data, access synchronization, thread safety, and order guarantee, and handing the responsibility to you. By carefully handling the threads and scaling across multiple threads on a device with more cores, you can distribute your workload across threads much better. This leads to better efficiency and better performance in applications that otherwise find themselves maxing out a single core.</p></li>
 
 <li><strong>High efficiency</strong>
@@ -222,8 +222,8 @@
 <pre class="prettyprint">
 bool vulkan_support;
 
-system_info_get_platform_bool(&quot;http://tizen.org/feature/vulkan.version.1_0&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;vulkan_support);
+system_info_get_platform_bool("http://tizen.org/feature/vulkan.version.1_0",
+                              &amp;vulkan_support);
 </pre>
 </li>
 <li>To use the functions and data types of the Vulkan (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__VULKAN__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__VULKAN__FRAMEWORK.html">wearable</a> applications) and SDL (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SDL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__SDL__FRAMEWORK.html">wearable</a> applications) APIs, include the <code>&lt;SDL.h&gt;</code> and <code>&lt;vulkan/vulkan.h&gt;</code> header files in your application:
@@ -241,8 +241,8 @@ system_info_get_platform_bool(&quot;http://tizen.org/feature/vulkan.version.1_0&
 <ol>
 <li>Initialize SDL and create an SDL window.
 
-<p>Before using any other SDL functions, call the <code>SDL_Init()</code> function to properly initialize the SDL library and start each of its various subsystems. The function accepts as a parameter a set of allowed flags OR&#39;d together.</p>
-<p>After SDL is initialized successfully, create the <code>SDL_Window</code> instance using the <code>SDL_CreateWindow()</code> function. The parameters define the title of the window, the X and Y position coordinates, width, height, and a set of <code>SDL_WindowFlags</code> OR&#39;d together.</p>
+<p>Before using any other SDL functions, call the <code>SDL_Init()</code> function to properly initialize the SDL library and start each of its various subsystems. The function accepts as a parameter a set of allowed flags OR'd together.</p>
+<p>After SDL is initialized successfully, create the <code>SDL_Window</code> instance using the <code>SDL_CreateWindow()</code> function. The parameters define the title of the window, the X and Y position coordinates, width, height, and a set of <code>SDL_WindowFlags</code> OR'd together.</p>
 
 <div class="note">
        <strong>Note</strong>
@@ -250,16 +250,16 @@ system_info_get_platform_bool(&quot;http://tizen.org/feature/vulkan.version.1_0&
 </div>
 
 <p>The <code>SDL_main()</code> function is mandatory for the Tizen framework to initialize the SDL application. You must use the <code>SDL_main()</code> function instead of the usual <code>main()</code> function in your SDL application.</p>
- 
+
 <pre class="prettyprint">
 int
 SDL_main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;SDL_Init(SDL_INIT_VIDEO | SDL_INIT_EVENTS);
-&nbsp;&nbsp;&nbsp;&nbsp;demo.sdl_window = SDL_CreateWindow(&quot;SDL Vulkan Sample&quot;, 0, 0, demo.sdl_mode.w,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;demo.sdl_mode.h,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_WINDOW_SHOWN | SDL_WINDOW_FULLSCREEN
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| SDL_WINDOW_RESIZABLE | SDL_WINDOW_VULKAN);
+    SDL_Init(SDL_INIT_VIDEO | SDL_INIT_EVENTS);
+    demo.sdl_window = SDL_CreateWindow("SDL Vulkan Sample", 0, 0, demo.sdl_mode.w,
+                                       demo.sdl_mode.h,
+                                       SDL_WINDOW_SHOWN | SDL_WINDOW_FULLSCREEN
+                                       | SDL_WINDOW_RESIZABLE | SDL_WINDOW_VULKAN);
 }
 </pre>
 </li>
@@ -281,13 +281,13 @@ SDL_main(int argc, char *argv[])
 
 <pre class="prettyprint">
 const VkApplicationInfo app = {
-&nbsp;&nbsp;&nbsp;&nbsp;.sType = VK_STRUCTURE_TYPE_APPLICATION_INFO,
-&nbsp;&nbsp;&nbsp;&nbsp;.pNext = NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;.pApplicationName = APP_SHORT_NAME,
-&nbsp;&nbsp;&nbsp;&nbsp;.applicationVersion = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;.pEngineName = APP_SHORT_NAME,
-&nbsp;&nbsp;&nbsp;&nbsp;.engineVersion = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;.apiVersion = VK_API_VERSION_1_0,
+    .sType = VK_STRUCTURE_TYPE_APPLICATION_INFO,
+    .pNext = NULL,
+    .pApplicationName = APP_SHORT_NAME,
+    .applicationVersion = 0,
+    .pEngineName = APP_SHORT_NAME,
+    .engineVersion = 0,
+    .apiVersion = VK_API_VERSION_1_0,
 };
 </pre>
 </li>
@@ -306,16 +306,16 @@ const VkApplicationInfo app = {
 
 <pre class="prettyprint">
 SDL_Vulkan_GetInstanceExtensions(demo-&gt;sdl_window,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;(demo-&gt;enabled_extension_count),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;demo-&gt;extension_names);
+                                 &amp;(demo-&gt;enabled_extension_count),
+                                 demo-&gt;extension_names);
 VkInstanceCreateInfo inst_info = {
-&nbsp;&nbsp;&nbsp;&nbsp;.sType = VK_STRUCTURE_TYPE_INSTANCE_CREATE_INFO,
-&nbsp;&nbsp;&nbsp;&nbsp;.pNext = NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;.pApplicationInfo = &amp;app,
-&nbsp;&nbsp;&nbsp;&nbsp;.enabledLayerCount = demo-&gt;enabled_layer_count,
-&nbsp;&nbsp;&nbsp;&nbsp;.ppEnabledLayerNames = (const char *const *)instance_validation_layers,
-&nbsp;&nbsp;&nbsp;&nbsp;.enabledExtensionCount = demo-&gt;enabled_extension_count,
-&nbsp;&nbsp;&nbsp;&nbsp;.ppEnabledExtensionNames = (const char *const *) demo-&gt;extension_names,
+    .sType = VK_STRUCTURE_TYPE_INSTANCE_CREATE_INFO,
+    .pNext = NULL,
+    .pApplicationInfo = &amp;app,
+    .enabledLayerCount = demo-&gt;enabled_layer_count,
+    .ppEnabledLayerNames = (const char *const *)instance_validation_layers,
+    .enabledExtensionCount = demo-&gt;enabled_extension_count,
+    .ppEnabledExtensionNames = (const char *const *) demo-&gt;extension_names,
 };
 </pre>
 </li>
@@ -345,13 +345,13 @@ demo-&gt;gpu = physical_devices[0];
 </pre>
 </li>
 <li>Check for supported queue families.
-<p>Almost every operation in Vulkan, from drawing to uploading textures, requires commands to be submitted to a &quot;queue&quot;. There are different types of queues that originate from different queue families, and each queue family allows only a subset of commands. You need to check which queue families are supported by the device and which one of them supports the commands that you want to use. The following example looks for a queue that supports graphics commands:</p>
+<p>Almost every operation in Vulkan, from drawing to uploading textures, requires commands to be submitted to a "queue". There are different types of queues that originate from different queue families, and each queue family allows only a subset of commands. You need to check which queue families are supported by the device and which one of them supports the commands that you want to use. The following example looks for a queue that supports graphics commands:</p>
 <ol type="a">
 <li>Check which queue families are supported by the device with the <code>vkGetPhysicalDeviceQueueFamilyProperties()</code> function:
 <pre class="prettyprint">
 VkQueueFamilyProperties *queue_props;
 vkGetPhysicalDeviceQueueFamilyProperties(demo-&gt;gpu, &amp;demo-&gt;queue_count,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;demo-&gt;queue_props);
+                                         demo-&gt;queue_props);
 assert(demo-&gt;queue_count &gt;= 1);
 
 VkPhysicalDeviceFeatures features;
@@ -362,10 +362,10 @@ vkGetPhysicalDeviceFeatures(demo-&gt;gpu, &amp;features);
 <pre class="prettyprint">
 uint32_t graphicsQueueNodeIndex = UINT32_MAX;
 for (i = 0; i &lt; demo-&gt;queue_count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;if ((demo->queue_props[i].queueFlags &amp; VK_QUEUE_GRAPHICS_BIT) != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (graphicsQueueNodeIndex == UINT32_MAX)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;graphicsQueueNodeIndex = i;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if ((demo->queue_props[i].queueFlags &amp; VK_QUEUE_GRAPHICS_BIT) != 0) {
+        if (graphicsQueueNodeIndex == UINT32_MAX)
+            graphicsQueueNodeIndex = i;
+    }
 }
 demo-&gt;graphics_queue_node_index = graphicsQueueNodeIndex;
 </pre>
@@ -388,11 +388,11 @@ VkDevice device;
 <pre class="prettyprint">
 float queue_priorities[1] = {0.0};
 const VkDeviceQueueCreateInfo queue = {
-&nbsp;&nbsp;&nbsp;&nbsp;.sType = VK_STRUCTURE_TYPE_DEVICE_QUEUE_CREATE_INFO,
-&nbsp;&nbsp;&nbsp;&nbsp;.pNext = NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;.queueFamilyIndex = demo-&gt;graphics_queue_node_index,
-&nbsp;&nbsp;&nbsp;&nbsp;.queueCount = 1,
-&nbsp;&nbsp;&nbsp;&nbsp;.pQueuePriorities = queue_priorities
+    .sType = VK_STRUCTURE_TYPE_DEVICE_QUEUE_CREATE_INFO,
+    .pNext = NULL,
+    .queueFamilyIndex = demo-&gt;graphics_queue_node_index,
+    .queueCount = 1,
+    .pQueuePriorities = queue_priorities
 };
 </pre>
 </li>
@@ -400,17 +400,17 @@ const VkDeviceQueueCreateInfo queue = {
 <p>First add pointers to the queue creation info and device features structs. The remainder of the information requires you to specify device-specific extensions and validation layers. An example of a device-specific extension is <code>VK_KHR_swapchain</code>, which allows you to present rendered images from that device to windows. The following example enables the same validation layers for devices as before for the instance. It requires no device-specific extensions.</p>
 <pre class="prettyprint">
 VkDeviceCreateInfo device = {
-&nbsp;&nbsp;&nbsp;&nbsp;.sType = VK_STRUCTURE_TYPE_DEVICE_CREATE_INFO,
-&nbsp;&nbsp;&nbsp;&nbsp;.pNext = NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;.queueCreateInfoCount = 1,
-&nbsp;&nbsp;&nbsp;&nbsp;.pQueueCreateInfos = &amp;queue,
-&nbsp;&nbsp;&nbsp;&nbsp;.enabledLayerCount = demo-&gt;enabled_layer_count,
-&nbsp;&nbsp;&nbsp;&nbsp;.ppEnabledLayerNames =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(const char *const *)((demo-&gt;validate) ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;demo-&gt;device_validation_layers : NULL),
-&nbsp;&nbsp;&nbsp;&nbsp;.enabledExtensionCount = demo-&gt;enabled_extension_count,
-&nbsp;&nbsp;&nbsp;&nbsp;.ppEnabledExtensionNames = (const char *const *)demo-&gt;extension_names,
-&nbsp;&nbsp;&nbsp;&nbsp;.pEnabledFeatures = NULL
+    .sType = VK_STRUCTURE_TYPE_DEVICE_CREATE_INFO,
+    .pNext = NULL,
+    .queueCreateInfoCount = 1,
+    .pQueueCreateInfos = &amp;queue,
+    .enabledLayerCount = demo-&gt;enabled_layer_count,
+    .ppEnabledLayerNames =
+        (const char *const *)((demo-&gt;validate) ?
+                              demo-&gt;device_validation_layers : NULL),
+    .enabledExtensionCount = demo-&gt;enabled_extension_count,
+    .ppEnabledExtensionNames = (const char *const *)demo-&gt;extension_names,
+    .pEnabledFeatures = NULL
 };
 </pre>
 </li>
@@ -443,7 +443,7 @@ VkSurfaceKHR surface;
 It simply passes through the <code>VkResult</code> from the relevant platform call. </p>
 <pre class="prettyprint">
 SDL_Vulkan_CreateSurface(demo-&gt;sdl_window, (SDL_vulkanInstance)demo-&gt;inst,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(SDL_vulkanSurface*)&amp;demo-&gt;surface);
+                         (SDL_vulkanSurface*)&amp;demo-&gt;surface);
 </pre>
 </li></ol>
 </li>
@@ -454,7 +454,7 @@ SDL_Vulkan_CreateSurface(demo-&gt;sdl_window, (SDL_vulkanInstance)demo-&gt;inst,
 <li>Look for a queue family that has the capability of presenting to your window surface, by using the <code>vkGetPhysicalDeviceSurfaceSupportKHR()</code> function, which takes the physical device, queue family index, and surface as parameters. Then simply check the value of the <code>boolean</code> and store the presentation family queue index. Note that it is very likely that it ends up being the same queue family as previously selected for the physical device, so the example adds logic to explicitly prefer a physical device that supports drawing and presentation in the same queue for improved performance:
 <pre class="prettyprint">
 demo-&gt;fpGetPhysicalDeviceSurfaceSupportKHR(demo-&gt;gpu, i, demo-&gt;surface,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;supportsPresent[i]);
+                                           &amp;supportsPresent[i]);
 demo-&gt;graphics_queue_node_index = graphicsQueueNodeIndex;
 </pre>
 </li>
@@ -474,20 +474,20 @@ vkGetDeviceQueue(demo-&gt;device, demo-&gt;graphics_queue_node_index, 0, &amp;de
 static void
 demo_prepare(struct demo *demo)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_buffers(demo);
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_depth(demo);
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_textures(demo);
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_vertices(demo);
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_descriptor_layout(demo);
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_render_pass(demo);
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_pipeline(demo);
+    demo_prepare_buffers(demo);
+    demo_prepare_depth(demo);
+    demo_prepare_textures(demo);
+    demo_prepare_vertices(demo);
+    demo_prepare_descriptor_layout(demo);
+    demo_prepare_render_pass(demo);
+    demo_prepare_pipeline(demo);
 
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_descriptor_pool(demo);
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_descriptor_set(demo);
+    demo_prepare_descriptor_pool(demo);
+    demo_prepare_descriptor_set(demo);
 
-&nbsp;&nbsp;&nbsp;&nbsp;demo_prepare_framebuffers(demo);
+    demo_prepare_framebuffers(demo);
 
-&nbsp;&nbsp;&nbsp;&nbsp;demo-&gt;prepared = true;
+    demo-&gt;prepared = true;
 }
 </pre>
 </li>
@@ -495,14 +495,14 @@ demo_prepare(struct demo *demo)
 <p>Now you are set to perform continuous rendering from the application main loop. Initiate the main loop and call the rendering routine as well as start polling for user input events:</p>
 <pre class="prettyprint">
 while(1) {
-&nbsp;&nbsp;&nbsp;&nbsp;while (SDL_PollEvent(&amp;event)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;SDL Event type :: %d\n&quot;, event.type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event.type == SDL_MOUSEBUTTONDOWN)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;SDL_MOUSEBUTTONDOWN Event!!\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event.type == SDL_MOUSEMOTION)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;SDL_MOUSEMOTION Event!!\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;demo_run(&amp;demo);
+    while (SDL_PollEvent(&amp;event)) {
+        printf("SDL Event type :: %d\n", event.type);
+        if (event.type == SDL_MOUSEBUTTONDOWN)
+            printf("SDL_MOUSEBUTTONDOWN Event!!\n");
+        if (event.type == SDL_MOUSEMOTION)
+            printf("SDL_MOUSEMOTION Event!!\n");
+    }
+    demo_run(&amp;demo);
 }
 </pre>
 </li>
@@ -525,13 +525,13 @@ SDL_Quit();
 void
 updateApp(appdata_s* ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* SDL_Event is a union containing structures for different event types */
-&nbsp;&nbsp;&nbsp;&nbsp;SDL_Event event;
-&nbsp;&nbsp;&nbsp;&nbsp;while (SDL_PollEvent(&amp;event)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[SDL] Event type: %x\n&quot;, event.type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleEvent(&amp;ad, &amp;event);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* SDL_Event is a union containing structures for different event types */
+    SDL_Event event;
+    while (SDL_PollEvent(&amp;event)) {
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
+                    "[SDL] Event type: %x\n", event.type);
+        handleEvent(&amp;ad, &amp;event);
+    }
 }
 </pre>
 </li>
@@ -543,59 +543,59 @@ updateApp(appdata_s* ad)
 void
 handleEvent(appdata_s** data, SDL_Event* event)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s* ad = *data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (event-&gt;type) {
-&nbsp;&nbsp;&nbsp;&nbsp;case SDL_QUIT:
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL] Finish main loop &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;game_exit = 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;case SDL_KEYUP:
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char* scancodename = (char *)SDL_GetScancodeName(event-&gt;key.keysym.scancode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[SDL] keyboard scancode: %s&quot;, scancodename);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event-&gt;key.keysym.scancode == SDL_SCANCODE_AC_BACK) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL] Finish main loop &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;game_exit = 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;case SDL_MOUSEBUTTONDOWN:
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL]Mouse Down: %d x %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event-&gt;button.x, event-&gt;button.y);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;case SDL_MOUSEBUTTONUP:
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL]Mouse Up: %d x %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event-&gt;button.x, event-&gt;button.y);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;case SDL_MOUSEMOTION:
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL]Mouse Motion: %d x %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event-&gt;motion.x, event-&gt;motion.y);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;case SDL_ROTATEEVENT:
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;window_rotation = (int)event-&gt;user.data1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL] Rotation degree: %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;window_rotation);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;case SDL_WINDOWEVENT:
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;SDL_WINDOWEVENT Event!!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event-&gt;window.event == SDL_WINDOWEVENT_SIZE_CHANGED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_Log(&quot;SDL_WINDOWEVENT_SIZE_CHANGED!!!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;} /* End switch */
+    appdata_s* ad = *data;
+
+    switch (event-&gt;type) {
+    case SDL_QUIT:
+    {
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Finish main loop ");
+        ad-&gt;game_exit = 1;
+        break;
+    }
+    case SDL_KEYUP:
+    {
+        char* scancodename = (char *)SDL_GetScancodeName(event-&gt;key.keysym.scancode);
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
+                    "[SDL] keyboard scancode: %s", scancodename);
+        if (event-&gt;key.keysym.scancode == SDL_SCANCODE_AC_BACK) {
+            SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Finish main loop ");
+            ad-&gt;game_exit = 1;
+        }
+        break;
+    }
+    case SDL_MOUSEBUTTONDOWN:
+    {
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL]Mouse Down: %d x %d",
+                    event-&gt;button.x, event-&gt;button.y);
+        break;
+    }
+    case SDL_MOUSEBUTTONUP:
+    {
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL]Mouse Up: %d x %d",
+                    event-&gt;button.x, event-&gt;button.y);
+        break;
+    }
+    case SDL_MOUSEMOTION:
+    {
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL]Mouse Motion: %d x %d",
+                    event-&gt;motion.x, event-&gt;motion.y);
+        break;
+    }
+    case SDL_ROTATEEVENT:
+    {
+        ad-&gt;window_rotation = (int)event-&gt;user.data1;
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Rotation degree: %d",
+                    ad-&gt;window_rotation);
+        break;
+    }
+    case SDL_WINDOWEVENT:
+    {
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "SDL_WINDOWEVENT Event!!");
+        if (event-&gt;window.event == SDL_WINDOWEVENT_SIZE_CHANGED)
+            SDL_Log("SDL_WINDOWEVENT_SIZE_CHANGED!!!");
+        break;
+    }
+    } /* End switch */
 }
 </pre>
 </li>
@@ -609,7 +609,7 @@ handleEvent(appdata_s** data, SDL_Event* event)
 <li><code>SDL_APP_CONTROL</code>
 <p>This event is invoked when the application is launched with some parameters. In Tizen, this event is called in the <code>_tizen_sdl_control()</code> function.</p>
 
-<p>The application framework calls the application&#39;s application control callback just after the application enters the main loop. This callback is passed to the <code>app_control</code> instance containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by another application. In any case, the application is responsible for checking the <code>app_control</code> content and responding appropriately. The <code>app_control</code> content can be empty, if the application is launched from the launcher.</p>
+<p>The application framework calls the application's application control callback just after the application enters the main loop. This callback is passed to the <code>app_control</code> instance containing the reason why the application was launched. For example, the application can be launched to open a file to handle the request that has been sent by another application. In any case, the application is responsible for checking the <code>app_control</code> content and responding appropriately. The <code>app_control</code> content can be empty, if the application is launched from the launcher.</p>
 <p>In SDL, <code>SDL_APP_CONTROL</code> has been defined as a new <code>SDL_Event</code> event type for the application control. After the application enters the main loop, SDL sends the <code>SDL_APP_CONTROL</code> event to the application. This means that the application can confirm the <code>SDL_Event</code> in the event loop. The event is defined as an <code>SDL_UserEvent</code>, which is in the <code>user</code> member of the <code>SDL_Event</code> union.</p>
 
 <p>The <code>user</code> structure contains <code>data1</code> (<code>app_control</code>) and <code>data2</code> (<code>user_data</code>).</p>
@@ -619,19 +619,19 @@ handleEvent(appdata_s** data, SDL_Event* event)
 #include &lt;app.h&gt;
 
 case SDL_APP_CONTROL:
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h app_control = event.user.data1;
-&nbsp;&nbsp;&nbsp;&nbsp;void *user_data = event.user.data2;
-
-&nbsp;&nbsp;&nbsp;&nbsp;char *operation;
-&nbsp;&nbsp;&nbsp;&nbsp;char *uri;
-
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, &amp;operation);
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_uri(app_control, &amp;uri);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(app_control, &quot;action&quot;, &amp;action);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;Get path: [%s], action: [%s]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uri, action);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    app_control_h app_control = event.user.data1;
+    void *user_data = event.user.data2;
+
+    char *operation;
+    char *uri;
+
+    app_control_get_operation(app_control, &amp;operation);
+    if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW)) {
+        app_control_get_uri(app_control, &amp;uri);
+        app_control_get_extra_data(app_control, "action", &amp;action);
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "Get path: [%s], action: [%s]",
+                    uri, action);
+    }
 break;
 </pre>
 </li>
@@ -644,22 +644,22 @@ break;
 
 case SDL_APP_LOWBATTERY:
 {
-&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL] SDL_APP_LOWBATTERY &quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_info_h event_info = event-&gt;user.data1;
-&nbsp;&nbsp;&nbsp;&nbsp;void *user_data = event-&gt;user.data2;
-
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_low_battery_status_e status;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = app_event_get_low_battery_status(event_info, &amp;status);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (status == APP_EVENT_LOW_BATTERY_POWER_OFF)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[SDL] The battery status is under 1% &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (status == APP_EVENT_LOW_BATTERY_CRITICAL_LOW)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[SDL] The battery status is under 5% &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] SDL_APP_LOWBATTERY ");
+
+    app_event_info_h event_info = event-&gt;user.data1;
+    void *user_data = event-&gt;user.data2;
+
+    app_event_low_battery_status_e status;
+    int ret = app_event_get_low_battery_status(event_info, &amp;status);
+    if (ret == APP_ERROR_NONE) {
+        if (status == APP_EVENT_LOW_BATTERY_POWER_OFF)
+            SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
+                        "[SDL] The battery status is under 1% ");
+        else if (status == APP_EVENT_LOW_BATTERY_CRITICAL_LOW)
+            SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
+                        "[SDL] The battery status is under 5% ");
+    }
+    break;
 }
 </pre>
 </li>
@@ -671,22 +671,22 @@ case SDL_APP_LOWBATTERY:
 
 case SDL_APP_LANGUAGE_CHANGED:
 {
-&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL] SDL_APP_LANGUAGE_CHANGED &quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_info_h event_info = event-&gt;user.data1;
-&nbsp;&nbsp;&nbsp;&nbsp;void *user_data = event-&gt;user.data2;
-
-&nbsp;&nbsp;&nbsp;&nbsp;char *language;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = app_event_get_language(event_info, &amp;language);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[SDL] app_event_get_language failed. Err = %d &quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (language != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL] language:  &quot;, language);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(language);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] SDL_APP_LANGUAGE_CHANGED ");
+
+    app_event_info_h event_info = event-&gt;user.data1;
+    void *user_data = event-&gt;user.data2;
+
+    char *language;
+    int ret = app_event_get_language(event_info, &amp;language);
+    if (ret != APP_ERROR_NONE)
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
+                    "[SDL] app_event_get_language failed. Err = %d ", ret);
+
+    if (language != NULL) {
+        SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] language:  ", language);
+        free(language);
+    }
+    break;
 }
 </pre>
 </li>
@@ -716,14 +716,14 @@ case SDL_APP_LANGUAGE_CHANGED:
 </tbody>
 </table>
 <pre class="prettyprint">
-SDL_SetHint(SDL_HINT_ORIENTATIONS, &quot;Portrait LandscapeLeft LandscapeRight&quot;);
+SDL_SetHint(SDL_HINT_ORIENTATIONS, "Portrait LandscapeLeft LandscapeRight");
 
 case SDL_ROTATEEVENT:
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;window_rotation = (int)event-&gt;user.data1;
-&nbsp;&nbsp;&nbsp;&nbsp;SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, &quot;[SDL] Rotation degree: %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;window_rotation);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    ad-&gt;window_rotation = (int)event-&gt;user.data1;
+    SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Rotation degree: %d",
+                ad-&gt;window_rotation);
+    break;
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/guides_n.htm b/org.tizen.guides/html/native/guides_n.htm
index 2ec6796..740bcaa 100644 (file)
--- a/org.tizen.guides/html/native/guides_n.htm
+++ b/org.tizen.guides/html/native/guides_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Tizen Native Guides</title>  
+       <title>Tizen Native Guides</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,7 +32,7 @@
                        <li><a href="../../../org.tizen.native.wearable.apireference/index.html">API Reference for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
@@ -40,7 +40,7 @@
 
 <p>Tizen native guides introduce various features for native applications. The features are supported in the native API, and you can use them in creating Tizen applications.</p>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         If you have an application based on the Tizen 2.3, use the <a href="migration_guide_n.htm">Migration Guide</a> to make it conform to Tizen 2.4 Application Framework APIs.
@@ -117,7 +117,7 @@
 
 <p>The performance features define how you can use tracepoints. You can generate traces and visualize them to help you to optimize your application performance.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/internationalization/i18n_n.htm b/org.tizen.guides/html/native/internationalization/i18n_n.htm
index 259d6ab..423f748 100644 (file)
--- a/org.tizen.guides/html/native/internationalization/i18n_n.htm
+++ b/org.tizen.guides/html/native/internationalization/i18n_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>i18n</title>  
+       <title>i18n</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,13 +20,13 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
-               </ul>   
+               </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#ubrk">Location Boundaries with Ubrk</a></li>
@@ -50,7 +50,7 @@
                        <li><a href="#manage_ubrk">Managing Iteration Using Ubrk</a></li>
                        <li><a href="#uenum">Managing Enumerations</a></li>
                        <li><a href="#tmz">Managing Time Zones</a></li>
-                       <li><a href="#manage_uset">Managing Sets</a></li>                       
+                       <li><a href="#manage_uset">Managing Sets</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -58,7 +58,7 @@
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -74,7 +74,7 @@
        <p>With Unormalization, you can perform <a href="#unormal">standard unicode normalization</a>.</p>
        </li>
        <li>Managing the calendar and dates
-       <p>With Udatepg, you can <a href="#udatepg">generate date format patterns</a>, such as &quot;yy-MM-dd&quot;. You can also handle various conversions: you can <a href="#ucalendar">convert between a Udate object and a set of integer fields</a> with Ucalendar, and you can <a href="#udate">convert dates and times</a> from their internal representations to textual form and back with Udate.</p> 
+       <p>With Udatepg, you can <a href="#udatepg">generate date format patterns</a>, such as "yy-MM-dd". You can also handle various conversions: you can <a href="#ucalendar">convert between a Udate object and a set of integer fields</a> with Ucalendar, and you can <a href="#udate">convert dates and times</a> from their internal representations to textual form and back with Udate.</p>
        </li>
        <li>Managing numbers
        <p>You can <a href="#unumber">format and parse numbers</a> for any locale with Unumber.</p>
@@ -103,40 +103,40 @@
 <p>The types of Ucalendar interpret a Udate according to the rules of a specific calendar system, such as the gregorian or traditional system.</p>
 <p>A Ucalendar object can produce all the time field values needed to implement the date-time formatting for a particular language and calendar style (for example, Japanese-Gregorian, Japanese-Traditional).</p>
 
-<p>When computing a Udate from the time fields, 2 special circumstances can arise. The information can be insufficient to compute the Udate (you have only the year and the month, but not the day of the month), or the information can be inconsistent (such as &quot;Tuesday, July 15, 1996&quot; even though July 15, 1996 is actually a Monday).</p>
+<p>When computing a Udate from the time fields, 2 special circumstances can arise. The information can be insufficient to compute the Udate (you have only the year and the month, but not the day of the month), or the information can be inconsistent (such as "Tuesday, July 15, 1996" even though July 15, 1996 is actually a Monday).</p>
 <ul>
 <li><strong>Insufficient information</strong> <p>The calendar uses the default information to specify the missing fields. This can vary by calendar: for the Gregorian calendar, the default for a field is the same as that of the start of the epoch, such as <code>I18N_UCALENDAR_YEAR = 1970</code>, <code>I18N_UCALENDAR_MONTH = JANUARY</code>, <code>I18N_UCALENDAR_DATE = 1</code>.</p></li>
 <li><strong>Inconsistent information</strong> <p>If the fields conflict, the calendar prefers the most recently set fields. For example, when determining the day, the calendar looks for one of the following field combinations listed in the following table. The most recent combination, as determined by the most recently set single field, is used.</p></li>
-</ul> 
+</ul>
   <p align="center" class="Table"><strong>Table: Combinations of the calendar fields to determine the day</strong></p>
 <table>
-   <tbody> 
-    <tr> 
-     <th>Combinations of the calendar fields</th> 
-    </tr> 
-    <tr> 
+   <tbody>
+    <tr>
+     <th>Combinations of the calendar fields</th>
+    </tr>
+    <tr>
      <td><code>I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_MONTH</code>
 <p><code>I18N_UCALENDAR_MONTH + I18N_UCALENDAR_WEEK_OF_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</code></p>
 <p><code>I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_WEEK_IN_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</code></p>
 <p><code>I18N_UCALENDAR_DAY_OF_YEAR</code></p>
 <p><code>I18N_UCALENDAR_DAY_OF_WEEK + I18N_UCALENDAR_WEEK_OF_YEAR</code></p></td>
-</tr> 
-   </tbody> 
+</tr>
+   </tbody>
   </table>
 
 <p>For the time of day:</p>
-<p align="center" class="Table"><strong>Table: Combinations of calendar fields to determine the time of the day</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Combinations of the calendar fields</th> 
-    </tr> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Combinations of calendar fields to determine the time of the day</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Combinations of the calendar fields</th>
+    </tr>
+    <tr>
      <td><code>I18N_UCALENDAR_HOUR_OF_DAY</code>
         <p><code>I18N_UCALENDAR_AM_PM + I18N_UCALENDAR_HOUR</code></p></td>
-    </tr> 
-   </tbody> 
-  </table> 
+    </tr>
+   </tbody>
+  </table>
 
            <div class="note">
         <strong>Note</strong>
@@ -150,8 +150,8 @@
 </p>
 
 <p>The following table describes the details of script codes that you can get using the <code>i18n_uchar_get_int_property_value()</code> function.
-</p> 
-  <p align="center" class="Table"><strong>Table: Script codes</strong></p>  
+</p>
+  <p align="center" class="Table"><strong>Table: Script codes</strong></p>
 <table border="1">
    <tbody>
 <tr>
@@ -282,24 +282,24 @@
 
 
 <h2 id="ulocale" name="ulocale">Locale-sensitive Operations with Ulocale</h2>
-<p>The Ulocale API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">wearable</a> applications) represents a specific geographical, political, or cultural region. Locale-sensitive operations <a href="#locales">use the Ulocale functions to tailor information</a> for the user. For example, displaying a number is a locale-sensitive operation. The number must be formatted according to the customs and conventions of the user&#39;s native country, region, or culture.
+<p>The Ulocale API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">wearable</a> applications) represents a specific geographical, political, or cultural region. Locale-sensitive operations <a href="#locales">use the Ulocale functions to tailor information</a> for the user. For example, displaying a number is a locale-sensitive operation. The number must be formatted according to the customs and conventions of the user's native country, region, or culture.
 </p>
 <p>You create a locale with one of the options listed below. Each component is separated by an underscore in the locale string:</p>
- 
- <p align="center" class="Table"><strong>Table: Options for creating a locale</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Options for creating a locale</th> 
-    </tr> 
-    <tr> 
+
+ <p align="center" class="Table"><strong>Table: Options for creating a locale</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Options for creating a locale</th>
+    </tr>
+    <tr>
      <td><code>newLanguage</code>
         <p><code>newLanguage + newCountry</code></p>
         <p><code>newLanguage + newCountry + newVariant</code></p></td>
     </tr>
    </tbody>
   </table>
-  
+
 <p>The first option is a valid <a href="http://www.loc.gov/standards/iso639-2/php/code_list.php" target="_blank">ISO Language Code</a>. These codes are the lower-case 2-letter codes as defined by the ISO-639 standard.
 </p>
 <p>The second option includes an additional <a href="http://www.chemie.fu-berlin.de/diverse/doc/ISO_3166.html" target="_blank">ISO Country Code</a>.
@@ -331,7 +331,7 @@
 <h3 id="pattern_syntax" name="pattern_syntax">Pattern Syntax</h3>
 
 <p>Patterns are accepted by the <code>i18n_uset_create_pattern()</code>, <code>i18n_uset_create_pattern_options()</code>, and <code>i18n_uset_apply_pattern()</code> functions and returned by the <code>i18n_uset_to_pattern()</code> function. The patterns follow a syntax similar to that employed by version 8 regular expression character classes.</p>
-<p align="center" class="Table"><strong>Table: Examples of simple pattern syntaxes</strong></p> 
+<p align="center" class="Table"><strong>Table: Examples of simple pattern syntaxes</strong></p>
 <table>
     <tbody>
                <tr>
@@ -344,15 +344,15 @@
         </tr>
         <tr>
             <td><code>[a]</code></td>
-            <td>Character &#39;a&#39;</td>
+            <td>Character 'a'</td>
         </tr>
         <tr>
             <td><code>[ae]</code></td>
-            <td>Characters &#39;a&#39; and &#39;e&#39;</td>
+            <td>Characters 'a' and 'e'</td>
         </tr>
         <tr>
             <td><code>[a-e]</code></td>
-            <td>Characters &#39;a&#39; through &#39;e&#39; inclusive, in Unicode code point order</td>
+            <td>Characters 'a' through 'e' inclusive, in Unicode code point order</td>
         </tr>
         <tr>
             <td><code>[\u4E01]</code></td>
@@ -360,21 +360,21 @@
         </tr>
         <tr>
             <td><code>[a{ab}{ac}]</code></td>
-            <td>Character &#39;a&#39; and the multicharacter strings &#39;ab&#39; and &#39;ac&#39;</td>
+            <td>Character 'a' and the multicharacter strings 'ab' and 'ac'</td>
         </tr>
         <tr>
             <td><code>[\p{Lu}]</code></td>
-            <td>All characters in the general category &#39;uppercase letter&#39;</td>
+            <td>All characters in the general category 'uppercase letter'</td>
         </tr>
     </tbody>
 </table>
 <p>Any character can be preceded by a backslash in order to remove any special meaning. Whitespace characters are ignored, unless they are escaped.</p>
 <p>Property patterns specify a set of characters having a certain property as defined by the Unicode standard. Both the POSIX-like <code>[:Lu:]</code> and the Perl-like syntax <code>\\p{Lu}</code> are recognized.</p>
-<p>Patterns specify individual characters, ranges of characters, and Unicode property sets. When the elements are concatenated, they specify their union. To complement a set, place a &#39;^&#39; immediately after the opening &#39;[&#39;. Property patterns are inverted by modifying their delimiters, <code>[:^foo]</code> and <code>\\P{foo}</code>. In any other location, &#39;^&#39; has no special meaning.</p>
-<p>Ranges are indicated by placing a &#39;-&#39; between 2 characters, as in &quot;a-z&quot;. This specifies the range of all characters from the left to the right, in Unicode order. If the left character is greater than or equal to the right character, it is a syntax error. If a &#39;-&#39; occurs as the first character after the opening &#39;[&#39; or &#39;[^&#39;, or if it occurs as the last character before the closing &#39;]&#39;, it is taken as a literal. This means that <code>[a\-b]</code>, <code>[-ab]</code>, and <code>[ab-]</code> all indicate the same set of 3 characters, &#39;a&#39;, &#39;b&#39;, and &#39;-&#39;.</p>
-<p>Sets can be intersected using the &#39;&amp;&#39; operator or the asymmetric set difference can be taken using the &#39;-&#39; operator. For example, <code>[[:L:]&amp;[\\u0000-\\u0FFF]]</code> indicates the set of all Unicode letters with values less than 4096. Operators (&#39;&amp;&#39; and &#39;|&#39;) have equal precedence and bind left-to-right. This means that <code>[[:L:]-[a-z]-[\\u0100-\\u01FF]]</code> is equivalent to <code>[[[:L:]-[a-z]]-[\\u0100-\\u01FF]]</code>. This only really matters for difference; intersection is commutative.</p>
+<p>Patterns specify individual characters, ranges of characters, and Unicode property sets. When the elements are concatenated, they specify their union. To complement a set, place a '^' immediately after the opening '['. Property patterns are inverted by modifying their delimiters, <code>[:^foo]</code> and <code>\\P{foo}</code>. In any other location, '^' has no special meaning.</p>
+<p>Ranges are indicated by placing a '-' between 2 characters, as in "a-z". This specifies the range of all characters from the left to the right, in Unicode order. If the left character is greater than or equal to the right character, it is a syntax error. If a '-' occurs as the first character after the opening '[' or '[^', or if it occurs as the last character before the closing ']', it is taken as a literal. This means that <code>[a\-b]</code>, <code>[-ab]</code>, and <code>[ab-]</code> all indicate the same set of 3 characters, 'a', 'b', and '-'.</p>
+<p>Sets can be intersected using the '&amp;' operator or the asymmetric set difference can be taken using the '-' operator. For example, <code>[[:L:]&amp;[\\u0000-\\u0FFF]]</code> indicates the set of all Unicode letters with values less than 4096. Operators ('&amp;' and '|') have equal precedence and bind left-to-right. This means that <code>[[:L:]-[a-z]-[\\u0100-\\u01FF]]</code> is equivalent to <code>[[[:L:]-[a-z]]-[\\u0100-\\u01FF]]</code>. This only really matters for difference; intersection is commutative.</p>
 
-<p align="center" class="Table"><strong>Table: Examples of set syntaxes</strong></p> 
+<p align="center" class="Table"><strong>Table: Examples of set syntaxes</strong></p>
 <table>
     <tbody>
                <tr>
@@ -383,15 +383,15 @@
         </tr>
         <tr>
             <td><code>[a]</code></td>
-            <td>Set containing &#39;a&#39;</td>
+            <td>Set containing 'a'</td>
         </tr>
         <tr>
             <td><code>[a-z]</code></td>
-            <td>Set containing &#39;a&#39; through &#39;z&#39; and all letters in between, in Unicode order</td>
+            <td>Set containing 'a' through 'z' and all letters in between, in Unicode order</td>
         </tr>
         <tr>
             <td><code>[^a-z]</code></td>
-            <td>Set containing all characters but &#39;a&#39; through &#39;z&#39;, that is, U+0000 through &#39;a&#39;-1 and &#39;z&#39;+1 through U+10FFFF</td>
+            <td>Set containing all characters but 'a' through 'z', that is, U+0000 through 'a'-1 and 'z'+1 through U+10FFFF</td>
         </tr>
         <tr>
             <td><code>[[pat1][pat2]]</code></td>
@@ -415,10 +415,10 @@
         </tr>
     </tbody>
 </table>
-         
+
            <div class="note">
         <strong>Note</strong>
-        You cannot add an empty string (&quot;&quot;) to a set.
+        You cannot add an empty string ("") to a set.
     </div>
 
 
@@ -426,7 +426,7 @@
 
 <p>The following table provide examples of formal syntax patterns.</p>
 
- <p align="center" class="Table"><strong>Table: Formal syntax patterns</strong></p> 
+ <p align="center" class="Table"><strong>Table: Formal syntax patterns</strong></p>
 <table>
     <tbody>
                <tr>
@@ -435,11 +435,11 @@
         </tr>
         <tr>
             <td><code>pattern :=</code></td>
-            <td>(&#39;[&#39; &#39;^&#39;? item* &#39;]&#39;) | property</td>
+            <td>('[' '^'? item* ']') | property</td>
         </tr>
         <tr>
             <td><code>item :=</code></td>
-            <td>char | (char &#39;-&#39; char) | pattern-expr</td>
+            <td>char | (char '-' char) | pattern-expr</td>
         </tr>
         <tr>
             <td><code>pattern-expr :=</code></td>
@@ -447,15 +447,15 @@
         </tr>
         <tr>
             <td><code>op :=</code></td>
-            <td>&#39;&amp;&#39; | &#39;-&#39;</td>
+            <td>'&amp;' | '-'</td>
         </tr>
         <tr>
             <td><code>special :=</code></td>
-            <td>&#39;[&#39; | &#39;]&#39; | &#39;-&#39;</td>
+            <td>'[' | ']' | '-'</td>
                </tr>
         <tr>
             <td><code>char :=</code></td>
-            <td>Any character that is not special | (&#39;\&#39; any character) | (&#39;\u&#39; hex hex hex hex)</td>
+            <td>Any character that is not special | ('\' any character) | ('\u' hex hex hex hex)</td>
         </tr>
         <tr>
             <td><code>property :=</code></td>
@@ -478,7 +478,7 @@
             <td>Either a or b</td>
         </tr>
         <tr>
-            <td><code>&#39;a&#39;</code></td>
+            <td><code>'a'</code></td>
             <td>Literal string between the quotes</td>
         </tr>
     </tbody>
@@ -491,10 +491,10 @@
 <p>The i18n uses 16-bit Unicode (UTF-16) in the form of arrays of <code>i18n_uchar</code> code units. UTF-16 encodes each Unicode code point with either 1 or 2 <code>i18n_uchar</code> code units. This is the default form of Unicode, and a forward-compatible extension of the original, fixed-width form that was known as UCS-2. UTF-16 superseded UCS-2 with Unicode 2.0 in 1996.</p>
 <p>The i18n also handles 16-bit Unicode text with unpaired surrogates. Such text is not well-formed UTF-16. Code-point-related functions treat unpaired surrogates as surrogate code points, such as separate units.</p>
 <p>Although UTF-16 is a variable-width encoding form, such as some legacy multi-byte encodings, it is much more efficient even for random access because the code unit values for single-unit characters versus lead units versus trail units are completely disjoint. This means that it is easy to determine character (code point) boundaries from random offsets in the string.</p>
-<p>Unicode (UTF-16) string processing is optimized for the single-unit case. Although it is important to support supplementary characters, which use pairs of lead/trail code units called &quot;surrogates&quot;, their occurrence is rare. Almost all characters in modern use require only a single <code>i18n_uchar</code> code unit (such as their code point values are &lt;=0xffff).</p>
+<p>Unicode (UTF-16) string processing is optimized for the single-unit case. Although it is important to support supplementary characters, which use pairs of lead/trail code units called "surrogates", their occurrence is rare. Almost all characters in modern use require only a single <code>i18n_uchar</code> code unit (such as their code point values are &lt;=0xffff).</p>
 
  <h3 id="map" name="map">Character Set Mapping Tables</h3>
-<p>The i18n API provides a character set conversion with mapping tables for a number of important codepages. The default tables are a subset of IBM&#39;s CDRA conversion table repository. ICU&#39;s <a href="http://demo.icu-project.org/icu-bin/convexp" target="_blank">Converter Explorer</a> shows aliases and codepage charts for the default tables that are built into a standard ICU distribution.</p>
+<p>The i18n API provides a character set conversion with mapping tables for a number of important codepages. The default tables are a subset of IBM's CDRA conversion table repository. ICU's <a href="http://demo.icu-project.org/icu-bin/convexp" target="_blank">Converter Explorer</a> shows aliases and codepage charts for the default tables that are built into a standard ICU distribution.</p>
 <p>Conversions for most codepages are implemented differently on different platforms. We are providing  mapping tables here from many different sources, so that the i18n users and others can use these tables to get the same conversion behavior as on the original platforms.</p>
 <p>The mapping tables and some of the source code of the tools that collected these tables are checked into a <a href="http://source.icu-project.org/repos/icu/data/trunk/charset/data/ucm/" target="_blank">CVS repository</a>.
 </p>
@@ -502,12 +502,12 @@
 </p>
 
 <h2 id="prerequisites">Prerequisites</h2>
-       
+
        <p>To use the functions and data types of the i18n API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">wearable</a> applications) and its submodules, include the <code>&lt;utils_i18n.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;utils_i18n.h&gt;
 </pre>
-       
+
 <h2 id="characters" name="characters">Managing Characters and Strings</h2>
 
 <p>Character and string management tasks include:</p>
@@ -529,7 +529,7 @@
         <strong>Note</strong>
         All source and destination buffers must be different.
     </div>
-         
+
 
 <h3 id="compare" name="compare">Comparing Ustrings</h3>
 <p>To compare 2 Ustrings for bitwise equality, use the <code>i18n_ustring_compare()</code> function.</p>
@@ -538,9 +538,9 @@
 #define BUF_SIZE 64
 
 i18n_uchar s1[BUF_SIZE];
-i18n_ustring_copy_ua(s1, &quot;Tizen&quot;);
+i18n_ustring_copy_ua(s1, "Tizen");
 i18n_uchar s2[BUF_SIZE];
-i18n_ustring_copy_ua(s2, &quot;Bada&quot;);
+i18n_ustring_copy_ua(s2, "Bada");
 int32_t result = i18n_ustring_compare(s1, s2);
 </pre>
 
@@ -555,9 +555,9 @@ i18n_ucollator_create(I18N_ULOCALE_US, &amp;coll);
 <p>The strength influences how the strings are compared. The following strength levels are available:</p>
 <ul>
 <li><code>I18N_UCOLLATOR_DEFAULT_STRENGTH</code>: Default</li>
-<li><code>I18N_UCOLLATOR_PRIMARY</code>: Compares the primary differences only, such as different base letters (&quot;a&quot; vs. &quot;b&quot;).</li>
-<li><code>I18N_UCOLLATOR_SECONDARY</code>: Compares primary and secondary differences, such as different accented forms of the same base letter (&quot;a&quot; vs. &quot;ä&quot;).</li>
-<li><code>I18N_UCOLLATOR_TERTIARY</code>: Compares primary, secondary, and tertiary differences, such as case differences (&quot;a&quot; vs. &quot;A&quot;).</li>
+<li><code>I18N_UCOLLATOR_PRIMARY</code>: Compares the primary differences only, such as different base letters ("a" vs. "b").</li>
+<li><code>I18N_UCOLLATOR_SECONDARY</code>: Compares primary and secondary differences, such as different accented forms of the same base letter ("a" vs. "ä").</li>
+<li><code>I18N_UCOLLATOR_TERTIARY</code>: Compares primary, secondary, and tertiary differences, such as case differences ("a" vs. "A").</li>
 </ul>
 
 <pre class="prettyprint">
@@ -587,20 +587,20 @@ i18n_ucollator_destroy(coll);
 
 <ul><li><p>To convert a byte string to a Unicode string (Ustring), use the <code>i18n_ustring_copy_ua()</code> function:</p>
 <pre class="prettyprint">
-const char *src = &quot;Tizen&quot;;
+const char *src = "Tizen";
 i18n_uchar dest[BUF_SIZE];
 i18n_ustring_copy_ua(dest, src);
 </pre></li>
 <li><p>To convert a byte string to a Ustring while defining a maximum number of characters to be copied, use the <code>i18n_ustring_copy_ua_n()</code> function and set the character limit as the third parameter:</p>
 <pre class="prettyprint">
-const char *src = &quot;Tizen&quot;;
+const char *src = "Tizen";
 i18n_uchar dest[BUF_SIZE];
 i18n_ustring_copy_ua_n(dest, src, BUF_SIZE);
 </pre></li>
 <li><p>To convert a UTF-8 string to a UTF-16 string, use the <code>i18n_ustring_from_UTF8()</code> function.</p>
 <p>The function returns the length of the converted string and an error code variable as out parameters.</p>
 <pre class="prettyprint">
-const char *src = &quot;Tizen&quot;;
+const char *src = "Tizen";
 i18n_uchar dest[BUF_SIZE];
 int dest_len;
 i18n_uerror_code_e error_code = I18N_ERROR_NONE;
@@ -614,14 +614,14 @@ i18n_ustring_from_UTF8(dest, BUF_SIZE, &amp;dest_len, src, -1, &amp;error_code);
 <li><p>To convert a Ustring to a byte string, use the <code>i18n_ustring_copy_au()</code> function:</p>
 <pre class="prettyprint">
 i18n_uchar src[BUF_SIZE];
-i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
+i18n_ustring_copy_ua(src, "Tizen");
 char dest[BUF_SIZE];
 i18n_ustring_copy_au(dest, src);
 </pre></li>
 <li><p>To convert a Ustring to a byte string while defining a maximum number of characters to be copied, use the <code>i18n_ustring_copy_au_n()</code> function and set the character limit as the third parameter:</p>
 <pre class="prettyprint">
 i18n_uchar src[BUF_SIZE];
-i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
+i18n_ustring_copy_ua(src, "Tizen");
 char dest[BUF_SIZE];
 i18n_ustring_copy_au_n(dest, src, BUF_SIZE);
 </pre></li>
@@ -632,12 +632,12 @@ i18n_ustring_copy_au_n(dest, src, BUF_SIZE);
 
 <pre class="prettyprint">
 i18n_uchar src[BUF_SIZE];
-i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
+i18n_ustring_copy_ua(src, "Tizen");
 char dest[BUF_SIZE];
 int dest_len;
 i18n_uerror_code_e error_code = I18N_ERROR_NONE;
 i18n_ustring_to_UTF8(dest, BUF_SIZE, &amp;dest_len, src, i18n_ustring_get_length(src),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;error_code);
+                     &amp;error_code);
 </pre></li></ul>
 
 <h3 id="unicode" name="unicode">Getting the Unicode Block of a Character</h3>
@@ -665,12 +665,12 @@ i18n_uchar_get_int_property_value(character, I18N_UCHAR_EAST_ASIAN_WIDTH, &amp;p
 <h3 id="normalize" name="normalize">Normalizing Ustrings</h3>
 <p>To normalize a Ustring:</p>
 <ol>
-<li>Get a Unormalizer instance using the <code>i18n_unormalization_get_instance()</code> function of the Unormalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications). 
+<li>Get a Unormalizer instance using the <code>i18n_unormalization_get_instance()</code> function of the Unormalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications).
 <p>To use the built-in normalizer, set the first parameter to <code>NULL</code>.</p>
 <pre class="prettyprint">
 i18n_unormalizer_h normalizer;
-i18n_unormalization_get_instance(NULL, &quot;nfc&quot;, I18N_UNORMALIZATION_DECOMPOSE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;normalizer);
+i18n_unormalization_get_instance(NULL, "nfc", I18N_UNORMALIZATION_DECOMPOSE,
+                                 &amp;normalizer);
 </pre>
 </li>
 
@@ -688,9 +688,9 @@ i18n_unormalization_normalize(normalizer, &amp;src, 1, dest, 4, &amp;dest_str_le
 <li>Create a search iterator using the <code>i18n_usearch_create_new()</code> function of the Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications):
 <pre class="prettyprint">
 i18n_uchar text[BUF_SIZE];
-i18n_ustring_copy_ua(text, &quot;TIZEN&quot;);
+i18n_ustring_copy_ua(text, "TIZEN");
 i18n_uchar pattern[BUF_SIZE];
-i18n_ustring_copy_ua(pattern, &quot;ZEN&quot;);
+i18n_ustring_copy_ua(pattern, "ZEN");
 i18n_usearch_h usearch;
 i18n_usearch_create_new(pattern, -1, text, -1, I18N_ULOCALE_US, NULL, &amp;usearch);
 </pre></li>
@@ -707,11 +707,11 @@ i18n_usearch_destroy(usearch);
 <h3 id="uppercase" name="uppercase">Changing the Case in a Ustring</h3>
 <p>To change the case in a Ustring:</p>
 <ol>
-<li>To change all characters&#39; case in a Ustring, use the <code>i18n_ustring_to_upper()</code> or <code>i18n_ustring_to_lower()</code> function:
+<li>To change all characters' case in a Ustring, use the <code>i18n_ustring_to_upper()</code> or <code>i18n_ustring_to_lower()</code> function:
 
 <pre class="prettyprint">
 i18n_uchar src[BUF_SIZE];
-i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
+i18n_ustring_copy_ua(src, "Tizen");
 i18n_uchar dest[BUF_SIZE];
 i18n_ustring_to_upper(dest, BUF_SIZE, src, -1, I18N_ULOCALE_US, &amp;error_code);
 i18n_ustring_to_lower(dest, BUF_SIZE, src, -1, I18N_ULOCALE_US, &amp;error_code);
@@ -720,7 +720,7 @@ i18n_ustring_to_lower(dest, BUF_SIZE, src, -1, I18N_ULOCALE_US, &amp;error_code)
 <li>To change the string case to title case, use the <code>i18n_ustring_to_title_new()</code> function:
 <pre class="prettyprint">
 i18n_uchar src[BUF_SIZE];
-i18n_ustring_copy_ua(src, &quot;Tizen&quot;);
+i18n_ustring_copy_ua(src, "Tizen");
 i18n_uchar dest[BUF_SIZE];
 i18n_ustring_to_title_new(dest, BUF_SIZE, src, BUF_SIZE, NULL, NULL);
 </pre>
@@ -734,8 +734,8 @@ i18n_ustring_to_title_new(dest, BUF_SIZE, src, BUF_SIZE, NULL, NULL);
 i18n_uchar src[BUF_SIZE];
 i18n_uchar dest[BUF_SIZE];
 
-i18n_ustring_copy_ua(dest, &quot;Destination string&quot;);
-i18n_ustring_copy_ua(src, &quot;Appended string&quot;);
+i18n_ustring_copy_ua(dest, "Destination string");
+i18n_ustring_copy_ua(src, "Appended string");
 
 i18n_ustring_cat_n(dest, src, BUF_SIZE);
 /* Or */
@@ -753,12 +753,12 @@ i18n_uchar substring[BUF_SIZE];
 i18n_uchar *result = i18n_ustring_string(s, substr);
 
 if (result == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Substring not found&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Substring not found");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Substring index: %d&quot;, result - s);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Substring index: %d", result - s);
 </pre>
 
-       
+
 <h2 id="dates" name="dates">Managing Dates and Calendar</h2>
 
 
@@ -768,19 +768,19 @@ else
 <ul>
        <li>The Ucalendar API is used for converting between an <code>i18n_udate</code> object and a set of integer fields, such as <code>I18N_UCALENDAR_YEAR</code>, <code>I18N_UCALENDAR_MONTH</code>, <code>I18N_UCALENDAR_DAY</code>, and <code>I18N_UCALENDAR_HOUR</code>.</li>
        <li>The Udate API is used to convert dates and times from their internal representations to a textual form and back again in a language-independent manner.</li>
-       <li>The Udatepg API is used to generate date format patterns, such as &quot;yy-MM-dd&quot;.</li>
+       <li>The Udatepg API is used to generate date format patterns, such as "yy-MM-dd".</li>
 </ul>
 
 </li>
 <li>To create a Ucalendar, use the <code>i18n_ucalendar_create()</code> function:
 <pre class="prettyprint">
 i18n_uchar timezone[BUF_SIZE];
-const char *timezone_name = &quot;America/New_York&quot;;
+const char *timezone_name = "America/New_York";
 int timezone_name_len = strlen(timezone_name);
 i18n_ustring_copy_ua_n(timezone, timezone_name, timezone_name_len + 1);
 i18n_ucalendar_h ucalendar;
 i18n_ucalendar_create(timezone, -1, I18N_ULOCALE_US,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I18N_UCALENDAR_DEFAULT, &amp;ucalendar);
+                      I18N_UCALENDAR_DEFAULT, &amp;ucalendar);
 </pre></li>
 
 <li>To set a date in the Ucalendar, use the <code>i18n_ucalendar_set_date_time()</code> function.
@@ -839,15 +839,15 @@ i18n_udatepg_h udatepg;
 i18n_udatepg_create(I18N_ULOCALE_UK, &amp;udatepg);
 </pre>
 </li>
-<li>To generate a date best pattern with the pattern generator, use the <code>i18n_udatepg_get_best_pattern()</code> function. 
+<li>To generate a date best pattern with the pattern generator, use the <code>i18n_udatepg_get_best_pattern()</code> function.
 <p>As the second parameter, you need a draft format, which defines the fields to be displayed (for example, E for the day of the week, M for month, y for year, d for the day of the month, and D for day of the year).</p>
 <pre class="prettyprint">
 int pattern_len;
 i18n_uchar format[BUF_SIZE];
-i18n_ustring_copy_ua_n(format, &quot;EEEdMMMyyyyHHmmssz&quot;, BUF_SIZE);
+i18n_ustring_copy_ua_n(format, "EEEdMMMyyyyHHmmssz", BUF_SIZE);
 i18n_uchar best_pattern[BUF_SIZE];
 i18n_udatepg_get_best_pattern(udatepg, format, BUF_SIZE, best_pattern,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BUF_SIZE, &amp;pattern_len);
+                              BUF_SIZE, &amp;pattern_len);
 </pre>
 </li>
 </ol>
@@ -858,11 +858,11 @@ i18n_udatepg_get_best_pattern(udatepg, format, BUF_SIZE, best_pattern,
 <p>As the first and second parameter, specify the formatting style for time and date using the values of the <code>i18n_udate_format_style_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html#gaee2461e926bc151486d380c43bc4f2a3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html#gaee2461e926bc151486d380c43bc4f2a3">wearable</a> applications).</p>
 <pre class="prettyprint">
 i18n_udate_format_h date_format;
-const char *timezone_name = &quot;Asia/Seoul&quot;;
+const char *timezone_name = "Asia/Seoul";
 int timezone_name_len = strlen(timezone_name);
 i18n_ustring_copy_ua_n(timezone, timezone_name, timezone_name_len + 1);
 i18n_udate_create(I18N_UDATE_FULL, I18N_UDATE_FULL, I18N_ULOCALE_UK,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timezone, -1, best_pattern, -1, &amp;date_format);
+                  timezone, -1, best_pattern, -1, &amp;date_format);
 </pre>
 </li>
 <li>To obtain a Ustring with a specified date and the created date format, use the <code>i18n_udate_format_date()</code> function:
@@ -870,7 +870,7 @@ i18n_udate_create(I18N_UDATE_FULL, I18N_UDATE_FULL, I18N_ULOCALE_UK,
 i18n_uchar date_result[BUF_SIZE];
 int date_len;
 i18n_udate_format_date(date_format, now, date_result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BUF_SIZE, NULL, &amp;date_len);
+                       BUF_SIZE, NULL, &amp;date_len);
 </pre>
 </li>
 </ol>
@@ -905,13 +905,13 @@ const char *language_iso = i18n_ulocale_get_iso3_language(I18N_ULOCALE_GERMANY);
 </li>
 
 <li>To get the full name of the language for the specified locale, use the <code>i18n_ulocale_get_display_language()</code> function.
-<p>In the following example, the name of the &quot;fr_CA&quot; locale is obtained in German:</p>
+<p>In the following example, the name of the "fr_CA" locale is obtained in German:</p>
 <pre class="prettyprint">
 char *locale = I18N_ULOCALE_CANADA_FRENCH;
 i18n_uchar language_name[BUF_SIZE];
 int lang_len;
 i18n_ulocale_get_display_language(locale, I18N_ULOCALE_GERMANY, language_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BUF_SIZE, &amp;lang_len);
+                                  BUF_SIZE, &amp;lang_len);
 </pre>
 </li>
 
@@ -938,13 +938,13 @@ int32_t variant_len = i18n_ulocale_get_variant(locale, variant, BUF_SIZE);
 </pre>
 </li>
 
-<li>To get a full name for the specified locale, use the <code>i18n_ulocale_get_display_name()</code> function. 
-<p>In the following example, the name of the &quot;fr_CA&quot; locale is obtained in German:</p>
+<li>To get a full name for the specified locale, use the <code>i18n_ulocale_get_display_name()</code> function.
+<p>In the following example, the name of the "fr_CA" locale is obtained in German:</p>
 <pre class="prettyprint">
 i18n_uchar name[BUF_SIZE];
 int name_len;
 i18n_ulocale_get_display_name(I18N_ULOCALE_CANADA_FRENCH, I18N_ULOCALE_GERMANY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name, BUF_SIZE, &amp;name_len);
+                              name, BUF_SIZE, &amp;name_len);
 </pre>
 </li>
 
@@ -965,7 +965,7 @@ i18n_ulocale_set_default(I18N_ULOCALE_KOREA);
 <ol>
 <li>To create a number format, use the <code>i18n_unumber_create()</code> function.
 <p>Define the style as the first parameter using the <code>i18n_unumber_format_style_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga4edc8cb72e7f46e05d8cdfe24cf386f1">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga4edc8cb72e7f46e05d8cdfe24cf386f1">wearable</a> applications).</p>
-<p>The fourth parameter sets the locale (<code>NULL</code> for default). Some string shortcuts for specific locales are defined in the <code>utils_i18n_types.h</code> header file. For example, <code>I18N_ULOCALE_US</code> is equal to &quot;en_US&quot;.</p>
+<p>The fourth parameter sets the locale (<code>NULL</code> for default). Some string shortcuts for specific locales are defined in the <code>utils_i18n_types.h</code> header file. For example, <code>I18N_ULOCALE_US</code> is equal to "en_US".</p>
 <pre class="prettyprint">
 i18n_unumber_format_h num_format;
 i18n_unumber_format_style_e format_style = I18N_UNUMBER_CURRENCY;
@@ -987,7 +987,7 @@ i18n_unumber_format_double(num_format, myNumber, myString, BUF_SIZE, NULL);
 $4.50
 </pre>
 </li>
-<li>To get a symbol associated with the created number format, use the <code>i18n_unumber_get_symbol()</code> function. 
+<li>To get a symbol associated with the created number format, use the <code>i18n_unumber_get_symbol()</code> function.
 <p>The second parameter uses the values of the <code>i18n_unumber_format_symbol_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga9abb496f12b9fd47244060af5ecbc39e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html#ga9abb496f12b9fd47244060af5ecbc39e">wearable</a> applications) to define the symbol to be retrieved.</p>
 <p>The function returns the symbol used in the given locale. In the following example, it returns the currency <code>$</code> sign:</p>
 <pre class="prettyprint">
@@ -1010,7 +1010,7 @@ i18n_unumber_destroy(num_format);
 
 <p>To manipulate or iterate through strings, you can use the Ubrk library. It helps you to treat strings as a set of characters, words, or sentences:</p>
 <ol>
-<li>To create an iterator to iterate through a string, use the <code>i18n_ubrk_create()</code> function. 
+<li>To create an iterator to iterate through a string, use the <code>i18n_ubrk_create()</code> function.
 <p>The first parameter defines the type of the iterator:</p>
 <ul>
 <li><code>I18N_UBRK_WORD</code> for word iteration</li>
@@ -1020,14 +1020,14 @@ i18n_unumber_destroy(num_format);
 </ul>
 <pre class="prettyprint">
 i18n_ubreak_iterator_h boundary;
-const char *str = &quot;Twinkle, twinkle little star&quot;;
+const char *str = "Twinkle, twinkle little star";
 int str_len = strlen(str);
 i18n_uchar* stringToExamine = malloc(sizeof(i18n_uchar)*(str_len + 1));
 i18n_ustring_copy_ua(stringToExamine, str);
 i18n_ubrk_create(I18N_UBRK_WORD, I18N_ULOCALE_US, stringToExamine, -1, &amp;boundary);
 </pre></li>
 
-<li>To change the position of the iterator, you can use several functions, such as <code>i18n_ubrk_first()</code>, <code>i18n_ubrk_last()</code>, <code>i18n_ubrk_next()</code>, and <code>i18n_ubrk_previous()</code>. 
+<li>To change the position of the iterator, you can use several functions, such as <code>i18n_ubrk_first()</code>, <code>i18n_ubrk_last()</code>, <code>i18n_ubrk_next()</code>, and <code>i18n_ubrk_previous()</code>.
 <p>The following example retrieves the boundaries of the first word in the <code>stringToExamine</code> string. The <code>start</code> and <code>end</code> variables represent the boundaries of the first word, in this example 0 and 7.</p>
 <pre class="prettyprint">
 int32_t start = i18n_ubrk_first(boundary);
@@ -1055,7 +1055,7 @@ i18n_ubrk_destroy(boundary);
 <ol>
 <li>Define an array of strings (pointers to <code>char</code>):
 <pre class="prettyprint">
-const char* strings[] = {&quot;First&quot;, &quot;Second&quot;, &quot;Third&quot;, &quot;Fourth&quot;};
+const char* strings[] = {"First", "Second", "Third", "Fourth"};
 
 /* Length of the pointers array (the number of strings) */
 int32_t size = sizeof(strings) / sizeof(strings[0]);
@@ -1088,9 +1088,9 @@ int len;
 
 element = i18n_uenumeration_next(strings_enum, &amp;len);
 while (element != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use the returned string */
+    /* Use the returned string */
 
-&nbsp;&nbsp;&nbsp;&nbsp;element = i18n_uenumeration_next(strings_enum, &amp;len);
+    element = i18n_uenumeration_next(strings_enum, &amp;len);
 }
 </pre>
 
@@ -1120,9 +1120,9 @@ int len;
 
 tz = i18n_uenumeration_next(timezones, &amp;len);
 while (tz != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use the time zone string */
+    /* Use the time zone string */
 
-&nbsp;&nbsp;&nbsp;&nbsp;tz = i18n_uenumeration_next(timezones, &amp;len);
+    tz = i18n_uenumeration_next(timezones, &amp;len);
 }
 
 i18n_uenumeration_destroy(timezones);
@@ -1146,9 +1146,9 @@ int len;
 
 sk = i18n_uenumeration_next(skeletons, &amp;len);
 while (sk != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use the skeleton string */
+    /* Use the skeleton string */
 
-&nbsp;&nbsp;&nbsp;&nbsp;sk = i18n_uenumeration_next(skeletons, &amp;len);
+    sk = i18n_uenumeration_next(skeletons, &amp;len);
 }
 
 i18n_uenumeration_destroy(skeletons);
@@ -1156,7 +1156,7 @@ i18n_uenumeration_destroy(skeletons);
 </li>
 <li>To get an enumeration of keywords for a given locale string and iterate through the keywords, use the <code>i18n_ulocale_keywords_create()</code> function:
 <pre class="prettyprint">
-const char *loc_string = &quot;en_US@collation=PHONEBOOK;calendar=GREGORIAN;currency=USD&quot;;
+const char *loc_string = "en_US@collation=PHONEBOOK;calendar=GREGORIAN;currency=USD";
 
 i18n_uenumeration_h keywords;
 i18n_ulocale_keywords_create(loc_string, &amp;keywords);
@@ -1168,16 +1168,16 @@ int len;
 
 keyword = i18n_uenumeration_next(keywords, &amp;len);
 while (keyword != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use the keyword string */
+    /* Use the keyword string */
 
-&nbsp;&nbsp;&nbsp;&nbsp;keyword = i18n_uenumeration_next(keywords, &amp;len);
+    keyword = i18n_uenumeration_next(keywords, &amp;len);
 }
 
 i18n_uenumeration_destroy(keywords);
 </pre>
 </li>
 </ul>
-       
+
 
 <h2 id="tmz" name="tmz">Managing Time Zones</h2>
 <p>To manage time zone details, such as the time zone offset and daylight savings:</p>
@@ -1239,8 +1239,8 @@ i18n_timezone_get_region(timezone_id, region, &amp;region_len, BUF_SIZE);
 <li><p>When no longer needed, destroy the time zone instance with the <code>i18n_timezone_destroy()</code> function:</p>
 <pre class="prettyprint">
 i18n_timezone_destroy(tmz);
-</pre></li></ol>       
-       
+</pre></li></ol>
+
 <h2 id="manage_uset" name="manage_uset">Managing Sets</h2>
 <p>You can create sets, which contain characters and strings. You can iterate through the set elements and carry out various operations on the set.</p>
 <p>To manage sets:</p>
@@ -1258,7 +1258,7 @@ i18n_uset_create_empty(&amp;set);
 <ul>
 <li>Add characters from a string to the set using the <code>i18n_uset_add_all_code_points()</code> function:
 <pre class="prettyprint">
-const char *text = &quot;Example string&quot;;
+const char *text = "Example string";
 i18n_uchar u_input_text[BUF_SIZE];
 i18n_ustring_copy_ua(u_input_text, text);
 
@@ -1272,21 +1272,21 @@ int chars_count = i18n_uset_size(set);
 int i;
 
 /* Get all characters in the set */
-for (i = 0; i &lt; chars_count; i++) 
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_uchar32 uchar = i18n_uset_char_at(set, i);
+for (i = 0; i &lt; chars_count; i++)
+    i18n_uchar32 uchar = i18n_uset_char_at(set, i);
 </pre>
 </li>
 
 <li>Check whether the set contains a specific character using the <code>i18n_uset_contains()</code> function:
 <pre class="prettyprint">
-i18n_ubool contains_character = i18n_uset_contains(set, &#39;a&#39;);
+i18n_ubool contains_character = i18n_uset_contains(set, 'a');
 </pre>
 </li>
 
 <li>Check whether the set contains characters from a specific range using the <code>i18n_uset_contains_range()</code> function.
-<p>The following example uses the range &quot;a-c&quot;.</p>
+<p>The following example uses the range "a-c".</p>
 <pre class="prettyprint">
-i18n_ubool contains_character = i18n_uset_contains_range(set, &#39;a&#39;, &#39;c&#39;);
+i18n_ubool contains_character = i18n_uset_contains_range(set, 'a', 'c');
 </pre>
 </li>
 
@@ -1302,12 +1302,12 @@ i18n_ubool contains_character = i18n_uset_contains_all(set, compare_set);
 </ul>
 </li>
 <li>To manage string sets:
-<p>A string set contains strings as its elements.</p>  
+<p>A string set contains strings as its elements.</p>
 <ul>
 <li>Add a string to the set using the <code>i18n_uset_add_string()</code> function.
 <p>The entire string is a single element.</p>
 <pre class="prettyprint">
-const char *text = &quot;Example string&quot;;
+const char *text = "Example string";
 i18n_uchar u_input_text[BUF_SIZE];
 i18n_ustring_copy_ua(u_input_text, text);
 
@@ -1322,17 +1322,17 @@ int strings_count = i18n_uset_get_item_count(set);
 int32_t len = 0;
 int32_t i;
 for (i = 0; i &lt; strings_count; ++i) {
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_uchar32 start, end;
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_uchar string[100];
-&nbsp;&nbsp;&nbsp;&nbsp;len = i18n_uset_get_item(set, i, &amp;start, &amp;end, string, 100);
-&nbsp;&nbsp;&nbsp;&nbsp;if (len != 0) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* String was found, use the &#39;string&#39; variable */
+    i18n_uchar32 start, end;
+    i18n_uchar string[100];
+    len = i18n_uset_get_item(set, i, &amp;start, &amp;end, string, 100);
+    if (len != 0)
+        /* String was found, use the 'string' variable */
 }
 </pre>
 </li>
 <li>Check whether the set contains a string using the <code>i18n_uset_contains_string()</code> function:
 <pre class="prettyprint">
-const char *input_string = &quot;Input string&quot;;
+const char *input_string = "Input string";
 int input_string_len = strlen(input_string);
 i18n_uchar *input_ustring = malloc(sizeof(i18n_uchar) * (input_string_len + 1));
 i18n_ustring_copy_ua(input_ustring, input_string);
@@ -1343,7 +1343,7 @@ i18n_ubool contains = i18n_uset_contains_string(set, input_ustring, -1);
 </ul>
 </li>
 </ol>
- 
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/internationalization/internationalization_cover_n.htm b/org.tizen.guides/html/native/internationalization/internationalization_cover_n.htm
index 37efcac..67dc20b 100644 (file)
--- a/org.tizen.guides/html/native/internationalization/internationalization_cover_n.htm
+++ b/org.tizen.guides/html/native/internationalization/internationalization_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Internationalization</title>  
+       <title>Internationalization</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Internationalization</h1>
@@ -49,7 +49,7 @@
 
 <p>You can parse and format phone numbers to make contact management and telephony easier. You can retrieve location information from a phone number, and format the number according to a specific locale.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/internationalization/phonenumber_n.htm b/org.tizen.guides/html/native/internationalization/phonenumber_n.htm
index 484cf28..0a7447d 100644 (file)
--- a/org.tizen.guides/html/native/internationalization/phonenumber_n.htm
+++ b/org.tizen.guides/html/native/internationalization/phonenumber_n.htm
@@ -51,7 +51,7 @@
 <p>You can <a href="#get">get the location</a> based on the phone number, region, and language using the <code>phone_number_get_location_from_number()</code> function. If the function cannot provide the location with the passed language, it uses English.</p></li>
 
 <li>Formatting the phone number
-<p>You can <a href="#format">format the phone number string</a> based on the region using the dash (&quot;-&quot;) and space (&quot; &quot;) characters using the <code>phone_number_get_formatted_number()</code> function.</p></li>
+<p>You can <a href="#format">format the phone number string</a> based on the region using the dash ("-") and space (" ") characters using the <code>phone_number_get_formatted_number()</code> function.</p></li>
 
 <li>Normalizing the phone number
 <p>You can <a href="#normalise">normalize the phone number</a> using the <code>phone_number_get_normalized_number()</code> function.</p></li>
@@ -81,8 +81,8 @@ error_code = phone_number_connect();
 error_code = phone_number_disconnect();
 </pre>
 
-</li></ol>     
-       
+</li></ol>
+
  <h2 id="get" name="get">Getting the Location</h2>
 
 <p>To get the location from the phone number, use the <code>phone_number_get_location_from_number()</code> function:</p>
@@ -91,13 +91,13 @@ error_code = phone_number_disconnect();
 int ret;
 char *location = NULL;
 
-ret = phone_number_get_location_from_number(&quot;0222550114&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PHONE_NUMBER_REGION_REPUBLIC_OF_KOREA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PHONE_NUMBER_LANG_ENGLISH, &amp;location);
+ret = phone_number_get_location_from_number("0222550114",
+                                            PHONE_NUMBER_REGION_REPUBLIC_OF_KOREA,
+                                            PHONE_NUMBER_LANG_ENGLISH, &amp;location);
 if (PHONE_NUMBER_ERROR_NONE == ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use location */
-&nbsp;&nbsp;&nbsp;&nbsp;/* location – &quot;Seoul&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;location=%s&quot;, location);
+    /* Use location */
+    /* location – "Seoul" */
+    dlog_print(DLOG_DEBUG, LOG_TAG, "location=%s", location);
 }
 free(location);
 </pre>
@@ -110,12 +110,12 @@ free(location);
 int ret;
 char *formatted_number = NULL;
 
-ret = phone_number_get_formatted_number(&quot;0222550114&quot;, PHONE_NUMBER_REGION_REPUBLIC_OF_KOREA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;formatted_number);
+ret = phone_number_get_formatted_number("0222550114", PHONE_NUMBER_REGION_REPUBLIC_OF_KOREA,
+                                        &amp;formatted_number);
 if (PHONE_NUMBER_ERROR_NONE == ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use formatted_number */
-&nbsp;&nbsp;&nbsp;&nbsp;/* formatted_number - &quot;02-2255-0114&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;formatted_number=%s&quot;, formatted_number);
+    /* Use formatted_number */
+    /* formatted_number - "02-2255-0114" */
+    dlog_print(DLOG_DEBUG, LOG_TAG, "formatted_number=%s", formatted_number);
 }
 free(formatted_number);
 </pre>
@@ -128,11 +128,11 @@ free(formatted_number);
 int ret;
 char *normalized_number = NULL;
 
-ret = phone_number_get_normalized_number(&quot;0222550114&quot;, normalized_number);
+ret = phone_number_get_normalized_number("0222550114", normalized_number);
 if (PHONE_NUMBER_ERROR_NONE == ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use normalized_number */
-&nbsp;&nbsp;&nbsp;&nbsp;/* normalized_number - &quot;+821022550114&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;normalized_number=%s&quot;, normalized_number);
+    /* Use normalized_number */
+    /* normalized_number - "+821022550114" */
+    dlog_print(DLOG_DEBUG, LOG_TAG, "normalized_number=%s", normalized_number);
 }
 free(normalized_number);
 </pre>
diff --git a/org.tizen.guides/html/native/internationalization/resource_localization_n.htm b/org.tizen.guides/html/native/internationalization/resource_localization_n.htm
index 63e13a1..b25023f 100644 (file)
--- a/org.tizen.guides/html/native/internationalization/resource_localization_n.htm
+++ b/org.tizen.guides/html/native/internationalization/resource_localization_n.htm
@@ -5,26 +5,26 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Resource Localization</title> 
- </head> 
+  <title>Resource Localization</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
-               </ul>   
+               </ul>
                <p class="toc-title">Content</p>
         <ul class="toc">
                        <li><a href="#marking">Marking Text Parts Translatable</a></li>
@@ -36,15 +36,15 @@
                <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">Internationalization API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">Internationalization API for Wearable Native</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Internationalization" target="_blank">Internationalization Sample Description</a></li> 
+                       <li><a href="https://developer.tizen.org/development/sample/native/AppFW/Internationalization" target="_blank">Internationalization Sample Description</a></li>
                        </ul>
        </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Resource Localization</h1> 
+<h1>Resource Localization</h1>
 
-<p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">wearable</a> applications), which makes strings translatable and places them  in <code>.po</code> (portable object) files.</p> 
+<p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">wearable</a> applications), which makes strings translatable and places them  in <code>.po</code> (portable object) files.</p>
 
 
   <div class="note">
@@ -54,23 +54,23 @@
 <p>Be careful if you change the application ID in the Tizen manifest editor later on, because the <code>.mo</code> file name is not automatically changed, and problems can occur when getting the string resources.</p>
     </div>
 
-<p>The application must load the proper resource set depending on the current device locale. If no matching resource set is found for the current locale, the default resource set is used.</p>                  
+<p>The application must load the proper resource set depending on the current device locale. If no matching resource set is found for the current locale, the default resource set is used.</p>
 
 <p>To get the localized value of a string, use the <strong>string KEY</strong> shown in the PO file editor (the <code>msgid</code> field in the <code>.po</code> file), with the <code>_()</code> function (for example, <code>_(&lt;msgid&gt;)</code>). The underlying implementation calls the <code>i18n_get_text()</code> function to retrieve the localized value:</p>
 
 <pre class="prettyprint">
-char *hello_text = i18n_get_text(&quot;Hello&quot;);
+char *hello_text = i18n_get_text("Hello");
 </pre>
-<p>The <code>hello_text</code> variable is set to the localized text for the &quot;Hello&quot; string key (<code>msgid</code>) for the current device locale.</p>
+<p>The <code>hello_text</code> variable is set to the localized text for the "Hello" string key (<code>msgid</code>) for the current device locale.</p>
 <p>When the user changes the device language setting, the text in the application changes to the new language.</p>
 
 <h2 id="marking" name="marking">Marking Text Parts Translatable</h2>
-<p>The most common way to use a translation in your application strings involves the <code>elm_object_translatable_text_set()</code> and <code>elm_object_item_translatable_text_set()</code> functions. They set the untranslated string for the &quot;default&quot; part of the given <code>Evas_Object</code> or <code>Elm_Object_Item</code>, and mark the string as translatable.</p>
+<p>The most common way to use a translation in your application strings involves the <code>elm_object_translatable_text_set()</code> and <code>elm_object_item_translatable_text_set()</code> functions. They set the untranslated string for the "default" part of the given <code>Evas_Object</code> or <code>Elm_Object_Item</code>, and mark the string as translatable.</p>
+
+<p>To set the text for a "non-default" part as translatable, use the <code>elm_object_translatable_part_text_set()</code> and <code>elm_object_item_translatable_part_text_set()</code> functions.</p>
 
-<p>To set the text for a &quot;non-default&quot; part as translatable, use the <code>elm_object_translatable_part_text_set()</code> and <code>elm_object_item_translatable_part_text_set()</code> functions.</p>
 
 
-  
     <div class="note">
         <strong>Note</strong>
         Always provide the untranslated string as a parameter to the above functions. The EFL triggers the translation itself and re-translates the string automatically, if the system language changes.
@@ -92,14 +92,14 @@ char *i18n_get_text(const char *msgid);
         Do not modify or free the return value of the <code>i18n_get_text()</code> function. It is statically allocated.
     </div>
 
-<p>The following example shows how you can define the text translation for a genlist item, when the &quot;Some Text&quot; string is defined as a <code>msgid</code> field in the <code>.po</code> file:</p>
+<p>The following example shows how you can define the text translation for a genlist item, when the "Some Text" string is defined as a <code>msgid</code> field in the <code>.po</code> file:</p>
 
 <pre class="prettyprint">
-#include &quot;app_i18n.h&quot;
+#include "app_i18n.h"
 static char*
 _genlist_text_get(void *data, Evas_Object *obj, const char *part)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return strdup(i18n_get_text(&quot;Some Text&quot;));
+    return strdup(i18n_get_text("Some Text"));
 }
 </pre>
 
@@ -109,26 +109,26 @@ _genlist_text_get(void *data, Evas_Object *obj, const char *part)
 <p>For example, the <code>.po</code> file for French can contain the following lines (for one plural form):</p>
 
 <pre class="prettyprint">
-msgid &quot;%d Comment&quot;
-msgid_plural &quot;%d Comments&quot;
-msgstr[0] &quot;%d commentaire&quot;
-msgstr[1] &quot;%d commentaires&quot;
+msgid "%d Comment"
+msgid_plural "%d Comments"
+msgstr[0] "%d commentaire"
+msgstr[1] "%d commentaires"
 </pre>
 
 <p>The following example shows a situation where a language has several plural forms. For example, the <code>.po</code> file for Polish can contain the following lines:</p>
 
 <pre class="prettyprint">
-msgid &quot;%d Comment&quot;
-msgid_plural &quot;%d Comments&quot;
-msgstr[0] &quot;%d Komentarz&quot;
-msgstr[1] &quot;%d Komentarze&quot;
-msgstr[2] &quot;%d Komentarzy&quot;
+msgid "%d Comment"
+msgid_plural "%d Comments"
+msgstr[0] "%d Komentarz"
+msgstr[1] "%d Komentarze"
+msgstr[2] "%d Komentarzy"
 </pre>
 
 <p>The index values in the <code>msgstr</code> field are defined in system-wide settings. The ones for Polish are defined in the following example. They mean that there are 3 forms (including singular). The index is 0 (singular), if the given integer n is 1. If <code>(n % 10 &gt;= 2 &amp;&amp; n % 10 &lt;= 4 &amp;&amp; (n % 100 &lt; 10 | | n % 100 &gt;= 20)</code>, the index is 1, otherwise it is 2.</p>
 
 <pre class="prettyprint">
-&quot;Plural-Forms: nplurals = 3; plural = n = = 1 ? 0 : n%10&gt; = 2 &amp;&amp; n%10&lt; = 4 &amp;&amp; (n%100&lt;10 | | n%100&gt; = 20) ? 1 : 2;\n&quot;
+"Plural-Forms: nplurals = 3; plural = n = = 1 ? 0 : n%10&gt; = 2 &amp;&amp; n%10&lt; = 4 &amp;&amp; (n%100&lt;10 | | n%100&gt; = 20) ? 1 : 2;\n"
 </pre>
 
 <h3>Language Changes at Runtime</h3>
@@ -141,18 +141,18 @@ msgstr[2] &quot;%d Komentarzy&quot;
 static void
 _app_language_changed(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *language;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the current system language */
-&nbsp;&nbsp;&nbsp;&nbsp;system_settings_get_value_string(SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE, &amp;language);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the language in elementary */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_language_set(language);
-&nbsp;&nbsp;&nbsp;&nbsp;free(language);
+    char *language;
+    /* Retrieve the current system language */
+    system_settings_get_value_string(SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE, &amp;language);
+    /* Set the language in elementary */
+    elm_language_set(language);
+    free(language);
 }
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_LANGUAGE_CHANGED, _app_language_changed, &amp;ad);
+    ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED],
+                             APP_EVENT_LANGUAGE_CHANGED, _app_language_changed, &amp;ad);
 }
 </pre>
 
@@ -171,10 +171,10 @@ main(int argc, char *argv[])
 <li><code>xgettext</code>:
 
 <pre class="prettyprint">
-xgettext --directory = src --output-dir = res/po --keyword = _ --keyword = N_ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--keyword = elm_object_translatable_text_set:2
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--keyword = elm_object_item_translatable_text_set:2 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--add-comments = --from-code = utf-8 --foreign-use
+xgettext --directory = src --output-dir = res/po --keyword = _ --keyword = N_
+         --keyword = elm_object_translatable_text_set:2
+         --keyword = elm_object_item_translatable_text_set:2
+         --add-comments = --from-code = utf-8 --foreign-use
 </pre>
 
 <p>The above call extracts all strings that are used inside the <code>_()</code> function (optional shorthand for <code>i18n_get_text()</code>), uses UTF-8 as the encoding, and adds comments right before the strings to the output files.</p>
@@ -193,16 +193,16 @@ msgmerge --width=120 --update res/po/fr.po res/po/ref.pot
 <ul>
 <li id="assumptions">Make no assumptions about languages
 
-<p>Languages vary greatly and even if you know several of them, do not assume there is any common logic to them all. For example, with English typography, no character must appear before colons and semicolons (&#39;:&#39; and &#39;;&#39;). However, with French typography, there must be &quot;espace fine insécable&quot;, that is, a non-breakable space (HTML&#39;s &amp;nbsp;) that is narrower than regular spaces.</p>
+<p>Languages vary greatly and even if you know several of them, do not assume there is any common logic to them all. For example, with English typography, no character must appear before colons and semicolons (':' and ';'). However, with French typography, there must be "espace fine insécable", that is, a non-breakable space (HTML's &amp;nbsp;) that is narrower than regular spaces.</p>
 
 <p>To prevent problems with typography, avoid breaking your strings into multiple parts, if possible. The following example results in incorrect punctuation:</p>
 <pre class="prettyprint">
-snprintf(buf, some_size, &quot;%s: %s&quot;, i18n_get_text(error), i18n_get_text(reason));
+snprintf(buf, some_size, "%s: %s", i18n_get_text(error), i18n_get_text(reason));
 </pre>
 <p>Instead, use a single string and let the translators manage the punctuation:</p>
 <pre class="prettyprint">
-snprintf(buf, some_size, i18n_get_text(&quot;%s: %s&quot;), i18n_get_text(error),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i18n_get_text(reason));
+snprintf(buf, some_size, i18n_get_text("%s: %s"), i18n_get_text(error),
+         i18n_get_text(reason));
 </pre>
 </li>
 <li id="length">Remember that translations have different lengths
@@ -214,8 +214,8 @@ snprintf(buf, some_size, i18n_get_text(&quot;%s: %s&quot;), i18n_get_text(error)
 
 <pre class="prettyprint">
 #: some_file.c:43 another_file.c:41
-msgid &quot;Click Here&quot;
-msgstr &quot;Cliquez ici&quot;
+msgid "Click Here"
+msgstr "Cliquez ici"
 </pre>
 
 <p>In case you insert a new line at the top of the <code>some_file.c</code> file, the line indicator changes to look like this:</p>
@@ -266,4 +266,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/location_sensors/activity_n.htm b/org.tizen.guides/html/native/location_sensors/activity_n.htm
index 7b1fefe..428b861 100644 (file)
--- a/org.tizen.guides/html/native/location_sensors/activity_n.htm
+++ b/org.tizen.guides/html/native/location_sensors/activity_n.htm
@@ -20,16 +20,16 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
-               </ul>   
+               </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-                       <li><a href="#prerequisites">Prerequisites</a></li>             
+                       <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#activity">Detecting Activities</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
@@ -44,7 +44,7 @@
 <h1>Activity Recognition</h1>
 
 <p>The activity recognizer can monitor user activities. You can <a href="#activity">detect walking and running activity</a>. You can also recognize the stationary state and activities on a moving vehicle.</p>
-  
+
     <div class="note">
         <strong>Note</strong>
         You can test the activity recognition functionality only on a target device. The emulator does not support this feature.
@@ -67,7 +67,7 @@ activity_create(&amp;handle);
 </pre>
 </li>
 
-<li>To subscribe to notifications about specific activity state changes, invoke the <code>activity_start_recognition()</code> function to register a callback function. 
+<li>To subscribe to notifications about specific activity state changes, invoke the <code>activity_start_recognition()</code> function to register a callback function.
 <p>When specific activity data is received, the registered callback is invoked.</p>
 
 <p>The following example starts the activity monitor to receive notifications when the <code>ACTIVITY_WALK</code> activity is detected. Any of the <code>activity_type_e</code> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">wearable</a> applications) can be used in place of the <code>ACTIVITY_WALK</code> value.</p>
@@ -80,23 +80,23 @@ activity_start_recognition(handle, ACTIVITY_WALK, example_activity_callback, NUL
 <pre class="prettyprint">
 void
 example_activity_callback(activity_type_e activity, const activity_data_h data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double timestamp, activity_error_e error, void *user_data)
+                          double timestamp, activity_error_e error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int result;
+    int result;
 
-&nbsp;&nbsp;&nbsp;&nbsp;activity_accuracy_e accuracy;
-&nbsp;&nbsp;&nbsp;&nbsp;result = activity_get_accuracy(data, &amp;accuracy);
+    activity_accuracy_e accuracy;
+    result = activity_get_accuracy(data, &amp;accuracy);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (result != ACTIVITY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (result != ACTIVITY_ERROR_NONE)
+        /* Error handling */
 }
 </pre></li>
-<li>When activity monitoring is no longer needed, unset the callback function and destroy the handle: 
+<li>When activity monitoring is no longer needed, unset the callback function and destroy the handle:
 <pre class="prettyprint">
 activity_stop_recognition(handle);
 activity_release(handle);
 </pre></li></ol>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/location_sensors/device_sensors_n.htm b/org.tizen.guides/html/native/location_sensors/device_sensors_n.htm
index f496689..df19166 100644 (file)
--- a/org.tizen.guides/html/native/location_sensors/device_sensors_n.htm
+++ b/org.tizen.guides/html/native/location_sensors/device_sensors_n.htm
@@ -20,17 +20,17 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
-               </ul>   
+               </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-                       
-                       <li><a href="#prerequisites">Prerequisites</a></li>             
+
+                       <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#sensorlistener">Creating a Sensor Listener</a></li>
                        <li><a href="#subscribe">Subscribing for Sensor Events</a></li>
                        <li><a href="#record">Requesting Sensor Data Recording</a></li>
@@ -72,7 +72,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Device Sensors</h1>
   <p>Tizen provides functions for managing sensors and receiving sensor data.</p>
-  
+
 <p>The main features of the Sensor API include:</p>
   <ul>
   <li>Sensor listener
@@ -80,8 +80,8 @@
 
 <p>Sensor listeners can be added or removed at any time. The applications can add multiple sensor listeners for the same sensor type.</p>
 
-  <p>After you have created a sensor listener for a specific sensor and <a href="#subscribe">subscribed for sensor events</a>, you can monitor the device&#39;s internal sensors for sensor value changes. The application can receive the sensor data only when the data is modified. You can also <a href="#record">request the device to record sensor data</a> and <a href="#query">query for previously recorded data</a>.</p>
-  
+  <p>After you have created a sensor listener for a specific sensor and <a href="#subscribe">subscribed for sensor events</a>, you can monitor the device's internal sensors for sensor value changes. The application can receive the sensor data only when the data is modified. You can also <a href="#record">request the device to record sensor data</a> and <a href="#query">query for previously recorded data</a>.</p>
+
   <p>When running an application on the emulator, you can use the Event Injector view to provide sensor data for the application.</p>
 </li>
 <li>Sensor handle
@@ -94,16 +94,16 @@
    <li>Sensing interval</li>
    <li>Measurement range</li>
   </ul>
-  
+
 <p>A device can have various physical and virtual sensors. The following table lists the sensors supported by Tizen.</p>
-  
-  
+
+
     <div class="note">
         <strong>Note</strong>
         All devices do not support all sensors, so each sensor is not necessarily available on all devices. You can <a href="#sensorlistener">check whether a sensor is supported</a>. For more information, see <a href="../device/system_n.htm">System Information</a>.
     </div>
-  
- <p align="center" class="Table"><strong>Table: Supported sensor types</strong></p> 
+
+ <p align="center" class="Table"><strong>Table: Supported sensor types</strong></p>
 <table>
        <tbody>
        <tr>
@@ -151,7 +151,7 @@
        </tr>
 </tbody>
 </table>
-  
+
   </li>
 </ul>
 
@@ -165,17 +165,17 @@
 <h2 id="sensorlistener" name="sensorlistener">Creating a Sensor Listener</h2>
 
 
- 
+
 <p>If an application wants to observe data from a specific sensor, it must first check whether the sensor is supported. Then, you can create a sensor listener handle on the sensor:</p>
- 
+
  <ol>
 <li>To observe a specific sensor type, for example, accelerometer, check its availability:
 <pre class="prettyprint">
 bool supported = false;
 
-sensor_is_supported(SENSOR_ACCELEROMETER, &amp;supported); 
+sensor_is_supported(SENSOR_ACCELEROMETER, &amp;supported);
 if (!supported) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Accelerometer is not supported in the current device */
+    /* Accelerometer is not supported in the current device */
 }
 </pre>
 </li>
@@ -191,13 +191,13 @@ sensor_get_default_sensor(SENSOR_ACCELEROMETER, &amp;sensor);
 sensor_listener_h listener;
 sensor_create_listener(sensor, &amp;listener);
 </pre>
-</li> 
+</li>
 </ol>
- 
+
 <h2 id="subscribe" name="subscribe">Subscribing for Sensor Events</h2>
- 
+
 <p>If a listener is created successfully, it is able to observe sensor data changes through the listener. In addition, you can set several parameters, including the update interval of the sensor data and the power-save behavior of the listener. The following example shows how to set the parameters and listen to changes of sensor data:</p>
- 
+
 <ol>
 <li>To listen to sensor events, define a callback function and register it to the listener:
 <pre class="prettyprint">
@@ -205,20 +205,20 @@ sensor_create_listener(sensor, &amp;listener);
 void
 example_sensor_callback(sensor_h sensor, sensor_event_s *event, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   If a callback is used to listen to different sensor types,
-&nbsp;&nbsp;&nbsp;&nbsp;   it can check the sensor type
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_type_e type;
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_get_type(sensor, &amp;type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == SENSOR_ACCELEROMETER) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned long long timestamp = event-&gt;timestamp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int accuracy = event-&gt;accuracy;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float x = event-&gt;values[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float y = event-&gt;values[1];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float z = event-&gt;values[2];
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /*
+       If a callback is used to listen to different sensor types,
+       it can check the sensor type
+    */
+    sensor_type_e type;
+    sensor_get_type(sensor, &amp;type);
+
+    if (type == SENSOR_ACCELEROMETER) {
+        unsigned long long timestamp = event-&gt;timestamp;
+        int accuracy = event-&gt;accuracy;
+        float x = event-&gt;values[0];
+        float y = event-&gt;values[1];
+        float z = event-&gt;values[2];
+    }
 }
 
 /* Register callback */
@@ -248,7 +248,7 @@ sensor_listener_set_interval(listener, 200);
 <p>By default, the listener automatically stops listening for the sensor data, if the display is switched off or the device goes to the power-save mode. You can override such behavior:</p>
 <pre class="prettyprint">
 sensor_listener_set_attribute_int(listener, SENSOR_ATTRIBUTE_PAUSE_POLICY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SENSOR_PAUSE_NONE);
+                                  SENSOR_PAUSE_NONE);
 </pre>
 <p>The above example makes the listener to listen for the sensor data regardless of the display state and the power-save mode. However, it does not prevent the device from going to the sleep mode. To listen for the sensor data, the device must be awake anyway.</p>
 </li>
@@ -278,7 +278,7 @@ bool supported = false;
 
 sensor_recorder_is_supported(SENSOR_HUMAN_PEDOMETER, &amp;supported);
 if (!supported) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Pedometer is not supported or cannot be recorded in the current device */
+    /* Pedometer is not supported or cannot be recorded in the current device */
 }
 </pre>
  </li>
@@ -291,7 +291,7 @@ sensor_recorder_option_h option;
 sensor_recorder_create_option(&amp;option);
 /* 720 hours (30 days) */
 sensor_recorder_option_set_int(option, SENSOR_RECORDER_OPTION_RETENTION_PERIOD,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30 * 24);
+                               30 * 24);
 </pre>
 </li>
 
@@ -301,7 +301,7 @@ sensor_recorder_start(SENSOR_HUMAN_PEDOMETER, option);
 </pre>
 <p>Even if the application terminates or the device reboots, the system automatically continues to record pedometer data. As the retention period is set to 720 hours in the above example, the data older than 720 hours is erased automatically. If multiple applications set different retention periods, the longest one is chosen.</p>
 </li>
- 
+
 <li>When you no longer need to record pedometer data, stop the recording:
 <pre class="prettyprint">
 sensor_recorder_stop(SENSOR_HUMAN_PEDOMETER);
@@ -309,11 +309,11 @@ sensor_recorder_stop(SENSOR_HUMAN_PEDOMETER);
 <p>However, remember that the recording is not actually stopped, if another application has requested for the same sensor to be recorded.</p>
 </li>
 </ol>
- 
+
 <h2 id="query" name="query">Querying Recorded Sensor Data</h2>
- 
+
 <p>You can query the recorded sensor data with several query parameters. The query parameters differ between sensor types. In case of the pedometer, for example, you can get the daily step counts for the last 7 days by setting the necessary parameters:</p>
- 
+
 <ol>
 <li>Create a query.
 <p>In the following example, you get an aggregated data record per day (since <code>SENSOR_RECORDER_QUERY_TIME_INTERVAL</code> is set to 24 hours) and a day starts at 7 AM (not at midnight, since <code>SENSOR_RECORDER_QUERY_ANCHOR_TIME</code> is set to 7 AM).</p>
@@ -322,20 +322,20 @@ sensor_recorder_query_h query;
 sensor_recorder_create_query(&amp;query);
 /* Start 7 days ago */
 sensor_recorder_query_set_time(query, SENSOR_RECORDER_QUERY_START_TIME,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(time_t)(time(NULL) - (7 * 24 * 3600)));
+                               (time_t)(time(NULL) - (7 * 24 * 3600)));
 /* End now */
 sensor_recorder_query_set_time(query, SENSOR_RECORDER_QUERY_END_TIME, time(NULL));
-/* Aggregate every 24 hours */ 
+/* Aggregate every 24 hours */
 sensor_recorder_query_set_int(query, SENSOR_RECORDER_QUERY_TIME_INTERVAL, 24 * 60);
 /* Start the aggregation at 7 AM */
 sensor_recorder_query_set_time(query, SENSOR_RECORDER_QUERY_ANCHOR_TIME,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(time_t)(7 * 3600));
+                               (time_t)(7 * 3600));
 </pre>
 </li>
 <li>With the query handle, retrieve the actual aggregated data:
 <pre class="prettyprint">
 sensor_recorder_read(SENSOR_HUMAN_PEDOMETER, query,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;example_sensor_recorder_callback, NULL);
+                     example_sensor_recorder_callback, NULL);
 </pre>
 <p>The <code>sensor_recorder_read()</code> function is asynchronous. The synchronous variant is <code>sensor_recorder_read_sync()</code>.</p>
 </li>
@@ -343,36 +343,36 @@ sensor_recorder_read(SENSOR_HUMAN_PEDOMETER, query,
 <pre class="prettyprint">
 void
 example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int remains, sensor_error_e error,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                 int remains, sensor_error_e error,
+                                 void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int step;
-&nbsp;&nbsp;&nbsp;&nbsp;double distance;
-&nbsp;&nbsp;&nbsp;&nbsp;time_t start;
-&nbsp;&nbsp;&nbsp;&nbsp;time_t end;
+    int step;
+    double distance;
+    time_t start;
+    time_t end;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (error != SENSOR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (error != SENSOR_ERROR_NONE)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_recorder_get_time(data, &amp;start, &amp;end);
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_recorder_get_int(data, SENSOR_RECORDER_DATA_STEPS, &amp;step);
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_recorder_get_double(data, SENSOR_RECORDER_DATA_DISTANCE, &amp;distance);
+    sensor_recorder_get_time(data, &amp;start, &amp;end);
+    sensor_recorder_get_int(data, SENSOR_RECORDER_DATA_STEPS, &amp;step);
+    sensor_recorder_get_double(data, SENSOR_RECORDER_DATA_DISTANCE, &amp;distance);
 }
 </pre>
 </li>
 </ol>
-    
-       
+
+
 <h2 id="accelerometer" name="accelerometer">Accelerometer</h2>
-<p>The accelerometer measures changes in the velocity of a device. It is a combination of gravity and linear acceleration components. The accelerometer measures the device&#39;s accelerometer vector in 3 axes relative to its body frame.</p>
+<p>The accelerometer measures changes in the velocity of a device. It is a combination of gravity and linear acceleration components. The accelerometer measures the device's accelerometer vector in 3 axes relative to its body frame.</p>
 
-<p>An acceleration shift of 1g always exists on the axis aligned to Earth&#39;s gravity. If the device is at rest, the sensor data reads 1g (the gravity offset) on one of the device axis and tells you which device axis is aligned to the direction of gravity. A falling device which has reached terminal velocity ideally shows the accelerometer value of 0 on all axis. The change in the effect of Earth&#39;s gravity is observed on the 3 device axes by rotating the device along any of the 3 axes. </p>
+<p>An acceleration shift of 1g always exists on the axis aligned to Earth's gravity. If the device is at rest, the sensor data reads 1g (the gravity offset) on one of the device axis and tells you which device axis is aligned to the direction of gravity. A falling device which has reached terminal velocity ideally shows the accelerometer value of 0 on all axis. The change in the effect of Earth's gravity is observed on the 3 device axes by rotating the device along any of the 3 axes. </p>
 <p>The linear acceleration components which correspond to the measure of the linear motion subjected on the device can be obtained by removing the gravity components from the accelerometer data.</p>
 
 <p>The accelerometer provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.</p>
 <p align="center"><strong>Figure: Accelerometer vector and axes</strong></p>
 <p align="center"><img alt="Accelerometer vector and axes" src="../../images/sensor_types_accelerometer_vector.png" /></p>
-<p>The accelerometer outputs 4 values: 3 Cartesian axis values and a timestamp. The accelerometer sensor measures and returns axes values in &quot;m/s<sup>2</sup>&quot; (meters per second squared). When a device is moved in the &plusmn;X, &plusmn;Y, or &plusmn;Z direction, the corresponding output increases (+) or decreases (-).</p>
+<p>The accelerometer outputs 4 values: 3 Cartesian axis values and a timestamp. The accelerometer sensor measures and returns axes values in "m/s<sup>2</sup>" (meters per second squared). When a device is moved in the &plusmn;X, &plusmn;Y, or &plusmn;Z direction, the corresponding output increases (+) or decreases (-).</p>
 
   <p>The following table lists the measurement data that the accelerometer provides.</p>
    <p align="center" class="Table"><strong>Table: Measurement data detected by the accelerometer</strong></p>
@@ -509,7 +509,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-  
+
   <h2 id="mag_rotation" name="mag_rotation">Geomagnetic Rotation Vector Sensor</h2>
    <p>The geomagnetic rotation vector sensor is the output of a software/hardware-based sensor fusion solution which uses the accelerometer and magnetic sensors to compute the orientation of the device. In this sensor, the computed orientation is free of any drift, but it is inaccurate compared to a sensor fusion solution using the gyroscope sensor. The geomagnetic rotation vector sensor represents the orientation of the device as a combination of an angle and an axis in which the device has rotated through a specific angle around an axis (x, y, or z).</p>
 
@@ -561,15 +561,15 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-  
+
   <h2 id="gravity" name="gravity">Gravity Sensor</h2>
-  <p>The gravity sensor is a virtual sensor derived from the 3-axis acceleration sensor. The 3-axis gravity components provide a measure of the effect of Earth&#39;s gravity observed on the device reference axes. The gravity components measured on a device vary based on the change in the device orientation, and hence they provide a measure of the rotation subjected to the device.</p>
+  <p>The gravity sensor is a virtual sensor derived from the 3-axis acceleration sensor. The 3-axis gravity components provide a measure of the effect of Earth's gravity observed on the device reference axes. The gravity components measured on a device vary based on the change in the device orientation, and hence they provide a measure of the rotation subjected to the device.</p>
   <p align="center"><strong>Figure: Gravity sensor vector and axes</strong></p>
   <p align="center"><img alt="Gravity sensor vector and axes" src="../../images/sensor_types_gravity_frame.png" /></p>
-  <p>The gravity sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The gravity sensor measures and returns axes values in &quot;m/s<sup>2</sup>&quot; (meters per second squared). When a device is rotated in the &plusmn;X, &plusmn;Y, or &plusmn;Z direction, the corresponding output increases (+) or decreases (-).</p>
+  <p>The gravity sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The gravity sensor measures and returns axes values in "m/s<sup>2</sup>" (meters per second squared). When a device is rotated in the &plusmn;X, &plusmn;Y, or &plusmn;Z direction, the corresponding output increases (+) or decreases (-).</p>
 
   <p>The following table lists the measurement data that the gravity sensor provides.</p>
-   <p align="center" class="Table"><strong>Table: Measurement data detected by the gravity sensor</strong></p> 
+   <p align="center" class="Table"><strong>Table: Measurement data detected by the gravity sensor</strong></p>
    <table border="1" style="width: 100%">
    <tbody>
     <tr>
@@ -604,7 +604,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-  
+
   <h2 id="gyro" name="gyro">Gyroscope</h2>
   <p>The gyroscope detects angular velocity or angular rates of a device. The 3D gyroscope data is considered to be very sensitive in detecting incremental rotation angles. The rotation angles obtained by integrating the angular rates over longer duration is inaccurate due to the build-up of drift.</p>
   <p align="center"><strong>Figure: Gyroscope vector and axes</strong></p>
@@ -650,7 +650,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-  
+
   <h2 id="gyro_rotation" name="gyro_rotation">Gyroscope Rotation Vector Sensor</h2>
    <p>The gyroscope rotation vector sensor is the output of a software/hardware-based sensor fusion solution which uses the accelerometer and gyroscope to compute the orientation of the device. In this sensor, the pitch and roll equivalent representations are free of drift while the azimuth equivalent component is allowed to drift due to the absence of the magnetic sensor. The gyroscope rotation vector sensor represents the orientation of the device as a combination of an angle and an axis in which the device has rotated through a specific angle around an axis (x, y, or z).</p>
 
@@ -704,10 +704,10 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
   </table>
 
     <h2 id="hrm_green" name="hrm_green">Heart Rate Monitor LED Green Sensor</h2>
-        <p>The Heart Rate Monitor (HRM) LED green sensor measures the amount of green light that is reflected back from a person&#39;s blood vessel.</p>
+        <p>The Heart Rate Monitor (HRM) LED green sensor measures the amount of green light that is reflected back from a person's blood vessel.</p>
         <p>The following table lists the measurement data that the HRM LED green sensor provides.</p>
   <p align="center" class="Table"><strong>Table: Measurement data detected by the HRM LED green sensor</strong></p>
-  <table border="1" style="width: 100%"> 
+  <table border="1" style="width: 100%">
    <colgroup>
     <col />
     <col />
@@ -736,7 +736,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
   </table>
 
      <h2 id="hrm_ir" name="hrm_ir">Heart Rate Monitor LED IR Sensor</h2>
-        <p>The Heart Rate Monitor (HRM) LED infrared (IR) sensor measures the amount of infrared light that is reflected back from a person&#39;s blood vessel.</p>
+        <p>The Heart Rate Monitor (HRM) LED infrared (IR) sensor measures the amount of infrared light that is reflected back from a person's blood vessel.</p>
         <p>The following table lists the measurement data that the HRM LED IR sensor provides.</p>
  <p align="center" class="Table"><strong>Table: Measurement data detected by the HRM LED IR sensor</strong></p>
  <table border="1" style="width: 100%">
@@ -768,7 +768,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
   </table>
 
      <h2 id="hrm_red" name="hrm_red">Heart Rate Monitor LED Red Sensor</h2>
-        <p>The Heart Rate Monitor (HRM) LED red sensor measures the amount of red light that is reflected back from a person&#39;s blood vessel.</p>
+        <p>The Heart Rate Monitor (HRM) LED red sensor measures the amount of red light that is reflected back from a person's blood vessel.</p>
         <p>The following table lists the measurement data that the HRM LED red sensor provides.</p>
    <p align="center" class="Table"><strong>Table: Measurement data detected by the HRM LED red sensor</strong></p>
    <table border="1" style="width: 100%">
@@ -798,10 +798,10 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-  
-  
+
+
     <h2 id="hrm" name="hrm">Heart Rate Monitor Sensor</h2>
-        <p>The Heart Rate Monitor (HRM) sensor measures a person&#39;s heart rate in real time.</p>
+        <p>The Heart Rate Monitor (HRM) sensor measures a person's heart rate in real time.</p>
         <p>The following table lists the measurement data that the HRM sensor provides.</p>
    <p align="center" class="Table"><strong>Table: Measurement data detected by the HRM sensor</strong></p>
    <table border="1" style="width: 100%">
@@ -862,8 +862,8 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
      <td>%</td>
     </tr>
    </tbody>
-  </table> 
-  
+  </table>
+
      <h2 id="light" name="light">Light Sensor</h2>
   <p>The light sensor detects the brightness of ambient light. It can be used to measure the brightness level.</p>
   <p>As an example use case, the light sensor can be used to control the brightness of the screen. In a dark environment, the light sensor detects the brightness of the environment and can be used to increase the device screen backlight brightness level. In a brighter environment, the backlight brightness level is lowered to save battery power.</p>
@@ -883,7 +883,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
      <th>Unit</th>
     </tr>
     <tr>
-     <td>Timestamp</td> 
+     <td>Timestamp</td>
      <td><code>unsigned long long</code></td>
      <td>-</td>
      <td>Microseconds</td>
@@ -896,13 +896,13 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-  
+
   <h2 id="lin_accelerometer" name="lin_accelerometer">Linear Acceleration Sensor</h2>
-  <p>The linear acceleration sensor is derived from the accelerometer by excluding the gravity value, and it measures the user-driven changes in the velocity. The linear acceleration sensor is used to detect the dynamic movement of the device and analyze the user&#39;s motion profile. The 3-axes linear acceleration components provide a measure of the combined linear motion subjected to the device in the euclidean space.</p>
+  <p>The linear acceleration sensor is derived from the accelerometer by excluding the gravity value, and it measures the user-driven changes in the velocity. The linear acceleration sensor is used to detect the dynamic movement of the device and analyze the user's motion profile. The 3-axes linear acceleration components provide a measure of the combined linear motion subjected to the device in the euclidean space.</p>
   <p>The linear acceleration sensor provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.</p>
   <p align="center"><strong>Figure: User-acceleration sensor vector and axes</strong></p>
   <p align="center"><img alt="User-acceleration sensor vector and axes" src="../../images/sensor_types_useracceleration_vector.png" /></p>
-  <p>The linear acceleration sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The linear acceleration sensor measures and returns axes values in &quot;m/s<sup>2</sup>&quot; (meters per second squared). When a device is accelerated in the &plusmn;X, &plusmn;Y, or &plusmn;Z direction, the corresponding output increases (+) or decreases (-). The acceleration output is shown in the same direction as the user-driven force.</p>
+  <p>The linear acceleration sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The linear acceleration sensor measures and returns axes values in "m/s<sup>2</sup>" (meters per second squared). When a device is accelerated in the &plusmn;X, &plusmn;Y, or &plusmn;Z direction, the corresponding output increases (+) or decreases (-). The acceleration output is shown in the same direction as the user-driven force.</p>
   <p>The following table lists the measurement data that the linear acceleration sensor provides.</p>
    <p align="center" class="Table"><strong>Table: Measurement data detected by the linear acceleration sensor</strong></p>
    <table border="1" style="width: 100%">
@@ -945,10 +945,10 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-  
-  
+
+
  <h2 id="magnetic" name="magnetic">Magnetic Sensor</h2>
-  <p>The magnetic sensor is a 3-axis electronic compass (sometimes referred to as a &quot;magnetometer&quot; or &quot;geomagnetic sensor&quot;). It can also be used in determining the azimuth component of the device orientation provided that the tilt of the device is already computed. The magnetic sensor measures the Earth&#39;s magnetic field strength and fluctuations, and splits the measurement into X, Y, and Z components.</p>
+  <p>The magnetic sensor is a 3-axis electronic compass (sometimes referred to as a "magnetometer" or "geomagnetic sensor"). It can also be used in determining the azimuth component of the device orientation provided that the tilt of the device is already computed. The magnetic sensor measures the Earth's magnetic field strength and fluctuations, and splits the measurement into X, Y, and Z components.</p>
 <p>The following factors can have an impact on the sensor readings:</p>
   <ul>
    <li>The weather or the season of the year</li>
@@ -981,11 +981,11 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
      <td>μT (micro Tesla)</td>
     </tr>
     <tr>
-     <td>values[1]: Y</td> 
-     <td><code>float</code></td> 
-     <td>μT (micro Tesla)</td> 
-    </tr> 
-    <tr> 
+     <td>values[1]: Y</td>
+     <td><code>float</code></td>
+     <td>μT (micro Tesla)</td>
+    </tr>
+    <tr>
      <td>values[2]: Z</td>
      <td><code>float</code></td>
      <td>μT (micro Tesla)</td>
@@ -995,8 +995,8 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
   <p>The magnetic sensor uses the 3-axis Cartesian space coordinate system, as the following figure illustrates.</p>
   <p align="center"><strong>Figure: Magnetic field vector and axes</strong></p>
   <p align="center"><img alt="Magnetic field vector and axes" src="../../images/sensor_types_magnetic_vector.png" /></p>
-    
-  
+
+
   <h2 id="orientation" name="orientation">Orientation Sensor</h2>
   <p>The orientation sensor combines the 3-axis accelerometer, 3-axis magnetic sensor, and 3-axis gyroscope to determine the orientation (rotation angles) of the device. The orientation is the output of a software/hardware-based sensor fusion solution which uses the accelerometer, magnetic sensor, and gyroscope. The orientation sensor output is an alternative representation to the rotation vector sensor output used to determine the rotation of the device, and it is calculated in terms of Euler angles:</p>
   <ul>
@@ -1043,15 +1043,15 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
   </table>
 
 <p>The angular positions are measured using a fixed frame reference (X<sub>E</sub>, Y<sub>E</sub>, Z<sub>E</sub>).</p>
- 
+
   <p align="center"><strong>Figure: Angular positions and the fixed frame reference</strong></p>
   <p align="center"><img alt="Angular positions and the fixed frame reference" src="../../images/sensor_types_deviceorientation_frame.png" /></p>
-  
-  
+
+
   <h2 id="pedometer" name="pedometer">Pedometer</h2>
-  <p>The pedometer detects the user&#39;s steps, and returns the number of steps taken by the user since the last reboot, while at least 1 application is using the pedometer. The timestamp of the event denotes the time when the last step was taken. In addition to the number of steps, it also returns other tracking data to further describe the user&#39;s activity status. For example, it provides the user&#39;s moving distance and burned calories. All the values are reset to zero when the system reboots.</p>
+  <p>The pedometer detects the user's steps, and returns the number of steps taken by the user since the last reboot, while at least 1 application is using the pedometer. The timestamp of the event denotes the time when the last step was taken. In addition to the number of steps, it also returns other tracking data to further describe the user's activity status. For example, it provides the user's moving distance and burned calories. All the values are reset to zero when the system reboots.</p>
   <p>Normally, a callback function is invoked whenever a new step is detected. However, to be power-efficient, the sensor can internally accumulate its detected events while the system sleeps. In this case, the accumulated data is reported when the system wakes up, that is, the display is switched on. In addition, even though the display is not switched on explicitly, the sensor can wake up the device to deliver its accumulated data occasionally.</p>
-  <p>If you want to track the user&#39;s steps continuously, do not stop the sensor listener to be sure that it keeps running. If there is no application listening to the sensor, it stops counting the steps.</p>
+  <p>If you want to track the user's steps continuously, do not stop the sensor listener to be sure that it keeps running. If there is no application listening to the sensor, it stops counting the steps.</p>
   <p>The following table lists the measurement data that the pedometer provides.</p>
    <p align="center" class="Table"><strong>Table: Measurement data detected by the pedometer</strong></p>
    <table border="1" style="width: 100%">
@@ -1118,9 +1118,9 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
   </table>
 
   <p>The pedestrian state is <code>SENSOR_PEDOMETER_STATE_UNKNOWN</code>, <code>SENSOR_PEDOMETER_STATE_STOP</code>, <code>SENSOR_PEDOMETER_STATE_WALK</code>, or <code>SENSOR_PEDOMETER_STATE_RUN</code>.</p>
-  
+
    <h2 id="pressure" name="pressure">Pressure Sensor</h2>
-  <p>The pressure sensor measures the atmospheric pressure in the device&#39;s surrounding environment.</p>
+  <p>The pressure sensor measures the atmospheric pressure in the device's surrounding environment.</p>
   <p>The following table lists the measurement data that the pressure sensor provides.</p>
   <p align="center" class="Table"><strong>Table: Measurement data detected by the pressure sensor</strong></p>
   <table border="1" style="width: 100%">
@@ -1183,7 +1183,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-       
+
    <h2 id="rotation" name="rotation">Rotation Vector Sensor</h2>
   <p>The rotation vector sensor represents the orientation of the device as a combination of an angle and an axis, in which the device has rotated through a specific angle around an axis (x, y, or z). The rotation vector is the output of a software/hardware-based sensor fusion solution, which uses the accelerometer, gyroscope, and magnetic sensor as inputs to compute the orientation of the device.</p>
 
@@ -1197,11 +1197,11 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     <col />
    </colgroup>
    <tbody>
-    <tr> 
+    <tr>
      <th>Measurement</th>
      <th>Type</th>
         <th>Range</th>
-     <th>Unit</th> 
+     <th>Unit</th>
     </tr>
     <tr>
      <td>Timestamp</td>
@@ -1241,9 +1241,9 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
- 
+
   <h2 id="sleep_monitor" name="sleep_monitor">Sleep Monitor</h2>
-  <p>The sleep monitor tracks the user&#39;s sleep quality. Once per minute, it reports whether the user sleeps. As this sensor usually needs to track the sleep quality over several hours, it must be power-efficient and work in a batch manner. While the system sleeps, or the display is off, the sensor keeps its detected data internally. When the sensor is unable to keep more data (its internal buffer is full), it wakes up the system and flushes all collected data. When flushing, the callback function is invoked repeatedly. The timestamp of each event can be used to figure out when the user was sleeping.</p>
+  <p>The sleep monitor tracks the user's sleep quality. Once per minute, it reports whether the user sleeps. As this sensor usually needs to track the sleep quality over several hours, it must be power-efficient and work in a batch manner. While the system sleeps, or the display is off, the sensor keeps its detected data internally. When the sensor is unable to keep more data (its internal buffer is full), it wakes up the system and flushes all collected data. When flushing, the callback function is invoked repeatedly. The timestamp of each event can be used to figure out when the user was sleeping.</p>
 
   <p>The following table lists the measurement data that the sleep monitor provides.</p>
      <p align="center" class="Table"><strong>Table: Measurement data detected by the sleep monitor</strong></p>
@@ -1263,7 +1263,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
      <td>Microseconds</td>
     </tr>
        <tr>
-     <td>values[0]: user&#39;s sleep state</td>
+     <td>values[0]: user's sleep state</td>
      <td>-</td>
     </tr>
    </tbody>
@@ -1271,10 +1271,10 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
 
   <p>The sleep state is <code>SENSOR_SLEEP_STATE_UNKNOWN</code>, <code>SENSOR_SLEEP_STATE_WAKE</code>, or <code>SENSOR_SLEEP_STATE_SLEEP</code>.</p>
   <p>Depending on the device you are using, the available raw sensors are different and the sleep detection algorithm can also differ. In addition to the sleep state field, some specific device models can provide further data, as defined by the model manufacturer.</p>
-  
-  
+
+
    <h2 id="temperature" name="temperature">Temperature Sensor</h2>
-  <p>The temperature sensor measures the ambient room temperature in the device&#39;s surrounding environment.</p>
+  <p>The temperature sensor measures the ambient room temperature in the device's surrounding environment.</p>
   <p>The following table lists the measurement data that the temperature sensor provides.</p>
   <p align="center" class="Table"><strong>Table: Measurement data detected by the temperature sensor</strong></p>
   <table border="1" style="width: 100%">
@@ -1303,7 +1303,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
      <td>&#8451;</td>
     </tr>
    </tbody>
-  </table> 
+  </table>
 
         <h2 id="ultraviolet" name="ultraviolet">Ultraviolet Sensor</h2>
   <p>The ultraviolet (UV) sensor measures the ultraviolet index. The sensor detects and provides a measure of the UV rays being exposed to the device.</p>
@@ -1316,7 +1316,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     <col />
    </colgroup>
    <tbody>
-    <tr> 
+    <tr>
      <th>Measurement</th>
      <th>Type</th>
      <th>Range</th>
@@ -1336,7 +1336,7 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-  
+
   <h2 id="uncal_gyro" name="uncal_gyro">Uncalibrated Gyroscope</h2>
   <p>The uncalibrated gyroscope detects angular velocity or angular rates of a device. The 3D uncalibrated gyroscope sensor is considered to be very sensitive in detecting incremental rotation angles. The rotation angles obtained by integrating the angular rates over longer duration is inaccurate due to the build-up of drift. The uncalibrated gyroscope data also consists of drift compensation values for each axis, which can be used to subtract the drift from the detected angular rates. The values of drift for the 3 axes are obtained from the output of a software/hardware-based sensor fusion solution.</p>
   <p>The following table lists the measurement data that the uncalibrated gyroscope provides.</p>
@@ -1394,9 +1394,9 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
    </tbody>
   </table>
 
-  
+
   <h2 id="uncal_magnetic" name="uncal_magnetic">Uncalibrated Magnetic Sensor</h2>
- <p>The uncalibrated magnetic sensor is a 3-axis electronic compass (sometimes referred to as a &quot;magnetometer&quot; or &quot;geomagnetic sensor&quot;). It can also be used in determining the azimuth component of the device orientation provided that the tilt of the device is already computed. It measures the Earth&#39;s magnetic field strength and fluctuations, and splits the measurement into X, Y, and Z components. The uncalibrated magnetic sensor is similar in functionality to a magnetic sensor, but does not perform hard iron calibration. Factory calibration and temperature compensation are applied.</p>
+ <p>The uncalibrated magnetic sensor is a 3-axis electronic compass (sometimes referred to as a "magnetometer" or "geomagnetic sensor"). It can also be used in determining the azimuth component of the device orientation provided that the tilt of the device is already computed. It measures the Earth's magnetic field strength and fluctuations, and splits the measurement into X, Y, and Z components. The uncalibrated magnetic sensor is similar in functionality to a magnetic sensor, but does not perform hard iron calibration. Factory calibration and temperature compensation are applied.</p>
 
   <p>The following factors can have an impact on the sensor readings:</p>
   <ul>
@@ -1450,11 +1450,11 @@ example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data
     </tr>
    </tbody>
   </table>
-  
 
-  
-       
-       
+
+
+
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/location_sensors/geofences_n.htm b/org.tizen.guides/html/native/location_sensors/geofences_n.htm
index ea7bca9..057625d 100644 (file)
--- a/org.tizen.guides/html/native/location_sensors/geofences_n.htm
+++ b/org.tizen.guides/html/native/location_sensors/geofences_n.htm
@@ -22,7 +22,7 @@
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
-               </ul>   
+               </ul>
         <p class="toc-title">Content</p>
         <ul class="toc">
                        <li><a href="#manager">Geofence Service</a></li>
@@ -32,13 +32,13 @@
                        <li><a href="#start">Starting the Geofence Service</a></li>
                        <li><a href="#status">Getting the Geofence Event State</a></li>
                        <li><a href="#track">Tracking the User for Geofence Alerts</a></li>
-                       <li><a href="#proximity">Tracking the User for Proximity Alerts</a></li>                        
+                       <li><a href="#proximity">Tracking the User for Proximity Alerts</a></li>
                        <li><a href="#info">Retrieving Geofence Information</a></li>
-               </ul> 
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html">Geofence Manager API for Mobile Native</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/native/Locations/Geofence" target="_blank">Geofence Sample Description</a></li> 
+                       <li><a href="https://developer.tizen.org/development/sample/native/Locations/Geofence" target="_blank">Geofence Sample Description</a></li>
             </ul>
     </div></div>
 </div>
@@ -81,20 +81,20 @@
 <p>The geopoint geofences require a geopoint and a radius, and the Wi-Fi and Bluetooth geofences require a MAC address. Based on the defined geofence type, the geofence manager creates the fence for the particular application.</p>
 
 <h2 id="settings" name="settings">Geofence Management through My Places</h2>
-  <p>Tizen provides the user a way of managing the geofence places and fences through the My places application. The following figure shows the default places and supported fences.</p> 
-  <p align="center"><strong>Figure: My places</strong></p> 
-  <p align="center"><img alt="My places" src="../../images/geofence_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-  <p>My places controls the adding, removing, and updating of places and fences. <strong>Home</strong>, <strong>Office</strong>, and <strong>Car</strong> are the default places, and <strong>Map</strong>, <strong>Wi-Fi</strong>, and <strong>Bluetooth</strong> are the supported fence methods. <strong>Car</strong> supports only Wi-Fi and Bluetooth for a fence method.</p> 
- 
+  <p>Tizen provides the user a way of managing the geofence places and fences through the My places application. The following figure shows the default places and supported fences.</p>
+  <p align="center"><strong>Figure: My places</strong></p>
+  <p align="center"><img alt="My places" src="../../images/geofence_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+  <p>My places controls the adding, removing, and updating of places and fences. <strong>Home</strong>, <strong>Office</strong>, and <strong>Car</strong> are the default places, and <strong>Map</strong>, <strong>Wi-Fi</strong>, and <strong>Bluetooth</strong> are the supported fence methods. <strong>Car</strong> supports only Wi-Fi and Bluetooth for a fence method.</p>
+
 <h2 id="prerequisites">Prerequisites</h2>
-       
+
 <p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html">Geofence Manager</a> API, include the <code>&lt;geofence_manager.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;geofence_manager.h&gt;
 </pre>
 
 <h2 id="start" name="start">Starting the Geofence Service</h2>
-                       
+
 <p>To start the geofence service:</p>
 <ol>
 <li><p>Create a geofence manager handle using the <code>geofence_manager_create()</code> function:</p>
@@ -107,7 +107,7 @@ geofence_manager_create(&amp;manager);
 <li><p>Create a place to be used for the geofences:</p>
 <pre class="prettyprint">
 int place_id = -1; /* This is for creating a place */
-geofence_manager_add_place(manager, &quot;place_name&quot;, &amp;place_id);
+geofence_manager_add_place(manager, "place_name", &amp;place_id);
 </pre>
 
 
@@ -123,15 +123,15 @@ geofence_manager_add_place(manager, &quot;place_name&quot;, &amp;place_id);
 double latitude = 12.756738;
 double longitude = 77.386474;
 int radius = 100;
-char* address = &quot;India&quot;;
+char* address = "India";
 geofence_h fence_h;
 geofence_create_geopoint(place_id, latitude, longitude, radius, address, &amp;fence_h);
 </pre>
 </li>
 <li>Bluetooth geofence:
 <pre class="prettyprint">
-char* bssid = &quot;82:45:67:7E:4A:3B&quot;;
-char* ssid = &quot;Cafeteria&quot;;
+char* bssid = "82:45:67:7E:4A:3B";
+char* ssid = "Cafeteria";
 geofence_h fence_h;
 geofence_create_bluetooth(place_id, bssid, ssid, &amp;fence_h);
 </pre>
@@ -162,7 +162,7 @@ manager = NULL;
 <p>If you destroy the handle, there is no need to call the <code>geofence_manager_stop()</code> function to stop the service as the service is automatically stopped. Also, you do not have to unset the previously set callbacks.</p></li></ol>
 
                                <h2 id="status" name="status">Getting the Geofence Event State</h2>
-                               
+
 <p>To get the state of all geofence events, use the geofence event callback. The geofence event callback is invoked whenever there is a request from the user, for example, to add a geofence or to start a geofence service.</p>
 
 <ol>
@@ -177,10 +177,10 @@ geofence_manage_e user_action;
 geofence_manager_error_e user_error;
 void
 geofence_event(int place_id, int geofence_id, geofence_manager_error_e error,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;geofence_manage_e manage, void *user_data)
+               geofence_manage_e manage, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;user_action = manage;
-&nbsp;&nbsp;&nbsp;&nbsp;user_error = error;
+    user_action = manage;
+    user_error = error;
 }
 </pre>
 
@@ -191,7 +191,7 @@ geofence_event(int place_id, int geofence_id, geofence_manager_error_e error,
     </div>
 
 </li></ol>
-       
+
                                <h2 id="track" name="track">Tracking the User for Geofence Alerts</h2>
 
 
@@ -202,7 +202,7 @@ geofence_event(int place_id, int geofence_id, geofence_manager_error_e error,
 <p>Register the geofence state update callback using the <code>geofence_manager_set_geofence_state_changed_cb()</code> function.</p>
 <pre class="prettyprint">
 geofence_manager_set_geofence_state_changed_cb(manager, geofence_state_changed,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                               NULL);
 </pre></li>
 <li><p>Define the callback function:</p>
 <pre class="prettyprint">
@@ -244,14 +244,14 @@ geofence_status_destroy(status_h);
 <p>Register the proximity state update callback using the <code>geofence_manager_set_geofence_proximity_state_changed_cb()</code> function.</p>
 <pre class="prettyprint">
 geofence_manager_set_geofence_proximity_state_changed_cb(manager,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proximity_state_changed,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                         proximity_state_changed,
+                                                         NULL);
 </pre></li>
 <li><p>Define the callback function:</p>
 <pre class="prettyprint">
 void
-proximity_state_changed(int geofence_id, geofence_proximity_state_e state, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;geofence_proximity_provider_e provider, void *user_data) {}
+proximity_state_changed(int geofence_id, geofence_proximity_state_e state,
+                        geofence_proximity_provider_e provider, void *user_data) {}
 </pre></li></ol>
 
                                <h2 id="info" name="info">Retrieving Geofence Information</h2>
diff --git a/org.tizen.guides/html/native/location_sensors/gesture_n.htm b/org.tizen.guides/html/native/location_sensors/gesture_n.htm
index 13d05ae..11ceb22 100644 (file)
--- a/org.tizen.guides/html/native/location_sensors/gesture_n.htm
+++ b/org.tizen.guides/html/native/location_sensors/gesture_n.htm
@@ -60,14 +60,14 @@
 </ul>
 
 <p>The following gesture events are supported in Tizen devices:</p>
-  
+
 <ul>
 <li>Double-tap
 <p>The device is tapped twice.</p>
      </li>
 <li>Move to ear
 <p>The device is moved near to an ear. The event is detected using the acceleration and proximity sensors.</p>
-<p align="center"><strong>Figure: Move-to-ear event</strong></p> 
+<p align="center"><strong>Figure: Move-to-ear event</strong></p>
 <p align="center"><img alt="Move-to-ear event" src="../../images/move_ear.png" /></p></li>
 <li>No move
 <p>The device is not moved for a while.</p></li>
@@ -75,19 +75,19 @@
 <p>The device is picked up.</p></li>
 <li>Shake
 <p>The device is quickly moved back and forth.</p>
-<p align="center"><strong>Figure: Shake event</strong></p> 
+<p align="center"><strong>Figure: Shake event</strong></p>
 <p align="center"><img alt="Shake event" src="../../images/shake.png" /></p></li>
 <li>Snap
 <p>The device is moved along a particular axis.</p>
-<p align="center"><strong>Figure: Axes of the device</strong></p> 
+<p align="center"><strong>Figure: Axes of the device</strong></p>
 <p align="center"><img alt="Axes of the device" src="../../images/device_axes.png" /></p>
 <p>The movement is measured with 6 discrete events: +X, -X, +Y, -Y, +Z, and -Z:</p>
 <ul><li>With the display in the portrait mode, the +X, -X, +Z, and -Z snaps are active.</li>
 <li>With the display in the landscape mode, the +Y, -Y, +Z, and -Z snaps are active.</li></ul>
-<p align="center"><strong>Figure: Snap events +X, +Y, and +Z</strong></p> 
+<p align="center"><strong>Figure: Snap events +X, +Y, and +Z</strong></p>
 <p align="center"><img alt="Snap events +X, +Y, and +Z" src="../../images/snap.png" /></p>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         The snap motion does not operate correctly if the device is tilted improperly. For example, the device must be held straight in a portrait mode for best accuracy. Similarly, when the device is tilted 90 degrees along the Z axis from the above position (+X or -X points to the earth), the snap motion in a landscape mode works best. This means that when a user lies down holding the device, the snap motion may not work accurately.
@@ -95,32 +95,32 @@
   </li>
 <li>Tilt
 <p>The device is tilted. The event provides changes of the slopes on the X and Y axes, not the current angle of each axis.</p>
-<p align="center"><strong>Figure: Tilt event</strong></p> 
+<p align="center"><strong>Figure: Tilt event</strong></p>
 <p align="center"><img alt="Tilt event" src="../../images/tilt.png" /></p></li>
 <li>Turn face down
 <p>The device is turned over and the screen is facing downwards.</p>
-<p align="center"><strong>Figure: Face-down event</strong></p> 
+<p align="center"><strong>Figure: Face-down event</strong></p>
 <p align="center"><img alt="Face-down event" src="../../images/face_down.png" /></p></li>
  <li>Wrist up
 <p>The event occurs when wrist-up gesture is performed (in case of a watch device).</p>
 <p align="center"><strong>Figure: Wrist-up event</strong></p>
 <p align="center"><img alt="Wrist-up event" src="../../images/wrist_up.png" /></p></li>
-  </ul>   
-  
+  </ul>
+
     <div class="note">
         <strong>Note</strong>
         You can test the gesture recognition functionality only on a target device. The emulator does not support this feature.
     </div>
 
-<h2 id="prerequisites">Prerequisites</h2>              
+<h2 id="prerequisites">Prerequisites</h2>
 
 <p>To use the functions and data types of the Gesture Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">wearable</a> applications), include the <code>&lt;gesture_recognition.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;gesture_recognition.h&gt;
 </pre>
-               
+
 <h2 id="gesture" name="gesture">Detecting Gestures</h2>
-                       
+
 <p>To set and unset callback functions for user gestures:</p>
 
 <ol>
@@ -136,7 +136,7 @@ gesture_create(&amp;handle);
 
 <pre class="prettyprint">
 gesture_start_recognition(handle, GESTURE_PICK_UP, GESTURE_OPTION_DEFAULT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gesture_cb, NULL);
+                          gesture_cb, NULL);
 </pre>
 
 <p>The above example starts gesture detection to receive notifications when the <code>GESTURE_PICK_UP</code> gesture is detected. The application can use any of the <code>gesture_type_e</code> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#ga260f6752298cdd6c8235fd2922c147bf">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#ga260f6752298cdd6c8235fd2922c147bf">wearable</a> applications) in place of the <code>GESTURE_PICK_UP</code> value. Note that not all gestures are supported by all devices. In such cases, the function returns the <code>GESTURE_ERROR_NOT_SUPPORTED</code> value.</p>
@@ -148,15 +148,15 @@ gesture_start_recognition(handle, GESTURE_PICK_UP, GESTURE_OPTION_DEFAULT,
 <pre class="prettyprint">
 void
 gesture_cb(gesture_type_e gesture, const gesture_data_h data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double timestamp, gesture_error_e error, void *user_data)
+           double timestamp, gesture_error_e error, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;gesture_event_e event;
-&nbsp;&nbsp;&nbsp;&nbsp;if (gesture == GESTURE_PICK_UP) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gesture_get_event(data, &amp;event);
+    gesture_event_e event;
+    if (gesture == GESTURE_PICK_UP) {
+        gesture_get_event(data, &amp;event);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event == GESTURE_EVENT_DETECTED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        if (event == GESTURE_EVENT_DETECTED)
+            /* Handle the event */
+    }
 }
 </pre>
 
@@ -169,7 +169,7 @@ gesture_cb(gesture_type_e gesture, const gesture_data_h data,
 int x;
 int y;
 if (gesture == GESTURE_TILT)
-&nbsp;&nbsp;&nbsp;&nbsp;gesture_get_tilt(data, &amp;x, &amp;y);
+    gesture_get_tilt(data, &amp;x, &amp;y);
 </pre></li>
 
 <li><p>When gesture detection is no longer needed, unset the callback functions with the <code>gesture_stop_recognition()</code> function and destroy the handle with the <code>gesture_release()</code> function:</p>
@@ -178,7 +178,7 @@ if (gesture == GESTURE_TILT)
 gesture_stop_recognition(handle);
 gesture_release(handle);
 </pre></li></ol>
- 
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/location_sensors/here_credentials_n.htm b/org.tizen.guides/html/native/location_sensors/here_credentials_n.htm
index 9706df0..78bd1f8 100644 (file)
--- a/org.tizen.guides/html/native/location_sensors/here_credentials_n.htm
+++ b/org.tizen.guides/html/native/location_sensors/here_credentials_n.htm
@@ -19,11 +19,11 @@
                        <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
                </div>
                <div id="toc_border">
-                       <div id="toc">  
+                       <div id="toc">
                                <p class="toc-title">Dependencies</p>
                                <ul class="toc">
                                        <li>Tizen 2.4 and Higher for Mobile</li>
-                               </ul>                   
+                               </ul>
                                <p class="toc-title">Related Info</p>
                                <ul class="toc">
                                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service API for Mobile Native</a></li>
@@ -33,7 +33,7 @@
        </div>
 
        <div id="container"><div id="contents"><div class="content">
-       
+
 <h1>Getting HERE Maps Credentials</h1>
 
 <p>The HERE Maps Plug-in for the Maps Service API is based on the HERE Maps services. It is provided as an example in the Tizen platform, and to use it on the HERE Maps, you need credentials for it.</p>
@@ -59,7 +59,7 @@
 
 <li>Register a new application.
        <p>You must register a new application to create new credentials.</p>
-  
+
     <div class="note">
         <strong>Note</strong>
         Some regions or countries do not support the registration. If your contact details contain such a region or country, you cannot register a new application successfully.
@@ -80,12 +80,12 @@
 
 <li>Use the credentials in your application.
        <p>You can use the credentials in your application with the <code>maps_service_set_provider_key()</code> function.</p>
-       <p>The HERE Maps services provides 2 values as credentials: app ID and app code. If the app ID is <code>XXXX</code> and the app code is <code>YYYY</code>, concatenate them with the &quot;/&quot; separator:</p>
+       <p>The HERE Maps services provides 2 values as credentials: app ID and app code. If the app ID is <code>XXXX</code> and the app code is <code>YYYY</code>, concatenate them with the "/" separator:</p>
 
 <pre class="prettyprint">
 maps_service_h maps = NULL;
-int error = maps_service_create(&quot;HERE&quot;, &amp;maps);
-error = maps_service_set_provider_key(maps, &quot;XXXX/YYYY&quot;)
+int error = maps_service_create("HERE", &amp;maps);
+error = maps_service_set_provider_key(maps, "XXXX/YYYY")
 </pre>
 
 
diff --git a/org.tizen.guides/html/native/location_sensors/location_n.htm b/org.tizen.guides/html/native/location_sensors/location_n.htm
index bcab009..a3d7311 100644 (file)
--- a/org.tizen.guides/html/native/location_sensors/location_n.htm
+++ b/org.tizen.guides/html/native/location_sensors/location_n.htm
@@ -24,7 +24,7 @@
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
-               </ul>   
+               </ul>
         <p class="toc-title">Content</p>
         <ul class="toc">
                        <li><a href="#service">Location Service</a></li>
@@ -52,79 +52,79 @@
 
 
   <h1>Location Information</h1>
-  
-  <p>Location information has a geographical point on the Earth, and optionally location-related information can also contain information about altitude, accuracy about the geographical point and altitude, and the user speed and course of direction. The location manager features include managing location information on the device.</p> 
-  <p>The main features of the Location Manager API include:</p> 
-       <ul> 
+
+  <p>Location information has a geographical point on the Earth, and optionally location-related information can also contain information about altitude, accuracy about the geographical point and altitude, and the user speed and course of direction. The location manager features include managing location information on the device.</p>
+  <p>The main features of the Location Manager API include:</p>
+       <ul>
        <li>Enabling the location service
        <p>You can <a href="#service">use the location service</a> to get the current or last known location, get location updates and satellite information, use location bounds, or track routes.</p></li>
        <li>Defining the location method
        <p>You can <a href="#method">select the appropriate quality level</a> of the location manager service.</p></li>
        <li>Defining the location settings
        <p>You can <a href="#settings">enable or disable specific positioning technologies</a> through the device location settings.</p></li>
-       </ul>  
-  
-  <h2 id="service" name="service">Location Service</h2> 
-
-  <p>The Location Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">wearable</a> applications) provides the current location using the location sources specified in the <a href="#method">location method</a>. You can <a href="#start">use the location service</a> to manage location information in various ways.</p>   
-  <p>With the location manager, you can:</p> 
-  <ul> 
-   <li>Get the current location</li> 
-   <li><a href="#last_known">Get the last known location</a></li> 
+       </ul>
+
+  <h2 id="service" name="service">Location Service</h2>
+
+  <p>The Location Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">wearable</a> applications) provides the current location using the location sources specified in the <a href="#method">location method</a>. You can <a href="#start">use the location service</a> to manage location information in various ways.</p>
+  <p>With the location manager, you can:</p>
+  <ul>
+   <li>Get the current location</li>
+   <li><a href="#last_known">Get the last known location</a></li>
    <li><a href="#update">Get location updates</a></li>
    <li><a href="#bound">Use location bounds</a></li>
    <li><a href="#satellite">Retrieve satellite information</a></li>
    <li><a href="#track">Track routes</a></li>
   </ul>
- 
-  
+
+
     <div class="note">
         <strong>Note</strong>
         To test the Tizen location-based services on the emulator, provide location data (longitude and latitude) using the Event Injector.
         <p>However, satellite data is not supported on the emulator, so GPS status data is available only on a target device.</p>
     </div>
-  
-  <p>Asynchronous location-related updates and region monitoring notifications are implemented with callback interfaces (functions whose names end with &quot;cb&quot;).</p> 
-       <p>You can use the location state and updates as follows:</p> 
-  <ul> 
-   <li><p>If the location manager is working correctly, the location state is set to <code>LOCATIONS_SERVICE_ENABLED</code>. The device can receive notifications about location updates and accuracy changes only in this update state.</p></li> 
-       <li><p>If the location manager is unable to run on the requested device due to weak radio reception, the location update state is set to <code>LOCATIONS_SERVICE_DISABLED (LOCATIONS_ERROR_SERVICE_NOT_AVAILABLE)</code>. If this situation persists for a longer period, it is recommended to stop the service and try again to conserve the device battery.</p></li> 
-   <li><p>If the user revokes a permission for the application to use location information, the location update state is set to <code>LOCATIONS_ACCESS_STATE_DENIED</code>, and the location manager stops all on-going services with the application. The application can request the device user for a permission to continue the stopped service.</p></li> 
-  </ul> 
-  
+
+  <p>Asynchronous location-related updates and region monitoring notifications are implemented with callback interfaces (functions whose names end with "cb").</p>
+       <p>You can use the location state and updates as follows:</p>
+  <ul>
+   <li><p>If the location manager is working correctly, the location state is set to <code>LOCATIONS_SERVICE_ENABLED</code>. The device can receive notifications about location updates and accuracy changes only in this update state.</p></li>
+       <li><p>If the location manager is unable to run on the requested device due to weak radio reception, the location update state is set to <code>LOCATIONS_SERVICE_DISABLED (LOCATIONS_ERROR_SERVICE_NOT_AVAILABLE)</code>. If this situation persists for a longer period, it is recommended to stop the service and try again to conserve the device battery.</p></li>
+   <li><p>If the user revokes a permission for the application to use location information, the location update state is set to <code>LOCATIONS_ACCESS_STATE_DENIED</code>, and the location manager stops all on-going services with the application. The application can request the device user for a permission to continue the stopped service.</p></li>
+  </ul>
+
        <h2 id="method" name="method">Location Methods</h2>
 
-<p>The location method is used to specify the desired quality of service of the location manager. For example, a location-based weather forecast application can require location-related information just to distinguish a city or a neighborhood, while a GPS navigation application can require the highest quality level to pinpoint a map location. Selecting the appropriate quality level not only helps the location manager to run the system efficiently, but also leads to a good user experience.</p> 
+<p>The location method is used to specify the desired quality of service of the location manager. For example, a location-based weather forecast application can require location-related information just to distinguish a city or a neighborhood, while a GPS navigation application can require the highest quality level to pinpoint a map location. Selecting the appropriate quality level not only helps the location manager to run the system efficiently, but also leads to a good user experience.</p>
 <p>Using the <code>location_method_e</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">wearable</a> applications) allows your application to specify the following methods of location positioning system:</p>
-  <ul> 
-   <li>GPS, which uses the global positioning system</li> 
+  <ul>
+   <li>GPS, which uses the global positioning system</li>
    <li>WPS, which uses the Wi-Fi positioning system</li>
-   <li>Hybrid, which selects the best method available at the moment</li> 
-  </ul> 
-  
-<p>Based on the desired method, the location manager provides best-effort location-based services, such as an asynchronous location update or region monitoring notification.</p> 
+   <li>Hybrid, which selects the best method available at the moment</li>
+  </ul>
+
+<p>Based on the desired method, the location manager provides best-effort location-based services, such as an asynchronous location update or region monitoring notification.</p>
 
-       <h2 id="settings" name="settings">Location Settings</h2> 
+       <h2 id="settings" name="settings">Location Settings</h2>
 
-<p>Tizen provides a robust way of controlling the usage of the location data through the device location settings. The following figure shows the various options for enabling or disabling specific positioning technologies.</p> 
-    <p align="center"><strong>Figure: Location settings and indicator</strong></p> 
-<p align="center"><img alt="Location settings and indicator" src="../../images/location_setting_and_indicator.png" /></p> 
+<p>Tizen provides a robust way of controlling the usage of the location data through the device location settings. The following figure shows the various options for enabling or disabling specific positioning technologies.</p>
+    <p align="center"><strong>Figure: Location settings and indicator</strong></p>
+<p align="center"><img alt="Location settings and indicator" src="../../images/location_setting_and_indicator.png" /></p>
 
 <p>The location-related functions work differently based on whether the location settings are used.</p>
 
-<p>The <strong>GPS</strong> setting controls the Global Positioning System usage. It uses GPS satellite signals and provides accurate positioning services, generally outdoors. The <strong>Wireless networks</strong> setting enables the usage of network-based positioning technology, which includes Wi-Fi and cell tower-based positioning, and improves the coverage of positioning services to indoors.</p> 
-<p>All location settings are initially enabled, if the device supports GPS. To disable them, the user must manually toggle the buttons. The manual task required from the user is understood as an implicit user consent.</p> 
+<p>The <strong>GPS</strong> setting controls the Global Positioning System usage. It uses GPS satellite signals and provides accurate positioning services, generally outdoors. The <strong>Wireless networks</strong> setting enables the usage of network-based positioning technology, which includes Wi-Fi and cell tower-based positioning, and improves the coverage of positioning services to indoors.</p>
+<p>All location settings are initially enabled, if the device supports GPS. To disable them, the user must manually toggle the buttons. The manual task required from the user is understood as an implicit user consent.</p>
+
 
-  
     <div class="note">
         <strong>Note</strong>
         Either the <strong>GPS</strong> or the <strong>Wireless networks</strong> setting must be enabled to retrieve the current location of the device user.
     </div>
-  <p>Once the <strong>GPS</strong> or <strong>Wireless networks</strong> setting is enabled, the user can control the usage of the location data for each application separately using the privacy setting. If the privacy setting of the application is disabled, location data is no longer available for the application.</p> 
-  <p>The applications whose location setting is enabled can get the current and last known location of the user.</p> 
+  <p>Once the <strong>GPS</strong> or <strong>Wireless networks</strong> setting is enabled, the user can control the usage of the location data for each application separately using the privacy setting. If the privacy setting of the application is disabled, location data is no longer available for the application.</p>
+  <p>The applications whose location setting is enabled can get the current and last known location of the user.</p>
 
 <h2 id="prerequisites">Prerequisites</h2>
-               
+
 <p>To use the functions and data types of the Location Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">wearable</a> applications), include the <code>&lt;locations.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;locations.h&gt;
@@ -134,7 +134,7 @@
 
 <p>To start the location service:</p>
 <ol>
-<li><p>Create a location manager handle using the <code>location_manager_create()</code> function before you use the location service.</p> 
+<li><p>Create a location manager handle using the <code>location_manager_create()</code> function before you use the location service.</p>
 <p>In this example, the GPS is used as the source of the position data, so the first parameter is <code>LOCATIONS_METHOD_GPS</code>. You can use other values of the <code>location_method_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html#gaec8a29c8b701753a7c9d91f4f8acfac5">wearable</a> applications), such as <code>LOCATIONS_METHOD_HYBRID</code> or <code>LOCATIONS_METHOD_WPS</code>. <code>LOCATIONS_METHOD_HYBRID</code> uses both <code>LOCATIONS_METHOD_GPS</code> and <code>LOCATIONS_METHOD_WPS</code>, but the latter is less accurate.</p>
 <pre class="prettyprint">
 location_manager_h manager;
@@ -157,7 +157,7 @@ location_manager_stop(manager);
 location_manager_destroy(manager);
 manager = NULL;
 </pre>
-<p>If you destroy the handle, there is no need to call the <code>location_manager_stop()</code> function to stop the service. The service is automatically stopped. Also, you do not have to unset previously set callbacks.</p></li></ol>  
+<p>If you destroy the handle, there is no need to call the <code>location_manager_stop()</code> function to stop the service. The service is automatically stopped. Also, you do not have to unset previously set callbacks.</p></li></ol>
 
 <h2 id="last_known" name="last_known">Getting the Last Known Location</h2>
 
@@ -174,7 +174,7 @@ static location_service_state_e service_state;
 static void
 __state_changed_cb(location_service_state_e state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;service_state = state;
+    service_state = state;
 }
 </pre>
 </li>
@@ -191,11 +191,11 @@ double vertical;
 location_accuracy_level_e level;
 time_t timestamp;
 ret = location_manager_get_last_location(manager, &amp;altitude, &amp;latitude, &amp;longitude,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;climb, &amp;direction, &amp;speed, &amp;level, &amp;horizontal,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;vertical, &amp;timestamp);
+                                         &amp;climb, &amp;direction, &amp;speed, &amp;level, &amp;horizontal,
+                                         &amp;vertical, &amp;timestamp);
 </pre>
 
-<p>The function returns the last location stored in the system. When the current location is not fixed, the last location may not be the current location, but the old location.</p> 
+<p>The function returns the last location stored in the system. When the current location is not fixed, the last location may not be the current location, but the old location.</p>
 <p>Use this function instead of repeatedly requesting current locations to spare the location manager from running costly positioning systems.</p></li>
 
 <li>To get the current location information, call the <code>location_manager_get_location()</code> function after the service is enabled:
@@ -203,22 +203,22 @@ ret = location_manager_get_last_location(manager, &amp;altitude, &amp;latitude,
 static void
 __state_changed_cb(location_service_state_e state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;double altitude;
-&nbsp;&nbsp;&nbsp;&nbsp;double latitude;
-&nbsp;&nbsp;&nbsp;&nbsp;double longitude;
-&nbsp;&nbsp;&nbsp;&nbsp;double climb;
-&nbsp;&nbsp;&nbsp;&nbsp;double direction;
-&nbsp;&nbsp;&nbsp;&nbsp;double speed;
-&nbsp;&nbsp;&nbsp;&nbsp;double horizontal;
-&nbsp;&nbsp;&nbsp;&nbsp;double vertical;
-&nbsp;&nbsp;&nbsp;&nbsp;location_accuracy_level_e level;
-&nbsp;&nbsp;&nbsp;&nbsp;time_t timestamp;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (state == LOCATIONS_SERVICE_ENABLED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_get_location(manager, &amp;altitude, &amp;latitude, &amp;longitude,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;climb, &amp;direction, &amp;speed, &amp;level,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;horizontal, &amp;vertical, &amp;timestamp);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    double altitude;
+    double latitude;
+    double longitude;
+    double climb;
+    double direction;
+    double speed;
+    double horizontal;
+    double vertical;
+    location_accuracy_level_e level;
+    time_t timestamp;
+
+    if (state == LOCATIONS_SERVICE_ENABLED) {
+        ret = location_manager_get_location(manager, &amp;altitude, &amp;latitude, &amp;longitude,
+                                            &amp;climb, &amp;direction, &amp;speed, &amp;level,
+                                            &amp;horizontal, &amp;vertical, &amp;timestamp);
+    }
 }
 </pre>
 </li>
@@ -230,7 +230,7 @@ location_manager_unset_service_state_changed_cb(manager);
 
 <h2 id="update" name="update">Getting Location Updates</h2>
 
-<p>You can get a notification of the position update using the position update callback. The callback is invoked periodically, receiving the device&#39;s current position with every call. You can use the callback to retrieve the device position (given as coordinates) and convert it to the corresponding address.</p>
+<p>You can get a notification of the position update using the position update callback. The callback is invoked periodically, receiving the device's current position with every call. You can use the callback to retrieve the device position (given as coordinates) and convert it to the corresponding address.</p>
 <ol><li><p>Register the callback using the <code>location_manager_set_position_updated_cb()</code> function:</p>
 <pre class="prettyprint">
 location_manager_set_position_updated_cb(manager, position_updated, 2, NULL);
@@ -242,10 +242,10 @@ static double user_latitude;
 static double user_longitude;
 static void
 position_updated(double latitude, double longitude, double altitude,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t timestamp, void *user_data)
+                 time_t timestamp, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;user_latitude = latitude;
-&nbsp;&nbsp;&nbsp;&nbsp;user_longitude = longitude;
+    user_latitude = latitude;
+    user_longitude = longitude;
 }
 </pre>
 
@@ -254,7 +254,7 @@ position_updated(double latitude, double longitude, double altitude,
         <strong>Note</strong>
         The callback is called only if the location manager has been started. The same holds for all other callbacks registered with the manager.
     </div>
-         </li></ol>  
+         </li></ol>
 
          <h2 id="bound" name="bound">Using Location Bounds</h2>
 
@@ -288,10 +288,10 @@ static double longitude;
 static bool
 capi_poly_coords_cb(location_coords_s coords, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;latitude = coords.latitude;
-&nbsp;&nbsp;&nbsp;&nbsp;longitude = coords.longitude;
+    latitude = coords.latitude;
+    longitude = coords.longitude;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -305,7 +305,7 @@ static location_boundary_state_e bound_state;
 static void
 bounds_state_changed_cb(location_boundary_state_e state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bound_state = state;
+    bound_state = state;
 }
 </pre>
 </li>
@@ -319,7 +319,7 @@ location_manager_add_boundary(manager, bounds_poly);
 <pre class="prettyprint">
 location_bounds_destroy(bounds_poly);
 </pre></li>
-</ol>  
+</ol>
 
 <h2 id="satellite" name="satellite">Getting Satellite Information</h2>
 
@@ -327,7 +327,7 @@ location_bounds_destroy(bounds_poly);
 <ol><li><p>Register the callback using the <code>location_manager_set_satellite_updated_cb()</code> function:</p>
 <pre class="prettyprint">
 gps_status_set_satellite_updated_cb(manager, capi_gps_status_satellite_updated_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10, NULL);
+                                    10, NULL);
 </pre>
 <p>The third parameter determines the frequency of callback calls. In this example, the callback is called every 10 seconds.</p> </li>
 <li>When the update is received, the callback containing brief satellite information is called. To get the detailed satellite information in the sky, call the <code>gps_status_foreach_satellites_in_view()</code> function in the callback. Variables that store the current satellite information are updated.
@@ -340,15 +340,15 @@ int cur_snr;
 
 static bool
 capi_gps_status_get_satellites_cb(unsigned int azimuth, unsigned int elevation,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int prn, int snr,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool is_in_use, void *user_data)
+                                  unsigned int prn, int snr,
+                                  bool is_in_use, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;cur_azimuth = azimuth;
-&nbsp;&nbsp;&nbsp;&nbsp;cur_elevation = elevation;
-&nbsp;&nbsp;&nbsp;&nbsp;cur_prn = prn;
-&nbsp;&nbsp;&nbsp;&nbsp;cur_snr = snr;
+    cur_azimuth = azimuth;
+    cur_elevation = elevation;
+    cur_prn = prn;
+    cur_snr = snr;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 static int numofactive;
@@ -356,13 +356,13 @@ static int numofinview;
 
 static void
 capi_gps_status_satellite_updated_cb(int num_of_active, int num_of_inview,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t timestamp, void *user_data)
+                                     time_t timestamp, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;numofinview = num_of_active;
-&nbsp;&nbsp;&nbsp;&nbsp;if (num_of_inview &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gps_status_foreach_satellites_in_view(manager,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;capi_gps_status_get_satellites_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+    numofinview = num_of_active;
+    if (num_of_inview &gt; 0)
+        gps_status_foreach_satellites_in_view(manager,
+                                              capi_gps_status_get_satellites_cb,
+                                              NULL);
 }
 </pre>
 
@@ -370,15 +370,15 @@ capi_gps_status_satellite_updated_cb(int num_of_active, int num_of_inview,
         <strong>Note</strong>
         The callback is called only if the location manager has been started. The same holds for all other callbacks registered with the manager.
     </div>
-       </li></ol>  
+       </li></ol>
 
          <h2 id="track" name="track">Tracking the Route</h2>
 
 <p>To get information about the current position, velocity, and distance:</p>
- 
+
 <ol><li>Receive periodic notifications.
 <ol type="a"><li>
-<p>To get notifications of the position and velocity updates, register the position and velocity update callbacks. The callbacks are invoked periodically, receiving the device&#39;s current position or velocity with every call.</p>
+<p>To get notifications of the position and velocity updates, register the position and velocity update callbacks. The callbacks are invoked periodically, receiving the device's current position or velocity with every call.</p>
 
 <ul><li><p>Register the position update callback using the <code>location_manager_set_position_updated_cb()</code> function:</p>
 
@@ -399,10 +399,10 @@ location_manager_set_position_updated_cb(manager, velocity_updated, 2, NULL);
 <pre class="prettyprint">
 void
 position_updated(double latitude, double longitude, double altitude,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t timestamp, void *user_data) {}
+                 time_t timestamp, void *user_data) {}
 void
 velocity_updated(double speed, double direction, double climb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t timestamp, void *user_data) {}
+                 time_t timestamp, void *user_data) {}
 </pre>
 
 <p>Within the callback, you can collect obtained data to get the points you have visited, to calculate traveled distance more precisely, or to calculate the average speed or climb.</p></li></ol></li>
@@ -417,7 +417,7 @@ double altitude;
 double latitude;
 double longitude;
 location_manager_get_position(manager, &amp;altitude, &amp;latitude,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;longitude, &amp;timestamp);
+                              &amp;longitude, &amp;timestamp);
 </pre></li>
 
 <li><p>To get information about the current velocity (climb in km/h, direction as degrees from the north, and speed in km/h), use the <code>location_manager_get_velocity()</code> function:</p>
@@ -442,8 +442,8 @@ location_manager_get_accuracy(manager, &amp;level, &amp;horizontal, &amp;vertica
 
 <pre class="prettyprint">
 location_manager_get_location(manager, &amp;altitude, &amp;latitude, &amp;longitude, &amp;climb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;direction, &amp;speed, &amp;level,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;horizontal, &amp;vertical, &amp;timestamp);
+                              &amp;direction, &amp;speed, &amp;level,
+                              &amp;horizontal, &amp;vertical, &amp;timestamp);
 </pre></li>
 
 <li><p>If the location service is currently unavailable, get the last values recorded by the location manager when the GPS signal was available. To get the information, use the following functions:</p>
diff --git a/org.tizen.guides/html/native/location_sensors/location_sensors_cover_n.htm b/org.tizen.guides/html/native/location_sensors/location_sensors_cover_n.htm
index 9345568..c534d4d 100644 (file)
--- a/org.tizen.guides/html/native/location_sensors/location_sensors_cover_n.htm
+++ b/org.tizen.guides/html/native/location_sensors/location_sensors_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Location and Sensors</title>  
+       <title>Location and Sensors</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,10 +28,10 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.training/html/native/feature/app_sensor_n.htm">Creating Applications with Sensors</a></li> 
-               </ul>           
+                       <li><a href="../../../../org.tizen.training/html/native/feature/app_sensor_n.htm">Creating Applications with Sensors</a></li>
+               </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Location and Sensors</h1>
@@ -67,7 +67,7 @@
 
 
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/location_sensors/maps_n.htm b/org.tizen.guides/html/native/location_sensors/maps_n.htm
index e4cf28a..9a9ca85 100644 (file)
--- a/org.tizen.guides/html/native/location_sensors/maps_n.htm
+++ b/org.tizen.guides/html/native/location_sensors/maps_n.htm
@@ -24,10 +24,10 @@
                        <ul class="toc">
                                <li>Tizen 2.4 and Higher for Mobile</li>
                                <li>Tizen 3.0 and Higher for Wearable</li>
-                       </ul>                   
+                       </ul>
                        <p class="toc-title">Content</p>
                        <ul class="toc">
-                               <li><a href="#geocode">Geocodes</a></li> 
+                               <li><a href="#geocode">Geocodes</a></li>
                                <li><a href="#search_place">Place Search</a></li>
                                <li><a href="#search_route">Route Search</a></li>
                                <li><a href="#response">Map Service Responses</a></li>
@@ -41,7 +41,7 @@
                                <li><a href="#address">Recognizing the Address Information</a></li>
                                <li><a href="#place">Recognizing the Place Information</a></li>
                                <li><a href="#route">Recognizing the Route Information</a></li>
-                               <li><a href="#preference">Customizing the Service Requests</a></li>                             
+                               <li><a href="#preference">Customizing the Service Requests</a></li>
                                <li>Map view
                                <ul class="toc">
                                        <li><a href="#maps_view">Using the Map View</a></li>
@@ -76,10 +76,10 @@
        <li>Searching routes
        <p>You can <a href="#search_route">query a route</a> that defines a path between a start and destination point, passing optionally through  specific intermediate locations and calculated using a specified transportation method.</p></li>
        <li>Handling map service responses
-       <p>You can <a href="#response">receive responses from the map service</a> through various callbacks.</p></li>   
+       <p>You can <a href="#response">receive responses from the map service</a> through various callbacks.</p></li>
        <li>Managing a map view widget
        <p>With the <a href="#view">map view widget feature</a>, you can <a href="#maps_view">create a map view widget</a> and set various properties (such as theme, language, and traffic).</p>
-       <p>You can create objects, such as markers, polylines and polygons, in the widget. You can also receive responses about events over the widget, and get various data from the events.</p></li>  
+       <p>You can create objects, such as markers, polylines and polygons, in the widget. You can also receive responses about events over the widget, and get various data from the events.</p></li>
 </ul>
 
 <p>You can also <a href="#cancel">cancel service requests</a> and <a href="#preference">customize them</a>.</p>
@@ -92,10 +92,10 @@
                <p>To use the Mapzen Maps, you need to <a href="mapzen_credentials_n.htm">get the Mapzen API keys</a>.</p></li>
        </ul>
 
-   
+
      <div class="note">
         <strong>Note</strong>
-        To use the map service, you must get an access key to the map provider from the provider developer site. The service must be used according to the provider&#39;s Term of Use.
+        To use the map service, you must get an access key to the map provider from the provider developer site. The service must be used according to the provider's Term of Use.
     </div>
 
 <h2 id="geocode">Geocodes</h2>
@@ -111,7 +111,7 @@
                <li>Get a structured address based on place coordinates.</li>
        </ul>
        <p>You can <a href="#address">parse the reverse geocode response</a> to use its details. The response consists of structured address information, comprising, for example, of a street name, building number, city name, postal code, district name, state name, and country.</p>
-       
+
 
 <h2 id="search_place">Place Search</h2>
        <p>The following place search request types are provided:</p>
@@ -121,7 +121,7 @@
                <li>Query place information based on a free text address within a specified geographical area.</li>
        </ul>
        <p>After performing the <a href="#use_search_place">place service request</a>, you receive the place search response. You can <a href="#place">parse the place search response</a> to use its details. The response consists of structured place information, comprising, for example, of a place ID, name and URL, address, geographical location and distance from the center of the search area, place category, rating, review, and image.</p>
-       
+
 
     <div class="note">
         <strong>Note</strong>
@@ -135,9 +135,9 @@
                <li>Query a route passing through a number of geographical locations.</li>
        </ul>
        <p>After performing the <a href="#use_search_route">route service request</a>, you receive the route search response. You can <a href="#route">parse the route calculation response</a> to use its details. The response consists of structured route information, comprising, for example, of a route ID,      geographical coordinates of the start and destination point, route bounding box, transportation mode, and total distance and duration.</p>
-       
-       
-  
+
+
+
     <div class="note">
         <strong>Note</strong>
         Depending on the map provider, the route can be presented as a list of geographical points or segments. The segment list can also be presented as a list of geographical points or maneuvers.
@@ -154,7 +154,7 @@
                <li><code>MAPS_ERROR_PERMISSION_DENIED</code>: The user has revoked a permission for the application to use the map service.</li>
                <li><code>MAPS_ERROR_NOT_SUPPORTED</code>: The map request or feature you are trying to use is not supported in the map provider.</li>
                <li><code>MAPS_ERROR_NETWORK_UNREACHABLE</code>, <code>MAPS_ERROR_SERVICE_NOT_AVAILABLE</code>, or <code> MAPS_ERROR_CONNECTION_TIME_OUT</code>: The map provider cannot access the map server for various reasons.</li>
-       </ul>   
+       </ul>
 
 <h2 id="view" name="view">Map View Widget</h2>
 
@@ -194,9 +194,9 @@
 <p>To use the Maps Service API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To use the map view--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
+   &lt;!--To use the map view--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -221,22 +221,22 @@
 static bool
 _maps_service_provider_info_cb(char* maps_provider, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the map provider name, passed as maps_provider */
+    /* Handle the map provider name, passed as maps_provider */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return bool;
+    return bool;
 }
 
 void
 get_available_providers()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;void *user_data = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;const int error = maps_service_foreach_provider(_maps_service_provider_info_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (error == MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Select a provider from the available_providers vector */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    void *user_data = NULL;
+    const int error = maps_service_foreach_provider(_maps_service_provider_info_cb,
+                                                    user_data);
+
+    if (error == MAPS_ERROR_NONE)
+        /* Select a provider from the available_providers vector */
+    else
+        /* Error handling */
 }
 </pre>
 </li>
@@ -244,13 +244,13 @@ get_available_providers()
 <li>Before you use the Maps Service API, create a Maps Service instance using the <code>maps_service_create()</code> function:
 <pre class="prettyprint">
 maps_service_h maps = NULL;
-int error = maps_service_create(&quot;Maps Provider&quot;, &amp;maps);
+int error = maps_service_create("Maps Provider", &amp;maps);
 </pre>
 </li>
 
 <li>Set the security key appropriate to the selected map provider using the <code>maps_service_set_provider_key()</code> function:
 <pre class="prettyprint">
-error = maps_service_set_provider_key(maps, &quot;XXXYYYZZZ&quot;);
+error = maps_service_set_provider_key(maps, "XXXYYYZZZ");
 </pre>
 </li>
 
@@ -260,15 +260,15 @@ bool supported = false;
 
 /* Check whether routing is available */
 error = maps_service_provider_is_service_supported(maps, MAPS_SERVICE_SEARCH_ROUTE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;supported);
+                                                   &amp;supported);
 const bool is_routing_supported = (error == MAPS_ERROR_NONE) ? supported : false;
 
 /* Check whether routing through specified waypoints is available */
 error = maps_service_provider_is_service_supported(maps,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MAPS_SERVICE_SEARCH_ROUTE_WAYPOINTS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;supported);
+                                                   MAPS_SERVICE_SEARCH_ROUTE_WAYPOINTS,
+                                                   &amp;supported);
 const bool is_routing_waypoints_supported =
-&nbsp;&nbsp;&nbsp;&nbsp;(error == MAPS_ERROR_NONE) ? supported : false;
+    (error == MAPS_ERROR_NONE) ? supported : false;
 </pre>
 <p>To check for the availability of other services, follow the same approach using the keys from the <code>maps_service_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8afd98ceb094d4c3edaf603051a69f8e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8afd98ceb094d4c3edaf603051a69f8e">wearable</a> applications).</p>
 </li>
@@ -279,23 +279,23 @@ const bool is_routing_waypoints_supported =
 error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_PATH, &amp;supported);
 const bool is_route_path_supported = (error == MAPS_ERROR_NONE) ? supported : false;
 if (is_route_path_supported)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use route path */
+    /* Use route path */
 
 /* Check whether segment path data is supported */
 error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_PATH,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;supported);
+                                                &amp;supported);
 const bool is_route_segment_path_supported =
-&nbsp;&nbsp;&nbsp;&nbsp;(error == MAPS_ERROR_NONE) ? supported : false;
+    (error == MAPS_ERROR_NONE) ? supported : false;
 if (is_route_segment_path_supported)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use segment path */
+    /* Use segment path */
 
 /* Check whether segment maneuver data is supported */
 error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_MANEUVERS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;supported);
+                                                &amp;supported);
 const bool is_route_segment_maneuvers_supported =
-&nbsp;&nbsp;&nbsp;&nbsp;(error == MAPS_ERROR_NONE) ? supported : false;
+    (error == MAPS_ERROR_NONE) ? supported : false;
 if (is_route_segment_maneuvers_supported)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use segment maneuvers */
+    /* Use segment maneuvers */
 </pre>
 <p>To check the availability of other data features, follow the same approach using the keys from the <code>maps_service_data_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8f22bd07fe9300b3f3f1c74e83f1e272">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8f22bd07fe9300b3f3f1c74e83f1e272">wearable</a> applications).</p>
 </li>
@@ -306,27 +306,27 @@ if (is_route_segment_maneuvers_supported)
 maps_preference_h preference = NULL;
 int error = maps_preference_create(&amp;preference);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Set the distance unit preference */
 error = maps_preference_set_distance_unit(preference, MAPS_DISTANCE_UNIT_M);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Set the language preference */
-error = maps_preference_set_language(preference, &quot;en-US&quot;);
+error = maps_preference_set_language(preference, "en-US");
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Apply the set of preferences for the map service */
 error = maps_service_set_preference(maps, preference);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Destroy the preference set instance */
 error = maps_preference_destroy(preference);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 <p>Optionally, you can set the maximum amount of search results and a default country code using the <code>maps_preference_set_max_results()</code> and <code>maps_preference_set_country_code()</code> functions.</p>
 <p>To set specific preferences for the map provider, use the <code>maps_preference_set_property()</code> function with key-value pairs, defined in the appropriate map provider documentation.</p>
@@ -353,12 +353,12 @@ if (error != MAPS_ERROR_NONE)
 <li>Request the geocode:
 <ul><li>Use the <code>maps_service_geocode()</code> function for a request based on a free-formed address:
 <pre class="prettyprint">
-/* Search for geocode of the Samsung&#39;s campus &quot;Digital City&quot; in Suwon */
-error = maps_service_geocode(maps, &quot;Suwon, Digital City&quot;, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_geocode_cb, user_data, &amp;request_id);
+/* Search for geocode of the Samsung's campus "Digital City" in Suwon */
+error = maps_service_geocode(maps, "Suwon, Digital City", preference,
+                             __maps_service_geocode_cb, user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -371,12 +371,12 @@ maps_area_h bounds = NULL;
 */
 
 /* Search for geocode of the Digital City within a specified geographic area */
-error = maps_service_geocode_inside_area(maps, &quot;Digital City&quot;, bounds, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_geocode_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+error = maps_service_geocode_inside_area(maps, "Digital City", bounds, preference,
+                                         __maps_service_geocode_cb,
+                                         user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -388,11 +388,11 @@ maps_address_h address = NULL;
 
 /* Search for a geocode of a place, specified with a structured address */
 error = maps_service_geocode_by_structured_address(maps, address, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_geocode_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                                   __maps_service_geocode_cb,
+                                                   user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li></ul></li>
 
@@ -400,14 +400,14 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 static bool
 __maps_service_geocode_cb(maps_error_e result, int request_id, int index, int total,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maps_coordinates_h coordinates, void* user_data)
+                          maps_coordinates_h coordinates, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained coordinate data */
+    /* Handle the obtained coordinate data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the results */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_coordinates_destroy(coordinates);
+    /* Release the results */
+    maps_coordinates_destroy(coordinates);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -420,11 +420,11 @@ __maps_service_geocode_cb(maps_error_e result, int request_id, int index, int to
 <pre class="prettyprint">
 /* Obtain the reverse geocode with specified coordinates */
 error = maps_service_reverse_geocode(maps, 37.257865, 127.053659, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_reverse_geocode_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                     __maps_service_reverse_geocode_cb,
+                                     user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -432,13 +432,13 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 static void
 __maps_service_reverse_geocode_cb(maps_error_e result, int request_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int index, int total,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maps_address_h address, void* user_data)
+                                  int index, int total,
+                                  maps_address_h address, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained address */
+    /* Handle the obtained address */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the results */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_address_destroy(address);
+    /* Release the results */
+    maps_address_destroy(address);
 }
 </pre>
 </li>
@@ -460,11 +460,11 @@ maps_coordinates_h position = NULL;
 
 int distance = 500;
 error = maps_service_search_place(maps, position, distance, filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preference, __maps_service_search_place_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                  preference, __maps_service_search_place_cb,
+                                  user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -477,11 +477,11 @@ maps_area_h boundary = NULL;
 */
 
 error = maps_service_search_place_by_area(maps, boundary, filter, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_search_place_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                          __maps_service_search_place_cb,
+                                          user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -493,13 +493,13 @@ maps_area_h boundary = NULL;
    or maps_area_create_circle()
 */
 
-error = maps_service_search_place_by_address(maps, &quot;Digital City&quot;, boundary,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_search_place_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+error = maps_service_search_place_by_address(maps, "Digital City", boundary,
+                                             filter, preference,
+                                             __maps_service_search_place_cb,
+                                             user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li></ul></li>
 
@@ -507,14 +507,14 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 static bool
 __maps_service_search_place_cb(maps_error_e error, int request_id, int index,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int total, maps_place_h place, void* user_data)
+                               int total, maps_place_h place, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained place data */
+    /* Handle the obtained place data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the results */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_place_destroy(place);
+    /* Release the results */
+    maps_place_destroy(place);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -532,11 +532,11 @@ maps_area_h boundary = NULL;
 */
 
 error = maps_service_search_place_list(maps, boundary, filter, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_search_place_list_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                       __maps_service_search_place_list_cb,
+                                       user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -544,17 +544,17 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 static bool
 __maps_service_search_place_list_cb(maps_error_e error,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int request_id, int total,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maps_place_list_h place_list,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                                    int request_id, int total,
+                                    maps_place_list_h place_list,
+                                    void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained place data */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_place_list_foreach(place_list, __maps_place_details_cb, user_data);
+    /* Handle the obtained place data */
+    maps_place_list_foreach(place_list, __maps_place_details_cb, user_data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the results */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_place_list_destroy(place_list);
+    /* Release the results */
+    maps_place_list_destroy(place_list);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -564,18 +564,18 @@ __maps_service_search_place_list_cb(maps_error_e error,
 static bool
 __maps_place_details_cb(int index, maps_place_h place, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained place data */
+    /* Handle the obtained place data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get and store the URI to get the place details later */
-&nbsp;&nbsp;&nbsp;&nbsp;char *place_uri = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;maps_place_get_uri(place, &amp;place_uri);
+    /* Get and store the URI to get the place details later */
+    char *place_uri = NULL;
+    maps_place_get_uri(place, &amp;place_uri);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Do not release the place handle,
-&nbsp;&nbsp;&nbsp;&nbsp;   because it is just a reference to the list data
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    /*
+       Do not release the place handle,
+       because it is just a reference to the list data
+    */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -585,11 +585,11 @@ __maps_place_details_cb(int index, maps_place_h place, void *user_data)
 <ul><li>Use the <code>maps_service_get_place_details()</code> function to retrieve the place details:
 <pre class="prettyprint">
 error = maps_service_get_place_details(maps, place_uri,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_get_place_details_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                       __maps_service_get_place_details_cb,
+                                       user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -597,12 +597,12 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 static void
 __maps_service_get_place_details_cb(maps_error_e result, int request_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maps_place_h place, void *user_data)
+                                    maps_place_h place, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained place data */
+    /* Handle the obtained place data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the results */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_place_destroy(place);
+    /* Release the results */
+    maps_place_destroy(place);
 }
 </pre>
 </li>
@@ -625,11 +625,11 @@ maps_coordinates_h origin = NULL, destination = NULL;
 /* Create the coordinates with maps_coordinates_create() */
 
 error = maps_service_search_route(maps, origin, destination, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_search_route_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                  __maps_service_search_route_cb,
+                                  user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -643,12 +643,12 @@ const int waypoint_num = 5;
 maps_coordinates_h* waypoint_list = NULL;
 
 error = maps_service_search_route_waypoints(maps, waypoint_list,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;waypoint_num, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_search_route_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                            waypoint_num, preference,
+                                            __maps_service_search_route_cb,
+                                            user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li></ul></li>
 
@@ -657,14 +657,14 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 static bool
 __maps_service_search_route_cb(maps_error_e error, int request_id, int index, int total,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maps_route_h route, void* user_data)
+                               maps_route_h route, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained route data */
+    /* Handle the obtained route data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the results */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_route_destroy(route);
+    /* Release the results */
+    maps_route_destroy(route);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -678,7 +678,7 @@ __maps_service_search_route_cb(maps_error_e error, int request_id, int index, in
 error = maps_service_cancel_request(maps, request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 
 <h2 id="address" name="address">Recognizing the Address Information</h2>
@@ -691,7 +691,7 @@ char *building_number = NULL;
 error = maps_address_get_building_number(address, &amp;building_number);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Use the building_number */
 
@@ -702,7 +702,7 @@ char *street = NULL;
 error = maps_address_get_street(address, &amp;street);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Use the street name */
 
@@ -744,7 +744,7 @@ free(street);
 char *name = NULL;
 error = maps_place_get_name(place, &amp;name);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Use the place name */
 
@@ -758,7 +758,7 @@ free(name);
 maps_coordinates_h location = NULL;
 error = maps_place_get_location(place, &amp;location);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Use the place location */
 
@@ -772,7 +772,7 @@ maps_coordinates_destroy(location);
 maps_place_rating_h rating = NULL;
 error = maps_place_get_rating(place, &amp;rating);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Use the place rating */
 
@@ -799,7 +799,7 @@ maps_place_rating_destroy(rating);
 /* Obtain a list of place categories */
 error = maps_place_foreach_category(place, __maps_place_categories_cb, user_data);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -807,14 +807,14 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 static bool
 __maps_place_categories_cb(int index, int total, maps_place_category_h category,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                           void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained place category data */
+    /* Handle the obtained place category data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the results */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_place_category_destroy(category);
+    /* Release the results */
+    maps_place_category_destroy(category);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -835,7 +835,7 @@ __maps_place_categories_cb(int index, int total, maps_place_category_h category,
 /* Obtain the map provider-specific place data properties */
 error = maps_place_foreach_property(place, __maps_place_properties_cb, user_data);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -843,17 +843,17 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 static bool
 __maps_place_properties_cb(int index, int total, char* key, void* value,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                           void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained property: */
-&nbsp;&nbsp;&nbsp;&nbsp;/* property_name: key */
-&nbsp;&nbsp;&nbsp;&nbsp;/* property_value: value */
+    /* Handle the obtained property: */
+    /* property_name: key */
+    /* property_value: value */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the property name and value */
-&nbsp;&nbsp;&nbsp;&nbsp;free(key);
-&nbsp;&nbsp;&nbsp;&nbsp;free(value);
+    /* Release the property name and value */
+    free(key);
+    free(value);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -864,7 +864,7 @@ __maps_place_properties_cb(int index, int total, char* key, void* value,
 
 <p>The result of the <a href="#search_route">route calculation request</a> (<code>maps_service_search_route()</code> or <code>maps_service_search_route_waypoints()</code>) is retrieved from the map service using multiple iterations of the <code>maps_service_search_route_cb()</code> callback. The result is an instance of route data.</p>
 
- 
+
    <div class="note">
         <strong>Note</strong>
                Different map providers are capable of providing different sets of route data features. Some map providers can extend the route data features with extra properties that are not specified in the Maps Service API. Such properties are organized as a key-value storage where the keys are the names of the properties.
@@ -872,7 +872,7 @@ __maps_place_properties_cb(int index, int total, char* key, void* value,
                <p>If your map provider does not support a specific feature, the get function for the feature returns an error. To prevent problems, you can <a href="#start">check which data features are available</a> in your map provider using the <code>maps_service_provider_is_data_supported()</code> function.</p>
     </div>
 
-  
+
 <p>To parse route data:</p>
 
 <ol><li><p>To get the route information features, such as route ID, origin, destination, and total distance, use the following functions with a <code>maps_route_h</code> place handle:</p>
@@ -883,7 +883,7 @@ __maps_place_properties_cb(int index, int total, char* key, void* value,
 char *id = NULL;
 error = maps_route_get_route_id(route, &amp;id);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Use the route ID */
 
@@ -897,10 +897,10 @@ free(id);
 maps_coordinates_h origin = NULL, destination = NULL;
 error = maps_route_get_origin(route, &amp;origin);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 error = maps_route_get_destination(route, &amp;destination);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Use the route origin and destination */
 
@@ -915,7 +915,7 @@ maps_coordinates_destroy(destination);
 double total_distance = .0;
 error = maps_route_get_total_distance(route, &amp;total_distance);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Use the total route distance */
 </pre>
@@ -937,20 +937,20 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 error = maps_route_foreach_path(route, __maps_route_path_cb, user_data);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 <p>Implement the <code>__maps_route_path_cb()</code> callback:</p>
 <pre class="prettyprint">
 static bool
 __maps_route_path_cb(int index, int total, maps_coordinates_h coordinates,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                     void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained route path coordinates */
+    /* Handle the obtained route path coordinates */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the results */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_coordinates_destroy(coordinates);
+    /* Release the results */
+    maps_coordinates_destroy(coordinates);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -959,20 +959,20 @@ __maps_route_path_cb(int index, int total, maps_coordinates_h coordinates,
 <pre class="prettyprint">
 error = maps_route_foreach_segment(route, __maps_route_segment_cb, user_data);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 <p>Implement the <code>__maps_route_segment_cb()</code> callback:</p>
 <pre class="prettyprint">
 static bool
 __maps_route_segment_cb(int index, int total, maps_route_segment_h segment,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                        void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained route segment */
+    /* Handle the obtained route segment */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the results */
-&nbsp;&nbsp;&nbsp;&nbsp;maps_route_segment_destroy(segment);
+    /* Release the results */
+    maps_route_segment_destroy(segment);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -986,7 +986,7 @@ __maps_route_segment_cb(int index, int total, maps_route_segment_h segment,
 /* Obtain the map provider-specific route data properties */
 error = maps_route_foreach_property(route, __maps_route_properties_cb, user_data);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -994,17 +994,17 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 static bool
 __maps_route_properties_cb(int index, int total, char* key, void* value,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                           void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained property: */
-&nbsp;&nbsp;&nbsp;&nbsp;/* property_name: key */
-&nbsp;&nbsp;&nbsp;&nbsp;/* property_value: value */
+    /* Handle the obtained property: */
+    /* property_name: key */
+    /* property_value: value */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the property name and value */
-&nbsp;&nbsp;&nbsp;&nbsp;free(key);
-&nbsp;&nbsp;&nbsp;&nbsp;free(value);
+    /* Release the property name and value */
+    free(key);
+    free(value);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -1025,21 +1025,21 @@ __maps_route_properties_cb(int index, int total, char* key, void* value,
 /* Create extra preferences for the place search service */
 error = maps_preference_create(&amp;preference);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-error = maps_preference_set_property(preference, MAPS_PLACE_FILTER_TYPE, &quot;restaurant&quot;);
+    /* Error handling */
+error = maps_preference_set_property(preference, MAPS_PLACE_FILTER_TYPE, "restaurant");
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 maps_coordinates_h position = NULL;
 /* Create the coordinates with maps_coordinates_create() */
 
 int distance = 500;
 error = maps_service_search_place(maps, position, distance, filter, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_search_place_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                  __maps_service_search_place_cb,
+                                  user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 maps_preference_destroy(preference);
 </pre>
@@ -1071,24 +1071,24 @@ maps_preference_destroy(preference);
 /* Create extra preferences for the routing service */
 error = maps_preference_create(&amp;preference);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 error = maps_preference_set_property(preference, MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Suwon, Digital City&quot;);
+                                     "Suwon, Digital City");
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 error = maps_preference_set_route_optimization(preference, MAPS_ROUTE_TYPE_SHORTEST);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 maps_coordinates_h origin = NULL, destination = NULL;
 /* Create the coordinates with maps_coordinates_create() */
 
 error = maps_service_search_route(maps, origin, destination, preference,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__maps_service_search_route_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;request_id);
+                                  __maps_service_search_route_cb,
+                                  user_data, &amp;request_id);
 
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 maps_preference_destroy(preference);
 </pre>
@@ -1106,11 +1106,11 @@ maps_preference_destroy(preference);
 maps_view_h maps_view = NULL;
 /* Create an image object for the map view */
 Evas_Object *evas_object_image =
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_filled_add(evas_object_evas_get(window));
+    evas_object_image_filled_add(evas_object_evas_get(window));
 
 error = maps_view_create(maps, evas_object_image, &amp;maps_view);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -1120,7 +1120,7 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 error = maps_view_set_type(maps_view, MAPS_VIEW_TYPE_NORMAL);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -1128,7 +1128,7 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 error = maps_view_set_buildings_enabled(maps_view, true);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -1136,7 +1136,7 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 error = maps_view_set_traffic_enabled(maps_view, true);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -1144,15 +1144,15 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 error = maps_view_set_scalebar_enabled(maps_view, true);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
 <li>Set the map view language with the <code>maps_view_set_language()</code> function:
 <pre class="prettyprint">
-error = maps_view_set_language(maps_view, &quot;eng&quot;);
+error = maps_view_set_language(maps_view, "eng");
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li></ul></li>
 
@@ -1161,18 +1161,18 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 error = maps_view_set_screen_location(maps_view, 0, 100, 500, 1000);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 
 <p>You can also set the location with the <code>maps_view_move()</code> and <code>maps_view_resize()</code> functions:</p>
 <pre class="prettyprint">
 error = maps_view_move(0, 100);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 error = maps_view_resize(500, 1000);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -1180,7 +1180,7 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 error = maps_view_set_visibility(maps_view, true);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -1192,7 +1192,7 @@ maps_coordinates_create(28.64362, 77.19865, &amp;maps_coord);
 
 error = maps_view_set_center(maps_view, maps_coord);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 maps_coordinates_destroy(maps_coord);
 </pre>
@@ -1202,7 +1202,7 @@ maps_coordinates_destroy(maps_coord);
 <pre class="prettyprint">
 error = maps_view_set_zoom_level(maps_view, 12);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -1218,7 +1218,7 @@ maps_view_destroy(maps_view);
 
 <p>You can create polyline, polygon, and marker objects for the map view.</p>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         Before you use the View Object API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__VIEW__OBJECT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__VIEW__OBJECT__MODULE.html">wearable</a> applications), create a map view object instance.
@@ -1241,7 +1241,7 @@ maps_coordinates_list_append(coord_list, coord2);
 
 error = maps_view_object_create_polyline(coord_list, 255, 0, 0, 0, 5, &amp;object);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li>To create a polygon:
@@ -1260,7 +1260,7 @@ maps_coordinates_list_append(coord_list, coord3);
 
 error = maps_view_object_create_polyline(coord_list, 255, 0, 0, 0, 5, &amp;object);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li>To create a marker with the <code>MAPS_VIEW_MARKER_PIN</code> type:
@@ -1270,10 +1270,10 @@ maps_coordinates_h coord = NULL;
 
 maps_coordinates_create(28.64362, 77.19865, &amp;coord);
 
-error = maps_view_object_create_marker(coord, &quot;image/marker_icon.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MAPS_VIEW_MARKER_PIN, &amp;object);
+error = maps_view_object_create_marker(coord, "image/marker_icon.png",
+                                       MAPS_VIEW_MARKER_PIN, &amp;object);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 <p>You can also create the <code>MAPS_VIEW_MARKER_STICKER</code> type marker.</p>
 </li>
@@ -1284,7 +1284,7 @@ if (error != MAPS_ERROR_NONE)
 <pre class="prettyprint">
 error = maps_view_add_object(maps_view, object);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li>When no longer needed, remove the instance with the <code>maps_view_remove_object()</code> function:
@@ -1309,16 +1309,16 @@ maps_view_remove_object(maps_view, object);
 
 <pre class="prettyprint">
 error = maps_view_set_event_cb(maps_view, MAPS_VIEW_EVENT_GESTURE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__main_view_event_cb, NULL);
+                               __main_view_event_cb, NULL);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 static void
 __main_view_event_cb(const maps_view_event_type_e type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maps_view_event_data_h event_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                     maps_view_event_data_h event_data,
+                     void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the obtained event */
+    /* Handle the obtained event */
 }
 </pre></li>
 
@@ -1329,7 +1329,7 @@ __main_view_event_cb(const maps_view_event_type_e type,
 <pre class="prettyprint">
 error = maps_view_unset_event_cb(maps_view, MAPS_VIEW_EVENT_GESTURE);
 if (error != MAPS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 </ol>
 
diff --git a/org.tizen.guides/html/native/location_sensors/mapzen_credentials_n.htm b/org.tizen.guides/html/native/location_sensors/mapzen_credentials_n.htm
index 3c2d3f0..ffb237e 100644 (file)
--- a/org.tizen.guides/html/native/location_sensors/mapzen_credentials_n.htm
+++ b/org.tizen.guides/html/native/location_sensors/mapzen_credentials_n.htm
@@ -23,10 +23,10 @@
                        <p class="toc-title">Dependencies</p>
                        <ul class="toc">
                                <li>Tizen 3.0 and Higher for Mobile</li>
-                       </ul>                   
+                       </ul>
                        <p class="toc-title">Content</p>
                        <ul class="toc">
-                               <li><a href="#rate_limit">API Rate Limits</a></li> 
+                               <li><a href="#rate_limit">API Rate Limits</a></li>
                                <li><a href="#check">API Usage Check</a></li>
                        </ul>
                        <p class="toc-title">Related Info</p>
@@ -42,7 +42,7 @@
 <h1>Getting a Mapzen API Key</h1>
 
 <p>Mapzen products help you put a map anywhere, search and route the planet, and try a world of open data. They are built from open-source tools that are packaged into a Web service and hosted on the Mapzen servers. If you want to use Mapzen services, you must create a Mapzen developer account and a valid API key, and keep your requests to the service within certain rate limits.</p>
-  
+
     <div class="note">
         <strong>Note</strong>
                Mapzen products are available for any use, including commercial purposes. You must follow the <a href="https://mapzen.com/rights/" target="_blank">attribution requirements</a> for the data source, and also provide acknowledgment to Mapzen if you are using these Web services.
@@ -68,8 +68,8 @@
 
 <pre class="prettyprint">
 maps_service_h maps = NULL;
-int error = maps_service_create(&quot;MAPZEN&quot;, &amp;maps);
-error = maps_service_set_provider_key(maps, &quot;mapzen-xxxxxx&quot;)
+int error = maps_service_create("MAPZEN", &amp;maps);
+error = maps_service_set_provider_key(maps, "mapzen-xxxxxx")
 </pre>
 
 <h2 id="rate_limit">API Rate Limits</h2>
@@ -125,7 +125,7 @@ error = maps_service_set_provider_key(maps, &quot;mapzen-xxxxxx&quot;)
 <li>View a graph of your recent usage for a certain period of time, such as the past day or month.</li>
 </ol>
 
-<p>If you exceed rate limits, you can notice it in the <a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank">HTTP status codes</a> you receive in the header for the server&#39;s response to your queries. The typical errors for exceeded limits are &quot;403 Forbidden&quot; and &quot;429 Too Many Requests&quot;.</p>
+<p>If you exceed rate limits, you can notice it in the <a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank">HTTP status codes</a> you receive in the header for the server's response to your queries. The typical errors for exceeded limits are "403 Forbidden" and "429 Too Many Requests".</p>
 
 <p>All queries do not count towards your rate limit. Mapzen uses server caching to deliver commonly requested content as quickly as possible. Queries served from the cache are not included in the rate limit count. For example, queries can be served from the cache when you browse a map with vector tiles in a popular extent or repeatedly perform an identical geocoding search.</p>
 
diff --git a/org.tizen.guides/html/native/media/audio_n.htm b/org.tizen.guides/html/native/media/audio_n.htm
index fb2f9af..c9edbde 100644 (file)
--- a/org.tizen.guides/html/native/media/audio_n.htm
+++ b/org.tizen.guides/html/native/media/audio_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Audio Management</title>  
+       <title>Audio Management</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Audio Management</h1>
diff --git a/org.tizen.guides/html/native/media/camera_n.htm b/org.tizen.guides/html/native/media/camera_n.htm
index f347034..7954cb8 100644 (file)
--- a/org.tizen.guides/html/native/media/camera_n.htm
+++ b/org.tizen.guides/html/native/media/camera_n.htm
@@ -45,61 +45,61 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Camera</h1>
 
- <p>Tizen offers basic camera features, including preview and capture. It allows you to capture still images with the device&#39;s internal camera and keep images on your target device.</p> 
- 
- <p align="center"><strong>Figure: Camera image examples</strong></p> 
+ <p>Tizen offers basic camera features, including preview and capture. It allows you to capture still images with the device's internal camera and keep images on your target device.</p>
+
+ <p align="center"><strong>Figure: Camera image examples</strong></p>
  <p align="center"><img src="../../images/camera_images.png" alt="Camera image examples" /></p>
- 
-  <p>The main features of the Camera API include:</p> 
-  <ul> 
+
+  <p>The main features of the Camera API include:</p>
+  <ul>
 <li>Configuring the camera and its callbacks
 <p>You can <a href="#configuring_callback">configure the camera</a> and set the camera and auto-focus callbacks.</p></li>
 <li>Setting the display for the camera preview
 <p>You can preview images in real time with the <code>StartPreview()</code> function. The feature provides:</p>
- <ul> 
-     <li>Support for several pixel formats, such as NV12, NV12T, NV16, NV21, YUYV, UYVY, and YUV420P</li> 
-     <li>Preview at the frame rate</li> 
-     <li>Rotation and flip of the preview</li> 
+ <ul>
+     <li>Support for several pixel formats, such as NV12, NV12T, NV16, NV21, YUYV, UYVY, and YUV420P</li>
+     <li>Preview at the frame rate</li>
+     <li>Rotation and flip of the preview</li>
     </ul>
        <p>You can also <a href="#display">customize the display settings for the camera preview</a>.</p></li>
    <li>Capturing and saving images
-   <p>You can start the camera preview and <a href="#photo">capture an image</a>.</p></li> 
+   <p>You can start the camera preview and <a href="#photo">capture an image</a>.</p></li>
    <li>Setting camera attributes
    <p>You can <a href="#attributes">control the camera settings</a>:</p>
-    <ul class="indent"> 
-     <li>Contrast</li> 
-     <li>Exposure</li> 
-     <li>Brightness</li> 
-     <li>Effects</li> 
-     <li>ISO</li> 
-     <li>White balance</li> 
-     <li>Zoom</li> 
-     <li>Flash</li> 
-     <li>Focus</li> 
-     <li>Metering</li> 
-        <li>EXIF tag (geo, orientation, software info and description)</li> 
-        <li>Scene mode, HDR, theater</li> 
-        <li>Image quality</li> 
-    </ul> 
-       <p>Depending on the camera device type, the device can support different orientations, resolutions, or preview and capture formats. You can obtain this information from the device using the <code>camera_foreach_supported_preview_resolution()</code>, <code>camera_foreach_supported_preview_format()</code>, or other <code>camera_foreach_supported_xxx()</code> functions.</p>  
-  
-  <p>Since devices can have multiple camera sensors with different capabilities, create a <code>Camera</code> with a proper <code>camera_device_e</code> value, determining which camera sensor is used. Usually the primary sensor is located on the back side and the secondary sensor on the front side of the device. Once the camera sensor is selected, the selected sensor starts working.</p> 
-
-  
+    <ul class="indent">
+     <li>Contrast</li>
+     <li>Exposure</li>
+     <li>Brightness</li>
+     <li>Effects</li>
+     <li>ISO</li>
+     <li>White balance</li>
+     <li>Zoom</li>
+     <li>Flash</li>
+     <li>Focus</li>
+     <li>Metering</li>
+        <li>EXIF tag (geo, orientation, software info and description)</li>
+        <li>Scene mode, HDR, theater</li>
+        <li>Image quality</li>
+    </ul>
+       <p>Depending on the camera device type, the device can support different orientations, resolutions, or preview and capture formats. You can obtain this information from the device using the <code>camera_foreach_supported_preview_resolution()</code>, <code>camera_foreach_supported_preview_format()</code>, or other <code>camera_foreach_supported_xxx()</code> functions.</p>
+
+  <p>Since devices can have multiple camera sensors with different capabilities, create a <code>Camera</code> with a proper <code>camera_device_e</code> value, determining which camera sensor is used. Usually the primary sensor is located on the back side and the secondary sensor on the front side of the device. Once the camera sensor is selected, the selected sensor starts working.</p>
+
+
     <div class="note">
         <strong>Note</strong>
         Simultaneous use of multiple camera sensors is not allowed.
                <p>The target device often supports more functionalities than the emulator.</p>
                <p>The behavior of the shutter sound can differ according to the legislation of each country.</p>
     </div>
-</li> 
+</li>
 <li>Releasing resources
 <p>When you have finished working with the camera, you can <a href="#release">release the resources</a>.</p></li>
 </ul>
 
-<p>The following figure illustrates the camera state changes in the normal mode:</p> 
-  <p align="center"><strong>Figure: Camera states in the normal mode</strong></p> 
-  <p align="center"><img src="../../images/using_camera_states.png" alt="Camera states in the normal mode" /></p> 
+<p>The following figure illustrates the camera state changes in the normal mode:</p>
+  <p align="center"><strong>Figure: Camera states in the normal mode</strong></p>
+  <p align="center"><img src="../../images/using_camera_states.png" alt="Camera states in the normal mode" /></p>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -117,10 +117,10 @@
 
 <pre class="prettyprint">
 struct _camdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *rect;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *evas;
-&nbsp;&nbsp;&nbsp;&nbsp;camera_h g_camera; /* Camera handle */
+    Evas_Object *win;
+    Evas_Object *rect;
+    Evas *evas;
+    camera_h g_camera; /* Camera handle */
 };
 typedef struct _camdata camdata;
 
@@ -142,9 +142,9 @@ int error_code = 0;
 /* Create the camera handle */
 error_code = camera_create(CAMERA_DEVICE_CAMERA0, &amp;cam_data.g_camera);
 if (error_code == CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_INFO, LOG_TAG, "error code = %d", error_code);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 <p>The <code>CAMERA_DEVICE_CAMERA0</code> parameter means that the currently activated device camera is 0, which is the primary camera. You can select between the primary (0) and secondary (1) camera. These values are defined in the <code>camera_device_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">wearable</a> applications).</p>
 </li>
@@ -199,52 +199,52 @@ Evas_Object *g_eo = NULL;
 static void
 create_base_gui(camdata *cam_data, camera_display_type_e display_type)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;/* PACKAGE contains the package name&#39;s character info */
-&nbsp;&nbsp;&nbsp;&nbsp;cam_data-&gt;win = elm_win_add(NULL, PACKAGE, ELM_WIN_BASIC);
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(cam_data-&gt;win, 240, 320);
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(cam_data-&gt;win, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(cam_data-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;cam_data-&gt;evas = evas_object_evas_get(cam_data-&gt;win);
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (display_type) {
-&nbsp;&nbsp;&nbsp;&nbsp;case CAMERA_DISPLAY_TYPE_EVAS:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the Evas image object for drawing */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_eo = evas_object_image_add(cam_data-&gt;evas);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_size_set(g_eo, 240, 320);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(g_eo, 0, 0, 240, 320);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(g_eo, 240, 320);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(g_eo);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(cam_data.win);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case CAMERA_DISPLAY_TYPE_OVERLAY:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cam_data-&gt;rect = evas_object_rectangle_add(cam_data-&gt;evas);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(cam_data-&gt;rect, 240, 320);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(cam_data-&gt;rect, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(cam_data-&gt;rect, 0, 0, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_render_op_set(cam_data-&gt;rect, EVAS_RENDER_COPY);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(cam_data-&gt;rect, EVAS_HINT_EXPAND,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(cam_data-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* Window */
+    elm_config_accel_preference_set("opengl");
+    /* PACKAGE contains the package name's character info */
+    cam_data-&gt;win = elm_win_add(NULL, PACKAGE, ELM_WIN_BASIC);
+
+    evas_object_resize(cam_data-&gt;win, 240, 320);
+
+    evas_object_move(cam_data-&gt;win, 0, 0);
+    elm_win_autodel_set(cam_data-&gt;win, EINA_TRUE);
+
+    cam_data-&gt;evas = evas_object_evas_get(cam_data-&gt;win);
+
+    switch (display_type) {
+    case CAMERA_DISPLAY_TYPE_EVAS:
+        /* Set the Evas image object for drawing */
+        g_eo = evas_object_image_add(cam_data-&gt;evas);
+        evas_object_image_size_set(g_eo, 240, 320);
+        evas_object_image_fill_set(g_eo, 0, 0, 240, 320);
+        evas_object_resize(g_eo, 240, 320);
+        evas_object_show(g_eo);
+        evas_object_show(cam_data.win);
+        break;
+    case CAMERA_DISPLAY_TYPE_OVERLAY:
+        cam_data-&gt;rect = evas_object_rectangle_add(cam_data-&gt;evas);
+        evas_object_resize(cam_data-&gt;rect, 240, 320);
+        evas_object_move(cam_data-&gt;rect, 0, 0);
+        evas_object_color_set(cam_data-&gt;rect, 0, 0, 0, 0);
+        evas_object_render_op_set(cam_data-&gt;rect, EVAS_RENDER_COPY);
+        evas_object_size_hint_weight_set(cam_data-&gt;rect, EVAS_HINT_EXPAND,
+                                         EVAS_HINT_EXPAND);
+        /* Show the window after the base GUI is set up */
+        evas_object_show(cam_data-&gt;win);
+        break;
+    case default:
+        break;
+    }
 }
 
 error_code = camera_set_display(cam_data.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GET_DISPLAY(cam_data.win));
+                                GET_DISPLAY(cam_data.win));
 if (error_code != CAMERA_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, &quot;camera_set_display failed [0x%x]&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;camera_destroy(cam_data.g_camera);
-&nbsp;&nbsp;&nbsp;&nbsp;cam_data.g_camera = 0;
+    dlog_print(DLOG_DEBUG, "camera_set_display failed [0x%x]", ret);
+    camera_destroy(cam_data.g_camera);
+    cam_data.g_camera = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 
@@ -264,21 +264,21 @@ int resolution[2];
 static bool
 _preview_resolution_cb(int width, int height, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int *resolution = (int*)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;resolution[0] = width;
-&nbsp;&nbsp;&nbsp;&nbsp;resolution[1] = height;
+    int *resolution = (int*)user_data;
+    resolution[0] = width;
+    resolution[1] = height;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 
 /* Find a resolution that is supported by the device */
 error_code = camera_foreach_supported_preview_resolution(cam_data.g_camera,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_preview_resolution_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolution);
+                                                         _preview_resolution_cb,
+                                                         resolution);
 
 /* Set the supported resolution for camera preview */
 error_code = camera_set_preview_resolution(cam_data.g_camera, resolution[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolution[1]);
+                                           resolution[1]);
 </pre>
 
 </li>
@@ -313,16 +313,16 @@ error_code = camera_set_preview_cb(cam_data.g_camera, _camera_preview_cb, NULL);
 static void
 _camera_preview_cb(camera_preview_data_s *frame, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
+    int error_code = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (g_enable_focus == true) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_focusing(cam_data.g_camera, true);
+    if (g_enable_focus == true) {
+        error_code = camera_start_focusing(cam_data.g_camera, true);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == CAMERA_ERROR_NOT_SUPPORTED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_focusing(cam_data.g_camera, false);
+        if (error_code == CAMERA_ERROR_NOT_SUPPORTED)
+            error_code = camera_start_focusing(cam_data.g_camera, false);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_enable_focus = false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        g_enable_focus = false;
+    }
 }
 </pre>
 
@@ -338,7 +338,7 @@ _camera_preview_cb(camera_preview_data_s *frame, void *user_data)
 
 <pre class="prettyprint">
 error_code = camera_set_focus_changed_cb(cam_data.g_camera,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_camera_focus_cb, NULL);
+                                         _camera_focus_cb, NULL);
 </pre>
 
 <p>Before auto-focusing starts, the auto-focus state is <code>CAMERA_FOCUS_STATE_RELEASED</code>. After the <code>camera_start_focusing()</code> function is called, the camera starts auto-focusing and the state changes to <code>CAMERA_FOCUS_STATE_ONGOING</code>. If the auto-focusing finishes successfully, the state changes to <code>CAMERA_FOCUS_STATE_FOCUSED</code>. If the auto-focusing fails, the state changes to <code>CAMERA_FOCUS_STATE_FAILED</code>.</p>
@@ -349,16 +349,16 @@ error_code = camera_set_focus_changed_cb(cam_data.g_camera,
 static void
 _camera_focus_cb(camera_focus_state_e state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
+    int error_code;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (state == CAMERA_FOCUS_STATE_FOCUSED &amp;&amp; g_enable_shot == true) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Start capturing */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_capture(cam_data.g_camera,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_camera_capturing_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_camera_completed_cb, NULL);
+    if (state == CAMERA_FOCUS_STATE_FOCUSED &amp;&amp; g_enable_shot == true) {
+        /* Start capturing */
+        error_code = camera_start_capture(cam_data.g_camera,
+                                          _camera_capturing_cb,
+                                          _camera_completed_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_enable_shot = false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        g_enable_shot = false;
+    }
 }
 </pre>
 
@@ -390,10 +390,10 @@ _camera_focus_cb(camera_focus_state_e state, void *user_data)
 <p>To determine the active camera, check the <code>camera_device_e</code> enumerator:</p>
 
 <pre class="prettyprint">
-typedef 
+typedef
 enum {
-&nbsp;&nbsp;&nbsp;&nbsp;CAMERA_DEVICE_CAMERA0 = 0, /* Primary camera */
-&nbsp;&nbsp;&nbsp;&nbsp;CAMERA_DEVICE_CAMERA1 /* Secondary camera */
+    CAMERA_DEVICE_CAMERA0 = 0, /* Primary camera */
+    CAMERA_DEVICE_CAMERA1 /* Secondary camera */
 } camera_device_e;
 </pre>
 
@@ -450,26 +450,26 @@ int display_rotation_angle = 0;
 
 /* Get the recommended display rotation value */
 error_code = camera_attr_get_lens_orientation(cam_data.g_camera,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;lens_orientation);
+                                              &amp;lens_orientation);
 display_rotation_angle = (360 - lens_orientation) % 360;
 
 /* Convert the display rotation value to an enum type */
 switch (display_rotation_angle) {
 case 0:
-&nbsp;&nbsp;&nbsp;&nbsp;display_rotation = CAMERA_ROTATION_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    display_rotation = CAMERA_ROTATION_NONE;
+    break;
 case 90:
-&nbsp;&nbsp;&nbsp;&nbsp;display_rotation = CAMERA_ROTATION_90;
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    display_rotation = CAMERA_ROTATION_90;
+    break;
 case 180:
-&nbsp;&nbsp;&nbsp;&nbsp;display_rotation = CAMERA_ROTATION_180;
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    display_rotation = CAMERA_ROTATION_180;
+    break;
 case 270:
-&nbsp;&nbsp;&nbsp;&nbsp;display_rotation = CAMERA_ROTATION_270;
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    display_rotation = CAMERA_ROTATION_270;
+    break;
 default:
-&nbsp;&nbsp;&nbsp;&nbsp;display_rotation = CAMERA_ROTATION_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    display_rotation = CAMERA_ROTATION_NONE;
+    break;
 }
 
 /* Set the display rotation */
@@ -512,9 +512,9 @@ display_rotation_angle = (360 - lens_orientation) % 360;
 
 /* Set the mirror display */
 if (display_rotation_angle == 90 || display_rotation_angle == 270)
-&nbsp;&nbsp;&nbsp;&nbsp;camera_default_flip = MM_FLIP_VERTICAL;
+    camera_default_flip = MM_FLIP_VERTICAL;
 else
-&nbsp;&nbsp;&nbsp;&nbsp;camera_default_flip = MM_FLIP_HORIZONTAL;
+    camera_default_flip = MM_FLIP_HORIZONTAL;
 
 /* Set the display flip */
 error_code = camera_set_display_flip(cam_data.g_camera, camera_default_flip);
@@ -604,14 +604,14 @@ error_code = camera_start_preview(cam_data.g_camera);
 <pre class="prettyprint">
 static void
 _camera_capturing_cb(camera_image_data_s* image, camera_image_data_s* postview,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;camera_image_data_s* thumbnail, void *user_data)
+                     camera_image_data_s* thumbnail, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Writing image to file&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;FILE *file = fopen(g_fname, &quot;w+&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Writing image to file");
+    FILE *file = fopen(g_fname, "w+");
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (image-&gt;data != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fwrite(image-&gt;data, 1, image-&gt;size, file);
-&nbsp;&nbsp;&nbsp;&nbsp;fclose(file);
+    if (image-&gt;data != NULL)
+        fwrite(image-&gt;data, 1, image-&gt;size, file);
+    fclose(file);
 }
 </pre>
 
@@ -629,14 +629,14 @@ _camera_capturing_cb(camera_image_data_s* image, camera_image_data_s* postview,
 static void
 _camera_completed_cb(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
+    int error_code = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;usleep(25000); /* Display the captured image for 0.025 seconds */
+    usleep(25000); /* Display the captured image for 0.025 seconds */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Restart the camera preview */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_preview(cam_data.g_camera);
+    /* Restart the camera preview */
+    error_code = camera_start_preview(cam_data.g_camera);
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_enable_focus = true;
+    g_enable_focus = true;
 }
 </pre>
 
@@ -709,13 +709,13 @@ error_code = camera_attr_get_brightness(cam_data.g_camera, &amp;g_bright_level);
 
 <pre class="prettyprint">
 if (g_bright_level &gt;= LEVEL_UPPER_BOUND) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Brightness is set to maximum level&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;g_bright_level = LEVEL_UPPER_BOUND - 1;
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Brightness is set to maximum level");
+    g_bright_level = LEVEL_UPPER_BOUND - 1;
 } else if (g_bright_level &lt;= LEVEL_LOWER_BOUND) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Brightness is set to minimum level&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;g_bright_level = LEVEL_LOWER_BOUND + 1;
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Brightness is set to minimum level");
+    g_bright_level = LEVEL_LOWER_BOUND + 1;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;g_bright_level++;
+    g_bright_level++;
 }
 
 /* Set the brightness level */
diff --git a/org.tizen.guides/html/native/media/face_detection_n.htm b/org.tizen.guides/html/native/media/face_detection_n.htm
index f460298..9fa85f7 100644 (file)
--- a/org.tizen.guides/html/native/media/face_detection_n.htm
+++ b/org.tizen.guides/html/native/media/face_detection_n.htm
@@ -81,8 +81,8 @@
 <ul><li>For face detection, use the following <code>facedata_s</code> structure:
 <pre class="prettyprint">
 struct _facedata_s {
-&nbsp;&nbsp;&nbsp;&nbsp;mv_source_h g_source;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h g_engine_config;
+    mv_source_h g_source;
+    mv_engine_config_h g_engine_config;
 };
 typedef struct _facedata_s facedata_s;
 static facedata_s facedata;
@@ -91,9 +91,9 @@ static facedata_s facedata;
 <li>For face recognition, use the following <code>facedata_s</code> structure:
 <pre class="prettyprint">
 struct _facedata_s {
-&nbsp;&nbsp;&nbsp;&nbsp;mv_source_h g_source;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h g_engine_config;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_face_recognition_model g_face_recog_model;
+    mv_source_h g_source;
+    mv_engine_config_h g_engine_config;
+    mv_face_recognition_model g_face_recog_model;
 };
 typedef struct _facedata_s facedata_s;
 static facedata_s facedata;
@@ -102,21 +102,21 @@ static facedata_s facedata;
 <li>For face tracking, use the following <code>facedata_s</code> structure:
 <pre class="prettyprint">
 struct _facedata_s {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Variable for camera display */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *rect;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *evas;
+    /* Variable for camera display */
+    Evas_Object *win;
+    Evas_Object *rect;
+    Evas *evas;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int preview_width;
-&nbsp;&nbsp;&nbsp;&nbsp;int preview_height;
+    int preview_width;
+    int preview_height;
 
-&nbsp;&nbsp;&nbsp;&nbsp;camera_h g_camera;
+    camera_h g_camera;
 
-&nbsp;&nbsp;&nbsp;&nbsp;mv_source_h g_source;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h g_engine_config;
+    mv_source_h g_source;
+    mv_engine_config_h g_engine_config;
 
-&nbsp;&nbsp;&nbsp;&nbsp;mv_quadrangle_s face_roi;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_face_tracking_model_h g_face_track_model;
+    mv_quadrangle_s face_roi;
+    mv_face_tracking_model_h g_face_track_model;
 };
 typedef struct _facedata_s facedata_s;
 static facedata_s facedata;
@@ -138,7 +138,7 @@ int error_code = 0;
 
 error_code = mv_create_source(&amp;facedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 <p>The source stores the face to be detected and all related data. You manage the source through the source handle.</p>
@@ -152,17 +152,17 @@ unsigned int bufferSize = 0;
 int width = 0;
 int height = 0;
 
-error_code = image_util_decode_jpeg(&quot;/mydir/NasaAstronaut.jpg&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IMAGE_UTIL_COLORSPACE_RGB888,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;dataBuffer, &amp;height, &amp;bufferSize);
+error_code = image_util_decode_jpeg("/mydir/NasaAstronaut.jpg",
+                                    IMAGE_UTIL_COLORSPACE_RGB888,
+                                    &amp;dataBuffer, &amp;height, &amp;bufferSize);
 if (error_code != IMAGE_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Fill the dataBuffer to g_source */
 error_code = mv_source_fill_by_buffer(facedata.g_source, dataBuffer, bufferSize,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width, height, MEDIA_VISION_COLORSPACE_RGB888);
+                                      width, height, MEDIA_VISION_COLORSPACE_RGB888);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 free(dataBuffer);
 dataBuffer = NULL;
@@ -173,25 +173,25 @@ dataBuffer = NULL;
 <pre class="prettyprint">
 error_code = mv_create_engine_config(&amp;facedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 
 <p>Face detection details can be configured by setting attributes to the engine configuration handle. In this use case, the <code>MV_FACE_DETECTION_MODEL_FILE_PATH</code> attribute is configured. For more information on the attributes, see the Media Vision API reference (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__MODULE.html">wearable</a> applications).</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_set_string_attribute(facedata.g_engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MV_FACE_DETECTION_MODEL_FILE_PATH,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;/usr/share/OpenCV/haarcascades/haarcascade_frontalface_alt.xml&quot;);
+    mv_engine_config_set_string_attribute(facedata.g_engine_config,
+                                          MV_FACE_DETECTION_MODEL_FILE_PATH,
+                                          "/usr/share/OpenCV/haarcascades/haarcascade_frontalface_alt.xml");
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>When the source and engine configuration handles are ready, use the <code>mv_face_detect()</code> function to detect faces:
 <pre class="prettyprint">
 error_code = mv_face_detect(facedata.g_source, facedata.g_engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_on_face_detected_cb, NULL);
+                            _on_face_detected_cb, NULL);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>The <code>mv_face_detect()</code> function invokes the <code>_on_face_detected_cb()</code> callback.
@@ -199,18 +199,18 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <pre class="prettyprint">
 static void
 _on_face_detected_cb(mv_source_h source, mv_engine_config_h engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mv_rectangle_s *face_locations,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int number_of_faces, void *user_data)
+                     mv_rectangle_s *face_locations,
+                     int number_of_faces, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (number_of_faces &gt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int index = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (index = 0; index &lt; number_of_faces; ++index) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;face [%d]: x-[%d], y-[%d], width-[%d], height-[%d]\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index, face_locations[index].x, face_locations[index].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;face_locations[index].width, face_locations[index].height);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (number_of_faces &gt; 0) {
+        int index = 0;
+        for (index = 0; index &lt; number_of_faces; ++index) {
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "face [%d]: x-[%d], y-[%d], width-[%d], height-[%d]\n",
+                       index, face_locations[index].x, face_locations[index].y,
+                       face_locations[index].width, face_locations[index].height);
+        }
+    }
 }
 </pre>
 </li>
@@ -219,11 +219,11 @@ _on_face_detected_cb(mv_source_h source, mv_engine_config_h engine_config,
 <pre class="prettyprint">
 error_code = mv_destroy_source(facedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_destroy_engine_config(facedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 </ol>
@@ -240,11 +240,11 @@ int error_code = 0;
 
 error_code = mv_create_source(&amp;facedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_create_engine_config(&amp;facedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>Create a <code>g_face_recog_model</code> media vision face recognition model handle using the <code>mv_face_recognition_model_create()</code> function. The handle must be created before any recognition is attempted.
@@ -252,11 +252,11 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <pre class="prettyprint">
 error_code = mv_face_recognition_model_create(&amp;facedata.g_face_recog_model);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>Add face examples to the face recognition model handle.
-<p>Make sure that the face examples are of the same person but captured at different angles. The following example assumes that 10 face samples (<code>face_sample_1.jpg</code> - <code>face_sample_10.jpg</code> in the <code>&lt;OwnDataPath&gt;</code> folder) are used and that the face area in each example  covers approximately 95~100% of the image. The label of the face is set to &#39;1&#39;.</p>
+<p>Make sure that the face examples are of the same person but captured at different angles. The following example assumes that 10 face samples (<code>face_sample_1.jpg</code> - <code>face_sample_10.jpg</code> in the <code>&lt;OwnDataPath&gt;</code> folder) are used and that the face area in each example  covers approximately 95~100% of the image. The label of the face is set to '1'.</p>
 
 <pre class="prettyprint">
 int example_index = 0;
@@ -269,44 +269,44 @@ int width = 0;
 int height = 0;
 
 for (example_index = 1; example_index &lt;= 10; ++example_index) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Decode image and fill the image data to g_source handle */
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(filePath, 1024, &quot;%s/face_sample_%d.jpg&quot;, mydir, example_index);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = image_util_decode_jpeg(filePath, IMAGE_UTIL_COLORSPACE_RGB888,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;dataBuffer, &amp;width, &amp;height, &amp;bufferSize);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;roi.x = roi.y = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;roi.width = width;
-&nbsp;&nbsp;&nbsp;&nbsp;roi.height = height;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = mv_source_clear(facedata.g_source);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = mv_source_fill_by_buffer(facedata.g_source, &amp;dataBuffer,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;bufferSize, &amp;width, &amp;height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MEDIA_VISION_COLORSPACE_RGB888);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;free(dataBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;dataBuffer = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = mv_face_recognition_model_add(facedata.g_source,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.g_face_recog_model,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;roi, face_label);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    /* Decode image and fill the image data to g_source handle */
+    snprintf(filePath, 1024, "%s/face_sample_%d.jpg", mydir, example_index);
+    error_code = image_util_decode_jpeg(filePath, IMAGE_UTIL_COLORSPACE_RGB888,
+                                        &amp;dataBuffer, &amp;width, &amp;height, &amp;bufferSize);
+    if (error_code != MEDIA_VISION_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+    roi.x = roi.y = 0;
+    roi.width = width;
+    roi.height = height;
+    error_code = mv_source_clear(facedata.g_source);
+    if (error_code != MEDIA_VISION_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+    error_code = mv_source_fill_by_buffer(facedata.g_source, &amp;dataBuffer,
+                                          &amp;bufferSize, &amp;width, &amp;height,
+                                          MEDIA_VISION_COLORSPACE_RGB888);
+    if (error_code != MEDIA_VISION_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+
+    free(dataBuffer);
+    dataBuffer = NULL;
+
+    error_code = mv_face_recognition_model_add(facedata.g_source,
+                                               facedata.g_face_recog_model,
+                                               &amp;roi, face_label);
+    if (error_code != MEDIA_VISION_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 }
 </pre>
 </li>
 <li>Use the <code>mv_face_recognition_model_learn()</code> function to train the face recognition model with the added examples:
 <pre class="prettyprint">
 error_code = mv_face_recognition_model_learn(facedata.g_engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.g_face_recog_model);
+                                             facedata.g_face_recog_model);
 
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>When the face recognition model handle is ready, use the <code>mv_face_recognize()</code> function to recognize the face.
@@ -315,29 +315,29 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 
 <pre class="prettyprint">
 /* Decode the image and fill the image data to g_source handle */
-snprintf(filePath, 1024, &quot;%s/whos_face.jpg&quot;, mydir);
+snprintf(filePath, 1024, "%s/whos_face.jpg", mydir);
 error_code = image_util_decode_jpeg(filePath, IMAGE_UTIL_COLORSPACE_RGB888,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;dataBuffer, &amp;width, &amp;height, &amp;bufferSize);
+                                    &amp;dataBuffer, &amp;width, &amp;height, &amp;bufferSize);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 
 error_code = mv_source_clear(facedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 
 error_code = mv_source_fill_by_buffer(facedata.g_source, &amp;dataBuffer, &amp;bufferSize,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;width, &amp;height, MEDIA_VISION_COLORSPACE_RGB888);
+                                      &amp;width, &amp;height, MEDIA_VISION_COLORSPACE_RGB888);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 
 free(dataBuffer);
 dataBuffer = NULL;
 
 error_code = mv_face_recognize(facedata.g_source, facedata.g_face_recog_model,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.g_engine_config, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_on_face_recognized_cb, NULL);
+                               facedata.g_engine_config, NULL,
+                               _on_face_recognized_cb, NULL);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>The <code>mv_face_recognize()</code> function invokes the <code>_on_face_recognized_cb()</code> callback.
@@ -345,15 +345,15 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <pre class="prettyprint">
 static void
 _on_face_recognized_cb(mv_source_h source,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mv_face_recognition_model_h recognition_model,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h engine_config, mv_rectangle_s *face_location,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int *face_label, double confidence, void *user_data)
+                       mv_face_recognition_model_h recognition_model,
+                       mv_engine_config_h engine_config, mv_rectangle_s *face_location,
+                       const int *face_label, double confidence, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (face_label) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;face label [%d] with confidence [%.2f]\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*face_label, confidence);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (face_label) {
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "face label [%d] with confidence [%.2f]\n",
+                   *face_label, confidence);
+    }
 }
 </pre>
 </li>
@@ -362,15 +362,15 @@ _on_face_recognized_cb(mv_source_h source,
 <pre class="prettyprint">
 error_code = mv_destroy_source(facedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_destroy_engine_config(facedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_face_recognition_model_destroy(facedata.g_face_recog_model);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 </ol>
@@ -389,32 +389,32 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 int error_code = 0;
 error_code = camera_create(CAMERA_DEVICE_CAMERA0, &amp;facedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Set the camera display */
 error_code = camera_set_display(facedata.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GET_DISPLAY(facedata.win);
+                                GET_DISPLAY(facedata.win);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Get the camera preview resolution */
 error_code = camera_get_preview_resolution(facedata.g_camera,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;facedata.preview_width,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;facedata.preview_height);
+                                           &amp;facedata.preview_width,
+                                           &amp;facedata.preview_height);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Set the camera preview callback */
 error_code = camera_set_media_packet_preview_cb(facedata.g_camera,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_camera_media_packet_preview_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                _camera_media_packet_preview_cb,
+                                                NULL);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Start the camera preview */
 error_code = camera_start_preview(facedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>Create the source and engine configuration handles:
@@ -422,11 +422,11 @@ if (error_code != CAMERA_ERROR_NONE)
 <pre class="prettyprint">
 error_code = mv_create_source(&amp;facedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_create_engine_config(&amp;facedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>Define the camera preview callback.
@@ -436,17 +436,17 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 static void
 _camera_media_packet_preview_cb(media_packet_h pkt, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (pkt == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (pkt == NULL)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = mv_source_fill_by_media_packet(facedata.g_source, pkt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error code);
+    error_code = mv_source_fill_by_media_packet(facedata.g_source, pkt);
+    if (error_code != MEDIA_VISION_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error code);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (pkt) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = media_packet_destroy(pkt);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pkt = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (pkt) {
+        error_code = media_packet_destroy(pkt);
+        pkt = NULL;
+    }
 }
 </pre>
 </li>
@@ -456,33 +456,33 @@ _camera_media_packet_preview_cb(media_packet_h pkt, void *user_data)
 
 <pre class="prettyprint">
 error_code = mv_face_detect(facedata.g_source, facedata.g_engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_on_face_detected_cb, NULL);
+                            _on_face_detected_cb, NULL);
 
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 static void
 _on_face_detected_cb(mv_source_h source, mv_engine_config_h engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mv_rectangle_s *face_locations, int number_of_faces, void *user_data)
+                     mv_rectangle_s *face_locations, int number_of_faces, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (number_of_faces &gt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Track the face of index &#39;0&#39;.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Convert mv_rectangle_s to mv_quadrangle_s
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.face_roi.points[0].x = face_location[0].x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.face_roi.points[0].y = face_location[0].y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.face_roi.points[1].x =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;face_location[0].x + face_location[0].width;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.face_roi.points[1].y = face_location[0].y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.face_roi.points[2].x = face_location[0].x ;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.face_roi.points[2].y =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;face_location[0].y + face_location[0].height;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.face_roi.points[3].x =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;face_location[0].x + face_location[0].width;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.face_roi.points[3].y =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;face_location[0].y + face_location[0].height;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (number_of_faces &gt; 0) {
+        /*
+           Track the face of index '0'.
+           Convert mv_rectangle_s to mv_quadrangle_s
+        */
+        facedata.face_roi.points[0].x = face_location[0].x;
+        facedata.face_roi.points[0].y = face_location[0].y;
+        facedata.face_roi.points[1].x =
+            face_location[0].x + face_location[0].width;
+        facedata.face_roi.points[1].y = face_location[0].y;
+        facedata.face_roi.points[2].x = face_location[0].x ;
+        facedata.face_roi.points[2].y =
+            face_location[0].y + face_location[0].height;
+        facedata.face_roi.points[3].x =
+            face_location[0].x + face_location[0].width;
+        facedata.face_roi.points[3].y =
+            face_location[0].y + face_location[0].height;
+    }
 }
 </pre>
 </li>
@@ -493,16 +493,16 @@ _on_face_detected_cb(mv_source_h source, mv_engine_config_h engine_config,
 <pre class="prettyprint">
 error_code = mv_face_tracking_model_create(&amp;facedata.g_face_track_model);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>Prepare the face tracking model handle with the initial location (detected earlier):
 <pre class="prettyprint">
 error_code = mv_face_tracking_model_prepare(facedata.g_face_track_model,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.g_engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.g_source, &amp;facedata.face_roi);
+                                            facedata.g_engine_config,
+                                            facedata.g_source, &amp;facedata.face_roi);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>Use the <code>mv_face_track()</code> function to track the face.
@@ -512,10 +512,10 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 </div>
 <pre class="prettyprint">
 error_code = mv_face_track(facedata.g_source, facedata.g_face_track_model,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facedata.g_engine_config, _on_face_tracked_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false, NULL);
+                           facedata.g_engine_config, _on_face_tracked_cb,
+                           false, NULL);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>The <code>mv_face_track()</code> function invokes the <code>_on_face_tracked_cb()</code> callback.
@@ -523,15 +523,15 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <pre class="prettyprint">
 static void
 _on_face_tracked_cb(mv_source_h source, mv_face_tracking_model_h tracking_model,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h engine_config, mv_quadrangle_s *location,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double confidence, void *user_data)
+                    mv_engine_config_h engine_config, mv_quadrangle_s *location,
+                    double confidence, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Location: (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d)\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location-&gt;points[0].x, location-&gt;point[0].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location-&gt;points[1].x, location-&gt;point[1].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location-&gt;points[2].x, location-&gt;point[2].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location-&gt;points[3].x, location-&gt;point[3].y)
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "Location: (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d)\n",
+               location-&gt;points[0].x, location-&gt;point[0].y,
+               location-&gt;points[1].x, location-&gt;point[1].y,
+               location-&gt;points[2].x, location-&gt;point[2].y,
+               location-&gt;points[3].x, location-&gt;point[3].y)
 }
 </pre>
 </li></ol></li>
@@ -542,15 +542,15 @@ _on_face_tracked_cb(mv_source_h source, mv_face_tracking_model_h tracking_model,
 <pre class="prettyprint">
 error_code = camera_stop_preview(facedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = camera_unset_media_packet_preview_cb(facedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = camera_destroy(facedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 <p>For more information, see <a href="camera_n.htm#release">Releasing Resources</a> in the Camera guide.</p>
@@ -561,15 +561,15 @@ if (error_code != CAMERA_ERROR_NONE)
 <pre class="prettyprint">
 error_code = mv_destroy_source(facedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_destroy_engine_config(facedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_face_tracking_model_destroy(facedata.g_face_track_model);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 </ol>
diff --git a/org.tizen.guides/html/native/media/image_barcode_n.htm b/org.tizen.guides/html/native/media/image_barcode_n.htm
index dbfafbf..594150e 100644 (file)
--- a/org.tizen.guides/html/native/media/image_barcode_n.htm
+++ b/org.tizen.guides/html/native/media/image_barcode_n.htm
@@ -54,7 +54,7 @@
 <p>You can handle images by creating a source handle and filling it from an image buffer or media packet. <a href="#prepare">Create the source handle</a> with the <code>mv_create_source()</code> function, and fill it with the <code>mv_source_fill_by_buffer()</code> or <code>mv_source_fill_by_media_packet()</code> function.</p>
 </li>
 <li>Detecting barcodes
-<p>You can <a href="#detect">detect barcodes</a> in an image or from camera preview streams, and then decrypt them to display messages to the user.</p> 
+<p>You can <a href="#detect">detect barcodes</a> in an image or from camera preview streams, and then decrypt them to display messages to the user.</p>
 <p>Before detecting a barcode, you must define the barcode detection target attribute value:</p>
                                <ul>
                                        <li>Detect both 1D and 2D barcodes</li>
@@ -120,21 +120,21 @@
 
 <pre class="prettyprint">
 struct _bardetdata_s {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Camera display variables */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *rect;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *evas;
+    /* Camera display variables */
+    Evas_Object *win;
+    Evas_Object *rect;
+    Evas *evas;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int preview_width;
-&nbsp;&nbsp;&nbsp;&nbsp;int preview_height;
+    int preview_width;
+    int preview_height;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Media source handle */
-&nbsp;&nbsp;&nbsp;&nbsp;mv_source_h g_source;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Barcode detection engine handle */
-&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h g_engine_cfg;
+    /* Media source handle */
+    mv_source_h g_source;
+    /* Barcode detection engine handle */
+    mv_engine_config_h g_engine_cfg;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Camera handle */
-&nbsp;&nbsp;&nbsp;&nbsp;camera_h g_camera;
+    /* Camera handle */
+    camera_h g_camera;
 };
 typedef struct _bardetdata_s bargendata_s;
 
@@ -152,7 +152,7 @@ int error_code = 0;
 
 error_code = mv_create_source(&amp;bardetdata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 <p>The source stores the barcode to be detected and all related data. You manage the source through the source handle.</p>
@@ -168,7 +168,7 @@ int error_code = 0;
 
 error_code = mv_create_engine_config(&amp;bardetdata.g_engine_cfg);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 <p>For example, to define the detection target, use the <code>mv_engine_config_set_int_attribute()</code> function with the <code>MV_BARCODE_DETECT_ATTR_TARGET</code> attribute. The possible values are defined in the <code>mv_barcode_detect_attr_target_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">wearable</a> applications). The default value is <code>MV_BARCODE_DETECT_ATTR_TARGET_ALL</code>.</p>
@@ -183,31 +183,31 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 /* Create the camera handle */
 error_code = camera_create(CAMERA_DEVICE_CAMERA0, &amp;bardetdata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Set the camera display */
 error_code = camera_set_display(bardetdata.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GET_DISPLAY(bardetdata.win));
+                                GET_DISPLAY(bardetdata.win));
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Get the camera preview resolution */
 error_code = camera_get_preview_resolution(bardetdata.g_camera, &amp;bardetdata.width,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;bardetdata.height);
+                                           &amp;bardetdata.height);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code %d", error_code);
 
 /* Set the camera preview callback */
 error_code = camera_set_media_packet_preview_cb(bardetdata.g_camera,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_camera_media_packet_preview_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                _camera_media_packet_preview_cb,
+                                                NULL);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Start the camera preview */
 error_code = camera_start_preview(barcodeAppData.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 <p>For more information about the <code>camera_set_display()</code> function, see <a href="camera_n.htm#configuring_callback">Configuring the Camera and its Callbacks</a> in the Camera guide.</p>
@@ -229,21 +229,21 @@ if (error_code != CAMERA_ERROR_NONE)
 
 <pre class="prettyprint">
 struct _bargendata_s {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Barcode information variables */
-&nbsp;&nbsp;&nbsp;&nbsp;mv_barcode_type_e type;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_barcode_qr_ecc_e ecc;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_barcode_qr_mode_e mode;
-&nbsp;&nbsp;&nbsp;&nbsp;int version;
+    /* Barcode information variables */
+    mv_barcode_type_e type;
+    mv_barcode_qr_ecc_e ecc;
+    mv_barcode_qr_mode_e mode;
+    int version;
 
-&nbsp;&nbsp;&nbsp;&nbsp;size_t width;
-&nbsp;&nbsp;&nbsp;&nbsp;size_t height;
+    size_t width;
+    size_t height;
 
-&nbsp;&nbsp;&nbsp;&nbsp;mv_barcode_image_format_e image_format;
+    mv_barcode_image_format_e image_format;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Media source handle */
-&nbsp;&nbsp;&nbsp;&nbsp;mv_source_h g_source;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Barcode generation engine handle */
-&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h g_engine_cfg;
+    /* Media source handle */
+    mv_source_h g_source;
+    /* Barcode generation engine handle */
+    mv_engine_config_h g_engine_cfg;
 };
 typedef struct _bargendata_s bargendata_s;
 
@@ -261,7 +261,7 @@ int error_code = 0;
 
 error_code = mv_create_engine_config(&amp;bargendata.g_engine_cfg);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 <p>For example, to define whether the barcode is generated with text, use the <code>mv_engine_config_set_int_attribute()</code> function with the <code>MV_BARCODE_GENERATE_ATTR_TEXT</code> attribute. The possible values for the attribute are defined in the <code>mv_barcode_generate_attr_text_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#gaff049431f2259d00cfd0fdc7ee721858">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#gaff049431f2259d00cfd0fdc7ee721858">wearable</a> applications). The default value is <code>MV_BARCODE_GENERATE_ATTR_TEXT_INVISIBLE</code>.</p>
@@ -306,19 +306,19 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 static void
 _camera_media_packet_preview_cb(media_packet_h pkt, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;mv_rectangle_s mv_roi = {{0,0}, bardetdata.width, bardetdata.height};
+    mv_rectangle_s mv_roi = {{0,0}, bardetdata.width, bardetdata.height};
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (pkt == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (pkt == NULL)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = mv_source_fill_by_media_packet(bardetdata.g_source, pkt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error code);
+    error_code = mv_source_fill_by_media_packet(bardetdata.g_source, pkt);
+    if (error_code != MEDIA_VISION_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error code);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (pkt) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = media_packet_destroy(pkt);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pkt = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (pkt) {
+        error_code = media_packet_destroy(pkt);
+        pkt = NULL;
+    }
 </pre>
 
 </li>
@@ -328,10 +328,10 @@ _camera_media_packet_preview_cb(media_packet_h pkt, void *user_data)
 <p>In the <code>_camera_media_packet_preview_cb()</code> callback, detect barcodes in the image using the <code>mv_barcode_detect()</code> function:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = mv_barcode_detect(bardetdata.g_source, bardetdata.g_engine_cfg,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mv_roi, _barcode_detected_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    error_code = mv_barcode_detect(bardetdata.g_source, bardetdata.g_engine_cfg,
+                                   mv_roi, _barcode_detected_cb, NULL);
+    if (error_code != MEDIA_VISION_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 }
 </pre>
 
@@ -350,21 +350,21 @@ _camera_media_packet_preview_cb(media_packet_h pkt, void *user_data)
 <pre class="prettyprint">
 static void
 _barcode_detected_cb(mv_source_h source, mv_engine_config_h engine_cfg,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const mv_quadrangle_s *barcode_locations, const char *message[],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const mv_barcode_type_e *types, int number_of_barcodes,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                     const mv_quadrangle_s *barcode_locations, const char *message[],
+                     const mv_barcode_type_e *types, int number_of_barcodes,
+                     void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int i = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char type[50] = {&#39;\0&#39;};
+    int i = 0;
+    char type[50] = {'\0'};
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Clear the source for the next preview image */
-&nbsp;&nbsp;&nbsp;&nbsp;mv_source_clear(mv_source);
+    /* Clear the source for the next preview image */
+    mv_source_clear(mv_source);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (number_of_barcode &gt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;the number of barcodes: %d&quot;, number_of barcode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; number_of_barcodes; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d &gt;&gt; message: %s\n&quot;, I, messages[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (number_of_barcode &gt; 0) {
+        dlog_print(DLOG_INFO, LOG_TAG, "the number of barcodes: %d", number_of barcode);
+        for (i = 0; i &lt; number_of_barcodes; i++)
+            dlog_print(DLOG_INFO, LOG_TAG, "%d &gt;&gt; message: %s\n", I, messages[i]);
+    }
 }
 </pre>
 
@@ -377,15 +377,15 @@ _barcode_detected_cb(mv_source_h source, mv_engine_config_h engine_cfg,
 <pre class="prettyprint">
 error_code = camera_stop_preview(bardetdata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = camera_unset_media_packet_preview_cb(bardetdata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = camera_destroy(bardetdata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 <p>For more information, see <a href="camera_n.htm#release">Releasing Resources</a> in the Camera guide.</p>
@@ -399,11 +399,11 @@ if (error_code != CAMERA_ERROR_NONE)
 <pre class="prettyprint">
 error_code = mv_destroy_source(bardetdata.g_source)
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_destroy_engine_config(bardetdata.g_engine_cfg);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 </li>
@@ -444,7 +444,7 @@ int error_code = 0;
 
 error_code = mv_create_source(&amp;bargendata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 
 <p>The source handle is used to save the generated barcode and related data into the source, and to access the barcode and related data from the source.</p>
@@ -457,13 +457,13 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 
 <pre class="prettyprint">
 error_code = mv_barcode_generate_source(bargendata.g_engine_cfg,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;MediaVision-Tutorial-QRcode&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bargendata.type, bargendata.mode,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bargendata.ecc, bargendata.version,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bargendata.g_source);
+                                        "MediaVision-Tutorial-QRcode",
+                                        bargendata.type, bargendata.mode,
+                                        bargendata.ecc, bargendata.version,
+                                        bargendata.g_source);
 
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 </li>
@@ -481,20 +481,20 @@ unsigned int image_buffer_size = 0;
 
 error_code = mv_source_get_width(bargendata.g_source, &amp;image_width);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_source_get_height(bargendata.g_source, &amp;image_height);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_source_get_colorspace(bargendata.g_source, &amp;image_colorspace);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_source_get_buffer(bargendata.g_source, &amp;image_buffer_ptr,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;image_buffer_size);
+                                  &amp;image_buffer_size);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 </li>
@@ -506,7 +506,7 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <pre class="prettyprint">
 error_code = mv_destroy_source(bargendata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 </li>
@@ -542,15 +542,15 @@ bargendata.image_format = MV_BARCODE_IMAGE_FORMAT_PNG;
 
 <pre class="prettyprint">
 error_code = mv_barcode_generate_image(bargendata.g_engine_cfg,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;MediaVision-Tutorial-QRcode&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bargendata.width, bargendata.height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bargendata.type, bargendata.mode,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bargendata.ecc, bargendata.version,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;/opt/usr/media/mv_barcode_qrcode.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bargendata.image_format);
+                                       "MediaVision-Tutorial-QRcode",
+                                       bargendata.width, bargendata.height,
+                                       bargendata.type, bargendata.mode,
+                                       bargendata.ecc, bargendata.version,
+                                       "/opt/usr/media/mv_barcode_qrcode.png",
+                                       bargendata.image_format);
 
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 </li>
@@ -566,7 +566,7 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <pre class="prettyprint">
 error_code = mv_destroy_engine_config(bargendata.g_engine_cfg);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 </li>
@@ -658,11 +658,11 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
        <tr>
         <td rowspan="4">Encoding mode</td>
         <td>Numeric</td>
-        <td>Numeric digits (&#39;0&#39;, &#39;1&#39;, ..., &#39;9&#39;)</td>
+        <td>Numeric digits ('0', '1', ..., '9')</td>
     </tr>
        <tr>
         <td>Alphanumeric</td>
-     <td>Alphanumeric characters: numeric (0, 1, ..., 9), characters (A, B, ..., Z), and punctuation (&#39; &#39;, $, %, *, +, -, &#39;.&#39;, /, &#39;:&#39;)</td>
+     <td>Alphanumeric characters: numeric (0, 1, ..., 9), characters (A, B, ..., Z), and punctuation (' ', $, %, *, +, -, '.', /, ':')</td>
     </tr>
        <tr>
      <td>Byte 8-bit</td>
diff --git a/org.tizen.guides/html/native/media/image_edit_n.htm b/org.tizen.guides/html/native/media/image_edit_n.htm
index b48bbef..8b3c88d 100644 (file)
--- a/org.tizen.guides/html/native/media/image_edit_n.htm
+++ b/org.tizen.guides/html/native/media/image_edit_n.htm
@@ -55,7 +55,7 @@
 <p>Tizen offers various image processing features.</p>
 
   <p>The main features of the Image Util API include:</p>
- 
+
  <ul>
  <li>Conversion
  <p>You can <a href="#colorspace">change the colorspace format</a> among the <a href="#color_format">supported formats</a>.</p></li>
@@ -69,9 +69,9 @@
 <p>You can <a href="#decode">decode images</a> and <a href="#encode">encode them</a> with the following formats:</p>
 <ul><li>Bitmap formats:
 <ul><li>YUV420, YUV422, RGB888, RGBA8888, BGRA8888, ARGB8888</li></ul></li>
-<li>Input image formats for decoding: 
+<li>Input image formats for decoding:
 <ul><li>Only JPEG is supported when using image util</li></ul></li>
-<li>Output image formats for encoding: 
+<li>Output image formats for encoding:
 <ul><li>JPEG</li></ul>
 <p>Pay attention to how the <a href="#quality">image quality depends on the size</a> and compression ratio.</p></li></ul>
 </li>
@@ -92,8 +92,8 @@
 <li>
 <p>Declare the required variables:</p>
 <pre class="prettyprint">
-#define SAMPLE_FILENAME &quot;sample_image.jpg&quot;
-#define OUTPUT_ROTATED_JPEG &quot;rotated_image.jpg&quot;
+#define SAMPLE_FILENAME "sample_image.jpg"
+#define OUTPUT_ROTATED_JPEG "rotated_image.jpg"
 
 const image_util_colorspace_e colorspace = IMAGE_UTIL_COLORSPACE_RGB888;
 unsigned char *img_rotate_target = NULL;
@@ -108,7 +108,7 @@ unsigned int size_decode = 0;
 <p>To find out which JPEG color spaces are supported on the device, use the <code>image_util_foreach_supported_jpeg_colorspace()</code> function:</p>
 <pre class="prettyprint">
 int image_util_foreach_supported_jpeg_colorspace(image_util_supported_jpeg_colorspace_cb
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback, void * user_data);
+                                                 callback, void * user_data);
 </pre>
 <p>The possible color spaces are defined in the <code>image_util_colorspace_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html#gad3ea89a72a617912df9ddbd50be1b991">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html#gad3ea89a72a617912df9ddbd50be1b991">wearable</a> applications).</p>
 <p>For more information about the YUV color space, see <a href="http://www.fourcc.org/yuv.php" target="blank">http://www.fourcc.org/yuv.php</a>.</p>
@@ -117,7 +117,7 @@ int image_util_foreach_supported_jpeg_colorspace(image_util_supported_jpeg_color
 <p>To support the <code>image_util_transform_run()</code> function, which is used for all image transformations, set the source image and create a handle for it (to be used as the second parameter):</p>
 <pre class="prettyprint">
 ret = image_util_decode_jpeg(SAMPLE_FILENAME, colorspace, &amp;img_source,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;width, &amp;height, &amp;size_decode);
+                             &amp;width, &amp;height, &amp;size_decode);
 
 ret = media_format_create(&amp;fmt);
 ret = media_format_set_video_mime(fmt, colorspace);
@@ -177,8 +177,8 @@ ret = image_util_transform_set_colorspace(handle, colorspace);
 
 <pre class="prettyprint">
 ret = image_util_transform_run(handle, src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(image_util_transform_completed_cb)completed_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data);
+                               (image_util_transform_completed_cb)completed_callback,
+                               user_data);
 </pre>
 
   <div class="note">
@@ -251,8 +251,8 @@ ret = image_util_transform_set_resolution(handle, width, height);
 
 <pre class="prettyprint">
 ret = image_util_transform_run(handle, src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(image_util_transform_completed_cb)completed_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data);
+                               (image_util_transform_completed_cb)completed_callback,
+                               user_data);
 </pre>
 
 
@@ -328,8 +328,8 @@ ret = image_util_transform_set_rotation(handle, rotation);
 
 <pre class="prettyprint">
 ret = image_util_transform_run(handle, src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(image_util_transform_completed_cb)completed_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data);
+                               (image_util_transform_completed_cb)completed_callback,
+                               user_data);
 </pre>
 
   <div class="note">
@@ -402,8 +402,8 @@ ret = image_util_transform_set_crop_area(handle, start_x, start_y, end_x, end_y)
 
 <pre class="prettyprint">
 ret = image_util_transform_run(handle, src,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(image_util_transform_completed_cb)completed_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data);
+                               (image_util_transform_completed_cb)completed_callback,
+                               user_data);
 </pre>
 
 
@@ -445,7 +445,7 @@ ret = image_util_transform_destroy(handle);
 
 <pre class="prettyprint">
 ret = image_util_decode_jpeg(SAMPLE_FILENAME, colorspace, &amp;img_source,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;width, &amp;height, &amp;size_decode);
+                             &amp;width, &amp;height, &amp;size_decode);
 </pre>
 
 </li>
@@ -456,7 +456,7 @@ ret = image_util_decode_jpeg(SAMPLE_FILENAME, colorspace, &amp;img_source,
 
 <pre class="prettyprint">
 ret = image_util_decode_jpeg_from_memory(jpeg_buffer, jpeg_size, colorspace,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_buffer, width, height, size);
+                                         image_buffer, width, height, size);
 </pre>
 
 </li>
@@ -473,7 +473,7 @@ ret = image_util_decode_jpeg_from_memory(jpeg_buffer, jpeg_size, colorspace,
 
 <pre class="prettyprint">
 ret = image_util_encode_jpeg(img_flip_target, dest_width, dest_height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorspace, 100, OUTPUT_ROTATED_JPEG);
+                             colorspace, 100, OUTPUT_ROTATED_JPEG);
 </pre>
 
 </li>
@@ -484,7 +484,7 @@ ret = image_util_encode_jpeg(img_flip_target, dest_width, dest_height,
 
 <pre class="prettyprint">
 ret = image_util_encode_jpeg_to_memory(img_flip_target, dest_width, dest_height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorspace, 100, jpeg_buffer, jpeg_size);
+                                       colorspace, 100, jpeg_buffer, jpeg_size);
 </pre>
 
 </li>
@@ -495,146 +495,146 @@ ret = image_util_encode_jpeg_to_memory(img_flip_target, dest_width, dest_height,
 
 <p>The following tables define the supported colorspace formats.</p>
    <p align="center" class="Table"><strong>Table: RGB pixel formats</strong></p>
-   <table> 
-   <tbody> 
-    <tr> 
-               <th>Label</th> 
-               <th>FOURCC in hex</th> 
-               <th>Bits per pixel</th> 
-               <th>Description</th>     
-    </tr> 
-    <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#BI_RGB" target="blank">RGB</a></td> 
-     <td>0x32424752</td> 
-        <td>1, 4, 8, 16, 24, 32</td> 
-        <td>Alias for BI_RGB</td> 
-    </tr> 
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">RGBA</a></td> 
-     <td>0x41424752</td> 
-        <td>16, 32</td> 
-        <td>Raw RGB with alpha. Sample precision and packing is arbitrary and determined using bit masks for each component, as for BI_BITFIELDS.</td> 
+   <table>
+   <tbody>
+    <tr>
+               <th>Label</th>
+               <th>FOURCC in hex</th>
+               <th>Bits per pixel</th>
+               <th>Description</th>
+    </tr>
+    <tr>
+     <td><a href="http://www.fourcc.org/rgb.php#BI_RGB" target="blank">RGB</a></td>
+     <td>0x32424752</td>
+        <td>1, 4, 8, 16, 24, 32</td>
+        <td>Alias for BI_RGB</td>
+    </tr>
+     <tr>
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">RGBA</a></td>
+     <td>0x41424752</td>
+        <td>16, 32</td>
+        <td>Raw RGB with alpha. Sample precision and packing is arbitrary and determined using bit masks for each component, as for BI_BITFIELDS.</td>
+    </tr>
+   </tbody>
+  </table>
+
+ <p align="center" class="Table"><strong>Table: Packed YUV formats</strong></p>
+ <table>
+   <tbody>
+    <tr>
+               <th>Label</th>
+               <th>FOURCC in hex</th>
+               <th>Bits per pixel</th>
+               <th>Description</th>
     </tr>
-   </tbody> 
-  </table> 
- 
- <p align="center" class="Table"><strong>Table: Packed YUV formats</strong></p> 
- <table> 
-   <tbody> 
-    <tr> 
-               <th>Label</th> 
-               <th>FOURCC in hex</th> 
-               <th>Bits per pixel</th> 
-               <th>Description</th>     
-    </tr> 
-    <tr> 
-     <td><a href="http://www.fourcc.org/yuv.php#UYVY" target="blank">UYVY</a></td> 
-     <td>0x59565955</td> 
-        <td>16</td> 
-        <td>YUV 4:2:2 (Y sample at every pixel, U and V sampled at every second pixel horizontally on each line). A macropixel contains 2 pixels in 1 u_int32.</td> 
-    </tr> 
-     <tr> 
-     <td><a href="http://www.fourcc.org/yuv.php#YUYV" target="blank">YUYV</a></td> 
-     <td>0x56595559</td> 
-        <td>16</td> 
-        <td>Duplicate of YUY2.</td> 
+    <tr>
+     <td><a href="http://www.fourcc.org/yuv.php#UYVY" target="blank">UYVY</a></td>
+     <td>0x59565955</td>
+        <td>16</td>
+        <td>YUV 4:2:2 (Y sample at every pixel, U and V sampled at every second pixel horizontally on each line). A macropixel contains 2 pixels in 1 u_int32.</td>
     </tr>
-   </tbody> 
-  </table>                     
+     <tr>
+     <td><a href="http://www.fourcc.org/yuv.php#YUYV" target="blank">YUYV</a></td>
+     <td>0x56595559</td>
+        <td>16</td>
+        <td>Duplicate of YUY2.</td>
+    </tr>
+   </tbody>
+  </table>
 
     <p align="center" class="Table"><strong>Table: Planar YUV formats</strong></p>
        <table>
-   <tbody> 
-    <tr> 
-               <th>Label</th> 
-               <th>FOURCC in hex</th> 
-               <th>Bits per pixel</th> 
-               <th>Description</th>     
-    </tr> 
-    <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#BI_RGB" target="blank">YV16</a></td> 
-     <td>0x36315659</td> 
-        <td>16</td> 
-        <td>8-bit Y plane followed by 8-bit 2x1 subsampled V and U planes.</td> 
-    </tr> 
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">YV12</a></td> 
-     <td>0x32315659</td> 
-        <td>12</td> 
-        <td>8-bit Y plane followed by 8-bit 2x2 subsampled V and U planes.</td> 
+   <tbody>
+    <tr>
+               <th>Label</th>
+               <th>FOURCC in hex</th>
+               <th>Bits per pixel</th>
+               <th>Description</th>
+    </tr>
+    <tr>
+     <td><a href="http://www.fourcc.org/rgb.php#BI_RGB" target="blank">YV16</a></td>
+     <td>0x36315659</td>
+        <td>16</td>
+        <td>8-bit Y plane followed by 8-bit 2x1 subsampled V and U planes.</td>
+    </tr>
+     <tr>
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">YV12</a></td>
+     <td>0x32315659</td>
+        <td>12</td>
+        <td>8-bit Y plane followed by 8-bit 2x2 subsampled V and U planes.</td>
     </tr>
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">I420</a></td> 
-     <td>0x30323449</td> 
-        <td>12</td> 
-        <td>8-bit Y plane followed by 8-bit 2x2 subsampled U and V planes.</td> 
+     <tr>
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">I420</a></td>
+     <td>0x30323449</td>
+        <td>12</td>
+        <td>8-bit Y plane followed by 8-bit 2x2 subsampled U and V planes.</td>
     </tr>
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">NV12</a></td> 
-     <td>0x3231564E</td> 
-        <td>12</td> 
-        <td>8-bit Y plane followed by an interleaved U/V plane with 2x2 subsampling.</td> 
+     <tr>
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">NV12</a></td>
+     <td>0x3231564E</td>
+        <td>12</td>
+        <td>8-bit Y plane followed by an interleaved U/V plane with 2x2 subsampling.</td>
     </tr>
-     <tr> 
-     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">NV21</a></td> 
-     <td>0x3132564E</td> 
-        <td>12</td> 
-        <td>As NV12 with U and V reversed in the interleaved plane.</td> 
-    </tr>      
-   </tbody> 
-  </table> 
+     <tr>
+     <td><a href="http://www.fourcc.org/rgb.php#RGBA" target="blank">NV21</a></td>
+     <td>0x3132564E</td>
+        <td>12</td>
+        <td>As NV12 with U and V reversed in the interleaved plane.</td>
+    </tr>
+   </tbody>
+  </table>
 
 <h2 id="quality">Quality and Size Comparison</h2>
 
 <p>The following table shows the effect on the image quality and file sizes when using different compression ratios.</p>
 
-  <p align="center" class="Table"><strong>Table: Quality and size comparison</strong></p> 
- <table> 
-   <tbody> 
-    <tr> 
-               <th>Image</th> 
-               <th>Quality</th> 
-               <th>Size (bytes)</th> 
+  <p align="center" class="Table"><strong>Table: Quality and size comparison</strong></p>
+ <table>
+   <tbody>
+    <tr>
+               <th>Image</th>
+               <th>Quality</th>
+               <th>Size (bytes)</th>
                <th>Compression ratio</th>
-               <th>Description</th>     
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_highest.png" alt="Highest quality image" /></td> 
-     <td>Highest quality (Q = 100)</td> 
-        <td>83,261</td> 
-        <td>2.6:1</td> 
+               <th>Description</th>
+    </tr>
+    <tr>
+     <td><img src="../../images/quality_highest.png" alt="Highest quality image" /></td>
+     <td>Highest quality (Q = 100)</td>
+        <td>83,261</td>
+        <td>2.6:1</td>
          <td>Extremely minor artifacts</td>
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_high.png" alt="High quality image" /></td> 
-     <td>High quality (Q = 50)</td> 
-        <td>15,138</td> 
-        <td>15:1</td> 
+    </tr>
+    <tr>
+     <td><img src="../../images/quality_high.png" alt="High quality image" /></td>
+     <td>High quality (Q = 50)</td>
+        <td>15,138</td>
+        <td>15:1</td>
          <td>Initial signs of subimage artifacts</td>
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_medium.png" alt="Medium quality image" /></td> 
-     <td>Medium quality (Q = 25)</td> 
-        <td>9,553</td> 
-        <td>23:1</td> 
+    </tr>
+    <tr>
+     <td><img src="../../images/quality_medium.png" alt="Medium quality image" /></td>
+     <td>Medium quality (Q = 25)</td>
+        <td>9,553</td>
+        <td>23:1</td>
          <td>Stronger artifacts; loss of high-frequency information</td>
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_low.png" alt="Low quality image" /></td> 
-     <td>Low quality (Q = 10)</td> 
-        <td>4,787</td> 
-        <td>46:1</td> 
-         <td>Severe high frequency loss; artifacts on subimage boundaries (&quot;macroblocking&quot;) are obvious</td>
-    </tr> 
-    <tr> 
-     <td><img src="../../images/quality_lowest.png" alt="Lowest quality image" /></td> 
-     <td>Lowest quality</td> 
-        <td></td> 
-        <td></td> 
+    </tr>
+    <tr>
+     <td><img src="../../images/quality_low.png" alt="Low quality image" /></td>
+     <td>Low quality (Q = 10)</td>
+        <td>4,787</td>
+        <td>46:1</td>
+         <td>Severe high frequency loss; artifacts on subimage boundaries ("macroblocking") are obvious</td>
+    </tr>
+    <tr>
+     <td><img src="../../images/quality_lowest.png" alt="Lowest quality image" /></td>
+     <td>Lowest quality</td>
+        <td></td>
+        <td></td>
          <td></td>
-    </tr>      
-   </tbody> 
-  </table>     
+    </tr>
+   </tbody>
+  </table>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/native/media/image_recognition_n.htm b/org.tizen.guides/html/native/media/image_recognition_n.htm
index f53e1e9..a054c72 100644 (file)
--- a/org.tizen.guides/html/native/media/image_recognition_n.htm
+++ b/org.tizen.guides/html/native/media/image_recognition_n.htm
@@ -79,9 +79,9 @@
 <li>For image recognition, use the following <code>imagedata_s</code> structure:
 <pre class="prettyprint">
 struct _imagedata_s {
-&nbsp;&nbsp;&nbsp;&nbsp;mv_source_h g_source;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h g_engine_config;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_image_object h g_image_object;
+    mv_source_h g_source;
+    mv_engine_config_h g_engine_config;
+    mv_image_object h g_image_object;
 };
 typedef struct _imagedata_s imagedata_s;
 static imagedata_s imagedata;
@@ -90,21 +90,21 @@ static imagedata_s imagedata;
 <li>For image tracking, use the following <code>imagedata_s</code> structure:
 <pre class="prettyprint">
 struct _imagedata_s {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Variable for camera display */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *rect;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *evas;
+    /* Variable for camera display */
+    Evas_Object *win;
+    Evas_Object *rect;
+    Evas *evas;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int preview_width;
-&nbsp;&nbsp;&nbsp;&nbsp;int preview_height;
+    int preview_width;
+    int preview_height;
 
-&nbsp;&nbsp;&nbsp;&nbsp;camera_h g_camera;
+    camera_h g_camera;
 
-&nbsp;&nbsp;&nbsp;&nbsp;mv_source_h g_source;
-&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h g_engine_config;
+    mv_source_h g_source;
+    mv_engine_config_h g_engine_config;
 
-&nbsp;&nbsp;&nbsp;&nbsp;mv_image_object_h g_image_object
-&nbsp;&nbsp;&nbsp;&nbsp;mv_image_tracking_model_h g_image_track_model;
+    mv_image_object_h g_image_object
+    mv_image_tracking_model_h g_image_track_model;
 };
 typedef struct _imagedata_s imagedata_s;
 static imagedata_s imagedata;
@@ -126,11 +126,11 @@ int error_code = 0;
 
 error_code = mv_create_source(&amp;imagedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_create_engine_config(&amp;imagedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>Decode the image file and fill the <code>g_source</code> handle with the decoded raw data.
@@ -143,71 +143,71 @@ unsigned int bufferSize = 0;
 int width = 0;
 int height = 0;
 
-error_code = image_util_decode_jpeg(&quot;/mydir/sample.jpg&quot;, IMAGE_UTIL_COLORSPACE_RGB888,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;dataBuffer, &amp;width, &amp;height, &amp;bufferSize);
+error_code = image_util_decode_jpeg("/mydir/sample.jpg", IMAGE_UTIL_COLORSPACE_RGB888,
+                                    &amp;dataBuffer, &amp;width, &amp;height, &amp;bufferSize);
 if (error_code != IMAGE_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Fill the dataBuffer to g_source */
 error_code = mv_source_fill_by_buffer(imagedata.g_source, dataBuffer, bufferSize,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width, height, MEDIA_VISION_COLORSPACE_RGB888);
+                                      width, height, MEDIA_VISION_COLORSPACE_RGB888);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 free(dataBuffer);
 dataBuffer = NULL;
 </pre>
 </li>
 <li>To recognize the <code>sample.jpg</code> image from others, create a <code>g_image_object</code> media vision image object handle and set a label.
-<p>In the following example, the image object label is set to &#39;1&#39;.</p>
+<p>In the following example, the image object label is set to '1'.</p>
 
 <pre class="prettyprint">
 error_code = mv_image_object_create(&amp;imagedata.g_image_object);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_image_object_set_label(&amp;imagedata.g_image_object, 1);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>Use the <code>mv_image_object_fill()</code> function to extract the <code>sample.jpg</code> features and keep them in the <code>g_image_object</code> image object handle.
 <p>In the following example, the <code>NULL</code> parameter is given since the object to be recognized is the whole of the input image file. Give a correct ROI value, if the image object to be recognized is only a part of the input image file.</p>
 <pre class="prettyprint">
 error_code = mv_image_object_fill(imagedata.g_image_object, imagedata.g_engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagedata.g_source, NULL);
+                                  imagedata.g_source, NULL);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>Use the <code>mv_image_recognize()</code> function to recognize the image object.
 <p>The following example assumes that there is a <code>what_isThis.jpg</code> image file in the <code>&lt;OwnDataPath&gt;</code> folder, including the image object.</p>
 
 <pre class="prettyprint">
-error_code = image_util_decode_jpeg(&quot;/mydir/what_isThis.jpg&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IMAGE_UTIL_COLORSPACE_RGB888,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;dataBuffer, &amp;width, &amp;height, &amp;bufferSize);
+error_code = image_util_decode_jpeg("/mydir/what_isThis.jpg",
+                                    IMAGE_UTIL_COLORSPACE_RGB888,
+                                    &amp;dataBuffer, &amp;width, &amp;height, &amp;bufferSize);
 if (error_code != IMAGE_UTIL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_source_clear(imagedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Fill the dataBuffer to g_source */
 error_code = mv_source_fill_by_buffer(imagedata.g_source, dataBuffer, bufferSize,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width, height, MEDIA_VISION_COLORSPACE_RGB888);
+                                      width, height, MEDIA_VISION_COLORSPACE_RGB888);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 free(dataBuffer);
 dataBuffer = NULL;
 
 error_code = mv_image_recognize(imagedata.g_source, &amp;imagedata.g_image_object, 1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagedata.g_engine_config, _on_image_recognized_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                imagedata.g_engine_config, _on_image_recognized_cb,
+                                NULL);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>The <code>mv_image_recognize()</code> function invokes the <code>_on_image_recognized_cb()</code> callback.
@@ -215,28 +215,28 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <pre class="prettyprint">
 static void
 _on_image_recognized_cb(mv_source_h source, mv_engine_config_h engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const mv_image_object_h *image_objects,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mv_quadrangle_s **locations,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int number_of_objects, void *user_data)
+                        const mv_image_object_h *image_objects,
+                        mv_quadrangle_s **locations,
+                        unsigned int number_of_objects, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int object_num = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;for (object_num = 0; object_num &lt; number_of_object; ++object_num) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (locations[object_num]) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int recognized_label = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mv_image_object_get_label(image_objects[object_num], &amp;recognized_label);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;image label [%d] on location:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(%d,%d) -&gt; (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d)\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recognized_label, locations[object_num]-&gt;points[0].x,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locations[object_num]-&gt;points[0].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locations[object_num]-&gt;points[1].x,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locations[object_num]-&gt;points[1].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locations[object_num]-&gt;points[2].x,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locations[object_num]-&gt;points[2].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locations[object_num]-&gt;points[3].x,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locations[object_num]-&gt;points[3].y);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int object_num = 0;
+    for (object_num = 0; object_num &lt; number_of_object; ++object_num) {
+        if (locations[object_num]) {
+            int recognized_label = 0;
+            mv_image_object_get_label(image_objects[object_num], &amp;recognized_label);
+            dlog_print(DLOG_INFO, LOG_TAG,
+                       "image label [%d] on location:
+                        (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d)\n",
+                       recognized_label, locations[object_num]-&gt;points[0].x,
+                       locations[object_num]-&gt;points[0].y,
+                       locations[object_num]-&gt;points[1].x,
+                       locations[object_num]-&gt;points[1].y,
+                       locations[object_num]-&gt;points[2].x,
+                       locations[object_num]-&gt;points[2].y,
+                       locations[object_num]-&gt;points[3].x,
+                       locations[object_num]-&gt;points[3].y);
+        }
+    }
 }
 </pre>
 </li>
@@ -245,15 +245,15 @@ _on_image_recognized_cb(mv_source_h source, mv_engine_config_h engine_config,
 <pre class="prettyprint">
 error_code = mv_destroy_source(imagedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_destroy_engine_config(imagedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_image_object_destroy(imagedata.g_image_object);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 </ol>
@@ -272,32 +272,32 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 int error_code = 0;
 error_code = camera_create(CAMERA_DEVICE_CAMERA0, &amp;imagedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Set the camera display */
 error_code = camera_set_display(imagedata.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GET_DISPLAY(imagedata.win);
+                                GET_DISPLAY(imagedata.win);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Get the camera preview resolution */
 error_code = camera_get_preview_resolution(imagedata.g_camera,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;imagedata.preview_width,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;imagedata.preview_height);
+                                           &amp;imagedata.preview_width,
+                                           &amp;imagedata.preview_height);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Set the camera preview callback */
 error_code = camera_set_media_packet_preview_cb(imagedata.g_camera,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_camera_media_packet_preview_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                _camera_media_packet_preview_cb,
+                                                NULL);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Start the camera preview */
 error_code = camera_start_preview(imagedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>Create the source and engine configuration handles:
@@ -305,34 +305,34 @@ if (error_code != CAMERA_ERROR_NONE)
 <pre class="prettyprint">
 error_code = mv_create_source(&amp;imagedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_create_engine_config(&amp;imagedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>To track an image, create a <code>g_image_object</code> media vision image object handle and set a label.
-<p>In the following example, the image to be tracked is <code>sample.jpg</code> and the image object label is set to &#39;1&#39;.</p>
+<p>In the following example, the image to be tracked is <code>sample.jpg</code> and the image object label is set to '1'.</p>
 
 <pre class="prettyprint">
 error_code = mv_image_object_create(&amp;imagedata.g_image_object);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_image_object_set_label(&amp;imagedata.g_image_object, 1);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>Use the <code>mv_image_object_fill()</code> function to extract the <code>sample.jpg</code> features and keep them in the <code>g_image_object</code> image object handle.
 <p>In the following example, the <code>NULL</code> parameter is given since the object to be tracked is the whole of the input image file. Give a correct ROI value, if the image object to be tracked is only a part of the input image file.</p>
 <pre class="prettyprint">
 error_code = mv_image_object_fill(imagedata.g_image_object,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagedata.g_engine_config,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagedata.g_source, NULL);
+                                  imagedata.g_engine_config,
+                                  imagedata.g_source, NULL);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>Create a <code>g_image_track_model</code> media vision image tracking model handle and set the target image object to be tracked:
@@ -340,12 +340,12 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <pre class="prettyprint">
 error_code = mv_image_tracking_model_create(&amp;imagedata.g_image_track_model);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_image_tracking_model_set_target(imagedata.g_image_object,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagedata.g_image_track_model);
+                                                imagedata.g_image_track_model);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>Define the camera preview callback.
@@ -355,17 +355,17 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 static void
 _camera_media_packet_preview_cb(media_packet_h pkt, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (pkt == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (pkt == NULL)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = mv_source_fill_by_media_packet(imagedata.g_source, pkt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error code);
+    error_code = mv_source_fill_by_media_packet(imagedata.g_source, pkt);
+    if (error_code != MEDIA_VISION_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error code);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (pkt) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = media_packet_destroy(pkt);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pkt = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (pkt) {
+        error_code = media_packet_destroy(pkt);
+        pkt = NULL;
+    }
 }
 </pre>
 </li>
@@ -377,9 +377,9 @@ _camera_media_packet_preview_cb(media_packet_h pkt, void *user_data)
 
 <pre class="prettyprint">
 error_code = mv_image_track(imagedata.g_source, imagedata.g_image_track_model,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagedata.g_engine_config, _on_image_tracked_cb, NULL);
+                            imagedata.g_engine_config, _on_image_tracked_cb, NULL);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code= %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
 </pre>
 </li>
 <li>The <code>mv_image_track()</code> function invokes the <code>_on_image_tracked_cb()</code> callback.
@@ -387,17 +387,17 @@ if (error_code != MEDIA_VISION_ERROR_NONE)
 <pre class="prettyprint">
 static void
 _on_image_tracked_cb(mv_source_h source, mv_image_object_h image_object,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mv_engine_config_h engine_config, mv_quadrangle_s *location,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                     mv_engine_config_h engine_config, mv_quadrangle_s *location,
+                     void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (location) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;location: (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d)\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location-&gt;points[0].x, location-&gt;points[0].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location-&gt;points[1].x, location-&gt;points[1].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location-&gt;points[2].x, location-&gt;points[2].y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location-&gt;points[3].x, location-&gt;points[3].y);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (location) {
+        dlog_print(DLOG_INFO, LOG_TAG,
+                   "location: (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d) -&gt; (%d,%d)\n",
+                   location-&gt;points[0].x, location-&gt;points[0].y,
+                   location-&gt;points[1].x, location-&gt;points[1].y,
+                   location-&gt;points[2].x, location-&gt;points[2].y,
+                   location-&gt;points[3].x, location-&gt;points[3].y);
+    }
 }
 </pre>
 </li></ol></li>
@@ -408,15 +408,15 @@ _on_image_tracked_cb(mv_source_h source, mv_image_object_h image_object,
 <pre class="prettyprint">
 error_code = camera_stop_preview(imagedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = camera_unset_media_packet_preview_cb(imagedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = camera_destroy(imagedata.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 
 <p>For more information, see <a href="camera_n.htm#release">Releasing Resources</a> in the Camera guide.</p>
@@ -427,19 +427,19 @@ if (error_code != CAMERA_ERROR_NONE)
 <pre class="prettyprint">
 error_code = mv_destroy_source(imagedata.g_source);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_destroy_engine_config(imagedata.g_engine_config);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_image_object_destroy(imagedata.g_image_object);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 error_code = mv_image_tracking_model_destroy(imagedata.g_image_track_model);
 if (error_code != MEDIA_VISION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 </ol>
diff --git a/org.tizen.guides/html/native/media/media_content_metadata_n.htm b/org.tizen.guides/html/native/media/media_content_metadata_n.htm
index 2edbf54..1ca4f62 100644 (file)
--- a/org.tizen.guides/html/native/media/media_content_metadata_n.htm
+++ b/org.tizen.guides/html/native/media/media_content_metadata_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Media Content and Metadata</title>  
+       <title>Media Content and Metadata</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Media Content and Metadata</h1>
diff --git a/org.tizen.guides/html/native/media/media_content_n.htm b/org.tizen.guides/html/native/media/media_content_n.htm
index 0e03a7d..308cacf 100644 (file)
--- a/org.tizen.guides/html/native/media/media_content_n.htm
+++ b/org.tizen.guides/html/native/media/media_content_n.htm
@@ -62,20 +62,20 @@
                                        <li><a href="#folder_content">Retrieving Folder Content</a></li>
                                </ul>
                        </li>
-                       <li>Media information 
+                       <li>Media information
                                <ul class="toc">
                                        <li><a href="#info">Retrieving Media Information</a></li>
                                        <li><a href="#insert">Inserting Media in the Database</a></li>
                                        <li><a href="#scan">Inserting a Media Folder in the Database</a></li>
                                </ul>
                        </li>
-                       <li>Playlist 
+                       <li>Playlist
                                <ul class="toc">
                                        <li><a href="#create_playlist">Creating Playlists</a></li>
                                        <li><a href="#find_playlist">Finding Playlists</a></li>
                                        <li><a href="#read_playlist">Reading Playlist Information</a></li>
                                        <li><a href="#delete_playlist">Deleting Playlists</a></li>
-                               </ul>  
+                               </ul>
                        </li>
                        <li>Tag
                                <ul class="toc">
@@ -91,13 +91,13 @@
             </li>
                        <li>Media item groups
                                <ul class="toc">
-                                       <li><a href="#find_groups">Finding Media Item Groups</a></li>   
+                                       <li><a href="#find_groups">Finding Media Item Groups</a></li>
                                        <li><a href="#read_group">Reading Media Item Group Information</a></li>
                                </ul>
                        </li>
                        <li><a href="#media_info">Media Information</a></li>
 
-        </ul>          
+        </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API for Mobile Native</a></li>
@@ -109,12 +109,12 @@
 <div id="container"><div id="contents"><div class="content">
 
   <h1>Media Content</h1>
-   
+
    <p>You can get information about media content from the metadata in the content, such as an ID3 or MP4 tag. You can obtain or update data from the media database, which stores metadata for the media files (such as images, videos, and audio) in the device.</p>
-  
-  <p align="center"><strong>Figure: Media content of the device</strong></p> 
-  <p align="center"><img alt="Media content of the device" src="../../images/content.png" /></p>   
- 
+
+  <p align="center"><strong>Figure: Media content of the device</strong></p>
+  <p align="center"><img alt="Media content of the device" src="../../images/content.png" /></p>
+
 <p>The media files are updated using an application (by calling the Content API) or a media scanner. When updating the files in the media scanner, the following limitations apply:</p>
 <ul><li>SD card insertion and removal: Media files are updated only in the SD card.</li>
 <li>Rebooting the device: Media files are updated in the internal memory and SD card in the device.</li></ul>
@@ -139,7 +139,7 @@
 <li>Filter
 <p>You can <a href="#filter">create a filter</a> to find specific media items.</p></li>
 <li>Media playlists
-<p>You can <a href="#create_playlist">add</a> or <a href="#delete_playlist">delete</a> a playlist of the video and audio files, and add media files to a created playlist. In addition, you can also <a href="#find_playlist">search for playlists</a> and <a href="#read_playlist">read playlist information</a>.</p></li> 
+<p>You can <a href="#create_playlist">add</a> or <a href="#delete_playlist">delete</a> a playlist of the video and audio files, and add media files to a created playlist. In addition, you can also <a href="#find_playlist">search for playlists</a> and <a href="#read_playlist">read playlist information</a>.</p></li>
 <li>Media tags
 <p>You can access the tag information of the media files in the database. You can, for example, <a href="#tag_add">add media tags</a>, <a href="#tag_list">retrieve tag information</a>, and <a href="#tag_delete">delete tags</a>.</p></li>
 <li>Media albums
@@ -150,7 +150,7 @@
 <p>You can <a href="#storage_list">retrieve information about the media storages</a>.</p></li>
 </ul>
 
- 
+
 <h2 id="prerequisites">Prerequisites</h2>
 
 <p>To enable your application to use the media content functionality:</p>
@@ -159,10 +159,10 @@
 <p>To use the Media Content API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To insert content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/content.write&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To access a storage to insert content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/mediastorage&lt;/privilege&gt;
+   &lt;!--To insert content--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/content.write&lt;/privilege&gt;
+   &lt;!--To access a storage to insert content--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/mediastorage&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -179,9 +179,9 @@ int ret = MEDIA_CONTENT_ERROR_NONE;
 
 ret = media_content_connect();
 if (ret == MEDIA_CONTENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;connection is success&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "connection is success");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;connection failed&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "connection failed");
 
 return ret;
 </pre></li>
@@ -203,17 +203,17 @@ media_content_disconnect();
 bool
 gallery_folder_list_cb(media_folder_h folder, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_folder_h new_folder = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;media_folder_clone(&amp;new_folder, folder);
+    media_folder_h new_folder = NULL;
+    media_folder_clone(&amp;new_folder, folder);
 
-&nbsp;&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data; /* Include glib.h for this value */
+    GList **list = (GList**)user_data; /* Include glib.h for this value */
 
-&nbsp;&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_folder);
+    *list = g_list_append(*list, new_folder);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li>
-<li>To find the folders, call the <code>media_folder_foreach_folder_from_db()</code> function with the defined callback. After the callback has created the folder list, you can access the folder details with various <code>media_folder_get_XXX()</code> functions. 
+<li>To find the folders, call the <code>media_folder_foreach_folder_from_db()</code> function with the defined callback. After the callback has created the folder list, you can access the folder details with various <code>media_folder_get_XXX()</code> functions.
 <pre class="prettyprint">
 int i;
 int count;
@@ -222,41 +222,41 @@ GList *folder_list = NULL; /* Include glib.h for this value */
 media_folder_h folder_handle = NULL;
 
 ret = media_folder_foreach_folder_from_db(filter, gallery_folder_list_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;folder_list);
+                                          &amp;folder_list);
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;media_folder_foreach_folder_from_db failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "media_folder_foreach_folder_from_db failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_folder_foreach_folder_from_db success!!&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;char *folder_id = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *folder_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *folder_path = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(folder_list); i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;folder_handle = (media_folder_h)g_list_nth_data(folder_list, i);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_folder_id(folder_handle, &amp;folder_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_name(folder_handle, &amp;folder_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_path(folder_handle, &amp;folder_path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_media_count_from_db(folder_id, filter, &amp;count);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Release allocated strings */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(folder_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(folder_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(folder_path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;media_folder_get_media_count_from_db failed: %d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ret;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media count [%d]: %d&quot;, i, count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    dlog_print(DLOG_DEBUG, LOG_TAG, "media_folder_foreach_folder_from_db success!!");
+
+    char *folder_id = NULL;
+    char *folder_name = NULL;
+    char *folder_path = NULL;
+
+    for (i = 0; i &lt; g_list_length(folder_list); i++) {
+        folder_handle = (media_folder_h)g_list_nth_data(folder_list, i);
+
+        ret = media_folder_get_folder_id(folder_handle, &amp;folder_id);
+        ret = media_folder_get_name(folder_handle, &amp;folder_name);
+        ret = media_folder_get_path(folder_handle, &amp;folder_path);
+
+        ret = media_folder_get_media_count_from_db(folder_id, filter, &amp;count);
+
+        /* Release allocated strings */
+        free(folder_id);
+        free(folder_name);
+        free(folder_path);
+        if (ret != MEDIA_CONTENT_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "media_folder_get_media_count_from_db failed: %d", ret);
+
+            return ret;
+        } else {
+            dlog_print(DLOG_DEBUG, LOG_TAG, "media count [%d]: %d", i, count);
+        }
+    }
 }
 </pre></li>
 
@@ -264,12 +264,12 @@ if (ret != MEDIA_CONTENT_ERROR_NONE) {
 <pre class="prettyprint">
 /* Remove the folder list */
 if (folder_list) {
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(folder_list); i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;folder_handle = (media_folder_h)g_list_nth_data(folder_list, i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_folder_destroy(folder_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    for (i = 0; i &lt; g_list_length(folder_list); i++) {
+        folder_handle = (media_folder_h)g_list_nth_data(folder_list, i);
+        media_folder_destroy(folder_handle);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_list_free(folder_list);
+    g_list_free(folder_list);
 }
 </pre>
 </li>
@@ -280,21 +280,21 @@ if (folder_list) {
 <p>To retrieve a list of media items:</p>
 
 <ol>
-<li>Define a callback function for the <code>media_info_foreach_media_from_db()</code> function, called for each available media item. Use the callback to create a list of media items. 
+<li>Define a callback function for the <code>media_info_foreach_media_from_db()</code> function, called for each available media item. Use the callback to create a list of media items.
 <pre class="prettyprint">
 bool
 gallery_media_item_cb(media_info_h media, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_info_h new_media = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;media_info_clone(&amp;new_media, media);
+    media_info_h new_media = NULL;
+    media_info_clone(&amp;new_media, media);
 
-&nbsp;&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data; /* Include glib.h for this value */
-&nbsp;&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_media);
+    GList **list = (GList**)user_data; /* Include glib.h for this value */
+    *list = g_list_append(*list, new_media);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li>
-<li>To find the items satisfying certain criteria, or modify the results in a specific way, create a filter and set its properties. For a detailed list of condition fields (such as <code>MEDIA_TYPE</code>) and their values (such as <code>MEDIA_CONTENT_TYPE_IMAGE</code> and <code>MEDIA_CONTENT_TYPE_VIDEO</code>), see the <code>media_content_type.h</code> header file. 
+<li>To find the items satisfying certain criteria, or modify the results in a specific way, create a filter and set its properties. For a detailed list of condition fields (such as <code>MEDIA_TYPE</code>) and their values (such as <code>MEDIA_CONTENT_TYPE_IMAGE</code> and <code>MEDIA_CONTENT_TYPE_VIDEO</code>), see the <code>media_content_type.h</code> header file.
 <p>The following example filters media items so that only image and video files are included in the result. The filter is case-insensitive, and the results are sorted in a descending order based on the item display name. For more information about the filter properties, see <a href="#filter">Setting up a Filter</a>. </p>
 <pre class="prettyprint">
 #define BUFLEN 200
@@ -307,22 +307,22 @@ media_content_collation_e collate_type = MEDIA_CONTENT_COLLATE_NOCASE;
 media_content_order_e order_type = MEDIA_CONTENT_ORDER_DESC;
 ret = media_filter_create(&amp;filter);
 
-snprintf(buf, BUFLEN, &quot;%s = %d OR %s = %d&quot;, MEDIA_TYPE, MEDIA_CONTENT_TYPE_IMAGE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MEDIA_TYPE, MEDIA_CONTENT_TYPE_VIDEO);
+snprintf(buf, BUFLEN, "%s = %d OR %s = %d", MEDIA_TYPE, MEDIA_CONTENT_TYPE_IMAGE,
+         MEDIA_TYPE, MEDIA_CONTENT_TYPE_VIDEO);
 ret = media_filter_set_condition(filter, buf, collate_type);
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to set condition&quot;);
+    media_filter_destroy(filter);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to set condition");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 
 ret = media_filter_set_order(filter, order_type, MEDIA_DISPLAY_NAME, collate_type);
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to set order&quot;);
+    media_filter_destroy(filter);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to set order");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre></li>
 <li>To find the media items, use the <code>media_info_foreach_media_from_db()</code> function with the defined callback. The function is synchronous, and it blocks until the callback has been called for all items or the callback returns <code>false</code>.
@@ -335,12 +335,12 @@ ret = media_info_foreach_media_from_db(filter, gallery_media_item_cb, &amp;all_i
 <pre class="prettyprint">
 /* Remove all items list */
 if (all_item_list) {
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(all_item_list); i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_handle = (media_info_h)g_list_nth_data(all_item_list, i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_destroy(media_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    for (i = 0; i &lt; g_list_length(all_item_list); i++) {
+        media_handle = (media_info_h)g_list_nth_data(all_item_list, i);
+        ret = media_info_destroy(media_handle);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_list_free(all_item_list);
+    g_list_free(all_item_list);
 }
 
 /* Destroy the filter handle */
@@ -350,7 +350,7 @@ media_filter_destroy(filter);
 </ol>
 
  <h2 id="update" name="update">Receiving Update Notifications</h2>
- 
+
 <p>To get notifications of database changes, register a callback. You can only set 1 notification callback at this stage of the process:</p>
 
 <ol>
@@ -358,42 +358,42 @@ media_filter_destroy(filter);
 <pre class="prettyprint">
 void
 _noti_cb(media_content_error_e error, int pid,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_db_update_item_type_e update_item,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_db_update_type_e update_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_type_e media_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *uuid, char *path, char *mime_type, void *user_data)
+         media_content_db_update_item_type_e update_item,
+         media_content_db_update_type_e update_type,
+         media_content_type_e media_type,
+         char *uuid, char *path, char *mime_type, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (error == MEDIA_CONTENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;noti success! %d\n&quot;, error);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;error occurred! %d\n&quot;, error);
-
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Noti from PID(%d)\n&quot;, pid);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (update_item == MEDIA_ITEM_FILE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Noti item: MEDIA_ITEM_FILE\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else if (update_item == MEDIA_ITEM_DIRECTORY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Noti item: MEDIA_ITEM_DIRECTORY\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (update_type == MEDIA_CONTENT_INSERT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Noti type: MEDIA_CONTENT_INSERT\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else if (update_type == MEDIA_CONTENT_DELETE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Noti type: MEDIA_CONTENT_DELETE\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else if (update_type == MEDIA_CONTENT_UPDATE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Noti type: MEDIA_CONTENT_UPDATE\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;content type: %d\n&quot;, media_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (path)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;path: %s\n&quot;, path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (uuid)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;uuid: %s\n&quot;, uuid);
-&nbsp;&nbsp;&nbsp;&nbsp;if (mime_type)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;mime_type: %s\n&quot;, mime_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (user_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;String: %s\n&quot;, (char *)user_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (error == MEDIA_CONTENT_ERROR_NONE)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "noti success! %d\n", error);
+    else
+        dlog_print(DLOG_DEBUG, LOG_TAG, "error occurred! %d\n", error);
+
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Noti from PID(%d)\n", pid);
+
+    if (update_item == MEDIA_ITEM_FILE)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Noti item: MEDIA_ITEM_FILE\n");
+    else if (update_item == MEDIA_ITEM_DIRECTORY)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Noti item: MEDIA_ITEM_DIRECTORY\n");
+
+    if (update_type == MEDIA_CONTENT_INSERT)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Noti type: MEDIA_CONTENT_INSERT\n");
+    else if (update_type == MEDIA_CONTENT_DELETE)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Noti type: MEDIA_CONTENT_DELETE\n");
+    else if (update_type == MEDIA_CONTENT_UPDATE)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Noti type: MEDIA_CONTENT_UPDATE\n");
+
+    dlog_print(DLOG_DEBUG, LOG_TAG, "content type: %d\n", media_type);
+
+    if (path)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "path: %s\n", path);
+    if (uuid)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "uuid: %s\n", uuid);
+    if (mime_type)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "mime_type: %s\n", mime_type);
+    if (user_data)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "String: %s\n", (char *)user_data);
+
+    return;
 }
 </pre></li>
 
@@ -402,7 +402,7 @@ _noti_cb(media_content_error_e error, int pid,
 int ret = MEDIA_CONTENT_ERROR_NONE;
 
 /* Subscribe notifications */
-char *user_str = strdup(&quot;hi&quot;);
+char *user_str = strdup("hi");
 media_content_set_db_updated_cb(_noti_cb, (void*)user_str);
 </pre></li>
 
@@ -418,20 +418,20 @@ media_content_unset_db_updated_cb();
 <p>To find albums in the system and filter the results:</p>
 <ol>
 <li><p>To find the albums satisfying certain criteria, or modify the results in a specific way, create a filter and set its properties.</p>
-<p>The following example filters media albums so that only albums with the artist named &quot;Tizen&quot; are included in the result. The filter is case-insensitive, and the results are sorted in a descending order based on the album display name. For more information about the filter properties, see <a href="#filter">Setting up a Filter</a>.</p>
+<p>The following example filters media albums so that only albums with the artist named "Tizen" are included in the result. The filter is case-insensitive, and the results are sorted in a descending order based on the album display name. For more information about the filter properties, see <a href="#filter">Setting up a Filter</a>.</p>
 <pre class="prettyprint">
 #define BUFLEN 200
 
 filter_h filter = NULL;
-char buf[BUFLEN] = {&#39;\0&#39;};
+char buf[BUFLEN] = {'\0'};
 
 media_filter_create(&amp;filter);
 
-snprintf(buf, BUFLEN, &quot;%s = &#39;Tizen&#39;&quot;, MEDIA_ARTIST);
+snprintf(buf, BUFLEN, "%s = 'Tizen'", MEDIA_ARTIST);
 media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);
 
 media_filter_set_order(filter, MEDIA_CONTENT_ORDER_DESC, MEDIA_DISPLAY_NAME,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MEDIA_CONTENT_COLLATE_NOCASE);
+                       MEDIA_CONTENT_COLLATE_NOCASE);
 
 media_album_foreach_album_from_db(filter, media_album_list_cb, NULL);
 
@@ -477,37 +477,37 @@ media_album_list_cb(media_album_h album, void *user_data)
 <li>
 Use the <code>media_album_get_album_id()</code>, <code>media_album_get_name()</code>, and <code>media_album_get_artist()</code> functions to read the album ID, name, and artist:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int id = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *artist = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int count = -1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the ID of the album */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_album_get_album_id(album, &amp;id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Album id: %d\n&quot;, id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get name of the album */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_album_get_name(album, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Album name: %s\n&quot;, name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(name);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the artist name */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_album_get_artist(album, &amp;artist);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Artist: %s\n&quot;, artist);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(artist);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
+
+    int id = -1;
+    char *name = NULL;
+    char *artist = NULL;
+    int count = -1;
+
+    /* Get the ID of the album */
+    ret = media_album_get_album_id(album, &amp;id);
+    if (ret != MEDIA_CONTENT_ERROR_NONE)
+        /* Error handling */
+    else
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Album id: %d\n", id);
+
+    /* Get name of the album */
+    ret = media_album_get_name(album, &amp;name);
+    if (ret != MEDIA_CONTENT_ERROR_NONE) {
+        /* Error handling */
+    } else {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Album name: %s\n", name);
+        free(name);
+    }
+
+    /* Get the artist name */
+    ret = media_album_get_artist(album, &amp;artist);
+    if (ret != MEDIA_CONTENT_ERROR_NONE) {
+        /* Error handling */
+    } else {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Artist: %s\n", artist);
+        free(artist);
+    }
 </pre>
 
   <div class="note">
@@ -522,15 +522,15 @@ Get the media item count in the album with the <code>media_album_get_media_count
 <p>The second parameter is the filter. If it is set to <code>NULL</code>, all media is counted.</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get media count in the album */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Filter is NULL - all media items are counted */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_album_get_media_count_from_db(id, NULL, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Media count in this album: %d\n&quot;, count);
+    /* Get media count in the album */
+    /* Filter is NULL - all media items are counted */
+    ret = media_album_get_media_count_from_db(id, NULL, &amp;count);
+    if (ret != MEDIA_CONTENT_ERROR_NONE)
+        /* Error handling */
+    else
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Media count in this album: %d\n", count);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }</pre>
 
 </li>
@@ -566,43 +566,43 @@ media_album_foreach_media_from_db(id, NULL, album_contents_info_cb, NULL);
 
 <li id="receive" name="receive">Receive and handle the album content.
 <p>Define the callback which you set in the <code>media_album_foreach_media_from_db()</code> function.</p>
-<p>The following example prints the title, MIME type, and size of the media item for which it was called.</p> 
+<p>The following example prints the title, MIME type, and size of the media item for which it was called.</p>
 <pre class="prettyprint">
 bool
 album_contents_info_cb(media_info_h media, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
-
-&nbsp;&nbsp;&nbsp;&nbsp;char *title = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *mime_type = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned long long size = -1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Read the item title */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_title(media, &amp;title);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Title: %s\n&quot;, title);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(title);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Read the item MIME type */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_mime_type(media, &amp;mime_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;MIME type: %s\n&quot;, mime_type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(mime_type);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Read the item size */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_size(media, &amp;size);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Size: %llu\n&quot;, size);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
+
+    char *title = NULL;
+    char *mime_type = NULL;
+    unsigned long long size = -1;
+
+    /* Read the item title */
+    ret = media_info_get_title(media, &amp;title);
+    if (ret != MEDIA_CONTENT_ERROR_NONE) {
+        /* Error handling */
+    } else {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Title: %s\n", title);
+        free(title);
+    }
+
+    /* Read the item MIME type */
+    ret = media_info_get_mime_type(media, &amp;mime_type);
+    if (ret != MEDIA_CONTENT_ERROR_NONE) {
+        /* Error handling */
+    } else {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "MIME type: %s\n", mime_type);
+        free(mime_type);
+    }
+
+    /* Read the item size */
+    ret = media_info_get_size(media, &amp;size);
+    if (ret != MEDIA_CONTENT_ERROR_NONE)
+        /* Error handling */
+    else
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Size: %llu\n", size);
+
+    return true;
 }</pre>
 
 
@@ -618,7 +618,7 @@ album_contents_info_cb(media_info_h media, void *user_data)
 <p>To set a bookmark for a video file at a given timestamp, use the <code>media_bookmark_insert_to_db()</code> function:</p>
 
 <pre class="prettyprint">
-char* thumbnail_path = &quot;path/to/image/file&quot;;
+char* thumbnail_path = "path/to/image/file";
 
 media_bookmark_insert_to_db(media_id, 220, thumbnail_path);
 media_bookmark_insert_to_db(media_id, 210, thumbnail_path);
@@ -628,7 +628,7 @@ media_bookmark_insert_to_db(media_id, 210, thumbnail_path);
 
  <h2 id="finding" name="finding">Finding Bookmarks</h2>
 
-<p>To find a media item&#39;s bookmarks and filter the results:</p>
+<p>To find a media item's bookmarks and filter the results:</p>
 
 <ol>
 <li><p>To find the bookmarks satisfying certain criteria, or modify the results in a specific way, create a filter and set its properties.</p>
@@ -640,19 +640,19 @@ filter_h filter = NULL;
 media_filter_create(&amp;filter);
 
 #define BUFLEN 200
-char buf[BUFLEN] = {&#39;\0&#39;};
+char buf[BUFLEN] = {'\0'};
 
-snprintf(buf, BUFLEN, &quot;%s &gt;= 220&quot;, BOOKMARK_MARKED_TIME);
+snprintf(buf, BUFLEN, "%s &gt;= 220", BOOKMARK_MARKED_TIME);
 media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);
 
 media_filter_set_offset(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Offset */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Count */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3);
+                        /* Offset */
+                        0,
+                        /* Count */
+                        3);
 
 media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, BOOKMARK_MARKED_TIME,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MEDIA_CONTENT_COLLATE_NOCASE);
+                       MEDIA_CONTENT_COLLATE_NOCASE);
 </pre></li>
 
 <li><p>To find the bookmarks set for a media item, use the <code>media_info_foreach_bookmark_from_db()</code> function.</p>
@@ -690,19 +690,19 @@ bool
 get_bookmarks_cb(media_bookmark_h bookmark, void* user_data)
 {
 </pre>
-<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<code>true</code>) or are stopped (<code>false</code>).</p> 
+<p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<code>true</code>) or are stopped (<code>false</code>).</p>
 </li>
 <li>Once you have the bookmark handle (<code>media_bookmark_h</code>),  you can read the bookmark information:
 
 <ul>
 <li>Use the <code>media_bookmark_get_thumbnail_path()</code> function to get the thumbnail path of the bookmark:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;char *thumb = NULL;
+    char *thumb = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (bookmark != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_bookmark_get_thumbnail_path(bookmark, &amp;thumb);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Thumbnail path: %s\n&quot;, thumb);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(thumb);
+    if (bookmark != NULL) {
+        media_bookmark_get_thumbnail_path(bookmark, &amp;thumb);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Thumbnail path: %s\n", thumb);
+        free(thumb);
 </pre>
 
 
@@ -715,13 +715,13 @@ get_bookmarks_cb(media_bookmark_h bookmark, void* user_data)
 <li>Use the <code>media_bookmark_get_marked_time()</code> function to get the marked time of the bookmark:
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t time;
+        time_t time;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_bookmark_get_marked_time(bookmark, &amp;time);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Marked time [s]: %d\n&quot;, (int) time);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        media_bookmark_get_marked_time(bookmark, &amp;time);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Marked time [s]: %d\n", (int) time);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li></ul>
@@ -762,13 +762,13 @@ media_filter_create(&amp;filter);
 </li>
 
 <li><p>Set a condition using the <code>media_filter_set_condition()</code> function.</p>
-<p>The following example sets a condition which finds albums with the artist named &quot;Tizen&quot; with a case-insensitive search:</p>
+<p>The following example sets a condition which finds albums with the artist named "Tizen" with a case-insensitive search:</p>
 
 <pre class="prettyprint">
 #define BUFLEN 200
-char buf[BUFLEN] = {&#39;\0&#39;};
+char buf[BUFLEN] = {'\0'};
 
-snprintf(buf, BUFLEN, &quot;%s = &#39;Tizen&#39;&quot;, MEDIA_ARTIST);
+snprintf(buf, BUFLEN, "%s = 'Tizen'", MEDIA_ARTIST);
 ret = media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);
 </pre>
 
@@ -811,7 +811,7 @@ media_filter_get_condition(filter, &amp;check_condition, &amp;check_collate_type
 
 <pre class="prettyprint">
 media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, MEDIA_ARTIST,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MEDIA_CONTENT_COLLATE_DEFAULT);
+                       MEDIA_CONTENT_COLLATE_DEFAULT);
 </pre>
 
 <p>The second and fourth parameters determine the order and collation types, and the available types are defined in the enumerators <code>media_content_order_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">wearable</a> applications) and <code>media_content_collation_e</code> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">wearable</a> applications).</p>
@@ -824,7 +824,7 @@ char *check_order_keyword = NULL;
 media_content_collation_e check_order_collate_type = MEDIA_CONTENT_COLLATE_DEFAULT;
 
 media_filter_get_order(filter, &amp;check_order_type, &amp;check_order_keyword,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;check_order_collate_type);
+                       &amp;check_order_collate_type);
 </pre>
 </li>
 
@@ -848,7 +848,7 @@ media_filter_get_offset(filter, &amp;check_offset, &amp;check_count);
 </li>
 
 <li>
-<p>When the filter is ready and its properties defined, you can use it in various media foreach functions to find different media items.</p>  
+<p>When the filter is ready and its properties defined, you can use it in various media foreach functions to find different media items.</p>
 <p>For example, to iterate through all media info in the media database, use the <code>media_info_foreach_media_from_db()</code> function:</p>
 <pre class="prettyprint">
 media_info_foreach_media_from_db(filter, media_cb, NULL);
@@ -871,20 +871,20 @@ media_filter_destroy(filter);
 <ol>
 
 <li><p>To find only folders satisfying certain criteria, or modify the results in a specific way, create a filter and set its properties.</p>
-<p>The following example filters media folders so that only folders named &quot;Downloads&quot; found in the internal storage are included in the result. The filter is case-insensitive, and the results are sorted in an ascending order based on the modified time. For more information about the filter properties, see <a href="#filter">Setting up a Filter</a>.</p>
+<p>The following example filters media folders so that only folders named "Downloads" found in the internal storage are included in the result. The filter is case-insensitive, and the results are sorted in an ascending order based on the modified time. For more information about the filter properties, see <a href="#filter">Setting up a Filter</a>.</p>
 <pre class="prettyprint">
 filter_h filter = NULL;
 
 media_filter_create(&amp;filter);
 
 #define BUFLEN 200
-char buf[BUFLEN] = {&#39;\0&#39;};
-snprintf(buf, BUFLEN, &quot;%s = &#39;Downloads&#39;&quot;, FOLDER_NAME);
-snprintf(buf, BUFLEN, &quot;%s = %d&quot;, FOLDER_STORAGE_TYPE, MEDIA_CONTENT_STORAGE_INTERNAL);
+char buf[BUFLEN] = {'\0'};
+snprintf(buf, BUFLEN, "%s = 'Downloads'", FOLDER_NAME);
+snprintf(buf, BUFLEN, "%s = %d", FOLDER_STORAGE_TYPE, MEDIA_CONTENT_STORAGE_INTERNAL);
 
 media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);
 media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, FOLDER_MODIFIED_TIME,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MEDIA_CONTENT_COLLATE_DEFAULT);
+                       MEDIA_CONTENT_COLLATE_DEFAULT);
 media_folder_foreach_folder_from_db(filter, folder_cb, NULL);
 </pre>
 </li>
@@ -929,31 +929,31 @@ folder_cb(media_folder_h folder, void *user_data)
 <ul><li><p>Use the <code>media_folder_get_folder_id()</code>, <code>media_folder_get_name()</code>, and <code>media_folder_get_path()</code> functions to read the folder ID, name, and path:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;char *folder_id = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *path = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_folder_id(folder, &amp;folder_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Folder id: %s\n&quot;, folder_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_name(folder, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Folder name: %s\n&quot;, name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(name);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_path(folder, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Folder path: %s\n&quot;, path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    char *folder_id = NULL;
+    char *name = NULL;
+    char *path = NULL;
+
+    ret = media_folder_get_folder_id(folder, &amp;folder_id);
+    if (ret != MEDIA_CONTENT_ERROR_NONE)
+        /* Error handling */
+    else
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Folder id: %s\n", folder_id);
+
+    ret = media_folder_get_name(folder, &amp;name);
+    if (ret != MEDIA_CONTENT_ERROR_NONE) {
+        /* Error handling */
+    } else {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Folder name: %s\n", name);
+        free(name);
+    }
+
+    ret = media_folder_get_path(folder, &amp;path);
+    if (ret != MEDIA_CONTENT_ERROR_NONE) {
+        /* Error handling */
+    } else {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Folder path: %s\n", path);
+        free(path);
+    }
 </pre>
 
 
@@ -965,36 +965,36 @@ folder_cb(media_folder_h folder, void *user_data)
 <li><p>Read the folder storage type using the <code>media_folder_get_storage_type()</code> function:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;media_content_storage_e storage_type = MEDIA_CONTENT_STORAGE_INTERNAL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_storage_type(folder, &amp;storage_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (storage_type) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_CONTENT_STORAGE_INTERNAL:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Folder storage type: Internal\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_CONTENT_STORAGE_EXTERNAL:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Folder storage type: External\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Folder storage type: Unknown\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    media_content_storage_e storage_type = MEDIA_CONTENT_STORAGE_INTERNAL;
+
+    ret = media_folder_get_storage_type(folder, &amp;storage_type);
+    if (ret != MEDIA_CONTENT_ERROR_NONE) {
+        /* Error handling */
+    } else {
+        switch (storage_type) {
+        case MEDIA_CONTENT_STORAGE_INTERNAL:
+            dlog_print(DLOG_DEBUG, LOG_TAG, "Folder storage type: Internal\n");
+            break;
+        case MEDIA_CONTENT_STORAGE_EXTERNAL:
+            dlog_print(DLOG_DEBUG, LOG_TAG, "Folder storage type: External\n");
+            break;
+        default:
+            dlog_print(DLOG_DEBUG, LOG_TAG, "Folder storage type: Unknown\n");
+            break;
+        }
+    }
 </pre></li>
 
 <li><p>Get the last modified time:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;time_t time = 0;
+    time_t time = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_modified_time(folder, &amp;time);
-&nbsp;&nbsp;&nbsp;&nbsp;if (MEDIA_CONTENT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Modified time: %s&quot;, ctime(&amp;time));
+    ret = media_folder_get_modified_time(folder, &amp;time);
+    if (MEDIA_CONTENT_ERROR_NONE != ret)
+        /* Error handling */
+    else
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Modified time: %s", ctime(&amp;time));
 </pre></li>
 
 <li>Get the media item count in the folder with the <code>media_folder_get_media_count_from_db()</code> function. <p>The second parameter is the filter. If it is set to <code>NULL</code>, all media is counted.</p>
@@ -1002,17 +1002,17 @@ folder_cb(media_folder_h folder, void *user_data)
 
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;int item_count = -1;
+    int item_count = -1;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_folder_get_media_count_from_db(folder_id, NULL, &amp;item_count);
-&nbsp;&nbsp;&nbsp;&nbsp;if (MEDIA_CONTENT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Number of media contents: %d\n&quot;, item_count);
-&nbsp;&nbsp;&nbsp;&nbsp;free(folder_id);
+    ret = media_folder_get_media_count_from_db(folder_id, NULL, &amp;item_count);
+    if (MEDIA_CONTENT_ERROR_NONE != ret)
+        /* Error handling */
+    else
+        dlog_print(DLOG_DEBUG, LOG_TAG,
+                   "Number of media contents: %d\n", item_count);
+    free(folder_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }</pre>
 
 
@@ -1049,17 +1049,17 @@ media_folder_foreach_media_from_db(folder_id, NULL, media_cb, NULL);
 bool
 media_cb(media_info_h media, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *title = NULL;
+    char *title = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_title(media, &amp;title);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Title: %s\n&quot;, title);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(title);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    ret = media_info_get_title(media, &amp;title);
+    if (ret != MEDIA_CONTENT_ERROR_NONE) {
+        /* Error handling */
+    } else {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Title: %s\n", title);
+        free(title);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -1070,18 +1070,18 @@ media_cb(media_info_h media, void *user_data)
 <p>To access media item information:</p>
 
 <ol>
-<li>Define a callback function for the <code>media_info_foreach_media_from_db()</code> function, called for each available media item. Use the callback to create a list of items. 
+<li>Define a callback function for the <code>media_info_foreach_media_from_db()</code> function, called for each available media item. Use the callback to create a list of items.
 <pre class="prettyprint">
 bool
 gallery_media_item_cb(media_info_h media, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_info_h new_media = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;media_info_clone(&amp;new_media, media);
+    media_info_h new_media = NULL;
+    media_info_clone(&amp;new_media, media);
 
-&nbsp;&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_media);
+    GList **list = (GList**)user_data;
+    *list = g_list_append(*list, new_media);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li>
 <li>To find the items satisfying certain criteria, or modify the results in a specific way, create a filter and set its properties.
@@ -1094,7 +1094,7 @@ media_info_h media_handle = NULL;
 char *media_id = NULL;
 char *media_name = NULL;
 char *media_path = NULL;
-char buf[BUFLEN] = {&#39;\0&#39;};
+char buf[BUFLEN] = {'\0'};
 int ret = MEDIA_CONTENT_ERROR_NONE;
 filter_h filter = NULL;
 media_content_collation_e collate_type = MEDIA_CONTENT_COLLATE_NOCASE;
@@ -1103,22 +1103,22 @@ media_content_order_e order_type = MEDIA_CONTENT_ORDER_DESC;
 media_filter_create(&amp;filter);
 
 /* Set the condition */
-snprintf(buf, BUFLEN, &quot;%s = %d OR %s = %d&quot;, MEDIA_TYPE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MEDIA_CONTENT_TYPE_IMAGE, MEDIA_TYPE, MEDIA_CONTENT_TYPE_VIDEO);
+snprintf(buf, BUFLEN, "%s = %d OR %s = %d", MEDIA_TYPE,
+         MEDIA_CONTENT_TYPE_IMAGE, MEDIA_TYPE, MEDIA_CONTENT_TYPE_VIDEO);
 
 ret = media_filter_set_condition(filter, buf, collate_type);
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to set condition&quot;);
+    media_filter_destroy(filter);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to set condition");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 ret = media_filter_set_order(filter, order_type, MEDIA_DISPLAY_NAME, collate_type);
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed to set order&quot;);
+    media_filter_destroy(filter);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Failed to set order");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 </li>
@@ -1129,94 +1129,94 @@ if (ret != MEDIA_CONTENT_ERROR_NONE) {
 <pre class="prettyprint">
 ret = media_info_foreach_media_from_db(filter, gallery_media_item_cb, &amp;all_item_list);
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;media_info_foreach_media_from_db failed: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_destroy(filter);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "media_info_foreach_media_from_db failed: %d", ret);
+    media_filter_destroy(filter);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(all_item_list); i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_handle = (media_info_h)g_list_nth_data(all_item_list, i);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_media_id(media_handle, &amp;media_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_media_type(media_handle, &amp;media_type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_display_name(media_handle, &amp;media_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_file_path(media_handle, &amp;media_path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (media_type == MEDIA_CONTENT_TYPE_IMAGE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_meta_h image_handle;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_orientation_e orientation = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int width = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int height = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *datetaken = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *burst_id = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_image(media_handle, &amp;image_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_meta_get_width(image_handle, &amp;width);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_meta_get_height(image_handle, &amp;height);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_meta_get_orientation(image_handle, &amp;orientation);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_meta_get_date_taken(image_handle, &amp;datetaken);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_meta_get_burst_id(image_handle, &amp;burst_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;This is an image&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Width: %d, Height: %d, Orientation: %d, Date taken: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width, height, orientation, datetaken);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (datetaken)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(datetaken);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (burst_id)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(burst_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_meta_destroy(image_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (media_type == MEDIA_CONTENT_TYPE_VIDEO) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_meta_h video_handle;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *title = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *artist = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *album = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *album_artist = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int duration = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t time_played = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_video(media_handle, &amp;video_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_meta_get_artist(video_handle, &amp;artist);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_meta_get_album(video_handle, &amp;album);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_meta_get_album_artist(video_handle, &amp;album_artist);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_meta_get_duration(video_handle, &amp;duration);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_played_time(media_handle, &amp;time_played);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;This is a video&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Title: %s, Album: %s, Artist: %s, Album_artist: %s \n
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration: %d, Played time: %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title, album, artist, album_artist, duration, time_played);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(artist);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(album);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(album_artist);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_meta_destroy(video_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_id [%d]: %s&quot;, i, media_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_name [%d]: %s&quot;, i, media_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_path [%d]: %s&quot;, i, media_path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(title);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int i;
+
+    for (i = 0; i &lt; g_list_length(all_item_list); i++) {
+        media_handle = (media_info_h)g_list_nth_data(all_item_list, i);
+
+        media_info_get_media_id(media_handle, &amp;media_id);
+        media_info_get_media_type(media_handle, &amp;media_type);
+        media_info_get_display_name(media_handle, &amp;media_name);
+        media_info_get_file_path(media_handle, &amp;media_path);
+
+        if (media_type == MEDIA_CONTENT_TYPE_IMAGE) {
+            image_meta_h image_handle;
+            media_content_orientation_e orientation = 0;
+            int width = 0;
+            int height = 0;
+            char *datetaken = NULL;
+            char *burst_id = NULL;
+
+            ret = media_info_get_image(media_handle, &amp;image_handle);
+            if (ret != MEDIA_CONTENT_ERROR_NONE) {
+                /* Error handling */
+            } else {
+                image_meta_get_width(image_handle, &amp;width);
+                image_meta_get_height(image_handle, &amp;height);
+                image_meta_get_orientation(image_handle, &amp;orientation);
+                image_meta_get_date_taken(image_handle, &amp;datetaken);
+                image_meta_get_burst_id(image_handle, &amp;burst_id);
+
+                dlog_print(DLOG_DEBUG, LOG_TAG, "This is an image");
+                dlog_print(DLOG_DEBUG, LOG_TAG,
+                           "Width: %d, Height: %d, Orientation: %d, Date taken: %s",
+                           width, height, orientation, datetaken);
+            }
+
+            if (datetaken)
+                free(datetaken);
+            if (burst_id)
+                free(burst_id);
+
+            image_meta_destroy(image_handle);
+        } else if (media_type == MEDIA_CONTENT_TYPE_VIDEO) {
+            video_meta_h video_handle;
+            char *title = NULL;
+            char *artist = NULL;
+            char *album = NULL;
+            char *album_artist = NULL;
+            int duration = 0;
+            time_t time_played = 0;
+
+            ret = media_info_get_video(media_handle, &amp;video_handle);
+            if (ret != MEDIA_CONTENT_ERROR_NONE) {
+                /* Error handling */
+            } else {
+                video_meta_get_artist(video_handle, &amp;artist);
+                video_meta_get_album(video_handle, &amp;album);
+                video_meta_get_album_artist(video_handle, &amp;album_artist);
+                video_meta_get_duration(video_handle, &amp;duration);
+
+                media_info_get_played_time(media_handle, &amp;time_played);
+
+                dlog_print(DLOG_DEBUG, LOG_TAG, "This is a video");
+                dlog_print(DLOG_DEBUG, LOG_TAG,
+                           "Title: %s, Album: %s, Artist: %s, Album_artist: %s \n
+                            Duration: %d, Played time: %d",
+                           title, album, artist, album_artist, duration, time_played);
+            }
+
+            free(artist);
+            free(album);
+            free(album_artist);
+
+            video_meta_destroy(video_handle);
+        }
+        dlog_print(DLOG_DEBUG, LOG_TAG, "media_id [%d]: %s", i, media_id);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "media_name [%d]: %s", i, media_name);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "media_path [%d]: %s", i, media_path);
+
+        free(media_id);
+        free(media_name);
+        free(media_path);
+        free(title);
+    }
 }
 </pre></li>
 
@@ -1230,44 +1230,44 @@ filter = NULL;
 </ol>
 
  <h2 id="insert" name="insert">Inserting Media in the Database</h2>
- 
+
  <p>To use newly created media files, insert them into the database:</p>
 
 <ol>
 <li><p>To add information in the database, use one of the following options:</p>
- 
+
 <ul><li><p><code>media_info_insert_to_db()</code> function:</p>
 <pre class="prettyprint">
 int ret = MEDIA_CONTENT_ERROR_NONE;
-char *image_file = &quot;Default.jpg&quot;;
+char *image_file = "Default.jpg";
 char *directory = NULL;
 char *path = NULL;
 
 storage_get_directory(0, STORAGE_DIRECTORY_IMAGES, &amp;directory);
 path = (char*)malloc(strlen(directory) + strlen(image_file) + 1);
 memset(path, 0x00, strlen(directory) + strlen(image_file) + 1);
-sprintf(path, &quot;%s/%s&quot;, directory, image_file);
+sprintf(path, "%s/%s", directory, image_file);
 
 media_info_h media_item = NULL;
 
 ret = media_info_insert_to_db(path, &amp;media_item);
 
 if ((ret == MEDIA_CONTENT_ERROR_NONE) &amp;&amp; (media_item != NULL)) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Insertion successful&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Insertion successful");
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Insertion failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;if (media_item != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_destroy(media_item);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Insertion failed");
+    if (media_item != NULL)
+        media_info_destroy(media_item);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 
 /* After using the media handle, destroy it */
 ret = media_info_destroy(media_item);
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 <p>After using the <code>media_info_insert_to_db()</code> function, destroy the received <code>media_info_h</code> using the <code>media_info_destroy()</code> function.</p></li>
@@ -1275,18 +1275,18 @@ if (ret != MEDIA_CONTENT_ERROR_NONE) {
 <li><code>media_content_scan_file()</code> function:
 <pre class="prettyprint">
 int ret = MEDIA_CONTENT_ERROR_NONE;
-char *image_file = &quot;Default.jpg&quot;;
+char *image_file = "Default.jpg";
 char *directory = NULL;
 char *file_path = NULL;
 
 storage_get_directory(0, STORAGE_DIRECTORY_IMAGES, &amp;directory);
 file_path = (char*)malloc(strlen(directory) + strlen(image_file) + 1);
 memset(file_path, 0x00, strlen(directory) + strlen(image_file) + 1);
-sprintf(file_path, &quot;%s/%s&quot;, directory, image_file);
+sprintf(file_path, "%s/%s", directory, image_file);
 
 ret = media_content_scan_file(file_path);
 if (ret != MEDIA_CONTENT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li></ul>
 
@@ -1299,16 +1299,16 @@ if (ret != MEDIA_CONTENT_ERROR_NONE)
  <h2 id="scan" name="scan">Inserting a Media Folder in the Database</h2>
 
 <p>To insert a media folder, and optionally any subfolders, in the database:</p>
- 
+
 <ol>
-<li>Define a callback function that is called after the asynchronous insertion (scanning) process is completed: 
+<li>Define a callback function that is called after the asynchronous insertion (scanning) process is completed:
 <pre class="prettyprint">
 void
 _scan_cb(media_content_error_e err, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Folder scanned\n&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Folder scanned\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre></li>
 
@@ -1322,9 +1322,9 @@ storage_get_directory(0, STORAGE_DIRECTORY_IMAGES, &amp;dir_path);
 
 ret = media_content_scan_folder(dir_path, TRUE, _scan_cb, NULL);
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre></li>
 </ol>
@@ -1346,7 +1346,7 @@ int id;
 int ret;
 
 /* Create the playlist */
-media_playlist_insert_to_db(&quot;playlist_for_tutorial&quot;, &amp;playlist);
+media_playlist_insert_to_db("playlist_for_tutorial", &amp;playlist);
 </pre>
 <p>You can modify the playlist name later on using the <code>media_playlist_set_name()</code> function.</p>
 </li>
@@ -1356,22 +1356,22 @@ media_playlist_insert_to_db(&quot;playlist_for_tutorial&quot;, &amp;playlist);
 bool
 _media_info_cb(media_info_h media, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *data = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *id = NULL;
+    char *data = NULL;
+    char *id = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (media != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data;
+    if (media != NULL) {
+        GList **list = (GList**)user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_media_id(media, &amp;id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Media found: %s\n&quot;, id);
+        media_info_get_media_id(media, &amp;id);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Media found: %s\n", id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data = strdup(id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, data);
+        data = strdup(id);
+        *list = g_list_append(*list, data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(id);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        free(id);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li>
 
@@ -1389,19 +1389,19 @@ media_info_get_media_count_from_db(NULL, &amp;media_count);
 media_info_foreach_media_from_db(NULL, _media_info_cb, &amp;media_id_list);
 
 if (media_count &gt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; media_count; x++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *media_id = (char*)g_list_nth_data(media_id_list, x);
+    for (x = 0; x &lt; media_count; x++) {
+        char *media_id = (char*)g_list_nth_data(media_id_list, x);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_playlist_add_media(playlist, media_id);
+        ret = media_playlist_add_media(playlist, media_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_id);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        free(media_id);
+    }
 }
 
 media_playlist_update_to_db(playlist);
 </pre></li>
 
-<li>When no longer needed, destroy the playlist: 
+<li>When no longer needed, destroy the playlist:
 <pre class="prettyprint">
 media_playlist_destroy(playlist);
 </pre>
@@ -1445,14 +1445,14 @@ media_filter_destroy(filter);
 <p>To read playlist information, define a callback for the <code>media_playlist_foreach_playlist_from_db()</code> function and retrieve the basic playlist information (name, ID, and records included in the playlist) in the callback:</p>
 
 <ol>
-<li><p>Read the playlist details within the callback:</p> 
+<li><p>Read the playlist details within the callback:</p>
 <pre class="prettyprint">
 static bool
 playlist_list_cb(media_playlist_h playlist, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int playlist_id = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int count = 0;
+    char *name = NULL;
+    int playlist_id = 0;
+    int count = 0;
 </pre>
 <p>A handle to the record is passed as a parameter. The return value determines whether the iterative calls of the callback continue (<code>true</code>) or are stopped (<code>false</code>).</p></li>
 
@@ -1461,32 +1461,32 @@ playlist_list_cb(media_playlist_h playlist, void* user_data)
 <li><p>Use the <code>media_playlist_get_name()</code> and <code>media_playlist_get_playlist_id()</code> functions to read the playlist name and ID:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;media_playlist_get_name(playlist, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;media_playlist_get_playlist_id(playlist, &amp;playlist_id);
+    media_playlist_get_name(playlist, &amp;name);
+    media_playlist_get_playlist_id(playlist, &amp;playlist_id);
 </pre></li>
 
-<li><p>Access the records within the playlist using the playlist ID.</p> 
+<li><p>Access the records within the playlist using the playlist ID.</p>
 <p>In the following example, 2 searches are executed for the records. The first search operates on all records on the playlist and retrieves the record count. The second search retrieves the first 10 records. Destroy the filters after all operations.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;filter_h temp_filter = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_create(&amp;temp_filter);
+    filter_h temp_filter = NULL;
+    media_filter_create(&amp;temp_filter);
 
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_set_offset(temp_filter, -1, -1);
+    media_filter_set_offset(temp_filter, -1, -1);
 
-&nbsp;&nbsp;&nbsp;&nbsp;media_playlist_get_media_count_from_db(playlist_id, temp_filter, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;filter_h audio_fltr;
+    media_playlist_get_media_count_from_db(playlist_id, temp_filter, &amp;count);
+    filter_h audio_fltr;
 
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_create(&amp;audio_fltr);
+    media_filter_create(&amp;audio_fltr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_set_offset(audio_fltr, 0, 10);
+    media_filter_set_offset(audio_fltr, 0, 10);
 
-&nbsp;&nbsp;&nbsp;&nbsp;media_playlist_foreach_media_from_db(playlist_id, audio_fltr,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio_list_cb, NULL);
+    media_playlist_foreach_media_from_db(playlist_id, audio_fltr,
+                                         audio_list_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_destroy(audio_fltr);
-&nbsp;&nbsp;&nbsp;&nbsp;media_filter_destroy(temp_filter);
+    media_filter_destroy(audio_fltr);
+    media_filter_destroy(temp_filter);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li>
 
@@ -1499,17 +1499,17 @@ playlist_list_cb(media_playlist_h playlist, void* user_data)
 static bool
 audio_list_cb(int playlist_member_id, media_info_h media_hndl, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char * id;
-&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_media_id(media_hndl, &amp;id);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Media on the playlist: %s\n&quot;, id);
-&nbsp;&nbsp;&nbsp;&nbsp;free(id);
+    char * id;
+    media_info_get_media_id(media_hndl, &amp;id);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Media on the playlist: %s\n", id);
+    free(id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li>
 </ol>
 </li>
-<li>When no longer needed, destroy the playlist: 
+<li>When no longer needed, destroy the playlist:
 <pre class="prettyprint">
 media_playlist_destroy(playlist);
 </pre>
@@ -1527,14 +1527,14 @@ media_playlist_delete_from_db(id);
 
 
        <h2 id="tag_add" name="tag_add">Adding Tags</h2>
-       
+
 <p>To add a tag to the database, and a file to the tag:</p>
 <ol>
 <li>Add the tag.
 <p>Use the <code>media_tag_insert_to_db()</code> function to add the tag. The result is a handle to the new tag.</p>
 <pre class="prettyprint">
 media_tag_h tag = NULL;
-const char *tag_name = &quot;Tag name&quot;;
+const char *tag_name = "Tag name";
 
 media_tag_insert_to_db(tag_name, &amp;tag);
 </pre>
@@ -1546,7 +1546,7 @@ media_tag_insert_to_db(tag_name, &amp;tag);
 media_info_h image_info = NULL;
 char *image_id = NULL;
 
-media_info_insert_to_db(&quot;path/to/image_file&quot;, &amp;image_info);
+media_info_insert_to_db("path/to/image_file", &amp;image_info);
 
 media_info_get_media_id(image_info, &amp;image_id);
 
@@ -1575,32 +1575,32 @@ media_tag_destroy(tag);
 <p>To access information first about the tags and then about the media items related to specific tags:</p>
 
 <ol>
-<li>Define callback functions for the <code>media_tag_foreach_tag_from_db()</code> and <code>media_tag_foreach_media_from_db()</code> functions, called for each available tag and each available media item for a specific tag. Use the callbacks to create a list of tags and media items. 
+<li>Define callback functions for the <code>media_tag_foreach_tag_from_db()</code> and <code>media_tag_foreach_media_from_db()</code> functions, called for each available tag and each available media item for a specific tag. Use the callbacks to create a list of tags and media items.
 <pre class="prettyprint">
 /* glib library is used, so include glib.h */
 
 bool
 gallery_tag_item_cb(media_tag_h tag, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_tag_h new_tag = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;media_tag_clone(&amp;new_tag, tag);
+    media_tag_h new_tag = NULL;
+    media_tag_clone(&amp;new_tag, tag);
 
-&nbsp;&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_tag);
+    GList **list = (GList**)user_data;
+    *list = g_list_append(*list, new_tag);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 bool
 gallery_media_item_cb(media_info_h media, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_info_h new_media = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;media_info_clone(&amp;new_media, media);
+    media_info_h new_media = NULL;
+    media_info_clone(&amp;new_media, media);
 
-&nbsp;&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_media);
+    GList **list = (GList**)user_data;
+    *list = g_list_append(*list, new_media);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li>
 <li>To find the tags and related media items, use the <code>media_tag_foreach_tag_from_db()</code> and <code>media_tag_foreach_media_from_db()</code> functions with the defined callbacks. The functions are synchronous, and they block until the callbacks have been called for all items or the callbacks return <code>false</code>.
@@ -1615,75 +1615,75 @@ GList *media_list_in_tag = NULL;
 ret = media_tag_foreach_tag_from_db(NULL, gallery_tag_item_cb, &amp;tag_list);
 
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;media_tag_foreach_tag_from_db() failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "media_tag_foreach_tag_from_db() failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;media_tag_foreach_tag_from_db() successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;char *tag_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int tag_id;
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(tag_list); i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag_handle = (media_tag_h)g_list_nth_data(tag_list, i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_tag_get_tag_id(tag_handle, &amp;tag_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_tag_get_name(tag_handle, &amp;tag_name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_tag_foreach_media_from_db(tag_id, NULL, gallery_media_item_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;media_list_in_tag);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;media_tag_foreach_media_from_db() failed: %d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ret;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;media_tag_foreach_media_from_db() successful&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int j = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_h tag_media_handle;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *media_id = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *media_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *media_path = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_content_type_e media_type = MEDIA_CONTENT_TYPE_IMAGE;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; g_list_length(media_list_in_tag); j++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag_media_handle = (media_info_h)g_list_nth_data(media_list_in_tag, j);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_media_id(tag_media_handle, &amp;media_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_display_name(tag_media_handle, &amp;media_name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_file_path(tag_media_handle, &amp;media_path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = media_info_get_media_type(tag_media_handle, &amp;media_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[%s] media_id [%d]: %s&quot;, tag_name, j, media_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[%s] media_type [%d]: %d&quot;, tag_name, j, media_type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[%s] media_name [%d]: %s&quot;, tag_name, j, media_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;[%s] media_path [%d]: %s&quot;, tag_name, j, media_path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(media_path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_info_destroy(tag_media_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(tag_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_tag_destroy(tag_handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_list_free(media_list_in_tag);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_list_in_tag = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;g_list_free(tag_list);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "media_tag_foreach_tag_from_db() successful");
+    char *tag_name = NULL;
+    int tag_id;
+
+    for (i = 0; i &lt; g_list_length(tag_list); i++) {
+        tag_handle = (media_tag_h)g_list_nth_data(tag_list, i);
+        media_tag_get_tag_id(tag_handle, &amp;tag_id);
+        media_tag_get_name(tag_handle, &amp;tag_name);
+
+        ret = media_tag_foreach_media_from_db(tag_id, NULL, gallery_media_item_cb,
+                                              &amp;media_list_in_tag);
+        if (ret != MEDIA_CONTENT_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "media_tag_foreach_media_from_db() failed: %d", ret);
+
+            return ret;
+        } else {
+            dlog_print(DLOG_DEBUG, LOG_TAG,
+                       "media_tag_foreach_media_from_db() successful");
+            int j = 0;
+            media_info_h tag_media_handle;
+            char *media_id = NULL;
+            char *media_name = NULL;
+            char *media_path = NULL;
+            media_content_type_e media_type = MEDIA_CONTENT_TYPE_IMAGE;
+
+            for (j = 0; j &lt; g_list_length(media_list_in_tag); j++) {
+                tag_media_handle = (media_info_h)g_list_nth_data(media_list_in_tag, j);
+                ret = media_info_get_media_id(tag_media_handle, &amp;media_id);
+
+                ret = media_info_get_display_name(tag_media_handle, &amp;media_name);
+
+                ret = media_info_get_file_path(tag_media_handle, &amp;media_path);
+
+                ret = media_info_get_media_type(tag_media_handle, &amp;media_type);
+
+                dlog_print(DLOG_DEBUG, LOG_TAG,
+                           "[%s] media_id [%d]: %s", tag_name, j, media_id);
+                dlog_print(DLOG_DEBUG, LOG_TAG,
+                           "[%s] media_type [%d]: %d", tag_name, j, media_type);
+                dlog_print(DLOG_DEBUG, LOG_TAG,
+                           "[%s] media_name [%d]: %s", tag_name, j, media_name);
+                dlog_print(DLOG_DEBUG, LOG_TAG,
+                           "[%s] media_path [%d]: %s", tag_name, j, media_path);
+
+                free(media_name);
+                free(media_path);
+                media_info_destroy(tag_media_handle);
+            }
+        }
+        free(tag_name);
+        media_tag_destroy(tag_handle);
+        g_list_free(media_list_in_tag);
+        media_list_in_tag = NULL;
+    }
+    g_list_free(tag_list);
 }
 </pre></li>
 </ol>
 
        <h2 id="tag_delete" name="tag_delete">Deleting Tags</h2>
-       
+
 <p>To delete a tag:</p>
 <ol>
-<li>Retrieve the tag ID to delete the tag. 
+<li>Retrieve the tag ID to delete the tag.
 <p>In this use case, the ID is obtained by calling the <code>media_tag_foreach_tag_from_db()</code> function, gathering a tag list in the function callback, iterating through the tag list to find the needed tag handle, and getting the tag ID with the handle using the <code>media_tag_get_tag_id()</code> function.</p>
 <p>The callback is identical to the one used in the <a href="#tag_list">Retrieving Tag Information</a> use case.</p>
 <pre class="prettyprint">
@@ -1698,19 +1698,19 @@ int len = g_list_length(tag_list);
 
 int i;
 for (i = 0; i &lt; len; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;tag_handle = (media_tag_h) g_list_nth_data(tag_list, i);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_tag_get_tag_id(tag_handle, &amp;tag_id);
+    tag_handle = (media_tag_h) g_list_nth_data(tag_list, i);
+    ret = media_tag_get_tag_id(tag_handle, &amp;tag_id);
 </pre>
 </li>
 <li>Delete the tag with the <code>media_tag_delete_from_db()</code> function.
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_tag_delete_from_db(tag_id);
+    ret = media_tag_delete_from_db(tag_id);
 </pre>
 </li>
 
 <li>When no longer needed, destroy the handle:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_tag_destroy(tag_handle);
+    ret = media_tag_destroy(tag_handle);
 }
 </pre>
 </li>
@@ -1733,14 +1733,14 @@ tag_list = NULL;
 void
 storage_cb(media_storage_h storage, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_storage_h new_storage = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;media_storage_clone(&amp;new_storage, storage);
+    media_storage_h new_storage = NULL;
+    media_storage_clone(&amp;new_storage, storage);
 
-&nbsp;&nbsp;&nbsp;&nbsp;GList **list = (GList**)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;*list = g_list_append(*list, new_media);
+    GList **list = (GList**)user_data;
+    *list = g_list_append(*list, new_media);
 }
 </pre></li>
-<li>To find the storages, call the <code>media_storage_foreach_storage_from_db()</code> function with the defined callback. After the callback has created the storage list, you can access the storage details with various <code>media_storage_get_XXX()</code> functions. 
+<li>To find the storages, call the <code>media_storage_foreach_storage_from_db()</code> function with the defined callback. After the callback has created the storage list, you can access the storage details with various <code>media_storage_get_XXX()</code> functions.
 <pre class="prettyprint">
 char *id = NULL;
 char *name = NULL;
@@ -1750,25 +1750,25 @@ media_storage_h storage = NULL;
 
 ret = media_storage_foreach_storage_from_db(NULL, storage_cb, &amp;storage_list);
 if (ret != MEDIA_CONTENT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;media_storage_foreach_storage_from_db failed: %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "media_storage_foreach_storage_from_db failed: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
+    int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; g_list_length(storage_list); i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;storage = (media_storage_h)g_list_nth_data(storage_list, i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_storage_get_id(new_storage, &amp;id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_storage_get_name(new_storage, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_storage_get_path(new_storage, &amp;path);
+    for (i = 0; i &lt; g_list_length(storage_list); i++) {
+        storage = (media_storage_h)g_list_nth_data(storage_list, i);
+        media_storage_get_id(new_storage, &amp;id);
+        media_storage_get_name(new_storage, &amp;name);
+        media_storage_get_path(new_storage, &amp;path);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;id:[%s] name:[%s] path:[%s]&quot;, id, name, path);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "id:[%s] name:[%s] path:[%s]", id, name, path);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(storage);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        free(id);
+        free(name);
+        free(storage);
+    }
 }
 </pre></li>
 </ol>
@@ -1777,22 +1777,22 @@ if (ret != MEDIA_CONTENT_ERROR_NONE) {
  <h2 id="find_groups" name="find_groups">Finding Media Item Groups</h2>
 
  <p>A group is a collection of media items which have the same value of a given property. For example, if the property is the artist, there are as many groups as there are artists, and each group consists of items by the same artist. The possible groups are determined by the <code>media_group_e</code> enumerator values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gae17fa4b89b29bafd9b8a123138039655">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gae17fa4b89b29bafd9b8a123138039655">wearable</a> applications), such as <code>MEDIA_CONTENT_GROUP_ARTIST</code> and <code>MEDIA_CONTENT_GROUP_MIME_TYPE</code>.</p>
- 
+
 <p>To find media item groups and filter the results:</p>
 
 <ol>
 <li>
 <p>To find the media items satisfying certain criteria, or modify the results in a specific way, create a filter and set its properties.</p>
-<p>The following example filters media items so that only items whose display name ends with &quot;.jpg&quot; are included in the result (the &#39;%&#39; characters act as wildcards in the filter query, and they must be escaped using another &#39;%&#39; character to avoid compiler warnings). For more information about the filter properties, see <a href="#filter">Setting up a Filter</a>.</p>
+<p>The following example filters media items so that only items whose display name ends with ".jpg" are included in the result (the '%' characters act as wildcards in the filter query, and they must be escaped using another '%' character to avoid compiler warnings). For more information about the filter properties, see <a href="#filter">Setting up a Filter</a>.</p>
 <pre class="prettyprint">
 filter_h filter;
 
 media_filter_create(&amp;filter);
 
 #define BUFLEN 200 /* This is just an example */
-char buf[BUFLEN] = {&#39;\0&#39;};
+char buf[BUFLEN] = {'\0'};
 
-snprintf(buf, BUFLEN, &quot;%s LIKE &#39;%%.jpg&#39;&quot;, MEDIA_DISPLAY_NAME);
+snprintf(buf, BUFLEN, "%s LIKE '%%.jpg'", MEDIA_DISPLAY_NAME);
 media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);
 </pre></li>
 <li>To group media files based on the MIME type:
@@ -1805,7 +1805,7 @@ media_group_e group = MEDIA_CONTENT_GROUP_MIME_TYPE;
 int count = -1;
 
 media_group_get_group_count_from_db(NULL, group, &amp;count);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Group count: %d\n&quot;, count);
+dlog_print(DLOG_DEBUG, LOG_TAG, "Group count: %d\n", count);
 </pre>
 
 <p>Since the filter (first parameter) is set to <code>NULL</code>, no filtering is performed and all groups are counted.</p></li>
@@ -1847,41 +1847,41 @@ group_cb(const char *name, void *user_data)
 <li>Once you have the group name and identifier (passed in <code>user_data</code>), you can read the group information:
 <ul>
 <li>
-<p>Get the number of items in the group using the <code>media_group_get_media_count_from_db()</code> function.</p> 
+<p>Get the number of items in the group using the <code>media_group_get_media_count_from_db()</code> function.</p>
 <p>The third parameter is the filter. If it is set to <code>NULL</code>, all items in the group are counted.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;media_group_e group = (media_group_e) user_data;
+    media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
+    media_group_e group = (media_group_e) user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Group name: %s\n&quot;, name);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "\n");
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Group name: %s\n", name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;int count = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;media_group_get_media_count_from_db(name, group, NULL, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Media count in group: %d\n&quot;, count);
+    int count = -1;
+    media_group_get_media_count_from_db(name, group, NULL, &amp;count);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Media count in group: %d\n", count);
 </pre></li>
 <li>
 <p>Get all items in the group using the <code>media_group_foreach_media_from_db()</code> function. Define a callback (<code>media_cb()</code>) for the function to be triggered for each found item.</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;media_group_foreach_media_from_db(name, group, NULL, media_cb, NULL);
+    media_group_foreach_media_from_db(name, group, NULL, media_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 bool
 media_cb(media_info_h media, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
+    media_content_error_e ret = MEDIA_CONTENT_ERROR_NONE;
+    char *name = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;media_info_get_display_name(media, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (name != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Name: %s\n&quot;, name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(name);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    media_info_get_display_name(media, &amp;name);
+    if (name != NULL) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Name: %s\n", name);
+        free(name);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre></li></ul></li></ol>
 
@@ -1891,341 +1891,341 @@ media_cb(media_info_h media, void *user_data)
 
 <p>The following tables list the information available about the media files.</p>
 
-<p align="center" class="Table"><strong>Table: General information</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: General information</strong></p>
+<table>
+   <tbody>
+    <tr>
      <th>Metadata name</th>
-     <th>Description</th> 
-    </tr> 
-    <tr> 
+     <th>Description</th>
+    </tr>
+    <tr>
      <td><code>Media ID</code></td>
      <td>ID of the media content</td>
-    </tr> 
-     <tr> 
+    </tr>
+     <tr>
      <td><code>File path</code></td>
      <td>Path of the media content</td>
     </tr>
     <tr>
      <td><code>Display name</code></td>
      <td>Display name of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Media type</code></td> 
+    </tr>
+    <tr>
+     <td><code>Media type</code></td>
      <td>The media type of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Mime type</code></td> 
+    </tr>
+    <tr>
+     <td><code>Mime type</code></td>
      <td>Mime type of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Size</code></td> 
+    </tr>
+    <tr>
+     <td><code>Size</code></td>
      <td>File size of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Added time</code></td> 
+    </tr>
+    <tr>
+     <td><code>Added time</code></td>
      <td>The time the media content was added in the database</td>
-    </tr> 
-    <tr> 
-     <td><code>Modified time</code></td> 
+    </tr>
+    <tr>
+     <td><code>Modified time</code></td>
      <td>The last modification time of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Timeline</code></td> 
+    </tr>
+    <tr>
+     <td><code>Timeline</code></td>
      <td>The time the media content was created
         <p>You can use this value to sort the content.</p></td>
-    </tr> 
-    <tr> 
-     <td><code>Thumbnail path</code></td> 
+    </tr>
+    <tr>
+     <td><code>Thumbnail path</code></td>
      <td>Path of the stored thumbnail image of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Description</code></td> 
+    </tr>
+    <tr>
+     <td><code>Description</code></td>
      <td>Description of the media content</td>
     </tr>
-    <tr> 
-     <td><code>Longitude</code></td> 
+    <tr>
+     <td><code>Longitude</code></td>
      <td>Longitude of the media content</td>
-    </tr> 
-     <tr> 
-     <td><code>Latitude</code></td> 
+    </tr>
+     <tr>
+     <td><code>Latitude</code></td>
      <td>Latitude of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Altitude</code></td> 
+    </tr>
+    <tr>
+     <td><code>Altitude</code></td>
      <td>Altitude of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Weather</code></td> 
+    </tr>
+    <tr>
+     <td><code>Weather</code></td>
      <td>Weather information of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Rating</code></td> 
+    </tr>
+    <tr>
+     <td><code>Rating</code></td>
      <td>Rating of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Favorite</code></td> 
+    </tr>
+    <tr>
+     <td><code>Favorite</code></td>
      <td>Favorite of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Author</code></td> 
+    </tr>
+    <tr>
+     <td><code>Author</code></td>
      <td>The author of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Provider</code></td> 
+    </tr>
+    <tr>
+     <td><code>Provider</code></td>
      <td>Provider of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Content name</code></td> 
+    </tr>
+    <tr>
+     <td><code>Content name</code></td>
      <td>Content name of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Title</code></td> 
+    </tr>
+    <tr>
+     <td><code>Title</code></td>
      <td>Title of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Category</code></td> 
+    </tr>
+    <tr>
+     <td><code>Category</code></td>
      <td>Category of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Location tag</code></td> 
+    </tr>
+    <tr>
+     <td><code>Location tag</code></td>
      <td>Location tag of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Age rating</code></td> 
+    </tr>
+    <tr>
+     <td><code>Age rating</code></td>
      <td>Age rating of the media content</td>
     </tr>
-    <tr> 
-     <td><code>Keyword</code></td> 
+    <tr>
+     <td><code>Keyword</code></td>
      <td>Keyword of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Is DRM</code></td> 
+    </tr>
+    <tr>
+     <td><code>Is DRM</code></td>
      <td>Check flag for DRM content</td>
-    </tr> 
-    <tr> 
-     <td><code>Storage type</code></td> 
+    </tr>
+    <tr>
+     <td><code>Storage type</code></td>
      <td>Storage type of the media content</td>
-    </tr> 
-       <tr> 
-     <td><code>Played count</code></td> 
+    </tr>
+       <tr>
+     <td><code>Played count</code></td>
      <td>Played count of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Played time</code></td> 
+    </tr>
+    <tr>
+     <td><code>Played time</code></td>
      <td>Last played time of the media content</td>
-    </tr> 
-    <tr> 
-     <td><code>Played position</code></td> 
+    </tr>
+    <tr>
+     <td><code>Played position</code></td>
      <td>Last played position of the media content</td>
-    </tr> 
-       
-   </tbody> 
-  </table> 
+    </tr>
+
+   </tbody>
+  </table>
 
 <p>For metadata of an audio file, call the <code>media_info_get_audio()</code> function with the media handle.</p>
-<p align="center" class="Table"><strong>Table: Audio metadata (only for audio files)</strong></p> 
- <table> 
-   <tbody> 
-    <tr> 
-     <th>Metadata name</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>Media ID</code></td> 
+<p align="center" class="Table"><strong>Table: Audio metadata (only for audio files)</strong></p>
+ <table>
+   <tbody>
+    <tr>
+     <th>Metadata name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>Media ID</code></td>
      <td>Media ID of the audio content
         <p>This value is same as the media ID in general information.</p></td>
-    </tr> 
-     <tr> 
-     <td><code>Album</code></td> 
+    </tr>
+     <tr>
+     <td><code>Album</code></td>
      <td>Album information of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><code>Artist</code></td> 
+    </tr>
+    <tr>
+     <td><code>Artist</code></td>
      <td>Artist of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><code>Album Artist</code></td> 
-     <td>Album artist of the audio content 
+    </tr>
+    <tr>
+     <td><code>Album Artist</code></td>
+     <td>Album artist of the audio content
         <p>The artist and album artist can be the same.</p></td>
-    </tr> 
-    <tr> 
-     <td><code>Genre</code></td> 
+    </tr>
+    <tr>
+     <td><code>Genre</code></td>
      <td>Genre of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><code>Composer</code></td> 
+    </tr>
+    <tr>
+     <td><code>Composer</code></td>
      <td>Composer of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><code>Year</code></td> 
+    </tr>
+    <tr>
+     <td><code>Year</code></td>
      <td>The year the audio content was created</td>
-    </tr> 
-    <tr> 
-     <td><code>Recorded date</code></td> 
+    </tr>
+    <tr>
+     <td><code>Recorded date</code></td>
      <td>The date the audio content was recorded</td>
-    </tr> 
-    <tr> 
-     <td><code>Copyright</code></td> 
+    </tr>
+    <tr>
+     <td><code>Copyright</code></td>
      <td>Copyright information of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><code>Track number</code></td> 
+    </tr>
+    <tr>
+     <td><code>Track number</code></td>
      <td>Track number of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><code>Bit rate</code></td> 
+    </tr>
+    <tr>
+     <td><code>Bit rate</code></td>
      <td>Bit rate of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><code>Bit per sample</code></td> 
-     <td>Bit per sample of the audio content 
+    </tr>
+    <tr>
+     <td><code>Bit per sample</code></td>
+     <td>Bit per sample of the audio content
         <p>The bit per sample is the same as the sample format. The sample format is the number of digits in the digital representation of each sample.</p></td>
-    </tr> 
-    <tr> 
-     <td><code>Sample rate</code></td> 
+    </tr>
+    <tr>
+     <td><code>Sample rate</code></td>
      <td>Sample rate of the audio content</td>
-    </tr> 
-     <tr> 
-     <td><code>Channel</code></td> 
+    </tr>
+     <tr>
+     <td><code>Channel</code></td>
      <td>Channel information of the audio content</td>
-    </tr> 
-    <tr> 
-     <td><code>Duration</code></td> 
+    </tr>
+    <tr>
+     <td><code>Duration</code></td>
      <td>Duration of the audio content</td>
-    </tr> 
-   </tbody> 
+    </tr>
+   </tbody>
   </table>
- 
+
 <p>For metadata of an image file, call the <code>media_info_get_image()</code> function with the media handle.</p>
 
-<p align="center" class="Table"><strong>Table: Image metadata (only for image files)</strong></p> 
- <table> 
-   <tbody> 
-    <tr> 
-     <th>Metadata name</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>Media ID</code></td> 
+<p align="center" class="Table"><strong>Table: Image metadata (only for image files)</strong></p>
+ <table>
+   <tbody>
+    <tr>
+     <th>Metadata name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>Media ID</code></td>
      <td>Media ID of the image
         <p>This value is the same as the media ID in the general information.</p></td>
-    </tr> 
-    <tr> 
-     <td><code>Width</code></td> 
+    </tr>
+    <tr>
+     <td><code>Width</code></td>
      <td>Width of the image</td>
-    </tr> 
-    <tr> 
-     <td><code>Height</code></td> 
+    </tr>
+    <tr>
+     <td><code>Height</code></td>
      <td>Height of the image</td>
-    </tr> 
-       <tr> 
-     <td><code>Exposure time</code></td> 
+    </tr>
+       <tr>
+     <td><code>Exposure time</code></td>
      <td>Exposure time of the image</td>
-    </tr> 
-    <tr> 
-     <td><code>F-number</code></td> 
+    </tr>
+    <tr>
+     <td><code>F-number</code></td>
      <td>F-number of the image</td>
-    </tr> 
-    <tr> 
-     <td><code>ISO</code></td> 
+    </tr>
+    <tr>
+     <td><code>ISO</code></td>
      <td>ISO information of the image</td>
-    </tr> 
-    <tr> 
-     <td><code>Model</code></td> 
+    </tr>
+    <tr>
+     <td><code>Model</code></td>
      <td>Model name of the image</td>
     </tr>
-    <tr> 
-     <td><code>Orientation</code></td> 
+    <tr>
+     <td><code>Orientation</code></td>
      <td>Orientation information of the image</td>
-    </tr> 
-    <tr> 
-     <td><code>Date taken</code></td> 
+    </tr>
+    <tr>
+     <td><code>Date taken</code></td>
      <td>The time the image was created
         <p>You can get this information from the EXIF tag. If there is no EXIF tag for the image, set the created time in the file system.</p></td>
-    </tr> 
-    <tr> 
-     <td><code>Is burstshot</code></td> 
+    </tr>
+    <tr>
+     <td><code>Is burstshot</code></td>
      <td>Check flag for a burst shot of the image
         <p>The burst shot is a continuous shooting mode.</p></td>
-    </tr> 
-    <tr> 
-     <td><code>Burstshot ID</code></td> 
-     <td>ID of a burst shot image 
+    </tr>
+    <tr>
+     <td><code>Burstshot ID</code></td>
+     <td>ID of a burst shot image
         <p>Assign the same ID to the burst shooting mode.</p></td>
-    </tr> 
-   </tbody> 
-  </table>  
-<p>For metadata of a video file, call <code>withmedia_info_get_video()</code> function with the media handle.</p>  
- <p align="center" class="Table"><strong>Table: Video metadata (only for video files)</strong></p>   
-  <table> 
-   <tbody> 
-    <tr> 
-     <th>Metadata name</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>Media ID</code></td> 
+    </tr>
+   </tbody>
+  </table>
+<p>For metadata of a video file, call <code>withmedia_info_get_video()</code> function with the media handle.</p>
+ <p align="center" class="Table"><strong>Table: Video metadata (only for video files)</strong></p>
+  <table>
+   <tbody>
+    <tr>
+     <th>Metadata name</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>Media ID</code></td>
      <td>The media ID of the video content
         <p>This value is same with media ID of general information.</p></td>
-    </tr> 
-     <tr> 
-     <td><code>Album</code></td> 
+    </tr>
+     <tr>
+     <td><code>Album</code></td>
      <td>Album of the video content</td>
-    </tr> 
-    <tr> 
-     <td><code>Artist</code></td> 
+    </tr>
+    <tr>
+     <td><code>Artist</code></td>
      <td>Artist of the video content</td>
-    </tr> 
-    <tr> 
-     <td><code>Album artist</code></td> 
+    </tr>
+    <tr>
+     <td><code>Album artist</code></td>
      <td>Album artist of the video content</td>
-    </tr> 
-    <tr> 
-     <td><code>Genre</code></td> 
+    </tr>
+    <tr>
+     <td><code>Genre</code></td>
      <td>Genre of the video content</td>
-    </tr> 
-    <tr> 
-     <td><code>Composer</code></td> 
+    </tr>
+    <tr>
+     <td><code>Composer</code></td>
      <td>Media composer of the video content</td>
-    </tr> 
+    </tr>
     <tr>
-     <td><code>Year</code></td> 
+     <td><code>Year</code></td>
      <td>The year the video content was created</td>
-    </tr> 
-    <tr> 
-     <td><code>Recorded date</code></td> 
+    </tr>
+    <tr>
+     <td><code>Recorded date</code></td>
      <td>The date the video content was recorded</td>
-    </tr> 
-    <tr> 
-     <td><code>Copyright</code></td> 
+    </tr>
+    <tr>
+     <td><code>Copyright</code></td>
      <td>Copyright of the video content</td>
-    </tr> 
-    <tr> 
-     <td><code>Track number</code></td> 
+    </tr>
+    <tr>
+     <td><code>Track number</code></td>
      <td>Track number of the video content</td>
-    </tr> 
-    <tr> 
-     <td><code>Bit rate</code></td> 
+    </tr>
+    <tr>
+     <td><code>Bit rate</code></td>
      <td>Bit rate of the video content</td>
-    </tr> 
-    <tr> 
-     <td><code>Duration</code></td> 
+    </tr>
+    <tr>
+     <td><code>Duration</code></td>
      <td>Duration of the video content</td>
-    </tr> 
-    <tr> 
-     <td><code>Width</code></td> 
+    </tr>
+    <tr>
+     <td><code>Width</code></td>
      <td>Width of the video content</td>
-    </tr> 
-     <tr> 
-     <td><code>Height</code></td> 
+    </tr>
+     <tr>
+     <td><code>Height</code></td>
      <td>Height of the video content</td>
-    </tr> 
-   </tbody> 
-  </table>  
-  
+    </tr>
+   </tbody>
+  </table>
+
+
 
- 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/media/media_controller_n.htm b/org.tizen.guides/html/native/media/media_controller_n.htm
index 3a75f20..866dfbe 100644 (file)
--- a/org.tizen.guides/html/native/media/media_controller_n.htm
+++ b/org.tizen.guides/html/native/media/media_controller_n.htm
@@ -54,138 +54,138 @@
        <p>To transfer the information at the client request, the media controller server updates the state information while the application is active. If the application is terminated when the client request arrives, the media controller server transfers the latest information.</p></li>
     <li>Sending and processing commands
         <p>You can <a href="#send_media">send a command</a> to the server from the client side, and then process the command on the server side.</p>
-                       <p>The client can request information from the server, and receive it through a callback.</p> 
+                       <p>The client can request information from the server, and receive it through a callback.</p>
        <p>The following tables define the various information the client can receive.</p>
-       <p align="center" class="Table"><strong>Table: Media controller server state attributes</strong></p> 
+       <p align="center" class="Table"><strong>Table: Media controller server state attributes</strong></p>
        <table>
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td colspan="2"><strong>Server states</strong></td> 
-    </tr>      
-    <tr> 
-     <td><code>MC_SERVER_ACTIVATE</code></td> 
-     <td>Requested media controller server is active</td> 
-    </tr> 
-     <tr> 
-     <td><code>MC_SERVER_DEACTIVATE</code></td> 
-     <td>Requested media controller server is not active</td> 
-    </tr> 
-    <tr> 
-     <td colspan="2"><strong>Playback states</strong></td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_PLAYBACK_STATE_NONE</code></td> 
-     <td>No history of media playback</td> 
-    </tr> 
-     <tr> 
-     <td><code>MC_PLAYBACK_STATE_PLAYING</code></td> 
-     <td>Playback state of playing</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_PLAYBACK_STATE_PAUSED</code></td> 
-     <td>Playback state of paused</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_PLAYBACK_STATE_STOPPED</code></td> 
-     <td>Playback state of stopped</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_PLAYBACK_STATE_NEXT_FILE</code></td> 
-     <td>Playback state of next file</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_PLAYBACK_STATE_PREV_FILE</code></td> 
-     <td>Playback state of previous file</td> 
-    </tr> 
-     <tr> 
-     <td><code>MC_PLAYBACK_STATE_FAST_FORWARD</code></td> 
-     <td>Playback state of fast forward</td> 
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Description</th>
     </tr>
-     <tr> 
-     <td><code>MC_PLAYBACK_STATE_REWIND</code></td> 
-     <td>Playback state of rewind</td> 
-    </tr>      
-    <tr> 
-     <td colspan="2"><strong>Shuffle mode states</strong></td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_SHUFFLE_MODE_ON</code></td> 
-     <td>Shuffle mode is on</td> 
-    </tr> 
-     <tr> 
-     <td><code>MC_SHUFFLE_MODE_OFF</code></td> 
-     <td>Shuffle mode is off</td> 
-    </tr>      
-    <tr> 
-     <td colspan="2"><strong>Repeat mode states</strong></td> 
-    </tr>      
-    <tr> 
-     <td><code>MC_REPEAT_MODE_ON</code></td> 
-     <td>Repeat mode is on</td> 
-    </tr> 
-     <tr> 
-     <td><code>MC_REPEAT_MODE_OFF</code></td> 
-     <td>Repeat mode is off</td> 
-    </tr>      
-   </tbody> 
-  </table> 
+    <tr>
+     <td colspan="2"><strong>Server states</strong></td>
+    </tr>
+    <tr>
+     <td><code>MC_SERVER_ACTIVATE</code></td>
+     <td>Requested media controller server is active</td>
+    </tr>
+     <tr>
+     <td><code>MC_SERVER_DEACTIVATE</code></td>
+     <td>Requested media controller server is not active</td>
+    </tr>
+    <tr>
+     <td colspan="2"><strong>Playback states</strong></td>
+    </tr>
+    <tr>
+     <td><code>MC_PLAYBACK_STATE_NONE</code></td>
+     <td>No history of media playback</td>
+    </tr>
+     <tr>
+     <td><code>MC_PLAYBACK_STATE_PLAYING</code></td>
+     <td>Playback state of playing</td>
+    </tr>
+    <tr>
+     <td><code>MC_PLAYBACK_STATE_PAUSED</code></td>
+     <td>Playback state of paused</td>
+    </tr>
+    <tr>
+     <td><code>MC_PLAYBACK_STATE_STOPPED</code></td>
+     <td>Playback state of stopped</td>
+    </tr>
+    <tr>
+     <td><code>MC_PLAYBACK_STATE_NEXT_FILE</code></td>
+     <td>Playback state of next file</td>
+    </tr>
+    <tr>
+     <td><code>MC_PLAYBACK_STATE_PREV_FILE</code></td>
+     <td>Playback state of previous file</td>
+    </tr>
+     <tr>
+     <td><code>MC_PLAYBACK_STATE_FAST_FORWARD</code></td>
+     <td>Playback state of fast forward</td>
+    </tr>
+     <tr>
+     <td><code>MC_PLAYBACK_STATE_REWIND</code></td>
+     <td>Playback state of rewind</td>
+    </tr>
+    <tr>
+     <td colspan="2"><strong>Shuffle mode states</strong></td>
+    </tr>
+    <tr>
+     <td><code>MC_SHUFFLE_MODE_ON</code></td>
+     <td>Shuffle mode is on</td>
+    </tr>
+     <tr>
+     <td><code>MC_SHUFFLE_MODE_OFF</code></td>
+     <td>Shuffle mode is off</td>
+    </tr>
+    <tr>
+     <td colspan="2"><strong>Repeat mode states</strong></td>
+    </tr>
+    <tr>
+     <td><code>MC_REPEAT_MODE_ON</code></td>
+     <td>Repeat mode is on</td>
+    </tr>
+     <tr>
+     <td><code>MC_REPEAT_MODE_OFF</code></td>
+     <td>Repeat mode is off</td>
+    </tr>
+   </tbody>
+  </table>
     <p align="center" class="Table"><strong>Table: Media controller server metadata attributes</strong></p>
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Description</th> 
-    </tr> 
-     <tr> 
-     <td><code>MC_META_MEDIA_TITLE</code></td> 
-     <td>Title of the latest content in the media controller server</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_META_MEDIA_ARTIST</code></td> 
-     <td>Artist of the latest content in the media controller server</td> 
-    </tr> 
-     <tr> 
-     <td><code>MC_META_MEDIA_ALBUM</code></td> 
-     <td>Album name of the latest content in the media controller server</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_META_MEDIA_AUTHOR</code></td> 
-     <td>Author of the latest content in the media controller server</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_META_MEDIA_GENRE</code></td> 
-     <td>Genre of the latest content in the media controller server</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_META_MEDIA_DURATION</code></td> 
-     <td>Duration of the latest content in the media controller server</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_META_MEDIA_DATE</code></td> 
-     <td>Date of the latest content in the media controller server</td> 
-    </tr> 
-    <tr> 
-     <td><code>MC_META_MEDIA_COPYRIGHT</code></td> 
-     <td>Copyright of the latest content in the media controller server</td> 
-    </tr>     
-    <tr> 
-     <td><code>MC_META_MEDIA_DESCRIPTION</code></td> 
-     <td>Description of the latest content in the media controller server</td> 
+<table>
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Description</th>
+    </tr>
+     <tr>
+     <td><code>MC_META_MEDIA_TITLE</code></td>
+     <td>Title of the latest content in the media controller server</td>
+    </tr>
+    <tr>
+     <td><code>MC_META_MEDIA_ARTIST</code></td>
+     <td>Artist of the latest content in the media controller server</td>
+    </tr>
+     <tr>
+     <td><code>MC_META_MEDIA_ALBUM</code></td>
+     <td>Album name of the latest content in the media controller server</td>
+    </tr>
+    <tr>
+     <td><code>MC_META_MEDIA_AUTHOR</code></td>
+     <td>Author of the latest content in the media controller server</td>
+    </tr>
+    <tr>
+     <td><code>MC_META_MEDIA_GENRE</code></td>
+     <td>Genre of the latest content in the media controller server</td>
+    </tr>
+    <tr>
+     <td><code>MC_META_MEDIA_DURATION</code></td>
+     <td>Duration of the latest content in the media controller server</td>
+    </tr>
+    <tr>
+     <td><code>MC_META_MEDIA_DATE</code></td>
+     <td>Date of the latest content in the media controller server</td>
+    </tr>
+    <tr>
+     <td><code>MC_META_MEDIA_COPYRIGHT</code></td>
+     <td>Copyright of the latest content in the media controller server</td>
+    </tr>
+    <tr>
+     <td><code>MC_META_MEDIA_DESCRIPTION</code></td>
+     <td>Description of the latest content in the media controller server</td>
     </tr>
-     <tr> 
-     <td><code>MC_META_MEDIA_TRACK_NUM</code></td> 
-     <td>Track number of the latest content in the media controller server</td> 
+     <tr>
+     <td><code>MC_META_MEDIA_TRACK_NUM</code></td>
+     <td>Track number of the latest content in the media controller server</td>
     </tr>
-     <tr> 
-     <td><code>MC_META_MEDIA_PICTURE</code></td> 
-     <td>Album art of the latest content in the media controller server</td> 
+     <tr>
+     <td><code>MC_META_MEDIA_PICTURE</code></td>
+     <td>Album art of the latest content in the media controller server</td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
  </li></ul>
 
 <h2 id="prerequisites">Prerequisites</h2>
@@ -298,8 +298,8 @@ char *server_name = NULL;
 mc_server_state_e server_state;
 
 ret = mc_client_get_latest_server_info(g_mc_client, &amp;server_name, &amp;server_state);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Server Name: %s, Server state: %d\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server_name, server_state);
+dlog_print(DLOG_DEBUG, LOG_TAG, "Server Name: %s, Server state: %d\n",
+           server_name, server_state);
 </pre>
 
 </li>
@@ -317,7 +317,7 @@ mc_playback_states_e playback_state;
 ret = mc_client_get_server_playback_info(g_client_h, server_name, &amp;playback);
 
 ret = mc_client_get_playback_state(playback, &amp;playback_state);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Playback State: %d\n&quot;, playback_state);
+dlog_print(DLOG_DEBUG, LOG_TAG, "Playback State: %d\n", playback_state);
 </pre>
 
 <p>The <code>mc_client_get_playback_state()</code> function retrieves the playback state from the playback information returned by the <code>mc_client_get_server_playback_info()</code> function.</p>
@@ -361,8 +361,8 @@ char *server_name = NULL;
 mc_server_state_e server_state;
 
 ret = mc_client_get_latest_server_info(g_mc_client, &amp;server_name, &amp;server_state);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Server Name: %s, Server state: %d\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server_name, server_state);
+dlog_print(DLOG_DEBUG, LOG_TAG, "Server Name: %s, Server state: %d\n",
+           server_name, server_state);
 </pre>
 
 </li>
@@ -420,8 +420,8 @@ ret = mc_server_create(&amp;g_server_h);
 void
 command_received_cb(const char* client_name, mc_playback_states_e state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Client Name: %s, Playback state: %d\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;client_name, state);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Client Name: %s, Playback state: %d\n",
+               client_name, state);
 }
 </pre>
 
@@ -451,7 +451,7 @@ command_received_cb(const char* client_name, mc_playback_states_e state, void *u
 
 <pre class="prettyprint">
 ret = mc_server_set_playback_state_command_received_cb(g_mc_server,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;command_received_cb, NULL);
+                                                       command_received_cb, NULL);
 </pre>
 
 </li>
diff --git a/org.tizen.guides/html/native/media/media_conversions_n.htm b/org.tizen.guides/html/native/media/media_conversions_n.htm
index 80f6cd7..2b20773 100644 (file)
--- a/org.tizen.guides/html/native/media/media_conversions_n.htm
+++ b/org.tizen.guides/html/native/media/media_conversions_n.htm
@@ -43,7 +43,7 @@
                                <li><a href="#set">Setting Parameters</a></li>
                                <li><a href="#get">Monitoring the Transcoding Progress</a></li>
                        </ul></li>
-        </ul>          
+        </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API for Mobile Native</a></li>
@@ -67,10 +67,10 @@
 
 <h2 id="codecs">Media Codecs</h2>
 
-<p>Media codec provides interfaces for encoding and decoding audio and video data.</p> 
+<p>Media codec provides interfaces for encoding and decoding audio and video data.</p>
+
+<p>To use codecs:</p>
 
-<p>To use codecs:</p> 
-  
 <ol><li><p><a href="#prepare">Create a handle for the codec instance</a> with the <code>mediacodec_create()</code> function. After a successful handle creation, your system can use the codec. </p></li>
 
 <li><p>Set the codec configuration with the <code>mediacodec_set_codec()</code>, and <code>mediacodec_set_vdec_info()</code> or <code>mediacodec_set_venc_info()</code> functions. </p>
@@ -78,12 +78,12 @@
 
 <li><p>Decode and encode with the <code>mediacodec_process_input()</code> and <code>mediacodec_get_output()</code> functions.</p></li></ol>
 
-<p>A single <code>MediaCodec</code> instance handles 1 specific type of data (such as aac audio or H.264 video), and can encode or decode. The codec operates on &quot;raw&quot; data, so strip off any file headers (such as ID3 tags).</p>
+<p>A single <code>MediaCodec</code> instance handles 1 specific type of data (such as aac audio or H.264 video), and can encode or decode. The codec operates on "raw" data, so strip off any file headers (such as ID3 tags).</p>
 
-  
-  <p>The following figures illustrate the general media state changes.</p> 
-  <p align="center"><strong>Figure: Media state changes</strong></p> 
-  <p align="center"><img src="../../images/codec_state.png" alt="Media state changes" /></p> 
+
+  <p>The following figures illustrate the general media state changes.</p>
+  <p align="center"><strong>Figure: Media state changes</strong></p>
+  <p align="center"><img src="../../images/codec_state.png" alt="Media state changes" /></p>
 
 <p>After you have initialized the codecs, you can:</p>
 
@@ -99,7 +99,7 @@
 <li>Make scale and frame rate changes
 <p>Since video file size and format changes are possible, there is attachment flexibility for email, MMS, and SMS messaging. You can also extract a thumbnail from certain video chapters, and chapter previews are available.</p></li>
 <li>Trim
-<p>A trim chapter is available in the video editor.</p></li></ul> 
+<p>A trim chapter is available in the video editor.</p></li></ul>
 
 <p>With the Video Util API you can:</p>
 <ul><li><a href="#prepare">Set up the video utilities</a></li>
@@ -109,12 +109,12 @@
 
 <p>The following figure shows the result of the video file size change (due to scaling and container and codec format change).</p>
 
- <p align="center"><strong>Figure: Transcoder</strong></p> 
+ <p align="center"><strong>Figure: Transcoder</strong></p>
  <p align="center"><img src="../../images/transcoder.png" alt="Transcoder" /></p>
 
- 
+
  <p>The following table lists the supported audio and video codecs (decoder).</p>
- 
+
   <p align="center" class="Table"><strong>Table: Decoders</strong></p>
  <table border="1">
   <tbody>
@@ -156,7 +156,7 @@
     </tr>
        <tr>
       <td>AMR-WB</td>
-         <td> </td> 
+         <td> </td>
     </tr>
   </tbody>
 </table>
@@ -170,7 +170,7 @@
       <th style="text-align:center;margin-left:auto;margin-right:auto;">Audio codec</th>
          <th style="text-align:center;margin-left:auto;margin-right:auto;">Video codec</th>
      </tr>
-       <tr>    
+       <tr>
          <td>AAC LC</td>
       <td>MPEG-1</td>
     </tr>
@@ -286,9 +286,9 @@ ret = mediacodec_set_input_buffer_used_cb(mediacodec, _input_buffer_used_cb, NUL
 static void
 _input_buffer_used_cb(media_packet_h pkt, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_destroy(pkt);
+    media_packet_destroy(pkt);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 
@@ -300,8 +300,8 @@ _input_buffer_used_cb(media_packet_h pkt, void *user_data)
 
 <pre class="prettyprint">
 ret = mediacodec_set_output_buffer_available_cb(mediacodec,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_output_buffer_available_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mediacodec);
+                                                _output_buffer_available_cb,
+                                                mediacodec);
 </pre>
 
 <p>If the <code>media_packet</code> is dequeued from the codec, this callback is invoked.</p>
@@ -312,15 +312,15 @@ ret = mediacodec_set_output_buffer_available_cb(mediacodec,
 static void
 _output_buffer_available_cb(media_packet_h pkt, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_h out_pkt;
-&nbsp;&nbsp;&nbsp;&nbsp;mediacodec_h mediacodec = (mediacodec_h)user_data;
+    media_packet_h out_pkt;
+    mediacodec_h mediacodec = (mediacodec_h)user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (pkt != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mediacodec_get_output(mediacodec, &amp;out_pkt, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_packet_destroy(out_pkt);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (pkt != NULL) {
+        mediacodec_get_output(mediacodec, &amp;out_pkt, 0);
+        media_packet_destroy(out_pkt);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 
@@ -344,11 +344,11 @@ _output_buffer_available_cb(media_packet_h pkt, void *user_data)
 
 <pre class="prettyprint">
 unsigned char nal[48] = {0x00, 0x00, 0x00, 0x01, 0x67, 0x4D, 0x40, 0x33,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0x9A, 0x73, 0x80, 0xA0, 0x08, 0xB4, 0x20, 0x00,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0x32, 0xE9, 0xE0, 0x09, 0x89, 0x68, 0x11, 0xE3,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0x06, 0x23, 0xC0, 0x00, 0x00, 0x00, 0x01, 0x68,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0xEE, 0x3C, 0x80, 0x00, 0x00, 0x00, 0x01, 0x65,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0x88, 0x80, 0x01, 0x48, 0x00, 0x06, 0x57, 0xFD};
+                         0x9A, 0x73, 0x80, 0xA0, 0x08, 0xB4, 0x20, 0x00,
+                         0x32, 0xE9, 0xE0, 0x09, 0x89, 0x68, 0x11, 0xE3,
+                         0x06, 0x23, 0xC0, 0x00, 0x00, 0x00, 0x01, 0x68,
+                         0xEE, 0x3C, 0x80, 0x00, 0x00, 0x00, 0x01, 0x65,
+                         0x88, 0x80, 0x01, 0x48, 0x00, 0x06, 0x57, 0xFD};
 
 media_format_h fmt;
 media_packet_h pkt;
@@ -374,16 +374,16 @@ ret = media_packet_set_buffer_size(pkt, 48);
 void
 _fill_buffer(media_packet_h pkt, unsigned char *yuv, int width, int height)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
+    int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Y plane */
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_get_video_stride_width(pkt, 0, &amp;stride);
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_get_video_plane_data_ptr(pkt, 0, &amp;data);
+    /* Y plane */
+    media_packet_get_video_stride_width(pkt, 0, &amp;stride);
+    media_packet_get_video_plane_data_ptr(pkt, 0, &amp;data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; height; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memcpy(data, yuv, width);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data += stride;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    for (i = 0; i &lt; height; i++) {
+        memcpy(data, yuv, width);
+        data += stride;
+    }
 }
 </pre>
 
@@ -557,7 +557,7 @@ ret = video_util_set_accurate_mode(video_h, 0);
 <pre class="prettyprint">
 ret = video_util_set_resolution(video_h, 176, 144);
 </pre>
-<p>If the transcoding is performed with the original input (&quot;trim&quot;), both the width and height are 0.</p>
+<p>If the transcoding is performed with the original input ("trim"), both the width and height are 0.</p>
 </li>
 
 <li>
@@ -620,7 +620,7 @@ ret = video_util_destroy(video_h);
         <strong>Note</strong>
         If you do not call the destroy function after the transcoding is complete, you cannot start a new transcoding process, and a memory crash can occur.
     </div>
-       
+
 </li>
 
 </ol>
@@ -639,9 +639,9 @@ ret = video_util_destroy(video_h);
 <p>Check the supported file formats using the <code>video_util_foreach_supported_file_format()</code> function:</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;video_util_foreach_supported_file_format(handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_util_file_supported,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+    video_util_foreach_supported_file_format(handle,
+                                             video_util_file_supported,
+                                             NULL);
 </pre>
 <p>The second parameter specifies the callback that is invoked separately for each supported file format.</p>
 </li>
@@ -651,14 +651,14 @@ error_code =
 static bool
 video_util_file_supported(video_util_file_format_e format, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;format %s\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format == VIDEO_UTIL_FILE_FORMAT_3GP ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_FILE_FORMAT_3GP&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format == VIDEO_UTIL_FILE_FORMAT_MP4 ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_FILE_FORMAT_MP4&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_FILE_FORMAT_MAX&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    dlog_print(DLOG_INFO, LOG_TAG, "format %s\n",
+               format == VIDEO_UTIL_FILE_FORMAT_3GP ?
+               "VIDEO_UTIL_FILE_FORMAT_3GP" :
+               format == VIDEO_UTIL_FILE_FORMAT_MP4 ?
+               "VIDEO_UTIL_FILE_FORMAT_MP4" :
+               "VIDEO_UTIL_FILE_FORMAT_MAX");
+
+    return 0;
 }
 </pre>
 <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html#gad9c070cbb59f3107cefd280ec06e2966">video_util_file_format_e</a> enumeration defines the available file formats.</p>
@@ -681,10 +681,10 @@ ret = video_util_set_file_format(video_h, VIDEO_UTIL_FILE_FORMAT_3GP);
 <p>Check the supported audio and video codecs using the <code>video_util_foreach_supported_audio_codec()</code> and <code>video_util_foreach_supported_video_codec()</code> functions:</p>
 <pre class="prettyprint">
 video_util_foreach_supported_audio_codec(handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_util_audio_supported, NULL);
+                                         video_util_audio_supported, NULL);
 
 video_util_foreach_supported_video_codec(handle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_util_video_supported, NULL);
+                                         video_util_video_supported, NULL);
 </pre>
 <p>The second parameter of both functions specifies the callback that is invoked separately for each supported codec.</p>
 </li>
@@ -694,29 +694,29 @@ video_util_foreach_supported_video_codec(handle,
 static bool
 video_util_audio_supported(video_util_audio_codec_e codec, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;audio codec %s\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;codec==VIDEO_UTIL_AUDIO_CODEC_AAC ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_AUDIO_CODEC_AAC&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;codec==VIDEO_UTIL_AUDIO_CODEC_AMRNB ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_AUDIO_CODEC_AMRNB&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_AUDIO_CODEC_NONE&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    dlog_print(DLOG_INFO, LOG_TAG, "audio codec %s\n",
+               codec==VIDEO_UTIL_AUDIO_CODEC_AAC ?
+               "VIDEO_UTIL_AUDIO_CODEC_AAC" :
+               codec==VIDEO_UTIL_AUDIO_CODEC_AMRNB ?
+               "VIDEO_UTIL_AUDIO_CODEC_AMRNB" :
+               "VIDEO_UTIL_AUDIO_CODEC_NONE");
+
+    return 0;
 }
 
 static bool
 video_util_video_supported(video_util_video_codec_e codec, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;video codec %s\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;codec == VIDEO_UTIL_VIDEO_CODEC_MPEG4 ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_VIDEO_CODEC_MPEG4&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;codec == VIDEO_UTIL_VIDEO_CODEC_H263 ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_VIDEO_CODEC_H263&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;codec == VIDEO_UTIL_VIDEO_CODEC_H264 ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_VIDEO_CODEC_H264" :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VIDEO_UTIL_VIDEO_CODEC_NONE&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    dlog_print(DLOG_INFO, LOG_TAG, "video codec %s\n",
+               codec == VIDEO_UTIL_VIDEO_CODEC_MPEG4 ?
+               "VIDEO_UTIL_VIDEO_CODEC_MPEG4" :
+               codec == VIDEO_UTIL_VIDEO_CODEC_H263 ?
+               "VIDEO_UTIL_VIDEO_CODEC_H263" :
+               codec == VIDEO_UTIL_VIDEO_CODEC_H264 ?
+               "VIDEO_UTIL_VIDEO_CODEC_H264" :
+               "VIDEO_UTIL_VIDEO_CODEC_NONE");
+
+    return 0;
 }
 </pre>
 <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html#ga48da7f77144a99f5733a90d62805c435">video_util_audio_codec_e</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html#gabadbb5a64155f42fe180bedac40f289e">video_util_video_codec_e</a> enumerations define the available audio and video codecs.</p>
@@ -727,17 +727,17 @@ video_util_video_supported(video_util_video_codec_e codec, void *user_data)
 static bool
 video_util_video_supported(video_util_video_codec_e codec, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (codec == VIDEO_UTIL_VIDEO_CODEC_MPEG4)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data = true;
+    if (codec == VIDEO_UTIL_VIDEO_CODEC_MPEG4)
+        user_data = true;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 
 bool supported = false;
 video_util_foreach_supported_video_codec(handle, video_util_video_supported,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;supported);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;MPEG4 codec %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;supported ? &quot;supported&quot; : &quot;not supported&quot;);
+                                         &amp;supported);
+dlog_print(DLOG_INFO, LOG_TAG, "MPEG4 codec %s",
+           supported ? "supported" : "not supported");
 </pre>
 </li>
 
@@ -778,7 +778,7 @@ int error_code = video_util_set_fps(handle, 25);
 <p>Start the transcoding using the <code>video_util_start_transcoding()</code> function:</p>
 <pre class="prettyprint">
 error_code = video_util_start_transcoding(handle, start, duration, *out_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progress_cb, completed_cb, *user_data);
+                                          progress_cb, completed_cb, *user_data);
 </pre>
 <p>The fifth parameter specifies the transcoding progress callback, which is invoked periodically during the transcoding process. The sixth parameter specifies the transcoding complete callback, which is invoked after the transcoding process is complete.</p>
 </li>
diff --git a/org.tizen.guides/html/native/media/media_cover_n.htm b/org.tizen.guides/html/native/media/media_cover_n.htm
index 881b074..a5bf5c4 100644 (file)
--- a/org.tizen.guides/html/native/media/media_cover_n.htm
+++ b/org.tizen.guides/html/native/media/media_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Media and Camera</title>  
+       <title>Media and Camera</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -31,7 +31,7 @@
                        <li><a href="../../../../org.tizen.training/html/native/feature/app_multimedia_n.htm">Creating Applications with Multimedia</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Media and Camera</h1>
@@ -111,7 +111,7 @@
 
 <li><a href="camera_n.htm">Camera</a>
 
-<p>You can use the camera to preview and capture images. You can capture still images with the device&#39;s internal camera and keep images on your target device.</p></li>
+<p>You can use the camera to preview and capture images. You can capture still images with the device's internal camera and keep images on your target device.</p></li>
 </ul>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/media/media_handle_n.htm b/org.tizen.guides/html/native/media/media_handle_n.htm
index 5e54656..b047a80 100644 (file)
--- a/org.tizen.guides/html/native/media/media_handle_n.htm
+++ b/org.tizen.guides/html/native/media/media_handle_n.htm
@@ -43,16 +43,16 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Media Handle Management</h1>
 
- <p>Your application can manage various media handles with media tools.</p> 
-  <p>The main features of the Media Tool API include:</p> 
-  <ul> 
+ <p>Your application can manage various media handles with media tools.</p>
+  <p>The main features of the Media Tool API include:</p>
+  <ul>
    <li><p>Creating the media format handle</p>
-   <p>You can <a href="#format">set and get video or audio information</a> using the <code>media_format_h</code> handle.</p></li>   
+   <p>You can <a href="#format">set and get video or audio information</a> using the <code>media_format_h</code> handle.</p></li>
    <li><p>Creating the media packet handle</p>
    <p>You can <a href="#packet">set and get metadata</a> using the created <code>media_packet_h</code> handle. Some <code>media_packet_h</code> metadata are NOT filled after creating the <code>media_packet_h</code> handle: pts, dts, duration, extradata, codec data, codec data size, and buffer flags.</p>
-   </li>   
-  </ul> 
-  
+   </li>
+  </ul>
+
 <p>The <code>media_format_h</code> handle is created by the caller, who can set and get the video or audio information. The <code>media_format_h</code> handle creates the <code>media_packet_h</code> handle and allocates the buffer. The caller can set and get the metadata with the <code>media_packet_h</code> handle.</p>
 <p>The <code>media_format_h</code> handle has a specific design for increasing and decreasing its <a href="#reference">reference count</a>.</p>
 
@@ -89,13 +89,13 @@
 <pre class="prettyprint">
 media_format_h format;
 if (media_format_create(&amp;format) == MEDIA_FORMAT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_width(format, 640);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_height(format, 480);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_avg_bps(format, 10000000);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_max_bps(format, 15000000);
+    media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
+    media_format_set_video_width(format, 640);
+    media_format_set_video_height(format, 480);
+    media_format_set_video_avg_bps(format, 10000000);
+    media_format_set_video_max_bps(format, 15000000);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;media_format_create() failed!&quot;);
+    printf("media_format_create() failed!");
 }
 </pre>
 
@@ -117,10 +117,10 @@ int avg_bps;
 int max_bps;
 
 if (media_format_get_video_info(fmt, &amp;mimetype, &amp;w, &amp;h, &amp;avg_bps, &amp;max_bps)
-&nbsp;&nbsp;&nbsp;&nbsp;== MEDIA_PACKET_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;media_format_get_video_info success! width = %d, height = %d&quot;, w, h);
+    == MEDIA_PACKET_ERROR_NONE)
+    printf("media_format_get_video_info success! width = %d, height = %d", w, h);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;print(&quot;media_format_get_video failed...&quot;);
+    print("media_format_get_video failed...");
 </pre>
 
 <p>To retrieve the audio format information, use the <code>media_format_get_audio_info()</code> function.</p>
@@ -153,32 +153,32 @@ else
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_h fmt;
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_h packet;
-
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_create(&amp;fmt);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_width(format, 640);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_height(format, 480);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_avg_bps(format, 10000000);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_max_bps(format, 15000000);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   MEDIA_FORMAT_H264_HP data type is MEDIA_FORMAT_ENCODED and the buffer
-&nbsp;&nbsp;&nbsp;&nbsp;   is allocated into the heap
-&nbsp;&nbsp;&nbsp;&nbsp;   If the data type is MEDIA_FORMAT_RAW,
-&nbsp;&nbsp;&nbsp;&nbsp;   the buffer is allocated into the TBM surface
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_create_alloc(fmt, _finalize_callback, fcb_data, &amp;packet);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_unref(fmt);
-
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_destroy(packet);
+    media_format_h fmt;
+    media_packet_h packet;
+
+    media_format_create(&amp;fmt);
+    media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
+    media_format_set_video_width(format, 640);
+    media_format_set_video_height(format, 480);
+    media_format_set_video_avg_bps(format, 10000000);
+    media_format_set_video_max_bps(format, 15000000);
+
+    /*
+       MEDIA_FORMAT_H264_HP data type is MEDIA_FORMAT_ENCODED and the buffer
+       is allocated into the heap
+       If the data type is MEDIA_FORMAT_RAW,
+       the buffer is allocated into the TBM surface
+    */
+    media_packet_create_alloc(fmt, _finalize_callback, fcb_data, &amp;packet);
+    media_format_unref(fmt);
+
+    media_packet_destroy(packet);
 }
 
 int
 _finalize_callback(media_packet_h packet, int err, void* userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return MEDIA_PACKET_REUSE;
+    return MEDIA_PACKET_REUSE;
 }
 </pre>
 
@@ -190,25 +190,25 @@ _finalize_callback(media_packet_h packet, int err, void* userdata)
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_h fmt;
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_h packet;
-
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_create(&amp;fmt);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_width(format, 640);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_height(format, 480);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_avg_bps(format, 10000000);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_max_bps(format, 15000000);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Only create the handle, do not allocate a buffer */
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_create(fmt, _finalize_callback, fcb_data, &amp;packet);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_unref(fmt);
+    media_format_h fmt;
+    media_packet_h packet;
+
+    media_format_create(&amp;fmt);
+    media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
+    media_format_set_video_width(format, 640);
+    media_format_set_video_height(format, 480);
+    media_format_set_video_avg_bps(format, 10000000);
+    media_format_set_video_max_bps(format, 15000000);
+
+    /* Only create the handle, do not allocate a buffer */
+    media_packet_create(fmt, _finalize_callback, fcb_data, &amp;packet);
+    media_format_unref(fmt);
 }
 
 int
 _finalize_callback(media_packet_h packet, int err, void* userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return MEDIA_PACKET_FINALIZE;
+    return MEDIA_PACKET_FINALIZE;
 }
 </pre>
 
@@ -220,25 +220,25 @@ _finalize_callback(media_packet_h packet, int err, void* userdata)
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_h fmt;
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_h packet;
-
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_create(&amp;fmt);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_mime(format, MEDIA_FORMAT_RGBA);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_width(format, 128);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_height(format, 128);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_avg_bps(format, 10000000);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_avg_bps(format, 15000000);
-
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_create_from_tbm_surface(fmt, surface, _finalize_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fcb_data, &amp;packet);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_unref(fmt);
+    media_format_h fmt;
+    media_packet_h packet;
+
+    media_format_create(&amp;fmt);
+    media_format_set_video_mime(format, MEDIA_FORMAT_RGBA);
+    media_format_set_video_width(format, 128);
+    media_format_set_video_height(format, 128);
+    media_format_set_video_avg_bps(format, 10000000);
+    media_format_set_video_avg_bps(format, 15000000);
+
+    media_packet_create_from_tbm_surface(fmt, surface, _finalize_callback,
+                                         fcb_data, &amp;packet);
+    media_format_unref(fmt);
 }
 
 int
 _finalize_callback(media_packet_h packet, int err, void* userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return MEDIA_PACKET_FINALIZE;
+    return MEDIA_PACKET_FINALIZE;
 }
 </pre>
 
@@ -250,27 +250,27 @@ _finalize_callback(media_packet_h packet, int err, void* userdata)
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_h fmt;
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_h packet;
-
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_create(&amp;fmt);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_width(format, 640);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_height(format, 480);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_avg_bps(format, 10000000);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_avg_bps(format, 15000000);
-
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_create_from_external_memory(fmt, mem_ptr, size, _finalize_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fcb_data, &amp;packet);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_unref(fmt);
+    media_format_h fmt;
+    media_packet_h packet;
+
+    media_format_create(&amp;fmt);
+    media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
+    media_format_set_video_width(format, 640);
+    media_format_set_video_height(format, 480);
+    media_format_set_video_avg_bps(format, 10000000);
+    media_format_set_video_avg_bps(format, 15000000);
+
+    media_packet_create_from_external_memory(fmt, mem_ptr, size, _finalize_callback,
+                                             fcb_data, &amp;packet);
+    media_format_unref(fmt);
 }
 
 int
 _finalize_callback(media_packet_h packet, int err, void* userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
+    /* Do something */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return MEDIA_PACKET_FINALIZE;
+    return MEDIA_PACKET_FINALIZE;
 }
 </pre>
 
@@ -317,97 +317,97 @@ media_packet_destroy(packet);
 <h2 id="reference" name="reference">Reference Count Design</h2>
 
 <p>The following table describes the reference count design of the <code>media_format_h</code> handle.</p>
- 
+
    <p align="center" class="Table"><strong>Table: Media format handle reference count design</strong></p>
-<table border="1"> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Function</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Reference count number</th> 
-        <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr> 
-       <tr> 
+<table border="1">
+   <tbody>
+    <tr>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Function</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Reference count number</th>
+        <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+    </tr>
+       <tr>
      <td><code>media_format_h fmt1, fmt2, tmp;</code><br/>
 <code>media_packet_h pkt1, pkt2;</code><br/>
-<code>media_format_create(&amp;fmt1);</code></td> 
+<code>media_format_create(&amp;fmt1);</code></td>
      <td><code>fmt1</code>: 1</td>
         <td>Define the <code>media_format_h</code> and <code>media_packet_h</code> handles.
         <p>Create the <code>fmt1</code> handle and set the <code>media_format_video_mime()</code> or <code>media_format_audio_mime()</code> function.</p></td>
     </tr>
-<tr> 
-     <td><code>media_packet_create(&amp;pkt1, fmt1);</code></td> 
+<tr>
+     <td><code>media_packet_create(&amp;pkt1, fmt1);</code></td>
      <td><code>fmt1</code>: 2</td>
         <td>After the <code>media_packet_create()</code> function, you must use the <code>media_format_unref()</code> function, because the <code>media_packet_create()</code> function increases the <code>media_format_h</code> reference count.</td>
     </tr>
-       <tr> 
-     <td><code>media_format_unref(fmt1);</code></td> 
+       <tr>
+     <td><code>media_format_unref(fmt1);</code></td>
      <td><code>fmt1</code>: 1</td>
         <td>If the <code>ref_count</code> is 1, the <code>fmt1</code> is currently owned by the <code>pkt1</code> only.</td>
     </tr>
-       <tr> 
-     <td><code>media_packet_copy(pkt1, &amp;pkt2);</code></td> 
+       <tr>
+     <td><code>media_packet_copy(pkt1, &amp;pkt2);</code></td>
      <td><code>fmt1</code>: 2</td>
         <td>Copy the <code>pkt1</code> metadata to <code>pkt2</code>, except the allocated buffer and buffer size. <code>pkt2</code> refers to <code>fmt1</code>, and <code>fmt1</code> <code>ref_count</code> is increased.</td>
     </tr>
-       <tr> 
-     <td><code>media_packet_get_format(pkt1, &amp;tmp);</code></td> 
+       <tr>
+     <td><code>media_packet_get_format(pkt1, &amp;tmp);</code></td>
      <td><code>fmt1</code>: 3</td>
         <td><code>fmt1</code> <code>ref_count</code> is increased by the <code>media_packet_get_format()</code> function.</td>
     </tr>
-       <tr> 
-     <td><code>media_format_set_video_mime(tmp, ...);</code></td> 
+       <tr>
+     <td><code>media_format_set_video_mime(tmp, ...);</code></td>
      <td><code>fmt1</code>: 3</td>
-        <td>If you try to modify the <code>fmt1</code> data (call the <code>media_format_set_video_mime()</code> function) for <code>fmt1</code> (=<code>tmp</code>), the <code>ref_count</code> is bigger than 1, and <code>fmt1</code> cannot be modified. 
+        <td>If you try to modify the <code>fmt1</code> data (call the <code>media_format_set_video_mime()</code> function) for <code>fmt1</code> (=<code>tmp</code>), the <code>ref_count</code> is bigger than 1, and <code>fmt1</code> cannot be modified.
         <p>To modify the <code>fmt1</code> data, call the <code>media_format_make_writable()</code> function.</p></td>
     </tr>
-       <tr> 
-     <td><code>media_format_make_writable(tmp, &amp;fmt2);</code></td> 
+       <tr>
+     <td><code>media_format_make_writable(tmp, &amp;fmt2);</code></td>
      <td><code>fmt1</code>: 2<br/>
         <code>fmt2</code>: 1</td>
         <td>If called, the <code>tmp</code> (<code>fmt1</code>) <code>ref_count</code> is decreased. Creates the <code>fmt2</code> handle and copies the <code>fmt1</code> data to <code>fmt2</code>.</td>
     </tr>
-       <tr> 
-     <td><code>media_format_set_video_mime(fmt2, ...);</code></td> 
+       <tr>
+     <td><code>media_format_set_video_mime(fmt2, ...);</code></td>
      <td><code>fmt1</code>: 2<br/>
         <code>fmt2</code>: 1</td>
         <td><code>fmt2</code> <code>ref_count</code> is 1, which means that you can modify the <code>fmt2</code> data.</td>
     </tr>
 
-       <tr> 
-     <td><code>media_packet_set_format(pkt2, fmt2);</code></td> 
+       <tr>
+     <td><code>media_packet_set_format(pkt2, fmt2);</code></td>
      <td><code>fmt1</code>: 2
         <br/>
         <code>fmt2</code>: 2</td>
         <td>Set the modified <code>fmt2</code> to the <code>pkt2</code> handle. You must call the <code>media_format_unref(fmt2)</code> function.</td>
     </tr>
-       <tr> 
-     <td><code>media_format_unref(tmp);</code></td> 
+       <tr>
+     <td><code>media_format_unref(tmp);</code></td>
      <td><code>fmt1</code>: 1
         <br/>
         <code>fmt2</code>: 2</td>
         <td>You must call this function because of the <code>media_packet_get_format(pkt1, &amp;tmp)</code> function call.</td>
-    </tr>      
-       <tr> 
-     <td><code>media_format_unref(fmt2);</code></td> 
+    </tr>
+       <tr>
+     <td><code>media_format_unref(fmt2);</code></td>
      <td><code>fmt1</code>: 1<br/>
         <code>fmt2</code>: 1</td>
         <td>You must call this function because of the <code>media_packet_set_format(pkt2, fmt2)</code> function call.</td>
-    </tr>      
-       <tr> 
-     <td><code>media_packet_destroy(pkt1);</code></td> 
+    </tr>
+       <tr>
+     <td><code>media_packet_destroy(pkt1);</code></td>
      <td><code>fmt1</code>: 1 &gt; finalize<br/>
         <code>fmt2</code>: 1</td>
         <td>If you destroy the <code>pkt1</code> handle, the <code>fmt1</code> <code>ref_count</code> is decreased. If the <code>ref_count</code> becomes 0, <code>fmt1</code> is freed.</td>
-    </tr>      
-       <tr> 
-     <td><code>media_packet_destroy(pkt2);</code></td> 
+    </tr>
+       <tr>
+     <td><code>media_packet_destroy(pkt2);</code></td>
      <td><code>fmt1</code>: 1  &gt; finalize<br/>
         <code>fmt2</code>: 0 &gt; finalize</td>
         <td>If you destroy the <code>pkt2</code> handle, the <code>fmt2</code> <code>ref_count</code> is decreased. If the <code>ref_count</code> becomes 0, <code>fmt2</code> is freed.</td>
-    </tr>              
-   </tbody> 
-  </table> 
-  
+    </tr>
+   </tbody>
+  </table>
+
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/native/media/media_key_n.htm b/org.tizen.guides/html/native/media/media_key_n.htm
index d5b5d37..4ba9012 100644 (file)
--- a/org.tizen.guides/html/native/media/media_key_n.htm
+++ b/org.tizen.guides/html/native/media/media_key_n.htm
@@ -42,18 +42,18 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Media Key Events</h1>
 
-  <p>Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The <code>media_key_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">wearable</a> applications) defines the available key types.</p> 
-  
-  <p>The main features of the Media key API include:</p> 
-  <ul> 
-   <li>Registering a callback 
+  <p>Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The <code>media_key_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">wearable</a> applications) defines the available key types.</p>
+
+  <p>The main features of the Media key API include:</p>
+  <ul>
+   <li>Registering a callback
    <p>You can <a href="#register">register a callback</a> for media key events using the <code>media_key_reserve()</code> function. The first parameter of the function defines the <code>media_key_event_cb</code> type callback, which you can implement to perform any actions you need. </p>
-   </li> 
-   <li>Deregistering a callback 
+   </li>
+   <li>Deregistering a callback
    <p>You can deregister a callback for media key events using the <code>media_key_release()</code> function.</p> </li></ul>
 
-<h2 id="prerequisites">Prerequisites</h2>              
-               
+<h2 id="prerequisites">Prerequisites</h2>
+
 <p>To use the functions and data types of the Media key API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">wearable</a> applications), include the <code>&lt;media_key.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;media_key.h&gt;
@@ -71,53 +71,53 @@
 void
 event_cb(media_key_e key, media_key_event_e status, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;switch (key) {
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_PLAY:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: MEDIA_KEY_PLAY&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_STOP:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: MEDIA_KEY_STOP&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_PAUSE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: MEDIA_KEY_PAUSE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_PREVIOUS:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: MEDIA_KEY_PREVIOUS&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_NEXT:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: MEDIA_KEY_NEXT&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_FASTFORWARD:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: MEDIA_KEY_FASTFORWARD&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_REWIND:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: MEDIA_KEY_REWIND&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_PLAYPAUSE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: MEDIA_KEY_PLAYPAUSE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_UNKNOWN:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: MEDIA_KEY_UNKNOWN&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Key: Unknown&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (status) {
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_STATUS_PRESSED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Event: MEDIA_KEY_STATUS_PRESSED&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_STATUS_RELEASED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Event: MEDIA_KEY_STATUS_RELEASED&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case MEDIA_KEY_STATUS_UNKNOWN:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Event: MEDIA_KEY_STATUS_UNKNOWN&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Event: Unknown&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    switch (key) {
+    case MEDIA_KEY_PLAY:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: MEDIA_KEY_PLAY");
+        break;
+    case MEDIA_KEY_STOP:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: MEDIA_KEY_STOP");
+        break;
+    case MEDIA_KEY_PAUSE:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: MEDIA_KEY_PAUSE");
+        break;
+    case MEDIA_KEY_PREVIOUS:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: MEDIA_KEY_PREVIOUS");
+        break;
+    case MEDIA_KEY_NEXT:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: MEDIA_KEY_NEXT");
+        break;
+    case MEDIA_KEY_FASTFORWARD:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: MEDIA_KEY_FASTFORWARD");
+        break;
+    case MEDIA_KEY_REWIND:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: MEDIA_KEY_REWIND");
+        break;
+    case MEDIA_KEY_PLAYPAUSE:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: MEDIA_KEY_PLAYPAUSE");
+        break;
+    case MEDIA_KEY_UNKNOWN:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: MEDIA_KEY_UNKNOWN");
+        break;
+    default:
+        dlog_print(DLOG_INFO, LOG_TAG, "Key: Unknown");
+        break;
+    }
+
+    switch (status) {
+    case MEDIA_KEY_STATUS_PRESSED:
+        dlog_print(DLOG_INFO, LOG_TAG, "Event: MEDIA_KEY_STATUS_PRESSED");
+        break;
+    case MEDIA_KEY_STATUS_RELEASED:
+        dlog_print(DLOG_INFO, LOG_TAG, "Event: MEDIA_KEY_STATUS_RELEASED");
+        break;
+    case MEDIA_KEY_STATUS_UNKNOWN:
+        dlog_print(DLOG_INFO, LOG_TAG, "Event: MEDIA_KEY_STATUS_UNKNOWN");
+        break;
+    default:
+        dlog_print(DLOG_INFO, LOG_TAG, "Event: Unknown");
+        break;
+    }
 }
 </pre>
 </li>
@@ -128,30 +128,30 @@ event_cb(media_key_e key, media_key_event_e status, void* user_data)
 void
 media_key_api_func()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int r = 0;
+    int r = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;r = media_key_reserve(event_cb, NULL);
+    r = media_key_reserve(event_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (r == MEDIA_KEY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Reserve media key success.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Reserve media key failed.&quot;);
+    if (r == MEDIA_KEY_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Reserve media key success.");
+    else
+        dlog_print(DLOG_ERROR, LOG_TAG, "Reserve media key failed.");
 </pre>
 </li>
 <li>
 <p>When you no longer need to monitor the media key events, deregister the callback with the <code>media_key_release()</code> function:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;r = media_key_release();
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (r == MEDIA_KEY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Release media key success.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else if (r == MEDIA_KEY_ERROR_INVALID_PARAMETER)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Invalid parameter.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else if (r == MEDIA_KEY_ERROR_OPERATION_FAILED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Operation failed.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Failed. Unknown reason.&quot;);
+    r = media_key_release();
+
+    if (r == MEDIA_KEY_ERROR_NONE)
+        dlog_print(DLOG_INFO, LOG_TAG, "Release media key success.");
+    else if (r == MEDIA_KEY_ERROR_INVALID_PARAMETER)
+        dlog_print(DLOG_ERROR, LOG_TAG, "Invalid parameter.");
+    else if (r == MEDIA_KEY_ERROR_OPERATION_FAILED)
+        dlog_print(DLOG_ERROR, LOG_TAG, "Operation failed.");
+    else
+        dlog_print(DLOG_ERROR, LOG_TAG, "Failed. Unknown reason.");
 }
 </pre></li></ol>
 
diff --git a/org.tizen.guides/html/native/media/media_muxing_n.htm b/org.tizen.guides/html/native/media/media_muxing_n.htm
index a1969a1..1c6c7a6 100644 (file)
--- a/org.tizen.guides/html/native/media/media_muxing_n.htm
+++ b/org.tizen.guides/html/native/media/media_muxing_n.htm
@@ -48,7 +48,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Media Muxing</h1>
 
-<p>You can mux encoded media into a multiplexed stream and parse multiplexed media streams.</p> 
+<p>You can mux encoded media into a multiplexed stream and parse multiplexed media streams.</p>
 <p>With the Media Muxer and Media Demuxer API you can:</p>
 <ul>
 <li>Prepare and manage the media muxer
@@ -83,13 +83,13 @@
 <p align="center"><strong>Figure: Media muxer state changes</strong></p>
 <p align="center"><img src="../../images/muxer.png" alt="Media muxer state changes" /></p>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         All file types and container formats are not guaranteed to support the Media Muxer API.
     </div>
 
-<h2 id="demuxer">Media Demuxer</h2> 
+<h2 id="demuxer">Media Demuxer</h2>
 
 <p>You can <a href="#prepare_demux">demux any multiplexed media streams</a>, such as MP4 and MP3.</p>
 <p>The main features of the Media Demuxer API include:</p>
@@ -125,7 +125,7 @@
 <p align="center"><strong>Figure: Media demuxer state changes</strong></p>
 <p align="center"><img src="../../images/demuxer.png" alt="Media demuxer state changes" /></p>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         All file types and container formats are not guaranteed to support the Media Demuxer API.
@@ -162,43 +162,43 @@
 mediamuxer_h *muxer;
 ret = mediamuxer_create(&amp;muxer);
 if (ret != MEDIAMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 </pre>
 </li>
 
 <li>If the handle is created normally, set the output file path by passing the absolute uri path to the <code>mediamuxer_set_data_sink()</code> function:
 <pre class="prettyprint">
-char *path = &quot;/home/media/myfile.mp4&quot;
+char *path = "/home/media/myfile.mp4"
 mediamuxer_output_format_e format = MEDIAMUXER_CONTAINER_FORMAT_MP4;
-if (mediamuxer_set_data_sink(muxer, path, format)!= MEDIAMUXER_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;mediamuxer_set_data_sink failed\n&quot;);
+if (mediamuxer_set_data_sink(muxer, path, format)!= MEDIAMUXER_ERROR_NONE)
+    printf("mediamuxer_set_data_sink failed\n");
 </pre>
 </li>
 
-<li>Add the necessary media tracks to the media muxer. The following function shows adding a video elementary track to be muxed. 
+<li>Add the necessary media tracks to the media muxer. The following function shows adding a video elementary track to be muxed.
 <p>A successful <code>mediamuxer_add_track()</code> function call returns a <code>track_index</code>. Whenever you have to deal with the track, the corresponding <code>track_index</code> must be used. Mapping a <code>track_index</code> to the corresponding media track is your responsibility.</p>
 <pre class="prettyprint">
 int
 test_mediamuxer_add_track_video()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int track_index_vid = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_mimetype_e mimetype;
-&nbsp;&nbsp;&nbsp;&nbsp;int width;
-&nbsp;&nbsp;&nbsp;&nbsp;int height;
-&nbsp;&nbsp;&nbsp;&nbsp;int avg_bps;
-&nbsp;&nbsp;&nbsp;&nbsp;int max_bps;
-
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_create(&amp;media_format);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_mime(media_format, MEDIA_FORMAT_H264_SP);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_width(media_format, 640);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_height(media_format, 480);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_avg_bps(media_format, 256000);
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_set_video_max_bps(media_format, 256000);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add the video track */
-&nbsp;&nbsp;&nbsp;&nbsp;mediamuxer_add_track(myMuxer, media_format, &amp;track_index_vid);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    int track_index_vid = -1;
+    media_format_mimetype_e mimetype;
+    int width;
+    int height;
+    int avg_bps;
+    int max_bps;
+
+    media_format_create(&amp;media_format);
+    media_format_set_video_mime(media_format, MEDIA_FORMAT_H264_SP);
+    media_format_set_video_width(media_format, 640);
+    media_format_set_video_height(media_format, 480);
+    media_format_set_video_avg_bps(media_format, 256000);
+    media_format_set_video_max_bps(media_format, 256000);
+
+    /* Add the video track */
+    mediamuxer_add_track(myMuxer, media_format, &amp;track_index_vid);
+
+    return 0;
 }
 </pre>
 </li>
@@ -206,7 +206,7 @@ test_mediamuxer_add_track_video()
 <li>Once all the tracks are added, start the media muxer:
 <pre class="prettyprint">
 if (mediamuxer_start(muxer) != MEDIAMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;mediamuxer_start API failed\n&quot;);
+    printf("mediamuxer_start API failed\n");
 </pre>
 </li>
 
@@ -214,21 +214,21 @@ if (mediamuxer_start(muxer) != MEDIAMUXER_ERROR_NONE)
 <p>The write sample is a specific track. It is your responsibility to use the appropriate <code>track_index</code> to choose the correct track, and to add the corresponding data to the muxer through the write sample. Repeat the same for the rest of the tracks. Before calling this function, create a valid handle for the <code>media_packet_h</code> handle to get the input samples. For more information, see <a href="media_handle_n.htm">Media Handle Management</a>.</p>
 <pre class="prettyprint">
 if (mediamuxer_write_sample(muxer, track_index, in_buf) != MEDIAMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;mediamuxer_write_sample API for track %d failed\n&quot;, track_index);
+    printf("mediamuxer_write_sample API for track %d failed\n", track_index);
 </pre>
 </li>
 
 <li>Once the EOS (End Of Stream) of a particular track is reached, call <code>mediamuxer_close_track()</code> function to finalize the track:
 <pre class="prettyprint">
 if (mediamuxer_close_track(muxer, track_index) != MEDIAMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;mediamuxer_close_track API failed\n&quot;);
+    printf("mediamuxer_close_track API failed\n");
 </pre>
 </li>
 </ol>
 
 
 
-<h2 id="manage_mux" name="manage_mux">Managing the Media Muxer</h2> 
+<h2 id="manage_mux" name="manage_mux">Managing the Media Muxer</h2>
 
 <p>To manage the media muxer, the <code>mediamuxer_write_sample()</code> function is called in a loop until the EOS is reached. You can use multi-threading, writing samples corresponding to different tracks in different threads.</p>
 <ol>
@@ -237,59 +237,59 @@ if (mediamuxer_close_track(muxer, track_index) != MEDIAMUXER_ERROR_NONE)
 int
 test_mediamuxer_write_sample()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_t thread[1];
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_attr_t attr;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize and set thread detached attribute */
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_attr_init(&amp;attr);
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_attr_setdetachstate(&amp;attr, PTHREAD_CREATE_DETACHED);
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_create(&amp;thread[0], &amp;attr, _write_video_data, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_create(&amp;thread[1], &amp;attr, _write_audio_data, NULL);
+    pthread_t thread[1];
+    pthread_attr_t attr;
+    /* Initialize and set thread detached attribute */
+    pthread_attr_init(&amp;attr);
+    pthread_attr_setdetachstate(&amp;attr, PTHREAD_CREATE_DETACHED);
+    pthread_create(&amp;thread[0], &amp;attr, _write_video_data, NULL);
+    pthread_create(&amp;thread[1], &amp;attr, _write_audio_data, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add audio track, which is not given in this use case */
+    /* Add audio track, which is not given in this use case */
 
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_attr_destroy(&amp;attr);
+    pthread_attr_destroy(&amp;attr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 
 void*
 _write_video_data()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;gint is_eos = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int *status = (int *)g_malloc(sizeof(int) * 1);
-&nbsp;&nbsp;&nbsp;&nbsp;v*status = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;int track_index_vid = 1; /* track_index = 1 for video */
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_h vid_pkt;
-&nbsp;&nbsp;&nbsp;&nbsp;while (!is_eos) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Read encoded video data
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Get the proper video media packet from,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   for example, mediacodec/mediademuxer
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_func_get_media_packet(&amp;vid_pkt, &amp;is_eos);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!is_eos) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mediamuxer_write_sample(myMuxer, track_index_vid, vid_pkt);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_packet_destroy(vid_pkt);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;\nVideo while done in the test suite&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mediamuxer_close_track(myMuxer, track_index_vid);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return (void *)status;
+    gint is_eos = 0;
+    int *status = (int *)g_malloc(sizeof(int) * 1);
+    v*status = -1;
+    int track_index_vid = 1; /* track_index = 1 for video */
+    media_packet_h vid_pkt;
+    while (!is_eos) {
+        /*
+           Read encoded video data
+           Get the proper video media packet from,
+           for example, mediacodec/mediademuxer
+        */
+        user_func_get_media_packet(&amp;vid_pkt, &amp;is_eos);
+        if (!is_eos) {
+            mediamuxer_write_sample(myMuxer, track_index_vid, vid_pkt);
+            media_packet_destroy(vid_pkt);
+        } else {
+            g_print("\nVideo while done in the test suite");
+            mediamuxer_close_track(myMuxer, track_index_vid);
+        }
+    }
+
+    return (void *)status;
 }
 </pre>
 </li>
 
-<li>After you have finished work with the media muxer handle, reset the media muxer and destroy the handle by using the <code>mediamuxer_stop()</code> and <code>mediamuxer_destroy()</code> functions. 
+<li>After you have finished work with the media muxer handle, reset the media muxer and destroy the handle by using the <code>mediamuxer_stop()</code> and <code>mediamuxer_destroy()</code> functions.
 <p>The media muxer state changes to <code>MEDIAMUXER_STATE_NONE</code>.</p>
 <pre class="prettyprint">
 ret = mediamuxer_stop(muxer);
 if (ret != MEDIAMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 ret = mediamuxer_destroy(muxer);
 if (ret != MEDIAMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 </pre>
 </li>
 </ol>
@@ -303,36 +303,36 @@ if (ret != MEDIAMUXER_ERROR_NONE)
 mediademuxer_h *demuxer;
 ret = mediademuxer_create(&amp;demuxer);
 if (ret != MEDIADEMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 </pre>
 </li>
 
 <li>If the handle is created normally, set the input data source by passing the path to the <code>mediademuxer_set_data_source()</code> function:
 <pre class="prettyprint">
 if (mediademuxer_set_data_source(demuxer, path)!= MEDIADEMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;mediademuxer_set_data_source API failed\n&quot;);
+    printf("mediademuxer_set_data_source API failed\n");
 </pre>
 </li>
 
 <li>Call the <code>mediademuxer_prepare()</code> function to move the media demuxer into the ready state:
 <pre class="prettyprint">
 if (mediademuxer_prepare(demuxer) != MEDIADEMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;mediademuxer_prepare API failed\n&quot;);
+    printf("mediademuxer_prepare API failed\n");
 </pre>
 </li>
 
-<li>Once the media demuxer is in the ready state, get the total number of individual elementary streams present: 
+<li>Once the media demuxer is in the ready state, get the total number of individual elementary streams present:
 <pre class="prettyprint">
 if (mediademuxer_get_track_count(demuxer, &amp;num_tracks) != MEDIADEMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;mediademuxer_get_track_count API failed\n&quot;);
+    printf("mediademuxer_get_track_count API failed\n");
 </pre>
 </li>
 
 <li>Select all the tracks to be extracted:
 <pre class="prettyprint">
 for (track = 0; track &lt; num_tracks; track++) {
-&nbsp;&nbsp;&nbsp;&nbsp;if (mediademuxer_select_track(demuxer, track))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;mediademuxer_select track %d failed\n&quot;, track);
+    if (mediademuxer_select_track(demuxer, track))
+        g_print("mediademuxer_select track %d failed\n", track);
 }
 </pre>
 </li>
@@ -340,7 +340,7 @@ for (track = 0; track &lt; num_tracks; track++) {
 <li>Start the media demuxer:
 <pre class="prettyprint">
 if (mediademuxer_start(demuxer))
-&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;mediademuxer_start failed\n&quot;);
+    g_print("mediademuxer_start failed\n");
 </pre>
 </li>
 
@@ -351,30 +351,30 @@ media_format_h *g_media_format = NULL;
 int track;
 g_media_format = (media_format_h *)g_malloc(sizeof(media_format_h) * num_tracks);
 for (track = 0; track &lt; num_tracks; track++) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = media_format_create(&amp;g_media_format[track]);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;g_media_format[%d] is created successfully! \n&quot;, track);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = mediademuxer_get_track_info(demuxer, track, g_media_format[track]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (media_format_get_video_info(g_media_format[track], &amp;mime,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;w, &amp;h, NULL, NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== MEDIA_FORMAT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_format_get_video_info is success!\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vid_track = track;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (media_format_get_audio_info(g_media_format[track], &amp;mime,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;channel, &amp;samplerate, NULL, NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== MEDIA_FORMAT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_format_get_audio_info is success!\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aud_track = track;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;Not supported yet&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;Error while getting mediademuxer_get_track_info\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;Error while creating media_format_create\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    ret = media_format_create(&amp;g_media_format[track]);
+    if (ret == 0) {
+        g_print("g_media_format[%d] is created successfully! \n", track);
+        ret = mediademuxer_get_track_info(demuxer, track, g_media_format[track]);
+        if (ret == 0) {
+            if (media_format_get_video_info(g_media_format[track], &amp;mime,
+                                            &amp;w, &amp;h, NULL, NULL)
+                == MEDIA_FORMAT_ERROR_NONE) {
+                g_print("media_format_get_video_info is success!\n");
+                vid_track = track;
+            } else if (media_format_get_audio_info(g_media_format[track], &amp;mime,
+                                                   &amp;channel, &amp;samplerate, NULL, NULL)
+                       == MEDIA_FORMAT_ERROR_NONE) {
+                g_print("media_format_get_audio_info is success!\n");
+                aud_track = track;
+            } else {
+                g_print("Not supported yet");
+            }
+        } else {
+            g_print("Error while getting mediademuxer_get_track_info\n");
+        }
+    } else {
+        g_print("Error while creating media_format_create\n");
+    }
 }
 </pre>
 </li>
@@ -382,7 +382,7 @@ for (track = 0; track &lt; num_tracks; track++) {
 
 
 
-<h2 id="manage_demux" name="manage_demux">Managing the Media Demuxer</h2> 
+<h2 id="manage_demux" name="manage_demux">Managing the Media Demuxer</h2>
 
 <p>To manage the media demuxer process:</p>
 <ol>
@@ -391,87 +391,87 @@ for (track = 0; track &lt; num_tracks; track++) {
 int
 test_mediademuxer_read_sample()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_t thread[1];
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_attr_t attr;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize and set thread detached attribute */
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_attr_init(&amp;attr);
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_attr_setdetachstate(&amp;attr, PTHREAD_CREATE_DETACHED);
-&nbsp;&nbsp;&nbsp;&nbsp;if (vid_track != -1) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;In main: creating thread for video\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pthread_create(&amp;thread[0], &amp;attr, _fetch_video_data, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;pthread_attr_destroy(&amp;attr);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    pthread_t thread[1];
+    pthread_attr_t attr;
+    /* Initialize and set thread detached attribute */
+    pthread_attr_init(&amp;attr);
+    pthread_attr_setdetachstate(&amp;attr, PTHREAD_CREATE_DETACHED);
+    if (vid_track != -1) {
+        g_print("In main: creating thread for video\n");
+        pthread_create(&amp;thread[0], &amp;attr, _fetch_video_data, NULL);
+    }
+    pthread_attr_destroy(&amp;attr);
+
+    return 0;
 }
 
 void*
 _fetch_video_data(void *ptr)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int *status = (int *)g_malloc(sizeof(int) * 1);
-&nbsp;&nbsp;&nbsp;&nbsp;*status = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;Video Data function\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;int count = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_h vidbuf;
-&nbsp;&nbsp;&nbsp;&nbsp;media_format_h vidfmt;
-&nbsp;&nbsp;&nbsp;&nbsp;if (media_format_create(&amp;vidfmt)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_format_create failed\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (void *)status;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (media_format_set_video_mime(vidfmt, MEDIA_FORMAT_H264_SP)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_format_set_video_mime failed\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (void *)status;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (media_format_set_video_width(vidfmt, 760)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_format_set_video_width failed\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (void *)status;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (media_format_set_video_height(vidfmt, 480)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_format_set_video_height failed\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (void *)status;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (media_packet_create_alloc(vidfmt, NULL, NULL, &amp;vidbuf)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_packet_create_alloc failed\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;while (1) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int EOS = mediademuxer_read_sample(demuxer, vid_track, &amp;vidbuf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (EOS == MD_EOS || EOS != MD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pthread_exit(NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count++;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;Read::[%d] video sample\n&quot;, count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Use the media packet and release the packet here */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_packet_destroy(vidbuf);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create a new packet for getting next frame of data */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (media_packet_create_alloc(vidfmt, NULL, NULL, &amp;vidbuf)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_packet_create_alloc failed\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;*status = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;return (void *)status;
+    int *status = (int *)g_malloc(sizeof(int) * 1);
+    *status = -1;
+    g_print("Video Data function\n");
+    int count = 0;
+    media_packet_h vidbuf;
+    media_format_h vidfmt;
+    if (media_format_create(&amp;vidfmt)) {
+        g_print("media_format_create failed\n");
+
+        return (void *)status;
+    }
+    if (media_format_set_video_mime(vidfmt, MEDIA_FORMAT_H264_SP)) {
+        g_print("media_format_set_video_mime failed\n");
+
+        return (void *)status;
+    }
+    if (media_format_set_video_width(vidfmt, 760)) {
+        g_print("media_format_set_video_width failed\n");
+
+        return (void *)status;
+    }
+    if (media_format_set_video_height(vidfmt, 480)) {
+        g_print("media_format_set_video_height failed\n");
+
+        return (void *)status;
+    }
+    if (media_packet_create_alloc(vidfmt, NULL, NULL, &amp;vidbuf)) {
+        g_print("media_packet_create_alloc failed\n");
+    }
+    while (1) {
+        int EOS = mediademuxer_read_sample(demuxer, vid_track, &amp;vidbuf);
+        if (EOS == MD_EOS || EOS != MD_ERROR_NONE)
+            pthread_exit(NULL);
+        count++;
+        g_print("Read::[%d] video sample\n", count);
+        /* Use the media packet and release the packet here */
+        media_packet_destroy(vidbuf);
+        /* Create a new packet for getting next frame of data */
+        if (media_packet_create_alloc(vidfmt, NULL, NULL, &amp;vidbuf)) {
+            g_print("media_packet_create_alloc failed\n");
+            break;
+        }
+    }
+    *status = 0;
+
+    return (void *)status;
 }
 </pre>
 </li>
 
-<li>After you have finished work with the media demuxer, reset the media demuxer and destroy the handle by using the <code>mediademuxer_unprepare()</code> and <code>mediademuxer_destroy()</code> functions. 
+<li>After you have finished work with the media demuxer, reset the media demuxer and destroy the handle by using the <code>mediademuxer_unprepare()</code> and <code>mediademuxer_destroy()</code> functions.
 <p>The media demuxer state changes to <code>MEDIADEMUXER_STATE_NONE</code>.</p>
 <pre class="prettyprint">
 ret = mediademuxer_unprepare(demuxer);
 if (ret != MEDIADEMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 ret = mediademuxer_destroy(demuxer);
 if (ret != MEDIADEMUXER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 </pre>
 </li>
 </ol>
 
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/media/media_playback_n.htm b/org.tizen.guides/html/native/media/media_playback_n.htm
index 1043b32..34f8902 100644 (file)
--- a/org.tizen.guides/html/native/media/media_playback_n.htm
+++ b/org.tizen.guides/html/native/media/media_playback_n.htm
@@ -56,7 +56,7 @@
                                        <li><a href="#play_tone">Playing a Tone</a></li>
                                        <li><a href="#duration">Playing a Tone for a Specified Duration</a></li>
                 </ul>
-            </li>                      
+            </li>
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -72,8 +72,8 @@
 </div>
 <div id="container"><div id="contents"><div class="content">
 <h1>Media Playback</h1>
-<p>You can play different audio formats and video in your application.</p> 
-  <p>The main media playback features are:</p> 
+<p>You can play different audio formats and video in your application.</p>
+  <p>The main media playback features are:</p>
   <ul>
     <li>Handling audio
        <p>Enables you to play <a href="#audio">audio</a> and control the playback.</p></li>
@@ -88,43 +88,43 @@
        <li>Using the tone player
        <p>Enables you to play <a href="#tone">tones</a>.</p></li>
 </ul>
-   
+
 <p>Before you start, <a href="#prepare">set up the player</a>.</p>
 
- 
-  <h2 id="audio" name="audio">Audio Player</h2> 
-  <p>You can <a href="#play_audio">play audio</a> and control functions for using audio resources. The resources can be media files stored on the device in a file or memory, or they can be streamed from a streaming server (defined with a URI) through the network.</p> 
-  
+
+  <h2 id="audio" name="audio">Audio Player</h2>
+  <p>You can <a href="#play_audio">play audio</a> and control functions for using audio resources. The resources can be media files stored on the device in a file or memory, or they can be streamed from a streaming server (defined with a URI) through the network.</p>
+
   <p>The supported audio formats include MP3, AAC, WMA, M4A, 3GA, WAV, and AMR. The available formats depend on the target device.</p>
-  
-  <p>You can use multiple instances of the player to play several audio data streams concurrently. This means that your application can <a href="#play">play multiple uncompressed audio files</a> at the same time.</p> 
-
-  <p>The following figure illustrates the general player state changes.</p> 
-  <p align="center"><strong>Figure: Player state changes</strong></p> 
-  <p align="center"><img src="../../images/using_players_state_changes.png" alt="Player state changes" style="display: block; text-align: center; margin-left: auto; margin-right: auto;"/></p> 
-  
-  
-  
+
+  <p>You can use multiple instances of the player to play several audio data streams concurrently. This means that your application can <a href="#play">play multiple uncompressed audio files</a> at the same time.</p>
+
+  <p>The following figure illustrates the general player state changes.</p>
+  <p align="center"><strong>Figure: Player state changes</strong></p>
+  <p align="center"><img src="../../images/using_players_state_changes.png" alt="Player state changes" style="display: block; text-align: center; margin-left: auto; margin-right: auto;"/></p>
+
+
+
   <p>The <code>player_interrupted_cb()</code> callback is called when an application is interrupted by another application. The player is paused or moved to the IDLE state according to the audio session manager (ASM) policy. You must check the state of the current instance and take appropriate action. If the player is changed to the PAUSED state due to an interruption, the callback can be called at the end of the interruption with the <code>PLAYER_INTERRUPTED_COMPLETED</code> error code. For example, if the application is interrupted by a call, alarm, or notification, the completed message is posted. However, no messages are posted if the interruption has other causes. Make sure you handle the application accordingly when audio switching occurs between various applications.</p>
-  
-  <p>The following figure illustrates what happens when the player gets interrupted by the system.</p> 
-  <p align="center"><strong>Figure: Player states when interrupted by system</strong></p> 
-  <p align="center"><img alt="Player states when interrupted by system" src="../../images/using_players_interrupted_state.png"/></p> 
-  
-  <h2 id="video" name="video">Video Player</h2> 
-  <p>Tizen enables your application to <a href="#play_video">play video</a>, and it uses its own user surface. The surface requires a drawing area, so you have to get an overlay region and set it to the player instance to display the drawing area:</p> 
-  <ol> 
+
+  <p>The following figure illustrates what happens when the player gets interrupted by the system.</p>
+  <p align="center"><strong>Figure: Player states when interrupted by system</strong></p>
+  <p align="center"><img alt="Player states when interrupted by system" src="../../images/using_players_interrupted_state.png"/></p>
+
+  <h2 id="video" name="video">Video Player</h2>
+  <p>Tizen enables your application to <a href="#play_video">play video</a>, and it uses its own user surface. The surface requires a drawing area, so you have to get an overlay region and set it to the player instance to display the drawing area:</p>
+  <ol>
      <li>Get the overlay region or Evas object from the Graphics module.
-        <p>You can display video on a UI layer with the Evas object as well as on an overlay layer.</p></li> 
-     <li>Create the player instance.</li> 
-     <li>Set the surface type and display handle to the player using the <code>player_set_display()</code> function.</li> 
+        <p>You can display video on a UI layer with the Evas object as well as on an overlay layer.</p></li>
+     <li>Create the player instance.</li>
+     <li>Set the surface type and display handle to the player using the <code>player_set_display()</code> function.</li>
     </ol>
   <p>The supported video formats include WMV, ASF, MP4, 3GP, AVI, MKV, and OGG. The available formats depend on the target device.</p>
 
-  <p>In case of a video interruption, the state can be READY due to the resource restriction in the system.</p> 
-  
-  <p>The following figure illustrates what happens when the player gets interrupted by the system.</p> 
-<p align="center"><strong>Figure: Player states when interrupted by system</strong></p> 
+  <p>In case of a video interruption, the state can be READY due to the resource restriction in the system.</p>
+
+  <p>The following figure illustrates what happens when the player gets interrupted by the system.</p>
+<p align="center"><strong>Figure: Player states when interrupted by system</strong></p>
 <p align="center"><img alt="Player states when interrupted by system" src="../../images/using_videoplayer_interrupted_state.png"/></p>
 
 
@@ -164,73 +164,73 @@
     </li>
   </ul>
 
- 
-<h2 id="stream" name="stream">Playback Streams</h2> 
-  <p>You can set specific URLs for streaming media playback by using the <code>player_set_uri()</code> function.</p> 
-  <p>Both Hypertext Transfer Protocol (HTTP) and Real Time Streaming Protocol (RTSP) protocols support streaming media   playback. The HTTP request header supports the playback of both complete and download-in-progress media files. The index table (atoms) must be moved in front of the file for progressive download.</p> 
- 
+
+<h2 id="stream" name="stream">Playback Streams</h2>
+  <p>You can set specific URLs for streaming media playback by using the <code>player_set_uri()</code> function.</p>
+  <p>Both Hypertext Transfer Protocol (HTTP) and Real Time Streaming Protocol (RTSP) protocols support streaming media   playback. The HTTP request header supports the playback of both complete and download-in-progress media files. The index table (atoms) must be moved in front of the file for progressive download.</p>
+
  <p>In case of HTTP streaming, buffering can happen when the player is prepared. You can get the status using the <code>player_set_buffering_cb()</code> function.</p>
- 
+
 <p>The following table lists the streaming protocol features supported by the player.</p>
 
-   <p align="center" class="Table"><strong>Table: Supported streaming protocol features</strong></p> 
-  <table> 
-   <tbody> 
-    <tr> 
-     <th>Streaming protocol</th> 
-     <th>Supported feature</th> 
-    </tr> 
-    <tr> 
-     <td rowspan="3">Hypertext Transfer Protocol (HTTP)</td> 
-     <td>HTTP Streaming</td> 
-    </tr> 
-    <tr> 
-     <td>HTTP Live Streaming</td> 
-    </tr> 
-    <tr> 
-     <td>HTTP Progressive Download Play</td> 
-    </tr>      
-    <tr> 
-     <td>Real Time Streaming Protocol (RTSP)</td> 
-     <td>RTSP Streaming</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
+   <p align="center" class="Table"><strong>Table: Supported streaming protocol features</strong></p>
+  <table>
+   <tbody>
+    <tr>
+     <th>Streaming protocol</th>
+     <th>Supported feature</th>
+    </tr>
+    <tr>
+     <td rowspan="3">Hypertext Transfer Protocol (HTTP)</td>
+     <td>HTTP Streaming</td>
+    </tr>
+    <tr>
+     <td>HTTP Live Streaming</td>
+    </tr>
+    <tr>
+     <td>HTTP Progressive Download Play</td>
+    </tr>
+    <tr>
+     <td>Real Time Streaming Protocol (RTSP)</td>
+     <td>RTSP Streaming</td>
+    </tr>
+   </tbody>
+  </table>
+
 <h2 id="wav">WAV Player</h2>
 
 
   <p>The WAV Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">wearable</a> applications) provides controlling functions for using audio resources (media files stored in the device). Use the WAV Player API to enable your application to play audio and control playback. You can use the WAV and OGG audio formats.</p>
-  <p>Tizen enables your application to play wave format audio in 1 of 2 ways: </p> 
-  <ul> 
+  <p>Tizen enables your application to play wave format audio in 1 of 2 ways: </p>
+  <ul>
    <li>Through the multimedia application control <strong>in mobile applications only</strong>
-   <p>When using the <a href="../app_management/common_appcontrol_n.htm#multimedia">multimedia application control</a>, the device standard media player application is launched to play audio.</p></li> 
+   <p>When using the <a href="../app_management/common_appcontrol_n.htm#multimedia">multimedia application control</a>, the device standard media player application is launched to play audio.</p></li>
    <li>With the WAV player functions
    <p>When <a href="#start_wav">using the WAV player functions</a>, your application plays audio using its own user interface.</p>
-   </li> 
-  </ul> 
+   </li>
+  </ul>
 
-  <p>Most operations of the WAV Player API work in a synchronous mode. The WAV Player API requires a callback to notify the application of the operational status of the player. The callback must be implemented and passed to stop the WAV playback.</p> 
-  <p>Multiple instances of the WAV player can be used to play several audio data streams concurrently. This means that your application can play multiple uncompressed audio files, such as WAV, at the same time.</p> 
-  
-  <p>The following figure illustrates the general WAV player state changes.</p> 
-  <p align="center"><strong>Figure: WAV player state changes</strong></p> 
-  <p align="center"><img src="../../images/wav_player_state_changes.png" alt="WAV player state changes" /></p> 
+  <p>Most operations of the WAV Player API work in a synchronous mode. The WAV Player API requires a callback to notify the application of the operational status of the player. The callback must be implemented and passed to stop the WAV playback.</p>
+  <p>Multiple instances of the WAV player can be used to play several audio data streams concurrently. This means that your application can play multiple uncompressed audio files, such as WAV, at the same time.</p>
+
+  <p>The following figure illustrates the general WAV player state changes.</p>
+  <p align="center"><strong>Figure: WAV player state changes</strong></p>
+  <p align="center"><img src="../../images/wav_player_state_changes.png" alt="WAV player state changes" /></p>
 
 <h2 id="tone">Tone Player</h2>
 
-<p>Tizen enables your application to play a tone or a list of tones using the Tone Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">wearable</a> applications).</p> 
-  <p>You can generate tones in 2 ways: </p> 
-  <ul> 
-   <li><p>Specify the frequency values. You can specify either 1 or 2 frequencies.</p></li> 
-   <li><p>Use a DTMF (Dual Tone Multi Frequency) preset frequency value of the <code>tone_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">wearable</a> applications).</p></li> 
-  </ul> 
+<p>Tizen enables your application to play a tone or a list of tones using the Tone Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">wearable</a> applications).</p>
+  <p>You can generate tones in 2 ways: </p>
+  <ul>
+   <li><p>Specify the frequency values. You can specify either 1 or 2 frequencies.</p></li>
+   <li><p>Use a DTMF (Dual Tone Multi Frequency) preset frequency value of the <code>tone_type_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html#gaf12912b2c8f9ffe720518ce797506574">wearable</a> applications).</p></li>
+  </ul>
 
   <p>You can <a href="#play_tone">start and stop playing a tone</a>, and <a href="#duration">play a tone for a specified duration</a>.</p>
-  
-  <p>The following figures illustrate the general tone player state changes.</p> 
-  <p align="center"><strong>Figure: Tone player states</strong></p> 
-  <p align="center"><img src="../../images/tone.png" alt="Tone player states" /></p>    
+
+  <p>The following figures illustrate the general tone player state changes.</p>
+  <p align="center"><strong>Figure: Tone player states</strong></p>
+  <p align="center"><img src="../../images/tone.png" alt="Tone player states" /></p>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -248,8 +248,8 @@
 <li>
 <p>Retrieve the default internal storage paths for audio and video files, and define the specific paths for the audio and video files to play. To access and use internal storage, include the <code>storage.h</code> header file in your application.</p>
 <pre class="prettyprint">
-#define MP3_SAMPLE &quot;SampleAudio.mp3&quot;;
-#define MP4_SAMPLE &quot;SampleVideo.mp4&quot;;
+#define MP3_SAMPLE "SampleAudio.mp3";
+#define MP4_SAMPLE "SampleVideo.mp4";
 
 int internal_storage_id;
 char *audio_storage_path = NULL;
@@ -259,57 +259,57 @@ char *video_path = NULL;
 
 static bool
 storage_cb(int storage_id, storage_type_e type, storage_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *path, void *user_data)
+           const char *path, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+    if (type == STORAGE_TYPE_INTERNAL) {
+        internal_storage_id = storage_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 _get_storage_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *path = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_foreach_device_supported(storage_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_get_directory(internal_storage_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_DIRECTORY_MUSIC, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio_storage_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_get_directory(internal_storage_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_DIRECTORY_VIDEOS, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_storage_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int error_code = 0;
+    char *path = NULL;
+
+    error_code = storage_foreach_device_supported(storage_cb, NULL);
+    error_code = storage_get_directory(internal_storage_id,
+                                       STORAGE_DIRECTORY_MUSIC, &amp;path);
+    if (error_code != STORAGE_ERROR_NONE) {
+        audio_storage_path = strdup(path);
+        free(path);
+    }
+
+    error_code = storage_get_directory(internal_storage_id,
+                                       STORAGE_DIRECTORY_VIDEOS, &amp;path);
+    if (error_code != STORAGE_ERROR_NONE) {
+        video_storage_path = strdup(path);
+        free(path);
+    }
 }
 
 void
 _set_test_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int path_len = 0;
+    int path_len = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;path_len = strlen(audio_storage_path) + strlen(MP3_SAMPLE) + 1;
-&nbsp;&nbsp;&nbsp;&nbsp;audio_path = malloc(path_len);
-&nbsp;&nbsp;&nbsp;&nbsp;memset(audio_path, 0x0, path_len);
+    path_len = strlen(audio_storage_path) + strlen(MP3_SAMPLE) + 1;
+    audio_path = malloc(path_len);
+    memset(audio_path, 0x0, path_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(audio_path, audio_storage_path, strlen(audio_storage_path));
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(audio_path, MP3_SAMPLE, strlen(MP3_SAMPLE));
+    strncat(audio_path, audio_storage_path, strlen(audio_storage_path));
+    strncat(audio_path, MP3_SAMPLE, strlen(MP3_SAMPLE));
 
-&nbsp;&nbsp;&nbsp;&nbsp;path_len = strlen(video_storage_path) + strlen(MP4_SAMPLE) + 1;
-&nbsp;&nbsp;&nbsp;&nbsp;video_path = malloc(path_len);
-&nbsp;&nbsp;&nbsp;&nbsp;memset(video_path, 0x0, path_len);
+    path_len = strlen(video_storage_path) + strlen(MP4_SAMPLE) + 1;
+    video_path = malloc(path_len);
+    memset(video_path, 0x0, path_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(video_path, video_storage_path, strlen(video_storage_path));
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(video_path, MP4_SAMPLE, strlen(MP4_SAMPLE));
+    strncat(video_path, video_storage_path, strlen(video_storage_path));
+    strncat(video_path, MP4_SAMPLE, strlen(MP4_SAMPLE));
 }
 </pre>
 </li>
@@ -340,40 +340,40 @@ int tone_player_id;
 <p>Define a variable for the player handle, and create the handle by passing the variable to the <code>player_create()</code> function. You need the handle for defining which file to play and with what playback settings. The following example code also creates buttons for the UI to control the playback.</p>
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;player_h player;
+    player_h player;
 };
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_create(&amp;ad-&gt;player);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to create&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Perform more playback configuration, such as setting callbacks,
-&nbsp;&nbsp;&nbsp;&nbsp;   setting the source file URI, and preparing the player
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    int error_code = 0;
+    error_code = player_create(&amp;ad-&gt;player);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to create");
+    /*
+       Perform more playback configuration, such as setting callbacks,
+       setting the source file URI, and preparing the player
+    */
 }
 
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a window */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a button */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add a callback to the button */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button_init, &quot;clicked&quot;, init_base_player, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button_end, &quot;clicked&quot;, release_base_player, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create an Evas image object for the video surface */
+    /* Create a window */
+    /* Create a button */
+    /* Add a callback to the button */
+    evas_object_smart_callback_add(button_init, "clicked", init_base_player, ad);
+    evas_object_smart_callback_add(button_end, "clicked", release_base_player, ad);
+    /* Create an Evas image object for the video surface */
 }
 
 static void
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+    appdata_s *ad = data;
+    create_base_gui(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -390,21 +390,21 @@ app_create(void *data)
 static void
 _player_interrupted_cb(player_interrupted_coded_e code, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;player_state_e state;
+    appdata_s *ad = data;
+    player_state_e state;
 
-&nbsp;&nbsp;&nbsp;&nbsp;player_get_state(ad-&gt;player, &amp;state);
-&nbsp;&nbsp;&nbsp;&nbsp;log_print(DLOG_INFO, LOG_TAG, &quot;current player state = %d&quot;, state);
-&nbsp;&nbsp;&nbsp;&nbsp;/* If the state is PLAYER_STATE_PAUSED, update UI (for example, button) */
+    player_get_state(ad-&gt;player, &amp;state);
+    log_print(DLOG_INFO, LOG_TAG, "current player state = %d", state);
+    /* If the state is PLAYER_STATE_PAUSED, update UI (for example, button) */
 }
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set an interruption callback if the application wants to know the reason */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_interrupted_cb(g_player, _player_interrupted_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to create&quot;);
+    /* Set an interruption callback if the application wants to know the reason */
+    error_code = player_set_interrupted_cb(g_player, _player_interrupted_cb, ad);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to create");
 }
 </pre>
 <p>The playback is interrupted and the callback triggered when, for example, another multimedia application is run. The player state automatically changes to <code>PLAYER_STATE_PAUSED</code> or <code>PLAYER_STATE_IDLE</code> according to the session policy. To get the current state, use the <code>player_get_state()</code> function.</p>
@@ -416,17 +416,17 @@ init_base_player(appdata_s *ad)
 static void
 _player_completed_cb(void *data)
 {
-&nbsp;&nbsp; dlog_print(DLOG_INFO, &quot;Player&quot;, &quot;Playback End&quot;);
+   dlog_print(DLOG_INFO, "Player", "Playback End");
 }
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set a completed callback for when the playback ends */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_completed_cb(g_player, _player_completed_cb, ad);
+    /* Set a completed callback for when the playback ends */
+    error_code = player_set_completed_cb(g_player, _player_completed_cb, ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set completed cb&quot;);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to set completed cb");
 }
 </pre>
 </li>
@@ -437,15 +437,15 @@ init_base_player(appdata_s *ad)
 static void
 _player_error_cb(int error_code, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;playback failed, error = %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "playback failed, error = %x", error_code);
 }
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_error_cb(g_player, _player_error_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set error cb&quot;);
+    error_code = player_set_error_cb(g_player, _player_error_cb, NULL);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to set error cb");
 }
 </pre>
 <p>The player error callback is triggered when the player stops working due to an error. You can use the callback to try to recover from the error. For example, try to change the player state to <code>PLAYER_STATE_READY</code> by calling the <code>player_stop()</code> function. Then remove all other callbacks and reset the player by calling the <code>player_unprepare()</code> function. At the end, the player is in the <code>PLAYER_STATE_IDLE</code> state, so you can release the resources allocated to the player.</p>
@@ -511,7 +511,7 @@ error_code = player_set_uri(ad-&gt;player, video_path);
 <p>To retrieve the correct display handle, use the <code>GET_DISPLAY()</code> function. To set the display, use the <code>player_set_display()</code> function with the player handle, display type (a <code>player_display_type_e</code> enumerator in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html#ga6b83386e10a8febc7e5dfbff85b342ab">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html#ga6b83386e10a8febc7e5dfbff85b342ab">wearable</a> applications), and display handle:</p>
 <pre class="prettyprint">
 error_code = player_set_display(g_player, PLAYER_DISPLAY_TYPE_OVERLAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GET_DISPLAY(evas_obj));
+                                GET_DISPLAY(evas_obj));
 </pre>
 <p>After the <code>player_set_display()</code> function has been successfully executed, the player is connected to the display.</p>
 
@@ -542,10 +542,10 @@ error_code = player_prepare_async(ad-&gt;player, _prepared_cb, ad);
 <pre class="prettyprint">
 player_state_e state;
 do {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_get_state(ad-&gt;player, &amp;state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;usleep(1000);
+    error_code = player_get_state(ad-&gt;player, &amp;state);
+    if (error_code != PLAYER_ERROR_NONE)
+        break;
+    usleep(1000);
 } while (state != PLAYER_STATE_READY);
 </pre>
 </li>
@@ -553,16 +553,16 @@ do {
 <p>Start playing the video file using the <code>player_start()</code> function:</p>
 <pre class="prettyprint">
 if (error_code == PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_start(g_player);
+    error_code = player_start(g_player);
 </pre>
 <p>If you used the <code>player_prepare_async()</code> function to prepare the player, use the following callback function to handle the playback:</p>
 <pre class="prettyprint">
 static void
 _prepared_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_start(ad-&gt;player);
+    appdata_s *ad = data;
+    int error_code = 0;
+    error_code = player_start(ad-&gt;player);
 }
 </pre>
 <p>The <code>player_start()</code> function changes the player state from <code>PLAYER_STATE_READY</code> to <code>PLAYER_STATE_PLAYING</code>. The video file plays until you call the <code>player_stop()</code> or <code>player_pause()</code> function.</p>
@@ -582,7 +582,7 @@ _prepared_cb(void *data)
 <p>Stop the player using the <code>player_stop()</code> function:</p>
 <pre class="prettyprint">
 error_code = player_stop(player);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_stop() = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_stop() = %d", error_code);
 </pre>
 </li>
 
@@ -590,7 +590,7 @@ dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_stop() = %d&quot;, error_code);
 <p>Reset the player using the <code>player_unprepare()</code> function:</p>
 <pre class="prettyprint">
 error_code = player_unprepare(player);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_unprepare() = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_unprepare() = %d", error_code);
 </pre>
 <p>After the player is reset, it is in the <code>PLAYER_STATE_IDLE</code> state.</p>
 </li>
@@ -599,7 +599,7 @@ dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_unprepare() = %d&quot;, error_code)
 <p>Destroy the player handle using the <code>player_destroy()</code> function:</p>
 <pre class="prettyprint">
 error_code = player_destroy(player);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_destroy = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_destroy = %d", error_code);
 </pre>
 </li>
 
@@ -631,9 +631,9 @@ static char *path_3 = NULL;
 char *resource_path = NULL;
 
 resource_path = app_get_resource_path();
-snprintf(path_1, sizeof(path_1)-1, &quot;%s/sample.3gp&quot;, resource_path);
-snprintf(path_2, sizeof(path_2)-1, &quot;%s/test.wav&quot;, resource_path);
-snprintf(path_3, sizeof(path_3)-1, &quot;%s/test2.wav&quot;, resource_path);
+snprintf(path_1, sizeof(path_1)-1, "%s/sample.3gp", resource_path);
+snprintf(path_2, sizeof(path_2)-1, "%s/test.wav", resource_path);
+snprintf(path_3, sizeof(path_3)-1, "%s/test2.wav", resource_path);
 free(resource_path);
 
 static const int PLAYBACK_TIME = 6;
@@ -683,27 +683,27 @@ ret = player_prepare(player_3);
 ret = player_get_state(player_1, &amp;state_1);
 
 while (state_1 != PLAYER_STATE_READY) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = player_get_state(player_1, &amp;state_1);
+    ret = player_get_state(player_1, &amp;state_1);
 
-&nbsp;&nbsp;&nbsp;&nbsp;usleep(1000);
+    usleep(1000);
 }
 
 /* Wait to prepare player_2 */
 ret = player_get_state(player_2, &amp;state_2);
 
 while (state_2 != PLAYER_STATE_READY) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = player_get_state(player_2, &amp;state_2);
+    ret = player_get_state(player_2, &amp;state_2);
 
-&nbsp;&nbsp;&nbsp;&nbsp;usleep(1000);
+    usleep(1000);
 }
 
 /* Wait to prepare player_3 */
 ret = player_get_state(player_3, &amp;state_3);
 
 while (state_3 != PLAYER_STATE_READY) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = player_get_state(player_3, &amp;state_3);
+    ret = player_get_state(player_3, &amp;state_3);
 
-&nbsp;&nbsp;&nbsp;&nbsp;usleep(1000);
+    usleep(1000);
 }
 </pre>
 </li>
@@ -760,16 +760,16 @@ ret = player_destroy(player_3);
 bool is_visible;
 
 error_code = player_is_display_visible(player, &amp;is_visible);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_is_display_visible = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_is_display_visible = %d", error_code);
 </pre>
 </li>
 <li>
 <p>If the display is not visible, make it visible using the <code>player_set_display_visible()</code> function with the second parameter set to <code>true</code>:</p>
 <pre class="prettyprint">
 if (!is_visible) {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_display_visible(player, true);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;player_set_display_visible = %d&quot;, error_code);
+    error_code = player_set_display_visible(player, true);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "player_set_display_visible = %d", error_code);
 }
 </pre>
 </li>
@@ -780,7 +780,7 @@ if (!is_visible) {
 <p>Set the display mode using the <code>player_set_display_mode()</code> function:</p>
 <pre class="prettyprint">
 error_code = player_set_display_mode(player, PLAYER_DISPLAY_MODE_FULL_SCREEN);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_mode = %d", error_code);
 </pre>
 <p>The available display modes are defined in the <code>player_display_mode_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">wearable</a> applications).</p>
 </li>
@@ -789,7 +789,7 @@ dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_
 <p>Set the display rotation using the <code>player_set_display_rotation()</code> function:</p>
 <pre class="prettyprint">
 error_code = player_set_display_rotation(player, PLAYER_DISPLAY_ROTATION_90);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_mode = %d", error_code);
 </pre>
 <p>The available display rotations are defined in the <code>player_display_rotation_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">wearable</a> applications).</p>
 </li>
@@ -827,7 +827,7 @@ int width;
 int height;
 
 error_code = player_get_video_size(player, &amp;width, &amp;height);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_is_display_visible = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_is_display_visible = %d", error_code);
 </pre>
 </li>
 <li>
@@ -837,7 +837,7 @@ dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_is_display_visible = %d&quot;, erro
 int duration;
 
 error_code = player_get_duration(player, &amp;duration);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_duration = %d&quot;, error_code);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_duration = %d", error_code);
 </pre>
 </li>
 <li>
@@ -849,8 +849,8 @@ int channels;
 int bit_rate;
 
 error_code = player_get_audio_stream_info(player, &amp;sample_rate,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;channels, &amp;bit_rate);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_audio_stream_info = %d&quot;, error_code);
+                                          &amp;channels, &amp;bit_rate);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_audio_stream_info = %d", error_code);
 </pre>
 </li>
 <li>
@@ -861,7 +861,7 @@ int fps;
 int bit_rate;
 
 error_code = player_get_video_stream_info(player, &amp;fps, &amp;bit_rate);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_video_stream_info = %d&quot;, error_code);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_video_stream_info = %d", error_code);
 </pre>
 </li>
 <li>
@@ -872,7 +872,7 @@ char *audio_codec;
 char *video_codec;
 
 error_code = player_get_codec_info(player, &amp;audio_codec, &amp;video_codec);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_codec_info = %d&quot;, error_code);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_codec_info = %d", error_code);
 </pre>
 </li>
 <li>
@@ -888,17 +888,17 @@ char *title;
 char *year;
 
 error_code = player_get_content_info(player, PLAYER_CONTENT_INFO_ALBUM, &amp;album);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_content_info album = %d&quot;, album);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_content_info album = %d", album);
 error_code = player_get_content_info(player, PLAYER_CONTENT_INFO_ARTIST, &amp;artist);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_content_info artist = %d&quot;, artist);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_content_info artist = %d", artist);
 error_code = player_get_content_info(player, PLAYER_CONTENT_INFO_AUTHOR, &amp;author);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_content_info author = %d&quot;, author);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_content_info author = %d", author);
 error_code = player_get_content_info(player, PLAYER_CONTENT_INFO_GENRE, &amp;genre);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_content_info genre = %d&quot;, genre);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_content_info genre = %d", genre);
 error_code = player_get_content_info(player, PLAYER_CONTENT_INFO_TITLE, &amp;title);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_content_info title = %d&quot;, title);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_content_info title = %d", title);
 error_code = player_get_content_info(player, PLAYER_CONTENT_INFO_YEAR, &amp;year);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_get_content_info year = %d&quot;, year);
+dlog_print(DLOG_INFO, LOG_TAG, "player_get_content_info year = %d", year);
 </pre>
 
   <div class="note">
@@ -914,7 +914,7 @@ void *album_art;
 int size;
 
 error_code = player_get_album_art(player, &amp;album_art, &amp;size);
-dlog_print(DLOG_INFO, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_code);
+dlog_print(DLOG_INFO, LOG_TAG, "player_set_display_mode = %d", error_code);
 </pre>
 </li>
 </ul>
@@ -933,7 +933,7 @@ dlog_print(DLOG_INFO, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_c
 <li>
 <p>Set the subtitle path using the <code>player_set_subtitle_path()</code> function:</p>
 <pre class="prettyprint">
-#define SUBTITLE &quot;subtitles_test_file.srt&quot;
+#define SUBTITLE "subtitles_test_file.srt"
 
 char *data_path = app_get_data_path();
 int path_len = strlen(data_path) + 10;
@@ -942,7 +942,7 @@ strncat(path, data_path, path_len);
 strncat(path, SUBTITLE, path_len);
 
 error_code = player_set_subtitle_path(player, path);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_subtitle_path() = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_set_subtitle_path() = %d", error_code);
 free(path);
 </pre>
 
@@ -969,19 +969,19 @@ free(path);
 static void
 _playback_completed_cb(int id, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const char* path = (const char*)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;WAV Player&quot;, &quot;Completed! [id:%d, path:%s]&quot;, id, path);
+    const char* path = (const char*)user_data;
+    dlog_print(DLOG_INFO, "WAV Player", "Completed! [id:%d, path:%s]", id, path);
 }
 
 void
 main()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int wav_player_id;
-&nbsp;&nbsp;&nbsp;&nbsp;wav_player_error_e ret;
-&nbsp;&nbsp;&nbsp;&nbsp;const char* wav_path = &quot;PATH OF YOUR WAV FILE&quot;;
+    int wav_player_id;
+    wav_player_error_e ret;
+    const char* wav_path = "PATH OF YOUR WAV FILE";
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = wav_player_start(wav_path, SOUND_TYPE_MEDIA, _playback_completed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void*)wav_path, &amp;wav_player_id);
+    ret = wav_player_start(wav_path, SOUND_TYPE_MEDIA, _playback_completed_cb,
+                           (void*)wav_path, &amp;wav_player_id);
 }
 </pre>
 <p>To set the path of your WAV file, you may need to retrieve the default path for audio files. For more information, see the <a href="../data/data_storages_n.htm">Data Storages</a> guide.</p>
@@ -993,8 +993,8 @@ main()
 void
 my_stop()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;wav_player_error_e ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = wav_player_stop(wav_player_id);
+    wav_player_error_e ret;
+    ret = wav_player_stop(wav_player_id);
 }
 </pre>
 </li>
@@ -1033,8 +1033,8 @@ tone_player_start(TONE_TYPE_SUP_CONGESTION, SOUND_TYPE_CALL, 1000, &amp;tone_pla
 </pre>
 <p>When you set the duration to a specified time, playback stops automatically after that time. You can also stop playback manually using the <code>tone_player_stop()</code> function.</p>
 
-  
-  
+
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/media/media_recording_n.htm b/org.tizen.guides/html/native/media/media_recording_n.htm
index b681393..661d09a 100644 (file)
--- a/org.tizen.guides/html/native/media/media_recording_n.htm
+++ b/org.tizen.guides/html/native/media/media_recording_n.htm
@@ -40,12 +40,12 @@
                     <li><a href="#record_video">Recording a Video</a></li>
                 </ul>
                        </li>
-        </ul>          
+        </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>                    
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>                        
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Wearable Native</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/native/Multimedia/Media" target="_blank">Media Sample Description</a></li>
         </ul>
@@ -56,34 +56,34 @@
 <h1>Media Recording</h1>
 
 <p>Tizen offers basic recorder features, including an audio and video recorder.</p>
- 
-  <p>The main features of the Recorder API include:</p> 
+
+  <p>The main features of the Recorder API include:</p>
   <ul>
   <li>Recording audio
   <p>You can <a href="#record_audio">record audio</a> after you have <a href="#prepare_audio">prepared the audio recorder</a>.</p></li>
   <li>Recording video
   <p>You can <a href="#record_video">record a video</a> after you have <a href="#prepare_video">prepared the video recorder</a>.</p></li>
   </ul>
-  
+
   <p>The following file formats are supported:</p>
-<ul>  
+<ul>
     <li>Video: <code>mp4</code> and <code>3gp</code></li>
-       <li>Audio: <code>m4a</code> and <code>amr</code></li> 
+       <li>Audio: <code>m4a</code> and <code>amr</code></li>
    </ul>
   <p>Valid input sources consist of internal and external microphones and a camera. The used input audio or video source depends on the currently connected audio path and camera module of the device. The recorder APIs in the video recorder serve as the interface with the hardware. Input is processed through that handle.</p>
 
-  <p>During testing, you can use the emulator to imitate audio or video recording, as long as your computer has a proper input source device.</p> 
+  <p>During testing, you can use the emulator to imitate audio or video recording, as long as your computer has a proper input source device.</p>
+
+  <p>The following figure illustrates the general recorder state changes.</p>
+  <p align="center"><strong>Figure: Recorder states</strong></p>
+  <p align="center"><img src="../../images/using_recorder_states.png" alt="Recorder states" /></p>
+
 
-  <p>The following figure illustrates the general recorder state changes.</p> 
-  <p align="center"><strong>Figure: Recorder states</strong></p> 
-  <p align="center"><img src="../../images/using_recorder_states.png" alt="Recorder states" /></p> 
-  
-  
     <div class="note">
         <strong>Note</strong>
         While running applications on the emulator, audio-video synchronization errors can occur due to the computer performance.
     </div>
-  
+
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -111,9 +111,9 @@ static recorder_h g_recorder;
 /* Create the audio recorder handle */
 int error_code = recorder_create_audiorecorder(&amp;g_recorder);
 if (error_code == RECORDER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_INFO, LOG_TAG, "error code = %d", error_code);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 <p>The function sets the audio recorder state to <code>RECORDER_STATE_CREATED</code>.</p>
 </li>
@@ -133,11 +133,11 @@ error_code = recorder_set_state_changed_cb(g_recorder, _state_changed_cb, NULL);
 <pre class="prettyprint">
 static void
 _state_changed_cb(recorder_state_e previous, recorder_state_e current,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool by_policy, void *user_data)
+                  bool by_policy, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;_recorder_state_changed_cb (prev: %d, curr: %d)\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;previous, current);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "_recorder_state_changed_cb (prev: %d, curr: %d)\n",
+               previous, current);
 }
 </pre>
 </li>
@@ -150,10 +150,10 @@ _state_changed_cb(recorder_state_e previous, recorder_state_e current,
 <li>
 <p>Set the audio codec for encoding the audio stream using the <code>recorder_set_audio_encoder()</code> function:</p>
 <pre class="prettyprint">
-#define FILENAME_PREFIX &quot;AUDIO&quot;
+#define FILENAME_PREFIX "AUDIO"
 struct tm localtime = {0};
 time_t rawtime = time(NULL);
-char filename[256] = {&#39;\0&#39;};
+char filename[256] = {'\0'};
 size_t size;
 
 /* Set the audio encoder */
@@ -183,14 +183,14 @@ error_code = recorder_set_file_format(g_recorder, RECORDER_FILE_FORMAT_3GP);
 <pre class="prettyprint">
 /* Create the file name */
 if (localtime_r(&amp;rawtime, &amp;localtime) != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;size = snprintf(filename, sizeof(filename),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.3gp&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_get_data_path(), FILENAME_PREFIX,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_year + 1900,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_mon + 1, localtime.tm_mday,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
+    size = snprintf(filename, sizeof(filename),
+                    "%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.3gp",
+                    app_get_data_path(), FILENAME_PREFIX,
+                    localtime.tm_year + 1900,
+                    localtime.tm_mon + 1, localtime.tm_mday,
+                    localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 }
 
 /* Set the full path and file name */
@@ -226,9 +226,9 @@ error_code = recorder_attr_set_audio_samplerate(g_recorder, 44100);
 <p>Register a callback using the <code>recorder_set_recording_limit_reached_cb()</code> function:</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;recorder_set_recording_limit_reached_cb(g_recorder,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_recorder_recording_limit_reached_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+    recorder_set_recording_limit_reached_cb(g_recorder,
+                                            _recorder_recording_limit_reached_cb,
+                                            NULL);
 </pre>
 </li>
 <li>
@@ -237,9 +237,9 @@ error_code =
 <pre class="prettyprint">
 static void
 _recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                     void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Recording limit reached: %d\n&quot;, type);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Recording limit reached: %d\n", type);
 }
 </pre>
 </li>
@@ -307,27 +307,27 @@ error_code = recorder_pause(g_recorder);
 static bool
 _recorder_expect_state(recorder_h recorder, recorder_state_e expected_state)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;recorder_state_e state;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = recorder_get_state(recorder, &amp;state);
+    recorder_state_e state;
+    int error_code = recorder_get_state(recorder, &amp;state);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;recorder state = %d, expected recorder state = %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state, expected_state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (state == expected_state)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return TRUE;
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "recorder state = %d, expected recorder state = %d",
+               state, expected_state);
+    if (state == expected_state)
+        return TRUE;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
+    return FALSE;
 }
 
 /* Stop the recorder and save the recorded data to a file */
 if (_recorder_expect_state(g_recorder, RECORDER_STATE_RECORDING)
-&nbsp;&nbsp;&nbsp;&nbsp;|| _recorder_expect_state(g_recorder, RECORDER_STATE_PAUSED)) {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = recorder_commit(g_recorder);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != RECORDER_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    || _recorder_expect_state(g_recorder, RECORDER_STATE_PAUSED)) {
+    error_code = recorder_commit(g_recorder);
+    if (error_code != RECORDER_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return true;
+    }
 }
 </pre>
 </li>
@@ -378,9 +378,9 @@ error_code = recorder_destroy(g_recorder);
 <p>Define a structure for storing the camera and video recorder handles and a Boolean variable specifying whether the video recorder is switched off:</p>
 <pre class="prettyprint">
 struct recdata {
-&nbsp;&nbsp;&nbsp;&nbsp;bool shutdown;
-&nbsp;&nbsp;&nbsp;&nbsp;recorder_h recorder;
-&nbsp;&nbsp;&nbsp;&nbsp;camera_h camera;
+    bool shutdown;
+    recorder_h recorder;
+    camera_h camera;
 };
 </pre>
 </li>
@@ -390,7 +390,7 @@ struct recdata {
 <pre class="prettyprint">
 static const int RECORD_TIME=2;
 static const int RECORD_LIMIT=4;
-#define FILENAME_PREFIX &quot;VIDEO&quot;
+#define FILENAME_PREFIX "VIDEO"
 static int g_bitrate = 288000;
 static int duration;
 static int playing=0;
@@ -432,9 +432,9 @@ rec_data.recorder = NULL;
 /* Create the camera handle */
 error_code = camera_create(CAMERA_DEVICE_CAMERA0, &amp;rec_data.camera);
 if (error_code == CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_INFO, LOG_TAG, "error code = %d", error_code);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 <p>The function sets the camera state to <code>CAMERA_STATE_CREATED</code>. To query the state, use the <code>camera_get_state()</code> function.</p>
 </li>
@@ -453,8 +453,8 @@ else
 <p>Register a callback using the <code>recorder_set_recording_limit_reached_cb()</code> function:</p>
 <pre class="prettyprint">
 ret = recorder_set_recording_limit_reached_cb(rec_data.recorder,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_recorder_recording_limit_reached_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0);
+                                              _recorder_recording_limit_reached_cb,
+                                              0);
 </pre>
 </li>
 
@@ -464,9 +464,9 @@ ret = recorder_set_recording_limit_reached_cb(rec_data.recorder,
 <pre class="prettyprint">
 static void
 _recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                                     void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, &quot;Video Recorder&quot;, &quot;Recording limit reached: %d\n&quot;, type);
+    dlog_print(DLOG_DEBUG, "Video Recorder", "Recording limit reached: %d\n", type);
 }
 </pre>
 </li>
@@ -495,9 +495,9 @@ ret = recorder_pause(rec_data.recorder);
 /* Create the video recorder handle */
 error_code = recorder_create_videorecorder(rec_data.camera, &amp;rec_data.recorder);
 if (error_code == RECORDER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_INFO, LOG_TAG, "error code = %d", error_code);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 <p>The function sets the video recorder state to <code>RECORDER_STATE_CREATED</code>. To query the state, use the <code>recorder_get_state()</code> function.</p>
 </li>
@@ -510,11 +510,11 @@ else
 <pre class="prettyprint">
 /* Set the state change callback for the video recorder */
 error_code = recorder_set_state_changed_cb(rec_data.recorder,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on_state_changed_cb, NULL);
+                                           on_state_changed_cb, NULL);
 if (error_code == RECORDER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_INFO, LOG_TAG, "error code = %d", error_code);
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 </pre>
 </li>
 <li>
@@ -524,11 +524,11 @@ else
 /* State change callback for the video recorder */
 static void
 on_state_changed_cb(recorder_state_e previous, recorder_state_e current,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool by_asm, void *data)
+                    bool by_asm, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;_recorder_state_changed_cb (prev: %d, curr: %d)\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;previous, current);
+    dlog_print(DLOG_DEBUG, LOG_TAG,
+               "_recorder_state_changed_cb (prev: %d, curr: %d)\n",
+               previous, current);
 }
 </pre>
 </li>
@@ -552,16 +552,16 @@ recorder_video_codec_e supported_codec;
 static bool
 _video_encoder_cb(recorder_video_codec_e codec, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;recorder_video_codec_e * supported_codec =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(recorder_video_codec_e*)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;*supported_codec = codec;
+    recorder_video_codec_e * supported_codec =
+        (recorder_video_codec_e*)user_data;
+    *supported_codec = codec;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 
 error_code = recorder_foreach_supported_video_encoder(rec_data.recorder,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_video_encoder_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;supported_codec);
+                                                      _video_encoder_cb,
+                                                      &amp;supported_codec);
 </pre>
 <p>The possible video codec values are defined in the <code>recorder_video_codec_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#gaaf3f0deeb1717f568e2b93bb9a375b63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#gaaf3f0deeb1717f568e2b93bb9a375b63">wearable</a> applications).</p>
 </li>
@@ -593,7 +593,7 @@ error_code = recorder_attr_set_video_encoder_bitrate(rec_data.recorder, g_bitrat
 <pre class="prettyprint">
 /* Set the file format */
 error_code = recorder_set_file_format(rec_data.recorder,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RECORDER_FILE_FORMAT_MP4);
+                                      RECORDER_FILE_FORMAT_MP4);
 </pre>
 <p>The possible file format values are defined in the <code>recorder_file_format_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga7d3dbf7b0b3ef68101562b89e81ecf1e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga7d3dbf7b0b3ef68101562b89e81ecf1e">wearable</a> applications).</p>
 </li>
@@ -604,19 +604,19 @@ error_code = recorder_set_file_format(rec_data.recorder,
 <pre class="prettyprint">
 struct tm localtime = {0};
 time_t rawtime = time(NULL);
-char filename[256] = {&#39;\0&#39;};
+char filename[256] = {'\0'};
 size_t size;
 
 /* Create the file name */
 if (localtime_r(&amp;rawtime, &amp;localtime) != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;size = snprintf(filename, sizeof(filename),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.mp4&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_get_data_path(), FILENAME_PREFIX,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_year + 1900,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_mon + 1, localtime.tm_mday,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
+    size = snprintf(filename, sizeof(filename),
+                    "%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.mp4",
+                    app_get_data_path(), FILENAME_PREFIX,
+                    localtime.tm_year + 1900,
+                    localtime.tm_mon + 1, localtime.tm_mday,
+                    localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 }
 /* Set the full path and file name */
 error_code = recorder_set_filename(rec_data.recorder, filename);
@@ -730,7 +730,7 @@ error_code = recorder_destroy(rec_data.recorder);
 
 </ol>
 
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/media/media_streams_n.htm b/org.tizen.guides/html/native/media/media_streams_n.htm
index fda7e01..807f717 100644 (file)
--- a/org.tizen.guides/html/native/media/media_streams_n.htm
+++ b/org.tizen.guides/html/native/media/media_streams_n.htm
@@ -246,7 +246,7 @@
 <p align="center"><img src="../../images/media_streamer_scenario.png" alt="Media streamer scenario" /></p>
 
 <h2 id="create_server">Creating the Server Part</h2>
-       
+
 <p>To create the server part:</p>
 <ol>
 <li>Create the media streamer handle and call the <code>media_streamer_create()</code> function:
@@ -256,7 +256,7 @@ int media_streamer_create(&amp;ms_streamer);
 </pre>
 <p>Memory is allocated for the given handle.</p>
 </li>
-<li>Create a source node of the video data stream to transfer to the client part. 
+<li>Create a source node of the video data stream to transfer to the client part.
 <p>For example, the Videotest node is a checkerboard pattern of colors at the edge of the YCbCr gamut and nearby colors that are out of gamut.</p>
 <ol type="a">
 <li>Create the <code>Videotestsrc</code> source node:
@@ -272,10 +272,10 @@ media_streamer_node_add(ms_streamer, video_src);
 </li>
 </ol>
 </li>
-<li>To transfer data over an IP connection, create the final sending node on the server part and the first receiving node on the client part. The creation of the client part is described in <a href="#create_client">Creating the Client Part</a>. 
+<li>To transfer data over an IP connection, create the final sending node on the server part and the first receiving node on the client part. The creation of the client part is described in <a href="#create_client">Creating the Client Part</a>.
 <p>The Real Time Protocol (RTP) node is universal and unique at the same time, and capable of performing enormous work on the RTP packets for their truthful and confident transmission, such as RTP packet validation, maintenance of the SSRC participant database, scheduling of RR/SR RTCP packets, and parsing codec streams transmitted in the same RTP session.</p>
 <ol type="a">
-<li>Create the <code>rtp_bin</code> RTP node: 
+<li>Create the <code>rtp_bin</code> RTP node:
 <pre class="prettyprint">
 media_streamer_node_h rtp_bin = NULL;
 media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_RTP, NULL, NULL, &amp;rtp_bin);
@@ -284,8 +284,8 @@ media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_RTP, NULL, NULL, &amp;rtp_bi
 <li>Create a bundle and add the RTP node parameters to it:
 <pre class="prettyprint">
 bundle *params = bundle_create();
-bundle_add_str(params, MEDIA_STREAMER_PARAM_VIDEO_OUT_PORT, &quot;5000&quot;);
-bundle_add_str(params, MEDIA_STREAMER_PARAM_HOST, &quot;127.0.0.1&quot;);
+bundle_add_str(params, MEDIA_STREAMER_PARAM_VIDEO_OUT_PORT, "5000");
+bundle_add_str(params, MEDIA_STREAMER_PARAM_HOST, "127.0.0.1");
 media_streamer_node_set_params(rtp_bin, params);
 </pre>
 </li>
@@ -296,15 +296,15 @@ media_streamer_node_add(ms_streamer, rtp_bin);
 </li>
 </ol>
 </li>
-<li>Create the encoding format. 
+<li>Create the encoding format.
 <p>To turn raw video from Videotestsrc or captured video data into encoded video data, an encoder is needed. The conversion of raw video streams (scaling, frame rate conversion, colorspace conversion, and samplerate conversion) is one of the main tasks to conform to the profile output format. The encoding format can be H263 or H264, for example.</p>
 <pre class="prettyprint">
 media_format_h vfmt_encoded = NULL;
 /* Define encoded video format */
 media_format_create(&amp;vfmt_encoded);
 if (media_format_set_video_mime(vfmt_encoded, MEDIA_FORMAT_H263)
-&nbsp;&nbsp;&nbsp;&nbsp;!= MEDIA_FORMAT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_format_set_video_mime failed!&quot;);
+    != MEDIA_FORMAT_ERROR_NONE)
+    g_print("media_format_set_video_mime failed!");
 
 media_format_set_video_width(vfmt_encoded, 800);
 media_format_set_video_height(vfmt_encoded, 600);
@@ -312,12 +312,12 @@ media_format_set_video_avg_bps(vfmt_encoded, 10000);
 media_format_set_video_max_bps(vfmt_encoded, 30000);
 </pre>
 </li>
-<li>Create the video encoder node. 
+<li>Create the video encoder node.
 <p>The video converter, video scale, video encoder, video filter, and video parser elements are logically connected inside the video encoder node. They are all initially predefined in the <code>.ini</code> file.</p>
 <pre class="prettyprint">
 media_streamer_node_h video_enc = NULL;
 media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_ENCODER, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vfmt_encoded, &amp;video_enc);
+                           vfmt_encoded, &amp;video_enc);
 </pre>
 <p>Add the video encoder node to the media streamer:</p>
 <pre class="prettyprint">
@@ -330,7 +330,7 @@ media_streamer_node_add(ms_streamer, video_enc);
 <pre class="prettyprint">
 media_streamer_node_h video_pay = NULL;
 media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_PAY, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vfmt_encoded, &amp;video_pay);
+                           vfmt_encoded, &amp;video_pay);
 </pre>
 </li>
 <li>Add the video pay node to the media streamer:
@@ -349,14 +349,14 @@ int src_pad_num = 0;
 char **sink_pad_name = NULL;
 int sink_pad_num = 0;
 media_streamer_node_get_pad_name(video_pay, &amp;src_pad_name, src_pad_num,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sink_pad_name, &amp;sink_pad_num);
+                                 &amp;sink_pad_name, &amp;sink_pad_num);
 </pre>
 </li>
 <li>Link the nodes consequently into a line:
 <pre class="prettyprint">
-media_streamer_node_link(video_src, &quot;src&quot;, video_enc, &quot;sink&quot;);
-media_streamer_node_link(video_enc, &quot;src&quot;, video_pay, &quot;sink&quot;);
-media_streamer_node_link(video_pay, &quot;src&quot;, rtp_bin, &quot;video_in&quot;);
+media_streamer_node_link(video_src, "src", video_enc, "sink");
+media_streamer_node_link(video_enc, "src", video_pay, "sink");
+media_streamer_node_link(video_pay, "src", rtp_bin, "video_in");
 </pre>
 </li>
 </ol>
@@ -365,21 +365,21 @@ media_streamer_node_link(video_pay, &quot;src&quot;, rtp_bin, &quot;video_in&quo
 
 
        <h2 id="prepare_server">Preparing the Server Part</h2>
-       
+
 <p>To prepare the server part of the media streamer, transfer the nodes from the <code>MEDIA_STREAMER_STATE_IDLE</code> state to the <code>MEDIA_STREAMER_STATE_READY</code> state.</p>
-<p>Call the <code>media_streamer_prepare()</code> function to change the state:</p>    
+<p>Call the <code>media_streamer_prepare()</code> function to change the state:</p>
 <pre class="prettyprint">
 int media_streamer_prepare(ms_streamer);
 </pre>
-       
+
        <h2 id="playing_server">Playing the Server Part</h2>
-       
+
 <p>To play the server part of the Media Streamer, transfer the nodes from the <code>MEDIA_STREAMER_STATE_READY</code> state to the <code>MEDIA_STREAMER_STATE_PLAYING</code> state.</p>
 <p>Call the <code>media_streamer_play()</code> function to change the state and start playing:</p>
 <pre class="prettyprint">
 int media_streamer_play(ms_streamer);
 </pre>
-       
+
        <h2 id="create_client">Creating the Client Part</h2>
 
 <p>To create the client part on the 2<sup>nd</sup> device on which the server part device is intended to stream to through an IP:</p>
@@ -406,15 +406,15 @@ media_streamer_node_add(ms_streamer, video_sink);
 </li>
 </ol>
 </li>
-<li>Create the encoding format. 
+<li>Create the encoding format.
 <p>To receive video in a proper format, set it initially to have a proper video stream frame on the client part.</p>
 <pre class="prettyprint">
 media_format_h vfmt_encoded = NULL;
 /* Define the encoded video format */
 media_format_create(&amp;vfmt_encoded);
 if (media_format_set_video_mime(vfmt_encoded, MEDIA_FORMAT_H263)
-&nbsp;&nbsp;&nbsp;&nbsp;!= MEDIA_FORMAT_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;g_print(&quot;media_format_set_video_mime failed!&quot;);
+    != MEDIA_FORMAT_ERROR_NONE)
+    g_print("media_format_set_video_mime failed!");
 
 media_format_set_video_width(vfmt_encoded, 800);
 media_format_set_video_height(vfmt_encoded, 600);
@@ -422,10 +422,10 @@ media_format_set_video_avg_bps(vfmt_encoded, 10000);
 media_format_set_video_max_bps(vfmt_encoded, 30000);
 </pre>
 </li>
-<li>To receive data over an IP connection, first create the receiving node on the client part to be able to receive RTP packets for their further decoding into a video stream. 
+<li>To receive data over an IP connection, first create the receiving node on the client part to be able to receive RTP packets for their further decoding into a video stream.
 <p>The RTP node is universal and unique at the same time, and capable of performing enormous work on RTP packets for their truthful and confident receiving, such as keeping per participant statistics based on received RTCP packets, allowing an application to easily receive and decode an RTP stream with multiple SSRCs, and reordering and removing duplicate RTP packets as they are received from a network source.</p>
 <ol type="a">
-<li>Create the <code>rtp_bin</code> RTP node: 
+<li>Create the <code>rtp_bin</code> RTP node:
 <pre class="prettyprint">
 media_streamer_node_h rtp_bin = NULL;
 media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_RTP, NULL, NULL, &amp;rtp_bin);
@@ -434,13 +434,13 @@ media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_RTP, NULL, NULL, &amp;rtp_bi
 <li>Create a bundle and add the RTP node parameters to it:
 <pre class="prettyprint">
 bundle *params = bundle_create();
-bundle_add_str(params, MEDIA_STREAMER_PARAM_VIDEO_IN_PORT, &quot;5005&quot;);
+bundle_add_str(params, MEDIA_STREAMER_PARAM_VIDEO_IN_PORT, "5005");
 media_streamer_node_set_params(rtp_bin, params);
 </pre>
 </li>
 <li>Set the incoming format for the RTP node:
 <pre class="prettyprint">
-media_streamer_node_set_pad_format(rtp_node, &quot;video_in_rtp&quot;, vfmt_encoded);
+media_streamer_node_set_pad_format(rtp_node, "video_in_rtp", vfmt_encoded);
 </pre>
 </li>
 <li>Add the RTP node to the media streamer:
@@ -456,7 +456,7 @@ media_streamer_node_add(ms_streamer, rtp_bin);
 <pre class="prettyprint">
 media_streamer_node_h video_depay= NULL;
 media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_DEPAY, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vfmt_encoded, &amp;video_depay);
+                           vfmt_encoded, &amp;video_depay);
 </pre>
 </li>
 <li>Add the video depay node to the media streamer:
@@ -466,12 +466,12 @@ media_streamer_node_add(ms_streamer, video_depay);
 </li>
 </ol>
 </li>
-<li>Create the video decoder node. 
+<li>Create the video decoder node.
 <p>The video decoder, video parser, video converter, and video scale elements are logically connected inside the video decider node. They are all initially predefined in the <code>.ini</code> file.</p>
 <pre class="prettyprint">
 media_streamer_node_h video_dec = NULL;
 media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_DECODER, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vfmt_encoded, &amp;video_dec);
+                           vfmt_encoded, &amp;video_dec);
 </pre>
 <p>Add the video decoder node to the media streamer:</p>
 <pre class="prettyprint">
@@ -482,22 +482,22 @@ media_streamer_node_add(ms_streamer, video_dec);
 <pre class="prettyprint">
 media_streamer_node_h video_queue= NULL;
 media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_QUEUE, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vfmt_encoded, &amp;video_queue);
+                           vfmt_encoded, &amp;video_queue);
 </pre>
 <p>Add the video queue node to the media streamer:</p>
 <pre class="prettyprint">
 media_streamer_node_add(ms_streamer, video_queue);
 </pre>
 </li>
-<li>To have a proper receiving node functionality, link the client nodes between each other into a logic chain: 
+<li>To have a proper receiving node functionality, link the client nodes between each other into a logic chain:
 <pre class="prettyprint">
-media_streamer_node_link(video_depay, &quot;src&quot;, video_dec, &quot;sink&quot;);
-media_streamer_node_link(video_dec, &quot;src&quot;, video_queue, &quot;sink&quot;);
-media_streamer_node_link(video_queue, &quot;src&quot;, video_sink, &quot;sink&quot;);
+media_streamer_node_link(video_depay, "src", video_dec, "sink");
+media_streamer_node_link(video_dec, "src", video_queue, "sink");
+media_streamer_node_link(video_queue, "src", video_sink, "sink");
 </pre>
 </li>
 </ol>
-       
+
        <h2 id="client_prepare">Preparing the Client Part</h2>
 
 <p>To prepare the client part of the media streamer, transfer the nodes from the <code>MEDIA_STREAMER_STATE_IDLE</code> state to the <code>MEDIA_STREAMER_STATE_READY</code> state.</p>
@@ -517,7 +517,7 @@ int media_streamer_play(ms_streamer);
 <p align="center"><strong>Figure: Media streamer client part device receiving Videotestsrc streamed in the streaming scenario</strong></p>
 <p align="center"><img src="../../images/media_streamer_playing.png" alt="Media streamer streaming media" /></p>
 
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/media/metadata_n.htm b/org.tizen.guides/html/native/media/metadata_n.htm
index 1f86a52..5fc8710 100644 (file)
--- a/org.tizen.guides/html/native/media/metadata_n.htm
+++ b/org.tizen.guides/html/native/media/metadata_n.htm
@@ -46,7 +46,7 @@
                        </li>
                        <li><a href="#attribute">Editable Metadata Attributes</a></li>
                        <li><a href="#attribute2">Extractable Metadata Attributes</a></li>
-        </ul>          
+        </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor API for Mobile Native</a></li>
@@ -54,7 +54,7 @@
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor API for Wearable Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Wearable Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Wearable Native</a></li>                       
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Wearable Native</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/native/Multimedia/Metadata-editor" target="_blank">Metadata-editor Sample Description</a></li>
         </ul>
     </div></div>
@@ -63,7 +63,7 @@
 <div id="container"><div id="contents"><div class="content">
 
   <h1>Metadata</h1>
- 
+
 <p>To handle content metadata, you can use the following features:</p>
 
 <ul>
@@ -72,17 +72,17 @@
 <p>The metadata editor supports editing the <a href="#attribute">metadata</a> of the mp3 and mp4 (audio only) file formats. Image and video file editing is not supported.</p></li>
 <li>Metadata extraction
 <p>Media files, such as mp3 and mp4 files, contain <a href="#attribute2">extractable metadata</a>. You can <a href="#get_metadata">extract metadata</a> from such media files with the metadata extractor.</p>
- 
- <p align="center"><strong>Figure: Getting metadata</strong></p> 
+
+ <p align="center"><strong>Figure: Getting metadata</strong></p>
  <p align="center"><img src="../../images/metadata.png" alt="Getting metadata" /></p>
- 
+
   <p>The metadata extractor can be used with video and audio files only. It is not supported in the image files.</p>
   </li>
 <li>MIME type information
 <p>You can <a href="#get_file_ext">get a MIME type</a> for a file extension and <a href="#get_mime">get a list of extensions</a> associated, for example, with an image or a JPEG MIME type.</p>
 </li>
 </ul>
-  
+
 
 
 <h2 id="prerequisites">Prerequisites</h2>
@@ -115,47 +115,47 @@ static metadata_editor_h g_metadata_h = NULL;
 <pre class="prettyprint">
 int internal_storage_id;
 char *internal_music_storage_path;
-char *music_file_name = &quot;test_music.mp3&quot;;
+char *music_file_name = "test_music.mp3";
 char *music_test_path;
 
 static bool
 storage_cb(int storage_id, storage_type_e type, storage_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *path, void *user_data)
+           const char *path, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+    if (type == STORAGE_TYPE_INTERNAL) {
+        internal_storage_id = storage_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 _get_internal_storage_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error;
-&nbsp;&nbsp;&nbsp;&nbsp;char *path = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;error = storage_foreach_device_supported(storage_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;error = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_MUSIC, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error == STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_music_storage_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int error;
+    char *path = NULL;
+
+    error = storage_foreach_device_supported(storage_cb, NULL);
+    error = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_MUSIC, &amp;path);
+    if (error == STORAGE_ERROR_NONE) {
+        internal_music_storage_path = strdup(path);
+        free(path);
+    }
 }
 
 void
 _make_test_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int path_len = 0;
+    int path_len = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;path_len = strlen(internal_music_storage_path) + strlen(music_file_name) + 2;
-&nbsp;&nbsp;&nbsp;&nbsp;music_test_path = malloc(path_len);
-&nbsp;&nbsp;&nbsp;&nbsp;memset(music_test_path, 0x0, path_len);
+    path_len = strlen(internal_music_storage_path) + strlen(music_file_name) + 2;
+    music_test_path = malloc(path_len);
+    memset(music_test_path, 0x0, path_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(music_test_path, path_len, &quot;%s/%s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_music_storage_path, music_file_name);
+    snprintf(music_test_path, path_len, "%s/%s",
+             internal_music_storage_path, music_file_name);
 }
 </pre>
 </li>
@@ -186,65 +186,65 @@ static metadata_extractor_h g_metadata_h = NULL;
 int internal_storage_id;
 char *internal_music_storage_path;
 char *internal_video_storage_path;
-char *music_file_name = &quot;test_music.mp3&quot;;
-char *video_file_name = &quot;test_video.mp4&quot;;
+char *music_file_name = "test_music.mp3";
+char *video_file_name = "test_video.mp4";
 char *music_test_path;
 char *video_test_path;
 
 static bool
 storage_cb(int storage_id, storage_type_e type, storage_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *path, void *user_data)
+           const char *path, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+    if (type == STORAGE_TYPE_INTERNAL) {
+        internal_storage_id = storage_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 _get_internal_storage_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error;
-&nbsp;&nbsp;&nbsp;&nbsp;char *path = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;error = storage_foreach_device_supported(storage_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;error = storage_get_directory(internal_storage_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_DIRECTORY_MUSIC, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error != STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_music_storage_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_VIDEOS, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error != STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_video_storage_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int error;
+    char *path = NULL;
+
+    error = storage_foreach_device_supported(storage_cb, NULL);
+    error = storage_get_directory(internal_storage_id,
+                                  STORAGE_DIRECTORY_MUSIC, &amp;path);
+    if (error != STORAGE_ERROR_NONE) {
+        internal_music_storage_path = strdup(path);
+        free(path);
+    }
+
+    error = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_VIDEOS, &amp;path);
+    if (error != STORAGE_ERROR_NONE) {
+        internal_video_storage_path = strdup(path);
+        free(path);
+    }
 }
 
 void
 _make_test_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int path_len = 0;
+    int path_len = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;path_len = strlen(internal_music_storage_path) + strlen(music_file_name) + 1;
-&nbsp;&nbsp;&nbsp;&nbsp;music_test_path = malloc(path_len);
-&nbsp;&nbsp;&nbsp;&nbsp;memset(music_test_path, 0x0, path_len);
+    path_len = strlen(internal_music_storage_path) + strlen(music_file_name) + 1;
+    music_test_path = malloc(path_len);
+    memset(music_test_path, 0x0, path_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(music_test_path, internal_music_storage_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strlen(internal_music_storage_path));
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(music_test_path, music_file_name, strlen(music_file_name));
+    strncat(music_test_path, internal_music_storage_path,
+            strlen(internal_music_storage_path));
+    strncat(music_test_path, music_file_name, strlen(music_file_name));
 
-&nbsp;&nbsp;&nbsp;&nbsp;path_len = strlen(internal_video_storage_path) + strlen(video_file_name) + 1;
-&nbsp;&nbsp;&nbsp;&nbsp;video_test_path = malloc(path_len);
-&nbsp;&nbsp;&nbsp;&nbsp;memset(video_test_path, 0x0, path_len);
+    path_len = strlen(internal_video_storage_path) + strlen(video_file_name) + 1;
+    video_test_path = malloc(path_len);
+    memset(video_test_path, 0x0, path_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(video_test_path, internal_video_storage_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strlen(internal_video_storage_path));
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(video_test_path, video_file_name, strlen(video_file_name));
+    strncat(video_test_path, internal_video_storage_path,
+            strlen(internal_video_storage_path));
+    strncat(video_test_path, video_file_name, strlen(video_file_name));
 }
 </pre>
 </li>
@@ -278,7 +278,7 @@ ret = metadata_editor_set_path(g_metadata_h, music_test_path);
 <p>As parameters, define the metadata editor handle, the attribute you want to edit, and the new value you want to set to the attribute. The possible attributes are defined in the <code>metadata_editor_attr_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html#ga1c6a8dcf861f527302e9c55152692df3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html#ga1c6a8dcf861f527302e9c55152692df3">wearable</a> applications).</p>
 <p>The following example code edits the title of the audio content. You can edit other attributes by defining a different attribute enumerator (and a corresponding new value).</p>
 <pre class="prettyprint">
-char *value = &quot;My Song&quot;;
+char *value = "My Song";
 
 ret = metadata_editor_set_metadata(g_metadata_h, METADATA_EDITOR_ATTR_TITLE, value);
 </pre>
@@ -294,7 +294,7 @@ ret = metadata_editor_set_metadata(g_metadata_h, METADATA_EDITOR_ATTR_TITLE, val
 <p>Add artwork to the file using the <code>metadata_editor_append_picture()</code> function.</p>
 <p>As parameters, define the metadata editor handle and the path of the image file that contains the artwork. The image file must be in the JPEG or PNG format. The image is added to the last image file position. You can add multiple image files to the same audio file.</p>
 <pre class="prettyprint">
-char *artwork = &quot;append_image.jpg&quot;;
+char *artwork = "append_image.jpg";
 
 ret = metadata_editor_append_picture(g_metadata_h, artwork);
 </pre>
@@ -370,10 +370,10 @@ ret = metadata_extractor_set_path(g_metadata_h, music_test_path);
 char *value = NULL;
 
 ret = metadata_extractor_get_metadata(g_metadata_h, METADATA_DURATION, &amp;value);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;METADATA_DURATION: %s\n&quot;, value);
+dlog_print(DLOG_DEBUG, LOG_TAG, "METADATA_DURATION: %s\n", value);
 if (value != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(value);
-&nbsp;&nbsp;&nbsp;&nbsp;value = NULL;
+    free(value);
+    value = NULL;
 }
 </pre>
 
@@ -395,17 +395,17 @@ void *artwork = NULL;
 char *artwork_mime = NULL;
 
 ret = metadata_extractor_get_artwork(g_metadata_h, &amp;artwork,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;artwork_size, &amp;artwork_mime);
+                                     &amp;artwork_size, &amp;artwork_mime);
 dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Artwork: size: %d, mime type: %s\n&quot;, artwork_size, artwork_mime);
+           "Artwork: size: %d, mime type: %s\n", artwork_size, artwork_mime);
 if (artwork != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(artwork);
-&nbsp;&nbsp;&nbsp;&nbsp;artwork = NULL;
+    free(artwork);
+    artwork = NULL;
 }
 
 if (artwork_mime != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(artwork_mime);
-&nbsp;&nbsp;&nbsp;&nbsp;artwork_mime = NULL;
+    free(artwork_mime);
+    artwork_mime = NULL;
 }
 </pre>
 
@@ -425,10 +425,10 @@ char *lyrics = NULL;
 
 ret = metadata_extractor_get_synclyrics(g_metadata_h, 1, &amp;time_info, &amp;lyrics);
 if (lyrics != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Synclyrics: time_info: %d, lyrics: %s\n&quot;, time_info, lyrics);
-&nbsp;&nbsp;&nbsp;&nbsp;free(lyrics);
-&nbsp;&nbsp;&nbsp;&nbsp;lyrics = NULL;
+    dlog_print(DLOG_DEBUG, LOG_TAG,
+               "Synclyrics: time_info: %d, lyrics: %s\n", time_info, lyrics);
+    free(lyrics);
+    lyrics = NULL;
 }
 </pre>
 
@@ -454,21 +454,21 @@ int frame_size = 0;
 void *frame = NULL;
 
 ret = metadata_extractor_get_frame(g_metadata_h, &amp;frame, &amp;frame_size);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Frame: size: %d\n&quot;, frame_size);
+dlog_print(DLOG_DEBUG, LOG_TAG, "Frame: size: %d\n", frame_size);
 if (frame != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(frame);
-&nbsp;&nbsp;&nbsp;&nbsp;frame = NULL;
+    free(frame);
+    frame = NULL;
 }
 
 /* Use metadata_extractor_get_frame_at_time() */
 unsigned long timestamp = 500;
 
 ret = metadata_extractor_get_frame_at_time(g_metadata_h, timestamp, true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;frame, &amp;frame_size);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Frame at %d: size: %d\n&quot;, timestamp, frame_size);
+                                           &amp;frame, &amp;frame_size);
+dlog_print(DLOG_DEBUG, LOG_TAG, "Frame at %d: size: %d\n", timestamp, frame_size);
 if (frame != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(frame);
-&nbsp;&nbsp;&nbsp;&nbsp;frame = NULL;
+    free(frame);
+    frame = NULL;
 }
 </pre>
 
@@ -493,15 +493,15 @@ metadata_extractor_destroy(g_metadata_h);
 <ul>
 <li>For an individual file extension:
 <p>Use the <code>mime_type_get_mime_type()</code> function. The first parameter is the file extension without the leading dot and the second parameter is the MIME type for the given file extension.</p>
- 
-<p>The MIME type is <code>&#39;application/octet-stream&#39;</code> if the given file extension is not associated with any specific file format.</p>
+
+<p>The MIME type is <code>'application/octet-stream'</code> if the given file extension is not associated with any specific file format.</p>
 
 <pre class="prettyprint">
 #include &lt;dirent.h&gt;
 #include &lt;string.h&gt;
 
 char *mime_type;
-int error = mime_type_get_mime_type(&quot;jpg&quot;, &amp;mime_type);
+int error = mime_type_get_mime_type("jpg", &amp;mime_type);
 </pre></li>
 
 <li>For the extensions of all files in the resource directory:
@@ -513,30 +513,30 @@ struct dirent *pDirent = NULL;
 DIR *dir;
 char *res_path = app_get_resource_path();
 if (!res_path)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 dir = opendir(res_path);
 if (dir) {
-&nbsp;&nbsp;&nbsp;&nbsp;while ((pDirent = readdir(dir)) != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pDirent-&gt;d_type != DT_REG) /* Only regular files */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
+    while ((pDirent = readdir(dir)) != NULL) {
+        if (pDirent-&gt;d_type != DT_REG) /* Only regular files */
+            continue;
 </pre></li>
 
 <li><p>Get the extension from a file name using the <code>strrchr()</code> function available in the <code>&lt;string.h&gt;</code> header. Incrementing the pointer address is necessary, so use the extension without a dot:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *extension = strrchr(pDirent-&gt;d_name, &#39;.&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!extension)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;extension++;
+        char *extension = strrchr(pDirent-&gt;d_name, '.');
+        if (!extension)
+            continue;
+        extension++;
 </pre></li>
 
 <li><p>Use the <code>mime_type_get_mime_type()</code> function to get the MIME type of each file using the extension pointer as an extension:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mime_type_get_mime_type(extension, &amp;mime_type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Here you have a MIME type in its variable */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(mime_type);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;closedir(dir);
+        mime_type_get_mime_type(extension, &amp;mime_type);
+        /* Here you have a MIME type in its variable */
+        free(mime_type);
+    }
+    closedir(dir);
 }
 </pre></li></ol></li>
 </ul>
@@ -548,225 +548,225 @@ if (dir) {
 <pre class="prettyprint">
 char **extension;
 int length;
-int error = mime_type_get_file_extension(&quot;image/jpeg&quot;, &amp;extension, &amp;length);
+int error = mime_type_get_file_extension("image/jpeg", &amp;extension, &amp;length);
 
 int i;
 for (i = 0; i &lt; length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use extension[i] */
+    /* Use extension[i] */
 
 for (i = 0; i &lt; length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;free(extension[i]);
+    free(extension[i]);
 free(extension);
 </pre>
 
 <h2 id="attribute">Editable Metadata Attributes</h2>
 
 <p>The following table lists the metadata you can edit.</p>
-  
-   <p align="center" class="Table"><strong>Table: Editable metadata attributes</strong></p> 
-  <table> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_ARTIST</code></td> 
-     <td>Artist of the audio content</td> 
-    </tr> 
-     <tr> 
-     <td><code>METADATA_EDITOR_ATTR_TITLE</code></td> 
-     <td>Title of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_ALBUM</code></td> 
-     <td>Album of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_GENRE</code></td> 
-     <td>Genre of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_AUTHOR</code></td> 
-     <td>Author of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_COPYRIGHT</code></td> 
-     <td>Copyright of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_DATE</code></td> 
-     <td>Date of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_DESCRIPTION</code></td> 
-     <td>Description of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_COMMENT</code></td> 
-     <td>Comment of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_TRACK_NUM</code></td> 
-     <td>Track number of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_PICTURE_NUM</code></td> 
-     <td>Picture number of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_CONDUCTOR</code></td> 
-     <td>Conductor of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_EDITOR_ATTR_UNSYNCLYRICS</code></td> 
-     <td>Unsync lyrics of the audio content</td> 
-    </tr> 
-   </tbody> 
-  </table> 
+
+   <p align="center" class="Table"><strong>Table: Editable metadata attributes</strong></p>
+  <table>
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_ARTIST</code></td>
+     <td>Artist of the audio content</td>
+    </tr>
+     <tr>
+     <td><code>METADATA_EDITOR_ATTR_TITLE</code></td>
+     <td>Title of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_ALBUM</code></td>
+     <td>Album of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_GENRE</code></td>
+     <td>Genre of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_AUTHOR</code></td>
+     <td>Author of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_COPYRIGHT</code></td>
+     <td>Copyright of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_DATE</code></td>
+     <td>Date of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_DESCRIPTION</code></td>
+     <td>Description of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_COMMENT</code></td>
+     <td>Comment of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_TRACK_NUM</code></td>
+     <td>Track number of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_PICTURE_NUM</code></td>
+     <td>Picture number of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_CONDUCTOR</code></td>
+     <td>Conductor of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_EDITOR_ATTR_UNSYNCLYRICS</code></td>
+     <td>Unsync lyrics of the audio content</td>
+    </tr>
+   </tbody>
+  </table>
 
   <h2 id="attribute2">Extractable Metadata Attributes</h2>
-  
+
 <p>The following table lists the extractable metadata.</p>
-  
-   <p align="center" class="Table"><strong>Table: Metadata extractor attributes</strong></p> 
-  <table> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_DURATION</code></td> 
-     <td>Duration of the content</td> 
-    </tr> 
-     <tr> 
-     <td><code>METADATA_VIDEO_BITRATE</code></td> 
-     <td>Bitrate of the video content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_VIDEO_FPS</code></td> 
-     <td>FPS of the video content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_VIDEO_WIDTH</code></td> 
-     <td>Width of the video content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_VIDEO_HEIGHT</code></td> 
-     <td>Height of the video content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_HAS_VIDEO</code></td> 
-     <td>Whether the content has video stream</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_AUDIO_BITRATE</code></td> 
-     <td>Bitrate of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_AUDIO_CHANNELS</code></td> 
-     <td>Channel of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_AUDIO_SAMPLERATE</code></td> 
-     <td>Sample rate of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_AUDIO_BITPERSAMPLE</code></td> 
-     <td>Bit per sample of the audio content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_HAS_AUDIO</code></td> 
-     <td>Whether the content has audio stream</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_ARTIST</code></td> 
-     <td>Artist of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_TITLE</code></td> 
-     <td>Title of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_ALBUM</code></td> 
-     <td>Album of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_ALBUM_ARTIST</code></td> 
-     <td>Album artist of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_GENRE</code></td> 
-     <td>Genre of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_AUTHOR</code></td> 
-     <td>Author of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_COPYRIGHT</code></td> 
-     <td>Copyright of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_DATE</code></td> 
-     <td>Date of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_DESCRIPTION</code></td> 
-     <td>Description of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_COMMENT</code></td> 
-     <td>Comment about the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_TRACK_NUM</code></td> 
-     <td>Track number of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_CLASSIFICATION</code></td> 
-     <td>Classification of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_RATING</code></td> 
-     <td>Rating of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_LONGITUDE</code></td> 
-     <td>Longitude of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_LATITUDE</code></td> 
-     <td>Latitude of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_ALTITUDE</code></td> 
-     <td>Altitude of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_CONDUCTOR</code></td> 
-     <td>Conductor of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_UNSYNCLYRICS</code></td> 
-     <td>Asynchronous lyrics of the content</td> 
-    </tr> 
-    <tr> 
-     <td><code>METADATA_SYNCLYRICS_NUM</code></td> 
-     <td>Synchronous lyrics of the content</td> 
-    </tr>      
-    <tr> 
-     <td><code>METADATA_RECDATE</code></td> 
-     <td>Recorded date of the content</td> 
-    </tr> 
-       <tr> 
-     <td><code>METADATA_ROTATE</code></td> 
-     <td>Orientation of the content</td> 
-    </tr> 
-   </tbody> 
-  </table> 
- 
+
+   <p align="center" class="Table"><strong>Table: Metadata extractor attributes</strong></p>
+  <table>
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>METADATA_DURATION</code></td>
+     <td>Duration of the content</td>
+    </tr>
+     <tr>
+     <td><code>METADATA_VIDEO_BITRATE</code></td>
+     <td>Bitrate of the video content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_VIDEO_FPS</code></td>
+     <td>FPS of the video content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_VIDEO_WIDTH</code></td>
+     <td>Width of the video content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_VIDEO_HEIGHT</code></td>
+     <td>Height of the video content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_HAS_VIDEO</code></td>
+     <td>Whether the content has video stream</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_AUDIO_BITRATE</code></td>
+     <td>Bitrate of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_AUDIO_CHANNELS</code></td>
+     <td>Channel of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_AUDIO_SAMPLERATE</code></td>
+     <td>Sample rate of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_AUDIO_BITPERSAMPLE</code></td>
+     <td>Bit per sample of the audio content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_HAS_AUDIO</code></td>
+     <td>Whether the content has audio stream</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_ARTIST</code></td>
+     <td>Artist of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_TITLE</code></td>
+     <td>Title of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_ALBUM</code></td>
+     <td>Album of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_ALBUM_ARTIST</code></td>
+     <td>Album artist of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_GENRE</code></td>
+     <td>Genre of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_AUTHOR</code></td>
+     <td>Author of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_COPYRIGHT</code></td>
+     <td>Copyright of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_DATE</code></td>
+     <td>Date of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_DESCRIPTION</code></td>
+     <td>Description of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_COMMENT</code></td>
+     <td>Comment about the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_TRACK_NUM</code></td>
+     <td>Track number of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_CLASSIFICATION</code></td>
+     <td>Classification of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_RATING</code></td>
+     <td>Rating of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_LONGITUDE</code></td>
+     <td>Longitude of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_LATITUDE</code></td>
+     <td>Latitude of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_ALTITUDE</code></td>
+     <td>Altitude of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_CONDUCTOR</code></td>
+     <td>Conductor of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_UNSYNCLYRICS</code></td>
+     <td>Asynchronous lyrics of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_SYNCLYRICS_NUM</code></td>
+     <td>Synchronous lyrics of the content</td>
+    </tr>
+    <tr>
+     <td><code>METADATA_RECDATE</code></td>
+     <td>Recorded date of the content</td>
+    </tr>
+       <tr>
+     <td><code>METADATA_ROTATE</code></td>
+     <td>Orientation of the content</td>
+    </tr>
+   </tbody>
+  </table>
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/media/openal_n.htm b/org.tizen.guides/html/native/media/openal_n.htm
index 5e0e2aa..c04a568 100644 (file)
--- a/org.tizen.guides/html/native/media/openal_n.htm
+++ b/org.tizen.guides/html/native/media/openal_n.htm
@@ -68,22 +68,22 @@
 /* Open default device */
 device = alcOpenDevice(NULL);
 if (device != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create context */
-&nbsp;&nbsp;&nbsp;&nbsp;context=alcCreateContext(device, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (context != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set active context */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alcMakeContextCurrent(context);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* Create context */
+    context=alcCreateContext(device, NULL);
+    if (context != NULL) {
+        /* Set active context */
+        alcMakeContextCurrent(context);
+    }
 }
 </pre>
 
 <p>When your audio stream is no longer needed or inactive for a long time, destroy the context by calling the <code>alcDestroyContext()</code> function.</p>
-  
+
     <div class="note">
         <strong>Note</strong>
         The device cannot fall into a sleep state while the context is not destroyed. To avoid unwanted battery consumption, destroy the context punctually.
     </div>
-</li> 
+</li>
 
 <li>Requesting a source and buffer
 
@@ -117,9 +117,9 @@ if (device != NULL) {
 <p>The following example code verifies that a given extension is available, retrieves the names of all available devices and the name of the default device using the <code>alcGetString()</code> function, and opens the default device using the <code>alcOpenDevice()</code> function:</p>
 <pre class="prettyprint">
 /* Verify that a given extension is available for the current context */
-enumeration = alcIsExtensionPresent(NULL, &quot;ALC_ENUMERATION_EXT&quot;);
+enumeration = alcIsExtensionPresent(NULL, "ALC_ENUMERATION_EXT");
 if (enumeration == AL_FALSE)
-&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;[%s] enumeration extension not available&quot;, __func__);
+    LOGI("[%s] enumeration extension not available", __func__);
 
 /*
    Retrieve a list of available devices
@@ -134,12 +134,12 @@ defaultDeviceName = alcGetString(NULL, ALC_DEFAULT_DEVICE_SPECIFIER);
 /* Open the default device */
 device = alcOpenDevice(defaultDeviceName);
 if (!device) {
-&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;[%s] unable to open default device&quot;, __func__);
+    LOGI("[%s] unable to open default device", __func__);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
-LOGI(&quot;[%s] Device: %s &quot;, __func__, alcGetString(device, ALC_DEVICE_SPECIFIER));
+LOGI("[%s] Device: %s ", __func__, alcGetString(device, ALC_DEVICE_SPECIFIER));
 </pre>
 <p>The <code>alcOpenDevice()</code> function opens the audio device through the pulseaudio layer.</p>
 </li>
@@ -151,19 +151,19 @@ LOGI(&quot;[%s] Device: %s &quot;, __func__, alcGetString(device, ALC_DEVICE_SPE
 /* Create context */
 context = alcCreateContext(device, NULL);
 if (context == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;alcCloseDevice(device);
-&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;[%s] failed to create context&quot;, __func__);
+    alcCloseDevice(device);
+    LOGI("[%s] failed to create context", __func__);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 /* Set active context */
 if (!alcMakeContextCurrent(context)) {
-&nbsp;&nbsp;&nbsp;&nbsp;alcDestroyContext(context);
-&nbsp;&nbsp;&nbsp;&nbsp;alcCloseDevice(device);
-&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;[%s] failed to make default context&quot;, __func__);
+    alcDestroyContext(context);
+    alcCloseDevice(device);
+    LOGI("[%s] failed to make default context", __func__);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 <p>Once the device is associated with an active context, the AL commands are applied to that context.</p>
@@ -307,8 +307,8 @@ alGenBuffers(4, buffer);
 
 /* Fill all the buffers with audio data from the wave file */
 for (iLoop = 0; iLoop &lt; 4; iLoop++) {
-&nbsp;&nbsp;&nbsp;&nbsp;alBufferData(buffer[iLoop], AL_FORMAT_MONO8, pData, DATA_CHUNK_SIZE, 22050);
-&nbsp;&nbsp;&nbsp;&nbsp;alSourceQueueBuffers(source, 1, &amp;buffer[iLoop]);
+    alBufferData(buffer[iLoop], AL_FORMAT_MONO8, pData, DATA_CHUNK_SIZE, 22050);
+    alSourceQueueBuffers(source, 1, &amp;buffer[iLoop]);
 }
 </pre>
 </li>
@@ -320,40 +320,40 @@ for (iLoop = 0; iLoop &lt; 4; iLoop++) {
 <pre class="prettyprint">
 /* Start playing the streamed audio */
 alSourcePlay(source);
-LOGI(&quot;[%s] alSourcePlay&quot;, __func__);
+LOGI("[%s] alSourcePlay", __func__);
 
 /* Buffer queuing loop must operate in a new thread */
 iBuffersProcessed = 0;
 while (!thread_finish) {
-&nbsp;&nbsp;&nbsp;&nbsp;usleep(10 * 1000); /* Sleep 10 msec periodically */
-
-&nbsp;&nbsp;&nbsp;&nbsp;alGetSourcei(source, AL_BUFFERS_PROCESSED, &amp;iBuffersProcessed);
-
-&nbsp;&nbsp;&nbsp;&nbsp;iTotalBuffersProcessed += iBuffersProcessed;
-&nbsp;&nbsp;&nbsp;&nbsp;LOGI(&quot;Buffers Processed %d&quot;, iTotalBuffersProcessed);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   For each processed buffer, remove it from the source queue,
-&nbsp;&nbsp;&nbsp;&nbsp;   read the next chunk of audio data from the file,
-&nbsp;&nbsp;&nbsp;&nbsp;   fill the buffer with new data, and add it to the source queue
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;while (iBuffersProcessed) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Remove the buffer from the queue
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   (uiBuffer contains the buffer ID for the dequeued buffer)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uiBuffer = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alSourceUnqueueBuffers(source, 1, &amp;uiBuffer);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Read more pData audio data (if there is any) */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Copy audio data to buffer */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alBufferData(uiBuffer, AL_FORMAT_MONO8, pData, DATA_CHUNK_SIZE, 22050);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Insert the audio buffer to the source queue */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alSourceQueueBuffers(source, 1, &amp;uiBuffer);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iBuffersProcessed--;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    usleep(10 * 1000); /* Sleep 10 msec periodically */
+
+    alGetSourcei(source, AL_BUFFERS_PROCESSED, &amp;iBuffersProcessed);
+
+    iTotalBuffersProcessed += iBuffersProcessed;
+    LOGI("Buffers Processed %d", iTotalBuffersProcessed);
+
+    /*
+       For each processed buffer, remove it from the source queue,
+       read the next chunk of audio data from the file,
+       fill the buffer with new data, and add it to the source queue
+    */
+    while (iBuffersProcessed) {
+        /*
+           Remove the buffer from the queue
+           (uiBuffer contains the buffer ID for the dequeued buffer)
+        */
+        uiBuffer = 0;
+        alSourceUnqueueBuffers(source, 1, &amp;uiBuffer);
+
+        /* Read more pData audio data (if there is any) */
+
+        /* Copy audio data to buffer */
+        alBufferData(uiBuffer, AL_FORMAT_MONO8, pData, DATA_CHUNK_SIZE, 22050);
+        /* Insert the audio buffer to the source queue */
+        alSourceQueueBuffers(source, 1, &amp;uiBuffer);
+
+        iBuffersProcessed--;
+    }
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/media/radio_n.htm b/org.tizen.guides/html/native/media/radio_n.htm
index f083255..30d5802 100644 (file)
--- a/org.tizen.guides/html/native/media/radio_n.htm
+++ b/org.tizen.guides/html/native/media/radio_n.htm
@@ -45,8 +45,8 @@
 
 <p>Tizen provides functions for controlling radio hardware on your system.</p>
 
-<p>The main features of the Radio API include:</p>  
-  
+<p>The main features of the Radio API include:</p>
+
 <ul>
   <li>Switching the radio on and off
   <p>You can create a handle for a radio instance using the <code>radio_create()</code> function. A successful creation of the handle requires a radio tuner. You can switch the radio on and off using the <code>radio_start()</code> and <code>radio_stop()</code> functions.</p></li>
@@ -57,14 +57,14 @@
   <li>Searching for an adjacent channel
   <p>You can <a href="#seek">seek an adjacent channel</a> with the <code>radio_seek_up()</code> and <code>radio_seek_down()</code> functions.</p></li>
 </ul>
-  
+
 <p>The Radio API allows only one instance at the time. Radio playback can be interrupted by another radio application.</p>
 
 <p>The following figure illustrates the general radio state changes.</p>
 
-  <p align="center"><strong>Figure: Radio state changes</strong></p> 
-  <p align="center"><img src="../../images/radio_state_changes.png" alt="Radio state changes" /></p> 
-  
+  <p align="center"><strong>Figure: Radio state changes</strong></p>
+  <p align="center"><img src="../../images/radio_state_changes.png" alt="Radio state changes" /></p>
+
 <h2 id="prerequisites">Prerequisites</h2>
 
 <p>To enable your application to use the radio functionality:</p>
@@ -78,26 +78,26 @@
 <pre class="prettyprint">
 #define MAX_FREQUENCIES 10
 struct radioInfo {
-&nbsp;&nbsp;&nbsp;&nbsp;radio_h radio;
-&nbsp;&nbsp;&nbsp;&nbsp;int frequencies[MAX_FREQUENCIES];
-&nbsp;&nbsp;&nbsp;&nbsp;int num_freq;
-&nbsp;&nbsp;&nbsp;&nbsp;int selected_channel;
+    radio_h radio;
+    int frequencies[MAX_FREQUENCIES];
+    int num_freq;
+    int selected_channel;
 };
 typedef struct radioInfo mRadioInfo;
 
 mRadioInfo mRadio;
 ret = radio_create(&amp;mRadio.radio);
 if (ret != RADIO_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 </pre>
 </li>
 <li><p>To receive notifications when the radio playback is interrupted, register a callback function using the <code>radio_set_interrupted_cb()</code> function:</p>
 <pre class="prettyprint">
 ret = radio_set_interrupted_cb(mRadio.radio, on_radio_interrupted, &amp;mRadio);
 if (ret != RADIO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Delete the radio handle before closing the application */
+    /* Delete the radio handle before closing the application */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 </pre>
 <p>Radio playback is interrupted, for example, when the application moves to the background.</p>
@@ -107,19 +107,19 @@ if (ret != RADIO_ERROR_NONE) {
 static void
 on_radio_interrupted(radio_interrupted_code_e code, void* userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Search the radio handle from userdata */
-&nbsp;&nbsp;&nbsp;&nbsp;mRadioInfo* mRadio = (mRadioInfo *)userdata;
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (code) {
-&nbsp;&nbsp;&nbsp;&nbsp;case RADIO_INTERRUPTED_COMPLETED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Application, which was the source of the conflict, is now closed */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Restart the radio playback here */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Radio listening is interrupted */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Release the application resources or save the current state here */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* Search the radio handle from userdata */
+    mRadioInfo* mRadio = (mRadioInfo *)userdata;
+
+    switch (code) {
+    case RADIO_INTERRUPTED_COMPLETED:
+        /* Application, which was the source of the conflict, is now closed */
+        /* Restart the radio playback here */
+        break;
+    default:
+        /* Radio listening is interrupted */
+        /* Release the application resources or save the current state here */
+        break;
+    }
 }
 </pre>
 </li>
@@ -134,7 +134,7 @@ on_radio_interrupted(radio_interrupted_code_e code, void* userdata)
 <pre class="prettyprint">
 ret = radio_set_scan_completed_cb(mRadio.radio, on_scan_finished, &amp;mRadio);
 if (ret != RADIO_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 </pre>
 </li>
 <li><p>Implement the scan complete callback:</p>
@@ -142,8 +142,8 @@ if (ret != RADIO_ERROR_NONE)
 void
 on_scan_finished(void* userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Frequency scanning is completed */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Tune in to one of the scanned frequencies and start listening */
+    /* Frequency scanning is completed */
+    /* Tune in to one of the scanned frequencies and start listening */
 }
 </pre>
 </li>
@@ -159,10 +159,10 @@ radio_scan_start(mRadio.radio, on_scan_updated, &amp;mRadio);
 void
 on_scan_updated(int frequency, void* userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;mRadioInfo* mRadio = (mRadioInfo *)userdata;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Store the radio channels in the array */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Frequency values represent the kHz of the channel */
-&nbsp;&nbsp;&nbsp;&nbsp;mRadio-&gt;frequencies[mRadio-&gt;num_freq++] = frequency;
+    mRadioInfo* mRadio = (mRadioInfo *)userdata;
+    /* Store the radio channels in the array */
+    /* Frequency values represent the kHz of the channel */
+    mRadio-&gt;frequencies[mRadio-&gt;num_freq++] = frequency;
 }
 </pre>
 
@@ -183,14 +183,14 @@ on_scan_updated(int frequency, void* userdata)
 <pre class="prettyprint">
 ret = radio_set_frequency(mRadio.radio, mRadio.frequencies[mRadio.selected_channel]);
 if (ret != RADIO_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 </pre>
 </li>
 <li><p>Start playing the frequency using the <code>radio_start()</code> function:</p>
 <pre class="prettyprint">
 ret = radio_start(mRadio.radio);
 if (ret != RADIO_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 </pre>
 <p>If the radio emits no sound, check the signal strength with the <code>radio_get_signal_strength()</code> function, which returns the current signal strength as a dBuV value.</p>
 </li>
@@ -206,7 +206,7 @@ if (ret != RADIO_ERROR_NONE)
 <pre class="prettyprint">
 ret = radio_seek_down(mRadio.radio, on_seek_completed, &amp;mRadio);
 if (ret != RADIO_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 </pre>
 <p>To seek up, use the <code>radio_seek_up()</code> function in the same way.</p>
 </li>
@@ -215,17 +215,17 @@ if (ret != RADIO_ERROR_NONE)
 void
 on_seek_completed(int frequency, void* userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;mRadioInfo *mRadio = (mRadioInfo *)userdata;
-&nbsp;&nbsp;&nbsp;&nbsp;int new_frequency = 0;
+    mRadioInfo *mRadio = (mRadioInfo *)userdata;
+    int new_frequency = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Search is complete, and the radio is tuned in to the new frequency */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Application sets the new frequency and updates the user interface */
-&nbsp;&nbsp;&nbsp;&nbsp;radio_get_frequency(mRadio-&gt;radio, &amp;new_frequency);
+    /* Search is complete, and the radio is tuned in to the new frequency */
+    /* Application sets the new frequency and updates the user interface */
+    radio_get_frequency(mRadio-&gt;radio, &amp;new_frequency);
 }
 </pre>
 </li>
 </ol>
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/media/raw_audio_n.htm b/org.tizen.guides/html/native/media/raw_audio_n.htm
index 023b232..3a9858e 100644 (file)
--- a/org.tizen.guides/html/native/media/raw_audio_n.htm
+++ b/org.tizen.guides/html/native/media/raw_audio_n.htm
@@ -41,7 +41,7 @@
                                        <li><a href="#simple_recording">Managing Synchronous Recording</a></li>
                                        <li><a href="#async_recording">Managing Asynchronous Recording</a></li>
                                </ul>
-            </li>                      
+            </li>
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -54,8 +54,8 @@
 </div>
 <div id="container"><div id="contents"><div class="content">
 <h1>Raw Audio Playback and Recording</h1>
-<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. You can play and record uncompressed audio data both synchronously and asynchronously.</p> 
-  <p>The main uncompressed audio management features are:</p> 
+<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. You can play and record uncompressed audio data both synchronously and asynchronously.</p>
+  <p>The main uncompressed audio management features are:</p>
   <ul>
        <li>Playing uncompressed audio
        <p>Enables you to play <a href="#play_pcm">uncompressed audio</a> in your application.</p></li>
@@ -64,7 +64,7 @@
   </ul>
 
  <h2 id="play_pcm" name="play_pcm">Audio Output</h2>
- 
+
 <p>The Audio Output API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">wearable</a> applications) enables your application to play such data using output devices. You can <a href="#simple_playback">play audio synchronously</a>, or <a href="#async_playback">do it asynchronously</a>.</p>
   <p>To play the audio PCM data, the application must call the <code>audio_out_create()</code> function to initialize the audio output handle.</p>
   <p>Your application must define the following PCM data settings:</p>
@@ -84,13 +84,13 @@
     <li>8000 ~ 48000 Hz</li>
    </ul> </li>
   </ul>
-  
+
   <p>The following figures illustrate the general audio output states, and how the state changes when the audio output is interrupted by the system.</p>´
   <p align="center"><strong>Figure: Audio output states</strong></p>
   <p align="center"><img src="../../images/audio_output.png" alt="Audio output states" /></p>
   <p align="center"><strong>Figure: Audio output states when interrupted by system</strong></p>
   <p align="center"><img src="../../images/audio_output_interrupt_state.png" alt="Audio output states when interrupted by system" /></p>
-  
+
   <h3 id="use" name="use">Using Audio Output</h3>
   <p>For supporting various low-end Tizen devices, the application must follow certain guidelines:</p>
   <ul>
@@ -100,7 +100,7 @@
    <ul>
 
     <li>To reduce the processing overhead inside, use the target device-preferred PCM format (for example, signed 16-bit little endian, stereo, 44100 Hz).</li>
-    <li>Using the preferred format reduces internal operations, such as converting audio samples from mono to stereo or re-sampling audio frequency to fit the target device&#39;s input sample rate.</li>
+    <li>Using the preferred format reduces internal operations, such as converting audio samples from mono to stereo or re-sampling audio frequency to fit the target device's input sample rate.</li>
    </ul> </li>
    <li>Do not call the Audio Output functions too frequently.
    <ul>
@@ -109,7 +109,7 @@
    <li>Reduce event delay and remove glitches.
    <ul>
     <li>The Audio Output API works recursively with events. The smaller the buffer size, the more often are events generated. If you use the Audio Output API with the smallest buffer and other resources (for example, a timer or sensor), the application is negatively influenced by the delay of the event. To prevent problems, set the write buffer size properly based on the other resources you need.</li>
-    <li>To guarantee the working events of the Audio Output API independently, an instance of the Audio Output API needs to be created and worked on the event thread.</li> 
+    <li>To guarantee the working events of the Audio Output API independently, an instance of the Audio Output API needs to be created and worked on the event thread.</li>
    </ul> </li>
    <li>Use double-buffering.
    <ul>
@@ -120,8 +120,8 @@
        <li>If the Audio Output does not play for a long time for some reason, such as the screen turning off or idle playback, call the <code>audio_out_unprepare()</code> function to pause the stream and save power. The device cannot go to sleep while in the PLAYING state.</li>
        </ul> </li>
   </ul>
-  
-  
+
+
 <h2 id="record_pcm" name="record_pcm">Audio Input</h2>
 
 <p>The Audio Input API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">wearable</a> applications) enables your application to record such data from a microphone type input device. You can <a href="#simple_recording">record audio synchronously</a>, or <a href="#async_recording">do it asynchronously</a>.</p>
@@ -156,7 +156,7 @@
   <p align="center"><img src="../../images/audio_input.png" alt="Audio input states" /></p>
   <p align="center"><strong>Figure: Audio input states when interrupted by system</strong></p>
    <p align="center"><img src="../../images/audio_input_interrupt_state.png" alt="Audio input states when interrupted by system" /></p>
-  
+
 <h2 id="prerequisites">Prerequisites</h2>
 
 <p>To enable your application to use the uncompressed audio functionality:</p>
@@ -182,13 +182,13 @@ audio_io_error_e error_code;
 audio_in_h input;
 
 error_code = audio_in_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AUDIO_SAMPLE_TYPE_S16_LE, &amp;input);
+                             AUDIO_SAMPLE_TYPE_S16_LE, &amp;input);
 
 /* Initialize the audio output device */
 audio_out_h output;
 
 error_code = audio_out_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO, AUDIO_SAMPLE_TYPE_S16_LE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_TYPE_SYSTEM, &amp;output);
+                              SOUND_TYPE_SYSTEM, &amp;output);
 </pre>
 <p>The audio input and output devices support the channel types defined in the <code>audio_channel_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga4e07ead99d581a0a049e8ee632b858b4">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga4e07ead99d581a0a049e8ee632b858b4">wearable</a> applications), and the sample types defined in the <code>audio_sample_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga1e66f976b2890f5fc2e9e6ec71af7536">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga1e66f976b2890f5fc2e9e6ec71af7536">wearable</a> applications). For playing the recorded audio, use the same channel and sample type in both audio devices.</p>
 
@@ -268,46 +268,46 @@ error_code = audio_out_destroy(output);
 void
 modify_sound()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the sample type of the input */
-&nbsp;&nbsp;&nbsp;&nbsp;audio_sample_type_e sample_type;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = audio_in_get_sample_type(input, &amp;sample_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != AUDIO_IO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;audio_in_get_sample_type() failed! Error code = %d&quot;, error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;uint8_t *index = (uint8_t*)buffer;
-&nbsp;&nbsp;&nbsp;&nbsp;while (index &lt; (((uint8_t*)buffer)+buffer_size)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (AUDIO_SAMPLE_TYPE_S16_LE == sample_type) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Use the int16_t type, because it is 2 bytes long */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int16_t *value = (int16_t*)index;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make the sample louder */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int32_t tmp = (*value) * 8; /* 8 times louder... (on dB scale much louder) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tmp &gt; MAX_2BYTES_SIGNED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tmp = MAX_2BYTES_SIGNED;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tmp &lt; MIN_2BYTES_SIGNED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tmp = MIN_2BYTES_SIGNED;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(*value) = tmp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Use the uint8_t type, because it is 1 byte long */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint8_t *value = (uint8_t*)index;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make the sample louder */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uint16_t tmp = (*value) * 8; /* 8 times louder... (on dB scale much louder) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tmp &gt; 255)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tmp = 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(*value) = tmp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Go to the next sample */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index += sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Volume of the synchronous recording increased.&quot;);
+    /* Retrieve the sample type of the input */
+    audio_sample_type_e sample_type;
+
+    int error_code = audio_in_get_sample_type(input, &amp;sample_type);
+    if (error_code != AUDIO_IO_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "audio_in_get_sample_type() failed! Error code = %d", error_code);
+
+        return;
+    }
+
+    uint8_t *index = (uint8_t*)buffer;
+    while (index &lt; (((uint8_t*)buffer)+buffer_size)) {
+        if (AUDIO_SAMPLE_TYPE_S16_LE == sample_type) {
+            /* Use the int16_t type, because it is 2 bytes long */
+            int16_t *value = (int16_t*)index;
+
+            /* Make the sample louder */
+            int32_t tmp = (*value) * 8; /* 8 times louder... (on dB scale much louder) */
+            if (tmp &gt; MAX_2BYTES_SIGNED)
+                tmp = MAX_2BYTES_SIGNED;
+            if (tmp &lt; MIN_2BYTES_SIGNED)
+                tmp = MIN_2BYTES_SIGNED;
+            (*value) = tmp;
+        } else {
+            /* Use the uint8_t type, because it is 1 byte long */
+            uint8_t *value = (uint8_t*)index;
+
+            /* Make the sample louder */
+            uint16_t tmp = (*value) * 8; /* 8 times louder... (on dB scale much louder) */
+            if (tmp &gt; 255)
+                tmp = 255;
+            (*value) = tmp;
+        }
+
+        /* Go to the next sample */
+        index += sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1;
+    }
+
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Volume of the synchronous recording increased.");
 }
 </pre>
 
@@ -347,10 +347,10 @@ char io_stream_r_path[200];
 char *storage_path;
 /* You can find the storage ID using the storage_foreach_device_supported() function */
 int error = storage_get_directory(storage_id, STORAGE_DIRECTORY_SOUNDS, &amp;storage_path);
-snprintf(io_stream_r_path, 200, &quot;%s/%s&quot;, storage_path, &quot;pcm_w.raw&quot;);
+snprintf(io_stream_r_path, 200, "%s/%s", storage_path, "pcm_w.raw");
 free(storage_path);
 
-FILE* fp_r = fopen(io_stream_r_path, &quot;r&quot;);
+FILE* fp_r = fopen(io_stream_r_path, "r");
 </pre>
 <p>The <code>storage_get_directory()</code> function of the Storage API retrieves the storage path based on the storage ID. To retrieve the storage ID, use the <code>storage_foreach_device_supported()</code> function of the Storage API.</p>
 </li>
@@ -384,29 +384,29 @@ error_code = audio_out_prepare(output);
 void
 _audio_io_stream_write_cb(audio_out_h handle, size_t nbytes, void *userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char * buffer = NULL;
+    char * buffer = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (nbytes &gt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Allocate and reset a local buffer for reading the audio data from the file */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buffer = malloc(nbytes);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memset(buffer, 0, nbytes);
+    if (nbytes &gt; 0) {
+        /* Allocate and reset a local buffer for reading the audio data from the file */
+        buffer = malloc(nbytes);
+        memset(buffer, 0, nbytes);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Read audio data from the file and store it in the local buffer */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fread(buffer, sizeof(char), nbytes, fp_r);
+        /* Read audio data from the file and store it in the local buffer */
+        fread(buffer, sizeof(char), nbytes, fp_r);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Copy the audio data from the local buffer
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   to the internal output buffer (starts playback)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int data_size = audio_out_write(handle, buffer, nbytes);
+        /*
+           Copy the audio data from the local buffer
+           to the internal output buffer (starts playback)
+        */
+        int data_size = audio_out_write(handle, buffer, nbytes);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (data_size &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;audio_out_write() failed! Error code = %d&quot;, data_size);
+        if (data_size &lt; 0)
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "audio_out_write() failed! Error code = %d", data_size);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Release the memory allocated to the local buffer */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(buffer);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        /* Release the memory allocated to the local buffer */
+        free(buffer);
+    }
 }
 </pre></li></ol>
 
@@ -477,7 +477,7 @@ error_code = audio_in_get_buffer_size(input, &amp;buffer_size);
 </pre>
 
 <p>If no error occurs, the <code>buffer_size</code> parameter returns the preferred size of the buffer that must be allocated (in bytes), based on the specified audio parameters.</p>
- 
+
 <p>The recommended buffer size depends on the device. The size can be different for TV, mobile, and wearable devices.</p>
 </li>
 
@@ -526,7 +526,7 @@ error_code = audio_in_get_sample_type(input, &amp;sample_type);
 
 <pre class="prettyprint">
 int buffer_size = SAMPLE_RATE * (channel == AUDIO_CHANNEL_STEREO ? 2 : 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* (sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1);
+                  * (sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1);
 </pre>
 </li>
 
@@ -631,13 +631,13 @@ char io_stream_w_path[200];
 char *storage_path;
 /* You can find the storage ID using the storage_foreach_device_supported() function */
 int error = storage_get_directory(storage_id, STORAGE_DIRECTORY_SOUNDS, &amp;storage_path);
-snprintf(io_stream_w_path, 200, &quot;%s/%s&quot;, storage_path, &quot;pcm_w.raw&quot;);
+snprintf(io_stream_w_path, 200, "%s/%s", storage_path, "pcm_w.raw");
 free(storage_path);
 
-FILE* fp_w = fopen(io_stream_w_path, &quot;w&quot;);
+FILE* fp_w = fopen(io_stream_w_path, "w");
 if (!fp_w)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;fopen() function failed while opening %s file!&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;io_stream_w_path);
+    dlog_print(DLOG_ERROR, LOG_TAG, "fopen() function failed while opening %s file!",
+               io_stream_w_path);
 </pre>
 <p>The <code>storage_get_directory()</code> function of the Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications) retrieves the storage path based on the storage ID. To retrieve the storage ID, use the <code>storage_foreach_device_supported()</code> function of the Storage API.</p>
 </li>
@@ -666,30 +666,30 @@ error_code = audio_in_prepare(input);
 void
 _audio_io_stream_read_cb(audio_in_h handle, size_t nbytes, void *userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const void * buffer = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (nbytes &gt; 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Retrieve a pointer to the internal input buffer
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   and the number of recorded audio data bytes
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int error_code = audio_in_peek(handle, &amp;buffer, &amp;nbytes);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != AUDIO_IO_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;audio_in_peek() failed! Error code = %d&quot;, error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Store the recorded audio data in the file */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fwrite(buffer, sizeof(char), nbytes, fp_w);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Remove the recorded audio data from the internal input buffer */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = audio_in_drop(handle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != AUDIO_IO_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;audio_in_drop() failed! Error code = %d&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    const void * buffer = NULL;
+
+    if (nbytes &gt; 0) {
+        /*
+           Retrieve a pointer to the internal input buffer
+           and the number of recorded audio data bytes
+        */
+        int error_code = audio_in_peek(handle, &amp;buffer, &amp;nbytes);
+        if (error_code != AUDIO_IO_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "audio_in_peek() failed! Error code = %d", error_code);
+
+            return;
+        }
+
+        /* Store the recorded audio data in the file */
+        fwrite(buffer, sizeof(char), nbytes, fp_w);
+
+        /* Remove the recorded audio data from the internal input buffer */
+        error_code = audio_in_drop(handle);
+        if (error_code != AUDIO_IO_ERROR_NONE)
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "audio_in_drop() failed! Error code = %d", error_code);
+    }
 }
 </pre></li>
 </ol>
@@ -730,7 +730,7 @@ fp_w = NULL;
 </li>
 
 </ol>
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/media/screen_mirroring_n.htm b/org.tizen.guides/html/native/media/screen_mirroring_n.htm
index f240be0..479562f 100644 (file)
--- a/org.tizen.guides/html/native/media/screen_mirroring_n.htm
+++ b/org.tizen.guides/html/native/media/screen_mirroring_n.htm
@@ -45,7 +45,7 @@
  <p>You can mirror the device screen and sound to another device wirelessly using the screen mirroring feature. Tizen follows the Wi-Fi Display Technical Specification and supports the feature as a sink, which receives shared data from a source device that supports the Wi-Fi Display, and displays it. Remember to prepare your application to use the screen mirroring sink functionality and set up the necessary callbacks before you start, and release the resources when you are done.</p>
 
 <p>This feature is supported in mobile applications only.</p>
- 
+
   <p>The main features of the Screen Mirroring API include:</p>
   <ul>
    <li>Managing the connection to the screen mirroring source
@@ -90,15 +90,15 @@ static scmirroring_sink_h g_scmirroring;
 static int
 init_scmirroring_sink()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = SCMIRRORING_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_create(&amp;g_scmirroring);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;scmirroring_sink_create failed [%d]&quot;, ret);
+    int ret = SCMIRRORING_ERROR_NONE;
+    ret = scmirroring_sink_create(&amp;g_scmirroring);
+    if (ret != SCMIRRORING_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_create failed [%d]", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return FALSE;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return TRUE;
+    return TRUE;
 }
 </pre>
 </li>
@@ -116,92 +116,92 @@ init_scmirroring_sink()
 <pre class="prettyprint">
 static void
 scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                           void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Received Callback error code[%d], state[%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code, state);
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_STATE_NULL:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_STATE_PREPARED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_STATE_CONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_STATE_PLAYING:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_STATE_PAUSED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_STATE_DISCONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_STATE_NONE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;state[%d] Invalid State&quot;, state);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]",
+               error_code, state);
+
+    switch (state) {
+    case SCMIRRORING_STATE_NULL:
+        break;
+    case SCMIRRORING_STATE_PREPARED:
+        break;
+    case SCMIRRORING_STATE_CONNECTED:
+        break;
+    case SCMIRRORING_STATE_PLAYING:
+        break;
+    case SCMIRRORING_STATE_PAUSED:
+        break;
+    case SCMIRRORING_STATE_DISCONNECTED:
+        break;
+    case SCMIRRORING_STATE_NONE:
+        break;
+    default:
+        dlog_print(DLOG_ERROR, LOG_TAG, "state[%d] Invalid State", state);
+        break;
+    }
+
+    return;
 }
 
 static int
 prepare_scmirroring_sink(scmirroring_display_type_e display_type)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_set_state_changed_cb(g_scmirroring,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scmirroring_state_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;scmirroring_sink_set_state_changed_cb failed [%d]&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    ret = scmirroring_sink_set_state_changed_cb(g_scmirroring,
+                                                scmirroring_state_callback,
+                                                NULL);
+    if (ret != SCMIRRORING_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "scmirroring_sink_set_state_changed_cb failed [%d]", ret);
+
+        return FALSE;
+    }
 </pre>
 </li>
 
 <li>
 <p>Set a display object using the <code>scmirroring_sink_set_display()</code> function:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;switch (display_type) {
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_DISPLAY_TYPE_EVAS:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (g_eo == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;g_eo is NULL&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_set_display(g_scmirroring,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SCMIRRORING_DISPLAY_TYPE_EVAS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void*)g_eo);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;scmirroring_sink_set_display failed [%d], display type [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret, display_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_DISPLAY_TYPE_OVERLAY:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (g_win == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;g_win is NULL&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_set_display(g_scmirroring,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SCMIRRORING_DISPLAY_TYPE_OVERLAY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void*)g_win);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;scmirroring_sink_set_display failed [%d], display type [%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret, display_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Invalid display type [%d].&quot;, display_type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    switch (display_type) {
+    case SCMIRRORING_DISPLAY_TYPE_EVAS:
+        if (g_eo == NULL) {
+            dlog_print(DLOG_ERROR, LOG_TAG, "g_eo is NULL");
+
+            return FALSE;
+        }
+        ret = scmirroring_sink_set_display(g_scmirroring,
+                                           SCMIRRORING_DISPLAY_TYPE_EVAS,
+                                           (void*)g_eo);
+        if (ret != SCMIRRORING_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "scmirroring_sink_set_display failed [%d], display type [%d]",
+                       ret, display_type);
+
+            return FALSE;
+        }
+        break;
+    case SCMIRRORING_DISPLAY_TYPE_OVERLAY:
+        if (g_win == NULL) {
+            dlog_print(DLOG_ERROR, LOG_TAG, "g_win is NULL");
+
+            return FALSE;
+        }
+        ret = scmirroring_sink_set_display(g_scmirroring,
+                                           SCMIRRORING_DISPLAY_TYPE_OVERLAY,
+                                           (void*)g_win);
+        if (ret != SCMIRRORING_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "scmirroring_sink_set_display failed [%d], display type [%d]",
+                       ret, display_type);
+
+            return FALSE;
+        }
+        break;
+    default:
+        dlog_print(DLOG_ERROR, LOG_TAG, "Invalid display type [%d].", display_type);
+
+        return FALSE;
+    }
 }
 </pre>
 </li>
@@ -209,7 +209,7 @@ prepare_scmirroring_sink(scmirroring_display_type_e display_type)
 <li>
 <p>Create the display object based on the applicable <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__MODULE.html#ga2c7d012d260b35e0e550618c2546f751">scmirroring_display_type_e</a> enumerator value:</p>
 <pre class="prettyprint">
-#define PACKAGE_NAME &quot;SCREEN_MIRRORING_SINK_APP&quot;
+#define PACKAGE_NAME "SCREEN_MIRRORING_SINK_APP"
 #define WINDOW_WIDTH 800
 #define WINDOW_HEIGHT 1200
 
@@ -221,37 +221,37 @@ static Evas_Object *g_rect = NULL;
 static void
 create_base_gui(scmirroring_display_type_e display_type)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;g_win = elm_win_add(NULL, PACKAGE_NAME, ELM_WIN_BASIC);
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(g_win, WINDOW_WIDTH, WINDOW_HEIGHT);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(g_win, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(g_win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (display_type) {
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_DISPLAY_TYPE_EVAS:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_evas = evas_object_evas_get(g_win);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set an Evas image object for drawing */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_eo = evas_object_image_add(g_evas);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_size_set(g_eo, WINDOW_WIDTH, WINDOW_HEIGHT);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(g_eo, 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(g_eo, WINDOW_WIDTH, WINDOW_HEIGHT);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(g_eo);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(g_win);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_DISPLAY_TYPE_OVERLAY:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_rect = evas_object_rectangle_add(g_evas);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(g_rect, WINDOW_WIDTH, WINDOW_HEIGHT);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(g_rect, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(g_rect, 0, 0, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_render_op_set(g_rect, EVAS_RENDER_COPY);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(g_rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(g_win);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    g_win = elm_win_add(NULL, PACKAGE_NAME, ELM_WIN_BASIC);
+
+    evas_object_resize(g_win, WINDOW_WIDTH, WINDOW_HEIGHT);
+    evas_object_move(g_win, 0, 0);
+    elm_win_autodel_set(g_win, EINA_TRUE);
+
+    switch (display_type) {
+    case SCMIRRORING_DISPLAY_TYPE_EVAS:
+        g_evas = evas_object_evas_get(g_win);
+        /* Set an Evas image object for drawing */
+        g_eo = evas_object_image_add(g_evas);
+        evas_object_image_size_set(g_eo, WINDOW_WIDTH, WINDOW_HEIGHT);
+        evas_object_image_fill_set(g_eo, 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
+        evas_object_resize(g_eo, WINDOW_WIDTH, WINDOW_HEIGHT);
+        /* Show the window after the base GUI is set up */
+        evas_object_show(g_eo);
+        evas_object_show(g_win);
+        break;
+    case SCMIRRORING_DISPLAY_TYPE_OVERLAY:
+        g_rect = evas_object_rectangle_add(g_evas);
+        evas_object_resize(g_rect, WINDOW_WIDTH, WINDOW_HEIGHT);
+        evas_object_move(g_rect, 0, 0);
+        evas_object_color_set(g_rect, 0, 0, 0, 0);
+        evas_object_render_op_set(g_rect, EVAS_RENDER_COPY);
+        evas_object_size_hint_weight_set(g_rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+        /* Show the window after the base GUI is set up */
+        evas_object_show(g_win);
+        break;
+    default:
+        break;
+    }
 }
 </pre>
 </li>
@@ -262,9 +262,9 @@ create_base_gui(scmirroring_display_type_e display_type)
 <pre class="prettyprint">
 ret = scmirroring_sink_prepare(g_scmirroring);
 if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;scmirroring_sink_prepare failed [%d]&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_prepare failed [%d]", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
+    return FALSE;
 }
 
 return TRUE;
@@ -285,14 +285,14 @@ return TRUE;
 static int
 start_scmirroring_sink(const char* peer_ip, const char* peer_port)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_set_ip_and_port(g_scmirroring, peer_ip, peer_port);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;scmirroring_sink_set_ip_and_port failed [%d]&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret;
+    ret = scmirroring_sink_set_ip_and_port(g_scmirroring, peer_ip, peer_port);
+    if (ret != SCMIRRORING_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "scmirroring_sink_set_ip_and_port failed [%d]", ret);
+
+        return FALSE;
+    }
 </pre>
 </li>
 
@@ -300,14 +300,14 @@ start_scmirroring_sink(const char* peer_ip, const char* peer_port)
 <p>Connect the screen mirroring sink to the screen mirroring source using the <code>scmirroring_sink_connect()</code> function.</p>
 <p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_CONNECTED</code> asynchronously. Monitor the state changes using the state callback.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_connect(g_scmirroring);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;scmirroring_sink_connect failed [%d]&quot;, ret);
+    ret = scmirroring_sink_connect(g_scmirroring);
+    if (ret != SCMIRRORING_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_connect failed [%d]", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return FALSE;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return TRUE;
+    return TRUE;
 }
 </pre>
 </li>
@@ -318,26 +318,26 @@ start_scmirroring_sink(const char* peer_ip, const char* peer_port)
 <pre class="prettyprint">
 static void
 scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                           void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Received Callback error code[%d], state[%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code, state);
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (state) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Other cases */
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_STATE_CONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_start(g_scmirroring);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;scmirroring_sink_start failed [%d]&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Other cases */
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    int ret;
+    dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]",
+               error_code, state);
+
+    switch (state) {
+    /* Other cases */
+    case SCMIRRORING_STATE_CONNECTED:
+        ret = scmirroring_sink_start(g_scmirroring);
+        if (ret != SCMIRRORING_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_start failed [%d]", ret);
+
+            return;
+        }
+        break;
+    /* Other cases */
+    }
+
+    return;
 }
 </pre>
 </li>
@@ -357,12 +357,12 @@ scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e s
 static int
 destroy_scmirroring_sink()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_disconnect(g_scmirroring);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;scmirroring_sink_disconnect failed [%d]&quot;, ret);
+    ret = scmirroring_sink_disconnect(g_scmirroring);
+    if (ret != SCMIRRORING_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_disconnect failed [%d]", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return FALSE;
+    }
 </pre>
 </li>
 
@@ -370,12 +370,12 @@ destroy_scmirroring_sink()
 <p>Unprepare the screen mirroring sink using the <code>scmirroring_sink_unprepare()</code> function.</p>
 <p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_NULL</code>.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_unprepare(g_scmirroring);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;scmirroring_sink_unprepare failed [%d]&quot;, ret);
+    ret = scmirroring_sink_unprepare(g_scmirroring);
+    if (ret != SCMIRRORING_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_unprepare failed [%d]", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return FALSE;
+    }
 </pre>
 </li>
 
@@ -383,14 +383,14 @@ destroy_scmirroring_sink()
 <p>Release the screen mirroring sink resources using the <code>scmirroring_sink_destroy()</code> function.</p>
 <p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_NONE</code>.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_destroy(g_scmirroring);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;scmirroring_sink_destroy failed [%d]&quot;, ret);
+    ret = scmirroring_sink_destroy(g_scmirroring);
+    if (ret != SCMIRRORING_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_destroy failed [%d]", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return FALSE;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return TRUE;
+    return TRUE;
 }
 </pre>
 </li>
@@ -403,37 +403,37 @@ destroy_scmirroring_sink()
 <pre class="prettyprint">
 static void
 scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                           void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Received Callback error code[%d], state[%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code, state);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = destroy_scmirroring_sink();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TRUE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;destroy_scmirroring_sink failed&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (state) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Other cases */
-&nbsp;&nbsp;&nbsp;&nbsp;case SCMIRRORING_STATE_DISCONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = scmirroring_sink_unprepare(g_scmirroring);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SCMIRRORING_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;scmirroring_sink_unprepare failed [%d]&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Other cases */
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    int ret;
+    dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]",
+               error_code, state);
+
+    if (error_code != SCMIRRORING_ERROR_NONE) {
+        ret = destroy_scmirroring_sink();
+        if (ret != TRUE) {
+            dlog_print(DLOG_ERROR, LOG_TAG, "destroy_scmirroring_sink failed");
+
+            return;
+        }
+    }
+
+    switch (state) {
+    /* Other cases */
+    case SCMIRRORING_STATE_DISCONNECTED:
+        ret = scmirroring_sink_unprepare(g_scmirroring);
+        if (ret != SCMIRRORING_ERROR_NONE) {
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "scmirroring_sink_unprepare failed [%d]", ret);
+
+            return;
+        }
+        /* Do something */
+        break;
+    /* Other cases */
+    }
+
+    return;
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/media/sound_n.htm b/org.tizen.guides/html/native/media/sound_n.htm
index 8426313..9abaa56 100644 (file)
--- a/org.tizen.guides/html/native/media/sound_n.htm
+++ b/org.tizen.guides/html/native/media/sound_n.htm
@@ -68,7 +68,7 @@
 </pre>
 
 <h2 id="set" name="set">Setting the Sound Session Type</h2>
-<p>The Sound Manager API offers 5 different sound session types: media, alarm, notification, emergency and VOIP. According to these types, your application&#39;s audio works in a specific way to mix with sounds of other applications or to respond to an audio interruption made by another application.</p>
+<p>The Sound Manager API offers 5 different sound session types: media, alarm, notification, emergency and VOIP. According to these types, your application's audio works in a specific way to mix with sounds of other applications or to respond to an audio interruption made by another application.</p>
 
 <p>The alarm, notification, emergency, and VOIP sessions are prioritized over the media session. For example, when an alarm is activated while you are playing a media file, the system pauses the media session, and the alarm session gets the permission to play its sound.</p>
 
@@ -97,7 +97,7 @@ error_code = sound_manager_set_session_type(SOUND_SESSION_TYPE_MEDIA);
 <p>Register a callback using the <code>sound_manager_set_session_interrupted_cb()</code> function:</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
+    sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
 </pre>
 </li>
 <li>
@@ -105,12 +105,12 @@ error_code =
 <pre class="prettyprint">
 static void
 sound_session_interrupted_cb(sound_session_interrupted_code_e code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                             void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (code == SOUND_SESSION_INTERRUPTED_BY_MEDIA)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Session interrupted by media application, handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;if (code == SOUND_SESSION_INTERRUPTED_COMPLETED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Interruption completed, handle accordingly */
+    if (code == SOUND_SESSION_INTERRUPTED_BY_MEDIA)
+        /* Session interrupted by media application, handle accordingly */
+    if (code == SOUND_SESSION_INTERRUPTED_COMPLETED)
+        /* Interruption completed, handle accordingly */
 }
 </pre>
 </li>
@@ -128,7 +128,7 @@ error_code = sound_manager_unset_session_interrupted_cb();
 
 <p>Normally, if there is an active output stream, the <code>sound_manager_get_current_sound_type()</code> function returns the sound type of that stream, and if not, it returns an error message. However, you can set a particular sound type as current using the <code>sound_manager_set_current_sound_type()</code> function. This enables other applications, such as a volume application, to manage the volume level of the particular sound type even though it is not currently playing.</p>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         Setting the current sound type affects the entire system. When no longer needed, unset the current sound type using the <code>sound_manager_unset_current_sound_type()</code> function.
@@ -145,7 +145,7 @@ error_code = sound_manager_unset_session_interrupted_cb();
 <p>Register a callback using the <code>sound_manager_set_volume_changed_cb()</code> function:</p>
 <pre class="prettyprint">
 error_code = sound_manager_set_volume_changed_cb(_sound_manager_volume_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                 NULL);
 </pre>
 </li>
 <li>
@@ -157,12 +157,12 @@ int error_code;
 
 static void
 _sound_manager_volume_changed_cb(sound_type_e type, unsigned int volume,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                                 void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[MBUF] = {0,};
+    char buf[MBUF] = {0,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, MBUF, &quot;(%d) type volume changed to (%d)&quot;, type, volume);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;Sound Manager&quot;, &quot;Volume Changed: %s&quot;, buf);
+    snprintf(buf, MBUF, "(%d) type volume changed to (%d)", type, volume);
+    dlog_print(DLOG_INFO, "Sound Manager", "Volume Changed: %s", buf);
 }
 </pre>
 </li>
@@ -214,7 +214,7 @@ ret = sound_manager_set_volume(type, value);
 <p>Use the <code>sound_manager_get_current_device_list()</code> function to get the list handle of the currently connected sound devices. With the sequential search of this device list, you can get the device handle of each device on the list. You can use the <code>sound_manager_get_next_device()</code> and <code>sound_manager_get_prev_device()</code> functions for a sequential search of the device list.</p>
 
 
-<p>To get a notification when the sound device connection or information has changed, register the <code>sound_manager_set_device_connected_cb()</code> and <code>sound_manager_set_device_information_changed_cb()</code> callbacks. The initial state of the connected sound device is deactivated.</p>  
+<p>To get a notification when the sound device connection or information has changed, register the <code>sound_manager_set_device_connected_cb()</code> and <code>sound_manager_set_device_information_changed_cb()</code> callbacks. The initial state of the connected sound device is deactivated.</p>
 
 <p>To query sound device information:</p>
 
@@ -224,14 +224,14 @@ ret = sound_manager_set_volume(type, value);
 <p>To access the sound device information:</p>
 <ol type="a">
 <li>
-<p>Use the <code>sound_device_mask_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">wearable</a> applications) to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need when getting a sound device list or setting callbacks.</p> 
+<p>Use the <code>sound_device_mask_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">wearable</a> applications) to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need when getting a sound device list or setting callbacks.</p>
 <p>To only access the sound devices whose information you need, define a combination of masks:</p>
 <pre class="prettyprint">
 int ret;
 int _ret;
 sound_device_mask_e mask = SOUND_DEVICE_IO_DIRECTION_OUT_MASK |
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_DEVICE_IO_DIRECTION_BOTH_MASK |
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_DEVICE_STATE_ACTIVATED_MASK;
+                           SOUND_DEVICE_IO_DIRECTION_BOTH_MASK |
+                           SOUND_DEVICE_STATE_ACTIVATED_MASK;
 </pre>
 </li>
 <li>
@@ -259,20 +259,20 @@ ret = sound_manager_get_current_device_list(mask, &amp;list);
 <p>The following example code shows how to retrieve information about sound device type and IO direction:</p>
 <pre class="prettyprint">
 while ((_ret = sound_manager_get_next_device(list, &amp;device)) ==
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_MANAGER_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_type(device, &amp;type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == SOUND_DEVICE_BLUETOOTH)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Sound device type is Bluetooth, handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (type == SOUND_DEVICE_AUDIO_JACK)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_io_direction(device, &amp;direction);
-&nbsp;&nbsp;&nbsp;&nbsp;if (direction == BOTH)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Sound device has both headphone and mic, handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle accordingly */
+       SOUND_MANAGER_ERROR_NONE) {
+    ret = sound_manager_get_device_type(device, &amp;type);
+
+    if (type == SOUND_DEVICE_BLUETOOTH)
+        /* Sound device type is Bluetooth, handle accordingly */
+    else if (type == SOUND_DEVICE_AUDIO_JACK)
+        ret = sound_manager_get_device_io_direction(device, &amp;direction);
+    if (direction == BOTH)
+        /* Sound device has both headphone and mic, handle accordingly */
+    else
+        /* Handle accordingly */
 }
 if (_ret == SOUND_MANAGER_ERROR_NO_DATA)
-&nbsp;&nbsp;&nbsp;&nbsp;/* End of the available devices, handle accordingly */
+    /* End of the available devices, handle accordingly */
 </pre>
 </li>
 </ol>
@@ -287,7 +287,7 @@ if (_ret == SOUND_MANAGER_ERROR_NO_DATA)
 mask = SOUND_DEVICE_IO_DIRECTION_OUT_MASK | SOUND_DEVICE_IO_DIRECTION_BOTH_MASK;
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;sound_manager_set_device_connected_cb(mask,_sound_device_connected_cb, NULL);
+    sound_manager_set_device_connected_cb(mask,_sound_device_connected_cb, NULL);
 </pre>
 
 
@@ -301,24 +301,24 @@ ret =
 <pre class="prettyprint">
 static void
 _sound_device_connected_cb(sound_device_h device, bool is_connected,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                           void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;sound_device_type_e type;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (is_connected) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_type(device, &amp;type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (type == SOUND_DEVICE_BLUETOOTH)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Connected sound device type is Bluetooth, handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_type(device, &amp;type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (type == SOUND_DEVICE_BLUETOOTH)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Disconnected sound device type is Bluetooth, handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret;
+    sound_device_type_e type;
+
+    if (is_connected) {
+        ret = sound_manager_get_device_type(device, &amp;type);
+        if (type == SOUND_DEVICE_BLUETOOTH)
+            /* Connected sound device type is Bluetooth, handle accordingly */
+        else
+            /* Handle accordingly */
+    } else {
+        ret = sound_manager_get_device_type(device, &amp;type);
+        if (type == SOUND_DEVICE_BLUETOOTH)
+            /* Disconnected sound device type is Bluetooth, handle accordingly */
+        else
+            /* Handle accordingly */
+    }
 }
 </pre>
 </li>
@@ -334,9 +334,9 @@ _sound_device_connected_cb(sound_device_h device, bool is_connected,
 mask = SOUND_DEVICE_IO_DIRECTION_OUT_MASK | SOUND_DEVICE_IO_DIRECTION_BOTH_MASK;
 
 ret =
-&nbsp;&nbsp;&nbsp;&nbsp;sound_manager_set_device_information_changed_cb(mask,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_sound_device_information_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+    sound_manager_set_device_information_changed_cb(mask,
+                                                    _sound_device_information_changed_cb,
+                                                    NULL);
 </pre>
 </li>
 <li>
@@ -344,35 +344,35 @@ ret =
 <pre class="prettyprint">
 static void
 _sound_device_information_changed_cb(sound_device_h device,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_device_changed_info_e changed_info,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                                     sound_device_changed_info_e changed_info,
+                                     void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;sound_device_type_e type;
-&nbsp;&nbsp;&nbsp;&nbsp;sound_device_state_e state;
-&nbsp;&nbsp;&nbsp;&nbsp;sound_device_io_direction_e direction;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_type(device, &amp;type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == SOUND_DEVICE_BLUETOOTH) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (changed_info == SOUND_DEVICE_CHANGED_INFO_STATE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_state(device, &amp;state);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (state == SOUND_DEVICE_STATE_DEACTIVATED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Bluetooth device has been deactivated, handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = sound_manager_get_device_io_direction(device, &amp;direction);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (direction == SOUND_DEVICE_IO_DIRECTION_OUT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   IO direction of the Bluetooth device is now out,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   handle accordingly
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle accordingly */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret;
+    sound_device_type_e type;
+    sound_device_state_e state;
+    sound_device_io_direction_e direction;
+
+    ret = sound_manager_get_device_type(device, &amp;type);
+    if (type == SOUND_DEVICE_BLUETOOTH) {
+        if (changed_info == SOUND_DEVICE_CHANGED_INFO_STATE) {
+            ret = sound_manager_get_device_state(device, &amp;state);
+            if (state == SOUND_DEVICE_STATE_DEACTIVATED)
+                /* Bluetooth device has been deactivated, handle accordingly */
+            else
+                /* Handle accordingly */
+        } else {
+            ret = sound_manager_get_device_io_direction(device, &amp;direction);
+            if (direction == SOUND_DEVICE_IO_DIRECTION_OUT)
+                /*
+                   IO direction of the Bluetooth device is now out,
+                   handle accordingly
+                */
+            else
+                /* Handle accordingly */
+        }
+    } else {
+        /* Handle accordingly */
+    }
 }
 </pre>
 </li>
@@ -402,26 +402,26 @@ sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
 void
 _sound_session_interrupted_cb(sound_session_interrupted_code_e code, void* userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Interrupt code: %d\n&quot;, code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_INTERRUPTED_COMPLETED %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_INTERRUPTED_BY_MEDIA %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_INTERRUPTED_BY_CALL %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_INTERRUPTED_BY_EARJACK_UNPLUG %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_INTERRUPTED_BY_RESOURCE_CONFLICT %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_INTERRUPTED_BY_ALARM %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_INTERRUPTED_BY_EMERGENCY %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_INTERRUPTED_BY_NOTIFICATION %d\n\n&quot;,
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_INTERRUPTED_COMPLETED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_INTERRUPTED_BY_MEDIA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_INTERRUPTED_BY_CALL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_INTERRUPTED_BY_EARJACK_UNPLUG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_INTERRUPTED_BY_RESOURCE_CONFLICT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_INTERRUPTED_BY_ALARM,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_INTERRUPTED_BY_EMERGENCY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_INTERRUPTED_BY_NOTIFICATION);
+    dlog_print(DLOG_INFO, LOG_TAG, "Interrupt code: %d\n", code);
+
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "SOUND_SESSION_INTERRUPTED_COMPLETED %d | "\
+               "SOUND_SESSION_INTERRUPTED_BY_MEDIA %d | "\
+               "SOUND_SESSION_INTERRUPTED_BY_CALL %d | "\
+               "SOUND_SESSION_INTERRUPTED_BY_EARJACK_UNPLUG %d | "\
+               "SOUND_SESSION_INTERRUPTED_BY_RESOURCE_CONFLICT %d | "\
+               "SOUND_SESSION_INTERRUPTED_BY_ALARM %d | "\
+               "SOUND_SESSION_INTERRUPTED_BY_EMERGENCY %d | "\
+               "SOUND_SESSION_INTERRUPTED_BY_NOTIFICATION %d\n\n",
+
+               SOUND_SESSION_INTERRUPTED_COMPLETED,
+               SOUND_SESSION_INTERRUPTED_BY_MEDIA,
+               SOUND_SESSION_INTERRUPTED_BY_CALL,
+               SOUND_SESSION_INTERRUPTED_BY_EARJACK_UNPLUG,
+               SOUND_SESSION_INTERRUPTED_BY_RESOURCE_CONFLICT,
+               SOUND_SESSION_INTERRUPTED_BY_ALARM,
+               SOUND_SESSION_INTERRUPTED_BY_EMERGENCY,
+               SOUND_SESSION_INTERRUPTED_BY_NOTIFICATION);
 }
 </pre>
 </li>
@@ -441,16 +441,16 @@ tone_player_start(TONE_TYPE_ANSI_DIAL, SOUND_SESSION_TYPE_MEDIA, 10000, &amp;id)
 
 sound_manager_get_session_type(&amp;type);
 
-dlog_print(DLOG_INFO, LOG_TAG, &quot;-Session type %d:\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_TYPE_MEDIA %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_TYPE_ALARM %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_TYPE_NOTIFICATION %d | &quot;\
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SOUND_SESSION_TYPE_EMERGENCY %d \n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_TYPE_MEDIA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_TYPE_ALARM,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_TYPE_NOTIFICATION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_TYPE_EMERGENCY);
+dlog_print(DLOG_INFO, LOG_TAG, "-Session type %d:\n"
+           "SOUND_SESSION_TYPE_MEDIA %d | "\
+           "SOUND_SESSION_TYPE_ALARM %d | "\
+           "SOUND_SESSION_TYPE_NOTIFICATION %d | "\
+           "SOUND_SESSION_TYPE_EMERGENCY %d \n",
+           type,
+           SOUND_SESSION_TYPE_MEDIA,
+           SOUND_SESSION_TYPE_ALARM,
+           SOUND_SESSION_TYPE_NOTIFICATION,
+           SOUND_SESSION_TYPE_EMERGENCY);
 
 sound_manager_set_session_type(SOUND_SESSION_TYPE_NOTIFICATION);
 </pre>
@@ -468,7 +468,7 @@ sound_manager_get_media_session_option(&amp;start, &amp;play);
 sound_manager_get_media_session_resumption_option(&amp;res);
 
 sound_manager_set_media_session_option(SOUND_SESSION_OPTION_PAUSE_OTHERS_WHEN_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOUND_SESSION_OPTION_INTERRUPTIBLE_DURING_PLAY);
+                                       SOUND_SESSION_OPTION_INTERRUPTIBLE_DURING_PLAY);
 
 sound_manager_set_media_session_resumption_option(SOUND_SESSION_OPTION_RESUMPTION_BY_SYSTEM_OR_MEDIA_PAUSED);
 </pre>
diff --git a/org.tizen.guides/html/native/media/stream_recorder_n.htm b/org.tizen.guides/html/native/media/stream_recorder_n.htm
index 2603800..3ad038e 100644 (file)
--- a/org.tizen.guides/html/native/media/stream_recorder_n.htm
+++ b/org.tizen.guides/html/native/media/stream_recorder_n.htm
@@ -111,8 +111,8 @@
 <p>Define a structure containing the stream recorder handle and media packet. You can also declare variables to keep the recording time, video file paths, bitrate, recording limits, flag, and return values.</p>
 <pre class="prettyprint">
 struct streamrecorder_data {
-&nbsp;&nbsp;&nbsp;&nbsp;streamrecorder_h streamrecorder;
-&nbsp;&nbsp;&nbsp;&nbsp;media_packet_h media_packet;
+    streamrecorder_h streamrecorder;
+    media_packet_h media_packet;
 };
 typedef struct streamrecorder_data streamrecdata;
 
@@ -133,8 +133,8 @@ assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 <li>To enable video recording using a live buffer as a source, you have to call the <code>streamrecorder_enable_source_buffer()</code> function. Additionally, you can enable other types of sources with the <code>streamrecorder_source_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga1d4c1835d2b7357850bdf706dd58b97e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMRECORDER__MODULE.html#ga1d4c1835d2b7357850bdf706dd58b97e">wearable</a> applications).
 <pre class="prettyprint">
 /* Set the video source as live buffer to be used for recording */
-error_code = streamrecorder_enable_source_buffer(&amp;streamrec_data.streamrecorder, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STREAMRECORDER_SOURCE_VIDEO);
+error_code = streamrecorder_enable_source_buffer(&amp;streamrec_data.streamrecorder,
+                                                 STREAMRECORDER_SOURCE_VIDEO);
 assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 </pre>
 </li>
@@ -142,22 +142,22 @@ assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 <pre class="prettyprint">
 /* Set the streamrecorder notify callback */
 error_code = streamrecorder_set_notify_cb(streamrec_data.streamrecorder,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;streamrecorder_notify_cb,  
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;streamrec_data);
+                                          streamrecorder_notify_cb,
+                                          streamrec_data);
 assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 </pre>
 <p>The callback function receives 4 parameters, which are the previous and current state of the stream recorder, the notification type, and user data.</p>
 <pre class="prettyprint">
 /*
-   Stream recorder callback is invoked when 
+   Stream recorder callback is invoked when
    the streamrecorder gets notifications
 */
 static void
 streamrecorder_set_notify_cb(streamrecorder_state_e previous,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;streamrecorder_state_e current, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;streamrecorder_notify_e notification, void *data)
+                             streamrecorder_state_e current,
+                             streamrecorder_notify_e notification, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;fprintf(stderr, &quot;streamrecorder_notify (prev: %d, curr: %d)\n&quot;, previous, current);
+    fprintf(stderr, "streamrecorder_notify (prev: %d, curr: %d)\n", previous, current);
 }
 </pre>
 </li>
@@ -174,59 +174,59 @@ streamrecorder_video_codec_supported_codec;
 static bool
 _video_encoder_cb(streamrecorder_video_codec_e codec, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;streamrecorder_video_codec_e * supported_codec =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(streamrecorder_video_codec_e*)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;supported_codec = codec;
+    streamrecorder_video_codec_e * supported_codec =
+        (streamrecorder_video_codec_e*)user_data;
+    supported_codec = codec;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;streamrecorder_foreach_supported_video_encoder(streamrec_data.streamrecorder, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_video_encoder_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;supported_codec);
+    streamrecorder_foreach_supported_video_encoder(streamrec_data.streamrecorder,
+                                                   _video_encoder_cb,
+                                                   &amp;supported_codec);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 
 /* Set the stream recorder video encoder */
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;streamrecorder_set_video_encoder(streamrec_data.streamrecorder,supported_codec);
+    streamrecorder_set_video_encoder(streamrec_data.streamrecorder,supported_codec);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 </pre>
 </li>
-<li>You can set the bitrate of the video encoder with the <code>streamrecorder_set_video_encoder_bitrate()</code> function. Even if the bitrate was set, it can depend on the stream buffer which you push. 
+<li>You can set the bitrate of the video encoder with the <code>streamrecorder_set_video_encoder_bitrate()</code> function. Even if the bitrate was set, it can depend on the stream buffer which you push.
 <p>You can also set the file format for the recording media stream by invoking the <code>streamrecorder_set_file_format()</code> function. Before setting the file format, check the file formats your device supports using the <code>streamrecorder_foreach_supported_file_format()</code> function.</p>
 <p>Finally, you need to set the file path to store the recorded data by invoking the <code>streamrecorder_set_filename()</code> function.</p>
 <pre class="prettyprint">
 staticintg_bitrate = 288000;
-static char *g_file = &quot;/opt/media/Downloads/myvideo.mp4&quot;;
+static char *g_file = "/opt/media/Downloads/myvideo.mp4";
 
 /* Set bitrate of video encoder */
 error_code = streamrecorder_set_video_encoder_bitrate(streamrec_data.streamrecorder,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_bitrate);
+                                                      g_bitrate);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 
 /* Set recording file format */
 error_code = streamrecorder_set_file_format(streamrec_data.streamrecorder,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STREAMRECORDER_FILE_FORMAT_MP4);
+                                            STREAMRECORDER_FILE_FORMAT_MP4);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 
 /* Set file path to store the recorded data */
 error_code = streamrecorder_set_filename(streamrec_data.streamrecorder, g_file);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 </pre>
 </li>
@@ -239,7 +239,7 @@ if (STREAMRECORDER_ERROR_NONE != error_code) {
 <pre class="prettyprint">
 /* Create media packet to be passed to the push stream buffer API */
 media_format_h fmt;
-void *data; 
+void *data;
 void *rawbuffer; /* Data to be passed for recording */
 int size; /* Size of each frame buffer */
 
@@ -263,8 +263,8 @@ error_code = media_packet_set_buffer_size(streamrecdata.streamrecorder, size);
 /* Prepare the streamrecorder, changing the state to STREAMRECORDER_STATE_PREPARED */
 error_code = streamrecorder_prepare(streamrec_data.streamrecorder);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 </pre>
 </li>
@@ -273,8 +273,8 @@ if (STREAMRECORDER_ERROR_NONE != error_code) {
 /* Start the stream recorder */
 error_code = streamrecorder_start(streamrec_data.streamrecorder);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 </pre>
 <p>Once the recording starts, the file is removed automatically and replaced with a new one, if you set the file path to an existing file.</p>
@@ -283,10 +283,10 @@ if (STREAMRECORDER_ERROR_NONE != error_code) {
 <pre class="prettyprint">
 /* Push the stream buffer to record audio or video */
 error_code = streamrecorder_push_stream_buffer(streamrec_data.streamrecorder,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;streamrec_data.media_packet);
+                                               streamrec_data.media_packet);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 </pre>
 </li>
@@ -297,8 +297,8 @@ if (STREAMRECORDER_ERROR_NONE != error_code) {
 /* Stop recording and save recorded data to the previously configured path */
 error_code = streamrecorder_commit(streamrec_data.streamrecorder);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 </pre>
 <p>After committing, the stream recorder state is changed to the <code>STREAMRECORDER_STATE_PREPARED</code> state.</p>
@@ -307,8 +307,8 @@ if (STREAMRECORDER_ERROR_NONE != error_code) {
 /* Stop recording but don not save the recorded data */
 error_code = streamrecorder_cancel(streamrec_data.streamrecorder);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 </pre>
 </li>
@@ -318,8 +318,8 @@ if (STREAMRECORDER_ERROR_NONE != error_code) {
 /* Pause the recording */
 error_code = streamrecorder_pause(streamrec_data.streamrecorder);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 </pre>
 <p>After pausing, the stream recorder state is changed to <code>STREAMRECORDER_STATE_PAUSED</code>.</p>
@@ -332,15 +332,15 @@ if (STREAMRECORDER_ERROR_NONE != error_code) {
 /* Unprepare the stream recorder */
 error_code = streamrecorder_unprepare(streamrec_data-&gt;streamrecorder);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 
 /* Destroy the recorder */
 error_code = streamrecorder_destroy(streamrec_data.streamrecorder);
 if (STREAMRECORDER_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
+    /* Error handling */
+    assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
 }
 </pre>
 <p>After this, the stream recorder is changed to the <code>STREAMRECORDER_STATE_NONE</code> state.</p>
diff --git a/org.tizen.guides/html/native/media/thumbnail_images_n.htm b/org.tizen.guides/html/native/media/thumbnail_images_n.htm
index a93333e..e94679b 100644 (file)
--- a/org.tizen.guides/html/native/media/thumbnail_images_n.htm
+++ b/org.tizen.guides/html/native/media/thumbnail_images_n.htm
@@ -80,49 +80,49 @@ static thumbnail_h g_thumb_h = NULL;
 <pre class="prettyprint">
 int internal_storage_id;
 char *internal_image_storage_path;
-char *image_file_name = &quot;test_image.jpg&quot;;
+char *image_file_name = "test_image.jpg";
 char *image_test_path;
 
 static bool
 storage_cb(int storage_id, storage_type_e type, storage_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *path, void *user_data)
+           const char *path, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+    if (type == STORAGE_TYPE_INTERNAL) {
+        internal_storage_id = storage_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 _get_internal_storage_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error;
-&nbsp;&nbsp;&nbsp;&nbsp;char *path = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;error = storage_foreach_device_supported(storage_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;error = storage_get_directory(internal_storage_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_DIRECTORY_IMAGES, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error != STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_image_storage_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int error;
+    char *path = NULL;
+
+    error = storage_foreach_device_supported(storage_cb, NULL);
+    error = storage_get_directory(internal_storage_id,
+                                  STORAGE_DIRECTORY_IMAGES, &amp;path);
+    if (error != STORAGE_ERROR_NONE) {
+        internal_image_storage_path = strdup(path);
+        free(path);
+    }
 }
 
 void
 _make_test_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int path_len = 0;
+    int path_len = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;path_len = strlen(internal_image_storage_path) + strlen(image_file_name) + 1;
-&nbsp;&nbsp;&nbsp;&nbsp;image_test_path = malloc(path_len);
-&nbsp;&nbsp;&nbsp;&nbsp;memset(image_test_path, 0x0, path_len);
+    path_len = strlen(internal_image_storage_path) + strlen(image_file_name) + 1;
+    image_test_path = malloc(path_len);
+    memset(image_test_path, 0x0, path_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(image_test_path, internal_image_storage_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strlen(internal_image_storage_path));
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(image_test_path, image_file_name, strlen(image_file_name));
+    strncat(image_test_path, internal_image_storage_path,
+            strlen(internal_image_storage_path));
+    strncat(image_test_path, image_file_name, strlen(image_file_name));
 }
 </pre>
 </li>
@@ -172,19 +172,19 @@ ret = thumbnail_util_set_size(g_thumb_h, width, height);
 <pre class="prettyprint">
 void
 thumbnail_completed_cb(thumbnail_util_error_e error, const char *request_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int raw_width, int raw_height, unsigned char *raw_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int raw_size, void *user_data)
+                       int raw_width, int raw_height, unsigned char *raw_data,
+                       int raw_size, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;REQUEST ID: %s\n&quot;, request_id);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;WIDTH: %d, HEIGHT: %d\n&quot;, raw_width, raw_height);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "REQUEST ID: %s\n", request_id);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "WIDTH: %d, HEIGHT: %d\n", raw_width, raw_height);
 }
 
 void
 extract()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *request_id = NULL;
+    char *request_id = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = thumbnail_util_extract(g_thumb_h, thumbnail_completed_cb, NULL, &amp;request_id);
+    ret = thumbnail_util_extract(g_thumb_h, thumbnail_completed_cb, NULL, &amp;request_id);
 }
 </pre>
 <p>After calling the function, check whether the return value is <code>THUMBNAIL_UTIL_ERROR_NONE</code>. If it is, the function extracted the thumbnail successfully and stored it in the <code>raw_data</code> parameter returned by the callback. Otherwise, the function failed because of an error, which you need to handle.</p>
diff --git a/org.tizen.guides/html/native/messaging/email_n.htm b/org.tizen.guides/html/native/messaging/email_n.htm
index 349ef54..059da57 100644 (file)
--- a/org.tizen.guides/html/native/messaging/email_n.htm
+++ b/org.tizen.guides/html/native/messaging/email_n.htm
@@ -48,7 +48,7 @@
 <ul><li>Preparing email messages\r
 <p>Set the subject, body, and recipients of the message, and the file path for any attachments.</p></li>\r
 <li>Sending email messages\r
-<p>Once the <code>email_send_message()</code> function is called, the message content is out of the application&#39;s control. Even if the message appears not to have finished sending, it can no longer be modified.</p></li>\r
+<p>Once the <code>email_send_message()</code> function is called, the message content is out of the application's control. Even if the message appears not to have finished sending, it can no longer be modified.</p></li>\r
 <li>Registering a callback to be notified of the message status\r
 <p>Email sending is asynchronous and the application must not wait for the result. The process can be slow (connections must be established), and even if the mail server is not available, message sending is not a failure if a spooling mechanism exists. To receive a notification when the message has been successfully sent, register a callback function.</p></li></ul>\r
   \r
@@ -67,7 +67,7 @@
 <p>To use the Email API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>\r
 <pre class="prettyprint">\r
 &lt;privileges&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/email&lt;/privilege&gt;\r
+   &lt;privilege&gt;http://tizen.org/privilege/email&lt;/privilege&gt;\r
 &lt;/privileges&gt;\r
 </pre>\r
 </li>\r
@@ -93,7 +93,7 @@ email_h msg;
 int error_code = EMAILS_ERROR_NONE;\r
 error_code = email_create_message(&amp;msg);\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to create email message\n&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to create email message\n");\r
 </pre>\r
 <p>The function return code defines whether the message creation succeeded. The <code>EMAIL_ERROR_ACCOUNT_NOT_FOUND</code> error is not related to the email service as such; it occurs if no email account has been configured on the device.</p></li>\r
 \r
@@ -102,15 +102,15 @@ if (error_code != EMAILS_ERROR_NONE)
 <li>\r
 <p>Add recipients to the email message one by one. You cannot add lists of recipients in one function call. Each address must be given as a character string with the address type (TO, CC, BCC) declared.</p>\r
 <pre class="prettyprint">\r
-error_code = email_add_recipient(msg, EMAIL_RECIPIENT_TYPE_TO, &quot;example@mail.com&quot;);\r
+error_code = email_add_recipient(msg, EMAIL_RECIPIENT_TYPE_TO, "example@mail.com");\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to add recipient\n&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to add recipient\n");\r
 </pre></li>\r
 <li><p>Add an attachment to the email message with a full path to the attachment file. Currently, files with size up to 10 MB are supported.</p>\r
 <pre class="prettyprint">\r
-error_code = email_add_attach(msg, &quot;/full/path/to/attachment&quot;);\r
+error_code = email_add_attach(msg, "/full/path/to/attachment");\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to add attachment\n&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to add attachment\n");\r
 </pre></li>\r
 \r
 <li>Remove recipients or attachments.\r
@@ -118,10 +118,10 @@ if (error_code != EMAILS_ERROR_NONE)
 <pre class="prettyprint">\r
 error_code = email_remove_all_recipients(msg);\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to add remove recipients\n&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to add remove recipients\n");\r
 error_code = email_remove_all_attachments(msg);\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to remove attachments\n&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to remove attachments\n");\r
 </pre></li>\r
 </ol>\r
 </li>\r
@@ -129,7 +129,7 @@ if (error_code != EMAILS_ERROR_NONE)
 <pre class="prettyprint">\r
 error_code = email_save_message(msg);\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to save email\n&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to save email\n");\r
 </pre></li>\r
 \r
 <li>Define and register the email sending status callback.\r
@@ -138,25 +138,25 @@ if (error_code != EMAILS_ERROR_NONE)
 static void\r
 email_send_status(email_h email, email_sending_e result, void *user_data)\r
 {\r
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == EMAIL_SENDING_FAILED) {\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to send email\n&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (result == EMAIL_SENDING_SUCCEEDED) {\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Sending was successful */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Email sending finished with success\n&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;}\r
+    if (result == EMAIL_SENDING_FAILED) {\r
+        /* Error handling */\r
+        dlog_print(DLOG_INFO, LOG_TAG, "Failed to send email\n");\r
+    } else if (result == EMAIL_SENDING_SUCCEEDED) {\r
+        /* Sending was successful */\r
+        dlog_print(DLOG_INFO, LOG_TAG, "Email sending finished with success\n");\r
+    }\r
 }\r
 \r
 error_code = email_set_message_sent_cb(msg, email_send_status, NULL);\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to set sending status callback\n&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to set sending status callback\n");\r
 </pre></li>\r
 \r
 <li>Send the email:\r
 <pre class="prettyprint">\r
 error_code = email_send_message(msg, false);\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "");\r
 </pre>\r
 </li>\r
 <li>\r
@@ -164,11 +164,11 @@ if (error_code != EMAILS_ERROR_NONE)
 <pre class="prettyprint">\r
 error_code = email_unset_message_sent_cb(msg);\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to unset status callback\n&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to unset status callback\n");\r
 \r
 error_code = email_destroy_message(msg);\r
 if (error_code != EMAILS_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Failed to delete email message\n&quot;);\r
+    dlog_print(DLOG_INFO, LOG_TAG, "Failed to delete email message\n");\r
 </pre></li></ol>\r
 \r
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
diff --git a/org.tizen.guides/html/native/messaging/messages_n.htm b/org.tizen.guides/html/native/messaging/messages_n.htm
index 4ce92ea..ad6734f 100644 (file)
--- a/org.tizen.guides/html/native/messaging/messages_n.htm
+++ b/org.tizen.guides/html/native/messaging/messages_n.htm
@@ -62,8 +62,8 @@
 <p>To use the Messages API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>\r
 <pre class="prettyprint">\r
 &lt;privileges&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/message.read&lt;/privilege&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/message.write&lt;/privilege&gt;\r
+   &lt;privilege&gt;http://tizen.org/privilege/message.read&lt;/privilege&gt;\r
+   &lt;privilege&gt;http://tizen.org/privilege/message.write&lt;/privilege&gt;\r
 &lt;/privileges&gt;\r
 </pre>\r
 </li>\r
@@ -81,7 +81,7 @@ int error_code;
 error_code = messages_open_service(&amp;service_handle);\r
 \r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */\r
+    /* Error handling */\r
 </pre></li>\r
 \r
 <li><p>When a connection with the Messages service is no longer needed (or the application is exiting), call the <code>messages_close_service()</code> function for proper connection closing:</p>\r
@@ -108,11 +108,11 @@ int error_code = MESSAGES_ERROR_NONE;
 \r
 error_code = messages_get_text(msg, &amp;message);\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to get message content&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to get message content");\r
 \r
 error_code = messages_get_address(msg, 0, &amp;address, &amp;rtype);\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to get recipient address&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to get recipient address");\r
 \r
 messages_message_type_e mtype = MESSAGES_TYPE_UNKNOWN;\r
 messages_get_message_type(msg, &amp;mtype);\r
@@ -121,12 +121,12 @@ messages_get_message_type(msg, &amp;mtype);
 <li><p>For MMS messages, the subject and attachments attributes exist and can be extracted from the found message:</p>\r
 <pre class="prettyprint">\r
 if (MESSAGES_TYPE_MMS == mtype) {\r
-&nbsp;&nbsp;&nbsp;&nbsp;char *subject = NULL;\r
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = messages_mms_get_subject(msg, &amp;subject);\r
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to get MMS subject&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;int atcount = 0;\r
-&nbsp;&nbsp;&nbsp;&nbsp;messages_mms_get_attachment_count(msg, &amp;atcount);\r
+    char *subject = NULL;\r
+    error_code = messages_mms_get_subject(msg, &amp;subject);\r
+    if (error_code != MESSAGES_ERROR_NONE)\r
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to get MMS subject");\r
+    int atcount = 0;\r
+    messages_mms_get_attachment_count(msg, &amp;atcount);\r
 }\r
 </pre></li>\r
 \r
@@ -150,13 +150,13 @@ free(address);
 int error_code;\r
 error_code = messages_open_service(&amp;service_handle);\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to open connection&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to open connection");\r
 \r
 error_code = messages_foreach_message(service_handle, MESSAGES_MBOX_ALL,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MESSAGES_TYPE_SMS, NULL, NULL, 0, 0,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messages_search_callback, NULL);\r
+                                      MESSAGES_TYPE_SMS, NULL, NULL, 0, 0,\r
+                                      messages_search_callback, NULL);\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Messages searching failed&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Messages searching failed");\r
 \r
 messages_close_service(service_handle);\r
 </pre></li></ol>\r
@@ -174,33 +174,33 @@ messages_message_h msg_hndl = NULL;
 /* Create an SMS message handle */\r
 error_code = messages_create_message(MESSAGES_TYPE_SMS, &amp;msg_hndl);\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to create message&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to create message");\r
 </pre></li>\r
 <li>Define the recipients and message body.\r
 <p>Functions for setting the recipient address and the message body (the message text) are the same for SMS and MMS.</p>\r
 <pre class="prettyprint">\r
-error_code = messages_add_address(msg_hndl, &quot;123456789&quot;, MESSAGES_RECIPIENT_TO);\r
+error_code = messages_add_address(msg_hndl, "123456789", MESSAGES_RECIPIENT_TO);\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to add recipient address&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to add recipient address");\r
 \r
 error_code = messages_set_text(msg_hndl, __PRETTY_FUNCTION__);\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to set message text&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to set message text");\r
 </pre></li>\r
 \r
 <li>Set a subject and add an attachment for an MMS message (note that MMS sending is not supported on the emulator).\r
 <ul><li><p>Set a message subject:</p>\r
 <pre class="prettyprint">\r
-error_code = messages_mms_set_subject(msg_hndl, &quot;MMS test&quot;);\r
+error_code = messages_mms_set_subject(msg_hndl, "MMS test");\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to set MMS subject&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to set MMS subject");\r
 </pre></li>\r
 <li><p>Add attachments with their absolute path in the device file system. When adding the attachment, give the attachment type. Possible attachment types are image, audio, and video.</p>\r
 <pre class="prettyprint">\r
 error_code = messages_mms_add_attachment(g_message, MESSAGES_MEDIA_IMAGE,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;/path/to/image/file&quot;);\r
+                                         "/path/to/image/file");\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to add attachment to MMS&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to add attachment to MMS");\r
 </pre></li></ul></li>\r
 \r
 <li>Send the message.\r
@@ -210,18 +210,18 @@ if (error_code != MESSAGES_ERROR_NONE)
 static void\r
 sent_msg_cb(messages_sending_result_e result, void *user_data)\r
 {\r
-&nbsp;&nbsp;&nbsp;&nbsp;if (MESSAGES_SENDING_SUCCEEDED == result)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Message sending succeeded&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Message sending failed&quot;);\r
+    if (MESSAGES_SENDING_SUCCEEDED == result)\r
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Message sending succeeded");\r
+    else\r
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Message sending failed");\r
 }\r
 </pre></li>\r
 <li><p>If the connection to the messaging service is open (you have the <code>service_handle</code> handle) and the message itself (<code>msg_hndl</code>) is successfully created, send the message using the <code>messages_send_message()</code> function:</p>\r
 <pre class="prettyprint">\r
 error_code = messages_send_message(service_handle, msg_hndl, true,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sent_msg_cb, NULL);\r
+                                   sent_msg_cb, NULL);\r
 if (error_code != MESSAGES_ERROR_NONE)\r
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Failed to send message&quot;);\r
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to send message");\r
 </pre></li></ol></li></ol>\r
        \r
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
diff --git a/org.tizen.guides/html/native/messaging/messaging_cover_n.htm b/org.tizen.guides/html/native/messaging/messaging_cover_n.htm
index 79e389a..696db6b 100644 (file)
--- a/org.tizen.guides/html/native/messaging/messaging_cover_n.htm
+++ b/org.tizen.guides/html/native/messaging/messaging_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Messaging</title>  
+       <title>Messaging</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Messaging</h1>
@@ -38,7 +38,7 @@
 <ul>
 <li><a href="email_n.htm">Email</a>
 
-<p>You can enable the user to create and send email messages, as long as the user&#39;s email account has been correctly configured in the device. You can use attachments in the messages, and monitor the sending status of the messages.</p></li>
+<p>You can enable the user to create and send email messages, as long as the user's email account has been correctly configured in the device. You can use attachments in the messages, and monitor the sending status of the messages.</p></li>
 
 <li><a href="messages_n.htm">Messages</a>
 
@@ -48,7 +48,7 @@
 
 <p>The application can receive push notifications from a push server. You can create a push server, register your application and connect to the push messaging service, and send notifications from the server to the application using the push messaging service.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/messaging/push_n.htm b/org.tizen.guides/html/native/messaging/push_n.htm
index 024776c..0579b9a 100644 (file)
--- a/org.tizen.guides/html/native/messaging/push_n.htm
+++ b/org.tizen.guides/html/native/messaging/push_n.htm
@@ -38,11 +38,11 @@
                        </li>
                        <li>Notification management
                                <ul class="toc">
-                                       <li><a href="#send">Sending Push Notifications</a></li> 
-                                       <li><a href="#receive_push">Receiving Push Notifications</a></li>               
-                               </ul> 
+                                       <li><a href="#send">Sending Push Notifications</a></li>
+                                       <li><a href="#receive_push">Receiving Push Notifications</a></li>
+                               </ul>
                        </li>
-               </ul>           
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Mobile Native</a></li>
@@ -54,9 +54,9 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Push</h1>
 
-<p>Push enables you to push events from an application server to your application on a Tizen device.</p> 
+<p>Push enables you to push events from an application server to your application on a Tizen device.</p>
 
-  <p>Once your application is successfully registered in the push server through the <a href="#service">push service</a> (daemon) on the device, your application server can send push messages to the application in that particular device.</p> 
+  <p>Once your application is successfully registered in the push server through the <a href="#service">push service</a> (daemon) on the device, your application server can send push messages to the application in that particular device.</p>
   <p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the push service makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. The application server may send a message with a <code>LAUNCH</code> option. In this case, the push service forcibly launches the application and hands over the message to the application as an <a href="../app_management/app_controls_n.htm">application control</a>.</p>
 <p>To use the push messaging service, the application needs the permission to access the Tizen push server. Request the permission from the Tizen push service team by <a href="mailto:push.tizen@samsung.com">email</a>, including the <a href="#permission">necessary information</a>. When the team approves the request, you receive a push app ID corresponding to your package ID.</p>
 <p>The main features of the Push API include:</p>
@@ -76,23 +76,23 @@
   <p align="center"><strong>Figure: Push messaging service</strong></p>
   <p align="center"><img alt="Push messaging service" src="../../images/ui_push_message.png" /></p>
 
-<h2 id="service" name="service">Service Architecture</h2> 
-  <p>The following figure illustrates the service architecture of the Tizen push messaging service.</p> 
-  <p align="center"><strong>Figure: Service architecture</strong></p> 
-  <p align="center"><img alt="Service architecture" src="../../images/push_overview.png" /></p> 
-  <p>The following steps illustrate a typical scenario for using the push messaging service on a Tizen device:</p> 
-  <ol> 
-   <li>The application on the device registers for the push messaging service.</li> 
-   <li>When an application is installed and launched, the device establishes a push session with the Tizen Server by sending a registration request to the Tizen push server through the push service. 
-   <p>The push session is managed by the Tizen server and device platform, so there is no need to create any code to manage it within the application.</p></li> 
-   <li>If the registration request is approved, the application receives through the push service a registration ID. The registration ID is a unique key used to identify the application installed in that particular device and route the push message. 
-   <p>The application delivers the registration ID to the application server. This registration ID is used to identify the application installed in that particular device.</p></li> 
-   <li>When the application server needs to send a push message to the application in the particular device, it calls the Tizen server&#39;s open API to send the message together with the registration ID. (For more information for server developers about sending push messages, see <a href="push_server_n.htm#send_server">Sending Push Notifications</a>.)
+<h2 id="service" name="service">Service Architecture</h2>
+  <p>The following figure illustrates the service architecture of the Tizen push messaging service.</p>
+  <p align="center"><strong>Figure: Service architecture</strong></p>
+  <p align="center"><img alt="Service architecture" src="../../images/push_overview.png" /></p>
+  <p>The following steps illustrate a typical scenario for using the push messaging service on a Tizen device:</p>
+  <ol>
+   <li>The application on the device registers for the push messaging service.</li>
+   <li>When an application is installed and launched, the device establishes a push session with the Tizen Server by sending a registration request to the Tizen push server through the push service.
+   <p>The push session is managed by the Tizen server and device platform, so there is no need to create any code to manage it within the application.</p></li>
+   <li>If the registration request is approved, the application receives through the push service a registration ID. The registration ID is a unique key used to identify the application installed in that particular device and route the push message.
+   <p>The application delivers the registration ID to the application server. This registration ID is used to identify the application installed in that particular device.</p></li>
+   <li>When the application server needs to send a push message to the application in the particular device, it calls the Tizen server's open API to send the message together with the registration ID. (For more information for server developers about sending push messages, see <a href="push_server_n.htm#send_server">Sending Push Notifications</a>.)
    <p>A text message of up to 1024 bytes can be sent in a push message. If the application needs to download a large amount of data, the application server sends a link to the data in the push message.</p>
-   </li> 
-   <li>When the Tizen push server receives the message and the registration ID, it checks which device has the application with the particular registration ID and then routes the message to that device.</li>    
-   <li>When the push service receives the message and the registration ID, it sends the message to the destination application, which receives the push message.</li>   
-  </ol>        
+   </li>
+   <li>When the Tizen push server receives the message and the registration ID, it checks which device has the application with the particular registration ID and then routes the message to that device.</li>
+   <li>When the push service receives the message and the registration ID, it sends the message to the destination application, which receives the push message.</li>
+  </ol>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -102,14 +102,14 @@
 <p>To use the Push API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/push&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/push&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
 <li>
 <p>Make sure the following requirements are fulfilled:</p>
 <ol>
-<li>Internet access 
+<li>Internet access
 <p>To connect to the Tizen push server and receive notifications from it, the target device or emulator must be able to contact any IP address with the port 5223. If you are in an enterprise network, ensure that the proxy setting in your local network allows outgoing traffic destined for this port number.</p></li>
 <li>Package ID
 <p>When you create a project in the Tizen Studio, you are given the package ID (randomly generated by the Tizen Studio or entered by yourself). The Tizen push server identifies your applications using the package ID.</p></li>
@@ -135,7 +135,7 @@
 </pre>
 </li>
 </ol>
-  
+
     <div class="note">
         <strong>Note</strong>
         Since Tizen 3.0, the push service supports launching an application in the background. Remember that you can deliver application data to your application without an unwanted UI launch.
@@ -155,26 +155,26 @@ push_service_connection_h push_conn;
 <p>Once the connection handle is defined, use the <code>push_service_connect()</code> function to connect to the push service:</p>
 
 <pre class="prettyprint">
-#define PUSH_APP_ID &quot;YOUR_PUSH_ID_HERE&quot;
+#define PUSH_APP_ID "YOUR_PUSH_ID_HERE"
 
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Connect to the push service when the application is launched */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_connect(PUSH_APP_ID, _state_cb, _noti_cb, NULL, &amp;push_conn);
+    /* Connect to the push service when the application is launched */
+    ret = push_service_connect(PUSH_APP_ID, _state_cb, _noti_cb, NULL, &amp;push_conn);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != PUSH_SERVICE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;push_service_connect() failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;push_conn = NULL;
+    if (ret != PUSH_SERVICE_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "push_service_connect() failed");
+        push_conn = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* UI implementation here */
+    /* UI implementation here */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 
@@ -192,28 +192,28 @@ app_create(void *data)
 static void
 app_resume(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take necessary actions when application becomes visible */
-
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;if (!push_conn) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_connect(PUSH_APP_ID, _state_cb, _noti_cb, NULL, &amp;push_conn);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != PUSH_SERVICE_ERROR_NONE){
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;ERROR: push_service_connect() failed.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;push_conn = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   If the connection with the push service succeeds,
-&nbsp;&nbsp;&nbsp;&nbsp;   the application must request the unread notification messages
-&nbsp;&nbsp;&nbsp;&nbsp;   which are sent during the disconnected state
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_request_unread_notification(push_conn);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != PUSH_SERVICE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ERROR: push_service_request_unread_notification() failed.&quot;);
+    /* Take necessary actions when application becomes visible */
+
+    int ret;
+    if (!push_conn) {
+        ret = push_service_connect(PUSH_APP_ID, _state_cb, _noti_cb, NULL, &amp;push_conn);
+        if (ret != PUSH_SERVICE_ERROR_NONE){
+            dlog_print(DLOG_ERROR, LOG_TAG, "ERROR: push_service_connect() failed.");
+            push_conn = NULL;
+
+            return;
+        }
+    }
+
+    /*
+       If the connection with the push service succeeds,
+       the application must request the unread notification messages
+       which are sent during the disconnected state
+    */
+    ret = push_service_request_unread_notification(push_conn);
+    if (ret != PUSH_SERVICE_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "ERROR: push_service_request_unread_notification() failed.");
 }
 </pre>
 </li>
@@ -228,12 +228,12 @@ app_resume(void *data)
 static void
 app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release all push messages */
+    /* Release all push messages */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (push_conn)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;push_service_disconnect(push_conn);
+    if (push_conn)
+        push_service_disconnect(push_conn);
 
-&nbsp;&nbsp;&nbsp;&nbsp;push_conn = NULL;
+    push_conn = NULL;
 }
 </pre>
 
@@ -245,10 +245,10 @@ app_terminate(void *data)
 static void
 app_pause(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (push_conn)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;push_service_disconnect(push_conn);
+    if (push_conn)
+        push_service_disconnect(push_conn);
 
-&nbsp;&nbsp;&nbsp;&nbsp;push_conn = NULL;
+    push_conn = NULL;
 }
 </pre>
 </li>
@@ -269,23 +269,23 @@ app_pause(void *data)
 static void
 _state_cb(push_service_state_e state, const char *err, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;switch (state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case PUSH_SERVICE_STATE_UNREGISTERED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Arrived at STATE_UNREGISTERED&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_on_state_unregistered(user_data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case PUSH_SERVICE_STATE_REGISTERED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Arrived at STATE_REGISTERED&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_on_state_registered(user_data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case PUSH_SERVICE_STATE_ERROR:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Arrived at STATE_ERROR&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_on_state_error(err, user_data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Unknown State&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    switch (state) {
+    case PUSH_SERVICE_STATE_UNREGISTERED:
+        dlog_print(DLOG_INFO, LOG_TAG, "Arrived at STATE_UNREGISTERED");
+        _on_state_unregistered(user_data);
+        break;
+    case PUSH_SERVICE_STATE_REGISTERED:
+        dlog_print(DLOG_INFO, LOG_TAG, "Arrived at STATE_REGISTERED");
+        _on_state_registered(user_data);
+        break;
+    case PUSH_SERVICE_STATE_ERROR:
+        dlog_print(DLOG_INFO, LOG_TAG, "Arrived at STATE_ERROR");
+        _on_state_error(err, user_data);
+        break;
+    default:
+        dlog_print(DLOG_INFO, LOG_TAG, "Unknown State");
+        break;
+    }
 }
 </pre>
 
@@ -304,22 +304,22 @@ _state_cb(push_service_state_e state, const char *err, void *user_data)
 <p>The first parameter is the connection handle that was returned from the <code>push_service_connect()</code> function, and the second parameter is the callback function that returns the result of the registration request.</p>
 
 <pre class="prettyprint">
-#define PUSH_HASH_KEY &quot;existing_push_reg_id&quot;
+#define PUSH_HASH_KEY "existing_push_reg_id"
 
 static void
 _on_state_unregistered(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Reset the previously-stored registration ID */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = preference_set_string(PUSH_HASH_KEY, &quot;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != PREFERENCE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ERROR: Failed to initialize hash_value [%d : %s]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret, get_error_message(ret));
+    /* Reset the previously-stored registration ID */
+    ret = preference_set_string(PUSH_HASH_KEY, "");
+    if (ret != PREFERENCE_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "ERROR: Failed to initialize hash_value [%d : %s]",
+                   ret, get_error_message(ret));
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send a registration request to the push service */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_register(push_conn, _result_cb, user_data);
+    /* Send a registration request to the push service */
+    ret = push_service_register(push_conn, _result_cb, user_data);
 }
 </pre>
 
@@ -331,12 +331,12 @@ _on_state_unregistered(void *user_data)
 static void
 _result_cb(push_service_result_e result, const char *msg, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (result == PUSH_SERVICE_RESULT_SUCCESS)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Registration request is approved.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Registration ERROR [%s]&quot;, msg);
+    if (result == PUSH_SERVICE_RESULT_SUCCESS)
+        dlog_print(DLOG_INFO, LOG_TAG, "Registration request is approved.");
+    else
+        dlog_print(DLOG_ERROR, LOG_TAG, "Registration ERROR [%s]", msg);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 
@@ -362,37 +362,37 @@ _result_cb(push_service_result_e result, const char *msg, void *user_data)
 static void
 _on_state_registered(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (!push_conn)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (!push_conn)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *reg_id = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *app_id = NULL;
+    int ret;
+    char *reg_id = NULL;
+    char *app_id = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Request unread notifications to the push service */
-&nbsp;&nbsp;&nbsp;&nbsp;/* _noti_cb() is called if there are unread notifications */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_request_unread_notification(push_conn);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != PUSH_SERVICE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ERROR [%d]: push_service_request_unread_notification()&quot;, ret);
+    /* Request unread notifications to the push service */
+    /* _noti_cb() is called if there are unread notifications */
+    ret = push_service_request_unread_notification(push_conn);
+    if (ret != PUSH_SERVICE_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "ERROR [%d]: push_service_request_unread_notification()", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the registration ID */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_get_registration_id(push_conn, &amp;reg_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != PUSH_SERVICE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ERROR [%d]: push_service_get_registration_id()&quot;, ret);
+    /* Get the registration ID */
+    ret = push_service_get_registration_id(push_conn, &amp;reg_id);
+    if (ret != PUSH_SERVICE_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "ERROR [%d]: push_service_get_registration_id()", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Send reg_id to your application server if necessary */
-&nbsp;&nbsp;&nbsp;&nbsp;_send_reg_id_if_necessary(reg_id);
+    /* Send reg_id to your application server if necessary */
+    _send_reg_id_if_necessary(reg_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (reg_id)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(reg_id);
+    if (reg_id)
+        free(reg_id);
 }
 </pre>
 
@@ -402,46 +402,46 @@ _on_state_registered(void *user_data)
 
 <pre class="prettyprint">
 #include &lt;openssl/sha.h&gt;
-#define PUSH_HASH_KEY &quot;existing_push_reg_id&quot;
+#define PUSH_HASH_KEY "existing_push_reg_id"
 
 static void
 _send_reg_id_if_necessary(const char *reg_id)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char md[SHA_DIGEST_LENGTH];
-&nbsp;&nbsp;&nbsp;&nbsp;char hash_string[2*SHA_DIGEST_LENGTH+1];
-&nbsp;&nbsp;&nbsp;&nbsp;char *buf_ptr = hash_string;
-&nbsp;&nbsp;&nbsp;&nbsp;char *stored_hash_value = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Generate a hash string from reg_id */
-&nbsp;&nbsp;&nbsp;&nbsp;SHA1((unsigned char *)reg_id, sizeof(reg_id), md);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Convert byte array to hex string */
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; SHA_DIGEST_LENGTH; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buf_ptr += sprintf(buf_ptr, &quot;%02X&quot;, md[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;hash_string[2*SHA_DIGEST_LENGTH] = &#39;\0&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the saved hash string */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = preference_get_string(PUSH_HASH_KEY, &amp;stored_hash_value);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   If there is no hash string stored before or if the stored hash string
-&nbsp;&nbsp;&nbsp;&nbsp;   is different from the new one, send reg_id to the server
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != PREFERENCE_ERROR_NONE || strncmp(stored_hash_value, hash_string,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2*SHA_DIGEST_LENGTH) !=0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Send the reg_id to your application server */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = _send_reg_id(reg_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* If reg_id is successfully sent, store the new hash value */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = preference_set_string(PUSH_HASH_KEY, hash_string);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (stored_hash_value)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(stored_hash_value);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    unsigned char md[SHA_DIGEST_LENGTH];
+    char hash_string[2*SHA_DIGEST_LENGTH+1];
+    char *buf_ptr = hash_string;
+    char *stored_hash_value = NULL;
+    int ret;
+    int i;
+
+    /* Generate a hash string from reg_id */
+    SHA1((unsigned char *)reg_id, sizeof(reg_id), md);
+
+    /* Convert byte array to hex string */
+    for (i = 0; i &lt; SHA_DIGEST_LENGTH; i++)
+        buf_ptr += sprintf(buf_ptr, "%02X", md[i]);
+    hash_string[2*SHA_DIGEST_LENGTH] = '\0';
+
+    /* Get the saved hash string */
+    ret = preference_get_string(PUSH_HASH_KEY, &amp;stored_hash_value);
+
+    /*
+       If there is no hash string stored before or if the stored hash string
+       is different from the new one, send reg_id to the server
+    */
+    if (ret != PREFERENCE_ERROR_NONE || strncmp(stored_hash_value, hash_string,
+                                                2*SHA_DIGEST_LENGTH) !=0) {
+        /* Send the reg_id to your application server */
+        ret = _send_reg_id(reg_id);
+
+        /* If reg_id is successfully sent, store the new hash value */
+        if (!ret)
+            ret = preference_set_string(PUSH_HASH_KEY, hash_string);
+    }
+    if (stored_hash_value)
+        free(stored_hash_value);
+
+    return;
 }
 </pre>
 </li>
@@ -458,7 +458,7 @@ push_service_deregister(push_conn, _dereg_result_cb, NULL);
 
   <div class="note">
         <strong>Note</strong>
-        The <code>push_service_deregister()</code> function is not used, if the application is intended to receive push notifications continuously while it is installed on the device. When the application is uninstalled, the push service detects the event and deregisters the application automatically. 
+        The <code>push_service_deregister()</code> function is not used, if the application is intended to receive push notifications continuously while it is installed on the device. When the application is uninstalled, the push service detects the event and deregisters the application automatically.
                <p>On the other hand, if the application wants to receive push notifications only when a user logs in, the <code>push_service_deregister()</code> function must be called whenever a user logs out.</p>
     </div>
 
@@ -471,13 +471,13 @@ push_service_deregister(push_conn, _dereg_result_cb, NULL);
 <p>When you send a notification with sensitive information, be aware of the chance that the notification gets hijacked by someone else. It is your responsibility to keep such sensitive information safe from malicious access. The following rules are strongly recommended:</p>
 
 <ul>
-<li>Keep the push application ID confidential. 
+<li>Keep the push application ID confidential.
 <p>If it is exposed, hackers can try to hijack notifications using a fake application with the exposed ID.</p></li>
-<li>Do not store the registration ID on the device. 
+<li>Do not store the registration ID on the device.
 <p>The registration ID can be seen as a destination address of the notifications. Without the ID, hackers cannot send fake notifications to your application.</p></li>
-<li>Encrypt sensitive information. 
+<li>Encrypt sensitive information.
 <p>When you send sensitive information, such as personal information and financial transactions, encrypt it and load it to the notification as a payload. Do not load the information to the message field of the notification. When the notification arrives at the device, the application decrypts the payload and retrieves the sensitive information.</p></li>
-<li>Do not hardcode the AppSecret in the source code. 
+<li>Do not hardcode the AppSecret in the source code.
 <p>The AppSecret is a key to accessing the push server for sending notifications. If notifications are sent from your application server, the application does not need to know the AppSecret at all. Keep the AppSecret in the server and do not load any related information in the application. If you want device-to-device notification delivery without your application server, the application needs the AppSecret to send a notification from a device. In this case, it is your responsibility to keep the AppSecret safe.</p></li>
 </ul>
 
@@ -499,10 +499,10 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <li>Body:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;0501a53f4affdcbb98197f188345ff30c04b-5001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;01231-22EAX-223442&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;message&quot;: &quot;badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;appData&quot;: &quot;{id:asdf&amp;passwd:1234}&quot;, /* Optional, if the message field is not empty */
+    "regID": "0501a53f4affdcbb98197f188345ff30c04b-5001",
+    "requestID": "01231-22EAX-223442",
+    "message": "badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi",
+    "appData": "{id:asdf&amp;passwd:1234}", /* Optional, if the message field is not empty */
 }
 </pre></li>
 </ul>
@@ -512,7 +512,7 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <ol>
 <li>Prepare the appID, appSecret, regID, and requestID:
 <ul>
-<li>The appID and appSecret values are from the email that you received when requesting <a href="#permission">permission to Tizen push servers</a>.</li> 
+<li>The appID and appSecret values are from the email that you received when requesting <a href="#permission">permission to Tizen push servers</a>.</li>
 <li>The regID value is the one that the application server received from your application installed in a Tizen device. Depending on the regID value, the URI of the server to which your application server sends the notification varies.</li>
 <li>The requestID value is used to identify the notification in the push server. When your application server sends notifications using the same requestID value, the last notification overwrites all the previous notifications that are not delivered yet.</li>
 </ul>
@@ -558,19 +558,19 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 </tbody>
 </table>
 
-<p>For example, to show a &quot;Hi&quot; message in the quick panel and increase the badge count by 1 when the notification arrives at the device, the message field of the notification must be the following:</p>
+<p>For example, to show a "Hi" message in the quick panel and increase the badge count by 1 when the notification arrives at the device, the message field of the notification must be the following:</p>
 
 <pre class="prettyprint">
-&quot;badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi&quot;
+"badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi"
 </pre>
 
 <p>If you want to deliver the notification directly to your application, the message field must be the following:</p>
 <pre class="prettyprint">
-&quot;action=LAUNCH&quot;
+"action=LAUNCH"
 </pre>
 <p>When the push service in the target device receives a notification with this message, it launches your application and delivers the notification through an <a href="../../../../org.tizen.guides/html/native/app_management/app_controls_n.htm">Application Controls</a>. Your application can get the notification using the <code>push_service_app_control_to_notification()</code> function. For more information, see how to <a href="#recv_noti_app_not_run">receive notifications when the application is not running</a>.</p>
 
-<p>The message field takes effect only when the application is not running (more precisely, when the application is not connected to the push service). If a notification with the above message field arrives at the device where the application is running, the push service delivers the notification directly to the application. It does not show the &quot;Hi&quot; message in the quick panel or increase the badge count.</p>
+<p>The message field takes effect only when the application is not running (more precisely, when the application is not connected to the push service). If a notification with the above message field arrives at the device where the application is running, the push service delivers the notification directly to the application. It does not show the "Hi" message in the quick panel or increase the badge count.</p>
 </li>
 <li>Load your own data to the appData field as a string.
 <p>This use case focuses on how an application developer can construct a notification. For advanced features, see the <a href="push_server_n.htm">Push Server</a> guide for server developers.</p>
@@ -592,47 +592,47 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 static void
 _noti_cb(push_service_notification_h noti, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;char *data=NULL; /* App data loaded on the notification */
-&nbsp;&nbsp;&nbsp;&nbsp;char *msg=NULL; /* Noti message */
-&nbsp;&nbsp;&nbsp;&nbsp;long long int time_stamp; /* Time when the noti is generated */
-&nbsp;&nbsp;&nbsp;&nbsp;char *sender=NULL; /* Optional sender information */
-&nbsp;&nbsp;&nbsp;&nbsp;char *session_info=NULL; /* Optional session information */
-&nbsp;&nbsp;&nbsp;&nbsp;char *request_id=NULL; /* Optional request ID */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve app data from noti */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_data(noti, &amp;data);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Decrypt app data here if it is encrypted */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve notification message from noti */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_message(noti, &amp;msg);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the time when notification is created from noti */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_time(noti, &amp;time_stamp);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the optional information */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_sender(noti, &amp;sender);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_session_info(noti, &amp;session_info);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_get_notification_request_id(noti, &amp;request_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Use data, msg, time_stamp, sender,
-&nbsp;&nbsp;&nbsp;&nbsp;   session_info, and request_id as needed
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Free all resources */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Do not free noti in the callback function */
-&nbsp;&nbsp;&nbsp;&nbsp;if (data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-&nbsp;&nbsp;&nbsp;&nbsp;if (msg)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(msg);
-&nbsp;&nbsp;&nbsp;&nbsp;if (sender)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(sender);
-&nbsp;&nbsp;&nbsp;&nbsp;if (session_info)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(session_info);
-&nbsp;&nbsp;&nbsp;&nbsp;if (request_id)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(request_id);
+    int ret;
+
+    char *data=NULL; /* App data loaded on the notification */
+    char *msg=NULL; /* Noti message */
+    long long int time_stamp; /* Time when the noti is generated */
+    char *sender=NULL; /* Optional sender information */
+    char *session_info=NULL; /* Optional session information */
+    char *request_id=NULL; /* Optional request ID */
+
+    /* Retrieve app data from noti */
+    ret = push_service_get_notification_data(noti, &amp;data);
+    /* Decrypt app data here if it is encrypted */
+
+    /* Retrieve notification message from noti */
+    ret = push_service_get_notification_message(noti, &amp;msg);
+
+    /* Retrieve the time when notification is created from noti */
+    ret = push_service_get_notification_time(noti, &amp;time_stamp);
+
+    /* Retrieve the optional information */
+    ret = push_service_get_notification_sender(noti, &amp;sender);
+    ret = push_service_get_notification_session_info(noti, &amp;session_info);
+    ret = push_service_get_notification_request_id(noti, &amp;request_id);
+
+    /*
+       Use data, msg, time_stamp, sender,
+       session_info, and request_id as needed
+    */
+
+    /* Free all resources */
+    /* Do not free noti in the callback function */
+    if (data)
+        free(data);
+    if (msg)
+        free(msg);
+    if (sender)
+        free(sender);
+    if (session_info)
+        free(session_info);
+    if (request_id)
+        free(request_id);
 }
 </pre>
 </li>
@@ -649,46 +649,46 @@ _noti_cb(push_service_notification_h noti, void *user_data)
 static void
 app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *op = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;push_service_notification_h noti = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (app_control_get_operation(app_control, &amp;op) &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the noti from the bundle */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_app_control_to_notification(app_control, op, &amp;noti);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (noti) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the noti */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Free the noti */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;push_service_free_notification(noti);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Case when the application is not launched by the push service */
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (op)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(op);
+    char *op = NULL;
+    push_service_notification_h noti = NULL;
+    int ret;
+
+    if (app_control_get_operation(app_control, &amp;op) &lt; 0)
+        return;
+
+    /* Retrieve the noti from the bundle */
+    ret = push_service_app_control_to_notification(app_control, op, &amp;noti);
+
+    if (noti) {
+        /* Handle the noti */
+
+        /* Free the noti */
+        push_service_free_notification(noti);
+    } else {
+        /* Case when the application is not launched by the push service */
+    }
+    if (op)
+        free(op);
 }
 </pre>
 
 <p>Since Tizen 3.0, the push service provides launch types when the application is launched by the service. Use the following code to figure out why the application is launched, as the <code>app_control()</code> function is invoked in both cases of receiving notification and changing registration state.</p>
 <pre class="prettyprint">
-#define EXTRA_DATA_FROM_REGISTRATION_CHANGE &quot;registration_change&quot;
-#define EXTRA_DATA_FROM_NOTIFICATION &quot;notification&quot;
+#define EXTRA_DATA_FROM_REGISTRATION_CHANGE "registration_change"
+#define EXTRA_DATA_FROM_NOTIFICATION "notification"
 
 static void
 app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *value = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(app_control, APP_CONTROL_DATA_PUSH_LAUNCH_TYPE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (value) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(value, EXTRA_DATA_FROM_NOTIFICATION))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add your code here when push messages arrive */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(value, EXTRA_DATA_FROM_REGISTRATION_CHANGE))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add your code here when registration state is changed */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    char *value = NULL;
+    app_control_get_extra_data(app_control, APP_CONTROL_DATA_PUSH_LAUNCH_TYPE,
+                               &amp;value);
+    if (value) {
+        if (!strcmp(value, EXTRA_DATA_FROM_NOTIFICATION))
+            /* Add your code here when push messages arrive */
+        else if (!strcmp(value, EXTRA_DATA_FROM_REGISTRATION_CHANGE))
+            /* Add your code here when registration state is changed */
+    }
 }
 </pre>
 </li>
@@ -698,10 +698,10 @@ app_control(app_control_h app_control, void *data)
 <p>You can request for unread notifications from the push service. The request can be performed after the connection to the push server when the application is launched.</p>
 <pre class="prettyprint">
 if (push_conn) {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = push_service_request_unread_notification(push_conn);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != PUSH_SERVICE_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ERROR: push_service_request_unread_notification() failed.&quot;);
+    int ret = push_service_request_unread_notification(push_conn);
+    if (ret != PUSH_SERVICE_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "ERROR: push_service_request_unread_notification() failed.");
 }
 </pre>
 <p>The difference between the <code>ALERT</code> and <code>SILENT</code> actions is that the former shows an alert message in the quick panel and changes the badge count, while the latter does not. If the user clicks the alert message in the quick panel, the push service <a href="#force_launch">forcibly launches the application</a> and delivers the notification through the app control callback function.</p></li>
@@ -720,11 +720,11 @@ if (push_conn) {
 push_service_notification_h noti;
 int ret;
 do {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = push_service_get_unread_notification(push_conn, &amp;noti);
+    ret = push_service_get_unread_notification(push_conn, &amp;noti);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Process the unread message noti */
+    /* Process the unread message noti */
 
-&nbsp;&nbsp;&nbsp;&nbsp;push_server_free_notification(&amp;noti);
+    push_server_free_notification(&amp;noti);
 } while (1);
 </pre>
 
diff --git a/org.tizen.guides/html/native/messaging/push_server_n.htm b/org.tizen.guides/html/native/messaging/push_server_n.htm
index 3033dfb..c80a6ca 100644 (file)
--- a/org.tizen.guides/html/native/messaging/push_server_n.htm
+++ b/org.tizen.guides/html/native/messaging/push_server_n.htm
@@ -30,7 +30,7 @@
                        <li><a href="#send_server">Sending Push Notifications</a></li>
                        <li><a href="#decorate_noti">Decorating Push Notifications</a></li>
                        <li><a href="#error_codes">Handling Error Codes</a></li>
-               </ul>           
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Mobile Native</a></li>
@@ -139,31 +139,31 @@
 </li>
 
 <li>Determine the type of push notification.
-<p>Since Tizen 3.0, you can determine the notification type. You can send a notification either to notify a user about urgent information or to deliver data to the application for update:</p> 
+<p>Since Tizen 3.0, you can determine the notification type. You can send a notification either to notify a user about urgent information or to deliver data to the application for update:</p>
 <ul>
 <li>If you have an urgent message or data for the user, fill the message field with a proper action value:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;messages&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;message&quot;: &quot;action=ALERT&amp;badgeOption=INCREASE&amp;badgeNumber=1&amp;alertMessage=Hi&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;appData&quot;: &quot;{id:asdf&amp;passwd:1234}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;&nbsp;]}
+    "messages":
+    [{
+        ...
+        "message": "action=ALERT&amp;badgeOption=INCREASE&amp;badgeNumber=1&amp;alertMessage=Hi",
+        "appData": "{id:asdf&amp;passwd:1234}",
+        ...
+    ]}
 }
 </pre>
 </li>
 <li>If you have data to send to the application but no need to notify the user, use the action field on the same level as the message field, instead of within the message field, and do not include the message field itself. In this case, the notification is delivered with the best effort.
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;messages&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;action&quot;: &quot;backgroundLaunch&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;appData&quot;: &quot;{id:asdf&amp;passwd:1234}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;&nbsp;]}
+    "messages":
+    [{
+        ...
+        "action": "backgroundLaunch",
+        "appData": "{id:asdf&amp;passwd:1234}",
+        ...
+    ]}
 }
 </pre>
 </li></ul>
@@ -210,13 +210,13 @@
 </tbody>
 </table>
 
-<p>For example, to show a &quot;Hi&quot; message in the quick panel and increase the badge count by 1 when the notification arrives at the device, the message field of the notification must be the following:</p>
+<p>For example, to show a "Hi" message in the quick panel and increase the badge count by 1 when the notification arrives at the device, the message field of the notification must be the following:</p>
 
 <pre class="prettyprint">
-&quot;badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi&quot;
+"badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi"
 </pre>
 
-<p>The message field takes effect only when the application is not running (more precisely, when the application is not connected to the push service). If a notification with the above message field arrives at the device where the application is running, the push service delivers the notification directly to the application. It does not show the &quot;Hi&quot; message in the quick panel or increase the badge count.</p>
+<p>The message field takes effect only when the application is not running (more precisely, when the application is not connected to the push service). If a notification with the above message field arrives at the device where the application is running, the push service delivers the notification directly to the application. It does not show the "Hi" message in the quick panel or increase the badge count.</p>
 
 <p>Since Tizen 3.0, the <code>BACKGROUNDLAUNCH</code> option is supported. When you send a notification to the device with the <code>BACKGROUNDLAUNCH</code> action value, the push service launches the application in the background (if it is not already running), and delivers the appData field to the application. The user cannot see that a notification is received, but they find out when they use the application the next time.</p>
 
@@ -236,12 +236,12 @@
 <li>Method: POST</li>
 <li>Data: JSON </li>
 <li>Description: Request a notification push from the push server to the push service</li>
-<li>Note: The total request message body must be less than the system default value, 200 kb. If not, &quot;3034 – error of too long chuned message data&quot; is returned. The system default value can be changed as needed.</li>
+<li>Note: The total request message body must be less than the system default value, 200 kb. If not, "3034 – error of too long chuned message data" is returned. The system default value can be changed as needed.</li>
 <li>Header
 
 <p>There are 2 required fields: <code>appID</code> and <code>appSecret</code>.</p>
 
-<p>The fields are given when you register the application, and they are used for application authentication. If either is missing, the push server rejects the request and returns &quot;3046 – error of application authentication&quot; error. Put these 2 parameters on the request header.</p>
+<p>The fields are given when you register the application, and they are used for application authentication. If either is missing, the push server rejects the request and returns "3046 – error of application authentication" error. Put these 2 parameters on the request header.</p>
 
 </li>
 <li>Arguments
@@ -257,7 +257,7 @@
  <td><code>encoding</code></td>
  <td>Encoding defines how the <code>regId</code> is encoded.
 <p>For most cases, the push server issues the <code>regId</code> as a hex string by default, but if third-party providers state that they use the base64 encoding for the <code>regId</code> at the application registration time, the <code>regId</code> is base64-encoded.</p>
-<p>If the <code>regId</code> is base64-encoded, use the <code>&quot;base64&quot;</code> value for this field. Otherwise, leave this field blank to allow the push server to handle the <code>regId</code> as a hex string.</p></td>
+<p>If the <code>regId</code> is base64-encoded, use the <code>"base64"</code> value for this field. Otherwise, leave this field blank to allow the push server to handle the <code>regId</code> as a hex string.</p></td>
  <td><ul><li>Optional</li>
  <li>Type: string</li>
  <li>Default: <code>NULL</code></li></ul></td>
@@ -295,7 +295,7 @@
 </tr>
 <tr>
  <td><code>action</code><p>(since Tizen 3.0)</p></td>
- <td>This message is delivered along with another urgent message, when the action value is <code>&quot;backgroundLaunch&quot;</code> and message field is <code>NULL</code>.</td>
+ <td>This message is delivered along with another urgent message, when the action value is <code>"backgroundLaunch"</code> and message field is <code>NULL</code>.</td>
  <td>
 <ul><li>Optional</li>
  <li>Type: string</li>
@@ -373,16 +373,16 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <li>Example request:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;encoding&quot;: &quot;base64&quot; /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab123456&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;sender&quot;: &quot;oscal&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;type&quot;: 0 /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;message&quot;: &quot;badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;alertMessage=Hi&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;appData&quot;: &quot;{id:asdf&amp;passwd:1234}&quot;, /* Optional, (Opaque) */
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;sessionInfo&quot;: &quot;002002&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;timeStamp&quot;: 1234567890, /* Optional */
+    "encoding": "base64" /* Optional */
+    "regID": "ab123456",
+    "requestID": "0000001",
+    "sender": "oscal", /* Optional */
+    "type": 0 /* Optional */
+    "message": "badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT
+                &amp;alertMessage=Hi", /* Optional */
+    "appData": "{id:asdf&amp;passwd:1234}", /* Optional, (Opaque) */
+    "sessionInfo": "002002", /* Optional */
+    "timeStamp": 1234567890, /* Optional */
 }
 </pre>
 </li>
@@ -395,13 +395,13 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <p>The following example shows a response message when the request is successful:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;results&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab123456&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 1000,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;Success&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}]
+    "results":
+    [{
+        "regID": "ab123456",
+        "requestID": "0000001",
+        "statusCode": 1000,
+        "statusMsg": "Success"
+    }]
 }
 </pre>
 </li>
@@ -409,13 +409,13 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <p>The following example shows a response message when the request fails due to malformation:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;results&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 3023,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;error of json mapping exception&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}]
+    "results":
+    [{
+        "regID": "",
+        "requestID": "",
+        "statusCode": 3023,
+        "statusMsg": "error of json mapping exception"
+    }]
 }
 </pre>
 </li>
@@ -423,13 +423,13 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <p>The following example shows a response message when the request fails due to abnormal data:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;results&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab123456&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 3008,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;error of not registered regID&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}]
+    "results":
+    [{
+        "regID": "ab123456",
+        "requestID": "0000001",
+        "statusCode": 3008,
+        "statusMsg": "error of not registered regID"
+    }]
 }
 </pre>
 
@@ -452,7 +452,7 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <li>Data: JSON </li>
 <li>Description: Request a notification push from the push server to the push service</li>
 <li>Argument: See the <a href="#single_req">single request</a></li>
-<li>Note: The total request message body must be less than the system default value, 200 kb. If not, &quot;3034 – error of too long chuned message data&quot; is returned. The system default value can be changed as needed.</li>
+<li>Note: The total request message body must be less than the system default value, 200 kb. If not, "3034 – error of too long chuned message data" is returned. The system default value can be changed as needed.</li>
 <li>Example header:
 <pre class="prettyprint">
 appID: 1234567890987654
@@ -462,31 +462,31 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <li>Example request:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;messages&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;encoding&quot;: &quot;base64&quot; /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab123456&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;sender&quot;: &quot;oscal&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;type&quot;: 0 /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;message&quot;: &quot;example&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;appData&quot;: &quot;{id:asdf&amp;passwd:1234}&quot;, /* Optional, (Opaque) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;reliableOption&quot;: &quot;Transport&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;sessionInfo&quot;: &quot;192.168.0.1-8080-12345567&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;timeStamp&quot;: 1234567890, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;encoding&quot;: &quot;base64&quot; /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab234567&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000002&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;sender&quot;: &quot;oscal&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;type&quot;: 0 /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;message&quot;: &quot;example&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;appData&quot;: &quot;{id:asdf&amp;passwd:1234}&quot;, /* Optional, (Opaque) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;reliableOption&quot;: &quot;Transport&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;sessionInfo&quot;: &quot;192.168.0.1-8080-12345567&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;timeStamp&quot;: 1234567890, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;]}
+    "messages":
+    [{
+        "encoding": "base64" /* Optional */
+        "regID": "ab123456",
+        "requestID": "0000001",
+        "sender": "oscal", /* Optional */
+        "type": 0 /* Optional */
+        "message": "example", /* Optional */
+        "appData": "{id:asdf&amp;passwd:1234}", /* Optional, (Opaque) */
+        "reliableOption": "Transport", /* Optional */
+        "sessionInfo": "192.168.0.1-8080-12345567", /* Optional */
+        "timeStamp": 1234567890, /* Optional */
+    }
+    {
+        "encoding": "base64" /* Optional */
+        "regID": "ab234567",
+        "requestID": "0000002",
+        "sender": "oscal", /* Optional */
+        "type": 0 /* Optional */
+        "message": "example", /* Optional */
+        "appData": "{id:asdf&amp;passwd:1234}", /* Optional, (Opaque) */
+        "reliableOption": "Transport", /* Optional */
+        "sessionInfo": "192.168.0.1-8080-12345567", /* Optional */
+        "timeStamp": 1234567890, /* Optional */
+    ]}
 }
 </pre>
 </li>
@@ -497,19 +497,19 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <p>The following example shows a response message when the request is successful:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;results&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab123456&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 1000,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;Success&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab234567&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000002&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 1000,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;Success&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}]
+    "results":
+    [{
+        "regID": "ab123456",
+        "requestID": "0000001",
+        "statusCode": 1000,
+        "statusMsg": "Success"
+    }
+    {
+        "regID": "ab234567",
+        "requestID": "0000002",
+        "statusCode": 1000,
+        "statusMsg": "Success"
+    }]
 }
 </pre>
 </li>
@@ -517,13 +517,13 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <p>The following example shows a response message when the request fails due to malformation:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;results&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 3023,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;error of json mapping exception&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}]
+    "results":
+    [{
+        "regID": "",
+        "requestID": "",
+        "statusCode": 3023,
+        "statusMsg": "error of json mapping exception"
+    }]
 }
 </pre>
 </li>
@@ -531,18 +531,18 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <p>The following example shows a response message when some parts of the multiple request have failed and the others have not:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;results&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab123456&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 1000,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;Success&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab234567&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000002&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 3008,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;error of not registered regID&quot;+&nbsp;&nbsp;&nbsp;}]
+    "results":
+    [{
+        "regID": "ab123456",
+        "requestID": "0000001",
+        "statusCode": 1000,
+        "statusMsg": "Success"
+    }
+    {
+        "regID": "ab234567",
+        "requestID": "0000002",
+        "statusCode": 3008,
+        "statusMsg": "error of not registered regID"+   }]
 }
 </pre>
 </li>
@@ -560,7 +560,7 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <li>Data: JSON </li>
 <li>Description: Request a notification push from the push server to the push service</li>
 <li>Argument: See the <a href="#single_req">single request</a></li>
-<li>Note: The total request message body must be less than the system default value, 200 kb. If not, &quot;3034 – error of too long chuned message data&quot; is returned. The system default value can be changed as needed.</li>
+<li>Note: The total request message body must be less than the system default value, 200 kb. If not, "3034 – error of too long chuned message data" is returned. The system default value can be changed as needed.</li>
 <li>Example header:
 <pre class="prettyprint">
 appID: 1234567890987654
@@ -570,18 +570,18 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <li>Example request:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;messages&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;encoding&quot;: &quot;base64&quot; /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: [&quot;ab123456&quot;, &quot;ab234567&quot;, &quot;ab345678&quot;]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;sender&quot;: &quot;oscal&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;type&quot;: 0 /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;message&quot;: &quot;example&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;appData&quot;: &quot;{id:asdf&amp;passwd:1234}&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;sessionInfo&quot;: &quot;192.168.0.1-8080-12345567&quot;, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;timeStamp&quot;: 1234567890, /* Optional */
-&nbsp;&nbsp;&nbsp;&nbsp;]}
+    "messages":
+    [{
+        "encoding": "base64" /* Optional */
+        "regID": ["ab123456", "ab234567", "ab345678"]
+        "requestID": "0000001",
+        "sender": "oscal", /* Optional */
+        "type": 0 /* Optional */
+        "message": "example", /* Optional */
+        "appData": "{id:asdf&amp;passwd:1234}", /* Optional */
+        "sessionInfo": "192.168.0.1-8080-12345567", /* Optional */
+        "timeStamp": 1234567890, /* Optional */
+    ]}
 }
 </pre>
 </li>
@@ -592,25 +592,25 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <p>The following example shows a response message when the request is successful:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;results&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab123456&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 1000,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;Success&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab234567&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000002&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 1000,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;Success&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab345678&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000002&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 1000,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;Success&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}]
+    "results":
+    [{
+        "regID": "ab123456",
+        "requestID": "0000001",
+        "statusCode": 1000,
+        "statusMsg": "Success"
+    }
+    {
+        "regID": "ab234567",
+        "requestID": "0000002",
+        "statusCode": 1000,
+        "statusMsg": "Success"
+    }
+    {
+        "regID": "ab345678",
+        "requestID": "0000002",
+        "statusCode": 1000,
+        "statusMsg": "Success"
+    }]
 }
 </pre>
 </li>
@@ -618,13 +618,13 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <p>The following example shows a response message when the request fails due to malformation:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;results&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 3023,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;error of json mapping exception&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}]
+    "results":
+    [{
+        "regID": "",
+        "requestID": "",
+        "statusCode": 3023,
+        "statusMsg": "error of json mapping exception"
+    }]
 }
 </pre>
 </li>
@@ -632,25 +632,25 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <p>The following example shows a response message when some parts of the multicast request have failed and the others have not:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;results&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;[{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab123456&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 1000,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;Success&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab234567&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 3008,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;error of not registered regID&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;regID&quot;: &quot;ab345678&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;requestID&quot;: &quot;0000001&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusCode&quot;: 3013,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;statusMsg&quot;: &quot;error of impossible to enqueue&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}]
+    "results":
+    [{
+        "regID": "ab123456",
+        "requestID": "0000001",
+        "statusCode": 1000,
+        "statusMsg": "Success"
+    }
+    {
+        "regID": "ab234567",
+        "requestID": "0000001",
+        "statusCode": 3008,
+        "statusMsg": "error of not registered regID"
+    }
+    {
+        "regID": "ab345678",
+        "requestID": "0000001",
+        "statusCode": 3013,
+        "statusMsg": "error of impossible to enqueue"
+    }]
 }
 </pre>
 </li>
@@ -666,7 +666,7 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <h2 id="decorate_noti" name="decorate_noti">Decorating Push Notifications</h2>
 <p>Since Tizen 3.0, you can decorate push notifications you send from the application server to Tizen devices. For example, you can add images and sounds to the notifications. The push service creates a notification using the resources from the application and notifies the user. You can compose the push message using a set of REST APIs.</p>
 <p>To decorate push notifications, you have to understand the notification functions. In addition to the existing <code>message</code> field, more fields are provided. For more details about the functions to use to create a notification, see the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications). When you include a key and value in the message field, the push service creates a notification as the application creates a notification using the Notification API.</p>
-<p>Prepare all the resource files under the <code>/shared/res</code> folder in your application, and you can directly address the resource files. For example, <code>imageTypeIcon=image.png</code> means that the <code>/share/res/image.png</code> image is displayed as an icon in the notification panel. You can perform the same action by calling the <code>notification_set_image(noti, NOTIFICATION_IMAGE_TYPE_ICON, &quot;image.png&quot;)</code> function.</p>
+<p>Prepare all the resource files under the <code>/shared/res</code> folder in your application, and you can directly address the resource files. For example, <code>imageTypeIcon=image.png</code> means that the <code>/share/res/image.png</code> image is displayed as an icon in the notification panel. You can perform the same action by calling the <code>notification_set_image(noti, NOTIFICATION_IMAGE_TYPE_ICON, "image.png")</code> function.</p>
 
 <p>The following table lists the additional key and value pairs for the message field in notifications.</p>
 <p align="center" class="Table"><strong>Table: Additional message field key and value pairs for notification</strong></p>
@@ -682,153 +682,153 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
  <td><code>imageTypeIcon</code></td>
  <td rowspan="18">Image file path <p>(for example, <code>image.png</code>)</p></td>
  <td rowspan="18"><code>notification_set_image()</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeIconForIndicator</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON_FOR_INDICATOR, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON_FOR_INDICATOR, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeIconForLock</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON_FOR_LOCK , &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON_FOR_LOCK , "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeThumbnail</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_THUMBNAIL, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_THUMBNAIL, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeThumbnailForLock</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_THUMBNAIL_FOR_LOCK, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_THUMBNAIL_FOR_LOCK, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeIconSub</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON_SUB, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_ICON_SUB, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeBackground</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BACKGROUND, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BACKGROUND, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeList1</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_1, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_1, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeList2</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_2, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_2, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeList3</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_3, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_3, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeList4</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_4, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_4, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeList5</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_5, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_LIST_5, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeButton1</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_1, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_1, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeButton2</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_2, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_2, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeButton3</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_3, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_3, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeButton4</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_4, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_4, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeButton5</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_5, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_5, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>imageTypeButton6</code></td>
- <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_6, &quot;image.png&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_IMAGE_TYPE_BUTTON_6, "image.png")</code></td>
 </tr>
 <tr>
  <td><code>textTypeTitle</code></td>
  <td rowspan="19">Text message</td>
  <td rowspan="19"><code>notification_set_text()</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_TITLE, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_TITLE, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeContent</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_CONTENT, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_CONTENT, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeContentForDisplayOptionIsOff</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_CONTENT_FOR_DISPLAY_OPTION_IS_OFF, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_CONTENT_FOR_DISPLAY_OPTION_IS_OFF, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeEventCount</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_EVENT_COUNT, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_EVENT_COUNT, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeInfo1</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_1, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_1, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeInfoSub1</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_1, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_1, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeInfo2</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_2, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_2, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeInfoSub2</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_2, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_2, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeInfo3</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_3, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_3, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeInfoSub3</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_3, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_INFO_SUB_3, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeGroupTitle</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_GROUP_TITLE, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_GROUP_TITLE, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeGroupContent</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_GROUP_CONTENT, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_GROUP_CONTENT, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeGroupContentForDisplayOptionIsOff</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_GROUP_CONTENT_FOR_DISPLAY_OPTION_IS_OFF, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_GROUP_CONTENT_FOR_DISPLAY_OPTION_IS_OFF, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeButton1</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_1, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_1, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeButton2</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_2, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_2, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeButton3</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_3, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_3, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeButton4</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_4, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_4, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeButton5</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_5, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_5, "text")</code></td>
 </tr>
 <tr>
  <td><code>textTypeButton6</code></td>
- <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_6, &quot;text&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_TEXT_TYPE_BUTTON_6, "text")</code></td>
 </tr>
 <tr>
  <td><code>soundTypeNone</code></td>
@@ -839,7 +839,7 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <tr>
  <td><code>soundTypeUserData</code></td>
  <td>Sound file path</td>
- <td><code>(noti, NOTIFICATION_SOUND_TYPE_USER_DATA, &quot;sound_path&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_SOUND_TYPE_USER_DATA, "sound_path")</code></td>
 </tr>
 <tr>
  <td><code>vibrationTypeNone</code></td>
@@ -850,7 +850,7 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 <tr>
  <td><code>vibrationTypeUserData</code></td>
  <td>Vibration file path</td>
- <td><code>(noti, NOTIFICATION_VIBRATION_TYPE_USER_DATA, &quot;vib_path&quot;)</code></td>
+ <td><code>(noti, NOTIFICATION_VIBRATION_TYPE_USER_DATA, "vib_path")</code></td>
 </tr>
 <tr>
  <td><code>ledOpOn</code></td>
@@ -951,7 +951,7 @@ appSecret: dYo/o/m11gmWmjs7+5f+2zLNVOc=
 
 <p>The following example shows the message field for an active notification with 3 buttons:</p>
 <pre class="prettyprint">
-&quot;message&quot;:&quot;setAutoRemove=true&amp;
+"message":"setAutoRemove=true&amp;
 textTypeButton1=Connect&amp;textTypeButton2=Hold&amp;textTypeButton3=Cancel&amp;
 eventTypeClickOnButton1=test,connect&amp; eventTypeClickOnButton2=test,hold&amp;
 eventTypeClickOnButton3=test,cancel&amp; eventTypeClickOnIcon=test,icon&amp;
@@ -961,39 +961,39 @@ imageTypeIcon=icon.png&amp;imageTypeIconForIndicator=indicator.png&amp;imageType
 imageTypeIconSub=sub.png &amp;imageTypeBackground=background.png&amp; soundTypeUserData=test.wav&amp;
 setDisplayApplist=notificationTray|ticker|lock|indicator|active|all&amp;lyNotiEventSingle=true&amp;
 textTypeContentForDisplayOptionIsOff=contentoptionoff&amp; textTypeEventCount=34&amp;textTypeInfo1=Test
-notification&amp;setTime=true&amp;setTimeToText=true&quot;
+notification&amp;setTime=true&amp;setTimeToText=true"
 </pre>
 
 <p>The following figure shows a decorated push notification.</p>
 
-<p align="center"><strong>Figure: Decorated notification</strong></p> 
+<p align="center"><strong>Figure: Decorated notification</strong></p>
 <p align="center"><img alt="Decorated notification" src="../../images/push_active_notification.png"/></p>
 
 <p>If the user presses any of the 3 buttons, the <code>app_control()</code> callback of your application is called. Use the following code for further actions:</p>
 <pre class="prettyprint">
-#define KEY_FROM_ACTIVE_NOTICATION &quot;test&quot;
+#define KEY_FROM_ACTIVE_NOTICATION "test"
 
 static void
 app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *value = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(app_control, KEY_FROM_ACTIVE_NOTICATION, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (value) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(value, &quot;connect&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add code here to react to Connect button press */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(value, &quot;hold&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add code here to react to Hold button press */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(value, &quot;cancel&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add code here to react to Cancel button press */
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_extra_data(app_control, APP_CONTROL_DATA_PUSH_LAUNCH_TYPE, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (value) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(value, EXTRA_DATA_FROM_NOTIFICATION))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add code here to react to arriving push messages */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (!strcmp(value, EXTRA_DATA_FROM_REGISTRATION_CHANGE))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add code here to react to registration state changes */
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add code here to react to registration state changes */
+    char *value = NULL;
+    app_control_get_extra_data(app_control, KEY_FROM_ACTIVE_NOTICATION, &amp;value);
+    if (value) {
+        if (!strcmp(value, "connect"))
+            /* Add code here to react to Connect button press */
+        else if (!strcmp(value, "hold"))
+            /* Add code here to react to Hold button press */
+        else if (!strcmp(value, "cancel"))
+            /* Add code here to react to Cancel button press */
+    }
+    app_control_get_extra_data(app_control, APP_CONTROL_DATA_PUSH_LAUNCH_TYPE, &amp;value);
+    if (value) {
+        if (!strcmp(value, EXTRA_DATA_FROM_NOTIFICATION))
+            /* Add code here to react to arriving push messages */
+        else if (!strcmp(value, EXTRA_DATA_FROM_REGISTRATION_CHANGE))
+            /* Add code here to react to registration state changes */
+    }
+    /* Add code here to react to registration state changes */
 }
 </pre>
 <p>Since Tizen 3.0, you can use a notification template to reuse well-decorated notification content without having to define it from scratch each time. When you want to use the same notification multiple times, you can make and save a template for it. Use the <code>notification_save_as_template()</code> function to save the notification handle. For more information on the function, see the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications).</p>
@@ -1015,7 +1015,7 @@ app_control(app_control_h app_control, void *data)
 </table>
 <p>The following example shows how to use the <code>template</code> key in the message field:</p>
 <pre class="prettyprint">
-&quot;message&quot;:&quot;template=noti_template&quot;
+"message":"template=noti_template"
 </pre>
 
 <h2 id="error_codes" name="error_codes">Handling Error Codes</h2>
diff --git a/org.tizen.guides/html/native/migration_guide_n.htm b/org.tizen.guides/html/native/migration_guide_n.htm
index ed3282c..64bcbd9 100644 (file)
--- a/org.tizen.guides/html/native/migration_guide_n.htm
+++ b/org.tizen.guides/html/native/migration_guide_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-  <title>Migration Guide from 2.3 to 2.4</title> 
- </head> 
+  <title>Migration Guide from 2.3 to 2.4</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -38,21 +38,21 @@
                        <li><a href="../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API for Wearable Native</a></li>
                        </ul>
 </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Migration Guide from 2.3 to 2.4</h1> 
-  
+  <h1>Migration Guide from 2.3 to 2.4</h1>
+
 <p>Tizen 2.4 introduces new APIs for applications and modifies the behavior of some APIs to improve the quality of the platform. The following sections define the issues you must consider to make your application conform to Tizen 2.4 Application Framework APIs.</p>
 
 <h2 id="bg_app" name="bg_app">New Background Application Policy</h2>
 <p>Since Tizen 2.4, the application on the background goes into a suspended state.</p>
 <p>In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work on the background. In this case, the application can designate their background category as an allowed category to avoid going into the suspended state.</p>
-<p>For more information, and a list of background categories that allow the application to run on the background, see <a href="app_management/efl_ui_app_n.htm#allow_bg">Background Categories</a>.</p> 
-                       
+<p>For more information, and a list of background categories that allow the application to run on the background, see <a href="app_management/efl_ui_app_n.htm#allow_bg">Background Categories</a>.</p>
+
 <p>You can receive an event when the background application goes to the suspended state. Pass <code>APP_EVENT_SUSPENDED_STATE_CHANGED</code> as <code>event_type</code> to the <code>ui_app_add_event_handler()</code> or <code>service_app_add_event_handler()</code> function to handle the suspended event. You must release the resources properly when your application goes to the suspended state.</p>
- 
- 
+
+
 <h2 id="alarm" name="alarm">Changes in the Alarm API for Reducing Power Consumption</h2>
 <p>Since Tizen 2.4, the Alarm API is changed to reduce the power consumption of the device:</p>
 
@@ -83,7 +83,7 @@
 </ul>
 <p>For more information, see <a href="app_management/app_controls_n.htm#group">Managing Application Groups</a>.</p>
 
- 
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/notification/attach_panel_n.htm b/org.tizen.guides/html/native/notification/attach_panel_n.htm
index 057837e..3d7dc7c 100644 (file)
--- a/org.tizen.guides/html/native/notification/attach_panel_n.htm
+++ b/org.tizen.guides/html/native/notification/attach_panel_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Attach Panel</title> 
- </head> 
+  <title>Attach Panel</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -39,8 +39,8 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
- <h1>Attach Panel</h1> 
-  
+ <h1>Attach Panel</h1>
+
 <p>The attach panel allows the device user to attach various content into an application that contains an attach panel. The user can attach images, take pictures, record voice, and select files on the attach panel.</p>
 
 <p>This feature is supported in mobile applications only.</p>
@@ -56,7 +56,7 @@
 <p align="center"><strong>Figure: Attach panel</strong></p>
 <p align="center"><img alt="Attach panel" src="../../images/attach_panel_area.png" /></p>
 
-<p>The attach panel has UI components and it manages user interactions on its interface. The layout component keeps on the tabbar and scroller components, which are connected to show the content synchronously. The scroller component has pages to display the content of, for example, images, camera, and voice recorder. Some content is shown as a page on the panel, while others can be launched from the panel&#39;s <strong>More</strong> tab using <a href="../app_management/app_controls_n.htm">application controls</a>.</p>
+<p>The attach panel has UI components and it manages user interactions on its interface. The layout component keeps on the tabbar and scroller components, which are connected to show the content synchronously. The scroller component has pages to display the content of, for example, images, camera, and voice recorder. Some content is shown as a page on the panel, while others can be launched from the panel's <strong>More</strong> tab using <a href="../app_management/app_controls_n.htm">application controls</a>.</p>
 
 <p>The attach panel has half and full modes. The mode can be changed by swiping up and down the page.</p>
 <p align="center"><strong>Figure: Attach panel modes</strong></p>
@@ -76,7 +76,7 @@
 <li>Voice
 <p>You can attach a voice recording.</p>
 </li>
-<li><strong>More</strong> tab 
+<li><strong>More</strong> tab
 <p>The <strong>More</strong> tab shows the icons of the applications, for example, video, audio, calendar, contact, myfiles, and video recorder, that can be launched by clicking the applicable icon.</p>
 </li>
 </ul>
@@ -94,14 +94,14 @@
 <p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PANEL__ATTACH__MODULE.html">Attach panel</a> API, the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To add the image viewer and camera UI gadget in the attach panel--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/mediastorage&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To add the camera UI gadget in the attach panel--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/camera&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To add the voice recorder UI gadget in the attach panel--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/recorder&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To launch apps from the More tab--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
+   &lt;!--To add the image viewer and camera UI gadget in the attach panel--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/mediastorage&lt;/privilege&gt;
+   &lt;!--To add the camera UI gadget in the attach panel--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/camera&lt;/privilege&gt;
+   &lt;!--To add the voice recorder UI gadget in the attach panel--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/recorder&lt;/privilege&gt;
+   &lt;!--To launch apps from the More tab--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -116,45 +116,45 @@
 <p>To create and manage an attach panel, you must create variables for a conformant and the attach panel.</p>
 <pre class="prettyprint">
 static struct {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conformant;
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_h attach_panel;
+    Evas_Object *conformant;
+    attach_panel_h attach_panel;
 } s_info =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;.conformant = NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;.attach_panel = NULL,
+    .conformant = NULL,
+    .attach_panel = NULL,
 };
 
 static void
 _create_conformant(Evas_Object *win)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conformant = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;conformant = elm_conformant_add(win);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conformant);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_conformant_set(win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(conformant);
-
-&nbsp;&nbsp;&nbsp;&nbsp;s_info.conformant = conformant;
+    Evas_Object *conformant = NULL;
+    conformant = elm_conformant_add(win);
+    evas_object_size_hint_weight_set(conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(win, conformant);
+    elm_win_conformant_set(win, EINA_TRUE);
+    evas_object_show(conformant);
+
+    s_info.conformant = conformant;
 }
 </pre>
 </li>
 </ol>
 
  <h2 id="create" name="create">Creating an Attach Panel</h2>
- 
+
  <p>To create an attach panel:</p>
 
 <ol>
 <li>Create the attach panel using the <code>attach_panel_create()</code> function.
 <p>When the attach panel is created, its state is hidden by default. To show the created panel, use the <code>attach_panel_show()</code> function.</p>
- 
+
 <pre class="prettyprint">
 attach_panel_h attach_panel = NULL;
 int ret = ATTACH_PANEL_ERROR_NONE;
 
 ret = attach_panel_create(s_info.conformant, &amp;attach_panel);
 if (ret != ATTACH_PANEL_ERROR_NONE || !attach_panel)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 attach_panel_show(attach_panel);
 s_info.attach_panel = attach_panel;
 </pre>
@@ -168,28 +168,28 @@ bundle *extra_data = NULL;
 
 extra_data = bundle_create();
 if (!extra_data)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-bundle_add_str(extra_data, http://tizen.org/appcontrol/data/total_count, &quot;3&quot;);
+bundle_add_str(extra_data, http://tizen.org/appcontrol/data/total_count, "3");
 
 attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_IMAGE, extra_data);
+                                  ATTACH_PANEL_CONTENT_CATEGORY_IMAGE, extra_data);
 attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_CAMERA, NULL);
+                                  ATTACH_PANEL_CONTENT_CATEGORY_CAMERA, NULL);
 attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_VOICE, NULL);
+                                  ATTACH_PANEL_CONTENT_CATEGORY_VOICE, NULL);
 attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_VIDEO, NULL);
+                                  ATTACH_PANEL_CONTENT_CATEGORY_VIDEO, NULL);
 attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_AUDIO, NULL);
+                                  ATTACH_PANEL_CONTENT_CATEGORY_AUDIO, NULL);
 attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR, NULL);
+                                  ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR, NULL);
 attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_CONTACT, NULL);
+                                  ATTACH_PANEL_CONTENT_CATEGORY_CONTACT, NULL);
 attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_MYFILES, NULL);
+                                  ATTACH_PANEL_CONTENT_CATEGORY_MYFILES, NULL);
 attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER, NULL);
+                                  ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER, NULL);
 
 attach_panel_show(s_info.attach_panel);
 bundle_free(extra_data);
@@ -203,55 +203,55 @@ bundle_free(extra_data);
 <pre class="prettyprint">
 static void
 _result_cb(attach_panel_h attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_content_category_e content_category,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_h result, app_control_result_e result_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *data)                                 
+           attach_panel_content_category_e content_category,
+           app_control_h result, app_control_result_e result_code,
+           void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char **select = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int i = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int length = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = APP_CONTROL_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;if (!result)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;if (APP_CONTROL_RESULT_SUCCEEDED != result_code)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_get_extra_data_array(result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;http://tizen.org/appcontrol/data/selected&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;select, &amp;length);
-&nbsp;&nbsp;&nbsp;&nbsp;if (APP_CONTROL_ERROR_NONE != ret || !select)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (; i &lt; length; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;path is %s, %d\n&quot;, select[i], length);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(select[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;free(select);
+    char **select = NULL;
+    int i = 0;
+    int length = 0;
+    int ret = APP_CONTROL_ERROR_NONE;
+    if (!result)
+        /* Error handling */
+    if (APP_CONTROL_RESULT_SUCCEEDED != result_code)
+        /* Error handling */
+    ret = app_control_get_extra_data_array(result,
+                                           "http://tizen.org/appcontrol/data/selected",
+                                           &amp;select, &amp;length);
+    if (APP_CONTROL_ERROR_NONE != ret || !select)
+        /* Error handling */
+
+    for (; i &lt; length; i++) {
+        printf("path is %s, %d\n", select[i], length);
+        free(select[i]);
+    }
+    free(select);
 }
 
 static void
 _event_cb(attach_panel_h attach_panel, attach_panel_event_e event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *event_info, void *data)
+          void *event_info, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;if (!)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;switch (event) {
-&nbsp;&nbsp;&nbsp;&nbsp;case ATTACH_PANEL_EVENT_SHOW_START:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case ATTACH_PANEL_EVENT_SHOW_FINISH:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case ATTACH_PANEL_EVENT_HIDE_START:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case ATTACH_PANEL_EVENT_HIDE_FINISH:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret = 0;
+    if (!)
+        /* Error handling */
+    switch (event) {
+    case ATTACH_PANEL_EVENT_SHOW_START:
+        break;
+    case ATTACH_PANEL_EVENT_SHOW_FINISH:
+        break;
+    case ATTACH_PANEL_EVENT_HIDE_START:
+        break;
+    case ATTACH_PANEL_EVENT_HIDE_FINISH:
+        break;
+    }
 }
 
 static int
 app_control(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_set_result_cb(s_info.attach_panel, _result_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_set_event_cb(s_info.attach_panel, _event_cb, NULL);
+    attach_panel_set_result_cb(s_info.attach_panel, _result_cb, NULL);
+    attach_panel_set_event_cb(s_info.attach_panel, _event_cb, NULL);
 }
 </pre>
 </li>
@@ -263,30 +263,30 @@ app_control(void *data)
 bool visible = false;
 
 if (s_info.attach_panel) {
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_remove_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_IMAGE);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_remove_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_CAMERA);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_remove_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_VOICE);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_remove_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_VIDEO);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_remove_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_AUDIO);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_remove_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_remove_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_CONTACT);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_remove_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_MYFILES);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_remove_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER);
-
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_unset_result_cb(s_info.attach_panel);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_unset_event_cb(s_info.attach_panel);
-
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_destroy(s_info.attach_panel);
-&nbsp;&nbsp;&nbsp;&nbsp;s_info.attach_panel = NULL;
+    attach_panel_remove_content_category(s_info.attach_panel,
+                                         ATTACH_PANEL_CONTENT_CATEGORY_IMAGE);
+    attach_panel_remove_content_category(s_info.attach_panel,
+                                         ATTACH_PANEL_CONTENT_CATEGORY_CAMERA);
+    attach_panel_remove_content_category(s_info.attach_panel,
+                                         ATTACH_PANEL_CONTENT_CATEGORY_VOICE);
+    attach_panel_remove_content_category(s_info.attach_panel,
+                                         ATTACH_PANEL_CONTENT_CATEGORY_VIDEO);
+    attach_panel_remove_content_category(s_info.attach_panel,
+                                         ATTACH_PANEL_CONTENT_CATEGORY_AUDIO);
+    attach_panel_remove_content_category(s_info.attach_panel,
+                                         ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR);
+    attach_panel_remove_content_category(s_info.attach_panel,
+                                         ATTACH_PANEL_CONTENT_CATEGORY_CONTACT);
+    attach_panel_remove_content_category(s_info.attach_panel,
+                                         ATTACH_PANEL_CONTENT_CATEGORY_MYFILES);
+    attach_panel_remove_content_category(s_info.attach_panel,
+                                         ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER);
+
+    attach_panel_unset_result_cb(s_info.attach_panel);
+    attach_panel_unset_event_cb(s_info.attach_panel);
+
+    attach_panel_destroy(s_info.attach_panel);
+    s_info.attach_panel = NULL;
 }
 </pre>
 </li>
@@ -294,8 +294,8 @@ if (s_info.attach_panel) {
 
 
  <h2 id="manage" name="manage">Managing an Attach Panel</h2>
- 
- 
+
+
 <p>To manage an attach panel:</p>
 
 <ul>
@@ -305,19 +305,19 @@ if (s_info.attach_panel) {
 static void
 _reset_bundle(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bundle *extra_data = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = APP_CONTROL_ERROR_NONE;
-
-&nbsp;&nbsp;&nbsp;&nbsp;extra_data = bundle_create();
-&nbsp;&nbsp;&nbsp;&nbsp;if (!extra_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_add_str(extra_data, http://tizen.org/appcontrol/data/total_count, &quot;5&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = attach_panel_set_extra_data(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_IMAGE, extra_data);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ATTACH_PANEL_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;bundle_free(extra_data);
+    bundle *extra_data = NULL;
+    int ret = APP_CONTROL_ERROR_NONE;
+
+    extra_data = bundle_create();
+    if (!extra_data)
+        /* Error handling */
+
+    bundle_add_str(extra_data, http://tizen.org/appcontrol/data/total_count, "5");
+    ret = attach_panel_set_extra_data(s_info.attach_panel,
+                                      ATTACH_PANEL_CONTENT_CATEGORY_IMAGE, extra_data);
+    if (ATTACH_PANEL_ERROR_NONE != ret)
+        /* Error handling */
+    bundle_free(extra_data);
 }
 </pre></li>
 <li>To show or hide the attach panel, use the <code>attach_panel_show()</code> and <code>attach_panel_hide()</code> functions:
@@ -327,15 +327,15 @@ attach_panel_h attach_panel;
 int ret = ATTACH_PANEL_ERROR_NONE;
 
 if (s_info.attach_panel) {
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_hide(s_info.attach_panel);
+    attach_panel_hide(s_info.attach_panel);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = attach_panel_create(s_info.conformant, &amp;attach_panel);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != ATTACH_PANEL_ERROR_NONE || !attach_panel)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_add_content_category(s_info.attach_panel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ATTACH_PANEL_CONTENT_CATEGORY_CAMERA, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_show(attach_panel);
-&nbsp;&nbsp;&nbsp;&nbsp;s_info.attach_panel = attach_panel;
+    ret = attach_panel_create(s_info.conformant, &amp;attach_panel);
+    if (ret != ATTACH_PANEL_ERROR_NONE || !attach_panel)
+        /* Error handling */
+    attach_panel_add_content_category(s_info.attach_panel,
+                                      ATTACH_PANEL_CONTENT_CATEGORY_CAMERA, NULL);
+    attach_panel_show(attach_panel);
+    s_info.attach_panel = attach_panel;
 }
 </pre></li>
 <li>To know whether the attach panel is visible, use the <code>attach_panel_get_visibility()</code> function. It fills the second parameter with a Boolean value that shows whether the panel is visible.
@@ -344,11 +344,11 @@ if (s_info.attach_panel) {
 bool visible = false;
 
 if (s_info.attach_panel) {
-&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_get_visibility(s_info.attach_panel, &amp;visible);
-&nbsp;&nbsp;&nbsp;&nbsp;if (visible)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_hide(s_info.attach_panel);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attach_panel_show(s_info.attach_panel);
+    attach_panel_get_visibility(s_info.attach_panel, &amp;visible);
+    if (visible)
+        attach_panel_hide(s_info.attach_panel);
+    else
+        attach_panel_show(s_info.attach_panel);
 }
 </pre></li></ul>
 
@@ -375,4 +375,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/notification/minicontrol_n.htm b/org.tizen.guides/html/native/notification/minicontrol_n.htm
index 32af396..05938fc 100644 (file)
--- a/org.tizen.guides/html/native/notification/minicontrol_n.htm
+++ b/org.tizen.guides/html/native/notification/minicontrol_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Minicontrol Window</title> 
- </head> 
+  <title>Minicontrol Window</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -58,8 +58,8 @@
        </li>
 </ul>
 
-   <p align="center"><strong>Figure: Minicontrol on a quick panel (left) and lock screen (right)</strong></p> 
-   <p align="center"><img alt="Minicontrol on a quick panel (left) and lock screen (right)" src="../../images/minicontrol-on-quickpanel.png" /> <img alt="Minicontrol on a quick panel (left) and lock screen (right)" src="../../images/minicontrol-on-lockscreen.png" /></p>   
+   <p align="center"><strong>Figure: Minicontrol on a quick panel (left) and lock screen (right)</strong></p>
+   <p align="center"><img alt="Minicontrol on a quick panel (left) and lock screen (right)" src="../../images/minicontrol-on-quickpanel.png" /> <img alt="Minicontrol on a quick panel (left) and lock screen (right)" src="../../images/minicontrol-on-lockscreen.png" /></p>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -68,7 +68,7 @@
 <li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol</a> API, the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/minicontrol.provider&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/minicontrol.provider&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -90,8 +90,8 @@
 <pre class="prettyprint">
 Evas_Object *win;
 
-win = minicontrol_create_window(&quot;mini-sample&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MINICONTROL_TARGET_VIEWER_QUICK_PANEL, NULL);
+win = minicontrol_create_window("mini-sample",
+                                MINICONTROL_TARGET_VIEWER_QUICK_PANEL, NULL);
 evas_object_resize(win, 480, 140);
 evas_object_show(win);
 </pre>
@@ -101,7 +101,7 @@ evas_object_show(win);
 
 <pre class="prettyprint">
 label = elm_label_add(win);
-elm_object_text_set(label, &quot;mini-sample&quot;);
+elm_object_text_set(label, "mini-sample");
 evas_object_resize(label, 480, 140);
 evas_object_show(label);
 </pre></li>
@@ -115,7 +115,7 @@ evas_object_show(label);
 
 <pre class="prettyprint">
 button = elm_button_add(win);
-elm_object_text_set(button, &quot;Click to hide.&quot;);
+elm_object_text_set(button, "Click to hide.");
 evas_object_move(button, 0, 50);
 evas_object_resize(button, 200, 50);
 evas_object_show(button);
@@ -124,7 +124,7 @@ evas_object_show(button);
 <p>Add an event handler callback function:</p>
 
 <pre class="prettyprint">
-evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked_cb, win);
+evas_object_smart_callback_add(button, "clicked", _button_clicked_cb, win);
 </pre></li>
 <li>
 <p>Define the callback function for hiding the quick panel:</p>
@@ -133,13 +133,13 @@ evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked_cb,
 static void
 _button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = data;
-&nbsp;&nbsp;&nbsp;&nbsp;minicontrol_send_event(win, MINICONTROL_PROVIDER_EVENT_REQUEST_HIDE, NULL);
+    Evas_Object *win = data;
+    minicontrol_send_event(win, MINICONTROL_PROVIDER_EVENT_REQUEST_HIDE, NULL);
 }
 </pre></li>
 </ol>
 
-<p align="center"><strong>Figure: Minicontrol button for hiding the quick panel</strong></p> 
+<p align="center"><strong>Figure: Minicontrol button for hiding the quick panel</strong></p>
 <p align="center"><img alt="Minicontrol button for hiding the quick panel" src="../../images/minicontrol.png" /></p>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
@@ -164,4 +164,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/notification/noti_n.htm b/org.tizen.guides/html/native/notification/noti_n.htm
index 61a2f3f..cc87236 100644 (file)
--- a/org.tizen.guides/html/native/notification/noti_n.htm
+++ b/org.tizen.guides/html/native/notification/noti_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -61,7 +61,7 @@
 
 <h1>Notifications</h1>
   <p>An application can use notifications to keep the user informed of important information.</p>
-  
+
 <p>The main features of the Notification API include:</p>
 <ul>
        <li>Creating a notification
@@ -101,15 +101,15 @@
 <li>On-going area
 <p>The on-going area is the application screen area and is only used to display notifications for the currently running application.</p></li></ul>
 
-   <p align="center"><strong>Figure: Notification and on-going areas</strong></p> 
+   <p align="center"><strong>Figure: Notification and on-going areas</strong></p>
    <p align="center"><img alt="Notification and on-going areas" src="../../images/notification.png" /></p>
 
 <h3 id="active_notification" name="active_notification">Active Notifications</h3>
 <p>An active notification is displayed on the upper side of the screen. You can add several buttons for user interaction.</p>
 
-   <p align="center"><strong>Figure: Active notification</strong></p> 
+   <p align="center"><strong>Figure: Active notification</strong></p>
    <p align="center"><img alt="Active notification" src="../../images/active_notification.png" /></p>
-   
+
 <h3 id="indicator" name="indicator">Indicator Notifications</h3>
 <p>The indicator type notification is displayed for a few seconds in the indicator area. Only a simple string and icon can be displayed.</p>
 
@@ -130,16 +130,16 @@
 
 <h2 id="layout" name="layout">Notification Layouts</h2>
 <p>The following notification layouts are provided:</p>
-<ul><li><code>NOTIFICATION_LY_NOTI_EVENT_SINGLE</code> 
+<ul><li><code>NOTIFICATION_LY_NOTI_EVENT_SINGLE</code>
 <p>Layout for a single event notification.</p></li>
-<li><code>NOTIFICATION_LY_NOTI_EVENT_MULTIPLE</code> 
+<li><code>NOTIFICATION_LY_NOTI_EVENT_MULTIPLE</code>
 <p>Layout for a multiple event notification.</p></li>
-<li><code>NOTIFICATION_LY_NOTI_THUMBNAIL</code> 
+<li><code>NOTIFICATION_LY_NOTI_THUMBNAIL</code>
 <p>Layout for a notification displaying images.</p></li>
-<li><code>NOTIFICATION_LY_ONGOING_PROGRESS</code> 
+<li><code>NOTIFICATION_LY_ONGOING_PROGRESS</code>
 <p>Layout for an ongoing notification displaying progress.</p></li></ul>
 
-   <p align="center"><strong>Figure: Notification layouts</strong></p> 
+   <p align="center"><strong>Figure: Notification layouts</strong></p>
    <p align="center"><img alt="Notification layouts" src="../../images/notification_layout_desc.png" /></p>
 
 <h2 id="prerequisites">Prerequisites</h2>
@@ -150,7 +150,7 @@
 <li>To use the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/notification&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/notification&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -160,12 +160,12 @@
 </pre>
 <p>To ensure that a Notification function has been executed properly, make sure that the return is equal to <code>NOTIFICATION_ERROR_NONE</code>.</p></li>
 
-<li>To follow this guide, place an image file in, for example, your application&#39;s shared resource directory. The following variables are used in the code:
+<li>To follow this guide, place an image file in, for example, your application's shared resource directory. The following variables are used in the code:
 <pre class="prettyprint">
 static notification_h notification = NULL;
 char *image_path[BUFLEN];
 char *shared_path = app_get_shared_resource_path();
-snprintf(image_path, BUFLEN, &quot;%stutorial_native_api_application.png&quot;, shared_path);
+snprintf(image_path, BUFLEN, "%stutorial_native_api_application.png", shared_path);
 free(shared_path);
 </pre></li></ol>
 
@@ -178,7 +178,7 @@ free(shared_path);
 <pre class="prettyprint">
 notification = notification_create(NOTIFICATION_TYPE_NOTI);
 if (notification != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Notification was initialized successfully */
+    /* Notification was initialized successfully */
 </pre>
 
 
@@ -194,11 +194,11 @@ if (notification != NULL)
 <p>The second parameter defines the notification type, whose possible values are listed in the <code>_notification_text_type</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga1b932c18e0430b4cd3a09da98d1fb41b">wearable</a> applications).</p>
 <pre class="prettyprint">
 int ret =0;
-ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, &quot;text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, "text",
+                            NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
 
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 <p>To <a href="../internationalization/resource_localization_n.htm">implement multi-language support</a>, define the text string key (<code>msgid</code> field in the <code>.po</code> file) as the fourth parameter.</p>
 </li>
@@ -209,9 +209,9 @@ if (ret != NOTIFICATION_ERROR_NONE)
 <p>The second parameter defines the notification text type in which the timestamp is shown. Its values are listed in the <code>_notification_text_type</code> enumeration.</p>
 <pre class="prettyprint">
 ret = notification_set_time_to_text(notification, NOTIFICATION_TEXT_TYPE_CONTENT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time(NULL));
+                                    time(NULL));
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -222,20 +222,20 @@ if (ret != NOTIFICATION_ERROR_NONE)
 <pre class="prettyprint">
 ret = notification_set_image(notification, NOTIFICATION_IMAGE_TYPE_ICON, image_path);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
 <li id="display">Notification display options:
 
 <p>To set how applications display the notification, use the <code>notification_set_display_applist()</code> function.</p>
-<p>The second parameter defines the notification display option, whose possible values are listed in the <code>_notification_display_applist</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaf7944456661e023a3bac1f430eb680a2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#gaf7944456661e023a3bac1f430eb680a2">wearable</a> applications). You can set multiple options with the &quot;|&quot; pipe operation.</p>
+<p>The second parameter defines the notification display option, whose possible values are listed in the <code>_notification_display_applist</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaf7944456661e023a3bac1f430eb680a2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#gaf7944456661e023a3bac1f430eb680a2">wearable</a> applications). You can set multiple options with the "|" pipe operation.</p>
 <pre class="prettyprint">
 ret = notification_set_display_applist(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| NOTIFICATION_DISPLAY_APP_TICKER);
+                                       NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY
+                                       | NOTIFICATION_DISPLAY_APP_TICKER);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -254,21 +254,21 @@ if (ret != NOTIFICATION_ERROR_NONE)
 <pre class="prettyprint">
 ret = notification_set_led(notification, NOTIFICATION_LED_OP_ON, 100);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_led_time_period(notification, 100, 100);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 <li id="prop">Notification properties:
 
 <p>To set a notification property, use the <code>notification_set_property()</code> function.</p>
-<p>The second parameter defines the notification property, whose possible values are listed in the <code>_notification_property</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">wearable</a> applications). You can set multiple properties with the &quot;|&quot; pipe operation.</p>
+<p>The second parameter defines the notification property, whose possible values are listed in the <code>_notification_property</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#ga70f1e4c6f3d36e09d0a9bdff7d6807c3">wearable</a> applications). You can set multiple properties with the "|" pipe operation.</p>
 <pre class="prettyprint">
 ret = notification_set_property(notification, NOTIFICATION_PROP_DISABLE_APP_LAUNCH);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 <li id="button">Button on the active notification:
@@ -284,18 +284,18 @@ if (ret != NOTIFICATION_ERROR_NONE)
 <pre class="prettyprint">
 noti_err = notification_add_button(noti, NOTIFICATION_BUTTON_1);
 if (noti_err != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 app_control_h app_control = NULL;
 
 app_control_create(&amp;app_control);
-app_control_set_app_id(app_control, &quot;org.tizen.app&quot;);
+app_control_set_app_id(app_control, "org.tizen.app");
 noti_err =
-&nbsp;&nbsp;&nbsp;&nbsp;notification_set_event_handler(noti,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control);
+    notification_set_event_handler(noti,
+                                   NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1,
+                                   app_control);
 if (noti_err != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 app_control_destroy(app_control);
 </pre>
@@ -310,7 +310,7 @@ app_control_destroy(app_control);
 <pre class="prettyprint">
 ret = notification_post(notification);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 
 <h2 id="update" name="update">Updating Notification Content</h2>
@@ -319,7 +319,7 @@ if (ret != NOTIFICATION_ERROR_NONE)
 <pre class="prettyprint">
 ret = notification_update(notification);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 
 <h2 id="delete" name="delete">Deleting a Notification</h2>
@@ -330,13 +330,13 @@ if (ret != NOTIFICATION_ERROR_NONE)
 <pre class="prettyprint">
 ret = notification_delete(notification);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 <li><p>After deleting the notification, free the internal structure data of the notification handle by calling the <code>notification_free()</code> function:</p>
 
 <pre class="prettyprint">ret = notification_free(notification);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li></ol>
 
 <h2 id="bar" name="bar">Displaying the Progress Bar</h2>
@@ -351,22 +351,22 @@ notification_h notification = NULL;
 
 /* Create a notification */
 notification = notification_create(NOTIFICATION_TYPE_ONGOING);
-PRINT_MSG(&quot;notification_create %s&quot;, (notification != NULL) ? &quot;succeed&quot; : &quot;failed&quot;);
+PRINT_MSG("notification_create %s", (notification != NULL) ? "succeed" : "failed");
 
 /* Set the parameters */
-int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, &quot;text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
-PRINT_MSG(&quot;notification_set_text %s&quot;, (ret == 0) ? &quot;succeed&quot; : &quot;failed&quot;);
+int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, "text",
+                                NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+PRINT_MSG("notification_set_text %s", (ret == 0) ? "succeed" : "failed");
 
 ret = notification_set_progress(notification, 0);
-PRINT_MSG(&quot;notification_set_progress %s&quot;, (ret == 0) ? &quot;succeed&quot; : &quot;failed&quot;);
+PRINT_MSG("notification_set_progress %s", (ret == 0) ? "succeed" : "failed");
 
-ret = notification_set_tag(notification, &quot;noti_tag&quot;);
-PRINT_MSG(&quot;notification_set_tag %s&quot;, (ret == 0) ? &quot;succeed&quot; : &quot;failed&quot;);
+ret = notification_set_tag(notification, "noti_tag");
+PRINT_MSG("notification_set_tag %s", (ret == 0) ? "succeed" : "failed");
 
 /* Send the notification */
 ret = notification_post(notification);
-PRINT_MSG(&quot;notification_post %s&quot;, (ret == 0) ? &quot;succeed&quot; : &quot;failed&quot;);
+PRINT_MSG("notification_post %s", (ret == 0) ? "succeed" : "failed");
 
 /* Change the status of the notification */
 ecore_timer_add(1, timeout_func, NULL);
@@ -378,28 +378,28 @@ ecore_timer_add(1, timeout_func, NULL);
 static
 Eina_Bool timeout_func(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;static int i = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;double progress = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;i++;
-&nbsp;&nbsp;&nbsp;&nbsp;notification_h notification = notification_load_by_tag(&quot;noti_tag&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;notification_set_progress(notification, ((double) i / 10.0));
-&nbsp;&nbsp;&nbsp;&nbsp;notification_get_progress(notification, &amp;progress);
-&nbsp;&nbsp;&nbsp;&nbsp;notification_update(notification);
+    static int i = 0;
+    double progress = 0;
+    i++;
+    notification_h notification = notification_load_by_tag("noti_tag");
+    notification_set_progress(notification, ((double) i / 10.0));
+    notification_get_progress(notification, &amp;progress);
+    notification_update(notification);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;NOTIFICATION&quot;, &quot;Progress: %f\n&quot;, progress);
+    dlog_print(DLOG_INFO, "NOTIFICATION", "Progress: %f\n", progress);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (10 == i) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;NOTIFICATION&quot;, &quot;End of awaiting!n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification_delete(notification);
+    if (10 == i) {
+        dlog_print(DLOG_INFO, "NOTIFICATION", "End of awaiting!n");
+        notification_delete(notification);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_DONE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return ECORE_CALLBACK_DONE;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
+    return ECORE_CALLBACK_PASS_ON;
 }
 </pre></li></ol>
 
-    <p align="center"><strong>Figure: Progress bar</strong></p> 
+    <p align="center"><strong>Figure: Progress bar</strong></p>
    <p align="center"><img alt="Progress bar" src="../../images/notification_bar_sd.png" /></p>
 
 <h2 id="input_box" name="input_box">Creating an Active Notification with Text Input</h2>
@@ -415,119 +415,119 @@ app_control_h app_control = NULL;
 /* Create a new notification */
 notification = notification_create(NOTIFICATION_TYPE_NOTI);
 if (noti == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Set notification attributes */
-int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, &quot;text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, "text",
+                                NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_image(notification, NOTIFICATION_IMAGE_TYPE_ICON, image_path);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_add_button(notification, NOTIFICATION_BUTTON_1);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_BUTTON_1, &quot;button1&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_BUTTON_1, "button1",
+                                NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_add_button(notification, NOTIFICATION_BUTTON_2);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_BUTTON_2, &quot;button2&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_BUTTON_2, "button2",
+                                NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_add_button(notification, NOTIFICATION_BUTTON_3);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_BUTTON_3, &quot;button3&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_BUTTON_3, "button3",
+                                NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_display_applist(notification, NOTIFICATION_DISPLAY_APP_ACTIVE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Button 1 */
 app_control = NULL;
 
 ret = app_control_create(&amp;app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = app_control_set_app_id(app_control, &quot;appid&quot;);
+ret = app_control_set_app_id(app_control, "appid");
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_event_handler(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control);
+                                     NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1,
+                                     app_control);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = app_control_destroy(app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Button 2 */
 app_control = NULL;
 
 ret = app_control_create(&amp;app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = app_control_set_app_id(app_control, &quot;appid&quot;);
+ret = app_control_set_app_id(app_control, "appid");
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_event_handler(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control);
+                                     NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_2,
+                                     app_control);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = app_control_destroy(app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Button 3 */
 app_control = NULL;
 
 ret = app_control_create(&amp;app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = app_control_set_app_id(app_control, &quot;appid&quot;);
+ret = app_control_set_app_id(app_control, "appid");
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_event_handler(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_3,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control);
+                                     NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_3,
+                                     app_control);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = app_control_destroy(app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Post a notification */
 ret = notification_post(notification);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (notification)
-&nbsp;&nbsp;&nbsp;&nbsp;notification_free(notification);
+    notification_free(notification);
 </pre></li>
 
 <li>To allow the user to reply to the active notification directly, set a text input field.
@@ -537,42 +537,42 @@ if (notification)
 
 ret = notification_set_text_input(notification, 160);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_text(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_TEXT_TYPE_TEXT_INPUT_PLACEHOLDER,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Text message&quot;, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_VARIABLE_TYPE_NONE);
+                            NOTIFICATION_TEXT_TYPE_TEXT_INPUT_PLACEHOLDER,
+                            "Text message", NULL,
+                            NOTIFICATION_VARIABLE_TYPE_NONE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_text(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_TEXT_TYPE_TEXT_INPUT_BUTTON,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Send&quot;, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_VARIABLE_TYPE_NONE);
+                            NOTIFICATION_TEXT_TYPE_TEXT_INPUT_BUTTON,
+                            "Send", NULL,
+                            NOTIFICATION_VARIABLE_TYPE_NONE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Text input button */
 app_control = NULL;
 
 ret = app_control_create(&amp;app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = app_control_set_app_id(app_control, &quot;appid&quot;);
+ret = app_control_set_app_id(app_control, "appid");
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_event_handler(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_EVENT_TYPE_CLICK_ON_TEXT_INPUT_BUTTON,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control);
+                                     NOTIFICATION_EVENT_TYPE_CLICK_ON_TEXT_INPUT_BUTTON,
+                                     app_control);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = app_control_destroy(app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Post a notification */
 </pre></li></ol>
@@ -593,114 +593,114 @@ app_control_h app_control = NULL;
 /* Create a new notification */
 notification = notification_create(NOTIFICATION_TYPE_NOTI);
 if (noti == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Set notification attributes */
-int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, &quot;text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, "text",
+                                NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_image(notification, NOTIFICATION_IMAGE_TYPE_ICON, image_path);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_image(notification, NOTIFICATION_IMAGE_TYPE_BACKGROUND,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_path);
+                             image_path);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_sound(notification, NOTIFICATION_SOUND_TYPE_USER_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_path);
+                             sound_path);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_led(notification, NOTIFICATION_LED_OP_ON, 100);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_led_time_period(notification, 100, 100);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_display_applist(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| NOTIFICATION_DISPLAY_APP_ACTIVE);
+                                       NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY
+                                       | NOTIFICATION_DISPLAY_APP_ACTIVE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_add_button(notification, NOTIFICATION_BUTTON_1);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_BUTTON_1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;accept&quot;, NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+                            "accept", NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_add_button(notification, NOTIFICATION_BUTTON_2);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_BUTTON_2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;cancel&quot;, NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+                            "cancel", NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Button 1 */
 app_control = NULL;
 
 ret = app_control_create(&amp;app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = app_control_set_app_id(app_control, &quot;appid&quot;);
+ret = app_control_set_app_id(app_control, "appid");
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_event_handler(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control);
+                                     NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1,
+                                     app_control);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = app_control_destroy(app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Button 2 */
 app_control = NULL;
 
 ret = app_control_create(&amp;app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-ret = app_control_set_app_id(app_control, &quot;appid&quot;);
+ret = app_control_set_app_id(app_control, "appid");
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = notification_set_event_handler(notification,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control);
+                                     NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_2,
+                                     app_control);
 if (ret != NOTIFICATION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = app_control_destroy(app_control);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 <li><p>To save the notification handle as a template and define a name for the template, use the <code>notification_save_as_template()</code> function:</p>
 <pre class="prettyprint">
-ret = notification_save_as_template(notification, &quot;CALL_ACCEPT&quot;);
+ret = notification_save_as_template(notification, "CALL_ACCEPT");
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 <li><p>To use the template when creating a new notification, call the <code>notification_create_from_template()</code> function:</p>
 <pre class="prettyprint">
 notification_h notification = NULL;
-notification = notification_create_from_template(&quot;CALL_ACCEPT&quot;)
+notification = notification_create_from_template("CALL_ACCEPT")
 if (noti == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li></ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/notification/notification_cover_n.htm b/org.tizen.guides/html/native/notification/notification_cover_n.htm
index c8d7937..3312e84 100644 (file)
--- a/org.tizen.guides/html/native/notification/notification_cover_n.htm
+++ b/org.tizen.guides/html/native/notification/notification_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Notifications and Content Sharing</title>  
+       <title>Notifications and Content Sharing</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 3.0 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Notifications and Content Sharing</h1>
@@ -49,7 +49,7 @@
 
 <p>A minicontrol is a small application view that can be shown in other applications, or the quick panel or lock screen. You can create a minicontrol and display it in the quick panel or lock screen. You can also host minicontrols in your application.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/performance/performance_cover_n.htm b/org.tizen.guides/html/native/performance/performance_cover_n.htm
index b9ebb64..3789ffc 100644 (file)
--- a/org.tizen.guides/html/native/performance/performance_cover_n.htm
+++ b/org.tizen.guides/html/native/performance/performance_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Performance</title>  
+       <title>Performance</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 3.0 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Performance</h1>
@@ -41,7 +41,7 @@
 
 <p>You can use the T-trace tool to insert tracepoints in the application and perform trace operations. The tracepoints allow the framework to write application traces to the system trace buffer to align them with the T-trace traces from the Tizen platform.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/performance/tracepoints_n.htm b/org.tizen.guides/html/native/performance/tracepoints_n.htm
index 7ac478a..15b38ff 100644 (file)
--- a/org.tizen.guides/html/native/performance/tracepoints_n.htm
+++ b/org.tizen.guides/html/native/performance/tracepoints_n.htm
@@ -20,18 +20,18 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
                        <li>Tizen 3.0 and Higher for Wearable</li>
-               </ul>   
+               </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#insert">Inserting Tracepoints</a></li>
-               </ul>   
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace API for Mobile Native</a></li>
@@ -46,11 +46,11 @@
 
 <p>You can perform trace operations in Tizen native applications with the <a href="../../../../org.tizen.studio/html/native_tools/t_trace_n.htm">T-trace tool</a>. The tool allows you to generate traces and visualize them.</p>
 
-<p>With the T-trace API, you can <a href="#insert">create custom tracepoints in your application</a>. The tracepoints allow the framework to write application traces to the system trace buffer to align them with the T-trace traces from the Tizen platform.</p> 
-       
+<p>With the T-trace API, you can <a href="#insert">create custom tracepoints in your application</a>. The tracepoints allow the framework to write application traces to the system trace buffer to align them with the T-trace traces from the Tizen platform.</p>
+
        <p align="center"><strong>Figure: T-trace architecture</strong></p>
-       <p align="center"> 
-       <img src="../../images/trace.png" alt="T-trace architecture" /> 
+       <p align="center">
+       <img src="../../images/trace.png" alt="T-trace architecture" />
        </p>
 
 <p>The following T-trace function types are provided for application-level tracepoints:</p>
@@ -58,8 +58,8 @@
        <li>Synchronous tracing functions: <code>trace_begin()</code> and <code>trace_end()</code></li>
        <li>Asynchronous tracing functions: <code>trace_async_begin()</code> and <code>trace_async_end()</code></li>
        <li>Counter tracking function: <code>trace_update_counter()</code></li>
-</ul>   
-       
+</ul>
+
 <h2 id="prerequisites">Prerequisites</h2>
 
 <p>To enable your application to use the T-trace functionality:</p>
@@ -79,7 +79,7 @@
 </ol>
 
 
-<h2 id="insert" name="insert">Inserting Tracepoints</h2> 
+<h2 id="insert" name="insert">Inserting Tracepoints</h2>
 
 <p>To insert tracepoints:</p>
 
@@ -91,12 +91,12 @@
 int
 main(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int integer = 12;
-&nbsp;&nbsp;&nbsp;&nbsp;trace_begin(&quot;event name: %d&quot;, integer);
+    int integer = 12;
+    trace_begin("event name: %d", integer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;trace_end();
+    trace_end();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
@@ -107,33 +107,33 @@ main(void)
 void
 function1()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int cookies_f1 = 123;
+    int cookies_f1 = 123;
 
-&nbsp;&nbsp;&nbsp;&nbsp;trace_async_begin(cookies_f1, &quot;event name&quot;);
+    trace_async_begin(cookies_f1, "event name");
 }
 
 void
 function2()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int cookies_f2 = 123;
+    int cookies_f2 = 123;
 
-&nbsp;&nbsp;&nbsp;&nbsp;trace_async_end(cookies_f2, &quot;event name&quot;);
+    trace_async_end(cookies_f2, "event name");
 
 }
 </pre>
 </li>
 <li>Track the trace counter.
-<p>To track the change of an integer counter on your application, use the <code>trace_update_counter()</code> function:</p> 
+<p>To track the change of an integer counter on your application, use the <code>trace_update_counter()</code> function:</p>
 <pre class="prettyprint">
 void
 function2(int count)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;trace_update_counter(count, &quot;event_name&quot;);
+    trace_update_counter(count, "event_name");
 }
 </pre>
 </li>
 </ul>
-       
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/personal/account_n.htm b/org.tizen.guides/html/native/personal/account_n.htm
index 8c31402..4ac3f9c 100644 (file)
--- a/org.tizen.guides/html/native/personal/account_n.htm
+++ b/org.tizen.guides/html/native/personal/account_n.htm
@@ -28,7 +28,7 @@
         <p class="toc-title">Content</p>
         <ul class="toc">
                        <li><a href="#provider">Account Providers</a></li>
-                       <li><a href="#appcontrol">Account Application Control</a></li>                  
+                       <li><a href="#appcontrol">Account Application Control</a></li>
                        <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#add">Creating and Managing an Account</a></li>
                        <li>Information retrieval
@@ -59,39 +59,39 @@
 
   <h1>Account Management</h1>
 
- <p>An account is a collection of information representing the user of a specific provider.</p> 
- 
+ <p>An account is a collection of information representing the user of a specific provider.</p>
+
   <p>The main features of the Account Manager API include:
-</p> 
-  <ul> 
+</p>
+  <ul>
    <li>Creating and managing accounts
    <p>You can <a href="#add">create an account</a>, set its properties, and insert it to the database.</p>
    <p>You can also <a href="#secret">manage the account secrecy level</a> and <a href="#remove">remove accounts</a>.</p>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         To add, update, or remove an account, you must <a href="#provider">register your account provider</a> for all your applications belonging to the same package.
     </div>
-       </li> 
+       </li>
    <li>Retrieving account information
    <p>You can <a href="#get">retrieve information for each existing account</a> and implement a callback function.</p>
    <p>You can also get accounts based on a <a href="#retrieve">specific account provider package name</a>, or account providers based on a <a href="#capability">specific capability</a>.</p></li>
    <li>Receiving account change notifications</li>
    <li>Modifying account properties
-   <p>The <code>account.h</code> header file handles account-related information. You can <a href="#queries">query the account details</a> with database queries, <a href="#type">retrieve the account type</a>, and <a href="#update">update the account information</a>.</p> 
+   <p>The <code>account.h</code> header file handles account-related information. You can <a href="#queries">query the account details</a> with database queries, <a href="#type">retrieve the account type</a>, and <a href="#update">update the account information</a>.</p>
    <p>The following table lists the account properties that can be modified.</p>
-  <p align="center" class="Table"><strong>Table: Account properties</strong></p> 
-  <table id="account_properties" border="1"> 
-   <tbody> 
-    <tr> 
-     <th>Account property</th> 
-     <th>Data type</th> 
+  <p align="center" class="Table"><strong>Table: Account properties</strong></p>
+  <table id="account_properties" border="1">
+   <tbody>
+    <tr>
+     <th>Account property</th>
+     <th>Data type</th>
         <th>Mandatory</th>
-        <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>User name</td> 
+        <th>Description</th>
+    </tr>
+    <tr>
+     <td>User name</td>
         <td><code>String</code></td>
         <td>Yes</td>
      <td>Identity of an account.
@@ -136,97 +136,97 @@
          <td>No</td>
      <td>Domain name of an account.
         </td>
-    </tr>  
+    </tr>
        <tr>
-     <td>Access token</td> 
+     <td>Access token</td>
         <td><code>String</code></td>
          <td>No</td>
      <td>Access token of an account.
         </td>
-    </tr>  
+    </tr>
        <tr>
-     <td>Auth type</td> 
+     <td>Auth type</td>
         <td><code>Integer</code></td>
          <td>No</td>
      <td>Authentication type, such as oauth or xauth.
         </td>
-    </tr>  
+    </tr>
        <tr>
-     <td>Capability</td> 
+     <td>Capability</td>
         <td>Key-value <code>string</code>-<code>integer</code> pairs</td>
          <td>No</td>
      <td>Capability of an account.
-       </td> 
-    </tr>  
+       </td>
+    </tr>
        <tr>
-     <td>Secret</td> 
+     <td>Secret</td>
         <td><code>Integer</code></td>
          <td>No</td>
      <td>The secret value is used to decide whether the account is shown on the Accounts screen in the Setting application.
         </td>
-    </tr>  
+    </tr>
        <tr>
-     <td>Sync support</td> 
+     <td>Sync support</td>
         <td><code>Integer</code></td>
          <td>No</td>
      <td>Current synchronization status.</td>
     </tr>
        <tr>
-     <td>Source</td> 
+     <td>Source</td>
      <td><code>String</code></td>
          <td>No</td>
        <td>Source of an account.
         </td>
     </tr>
        <tr>
-     <td>User text</td> 
+     <td>User text</td>
         <td><code>String</code></td>
          <td>No</td>
      <td>String array which you can use freely.
         </td>
-    </tr>  
+    </tr>
        <tr>
-     <td>User int</td> 
+     <td>User int</td>
         <td><code>Integer</code></td>
          <td>No</td>
      <td>Integer array which you can use freely.
-        </td> 
+        </td>
     </tr>
        <tr>
-     <td>Custom</td> 
+     <td>Custom</td>
         <td>Key-value <code>string</code> pairs</td>
          <td>No</td>
      <td>Key-value pairs which you can use freely.
         </td>
     </tr>
-   </tbody> 
+   </tbody>
   </table>
-</li>  </ul> 
-
-
-  
-    
-<h2 id="provider" name="provider">Account Providers</h2> 
-  <p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides the user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p> 
-  <p>To register an account provider, define the account provider information in the <strong>Account</strong> tab of the manifest editor, as described in the following table, and implement the <a href="#appcontrol">account application control</a>.</p> 
-   <p align="center" class="Table"><strong>Table: Account provider properties</strong></p> 
-  <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th>Account property</th> 
-     <th>Data type</th> 
-        <th>Mandatory</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>Multiple accounts support</td> 
-     <td><code>bool</code> </td> 
+</li>  </ul>
+
+
+
+
+<h2 id="provider" name="provider">Account Providers</h2>
+  <p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides the user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p>
+  <p>To register an account provider, define the account provider information in the <strong>Account</strong> tab of the manifest editor, as described in the following table, and implement the <a href="#appcontrol">account application control</a>.</p>
+   <p align="center" class="Table"><strong>Table: Account provider properties</strong></p>
+  <table border="1">
+   <tbody>
+    <tr>
+     <th>Account property</th>
+     <th>Data type</th>
+        <th>Mandatory</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td>Multiple accounts support</td>
+     <td><code>bool</code> </td>
         <td>Yes</td>
-     <td>Indicates whether multiple accounts are supported.</td> 
-    </tr> 
-    <tr> 
-     <td>Icon</td> 
-     <td><code>String</code></td> 
+     <td>Indicates whether multiple accounts are supported.</td>
+    </tr>
+    <tr>
+     <td>Icon</td>
+     <td><code>String</code></td>
         <td>Yes</td>
      <td>File path of the account provider icon.
         <p>The icon size is:</p>
@@ -234,11 +234,11 @@
                <li>72 x 72 for Xhigh (HD)</li>
                <li>48 x 48 for High (WVGA)</li>
         </ul>
-        <p>Since the icon is used in <strong>Settings &gt; Accounts</strong>, place the icon in a shared directory.</p></td> 
-    </tr> 
-    <tr> 
-     <td>Small icon</td> 
-     <td><code>String</code></td> 
+        <p>Since the icon is used in <strong>Settings &gt; Accounts</strong>, place the icon in a shared directory.</p></td>
+    </tr>
+    <tr>
+     <td>Small icon</td>
+     <td><code>String</code></td>
         <td>Yes</td>
      <td>File path of the account provider icon.
         <p>The icon size is:</p>
@@ -246,17 +246,17 @@
                <li>45 x 45 for Xhigh (HD)</li>
                <li>30 x 30 for High (WVGA)</li>
         </ul>
-        <p>Since the small icon is used in other applications, place the icon in a shared directory.</p></td> 
-    </tr> 
-    <tr> 
-     <td>Display name</td> 
-     <td><code>String</code></td> 
+        <p>Since the small icon is used in other applications, place the icon in a shared directory.</p></td>
+    </tr>
+    <tr>
+     <td>Display name</td>
+     <td><code>String</code></td>
         <td>Yes</td>
-     <td>Display name of the account provider.</td> 
-    </tr> 
-    <tr> 
-     <td>Capabilities</td> 
-     <td><code>String</code></td> 
+     <td>Display name of the account provider.</td>
+    </tr>
+    <tr>
+     <td>Capabilities</td>
+     <td><code>String</code></td>
         <td>No</td>
      <td>Capability of the account provider.
          <p>Capability can be a liaison between an account application and another application. If an account application registers a capability in the manifest file, other applications know that the account application has the capability. And if an account application gives an account a capability, other applications know that the account has the capability.</p>
@@ -264,56 +264,56 @@
 
       <ul>
        <li>Contact capability:
-          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_CONTACT or &quot;http://tizen.org/account/capability/contact&quot;</code></p>
+          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_CONTACT or "http://tizen.org/account/capability/contact"</code></p>
            <p>If you register this capability in the manifest file, the user using the contact application can see a list of accounts with the account of your service in the contact application.</p>
-          </li> 
+          </li>
        <li>Calendar capability:
-          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_CALENDAR or &quot;http://tizen.org/account/capability/calendar&quot;</code></p>
+          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_CALENDAR or "http://tizen.org/account/capability/calendar"</code></p>
            <p>If you register this capability in the manifest file, the user using the calendar application can see a list of accounts with the account of your service in the calendar application.</p>
           </li>
        <li>Email capability:
-          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_EMAIL or &quot;http://tizen.org/account/capability/email&quot;</code></p>
+          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_EMAIL or "http://tizen.org/account/capability/email"</code></p>
           </li>
        <li>Photo capability:
-          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_PHOTO or &quot;http://tizen.org/account/capability/photo&quot;</code></p>
+          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_PHOTO or "http://tizen.org/account/capability/photo"</code></p>
           </li>
        <li>Video capability:
-          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_VIDEO or &quot;http://tizen.org/account/capability/video&quot;</code></p>
+          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_VIDEO or "http://tizen.org/account/capability/video"</code></p>
           </li>
        <li>Music capability:
-          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_MUSIC or &quot;http://tizen.org/account/capability/music&quot;</code></p>
+          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_MUSIC or "http://tizen.org/account/capability/music"</code></p>
           </li>
        <li>Document capability:
-          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_DOCUMENT or &quot;http://tizen.org/account/capability/document&quot;</code></p>
+          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_DOCUMENT or "http://tizen.org/account/capability/document"</code></p>
           </li>
        <li>Message capability:
-          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_MESSAGE or &quot;http://tizen.org/account/capability/message&quot;</code></p>
+          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_MESSAGE or "http://tizen.org/account/capability/message"</code></p>
           </li>
        <li>Game capability:
-          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_GAME or &quot;http://tizen.org/account/capability/game&quot;</code></p>
+          <p><code>ACCOUNT_SUPPORTS_CAPABILITY_GAME or "http://tizen.org/account/capability/game"</code></p>
           </li>
-</ul>    
-       </td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-  <p>If the application has defined the account provider information and implements the appcontrol for the account provider, the account provider is automatically registered when the application is installed.</p>   
-  
-<h2 id="appcontrol" name="appcontrol">Account Application Control</h2> 
-  <p>The account application control, which allows the user to add and configure accounts, must be implemented in all applications that define an account provider. You are not required to define the application control information in the <strong>Application Control</strong> tab of the manifest editor to <a href="#screen">add the application on the <strong>Account</strong> screen</a>.</p> 
-  
-  <p>This application control supports the <code>http://tizen.org/appcontrol/operation/account/add</code> and <code>http://tizen.org/appcontrol/operation/account/configure</code> operations.</p> 
- 
+</ul>
+       </td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>If the application has defined the account provider information and implements the appcontrol for the account provider, the account provider is automatically registered when the application is installed.</p>
+
+<h2 id="appcontrol" name="appcontrol">Account Application Control</h2>
+  <p>The account application control, which allows the user to add and configure accounts, must be implemented in all applications that define an account provider. You are not required to define the application control information in the <strong>Application Control</strong> tab of the manifest editor to <a href="#screen">add the application on the <strong>Account</strong> screen</a>.</p>
+
+  <p>This application control supports the <code>http://tizen.org/appcontrol/operation/account/add</code> and <code>http://tizen.org/appcontrol/operation/account/configure</code> operations.</p>
+
   <h3 id="signin" name="signin">ACCOUNT_OPERATION_SIGNIN Operation</h3>
   <p>The <code>http://tizen.org/appcontrol/operation/account/add</code> operation enables the user to add a new account for a specific account provider. With the operation, the login page for the specific account provider can be displayed. In <strong>Settings &gt; Accounts</strong>, if the account provider is clicked for adding a new account, this operation is launched.</p>
 
   <p>You have to define the <code>app_control_cb()</code> callback and register it to <code>ui_app_lifecycle_callback::app_control</code>.</p>
-  
-  <p>The results of the operation are returned in the <code>app_control_get_operation()</code> event handler.</p> 
-  <p>The following table shows the <code>ACCOUNT_OPERATION_SIGNIN</code> (<code>http://tizen.org/appcontrol/operation/account/add</code>) operation.</p> 
-   <p align="center" class="Table"><strong>Table: ACCOUNT_OPERATION_SIGNIN operation</strong></p> 
-  <table border="1"> 
+
+  <p>The results of the operation are returned in the <code>app_control_get_operation()</code> event handler.</p>
+  <p>The following table shows the <code>ACCOUNT_OPERATION_SIGNIN</code> (<code>http://tizen.org/appcontrol/operation/account/add</code>) operation.</p>
+   <p align="center" class="Table"><strong>Table: ACCOUNT_OPERATION_SIGNIN operation</strong></p>
+  <table border="1">
     <tbody>
     <tr>
      <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
@@ -325,16 +325,16 @@
     </tr>
    </tbody>
 
-  </table> 
+  </table>
   <h3 id="CONFIG" name="CONFIG">ACCOUNT_OPERATION_VIEW Operation</h3>
-  <p>The <code>http://tizen.org/appcontrol/operation/account/configure</code> operation enables the user to set account information, such as synchronization settings. The delete button must be included for removing accounts.</p> 
+  <p>The <code>http://tizen.org/appcontrol/operation/account/configure</code> operation enables the user to set account information, such as synchronization settings. The delete button must be included for removing accounts.</p>
   <p>In <strong>Settings &gt; Accounts</strong>, if the specific account is clicked for setting the account information, this operation is launched.</p>
   <p> You have to define the <code>app_control_cb()</code> callback and register it to <code>ui_app_lifecycle_callback::app_control</code>. </p>
   <p>The results of the operation are returned in the <code>app_control_get_operation()</code> event handler.</p>
   <p>The following table shows the <code>ACCOUNT_OPERATION_VIEW</code> (<code>http://tizen.org/appcontrol/operation/account/configure</code>) operation.</p>
-  
-   <p align="center" class="Table"><strong>Table: ACCOUNT_OPERATION_VIEW operation</strong></p> 
-  <table border="1"> 
+
+   <p align="center" class="Table"><strong>Table: ACCOUNT_OPERATION_VIEW operation</strong></p>
+  <table border="1">
     <tbody>
     <tr>
      <th style="text-align:center;margin-left:auto;margin-right:auto;">Operation</th>
@@ -345,7 +345,7 @@
      <td>Account ID for setting account information.</td>
     </tr>
    </tbody>
-  </table>       
+  </table>
 
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To enable your application to use the account management functionality:</p>
@@ -354,8 +354,8 @@
 <p>To use the Account Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/account.read&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/account.write&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/account.read&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/account.write&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -366,7 +366,7 @@
 <p>To ensure that an Account Manager function has been executed properly, make sure that the return is equal to <code>ACCOUNT_ERROR_NONE</code>.</p>
 </li>
 <li><p>Declare the necessary global variables, including the account handle:</p>
- 
+
 <pre class="prettyprint">
 #include &lt;stdio.h&gt;
 #include &lt;time.h&gt;
@@ -401,11 +401,11 @@ ret = account_create(&amp;account);
 <li>When the account is created, you can set account properties, such as name, display name, domain name, and email address:
 
 <pre class="prettyprint">
-char* account_name = &quot;Marcus&quot;;
-char* display_name = &quot;Marcus_display&quot;;
-char* domain_name = &quot;Marcus_domain&quot;;
-char* email_address = &quot;marcus@example.com&quot;;
-char* image_path = &quot;image_path&quot;;
+char* account_name = "Marcus";
+char* display_name = "Marcus_display";
+char* domain_name = "Marcus_domain";
+char* email_address = "marcus@example.com";
+char* image_path = "image_path";
 
 ret = account_set_user_name(account, account_name);
 
@@ -434,7 +434,7 @@ ret = account_insert_to_db(account, &amp;account_id);
 <ol>
 <li>Use the <code>account_get_total_count_from_db()</code> function to get the total number of inserted records.
 <p>To get individual records, use the <code>account_foreach_account_from_db()</code> function, which iterates through all the records and invokes a callback function for each account.</p>
- 
+
 <pre class="prettyprint">
 int total_count = -1;
 ret = account_get_total_count_from_db(&amp;total_count);
@@ -451,46 +451,46 @@ ret = account_foreach_account_from_db(on_account_read, NULL);
 static bool
 on_account_read(account_h account, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *display_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *icon_path = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the account ID */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = account_get_account_id(account, &amp;account_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the user name */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = account_get_user_name(account, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;name: %s&quot;, name);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the display name */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = account_get_display_name(account, &amp;display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;display_name: %s&quot;, display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the icon path */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = account_get_icon_path(account, &amp;icon_path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != ACCOUNT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;icon_path: %s&quot;, icon_path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;free(name);
-&nbsp;&nbsp;&nbsp;&nbsp;free(display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;free(icon_path);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    char *name = NULL;
+    char *display_name = NULL;
+    char *icon_path = NULL;
+    /* Get the account ID */
+    ret = account_get_account_id(account, &amp;account_id);
+    if (ret != ACCOUNT_ERROR_NONE) {
+        /* Error handling */
+
+        return false;
+    }
+    /* Get the user name */
+    ret = account_get_user_name(account, &amp;name);
+    if (ret != ACCOUNT_ERROR_NONE) {
+        /* Error handling */
+
+        return false;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "name: %s", name);
+    /* Get the display name */
+    ret = account_get_display_name(account, &amp;display_name);
+    if (ret != ACCOUNT_ERROR_NONE) {
+        /* Error handling */
+
+        return false;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "display_name: %s", display_name);
+    /* Get the icon path */
+    ret = account_get_icon_path(account, &amp;icon_path);
+    if (ret != ACCOUNT_ERROR_NONE) {
+        /* Error handling */
+
+        return false;
+    }
+    dlog_print(DLOG_INFO, LOG_TAG, "icon_path: %s", icon_path);
+
+    free(name);
+    free(display_name);
+    free(icon_path);
+
+    return true;
 }
 </pre>
 </li>
@@ -505,13 +505,13 @@ on_account_read(account_h account, void *user_data)
 static bool
 account_callback(account_h account, void* user_data) /* account_cb() callback */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Called once for each account in the database */
+    /* Called once for each account in the database */
 }
 </pre></li>
    <li>Retrieve the accounts of a specific account provider using the <code>account_query_account_by_package_name()</code> function, and specifying the callback for getting account data and the package name of the account provider:
 <pre class="prettyprint">
 int ret = -1;
-char* package_name = &quot;package_name&quot;;
+char* package_name = "package_name";
 ret = account_query_account_by_package_name(account_callback, package_name, NULL);
 </pre></li>
   </ol>
@@ -526,15 +526,15 @@ ret = account_query_account_by_package_name(account_callback, package_name, NULL
 static bool
 account_type_callback(account_type_h account_type, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Called once for each account type in the database */
+    /* Called once for each account type in the database */
 }
 </pre>
 </li>
-   
+
    <li>Retrieve the account providers of a specific capability by using the <code>account_type_query_by_provider_feature()</code> function, and specifying the callback for getting account providers:
 <pre class="prettyprint">
 int ret = -1;
-char* capability = &quot;http://tizen.org/account/capability/contact&quot;;
+char* capability = "http://tizen.org/account/capability/contact";
 
 ret = account_type_create(&amp;account_type);
 
@@ -546,7 +546,7 @@ account_type_query_by_provider_feature(account_type_callback, capability, NULL);
 
 <p>To remove an account, use the <code>account_delete_from_db_by_id()</code>, <code>account_delete_from_db_by_user_name()</code>, or <code>account_delete_from_db_by_package_name()</code> function. They all remove a given account record.</p>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         To get the ID needed as a parameter of the <code>account_delete_from_db_by_id()</code> function, use the <code>account_get_account_id()</code> function.
@@ -564,42 +564,42 @@ ret = account_delete_from_db_by_id(account_id);
 <li>Add the required information in the manifest file:
 <pre class="prettyprint">
 &lt;account&gt;
-&nbsp;&nbsp;&nbsp;&lt;account-provider appid=&quot;app-id name&quot; providerid=&quot;url style string&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiple-accounts-support=&quot;true or false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account&quot;&gt;application icon name&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;icon section=&quot;account-small&quot;&gt;application small icon name&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Application name&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;Application name&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;ko-kr&quot;&gt;ߖȃخʼnL݇ Lا&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;capability&gt;http://tizen.org/account/capability/calendar&lt;/capability&gt;
-&nbsp;&nbsp;&nbsp;&lt;/account-provider&gt;
+   &lt;account-provider appid="app-id name" providerid="url style string"
+                     multiple-accounts-support="true or false"&gt;
+      &lt;icon section="account"&gt;application icon name&lt;/icon&gt;
+      &lt;icon section="account-small"&gt;application small icon name&lt;/icon&gt;
+      &lt;label&gt;Application name&lt;/label&gt;
+      &lt;label xml:lang="en-gb"&gt;Application name&lt;/label&gt;
+      &lt;label xml:lang="ko-kr"&gt;ߖȃخʼnL݇ Lا&lt;/label&gt;
+      &lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;
+      &lt;capability&gt;http://tizen.org/account/capability/calendar&lt;/capability&gt;
+   &lt;/account-provider&gt;
 &lt;/account&gt;
 </pre>
 
 <p>The required information includes:</p>
-<ul><li><code>appid=&quot;app-id name&quot;</code>
-<p>Application ID (for example, <code>appid=&quot;org.tizen.account&quot;</code>).</p></li>
-<li><code>providerid=&quot;url style string&quot;</code>
-<p>Provider identification string (for example, <code>providerid=&quot;http://www.tizen.org&quot;</code>).</p></li>
-<li><code>multiple-accounts-support=&quot;true or false&quot;</code>
+<ul><li><code>appid="app-id name"</code>
+<p>Application ID (for example, <code>appid="org.tizen.account"</code>).</p></li>
+<li><code>providerid="url style string"</code>
+<p>Provider identification string (for example, <code>providerid="http://www.tizen.org"</code>).</p></li>
+<li><code>multiple-accounts-support="true or false"</code>
 <p>Multiple account support (if your application can manage 2 or more accounts, set to <code>true</code>; otherwise set to <code>false</code>)</p></li>
-<li><code>&lt;icon section=&quot;account&quot;&gt;application icon name&lt;/icon&gt;</code>
+<li><code>&lt;icon section="account"&gt;application icon name&lt;/icon&gt;</code>
 <p>Icon displayed on the Add account screen.</p>
 <p>The icon size must be 72 x 72 px and the icon file must be in the <code>{app-root}\shared\res\</code> directory.</p></li>
-<li><code>&lt;icon section=&quot;account-small&quot;&gt;application small icon name&lt;/icon&gt;</code>
+<li><code>&lt;icon section="account-small"&gt;application small icon name&lt;/icon&gt;</code>
 <p>Small icon displayed on the Other application screen to represent the account provider.</p>
 <p>The small icon file must be in the <code>{app-root}\shared\res\</code> directory.</p></li>
-<li><code>&lt;label xml:lang=&quot;en-gb&quot;&gt;Application name&lt;/label&gt;</code>
+<li><code>&lt;label xml:lang="en-gb"&gt;Application name&lt;/label&gt;</code>
 <p>Application name displayed on the Add account screen, according to the selected language.</p>
 <p>An account provider must have at least one label tag.</p></li>
 <li><code>&lt;capability&gt;http://tizen.org/account/capability/contact&lt;/capability&gt;</code>
 <p>For more information, see <a href="#provider">Account Providers</a>.</p></li></ul>
 </li>
 
-<li>Create the sign-in screen UI. 
-<p>When the user selects your application on the Add account screen, the Account Service launches your application with a specific operation ID (<code>ACCOUNT_OPERATION_SIGNIN</code>) defined in the <code>account-types.h</code> header file, so the sign-in screen must be displayed.</p> 
-  <p align="center"><img alt="Sign-in screen" src="../../images/account_signin.png" /></p> 
+<li>Create the sign-in screen UI.
+<p>When the user selects your application on the Add account screen, the Account Service launches your application with a specific operation ID (<code>ACCOUNT_OPERATION_SIGNIN</code>) defined in the <code>account-types.h</code> header file, so the sign-in screen must be displayed.</p>
+  <p align="center"><img alt="Sign-in screen" src="../../images/account_signin.png" /></p>
 </li>
 </ol>
 
@@ -610,7 +610,7 @@ ret = account_delete_from_db_by_id(account_id);
 
 
 <ol>
-<li>Prepare sample content. 
+<li>Prepare sample content.
 <p>To perform queries, you need existing content in the database. To access the existing account, obtain it from the database. This can be done using a few functions, depending on the user requirements.</p>
 <p>To create new content to the database:</p>
 
@@ -622,14 +622,14 @@ ret = account_delete_from_db_by_id(account_id);
 int id[3];
 static account_h account = NULL;
 
-Create_Account(&amp;account, &quot;Person&quot;, &quot;DiplayPerson&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Person Domain&quot;, &quot;someone1@somewho.com&quot;);
+Create_Account(&amp;account, "Person", "DiplayPerson",
+               "Person Domain", "someone1@somewho.com");
 
-account_set_capability(account, &quot;Custom&quot;, ACCOUNT_CAPABILITY_ENABLED);
+account_set_capability(account, "Custom", ACCOUNT_CAPABILITY_ENABLED);
 
-account_set_capability(account, &quot;Next&quot;, ACCOUNT_CAPABILITY_ENABLED);
+account_set_capability(account, "Next", ACCOUNT_CAPABILITY_ENABLED);
 
-account_set_capability(account, &quot;Another&quot;, ACCOUNT_CAPABILITY_DISABLED);
+account_set_capability(account, "Another", ACCOUNT_CAPABILITY_DISABLED);
 
 account_insert_to_db(account, &amp;id[0]);
 
@@ -639,20 +639,20 @@ account_destroy(account);
 <li><p>Add 3 more accounts to the database:</p>
 
 <pre class="prettyprint">
-Create_Account(&amp;account, &quot;PersonX&quot;, &quot;DisplayX&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Other Domain&quot;, &quot;someone2@somewho.com&quot;);
+Create_Account(&amp;account, "PersonX", "DisplayX",
+               "Other Domain", "someone2@somewho.com");
 account_insert_to_db(account, &amp;id[1]);
 
 account_destroy(account);
 
-Create_Account(&amp;account, &quot;Human&quot;, &quot;Humanity&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Everyone&quot;, &quot;someone3@somewho.com&quot;);
+Create_Account(&amp;account, "Human", "Humanity",
+               "Everyone", "someone3@somewho.com");
 account_insert_to_db(account, &amp;id[2]);
 
 account_destroy(account);
 
-Create_Account(&amp;account, &quot;LastOne&quot;, &quot;LastDisplay&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Last Domain&quot;, &quot;someone4@somewho.com&quot;);
+Create_Account(&amp;account, "LastOne", "LastDisplay",
+               "Last Domain", "someone4@somewho.com");
 account_insert_to_db(account, &amp;id[3]);
 
 account_destroy(account);
@@ -664,17 +664,17 @@ account_destroy(account);
 <pre class="prettyprint">
 static int
 Create_Account(account_h* account, char* account_name, char* display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char* domain_name, char* email_address)
+               char* domain_name, char* email_address)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;account_create(account);
+    account_create(account);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_set_user_name(*account, account_name);
+    account_set_user_name(*account, account_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_set_display_name(*account, display_name);
+    account_set_display_name(*account, display_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_set_domain_name(*account, domain_name);
+    account_set_domain_name(*account, domain_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_set_email_address(*account, email_address);
+    account_set_email_address(*account, email_address);
 }
 </pre></li></ol>
 </li>
@@ -685,8 +685,8 @@ Create_Account(account_h* account, char* account_name, char* display_name,
 
 <pre class="prettyprint">
 struct Account_Records {
-&nbsp;&nbsp;&nbsp;&nbsp;int count;
-&nbsp;&nbsp;&nbsp;&nbsp;int tab[100];
+    int count;
+    int tab[100];
 };
 
 struct Account_Records rec;
@@ -700,9 +700,9 @@ List_Accounts(&amp;rec);
 static void
 List_Accounts(struct Account_Records* rec)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (rec != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;count = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;account_foreach_account_from_db(on_account_read, rec);
+    if (rec != NULL)
+        rec-&gt;count = 0;
+    account_foreach_account_from_db(on_account_read, rec);
 }
 </pre></li>
 
@@ -712,29 +712,29 @@ List_Accounts(struct Account_Records* rec)
 static bool
 on_account_read(account_h account, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int account_id = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *display_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;struct Account_Records * rec = (struct Account_Records *)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[100];
+    int account_id = 0;
+    char *name = NULL;
+    char *display_name = NULL;
+    struct Account_Records * rec = (struct Account_Records *)user_data;
+    char buf[100];
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_get_account_id(account, &amp;account_id);
+    account_get_account_id(account, &amp;account_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;MyCallback ID: %d\n&quot;, account_id);
+    sprintf(buf, "MyCallback ID: %d\n", account_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (user_data != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rec-&gt;tab[rec-&gt;count++] = account_id;
-&nbsp;&nbsp;&nbsp;&nbsp;account_get_user_name(account, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;MyCallback Name: %s\n&quot;, name);
+    if (user_data != NULL)
+        rec-&gt;tab[rec-&gt;count++] = account_id;
+    account_get_user_name(account, &amp;name);
+    sprintf(buf, "MyCallback Name: %s\n", name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(name);
+    free(name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_get_display_name(account, &amp;display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;MyCallback Disp.: %s\n&quot;, display_name);
+    account_get_display_name(account, &amp;display_name);
+    sprintf(buf, "MyCallback Disp.: %s\n", display_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(display_name);
+    free(display_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre></li></ol>
 </li>
@@ -742,12 +742,12 @@ on_account_read(account_h account, void *user_data)
 
 <pre class="prettyprint">
 for (i = 0; i &lt; rec.count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;account_create(&amp;account);
-&nbsp;&nbsp;&nbsp;&nbsp;account_query_account_by_account_id(rec.tab[i], &amp;account);
+    account_create(&amp;account);
+    account_query_account_by_account_id(rec.tab[i], &amp;account);
 
-&nbsp;&nbsp;&nbsp;&nbsp;Show_Account(account);
+    Show_Account(account);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_destroy(account);
+    account_destroy(account);
 }
 </pre>
 </li>
@@ -758,28 +758,28 @@ for (i = 0; i &lt; rec.count; i++) {
 static int
 Show_Account(account_h acc)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int account_id = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *display_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[100];
+    int account_id = 0;
+    char *name = NULL;
+    char *display_name = NULL;
+    char buf[100];
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_get_account_id(acc, &amp;account_id);
+    account_get_account_id(acc, &amp;account_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Show_Account ID: %d\n&quot;, account_id);
+    sprintf(buf, "Show_Account ID: %d\n", account_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_get_user_name(acc, &amp;name);
+    account_get_user_name(acc, &amp;name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Show_Account Name: %s\n&quot;, name);
+    sprintf(buf, "Show_Account Name: %s\n", name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(name);
+    free(name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_get_display_name(acc, &amp;display_name);
+    account_get_display_name(acc, &amp;display_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Show_Account Disp.: %s\n&quot;, display_name);
+    sprintf(buf, "Show_Account Disp.: %s\n", display_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(display_name);
+    free(display_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
@@ -789,7 +789,7 @@ Show_Account(account_h acc)
 <p>Querying data by user name requires a valid user name and callback function. In this example, the same callback is used as in the <code>account_foreach_account_from_db()</code> function, but it is cast without the third parameter (user data).</p>
 
 <pre class="prettyprint">
-account_query_account_by_user_name(on_account_read, &quot;Human&quot;, NULL);
+account_query_account_by_user_name(on_account_read, "Human", NULL);
 </pre>
 </li>
 
@@ -797,7 +797,7 @@ account_query_account_by_user_name(on_account_read, &quot;Human&quot;, NULL);
 <p>By default, the accounts created in the application context have a package name set to the application name. Change it using the <code>account_set_package_name()</code> function. To list accounts by package name, the user can provide a name by themselves or obtain it with the <code>account_get_package_name()</code> function.</p>
 
 <p>The <code>account_query_account_by_package_name()</code> function requires a callback function and a package name. In addition, the user data can be passed to the callback function as a third parameter.</p>
- 
+
 <p>The package name has to be released when no longer needed.</p>
 
 <pre class="prettyprint">
@@ -812,8 +812,8 @@ free(package_name);
 <p>The following function allows the user to find all accounts with a specified capability on a specified state. Once again, the callback function is required.</p>
 
 <pre class="prettyprint">
-account_query_account_by_capability(on_account_read, &quot;Custom&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ACCOUNT_CAPABILITY_ENABLED, NULL);
+account_query_account_by_capability(on_account_read, "Custom",
+                                    ACCOUNT_CAPABILITY_ENABLED, NULL);
 </pre>
 </li>
 
@@ -821,7 +821,7 @@ account_query_account_by_capability(on_account_read, &quot;Custom&quot;,
 <p>This function is similar to the <code>account_query_account_by_capability()</code> function, but returns all accounts with a specified capability, without checking their state.</p>
 
 <pre class="prettyprint">
-account_query_account_by_capability_type(on_account_read, &quot;Next&quot;, NULL);
+account_query_account_by_capability_type(on_account_read, "Next", NULL);
 </pre>
 </li>
 
@@ -833,13 +833,13 @@ account_query_capability_by_account_id(_capability_cb, id[0], NULL);
 
 static bool
 _capability_cb(const char *capability_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;account_capability_state_e capability_state, void *user_data)
+               account_capability_state_e capability_state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[200];
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Found capability: %s on state %d\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;capability_type, capability_state);
+    char buf[200];
+    sprintf(buf, "Found capability: %s on state %d\n",
+            capability_type, capability_state);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li></ul></li>
@@ -868,7 +868,7 @@ int ret;
 int id;
 
 /* Account 1 */
-Create_Account(&amp;account, &quot;Security 1&quot;, &quot;Invalid&quot;, &quot;NOBODY&quot;, &quot;anony@mous.not&quot;);
+Create_Account(&amp;account, "Security 1", "Invalid", "NOBODY", "anony@mous.not");
 
 account_set_secret(account, ACCOUNT_SECRECY_INVALID);
 
@@ -876,13 +876,13 @@ account_get_secret(account, &amp;secret);
 
 account_insert_to_db(account, &amp;id);
 
-sprintf(buf, &quot;Account 1 secret: %d\n&quot;, secret);
+sprintf(buf, "Account 1 secret: %d\n", secret);
 
 account_destroy(account);
 
 /* Account 2 */
 
-Create_Account(&amp;account, &quot;Security 2&quot;, &quot;Invisible&quot;, &quot; NOBODY&quot;, &quot;anony1@mous.not&quot;);
+Create_Account(&amp;account, "Security 2", "Invisible", " NOBODY", "anony1@mous.not");
 
 account_set_secret(account, ACCOUNT_SECRECY_INVISIBLE);
 
@@ -890,13 +890,13 @@ account_get_secret(account, &amp;secret);
 
 account_insert_to_db(account, &amp;id);
 
-sprintf(buf, &quot;Account 2 secret: %d\n&quot;, secret);
+sprintf(buf, "Account 2 secret: %d\n", secret);
 
 account_destroy(account);
 
 /* Account 3 */
 
-Create_Account(&amp;account, &quot;Secret 3&quot;, &quot;Visible&quot;, &quot; NOBODY&quot;, &quot;anony2@mous.not&quot;);
+Create_Account(&amp;account, "Secret 3", "Visible", " NOBODY", "anony2@mous.not");
 
 ret = account_set_secret(account, ACCOUNT_SECRECY_VISIBLE);
 
@@ -904,7 +904,7 @@ ret = account_get_secret(account, &amp;secret);
 
 ret = account_insert_to_db(account, &amp;id);
 
-sprintf(buf, &quot;Account 3 secret: %d\n&quot;, secret);
+sprintf(buf, "Account 3 secret: %d\n", secret);
 
 account_destroy(account);
 
@@ -956,17 +956,17 @@ account_subscribe_notification(account_subscribe, _account_event_cb, NULL);
 <li>Create an account. Accounts are created and then their handles are destroyed. The package name is obtained from the second account.
 
 <pre class="prettyprint">
-Create_Account(&amp;account, &quot;Updater&quot;, &quot;Updated?&quot;, &quot;ToUpdate&quot;, &quot;not.up@to.date&quot;);
+Create_Account(&amp;account, "Updater", "Updated?", "ToUpdate", "not.up@to.date");
 account_insert_to_db(account, &amp;id);
 
 Show_Account(account);
 account_destroy(account);
 
-Create_Account(&amp;account, &quot;Another&quot;, &quot;Updated?&quot;, &quot;ToUpdate&quot;, &quot;not.up@to.date&quot;);
+Create_Account(&amp;account, "Another", "Updated?", "ToUpdate", "not.up@to.date");
 account_insert_to_db(account, &amp;id);
 
 account_get_package_name(account, &amp;package_name);
-sprintf(buf, &quot;Package_name: %s\n&quot;, package_name);
+sprintf(buf, "Package_name: %s\n", package_name);
 
 Show_Account(account);
 account_destroy(account);
@@ -986,7 +986,7 @@ account_destroy(account);
 <pre class="prettyprint">
 account_create(&amp;account);
 account_query_account_by_account_id(id, &amp;account);
-account_set_display_name(account, &quot;Updated!&quot;);
+account_set_display_name(account, "Updated!");
 account_update_to_db_by_id(account, id);
 account_destroy(account);
 </pre>
@@ -1004,8 +1004,8 @@ account_destroy(account);
 <pre class="prettyprint">
 account_create(&amp;account);
 account_query_account_by_account_id(id, &amp;account);
-account_set_display_name(account, &quot;Updated!&quot;);
-account_update_to_db_by_user_name(account, &quot;Another&quot;, package_name);
+account_set_display_name(account, "Updated!");
+account_update_to_db_by_user_name(account, "Another", package_name);
 account_destroy(account);
 </pre></li></ul>
 </li>
@@ -1016,11 +1016,11 @@ account_destroy(account);
 bool
 _account_event_cb(const char *event_type, int account_id, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[200];
+    char buf[200];
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;ACCOUNT EVENT: %s, %d\n&quot;, event_type, account_id);
+    sprintf(buf, "ACCOUNT EVENT: %s, %d\n", event_type, account_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -1057,7 +1057,7 @@ account_type_create(&amp;account_type);
 </pre>
 </li>
 
-<li>Get the type information. 
+<li>Get the type information.
 <p>If the account type with a specified ID exists, you can get it from the database with the <code>account_query_by_app_id()</code> function.</p>
 
 <p>It is possible to set, for example:</p>
@@ -1072,21 +1072,21 @@ account_type_create(&amp;account_type);
 
 <pre class="prettyprint">
 int multiple_account_support = -1;
-char *your_app_id = &quot;com.tizen.example&quot;; /* App ID for retrieving account types */
+char *your_app_id = "com.tizen.example"; /* App ID for retrieving account types */
 char *app_id = NULL;
 char *provider_feature = NULL;
 char *icon_path = NULL;
 
 if (account_type_query_app_id_exist(your_app_id)) {
-&nbsp;&nbsp;&nbsp;&nbsp;account_type_query_by_app_id(your_app_id, &amp;account_type);
+    account_type_query_by_app_id(your_app_id, &amp;account_type);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_type_get_app_id(account_type, &amp;app_id);
+    account_type_get_app_id(account_type, &amp;app_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_type_get_multiple_account_support(account_type, &amp;multiple_account_support);
+    account_type_get_multiple_account_support(account_type, &amp;multiple_account_support);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_type_get_icon_path(account_type, &amp;icon_path);
+    account_type_get_icon_path(account_type, &amp;icon_path);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_type_get_provider_feature(account_type, &amp;provider_feature);
+    account_type_get_provider_feature(account_type, &amp;provider_feature);
 }
 </pre>
 </li>
@@ -1105,11 +1105,11 @@ account_type_query_label_by_app_id(_account_label_cb, type_id, NULL);
 bool
 _account_label_cb(char *app_id, char *label, char *locale, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[200];
+    char buf[200];
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Get Label ID: %s LABEL: %s LOCALE %s\n&quot;, app_id, label, locale);
+    sprintf(buf, "Get Label ID: %s LABEL: %s LOCALE %s\n", app_id, label, locale);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 
@@ -1119,16 +1119,16 @@ _account_label_cb(char *app_id, char *label, char *locale, void *user_data)
 bool
 _account_type_cb(account_type_h account_type, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char * id;
-&nbsp;&nbsp;&nbsp;&nbsp;int support;
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[200];
+    char * id;
+    int support;
+    char buf[200];
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_type_get_app_id(account_type, &amp;id);
+    account_type_get_app_id(account_type, &amp;id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;account_type_get_multiple_account_support(account_type, &amp;support);
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Account Type ID: %s Multiple support %d:\n&quot;, id, support);
+    account_type_get_multiple_account_support(account_type, &amp;support);
+    sprintf(buf, "Account Type ID: %s Multiple support %d:\n", id, support);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -1143,7 +1143,7 @@ free(icon_path);
 account_type_destroy(account_type);
 </pre>
 </li>
-</ol>  
+</ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/native/personal/authentication_n.htm b/org.tizen.guides/html/native/personal/authentication_n.htm
index eb19f0b..ca3d527 100644 (file)
--- a/org.tizen.guides/html/native/personal/authentication_n.htm
+++ b/org.tizen.guides/html/native/personal/authentication_n.htm
@@ -26,11 +26,11 @@
                        <li>Tizen 3.0 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-    
-<h1>Authentication and Authorization</h1> 
+
+<h1>Authentication and Authorization</h1>
 
 <p>The authentication and authorization features introduce how you can obtain access tokens using OAuth 2.0, and authenticate users using the FIDO framework.</p>
 
@@ -43,7 +43,7 @@
 <p>You can obtain an access token by using the OAuth 2.0 authorization. The OAuth 2.0 authorization framework enables you to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing you to obtain access on your own behalf.</p>
 </li>
 </ul>
-  
+
   <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/personal/calendar_n.htm b/org.tizen.guides/html/native/personal/calendar_n.htm
index cc04581..786ea5a 100644 (file)
--- a/org.tizen.guides/html/native/personal/calendar_n.htm
+++ b/org.tizen.guides/html/native/personal/calendar_n.htm
@@ -32,7 +32,7 @@
                                <li><a href="#event">Event Instances and Reminders</a></li>
                                <li><a href="#filter2">Filters and Queries</a></li>
                                <li><a href="#change">Database Change Notifications</a></li>
-                               <li><a href="#vcal">vCalendar</a></li>  
+                               <li><a href="#vcal">vCalendar</a></li>
                                <li><a href="#prerequisites">Prerequisites</a></li>
                                <li>Events
                                        <ul class="toc">
@@ -74,13 +74,13 @@
 
 
   <h1>Calendar</h1>
-       
+
 <p>A calendar is a system of organizing days for social purposes. It is composed of <a href="#record2">records</a>, such as events and todos. The records consist of subrecords, such as alarms, attendees, or extensions. For example, if an event is recurring, separate instances are generated for each time the event occurs.</p>
 
 <p>The calendar information is stored in a calendar database. To manage the information in the database, you must <a href="#prerequisites">connect to the calendar service</a>. The calendar service module works in a way similar to a client-service architecture. In this architecture, the Tizen application is the client side and has to connect to the service before using calendar service APIs.</p>
- 
+
 <p>The following figure illustrates the calendar model.</p>
-  <p align="center"><strong>Figure: Calendar model</strong></p> 
+  <p align="center"><strong>Figure: Calendar model</strong></p>
   <p align="center"><img alt="Calendar model" src="../../images/calendar_model.png" /></p>
 
 <p>The main features of the Calendar API include:</p>
@@ -105,17 +105,17 @@
                </li>
        </ul>
   <p>The calendar service supports <a href="#vcal">vCalendars</a>.</p>
-  
-<p>The following figure illustrates the different Calendar entities and their relationships.</p> 
 
-  <p align="center"><strong>Figure: Calendar entities</strong></p> 
+<p>The following figure illustrates the different Calendar entities and their relationships.</p>
+
+  <p align="center"><strong>Figure: Calendar entities</strong></p>
   <p align="center"><img alt="Calendar entities" src="../../images/calendar_entity.png" /></p>
 
 <h2 id="record2" name="record2">Records</h2>
 
 <p>A record represents an actual record in the internal database, but you can consider it as a structure describing a single but complex entity, such as a calendar event or a time zone.</p>
 
-<p>A record has many properties, for example, a todo record has the todo description, priority, progress, creation time, last modified and completed time, and many other properties. A record can also contain an identifier field, which holds an ID of another record. Setting this field&#39;s value establishes a relation between the records, for example, a calendar event contains the ID of a calendar book to which it belongs.</p>
+<p>A record has many properties, for example, a todo record has the todo description, priority, progress, creation time, last modified and completed time, and many other properties. A record can also contain an identifier field, which holds an ID of another record. Setting this field's value establishes a relation between the records, for example, a calendar event contains the ID of a calendar book to which it belongs.</p>
 
 <p>To use a record, you must obtain its handle. You can use many methods to obtain the handle, for example, you can create a new record or use an existing record ID:</p>
 
@@ -148,23 +148,23 @@ calendar_record_create(_calendar_event._uri, &amp;record);
 </li>
 <li id="view2" name="view2">Views and properties
 
-<p>Generic access functions can be used (according to data-view declarations) to access calendar views. A data-view is almost the same as a database &quot;VIEW&quot;, which limits access and guarantees performance. A &quot;record&quot; represents a single row of the data-views.</p>
+<p>Generic access functions can be used (according to data-view declarations) to access calendar views. A data-view is almost the same as a database "VIEW", which limits access and guarantees performance. A "record" represents a single row of the data-views.</p>
 
-   <p align="center" class="Table"><strong>Table: Calendar views</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Editable view</th> 
-     <th>Read-only view</th> 
-    </tr> 
-    <tr> 
+   <p align="center" class="Table"><strong>Table: Calendar views</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Editable view</th>
+     <th>Read-only view</th>
+    </tr>
+    <tr>
      <td><code>_calendar_book</code><br/>
 <code>_calendar_event</code><br/>
 <code>_calendar_todo</code><br/>
 <code>_calendar_timezone</code><br/>
 <code>_calendar_attendee</code><br/>
 <code>_calendar_alarm</code><br/>
-<code>_calendar_extended_property</code></td> 
+<code>_calendar_extended_property</code></td>
      <td><code>_calendar_updated_info</code><br/>
 <code>_calendar_event_calendar_book</code><br/>
 <code>_calendar_todo_calendar_book</code><br/>
@@ -173,26 +173,26 @@ calendar_record_create(_calendar_event._uri, &amp;record);
 <code>_calendar_instance_localtime_calendar_book</code><br/>
 <code>_calendar_instance_utime_calendar_book_extended</code><br/>
 <code>_calendar_instance_localtime_calendar_book_extended</code></td>
-    </tr> 
-   </tbody> 
-  </table> 
+    </tr>
+   </tbody>
+  </table>
 
 <p>The <code>_calendar_updated_info</code> view is used when identifying record changes depending on the version. The other read-only views are a combination of editable views for UI convenience:</p>
 <ul><li><code>_calendar_event</code> + <code>_calendar_book</code> = <code>_calendar_event_calendar_book</code></li>
 <li><code>_calendar_instance_utime</code> + <code>_calendar_book</code> = <code>_calendar_instance_utime_calendar_book</code></li>
 <li><code>_calendar_event</code> + <code>_calendar_book</code> + <code>_calendar_attendee</code> = <code>_calendar_event_calendar_book_attendee</code></li></ul>
 
-  
+
     <div class="note">
         <strong>Note</strong>
         The <code>_calendar_instance_utime</code> and <code>_calendar_instance_localtime</code> views are not available as editable views, but can be used in combination with other views in read-only views.
     </div>
-  
+
 <p>The record types that have <code>*_id</code> as their property hold identifiers of other records. For example, the attendee and alarm views hold the ID of their corresponding events or todos in the <code>event_id</code> or <code>todo_id</code> property (as children of the corresponding event or todo records).</p>
 <p>The <code>record</code> type properties are other records. For example, an event record has <code>attendee</code> and <code>alarm</code> record properties, which means that records of those types can be children of the event type records. The following figure illustrates macros in a <code>calendar_view.h</code> header file.</p>
- 
-  <p align="center"><strong>Figure: Properties</strong></p> 
-  <p align="center"><img alt="Properties" src="../../images/calendar_property.png" /></p>  
+
+  <p align="center"><strong>Figure: Properties</strong></p>
+  <p align="center"><img alt="Properties" src="../../images/calendar_property.png" /></p>
 
 <p>The calendar service uses a version system in the following APIs:</p>
 <pre class="prettyprint">
@@ -206,45 +206,45 @@ calendar_db_get_changes_exception_by_version(..., int calendar_db_version, ...)
 <p>To get the current version, the <code>calendar_db_get_current_version()</code> function is used. The <code>calendar_db_get_changes_by_version()</code> function retrieves the modified record list. The <code>calendar_db_get_changes_exception_by_version()</code> function is used to get <a href="#exception_rule">modified instances in a recurring event</a>.</p>
 </li>
 <li id="types" name="types">Basic types
-<p>Records contain properties of basic types: <code>integer</code>, <code>lli</code> (long integer, long long int), <code>double</code>, <code>string</code>, <code>bool</code>, and <code>time</code>. The <code>time</code> type holds either a long long int, or 3 integers (year, month, day).</p> 
+<p>Records contain properties of basic types: <code>integer</code>, <code>lli</code> (long integer, long long int), <code>double</code>, <code>string</code>, <code>bool</code>, and <code>time</code>. The <code>time</code> type holds either a long long int, or 3 integers (year, month, day).</p>
 
 <p>The following table lists the setter and getter functions for each type.</p>
-   <p align="center" class="Table"><strong>Table: Setter and getter functions</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Property</th> 
-     <th>Setter</th> 
+   <p align="center" class="Table"><strong>Table: Setter and getter functions</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Property</th>
+     <th>Setter</th>
         <th>Getter</th>
-    </tr> 
-    <tr> 
-     <td><code>integer</code></td> 
+    </tr>
+    <tr>
+     <td><code>integer</code></td>
      <td><code>calendar_record_set_int()</code></td>
         <td><code>calendar_record_get_int()</code></td>
-    </tr> 
-     <tr> 
-     <td><code>long long integer</code></td> 
+    </tr>
+     <tr>
+     <td><code>long long integer</code></td>
      <td><code>calendar_record_set_lli()</code></td>
         <td><code>calendar_record_get_lli()</code></td>
     </tr>
-    <tr> 
-     <td><code>double</code></td> 
+    <tr>
+     <td><code>double</code></td>
      <td><code>calendar_record_set_double()</code></td>
         <td><code>calendar_record_get_double()</code></td>
     </tr>
-    <tr> 
-     <td><code>string</code></td> 
+    <tr>
+     <td><code>string</code></td>
      <td><code>calendar_record_set_str()</code></td>
         <td><code>calendar_record_get_str()</code></td>
     </tr>
-    <tr> 
-     <td><code>calendar_time_s</code></td> 
+    <tr>
+     <td><code>calendar_time_s</code></td>
      <td><code>calendar_record_set_caltime()</code></td>
         <td><code>calendar_record_get_caltime()</code></td>
-    </tr>      
-   </tbody> 
-  </table> 
-  
+    </tr>
+   </tbody>
+  </table>
+
 <p>These functions also require specifying which property to get and set, and for this, every getter and setter function needs a record and property ID. Create a property ID by combining the data-view and property name. For example, the property ID of an event <code>summary</code> property is <code>_calendar_event.summary</code>.</p>
 
 <p>The following example sets the <code>summary</code> property of an event record:</p>
@@ -255,21 +255,21 @@ calendar_record_h event = NULL;
 calendar_record_create(_calendar_event._uri, &amp;event);
 
 /* Set event summary to the _calendar_event view */
-calendar_record_set_str(event, _calendar_event.summary, &quot;Meeting&quot;);
+calendar_record_set_str(event, _calendar_event.summary, "Meeting");
 </pre>
 
 <p id="time">The calendar time structure property, <code>calendar_caltime_s</code>, is defined as follows:</p>
 <pre class="prettyprint">
 struct _calendar_time_s {
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_time_type_e type;
-&nbsp;&nbsp;&nbsp;&nbsp;union {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long long int utime;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int year;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int month;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int mday;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} date;
-&nbsp;&nbsp;&nbsp;&nbsp;} time;
+    calendar_time_type_e type;
+    union {
+        long long int utime;
+        struct {
+            int year;
+            int month;
+            int mday;
+        } date;
+    } time;
 };
 typedef struct _calendar_time_s calendar_time_s;
 </pre>
@@ -280,7 +280,7 @@ typedef struct _calendar_time_s calendar_time_s;
 <table>
    <tbody>
     <tr>
-     <th>Identifier</th> 
+     <th>Identifier</th>
      <th>Type</th>
      <th>Name</th>
      <th>Purpose</th>
@@ -292,7 +292,7 @@ typedef struct _calendar_time_s calendar_time_s;
         <td>UTC time is used to describe non-all-day events.
         <p>For non-all-day events, you must convert local time to UTC time. The local time zone identifier must be stored in the record, in the corresponding property.</p>
 <p>For example, when setting the start time of an event, the local time zone must be stored in the <code>start_tzid</code> property.</p>
-</td> 
+</td>
     </tr>
     <tr>
      <td><code>CALENDAR_TIME_LOCALTIME</code></td>
@@ -312,36 +312,36 @@ typedef struct _calendar_time_s calendar_time_s;
 long long int
 _time_convert_itol(char *tzid, int y, int mon, int d, int h, int min, int s)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_uchar utf16_timezone[64] = {0};
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_ustring_copy_ua_n(utf16_timezone, tzid,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(utf16_timezone)/sizeof(i18n_uchar));
+    int ret = 0;
+    i18n_uchar utf16_timezone[64] = {0};
+    i18n_ustring_copy_ua_n(utf16_timezone, tzid,
+                           sizeof(utf16_timezone)/sizeof(i18n_uchar));
 
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_ucalendar_h ucal = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char *loc_default = NULL;
+    i18n_ucalendar_h ucal = NULL;
+    char *loc_default = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_ulocale_get_default((const char **)&amp;loc_default);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = i18n_ucalendar_create(utf16_timezone, -1, loc_default,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I18N_UCALENDAR_GREGORIAN, &amp;ucal);
-&nbsp;&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;i18n_ucalendar_create() failed (%d)\n&quot;, ret);
+    i18n_ulocale_get_default((const char **)&amp;loc_default);
+    ret = i18n_ucalendar_create(utf16_timezone, -1, loc_default,
+                                I18N_UCALENDAR_GREGORIAN, &amp;ucal);
+    if (I18N_ERROR_NONE != ret) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "i18n_ucalendar_create() failed (%d)\n", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_ucalendar_set_date_time(ucal, y, mon - 1, d, h, min, s);
+    i18n_ucalendar_set_date_time(ucal, y, mon - 1, d, h, min, s);
 
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_udate date;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = i18n_ucalendar_get_milliseconds(ucal, &amp;date);
-&nbsp;&nbsp;&nbsp;&nbsp;if (I18N_ERROR_NONE != ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;i18n_ucalendar_create() failed (%d)\n&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i18n_ucalendar_destroy(ucal);
+    i18n_udate date;
+    ret = i18n_ucalendar_get_milliseconds(ucal, &amp;date);
+    if (I18N_ERROR_NONE != ret) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "i18n_ucalendar_create() failed (%d)\n", ret);
+        i18n_ucalendar_destroy(ucal);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;i18n_ucalendar_destroy(ucal);
+        return -1;
+    }
+    i18n_ucalendar_destroy(ucal);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ms2sec(date);
+    return ms2sec(date);
 }</pre>
 
 
@@ -351,21 +351,21 @@ calendar_time_s st = {0};
 calendar_time_s et = {0};
 
 st.type = CALENDAR_TIME_UTIME;
-st.time.utime = _time_convert_itol(&quot;Asia/Seoul&quot;, 2012, 9, 15, 11, 0, 0);
+st.time.utime = _time_convert_itol("Asia/Seoul", 2012, 9, 15, 11, 0, 0);
 
 et.type = CALENDAR_TIME_UTIME;
-et.time.utime = _time_convert_itol(&quot;Asia/Seoul&quot;, 2012, 9, 15, 12, 0, 0);
+et.time.utime = _time_convert_itol("Asia/Seoul", 2012, 9, 15, 12, 0, 0);
 
 /* Create an event record */
 
 /* Set local time zone of start time */
-calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);
+calendar_record_set_str(event, _calendar_event.start_tzid, "Asia/Seoul");
 
 /* Set start time */
 calendar_record_set_caltime(event, _calendar_event.start_time, st);
 
 /* Set local time zone of end time */
-calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);
+calendar_record_set_str(event, _calendar_event.end_tzid, "Asia/Seoul");
 
 /* Set end time */
 calendar_record_set_caltime(event, _calendar_event.end_time, et);
@@ -375,7 +375,7 @@ calendar_record_set_caltime(event, _calendar_event.end_time, et);
 </ul>
 
 
-<h3 id="children" name="children">Child Records</h3> 
+<h3 id="children" name="children">Child Records</h3>
 <p>A certain record type can be a parent of other records. For example, the attendee records can hold an event identifier in their <code>event_id</code> property. The event is the parent record of the attendee child records.</p>
 
 <p>The following code example creates an event and inserts an attendee record into it as a child record:</p>
@@ -390,7 +390,7 @@ calendar_record_create(_calendar_event._uri, &amp;event);
 
 /* Attendee record can be a child record of the event record */
 calendar_record_create(_calendar_attendee._uri, &amp;attendee);
-calendar_record_set_str(attendee, _calendar_attendee.name, &quot;John&quot;);
+calendar_record_set_str(attendee, _calendar_attendee.name, "John");
 calendar_record_add_child_record(event, _calendar_event.calendar_attendee, attendee);
 
 /* Insert event into the database */
@@ -403,28 +403,28 @@ calendar_record_destroy(event, true);
 
 <p>A calendar book is a placeholder for other calendar records. Every event and todo must belong to a calendar book. There are 3 built-in calendar books, as shown in the following table.</p>
 
-   <p align="center" class="Table"><strong>Table: Calendar books</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Book</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>DEFAULT_EVENT_CALENDAR_BOOK_ID</code></td> 
-     <td>Event book</td> 
-    </tr> 
-     <tr> 
-     <td><code>DEFAULT_TODO_CALENDAR_BOOK_ID</code></td> 
-     <td>Todo book</td> 
-    </tr> 
-    <tr> 
-     <td><code>DEFAULT_BIRTHDAY_CALENDAR_BOOK_ID</code></td> 
-     <td>Birthday book</td> 
-    </tr>  
-   </tbody> 
-  </table> 
-  
+   <p align="center" class="Table"><strong>Table: Calendar books</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Book</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>DEFAULT_EVENT_CALENDAR_BOOK_ID</code></td>
+     <td>Event book</td>
+    </tr>
+     <tr>
+     <td><code>DEFAULT_TODO_CALENDAR_BOOK_ID</code></td>
+     <td>Todo book</td>
+    </tr>
+    <tr>
+     <td><code>DEFAULT_BIRTHDAY_CALENDAR_BOOK_ID</code></td>
+     <td>Birthday book</td>
+    </tr>
+   </tbody>
+  </table>
+
 The following code example sets a calendar book ID for an event:
 <pre class="prettyprint">
 calendar_record_h event = NULL;
@@ -443,7 +443,7 @@ calendar_db_insert_record(event, &amp;event_id);
 calendar_record_destroy(event, true);
 </pre>
 
-       
+
 <p>To receive a list of existing calendar books, use the following code:</p>
 <pre class="prettyprint">
 calendar_list_h calendar_book_list = NULL;
@@ -455,112 +455,112 @@ calendar_db_get_all_records(_calendar_calendar_book._uri, 0, 0, &amp;calendar_bo
 <h2 id="event" name="event">Event Instances and Reminders</h2>
 <p>An event record describes various properties, such as description, categories, and priority. It also contains information on when the event takes place. In a recurring event, there are more than 1 instance of the event. Each instance has its corresponding instance record.</p>
 <p>If an event is inserted with rrule (recurrence rule), alarm, and attendee, its data is saved to each relevant database. Generated instances based on the rrule are also stored in the instance database.</p>
- 
-  <p align="center"><strong>Figure: Views and databases for event instances</strong></p> 
-  <p align="center"><img alt="Views and databases for event instances" src="../../images/calendar_db.png" /></p>  
+
+  <p align="center"><strong>Figure: Views and databases for event instances</strong></p>
+  <p align="center"><img alt="Views and databases for event instances" src="../../images/calendar_db.png" /></p>
 
 <p>The following table illustrates an example of a recurring event and its instances.</p>
 
-   <p align="center" class="Table"><strong>Table: Event and instance example</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Event</th> 
-     <th>Instances</th> 
-    </tr> 
-    <tr> 
+   <p align="center" class="Table"><strong>Table: Event and instance example</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Event</th>
+     <th>Instances</th>
+    </tr>
+    <tr>
      <td>Recurrence rules:
         <ul><li>Start date on 2012-10-09 (Tuesday)</li>
         <li>Frequency set to WEEKLY</li>
 <li>Interval set to 1</li>
-<li>Count set to 3</li></ul></td> 
+<li>Count set to 3</li></ul></td>
      <td>2012-10-09 Tuesday
 <p>2012-10-16 Tuesday</p>
-<p>2012-10-22 Tuesday</p></td> 
-    </tr> 
-   </tbody> 
-  </table> 
+<p>2012-10-22 Tuesday</p></td>
+    </tr>
+   </tbody>
+  </table>
 <p>The recurrence model in the Calendar API is compliant with the <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">iCalendar specification</a>. The following event properties have the same functionality as their corresponding values in iCalendar:</p>
  <p align="center" class="Table"><strong>
-     Table: Recurrence rules 
-   </strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Recurrence rule property</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>freq</code></td> 
-     <td>Yearly, monthly, weekly, or daily</td> 
-    </tr> 
-     <tr> 
-     <td><code>count</code></td> 
-     <td>Until count. If the count is 3, 3 instances are generated.</td> 
-    </tr> 
-     <tr> 
-     <td><code>interval</code></td> 
-     <td>Interval is a positive integer representing how often the recurrence rule repeats</td> 
-    </tr> 
-     <tr> 
-     <td><code>byday</code></td> 
-     <td>MO, TU, WE, TH, FR, SA, or SU</td> 
-    </tr> 
-     <tr> 
-     <td><code>bymonthday</code></td> 
-     <td>Days of the month</td> 
-    </tr> 
-     <tr> 
-     <td><code>byyearday</code></td> 
-     <td>Days of the year</td> 
-    </tr> 
-     <tr> 
-     <td><code>byweekno</code></td> 
-     <td>Ordinals specifying weeks of the year</td> 
-    </tr> 
-     <tr> 
-     <td><code>bymonth</code></td> 
-     <td>Months of the year</td> 
+     Table: Recurrence rules
+   </strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Recurrence rule property</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>freq</code></td>
+     <td>Yearly, monthly, weekly, or daily</td>
     </tr>
-     <tr> 
-     <td><code>bysetpos</code></td> 
-     <td>Values which correspond to the n<sup>th</sup> occurrence within the set of events</td> 
-    </tr>      
-     <tr> 
-     <td><code>wkst</code></td> 
-     <td>Day on which the workweek starts</td> 
-    </tr>      
-   </tbody> 
-  </table> 
-
-<p>When you have a recurring event, you can <a href="#exception_add">remove a specific recurrence instance</a> from it, or <a href="#exception_modify">add exceptions to the recurrence</a>.</p>  
-  
+     <tr>
+     <td><code>count</code></td>
+     <td>Until count. If the count is 3, 3 instances are generated.</td>
+    </tr>
+     <tr>
+     <td><code>interval</code></td>
+     <td>Interval is a positive integer representing how often the recurrence rule repeats</td>
+    </tr>
+     <tr>
+     <td><code>byday</code></td>
+     <td>MO, TU, WE, TH, FR, SA, or SU</td>
+    </tr>
+     <tr>
+     <td><code>bymonthday</code></td>
+     <td>Days of the month</td>
+    </tr>
+     <tr>
+     <td><code>byyearday</code></td>
+     <td>Days of the year</td>
+    </tr>
+     <tr>
+     <td><code>byweekno</code></td>
+     <td>Ordinals specifying weeks of the year</td>
+    </tr>
+     <tr>
+     <td><code>bymonth</code></td>
+     <td>Months of the year</td>
+    </tr>
+     <tr>
+     <td><code>bysetpos</code></td>
+     <td>Values which correspond to the n<sup>th</sup> occurrence within the set of events</td>
+    </tr>
+     <tr>
+     <td><code>wkst</code></td>
+     <td>Day on which the workweek starts</td>
+    </tr>
+   </tbody>
+  </table>
+
+<p>When you have a recurring event, you can <a href="#exception_add">remove a specific recurrence instance</a> from it, or <a href="#exception_modify">add exceptions to the recurrence</a>.</p>
+
 <h3 name="exception_rule" id="exception_rule">Exceptions</h3>
 <p>If 1 of the instances of a recurring event is modified (such as its summary or date) or deleted, it is called an exception. For example, if the second instance date is modified from 16<sup>th</sup> to 17<sup>th</sup>, 17<sup>th</sup> is the exception.</p>
 
 
-   <p align="center" class="Table"><strong>Table: Exception example</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Event</th> 
+   <p align="center" class="Table"><strong>Table: Exception example</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Event</th>
      <th>Instances</th>
-        <th>Exceptions</th>     
-    </tr> 
-    <tr> 
+        <th>Exceptions</th>
+    </tr>
+    <tr>
      <td>Recurrence rules:
         <ul><li>Start date on 2012-10-09 (Tuesday)</li>
         <li>Frequency set to WEEKLY</li>
 <li>Interval set to 1</li>
 <li>Count set to 3</li></ul>
-</td>  
+</td>
      <td>2012-10-09 Tuesday
 <p>2012-10-16 Tuesday &gt; modified</p>
-<p>2012-10-22 Tuesday</p></td> 
+<p>2012-10-22 Tuesday</p></td>
 <td>2012-10-17 Tuesday</td>
-    </tr> 
-   </tbody> 
-  </table> 
+    </tr>
+   </tbody>
+  </table>
 
 <p>To get the changes in an exception, use the <code>calendar_db_get_changes_exception_by_version()</code> function. The instances and exceptions are deleted together when the original event is deleted.</p>
 
@@ -568,8 +568,8 @@ calendar_db_get_all_records(_calendar_calendar_book._uri, 0, 0, &amp;calendar_bo
 <h3 id="remind" name="remind">Reminders</h3>
 
 <p>The following figure illustrates how the alarm process works.</p>
- 
-  <p align="center"><strong>Figure: Alarm process</strong></p> 
+
+  <p align="center"><strong>Figure: Alarm process</strong></p>
   <p align="center"><img alt="Alarm process" src="../../images/calendar_alarm.png" /></p>
 
 <p>To get a reminder when an alarm is triggered, the application must set the reminder mime name. After the reminder mime name is set, insert an alarm as a child of an event record:</p>
@@ -596,22 +596,22 @@ calendar_record_add_child_record(event, _calendar_event.calendar_alarm, alarm);
 <li>Filtering
 
 <p>The operator precedence in filters is determined by the order in which the conditions and filters are added. The following table shows an example of how the operator precedence works.</p>
-   <p align="center" class="Table"><strong>Table: Filter conditions</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Condition</th> 
-     <th>Result</th> 
-    </tr> 
-    <tr> 
+   <p align="center" class="Table"><strong>Table: Filter conditions</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Condition</th>
+     <th>Result</th>
+    </tr>
+    <tr>
      <td>Condition C1<br/>
 OR<br/>
 Condition C2<br/>
 AND<br/>
-Condition C3</td> 
-     <td>(C1 OR C2) AND C3</td> 
-    </tr> 
-     <tr> 
+Condition C3</td>
+     <td>(C1 OR C2) AND C3</td>
+    </tr>
+     <tr>
      <td><strong>Filter F1</strong>:<br/>
  Condition C1<br/>
  OR<br/>
@@ -627,30 +627,30 @@ Condition C3</td>
  AND<br/>
  F1<br/>
  AND<br/>
- F2</td> 
+ F2</td>
      <td>(C5 AND F1) AND F2<br/>
-Meaning (C5 AND (C1 OR C2)) AND (C3 OR C4)</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-  <p>The following code creates a filter, accepting events with high priority or those that include the word &quot;meeting&quot; in their description.</p>
+Meaning (C5 AND (C1 OR C2)) AND (C3 OR C4)</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>The following code creates a filter, accepting events with high priority or those that include the word "meeting" in their description.</p>
 <pre class="prettyprint">
 calendar_filter_h filter = NULL;
 
 /* Create a filter returning event type records */
 calendar_filter_create(_calendar_event._uri, &amp;filter);
 
-/* Add a &#39;priority equals high&#39; condition */
+/* Add a 'priority equals high' condition */
 calendar_filter_add_int(filter, _calendar_event.priority, CALENDAR_MATCH_EQUAL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_EVENT_PRIORITY_HIGH);
+                        CALENDAR_EVENT_PRIORITY_HIGH);
 
 /* Add OR operator */
 calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_OR);
 
-/* Add a &#39;description contains &quot;meeting&quot;&#39; condition */
+/* Add a 'description contains "meeting"' condition */
 calendar_filter_add_str(filter, _calendar_event.description,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_MATCH_CONTAINS, &quot;meeting&quot;);
+                        CALENDAR_MATCH_CONTAINS, "meeting");
 </pre>
 
 <p>Insert the filter into the query and execute the query:</p>
@@ -680,7 +680,7 @@ calendar_list_destroy(list, true);
 <li id="proj" name="proj">Projection querying
 <p>A projection allows you to query the data for just those specific properties of a record that you actually need, at lower latency and cost than retrieving the entire set of properties.</p>
 
-<p>The following example code creates a filter that gets only the event ID, summary, and start time from the records with the &quot;test&quot; (string filter) in their summary. Create a query, and add a filter to it; the results are received in a list.</p>
+<p>The following example code creates a filter that gets only the event ID, summary, and start time from the records with the "test" (string filter) in their summary. Create a query, and add a filter to it; the results are received in a list.</p>
 
 <pre class="prettyprint">
 calendar_query_h query = NULL;
@@ -690,7 +690,7 @@ calendar_filter_h filter = NULL;
 calendar_query_create(_calendar_event_calendar_book_attendee._uri, &amp;query);
 calendar_filter_create(_calendar_event_calendar_book_attendee._uri, &amp;filter);
 calendar_filter_add_str(filter, _calendar_event.summary,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_MATCH_CONTAINS, &quot;test&quot;);
+                        CALENDAR_MATCH_CONTAINS, "test");
 calendar_query_set_filter(query, filter);
 
 /* Set projection */
@@ -777,8 +777,8 @@ calendar_list_destroy(list, true);
 <p>To use the Calendar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/calendar.read&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/calendar.write&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/calendar.read&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/calendar.write&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -797,14 +797,14 @@ calendar_list_destroy(list, true);
 int error_code;
 error_code = calendar_connect();
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_connect failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_connect failed: %x\n", error_code);
 </pre>
 
 <p>When the calendar service is no longer needed, disconnect from the service using the <code>calendar_disconnect()</code> function:</p>
 <pre class="prettyprint">
 error_code = calendar_disconnect();
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_disconnect failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_disconnect failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -826,7 +826,7 @@ if (error_code != CALENDAR_ERROR_NONE)
 calendar_record_h event = NULL;
 error_code = calendar_record_create(_calendar_event._uri, &amp;event);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_record_create failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_record_create failed: %x\n", error_code);
 </pre>
 
   <div class="note">
@@ -843,9 +843,9 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>Set the subject.</p>
 <p>To set the subject for the event, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_event.summary</code> property as the second parameter:</p>
 <pre class="prettyprint">
-error_code = calendar_record_set_str(event, _calendar_event.summary, &quot;summary&quot;);
+error_code = calendar_record_set_str(event, _calendar_event.summary, "summary");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set summary failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set summary failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -853,9 +853,9 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>To set the description for the event, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_event.description</code> property as the second parameter:</p>
 <pre class="prettyprint">
 error_code = calendar_record_set_str(event, _calendar_event.description,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;description&quot;);
+                                     "description");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set description failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -863,13 +863,13 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>To set the time zone for the event start and end times, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_event.start_tzid</code> and <code>_calendar_event.end_tzid</code> properties as the second parameter. If you do not set the time zone, the system uses UTC.</p>
 <pre class="prettyprint">
 error_code = calendar_record_set_str(event, _calendar_event.start_tzid,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Asia/Seoul&quot;);
+                                     "Asia/Seoul");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_tzid failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set start_tzid failed: %x\n", error_code);
 
-error_code = calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);
+error_code = calendar_record_set_str(event, _calendar_event.end_tzid, "Asia/Seoul");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set end_tzid failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set end_tzid failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -880,16 +880,16 @@ calendar_time_s starttime = {0};
 starttime.type = CALENDAR_TIME_UTIME;
 starttime.time.utime = 1404036000; /* 2014/06/29 10:00:00 UTC */
 error_code = calendar_record_set_caltime(event, _calendar_event.start_time,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;starttime);
+                                         starttime);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set start_time failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set start_time failed: %x\n", error_code);
 
 calendar_time_s endtime = {0};
 endtime.type = CALENDAR_TIME_UTIME;
 endtime.time.utime = 1404036000 + 3600; /* 2014/06/29 11:00:00 UTC */
 error_code = calendar_record_set_caltime(event, _calendar_event.end_time, endtime);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set end_time failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set end_time failed: %x\n", error_code);
 </pre>
 <p>The <code>calendar_time_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structcalendar__time__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structcalendar__time__s.html">wearable</a> applications) has <a href="#time">2 types</a>.</p>
 </li>
@@ -901,19 +901,19 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>In the following example, the event is set to occur every month on the 3<sup>rd</sup>, 4<sup>th</sup>, and 5<sup>th</sup> day:</p>
 <pre class="prettyprint">
 error_code = calendar_record_set_int(event, _calendar_event.freq,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_RECURRENCE_MONTHLY);
+                                     CALENDAR_RECURRENCE_MONTHLY);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set freq failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set freq failed: %x\n", error_code);
 
 error_code = calendar_record_set_int(event, _calendar_event.interval, 1);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set interval failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set interval failed: %x\n", error_code);
 
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_record_set_str(event, _calendar_event.bymonthday, &quot;3,4,5&quot;);
+    calendar_record_set_str(event, _calendar_event.bymonthday, "3,4,5");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;set bymonthday failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "set bymonthday failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -921,14 +921,14 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>In the following example, the event is set to occur a total of 8 times:</p>
 <pre class="prettyprint">
 error_code = calendar_record_set_int(event, _calendar_event.range_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_RANGE_COUNT);
+                                     CALENDAR_RANGE_COUNT);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;set range_type failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "set range_type failed: %x\n", error_code);
 
 error_code = calendar_record_set_int(event, _calendar_event.count, 8);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set count failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set count failed: %x\n", error_code);
 </pre>
 </li>
 </ol>
@@ -948,18 +948,18 @@ error_code += calendar_record_create(_calendar_alarm._uri, &amp;alarm);
 
 /* Set the properties */
 error_code += calendar_record_set_int(alarm, _calendar_alarm.tick_unit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_ALARM_TIME_UNIT_SPECIFIC);
+                                      CALENDAR_ALARM_TIME_UNIT_SPECIFIC);
 ct.type = CALENDAR_TIME_UTIME;
 ct.time.utime = 1404036000 - 60; /* 60 sec before starttime (1404036000) */
 error_code += calendar_record_set_caltime(alarm, _calendar_alarm.alarm_time, ct);
 
 /* Add to the event as a child record */
 error_code += calendar_record_add_child_record(event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_calendar_event.calendar_alarm,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alarm);
+                                               _calendar_event.calendar_alarm,
+                                               alarm);
 
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;adding the alarm failed \n&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "adding the alarm failed \n");
 </pre>
 <p>The <code>calendar_alarm_time_unit_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga631b1b606158479e3a14a921b006b4fe">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga631b1b606158479e3a14a921b006b4fe">wearable</a> applications) defines the available alarm tick units.</p>
 
@@ -980,15 +980,15 @@ error_code = CALENDAR_ERROR_NONE;
 error_code += calendar_record_create(_calendar_attendee._uri, &amp;attendee);
 
 /* Set the attendee properties */
-error_code += calendar_record_set_str(attendee, _calendar_attendee.name, &quot;John&quot;);
+error_code += calendar_record_set_str(attendee, _calendar_attendee.name, "John");
 
 /* Add to the event as a child record */
 error_code += calendar_record_add_child_record(event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_calendar_event.calendar_attendee,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attendee);
+                                               _calendar_event.calendar_attendee,
+                                               attendee);
 
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;adding the attendee failed \n&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "adding the attendee failed \n");
 </pre>
 </li>
 </ul>
@@ -1002,10 +1002,10 @@ if (error_code != CALENDAR_ERROR_NONE)
 int id = -1;
 error_code = calendar_db_insert_record(event, &amp;id);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_insert_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_insert_record failed: %x\n", error_code);
 
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;id: %d\n&quot;, id);
+dlog_print(DLOG_ERROR, LOG_TAG, "id: %d\n", id);
 </pre>
 </li>
 
@@ -1031,7 +1031,7 @@ calendar_record_h record;
 const int event_id = ...; /* Get the event ID */
 error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_db_get_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_record failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1056,8 +1056,8 @@ calendar_record_destroy(record, true);
 calendar_list_h list = NULL;
 error_code = calendar_db_get_all_records(_calendar_event._uri, 0, 0, &amp;list);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_get_all_records failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_get_all_records failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1071,8 +1071,8 @@ calendar_query_h query = NULL;
 
 error_code = calendar_query_create(_calendar_event._uri, &amp;query);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_query_create failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_query_create failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1082,39 +1082,39 @@ calendar_filter_h filter = NULL;
 
 error_code = calendar_filter_create(_calendar_event._uri, &amp;filter);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_filter_create failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_filter_create failed: %x\n", error_code);
 </pre>
 </li>
 <li>
 <p>Add a filtering condition using the <code>calendar_filter_add_XXX()</code> function.</p>
-<p>The following example adds a string-based filtering condition that retrieves the events whose summary field contains the string &quot;summary to find&quot;:</p>
+<p>The following example adds a string-based filtering condition that retrieves the events whose summary field contains the string "summary to find":</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_filter_add_str(filter, _calendar_event.summary,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_MATCH_CONTAINS, &quot;summary to find&quot;);
+    calendar_filter_add_str(filter, _calendar_event.summary,
+                            CALENDAR_MATCH_CONTAINS, "summary to find");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter add condition failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "filter add condition failed: %x\n", error_code);
 </pre>
 </li>
 <li>
 <p>To add more conditions, define an operator between the conditions.</p>
-<p>The following example first adds an AND operator and then a string-based filtering condition that retrieves the events whose description field contains the string &quot;description to find&quot;.</p>
-<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves the events that contain &quot;summary to find&quot; in their summary and &quot;description to find&quot; in their description.</p>
+<p>The following example first adds an AND operator and then a string-based filtering condition that retrieves the events whose description field contains the string "description to find".</p>
+<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves the events that contain "summary to find" in their summary and "description to find" in their description.</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
+    calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_filter_add_operator failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_filter_add_operator failed: %x\n", error_code);
 
 error_code = calendar_filter_add_str(filter, _calendar_event.description,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_MATCH_CONTAINS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;description to find&quot;);
+                                     CALENDAR_MATCH_CONTAINS,
+                                     "description to find");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter add condition failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "filter add condition failed: %x\n", error_code);
 </pre>
 <p>You can also create a filter with integer and time conditions. For example, to filter all-day events that start after January 1st, 2016:</p>
 <pre class="prettyprint">
@@ -1124,11 +1124,11 @@ time_to_compare.time.date.mday = 1;
 time_to_compare.time.date.month = 1;
 time_to_compare.time.date.year = 2016;
 error_code = calendar_filter_add_caltime(filter, _calendar_event.start_time,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_MATCH_GREATER_THAN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_to_compare);
+                                         CALENDAR_MATCH_GREATER_THAN,
+                                         time_to_compare);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter add condition failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "filter add condition failed: %x\n", error_code);
 </pre>
 <p>The <code>type</code> parameter of the <code>calendar_time_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structcalendar__time__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structcalendar__time__s.html">wearable</a> applications) determines whether the event is an all-day event (<code>CALENDAR_TIME_LOCALTIME</code>) or a non-all-day event (<code>CALENDAR_TIME_UTIME</code>).</p>
 <p>To retrieve the specified time period, use 2 conditions using <code>CALENDAR_MATCH_GREATER_THAN</code> and <code>CALENDAR_MATCH_LESS_THAN</code> with the operator <code>CALENDAR_FILTER_OPERATOR_AND</code>. You can also use <code>CALENDAR_MATCH_EQUAL</code> to set an equality condition.</p>
@@ -1138,8 +1138,8 @@ if (error_code != CALENDAR_ERROR_NONE)
 <pre class="prettyprint">
 error_code = calendar_query_set_filter(query, filter);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_query_set_filter failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_query_set_filter failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1147,9 +1147,9 @@ if (error_code != CALENDAR_ERROR_NONE)
 <pre class="prettyprint">
 error_code = calendar_db_get_records_with_query(query, 0, 0, &amp;list);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_get_records_with_query failed: %x\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_get_records_with_query failed: %x\n",
+               error_code);
 </pre>
 <p>The third parameter defines a limit for the number of results. If you set it to 0, the list returns all events matching the query.</p>
 </li>
@@ -1180,13 +1180,13 @@ calendar_query_destroy(query);
 <pre class="prettyprint">
 calendar_record_h record;
 while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;char* summary;
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_record_get_str_p(record, _calendar_event.summary, &amp;summary);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;summary: %s\n&quot;, summary);
+    char* summary;
+    calendar_record_get_str_p(record, _calendar_event.summary, &amp;summary);
+    dlog_print(DLOG_ERROR, LOG_TAG, "summary: %s\n", summary);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    error_code = calendar_list_next(list);
+    if (error_code != CALENDAR_ERROR_NONE)
+        break;
 }
 </pre>
 </li>
@@ -1196,24 +1196,24 @@ while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_N
 calendar_gl_event_data_t *gl_event_data = NULL;
 calendar_record_h record = NULL;
 while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;gl_event_data = _create_gl_event_data(record);
-&nbsp;&nbsp;&nbsp;&nbsp;/* You can get, for example, summary: */
-&nbsp;&nbsp;&nbsp;&nbsp;/* gl_event_data-&gt;summary */
+    gl_event_data = _create_gl_event_data(record);
+    /* You can get, for example, summary: */
+    /* gl_event_data-&gt;summary */
 
-&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
+    _free_gl_event_data(gl_event_data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    error_code = calendar_list_next(list);
+    if (error_code != CALENDAR_ERROR_NONE)
+        break;
 }
 </pre>
 <p>Define the <code>calendar_gl_event_data_t</code> structure and the functions for using the structure:</p>
 <pre class="prettyprint">
 struct _calendar_gl_event_data {
-&nbsp;&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;&nbsp;char *summary;
-&nbsp;&nbsp;&nbsp;&nbsp;char *description;
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_time_s start_time;
+    int id;
+    char *summary;
+    char *description;
+    calendar_time_s start_time;
 };
 typedef struct _calendar_gl_event_data calendar_gl_event_data_t;
 
@@ -1221,62 +1221,62 @@ typedef struct _calendar_gl_event_data calendar_gl_event_data_t;
 static void
 _free_gl_event_data(calendar_gl_event_data_t *gl_event_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == gl_event_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (NULL == gl_event_data)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_event_data-&gt;summary);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_event_data-&gt;description);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_event_data);
+    free(gl_event_data-&gt;summary);
+    free(gl_event_data-&gt;description);
+    free(gl_event_data);
 }
 
 /* Create the structure for an event */
 static calendar_gl_event_data_t*
 _create_gl_event_data(calendar_record_h record)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_gl_event_data_t *gl_event_data;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;&nbsp;gl_event_data = malloc(sizeof(calendar_gl_event_data_t));
-&nbsp;&nbsp;&nbsp;&nbsp;memset(gl_event_data, 0x0, sizeof(calendar_gl_event_data_t));
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_event.summary,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_event_data-&gt;summary);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get summary failed: %i\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_event.description,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_event_data-&gt;description);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;get description failed: %i\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_int(record, _calendar_event.id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_event_data-&gt;id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get id failed: %i\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_caltime(record, _calendar_event.start_time,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_event_data-&gt;start_time);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get start_time failed: %i\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(gl_event_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return gl_event_data;
+    calendar_gl_event_data_t *gl_event_data;
+    int error_code;
+
+    gl_event_data = malloc(sizeof(calendar_gl_event_data_t));
+    memset(gl_event_data, 0x0, sizeof(calendar_gl_event_data_t));
+
+    error_code = calendar_record_get_str(record, _calendar_event.summary,
+                                         &amp;gl_event_data-&gt;summary);
+    if (error_code != CALENDAR_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get summary failed: %i\n", error_code);
+        _free_gl_event_data(gl_event_data);
+
+        return NULL;
+    }
+
+    error_code = calendar_record_get_str(record, _calendar_event.description,
+                                         &amp;gl_event_data-&gt;description);
+    if (error_code != CALENDAR_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "get description failed: %i\n", error_code);
+        _free_gl_event_data(gl_event_data);
+
+        return NULL;
+    }
+
+    error_code = calendar_record_get_int(record, _calendar_event.id,
+                                         &amp;gl_event_data-&gt;id);
+    if (error_code != CALENDAR_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get id failed: %i\n", error_code);
+        _free_gl_event_data(gl_event_data);
+
+        return NULL;
+    }
+
+    error_code = calendar_record_get_caltime(record, _calendar_event.start_time,
+                                             &amp;gl_event_data-&gt;start_time);
+    if (error_code != CALENDAR_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get start_time failed: %i\n", error_code);
+        _free_gl_event_data(gl_event_data);
+
+        return NULL;
+    }
+
+    return gl_event_data;
 }
 </pre>
 <p>To access a specific event detail in a child record, retrieve the child record.</p>
@@ -1306,7 +1306,7 @@ calendar_record_h record;
 const int event_id = ...; /* Get the event ID */
 error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_db_get_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_record failed: %x\n", error_code);
 </pre>
 
 <p>You can also retrieve the event using a search function, such as <code>calendar_db_get_records_with_query()</code>.</p>
@@ -1317,14 +1317,14 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>Set the properties you want to update.</p>
 <p>The following example sets a new subject and description for the event:</p>
 <pre class="prettyprint">
-error_code = calendar_record_set_str(record, _calendar_event.summary, &quot;summary updated&quot;);
+error_code = calendar_record_set_str(record, _calendar_event.summary, "summary updated");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set summary failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set summary failed: %x\n", error_code);
 
 error_code = calendar_record_set_str(record, _calendar_event.description,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;description updated&quot;);
+                                     "description updated");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set description failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1333,8 +1333,8 @@ if (error_code != CALENDAR_ERROR_NONE)
 <pre class="prettyprint">
 error_code = calendar_db_update_record(record);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_update_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_update_record failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1355,7 +1355,7 @@ calendar_record_destroy(record, true);
 int event_id = ...; /* Get the event ID */
 error_code = calendar_db_delete_record(_calendar_event._uri, event_id);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_db_delete_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_delete_record failed: %x\n", error_code);
 </pre>
 
 <h2 id="exception_add" name="exception_add">Removing an Instance from a Recurring Event</h2>
@@ -1370,7 +1370,7 @@ if (error_code != CALENDAR_ERROR_NONE)
 <ul>
 <li><p>Frequency: <code>CALENDAR_RECURRENCE_MONTHLY</code></p></li>
 <li><p>Interval: 1</p></li>
-<li><p>Days of the month: &quot;3, 4, 5&quot;</p></li>
+<li><p>Days of the month: "3, 4, 5"</p></li>
 <li><p>Range type: <code>CALENDAR_RANGE_COUNT</code></p></li>
 <li><p>Count: 8</p></li>
 </ul>
@@ -1379,9 +1379,9 @@ int error_code = CALENDAR_ERROR_NONE;
 
 calendar_record_h event = NULL;
 error_code += calendar_record_create(_calendar_event._uri, &amp;event);
-error_code += calendar_record_set_str(event, _calendar_event.summary, &quot;test&quot;);
-error_code += calendar_record_set_str(event, _calendar_event.start_tzid, &quot;Asia/Seoul&quot;);
-error_code += calendar_record_set_str(event, _calendar_event.end_tzid, &quot;Asia/Seoul&quot;);
+error_code += calendar_record_set_str(event, _calendar_event.summary, "test");
+error_code += calendar_record_set_str(event, _calendar_event.start_tzid, "Asia/Seoul");
+error_code += calendar_record_set_str(event, _calendar_event.end_tzid, "Asia/Seoul");
 
 calendar_time_s st = {0};
 st.type = CALENDAR_TIME_UTIME;
@@ -1394,16 +1394,16 @@ et.time.utime = 1354582800;
 error_code += calendar_record_set_caltime(event, _calendar_event.end_time, et);
 
 error_code += calendar_record_set_int(event, _calendar_event.freq,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_RECURRENCE_MONTHLY);
+                                      CALENDAR_RECURRENCE_MONTHLY);
 error_code += calendar_record_set_int(event, _calendar_event.interval, 1);
-error_code += calendar_record_set_str(event, _calendar_event.bymonthday, &quot;3,4,5&quot;);
+error_code += calendar_record_set_str(event, _calendar_event.bymonthday, "3,4,5");
 
 error_code += calendar_record_set_int(event, _calendar_event.range_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_RANGE_COUNT);
+                                      CALENDAR_RANGE_COUNT);
 error_code += calendar_record_set_int(event, _calendar_event.count, 8);
 
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;creating the event failed: \n&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "creating the event failed: \n");
 </pre>
 <p>The event has 8 instances:</p>
 <p align="center" class="Table"><strong>Table: Event instances</strong></p>
@@ -1439,9 +1439,9 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>Create the exception by setting the <code>exdate</code> property.</p>
 <p>In vCalendar 2.0 (RFC 2445), the <code>exdate</code> property is used to identify a deleted instance. If multiple instances are deleted, datetimes are added with a comma (for example, <code>20121104T010000Z, 20121105T010000Z, 20121203T010000Z</code>).</p>
 <pre class="prettyprint">
-error_code = calendar_record_set_str(event, _calendar_event.exdate, &quot;20121104T010000Z&quot;);
+error_code = calendar_record_set_str(event, _calendar_event.exdate, "20121104T010000Z");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set exdate failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set exdate failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1451,8 +1451,8 @@ if (error_code != CALENDAR_ERROR_NONE)
 int event_id;
 error_code = calendar_db_insert_record(event, &amp;event_id);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_insert_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_insert_record failed: %x\n", error_code);
 
 calendar_record_destroy(event, true);
 </pre>
@@ -1477,12 +1477,12 @@ error_code = CALENDAR_ERROR_NONE;
 
 error_code += calendar_record_clone(event, &amp;clone);
 error_code += calendar_record_set_int(clone, _calendar_event.original_event_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event_id);
+                                      event_id);
 error_code += calendar_record_set_str(clone, _calendar_event.recurrence_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;20121005T010000Z&quot;);
+                                      "20121005T010000Z");
 
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;cloning the event failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "cloning the event failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1496,8 +1496,8 @@ if (error_code != CALENDAR_ERROR_NONE)
 int exdate_event_id = 0;
 error_code = calendar_db_insert_record(clone, &amp;exdate_event_id);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_insert_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_insert_record failed: %x\n", error_code);
 
 calendar_record_destroy(clone, true);
 calendar_record_destroy(event, true);
@@ -1516,10 +1516,10 @@ calendar_record_destroy(event, true);
 <p>Register a callback using the <code>calendar_db_add_changed_cb()</code> function:</p>
 <pre class="prettyprint">
 error_code = calendar_db_add_changed_cb(_calendar_event._uri, _event_changed_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                        NULL);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_add_changed_cb failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_add_changed_cb failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1532,26 +1532,26 @@ static calendar_gl_event_data_t *_gl_event_data = ...;
 static void
 _event_changed_callback(const char *view_uri, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _calendar_event._uri))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (0 != strcmp(view_uri, _calendar_event._uri))
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == _gl_event_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (NULL == _gl_event_data)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int event_id = _gl_event_data-&gt;id;
-&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_event_data(_gl_event_data);
-&nbsp;&nbsp;&nbsp;&nbsp;_gl_event_data = NULL;
+    int event_id = _gl_event_data-&gt;id;
+    _free_gl_event_data(_gl_event_data);
+    _gl_event_data = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_record_h record = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    calendar_record_h record = NULL;
+    int error_code;
+    error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
+    if (error_code != CALENDAR_ERROR_NONE)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;_gl_event_data = _create_gl_event_data(record);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use _gl_event_data */
+    _gl_event_data = _create_gl_event_data(record);
+    /* Use _gl_event_data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_record_destroy(record, true);
+    calendar_record_destroy(record, true);
 }
 </pre>
 </li>
@@ -1574,7 +1574,7 @@ _event_changed_callback(const char *view_uri, void *user_data)
 calendar_record_h todo = NULL;
 error_code = calendar_record_create(_calendar_todo._uri, &amp;todo);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_record_create failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_record_create failed: %x\n", error_code);
 </pre>
 
   <div class="note">
@@ -1591,9 +1591,9 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>Set the subject.</p>
 <p>To set the subject for the todo, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_todo.summary</code> property as the second parameter:</p>
 <pre class="prettyprint">
-error_code = calendar_record_set_str(todo, _calendar_todo.summary, &quot;summary&quot;);
+error_code = calendar_record_set_str(todo, _calendar_todo.summary, "summary");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set summary failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set summary failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1601,9 +1601,9 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>To set the description for the todo, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_todo.description</code> property as the second parameter:</p>
 <pre class="prettyprint">
 error_code = calendar_record_set_str(todo, _calendar_todo.description,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;description&quot;);
+                                     "description");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set description failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1616,7 +1616,7 @@ duetime.time.utime = 1404036000; /* 2014/06/29 11:00:00 UTC */
 
 error_code = calendar_record_set_caltime(todo, _calendar_todo.due_time, duetime);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set due_time failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set due_time failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1624,9 +1624,9 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>To set the status for the todo, use the <code>calendar_record_set_int()</code> function with the <code>_calendar_todo.todo_status</code> property as the second parameter. The <code>calendar_todo_status_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga3e1b9cae05705d471a4746d8ab6d3622">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__RECORD__MODULE.html#ga3e1b9cae05705d471a4746d8ab6d3622">wearable</a> applications) defines the possible status values.</p>
 <pre class="prettyprint">
 error_code = calendar_record_set_int(todo, _calendar_todo.todo_status,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_TODO_STATUS_COMPLETED);
+                                     CALENDAR_TODO_STATUS_COMPLETED);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set todo_status failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set todo_status failed: %x\n", error_code);
 </pre>
 </li>
 </ul>
@@ -1640,8 +1640,8 @@ if (error_code != CALENDAR_ERROR_NONE)
 int id;
 error_code = calendar_db_insert_record(todo, &amp;id);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_insert_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_insert_record failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1667,7 +1667,7 @@ calendar_record_h record;
 const int todo_id = ...; /* Get the todo ID */
 error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_db_get_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_record failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1693,8 +1693,8 @@ calendar_record_destroy(record, true);
 calendar_list_h list = NULL;
 error_code = calendar_db_get_all_records(_calendar_todo._uri, 0, 0, &amp;list);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_get_all_records failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_get_all_records failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1708,8 +1708,8 @@ calendar_query_h query = NULL;
 
 error_code = calendar_query_create(_calendar_todo._uri, &amp;query);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_query_create failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_query_create failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1719,49 +1719,49 @@ calendar_filter_h filter = NULL;
 
 error_code = calendar_filter_create(_calendar_todo._uri, &amp;filter);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_filter_create failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_filter_create failed: %x\n", error_code);
 </pre>
 </li>
 <li>
 <p>Add a filtering condition using the <code>calendar_filter_add_XXX()</code> function.</p>
-<p>The following example adds a string-based filtering condition that retrieves the todos whose summary field contains the string &quot;summary to find&quot;:</p>
+<p>The following example adds a string-based filtering condition that retrieves the todos whose summary field contains the string "summary to find":</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_filter_add_str(filter, _calendar_todo.summary,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_MATCH_CONTAINS, &quot;summary to find&quot;);
+    calendar_filter_add_str(filter, _calendar_todo.summary,
+                            CALENDAR_MATCH_CONTAINS, "summary to find");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter add condition failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "filter add condition failed: %x\n", error_code);
 </pre>
 </li>
 <li>
 <p>To add more conditions, define an operator between the conditions.</p>
-<p>The following example first adds an AND operator and then a string-based filtering condition that retrieves the todos whose description field contains the string &quot;description to find&quot;.</p>
-<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves the todos that contain &quot;summary to find&quot; in their summary and &quot;description to find&quot; in their description.</p>
+<p>The following example first adds an AND operator and then a string-based filtering condition that retrieves the todos whose description field contains the string "description to find".</p>
+<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves the todos that contain "summary to find" in their summary and "description to find" in their description.</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
+    calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_filter_add_operator failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_filter_add_operator failed: %x\n", error_code);
 
 error_code = calendar_filter_add_str(filter, _calendar_todo.description,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_MATCH_CONTAINS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;description to find&quot;);
+                                     CALENDAR_MATCH_CONTAINS,
+                                     "description to find");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter add condition failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "filter add condition failed: %x\n", error_code);
 </pre>
 <p>You can also create a filter with integer and time conditions. For example, to filter all completed todos:</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_filter_add_int(filter, _calendar_todo.todo_status,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_MATCH_EQUAL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR_TODO_STATUS_COMPLETED);
+    calendar_filter_add_int(filter, _calendar_todo.todo_status,
+                            CALENDAR_MATCH_EQUAL,
+                            CALENDAR_TODO_STATUS_COMPLETED);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter add condition failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "filter add condition failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1769,8 +1769,8 @@ if (error_code != CALENDAR_ERROR_NONE)
 <pre class="prettyprint">
 error_code = calendar_query_set_filter(query, filter);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_query_set_filter failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_query_set_filter failed: %x\n", error_code);
 </pre>
 </li>
 <li>
@@ -1778,9 +1778,9 @@ if (error_code != CALENDAR_ERROR_NONE)
 <pre class="prettyprint">
 error_code = calendar_db_get_records_with_query(query, 0, 0, &amp;list);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_get_records_with_query failed: %x\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_get_records_with_query failed: %x\n",
+               error_code);
 </pre>
 <p>The third parameter defines a limit for the number of results. If you set it to 0, the list returns all todos matching the query.</p>
 </li>
@@ -1807,18 +1807,18 @@ calendar_query_destroy(query);
         <strong>Note</strong>
         Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
     </div>
-       
+
 <p>The following example iterates through the list and retrieves the summary of each todo:</p>
 <pre class="prettyprint">
 calendar_record_h record;
 while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;char* summary;
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_record_get_str_p(record, _calendar_todo.summary, &amp;summary);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;summary: %s\n&quot;, summary);
+    char* summary;
+    calendar_record_get_str_p(record, _calendar_todo.summary, &amp;summary);
+    dlog_print(DLOG_ERROR, LOG_TAG, "summary: %s\n", summary);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    error_code = calendar_list_next(list);
+    if (error_code != CALENDAR_ERROR_NONE)
+        break;
 }
 </pre>
 </li>
@@ -1828,24 +1828,24 @@ while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_N
 calendar_gl_todo_data_t *gl_todo_data = NULL;
 calendar_record_h record = NULL;
 while (calendar_list_get_current_record_p(list, &amp;record) == CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;gl_todo_data = _create_gl_todo_data(record);
-&nbsp;&nbsp;&nbsp;&nbsp;/* You can get, for example, summary: */
-&nbsp;&nbsp;&nbsp;&nbsp;/* gl_todo_data-&gt;summary */
+    gl_todo_data = _create_gl_todo_data(record);
+    /* You can get, for example, summary: */
+    /* gl_todo_data-&gt;summary */
 
-&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
+    _free_gl_todo_data(gl_todo_data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    error_code = calendar_list_next(list);
+    if (error_code != CALENDAR_ERROR_NONE)
+        break;
 }
 </pre>
 <p>Define the <code>calendar_gl_todo_data_t</code> structure and the functions for using the structure:</p>
 <pre class="prettyprint">
 struct _calendar_gl_todo_data {
-&nbsp;&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;&nbsp;char *summary;
-&nbsp;&nbsp;&nbsp;&nbsp;char *description;
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_time_s due_time;
+    int id;
+    char *summary;
+    char *description;
+    calendar_time_s due_time;
 };
 typedef struct _calendar_gl_todo_data calendar_gl_todo_data_t;
 
@@ -1853,62 +1853,62 @@ typedef struct _calendar_gl_todo_data calendar_gl_todo_data_t;
 static void
 _free_gl_todo_data(calendar_gl_todo_data_t *gl_todo_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == gl_todo_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (NULL == gl_todo_data)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_todo_data-&gt;summary);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_todo_data-&gt;description);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_todo_data);
+    free(gl_todo_data-&gt;summary);
+    free(gl_todo_data-&gt;description);
+    free(gl_todo_data);
 }
 
 /* Create the structure for a todo */
 static calendar_gl_todo_data_t*
 _create_gl_todo_data(calendar_record_h record)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_gl_todo_data_t *gl_todo_data;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;&nbsp;gl_todo_data = malloc(sizeof(calendar_gl_todo_data_t));
-&nbsp;&nbsp;&nbsp;&nbsp;memset(gl_todo_data, 0x0, sizeof(calendar_gl_todo_data_t));
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_todo.summary,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_todo_data-&gt;summary);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get summary failed: %x\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_str(record, _calendar_todo.description,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_todo_data-&gt;description);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;get description failed: %x\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_int(record, _calendar_todo.id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_todo_data-&gt;id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get id failed: %x\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_record_get_caltime(record, _calendar_todo.due_time,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_todo_data-&gt;due_time);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get due_time failed: %x\n&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(gl_todo_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return gl_todo_data;
+    calendar_gl_todo_data_t *gl_todo_data;
+    int error_code;
+
+    gl_todo_data = malloc(sizeof(calendar_gl_todo_data_t));
+    memset(gl_todo_data, 0x0, sizeof(calendar_gl_todo_data_t));
+
+    error_code = calendar_record_get_str(record, _calendar_todo.summary,
+                                         &amp;gl_todo_data-&gt;summary);
+    if (error_code != CALENDAR_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get summary failed: %x\n", error_code);
+        _free_gl_todo_data(gl_todo_data);
+
+        return NULL;
+    }
+
+    error_code = calendar_record_get_str(record, _calendar_todo.description,
+                                         &amp;gl_todo_data-&gt;description);
+    if (error_code != CALENDAR_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "get description failed: %x\n", error_code);
+        _free_gl_todo_data(gl_todo_data);
+
+        return NULL;
+    }
+
+    error_code = calendar_record_get_int(record, _calendar_todo.id,
+                                         &amp;gl_todo_data-&gt;id);
+    if (error_code != CALENDAR_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get id failed: %x\n", error_code);
+        _free_gl_todo_data(gl_todo_data);
+
+        return NULL;
+    }
+
+    error_code = calendar_record_get_caltime(record, _calendar_todo.due_time,
+                                             &amp;gl_todo_data-&gt;due_time);
+    if (error_code != CALENDAR_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get due_time failed: %x\n", error_code);
+        _free_gl_todo_data(gl_todo_data);
+
+        return NULL;
+    }
+
+    return gl_todo_data;
 }
 </pre>
 <p>To access a specific todo detail in a child record, retrieve the child record.</p>
@@ -1938,7 +1938,7 @@ calendar_record_h record;
 const int todo_id = ...; /* Get the todo ID */
 error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_db_get_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_record failed: %x\n", error_code);
 </pre>
 
 <p>You can also retrieve the todo using a search function, such as <code>calendar_db_get_records_with_query()</code>.</p>
@@ -1949,14 +1949,14 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>Set the properties you want to update.</p>
 <p>The following example sets a new subject and description for the todo:</p>
 <pre class="prettyprint">
-error_code = calendar_record_set_str(record, _calendar_todo.summary, &quot;summary updated&quot;);
+error_code = calendar_record_set_str(record, _calendar_todo.summary, "summary updated");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set summary failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set summary failed: %x\n", error_code);
 
 error_code = calendar_record_set_str(record, _calendar_todo.description,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;description updated&quot;);
+                                     "description updated");
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set description failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set description failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1965,8 +1965,8 @@ if (error_code != CALENDAR_ERROR_NONE)
 <pre class="prettyprint">
 error_code = calendar_db_update_record(record);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_update_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_update_record failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -1987,7 +1987,7 @@ calendar_record_destroy(record, true);
 int todo_id = ...; /* Get the todo ID */
 error_code = calendar_db_delete_record(_calendar_todo._uri, todo_id);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_db_delete_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_delete_record failed: %x\n", error_code);
 </pre>
 
 <h2 id="monitor" name="monitor">Monitoring Todo Changes</h2>
@@ -2000,10 +2000,10 @@ if (error_code != CALENDAR_ERROR_NONE)
 <p>Register a callback using the <code>calendar_db_add_changed_cb()</code> function:</p>
 <pre class="prettyprint">
 error_code = calendar_db_add_changed_cb(_calendar_todo._uri, _todo_changed_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                        NULL);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_add_changed_cb failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_db_add_changed_cb failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -2016,26 +2016,26 @@ static calendar_gl_todo_data_t *_gl_todo_data = ...;
 static void
 _todo_changed_callback(const char *view_uri, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _calendar_todo._uri))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (0 != strcmp(view_uri, _calendar_todo._uri))
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == _gl_todo_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (NULL == _gl_todo_data)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int todo_id = _gl_todo_data-&gt;id;
-&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_todo_data(_gl_todo_data);
-&nbsp;&nbsp;&nbsp;&nbsp;_gl_todo_data = NULL;
+    int todo_id = _gl_todo_data-&gt;id;
+    _free_gl_todo_data(_gl_todo_data);
+    _gl_todo_data = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_record_h record = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_error_e error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    calendar_record_h record = NULL;
+    calendar_error_e error_code;
+    error_code = calendar_db_get_record(_calendar_todo._uri, todo_id, &amp;record);
+    if (error_code != CALENDAR_ERROR_NONE)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;_gl_todo_data = _create_gl_todo_data(record);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use _gl_todo_data */
+    _gl_todo_data = _create_gl_todo_data(record);
+    /* Use _gl_todo_data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;calendar_record_destroy(record, true);
+    calendar_record_destroy(record, true);
 }
 </pre>
 </li>
@@ -2055,7 +2055,7 @@ int event_id = ...; /* Get the event ID */
 calendar_record_h record = NULL;
 error_code = calendar_db_get_record(_calendar_event._uri, event_id, &amp;record);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_db_get_record failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_record failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -2067,16 +2067,16 @@ calendar_list_h list = NULL;
 
 error_code = calendar_list_create(&amp;list);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_list_create failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_list_create failed: %x\n", error_code);
 
 error_code = calendar_list_add(list, record);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;calendar_list_add failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "calendar_list_add failed: %x\n", error_code);
 
 error_code = calendar_vcalendar_make_from_records(list, &amp;vcalendar_stream);
 if (error_code != CALENDAR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_vcalendar_make_from_records failed: %x\n&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "calendar_vcalendar_make_from_records failed: %x\n", error_code);
 </pre>
 </li>
 
@@ -2101,16 +2101,16 @@ calendar_list_destroy(list, true);
 <pre class="prettyprint">
 char vcalendar_file_path[512] = {0};
 char *resource_path = app_get_resource_path();
-snprintf(vcalendar_file_path, sizeof(vcalendar_file_path), &quot;%s/%s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resource_path, &quot;vcalendar.ics&quot;);
+snprintf(vcalendar_file_path, sizeof(vcalendar_file_path), "%s/%s",
+         resource_path, "vcalendar.ics");
 free(resource_path);
 
 error_code = calendar_vcalendar_parse_to_calendar_foreach(/* vCalendar file path */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vcalendar_file_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Callback to invoke */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_vcalendar_parse_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* User data for callback */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                          vcalendar_file_path,
+                                                          /* Callback to invoke */
+                                                          _vcalendar_parse_cb,
+                                                          /* User data for callback */
+                                                          NULL);
 </pre>
 </li>
 
@@ -2121,21 +2121,21 @@ error_code = calendar_vcalendar_parse_to_calendar_foreach(/* vCalendar file path
 static bool
 _vcalendar_parse_cb(calendar_record_h record, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == record)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    if (NULL == record)
+        return false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int id = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = calendar_db_insert_record(record, &amp;id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CALENDAR_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;calendar_db_insert_record failed: %x\n&quot;, error_code);
+    int id = -1;
+    error_code = calendar_db_insert_record(record, &amp;id);
+    if (error_code != CALENDAR_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "calendar_db_insert_record failed: %x\n", error_code);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;inserted id: %d\n&quot;, id);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use record */
+        return false;
+    }
+    dlog_print(DLOG_ERROR, LOG_TAG, "inserted id: %d\n", id);
+    /* Use record */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/personal/contacts_n.htm b/org.tizen.guides/html/native/personal/contacts_n.htm
index 7d60b9e..84ce009 100644 (file)
--- a/org.tizen.guides/html/native/personal/contacts_n.htm
+++ b/org.tizen.guides/html/native/personal/contacts_n.htm
@@ -113,7 +113,7 @@
   <h1>Contacts</h1>
 
 <p>You can help the user to manage their contact information, such as address books, groups, persons, and phone logs. Since the contact information is stored in a contacts database, you must <a href="#prerequisites">connect to the contact service</a> to manage the information.</p>
-  
+
 <p>The following figure illustrates the structure of the contact information in the database:</p>
 <ul>
        <li>Each contact has their own details, such as a name, phone number, and email address.</li>
@@ -163,16 +163,16 @@
 <li>Phone logs
        <ul><li>You can <a href="#pl_create">create and store call or message logs</a>.</li>
        <li>You can <a href="#pl_delete">delete logs</a>.</li></ul></li></ul>
-       
+
   <p>The contact service supports <a href="#vcard">vCards</a>, allowing you to import contact information from a vCard or export it to a vCard format. You can also <a href="#sim">import contacts from the device SIM card</a> to the contacts database.</p>
-  
+
 <p>The following figure illustrates the different entities and their relationships in the contact service.</p>
 
   <p align="center"><strong>Figure: Contact entities</strong></p>
   <p align="center"><img alt="Contact entities" src="../../images/contacts_contact_entity.png" /></p>
-  
 
-  
+
+
   <h2 id="person" name="person">Links Between Contacts and Persons</h2>
 <p>Each contact is linked to at least 1 person, which is a kind of virtual contact that can be used to combine the details when multiple contacts from different address books represent the same individual.</p>
 <p>The linking between contacts and persons functions as follows:</p>
@@ -196,7 +196,7 @@
    <p align="center"><img alt="Unlinking a contact" src="../../images/contacts_unlink_contact.png" /></p>
   </li>
   </ul>
-  
+
 
   <h2 id="record" name="record">Records</h2>
 
@@ -218,7 +218,7 @@ contacts_record_create(_contacts_contact._uri, &amp;contact);
 contacts_record_h name = NULL;
 /* Create a name record and receive a handle for it */
 contacts_record_create(_contacts_name._uri, &amp;name);
-contacts_record_set_str(name, _contacts_name.first, &quot;first name&quot;);
+contacts_record_set_str(name, _contacts_name.first, "first name");
 contacts_record_add_child_record(contact, _contacts_contact.name, name);
 </pre>
 </li>
@@ -231,7 +231,7 @@ contacts_db_insert_record(contact, &amp;contact_id);
 contacts_record_destroy(contact, true); /* Contact is no longer usable */
 
 /* Retrieve the record; contact is now a handle to the same record as before */
-contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;contact); 
+contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;contact);
 char *display_name = NULL;
 contacts_record_get_str(contact, _contacts_contact.display_name, &amp;display_name);
 contacts_record_destroy(contact, true); /* Contact is no longer usable */
@@ -247,11 +247,11 @@ int i = 0;
 contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;contact);
 contacts_record_get_child_record_count(contact, _contacts_contact.address, &amp;address_num);
 for (i = 0; i &lt; address_num; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h address = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the address record handle */
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_at_p(contact, _contacts_contact.address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i, &amp;address);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_set_str(address, _contacts_address.country, &quot;Korea&quot;);
+    contacts_record_h address = NULL;
+    /* Get the address record handle */
+    contacts_record_get_child_record_at_p(contact, _contacts_contact.address,
+                                          i, &amp;address);
+    contacts_record_set_str(address, _contacts_address.country, "Korea");
 }
 contacts_db_update_record(contact);
 contacts_record_destroy(contact, true);
@@ -271,7 +271,7 @@ contacts_record_destroy(contact, true);
 </li>
 <li id="view">Views
 <p>Views are provided to access and handle entities. A data-view is a structure, which has property elements. For example, the <code>_contacts_contact</code> view describes the properties of the contact record. Its properties include, for example, name, company, and nickname of the contact. The property elements have their data types and names. The generic access functions, such as <code>contacts_db_insert_record()</code> and <code>contacts_record_get_int()</code>, can be used to access the contact views.</p>
-<p>The record types that have <code>*_id</code> as their property, hold identifiers of other records. For example, the name, number, and email views hold the ID of their corresponding contacts in the <code>contact_id</code> property as children of the corresponding contact records. A data-view is almost the same as a database &quot;VIEW&quot;, which limits access and guarantees performance. A &quot;record&quot; represents a single row of the data-views.</p>
+<p>The record types that have <code>*_id</code> as their property, hold identifiers of other records. For example, the name, number, and email views hold the ID of their corresponding contacts in the <code>contact_id</code> property as children of the corresponding contact records. A data-view is almost the same as a database "VIEW", which limits access and guarantees performance. A "record" represents a single row of the data-views.</p>
 
 <p>The property type <code>record</code> means that the parent record can have child records. For example, a contact record has <code>name</code>, <code>number</code>, and <code>email</code> properties, which means that records of those types can be children of the contact type records. The following figure illustrates macros in a <code>contacts_view.h</code> header file.</p>
 
@@ -328,12 +328,12 @@ contacts_record_destroy(contact, true);
 <pre class="prettyprint">
 char *resource_path = app_get_resource_path();
 char ringtone_path[1024];
-snprintf(ringtone_path, sizeof(ringtone_path), &quot;%s/ringtone.mp3&quot;, resource_path);
+snprintf(ringtone_path, sizeof(ringtone_path), "%s/ringtone.mp3", resource_path);
 free(resource_path);
 contacts_record_set_str(contact, _contacts_contact.ringtone_path, ringtone_path);
 </pre>
 <p>With a record handle, you can access all records of a specific type related to the given record.</p>
-  
+
     <div class="note">
         <strong>Note</strong>
         The string getter functions have the <code>_p</code> postfix. It means that the returned value should not be freed by the application, as it is a pointer to data in an existing record.
@@ -374,13 +374,13 @@ contacts_record_create(_contacts_contact._uri, &amp;contact);
 contacts_record_create(_contacts_image._uri, &amp;image);
 char *resource_path = app_get_resource_path();
 char caller_id_path[1024];
-snprintf(caller_id_path, sizeof(caller_id_path), &quot;%s/caller_id.jpg&quot;, resource_path);
+snprintf(caller_id_path, sizeof(caller_id_path), "%s/caller_id.jpg", resource_path);
 free(resource_path);
 contacts_record_set_str(image, _contacts_image.path, caller_id_path);
 contacts_record_add_child_record(contact, _contacts_contact.image, image);
 
 contacts_record_create(_contacts_address._uri, &amp;address);
-contacts_record_set_str(address, _contacts_address.country, &quot;Korea&quot;);
+contacts_record_set_str(address, _contacts_address.country, "Korea");
 contacts_record_add_child_record(contact, _contacts_contact.address, address);
 
 /* Insert contact to the database */
@@ -392,12 +392,12 @@ contacts_record_destroy(contact, true);</pre>
         <strong>Note</strong>
         For an application to insert private images in contacts, the following conditions apply:
         <ul><li>The application must have the <code>http://tizen.org/privilege/contact.write</code> privilege to use the database modifying functions, such as <code>contacts_db_insert_record()</code>.</li>
-        <li>The application&#39;s private directory and files must have the <code>read</code> permission of others, such as <code>644</code>. SMACK protects the <code>read</code> permission from the other applications.</li>
+        <li>The application's private directory and files must have the <code>read</code> permission of others, such as <code>644</code>. SMACK protects the <code>read</code> permission from the other applications.</li>
         <li>The application can erase the image after destroying the contact record using the <code>contacts_record_destroy()</code> function.</li></ul>
     </div>
 
 
-<p>Identifiers can be used to establish a relationship between 2 records. The following code example sets an address record&#39;s <code>contact_id</code> property to the ID of the contact. The <code>contact_id</code> relates between the address record and the contact which is identified by the <code>contact_id</code>. After the ID is set, the address becomes one of the addresses connected to the contact. The address is now the contact&#39;s child record, and the contact is the parent record.</p>
+<p>Identifiers can be used to establish a relationship between 2 records. The following code example sets an address record's <code>contact_id</code> property to the ID of the contact. The <code>contact_id</code> relates between the address record and the contact which is identified by the <code>contact_id</code>. After the ID is set, the address becomes one of the addresses connected to the contact. The address is now the contact's child record, and the contact is the parent record.</p>
 
 <pre class="prettyprint">
 int contact_id = ... /* Acquire the ID of the created contact */
@@ -411,7 +411,7 @@ contacts_db_insert_record(address, &amp;address_id);
 </pre>
 
 
-  
+
 <h2 id="list" name="list">Contact Lists and Batch Operations</h2>
 
 <p>The contact service provides functions which can handle lists of records with the same type. The list concept is based on a standard doubly-linked list.</p>
@@ -462,12 +462,12 @@ contacts_list_h list = NULL;
 contacts_record_h record = NULL;
 contacts_db_get_all_records(_contacts_person._uri, 0, 0, &amp;list);
 do {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_get_current_record_p(list, &amp;record);
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == record)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(record, _contacts_person.display_name, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;name=%s&quot;, name);
+    contacts_list_get_current_record_p(list, &amp;record);
+    if (NULL == record)
+        break;
+    char *name = NULL;
+    contacts_record_get_str_p(record, _contacts_person.display_name, &amp;name);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "name=%s", name);
 } while (CONTACTS_ERROR_NONE == contacts_list_next(list));
 contacts_list_destroy(list, true); /* Destroy child records automatically */
 </pre>
@@ -480,11 +480,11 @@ contacts_list_destroy(list, true); /* Destroy child records automatically */
 <pre class="prettyprint">
 contacts_record_h group1 = NULL;
 contacts_record_create(_contacts_group._uri, &amp;group1);
-contacts_record_set_str(group1, _contacts_group.name, &quot;group test1&quot;);
+contacts_record_set_str(group1, _contacts_group.name, "group test1");
 
 contacts_record_h group2 = NULL;
 contacts_record_create(_contacts_group._uri, &amp;group2);
-contacts_record_set_str(group2, _contacts_group.name, &quot;group test2&quot;);
+contacts_record_set_str(group2, _contacts_group.name, "group test2");
 
 contacts_list_h list = NULL;
 contacts_list_create(&amp;list);
@@ -562,10 +562,10 @@ free(ids);
 <p>The following example creates a composite filter with the <code>OR</code> operator.</p>
 <pre class="prettyprint">
 contacts_filter_add_str(filter1, _contacts_person.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_CONTAINS, &quot;1234&quot;);
+                        CONTACTS_MATCH_CONTAINS, "1234");
 contacts_filter_add_operator(filter1, CONTACTS_FILTER_OPERATOR_OR);
 contacts_filter_add_str(filter1, _contacts_person.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_CONTAINS, &quot;5678&quot;);
+                        CONTACTS_MATCH_CONTAINS, "5678");
 </pre>
 </li>
 <li>
@@ -574,10 +574,10 @@ contacts_filter_add_str(filter1, _contacts_person.display_name,
 <p>The following example creates a joined filter with the <code>AND</code> operator.</p>
 <pre class="prettyprint">
 contacts_filter_add_str(filter1, _contacts_person.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_CONTAINS, &quot;1234&quot;);
+                        CONTACTS_MATCH_CONTAINS, "1234");
 contacts_filter_add_operator(filter1, CONTACTS_FILTER_OPERATOR_OR);
 contacts_filter_add_str(filter1, _contacts_person.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_CONTAINS, &quot;5678&quot;);
+                        CONTACTS_MATCH_CONTAINS, "5678");
 
 contacts_filter_add_bool(filter2, _contacts_person.is_favorite, true);
 
@@ -629,7 +629,7 @@ Condition C3</td>
   </li>
 </ul>
 
-<p>The following example creates a filter which accepts addresses with their contact&#39;s ID equal to a given ID (integer filter), or their country property equal to &quot;Korea&quot; (string filter). To get the filtered results, create a query and add the filter to it. The results are received in a list.</p>
+<p>The following example creates a filter which accepts addresses with their contact's ID equal to a given ID (integer filter), or their country property equal to "Korea" (string filter). To get the filtered results, create a query and add the filter to it. The results are received in a list.</p>
 <pre class="prettyprint">
 contacts_filter_h filter = NULL;
 contacts_list_h list = NULL;
@@ -637,10 +637,10 @@ contacts_query_h query = NULL;
 
 contacts_filter_create(_contacts_address._uri, &amp;filter);
 contacts_filter_add_int(filter, _contacts_address.contact_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_EQUAL, id);
+                        CONTACTS_MATCH_EQUAL, id);
 contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
 contacts_filter_add_str(filter, _contacts_address.country,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_EXACTLY, &quot;Korea&quot;);
+                        CONTACTS_MATCH_EXACTLY, "Korea");
 contacts_query_create(_contacts_address._uri, &amp;query);
 contacts_query_set_filter(query, filter);
 
@@ -661,7 +661,7 @@ contacts_list_destroy(list, true);
 <p>The following example sorts the query results by the person ID:</p>
 <pre class="prettyprint">
 contacts_filter_add_str(filter, _contacts_person.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_CONTAINS, &quot;Joe&quot;);
+                        CONTACTS_MATCH_CONTAINS, "Joe");
 contacts_query_set_filter(query, filter);
 contacts_query_set_sort(query, _contacts_person.id, true);
 
@@ -676,22 +676,22 @@ contacts_list_destroy(person_list, true);
 
 <p>Projection allows you to query data for specific properties of a record, at lower latency and cost than retrieving all properties. To use projection, use the <code>contacts_query_set_projection()</code> function.</p>
 
-<p>The following example creates a filter which gets only the person ID, display name, and image thumbnail path from the person records which have &quot;test&quot; (string filter) as the vibration path. Create a query and add the filter to it; the results are received in a list.</p>
+<p>The following example creates a filter which gets only the person ID, display name, and image thumbnail path from the person records which have "test" (string filter) as the vibration path. Create a query and add the filter to it; the results are received in a list.</p>
 <pre class="prettyprint">
 contacts_filter_add_str(filter, _contacts_person.vibration,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_CONTAINS, &quot;test&quot;);
+                        CONTACTS_MATCH_CONTAINS, "test");
 contacts_query_set_filter(query, filter);
 
 /* Set projections */
 unsigned int person_projection[] =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person.id,
-&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person.image_thumbnail_path,
+    _contacts_person.id,
+    _contacts_person.display_name,
+    _contacts_person.image_thumbnail_path,
 };
 
 contacts_query_set_projection(query, person_projection,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(person_projection)/sizeof(int));
+                              sizeof(person_projection)/sizeof(int));
 
 contacts_db_get_records_with_query(query, 0, 0, &amp;person_list);
 
@@ -710,8 +710,8 @@ contacts_list_destroy(person_list, true);
 <pre class="prettyprint">
 unsigned int projection[] =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person_number.person_id,
-&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person_number.display_name,
+    _contacts_person_number.person_id,
+    _contacts_person_number.display_name,
 };
 contacts_filter_create(_contacts_person_number._uri, &amp;filter);
 contacts_filter_add_bool(filter, _contacts_person_number.has_phonenumber, true);
@@ -740,10 +740,10 @@ contacts_filter_destroy(filter);
 <p>Clients wait for contact change notifications on the client side. If the contact is changed by another module, the server publishes a notification. The notification module broadcasts to the subscribed modules and a user callback function is called with the user data. The following example registers a person change notification callback:</p>
 
 <pre class="prettyprint">
-static void 
+static void
 __person_changed_cb(const char *view_uri, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Jobs for the callback function */
+    /* Jobs for the callback function */
 }
 /* Add a change notification callback */
 contacts_db_add_changed_cb(_contacts_person._uri, __person_changed_cb, NULL);
@@ -777,18 +777,18 @@ contacts_list_destroy(list, true);
 static bool
 __vcard_parse_cb(contacts_record_h record, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int id = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_db_insert_record(record, &amp;id);
+    int id = 0;
+    contacts_db_insert_record(record, &amp;id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Return false to break out of the loop */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Return true to continue with the next iteration of the loop */
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    /* Return false to break out of the loop */
+    /* Return true to continue with the next iteration of the loop */
+    return true;
 }
 
 /* Parse the vCard from a file */
 char *resource_path = app_get_resource_path();
 char vcard_path[1024];
-snprintf(vcard_path, sizeof(vcard_path), &quot;%s/vcard.vcf&quot;, resource_path);
+snprintf(vcard_path, sizeof(vcard_path), "%s/vcard.vcf", resource_path);
 free(resource_path);
 contacts_vcard_parse_to_contact_foreach(vcard_path, __vcard_parse_cb, NULL);
 </pre>
@@ -820,10 +820,10 @@ contacts_record_destroy(contact, true);
 <p>To use the Contacts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/contact.read&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/contact.write&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/callhistory.read&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/callhistory.write&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/contact.read&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/contact.write&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/callhistory.read&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/callhistory.write&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -881,7 +881,7 @@ error_code = contacts_record_create(_contacts_contact._uri, &amp;contact);
 <p>Set the contact properties:</p>
 <ul>
 <li>
-<p>To set the contact&#39;s name:</p>
+<p>To set the contact's name:</p>
 <ol type="a">
 <li>
 <p>Create a name record using the <code>contacts_record_create()</code> function with the <code>_contacts_name._uri</code> property as the first parameter:</p>
@@ -892,22 +892,22 @@ error_code = contacts_record_create(_contacts_name._uri, &amp;name);
 </pre>
 </li>
 <li>
-<p>Set the contact&#39;s first name using the <code>contacts_record_set_str()</code> function with the <code>_contacts_name.first</code> property as the second parameter:</p>
+<p>Set the contact's first name using the <code>contacts_record_set_str()</code> function with the <code>_contacts_name.first</code> property as the second parameter:</p>
 <pre class="prettyprint">
-error_code = contacts_record_set_str(name, _contacts_name.first, &quot;John&quot;);
+error_code = contacts_record_set_str(name, _contacts_name.first, "John");
 </pre>
 </li>
 <li>
-<p>Set the contact&#39;s last name using the <code>contacts_record_set_str()</code> function with the <code>_contacts_name.last</code> property as the second parameter:</p>
+<p>Set the contact's last name using the <code>contacts_record_set_str()</code> function with the <code>_contacts_name.last</code> property as the second parameter:</p>
 <pre class="prettyprint">
-error_code = contacts_record_set_str(name, _contacts_name.last, &quot;Smith&quot;);
+error_code = contacts_record_set_str(name, _contacts_name.last, "Smith");
 </pre>
 </li>
 <li>
 <p>Set the name record as a child record of the contact record using the <code>contacts_record_add_child_record()</code> function with the <code>_contacts_contact.name</code> property as the second parameter:</p>
 <pre class="prettyprint">
 error_code = contacts_record_add_child_record(contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.name, name);
+                                              _contacts_contact.name, name);
 </pre>
 </li>
 </ol>
@@ -929,17 +929,17 @@ error_code = contacts_record_create(_contacts_image._uri, &amp;image);
 char *resource_path = app_get_resource_path();
 char caller_id_path[1024];
 snprintf(caller_id_path, sizeof(caller_id_path),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;%s/caller_id.jpg&quot;, resource_path);
+         "%s/caller_id.jpg", resource_path);
 free(resource_path);
 error_code = contacts_record_set_str(image, _contacts_image.path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;caller_id_path);
+                                     caller_id_path);
 </pre>
 </li>
 <li>
 <p>Set the image record as a child record of the contact record using the <code>contacts_record_add_child_record()</code> function with the <code>_contacts_contact.image</code> property as the second parameter:</p>
 <pre class="prettyprint">
 error_code = contacts_record_add_child_record(contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.image, image);
+                                              _contacts_contact.image, image);
 </pre>
 </li>
 </ol>
@@ -949,7 +949,7 @@ error_code = contacts_record_add_child_record(contact,
         <strong>Note</strong>
         To set private images for contacts, the application must meet the following conditions:
                 <ul>
-                    <li><p>The application&#39;s private directory and files must have the <code>read</code> permission for others, such as <code>644</code>. SMACK protects the <code>read</code> permission from other applications.</p></li>
+                    <li><p>The application's private directory and files must have the <code>read</code> permission for others, such as <code>644</code>. SMACK protects the <code>read</code> permission from other applications.</p></li>
                     <li><p>The application must delete the image after destroying the contact record (using the <code>contacts_record_destroy()</code> function).</p></li>
                 </ul>
     </div>
@@ -985,21 +985,21 @@ error_code = contacts_record_set_int(event, _contacts_event.date, int_date);
 <p>Set the event type to birthday using the <code>contacts_record_set_int()</code> function with the <code>_contacts_event.type</code> property as the second parameter and the <code>CONTACTS_EVENT_TYPE_BIRTH</code> enumerator as the third parameter:</p>
 <pre class="prettyprint">
 error_code = contacts_record_set_int(event, _contacts_event.type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_EVENT_TYPE_BIRTH);
+                                     CONTACTS_EVENT_TYPE_BIRTH);
 </pre>
 </li>
 <li>
 <p>Set the event record as a child record of the contact record using the <code>contacts_record_add_child_record()</code> function with the <code>_contacts_contact.event</code> property as the second parameter:</p>
 <pre class="prettyprint">
 error_code = contacts_record_add_child_record(contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event);
+                                              _contacts_contact.event,
+                                              event);
 </pre>
 </li>
 </ol>
 </li>
 <li>
-<p>To set the contact&#39;s phone number:</p>
+<p>To set the contact's phone number:</p>
 <ol type="a">
 <li>
 <p>Create a phone number record using the <code>contacts_record_create()</code> function with the <code>_contacts_number._uri</code> property as the first parameter:</p>
@@ -1013,15 +1013,15 @@ error_code = contacts_record_create(_contacts_number._uri, &amp;number);
 <p>Set the phone number using the <code>contacts_record_set_str()</code> function with the <code>_contacts_number.number</code> property as the second parameter:</p>
 <pre class="prettyprint">
 error_code = contacts_record_set_str(number, _contacts_number.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;+8210-1234-5678&quot;);
+                                     "+8210-1234-5678");
 </pre>
 </li>
 <li>
 <p>Set the phone number record as a child record of the contact record using the <code>contacts_record_add_child_record()</code> function with the <code>_contacts_contact.number</code> property as the second parameter:</p>
 <pre class="prettyprint">
 error_code = contacts_record_add_child_record(contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number);
+                                              _contacts_contact.number,
+                                              number);
 </pre>
 </li>
 </ol>
@@ -1118,22 +1118,22 @@ error_code = contacts_filter_create(_contacts_person._uri, &amp;filter);
 </li>
 <li>
 <p>Add a filtering condition using a <code>contacts_filter_add_XXX()</code> function.</p>
-<p>The following example adds a string-based filtering condition that retrieves the persons whose display name contains the string &quot;John&quot;:</p>
+<p>The following example adds a string-based filtering condition that retrieves the persons whose display name contains the string "John":</p>
 <pre class="prettyprint">
 error_code = contacts_filter_add_str(filter, _contacts_person.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_CONTAINS, &quot;John&quot;);
+                                     CONTACTS_MATCH_CONTAINS, "John");
 </pre>
 </li>
 <li>
 <p>To add more conditions, define an operator between the conditions.</p>
 <p>The following example first adds an AND operator and then a bool-based filtering condition that retrieves the persons who are set as favorites.</p>
-<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves the persons whose display name contains the string &quot;John&quot; and who are set as favorites.</p>
+<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves the persons whose display name contains the string "John" and who are set as favorites.</p>
 <pre class="prettyprint">
 error_code = contacts_filter_add_operator(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_FILTER_OPERATOR_AND);
+                                          CONTACTS_FILTER_OPERATOR_AND);
 
 error_code = contacts_filter_add_bool(filter, _contacts_person.is_favorite,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true);
+                                      true);
 </pre>
 </li>
 <li>
@@ -1160,12 +1160,12 @@ contacts_query_destroy(query);
 </li>
 <li>
 <p>To retrieve a list of persons matching a search keyword, use the <code>contacts_db_search_records()</code> function with the search keyword as the second parameter.</p>
-<p>The following example shows how to find all person records that contain the keyword &quot;John&quot;:</p>
+<p>The following example shows how to find all person records that contain the keyword "John":</p>
 <pre class="prettyprint">
 contacts_list_h list = NULL;
 
-error_code = contacts_db_search_records(_contacts_person._uri, &quot;John&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 0, &amp;list);
+error_code = contacts_db_search_records(_contacts_person._uri, "John",
+                                        0, 0, &amp;list);
 </pre>
 </li>
 </ul>
@@ -1183,19 +1183,19 @@ error_code = contacts_db_search_records(_contacts_person._uri, &quot;John&quot;,
         <strong>Note</strong>
         Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
     </div>
-       
+
 <p>The following example iterates through the list and retrieves the display name of each person:</p>
 <pre class="prettyprint">
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &amp;record)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;char *display_name;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;display_name: %s&quot;, display_name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+       == CONTACTS_ERROR_NONE) {
+    char *display_name;
+    error_code = contacts_record_get_str_p(record,
+                                           _contacts_person.display_name,
+                                           &amp;display_name);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "display_name: %s", display_name);
+
+    error_code = contacts_list_next(list);
 }
 </pre>
 </li>
@@ -1205,23 +1205,23 @@ while (contacts_list_get_current_record_p(list, &amp;record)
 contacts_gl_person_data_t *gl_person_data = NULL;
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &amp;record)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;gl_person_data = _create_gl_person_data(record);
-&nbsp;&nbsp;&nbsp;&nbsp;/* You can get, for example, display name: */
-&nbsp;&nbsp;&nbsp;&nbsp;/* gl_person_data-&gt;display_name */
+       == CONTACTS_ERROR_NONE) {
+    gl_person_data = _create_gl_person_data(record);
+    /* You can get, for example, display name: */
+    /* gl_person_data-&gt;display_name */
 
-&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
+    _free_gl_person_data(gl_person_data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+    error_code = contacts_list_next(list);
 }
 </pre>
 <p>Define the <code>contacts_gl_person_data_t</code> structure and the functions for using the structure:</p>
 <pre class="prettyprint">
 struct _contacts_gl_person_data {
-&nbsp;&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;&nbsp;char *display_name;
-&nbsp;&nbsp;&nbsp;&nbsp;char *default_phone_number;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_h associated_contacts;
+    int id;
+    char *display_name;
+    char *default_phone_number;
+    contacts_list_h associated_contacts;
 };
 typedef struct _contacts_gl_person_data contacts_gl_person_data_t;
 
@@ -1229,75 +1229,75 @@ typedef struct _contacts_gl_person_data contacts_gl_person_data_t;
 static void
 _free_gl_person_data(contacts_gl_person_data_t *gl_person_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == gl_person_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (NULL == gl_person_data)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_person_data-&gt;display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_person_data-&gt;default_phone_number);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_destroy(gl_person_data-&gt;associated_contacts, true);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_person_data);
+    free(gl_person_data-&gt;display_name);
+    free(gl_person_data-&gt;default_phone_number);
+    contacts_list_destroy(gl_person_data-&gt;associated_contacts, true);
+    free(gl_person_data);
 }
 
 /* Create the structure for a person */
 static contacts_gl_person_data_t*
 _create_gl_person_data(contacts_record_h record)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_gl_person_data_t *gl_person_data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;gl_person_data = malloc(sizeof(contacts_gl_person_data_t));
-&nbsp;&nbsp;&nbsp;&nbsp;memset(gl_person_data, 0x0, sizeof(contacts_gl_person_data_t));
-&nbsp;&nbsp;&nbsp;&nbsp;if (contacts_record_get_int(record, _contacts_person.id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_person_data-&gt;id) != CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get person id failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (false == _get_display_name(record, &amp;gl_person_data-&gt;display_name)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_display_name() failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (false == _get_default_phone_number(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_person_data-&gt;default_phone_number)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_default_phone_number() failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (false == _get_associated_contacts(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_person_data-&gt;associated_contacts)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;_get_associated_contacts() failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(gl_person_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;_print_phone_numbers(gl_person_data-&gt;associated_contacts);
-&nbsp;&nbsp;&nbsp;&nbsp;_print_events(gl_person_data-&gt;associated_contacts);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return gl_person_data;
+    contacts_gl_person_data_t *gl_person_data;
+
+    gl_person_data = malloc(sizeof(contacts_gl_person_data_t));
+    memset(gl_person_data, 0x0, sizeof(contacts_gl_person_data_t));
+    if (contacts_record_get_int(record, _contacts_person.id,
+                                &amp;gl_person_data-&gt;id) != CONTACTS_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get person id failed ");
+        _free_gl_person_data(gl_person_data);
+
+        return NULL;
+    }
+    if (false == _get_display_name(record, &amp;gl_person_data-&gt;display_name)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "_get_display_name() failed ");
+        _free_gl_person_data(gl_person_data);
+
+        return NULL;
+    }
+    if (false == _get_default_phone_number(record,
+                                           &amp;gl_person_data-&gt;default_phone_number)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "_get_default_phone_number() failed ");
+        _free_gl_person_data(gl_person_data);
+
+        return NULL;
+    }
+    if (false == _get_associated_contacts(record,
+                                          &amp;gl_person_data-&gt;associated_contacts)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "_get_associated_contacts() failed ");
+        _free_gl_person_data(gl_person_data);
+
+        return NULL;
+    }
+    _print_phone_numbers(gl_person_data-&gt;associated_contacts);
+    _print_events(gl_person_data-&gt;associated_contacts);
+
+    return gl_person_data;
 }
 </pre>
 
 <p>Define the functions for retrieving the person details:</p>
 <ul>
 <li>
-<p>Retrieve the person&#39;s display name using the <code>contacts_record_get_str()</code> function with the <code>_contacts_person.display_name</code> property as the second parameter:</p>
+<p>Retrieve the person's display name using the <code>contacts_record_get_str()</code> function with the <code>_contacts_person.display_name</code> property as the second parameter:</p>
 <pre class="prettyprint">
 static bool
 _get_display_name(contacts_record_h record, char **display_name)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
+    int error_code;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;display name: %s&quot;, *display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    error_code = contacts_record_get_str(record,
+                                         _contacts_person.display_name,
+                                         display_name);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "display name: %s", *display_name);
+    if (error_code != CONTACTS_ERROR_NONE)
+        return false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -1306,38 +1306,38 @@ _get_display_name(contacts_record_h record, char **display_name)
 <pre class="prettyprint">
 static bool
 _get_associated_contacts(contacts_record_h record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_h *associated_contacts)
+                         contacts_list_h *associated_contacts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;int person_id;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the person ID from the person record */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_person.id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;person_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a contact query with a filter for the person ID */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = CONTACTS_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_contact._uri, &amp;query);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_contact._uri, &amp;filter);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_int(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.person_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_EQUAL, person_id);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Query to get a list of all contacts associated with the person ID */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;associated_contacts);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the handles and release all their resources */
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    int error_code;
+    int person_id;
+    contacts_query_h query = NULL;
+    contacts_filter_h filter = NULL;
+
+    /* Retrieve the person ID from the person record */
+    error_code = contacts_record_get_int(record, _contacts_person.id,
+                                         &amp;person_id);
+
+    /* Create a contact query with a filter for the person ID */
+    error_code = CONTACTS_ERROR_NONE;
+    error_code += contacts_query_create(_contacts_contact._uri, &amp;query);
+    error_code += contacts_filter_create(_contacts_contact._uri, &amp;filter);
+    error_code += contacts_filter_add_int(filter,
+                                          _contacts_contact.person_id,
+                                          CONTACTS_MATCH_EQUAL, person_id);
+    error_code += contacts_query_set_filter(query, filter);
+
+    /* Query to get a list of all contacts associated with the person ID */
+    error_code += contacts_db_get_records_with_query(query, 0, 0,
+                                                     associated_contacts);
+
+    /* Destroy the handles and release all their resources */
+    contacts_filter_destroy(filter);
+    contacts_query_destroy(query);
+
+    if (error_code != CONTACTS_ERROR_NONE)
+        return false;
+
+    return true;
 }
 </pre>
 </li>
@@ -1347,124 +1347,124 @@ _get_associated_contacts(contacts_record_h record,
 static void
 _print_phone_numbers(contacts_list_h associated_contacts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h contact;
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == associated_contacts) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;associated_contacts is NULL&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;/* Iterate through the list of associated contacts */
-&nbsp;&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(associated_contacts, &amp;contact)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Determine the number of phone number records
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   associated with the contact (as child records)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_count(contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_record_get_child_record_count(%d)&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Iterate through the contact&#39;s phone number records
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   and retrieve the phone number details
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h number = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_at_p(contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i, &amp;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the phone number ID */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int number_id;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(number, _contacts_number.id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;number_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;number id: %d&quot;, number_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the actual phone number */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *number_str = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(number, _contacts_number.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;number_str);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;number: %s&quot;, number_str);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(associated_contacts);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int error_code;
+    contacts_record_h contact;
+    if (NULL == associated_contacts) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "associated_contacts is NULL");
+
+        return;
+    }
+    /* Iterate through the list of associated contacts */
+    while (contacts_list_get_current_record_p(associated_contacts, &amp;contact)
+           == CONTACTS_ERROR_NONE) {
+        int i;
+        unsigned int count = 0;
+
+        /*
+           Determine the number of phone number records
+           associated with the contact (as child records)
+        */
+        error_code =
+            contacts_record_get_child_record_count(contact,
+                                                   _contacts_contact.number,
+                                                   &amp;count);
+        if (CONTACTS_ERROR_NONE != error_code) {
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "contacts_record_get_child_record_count(%d)",
+                       error_code);
+
+            return;
+        }
+        /*
+           Iterate through the contact's phone number records
+           and retrieve the phone number details
+        */
+        for (i = 0; i &lt; count; i++) {
+            contacts_record_h number = NULL;
+            error_code =
+                contacts_record_get_child_record_at_p(contact,
+                                                      _contacts_contact.number,
+                                                      i, &amp;number);
+            if (error_code != CONTACTS_ERROR_NONE)
+                continue;
+
+            /* Retrieve the phone number ID */
+            int number_id;
+            contacts_record_get_int(number, _contacts_number.id,
+                                    &amp;number_id);
+            dlog_print(DLOG_DEBUG, LOG_TAG, "number id: %d", number_id);
+
+            /* Retrieve the actual phone number */
+            char *number_str = NULL;
+            contacts_record_get_str_p(number, _contacts_number.number,
+                                      &amp;number_str);
+            dlog_print(DLOG_DEBUG, LOG_TAG, "number: %s", number_str);
+        }
+        error_code = contacts_list_next(associated_contacts);
+    }
 }
 </pre>
 </li>
 <li>
-<p>Retrieve the person&#39;s default phone number.</p>
-<p>If a person is associated with multiple phone numbers, one of them is defined as the person&#39;s default phone number. To determine the default phone number, check the <code>is_primary_default</code> property of the <code>_contacts_person_number</code> view for the person&#39;s phone numbers. For the default phone number, the property is set to <code>true</code>.</p>
-<p>The following example shows how to retrieve a person&#39;s default phone number using a query:</p>
+<p>Retrieve the person's default phone number.</p>
+<p>If a person is associated with multiple phone numbers, one of them is defined as the person's default phone number. To determine the default phone number, check the <code>is_primary_default</code> property of the <code>_contacts_person_number</code> view for the person's phone numbers. For the default phone number, the property is set to <code>true</code>.</p>
+<p>The following example shows how to retrieve a person's default phone number using a query:</p>
 <pre class="prettyprint">
 static bool
 _get_default_phone_number(contacts_record_h record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char **default_phone_number)
+                          char **default_phone_number)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_h list = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h record_person_number = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int person_id;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = CONTACTS_ERROR_NONE;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the person ID from the person record */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_int(record, _contacts_person.id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;person_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Create a phone number query with filters
-&nbsp;&nbsp;&nbsp;&nbsp;   for the person ID and default phone number
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_person_number._uri,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;query);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_person_number._uri,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;filter);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_int(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person_number.person_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_EQUAL, person_id);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_operator(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_FILTER_OPERATOR_AND);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code +=
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_add_bool(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person_number.is_primary_default,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Query to get phone number records containing the default number */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0, &amp;list);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the current record from the query list */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_list_get_current_record_p(list,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;record_person_number);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the phone number from the phone number record */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_str(record_person_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person_number.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default_phone_number);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the handles and release all their resources */
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_destroy(list, true);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    contacts_query_h query = NULL;
+    contacts_filter_h filter = NULL;
+    contacts_list_h list = NULL;
+    contacts_record_h record_person_number = NULL;
+    int person_id;
+    int error_code = CONTACTS_ERROR_NONE;
+
+    /* Retrieve the person ID from the person record */
+    error_code += contacts_record_get_int(record, _contacts_person.id,
+                                          &amp;person_id);
+
+    /*
+       Create a phone number query with filters
+       for the person ID and default phone number
+    */
+    error_code += contacts_query_create(_contacts_person_number._uri,
+                                        &amp;query);
+    error_code += contacts_filter_create(_contacts_person_number._uri,
+                                         &amp;filter);
+    error_code += contacts_filter_add_int(filter,
+                                          _contacts_person_number.person_id,
+                                          CONTACTS_MATCH_EQUAL, person_id);
+    error_code += contacts_filter_add_operator(filter,
+                                               CONTACTS_FILTER_OPERATOR_AND);
+    error_code +=
+        contacts_filter_add_bool(filter,
+                                 _contacts_person_number.is_primary_default,
+                                 true);
+    error_code += contacts_query_set_filter(query, filter);
+
+    /* Query to get phone number records containing the default number */
+    error_code += contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+
+    /* Retrieve the current record from the query list */
+    error_code += contacts_list_get_current_record_p(list,
+                                                     &amp;record_person_number);
+
+    /* Retrieve the phone number from the phone number record */
+    error_code += contacts_record_get_str(record_person_number,
+                                          _contacts_person_number.number,
+                                          default_phone_number);
+
+    /* Destroy the handles and release all their resources */
+    contacts_list_destroy(list, true);
+    contacts_filter_destroy(filter);
+    contacts_query_destroy(query);
+
+    if (error_code != CONTACTS_ERROR_NONE)
+        return false;
+
+    return true;
 }
 </pre>
 </li>
@@ -1474,57 +1474,57 @@ _get_default_phone_number(contacts_record_h record,
 static void
 _print_events(contacts_list_h associated_contacts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h contact;
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == associated_contacts) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;associated_contacts is NULL&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;/* Iterate through the list of associated contacts */
-&nbsp;&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(associated_contacts,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;contact)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Determine the number of event records
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   associated with the contact (as child records)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_count(contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != error_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_record_get_child_record_count(%d)&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Iterate through the contact events and retrieve the details */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h event = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_at_p(contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i, &amp;event);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the event ID */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int event_id;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(event, _contacts_event.id, &amp;event_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;event id: %d&quot;, event_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the event date */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int date;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(event, _contacts_event.date, &amp;date);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;event: %d&quot;, date);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(associated_contacts);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int error_code;
+    contacts_record_h contact;
+    if (NULL == associated_contacts) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "associated_contacts is NULL");
+
+        return;
+    }
+    /* Iterate through the list of associated contacts */
+    while (contacts_list_get_current_record_p(associated_contacts,
+                                              &amp;contact)
+           == CONTACTS_ERROR_NONE) {
+        int i;
+        unsigned int count = 0;
+
+        /*
+           Determine the number of event records
+           associated with the contact (as child records)
+        */
+        error_code =
+            contacts_record_get_child_record_count(contact,
+                                                   _contacts_contact.event,
+                                                   &amp;count);
+        if (CONTACTS_ERROR_NONE != error_code) {
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "contacts_record_get_child_record_count(%d)",
+                       error_code);
+
+            return;
+        }
+        /* Iterate through the contact events and retrieve the details */
+        for (i = 0; i &lt; count; i++) {
+            contacts_record_h event = NULL;
+            error_code =
+                contacts_record_get_child_record_at_p(contact,
+                                                      _contacts_contact.event,
+                                                      i, &amp;event);
+            if (error_code != CONTACTS_ERROR_NONE)
+                continue;
+
+            /* Retrieve the event ID */
+            int event_id;
+            contacts_record_get_int(event, _contacts_event.id, &amp;event_id);
+            dlog_print(DLOG_DEBUG, LOG_TAG, "event id: %d", event_id);
+
+            /* Retrieve the event date */
+            int date;
+            contacts_record_get_int(event, _contacts_event.date, &amp;date);
+            dlog_print(DLOG_DEBUG, LOG_TAG, "event: %d", date);
+        }
+        error_code = contacts_list_next(associated_contacts);
+    }
 }
 </pre>
 </li>
@@ -1564,19 +1564,19 @@ error_code = contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;con
 <p>The following example sets a new first name for the contact:</p>
 <pre class="prettyprint">
 contacts_record_h name = NULL;
-/* Retrieve the contact&#39;s name record */
-/* Record index is set to 0, since there is only 1 child record of type &quot;name&quot; */
+/* Retrieve the contact's name record */
+/* Record index is set to 0, since there is only 1 child record of type "name" */
 error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, &amp;name);
+                                                   0, &amp;name);
 /* Change the first name in the name record */
-error_code = contacts_record_set_str(name, _contacts_name.first, &quot;Mark&quot;);
+error_code = contacts_record_set_str(name, _contacts_name.first, "Mark");
 </pre>
 <p>The following example sets a new birthday event for the contact:</p>
 <pre class="prettyprint">
 contacts_record_h event = NULL;
-/* Retrieve the contact&#39;s birthday event record */
+/* Retrieve the contact's birthday event record */
 error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, &amp;event);
+                                                   0, &amp;event);
 /* Change the date in the event record */
 int new_date = 1990 * 10000 + 6 * 100 + 21;
 error_code = contacts_record_set_int(event, _contacts_event.date, new_date);
@@ -1625,7 +1625,7 @@ error_code = contacts_db_delete_record(_contacts_person._uri, person_id);
 <ul>
 
 <li>
-<p>To manually link a person to another person, use the <code>contacts_person_link_person()</code> function. The function links the contacts of the other person (second parameter) to the base person (first parameter) and deletes the former from the contact database. The base person is left with both their original contacts and the other person&#39;s contacts.</p>
+<p>To manually link a person to another person, use the <code>contacts_person_link_person()</code> function. The function links the contacts of the other person (second parameter) to the base person (first parameter) and deletes the former from the contact database. The base person is left with both their original contacts and the other person's contacts.</p>
 <pre class="prettyprint">
 int person_id1 = ...; /* Get the base person ID */
 int person_id2 = ...; /* Get another person ID */
@@ -1643,20 +1643,20 @@ contacts_record_h contact = NULL;
 error_code = CONTACTS_ERROR_NONE;
 error_code += contacts_record_create(_contacts_contact._uri, &amp;contact);
 error_code += contacts_record_set_int(contact, _contacts_contact.link_mode,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_CONTACT_LINK_MODE_NONE);
+                                      CONTACTS_CONTACT_LINK_MODE_NONE);
 
 contacts_record_h name = NULL;
 error_code += contacts_record_create(_contacts_name._uri, &amp;name);
-error_code += contacts_record_set_str(name, _contacts_name.first, &quot;John&quot;);
+error_code += contacts_record_set_str(name, _contacts_name.first, "John");
 error_code += contacts_record_add_child_record(contact, _contacts_contact.name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name);
+                                               name);
 
 contacts_record_h number = NULL;
 error_code += contacts_record_create(_contacts_number._uri, &amp;number);
 error_code += contacts_record_set_str(number, _contacts_number.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;+8210-1234-5678&quot;);
+                                      "+8210-1234-5678");
 error_code += contacts_record_add_child_record(contact, _contacts_contact.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number);
+                                               number);
 
 /*
    Contact is linked automatically if an existing person
@@ -1676,7 +1676,7 @@ int contact_id = ...; /* Get the contact ID */
 int unlinked_person_id;
 
 error_code = contacts_person_unlink_contact(person_id, contact_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;unlinked_person_id);
+                                            &amp;unlinked_person_id);
 </pre>
 </li>
 
@@ -1749,8 +1749,8 @@ contacts_record_destroy(person, true);
 <p>Register a callback using the <code>contacts_db_add_changed_cb()</code> function:</p>
 <pre class="prettyprint">
 error_code = contacts_db_add_changed_cb(_contacts_person._uri,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_person_changed_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                        _person_changed_callback,
+                                        NULL);
 </pre>
 </li>
 
@@ -1763,26 +1763,26 @@ static contacts_gl_person_data_t *_gl_person_data = ...;
 static void
 _person_changed_callback(const char *view_uri, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _contacts_person._uri))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (0 != strcmp(view_uri, _contacts_person._uri))
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (_gl_person_data == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (_gl_person_data == NULL)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int person_id = _gl_person_data-&gt;id;
-&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_person_data(_gl_person_data);
-&nbsp;&nbsp;&nbsp;&nbsp;_gl_person_data = NULL;
+    int person_id = _gl_person_data-&gt;id;
+    _free_gl_person_data(_gl_person_data);
+    _gl_person_data = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h record = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;record);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    contacts_record_h record = NULL;
+    int error_code;
+    error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;record);
+    if (error_code != CONTACTS_ERROR_NONE)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;_gl_person_data = _create_gl_person_data(record);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use _gl_person_data */
+    _gl_person_data = _create_gl_person_data(record);
+    /* Use _gl_person_data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_destroy(record, true);
+    contacts_record_destroy(record, true);
 }
 </pre>
 </li>
@@ -1812,7 +1812,7 @@ error_code = contacts_record_create(_contacts_group._uri, &amp;group);
 <li>
 <p>To set the group name, use the <code>contacts_record_set_str()</code> function with the <code>_contacts_group.name</code> property as the second parameter:</p>
 <pre class="prettyprint">
-error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Neighbors&quot;);
+error_code = contacts_record_set_str(group, _contacts_group.name, "Neighbors");
 </pre>
 </li>
 <li>
@@ -1820,9 +1820,9 @@ error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Neighbor
 <pre class="prettyprint">
 char *resource_path = app_get_resource_path();
 char temp_path[1024];
-snprintf(temp_path, sizeof(temp_path), &quot;%s/group_image.jpg&quot;, resource_path);
+snprintf(temp_path, sizeof(temp_path), "%s/group_image.jpg", resource_path);
 error_code = contacts_record_set_str(group, _contacts_group.image_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp_path);
+                                     temp_path);
 free(resource_path);
 </pre>
 </li>
@@ -1831,9 +1831,9 @@ free(resource_path);
 <pre class="prettyprint">
 char *resource_path = app_get_resource_path();
 char temp_path[1024];
-snprintf(temp_path, sizeof(temp_path), &quot;%s/ringtone.mp3&quot;, resource_path);
+snprintf(temp_path, sizeof(temp_path), "%s/ringtone.mp3", resource_path);
 error_code = contacts_record_set_str(group, _contacts_group.ringtone_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp_path);
+                                     temp_path);
 free(resource_path);
 </pre>
 </li>
@@ -1922,22 +1922,22 @@ error_code = contacts_filter_create(_contacts_group._uri, &amp;filter);
 </li>
 <li>
 <p>Add a filtering condition using a <code>contacts_filter_add_XXX()</code> function.</p>
-<p>The following example adds a string-based filtering condition that retrieves any group whose name contains the string &quot;neighbors&quot;:</p>
+<p>The following example adds a string-based filtering condition that retrieves any group whose name contains the string "neighbors":</p>
 <pre class="prettyprint">
 error_code = contacts_filter_add_str(filter, _contacts_group.name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_CONTAINS, &quot;neighbors&quot;);
+                                     CONTACTS_MATCH_CONTAINS, "neighbors");
 </pre>
 </li>
 <li>
 <p>To add more conditions, define an operator between the conditions.</p>
-<p>The following example first adds an OR operator and then a string-based filtering condition that retrieves any group whose name contains the string &quot;friend&quot;.</p>
-<p>The combination of the OR operator and the 2 conditions means that the filter only retrieves groups whose name contains the string &quot;neighbors&quot; or &quot;friend&quot;.</p>
+<p>The following example first adds an OR operator and then a string-based filtering condition that retrieves any group whose name contains the string "friend".</p>
+<p>The combination of the OR operator and the 2 conditions means that the filter only retrieves groups whose name contains the string "neighbors" or "friend".</p>
 <pre class="prettyprint">
 error_code = contacts_filter_add_operator(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_FILTER_OPERATOR_OR);
+                                          CONTACTS_FILTER_OPERATOR_OR);
 
 error_code = contacts_filter_add_str(filter, _contacts_group.name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_CONTAINS, &quot;friend&quot;);
+                                     CONTACTS_MATCH_CONTAINS, "friend");
 </pre>
 </li>
 <li>
@@ -1982,13 +1982,13 @@ contacts_query_destroy(query);
 <pre class="prettyprint">
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;char *name;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str_p(record, _contacts_group.name, &amp;name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;group name: %s&quot;, name);
+    char *name;
+    error_code = contacts_record_get_str_p(record, _contacts_group.name, &amp;name);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "group name: %s", name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    error_code = contacts_list_next(list);
+    if (error_code != CONTACTS_ERROR_NONE)
+        break;
 }
 </pre>
 </li>
@@ -1998,22 +1998,22 @@ while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_N
 contacts_gl_group_data_t *gl_group_data = NULL;
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &amp;record) == CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;gl_group_data = _create_gl_group_data(record);
-&nbsp;&nbsp;&nbsp;&nbsp;/* You can get, for example, display name: */
-&nbsp;&nbsp;&nbsp;&nbsp;/* gl_group_data-&gt;name */
+    gl_group_data = _create_gl_group_data(record);
+    /* You can get, for example, display name: */
+    /* gl_group_data-&gt;name */
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    error_code = contacts_list_next(list);
+    if (error_code != CONTACTS_ERROR_NONE)
+        break;
 }
 </pre>
 <p>Define the <code>contacts_gl_group_data_t</code> structure and the functions for using the structure:</p>
 <pre class="prettyprint">
 struct _contacts_gl_group_data {
-&nbsp;&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;&nbsp;char *name;
-&nbsp;&nbsp;&nbsp;&nbsp;char *image_path;
-&nbsp;&nbsp;&nbsp;&nbsp;char *ringtone_path;
+    int id;
+    char *name;
+    char *image_path;
+    char *ringtone_path;
 };
 typedef struct _contacts_gl_group_data contacts_gl_group_data_t;
 
@@ -2021,59 +2021,59 @@ typedef struct _contacts_gl_group_data contacts_gl_group_data_t;
 static void
 _free_gl_group_data(contacts_gl_group_data_t *gl_group_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == gl_group_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (NULL == gl_group_data)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;name);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;image_path);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_group_data-&gt;ringtone_path);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_group_data);
+    free(gl_group_data-&gt;name);
+    free(gl_group_data-&gt;image_path);
+    free(gl_group_data-&gt;ringtone_path);
+    free(gl_group_data);
 }
 
 /* Create the structure for a group */
 static contacts_gl_group_data_t*
 _create_gl_group_data(contacts_record_h record)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_gl_group_data_t *gl_group_data;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;&nbsp;gl_group_data = malloc(sizeof(contacts_gl_group_data_t));
-&nbsp;&nbsp;&nbsp;&nbsp;memset(gl_group_data, 0x0, sizeof(contacts_gl_group_data_t));
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_group.id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_group_data-&gt;id)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get group ID failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_group.name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_group_data-&gt;name)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get group name failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= contacts_record_get_str(record,_contacts_group.image_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_group_data-&gt;image_path)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get group image failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= contacts_record_get_str(record, _contacts_group.ringtone_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_group_data-&gt;ringtone_path)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get group ringtone failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(gl_group_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return gl_group_data;
+    contacts_gl_group_data_t *gl_group_data;
+    int error_code;
+
+    gl_group_data = malloc(sizeof(contacts_gl_group_data_t));
+    memset(gl_group_data, 0x0, sizeof(contacts_gl_group_data_t));
+
+    if (CONTACTS_ERROR_NONE != contacts_record_get_int(record,
+                                                       _contacts_group.id,
+                                                       &amp;gl_group_data-&gt;id)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get group ID failed ");
+        _free_gl_group_data(gl_group_data);
+
+        return NULL;
+    }
+    if (CONTACTS_ERROR_NONE != contacts_record_get_str(record,
+                                                       _contacts_group.name,
+                                                       &amp;gl_group_data-&gt;name)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get group name failed ");
+        _free_gl_group_data(gl_group_data);
+
+        return NULL;
+    }
+    if (CONTACTS_ERROR_NONE
+        != contacts_record_get_str(record,_contacts_group.image_path,
+                                   &amp;gl_group_data-&gt;image_path)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get group image failed ");
+        _free_gl_group_data(gl_group_data);
+
+        return NULL;
+    }
+    if (CONTACTS_ERROR_NONE
+        != contacts_record_get_str(record, _contacts_group.ringtone_path,
+                                   &amp;gl_group_data-&gt;ringtone_path)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get group ringtone failed ");
+        _free_gl_group_data(gl_group_data);
+
+        return NULL;
+    }
+
+    return gl_group_data;
 }
 </pre>
 </li>
@@ -2110,11 +2110,11 @@ error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);
 <p>Set the properties you want to update.</p>
 <p>The following example sets a new name and image for the group:</p>
 <pre class="prettyprint">
-error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Family&quot;);
+error_code = contacts_record_set_str(group, _contacts_group.name, "Family");
 
 char *resource_path = app_get_resource_path();
 char temp_path[1024];
-snprintf(temp_path, sizeof(temp_path), &quot;%s/group_image_new.jpg&quot;, resource_path);
+snprintf(temp_path, sizeof(temp_path), "%s/group_image_new.jpg", resource_path);
 free(resource_path);
 error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);
 </pre>
@@ -2185,7 +2185,7 @@ contacts_list_h list = NULL;
 contacts_query_create(_contacts_person_group_assigned._uri, &amp;query);
 contacts_filter_create(_contacts_person_group_assigned._uri, &amp;filter);
 contacts_filter_add_int(filter, _contacts_person_group_assigned.group_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_EQUAL, group_id);
+                        CONTACTS_MATCH_EQUAL, group_id);
 contacts_query_set_filter(query, filter);
 
 /* Query to get a list of all persons assigned to the specified group */
@@ -2200,20 +2200,20 @@ contacts_record_h person = NULL;
 int error_code;
 
 while (contacts_list_get_current_record_p(list, &amp;person) == CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;int person_id;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(person, _contacts_person_group_assigned.person_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;person_id);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Person id: %d&quot;, person_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;char *display_name;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(person,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_person_group_assigned.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Display name: %s&quot;, display_name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    int person_id;
+    contacts_record_get_int(person, _contacts_person_group_assigned.person_id,
+                            &amp;person_id);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Person id: %d", person_id);
+
+    char *display_name;
+    contacts_record_get_str_p(person,
+                              _contacts_person_group_assigned.display_name,
+                              &amp;display_name);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Display name: %s", display_name);
+
+    error_code = contacts_list_next(list);
+    if (error_code != CONTACTS_ERROR_NONE)
+        break;
 }
 </pre>
 </li>
@@ -2240,7 +2240,7 @@ contacts_query_destroy(query);
 <p>Register a callback using the <code>contacts_db_add_changed_cb()</code> function:</p>
 <pre class="prettyprint">
 error_code = contacts_db_add_changed_cb(_contacts_group._uri,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_group_changed_callback, NULL);
+                                        _group_changed_callback, NULL);
 </pre>
 </li>
 
@@ -2253,26 +2253,26 @@ static contacts_gl_group_data_t *_gl_group_data = ...;
 static void
 _group_changed_callback(const char *view_uri, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (0 != strcmp(view_uri, _contacts_group._uri))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (0 != strcmp(view_uri, _contacts_group._uri))
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (_gl_group_data == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (_gl_group_data == NULL)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int group_id = _gl_group_data-&gt;id;
-&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_group_data(_gl_group_data);
-&nbsp;&nbsp;&nbsp;&nbsp;_gl_group_data = NULL;
+    int group_id = _gl_group_data-&gt;id;
+    _free_gl_group_data(_gl_group_data);
+    _gl_group_data = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h record = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;record);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    contacts_record_h record = NULL;
+    int error_code;
+    error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;record);
+    if (error_code != CONTACTS_ERROR_NONE)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;_gl_group_data = _create_gl_group_data(record);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use _gl_group_data */
+    _gl_group_data = _create_gl_group_data(record);
+    /* Use _gl_group_data */
 
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_destroy(record, true);
+    contacts_record_destroy(record, true);
 }
 </pre>
 </li>
@@ -2329,15 +2329,15 @@ contacts_record_destroy(record, true);
 <pre class="prettyprint">
 char *resource_path = app_get_resource_path();
 char temp_path[1024];
-snprintf(temp_path, sizeof(temp_path), &quot;%s/vcard.vcf&quot;, resource_path);
+snprintf(temp_path, sizeof(temp_path), "%s/vcard.vcf", resource_path);
 free(resource_path);
 
 error_code = contacts_vcard_parse_to_contact_foreach(/* vCard file path */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Callback to invoke */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_vcard_parse_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* User data for callback */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                     temp_path,
+                                                     /* Callback to invoke */
+                                                     _vcard_parse_cb,
+                                                     /* User data for callback */
+                                                     NULL);
 </pre>
 </li>
 
@@ -2348,14 +2348,14 @@ error_code = contacts_vcard_parse_to_contact_foreach(/* vCard file path */
 static bool
 _vcard_parse_cb(contacts_record_h contact, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == contact)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    if (NULL == contact)
+        return false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int contact_id = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_db_insert_record(contact, &amp;contact_id);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Use the contact record */
+    int contact_id = -1;
+    error_code = contacts_db_insert_record(contact, &amp;contact_id);
+    /* Use the contact record */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -2387,8 +2387,8 @@ error_code = contacts_record_create(_contacts_speeddial._uri, &amp;speeddial);
 <pre class="prettyprint">
 int speeddial_number = ...; /* Get the speed dial number */
 error_code = contacts_record_set_int(speeddial,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_speeddial.speeddial_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;speeddial_number);
+                                     _contacts_speeddial.speeddial_number,
+                                     speeddial_number);
 </pre>
 </li>
 <li>
@@ -2396,7 +2396,7 @@ error_code = contacts_record_set_int(speeddial,
 <pre class="prettyprint">
 int number_id = ...; /* Get the speed dial number ID */
 error_code = contacts_record_set_int(speeddial, _contacts_speeddial.number_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number_id);
+                                     number_id);
 </pre>
 </li>
 </ul>
@@ -2435,7 +2435,7 @@ int speeddial_id = ...; /* Get the speed dial ID */
 int error_code;
 
 error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;speeddial);
+                                    &amp;speeddial);
 </pre>
 </li>
 
@@ -2489,8 +2489,8 @@ error_code = contacts_filter_create(_contacts_speeddial._uri, &amp;filter);
 <p>The following example adds an integer-based filtering condition that retrieves only speed dials whose number is less than 3:</p>
 <pre class="prettyprint">
 error_code = contacts_filter_add_int(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_speeddial.speeddial_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_LESS_THAN, 3);
+                                     _contacts_speeddial.speeddial_number,
+                                     CONTACTS_MATCH_LESS_THAN, 3);
 </pre>
 </li>
 <li>
@@ -2499,11 +2499,11 @@ error_code = contacts_filter_add_int(filter,
 <p>The combination of the OR operator and the 2 conditions means that the filter only retrieves speed dials whose number is less than 3 or greater than 15.</p>
 <pre class="prettyprint">
 error_code = contacts_filter_add_operator(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_FILTER_OPERATOR_OR);
+                                          CONTACTS_FILTER_OPERATOR_OR);
 
 error_code = contacts_filter_add_int(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_speeddial.speeddial_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_GREATER_THAN, 15);
+                                     _contacts_speeddial.speeddial_number,
+                                     CONTACTS_MATCH_GREATER_THAN, 15);
 </pre>
 </li>
 <li>
@@ -2547,16 +2547,16 @@ contacts_query_destroy(query);
 <pre class="prettyprint">
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &amp;record)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;int number;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_speeddial.speeddial_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;number);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;speed dial number: %d&quot;, number);
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+       == CONTACTS_ERROR_NONE) {
+    int number;
+    error_code = contacts_record_get_int(record,
+                                         _contacts_speeddial.speeddial_number,
+                                         &amp;number);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "speed dial number: %d", number);
+
+    error_code = contacts_list_next(list);
+    if (error_code != CONTACTS_ERROR_NONE)
+        break;
 }
 </pre>
 </li>
@@ -2566,23 +2566,23 @@ while (contacts_list_get_current_record_p(list, &amp;record)
 contacts_gl_speeddial_data_t *gl_speeddial_data = NULL;
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &amp;record)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;gl_speeddial_data = _create_gl_speeddial_data(record);
+       == CONTACTS_ERROR_NONE) {
+    gl_speeddial_data = _create_gl_speeddial_data(record);
 
-&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
+    _free_gl_speeddial_data(gl_speeddial_data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    error_code = contacts_list_next(list);
+    if (error_code != CONTACTS_ERROR_NONE)
+        break;
 }
 </pre>
 <p>Define the <code>contacts_gl_speeddial_data_t</code> structure and the functions for using the structure:</p>
 <pre class="prettyprint">
 struct _contacts_gl_speeddial_data {
-&nbsp;&nbsp;&nbsp;&nbsp;int speeddial_number;
-&nbsp;&nbsp;&nbsp;&nbsp;char *number;
-&nbsp;&nbsp;&nbsp;&nbsp;char *display_name;
-&nbsp;&nbsp;&nbsp;&nbsp;char *image_thumbnail_path;
+    int speeddial_number;
+    char *number;
+    char *display_name;
+    char *image_thumbnail_path;
 };
 typedef struct _contacts_gl_speeddial_data contacts_gl_speeddial_data_t;
 
@@ -2590,60 +2590,60 @@ typedef struct _contacts_gl_speeddial_data contacts_gl_speeddial_data_t;
 static void
 _free_gl_speeddial_data(contacts_gl_speeddial_data_t *gl_speeddial_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == gl_speeddial_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (NULL == gl_speeddial_data)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;number);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_speeddial_data-&gt;image_thumbnail_path);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_speeddial_data);
+    free(gl_speeddial_data-&gt;number);
+    free(gl_speeddial_data-&gt;display_name);
+    free(gl_speeddial_data-&gt;image_thumbnail_path);
+    free(gl_speeddial_data);
 }
 
 /* Create the structure for a speed dial */
 static contacts_gl_speeddial_data_t*
 _create_gl_speeddial_data(contacts_record_h record)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_gl_speeddial_data_t *gl_speeddial_data;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;&nbsp;gl_speeddial_data = malloc(sizeof(contacts_gl_speeddial_data_t));
-&nbsp;&nbsp;&nbsp;&nbsp;memset(gl_speeddial_data, 0x0, sizeof(contacts_gl_speeddial_data_t));
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= contacts_record_get_int(record, _contacts_speeddial.speeddial_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_speeddial_data-&gt;speeddial_number)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get speed dial number failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= contacts_record_get_str(record, _contacts_speeddial.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_speeddial_data-&gt;number)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get contact number failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= contacts_record_get_str(record, _contacts_speeddial.display_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_speeddial_data-&gt;display_name)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get display name failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= contacts_record_get_str(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_speeddial.image_thumbnail_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_speeddial_data-&gt;image_thumbnail_path)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get thumbnail failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_speeddial_data(gl_speeddial_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return gl_speeddial_data;
+    contacts_gl_speeddial_data_t *gl_speeddial_data;
+    int error_code;
+
+    gl_speeddial_data = malloc(sizeof(contacts_gl_speeddial_data_t));
+    memset(gl_speeddial_data, 0x0, sizeof(contacts_gl_speeddial_data_t));
+
+    if (CONTACTS_ERROR_NONE
+        != contacts_record_get_int(record, _contacts_speeddial.speeddial_number,
+                                   &amp;gl_speeddial_data-&gt;speeddial_number)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get speed dial number failed ");
+        _free_gl_speeddial_data(gl_speeddial_data);
+
+        return NULL;
+    }
+    if (CONTACTS_ERROR_NONE
+        != contacts_record_get_str(record, _contacts_speeddial.number,
+                                   &amp;gl_speeddial_data-&gt;number)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get contact number failed ");
+        _free_gl_speeddial_data(gl_speeddial_data);
+
+        return NULL;
+    }
+    if (CONTACTS_ERROR_NONE
+        != contacts_record_get_str(record, _contacts_speeddial.display_name,
+                                   &amp;gl_speeddial_data-&gt;display_name)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get display name failed ");
+        _free_gl_speeddial_data(gl_speeddial_data);
+
+        return NULL;
+    }
+    if (CONTACTS_ERROR_NONE
+        != contacts_record_get_str(record,
+                                   _contacts_speeddial.image_thumbnail_path,
+                                   &amp;gl_speeddial_data-&gt;image_thumbnail_path)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get thumbnail failed ");
+        _free_gl_speeddial_data(gl_speeddial_data);
+
+        return NULL;
+    }
+
+    return gl_speeddial_data;
 }
 </pre>
 </li>
@@ -2673,7 +2673,7 @@ int speeddial_number = ...; /* Get the speed dial number */
 contacts_record_h speeddial = NULL;
 
 error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;speeddial);
+                                    &amp;speeddial);
 </pre>
 <p>You can also retrieve the speed dial using a search function, such as <code>contacts_db_get_records_with_query()</code>.</p>
 </li>
@@ -2685,9 +2685,9 @@ error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_number,
 int number_id = ...; /* Get the number ID */
 
 error_code = contacts_record_set_int(speeddial, _contacts_speeddial.number_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number_id);
+                                     number_id);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get number ID failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "get number ID failed: %x", error_code);
 </pre>
 </li>
 
@@ -2733,7 +2733,7 @@ contacts_record_h log;
 
 error_code = contacts_record_create(_contacts_phone_log._uri, &amp;log);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_record_create failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "contacts_record_create failed: %x", error_code);
 </pre>
 </li>
 
@@ -2744,9 +2744,9 @@ if (error_code != CONTACTS_ERROR_NONE)
 <p>To set the log type, use the <code>contacts_record_set_int()</code> function with the <code>_contacts_phone_log.log_type</code> property as the second parameter. The third parameter defines the log type using the values of the <code>contacts_phone_log_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#gaafc3f61866231c01314c1d3f7da6038b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#gaafc3f61866231c01314c1d3f7da6038b">wearable</a> applications).</p>
 <pre class="prettyprint">
 error_code = contacts_record_set_int(log, _contacts_phone_log.log_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_PLOG_TYPE_VOICE_INCOMING);
+                                     CONTACTS_PLOG_TYPE_VOICE_INCOMING);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set log type failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set log type failed: %x", error_code);
 </pre>
 
 </li>
@@ -2754,9 +2754,9 @@ if (error_code != CONTACTS_ERROR_NONE)
 <p>To set the log time (calculated as number of seconds since 1970-01-01 00:00:00 UTC), use the <code>contacts_record_set_int()</code> function with the <code>_contacts_phone_log.log_time</code> property as the second parameter:</p>
 <pre class="prettyprint">
 error_code = contacts_record_set_int(log, _contacts_phone_log.log_time,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(int)time(NULL));
+                                     (int)time(NULL));
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set log time failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set log time failed: %x", error_code);
 </pre>
 </li>
 <li>
@@ -2764,16 +2764,16 @@ if (error_code != CONTACTS_ERROR_NONE)
 <pre class="prettyprint">
 error_code = contacts_record_set_int(log, _contacts_phone_log.extra_data1, 37);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set duration failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set duration failed: %x", error_code);
 </pre>
 </li>
 <li>
 <p>To set the log address (in practice, the phone number or email address), use the <code>contacts_record_set_str()</code> function with the <code>_contacts_phone_log.address</code> property as the second parameter:</p>
 <pre class="prettyprint">
 error_code = contacts_record_set_str(log, _contacts_phone_log.address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;+8231-1234-5678&quot;);
+                                     "+8231-1234-5678");
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;set address failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "set address failed: %x", error_code);
 </pre>
 </li>
 </ul>
@@ -2789,8 +2789,8 @@ int added_log_id = -1;
 
 error_code = contacts_db_insert_record(log, &amp;added_log_id);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_db_insert_record failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "contacts_db_insert_record failed: %x", error_code);
 </pre>
 </li>
 
@@ -2818,7 +2818,7 @@ int error_code;
 
 error_code = contacts_db_get_record(_contacts_phone_log._uri, log_id, &amp;log);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get log failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "get log failed: %x", error_code);
 </pre>
 </li>
 
@@ -2845,8 +2845,8 @@ contacts_list_h list = NULL;
 
 error_code = contacts_db_get_all_records(_contacts_phone_log._uri, 0, 0, &amp;list);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_db_get_all_records failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "contacts_db_get_all_records failed: %x", error_code);
 </pre>
 </li>
 <li>
@@ -2860,8 +2860,8 @@ contacts_query_h query = NULL;
 
 error_code = contacts_query_create(_contacts_phone_log._uri, &amp;query);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_query_create failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "contacts_query_create failed: %x", error_code);
 </pre>
 </li>
 <li>
@@ -2871,8 +2871,8 @@ contacts_filter_h filter = NULL;
 
 error_code = contacts_filter_create(_contacts_phone_log._uri, &amp;filter);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_filter_create failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "contacts_filter_create failed: %x", error_code);
 </pre>
 </li>
 <li>
@@ -2880,11 +2880,11 @@ if (error_code != CONTACTS_ERROR_NONE)
 <p>The following example adds an integer-based filtering condition that retrieves any log whose type is <code>CONTACTS_PLOG_TYPE_VOICE_INCOMING</code>:</p>
 <pre class="prettyprint">
 error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_EQUAL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_PLOG_TYPE_VOICE_INCOMING);
+                                     CONTACTS_MATCH_EQUAL,
+                                     CONTACTS_PLOG_TYPE_VOICE_INCOMING);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter add condition failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "filter add condition failed: %x", error_code);
 </pre>
 </li>
 <li>
@@ -2893,18 +2893,18 @@ if (error_code != CONTACTS_ERROR_NONE)
 <p>The combination of the OR operator and the 2 conditions means that the filter only retrieves logs whose type is <code>CONTACTS_PLOG_TYPE_VOICE_INCOMING</code> or <code>CONTACTS_PLOG_TYPE_VOICE_OUTGOING</code>.</p>
 <pre class="prettyprint">
 error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
+    contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_filter_add_operator failed: %x&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "contacts_filter_add_operator failed: %x",
+               error_code);
 
 error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_EQUAL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_PLOG_TYPE_VOICE_OUTGOING);
+                                     CONTACTS_MATCH_EQUAL,
+                                     CONTACTS_PLOG_TYPE_VOICE_OUTGOING);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;filter add condition failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "filter add condition failed: %x", error_code);
 </pre>
 </li>
 <li>
@@ -2912,8 +2912,8 @@ if (error_code != CONTACTS_ERROR_NONE)
 <pre class="prettyprint">
 error_code = contacts_query_set_filter(query, filter);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_query_set_filter failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "contacts_query_set_filter failed: %x", error_code);
 </pre>
 </li>
 <li>
@@ -2921,9 +2921,9 @@ if (error_code != CONTACTS_ERROR_NONE)
 <pre class="prettyprint">
 error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_db_get_records_with_query failed: %x&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG,
+               "contacts_db_get_records_with_query failed: %x",
+               error_code);
 </pre>
 <p>The third parameter defines a limit for the number of results. If you set it to 0, the list returns all logs matching the query.</p>
 </li>
@@ -2951,20 +2951,20 @@ contacts_query_destroy(query);
         <strong>Note</strong>
         Some functions have the <code>_p</code> postfix. The postfix means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
     </div>
-       
+
 <p>The following example iterates through the list and retrieves the type of each log:</p>
 <pre class="prettyprint">
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &amp;record)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;int type;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_phone_log.log_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;type);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;log type: %d&quot;, type);
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+       == CONTACTS_ERROR_NONE) {
+    int type;
+    error_code = contacts_record_get_int(record, _contacts_phone_log.log_type,
+                                         &amp;type);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "log type: %d", type);
+
+    error_code = contacts_list_next(list);
+    if (error_code != CONTACTS_ERROR_NONE)
+        break;
 }
 </pre>
 </li>
@@ -2974,22 +2974,22 @@ while (contacts_list_get_current_record_p(list, &amp;record)
 contacts_gl_log_data_t *gl_log_data = NULL;
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &amp;record)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;gl_log_data = _create_gl_log_data(record);
+       == CONTACTS_ERROR_NONE) {
+    gl_log_data = _create_gl_log_data(record);
 
-&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    _free_gl_log_data(gl_log_data);
+    error_code = contacts_list_next(list);
+    if (error_code != CONTACTS_ERROR_NONE)
+        break;
 }
 </pre>
 <p>Define the <code>contacts_gl_log_data_t</code> structure and the functions for using the structure:</p>
 <pre class="prettyprint">
 struct _contacts_gl_log_data {
-&nbsp;&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;&nbsp;char *address;
-&nbsp;&nbsp;&nbsp;&nbsp;int log_type;
-&nbsp;&nbsp;&nbsp;&nbsp;int log_time;
+    int id;
+    char *address;
+    int log_type;
+    int log_time;
 };
 typedef struct _contacts_gl_log_data contacts_gl_log_data_t;
 
@@ -2997,57 +2997,57 @@ typedef struct _contacts_gl_log_data contacts_gl_log_data_t;
 static void
 _free_gl_log_data(contacts_gl_log_data_t *gl_log_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL == gl_log_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (NULL == gl_log_data)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_log_data-&gt;address);
-&nbsp;&nbsp;&nbsp;&nbsp;free(gl_log_data);
+    free(gl_log_data-&gt;address);
+    free(gl_log_data);
 }
 
 /* Create the structure for a log */
 static contacts_gl_log_data_t*
 _create_gl_log_data(contacts_record_h record)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_gl_log_data_t *gl_log_data;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;&nbsp;gl_log_data = malloc(sizeof(contacts_gl_log_data_t));
-&nbsp;&nbsp;&nbsp;&nbsp;memset(gl_log_data, 0x0, sizeof(contacts_gl_log_data_t));
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_int(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_phone_log.id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_log_data-&gt;id)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get log ID failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE != contacts_record_get_str(record,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_phone_log.address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_log_data-&gt;address)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get log address failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= contacts_record_get_int(record, _contacts_phone_log.log_type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_log_data-&gt;log_type)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get log type failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (CONTACTS_ERROR_NONE
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= contacts_record_get_int(record, _contacts_phone_log.log_time,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;gl_log_data-&gt;log_time)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;get log time failed &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_free_gl_log_data(gl_log_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return gl_log_data;
+    contacts_gl_log_data_t *gl_log_data;
+    int error_code;
+
+    gl_log_data = malloc(sizeof(contacts_gl_log_data_t));
+    memset(gl_log_data, 0x0, sizeof(contacts_gl_log_data_t));
+
+    if (CONTACTS_ERROR_NONE != contacts_record_get_int(record,
+                                                       _contacts_phone_log.id,
+                                                       &amp;gl_log_data-&gt;id)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get log ID failed ");
+        _free_gl_log_data(gl_log_data);
+
+        return NULL;
+    }
+    if (CONTACTS_ERROR_NONE != contacts_record_get_str(record,
+                                                       _contacts_phone_log.address,
+                                                       &amp;gl_log_data-&gt;address)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get log address failed ");
+        _free_gl_log_data(gl_log_data);
+
+        return NULL;
+    }
+    if (CONTACTS_ERROR_NONE
+        != contacts_record_get_int(record, _contacts_phone_log.log_type,
+                                   &amp;gl_log_data-&gt;log_type)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get log type failed ");
+        _free_gl_log_data(gl_log_data);
+
+        return NULL;
+    }
+    if (CONTACTS_ERROR_NONE
+        != contacts_record_get_int(record, _contacts_phone_log.log_time,
+                                   &amp;gl_log_data-&gt;log_time)) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "get log time failed ");
+        _free_gl_log_data(gl_log_data);
+
+        return NULL;
+    }
+
+    return gl_log_data;
 }
 </pre>
 </li>
@@ -3072,7 +3072,7 @@ int log_id = ...; /* Get the log ID */
 
 error_code = contacts_db_delete_record(_contacts_phone_log._uri, log_id);
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_db_delete_record failed: %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "contacts_db_delete_record failed: %x", error_code);
 </pre>
 
 <h2 id="insert2" name="insert2">Creating a Record</h2>
@@ -3113,15 +3113,15 @@ error_code = contacts_record_create(_contacts_address._uri, &amp;haddress);
 <p>The following example sets the country of the address:</p>
 <pre class="prettyprint">
 error_code = contacts_record_set_str(haddress, _contacts_address.country,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Korea&quot;);
+                                     "Korea");
 </pre>
 </li>
 <li>
 <p>Add the address record as a child record to the contact record:</p>
 <pre class="prettyprint">
 error_code = contacts_record_add_child_record(hcontact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.address,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;haddress);
+                                              _contacts_contact.address,
+                                              haddress);
 </pre>
 
 
@@ -3176,7 +3176,7 @@ contacts_db_get_record(_contacts_contact._uri, ID, &amp;record);
 <li>
 <p>Retrieve direct record details.</p>
 <p>To retrieve details directly from the record, use a <code>contacts_record_get_XXX()</code> function. The specific function depends on the data type of the detail (property) you want to retrieve.</p>
-<p>The following example uses the <code>contacts_record_get_str()</code> function to retrieve a contact&#39;s display name, which is a string value:</p>
+<p>The following example uses the <code>contacts_record_get_str()</code> function to retrieve a contact's display name, which is a string value:</p>
 <pre class="prettyprint">
 char *d_name;
 contacts_record_get_str(record, _contacts_contact.display_name, d_name);
@@ -3192,7 +3192,7 @@ free(d_name);
 <pre class="prettyprint">
 contacts_record_h child_record;
 contacts_record_get_child_record_at_p(record, _contacts_contact.name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, &amp;child_record);
+                                      0, &amp;child_record);
 
 /* From the child record, retrieve the first name using the name view */
 char *f_name = NULL;
@@ -3229,11 +3229,11 @@ char *number = gldata-&gt;number;
 
 /* Define the structure */
 struct _contact_gl_data {
-&nbsp;&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;&nbsp;char *first;
-&nbsp;&nbsp;&nbsp;&nbsp;char *last;
-&nbsp;&nbsp;&nbsp;&nbsp;char *number;
-&nbsp;&nbsp;&nbsp;&nbsp;char *image_path;
+    int id;
+    char *first;
+    char *last;
+    char *number;
+    char *image_path;
 };
 typedef struct _contact_gl_data contact_gl_data_t;
 
@@ -3241,44 +3241,44 @@ typedef struct _contact_gl_data contact_gl_data_t;
 static contact_gl_data_t*
 _create_gl_data(contacts_record_h r_contact)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;contact_gl_data_t *data;
-&nbsp;&nbsp;&nbsp;&nbsp;data = malloc(sizeof(contact_gl_data_t));
-&nbsp;&nbsp;&nbsp;&nbsp;memset(data, 0x0, sizeof(contact_gl_data_t));
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (! _get_contact_id(r_contact, &amp;data-&gt;id)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (!_get_contact_number(r_contact, &amp;data-&gt;number)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (!_get_contact_first(r_contact, &amp;data-&gt;first)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (!_get_contact_last(r_contact, &amp;data-&gt;last)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;first);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;if (!_get_contact_image(r_contact, &amp;data-&gt;image_path)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;first);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data-&gt;last);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return data;
+    contact_gl_data_t *data;
+    data = malloc(sizeof(contact_gl_data_t));
+    memset(data, 0x0, sizeof(contact_gl_data_t));
+
+    if (! _get_contact_id(r_contact, &amp;data-&gt;id)) {
+        free(data);
+
+        return NULL;
+    }
+
+    if (!_get_contact_number(r_contact, &amp;data-&gt;number)) {
+        free(data);
+
+        return NULL;
+    }
+    if (!_get_contact_first(r_contact, &amp;data-&gt;first)) {
+        free(data-&gt;number);
+        free(data);
+
+        return NULL;
+    }
+    if (!_get_contact_last(r_contact, &amp;data-&gt;last)) {
+        free(data-&gt;number);
+        free(data-&gt;first);
+        free(data);
+
+        return NULL;
+    }
+    if (!_get_contact_image(r_contact, &amp;data-&gt;image_path)) {
+        free(data-&gt;number);
+        free(data-&gt;first);
+        free(data-&gt;last);
+        free(data);
+
+        return NULL;
+    }
+
+    return data;
 }
 </pre>
 </li>
@@ -3308,170 +3308,170 @@ _create_gl_data(contacts_record_h r_contact)
 static bool
 _get_contact_id(contacts_record_h r_contact, int *id)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
+    int error_code;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(r_contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.id, id);
+    error_code = contacts_record_get_int(r_contact,
+                                         _contacts_contact.id, id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
 <li>
-<p>To retrieve the contact&#39;s phone number, first check whether the contact has at least 1 phone number using the <code>contacts_record_get_bool()</code> function on the contact record with the <code>_contacts_contact.has_phonenumber</code> property. If the contact has 1 or more phone numbers, retrieve the numbers using the various Query (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">wearable</a> applications) and Filter (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">wearable</a> applications) functions from the Contacts API. The numbers are stored in the number child records (the <code>_contacts_number</code> view). After you are done, free any data returned by a function not containing the <code>_p</code> suffix.</p>
+<p>To retrieve the contact's phone number, first check whether the contact has at least 1 phone number using the <code>contacts_record_get_bool()</code> function on the contact record with the <code>_contacts_contact.has_phonenumber</code> property. If the contact has 1 or more phone numbers, retrieve the numbers using the various Query (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">wearable</a> applications) and Filter (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">wearable</a> applications) functions from the Contacts API. The numbers are stored in the number child records (the <code>_contacts_number</code> view). After you are done, free any data returned by a function not containing the <code>_p</code> suffix.</p>
 <p>The following example checks whether the contact has any phone numbers. Then, it queries all phone numbers and filters the search so that only the numbers that are default numbers and belong to the specific contact are included in the search result.</p>
 <pre class="prettyprint">
 static bool
 _get_contact_number(contacts_record_h r_contact, char **number)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int id;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h r_number;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_h list = NULL;
+    int id;
+    int error_code;
+    contacts_record_h r_number;
+    contacts_query_h query = NULL;
+    contacts_filter_h filter = NULL;
+    contacts_list_h list = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!_get_contact_id(r_contact, &amp;id))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    if (!_get_contact_id(r_contact, &amp;id))
+        return false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;bool has_number;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_bool(r_contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.has_phonenumber,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;has_number);
+    bool has_number;
+    error_code = contacts_record_get_bool(r_contact,
+                                          _contacts_contact.has_phonenumber,
+                                          &amp;has_number);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_query_create(_contacts_number._uri, &amp;query);
+    error_code = contacts_query_create(_contacts_number._uri, &amp;query);
 
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int fields[] = {_contacts_number.number};
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_query_set_projection(query, fields, 1);
+    unsigned int fields[] = {_contacts_number.number};
+    error_code = contacts_query_set_projection(query, fields, 1);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_filter_create(_contacts_number._uri, &amp;filter);
+    error_code = contacts_filter_create(_contacts_number._uri, &amp;filter);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_filter_add_int(filter,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_number.contact_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_EXACTLY, id);
+    error_code = contacts_filter_add_int(filter,
+                                         _contacts_number.contact_id,
+                                         CONTACTS_MATCH_EXACTLY, id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
+    error_code =
+        contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_add_bool(filter, _contacts_number.is_default, true);
+    error_code =
+        contacts_filter_add_bool(filter, _contacts_number.is_default, true);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_query_set_filter(query, filter);
+    error_code = contacts_query_set_filter(query, filter);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_db_get_records_with_query(query, 0, 1, &amp;list);
+    error_code = contacts_db_get_records_with_query(query, 0, 1, &amp;list);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_get_current_record_p(list, &amp;r_number);
+    error_code = contacts_list_get_current_record_p(list, &amp;r_number);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str(r_number, _contacts_number.number, number);
+    error_code =
+        contacts_record_get_str(r_number, _contacts_number.number, number);
 
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_destroy(list, true);
+    contacts_query_destroy(query);
+    contacts_filter_destroy(filter);
+    contacts_list_destroy(list, true);
 }
 </pre>
-<p>The following alternative example retrieves the contact&#39;s default phone number directly:</p>
+<p>The following alternative example retrieves the contact's default phone number directly:</p>
 <pre class="prettyprint">
 static bool
 _get_contact_number(contacts_record_h r_contact, char **number)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h r_number;
-
-&nbsp;&nbsp;&nbsp;&nbsp;bool has_number;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_bool(r_contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.has_phonenumber,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;has_number);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (!has_number) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*number = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int count = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;bool is_default = false;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_count(contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;count);
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_at_p(r_contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i, &amp;r_number);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_bool(r_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_number.is_default,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;is_default);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (is_default) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_number.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;*number = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    int error_code;
+    contacts_record_h r_number;
+
+    bool has_number;
+    error_code = contacts_record_get_bool(r_contact,
+                                          _contacts_contact.has_phonenumber,
+                                          &amp;has_number);
+
+    if (!has_number) {
+        *number = NULL;
+
+        return true;
+    }
+
+    int i;
+    unsigned int count = 0;
+    bool is_default = false;
+    error_code =
+        contacts_record_get_child_record_count(contact,
+                                               _contacts_contact.number,
+                                               &amp;count);
+
+    for (i = 0; i &lt; count; i++) {
+        error_code =
+            contacts_record_get_child_record_at_p(r_contact,
+                                                  _contacts_contact.number,
+                                                  i, &amp;r_number);
+        error_code = contacts_record_get_bool(r_number,
+                                              _contacts_number.is_default,
+                                              &amp;is_default);
+        if (is_default) {
+            error_code = contacts_record_get_str(r_number,
+                                                 _contacts_number.number,
+                                                 number);
+
+            return true;
+        }
+    }
+    *number = NULL;
+
+    return false;
 }
 </pre>
 <p>To retrieve a second number, change the third parameter of the <code>contacts_record_get_child_record_at_p()</code> function from 0 to 1.</p>
 </li>
 <li>
-<p>To retrieve the contact&#39;s name details, retrieve the name child record of the contact record using the <code>contacts_record_get_child_record_at_p()</code> function with the <code>_contacts_contact.name</code> property. From the child record, retrieve the name data using the <code>contacts_record_get_str()</code> function.</p>
-<p>The following example retrieves the contact&#39;s first name from the name record:</p>
+<p>To retrieve the contact's name details, retrieve the name child record of the contact record using the <code>contacts_record_get_child_record_at_p()</code> function with the <code>_contacts_contact.name</code> property. From the child record, retrieve the name data using the <code>contacts_record_get_str()</code> function.</p>
+<p>The following example retrieves the contact's first name from the name record:</p>
 <pre class="prettyprint">
 static bool
 _get_contact_first(contacts_record_h r_contact, char **first)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h r_name;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
+    contacts_record_h r_name;
+    int error_code;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_at_p(r_contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, &amp;r_name);
+    error_code =
+        contacts_record_get_child_record_at_p(r_contact,
+                                              _contacts_contact.name,
+                                              0, &amp;r_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_name, _contacts_name.first,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;first);
+    error_code = contacts_record_get_str(r_name, _contacts_name.first,
+                                         first);
 }
 </pre>
-<p>The following example retrieves the contact&#39;s last name from the name record:</p>
+<p>The following example retrieves the contact's last name from the name record:</p>
 <pre class="prettyprint">
 static bool
 _get_contact_last(contacts_record_h r_contact, char **last)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h r_name;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
+    contacts_record_h r_name;
+    int error_code;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_at_p(r_contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, &amp;r_name);
+    error_code =
+        contacts_record_get_child_record_at_p(r_contact,
+                                              _contacts_contact.name,
+                                              0, &amp;r_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_str(r_name, _contacts_name.last, last);
+    error_code = contacts_record_get_str(r_name, _contacts_name.last, last);
 }
 </pre>
 </li>
 <li>
-<p>To retrieve the contact&#39;s image, use the <code>contacts_record_get_str()</code> function on the contact record with the <code>_contacts_contact.image_thumbnail_path</code> property:</p>
+<p>To retrieve the contact's image, use the <code>contacts_record_get_str()</code> function on the contact record with the <code>_contacts_contact.image_thumbnail_path</code> property:</p>
 <pre class="prettyprint">
 static bool
 _get_contact_image(contacts_record_h r_contact, char **image_path)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
+    int error_code;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str(r_contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_contact.image_thumbnail_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image_path);
+    error_code =
+        contacts_record_get_str(r_contact,
+                                _contacts_contact.image_thumbnail_path,
+                                image_path);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Thumb path: \&#39;%s\&#39;&quot;, *image_path);
+    dlog_print(DLOG_ERROR, LOG_TAG, "Thumb path: \'%s\'", *image_path);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -3525,38 +3525,38 @@ contacts_filter_create(_contacts_name._uri, &amp;filter);
 </li>
 <li>
 <p>Add a filtering condition using a <code>contacts_filter_add_XXX()</code> function.</p>
-<p>The following example adds a string-based filtering condition that retrieves name records where the last name starts with &quot;Za&quot;:</p>
+<p>The following example adds a string-based filtering condition that retrieves name records where the last name starts with "Za":</p>
 <pre class="prettyprint">
 contacts_filter_add_str(filter, _contacts_name.last_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_STARTSWITH, &quot;Za&quot;);
+                        CONTACTS_MATCH_STARTSWITH, "Za");
 </pre>
 <p>The available matching options (third parameter) for string-based filtering conditions are defined in the <code>contacts_match_str_flag_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga5a4ee5c71ae14d0fbf7520597514f0c2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga5a4ee5c71ae14d0fbf7520597514f0c2">wearable</a> applications).</p>
 </li>
 <li>
 <p>To add more conditions, add a logical operator before each new condition using the <code>contacts_filter_add_operator()</code> function. The conditions and operators together define the filtering logic as a whole.</p>
-<p>The following example first adds an AND operator and then a string-based filtering condition that retrieves name records where the last name ends with &quot;ra&quot;.</p>
-<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves name records where the last name starts with &quot;Za&quot; and ends with &quot;ra&quot;.</p>
+<p>The following example first adds an AND operator and then a string-based filtering condition that retrieves name records where the last name ends with "ra".</p>
+<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves name records where the last name starts with "Za" and ends with "ra".</p>
 <pre class="prettyprint">
 contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
 
 contacts_filter_add_str(filter, _contacts_name.last_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_ENDSWITH, &quot;ra&quot;);
+                        CONTACTS_MATCH_ENDSWITH, "ra");
 </pre>
 </li>
 <li>
-<p>If you need to use a logical expression with brackets, such as &quot;C1 AND C2 AND (C3 OR C4)&quot;, define the bracketed conditions in a separate filter, and add the new filter to the parent filter as a filtering condition using the <code>contacts_filter_add_filter()</code> function.</p>
+<p>If you need to use a logical expression with brackets, such as "C1 AND C2 AND (C3 OR C4)", define the bracketed conditions in a separate filter, and add the new filter to the parent filter as a filtering condition using the <code>contacts_filter_add_filter()</code> function.</p>
 <p>The following example extends the previous example by first adding an AND operator and then a child filter with 2 string-based filtering conditions separated by an OR operator.</p>
-<p>The combination of all the filtering conditions means that the parent filter only retrieves name records where (1) the last name starts with &quot;Za&quot; and ends with &quot;ra&quot; and (2) the first name starts with either &quot;Ada&quot; or &quot;Igo&quot;.</p>
+<p>The combination of all the filtering conditions means that the parent filter only retrieves name records where (1) the last name starts with "Za" and ends with "ra" and (2) the first name starts with either "Ada" or "Igo".</p>
 <pre class="prettyprint">
 contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
 
 contacts_filter_h n_filter = NULL;
 contacts_filter_create(_contacts_name._uri, &amp;n_filter);
 contacts_filter_add_str(n_filter, _contacts_name.first_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_STARTSWITH, &quot;Ada&quot;);
+                        CONTACTS_MATCH_STARTSWITH, "Ada");
 contacts_filter_add_operator(n_filter, CONTACTS_FILTER_OPERATOR_OR);
 contacts_filter_add_str(n_filter, _contacts_name.first_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACTS_MATCH_STARTSWITH, &quot;Igo&quot;);
+                        CONTACTS_MATCH_STARTSWITH, "Igo");
 
 contacts_filter_add_filter(filter, n_filter);
 </pre>
@@ -3580,9 +3580,9 @@ contacts_query_set_sort(query, _contacts_name.first, true);
 <p>The following example limits the properties from the previous steps to the first and last name:</p>
 <pre class="prettyprint">
 unsigned my_projection[] = {_contacts_name.contact_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_name.first, _contacts_name.last}
+                            _contacts_name.first, _contacts_name.last}
 contacts_query_set_projection(query, my_projection,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(my_projection)/sizeof(int));
+                              sizeof(my_projection)/sizeof(int));
 </pre>
 <p>The results of a filtered query can contain records that differ only in a few properties. After setting a projection to the filtered query, the results can contain identical records. To avoid these, use the <code>contacts_query_set_distinct()</code> function, which removes duplicates from the results:</p>
 <pre class="prettyprint">
@@ -3622,16 +3622,16 @@ contacts_db_get_records_with_query(query, 0, 0, &amp;list);
 <ul>
 <li>
 <p>To retrieve only basic details, use a <code>contacts_record_get_XXX()</code> function on the record.</p>
-<p>The following example use the <code>contacts_record_get_str()</code> function to retrieve a contact&#39;s display name:</p>
+<p>The following example use the <code>contacts_record_get_str()</code> function to retrieve a contact's display name:</p>
 <pre class="prettyprint">
 contacts_record_h record;
 
 while (contacts_list_get_current_record_p(list, &amp;record) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get details */
-&nbsp;&nbsp;&nbsp;&nbsp;char *disp_name;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str(record, _contacts_contact.display_name, &amp;disp_name);
-&nbsp;&nbsp;&nbsp;&nbsp;free(disp_name);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+    /* Get details */
+    char *disp_name;
+    contacts_record_get_str(record, _contacts_contact.display_name, &amp;disp_name);
+    free(disp_name);
+    error_code = contacts_list_next(list);
 }
 </pre>
 </li>
@@ -3643,9 +3643,9 @@ contacts_record_h record;
 contact_gl_data_t *gldata = NULL;
 
 while (contacts_list_get_current_record_p(list, &amp;record) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;gldata = _create_gl_data(record);
+    gldata = _create_gl_data(record);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+    error_code = contacts_list_next(list);
 }
 </pre>
 </li>
@@ -3657,19 +3657,19 @@ contacts_record_h record;
 contact_gl_data_t *gldata = NULL;
 
 while (contacts_list_get_current_record_p(list, &amp;record) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;int record_id;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h c_record;
+    int record_id;
+    contacts_record_h c_record;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the ID of the parent contact record */
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(record, _contacts_name.contact_id, &amp;contact_id);
+    /* Get the ID of the parent contact record */
+    contacts_record_get_int(record, _contacts_name.contact_id, &amp;contact_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the parent contact record */
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;c_record);
+    /* Get the parent contact record */
+    contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;c_record);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the structure for the parent contact record */
-&nbsp;&nbsp;&nbsp;&nbsp;gldata = _create_gl_data(c_record);
+    /* Create the structure for the parent contact record */
+    gldata = _create_gl_data(c_record);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+    error_code = contacts_list_next(list);
 }
 </pre>
 </li>
@@ -3714,7 +3714,7 @@ contacts_list_add(list, record);
 int *ids = NULL;
 unsigned int count = 0;
 contacts_db_insert_records(list, &amp;ids, &amp;count);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;%d records inserted&quot;, count);
+dlog_print(DLOG_DEBUG, LOG_TAG, "%d records inserted", count);
 free(ids);
 </pre>
 </li>
@@ -3763,13 +3763,13 @@ error_code = contacts_record_get_int(record, _contacts_contact.id, &amp;id);
 contacts_record h record1;
 int first_person_id;
 int error_code = contacts_record_get_int(record1, _contacts_contact.person_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;first_person_id);
+                                         &amp;first_person_id);
 
 /* Get the ID of the second person */
 contacts_record h record2;
 int second_person_id;
 error_code = contacts_record_get_int(record2, _contacts_contact.person_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;second_person_id);
+                                     &amp;second_person_id);
 
 /* Link the persons */
 contacts_person_link_person(first_person_id, second_person_id);
@@ -3781,7 +3781,7 @@ int person_id = first_person_id;
 <li>
 <p>Set the default properties for the linked person.</p>
 <p>Set the default properties from one of the associated contacts using the <code>contacts_person_set_default_property()</code> function. The first parameter uses the values of the <code>contacts_person_property_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__PERSON__MODULE.html#ga641465951ce76daa56bb430b37cc8d90">wearable</a> applications), which defines the available default properties for a person.</p>
-<p>For example, to set the person&#39;s default phone number based on the number of one of the associated contacts:</p>
+<p>For example, to set the person's default phone number based on the number of one of the associated contacts:</p>
 <ol type="a">
 <li><p>Retrieve the contact whose phone number you want to use.</p></li>
 <li><p>Retrieve the correct phone number record associated with the contact using the <code>contacts_record_get_child_record_at_p()</code> function.</p></li>
@@ -3797,7 +3797,7 @@ int error_code = -1;
 /* Get the phone number record */
 contacts_record_h record_number;
 error_code = contacts_record_get_child_record_at_p(record, _contacts_contact.number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, &amp;record_number);
+                                                   0, &amp;record_number);
 
 /* Get the phone number ID */
 int number_id;
@@ -3806,7 +3806,7 @@ error_code = contacts_record_destroy(record_number, true);
 
 /* Set the phone number as the default for the person */
 error_code = contacts_person_set_default_property(CONTACTS_PERSON_PROPERTY_NUMBER,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;person_id, number_id);
+                                                  person_id, number_id);
 </pre>
 </li>
 
@@ -3820,8 +3820,8 @@ error_code = contacts_person_set_default_property(CONTACTS_PERSON_PROPERTY_NUMBE
 <pre class="prettyprint">
 int person_email_number;
 error_code = contacts_person_get_default_property(CONTACTS_PERSON_PROPERTY_EMAIL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;person_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;person_email_number);
+                                                  person_id,
+                                                  &amp;person_email_number);
 </pre>
 </li>
 <li>
@@ -3829,7 +3829,7 @@ error_code = contacts_person_get_default_property(CONTACTS_PERSON_PROPERTY_EMAIL
 <pre class="prettyprint">
 contacts_record_h email_record;
 error_code = contacts_db_get_record(_contacts_email._uri, person_email_number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;email_record);
+                                    &amp;email_record);
 </pre>
 </li>
 <li>
@@ -3837,7 +3837,7 @@ error_code = contacts_db_get_record(_contacts_email._uri, person_email_number,
 <pre class="prettyprint">
 char *default_email;
 error_code = contacts_record_get_str_p(email_record, _contacts_email.email,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;default_email);
+                                       &amp;default_email);
 
 /* Use default_email */
 
@@ -3854,7 +3854,7 @@ int contact_id = ...; /* Get the contact ID */
 int unlinked_person_id;
 
 error_code = contacts_person_unlink_contact(person_id, contact_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;unlinked_person_id);
+                                            &amp;unlinked_person_id);
 </pre>
 </li>
 
@@ -3872,10 +3872,10 @@ error_code = contacts_person_unlink_contact(person_id, contact_id,
 contacts_name_display_order_e display_order;
 contacts_setting_get_name_display_order(&amp;display_order);
 /* Now you have the display order */
-sprintf(&quot;Display order: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST&quot;);
+sprintf("Display order: %s",
+        display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST ?
+        "CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST" :
+        "CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST");
 </pre>
 </li>
 
@@ -3885,10 +3885,10 @@ sprintf(&quot;Display order: %s&quot;,
 contacts_name_sorting_order_e sorting_order;
 contacts_setting_get_name_sorting_order(&amp;sorting_order);
 /* Now you have the sorting order */
-sprintf(&quot;Sorting order: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sorting_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CONTACTS_NAME_SORTING_ORDER_FIRSTLAST&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CONTACTS_NAME_SORTING_ORDER_LASTFIRST&quot;);
+sprintf("Sorting order: %s",
+        sorting_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST ?
+        "CONTACTS_NAME_SORTING_ORDER_FIRSTLAST" :
+        "CONTACTS_NAME_SORTING_ORDER_LASTFIRST");
 </pre>
 </li>
 
@@ -3912,22 +3912,22 @@ contacts_setting_set_name_sorting_order(CONTACTS_NAME_SORTING_ORDER_FIRSTLAST);
 <pre class="prettyprint">
 static void
 display_changed_cb(contacts_name_display_order_e name_display_order,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                   void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;changed display order: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name_display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "changed display order: %s",
+               name_display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST ?
+               "CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST" :
+               "CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST");
 }
 
 static void
 sorting_changed_cb(contacts_name_sorting_order_e name_display_order,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                   void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;changed sorting order: %s&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name_display_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CONTACTS_NAME_SORTING_ORDER_FIRSTLAST&quot; :
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CONTACTS_NAME_SORTING_ORDER_LASTFIRST&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "changed sorting order: %s",
+               name_display_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST ?
+               "CONTACTS_NAME_SORTING_ORDER_FIRSTLAST" :
+               "CONTACTS_NAME_SORTING_ORDER_LASTFIRST");
 }
 </pre>
 <p>To track the changes, implement a timeout function after setting the callbacks.</p>
@@ -3949,7 +3949,7 @@ sorting_changed_cb(contacts_name_sorting_order_e name_display_order,
 <pre class="prettyprint">
 bool completed = false;
 contacts_sim_get_initialization_status(&amp;completed);
-dlog_print(DLOG_DEBUG, LOG_TAG, &quot;SIM %s completed&quot;, completed ? &quot;&quot; : &quot;not &quot;);
+dlog_print(DLOG_DEBUG, LOG_TAG, "SIM %s completed", completed ? "" : "not ");
 </pre>
 
   <div class="note">
@@ -3988,7 +3988,7 @@ int error_code = contacts_sim_import_all_contacts();
 
 <li>
 <p>Retrieve the path to the source directory containing the vCard files you want to import.</p>
-<p>The following example retrieves the path to the downloads directory of the device&#39;s internal storage:</p>
+<p>The following example retrieves the path to the downloads directory of the device's internal storage:</p>
 <pre class="prettyprint">
 int internal_storage_id;
 char *vcf_path = NULL;
@@ -3996,43 +3996,43 @@ char *vcf_path = NULL;
 /* Handle the storages found on the device */
 static bool
 storage_cb(int storage_id, storage_type_e type, storage_state_e state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *path, void *user_data)
+           const char *path, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Check whether the storage is the device&#39;s internal storage */
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the internal storage ID */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+    /* Check whether the storage is the device's internal storage */
+    if (type == STORAGE_TYPE_INTERNAL) {
+        /* Get the internal storage ID */
+        internal_storage_id = storage_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Internal storage found, end the callback loop */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        /* Internal storage found, end the callback loop */
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Internal storage not found, continue the callback loop */
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    /* Internal storage not found, continue the callback loop */
+    return true;
 }
 
 /* Get the source directory path */
 void
 get_storage_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *path = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the storages available on the device */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Handle each storage in the storage_cb() callback */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_foreach_device_supported(storage_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Get the absolute path to the downloads directory
-&nbsp;&nbsp;&nbsp;&nbsp;   of the device&#39;s internal storage
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_get_directory(internal_storage_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_DIRECTORY_DOWNLOADS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vcf_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int error_code = 0;
+    char *path = NULL;
+
+    /* Get the storages available on the device */
+    /* Handle each storage in the storage_cb() callback */
+    error_code = storage_foreach_device_supported(storage_cb, NULL);
+
+    /*
+       Get the absolute path to the downloads directory
+       of the device's internal storage
+    */
+    error_code = storage_get_directory(internal_storage_id,
+                                       STORAGE_DIRECTORY_DOWNLOADS,
+                                       &amp;path);
+    if (error_code != STORAGE_ERROR_NONE) {
+        vcf_path = strdup(path);
+        free(path);
+    }
 }
 </pre>
 </li>
@@ -4048,63 +4048,63 @@ DIR *dir = opendir(vcf_path);
 struct dirent *pDirent = NULL;
 
 if (dir == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;free(vcf_path);
+    free(vcf_path);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 if (dir) {
-&nbsp;&nbsp;&nbsp;&nbsp;while ((pDirent = readdir(dir)) != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   If the directory entry is not a regular file,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   skip to the next directory entry
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pDirent-&gt;d_type != DT_REG)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   If the file is not a vCard file,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   skip to the next directory entry
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *extension = strrchr(pDirent-&gt;d_name, &#39;.&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!extension || strcmp(extension, &quot;.vcf&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;file %s&quot;, pDirent-&gt;d_name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the vCard file path */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *file_path = malloc(strlen(vcf_path) + strlen(pDirent-&gt;d_name) + 4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(file_path, &quot;%s/%s&quot;, vcf_path, pDirent-&gt;d_name);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   If the vCard file does not contain any records,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   skip to the next directory entry
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int count;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int error_code = contacts_vcard_get_entity_count(file_path, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (count &lt; 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the vCard file size */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FILE *fp = fopen(file_path, &quot;r&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fseek(fp, 0, 2) != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int bufsize = ftell(fp);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rewind(fp);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;file size: %i&quot;, bufsize);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bufsize &lt; 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the vCard stream */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *vcard_stream = malloc(sizeof(char) * (bufsize));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memset(vcard_stream, &#39;\0&#39;, sizeof(vcard_stream));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fp != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char str[150];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while (fgets(str, 150, fp) != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(vcard_stream + strlen(vcard_stream), &quot;%s&quot;, str);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fclose(fp);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+    while ((pDirent = readdir(dir)) != NULL) {
+        /*
+           If the directory entry is not a regular file,
+           skip to the next directory entry
+        */
+        if (pDirent-&gt;d_type != DT_REG)
+            continue;
+
+        /*
+           If the file is not a vCard file,
+           skip to the next directory entry
+        */
+        char *extension = strrchr(pDirent-&gt;d_name, '.');
+        if (!extension || strcmp(extension, ".vcf"))
+            continue;
+        dlog_print(DLOG_DEBUG, LOG_TAG, "file %s", pDirent-&gt;d_name);
+
+        /* Get the vCard file path */
+        char *file_path = malloc(strlen(vcf_path) + strlen(pDirent-&gt;d_name) + 4);
+        sprintf(file_path, "%s/%s", vcf_path, pDirent-&gt;d_name);
+
+        /*
+           If the vCard file does not contain any records,
+           skip to the next directory entry
+        */
+        int count;
+        int error_code = contacts_vcard_get_entity_count(file_path, &amp;count);
+        if (count &lt; 1)
+            continue;
+
+        /* Calculate the vCard file size */
+        FILE *fp = fopen(file_path, "r");
+        if (fseek(fp, 0, 2) != 0)
+            /* Error handling */
+        int bufsize = ftell(fp);
+        rewind(fp);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "file size: %i", bufsize);
+        if (bufsize &lt; 1)
+            return 1;
+
+        /* Create the vCard stream */
+        char *vcard_stream = malloc(sizeof(char) * (bufsize));
+        memset(vcard_stream, '\0', sizeof(vcard_stream));
+        if (fp != NULL) {
+            char str[150];
+            while (fgets(str, 150, fp) != NULL)
+                sprintf(vcard_stream + strlen(vcard_stream), "%s", str);
+            fclose(fp);
+        } else {
+            return 1;
+        }
 </pre>
 </li>
 
@@ -4112,35 +4112,35 @@ if (dir) {
 <p>Parse the vCard streams for contacts using the <code>contacts_vcard_parse_to_contacts()</code> function. The function returns a list of all contact records parsed from the stream.</p>
 <p>The following example first parses a list of contact records from the vCard stream and then iterates through the list inserting each record to the contact database:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_h contacts_list;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h record;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the contact list from the vCard stream */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_vcard_parse_to_contacts(vcard_stream, &amp;contacts_list);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_vcard_parse_to_contacts failed: %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(vcard_stream);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Iterate through the contact list */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while (contacts_list_get_current_record_p(contacts_list, &amp;record) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int id = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add to the database */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_db_insert_record(record, &amp;id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;contacts_db_insert_record failed&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Move to the next record */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(contacts_list);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_destroy(contacts_list, true);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;contacts_list_destroy failed: %d&quot;, error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(file_path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;closedir(dir);
+        contacts_list_h contacts_list;
+        contacts_record_h record;
+
+        /* Get the contact list from the vCard stream */
+        error_code = contacts_vcard_parse_to_contacts(vcard_stream, &amp;contacts_list);
+        if (error_code != 0)
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "contacts_vcard_parse_to_contacts failed: %d",
+                       error_code);
+        free(vcard_stream);
+
+        /* Iterate through the contact list */
+        while (contacts_list_get_current_record_p(contacts_list, &amp;record) == 0) {
+            int id = -1;
+            /* Add to the database */
+            error_code = contacts_db_insert_record(record, &amp;id);
+            if (error_code != 0)
+                dlog_print(DLOG_ERROR, LOG_TAG, "contacts_db_insert_record failed");
+
+            /* Move to the next record */
+            error_code = contacts_list_next(contacts_list);
+        }
+        error_code = contacts_list_destroy(contacts_list, true);
+        if (error_code != 0)
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "contacts_list_destroy failed: %d", error_code);
+        free(file_path);
+    }
+    closedir(dir);
 }
 </pre>
 </li>
@@ -4157,13 +4157,13 @@ if (dir) {
 /* Get the vCard file path */
 char *resource_path = app_get_resource_path();
 char vcard_path[1024] = {0};
-snprintf(vcard_path, sizeof(vcard_path), &quot;%s/vcard.vcf&quot;, resource_path);
+snprintf(vcard_path, sizeof(vcard_path), "%s/vcard.vcf", resource_path);
 free(resource_path);
 
 /* Get the contacts from the vCard file */
 int error_code = contacts_vcard_parse_to_contact_foreach(vcard_path,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_contacts_vcard_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                                         _contacts_vcard_cb,
+                                                         NULL);
 </pre>
 <p>To check how many records are contained in a vCard file, use the <code>contacts_vcard_get_entity_count()</code> function.</p>
 </li>
@@ -4176,10 +4176,10 @@ int error_code = contacts_vcard_parse_to_contact_foreach(vcard_path,
 bool
 _contacts_vcard_cb(contacts_record_h record, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int id = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = contacts_db_insert_record(record, &amp;id);
+    int id = -1;
+    int error_code = contacts_db_insert_record(record, &amp;id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -4195,7 +4195,7 @@ _contacts_vcard_cb(contacts_record_h record, void *user_data)
 <li>
 <p>Define the location of the vCard file where the contacts are to be exported, and retrieve a list of all records using the <code>contacts_db_get_all_records()</code> function:</p>
 <pre class="prettyprint">
-char file_path[] = &quot;/path/contacts.vcf&quot;;
+char file_path[] = "/path/contacts.vcf";
 contacts_list_h list = NULL;
 error_code = contacts_db_get_all_records(_contacts_contact._uri, 0, 0, &amp;list);
 </pre>
@@ -4203,7 +4203,7 @@ error_code = contacts_db_get_all_records(_contacts_contact._uri, 0, 0, &amp;list
 <li>
 <p>Open the vCard file for writing:</p>
 <pre class="prettyprint">
-FILE *file = fopen(file_path, &quot;w&quot;);
+FILE *file = fopen(file_path, "w");
 </pre>
 </li>
 
@@ -4220,11 +4220,11 @@ contacts_record_h contact;
 char *vcard_stream;
 
 while (contacts_list_get_current_record_p(list, &amp;record) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_vcard_make_from_contact(record, &amp;vcard_stream);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Save to file */
-&nbsp;&nbsp;&nbsp;&nbsp;fwrite(vcard_stream, 1, strlen(vcard_stream), file);
-&nbsp;&nbsp;&nbsp;&nbsp;free(vcard_stream);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
+    error_code = contacts_vcard_make_from_contact(record, &amp;vcard_stream);
+    /* Save to file */
+    fwrite(vcard_stream, 1, strlen(vcard_stream), file);
+    free(vcard_stream);
+    error_code = contacts_list_next(list);
 }
 fclose(file);
 contacts_list_destroy(list, true);
diff --git a/org.tizen.guides/html/native/personal/context_n.htm b/org.tizen.guides/html/native/personal/context_n.htm
index a54f40d..b117bbf 100644 (file)
--- a/org.tizen.guides/html/native/personal/context_n.htm
+++ b/org.tizen.guides/html/native/personal/context_n.htm
@@ -29,7 +29,7 @@
                        <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#get_list">Getting a Profile Data List</a></li>
                        <li><a href="#enumerate_list">Enumerating Profile Data Lists</a></li>
-                       <li><a href="#datatypes">History Data Types</a></li>                    
+                       <li><a href="#datatypes">History Data Types</a></li>
                        <li><a href="#filters">Filters and Attributes</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
@@ -44,7 +44,7 @@
 
 <h1>Contextual Device Usage History Data</h1>
 
-<p>The Tizen platform collects data on the device usage. Based on this data, the applications can take advantage of the user&#39;s application usage patterns through statistical analysis.</p>
+<p>The Tizen platform collects data on the device usage. Based on this data, the applications can take advantage of the user's application usage patterns through statistical analysis.</p>
 
 <p>This feature is supported in mobile applications only.</p>
 
@@ -80,7 +80,7 @@ context_history_get_list(handle, CONTEXT_HISTORY_FREQUENTLY_USED_APP, filter, &a
 
 <p>To retrieve a contextual history profile:</p>
 <ol>
-<li>Create 2 handles: 1 for using the Contextual History API and 1 for the filter: 
+<li>Create 2 handles: 1 for using the Contextual History API and 1 for the filter:
 <pre class="prettyprint">
 /* Contextual History API handle */
 context_history_h handle;
@@ -101,7 +101,7 @@ context_history_filter_set_int(filter, CONTEXT_HISTORY_FILTER_TIME_SPAN, 14);
 
 /* Limiting the context to the applications used while a headphone is connected */
 context_history_filter_set_int(filter, CONTEXT_HISTORY_FILTER_AUDIO_JACK,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTEXT_HISTORY_FILTER_AUDIO_JACK_CONNECTED);
+                               CONTEXT_HISTORY_FILTER_AUDIO_JACK_CONNECTED);
 </pre>
 </li>
 <li>Retrieve profile data based on the defined filter:
@@ -121,7 +121,7 @@ context_history_filter_destroy(filter);
 <p>The list retrieved using the <code>context_history_get_list()</code> function contains a sorted list of records, each of which consists of a key and value pair.</p>
 <p>To enumerate the list:</p>
 <ol>
-<li>Check the number of records in the list. 
+<li>Check the number of records in the list.
 <p>In some cases, the retrieved list can contain less records than the result size set in the filter.</p>
 <pre class="prettyprint">
 int size;
@@ -136,21 +136,21 @@ char* app_id;
 context_history_record_h record;
 
 for (i = 0; i &lt; size; ++i) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Getting the current record */
-&nbsp;&nbsp;&nbsp;&nbsp;context_history_list_get_current(list, &amp;record);
+    /* Getting the current record */
+    context_history_list_get_current(list, &amp;record);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieving the application ID and the total use count from the record */
-&nbsp;&nbsp;&nbsp;&nbsp;context_history_record_get_string(record, CONTEXT_HISTORY_APP_ID, &amp;app_id);
-&nbsp;&nbsp;&nbsp;&nbsp;context_history_record_get_int(record, CONTEXT_HISTORY_TOTAL_COUNT, &amp;count);
+    /* Retrieving the application ID and the total use count from the record */
+    context_history_record_get_string(record, CONTEXT_HISTORY_APP_ID, &amp;app_id);
+    context_history_record_get_int(record, CONTEXT_HISTORY_TOTAL_COUNT, &amp;count);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Freeing the application ID string */
-&nbsp;&nbsp;&nbsp;&nbsp;free(app_id);
+    /* Freeing the application ID string */
+    free(app_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Releasing the memory occupied by the record */
-&nbsp;&nbsp;&nbsp;&nbsp;context_history_record_destroy(record);
+    /* Releasing the memory occupied by the record */
+    context_history_record_destroy(record);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Iterating to the next record */
-&nbsp;&nbsp;&nbsp;&nbsp;context_history_list_move_next(list);
+    /* Iterating to the next record */
+    context_history_list_move_next(list);
 }
 </pre>
 </li>
@@ -180,7 +180,7 @@ context_history_destroy(handle);
                </tr>
                <tr>
                        <td>Application usage history:
-                       
+
                                        <p><code>CONTEXT_HISTORY_RECENTLY_USED_APP</code></p>
                                        <p><code>CONTEXT_HISTORY_FREQUENTLY_USED_APP</code></p>
                                        <p><code>CONTEXT_HISTORY_RARELY_USED_APP</code></p>
@@ -192,7 +192,7 @@ context_history_destroy(handle);
                                <ul>
                                        <li>Most recently or frequently used applications, in a descending order of the application use counts.</li>
                                        <li>Most rarely used applications in removable applications, in an ascending order of the application use counts.</li>
-                                       <li>Peak time for applications, or the time period when the user most frequently uses an application during the day. 
+                                       <li>Peak time for applications, or the time period when the user most frequently uses an application during the day.
                                                <p>The result is a sorted list of hours of the day, in a descending order of the application use count in each one-hour time slot.</p></li>
                                        <li>Common settings for applications, or the most common setting values regarding an application or any applications.</li>
                                </ul>
@@ -295,7 +295,7 @@ context_history_destroy(handle);
                        <td>String</td>
                        <td>
                                Applications can get the statistics of the data logged while a specific Wi-Fi is connected, by setting the BSSID string of the target Wi-Fi AP.
-                               <p>The currently connected Wi-Fi AP&#39;s BSSID can be retrieved through the Wi-Fi Manager APIs. For more information, see the <a href="../connectivity/wifi_n.htm">Wi-Fi</a> guide.</p>
+                               <p>The currently connected Wi-Fi AP's BSSID can be retrieved through the Wi-Fi Manager APIs. For more information, see the <a href="../connectivity/wifi_n.htm">Wi-Fi</a> guide.</p>
                        </td>
                </tr>
                <tr>
diff --git a/org.tizen.guides/html/native/personal/data_sync_n.htm b/org.tizen.guides/html/native/personal/data_sync_n.htm
index b0cf8e0..0a43924 100644 (file)
--- a/org.tizen.guides/html/native/personal/data_sync_n.htm
+++ b/org.tizen.guides/html/native/personal/data_sync_n.htm
@@ -27,7 +27,7 @@
                </ul>
         <p class="toc-title">Content</p>
         <ul class="toc">
-                       <li><a href="#adapter">Sync Adapter</a></li>                            
+                       <li><a href="#adapter">Sync Adapter</a></li>
                        <li><a href="#prerequisites">Prerequisites</a></li>
                        <li><a href="#on_demand_sync">Defining an On-demand Sync Job</a></li>
                        <li><a href="#periodic_sync">Defining a Periodic Sync Job</a></li>
@@ -106,8 +106,8 @@
   </table>
 
 
- 
-  
+
+
 <h2 id="adapter">Sync Adapter</h2>
 
 
@@ -116,11 +116,11 @@
         The Sync Adapter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">wearable</a> applications) operations must be carried out by a service application (which operates data synchronization) before using the Sync Manager API.
 <p>The number of service applications that can set callbacks is restricted to only one per a package.</p>
     </div>
- 
+
  <p>The Sync Adapter API allows you to:</p>
 <ul>
 <li><a href="#set_callback">Register callbacks</a> for receiving notifications about the sync job start and cancellation.</li>
-<li>Start a sync operation with an app control, so that the application&#39;s daemon needs not to stay awake.
+<li>Start a sync operation with an app control, so that the application's daemon needs not to stay awake.
 <p>The Sync Adapter API allows you to use this mechanism without using the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications) separately. In other words, when using  the Sync Adapter API, you can use the App Control API indirectly.</p>
  </li>
 
@@ -132,12 +132,12 @@
 <li>To use the Sync Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To set an alarm--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/alarm.set&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To use the calendar capability--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/calendar.read&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--To use the contact capability--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/contact.read&lt;/privilege&gt;
+   &lt;!--To set an alarm--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/alarm.set&lt;/privilege&gt;
+   &lt;!--To use the calendar capability--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/calendar.read&lt;/privilege&gt;
+   &lt;!--To use the contact capability--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/contact.read&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -177,17 +177,17 @@ account_h account = NULL;
 int account_id = -1;
 
 account_create(&amp;account);
-account_set_user_name(account, &quot;test_name&quot;);
-account_set_email_address(account, &quot;test_email@samsung.com&quot;);
-account_set_package_name(account, &quot;data-sync-module&quot;);
+account_set_user_name(account, "test_name");
+account_set_email_address(account, "test_email@samsung.com");
+account_set_package_name(account, "data-sync-module");
 account_set_sync_support(account, ACCOUNT_SUPPORTS_SYNC);
 account_insert_to_db(account, &amp;account_id);
 
-const char *sync_job_name = &quot;on_demand_sync_job&quot;;
+const char *sync_job_name = "on_demand_sync_job";
 
 bundle *sync_job_user_data = NULL;
 sync_job_user_data = bundle_create();
-bundle_add_str(sync_job_user_data, &quot;str&quot;, &quot;String sync_job_user_data sample.&quot;);
+bundle_add_str(sync_job_user_data, "str", "String sync_job_user_data sample.");
 
 int sync_job_id = -1;
 </pre>
@@ -196,27 +196,27 @@ int sync_job_id = -1;
 <li>Add an on-demand sync job:
 <pre class="prettyprint">
 result = sync_manager_on_demand_sync_job(account, sync_job_name, SYNC_OPTION_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
+                                         sync_job_user_data, &amp;sync_job_id);
 </pre>
 <p>This function can be used with various options, as shown in the following example. The <code>SYNC_OPTION_NO_RETRY</code> option means the sync job is not performed again when it fails. The <code>SYNC_OPTION_EXPEDITED</code> option means the other sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
- 
+
 <pre class="prettyprint">
 result = sync_manager_on_demand_sync_job(account, sync_job_name2, SYNC_OPTION_NO_RETRY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id2);
+                                         sync_job_user_data, &amp;sync_job_id2);
 result = sync_manager_on_demand_sync_job(account, sync_job_name3, SYNC_OPTION_EXPEDITED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id3);
+                                         sync_job_user_data, &amp;sync_job_id3);
 result = sync_manager_on_demand_sync_job(account, sync_job_name4,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id4);
+                                         (SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED),
+                                         sync_job_user_data, &amp;sync_job_id4);
 </pre>
 <p>This function can also be called like in the following example, because the account handle and user data are not mandatory:</p>
 <pre class="prettyprint">
 result = sync_manager_on_demand_sync_job(NULL, sync_job_name, SYNC_OPTION_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id);
+                                         sync_job_user_data, &amp;sync_job_id);
 result = sync_manager_on_demand_sync_job(account, sync_job_name2, SYNC_OPTION_NO_RETRY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, &amp;sync_job_id2);
+                                         NULL, &amp;sync_job_id2);
 result = sync_manager_on_demand_sync_job(NULL, sync_job_name3, SYNC_OPTION_EXPEDITED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, &amp;sync_job_id3);
+                                         NULL, &amp;sync_job_id3);
 </pre>
 <p>If the on-demand sync job addition process succeeds, the <code>SYNC_ERROR_NONE</code> value is returned.</p>
 </li>
@@ -226,7 +226,7 @@ result = sync_manager_on_demand_sync_job(NULL, sync_job_name3, SYNC_OPTION_EXPED
 <pre class="prettyprint">
 result = sync_manager_remove_sync_job(sync_job_id);
 
-account_delete_from_db_by_package_name(&quot;data-sync-module&quot;);
+account_delete_from_db_by_package_name("data-sync-module");
 account_destroy(account);
 
 sync_adapter_unset_callbacks();
@@ -239,7 +239,7 @@ sync_adapter_unset_callbacks();
 </pre>
 </li>
 </ol>
-               
+
 <h2 id="periodic_sync" name="periodic_sync">Defining a Periodic Sync Job</h2>
 
 <p>To inform periodically a service application of the time to operate a sync job with its sync interval:</p>
@@ -251,13 +251,13 @@ sync_adapter_unset_callbacks();
 account_h account = NULL;
 int account_id = -1;
 account_create(&amp;account);
-account_set_user_name(account, &quot;test_name&quot;);
-account_set_email_address(account, &quot;test_email@samsung.com&quot;);
-account_set_package_name(account, &quot;data-sync-module&quot;);
+account_set_user_name(account, "test_name");
+account_set_email_address(account, "test_email@samsung.com");
+account_set_package_name(account, "data-sync-module");
 account_set_sync_support(account, ACCOUNT_SUPPORTS_SYNC);
 account_insert_to_db(account, &amp;account_id);
 
-const char *sync_job_name = &quot;periodic_sync_job&quot;;
+const char *sync_job_name = "periodic_sync_job";
 
 sync_period_e sync_period = SYNC_PERIOD_INTERVAL_30MIN;
 sync_period_e sync_period2 = SYNC_PERIOD_INTERVAL_1H;
@@ -266,7 +266,7 @@ sync_period_e sync_period4 = SYNC_PERIOD_INTERVAL_6H;
 
 bundle *sync_job_user_data = NULL;
 sync_job_user_data = bundle_create();
-bundle_add_str(sync_job_user_data, &quot;str&quot;, &quot;String sync_job_user_data sample.&quot;);
+bundle_add_str(sync_job_user_data, "str", "String sync_job_user_data sample.");
 
 int sync_job_id = -1;
 </pre>
@@ -275,33 +275,33 @@ int sync_job_id = -1;
 <p>This function operates the sync job with the given period interval.</p>
 <pre class="prettyprint">
 result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NONE, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id);
+                                            SYNC_OPTION_NONE, sync_job_user_data,
+                                            &amp;sync_job_id);
 </pre>
 <p>This function can be used with various options, as shown in the following example. The <code>SYNC_OPTION_NO_RETRY</code> option means a sync job is not performed again when it fails. The <code>SYNC_OPTION_EXPEDITED</code> option means another sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
 <pre class="prettyprint">
 result = sync_manager_add_periodic_sync_job(account, sync_job_name2, sync_period2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NO_RETRY, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id2);
+                                            SYNC_OPTION_NO_RETRY, sync_job_user_data,
+                                            &amp;sync_job_id2);
 result = sync_manager_add_periodic_sync_job(account, sync_job_name3, sync_period3,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_EXPEDITED, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id3);
+                                            SYNC_OPTION_EXPEDITED, sync_job_user_data,
+                                            &amp;sync_job_id3);
 result = sync_manager_add_periodic_sync_job(account, sync_job_name4, sync_period4,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(SYNC_OPTION_NO_RETRY
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| SYNC_OPTION_EXPEDITED),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id4);
+                                            (SYNC_OPTION_NO_RETRY
+                                             | SYNC_OPTION_EXPEDITED),
+                                            sync_job_user_data, &amp;sync_job_id4);
 </pre>
 <p>This function can also be called like in the following example, because the account handle and user data are not mandatory:</p>
 <pre class="prettyprint">
 result = sync_manager_add_periodic_sync_job(NULL, sync_job_name, sync_period,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NONE, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id);
+                                            SYNC_OPTION_NONE, sync_job_user_data,
+                                            &amp;sync_job_id);
 result = sync_manager_add_periodic_sync_job(account, sync_job_name2, sync_period2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NO_RETRY, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id2);
+                                            SYNC_OPTION_NO_RETRY, NULL,
+                                            &amp;sync_job_id2);
 result = sync_manager_add_periodic_sync_job(NULL, sync_job_name3, sync_period3,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_EXPEDITED, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id3);
+                                            SYNC_OPTION_EXPEDITED, NULL,
+                                            &amp;sync_job_id3);
 </pre>
 <p>If the periodic sync job addition process succeeds, the <code>SYNC_ERROR_NONE</code> value is returned.</p>
 </li>
@@ -309,22 +309,22 @@ result = sync_manager_add_periodic_sync_job(NULL, sync_job_name3, sync_period3,
 <li>The <code>sync_manager_add_periodic_sync_job()</code> function can renew a registered periodic sync job by using the same <code>sync_job_name</code> as before:
 <pre class="prettyprint">
 result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NONE, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id);
+                                            SYNC_OPTION_NONE, sync_job_user_data,
+                                            &amp;sync_job_id);
 result = sync_manager_add_periodic_sync_job(account, sync_job_name, sync_period2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_EXPEDITED, sync_job_user_data2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id);
+                                            SYNC_OPTION_EXPEDITED, sync_job_user_data2,
+                                            &amp;sync_job_id);
 </pre>
 <p>All the function parameters can be reset except <code>sync_job_name</code> and <code>sync_job_id</code>, which are used to manage a specific sync job.</p>
 </li>
 
 <li>When the periodic sync is no longer needed, remove it with the <code>sync_manager_remove_sync_job()</code> function with its <code>sync_job_id</code>. If you want to stop using the account too, clean up the account handle.
 <p>At the end, unset the sync callbacks and release the resources with the <code>sync_adapter_unset_callbacks()</code> function.</p>
- 
+
 <pre class="prettyprint">
 result = sync_manager_remove_sync_job(sync_job_id);
 
-account_delete_from_db_by_package_name(&quot;data-sync-module&quot;);
+account_delete_from_db_by_package_name("data-sync-module");
 account_destroy(account);
 
 sync_adapter_unset_callbacks();
@@ -351,9 +351,9 @@ sync_adapter_unset_callbacks();
 account_h account = NULL;
 int account_id = -1;
 account_create(&amp;account);
-account_set_user_name(account, &quot;test_name&quot;);
-account_set_email_address(account, &quot;test_email@samsung.com&quot;);
-account_set_package_name(account, &quot;data-sync-module&quot;);
+account_set_user_name(account, "test_name");
+account_set_email_address(account, "test_email@samsung.com");
+account_set_package_name(account, "data-sync-module");
 account_set_sync_support(account, ACCOUNT_SUPPORTS_SYNC);
 account_insert_to_db(account, &amp;account_id);
 
@@ -366,7 +366,7 @@ const char *sync_capability_video = SYNC_SUPPORTS_CAPABILITY_VIDEO;
 
 bundle *sync_job_user_data = NULL;
 sync_job_user_data = bundle_create();
-bundle_add_str(sync_job_user_data, &quot;str&quot;, &quot;String sync_job_user_data sample.&quot;);
+bundle_add_str(sync_job_user_data, "str", "String sync_job_user_data sample.");
 
 int sync_job_id = -1;
 </pre>
@@ -376,35 +376,35 @@ int sync_job_id = -1;
 <p>The <code>sync_manager_add_data_change_sync_job()</code> function operates a sync job only for a registered capability.</p>
 <pre class="prettyprint">
 result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NONE, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id);
+                                               SYNC_OPTION_NONE, sync_job_user_data,
+                                               &amp;sync_job_id);
 </pre>
 
 <p>This function can be used with various options, as shown in the following example. The <code>SYNC_OPTION_NO_RETRY</code> option means a sync job is not performed again when it fails. The <code>SYNC_OPTION_EXPEDITED</code> option means another sync job is operated as soon as possible. The call with the OR structure lets the other sync job operate just once with priority.</p>
 <pre class="prettyprint">
 result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NO_RETRY, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id2);
+                                               SYNC_OPTION_NO_RETRY, sync_job_user_data,
+                                               &amp;sync_job_id2);
 result = sync_manager_add_data_change_sync_job(account, sync_capability_contact,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_EXPEDITED, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id3);
+                                               SYNC_OPTION_EXPEDITED, sync_job_user_data,
+                                               &amp;sync_job_id3);
 result = sync_manager_add_data_change_sync_job(account, sync_capability_image,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(SYNC_OPTION_NO_RETRY
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| SYNC_OPTION_EXPEDITED),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data, &amp;sync_job_id4);
+                                               (SYNC_OPTION_NO_RETRY
+                                                | SYNC_OPTION_EXPEDITED),
+                                               sync_job_user_data, &amp;sync_job_id4);
 </pre>
 <p>This function can also be called like in the following example, because the account handle and user data are not mandatory:</p>
 
 <pre class="prettyprint">
 result = sync_manager_add_data_change_sync_job(NULL, sync_capability_music,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NONE, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id);
+                                               SYNC_OPTION_NONE, sync_job_user_data,
+                                               &amp;sync_job_id);
 result = sync_manager_add_data_change_sync_job(account, sync_capability_sound,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NO_RETRY, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id2);
+                                               SYNC_OPTION_NO_RETRY, NULL,
+                                               &amp;sync_job_id2);
 result = sync_manager_add_data_change_sync_job(NULL, sync_capability_video,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_EXPEDITED, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id3);
+                                               SYNC_OPTION_EXPEDITED, NULL,
+                                               &amp;sync_job_id3);
 </pre>
 <p>If the data change sync job addition process succeeds, the <code>SYNC_ERROR_NONE</code> value is returned.</p>
 </li>
@@ -412,12 +412,12 @@ result = sync_manager_add_data_change_sync_job(NULL, sync_capability_video,
 <li>The <code>sync_manager_add_data_change_sync_job()</code> function can renew a registered data change sync job by using the same <code>sync_capability</code> as before:
 <pre class="prettyprint">
 result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_NONE, sync_job_user_data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id);
+                                               SYNC_OPTION_NONE, sync_job_user_data,
+                                               &amp;sync_job_id);
 result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SYNC_OPTION_EXPEDITED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sync_job_user_data2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;sync_job_id);
+                                               SYNC_OPTION_EXPEDITED,
+                                               sync_job_user_data2,
+                                               &amp;sync_job_id);
 </pre>
 <p>All the function parameters can be reset except <code>sync_capability</code> and <code>sync_job_id</code>, which are used to manage a specific sync job.</p>
 </li>
@@ -428,7 +428,7 @@ result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar
 <pre class="prettyprint">
 result = sync_manager_remove_sync_job(sync_job_id);
 
-account_delete_from_db_by_package_name(&quot;data-sync-module&quot;);
+account_delete_from_db_by_package_name("data-sync-module");
 account_destroy(account);
 
 sync_adapter_unset_callbacks();
@@ -458,9 +458,9 @@ result = sync_manager_foreach_sync_job(sync_job_cb, NULL);
 <pre class="prettyprint">
 bool
 sync_job_cb(account_h account, const char *sync_job_name, const char *sync_capability,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int sync_job_id, bundle *sync_job_user_data, void *user_data)
+            int sync_job_id, bundle *sync_job_user_data, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Verify the registered sync jobs */
+    /* Verify the registered sync jobs */
 }
 </pre>
 </li>
@@ -484,16 +484,16 @@ result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 <pre class="prettyprint">
 bool
 on_start_cb(account_h account, const char *sync_job_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *sync_capability, bundle *sync_job_user_data)
+            const char *sync_capability, bundle *sync_job_user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Start the data sync process */
+    /* Start the data sync process */
 }
 
 void
 on_cancel_cb(account_h account, const char *sync_job_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *sync_capability, bundle *sync_job_user_data)
+             const char *sync_capability, bundle *sync_job_user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Cancel the data sync process */
+    /* Cancel the data sync process */
 }
 </pre>
 </li>
@@ -539,12 +539,12 @@ result = sync_adapter_unset_callbacks();
                           <p>A data change sync job can provide a notification whenever a corresponding data change occurs. If the <code>sync_manager_add_data_change_sync_job()</code> function is used with a capability, it is operated for the related capability only.</p>
                           <p>The following capabilities are available:</p>
                           <pre class="prettyprint">
-#define SYNC_SUPPORTS_CAPABILITY_CALENDAR &quot;http://tizen.org/sync/capability/calendar&quot;
-#define SYNC_SUPPORTS_CAPABILITY_CONTACT &quot;http://tizen.org/sync/capability/contact&quot;
-#define SYNC_SUPPORTS_CAPABILITY_IMAGE &quot;http://tizen.org/sync/capability/image&quot;
-#define SYNC_SUPPORTS_CAPABILITY_MUSIC &quot;http://tizen.org/sync/capability/music&quot;
-#define SYNC_SUPPORTS_CAPABILITY_SOUND &quot;http://tizen.org/sync/capability/sound&quot;
-#define SYNC_SUPPORTS_CAPABILITY_VIDEO &quot;http://tizen.org/sync/capability/video&quot;
+#define SYNC_SUPPORTS_CAPABILITY_CALENDAR "http://tizen.org/sync/capability/calendar"
+#define SYNC_SUPPORTS_CAPABILITY_CONTACT "http://tizen.org/sync/capability/contact"
+#define SYNC_SUPPORTS_CAPABILITY_IMAGE "http://tizen.org/sync/capability/image"
+#define SYNC_SUPPORTS_CAPABILITY_MUSIC "http://tizen.org/sync/capability/music"
+#define SYNC_SUPPORTS_CAPABILITY_SOUND "http://tizen.org/sync/capability/sound"
+#define SYNC_SUPPORTS_CAPABILITY_VIDEO "http://tizen.org/sync/capability/video"
 </pre></td>
        </tr>
        <tr>
@@ -561,7 +561,7 @@ result = sync_adapter_unset_callbacks();
                <td><code>sync_option_e</code></td>
                <td>Yes</td>
                <td>Option for deciding the sync job behavior.
-                          <p>The behavior options can be used as an OR value. For example, the <code>(SYNC_OPTION_EXPEDITED | SYNC_OPTION_NO_RETRY)</code> expression is available, and means that the &quot;Sync job is operated just once with priority&quot;.</p>
+                          <p>The behavior options can be used as an OR value. For example, the <code>(SYNC_OPTION_EXPEDITED | SYNC_OPTION_NO_RETRY)</code> expression is available, and means that the "Sync job is operated just once with priority".</p>
                           <p>The following options are available:</p>
                           <ul><li><code>SYNC_OPTION_NONE</code>: Sync job is operated normally</li>
                           <li><code>SYNC_OPTION_EXPEDITED</code>: Sync job is operated as soon as possible</li>
diff --git a/org.tizen.guides/html/native/personal/fido_n.htm b/org.tizen.guides/html/native/personal/fido_n.htm
index eece5be..606c3a1 100644 (file)
--- a/org.tizen.guides/html/native/personal/fido_n.htm
+++ b/org.tizen.guides/html/native/personal/fido_n.htm
@@ -43,11 +43,11 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-    
-<h1>FIDO Universal Authentication Framework</h1> 
+
+<h1>FIDO Universal Authentication Framework</h1>
 
   <p>The FIDO (Fast IDentity Online) Alliance is a organization formed to address the lack of interoperability among strong authentication devices as well as the problems users face with creating and remembering multiple usernames and passwords.</p>
-  
+
   <p>FIDO covers both password-less authentications (through <a href="#fido_uaf_components">FIDO UAF components</a>), such as fingerprint, iris, and voice, and multi-factor authentication, such as OTP and USB dongle. Tizen currently does not support multi-factor authentication.</p>
   <p>FIDO Alliance provides certification for FIDO-compliant products through FIDO Ready&trade;.</p>
 
@@ -73,7 +73,7 @@
        </li>
   <li><p><strong>FIDO UAF protocols </strong></p>
   <p>The FIDO UAF protocols carry FIDO UAF messages between user devices and relying parties. <a href="#protocol_conversation">Use the protocol messages to register, authenticate, and deregister the authentication</a>:</p>
-  <ul><li>Authenticator registration: <p>The FIDO UAF registration protocol enables relying parties to discover the FIDO UAF authenticators available on a user&#39;s system or device. Discovery conveys the FIDO UAF authenticator attributes to the relying party, thus enabling policy decisions and enforcement to take place.</p>
+  <ul><li>Authenticator registration: <p>The FIDO UAF registration protocol enables relying parties to discover the FIDO UAF authenticators available on a user's system or device. Discovery conveys the FIDO UAF authenticator attributes to the relying party, thus enabling policy decisions and enforcement to take place.</p>
   <p align="center"><strong>Figure: FIDO UAF registration</strong></p>
   <p style="text-align: center;"> <img alt="Components" src="../../images/fido_reg_flow.png" /></p>
        </li>
@@ -82,14 +82,14 @@
   <p style="text-align: center;"> <img alt="Components" src="../../images/fido_auth_flow.png" /></p>
        </li>
   <li>Authenticator deregistration: <p>Deregistration is typically required when the user account is removed at the relying party. The relying party can trigger the deregistration by requesting the authenticator to delete the UAF credential associated with the user account.</p>
-  
+
   <p align="center"><strong>Figure: FIDO UAF deregistration</strong></p>
   <p style="text-align: center;"> <img alt="Components" src="../../images/fido_dereg_flow.png" /></p>
   </li>
   </ul>
        </li>
   <li><p><strong>FIDO UAF authenticator abstraction layer</strong></p>
-  <p>The FIDO UAF authenticator abstraction layer provides a uniform API to FIDO clients enabling the use of authenticator-based cryptographic services for FIDO-supported operations. It provides a uniform lower-layer &quot;authenticator plugin&quot; API facilitating the deployment of multi-vendor FIDO UAF authenticators and their requisite drivers.</p>
+  <p>The FIDO UAF authenticator abstraction layer provides a uniform API to FIDO clients enabling the use of authenticator-based cryptographic services for FIDO-supported operations. It provides a uniform lower-layer "authenticator plugin" API facilitating the deployment of multi-vendor FIDO UAF authenticators and their requisite drivers.</p>
        </li>
   <li><p><strong>FIDO UAF authenticator</strong></p>
   <p>The FIDO UAF authenticator is a secure entity, connected to or housed within the FIDO user devices, that can create key material associated with a relying party. The key can then be used to participate in FIDO UAF strong authentication protocols.</p>
@@ -101,7 +101,7 @@
 <p>To use the FIDO Client API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__FIDO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__FIDO__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/fido.client&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/fido.client&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 
@@ -112,24 +112,24 @@
 void
 start_discover(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = fido_foreach_authenticator(auth_list_cb, data);
+    int ret = fido_foreach_authenticator(auth_list_cb, data);
 }
 
 static void
 auth_list_cb(const fido_authenticator_h auth, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;__print_authinfo(auth, ad);
+    appdata_s *ad = user_data;
+    __print_authinfo(auth, ad);
 }
 
 static void
 __print_authinfo(fido_authenticator_h auth, appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *title = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;fido_authenticator_get_title(auth, &amp;title);
+    char *title = NULL;
+    fido_authenticator_get_title(auth, &amp;title);
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *aaid = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;fido_authenticator_get_aaid(auth, &amp;aaid);
+    char *aaid = NULL;
+    fido_authenticator_get_aaid(auth, &amp;aaid);
 }
 </pre>
 
@@ -141,20 +141,20 @@ __print_authinfo(fido_authenticator_h auth, appdata_s *ad)
 void
 start_check_policy(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;bool is_supported = false;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = fido_uaf_is_supported(json_reg, &amp;is_supported);
+    bool is_supported = false;
+    int ret = fido_uaf_is_supported(json_reg, &amp;is_supported);
 
-&nbsp;&nbsp;&nbsp;&nbsp;char str[2048] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;str[0] = &#39;\0&#39;;
+    char str[2048] = {0,};
+    str[0] = '\0';
 
-&nbsp;&nbsp;&nbsp;&nbsp;strcpy(str, &quot;CHECK POLICY RESPONSE | &quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;if (is_supported == true)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(str, &quot;TRUE&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(str, &quot;FALSE&quot;);
+    strcpy(str, "CHECK POLICY RESPONSE | ");
+    if (is_supported == true)
+        sprintf(str, "TRUE");
+    else
+        sprintf(str, "FALSE");
 
-&nbsp;&nbsp;&nbsp;&nbsp;create_popup(str, (appdata_s *)user_data);
-&nbsp;&nbsp;&nbsp;&nbsp;free(error_string);
+    create_popup(str, (appdata_s *)user_data);
+    free(error_string);
 }
 </pre>
 
@@ -172,31 +172,31 @@ start_check_policy(void *data, Evas_Object *obj, void *event_info)
 void
 start_registration(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = fido_uaf_get_response_message(json_reg, NULL, _process_cb, data);
+    int ret = fido_uaf_get_response_message(json_reg, NULL, _process_cb, data);
 }
 
 static void
 _process_cb(fido_error_e tizen_error_code, const char *uaf_response, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char str[2048] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;if (tizen_error_code == 0 &amp;&amp; uaf_response != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const int max_popup_str_len = strlen(uaf_response) + 500;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *popup_str = calloc(1, max_popup_str_len);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(popup_str, max_popup_str_len - 1, &quot;UAF Response =%s&quot;, uaf_response);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;create_popup(popup_str, (appdata_s *)user_data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(popup_str);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    char str[2048] = {0,};
+    if (tizen_error_code == 0 &amp;&amp; uaf_response != NULL) {
+        const int max_popup_str_len = strlen(uaf_response) + 500;
+        char *popup_str = calloc(1, max_popup_str_len);
+        snprintf(popup_str, max_popup_str_len - 1, "UAF Response =%s", uaf_response);
+        create_popup(popup_str, (appdata_s *)user_data);
+        free(popup_str);
+    }
 }
 </pre>
 </li>
 <li>Authenticate a user.
-<p>UAF allows the relying party to prompt the end user to authenticate using a previously registered FIDO authenticator. This authentication can be invoked any time, at the relying party&#39;s discretion.</p>
+<p>UAF allows the relying party to prompt the end user to authenticate using a previously registered FIDO authenticator. This authentication can be invoked any time, at the relying party's discretion.</p>
 
 <pre class="prettyprint">
 void
 start_auth(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = fido_uaf_get_response_message(json_auth, NULL, _process_cb, data);
+    int ret = fido_uaf_get_response_message(json_auth, NULL, _process_cb, data);
 }
 </pre>
 </li>
@@ -207,15 +207,15 @@ start_auth(void *data, Evas_Object *obj, void *event_info)
 void
 start_de_registration(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = fido_uaf_get_response_message(json_dereg, NULL, _process_dereg_cb, data);
+    int ret = fido_uaf_get_response_message(json_dereg, NULL, _process_dereg_cb, data);
 }
 
 static void
 _process_dereg_cb(int tizen_error_code, char *uaf_response, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *error_string = get_error_code(tizen_error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;create_popup(error_string, (appdata_s *)user_data);
-&nbsp;&nbsp;&nbsp;&nbsp;free(error_string);
+    char *error_string = get_error_code(tizen_error_code);
+    create_popup(error_string, (appdata_s *)user_data);
+    free(error_string);
 }
 </pre>
 </li>
@@ -234,21 +234,21 @@ _process_dereg_cb(int tizen_error_code, char *uaf_response, void *user_data)
 void
 start_notify_pos(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (json_reg != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int ret = fido_uaf_get_response_message(json_reg, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_process_cb_for_notify_pos,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data);
+    if (json_reg != NULL)
+        int ret = fido_uaf_get_response_message(json_reg, NULL,
+                                                _process_cb_for_notify_pos,
+                                                data);
 }
 
 static void
 _process_cb_for_notify_pos(fido_error_e tizen_error_code, const char *uaf_response,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                           void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = fido_uaf_set_server_result(FIDO_SERVER_STATUS_CODE_OK, uaf_response);
+    int ret = fido_uaf_set_server_result(FIDO_SERVER_STATUS_CODE_OK, uaf_response);
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *error_string = get_error_code(tizen_error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;create_popup(error_string, (appdata_s *)user_data);
-&nbsp;&nbsp;&nbsp;&nbsp;free(error_string);
+    char *error_string = get_error_code(tizen_error_code);
+    create_popup(error_string, (appdata_s *)user_data);
+    free(error_string);
 }
 </pre>
 </li>
@@ -258,24 +258,24 @@ _process_cb_for_notify_pos(fido_error_e tizen_error_code, const char *uaf_respon
 void
 start_notify_neg(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = fido_uaf_get_response_message(json_reg, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_process_cb_for_notify_neg, data);
+    int ret = fido_uaf_get_response_message(json_reg, NULL,
+                                            _process_cb_for_notify_neg, data);
 }
 
 static void
 _process_cb_for_notify_neg(fido_error_e tizen_error_code, const char *uaf_response,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                           void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = fido_uaf_set_server_result(0, uaf_response);
+    int ret = fido_uaf_set_server_result(0, uaf_response);
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *error_string = get_error_code(tizen_error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;create_popup(error_string, (appdata_s *)user_data);
-&nbsp;&nbsp;&nbsp;&nbsp;free(error_string);
+    char *error_string = get_error_code(tizen_error_code);
+    create_popup(error_string, (appdata_s *)user_data);
+    free(error_string);
 }
 </pre>
 </li>
 </ul>
-  
+
   <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/personal/oauth_n.htm b/org.tizen.guides/html/native/personal/oauth_n.htm
index 6c17710..faf8506 100644 (file)
--- a/org.tizen.guides/html/native/personal/oauth_n.htm
+++ b/org.tizen.guides/html/native/personal/oauth_n.htm
@@ -43,10 +43,10 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-    
-<h1>OAuth 2.0</h1> 
 
-<p>The OAuth 2.0 authorization framework enables a third-party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing the third-party application to obtain access on its own behalf.</p> 
+<h1>OAuth 2.0</h1>
+
+<p>The OAuth 2.0 authorization framework enables a third-party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing the third-party application to obtain access on its own behalf.</p>
 <p>The main features of the OAuth 2.0 API include:</p>
 <ul>
 <li>Creating an OAuth 2.0 request
@@ -57,45 +57,45 @@
 <p>You can <a href="#response">obtain information from the OAuth 2.0 response handle</a> returned in a callback.</p></li>
 </ul>
 
-<p align="center"><strong>Figure: Protocol flow</strong></p> 
-<p style="text-align: center;"> <img alt="Protocol flow" src="../../images/oauth2_protocol_flow.png" /></p> 
-  
+<p align="center"><strong>Figure: Protocol flow</strong></p>
+<p style="text-align: center;"> <img alt="Protocol flow" src="../../images/oauth2_protocol_flow.png" /></p>
+
     <p>The OAuth 2.0 specification is defined in <a href="http://tools.ietf.org/html/rfc6749" target="_blank">[RFC 6749]</a> and it builds on the OAuth 1.0 <a href="http://tools.ietf.org/html/rfc5849" target="_blank">[RFC 5849]</a> deployment experience, as well as additional use cases and extensibility requirements gathered from the wider IETF community. The OAuth 2.0 protocol is not backward-compatible with OAuth 1.0.</p>
-  
-<h2 id="grant" name="grant">Authorization Grant</h2> 
-  <p>An authorization grant is a credential representing the resource owner&#39;s authorization (to access its protected resources) used by the client to obtain an access token.</p>
+
+<h2 id="grant" name="grant">Authorization Grant</h2>
+  <p>An authorization grant is a credential representing the resource owner's authorization (to access its protected resources) used by the client to obtain an access token.</p>
 <p>The specification defines the following 4 grant types as well as an extensibility mechanism for defining additional types:</p>
 
 <ul><li>Authorization code
   <p>The <a href="#req_code">authorization code is obtained</a> by using an authorization server as an intermediary between the client and resource owner. Instead of requesting authorization directly from the resource owner, the client directs the resource owner to an authorization server, which in turn directs the resource owner back to the client with the authorization code.</p>
 
- <p>The authorization code provides some important security benefits, such as the ability to authenticate the client, as well as the transmission of the access token directly to the client without passing it through the resource owner&#39;s user-agent and potentially exposing it to others, including the resource owner.</p>
-<p align="center"><strong>Figure: Authorization code flow</strong></p> 
-<p style="text-align: center;"> <img alt="Authorization code flow" src="../../images/oauth2_auth_code.png" /></p>  
+ <p>The authorization code provides some important security benefits, such as the ability to authenticate the client, as well as the transmission of the access token directly to the client without passing it through the resource owner's user-agent and potentially exposing it to others, including the resource owner.</p>
+<p align="center"><strong>Figure: Authorization code flow</strong></p>
+<p style="text-align: center;"> <img alt="Authorization code flow" src="../../images/oauth2_auth_code.png" /></p>
  </li>
-   
+
 <li>Implicit
   <p>In the implicit flow, the client is issued an access token directly (as a result of the resource owner authorization). The grant type is implicit, as no intermediate credentials (such as an authorization code) are issued.</p>
 
   <p>Implicit grants improve the responsiveness and efficiency of some clients (such as a client implemented as an in-browser application), since it reduces the number of round trips required to obtain an access token.</p>
-<p align="center"><strong>Figure: Implicit grant flow</strong></p> 
-<p style="text-align: center;"> <img alt="Implicit grant flow" src="../../images/oauth2_implicit.png" /></p> 
+<p align="center"><strong>Figure: Implicit grant flow</strong></p>
+<p style="text-align: center;"> <img alt="Implicit grant flow" src="../../images/oauth2_implicit.png" /></p>
 </li>
-   
+
 <li>Resource owner password credentials
   <p>The resource owner password credentials (such as username and password) can be used directly as an authorization grant to obtain an access token.</p>
 
   <p>Even though this grant type requires direct client access to the resource owner credentials, the resource owner credentials are used for a single request and are exchanged for an access token. This grant type can eliminate the need for the client to store the resource owner credentials for future use, by exchanging the credentials with a long-lived access token or refresh token.</p>
-<p align="center"><strong>Figure: Resource owner password credentials flow</strong></p> 
-<p style="text-align: center;"> <img alt="Resource owner password credentials flow" src="../../images/oauth2_password.png" /></p>  
+<p align="center"><strong>Figure: Resource owner password credentials flow</strong></p>
+<p style="text-align: center;"> <img alt="Resource owner password credentials flow" src="../../images/oauth2_password.png" /></p>
 </li>
-   
+
 <li>Client credentials
   <p>The client credentials can be used as an authorization grant when the authorization scope is limited to the protected resources under the control of the client, or to protected resources previously arranged with the authorization server. Client credentials are typically used as an authorization grant when the client is acting on its own behalf (the client is also the resource owner) or is requesting access to protected resources based on an authorization previously arranged with the authorization server.</p>
-<p align="center"><strong>Figure: Client credentials flow</strong></p> 
-<p style="text-align: center;"> <img alt="Client credentials flow" src="../../images/oauth2_client_credentials.png" /></p>    
+<p align="center"><strong>Figure: Client credentials flow</strong></p>
+<p style="text-align: center;"> <img alt="Client credentials flow" src="../../images/oauth2_client_credentials.png" /></p>
 </li></ul>
- 
+
   <p>To request an access token for the implicit, resource owner password credentials, or client credentials grant type, follow the <a href="#direct_token">direct access token request instructions</a>.</p>
 
 <h2 id="prerequisites">Prerequisites</h2>
@@ -106,7 +106,7 @@
 <p>To use the OAuth 2.0 API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -148,10 +148,10 @@ ret = oauth2_request_create(&amp;request);
 <p>You can set various request properties, such as end points for authentication and token, grant type, user name, and password.</p>
 
 <pre class="prettyprint">
-char* auth_url = &quot;https://accounts.google.com/o/oauth2/auth&quot;;
-char* token_url = &quot;https://accounts.google.com/o/oauth2/token&quot;;
-char* user_name = &quot;username&quot;;
-char* password = &quot;password&quot;;
+char* auth_url = "https://accounts.google.com/o/oauth2/auth";
+char* token_url = "https://accounts.google.com/o/oauth2/token";
+char* user_name = "username";
+char* password = "password";
 
 ret = oauth2_request_set_auth_end_point_url(request, auth_url);
 
@@ -191,7 +191,7 @@ ret = oauth2_request_destroy(request);
 </pre>
 </li>
 </ol>
-       
+
  <h2 id="token" name="token">Requesting the Server for a Grant or Token</h2>
 
 <p>To obtain the required authorization code or access token:</p>
@@ -204,43 +204,43 @@ ret = oauth2_request_destroy(request);
 void
 grant_response_cb(oauth2_response_h response, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Authorization code response callback */
-&nbsp;&nbsp;&nbsp;&nbsp;char *auth_code = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_response_get_authorization_code(response, &amp;auth_code);
+    /* Authorization code response callback */
+    char *auth_code = NULL;
+    oauth2_response_get_authorization_code(response, &amp;auth_code);
 }
 
 void
 request_auth_code(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_manager_h mgr = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = oauth2_manager_create(&amp;mgr);
-
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_h request = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_create(&amp;request);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;&nbsp;   OAuth 2.0 authentication policy before making the request
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the response_type as &quot;code&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the application client ID registered in the server */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_client_id(request, &quot;app_client_id&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Set the redirect URI for the server
-&nbsp;&nbsp;&nbsp;&nbsp;   to redirect the flow after the authentication
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_redirection_url(request, &quot;https://developer.tizen.org&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Request the server for the authorization grant;
-&nbsp;&nbsp;&nbsp;&nbsp;   the response from the server is returned in the callback
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_manager_request_authorization_grant(mgr, request, grant_response_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data);
+    oauth2_manager_h mgr = NULL;
+    int ret = oauth2_manager_create(&amp;mgr);
+
+    oauth2_request_h request = NULL;
+    ret = oauth2_request_create(&amp;request);
+
+    /*
+       Set all the required parameters needed as per the Web server's
+       OAuth 2.0 authentication policy before making the request
+    */
+
+    /* Set the response_type as "code" */
+    ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
+
+    /* Set the application client ID registered in the server */
+    ret = oauth2_request_set_client_id(request, "app_client_id");
+
+    /*
+       Set the redirect URI for the server
+       to redirect the flow after the authentication
+    */
+    ret = oauth2_request_set_redirection_url(request, "https://developer.tizen.org");
+
+    /*
+       Request the server for the authorization grant;
+       the response from the server is returned in the callback
+    */
+    ret = oauth2_manager_request_authorization_grant(mgr, request, grant_response_cb,
+                                                     user_data);
 }
 </pre>
 </li>
@@ -257,41 +257,41 @@ request_auth_code(void)
 void
 request_auth_code(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_manager_h mgr = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = oauth2_manager_create(&amp;mgr);
+    oauth2_manager_h mgr = NULL;
+    int ret = oauth2_manager_create(&amp;mgr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_h request = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_create(&amp;request);
+    oauth2_request_h request = NULL;
+    ret = oauth2_request_create(&amp;request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;&nbsp;   OAuth 2.0 authentication policy before making the request
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    /*
+       Set all the required parameters needed as per the Web server's
+       OAuth 2.0 authentication policy before making the request
+    */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_set_auth_end_point_url(request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://login.live.com/oauth20_authorize.srf&quot;);
+    ret =
+        oauth2_request_set_auth_end_point_url(request,
+                                              "https://login.live.com/oauth20_authorize.srf");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_set_token_end_point_url(request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://login.live.com/oauth20_token.srf&quot;);
+    ret =
+        oauth2_request_set_token_end_point_url(request,
+                                               "https://login.live.com/oauth20_token.srf");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_redirection_url(request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://developer.tizen.org&quot;);
+    ret = oauth2_request_set_redirection_url(request,
+                                             "https://developer.tizen.org");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_client_id(request, &quot;WINDOWS_CLIENT_ID&quot;);
+    ret = oauth2_request_set_client_id(request, "WINDOWS_CLIENT_ID");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_client_secret(request, &quot;WINDOWS_CLIENT_SECRET&quot;);
+    ret = oauth2_request_set_client_secret(request, "WINDOWS_CLIENT_SECRET");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_scope(request, &quot;wl.basic&quot;);
+    ret = oauth2_request_set_scope(request, "wl.basic");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
+    ret =
+    oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (mgr &amp;&amp; request)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_manager_request_authorization_grant(mgr, request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grant_response_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request);
+    if (mgr &amp;&amp; request)
+        ret = oauth2_manager_request_authorization_grant(mgr, request,
+                                                         grant_response_cb,
+                                                         request);
 }
 </pre>
 </li>
@@ -301,33 +301,33 @@ request_auth_code(void)
 void
 access_token_cb(oauth2_response_h response, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Access token response callback */
+    /* Access token response callback */
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *access_token = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_response_get_access_token(response, &amp;access_token);
+    char *access_token = NULL;
+    oauth2_response_get_access_token(response, &amp;access_token);
 }
 
 void
 grant_response_cb(oauth2_response_h response, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Authorization code response callback */
+    /* Authorization code response callback */
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *auth_code = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_response_get_authorization_code(response, &amp;auth_code);
+    char *auth_code = NULL;
+    oauth2_response_get_authorization_code(response, &amp;auth_code);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (auth_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oauth2_manager_h mgr = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int ret = oauth2_manager_create(&amp;mgr);
+    if (auth_code) {
+        oauth2_manager_h mgr = NULL;
+        int ret = oauth2_manager_create(&amp;mgr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Request handle was passed as the user data */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_h request = (oauth2_request_h) user_data;
+        /* Request handle was passed as the user data */
+        oauth2_request_h request = (oauth2_request_h) user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_authorization_code(request, auth_code);
+        ret = oauth2_request_set_authorization_code(request, auth_code);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (mgr &amp;&amp; request)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_manager_request_access_token(mgr, request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;access_token_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        if (mgr &amp;&amp; request)
+            ret = oauth2_manager_request_access_token(mgr, request,
+                                                      access_token_cb, NULL);
+    }
 }
 </pre>
 </li></ol></li>
@@ -342,45 +342,45 @@ grant_response_cb(oauth2_response_h response, void* user_data)
 void
 token_response_cb(oauth2_response_h response, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Access token response callback */
+    /* Access token response callback */
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *access_token = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_response_get_access_token(response, &amp;access_token);
+    char *access_token = NULL;
+    oauth2_response_get_access_token(response, &amp;access_token);
 }
 
 void
 request_access_token(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_manager_h mgr = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = oauth2_manager_create(&amp;mgr);
+    oauth2_manager_h mgr = NULL;
+    int ret = oauth2_manager_create(&amp;mgr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_h request = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_create(&amp;request);
+    oauth2_request_h request = NULL;
+    ret = oauth2_request_create(&amp;request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;&nbsp;   OAuth 2.0 authentication policy before making the request
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    /*
+       Set all the required parameters needed as per the Web server's
+       OAuth 2.0 authentication policy before making the request
+    */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_set_auth_end_point_url(request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://www.facebook.com/dialog/oauth&quot;);
+    ret =
+    oauth2_request_set_auth_end_point_url(request,
+                                              "https://www.facebook.com/dialog/oauth");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_redirection_url(request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://developer.tizen.org&quot;);
+    ret = oauth2_request_set_redirection_url(request,
+                                             "https://developer.tizen.org");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_client_id(request, &quot;SAMPLE_CLIENT_ID&quot;);
+    ret = oauth2_request_set_client_id(request, "SAMPLE_CLIENT_ID");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_scope(request, &quot;read_stream&quot;);
+    ret = oauth2_request_set_scope(request, "read_stream");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_TOKEN);
+    ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_TOKEN);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (mgr &amp;&amp; request) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_manager_request_token(mgr, request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;token_response_cb, request);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != OAUTH2_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;Access Token request failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (mgr &amp;&amp; request) {
+        ret = oauth2_manager_request_token(mgr, request,
+                                           token_response_cb, request);
+        if (ret != OAUTH2_ERROR_NONE)
+            dlog_print(DLOG_ERROR, LOG_TAG, "Access Token request failed");
+    }
 }
 </pre>
 </li>
@@ -393,92 +393,92 @@ request_access_token(void)
 void
 token_response_cb(oauth2_response_h response, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Access token response callback */
+    /* Access token response callback */
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *access_token = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_response_get_access_token(response, &amp;access_token);
+    char *access_token = NULL;
+    oauth2_response_get_access_token(response, &amp;access_token);
 }
 
 void
 refresh_token_response_cb(oauth2_response_h response, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *acc_token = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_response_get_access_token(response, &amp;acc_token);
+    char *acc_token = NULL;
+    oauth2_response_get_access_token(response, &amp;acc_token);
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *ref_token = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_response_get_refresh_token(response, &amp;ref_token);
+    char *ref_token = NULL;
+    oauth2_response_get_refresh_token(response, &amp;ref_token);
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *auth_code = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_response_get_authorization_code(response, &amp;auth_code);
-&nbsp;&nbsp;&nbsp;&nbsp;if (auth_code) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oauth2_manager_h mgr = (oauth2_manager_h) user_data;
+    char *auth_code = NULL;
+    oauth2_response_get_authorization_code(response, &amp;auth_code);
+    if (auth_code) {
+        oauth2_manager_h mgr = (oauth2_manager_h) user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_h request = NULL;
+        oauth2_request_h request = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int ret = oauth2_request_create(&amp;request);
+        int ret = oauth2_request_create(&amp;request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   OAuth 2.0 authentication policy before making the request
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
+        /*
+           Set all the required parameters needed as per the Web server's
+           OAuth 2.0 authentication policy before making the request
+        */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_set_refresh_token_url(request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://www.googleapis.com/oauth2/v3/token&quot;);
+        ret =
+            oauth2_request_set_refresh_token_url(request,
+                                                 "https://www.googleapis.com/oauth2/v3/token");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_refresh_token(request, ref_token);
+        ret = oauth2_request_set_refresh_token(request, ref_token);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_client_id(request, &quot;GOOGLE_CLIENT_ID&quot;);
+        ret = oauth2_request_set_client_id(request, "GOOGLE_CLIENT_ID");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_client_secret(request, &quot;GOOGLE_CLIENT_SECRET&quot;);
+        ret = oauth2_request_set_client_secret(request, "GOOGLE_CLIENT_SECRET");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_grant_type(request, OAUTH2_GRANT_TYPE_REFRESH);
+        ret = oauth2_request_set_grant_type(request, OAUTH2_GRANT_TYPE_REFRESH);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_set_client_authentication_type(request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OAUTH2_CLIENT_AUTHENTICATION_TYPE_REQUEST_BODY);
+        ret =
+            oauth2_request_set_client_authentication_type(request,
+                                                          OAUTH2_CLIENT_AUTHENTICATION_TYPE_REQUEST_BODY);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (mgr &amp;&amp; request)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_manager_refresh_access_token(mgr, request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;token_response_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        if (mgr &amp;&amp; request)
+            ret = oauth2_manager_refresh_access_token(mgr, request,
+                                                      token_response_cb, NULL);
+    }
 }
 
 void
 request_access_token(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_manager_h mgr = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = oauth2_manager_create(&amp;mgr);
+    oauth2_manager_h mgr = NULL;
+    int ret = oauth2_manager_create(&amp;mgr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_h request = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_create(&amp;request);
+    oauth2_request_h request = NULL;
+    ret = oauth2_request_create(&amp;request);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Set all the required parameters needed as per the Web server&#39;s
-&nbsp;&nbsp;&nbsp;&nbsp;   OAuth 2.0 authentication policy before making the request
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    /*
+       Set all the required parameters needed as per the Web server's
+       OAuth 2.0 authentication policy before making the request
+    */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_set_auth_end_point_url(request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://accounts.google.com/o/oauth2/auth&quot;);
+    ret =
+    oauth2_request_set_auth_end_point_url(request,
+                                              "https://accounts.google.com/o/oauth2/auth");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret =
-&nbsp;&nbsp;&nbsp;&nbsp;oauth2_request_set_token_end_point_url(request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://accounts.google.com/o/oauth2/token&quot;);
+    ret =
+    oauth2_request_set_token_end_point_url(request,
+                                               "https://accounts.google.com/o/oauth2/token");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_redirection_url(request, &quot;https://localhost:8080&quot;);
+    ret = oauth2_request_set_redirection_url(request, "https://localhost:8080");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_client_id(request, &quot;GOOGLE_CLIENT_ID&quot;);
+    ret = oauth2_request_set_client_id(request, "GOOGLE_CLIENT_ID");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_client_secret(request, &quot;GOOGLE_CLIENT_SECRET&quot;);
+    ret = oauth2_request_set_client_secret(request, "GOOGLE_CLIENT_SECRET");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_scope(request, &quot;email&quot;);
+    ret = oauth2_request_set_scope(request, "email");
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
+    ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (mgr &amp;&amp; request)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = oauth2_manager_request_token(mgr, request,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refresh_token_response_cb, mgr);
+    if (mgr &amp;&amp; request)
+        ret = oauth2_manager_request_token(mgr, request,
+                                           refresh_token_response_cb, mgr);
 }
 </pre>
 </li>
@@ -529,7 +529,7 @@ oauth2_error_get_description(e_handle, &amp;description);
 
 oauth2_error_get_uri(e_handle, &amp;uri);
 
-oauth2_error_get_custom_data(e_handle, &quot;error&quot;, &amp;error_val);
+oauth2_error_get_custom_data(e_handle, "error", &amp;error_val);
 </pre>
 </li>
 <li>When you no longer need the it, free the response handle with the <code>oauth2_response_destroy()</code> function:
@@ -540,7 +540,7 @@ ret = oauth2_response_destroy(response);
 </li>
 </ol>
 
-  
+
   <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/personal/personal_cover_n.htm b/org.tizen.guides/html/native/personal/personal_cover_n.htm
index 1bcff36..3603b06 100644 (file)
--- a/org.tizen.guides/html/native/personal/personal_cover_n.htm
+++ b/org.tizen.guides/html/native/personal/personal_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Personal Data</title>  
+       <title>Personal Data</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -31,7 +31,7 @@
                        <li><a href="../../../../org.tizen.training/html/native/feature/app_contacts_n.htm">Creating Applications with Contacts</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Personal Data</h1>
@@ -63,7 +63,7 @@
 
 <li><a href="context_n.htm">Contextual Device Usage History Data</a> <strong>in mobile applications only</strong>
 
-<p>The Tizen platform collects data on the device usage. Based on this data, you can retrieve the user&#39;s application usage patterns, such as information about frequently used applications, from the device usage history to perform statistical analysis.</p></li>
+<p>The Tizen platform collects data on the device usage. Based on this data, you can retrieve the user's application usage patterns, such as information about frequently used applications, from the device usage history to perform statistical analysis.</p></li>
 </ul>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/security/csr_n.htm b/org.tizen.guides/html/native/security/csr_n.htm
index 8a2d957..d784612 100644 (file)
--- a/org.tizen.guides/html/native/security/csr_n.htm
+++ b/org.tizen.guides/html/native/security/csr_n.htm
@@ -54,7 +54,7 @@
        <li>Web Protection (Anti Phishing) Service
 <p>The service enables caller modules and applications to <a href="#checking_url">check whether a URL they want to access is risky</a>. The actual operation is performed by an underlying anti-malware engine, which is provided by a device manufacturer.</p></li>
        </ul>
-       
+
 <p>You can <a href="#managing_engine">manage the anti-malware engines</a> by enabling and disabling, as needed.</p>
 
    <p align="center"><strong>Figure: CSR framework process</strong></p>
@@ -68,13 +68,13 @@
 <li>To use the CSR API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CSR__FRAMEWORK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CSR__FRAMEWORK__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file:
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Needed for malware scanning--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/antivirus.scan&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Needed for URL reputation checks--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/antivirus.webprotect&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Needed for engine management and judging any detected malware--&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Platform-level privilege--&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/antivirus.admin&lt;/privilege&gt;
+   &lt;!--Needed for malware scanning--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/antivirus.scan&lt;/privilege&gt;
+   &lt;!--Needed for URL reputation checks--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/antivirus.webprotect&lt;/privilege&gt;
+   &lt;!--Needed for engine management and judging any detected malware--&gt;
+   &lt;!--Platform-level privilege--&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/antivirus.admin&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -112,7 +112,7 @@ ret = csr_cs_context_create(&amp;context);
 <li>Scan for the content:
 <ul>
 <li>Scan in memory.
-<p>Memory scanning is a synchronous operation. When a malware is detected and <code>CSR_CS_ASK_USER_YES</code> is set in the <code>csr_cs_set_ask_user()</code> function, a popup notice is displayed to the user and processed based on the user&#39;s decision.</p>
+<p>Memory scanning is a synchronous operation. When a malware is detected and <code>CSR_CS_ASK_USER_YES</code> is set in the <code>csr_cs_set_ask_user()</code> function, a popup notice is displayed to the user and processed based on the user's decision.</p>
 <pre class="prettyprint">
 csr_cs_malware_h detected;
 
@@ -123,7 +123,7 @@ ret = csr_cs_set_ask_user(context, CSR_CS_ASK_USER_YES);
 unsigned char data[100] = {0,}; /* Set your own data for scanning */
 ret = csr_cs_scan_data(context, data, sizeof(data), &amp;detected);
 if (ret != CSR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Extract result */
 csr_cs_severity_level_e severity;
@@ -132,18 +132,18 @@ char *detailed_url;
 char *file_name;
 
 if (detected != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_malware_get_severity(detected, &amp;severity);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_malware_get_name(detected, &amp;malware_name);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_malware_get_detailed_url(detected, &amp;detailed_url);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_malware_get_user_response(detected, &amp;user_response);
+    ret = csr_cs_malware_get_severity(detected, &amp;severity);
+    ret = csr_cs_malware_get_name(detected, &amp;malware_name);
+    ret = csr_cs_malware_get_detailed_url(detected, &amp;detailed_url);
+    ret = csr_cs_malware_get_user_response(detected, &amp;user_response);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the returned C strings using free() */
+    /* Release the returned C strings using free() */
 }
 </pre>
 </li>
 
 <li>Scan in a file.
-<p>Scanning content in a file is a synchronous operation. When a malware is detected and <code>CSR_CS_ASK_USER_YES</code> is set in the <code>csr_cs_set_ask_user()</code> function, a popup notice is displayed to the user and processed based on the user&#39;s decision.</p>
+<p>Scanning content in a file is a synchronous operation. When a malware is detected and <code>CSR_CS_ASK_USER_YES</code> is set in the <code>csr_cs_set_ask_user()</code> function, a popup notice is displayed to the user and processed based on the user's decision.</p>
 <pre class="prettyprint">
 csr_cs_malware_h detected;
 
@@ -151,10 +151,10 @@ csr_cs_malware_h detected;
 ret = csr_cs_set_ask_user(context, CSR_CS_ASK_USER_YES);
 
 /* Scan in a file */
-const char *file = &quot;/tmp/testfile.txt&quot;; /* Set the target file for scanning */
+const char *file = "/tmp/testfile.txt"; /* Set the target file for scanning */
 ret = csr_cs_scan_file(context, file, &amp;detected);
 if (ret != CSR_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 
@@ -164,7 +164,7 @@ if (ret != CSR_ERROR_NONE)
 /* Define callback functions */
 void on_detected(csr_cs_malware_h detected, void *userdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Extract detected malware information */
+    /* Extract detected malware information */
 }
 void on_scanned(const char *file, void *userdata) {}
 void on_error(int ec, void *userdata) {}
@@ -172,22 +172,22 @@ void on_completed(void *userdata) {}
 void on_cancelled(void *userdata) {}
 
 {
-&nbsp;&nbsp;&nbsp;&nbsp;csr_cs_malware_h detected;
-&nbsp;&nbsp;&nbsp;&nbsp;/* User-specific data to be returned at callback method */
-&nbsp;&nbsp;&nbsp;&nbsp;char *user_data = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_set_detected_cb(context, on_detected);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_set_completed_cb(context, on_completed);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_set_cancelled_cb(context, on_cancelled);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_set_error_cb(context, on_error);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_set_file_scanned_cb(context, on_scanned);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Scan asynchronously */
-&nbsp;&nbsp;&nbsp;&nbsp;const char *dirs[2] = {TEST_DIR1, TEST_DIR2};
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_scan_dirs_async(context, dirs, sizeof(dirs) / sizeof(const char *),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data); /* user_data can be NULL */
+    csr_cs_malware_h detected;
+    /* User-specific data to be returned at callback method */
+    char *user_data = NULL;
+    int ret;
+
+    /* Register callbacks */
+    ret = csr_cs_set_detected_cb(context, on_detected);
+    ret = csr_cs_set_completed_cb(context, on_completed);
+    ret = csr_cs_set_cancelled_cb(context, on_cancelled);
+    ret = csr_cs_set_error_cb(context, on_error);
+    ret = csr_cs_set_file_scanned_cb(context, on_scanned);
+
+    /* Scan asynchronously */
+    const char *dirs[2] = {TEST_DIR1, TEST_DIR2};
+    ret = csr_cs_scan_dirs_async(context, dirs, sizeof(dirs) / sizeof(const char *),
+                                 user_data); /* user_data can be NULL */
 }
 </pre>
 </li></ul>
@@ -202,29 +202,29 @@ size_t list_size;
 int idx;
 
 const char *dirs[1] = {
-&nbsp;&nbsp;&nbsp;&nbsp;TEST_DIR
+    TEST_DIR
 };
 
 /* Get information on detected malware files specified by file path */
-csr_cs_get_detected_malware(context, &quot;file_path_of_malware_file&quot;, &amp;detected);
+csr_cs_get_detected_malware(context, "file_path_of_malware_file", &amp;detected);
 
 /* Get information on detected malware files specified by directory path */
 csr_cs_get_detected_malwares(context, dirs, size, &amp;detected_list, &amp;list_size);
 
 for (idx = 0; idx &lt; list_size; idx++) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_malware_list_get_malware(detected_list, idx, &amp;detected);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get additional information here */
+    ret = csr_cs_malware_list_get_malware(detected_list, idx, &amp;detected);
+    /* Get additional information here */
 }
 
 /* Get information on ignored malware files specified by file path */
-csr_cs_get_ignored_malware(context, &quot;file_path_of_malware_file&quot;, &amp;detected);
+csr_cs_get_ignored_malware(context, "file_path_of_malware_file", &amp;detected);
 
 /* Get information on ignored malware files specified by directory path */
 csr_cs_get_ignored_malwares(context, dirs, size, &amp;detected_list, &amp;list_size);
 
 for (idx = 0; idx &lt; list_size; idx++) {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = csr_cs_malware_list_get_malware(detected_list, idx, &amp;detected);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get additional information here */
+    ret = csr_cs_malware_list_get_malware(detected_list, idx, &amp;detected);
+    /* Get additional information here */
 }
 </pre>
 </li>
@@ -272,7 +272,7 @@ int ret;
 ret = csr_wp_set_ask_user(context, CSR_WP_ASK_USER_YES);
 
 /* Check a URL */
-const char *url = &quot;http://www.testurl.com&quot;; /* Set the target URL to check */
+const char *url = "http://www.testurl.com"; /* Set the target URL to check */
 ret = csr_wp_check_url(context, url, &amp;result);
 
 /* Extract result */
diff --git a/org.tizen.guides/html/native/security/dpm_n.htm b/org.tizen.guides/html/native/security/dpm_n.htm
index 3373292..275265c 100644 (file)
--- a/org.tizen.guides/html/native/security/dpm_n.htm
+++ b/org.tizen.guides/html/native/security/dpm_n.htm
@@ -28,7 +28,7 @@
         <p class="toc-title">Content</p>
         <ul class="toc">
                        <li><a href="#prerequisites">Prerequisites</a></li>
-                       <li><a href="#client_application">Managing Device Policies</a></li>             
+                       <li><a href="#client_application">Managing Device Policies</a></li>
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -56,7 +56,7 @@
        </ul>
 
 <p>The following figure illustrates the DPM framework process.</p>
-       
+
    <p align="center"><strong>Figure: DPM framework process</strong></p>
    <p align="center"><img alt="DPM framework process" src="../../images/dpm-framework.png" /></p>
 
@@ -90,24 +90,24 @@ int callback_id;
 void
 on_policy_changed(const char* name, const char* value, void* data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int state = strcmp(value, &quot;allowed&quot;) ? 0 : 1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(name, &quot;camera&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (state)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Using the camera is allowed */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Using the camera is not allowed */
-&nbsp;&nbsp;&nbsp;&nbsp;} 
+    int state = strcmp(value, "allowed") ? 0 : 1;
+
+    if (strcmp(name, "camera") == 0) {
+        if (state)
+            /* Using the camera is allowed */
+        else
+            /* Using the camera is not allowed */
+    }
 }
 
 /* Add the policy change callback to the device policy manager */
 int
 dpm_init()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = dpm_add_policy_changed_cb(dpm, &quot;camera&quot;, on_policy_changed,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user_data, &amp;callback_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */   
+    int ret = dpm_add_policy_changed_cb(dpm, "camera", on_policy_changed,
+                                        user_data, &amp;callback_id);
+    if (ret &lt; 0)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -120,8 +120,8 @@ int state;
 
 /* Check the restriction state of the camera */
 if (dpm_restriction_get_camera_state(dpm, &amp;state) == DPM_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* state: 0: using the camera is not allowed */
-&nbsp;&nbsp;&nbsp;&nbsp;/* state: 1: using the camera is allowed */
+    /* state: 0: using the camera is not allowed */
+    /* state: 1: using the camera is allowed */
 }
 </pre>
 </li>
@@ -131,10 +131,10 @@ if (dpm_restriction_get_camera_state(dpm, &amp;state) == DPM_ERROR_NONE) {
 void
 dpm_finalize()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Remove the policy change callback from the device policy manager */
-&nbsp;&nbsp;&nbsp;&nbsp;dpm_remove_policy_changed_cb(dpm, callback_id);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the DPM handle */
-&nbsp;&nbsp;&nbsp;&nbsp;dpm_manager_destroy(dpm);
+    /* Remove the policy change callback from the device policy manager */
+    dpm_remove_policy_changed_cb(dpm, callback_id);
+    /* Destroy the DPM handle */
+    dpm_manager_destroy(dpm);
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/security/privilege_n.htm b/org.tizen.guides/html/native/security/privilege_n.htm
index 5eb2443..7de8d69 100644 (file)
--- a/org.tizen.guides/html/native/security/privilege_n.htm
+++ b/org.tizen.guides/html/native/security/privilege_n.htm
@@ -49,7 +49,7 @@
 <li>Privilege description: Detailed information on permissions, including accessible resources and functionality, that the application can get with this privilege. It also contains information related to billing or device performance, such as cost or increased battery usage.</li>\r
 <li>Privacy name: Privacy name represents a group of privileges that are related to a certain common feature.</li>\r
 </ul> \r
-<p>From Tizen 3.0, some privileges are categorized as privacy-related, and you can switch those privileges on and off based on the user preference. You can change certain privileges&#39; status to allow or deny them at runtime. This means that the application calling a privileged API can be prevented from using it even if the required privilege is declared in its manifest file. Specific APIs can be used to check the privacy-related privilege&#39;s current status and get the display name of the privacy that includes the privilege. For example, you can use the APIs to check the privilege&#39;s current status before entering a function that requires the privilege, and if the status is off, display a guide message to the user to ask them to go to the device settings and switch the required privacy on.</p>\r
+<p>From Tizen 3.0, some privileges are categorized as privacy-related, and you can switch those privileges on and off based on the user preference. You can change certain privileges' status to allow or deny them at runtime. This means that the application calling a privileged API can be prevented from using it even if the required privilege is declared in its manifest file. Specific APIs can be used to check the privacy-related privilege's current status and get the display name of the privacy that includes the privilege. For example, you can use the APIs to check the privilege's current status before entering a function that requires the privilege, and if the status is off, display a guide message to the user to ask them to go to the device settings and switch the required privacy on.</p>\r
 \r
 <h2 id="prerequisites">Prerequisites</h2>\r
 <p>To use the functions and data types of the Privilege Info API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">wearable</a> applications), include the <code>&lt;privilege_information.h&gt;</code> header file in your application:</p>\r
@@ -66,9 +66,9 @@
 <pre class="prettyprint">\r
 char* display_name = NULL;\r
 int ret =\r
-&nbsp;&nbsp;&nbsp;&nbsp;privilege_info_get_display_name(&quot;2.2&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;http://tizen.org/privilege/application.launch&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;display_name);\r
+    privilege_info_get_display_name("2.2",\r
+                                    "http://tizen.org/privilege/application.launch",\r
+                                    &amp;display_name);\r
 </pre>\r
 </li>\r
 \r
@@ -76,9 +76,9 @@ int ret =
 <pre class="prettyprint">\r
 char* display_name = NULL;\r
 int ret =\r
-&nbsp;&nbsp;&nbsp;&nbsp;privilege_info_get_display_name_by_pkgtype(&quot;PRVINFO_PACKAGE_TYPE_WEB&quot;, &quot;2.2&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;http://tizen.org/privilege/application.launch&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;display_name);\r
+    privilege_info_get_display_name_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2",\r
+                                               "http://tizen.org/privilege/application.launch",\r
+                                               &amp;display_name);\r
 </pre>\r
 </li>\r
 \r
@@ -86,9 +86,9 @@ int ret =
 <pre class="prettyprint">\r
 char* description = NULL;\r
 int ret =\r
-&nbsp;&nbsp;&nbsp;&nbsp;privilege_info_get_description(&quot;2.2&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;http://tizen.org/privilege/application.launch&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;description);\r
+    privilege_info_get_description("2.2",\r
+                                   "http://tizen.org/privilege/application.launch",\r
+                                   &amp;description);\r
 </pre>\r
 </li>\r
 \r
@@ -97,25 +97,25 @@ int ret =
 <pre class="prettyprint">\r
 char* description = NULL;\r
 int ret =\r
-&nbsp;&nbsp;&nbsp;&nbsp;privilege_info_get_description_by_pkgtype(&quot;PRVINFO_PACKAGE_TYPE_WEB&quot;, &quot;2.2&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;http://tizen.org/privilege/application.launch&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;description);\r
+    privilege_info_get_description_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2",\r
+                                              "http://tizen.org/privilege/application.launch",\r
+                                              &amp;description);\r
 </pre>\r
 </li>\r
 <li>Get the privacy display name using the <code>privilege_info_get_privacy_display_name()</code> function:\r
 <pre class="prettyprint">\r
 char* privacy_display_name = NULL;\r
 int ret =\r
-&nbsp;&nbsp;&nbsp;&nbsp;privilege_info_get_privacy_display_name(&quot;http://tizen.org/privilege/account.read&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;privacy_display_name);\r
+    privilege_info_get_privacy_display_name("http://tizen.org/privilege/account.read",\r
+                                            &amp;privacy_display_name);\r
 </pre>\r
 </li>\r
-<li>Get the privacy-related privilege&#39;s status using the <code>privilege_info_get_privacy_privilege_status()</code> function:\r
+<li>Get the privacy-related privilege's status using the <code>privilege_info_get_privacy_privilege_status()</code> function:\r
 <pre class="prettyprint">\r
 bool status = NULL;\r
 int ret =\r
-&nbsp;&nbsp;&nbsp;&nbsp;privilege_info_get_privacy_privilege_status(&quot;http://tizen.org/privilege/account.read&quot;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;status);\r
+    privilege_info_get_privacy_privilege_status("http://tizen.org/privilege/account.read",\r
+                                                &amp;status);\r
 </pre>\r
 </li>\r
 </ul>\r
diff --git a/org.tizen.guides/html/native/security/secure_key_n.htm b/org.tizen.guides/html/native/security/secure_key_n.htm
index db69430..e759a6b 100644 (file)
--- a/org.tizen.guides/html/native/security/secure_key_n.htm
+++ b/org.tizen.guides/html/native/security/secure_key_n.htm
@@ -24,7 +24,7 @@
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
-               </ul>   
+               </ul>
         <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#prerequisites">Prerequisites</a></li>
@@ -40,7 +40,7 @@
                        <li><a href="#verifying">Verifying and Getting a Certificate Chain</a></li>
                        <li><a href="#pkcs">Loading a Certificate or a PKCS#12 File</a></li>
                        <li><a href="#access">Implementing Access Control</a></li>
-               </ul>           
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Mobile Native</a></li>
@@ -81,8 +81,8 @@
 </li>
 </ul>
 
-   <p align="center"><strong>Figure: Key manager process</strong></p> 
-   <p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p> 
+   <p align="center"><strong>Figure: Key manager process</strong></p>
+   <p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p>
 
 <p>The key manager provides 2 types of APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications):</p>
 <ul>
@@ -118,11 +118,11 @@
 <p>To use the Key Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/keymanager&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/keymanager&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
-               
+
 <li><p>To use the functions and data types of the Key Manager API, include the <code>&lt;ckmc/ckmc-manager.h&gt;</code> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;ckmc/ckmc-manager.h&gt;
@@ -138,18 +138,18 @@ int ret = CKMC_ERROR_NONE;
 
 ckmc_key_s test_key;
 ckmc_policy_s store_policy;
-char* alias= &quot;mykey&quot;;
+char* alias= "mykey";
 char* key_password = NULL;
 
-char* binary_key = &quot;-----BEGIN PUBLIC KEY-----\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;zQIDAQAB\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;-----END PUBLIC KEY-----&quot;;
+char* binary_key = "-----BEGIN PUBLIC KEY-----\n"
+    "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n"
+    "T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n"
+    "zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n"
+    "0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n"
+    "v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n"
+    "j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n"
+    "zQIDAQAB\n"
+    "-----END PUBLIC KEY-----";
 
 test_key.raw_key = (unsigned char *)binary_key;
 test_key.key_size = strlen(binary_key);
@@ -162,7 +162,7 @@ store_policy.extractable = true; /* Key value is extractable */
 
 ret = ckmc_save_key(alias, test_key, store_policy);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li>Get the key from the key manager:
@@ -170,14 +170,14 @@ if (CKMC_ERROR_NONE != ret)
 int ret = CKMC_ERROR_NONE;
 
 ckmc_key_s *test_key;
-char* alias= &quot;mykey&quot;;
+char* alias= "mykey";
 char* key_password = NULL;
 
 ret = ckmc_get_key(alias, key_password, &amp;test_key);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-dlog_print(DLOG_INFO, LOG_TAG, &quot;key size =%d\n&quot;, test_key-&gt;key_size);
+dlog_print(DLOG_INFO, LOG_TAG, "key size =%d\n", test_key-&gt;key_size);
 
 ckmc_key_free(test_key); /* Called when the key is no longer needed */
 </pre></li>
@@ -194,15 +194,15 @@ int count_list = 0;
 
 ret = ckmc_get_key_alias_list(&amp;alias_list);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 plist = alias_list;
 do {
-&nbsp;&nbsp;&nbsp;&nbsp;ckmc_get_key(plist-&gt;alias, key_password, &amp;test_key);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th key: key size =%d\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++count_list, test_key-&gt;key_size);
-&nbsp;&nbsp;&nbsp;&nbsp;ckmc_key_free(test_key);
-&nbsp;&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;
+    ckmc_get_key(plist-&gt;alias, key_password, &amp;test_key);
+    dlog_print(DLOG_INFO, LOG_TAG, "%d th key: key size =%d\n",
+               ++count_list, test_key-&gt;key_size);
+    ckmc_key_free(test_key);
+    plist = plist-&gt;next;
 } while (plist != NULL);
 
 ckmc_alias_list_all_free(alias_list); /* Called when the list is no longer needed */
@@ -211,11 +211,11 @@ ckmc_alias_list_all_free(alias_list); /* Called when the list is no longer neede
 <pre class="prettyprint">
 int ret = CKMC_ERROR_NONE;
 
-const char* alias= &quot;mykey&quot;;
+const char* alias= "mykey";
 
 ret = ckmc_remove_alias(alias);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 
 </li></ol>
@@ -231,36 +231,36 @@ int ret = CKMC_ERROR_NONE;
 
 char* password = NULL;
 ckmc_cert_s cert;
-const char *alias = &quot;myCert&quot;;
+const char *alias = "myCert";
 ckmc_policy_s test_policy;
 
-const char *certPem = &quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIEgDCCA2igAwIBAgIIcjtBYJGQtOAwDQYJKoZIhvcNAQEFBQAwSTELMAkGA1UE\n&quot;
-&quot;BhMCVVMxEzARBgNVBAoTCkdvb2dsZSBJbmMxJTAjBgNVBAMTHEdvb2dsZSBJbnRl\n&quot;
-&quot;cm5ldCBBdXRob3JpdHkgRzIwHhcNMTQwNTIyMTEyOTQyWhcNMTQwODIwMDAwMDAw\n&quot;
-&quot;WjBtMQswCQYDVQQGEwJVUzETMBEGA1UECAwKQ2FsaWZvcm5pYTEWMBQGA1UEBwwN\n&quot;
-&quot;TW91bnRhaW4gVmlldzETMBEGA1UECgwKR29vZ2xlIEluYzEcMBoGA1UEAwwTYWNj\n&quot;
-&quot;b3VudHMuZ29vZ2xlLmNvbTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB\n&quot;
-&quot;ALtlLWVWPN3q3bSEQl1Z97gPdgl5vbgJOZSAr0ZY0tJCuFLBbUKetJWryyE+5KpG\n&quot;
-&quot;gMMpLS4v8/bvXaZc6mAs+RfAqGM24C3vQg5hPnj4dflnhL0WiOCZBurm1tV4oexk\n&quot;
-&quot;HLXs3jr/jpnb738AQpj8zZ9a4VEBuHJRZALnWZ/XhqU+dvYomAoRQNuL5OhkT7uu\n&quot;
-&quot;d0NKJL9JjYLyQglGgE2sVsWv2kj7EO/P9Q6NEKt9BGmhMsFvtfeKUaymynaxpR1g\n&quot;
-&quot;wEPlqYvB38goh1dIOgVLT0OVyLImeg5Mdwar/8c1U0OYhLOc6PJapOZAfUkE+3+w\n&quot;
-&quot;xYt8AChLN1b5szOwInrCVpECAwEAAaOCAUYwggFCMB0GA1UdJQQWMBQGCCsGAQUF\n&quot;
-&quot;BwMBBggrBgEFBQcDAjAeBgNVHREEFzAVghNhY2NvdW50cy5nb29nbGUuY29tMGgG\n&quot;
-&quot;CCsGAQUFBwEBBFwwWjArBggrBgEFBQcwAoYfaHR0cDovL3BraS5nb29nbGUuY29t\n&quot;
-&quot;L0dJQUcyLmNydDArBggrBgEFBQcwAYYfaHR0cDovL2NsaWVudHMxLmdvb2dsZS5j\n&quot;
-&quot;b20vb2NzcDAdBgNVHQ4EFgQU0/UtToEtNIfwDwHuYGuVKcj0xK8wDAYDVR0TAQH/\n&quot;
-&quot;BAIwADAfBgNVHSMEGDAWgBRK3QYWG7z2aLV29YG2u2IaulqBLzAXBgNVHSAEEDAO\n&quot;
-&quot;MAwGCisGAQQB1nkCBQEwMAYDVR0fBCkwJzAloCOgIYYfaHR0cDovL3BraS5nb29n\n&quot;
-&quot;bGUuY29tL0dJQUcyLmNybDANBgkqhkiG9w0BAQUFAAOCAQEAcGNI/X9f0g+7ij0o\n&quot;
-&quot;ehLpk6vxSMQGrmOZ4+PG/MC9SLClCkt7zJkfU7erZnyVXyxCpwlljq+Wk9YTPUOq\n&quot;
-&quot;xD/V2ikQVSAANoxGJFO9UoL5jzWusPhKKv8CcM7fuiERz8K+CfBcqfxbgI5rH0g5\n&quot;
-&quot;dYclmLC81cJ/08i+9Nltvxv69Y3hGfEICT6K+EdSxwnQzOhpMZmvxZsIj+d6CVNa\n&quot;
-&quot;9ICYgUthsNQVWzrIs5wknpjjZ9liDMwJX0vu8A0rce4X/Lna5hh2bW9igz2iP5WM\n&quot;
-&quot;9fuwdbTw4y3jfPQgszU4YZxWxhMzccxe058Qx1tLndAknBQEBesQjXytVQpuM1SV\n&quot;
-&quot;rHva8A==\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
+const char *certPem = "-----BEGIN CERTIFICATE-----\n"
+"MIIEgDCCA2igAwIBAgIIcjtBYJGQtOAwDQYJKoZIhvcNAQEFBQAwSTELMAkGA1UE\n"
+"BhMCVVMxEzARBgNVBAoTCkdvb2dsZSBJbmMxJTAjBgNVBAMTHEdvb2dsZSBJbnRl\n"
+"cm5ldCBBdXRob3JpdHkgRzIwHhcNMTQwNTIyMTEyOTQyWhcNMTQwODIwMDAwMDAw\n"
+"WjBtMQswCQYDVQQGEwJVUzETMBEGA1UECAwKQ2FsaWZvcm5pYTEWMBQGA1UEBwwN\n"
+"TW91bnRhaW4gVmlldzETMBEGA1UECgwKR29vZ2xlIEluYzEcMBoGA1UEAwwTYWNj\n"
+"b3VudHMuZ29vZ2xlLmNvbTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB\n"
+"ALtlLWVWPN3q3bSEQl1Z97gPdgl5vbgJOZSAr0ZY0tJCuFLBbUKetJWryyE+5KpG\n"
+"gMMpLS4v8/bvXaZc6mAs+RfAqGM24C3vQg5hPnj4dflnhL0WiOCZBurm1tV4oexk\n"
+"HLXs3jr/jpnb738AQpj8zZ9a4VEBuHJRZALnWZ/XhqU+dvYomAoRQNuL5OhkT7uu\n"
+"d0NKJL9JjYLyQglGgE2sVsWv2kj7EO/P9Q6NEKt9BGmhMsFvtfeKUaymynaxpR1g\n"
+"wEPlqYvB38goh1dIOgVLT0OVyLImeg5Mdwar/8c1U0OYhLOc6PJapOZAfUkE+3+w\n"
+"xYt8AChLN1b5szOwInrCVpECAwEAAaOCAUYwggFCMB0GA1UdJQQWMBQGCCsGAQUF\n"
+"BwMBBggrBgEFBQcDAjAeBgNVHREEFzAVghNhY2NvdW50cy5nb29nbGUuY29tMGgG\n"
+"CCsGAQUFBwEBBFwwWjArBggrBgEFBQcwAoYfaHR0cDovL3BraS5nb29nbGUuY29t\n"
+"L0dJQUcyLmNydDArBggrBgEFBQcwAYYfaHR0cDovL2NsaWVudHMxLmdvb2dsZS5j\n"
+"b20vb2NzcDAdBgNVHQ4EFgQU0/UtToEtNIfwDwHuYGuVKcj0xK8wDAYDVR0TAQH/\n"
+"BAIwADAfBgNVHSMEGDAWgBRK3QYWG7z2aLV29YG2u2IaulqBLzAXBgNVHSAEEDAO\n"
+"MAwGCisGAQQB1nkCBQEwMAYDVR0fBCkwJzAloCOgIYYfaHR0cDovL3BraS5nb29n\n"
+"bGUuY29tL0dJQUcyLmNybDANBgkqhkiG9w0BAQUFAAOCAQEAcGNI/X9f0g+7ij0o\n"
+"ehLpk6vxSMQGrmOZ4+PG/MC9SLClCkt7zJkfU7erZnyVXyxCpwlljq+Wk9YTPUOq\n"
+"xD/V2ikQVSAANoxGJFO9UoL5jzWusPhKKv8CcM7fuiERz8K+CfBcqfxbgI5rH0g5\n"
+"dYclmLC81cJ/08i+9Nltvxv69Y3hGfEICT6K+EdSxwnQzOhpMZmvxZsIj+d6CVNa\n"
+"9ICYgUthsNQVWzrIs5wknpjjZ9liDMwJX0vu8A0rce4X/Lna5hh2bW9igz2iP5WM\n"
+"9fuwdbTw4y3jfPQgszU4YZxWxhMzccxe058Qx1tLndAknBQEBesQjXytVQpuM1SV\n"
+"rHva8A==\n"
+"-----END CERTIFICATE-----\n";
 
 test_policy.password = password;
 test_policy.extractable = true;
@@ -271,7 +271,7 @@ cert.data_format = CKMC_FORM_PEM;
 
 ret = ckmc_save_cert(alias, cert, test_policy);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li>Get the certificate from the key manager:
@@ -279,14 +279,14 @@ if (CKMC_ERROR_NONE != ret)
 int ret = CKMC_ERROR_NONE;
 
 ckmc_cert_s *test_cert;
-char* alias= &quot;myCert&quot;;
+char* alias= "myCert";
 char* password = NULL;
 
 ret = ckmc_get_cert(alias, password, &amp;test_cert);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-dlog_print(DLOG_INFO, LOG_TAG, &quot;cert size =%d\n&quot;, test_cert-&gt;cert_size);
+dlog_print(DLOG_INFO, LOG_TAG, "cert size =%d\n", test_cert-&gt;cert_size);
 
 ckmc_cert_free(test_cert); /* Called when the certificate is no longer needed */
 </pre></li>
@@ -302,15 +302,15 @@ int count_list = 0;
 
 ret = ckmc_get_cert_alias_list(&amp;alias_list);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 plist = alias_list;
 do {
-&nbsp;&nbsp;&nbsp;&nbsp;ckmc_get_cert(plist-&gt;alias, password, &amp;test_cert);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th cert: cert size =%d\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++count_list, test_cert-&gt;cert_size);
-&nbsp;&nbsp;&nbsp;&nbsp;ckmc_cert_free(test_cert);
-&nbsp;&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;
+    ckmc_get_cert(plist-&gt;alias, password, &amp;test_cert);
+    dlog_print(DLOG_INFO, LOG_TAG, "%d th cert: cert size =%d\n",
+               ++count_list, test_cert-&gt;cert_size);
+    ckmc_cert_free(test_cert);
+    plist = plist-&gt;next;
 } while (plist != NULL);
 
 ckmc_alias_list_all_free(alias_list); /* Called when the list is no longer needed */
@@ -320,11 +320,11 @@ ckmc_alias_list_all_free(alias_list); /* Called when the list is no longer neede
 <pre class="prettyprint">
 int ret = CKMC_ERROR_NONE;
 
-const char* alias= &quot;myCert&quot;;
+const char* alias= "myCert";
 
 ret = ckmc_remove_alias(alias);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li></ol>
 
@@ -338,10 +338,10 @@ int ret = CKMC_ERROR_NONE;
 
 char* password = NULL;
 ckmc_raw_buffer_s test_data;
-const char *alias = &quot;myData&quot;;
+const char *alias = "myData";
 ckmc_policy_s test_policy;
 
-const char *char_bin_data = &quot;My Binary Data&quot;;
+const char *char_bin_data = "My Binary Data";
 
 test_policy.password = password;
 test_policy.extractable = true;
@@ -350,7 +350,7 @@ test_data.data = (unsigned char *)char_bin_data;
 test_data.size = strlen(char_bin_data);
 ret = ckmc_save_data(alias, test_data, test_policy);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li>Get data from the key manager:
@@ -359,13 +359,13 @@ int ret = CKMC_ERROR_NONE;
 
 char* password = NULL;
 ckmc_raw_buffer_s *test_data;
-const char *alias = &quot;myData&quot;;
+const char *alias = "myData";
 
 ret = ckmc_get_data(alias, password, &amp;test_data);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-dlog_print(DLOG_INFO, LOG_TAG, &quot;data size =%d\n&quot;, test_data-&gt;size);
+dlog_print(DLOG_INFO, LOG_TAG, "data size =%d\n", test_data-&gt;size);
 
 ckmc_buffer_free(test_data); /* Called when the buffer is no longer needed */
 </pre></li>
@@ -382,15 +382,15 @@ int count_list = 0;
 
 ret = ckmc_get_data_alias_list(&amp;alias_list);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 plist = alias_list;
 do {
-&nbsp;&nbsp;&nbsp;&nbsp;ckmc_get_data(plist-&gt;alias, password, &amp;test_data);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%d th data: data size =%d\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++count_list, test_data-&gt;size);
-&nbsp;&nbsp;&nbsp;&nbsp;ckmc_buffer_free(test_data);
-&nbsp;&nbsp;&nbsp;&nbsp;plist = plist-&gt;next;
+    ckmc_get_data(plist-&gt;alias, password, &amp;test_data);
+    dlog_print(DLOG_INFO, LOG_TAG, "%d th data: data size =%d\n",
+               ++count_list, test_data-&gt;size);
+    ckmc_buffer_free(test_data);
+    plist = plist-&gt;next;
 } while (plist != NULL);
 
 ckmc_alias_list_all_free(alias_list); /* Called when the list is no longer needed */
@@ -399,11 +399,11 @@ ckmc_alias_list_all_free(alias_list); /* Called when the list is no longer neede
 <pre class="prettyprint">
 int ret = CKMC_ERROR_NONE;
 
-const char* alias= &quot;myData&quot;;
+const char* alias= "myData";
 
 ret = ckmc_remove_alias(alias);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li></ol>
 
 <h2 id="creatingkey" name="creatingkey">Creating Key Pairs</h2>
@@ -415,13 +415,13 @@ if (CKMC_ERROR_NONE != ret)
 int ret = CKMC_ERROR_NONE;
 
 size_t size = 2048; /* Key manager supports 1024, 2048, 4096 */
-const char *private_key_alias = &quot;PRV_RSA1&quot;;
-const char *public_key_alias = &quot;PUB_RSA1&quot;;
+const char *private_key_alias = "PRV_RSA1";
+const char *public_key_alias = "PUB_RSA1";
 ckmc_policy_s policy_private_key;
 ckmc_policy_s policy_public_key;
 
 /* Private key is encrypted with an additional password */
-policy_private_key.password = (char *)&quot;pri_password&quot;;
+policy_private_key.password = (char *)"pri_password";
 /* Key cannot be extracted from the key manager */
 policy_private_key.extractable = false;
 
@@ -429,9 +429,9 @@ policy_public_key.password = NULL;
 policy_public_key.extractable = true;
 
 ret = ckmc_create_key_pair_rsa(size, private_key_alias, public_key_alias,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;policy_private_key, policy_public_key);
+                               policy_private_key, policy_public_key);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li><p>Create the ECDSA key pair:</p>
@@ -439,13 +439,13 @@ if (CKMC_ERROR_NONE != ret)
 int ret = CKMC_ERROR_NONE;
 
 ckmc_ec_type_e ectype = CKMC_EC_PRIME192V1;
-const char *private_key_alias = &quot;PRV_ECDSA1&quot;;
-const char *public_key_alias = &quot;PUB_ECDSA1&quot;;
+const char *private_key_alias = "PRV_ECDSA1";
+const char *public_key_alias = "PUB_ECDSA1";
 ckmc_policy_s policy_private_key;
 ckmc_policy_s policy_public_key;
 
 /* Private key is encrypted with an additional password */
-policy_private_key.password = (char *)&quot;pri_password&quot;;
+policy_private_key.password = (char *)"pri_password";
 /* Key cannot be extracted from the key manager */
 policy_private_key.extractable = false;
 
@@ -453,9 +453,9 @@ policy_public_key.password = NULL;
 policy_public_key.extractable = true;
 
 ret = ckmc_create_key_pair_ecdsa(ectype, private_key_alias, public_key_alias,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;policy_private_key, policy_public_key);
+                                 policy_private_key, policy_public_key);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li><p>Create the DSA  key pair:</p>
@@ -463,22 +463,22 @@ if (CKMC_ERROR_NONE != ret)
 int ret = CKMC_ERROR_NONE;
 
 size_t size = 1024;
-const char *private_key_alias = &quot;PRV_DSA1&quot;;
-const char *public_key_alias = &quot;PUB-DSA1&quot;;
+const char *private_key_alias = "PRV_DSA1";
+const char *public_key_alias = "PUB-DSA1";
 ckmc_policy_s policy_private_key;
 ckmc_policy_s policy_public_key;
 
 /* This private key is encrypted with an additional password */
-policy_private_key.password = (char *)&quot;pri_password&quot;;
+policy_private_key.password = (char *)"pri_password";
 policy_private_key.extractable = false;
 
 policy_public_key.password = NULL;
 policy_public_key.extractable = true;
 
 ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;policy_private_key, policy_public_key);
+                               policy_private_key, policy_public_key);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li></ul>
 
 <h2 id="creatingsignat" name="creatingsignat">Creating or Verifying Signatures</h2>
@@ -488,9 +488,9 @@ if (CKMC_ERROR_NONE != ret)
 <pre class="prettyprint">
 int ret = CKMC_ERROR_NONE;
 
-const char *pub_alias = &quot;pub1&quot;;
-const char *pri_alias = &quot;prv1&quot;;
-char *key_passwd = (char *)&quot;1234&quot;;
+const char *pub_alias = "pub1";
+const char *pri_alias = "prv1";
+char *key_passwd = (char *)"1234";
 char *pri_passwd = NULL;
 char *pub_passwd = NULL;
 ckmc_hash_algo_e hash_algo = CKMC_HASH_SHA256;
@@ -502,46 +502,46 @@ ckmc_policy_s pubpolicy;
 ckmc_key_s prikey;
 ckmc_policy_s pripolicy;
 
-const char *prv = &quot;-----BEGIN RSA PRIVATE KEY-----\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;Proc-Type: 4,ENCRYPTED\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;DEK-Info: DES-EDE3-CBC,6C6507B11671DABC\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;YiKNviNqc/V/i241CKtAVsNckesE0kcaka3VrY7ApXR+Va93YoEwVQ8gB9cE/eHH\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;S0j3ZS1PAVFM/qo4ZnPdMzaSLvTQw0GAL90wWgF3XQ+feMnWyBObEoQdGXE828TB\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;SLz4UOIQ55Dx6JSWTfEhwAlPs2cEWD14xvuxPzAEzBIYmWmBBsCN94YgFeRTzjH0\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;TImoYVMN60GgOfZWw6rXq9RaV5dY0Y6F1piypCLGD35VaXAutdHIDvwUGECPm7SN\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;w05jRro53E1vb4mYlZEY/bs4q7XEOI5+ZKT76Xn0oEJNX1KRL1h2q8fgUkm5j40M\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;uQj71aLR9KyIoQARwGLeRy09tLVjH3fj66CCMqaPcxcIRIyWi5yYBB0s53ipm6A9\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;CYuyc7MS2C0pOdWKsDvYsHR/36KUiIdPuhF4AbaTqqO0eWeuP7Na7dGK56Fl+ooi\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;cUpJr7cIqMl2vL25B0jW7d4TB3zwCEkVVD1fBPeNoZWo30z4bILcBqjjPkQfHZ2e\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;xNraG3qI4FHjoPT8JEE8p+PgwaMoINlICyIMKiCdvwz9yEnsHPy7FkmatpS+jFoS\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;mg8R9vMwgK/HGEm0dmb/7/a0XsG2jCDm6cOmJdZJFQ8JW7hFs3eOHpNlQYDChG2D\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;A1ExslqBtbpicywTZhzFdYU/hxeCr4UqcY27Zmhr4JlBPMyvadWKeOqCamWepjbT\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;T/MhWJbmWgZbI5s5sbpu7cOYubQcUIEsTaQXGx/KEzGo1HLn9tzSeQfP/nqjAD/L\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;T5t1Mb8o4LuV/fGIT33Q3i2FospJMqp2JINNzG18I6Fjo08PTvJ3row40Rb76+lJ\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;wN1IBthgBgsgsOdB6XNc56sV+uq2TACsNNWw+JnFRCkCQgfF/KUrvN+WireWq88B\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;9UPG+Hbans5A6K+y1a+bzfdYnKws7x8wNRyPxb7Vb2t9ZTl5PBorPLVGsjgf9N5X\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;tCdBlfJsUdXot+EOxrIczV5zx0JIB1Y9hrDG07RYkzPuJKxkW7skqeLo8oWGVpaQ\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;LGWvuebky1R75hcSuL3e4QHfjBHPdQ31fScB884tqkbhBAWr2nT9bYEmyT170bno\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;8QkyOSb99xZBX55sLDHs9p61sTJr2C9Lz/KaWQs+3hTkpwSjSRyjEMH2n491qiQX\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;G+kvLEnvtR8sl9zinorj/RfsxyPntAxudfY3qaYUu2QkLvVdfTVUVbxS/Fg8f7B3\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;hEjCtpKgFjPxQuHE3didNOr5xM7mkmLN/QA7yHVgdpE64T5mFgC3JcVRpcR7zBPH\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;3OeXHgjrhDfN8UIX/cq6gNgD8w7O0rhHa3mEXI1xP14ykPcJ7wlRuLm9P3fwx5A2\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;jQrVKJKw1Nzummmspn4VOpJY3LkH4Sxo4e7Soo1l1cxJpzmERwgMF+vGz1L70+DG\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;M0hVrz1PxlOsBBFgcdS4TB91DIs/RcFDqrJ4gOPNKCgBP+rgTXXLFcxUwJfE3lKg\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;Kmpwdne6FuQYX3eyRVAmPgOHbJuRQCh/V4fYo51UxCcEKeKy6UgOPEJlXksWGbH5\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;VFmlytYW6dFKJvjltSmK6L2r+TlyEQoXwTqe4bkfhB2LniDEq28hKQ==\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;-----END RSA PRIVATE KEY-----\n&quot;;
-
-const char *pub = &quot;-----BEGIN PUBLIC KEY-----\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;zQIDAQAB\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;-----END PUBLIC KEY-----\n&quot;;
+const char *prv = "-----BEGIN RSA PRIVATE KEY-----\n"
+    "Proc-Type: 4,ENCRYPTED\n"
+    "DEK-Info: DES-EDE3-CBC,6C6507B11671DABC\n"
+    "\n"
+    "YiKNviNqc/V/i241CKtAVsNckesE0kcaka3VrY7ApXR+Va93YoEwVQ8gB9cE/eHH\n"
+    "S0j3ZS1PAVFM/qo4ZnPdMzaSLvTQw0GAL90wWgF3XQ+feMnWyBObEoQdGXE828TB\n"
+    "SLz4UOIQ55Dx6JSWTfEhwAlPs2cEWD14xvuxPzAEzBIYmWmBBsCN94YgFeRTzjH0\n"
+    "TImoYVMN60GgOfZWw6rXq9RaV5dY0Y6F1piypCLGD35VaXAutdHIDvwUGECPm7SN\n"
+    "w05jRro53E1vb4mYlZEY/bs4q7XEOI5+ZKT76Xn0oEJNX1KRL1h2q8fgUkm5j40M\n"
+    "uQj71aLR9KyIoQARwGLeRy09tLVjH3fj66CCMqaPcxcIRIyWi5yYBB0s53ipm6A9\n"
+    "CYuyc7MS2C0pOdWKsDvYsHR/36KUiIdPuhF4AbaTqqO0eWeuP7Na7dGK56Fl+ooi\n"
+    "cUpJr7cIqMl2vL25B0jW7d4TB3zwCEkVVD1fBPeNoZWo30z4bILcBqjjPkQfHZ2e\n"
+    "xNraG3qI4FHjoPT8JEE8p+PgwaMoINlICyIMKiCdvwz9yEnsHPy7FkmatpS+jFoS\n"
+    "mg8R9vMwgK/HGEm0dmb/7/a0XsG2jCDm6cOmJdZJFQ8JW7hFs3eOHpNlQYDChG2D\n"
+    "A1ExslqBtbpicywTZhzFdYU/hxeCr4UqcY27Zmhr4JlBPMyvadWKeOqCamWepjbT\n"
+    "T/MhWJbmWgZbI5s5sbpu7cOYubQcUIEsTaQXGx/KEzGo1HLn9tzSeQfP/nqjAD/L\n"
+    "T5t1Mb8o4LuV/fGIT33Q3i2FospJMqp2JINNzG18I6Fjo08PTvJ3row40Rb76+lJ\n"
+    "wN1IBthgBgsgsOdB6XNc56sV+uq2TACsNNWw+JnFRCkCQgfF/KUrvN+WireWq88B\n"
+    "9UPG+Hbans5A6K+y1a+bzfdYnKws7x8wNRyPxb7Vb2t9ZTl5PBorPLVGsjgf9N5X\n"
+    "tCdBlfJsUdXot+EOxrIczV5zx0JIB1Y9hrDG07RYkzPuJKxkW7skqeLo8oWGVpaQ\n"
+    "LGWvuebky1R75hcSuL3e4QHfjBHPdQ31fScB884tqkbhBAWr2nT9bYEmyT170bno\n"
+    "8QkyOSb99xZBX55sLDHs9p61sTJr2C9Lz/KaWQs+3hTkpwSjSRyjEMH2n491qiQX\n"
+    "G+kvLEnvtR8sl9zinorj/RfsxyPntAxudfY3qaYUu2QkLvVdfTVUVbxS/Fg8f7B3\n"
+    "hEjCtpKgFjPxQuHE3didNOr5xM7mkmLN/QA7yHVgdpE64T5mFgC3JcVRpcR7zBPH\n"
+    "3OeXHgjrhDfN8UIX/cq6gNgD8w7O0rhHa3mEXI1xP14ykPcJ7wlRuLm9P3fwx5A2\n"
+    "jQrVKJKw1Nzummmspn4VOpJY3LkH4Sxo4e7Soo1l1cxJpzmERwgMF+vGz1L70+DG\n"
+    "M0hVrz1PxlOsBBFgcdS4TB91DIs/RcFDqrJ4gOPNKCgBP+rgTXXLFcxUwJfE3lKg\n"
+    "Kmpwdne6FuQYX3eyRVAmPgOHbJuRQCh/V4fYo51UxCcEKeKy6UgOPEJlXksWGbH5\n"
+    "VFmlytYW6dFKJvjltSmK6L2r+TlyEQoXwTqe4bkfhB2LniDEq28hKQ==\n"
+    "-----END RSA PRIVATE KEY-----\n";
+
+const char *pub = "-----BEGIN PUBLIC KEY-----\n"
+    "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2b1bXDa+S8/MGWnMkru4\n"
+    "T4tUddtZNi0NVjQn9RFH1NMa220GsRhRO56F77FlSVFKfSfVZKIiWg6C+DVCkcLf\n"
+    "zXJ/Z0pvwOQYBAqVMFjV6efQGN0JzJ1Unu7pPRiZl7RKGEI+cyzzrcDyrLLrQ2W7\n"
+    "0ZySkNEOv6Frx9JgC5NExuYY4lk2fQQa38JXiZkfyzif2em0px7mXbyf5LjccsKq\n"
+    "v1e+XLtMsL0ZefRcqsP++NzQAI8fKX7WBT+qK0HJDLiHrKOTWYzx6CwJ66LD/vvf\n"
+    "j55xtsKDLVDbsotvf8/m6VLMab+vqKk11TP4tq6yo0mwyTADvgl1zowQEO9I1W6o\n"
+    "zQIDAQAB\n"
+    "-----END PUBLIC KEY-----\n";
 pubkey.raw_key = (unsigned char *)pub;
 pubkey.key_size = strlen(pub);
 pubkey.key_type = CKMC_KEY_NONE;
@@ -560,11 +560,11 @@ prikey.password = key_passwd; /* prv private key is encrypted with the key_passw
 
 ret = ckmc_save_key(pri_alias, prikey, pripolicy);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = ckmc_save_key(pub_alias, pubkey, pubpolicy);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li>Create and verify the signature:
@@ -573,14 +573,14 @@ if (CKMC_ERROR_NONE != ret)
 <pre class="prettyprint">
 int ret = CKMC_ERROR_NONE;
 
-const char *message = &quot;message test&quot;;
+const char *message = "message test";
 ckmc_raw_buffer_s msg_buff;
 ckmc_raw_buffer_s *signature;
 ckmc_hash_algo_e hash_algo = CKMC_HASH_SHA256;
 ckmc_rsa_padding_algo_e pad_algo = CKMC_PKCS1_PADDING;
 
-const char *pub_alias = &quot;pub1&quot;;
-const char *pri_alias = &quot;prv1&quot;;
+const char *pub_alias = "pub1";
+const char *pri_alias = "prv1";
 char *pri_passwd = NULL;
 char *pub_passwd = NULL;
 
@@ -588,28 +588,28 @@ msg_buff.data = (unsigned char *)message;
 msg_buff.size = strlen(message);
 
 ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff, hash_algo,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pad_algo, &amp;signature);
+                            pad_algo, &amp;signature);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff, *signature,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hash_algo, pad_algo);
+                            hash_algo, pad_algo);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li>Create and verify without a hash algorithm:
 <pre class="prettyprint">
 int ret = CKMC_ERROR_NONE;
 
-const char *message = &quot;message test&quot;;
+const char *message = "message test";
 ckmc_raw_buffer_s msg_buff;
 ckmc_raw_buffer_s *signature;
 ckmc_hash_algo_e hash_algo = CKMC_HASH_NONE; /* Do not use a hash algorithm */
 ckmc_rsa_padding_algo_e pad_algo = CKMC_PKCS1_PADDING;
 
-const char *pub_alias = &quot;pub1&quot;;
-const char *pri_alias = &quot;prv1&quot;;
+const char *pub_alias = "pub1";
+const char *pri_alias = "prv1";
 char *pri_passwd = NULL;
 char *pub_passwd = NULL;
 
@@ -617,14 +617,14 @@ msg_buff.data = (unsigned char *)message;
 msg_buff.size = strlen(message);
 
 ret = ckmc_create_signature(pri_alias, pri_passwd, msg_buff,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hash_algo, pad_algo, &amp;signature);
+                            hash_algo, pad_algo, &amp;signature);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = ckmc_verify_signature(pub_alias, pub_passwd, msg_buff,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*signature, hash_algo, pad_algo);
+                            *signature, hash_algo, pad_algo);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 </ul>
 </li></ol>
@@ -647,76 +647,76 @@ ckmc_cert_list_s *current;
 ckmc_cert_list_s *next;
 
 const char * ee =
-&quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIF0TCCBLmgAwIBAgIQaPGTP4aS7Ut/WDNaBzdQrDANBgkqhkiG9w0BAQUFADCB\n&quot;
-&quot;ujELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;
-&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\n&quot;
-&quot;YXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMr\n&quot;
-&quot;VmVyaVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTAeFw0x\n&quot;
-&quot;NDAyMjAwMDAwMDBaFw0xNTAyMjAyMzU5NTlaMIHmMRMwEQYLKwYBBAGCNzwCAQMT\n&quot;
-&quot;AlBMMR0wGwYDVQQPExRQcml2YXRlIE9yZ2FuaXphdGlvbjETMBEGA1UEBRMKMDAw\n&quot;
-&quot;MDAyNTIzNzELMAkGA1UEBhMCUEwxDzANBgNVBBEUBjAwLTk1MDEUMBIGA1UECBML\n&quot;
-&quot;bWF6b3dpZWNraWUxETAPBgNVBAcUCFdhcnN6YXdhMRYwFAYDVQQJFA1TZW5hdG9y\n&quot;
-&quot;c2thIDE4MRMwEQYDVQQKFAptQmFuayBTLkEuMQwwCgYDVQQLFANESU4xGTAXBgNV\n&quot;
-&quot;BAMUEHd3dy5tYmFuay5jb20ucGwwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK\n&quot;
-&quot;AoIBAQDph6x8V6xUW/+651+qHF+UmorH9uaz2ZrX2bIWiMKIJFmpDDHlxcapKkqE\n&quot;
-&quot;BV04is83aiCpqKtc2ZHy2g4Hpj1eSF5BP2+OAlo0YUQZPIeRRdiMjmeAxw/ncBDx\n&quot;
-&quot;9rQBuCJ4XTD6cqQox5SI0TASOZ+wyAEjbDRXzL73XqRAFZ1LOpb2ONkolS+RutMB\n&quot;
-&quot;vshvCsWPeNe7eGLuOh6DyC6r1vX9xhw3xnjM2mTSvmtimgzSLacNGKqRrsucUgcb\n&quot;
-&quot;0+O5C2jZAtAMLyZksL92cxmWbtVzUYzem4chjHu5cRxUlPNzUJWrrczueB7Ip4A8\n&quot;
-&quot;aQuFMfNXYc0x+WLWjy//urypMKjhAgMBAAGjggGjMIIBnzAbBgNVHREEFDASghB3\n&quot;
-&quot;d3cubWJhbmsuY29tLnBsMAkGA1UdEwQCMAAwDgYDVR0PAQH/BAQDAgWgMB0GA1Ud\n&quot;
-&quot;JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjBEBgNVHSAEPTA7MDkGC2CGSAGG+EUB\n&quot;
-&quot;BxcGMCowKAYIKwYBBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMw\n&quot;
-&quot;HQYDVR0OBBYEFN37iGaS7mZnENxZ9FGqNLR+QgoMMB8GA1UdIwQYMBaAFPyKULqe\n&quot;
-&quot;uSVae1WFT5UAY4/pWGtDMEIGA1UdHwQ7MDkwN6A1oDOGMWh0dHA6Ly9FVlNlY3Vy\n&quot;
-&quot;ZS1jcmwudmVyaXNpZ24uY29tL0VWU2VjdXJlMjAwNi5jcmwwfAYIKwYBBQUHAQEE\n&quot;
-&quot;cDBuMC0GCCsGAQUFBzABhiFodHRwOi8vRVZTZWN1cmUtb2NzcC52ZXJpc2lnbi5j\n&quot;
-&quot;b20wPQYIKwYBBQUHMAKGMWh0dHA6Ly9FVlNlY3VyZS1haWEudmVyaXNpZ24uY29t\n&quot;
-&quot;L0VWU2VjdXJlMjAwNi5jZXIwDQYJKoZIhvcNAQEFBQADggEBAD0wO+rooUrIM4qp\n&quot;
-&quot;PHhp+hkXK6WMQ2qzGOmbMcZjw0govg5vkzkefPDryIXXbrF8mRagiJNMSfNaWWeh\n&quot;
-&quot;Cj41OV24EdUl0OLbFxNzcvub599zRs/apfaRLTfsmlmOgi0/YP305i+3tJ2ll946\n&quot;
-&quot;P+qV1wXnXqTqEdIl4Ys3+1HmDCdTB1hoDwAAzqRVUXZ5+iiwPAU7R/LTHfMjV1ke\n&quot;
-&quot;8jtNFfrorlZMCfVH/7eEnHJvVjOJt+YFe4aFMzE+DfuYIK7MH+olC2v79kBwbnEQ\n&quot;
-&quot;fvHMA9gFwOYLUBBdSfcocp8EKZ+mRlNPGR/3LBrPeaQQ0GZEkxzRK+v/aNTuiYfr\n&quot;
-&quot;oFXtrg0=\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
+"-----BEGIN CERTIFICATE-----\n"
+"MIIF0TCCBLmgAwIBAgIQaPGTP4aS7Ut/WDNaBzdQrDANBgkqhkiG9w0BAQUFADCB\n"
+"ujELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n"
+"ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\n"
+"YXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMr\n"
+"VmVyaVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTAeFw0x\n"
+"NDAyMjAwMDAwMDBaFw0xNTAyMjAyMzU5NTlaMIHmMRMwEQYLKwYBBAGCNzwCAQMT\n"
+"AlBMMR0wGwYDVQQPExRQcml2YXRlIE9yZ2FuaXphdGlvbjETMBEGA1UEBRMKMDAw\n"
+"MDAyNTIzNzELMAkGA1UEBhMCUEwxDzANBgNVBBEUBjAwLTk1MDEUMBIGA1UECBML\n"
+"bWF6b3dpZWNraWUxETAPBgNVBAcUCFdhcnN6YXdhMRYwFAYDVQQJFA1TZW5hdG9y\n"
+"c2thIDE4MRMwEQYDVQQKFAptQmFuayBTLkEuMQwwCgYDVQQLFANESU4xGTAXBgNV\n"
+"BAMUEHd3dy5tYmFuay5jb20ucGwwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK\n"
+"AoIBAQDph6x8V6xUW/+651+qHF+UmorH9uaz2ZrX2bIWiMKIJFmpDDHlxcapKkqE\n"
+"BV04is83aiCpqKtc2ZHy2g4Hpj1eSF5BP2+OAlo0YUQZPIeRRdiMjmeAxw/ncBDx\n"
+"9rQBuCJ4XTD6cqQox5SI0TASOZ+wyAEjbDRXzL73XqRAFZ1LOpb2ONkolS+RutMB\n"
+"vshvCsWPeNe7eGLuOh6DyC6r1vX9xhw3xnjM2mTSvmtimgzSLacNGKqRrsucUgcb\n"
+"0+O5C2jZAtAMLyZksL92cxmWbtVzUYzem4chjHu5cRxUlPNzUJWrrczueB7Ip4A8\n"
+"aQuFMfNXYc0x+WLWjy//urypMKjhAgMBAAGjggGjMIIBnzAbBgNVHREEFDASghB3\n"
+"d3cubWJhbmsuY29tLnBsMAkGA1UdEwQCMAAwDgYDVR0PAQH/BAQDAgWgMB0GA1Ud\n"
+"JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjBEBgNVHSAEPTA7MDkGC2CGSAGG+EUB\n"
+"BxcGMCowKAYIKwYBBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMw\n"
+"HQYDVR0OBBYEFN37iGaS7mZnENxZ9FGqNLR+QgoMMB8GA1UdIwQYMBaAFPyKULqe\n"
+"uSVae1WFT5UAY4/pWGtDMEIGA1UdHwQ7MDkwN6A1oDOGMWh0dHA6Ly9FVlNlY3Vy\n"
+"ZS1jcmwudmVyaXNpZ24uY29tL0VWU2VjdXJlMjAwNi5jcmwwfAYIKwYBBQUHAQEE\n"
+"cDBuMC0GCCsGAQUFBzABhiFodHRwOi8vRVZTZWN1cmUtb2NzcC52ZXJpc2lnbi5j\n"
+"b20wPQYIKwYBBQUHMAKGMWh0dHA6Ly9FVlNlY3VyZS1haWEudmVyaXNpZ24uY29t\n"
+"L0VWU2VjdXJlMjAwNi5jZXIwDQYJKoZIhvcNAQEFBQADggEBAD0wO+rooUrIM4qp\n"
+"PHhp+hkXK6WMQ2qzGOmbMcZjw0govg5vkzkefPDryIXXbrF8mRagiJNMSfNaWWeh\n"
+"Cj41OV24EdUl0OLbFxNzcvub599zRs/apfaRLTfsmlmOgi0/YP305i+3tJ2ll946\n"
+"P+qV1wXnXqTqEdIl4Ys3+1HmDCdTB1hoDwAAzqRVUXZ5+iiwPAU7R/LTHfMjV1ke\n"
+"8jtNFfrorlZMCfVH/7eEnHJvVjOJt+YFe4aFMzE+DfuYIK7MH+olC2v79kBwbnEQ\n"
+"fvHMA9gFwOYLUBBdSfcocp8EKZ+mRlNPGR/3LBrPeaQQ0GZEkxzRK+v/aNTuiYfr\n"
+"oFXtrg0=\n"
+"-----END CERTIFICATE-----\n";
 
 const char *im =
-&quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIF5DCCBMygAwIBAgIQW3dZxheE4V7HJ8AylSkoazANBgkqhkiG9w0BAQUFADCB\n&quot;
-&quot;yjELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;
-&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTowOAYDVQQLEzEoYykgMjAwNiBWZXJp\n&quot;
-&quot;U2lnbiwgSW5jLiAtIEZvciBhdXRob3JpemVkIHVzZSBvbmx5MUUwQwYDVQQDEzxW\n&quot;
-&quot;ZXJpU2lnbiBDbGFzcyAzIFB1YmxpYyBQcmltYXJ5IENlcnRpZmljYXRpb24gQXV0\n&quot;
-&quot;aG9yaXR5IC0gRzUwHhcNMDYxMTA4MDAwMDAwWhcNMTYxMTA3MjM1OTU5WjCBujEL\n&quot;
-&quot;MAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQLExZW\n&quot;
-&quot;ZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2UgYXQg\n&quot;
-&quot;aHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMrVmVy\n&quot;
-&quot;aVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTCCASIwDQYJ\n&quot;
-&quot;KoZIhvcNAQEBBQADggEPADCCAQoCggEBAJjboFXrnP0XeeOabhQdsVuYI4cWbod2\n&quot;
-&quot;nLU4O7WgerQHYwkZ5iqISKnnnbYwWgiXDOyq5BZpcmIjmvt6VCiYxQwtt9citsj5\n&quot;
-&quot;OBfH3doxRpqUFI6e7nigtyLUSVSXTeV0W5K87Gws3+fBthsaVWtmCAN/Ra+aM/EQ\n&quot;
-&quot;wGyZSpIkMQht3QI+YXZ4eLbtfjeubPOJ4bfh3BXMt1afgKCxBX9ONxX/ty8ejwY4\n&quot;
-&quot;P1C3aSijtWZfNhpSSENmUt+ikk/TGGC+4+peGXEFv54cbGhyJW+ze3PJbb0S/5tB\n&quot;
-&quot;Ml706H7FC6NMZNFOvCYIZfsZl1h44TO/7Wg+sSdFb8Di7Jdp91zT91ECAwEAAaOC\n&quot;
-&quot;AdIwggHOMB0GA1UdDgQWBBT8ilC6nrklWntVhU+VAGOP6VhrQzASBgNVHRMBAf8E\n&quot;
-&quot;CDAGAQH/AgEAMD0GA1UdIAQ2MDQwMgYEVR0gADAqMCgGCCsGAQUFBwIBFhxodHRw\n&quot;
-&quot;czovL3d3dy52ZXJpc2lnbi5jb20vY3BzMD0GA1UdHwQ2MDQwMqAwoC6GLGh0dHA6\n&quot;
-&quot;Ly9FVlNlY3VyZS1jcmwudmVyaXNpZ24uY29tL3BjYTMtZzUuY3JsMA4GA1UdDwEB\n&quot;
-&quot;/wQEAwIBBjARBglghkgBhvhCAQEEBAMCAQYwbQYIKwYBBQUHAQwEYTBfoV2gWzBZ\n&quot;
-&quot;MFcwVRYJaW1hZ2UvZ2lmMCEwHzAHBgUrDgMCGgQUj+XTGoasjY5rw8+AatRIGCx7\n&quot;
-&quot;GS4wJRYjaHR0cDovL2xvZ28udmVyaXNpZ24uY29tL3ZzbG9nby5naWYwKQYDVR0R\n&quot;
-&quot;BCIwIKQeMBwxGjAYBgNVBAMTEUNsYXNzM0NBMjA0OC0xLTQ3MD0GCCsGAQUFBwEB\n&quot;
-&quot;BDEwLzAtBggrBgEFBQcwAYYhaHR0cDovL0VWU2VjdXJlLW9jc3AudmVyaXNpZ24u\n&quot;
-&quot;Y29tMB8GA1UdIwQYMBaAFH/TZafC3ey78DAJ80M5+gKvMzEzMA0GCSqGSIb3DQEB\n&quot;
-&quot;BQUAA4IBAQCWovp/5j3t1CvOtxU/wHIDX4u6FpAl98KD2Md1NGNoElMMU4l7yVYJ\n&quot;
-&quot;p8M2RE4O0GJis4b66KGbNGeNUyIXPv2s7mcuQ+JdfzOE8qJwwG6Cl8A0/SXGI3/t\n&quot;
-&quot;5rDFV0OEst4t8dD2SB8UcVeyrDHhlyQjyRNddOVG7wl8nuGZMQoIeRuPcZ8XZsg4\n&quot;
-&quot;z+6Ml7YGuXNG5NOUweVgtSV1LdlpMezNlsOjdv3odESsErlNv1HoudRETifLriDR\n&quot;
-&quot;fip8tmNHnna6l9AW5wtsbfdDbzMLKTB3+p359U64drPNGLT5IO892+bKrZvQTtKH\n&quot;
-&quot;qQ2mRHNQ3XBb7a1+Srwi1agm5MKFIA3Z\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
+"-----BEGIN CERTIFICATE-----\n"
+"MIIF5DCCBMygAwIBAgIQW3dZxheE4V7HJ8AylSkoazANBgkqhkiG9w0BAQUFADCB\n"
+"yjELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n"
+"ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTowOAYDVQQLEzEoYykgMjAwNiBWZXJp\n"
+"U2lnbiwgSW5jLiAtIEZvciBhdXRob3JpemVkIHVzZSBvbmx5MUUwQwYDVQQDEzxW\n"
+"ZXJpU2lnbiBDbGFzcyAzIFB1YmxpYyBQcmltYXJ5IENlcnRpZmljYXRpb24gQXV0\n"
+"aG9yaXR5IC0gRzUwHhcNMDYxMTA4MDAwMDAwWhcNMTYxMTA3MjM1OTU5WjCBujEL\n"
+"MAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQLExZW\n"
+"ZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2UgYXQg\n"
+"aHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMrVmVy\n"
+"aVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTCCASIwDQYJ\n"
+"KoZIhvcNAQEBBQADggEPADCCAQoCggEBAJjboFXrnP0XeeOabhQdsVuYI4cWbod2\n"
+"nLU4O7WgerQHYwkZ5iqISKnnnbYwWgiXDOyq5BZpcmIjmvt6VCiYxQwtt9citsj5\n"
+"OBfH3doxRpqUFI6e7nigtyLUSVSXTeV0W5K87Gws3+fBthsaVWtmCAN/Ra+aM/EQ\n"
+"wGyZSpIkMQht3QI+YXZ4eLbtfjeubPOJ4bfh3BXMt1afgKCxBX9ONxX/ty8ejwY4\n"
+"P1C3aSijtWZfNhpSSENmUt+ikk/TGGC+4+peGXEFv54cbGhyJW+ze3PJbb0S/5tB\n"
+"Ml706H7FC6NMZNFOvCYIZfsZl1h44TO/7Wg+sSdFb8Di7Jdp91zT91ECAwEAAaOC\n"
+"AdIwggHOMB0GA1UdDgQWBBT8ilC6nrklWntVhU+VAGOP6VhrQzASBgNVHRMBAf8E\n"
+"CDAGAQH/AgEAMD0GA1UdIAQ2MDQwMgYEVR0gADAqMCgGCCsGAQUFBwIBFhxodHRw\n"
+"czovL3d3dy52ZXJpc2lnbi5jb20vY3BzMD0GA1UdHwQ2MDQwMqAwoC6GLGh0dHA6\n"
+"Ly9FVlNlY3VyZS1jcmwudmVyaXNpZ24uY29tL3BjYTMtZzUuY3JsMA4GA1UdDwEB\n"
+"/wQEAwIBBjARBglghkgBhvhCAQEEBAMCAQYwbQYIKwYBBQUHAQwEYTBfoV2gWzBZ\n"
+"MFcwVRYJaW1hZ2UvZ2lmMCEwHzAHBgUrDgMCGgQUj+XTGoasjY5rw8+AatRIGCx7\n"
+"GS4wJRYjaHR0cDovL2xvZ28udmVyaXNpZ24uY29tL3ZzbG9nby5naWYwKQYDVR0R\n"
+"BCIwIKQeMBwxGjAYBgNVBAMTEUNsYXNzM0NBMjA0OC0xLTQ3MD0GCCsGAQUFBwEB\n"
+"BDEwLzAtBggrBgEFBQcwAYYhaHR0cDovL0VWU2VjdXJlLW9jc3AudmVyaXNpZ24u\n"
+"Y29tMB8GA1UdIwQYMBaAFH/TZafC3ey78DAJ80M5+gKvMzEzMA0GCSqGSIb3DQEB\n"
+"BQUAA4IBAQCWovp/5j3t1CvOtxU/wHIDX4u6FpAl98KD2Md1NGNoElMMU4l7yVYJ\n"
+"p8M2RE4O0GJis4b66KGbNGeNUyIXPv2s7mcuQ+JdfzOE8qJwwG6Cl8A0/SXGI3/t\n"
+"5rDFV0OEst4t8dD2SB8UcVeyrDHhlyQjyRNddOVG7wl8nuGZMQoIeRuPcZ8XZsg4\n"
+"z+6Ml7YGuXNG5NOUweVgtSV1LdlpMezNlsOjdv3odESsErlNv1HoudRETifLriDR\n"
+"fip8tmNHnna6l9AW5wtsbfdDbzMLKTB3+p359U64drPNGLT5IO892+bKrZvQTtKH\n"
+"qQ2mRHNQ3XBb7a1+Srwi1agm5MKFIA3Z\n"
+"-----END CERTIFICATE-----\n";
 
 c_cert.raw_cert = (unsigned char *)ee;
 c_cert.cert_size = strlen(ee);
@@ -731,12 +731,12 @@ untrustedcerts.next = NULL;
 
 ret = ckmc_get_cert_chain(&amp;c_cert, &amp;untrustedcerts, &amp;cert_chain_list);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 next=cert_chain_list;
 do {
-&nbsp;&nbsp;&nbsp;&nbsp;current = next;
-&nbsp;&nbsp;&nbsp;&nbsp;next = current-&gt;next;
+    current = next;
+    next = current-&gt;next;
 } while (next != NULL);
 
 /* Called when the list is no longer needed */
@@ -749,7 +749,7 @@ ckmc_cert_list_all_free(cert_chain_list);
 int ret = CKMC_ERROR_NONE;
 
 char* password = NULL;
-const char *ca_alias = &quot;untrusted_ca_cert1&quot;;
+const char *ca_alias = "untrusted_ca_cert1";
 ckmc_policy_s test_policy;
 
 ckmc_cert_s c_cert; /* For a user certificate */
@@ -762,76 +762,76 @@ ckmc_cert_list_s *current;
 ckmc_cert_list_s *next;
 
 const char * ee =
-&quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIF0TCCBLmgAwIBAgIQaPGTP4aS7Ut/WDNaBzdQrDANBgkqhkiG9w0BAQUFADCB\n&quot;
-&quot;ujELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;
-&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\n&quot;
-&quot;YXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMr\n&quot;
-&quot;VmVyaVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTAeFw0x\n&quot;
-&quot;NDAyMjAwMDAwMDBaFw0xNTAyMjAyMzU5NTlaMIHmMRMwEQYLKwYBBAGCNzwCAQMT\n&quot;
-&quot;AlBMMR0wGwYDVQQPExRQcml2YXRlIE9yZ2FuaXphdGlvbjETMBEGA1UEBRMKMDAw\n&quot;
-&quot;MDAyNTIzNzELMAkGA1UEBhMCUEwxDzANBgNVBBEUBjAwLTk1MDEUMBIGA1UECBML\n&quot;
-&quot;bWF6b3dpZWNraWUxETAPBgNVBAcUCFdhcnN6YXdhMRYwFAYDVQQJFA1TZW5hdG9y\n&quot;
-&quot;c2thIDE4MRMwEQYDVQQKFAptQmFuayBTLkEuMQwwCgYDVQQLFANESU4xGTAXBgNV\n&quot;
-&quot;BAMUEHd3dy5tYmFuay5jb20ucGwwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK\n&quot;
-&quot;AoIBAQDph6x8V6xUW/+651+qHF+UmorH9uaz2ZrX2bIWiMKIJFmpDDHlxcapKkqE\n&quot;
-&quot;BV04is83aiCpqKtc2ZHy2g4Hpj1eSF5BP2+OAlo0YUQZPIeRRdiMjmeAxw/ncBDx\n&quot;
-&quot;9rQBuCJ4XTD6cqQox5SI0TASOZ+wyAEjbDRXzL73XqRAFZ1LOpb2ONkolS+RutMB\n&quot;
-&quot;vshvCsWPeNe7eGLuOh6DyC6r1vX9xhw3xnjM2mTSvmtimgzSLacNGKqRrsucUgcb\n&quot;
-&quot;0+O5C2jZAtAMLyZksL92cxmWbtVzUYzem4chjHu5cRxUlPNzUJWrrczueB7Ip4A8\n&quot;
-&quot;aQuFMfNXYc0x+WLWjy//urypMKjhAgMBAAGjggGjMIIBnzAbBgNVHREEFDASghB3\n&quot;
-&quot;d3cubWJhbmsuY29tLnBsMAkGA1UdEwQCMAAwDgYDVR0PAQH/BAQDAgWgMB0GA1Ud\n&quot;
-&quot;JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjBEBgNVHSAEPTA7MDkGC2CGSAGG+EUB\n&quot;
-&quot;BxcGMCowKAYIKwYBBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMw\n&quot;
-&quot;HQYDVR0OBBYEFN37iGaS7mZnENxZ9FGqNLR+QgoMMB8GA1UdIwQYMBaAFPyKULqe\n&quot;
-&quot;uSVae1WFT5UAY4/pWGtDMEIGA1UdHwQ7MDkwN6A1oDOGMWh0dHA6Ly9FVlNlY3Vy\n&quot;
-&quot;ZS1jcmwudmVyaXNpZ24uY29tL0VWU2VjdXJlMjAwNi5jcmwwfAYIKwYBBQUHAQEE\n&quot;
-&quot;cDBuMC0GCCsGAQUFBzABhiFodHRwOi8vRVZTZWN1cmUtb2NzcC52ZXJpc2lnbi5j\n&quot;
-&quot;b20wPQYIKwYBBQUHMAKGMWh0dHA6Ly9FVlNlY3VyZS1haWEudmVyaXNpZ24uY29t\n&quot;
-&quot;L0VWU2VjdXJlMjAwNi5jZXIwDQYJKoZIhvcNAQEFBQADggEBAD0wO+rooUrIM4qp\n&quot;
-&quot;PHhp+hkXK6WMQ2qzGOmbMcZjw0govg5vkzkefPDryIXXbrF8mRagiJNMSfNaWWeh\n&quot;
-&quot;Cj41OV24EdUl0OLbFxNzcvub599zRs/apfaRLTfsmlmOgi0/YP305i+3tJ2ll946\n&quot;
-&quot;P+qV1wXnXqTqEdIl4Ys3+1HmDCdTB1hoDwAAzqRVUXZ5+iiwPAU7R/LTHfMjV1ke\n&quot;
-&quot;8jtNFfrorlZMCfVH/7eEnHJvVjOJt+YFe4aFMzE+DfuYIK7MH+olC2v79kBwbnEQ\n&quot;
-&quot;fvHMA9gFwOYLUBBdSfcocp8EKZ+mRlNPGR/3LBrPeaQQ0GZEkxzRK+v/aNTuiYfr\n&quot;
-&quot;oFXtrg0=\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
+"-----BEGIN CERTIFICATE-----\n"
+"MIIF0TCCBLmgAwIBAgIQaPGTP4aS7Ut/WDNaBzdQrDANBgkqhkiG9w0BAQUFADCB\n"
+"ujELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n"
+"ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\n"
+"YXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMr\n"
+"VmVyaVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTAeFw0x\n"
+"NDAyMjAwMDAwMDBaFw0xNTAyMjAyMzU5NTlaMIHmMRMwEQYLKwYBBAGCNzwCAQMT\n"
+"AlBMMR0wGwYDVQQPExRQcml2YXRlIE9yZ2FuaXphdGlvbjETMBEGA1UEBRMKMDAw\n"
+"MDAyNTIzNzELMAkGA1UEBhMCUEwxDzANBgNVBBEUBjAwLTk1MDEUMBIGA1UECBML\n"
+"bWF6b3dpZWNraWUxETAPBgNVBAcUCFdhcnN6YXdhMRYwFAYDVQQJFA1TZW5hdG9y\n"
+"c2thIDE4MRMwEQYDVQQKFAptQmFuayBTLkEuMQwwCgYDVQQLFANESU4xGTAXBgNV\n"
+"BAMUEHd3dy5tYmFuay5jb20ucGwwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK\n"
+"AoIBAQDph6x8V6xUW/+651+qHF+UmorH9uaz2ZrX2bIWiMKIJFmpDDHlxcapKkqE\n"
+"BV04is83aiCpqKtc2ZHy2g4Hpj1eSF5BP2+OAlo0YUQZPIeRRdiMjmeAxw/ncBDx\n"
+"9rQBuCJ4XTD6cqQox5SI0TASOZ+wyAEjbDRXzL73XqRAFZ1LOpb2ONkolS+RutMB\n"
+"vshvCsWPeNe7eGLuOh6DyC6r1vX9xhw3xnjM2mTSvmtimgzSLacNGKqRrsucUgcb\n"
+"0+O5C2jZAtAMLyZksL92cxmWbtVzUYzem4chjHu5cRxUlPNzUJWrrczueB7Ip4A8\n"
+"aQuFMfNXYc0x+WLWjy//urypMKjhAgMBAAGjggGjMIIBnzAbBgNVHREEFDASghB3\n"
+"d3cubWJhbmsuY29tLnBsMAkGA1UdEwQCMAAwDgYDVR0PAQH/BAQDAgWgMB0GA1Ud\n"
+"JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjBEBgNVHSAEPTA7MDkGC2CGSAGG+EUB\n"
+"BxcGMCowKAYIKwYBBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMw\n"
+"HQYDVR0OBBYEFN37iGaS7mZnENxZ9FGqNLR+QgoMMB8GA1UdIwQYMBaAFPyKULqe\n"
+"uSVae1WFT5UAY4/pWGtDMEIGA1UdHwQ7MDkwN6A1oDOGMWh0dHA6Ly9FVlNlY3Vy\n"
+"ZS1jcmwudmVyaXNpZ24uY29tL0VWU2VjdXJlMjAwNi5jcmwwfAYIKwYBBQUHAQEE\n"
+"cDBuMC0GCCsGAQUFBzABhiFodHRwOi8vRVZTZWN1cmUtb2NzcC52ZXJpc2lnbi5j\n"
+"b20wPQYIKwYBBQUHMAKGMWh0dHA6Ly9FVlNlY3VyZS1haWEudmVyaXNpZ24uY29t\n"
+"L0VWU2VjdXJlMjAwNi5jZXIwDQYJKoZIhvcNAQEFBQADggEBAD0wO+rooUrIM4qp\n"
+"PHhp+hkXK6WMQ2qzGOmbMcZjw0govg5vkzkefPDryIXXbrF8mRagiJNMSfNaWWeh\n"
+"Cj41OV24EdUl0OLbFxNzcvub599zRs/apfaRLTfsmlmOgi0/YP305i+3tJ2ll946\n"
+"P+qV1wXnXqTqEdIl4Ys3+1HmDCdTB1hoDwAAzqRVUXZ5+iiwPAU7R/LTHfMjV1ke\n"
+"8jtNFfrorlZMCfVH/7eEnHJvVjOJt+YFe4aFMzE+DfuYIK7MH+olC2v79kBwbnEQ\n"
+"fvHMA9gFwOYLUBBdSfcocp8EKZ+mRlNPGR/3LBrPeaQQ0GZEkxzRK+v/aNTuiYfr\n"
+"oFXtrg0=\n"
+"-----END CERTIFICATE-----\n";
 
 const char *im =
-&quot;-----BEGIN CERTIFICATE-----\n&quot;
-&quot;MIIF5DCCBMygAwIBAgIQW3dZxheE4V7HJ8AylSkoazANBgkqhkiG9w0BAQUFADCB\n&quot;
-&quot;yjELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n&quot;
-&quot;ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTowOAYDVQQLEzEoYykgMjAwNiBWZXJp\n&quot;
-&quot;U2lnbiwgSW5jLiAtIEZvciBhdXRob3JpemVkIHVzZSBvbmx5MUUwQwYDVQQDEzxW\n&quot;
-&quot;ZXJpU2lnbiBDbGFzcyAzIFB1YmxpYyBQcmltYXJ5IENlcnRpZmljYXRpb24gQXV0\n&quot;
-&quot;aG9yaXR5IC0gRzUwHhcNMDYxMTA4MDAwMDAwWhcNMTYxMTA3MjM1OTU5WjCBujEL\n&quot;
-&quot;MAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQLExZW\n&quot;
-&quot;ZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2UgYXQg\n&quot;
-&quot;aHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMrVmVy\n&quot;
-&quot;aVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTCCASIwDQYJ\n&quot;
-&quot;KoZIhvcNAQEBBQADggEPADCCAQoCggEBAJjboFXrnP0XeeOabhQdsVuYI4cWbod2\n&quot;
-&quot;nLU4O7WgerQHYwkZ5iqISKnnnbYwWgiXDOyq5BZpcmIjmvt6VCiYxQwtt9citsj5\n&quot;
-&quot;OBfH3doxRpqUFI6e7nigtyLUSVSXTeV0W5K87Gws3+fBthsaVWtmCAN/Ra+aM/EQ\n&quot;
-&quot;wGyZSpIkMQht3QI+YXZ4eLbtfjeubPOJ4bfh3BXMt1afgKCxBX9ONxX/ty8ejwY4\n&quot;
-&quot;P1C3aSijtWZfNhpSSENmUt+ikk/TGGC+4+peGXEFv54cbGhyJW+ze3PJbb0S/5tB\n&quot;
-&quot;Ml706H7FC6NMZNFOvCYIZfsZl1h44TO/7Wg+sSdFb8Di7Jdp91zT91ECAwEAAaOC\n&quot;
-&quot;AdIwggHOMB0GA1UdDgQWBBT8ilC6nrklWntVhU+VAGOP6VhrQzASBgNVHRMBAf8E\n&quot;
-&quot;CDAGAQH/AgEAMD0GA1UdIAQ2MDQwMgYEVR0gADAqMCgGCCsGAQUFBwIBFhxodHRw\n&quot;
-&quot;czovL3d3dy52ZXJpc2lnbi5jb20vY3BzMD0GA1UdHwQ2MDQwMqAwoC6GLGh0dHA6\n&quot;
-&quot;Ly9FVlNlY3VyZS1jcmwudmVyaXNpZ24uY29tL3BjYTMtZzUuY3JsMA4GA1UdDwEB\n&quot;
-&quot;/wQEAwIBBjARBglghkgBhvhCAQEEBAMCAQYwbQYIKwYBBQUHAQwEYTBfoV2gWzBZ\n&quot;
-&quot;MFcwVRYJaW1hZ2UvZ2lmMCEwHzAHBgUrDgMCGgQUj+XTGoasjY5rw8+AatRIGCx7\n&quot;
-&quot;GS4wJRYjaHR0cDovL2xvZ28udmVyaXNpZ24uY29tL3ZzbG9nby5naWYwKQYDVR0R\n&quot;
-&quot;BCIwIKQeMBwxGjAYBgNVBAMTEUNsYXNzM0NBMjA0OC0xLTQ3MD0GCCsGAQUFBwEB\n&quot;
-&quot;BDEwLzAtBggrBgEFBQcwAYYhaHR0cDovL0VWU2VjdXJlLW9jc3AudmVyaXNpZ24u\n&quot;
-&quot;Y29tMB8GA1UdIwQYMBaAFH/TZafC3ey78DAJ80M5+gKvMzEzMA0GCSqGSIb3DQEB\n&quot;
-&quot;BQUAA4IBAQCWovp/5j3t1CvOtxU/wHIDX4u6FpAl98KD2Md1NGNoElMMU4l7yVYJ\n&quot;
-&quot;p8M2RE4O0GJis4b66KGbNGeNUyIXPv2s7mcuQ+JdfzOE8qJwwG6Cl8A0/SXGI3/t\n&quot;
-&quot;5rDFV0OEst4t8dD2SB8UcVeyrDHhlyQjyRNddOVG7wl8nuGZMQoIeRuPcZ8XZsg4\n&quot;
-&quot;z+6Ml7YGuXNG5NOUweVgtSV1LdlpMezNlsOjdv3odESsErlNv1HoudRETifLriDR\n&quot;
-&quot;fip8tmNHnna6l9AW5wtsbfdDbzMLKTB3+p359U64drPNGLT5IO892+bKrZvQTtKH\n&quot;
-&quot;qQ2mRHNQ3XBb7a1+Srwi1agm5MKFIA3Z\n&quot;
-&quot;-----END CERTIFICATE-----\n&quot;;
+"-----BEGIN CERTIFICATE-----\n"
+"MIIF5DCCBMygAwIBAgIQW3dZxheE4V7HJ8AylSkoazANBgkqhkiG9w0BAQUFADCB\n"
+"yjELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\n"
+"ExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTowOAYDVQQLEzEoYykgMjAwNiBWZXJp\n"
+"U2lnbiwgSW5jLiAtIEZvciBhdXRob3JpemVkIHVzZSBvbmx5MUUwQwYDVQQDEzxW\n"
+"ZXJpU2lnbiBDbGFzcyAzIFB1YmxpYyBQcmltYXJ5IENlcnRpZmljYXRpb24gQXV0\n"
+"aG9yaXR5IC0gRzUwHhcNMDYxMTA4MDAwMDAwWhcNMTYxMTA3MjM1OTU5WjCBujEL\n"
+"MAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQLExZW\n"
+"ZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2UgYXQg\n"
+"aHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykwNjE0MDIGA1UEAxMrVmVy\n"
+"aVNpZ24gQ2xhc3MgMyBFeHRlbmRlZCBWYWxpZGF0aW9uIFNTTCBDQTCCASIwDQYJ\n"
+"KoZIhvcNAQEBBQADggEPADCCAQoCggEBAJjboFXrnP0XeeOabhQdsVuYI4cWbod2\n"
+"nLU4O7WgerQHYwkZ5iqISKnnnbYwWgiXDOyq5BZpcmIjmvt6VCiYxQwtt9citsj5\n"
+"OBfH3doxRpqUFI6e7nigtyLUSVSXTeV0W5K87Gws3+fBthsaVWtmCAN/Ra+aM/EQ\n"
+"wGyZSpIkMQht3QI+YXZ4eLbtfjeubPOJ4bfh3BXMt1afgKCxBX9ONxX/ty8ejwY4\n"
+"P1C3aSijtWZfNhpSSENmUt+ikk/TGGC+4+peGXEFv54cbGhyJW+ze3PJbb0S/5tB\n"
+"Ml706H7FC6NMZNFOvCYIZfsZl1h44TO/7Wg+sSdFb8Di7Jdp91zT91ECAwEAAaOC\n"
+"AdIwggHOMB0GA1UdDgQWBBT8ilC6nrklWntVhU+VAGOP6VhrQzASBgNVHRMBAf8E\n"
+"CDAGAQH/AgEAMD0GA1UdIAQ2MDQwMgYEVR0gADAqMCgGCCsGAQUFBwIBFhxodHRw\n"
+"czovL3d3dy52ZXJpc2lnbi5jb20vY3BzMD0GA1UdHwQ2MDQwMqAwoC6GLGh0dHA6\n"
+"Ly9FVlNlY3VyZS1jcmwudmVyaXNpZ24uY29tL3BjYTMtZzUuY3JsMA4GA1UdDwEB\n"
+"/wQEAwIBBjARBglghkgBhvhCAQEEBAMCAQYwbQYIKwYBBQUHAQwEYTBfoV2gWzBZ\n"
+"MFcwVRYJaW1hZ2UvZ2lmMCEwHzAHBgUrDgMCGgQUj+XTGoasjY5rw8+AatRIGCx7\n"
+"GS4wJRYjaHR0cDovL2xvZ28udmVyaXNpZ24uY29tL3ZzbG9nby5naWYwKQYDVR0R\n"
+"BCIwIKQeMBwxGjAYBgNVBAMTEUNsYXNzM0NBMjA0OC0xLTQ3MD0GCCsGAQUFBwEB\n"
+"BDEwLzAtBggrBgEFBQcwAYYhaHR0cDovL0VWU2VjdXJlLW9jc3AudmVyaXNpZ24u\n"
+"Y29tMB8GA1UdIwQYMBaAFH/TZafC3ey78DAJ80M5+gKvMzEzMA0GCSqGSIb3DQEB\n"
+"BQUAA4IBAQCWovp/5j3t1CvOtxU/wHIDX4u6FpAl98KD2Md1NGNoElMMU4l7yVYJ\n"
+"p8M2RE4O0GJis4b66KGbNGeNUyIXPv2s7mcuQ+JdfzOE8qJwwG6Cl8A0/SXGI3/t\n"
+"5rDFV0OEst4t8dD2SB8UcVeyrDHhlyQjyRNddOVG7wl8nuGZMQoIeRuPcZ8XZsg4\n"
+"z+6Ml7YGuXNG5NOUweVgtSV1LdlpMezNlsOjdv3odESsErlNv1HoudRETifLriDR\n"
+"fip8tmNHnna6l9AW5wtsbfdDbzMLKTB3+p359U64drPNGLT5IO892+bKrZvQTtKH\n"
+"qQ2mRHNQ3XBb7a1+Srwi1agm5MKFIA3Z\n"
+"-----END CERTIFICATE-----\n";
 
 c_cert.raw_cert = (unsigned char *)ee;
 c_cert.cert_size = strlen(ee);
@@ -846,19 +846,19 @@ test_policy.extractable = true;
 
 ret = ckmc_save_cert(ca_alias, c_cert1, test_policy);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 untrustedcerts.alias = (char *)ca_alias;
 untrustedcerts.next = NULL;
 
 ret = ckmc_get_cert_chain_with_alias(&amp;c_cert, &amp;untrustedcerts, &amp;cert_chain_list);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 next=cert_chain_list;
 do {
-&nbsp;&nbsp;&nbsp;&nbsp;current = next;
-&nbsp;&nbsp;&nbsp;&nbsp;next = current-&gt;next;
+    current = next;
+    next = current-&gt;next;
 } while (next != NULL);
 
 /* Called when the list is no longer needed */
@@ -878,13 +878,13 @@ ckmc_cert_s *pcert;
    defined_media_storage_directory can be obtained
    with the storage_get_directory() function
 */
-const char *file_name = &quot;&lt;defined_media_storage_directory&gt;/ckmc_test_cert.pem&quot;;
+const char *file_name = "&lt;defined_media_storage_directory&gt;/ckmc_test_cert.pem";
 
 ret = ckmc_load_cert_from_file(file_name, &amp;pcert);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
-dlog_print(DLOG_INFO, LOG_TAG, &quot;cert size =%d\n&quot;, pcert-&gt;cert_size);
+dlog_print(DLOG_INFO, LOG_TAG, "cert size =%d\n", pcert-&gt;cert_size);
 
 ckmc_cert_free(pcert); /* Called when the certificate is no longer needed */
 </pre></li>
@@ -898,25 +898,25 @@ ckmc_pkcs12_s *ppkcs12 = NULL;
    defined_media_storage_directory can be obtained
    with the storage_get_directory() function
 */
-const char *p12file = &quot;&lt;defined_media_storage_directory&gt;/ckmc_p12_test.p12&quot;;
-const char *password = &quot;password&quot;; /* PKCS#12 file can be protected by a password */
+const char *p12file = "&lt;defined_media_storage_directory&gt;/ckmc_p12_test.p12";
+const char *password = "password"; /* PKCS#12 file can be protected by a password */
 
 ret = ckmc_pkcs12_load(p12file, password, &amp;ppkcs12);
 if (CKMC_ERROR_NONE != ret || ppkcs12 == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (ppkcs12-&gt;priv_key != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Check a private key */
+    /* Check a private key */
 
 if (ppkcs12-&gt;cert != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Check a certificate */
+    /* Check a certificate */
 
 int cnt = 0;
 ckmc_cert_list_s *tmp_list = ppkcs12-&gt;ca_chain;
 while (tmp_list!= NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Check a certificate list */
+    /* Check a certificate list */
 
-&nbsp;&nbsp;&nbsp;&nbsp;tmp_list = tmp_list-&gt;next;
+    tmp_list = tmp_list-&gt;next;
 }
 ckmc_pkcs12_free(ppkcs12); /* Called when the pkcs12 data is no longer needed */
 </pre>
@@ -924,7 +924,7 @@ ckmc_pkcs12_free(ppkcs12); /* Called when the pkcs12 data is no longer needed */
 
 <h2 id="access" name="access">Implementing Access Control</h2>
 
-<p>To implement access control rules for each individual client&#39;s data, certificates, and keys:</p>
+<p>To implement access control rules for each individual client's data, certificates, and keys:</p>
 
 <ol><li><p>Store test data:</p>
 <pre class="prettyprint">
@@ -932,10 +932,10 @@ int ret = CKMC_ERROR_NONE;
 
 char* password = NULL;
 ckmc_raw_buffer_s test_data;
-const char *alias = &quot;targetData&quot;;
+const char *alias = "targetData";
 ckmc_policy_s test_policy;
 
-const char *char_bin_data = &quot;Access control test Data&quot;;
+const char *char_bin_data = "Access control test Data";
 
 test_policy.password = password;
 test_policy.extractable = true;
@@ -944,44 +944,44 @@ test_data.data = (unsigned char *)char_bin_data;
 test_data.size = strlen(char_bin_data);
 ret = ckmc_save_data(alias, test_data, test_policy);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li><p>Set a rule to allow access:</p>
 <pre class="prettyprint">
 int ret = CKMC_ERROR_NONE;
 
-const char *target1 = &quot;accessor-allow-1&quot;;
-const char *target2 = &quot;accessor-allow-2&quot;;
-const char *alias = &quot;targetData&quot;;
+const char *target1 = "accessor-allow-1";
+const char *target2 = "accessor-allow-2";
+const char *alias = "targetData";
 
 /* Only allow reading data */
 ret = ckmc_set_permission(alias, target1, CKMC_PERMISSION_READ);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Allow reading and deleting data */
 ret = ckmc_set_permission(alias, target2, CKMC_PERMISSION_READ | CKMC_PERMISSION_REMOVE);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 
 <li><p>Set a rule to deny access:</p>
 <pre class="prettyprint">
 int ret = CKMC_ERROR_NONE;
 
-const char *target = &quot;denied-accessor&quot;;
-const char *alias = &quot;targetData&quot;;
+const char *target = "denied-accessor";
+const char *alias = "targetData";
 
 /* Allow the target user to a read (alias) */
 ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_READ);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Deny the target user access to data (alias) */
 ret = ckmc_set_permission(alias, target, CKMC_PERMISSION_NONE);
 if (CKMC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre></li>
 </ol>
 
diff --git a/org.tizen.guides/html/native/security/security_cover_n.htm b/org.tizen.guides/html/native/security/security_cover_n.htm
index 739c50a..b6839df 100644 (file)
--- a/org.tizen.guides/html/native/security/security_cover_n.htm
+++ b/org.tizen.guides/html/native/security/security_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Security</title>  
+       <title>Security</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Security</h1>
@@ -58,7 +58,7 @@
 </ul>
 
 <p>For information on how to minimize any accidental introduction of security vulnerabilities in your application, see <a href="security_tip.htm">Security Tips</a> (<strong>in mobile applications only</strong>).</p>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/security/security_tip.htm b/org.tizen.guides/html/native/security/security_tip.htm
index 70c6c03..673b8ea 100644 (file)
--- a/org.tizen.guides/html/native/security/security_tip.htm
+++ b/org.tizen.guides/html/native/security/security_tip.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Security Tips</title>  
+       <title>Security Tips</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -36,10 +36,10 @@
             <li><a href="../../../../org.tizen.guides/html/native/security/secure_key_n.htm">Secure Key Management</a></li>
                        <li><a href="../../../../org.tizen.guides/html/native/app_management/message_port_n.htm">Message Port</a></li>
                        <li><a href="../../../../org.tizen.guides/html/native/app_management/data_control_n.htm">Data Control</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Security Tips</h1>
 
 <p>When you design an application or service, you must minimize any accidental introduction of security vulnerabilities. The following practices aim to reduce the likelihood of security vulnerabilities caused by programming in the Tizen platform.</p>
@@ -66,7 +66,7 @@
 <p>A client can specify simple access rules when storing data in the key manager:</p>
 <ul>
 <li>If the data is tagged as exportable, the key manager returns the raw value of the data.</li>
-<li>If the data is tagged as non-exportable, the key manager does not return its raw value. 
+<li>If the data is tagged as non-exportable, the key manager does not return its raw value.
 <p>In that case, the key manager provides secure cryptographic operations for non-exportable keys without revealing key values to clients.</p></li></ul>
 <p>All the data in the key manager is protected by an internal key. In addition, a client can encrypt its data using its own password. If a client provides a password when storing data, the data is encrypted with that password. To obtain the data from the key manager later on, the same password must be provided. The additional password provides protection in case the device is lost.</p>
 <p>When storing data:</p>
@@ -89,7 +89,7 @@
 <p>To determine whether an API requires privileges to be used, see the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p></li>
 </ul>
 
-<p>In Tizen 3.0, the platform uses core privileges for access control, but the concept of the application privilege declaration is not changed. As in Tizen 2.X, 
+<p>In Tizen 3.0, the platform uses core privileges for access control, but the concept of the application privilege declaration is not changed. As in Tizen 2.X,
 the application can declare required privileges in the manifest file according to their own application type.</p>
 
 <h3>Privacy-related Privileges</h3>
diff --git a/org.tizen.guides/html/native/security/yaca_n.htm b/org.tizen.guides/html/native/security/yaca_n.htm
index 9140f21..a7e9b6c 100644 (file)
--- a/org.tizen.guides/html/native/security/yaca_n.htm
+++ b/org.tizen.guides/html/native/security/yaca_n.htm
@@ -24,7 +24,7 @@
                <ul class="toc">
                        <li>Tizen 3.0 and Higher for Mobile</li>
                        <li>Tizen 3.0 and Higher for Wearable</li>
-               </ul>   
+               </ul>
         <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#prerequisites">Prerequisites</a></li>
@@ -33,7 +33,7 @@
                        <li><a href="#messagedigest">Using Digest Messages</a></li>
                        <li><a href="#symmetric">Managing Symmetric Encryption</a></li>
                        <li><a href="#asymmetric">Managing Asymmetric Encryption</a></li>
-               </ul>           
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__YACA__MODULE.html">YACA API for Mobile Native</a></li>
@@ -92,12 +92,12 @@
 </pre></li>
 <li>Initialize and clean up the library:
 <ol>
-<li>Initialize the library. 
+<li>Initialize the library.
 <p>This function must be called in each thread that uses YACA.</p>
 <pre class="prettyprint">
 int ret = yaca_initialize();
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 </pre>
 </li>
 <li>Clean up the library when no longer needed.
@@ -122,38 +122,38 @@ yaca_key_h key = YACA_KEY_NULL;
 
 ret = yaca_key_generate(YACA_KEY_TYPE_SYMMETRIC, YACA_KEY_LENGTH_256BIT, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 
 ret = yaca_key_generate(YACA_KEY_TYPE_DES, YACA_KEY_LENGTH_192BIT, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 
 ret = yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_1024BIT, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 
 ret = yaca_key_generate(YACA_KEY_TYPE_DSA_PRIV, YACA_KEY_LENGTH_512BIT, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 
 ret = yaca_key_generate(YACA_KEY_TYPE_DH_PRIV,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;YACA_KEY_LENGTH_DH_GENERATOR_2 | 333, &amp;key);
+                        YACA_KEY_LENGTH_DH_GENERATOR_2 | 333, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 
 ret = yaca_key_generate(YACA_KEY_TYPE_DH_PRIV, YACA_KEY_LENGTH_DH_RFC_2048_224, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 
 ret = yaca_key_generate(YACA_KEY_TYPE_EC_PRIV, YACA_KEY_LENGTH_EC_SECP384R1, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 </pre>
 </li>
@@ -165,42 +165,42 @@ yaca_key_h key_params = YACA_KEY_NULL;
 
 ret = yaca_key_generate(YACA_KEY_TYPE_DSA_PARAMS, YACA_KEY_LENGTH_512BIT, &amp;key_params);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = yaca_key_generate_from_parameters(key_params, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 yaca_key_destroy(key_params);
 
 ret = yaca_key_generate(YACA_KEY_TYPE_DH_PARAMS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;YACA_KEY_LENGTH_DH_GENERATOR_5 | YACA_KEY_LENGTH_2048BIT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;key_params);
+                        YACA_KEY_LENGTH_DH_GENERATOR_5 | YACA_KEY_LENGTH_2048BIT,
+                        &amp;key_params);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 ret = yaca_key_generate_from_parameters(key_params, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;goto error;
+    goto error;
 yaca_key_destroy(key);
 yaca_key_destroy(key_params);
 
 ret = yaca_key_generate(YACA_KEY_TYPE_DH_PARAMS, YACA_KEY_LENGTH_DH_RFC_2048_256,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;key_params);
+                        &amp;key_params);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 ret = yaca_key_generate_from_parameters(key_params, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 yaca_key_destroy(key_params);
 
 ret = yaca_key_generate(YACA_KEY_TYPE_EC_PARAMS, YACA_KEY_LENGTH_EC_PRIME256V1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;key_params);
+                        &amp;key_params);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 ret = yaca_key_generate_from_parameters(key_params, &amp;key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 yaca_key_destroy(key);
 yaca_key_destroy(key_params);
 </pre>
@@ -220,13 +220,13 @@ yaca_key_h b64_imported = YACA_KEY_NULL;
 
 /* BASE64 */
 ret = yaca_key_export(sym, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_BASE64,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, &amp;b64, &amp;b64_len);
+                      NULL, &amp;b64, &amp;b64_len);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = yaca_key_import(YACA_KEY_TYPE_SYMMETRIC, NULL, b64, b64_len, &amp;b64_imported);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 yaca_free(b64);
 b64 = NULL;
@@ -234,12 +234,12 @@ yaca_key_destroy(b64_imported);
 
 /* RAW */
 ret = yaca_key_export(sym, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_RAW,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, &amp;raw, &amp;raw_len);
+                      NULL, &amp;raw, &amp;raw_len);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 ret = yaca_key_import(YACA_KEY_TYPE_SYMMETRIC, NULL, raw, raw_len, &amp;raw_imported);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 yaca_free(raw);
 raw = NULL;
@@ -268,13 +268,13 @@ yaca_key_h der_pub_imported = YACA_KEY_NULL;
 
 /* PEM private */
 ret = yaca_key_export(priv, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_PEM,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, &amp;pem_prv, &amp;pem_prv_len);
+                      NULL, &amp;pem_prv, &amp;pem_prv_len);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = yaca_key_import(priv_type, NULL, pem_prv, pem_prv_len, &amp;pem_prv_imported);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 yaca_free(pem_prv);
 pem_prv = NULL;
@@ -282,12 +282,12 @@ yaca_key_destroy(pem_prv_imported);
 
 /* DER private */
 ret = yaca_key_export(priv, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_DER,NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;der_prv, &amp;der_prv_len);
+                      &amp;der_prv, &amp;der_prv_len);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 ret = yaca_key_import(priv_type, NULL, der_prv, der_prv_len, &amp;der_prv_imported);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 yaca_free(der_prv);
 der_prv = NULL;
@@ -295,12 +295,12 @@ yaca_key_destroy(der_prv_imported);
 
 /* PEM public */
 ret = yaca_key_export(pub, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_PEM,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, &amp;pem_pub, &amp;pem_pub_len);
+                      NULL, &amp;pem_pub, &amp;pem_pub_len);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 ret = yaca_key_import(pub_type, NULL, pem_pub, pem_pub_len, &amp;pem_pub_imported);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 yaca_free(pem_pub);
 pem_pub = NULL;
@@ -308,12 +308,12 @@ yaca_key_destroy(pem_pub_imported);
 
 /* DER public */
 ret = yaca_key_export(pub, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_DER,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, &amp;der_pub, &amp;der_pub_len);
+                      NULL, &amp;der_pub, &amp;der_pub_len);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 ret = yaca_key_import(pub_type, NULL, der_pub, der_pub_len, &amp;der_pub_imported);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 yaca_free(der_pub);
 der_pub = NULL;
@@ -343,41 +343,41 @@ yaca_key_h iv = YACA_KEY_NULL;
 
 ret = yaca_key_extract_parameters(peer_public_key, &amp;params);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = yaca_key_generate_from_parameters(params, &amp;private_key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = yaca_key_extract_public(private_key, &amp;public_key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Derive secret */
 ret = yaca_key_derive_dh(private_key, peer_public_key, &amp;secret, &amp;secret_len);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 key_material_len = YACA_KEY_LENGTH_192BIT / 8;
 iv_material_len = YACA_KEY_LENGTH_IV_128BIT / 8;
 temp_material_len = key_material_len + iv_material_len;
 ret = yaca_key_derive_kdf(YACA_KDF_X962, YACA_DIGEST_SHA512, secret, secret_len,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, 0, temp_material_len, &amp;temp_material);
+                          NULL, 0, temp_material_len, &amp;temp_material);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 key_material = temp_material;
 iv_material = temp_material + key_material_len;
 
 ret = yaca_key_import(YACA_KEY_TYPE_SYMMETRIC, NULL, key_material,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key_material_len, &amp;aes_key);
+                      key_material_len, &amp;aes_key);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = yaca_key_import(YACA_KEY_TYPE_IV, NULL, iv_material,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iv_material_len, &amp;iv);
+                      iv_material_len, &amp;iv);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 yaca_key_destroy(private_key);
 yaca_key_destroy(public_key);
@@ -411,30 +411,30 @@ yaca_padding_e padding = YACA_PADDING_PKCS1_PSS;
 
 /* Generation */
 if (yaca_key_generate(type, YACA_KEY_LENGTH_1024BIT, &amp;prv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_key_extract_public(prv, &amp;pub) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Signing */
 if (yaca_sign_initialize(&amp;ctx, YACA_DIGEST_SHA512, prv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_context_set_property(ctx, YACA_PROPERTY_PADDING, (char*)(&amp;padding),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(padding)) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+                              sizeof(padding)) != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (yaca_sign_update(ctx, lorem4096, LOREM4096_SIZE) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_context_get_output_length(ctx, 0, &amp;signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_malloc(signature_len, (void**)&amp;signature) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_sign_finalize(ctx, signature, &amp;signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Cleanup */
 yaca_context_destroy(ctx);
@@ -442,17 +442,17 @@ ctx = YACA_CONTEXT_NULL;
 
 /* Verification */
 if (yaca_verify_initialize(&amp;ctx, YACA_DIGEST_SHA512, pub) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_context_set_property(ctx, YACA_PROPERTY_PADDING, (char*)(&amp;padding),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(padding)) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+                              sizeof(padding)) != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (yaca_verify_update(ctx, lorem4096, LOREM4096_SIZE) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_verify_finalize(ctx, signature, signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Verification failed */
+    /* Verification failed */
 
 yaca_free(signature);
 yaca_key_destroy(prv);
@@ -471,24 +471,24 @@ yaca_key_h key = YACA_KEY_NULL;
 
 /* Generation */
 if (yaca_key_generate(YACA_KEY_TYPE_SYMMETRIC, YACA_KEY_LENGTH_256BIT, &amp;key)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 /* Signing */
 if (yaca_sign_initialize_hmac(&amp;ctx, YACA_DIGEST_SHA512, key) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_sign_update(ctx, lorem4096, LOREM4096_SIZE) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_context_get_output_length(ctx, 0, &amp;signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_malloc(signature_len, (void**)&amp;signature1) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_sign_finalize(ctx, signature1, &amp;signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Cleanup */
 yaca_context_destroy(ctx);
@@ -496,22 +496,22 @@ ctx = YACA_CONTEXT_NULL;
 
 /* Verification */
 if (yaca_sign_initialize_hmac(&amp;ctx, YACA_DIGEST_SHA512, key) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_sign_update(ctx, lorem4096, LOREM4096_SIZE) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_context_get_output_length(ctx, 0, &amp;signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_malloc(signature_len, (void**)&amp;signature2) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_sign_finalize(ctx, signature2, &amp;signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_memcmp(signature1, signature2, signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* HMAC verification failed */
+    /* HMAC verification failed */
 
 yaca_free(signature1);
 yaca_free(signature2);
@@ -530,23 +530,23 @@ yaca_key_h key = YACA_KEY_NULL;
 
 /* Generation */
 if (yaca_key_generate(YACA_KEY_TYPE_SYMMETRIC, YACA_KEY_LENGTH_256BIT, &amp;key))
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Signing */
 if (yaca_sign_initialize_cmac(&amp;ctx, YACA_ENCRYPT_AES, key) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_sign_update(ctx, lorem4096, LOREM4096_SIZE))
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_context_get_output_length(ctx, 0, &amp;signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_malloc(signature_len, (void**)&amp;signature1) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_sign_finalize(ctx, signature1, &amp;signature_len))
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Cleanup */
 yaca_context_destroy(ctx);
@@ -554,22 +554,22 @@ ctx = YACA_CONTEXT_NULL;
 
 /* Verification */
 if (yaca_sign_initialize_cmac(&amp;ctx, YACA_ENCRYPT_AES, key) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_sign_update(ctx, lorem4096, LOREM4096_SIZE))
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_context_get_output_length(ctx, 0, &amp;signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_malloc(signature_len, (void**)&amp;signature2) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_sign_finalize(ctx, signature2, &amp;signature_len))
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_memcmp(signature1, signature2, signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* CMAC verification failed */
+    /* CMAC verification failed */
 
 yaca_free(signature1);
 yaca_free(signature2);
@@ -592,21 +592,21 @@ yaca_key_h pub = YACA_KEY_NULL;
 
 /* Generation */
 if (yaca_key_generate(type, YACA_KEY_LENGTH_1024BIT, &amp;prv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_key_extract_public(prv, &amp;pub) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Signing */
 if (yaca_simple_calculate_signature(YACA_DIGEST_SHA512, prv, lorem4096,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOREM4096_SIZE, &amp;signature, &amp;signature_len)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+                                    LOREM4096_SIZE, &amp;signature, &amp;signature_len)
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 /* Verification */
 if (yaca_simple_verify_signature(YACA_DIGEST_SHA512, pub, lorem4096, LOREM4096_SIZE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signature, signature_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+                                 signature, signature_len) != YACA_ERROR_NONE)
+    /* Error handling */
 
 yaca_free(signature);
 yaca_key_destroy(prv);
@@ -627,23 +627,23 @@ yaca_context_h ctx;
 
 ret = yaca_digest_initialize(&amp;ctx, YACA_DIGEST_SHA256);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 ret = yaca_digest_update(ctx, lorem1024, 1024);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 size_t digest_len;
 ret = yaca_context_get_output_length(ctx, 0, &amp;digest_len);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char digest[digest_len];
+    char digest[digest_len];
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = yaca_digest_finalize(ctx, digest, &amp;digest_len);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = yaca_digest_finalize(ctx, digest, &amp;digest_len);
+    if (ret != YACA_ERROR_NONE)
+        /* Error handling */
 }
 
 yaca_context_destroy(ctx);
@@ -656,10 +656,10 @@ char *digest;
 size_t digest_len;
 
 ret = yaca_simple_calculate_digest(YACA_DIGEST_SHA256,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lorem1024,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1024, &amp;digest, &amp;digest_len);
+                                   lorem1024,
+                                   1024, &amp;digest, &amp;digest_len);
 if (ret != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 yaca_free(digest);
 </pre>
@@ -698,78 +698,78 @@ size_t written_len;
 
 /* Key generation */
 if (yaca_key_generate(key_type, key_bit_len, &amp;key) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_encrypt_get_iv_bit_length(algo, bcm, key_bit_len, &amp;iv_bit_len)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (iv_bit_len &gt; 0 &amp;&amp; yaca_key_generate(YACA_KEY_TYPE_IV, iv_bit_len, &amp;iv)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 /* Encryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_encrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_encrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    enc_len = output_len + block_len;
+    if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = written_len;
+    enc_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_encrypt_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_encrypt_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len += written_len;
+    enc_len += written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;yaca_context_destroy(ctx);
-&nbsp;&nbsp;&nbsp;&nbsp;ctx = YACA_CONTEXT_NULL;
+    yaca_context_destroy(ctx);
+    ctx = YACA_CONTEXT_NULL;
 }
 
 /* Decryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_decrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_decrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    dec_len = output_len + block_len;
+    if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_decrypt_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_decrypt_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = written_len;
+    dec_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_decrypt_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_decrypt_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len += written_len;
+    dec_len += written_len;
 }
 
 yaca_free(dec);
@@ -810,109 +810,109 @@ size_t written_len;
 
 /* Key generation */
 if (yaca_key_generate(key_type, key_bit_len, &amp;key) != YACA_ERROR_NONE))
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* IV generation */
 if (yaca_key_generate(YACA_KEY_TYPE_IV, iv_bit_len, &amp;iv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_zalloc(aad_len, (void**)&amp;aad) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_randomize_bytes(aad, aad_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_zalloc(tag_len, (void**)&amp;tag) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Encryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_encrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_encrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Provide any AAD data */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Provide any AAD data */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    enc_len = output_len + block_len;
+    if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = written_len;
+    enc_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_encrypt_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_encrypt_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len += written_len;
+    enc_len += written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the tag length and get the tag after final encryption */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG_LEN, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void*)&amp;tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Set the tag length and get the tag after final encryption */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG_LEN,
+                                  (void*)&amp;tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &amp;tag_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &amp;tag_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dump_hex(enc, 16, &quot;Encrypted data (16 of %zu bytes): &quot;, enc_len);
+    dump_hex(enc, 16, "Encrypted data (16 of %zu bytes): ", enc_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;yaca_context_destroy(ctx);
-&nbsp;&nbsp;&nbsp;&nbsp;ctx = YACA_CONTEXT_NULL;
+    yaca_context_destroy(ctx);
+    ctx = YACA_CONTEXT_NULL;
 }
 
 /* Decryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_decrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_decrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Provide any AAD data */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Provide any AAD data */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    dec_len = output_len + block_len;
+    if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_decrypt_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_decrypt_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = written_len;
+    dec_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the expected tag value before final decryption */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Set the expected tag value before final decryption */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_decrypt_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_decrypt_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len += written_len;
+    dec_len += written_len;
 }
 
 yaca_free(enc);
@@ -955,109 +955,109 @@ size_t written_len;
 
 /* Key generation */
 if (yaca_key_generate(key_type, key_bit_len, &amp;key) != YACA_ERROR_NONE))
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* IV generation */
 if (yaca_key_generate(YACA_KEY_TYPE_IV, iv_bit_len, &amp;iv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_zalloc(aad_len, (void**)&amp;aad) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_randomize_bytes(aad, aad_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_zalloc(tag_len, (void**)&amp;tag) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Encryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_encrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_encrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Provide any AAD data */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Provide any AAD data */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    enc_len = output_len + block_len;
+    if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = written_len;
+    enc_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_encrypt_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_encrypt_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len += written_len;
+    enc_len += written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the tag length and get the tag after final encryption */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG_LEN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void*)&amp;tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Set the tag length and get the tag after final encryption */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG_LEN,
+                                  (void*)&amp;tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &amp;tag_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &amp;tag_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dump_hex(enc, 16, &quot;Encrypted data (16 of %zu bytes): &quot;, enc_len);
+    dump_hex(enc, 16, "Encrypted data (16 of %zu bytes): ", enc_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;yaca_context_destroy(ctx);
-&nbsp;&nbsp;&nbsp;&nbsp;ctx = YACA_CONTEXT_NULL;
+    yaca_context_destroy(ctx);
+    ctx = YACA_CONTEXT_NULL;
 }
 
 /* Decryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_decrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_decrypt_initialize(&amp;ctx, algo, bcm, key, iv) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Provide any AAD data */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Provide any AAD data */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    dec_len = output_len + block_len;
+    if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_decrypt_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_decrypt_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = written_len;
+    dec_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the expected tag value before final decryption */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Set the expected tag value before final decryption */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_decrypt_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_decrypt_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len += written_len;
+    dec_len += written_len;
 }
 
 yaca_free(enc);
@@ -1085,25 +1085,25 @@ size_t dec_len;
 size_t iv_bit_len;
 
 /* Key generation */
-if (yaca_key_derive_pbkdf2(&quot;foo bar&quot;, &quot;123456789&quot;, 10, 1000,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;YACA_DIGEST_SHA256, key_bit_len, &amp;key) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+if (yaca_key_derive_pbkdf2("foo bar", "123456789", 10, 1000,
+                           YACA_DIGEST_SHA256, key_bit_len, &amp;key) != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (yaca_encrypt_get_iv_bit_length(algo, bcm, key_bit_len, &amp;iv_bit_len)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (iv_bit_len &gt; 0 &amp;&amp; yaca_key_generate(YACA_KEY_TYPE_IV, iv_bit_len, &amp;iv)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (yaca_simple_encrypt(algo, bcm, key, iv, lorem4096, LOREM4096_SIZE, &amp;enc, &amp;enc_len)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (yaca_simple_decrypt(algo, bcm, key, iv, enc, enc_len, &amp;dec, &amp;dec_len)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 yaca_free(enc);
 yaca_free(dec);
@@ -1146,78 +1146,78 @@ size_t written_len;
 
 /* Key generation */
 if (yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_4096BIT, &amp;key_priv)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (yaca_key_extract_public(key_priv, &amp;key_pub) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Encryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_initialize(&amp;ctx, key_pub, algo, bcm, key_bit_len, &amp;sym_key, &amp;iv)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_seal_initialize(&amp;ctx, key_pub, algo, bcm, key_bit_len, &amp;sym_key, &amp;iv)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    enc_len = output_len + block_len;
+    if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Seal and finalize */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Seal and finalize */
+    if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = written_len;
+    enc_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_seal_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len += written_len;
+    enc_len += written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;yaca_context_destroy(ctx);
-&nbsp;&nbsp;&nbsp;&nbsp;ctx = YACA_CONTEXT_NULL;
+    yaca_context_destroy(ctx);
+    ctx = YACA_CONTEXT_NULL;
 }
 
 /* Decryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_open_initialize(&amp;ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_open_initialize(&amp;ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    dec_len = output_len + block_len;
+    if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Open and finalize */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_open_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Open and finalize */
+    if (yaca_open_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = written_len;
+    dec_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_open_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_open_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len += written_len;
+    dec_len += written_len;
 }
 
 yaca_free(dec);
@@ -1260,109 +1260,109 @@ size_t written_len;
 
 /* Key generation */
 if (yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_4096BIT, &amp;key_priv)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (yaca_key_extract_public(key_priv, &amp;key_pub) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_zalloc(aad_len, (void**)&amp;aad) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_randomize_bytes(aad, aad_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_zalloc(tag_len, (void**)&amp;tag) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Encryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_initialize(&amp;ctx, key_pub, algo, bcm, key_bit_len, &amp;sym_key, &amp;iv)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_seal_initialize(&amp;ctx, key_pub, algo, bcm, key_bit_len, &amp;sym_key, &amp;iv)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Provide any AAD data */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Provide any AAD data */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    enc_len = output_len + block_len;
+    if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = written_len;
+    enc_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_seal_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len += written_len;
+    enc_len += written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the tag length and get the tag after final encryption */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG_LEN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void*)&amp;tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Set the tag length and get the tag after final encryption */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG_LEN,
+                                  (void*)&amp;tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &amp;tag_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &amp;tag_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;yaca_context_destroy(ctx);
-&nbsp;&nbsp;&nbsp;&nbsp;ctx = YACA_CONTEXT_NULL;
+    yaca_context_destroy(ctx);
+    ctx = YACA_CONTEXT_NULL;
 }
 
 /* Decryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_open_initialize(&amp;ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_open_initialize(&amp;ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Provide any AAD data */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Provide any AAD data */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    dec_len = output_len + block_len;
+    if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_open_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_open_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the expected tag value before final decryption */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Set the expected tag value before final decryption */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = written_len;
+    dec_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_open_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_open_finalize(ctx, dec + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len += written_len;
+    dec_len += written_len;
 }
 
 yaca_free(dec);
@@ -1409,117 +1409,117 @@ size_t len;
 
 /* Key generation */
 if (yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_3072BIT, &amp;key_priv)
-&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    != YACA_ERROR_NONE)
+    /* Error handling */
 
 if (yaca_key_extract_public(key_priv, &amp;key_pub) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_zalloc(aad_len, (void**)&amp;aad) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_randomize_bytes(aad, aad_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 if (yaca_zalloc(tag_len, (void**)&amp;tag) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 
 /* Encryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_initialize(&amp;ctx, key_pub, algo, bcm, key_bit_len, &amp;sym_key, &amp;iv)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_seal_initialize(&amp;ctx, key_pub, algo, bcm, key_bit_len, &amp;sym_key, &amp;iv)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the tag length (optionally) */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_TAG_LEN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void*)&amp;tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Set the tag length (optionally) */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_TAG_LEN,
+                                  (void*)&amp;tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* The total plain text length must be passed (only needed if AAD is passed) */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_update(ctx, NULL, LOREM4096_SIZE , NULL, &amp;len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* The total plain text length must be passed (only needed if AAD is passed) */
+    if (yaca_seal_update(ctx, NULL, LOREM4096_SIZE , NULL, &amp;len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Provide any AAD data */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_AAD, aad, aad_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Provide any AAD data */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_AAD, aad, aad_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Calculate the max output: size of update + final chunks */
+    enc_len = output_len + block_len;
+    if (yaca_malloc(enc_len, (void**)&amp;enc) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &amp;written_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len = written_len;
+    enc_len = written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_seal_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    if (yaca_seal_finalize(ctx, enc + written_len, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;enc_len += written_len;
+    enc_len += written_len;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the tag after final encryption */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_property(ctx, YACA_PROPERTY_CCM_TAG, (void**)tag, &amp;tag_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Get the tag after final encryption */
+    if (yaca_context_get_property(ctx, YACA_PROPERTY_CCM_TAG, (void**)tag, &amp;tag_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;yaca_context_destroy(ctx);
-&nbsp;&nbsp;&nbsp;&nbsp;ctx = YACA_CONTEXT_NULL;
+    yaca_context_destroy(ctx);
+    ctx = YACA_CONTEXT_NULL;
 }
 
 /* Decryption */
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_open_initialize(&amp;ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the expected tag value */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_TAG, tag, tag_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* The total encrypted text length must be passed (only needed if AAD is passed) */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_open_update(ctx, NULL, enc_len , NULL, &amp;len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Provide any AAD data */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_AAD, aad, aad_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* For the update */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!= YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* For finalizing */
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the max output: size of update + final chunks */
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = output_len + block_len;
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Tag verification is done when you call the final yaca_open_update()
-&nbsp;&nbsp;&nbsp;&nbsp;   function, there is no call to the yaca_open_finalize() function
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;if (yaca_open_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;dec_len = written_len;
+    if (yaca_open_initialize(&amp;ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv)
+        != YACA_ERROR_NONE)
+        /* Error handling */
+
+    /* Set the expected tag value */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_TAG, tag, tag_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
+
+    /* The total encrypted text length must be passed (only needed if AAD is passed) */
+    if (yaca_open_update(ctx, NULL, enc_len , NULL, &amp;len) != YACA_ERROR_NONE)
+        /* Error handling */
+
+    /* Provide any AAD data */
+    if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_AAD, aad, aad_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
+
+    /* For the update */
+    if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &amp;output_len)
+        != YACA_ERROR_NONE)
+        /* Error handling */
+
+    /* For finalizing */
+    if (yaca_context_get_output_length(ctx, 0, &amp;block_len) != YACA_ERROR_NONE)
+        /* Error handling */
+
+    /* Calculate the max output: size of update + final chunks */
+    dec_len = output_len + block_len;
+    if (yaca_malloc(dec_len, (void**)&amp;dec) != YACA_ERROR_NONE)
+        /* Error handling */
+
+    /*
+       Tag verification is done when you call the final yaca_open_update()
+       function, there is no call to the yaca_open_finalize() function
+    */
+    if (yaca_open_update(ctx, enc, enc_len, dec, &amp;written_len) != YACA_ERROR_NONE)
+        /* Error handling */
+
+    dec_len = written_len;
 }
 
 yaca_free(dec);
diff --git a/org.tizen.guides/html/native/text_input/input_method_n.htm b/org.tizen.guides/html/native/text_input/input_method_n.htm
index 4cc07b2..cc77f7c 100644 (file)
--- a/org.tizen.guides/html/native/text_input/input_method_n.htm
+++ b/org.tizen.guides/html/native/text_input/input_method_n.htm
@@ -37,7 +37,7 @@
                                        <li><a href="#list">Showing the IME List</a></li>
                                        <li><a href="#selector">Showing the IME Selector</a></li>
                                        <li><a href="#enable">Checking the IME State</a></li>
-                               </ul>   
+                               </ul>
                  </li>
                </ul>
         <p class="toc-title">Related Info</p>
@@ -50,14 +50,14 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
- 
+
 <h1>Input Method</h1>
 
 <p>The input method editor (IME) is an input panel (keyboard) that lets the user input text and the platform receive the entered data. The user can <a href="#manager">select an IME as their default keyboard in the device Settings application</a>.</p>
 
 <p>You can create a Tizen native IME application that provides a new IME. You can start the IME application life-cycle, interact with the current IME UI state, and retrieve attributes and events.</p>
-  
-<p>The main features of the Input Method API include:</p>  
+
+<p>The main features of the Input Method API include:</p>
 
 <ul>
 <li>Managing the IME life-cycle
@@ -92,7 +92,7 @@
 <p>The Input Method Manager (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">wearable</a> applications) is a module used to manage the installed IMEs. You can use it to open the installed IME list or selector menu after your IME application is installed, and guide the user to select the installed IME:</p>
 
 <ul>
-<li>Showing the IME list 
+<li>Showing the IME list
 <p>You can <a href="#list">request the installed IME list menu</a> to be opened. If a new IME has been installed, the user can see its name in the IME list, and can use the toggle button to enable the keyboard they want. All keyboards enabled in the IME list are shown in the IME selector to allow the user to select them as the default keyboard.</p>
                        <p align="center"><strong>Figure: IME list</strong></p>
                        <p align="center"><img alt="IME list" src="../../images/ime_list.png" /></p>
@@ -115,7 +115,7 @@
 <p>To use the Input Method Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>tizen-manifest.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/imemanager&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/imemanager&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 </li>
@@ -155,7 +155,7 @@ int ime_run(ime_callback_s *basic_cb, void *user_data);
 <ol type="a">
 <li>
 <p>You must register the <code>create()</code>, <code>terminate()</code>, <code>show()</code>, and <code>hide()</code> callbacks.</p>
-<p>Add the callbacks to the <code>ime_callback_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structime__callback__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structime__callback__s.html">wearable</a> applications), and pass the structure as a parameter to the <code>ime_run()</code> function:</p> 
+<p>Add the callbacks to the <code>ime_callback_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structime__callback__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structime__callback__s.html">wearable</a> applications), and pass the structure as a parameter to the <code>ime_run()</code> function:</p>
 
 <pre class="prettyprint">
 static void create(void *user_data);
@@ -166,14 +166,14 @@ static void hide(int context_id, void *user_data);
 void
 ime_app_main(int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ime_callback_s basic_callback = {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;create, /* When the input panel is created */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;terminate, /* When the input panel is terminated */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;show, /* When the input panel is shown */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hide, /* When the input panel is hidden */
-&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;ime_run(&amp;basic_callback, NULL);
+    ime_callback_s basic_callback = {
+        create, /* When the input panel is created */
+        terminate, /* When the input panel is terminated */
+        show, /* When the input panel is shown */
+        hide, /* When the input panel is hidden */
+    };
+
+    ime_run(&amp;basic_callback, NULL);
 }
 </pre>
 </li>
@@ -182,59 +182,59 @@ ime_app_main(int argc, char **argv)
 static void
 create(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int portrait_w, portrait_h, landscape_w, landscape_h;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ime_win = ime_get_main_window();
+    int portrait_w, portrait_h, landscape_w, landscape_h;
+    Evas_Object *ime_win = ime_get_main_window();
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Update IME size information */
-&nbsp;&nbsp;&nbsp;&nbsp;ime_set_size(portrait_w, portrait_h, landscape_w, landscape_h);
+    /* Update IME size information */
+    ime_set_size(portrait_w, portrait_h, landscape_w, landscape_h);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create or initialize resources */
+    /* Create or initialize resources */
 }
 
 static void
 terminate(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the resources */
+    /* Release the resources */
 }
 
 static void
 show(int context_id, ime_context_h context, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_IMF_Input_Panel_Layout layout;
-&nbsp;&nbsp;&nbsp;&nbsp;ime_layout_variation_e layout_variation;
-&nbsp;&nbsp;&nbsp;&nbsp;int cursor_pos;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_IMF_Autocapital_Type autocapital_type;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_IMF_Input_Panel_Return_Key_Type return_key_type;
-&nbsp;&nbsp;&nbsp;&nbsp;bool return_key_state, prediction_mode, password_mode;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_IMF_Input_Hints input_hint;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_IMF_BiDi_Direction bidi;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_IMF_Input_Panel_Lang language;
-
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ime_win = ime_get_main_window();
-
-&nbsp;&nbsp;&nbsp;&nbsp;ime_context_get_layout(context, &amp;layout);
-&nbsp;&nbsp;&nbsp;&nbsp;ime_context_get_layout_variation(context, &amp;layout_variation);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Draw the proper layout */
-
-&nbsp;&nbsp;&nbsp;&nbsp;ime_context_get_autocapital_type(context, &amp;autocapital_type);
-&nbsp;&nbsp;&nbsp;&nbsp;ime_context_get_cursor_position(context, &amp;cursor_pos);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Draw the capital or small characters accordingly */
-
-&nbsp;&nbsp;&nbsp;&nbsp;ime_context_get_return_key_type(context, &amp;return_key_type);
-&nbsp;&nbsp;&nbsp;&nbsp;ime_context_get_return_key_state(context, &amp;return_key_state);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Draw the proper Return key */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the IME window */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ime_win);
+    Ecore_IMF_Input_Panel_Layout layout;
+    ime_layout_variation_e layout_variation;
+    int cursor_pos;
+    Ecore_IMF_Autocapital_Type autocapital_type;
+    Ecore_IMF_Input_Panel_Return_Key_Type return_key_type;
+    bool return_key_state, prediction_mode, password_mode;
+    Ecore_IMF_Input_Hints input_hint;
+    Ecore_IMF_BiDi_Direction bidi;
+    Ecore_IMF_Input_Panel_Lang language;
+
+    Evas_Object *ime_win = ime_get_main_window();
+
+    ime_context_get_layout(context, &amp;layout);
+    ime_context_get_layout_variation(context, &amp;layout_variation);
+    /* Draw the proper layout */
+
+    ime_context_get_autocapital_type(context, &amp;autocapital_type);
+    ime_context_get_cursor_position(context, &amp;cursor_pos);
+    /* Draw the capital or small characters accordingly */
+
+    ime_context_get_return_key_type(context, &amp;return_key_type);
+    ime_context_get_return_key_state(context, &amp;return_key_state);
+    /* Draw the proper Return key */
+
+    /* Show the IME window */
+    evas_object_show(ime_win);
 }
 
 static void
 hide(int context_id, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ime_win = ime_get_main_window();
+    Evas_Object *ime_win = ime_get_main_window();
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Hide the IME window */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_hide(ime_win);
+    /* Hide the IME window */
+    evas_object_hide(ime_win);
 }
 </pre>
 <p>In the <code>show()</code> callback, the IME application can get the contextual information from an associated text input UI control to configure the keyboard state and look accordingly. The contextual information of each input UI control is provided through the <code>ime_context_get_XXX()</code> functions defined in the <code>inputmethod.h</code> header file.</p>
@@ -245,7 +245,7 @@ hide(int context_id, void *user_data)
 
 <ol type="a">
 <li>
-<p>You can register optional callbacks with the <code>ime_event_set_XXX_cb()</code> functions provided in the <code>inputmethod.h</code> header file:</p> 
+<p>You can register optional callbacks with the <code>ime_event_set_XXX_cb()</code> functions provided in the <code>inputmethod.h</code> header file:</p>
 
 <pre class="prettyprint">
 static int focus_in(int context_id, void *user_data);
@@ -255,15 +255,15 @@ static int cursor_position_updated(int cursor_pos, void *user_data);
 void
 ime_app_main(int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ime_callback_s basic_callback = {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add the mandatory callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;};
+    ime_callback_s basic_callback = {
+        /* Add the mandatory callbacks */
+    };
 
-&nbsp;&nbsp;&nbsp;&nbsp;ime_event_set_focus_in_cb(focus_in, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;ime_event_set_focus_out_cb(focus_out, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;ime_event_set_cursor_position_updated_cb(cursor_position_updated, NULL);
+    ime_event_set_focus_in_cb(focus_in, NULL);
+    ime_event_set_focus_out_cb(focus_out, NULL);
+    ime_event_set_cursor_position_updated_cb(cursor_position_updated, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ime_run(&amp;basic_callback, NULL);
+    ime_run(&amp;basic_callback, NULL);
 }
 </pre>
 </li>
@@ -275,7 +275,7 @@ ime_app_main(int argc, char **argv)
 static int
 focus_in(int context_id, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take action */
+    /* Take action */
 }
 </pre></li>
 <li>The <code>focus_out()</code> callback is triggered when an associated text input UI control in any application loses the focus. Usually, the <code>focus_out()</code> event is followed by the <code>hide()</code> event.
@@ -284,7 +284,7 @@ focus_in(int context_id, void *user_data)
 static int
 focus_out(int context_id, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take action */
+    /* Take action */
 }
 </pre></li>
 <li>The <code>cursor_position_updated()</code> callback is triggered when the position of the cursor in an associated text input UI control changes. You can use this callback to provide, for example, auto-capitalization or predictive text features.
@@ -293,7 +293,7 @@ focus_out(int context_id, void *user_data)
 static int
 cursor_position_updated(int cursor_pos, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take action */
+    /* Take action */
 }
 </pre></li>
 </ul>
@@ -309,20 +309,20 @@ cursor_position_updated(int cursor_pos, void *user_data)
 <li>Add the necessary callbacks for reacting to the keyboard option menu opening and closing, before calling the <code>ime_run()</code> function:
 <pre class="prettyprint">
 static void option_window_created(Evas_Object *window, ime_option_window_type_e type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data);
+                                  void *user_data);
 static void option_window_destroyed(Evas_Object *window, void *user_data);
 
 void
 ime_app_main(int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ime_callback_s basic_callback = {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add the mandatory callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;};
+    ime_callback_s basic_callback = {
+        /* Add the mandatory callbacks */
+    };
 
-&nbsp;&nbsp;&nbsp;&nbsp;ime_event_set_option_window_created_cb(option_window_created, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;ime_event_set_option_window_destroyed_cb(option_window_destroyed, NULL);
+    ime_event_set_option_window_created_cb(option_window_created, NULL);
+    ime_event_set_option_window_destroyed_cb(option_window_destroyed, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ime_run(&amp;basic_callback, NULL);
+    ime_run(&amp;basic_callback, NULL);
 }
 </pre>
 </li>
@@ -333,12 +333,12 @@ ime_app_main(int argc, char **argv)
 <pre class="prettyprint">
 static void
 option_window_created(Evas_Object *window, ime_option_window_type_e type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *user_data)
+                      void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the option window */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Draw the content to the given window object */
+    /* Create the option window */
+    /* Draw the content to the given window object */
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(window);
+    evas_object_show(window);
 }
 </pre>
 </li>
@@ -350,8 +350,8 @@ option_window_created(Evas_Object *window, ime_option_window_type_e type,
 static void
 _clicked(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Open the IME option menu window */
-&nbsp;&nbsp;&nbsp;&nbsp;ime_create_option_window();
+    /* Open the IME option menu window */
+    ime_create_option_window();
 }
 </pre>
 <p>The <code>ime_create_option_window()</code> function call triggers the <code>option_window_created()</code> callback, in which you can draw the option menu content on the given window.</p>
@@ -362,24 +362,24 @@ _clicked(void *data, Evas_Object *obj, void *event_info)
 static void
 option_window_destroyed(Evas_Object *window, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the option window */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release the resources */
+    /* Destroy the option window */
+    /* Release the resources */
 }
 </pre>
 </li>
 </ol>
- 
+
       <h2 id="list" name="list">Showing the IME List</h2>
-         
+
 <p>To launch the IME list menu to show the installed IMEs, use the <code>ime_manager_show_ime_list()</code> function:</p>
 
 <pre class="prettyprint">
 void
 show_ime_list()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = ime_manager_show_ime_list();
-&nbsp;&nbsp;&nbsp;&nbsp;if (IME_MANAGER_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret = ime_manager_show_ime_list();
+    if (IME_MANAGER_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
@@ -387,16 +387,16 @@ show_ime_list()
 
 
       <h2 id="selector" name="selector">Showing the IME Selector</h2>
-         
+
 <p>To launch the IME selector menu to allow the user to select the default keyboard, use the <code>ime_manager_show_ime_selector()</code> function:</p>
 
 <pre class="prettyprint">
 void
 show_ime_selector()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = ime_manager_show_ime_selector();
-&nbsp;&nbsp;&nbsp;&nbsp;if (IME_MANAGER_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret = ime_manager_show_ime_selector();
+    if (IME_MANAGER_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
@@ -404,7 +404,7 @@ show_ime_selector()
 
 
       <h2 id="enable" name="enable">Checking the IME State</h2>
-         
+
 <p>To check the current default keyboard or whether a specific IME is enabled, or to get the number of enabled (usable) IMEs:</p>
 
 <ul>
@@ -414,12 +414,12 @@ show_ime_selector()
 boolean
 is_ime_enabled(const char *app_id)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;boolean enabled = false;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = ime_manager_is_ime_enabled(app_id, &amp;enabled);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IME_MANAGER_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    boolean enabled = false;
+    int ret = ime_manager_is_ime_enabled(app_id, &amp;enabled);
+    if (IME_MANAGER_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return enabled;
+    return enabled;
 }
 </pre>
 
@@ -431,13 +431,13 @@ is_ime_enabled(const char *app_id)
 void
 get_active_ime()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *app_id = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = ime_manager_get_active_ime(&amp;app_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (IME_MANAGER_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take action */
+    char *app_id = NULL;
+    int ret = ime_manager_get_active_ime(&amp;app_id);
+    if (IME_MANAGER_ERROR_NONE != ret)
+        /* Error handling */
+    /* Take action */
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(app_id);
+    free(app_id);
 }
 </pre>
 
@@ -450,22 +450,22 @@ get_active_ime()
 int
 get_enabled_ime_count()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int count = ime_manager_get_enabled_ime_count();
-&nbsp;&nbsp;&nbsp;&nbsp;if (count == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (get_last_result() != IME_MANAGER_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;/* Take action */
-
-&nbsp;&nbsp;&nbsp;return count;
+    int count = ime_manager_get_enabled_ime_count();
+    if (count == 0) {
+        if (get_last_result() != IME_MANAGER_ERROR_NONE) {
+            /* Error handling */
+        }
+    }
+    /* Take action */
+
+   return count;
 }
 </pre>
 
 <p>If the function is successful, it returns the number of enabled IMEs. Otherwise, 0.</p>
 </li>
 </ul>
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 
@@ -473,9 +473,9 @@ get_enabled_ime_count()
 
 <a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
 
-<div id="footer"> 
+<div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/text_input/stt_n.htm b/org.tizen.guides/html/native/text_input/stt_n.htm
index 127f030..1c36d25 100644 (file)
--- a/org.tizen.guides/html/native/text_input/stt_n.htm
+++ b/org.tizen.guides/html/native/text_input/stt_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Speech-to-text</title>  
+       <title>Speech-to-text</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -45,10 +45,10 @@
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">STT API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Speech-to-text</h1> 
+<h1>Speech-to-text</h1>
 
 <p>The STT (speech-to-text) features enable recognizing sound data recorded by the user and sending the result as text.</p>
 <p>When your application creates a handle and prepares the STT service by the API, the STT daemon is invoked and connected for background work. This daemon and your application communicate as the server and the client.</p>
@@ -89,10 +89,10 @@
 </ul>
 
 <p>The STT life-cycle is described in the following figure.</p>
- 
-   <p align="center"><strong>Figure: STT life-cycle</strong></p> 
+
+   <p align="center"><strong>Figure: STT life-cycle</strong></p>
   <p align="center"><img src="../../images/stt_lifecycle.png" alt="STT life-cycle" /></p>
-  
+
 <h2 id="parameter_stt" name="parameter_stt">STT Parameters</h2>
 <p>You can set the following parameters about the STT:</p>
 <ul>
@@ -102,7 +102,7 @@
 <p>The private data is a setting parameter for applying keys provided by the STT engine. Using the <code>stt_set_private_data()</code> function, you can set the private data as the corresponding key of the STT engine.</p></li>
 </ul>
 
-  
+
 <h2 id="info_stt" name="info_stt">STT Information Retrieval</h2>
 <p>You can get the following information about the STT:</p>
 <ul>
@@ -125,10 +125,10 @@
 #include &lt;stt.h&gt;
 </pre>
 </li>
-<li><p>To use the STT library, create an STT handle.</p> 
+<li><p>To use the STT library, create an STT handle.</p>
 <p>The STT handle is used in other STT functions as a parameter. After the handle creation, the STT state changes to <code>STT_STATE_CREATED</code>.</p>
 
-         
+
           <div class="note">
         <strong>Note</strong>
         STT is not thread-safe and depends on the ecore main loop. Implement STT within the ecore main loop and do not use it in a thread.
@@ -138,11 +138,11 @@
 void
 create_stt_handle()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;stt_h stt;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_create(&amp;stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    stt_h stt;
+    int ret;
+    ret = stt_create(&amp;stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 <li><p>When you no longer need the STT library, destroy the STT handle using the <code>stt_destroy()</code> function:</p>
@@ -152,14 +152,14 @@ create_stt_handle()
 void
 destroy_stt_handle(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_destroy(stt); /* stt is the STT handle */
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_destroy(stt); /* stt is the STT handle */
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
-         
+
           <div class="note">
         <strong>Note</strong>
         Do not use the <code>stt_destroy()</code> function in a callback. Within a callback, the <code>stt_destroy()</code> function fails and returns <code>STT_ERROR_OPERATION_FAILED</code>.
@@ -182,29 +182,29 @@ destroy_stt_handle(stt_h stt)
 /* Callback */
 void
 state_changed_cb(stt_h stt, stt_state_e previous, stt_state_e current,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                 void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_state_changed_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_state_changed_cb(stt, state_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_state_changed_cb(stt, state_changed_cb, NULL);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_state_changed_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_unset_state_changed_cb(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_unset_state_changed_cb(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -214,78 +214,78 @@ unset_state_changed_cb(stt_h stt)
 /* Callback */
 void
 default_language_changed_cb(stt_h stt, const char* previous_language,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char* current_language, void* user_data)
+                            const char* current_language, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_default_language_changed_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_default_language_changed_cb(stt, default_language_changed_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_default_language_changed_cb(stt, default_language_changed_cb,
+                                              NULL);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_default_language_changed_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_unset_default_language_changed_cb(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_unset_default_language_changed_cb(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
 
-<li>Recognition result 
+<li>Recognition result
 <p>To get the STT recognition result, set the recognition result callback.</p>
 <p>Within the callback, use the <code>stt_foreach_detailed_result()</code> function to trigger a result time callback that retrieves the time stamp of the current recognition result.</p>
 <pre class="prettyprint">
 /* Result time callback */
 bool
 result_time_cb(stt_h stt, int index, stt_result_time_event_e event,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char* text, long start_time,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;long end_time, void* user_data)
+               const char* text, long start_time,
+               long end_time, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Recognition result callback */
 void
 recognition_result_cb(stt_h stt, stt_result_event_e event, const char** data,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int data_count, const char* msg, void* user_data)
+                      int data_count, const char* msg, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* If you want to get time info of result */
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_foreach_detailed_result(stt, result_time_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* If you want to get time info of result */
+    int ret;
+    ret = stt_foreach_detailed_result(stt, result_time_cb, NULL);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
+    /* Your code */
 }
 
 /* Set */
 void
 set_recognition_result_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_recognition_result_cb(stt, recognition_result_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_recognition_result_cb(stt, recognition_result_cb, NULL);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_recognition_result_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_unset_recognition_result_cb(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_unset_recognition_result_cb(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -296,30 +296,30 @@ unset_recognition_result_cb(stt_h stt)
 /* Callback */
 void
 engine_changed_cb(stt_h stt, const char* engine_id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char* language, bool support_silence, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bool need_credential, void* user_data)
+                  const char* language, bool support_silence,
+                  bool need_credential, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_engine_changed_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_engine_changed_cb(stt, engine_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_engine_changed_cb(stt, engine_changed_cb, NULL);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_engine_changed_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_unset_engine_changed_cb(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_unset_engine_changed_cb(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -331,30 +331,30 @@ unset_engine_changed_cb(stt_h stt)
 void
 error_cb(stt_h stt, stt_error_e reason, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_error_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_error_cb(stt, error_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_error_cb(stt, error_cb, NULL);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_error_cb(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_unset_error_cb(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_unset_error_cb(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
-</ul></li></ol> 
+</ul></li></ol>
 
 <h2 id="get" name="get">Getting Information</h2>
 
@@ -366,48 +366,48 @@ unset_error_cb(stt_h stt)
 void
 get_state(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;stt_state_e current_state;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_get_state(stt, &amp;current_state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    stt_state_e current_state;
+    int ret;
+    ret = stt_get_state(stt, &amp;current_state);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
 
-<li>Obtain a list of languages supported by the STT using the <code>stt_foreach_supported_languages()</code> function. 
+<li>Obtain a list of languages supported by the STT using the <code>stt_foreach_supported_languages()</code> function.
 <p>The foreach function triggers a separate callback for each supported language. As long as the callback returns <code>true</code>, the foreach function continues to loop over the supported languages.</p>
 <pre class="prettyprint">
 bool
 supported_language_cb(stt_h stt, const char* language, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return true; /* To continue to get the next supported language */
+    return true; /* To continue to get the next supported language */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false; /* To stop the loop */
+    return false; /* To stop the loop */
 }
 
 void
 get_supported_language(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_foreach_supported_languages(stt, supported_language_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_foreach_supported_languages(stt, supported_language_cb, NULL);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
 
-<li>Get the default language using the <code>stt_get_default_language()</code> function. 
+<li>Get the default language using the <code>stt_get_default_language()</code> function.
 <p>The STT recognition process works for this default language, if you do not set the language as a parameter of the <code>stt_start()</code> function.</p>
 <pre class="prettyprint">
 void
 get_default_language(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char* default_lang = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_get_default_language(stt, &amp;default_lang);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    char* default_lang = NULL;
+    ret = stt_get_default_language(stt, &amp;default_lang);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 <p>You can get a notification about the default language changes by setting a default language changed callback.</p>
@@ -418,20 +418,20 @@ get_default_language(stt_h stt)
 <pre class="prettyprint">
 bool
 supported_engine_cb(stt_h stt, const char* engine_id, const char* engine_name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                    void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return true; /* To continue to get the next supported engine */
+    return true; /* To continue to get the next supported engine */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false; /* To stop the loop */
+    return false; /* To stop the loop */
 }
 
 void
 get_supported_engine(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_foreach_supported_engines(stt, supported_engine_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_foreach_supported_engines(stt, supported_engine_cb, NULL);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -443,21 +443,21 @@ get_supported_engine(stt_h stt)
 void
 get_current_engine(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char* current_engine_id = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_get_engine(stt, &amp;current_engine_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    char* current_engine_id = NULL;
+    ret = stt_get_engine(stt, &amp;current_engine_id);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Set the engine */
 void
 set_current_engine(stt_h stt, const char* engine_id)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_engine(stt, engine_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_engine(stt, engine_id);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -468,13 +468,13 @@ set_current_engine(stt_h stt, const char* engine_id)
 void
 check_supported_recognition_type(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;bool support;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_is_recognition_type_supported(stt,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STT_RECOGNITION_TYPE_FREE_PARTIAL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;support);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    bool support;
+    ret = stt_is_recognition_type_supported(stt,
+                                            STT_RECOGNITION_TYPE_FREE_PARTIAL,
+                                            &amp;support);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -485,25 +485,25 @@ check_supported_recognition_type(stt_h stt)
 void
 error_cb(stt_h stt, stt_error_e reason, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char * err_msg = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_get_error_message(stt, &amp;err_msg);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL != err_msg) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Memory release */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(err_msg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err_msg = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret;
+    char * err_msg = NULL;
+    ret = stt_get_error_message(stt, &amp;err_msg);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
+    if (NULL != err_msg) {
+        /* Memory release */
+        free(err_msg);
+        err_msg = NULL;
+    }
 }
 
 void
 get_error_message(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_error_cb(stt, error_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_error_cb(stt, error_cb, NULL);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -521,14 +521,14 @@ get_error_message(stt_h stt)
 void
 prepare_for_stt(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_prepare(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_prepare(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
-                         
+
        <div class="note">
         <strong>Note</strong>
         If you get the error callback after calling the <code>stt_prepare()</code> function, STT is not available.
@@ -541,10 +541,10 @@ prepare_for_stt(stt_h stt)
 void
 unprepared_for_stt(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_unprepare(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_unprepare(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -560,10 +560,10 @@ unprepared_for_stt(stt_h stt)
 void
 set_credential(stt_h stt, const char* credential)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_credential(stt, credential);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_credential(stt, credential);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -580,19 +580,19 @@ set_credential(stt_h stt, const char* credential)
 void
 set_private_data(stt_h stt, const char* key, const char* data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_private_data(stt, key, data);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_private_data(stt, key, data);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 get_private_data(stt_h stt, const char* key, char** data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_get_private_data(stt, key, data);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_get_private_data(stt, key, data);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -610,11 +610,11 @@ get_private_data(stt_h stt, const char* key, char** data)
 void
 set_silence_detection(stt_h stt, stt_option_silence_detection_e type)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Default type is STT_OPTION_SILENCE_DETECTION_AUTO */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_silence_detection(stt, type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    /* Default type is STT_OPTION_SILENCE_DETECTION_AUTO */
+    ret = stt_set_silence_detection(stt, type);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -622,7 +622,7 @@ set_silence_detection(stt_h stt, stt_option_silence_detection_e type)
 <li>Set or unset the start sound.
 <p>To play a sound before the STT recognition starts, call the <code>stt_set_start_sound()</code> function in the <code>STT_STATE_READY</code> state.</p>
 
-         
+
           <div class="note">
         <strong>Note</strong>
         The sound file path must be a full path. Only WAV format sound files are supported.
@@ -632,19 +632,19 @@ set_silence_detection(stt_h stt, stt_option_silence_detection_e type)
 void
 set_start_sound(stt_h stt, const char* filename)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_start_sound(stt, filename);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_start_sound(stt, filename);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 unset_start_sound(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_unset_start_sound(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_unset_start_sound(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -656,25 +656,25 @@ unset_start_sound(stt_h stt)
         <strong>Note</strong>
         The sound file path must be a full path. Only WAV format sound files are supported.
     </div>
-         
-         
+
+
 <pre class="prettyprint">
 void
 set_stop_sound(stt_h stt, const char* filename)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_set_stop_sound(stt, filename);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_set_stop_sound(stt, filename);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 unset_stop_sound(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_unset_stop_sound(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_unset_stop_sound(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -684,7 +684,7 @@ unset_stop_sound(stt_h stt)
                <li><p>To start recording, use the <code>stt_start()</code> function.</p>
                <p>The connected STT daemon starts recording, and the state is changed to <code>STT_STATE_RECORDING</code>.</p>
 
-         
+
           <div class="note">
         <strong>Note</strong>
         If the <code>stt_start()</code> function fails, check the error code and take appropriate action.
@@ -695,10 +695,10 @@ unset_stop_sound(stt_h stt)
 void
 start(stt_h stt, const char* language, const char* type)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_start(stt, language, type); /* Default language is NULL */
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_start(stt, language, type); /* Default language is NULL */
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -709,11 +709,11 @@ start(stt_h stt, const char* language, const char* type)
 void
 get_volume(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;float current_volume;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_get_recording_volume(stt, &amp;current_volume);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    float current_volume;
+    ret = stt_get_recording_volume(stt, &amp;current_volume);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -724,10 +724,10 @@ get_volume(stt_h stt)
 void
 stop(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_stop(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (STT_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_stop(stt);
+    if (STT_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -738,17 +738,17 @@ stop(stt_h stt)
 void
 cancel(stt_h stt)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = stt_cancel(stt);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_STATIC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = stt_cancel(stt);
+    if (VC_STATIC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
 </ul>
 </li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/text_input/text_input_cover_n.htm b/org.tizen.guides/html/native/text_input/text_input_cover_n.htm
index 607e015..8c20ba1 100644 (file)
--- a/org.tizen.guides/html/native/text_input/text_input_cover_n.htm
+++ b/org.tizen.guides/html/native/text_input/text_input_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Text Input and Voice</title>  
+       <title>Text Input and Voice</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Text Input and Voice</h1>
@@ -53,7 +53,7 @@
 
 <p>You can allow the user to control the device through voice commands. You can register voice commands, which trigger a callback when the user speaks them. Voice commands registered for EFL-supported UI components can be used to perform component-related actions, such as button clicks.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/text_input/tts_n.htm b/org.tizen.guides/html/native/text_input/tts_n.htm
index 2ecbf85..3269737 100644 (file)
--- a/org.tizen.guides/html/native/text_input/tts_n.htm
+++ b/org.tizen.guides/html/native/text_input/tts_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Text-to-speech</title>  
+       <title>Text-to-speech</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -52,10 +52,10 @@
                        <li><a href="https://developer.tizen.org/development/sample/native/UIX/TTS" target="_blank">TTS Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Text-to-speech</h1> 
+<h1>Text-to-speech</h1>
 
 <p>The TTS (text-to-speech) features include synthesizing text into sound data as utterances and playing them. It is also possible to pause and stop playing.</p>
 <p>When your application creates a handle and prepares the TTS service by the API, the TTS daemon is invoked and connected for background work. This daemon and your application communicate as the server and the client.</p>
@@ -95,10 +95,10 @@
 </ul>
 
 <p>The TTS life-cycle is described in the following figure.</p>
- 
-   <p align="center"><strong>Figure: TTS life-cycle</strong></p> 
+
+   <p align="center"><strong>Figure: TTS life-cycle</strong></p>
   <p align="center"><img src="../../images/tts_lifecycle.png" alt="TTS life-cycle" /></p>
-  
+
 <h2 id="parameter_tts" name="parameter_tts">TTS Parameters</h2>
 <p>You can set the following parameters about the TTS:</p>
 <ul>
@@ -147,11 +147,11 @@
 void
 create_tts_handle()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;tts_h tts;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_create(&amp;tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    tts_h tts;
+    int ret;
+    ret = tts_create(&amp;tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -163,10 +163,10 @@ create_tts_handle()
 void
 destroy_tts_handle(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_destroy(tts); /* tts is the TTS handle */
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_destroy(tts); /* tts is the TTS handle */
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
@@ -191,29 +191,29 @@ destroy_tts_handle(tts_h tts)
 /* Callback */
 void
 state_changed_cb(tts_h tts, tts_state_e previous, tts_state_e current,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                 void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_state_changed_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_state_changed_cb(tts, state_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_set_state_changed_cb(tts, state_changed_cb, NULL);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_state_changed_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_unset_state_changed_cb(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_unset_state_changed_cb(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -224,30 +224,30 @@ unset_state_changed_cb(tts_h tts)
 /* Callback */
 void
 default_voice_changed_cb(tts_h tts, const char* previous_language,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int previous_voice_type, const char* current_language,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int current_voice_type, void* user_data)
+                         int previous_voice_type, const char* current_language,
+                         int current_voice_type, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_default_voice_changed_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_default_voice_changed_cb(tts, default_voice_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_set_default_voice_changed_cb(tts, default_voice_changed_cb, NULL);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_default_language_changed_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_unset_default_voice_changed_cb(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_unset_default_voice_changed_cb(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -257,30 +257,30 @@ unset_default_language_changed_cb(tts_h tts)
 <pre class="prettyprint">
 /* Callback */
 void
-engine_changed_cb(tts_h tts, const char* engine_id, const char* language, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int voice_type, bool need_credential, void* user_data)
+engine_changed_cb(tts_h tts, const char* engine_id, const char* language,
+                  int voice_type, bool need_credential, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_engine_changed_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_engine_changed_cb(tts, engine_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_set_engine_changed_cb(tts, engine_changed_cb, NULL);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_engine_changed_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_unset_engine_changed_cb(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_unset_engine_changed_cb(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -292,41 +292,41 @@ unset_engine_changed_cb(tts_h tts)
 void
 utterance_started_cb(tts_h tts, int utt_id, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Completed callback */
 void
 utterance_completed_cb(tts_h tts, int utt_id, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_utterance_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_utterance_started_cb(tts, utterance_started_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_set_utterance_started_cb(tts, utterance_started_cb, NULL);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_utterance_completed_cb(tts, utterance_completed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    ret = tts_set_utterance_completed_cb(tts, utterance_completed_cb, NULL);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_utterance_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_unset_utterance_started_cb(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_unset_utterance_completed_cb(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_unset_utterance_started_cb(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
+    ret = tts_unset_utterance_completed_cb(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -338,27 +338,27 @@ unset_utterance_cb(tts_h tts)
 void
 error_cb(tts_h tts, int utt_id, tts_error_e reason, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_error_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_error_cb(tts, error_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_set_error_cb(tts, error_cb, NULL);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_error_cb(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_unset_error_cb(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_unset_error_cb(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -374,33 +374,33 @@ unset_error_cb(tts_h tts)
 void
 get_state(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;tts_state_e current_state;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_get_state(tts, &amp;current_state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    tts_state_e current_state;
+    int ret;
+    ret = tts_get_state(tts, &amp;current_state);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
 
-<li>Obtain a list of voices supported by the TTS using the <code>tts_foreach_supported_voices()</code> function. 
+<li>Obtain a list of voices supported by the TTS using the <code>tts_foreach_supported_voices()</code> function.
 <p>The foreach function triggers a separate callback for each supported voice. As long as the callback returns <code>true</code>, the foreach function continues to loop over the supported voices.</p>
 <pre class="prettyprint">
 bool
 supported_voice_cb(tts_h tts, const char* language, int voice_type, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return true; /* To continue to get the next supported language */
+    return true; /* To continue to get the next supported language */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false; /* To stop the loop */
+    return false; /* To stop the loop */
 }
 
 void
 get_supported_voice(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_foreach_supported_voices(tts, supported_language_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_foreach_supported_voices(tts, supported_language_cb, NULL);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -411,12 +411,12 @@ get_supported_voice(tts_h tts)
 void
 get_default_voice(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char* default_lang = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int default_voice_type;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_get_default_voice(tts, &amp;default_lang, &amp;default_voice_type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    char* default_lang = NULL;
+    int default_voice_type;
+    ret = tts_get_default_voice(tts, &amp;default_lang, &amp;default_voice_type);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 <p>You can get a notification about the default voice changes by setting a default voice changed callback.</p>
@@ -427,25 +427,25 @@ get_default_voice(tts_h tts)
 void
 error_cb(tts_h tts, int utt_id, tts_error_e reason, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char * err_msg = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_get_error_message(tts, &amp;err_msg);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL != err_msg) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Memory release */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(err_msg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err_msg = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int ret;
+    char * err_msg = NULL;
+    ret = tts_get_error_message(tts, &amp;err_msg);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
+    if (NULL != err_msg) {
+        /* Memory release */
+        free(err_msg);
+        err_msg = NULL;
+    }
 }
 
 void
 get_error_message(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_error_cb(tts, error_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_set_error_cb(tts, error_cb, NULL);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -453,36 +453,36 @@ get_error_message(tts_h tts)
 
 <h2 id="mode" name="mode">Getting and Setting the Mode</h2>
 
-<p>There are 3 different TTS modes available. The main difference is audio mixing with other sources. The default mode is <code>TTS_MODE_DEFAULT</code>, used for normal applications such as eBooks. If you set this mode and play your text, it can be interrupted when other sounds, such as ringtone or other TTS sounds, are played.</p> 
+<p>There are 3 different TTS modes available. The main difference is audio mixing with other sources. The default mode is <code>TTS_MODE_DEFAULT</code>, used for normal applications such as eBooks. If you set this mode and play your text, it can be interrupted when other sounds, such as ringtone or other TTS sounds, are played.</p>
+
 
-         
           <div class="note">
         <strong>Note</strong>
         The <code>TTS_MODE_NOTIFICATION</code> and <code>TTS_MODE_SCREEN_READER</code> modes are mixed with other sound sources, but they are used only for platform-specific features. Do not use them for normal applications.
     </div>
-       
+
 <p>Get and set the mode in the <code>TTS_STATE_CREATED</code> state:</p>
 
- 
+
 <pre class="prettyprint">
 void
 set_mode(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;tts_mode_e mode = TTS_MODE_DEFAULT;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_mode(tts, mode);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    tts_mode_e mode = TTS_MODE_DEFAULT;
+    ret = tts_set_mode(tts, mode);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 get_mode(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;tts_mode_e mode;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_get_mode(tts, &amp;mode);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    tts_mode_e mode;
+    ret = tts_get_mode(tts, &amp;mode);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
@@ -498,14 +498,14 @@ get_mode(tts_h tts)
 void
 prepare_for_tts(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_prepare(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_prepare(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
-         
+
           <div class="note">
         <strong>Note</strong>
         If you get the error callback after calling the <code>tts_prepare()</code> function, TTS is not available.
@@ -513,15 +513,15 @@ prepare_for_tts(tts_h tts)
        </li>
 
 <li><p>When the connection is no longer needed, use the <code>tts_unprepare()</code> function to disconnect the TTS and change the state to <code>TTS_STATE_CREATED</code>:</p>
-         
+
 <pre class="prettyprint">
 void
 unprepared_for_tts(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_unprepare(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_unprepare(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -537,10 +537,10 @@ unprepared_for_tts(tts_h tts)
 void
 set_credential(tts_h tts, const char* credential)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_credential(tts, credential);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_set_credential(tts, credential);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -557,19 +557,19 @@ set_credential(tts_h tts, const char* credential)
 void
 set_private_data(tts_h tts, const char* key, const char* data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_set_private_data(tts, key, data);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_set_private_data(tts, key, data);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 get_private_data(tts_h tts, const char* key, char** data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_get_private_data(tts, key, data);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_get_private_data(tts, key, data);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -583,7 +583,7 @@ get_private_data(tts_h tts, const char* key, char** data)
 <li>
 <p>You can request the TTS library to read your own text using the <code>tts_add_text()</code> function. The TTS library manages added text using queues, so it is possible to add several texts simultaneously. Each obtained text receives an utterance ID, which is used for synthesizing and playing the sound data.</p>
 
-         
+
           <div class="note">
         <strong>Note</strong>
         If the added text is too long, some engines need a long time for synthesis. It is recommended to only use proper length text clips.
@@ -596,16 +596,16 @@ get_private_data(tts_h tts, const char* key, char** data)
 void
 add_text(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const char* text = &quot;tutorial&quot;; /* Text for read */
-&nbsp;&nbsp;&nbsp;&nbsp;const char* language = &quot;en_US&quot;; /* Language */
-&nbsp;&nbsp;&nbsp;&nbsp;int voice_type = TTS_VOICE_TYPE_FEMALE; /* Voice type */
-&nbsp;&nbsp;&nbsp;&nbsp;int speed = TTS_SPEED_AUTO; /* Read speed */
-&nbsp;&nbsp;&nbsp;&nbsp;int utt_id; /* Utterance ID for the requested text */
+    const char* text = "tutorial"; /* Text for read */
+    const char* language = "en_US"; /* Language */
+    int voice_type = TTS_VOICE_TYPE_FEMALE; /* Voice type */
+    int speed = TTS_SPEED_AUTO; /* Read speed */
+    int utt_id; /* Utterance ID for the requested text */
 
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_add_text(tts, text, language, voice_type, speed, &amp;utt_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_add_text(tts, text, language, voice_type, speed, &amp;utt_id);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -617,11 +617,11 @@ add_text(tts_h tts)
 void
 get_maximum_text_size(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int size;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_get_max_text_size(tts, &amp;size);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    int size;
+    ret = tts_get_max_text_size(tts, &amp;size);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -636,21 +636,21 @@ get_maximum_text_size(tts_h tts)
 
 <p>If there is no text in the queue, the TTS waits for text to be added in the <code>TTS_STATE_PLAYING</code> state. In that case, when you add text, the TTS starts synthesizing and playing it immediately. The TTS state need not change to <code>TTS_STATE_READY</code> state before using the <code>tts_stop()</code> function.</p>
 
-       
+
 
  <div class="note">
         <strong>Note</strong>
         If you get the TTS state changed callback in the <code>TTS_STATE_PLAYING</code> state without a TTS function call, prepare the TTS state. The TTS state can change if other applications request TTS play, the audio session requests TTS pause, or the TTS engine changes.
-    </div>       
+    </div>
 
 <pre class="prettyprint">
 void
 start(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_play(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_play(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -661,10 +661,10 @@ start(tts_h tts)
 void
 pause(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_pause(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_pause(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -675,13 +675,13 @@ pause(tts_h tts)
 void
 stop(tts_h tts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = tts_stop(tts);
-&nbsp;&nbsp;&nbsp;&nbsp;if (TTS_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = tts_stop(tts);
+    if (TTS_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li></ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/text_input/voice_control_n.htm b/org.tizen.guides/html/native/text_input/voice_control_n.htm
index 8a79520..185bf11 100644 (file)
--- a/org.tizen.guides/html/native/text_input/voice_control_n.htm
+++ b/org.tizen.guides/html/native/text_input/voice_control_n.htm
@@ -40,7 +40,7 @@
                                        <li><a href="#command_hint">Managing Commands and Hints</a></li>
                                </ul>
                                </li>
-                       </ul>           
+                       </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control API for Mobile Native</a></li>
@@ -60,11 +60,11 @@
 <p>Voice control features allow the user to control the device through their voice. You can register <a href="#voice">general voice commands</a>, which trigger a callback when the user speaks them. You can also register <a href="#elementary">voice commands for EFL-supported UI components</a> to perform component-related actions, such as button clicks.</p>
 
 <h2 id="voice">Voice Control Service</h2>
-  
+
 <p>You can recognize the sound data recorded by the user and send the result as a predefined command using the Voice control service.</p>
-  
-<p>The main features of the Voice control API include:</p>  
-<ul>  
+
+<p>The main features of the Voice control API include:</p>
+<ul>
 <li>Managing commands
        <p>You can use the Voice control service to register commands as foreground or background type. When the user speaks a registered command, the callback function returns the recognition result.</p></li>
 <li>Retrieving information
@@ -79,8 +79,8 @@
 <li>Supported language
 <p>You can retrieve a list of supported languages to check whether the language that you want is supported.</p></li></ul>
 </li>
-</ul>  
-  
+</ul>
+
 <p>To use the voice control:</p>
 <ol><li>Set up the voice control and <a href="#callback">register callback functions</a>.
 <p>The initialization allows the voice control to distinguish your application from any other applications also using voice control. The registered callbacks allow you to receive notifications about changes in the service state, language, and recognition result, and about any errors.</p></li>
@@ -97,35 +97,35 @@
 <p>You must disconnect the voice control service and deinitialize the voice control using the <code>vc_unprepare()</code> and <code>vc_deinitialize()</code> functions.</p></li></ol>
 
 <p>The following figure illustrates the voice control life-cycle states.</p>
- 
+
                        <p align="center"><strong>Figure: Voice control (left) and Voice control service (right) life-cycle states</strong></p>
-                       <p align="center"><img alt="Voice control and Voice control service life-cycle states" src="../../images/voice_control.png" /></p> 
-  
+                       <p align="center"><img alt="Voice control and Voice control service life-cycle states" src="../../images/voice_control.png" /></p>
+
 
 <h2 id="elementary">Voice Control with Elementary Components</h2>
 
   <p>You can register voice commands for EFL-supported UI components to allow the user to interact with visible UI components inside the application using their voice. The Voice control elementary library recognizes spoken commands from registered UI components. </p>
-  
+
   <p>The following figure illustrates the application screen when the Voice control elementary features are enabled. When the screen is updated, any UI components that have a registered command and hint are shown with a tooltip (hint). When the user speaks the hint, the callback function of the action related to the UI component is executed.</p>
 <p align="center"><strong>Figure: Voice command hints on the screen</strong></p>
-                       <p align="center"><img alt="Voice command hints on the screen" src="../../images/voice_control_elm_screen.png" /></p> 
-  
+                       <p align="center"><img alt="Voice command hints on the screen" src="../../images/voice_control_elm_screen.png" /></p>
+
 <p>You have no need to consider how to recognize voice commands or start and stop the recognition process. A preloaded voice application handles the process automatically. You just need to set the command and hint on every EFL elementary component on which you want to use the voice command.</p>
 
-<p>When the user speaks a command corresponding to a visible EFL elementary component on the screen, the recognized command is sent to the Voice control elementary library from the Voice control service, and the action mapped to the component is executed. For example, if the component is a button, the action can be a button click.</p> 
- 
- 
+<p>When the user speaks a command corresponding to a visible EFL elementary component on the screen, the recognized command is sent to the Voice control elementary library from the Voice control service, and the action mapped to the component is executed. For example, if the component is a button, the action can be a button click.</p>
+
+
                        <p align="center"><strong>Figure: Voice command process</strong></p>
-                       <p align="center"><img alt="Voice command process" src="../../images/voice_control_elm.png" /></p> 
-  
+                       <p align="center"><img alt="Voice command process" src="../../images/voice_control_elm.png" /></p>
+
    <div class="note">
         <strong>Note</strong>
         The detailed implementation of the preloaded voice application (how to trigger and recognize the user speaking) can differ according to the device (mobile, wearable, or TV).
     </div>
-  
-  
-<p>The main features of the Voice control elementary API include:</p>  
-<ul>  
+
+
+<p>The main features of the Voice control elementary API include:</p>
+<ul>
 <li>Managing commands and hints
        <p>You can <a href="#command_hint">set commands and hints</a> for visible UI components on the application screen. The hint message shows the user which command must be spoken to interact with that UI component. When the user speaks a command, the command is executed.</p></li>
 <li>Retrieving information
@@ -137,11 +137,11 @@
 <li>Supported UI components, actions, and commands
 <p>You can retrieve a list of supported UI components that can be interacted with using the voice commands. You can also retrieve a list of supported actions and their commands for each UI component type.</p></li></ul>
 </li>
-</ul>  
+</ul>
 
 <p>You can <a href="#language">set and unset a callback</a> to get notifications when the system or application language changes.</p>
 
-<p>The following table lists the EFL UI components that support voice commands, and the actions supported by each component and already defined in the configuration file. Note that the label component only supports the hint without any action command.</p>  
+<p>The following table lists the EFL UI components that support voice commands, and the actions supported by each component and already defined in the configuration file. Note that the label component only supports the hint without any action command.</p>
 
 <p align="center" class="Table"><strong>Table: UI components and their actions</strong></p>
 <table>
@@ -163,7 +163,7 @@
  <td>No</td>
  <td>No</td>
  <td>No</td>
- <td>No</td> 
+ <td>No</td>
  </tr>
  <tr>
  <td>Check</td>
@@ -171,7 +171,7 @@
  <td>No</td>
  <td>No</td>
  <td>No</td>
- <td>No</td> 
+ <td>No</td>
  </tr>
  <tr>
  <td>Ctxpopup</td>
@@ -179,7 +179,7 @@
  <td>No</td>
  <td>No</td>
  <td>No</td>
- <td>No</td> 
+ <td>No</td>
  </tr>
  <tr>
  <td>Entry</td>
@@ -187,7 +187,7 @@
  <td>No</td>
  <td>No</td>
  <td>No</td>
- <td>No</td> 
+ <td>No</td>
  </tr>
  <tr>
  <td>Gengrid</td>
@@ -195,7 +195,7 @@
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
- <td>Yes</td> 
+ <td>Yes</td>
  </tr>
  <tr>
  <td>Genlist</td>
@@ -203,7 +203,7 @@
  <td>Yes</td>
  <td>Yes</td>
  <td>No</td>
- <td>No</td> 
+ <td>No</td>
  </tr>
  <tr>
  <td>Label</td>
@@ -211,7 +211,7 @@
  <td>No</td>
  <td>No</td>
  <td>No</td>
- <td>No</td> 
+ <td>No</td>
  </tr>
  <tr>
  <td>Radio</td>
@@ -219,7 +219,7 @@
  <td>No</td>
  <td>No</td>
  <td>No</td>
- <td>No</td> 
+ <td>No</td>
  </tr>
  <tr>
  <td>Slider</td>
@@ -227,7 +227,7 @@
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
- <td>Yes</td> 
+ <td>Yes</td>
  </tr>
  <tr>
  <td>Spinner</td>
@@ -235,7 +235,7 @@
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
- <td>Yes</td> 
+ <td>Yes</td>
  </tr>
  <tr>
  <td>Toolbar</td>
@@ -243,12 +243,12 @@
  <td>Yes</td>
  <td>Yes</td>
  <td>Yes</td>
- <td>Yes</td> 
- </tr> 
- </tbody></table>  
-  
-  
-  
+ <td>Yes</td>
+ </tr>
+ </tbody></table>
+
+
+
 <p>To use the voice commands:</p>
 
 <ol><li>Initialize the Voice control elementary library and create a handle.
@@ -262,7 +262,7 @@
  <div class="note">
         <strong>Note</strong>
         Set the commands and hints on visible EFL elementary UI components only. When the visible components on the screen change, the commands and hints must also change.
-    </div>  
+    </div>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
@@ -280,15 +280,15 @@
 void
 initialize_voice_control()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_initialize();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != result)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_initialize();
+    if (VC_ERROR_NONE != result)
+        /* Error handling */
 }
 </pre>
 <p>If the function call is successful, the voice control state changes to <code>VC_STATE_INITIALIZED</code>.</p>
 
-  
+
    <div class="note">
         <strong>Note</strong>
                The voice control feature is not thread-safe and depends on the ecore main loop. Implement voice control within the ecore main loop and do not use it in a thread.
@@ -302,37 +302,37 @@ initialize_voice_control()
 void
 prepare_vc()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_prepare();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_prepare();
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
-<p>The <code>vc_prepare()</code> function is asynchronous, and when the preparation succeeds, the voice control state changes from <code>VC_STATE_INITIALIZED</code> to <code>VC_STATE_READY</code>. If the <code>vc_prepare()</code> function fails, the error callback is triggered.</p> 
+<p>The <code>vc_prepare()</code> function is asynchronous, and when the preparation succeeds, the voice control state changes from <code>VC_STATE_INITIALIZED</code> to <code>VC_STATE_READY</code>. If the <code>vc_prepare()</code> function fails, the error callback is triggered.</p>
 </li>
 <li>When the voice control is no longer needed, unprepare and deinitialize it:
 <pre class="prettyprint">
 void
 unprepared_vc()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_unprepare();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_unprepare();
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 deinitialize_voice_control()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_deinitialize();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != result)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_deinitialize();
+    if (VC_ERROR_NONE != result)
+        /* Error handling */
 }
 </pre>
 
-<p>When the <code>vc_unprepare()</code> function succeeds, the voice control state changes from <code>VC_STATE_READY</code> to <code>VC_STATE_INITIALIZED</code>.</p>  
-  
+<p>When the <code>vc_unprepare()</code> function succeeds, the voice control state changes from <code>VC_STATE_READY</code> to <code>VC_STATE_INITIALIZED</code>.</p>
+
    <div class="note">
         <strong>Note</strong>
         Do not call the <code>vc_deinitialize()</code> function in a callback. Within a callback, the <code>vc_deinitialize()</code> function fails and returns <code>VC_ERROR_OPERATION_FAILED</code>.
@@ -348,33 +348,33 @@ deinitialize_voice_control()
 void
 initialize_voice_control_elm()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_initialize();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_initialize();
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
-<li>Create a handle for each UI component for which you want to set a command and hint. 
+<li>Create a handle for each UI component for which you want to set a command and hint.
 <p>Use the <code>vc_elm_create_object()</code> function to create a handle for <code>Evas_Object</code> instances, and the <code>vc_elm_create_item()</code> function for <code>Elm_Object_Item</code> instances.</p>
 <pre class="prettyprint">
 void
 create_vc_elm_handler()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;vc_elm_h handler_object;
-&nbsp;&nbsp;&nbsp;&nbsp;vc_elm_h handler_item;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating Evas_Object button */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *button = elm_button_add(win);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_create_object(button, &amp;handler_object);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating Elm_Object_Item list */
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *item = elm_list_item_append(...);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_create_item(item, &amp;handler_item);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    vc_elm_h handler_object;
+    vc_elm_h handler_item;
+
+    /* Creating Evas_Object button */
+    Evas_Object *button = elm_button_add(win);
+    ret = vc_elm_create_object(button, &amp;handler_object);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
+    /* Creating Elm_Object_Item list */
+    Elm_Object_Item *item = elm_list_item_append(...);
+    ret = vc_elm_create_item(item, &amp;handler_item);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -383,28 +383,28 @@ create_vc_elm_handler()
 void
 destroy_vc_elm_handler(vc_elm_h &amp;handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_destroy(handler);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_destroy(handler);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 deinitialize_voice_control_elm()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_deinitialize();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_deinitialize();
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
-</pre></li>  
+</pre></li>
 </ol>
 
       <h2 id="callback" name="callback">Managing Callbacks</h2>
 <p>The callback functions are defined in the <code>voice_control_common.h</code> header file, where you can find more information about them.</p>
-       
+
 <p>To set and unset callbacks to get notifications about recognition results, state changes, and errors:</p>
-  
+
    <div class="note">
         <strong>Note</strong>
         Set and unset all callbacks when the voice control state is <code>VC_STATE_INITIALIZED</code>.
@@ -417,27 +417,27 @@ deinitialize_voice_control_elm()
 void
 state_changed_cb(vc_state_e previous, vc_state_e current, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_state_changed_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_set_state_changed_cb(state_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_set_state_changed_cb(state_changed_cb, NULL);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_state_changed_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_unset_state_changed_cb();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_unset_state_changed_cb();
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -446,29 +446,29 @@ unset_state_changed_cb()
 /* Callback */
 void
 __service_state_changed_cb(vc_service_state_e previous, vc_service_state_e current,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+                           void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_service_state_changed_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_set_service_state_changed_cb(__service_state_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_set_service_state_changed_cb(__service_state_changed_cb, NULL);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_service_state_changed_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_unset_service_state_changed_cb();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_unset_service_state_changed_cb();
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 
@@ -478,92 +478,92 @@ unset_service_state_changed_cb()
 void
 __current_language_changed_cb(const char* previous, const char* current, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_current_language_changed_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_set_current_language_changed_cb(__current_language_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_set_current_language_changed_cb(__current_language_changed_cb, NULL);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_current_language_changed_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_unset_current_language_changed_cb();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_unset_current_language_changed_cb();
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 <li>Set the recognition result callback to be invoked when a voice command is recognized.
-  
+
    <div class="note">
         <strong>Note</strong>
         If the recognition result produces a reject event, the Voice control service has rejected the recognized command. Make sure that the command does not conflict with other commands and there are not duplicated commands.
     </div>
-  
-<p>To get the command, use the Voice control APIs with the <code>vc_cmd_list</code> parameter, which is a list of recognized commands. The <code>result</code> parameter contains the recognized text.</p>  
+
+<p>To get the command, use the Voice control APIs with the <code>vc_cmd_list</code> parameter, which is a list of recognized commands. The <code>result</code> parameter contains the recognized text.</p>
 
 <pre class="prettyprint">
 /* Callback */
 void
 __result_cb(vc_result_event_e event, vc_cmd_list_h vc_cmd_list, const char* result,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void* user_data)
+            void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = -1;
-&nbsp;&nbsp;&nbsp;&nbsp;int count = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_get_count(vc_cmd_list, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* No result */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;vc_cmd_list_first(vc_cmd_list);
-
-&nbsp;&nbsp;&nbsp;&nbsp;int i = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;int type = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char* cmd = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;vc_cmd_h result_command = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result_command = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_get_current(vc_cmd_list, &amp;result_command);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (0 == ret &amp;&amp; NULL != result_command) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cmd = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vc_cmd_get_command(result_command, &amp;cmd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vc_cmd_get_type(result_command, &amp;type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Check command and type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    int ret = -1;
+    int count = 0;
+    ret = vc_cmd_list_get_count(vc_cmd_list, &amp;count);
+    if (VC_ERROR_NONE != ret) {
+        /* No result */
+
+        return;
+    }
+
+    vc_cmd_list_first(vc_cmd_list);
+
+    int i = 0;
+    int type = 0;
+    char* cmd = NULL;
+    vc_cmd_h result_command = NULL;
+    for (i = 0; i &lt; count; i++) {
+        result_command = NULL;
+        ret = vc_cmd_list_get_current(vc_cmd_list, &amp;result_command);
+        if (0 == ret &amp;&amp; NULL != result_command) {
+            cmd = NULL;
+            type = 0;
+            vc_cmd_get_command(result_command, &amp;cmd);
+            vc_cmd_get_type(result_command, &amp;type);
+            /* Check command and type */
+        }
+    }
+
+    return;
 }
 
 /* Set */
 void
 set_result_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_set_result_cb(__result_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_set_result_cb(__result_cb, NULL);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_result_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_unset_result_cb();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_unset_result_cb();
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 <li>Set the error callback to be invoked when an error occurs in the voice control process:
@@ -572,33 +572,33 @@ unset_result_cb()
 void
 __error_cb(vc_error_e reason, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 }
 
 /* Set */
 void
 set_error_cb(vc_h vc)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_set_error_cb(__error_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_set_error_cb(__error_cb, NULL);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Unset */
 void
 unset_error_cb(vc_h vc)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_unset_error_cb();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_unset_error_cb();
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li></ul>
-   
-   
+
+
     <h2 id="info" name="info">Retrieving Voice Control Information</h2>
-       
+
 <p>To get information about the current states, and current and supported languages:</p>
 
 <ul>
@@ -609,11 +609,11 @@ unset_error_cb(vc_h vc)
 void
 get_state()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;vc_state_e current_state;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_get_state(&amp;current_state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    vc_state_e current_state;
+    int ret;
+    ret = vc_get_state(&amp;current_state);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 <li>
@@ -628,11 +628,11 @@ get_state()
 void
 get_state(vc_h vc)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;vc_service_state_e service_state;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_get_service_state(&amp;service_state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    vc_service_state_e service_state;
+    int ret;
+    ret = vc_get_service_state(&amp;service_state);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 <li>Get the supported languages with a foreach function that triggers a separate callback for each language.
@@ -641,37 +641,37 @@ get_state(vc_h vc)
 bool
 supported_language_cb(const char* language, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return true; /* To continue to get the next language */
+    return true; /* To continue to get the next language */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false; /* To stop the loop */
+    return false; /* To stop the loop */
 }
 
 void
 get_supported_language()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_foreach_supported_languages(supported_language_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_foreach_supported_languages(supported_language_cb, NULL);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
-<li>Get the current language with the <code>vc_get_current_language()</code> function. The voice control recognition works for the current (default) language. Use the language change callback to be notified of language changes. 
+<li>Get the current language with the <code>vc_get_current_language()</code> function. The voice control recognition works for the current (default) language. Use the language change callback to be notified of language changes.
 
 <pre class="prettyprint">
 void
 get_current_language()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char* current_lang = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_get_current_language(&amp;current_lang);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    char* current_lang = NULL;
+    ret = vc_get_current_language(&amp;current_lang);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 </ul>
- 
+
       <h2 id="commands" name="commands">Managing Commands</h2>
-         
+
 <p>To create a command list and commands:</p>
 
 <ol>
@@ -683,11 +683,11 @@ get_current_language()
 void
 create_command_list()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;vc_cmd_list_h vc_cmd_list;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_create(&amp;vc_cmd_list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    vc_cmd_list_h vc_cmd_list;
+    ret = vc_cmd_list_create(&amp;vc_cmd_list);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -697,44 +697,44 @@ create_command_list()
 void
 create_command()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;vc_cmd_h vc_cmd = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_create(&amp;vc_cmd);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_set_command(vc_cmd, &quot;open&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_set_type(vc_cmd, VC_COMMAND_TYPE_FOREGROUND);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    vc_cmd_h vc_cmd = NULL;
+    ret = vc_cmd_create(&amp;vc_cmd);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
+
+    ret = vc_cmd_set_command(vc_cmd, "open");
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
+    ret = vc_cmd_set_type(vc_cmd, VC_COMMAND_TYPE_FOREGROUND);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
-<li>Add the command to the command list. 
+<li>Add the command to the command list.
 <p>If necessary, you can also remove commands from the command list. After you remove a command, if you no longer use it, destroy the command handle with the <code>vc_cmd_destroy()</code> function.</p>
 <pre class="prettyprint">
 void
 add_command(vc_cmd_list_h vc_cmd_list, vc_cmd_h vc_cmd)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_add(vc_cmd_list, vc_cmd);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_cmd_list_add(vc_cmd_list, vc_cmd);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 remove_command(vc_cmd_list_h vc_cmd_list, vc_cmd_h vc_cmd)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_remove(vc_cmd_list, vc_cmd);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the command if no longer needed */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_destroy(vc_cmd);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_cmd_list_remove(vc_cmd_list, vc_cmd);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
+    /* Destroy the command if no longer needed */
+    ret = vc_cmd_destroy(vc_cmd);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
@@ -745,25 +745,25 @@ remove_command(vc_cmd_list_h vc_cmd_list, vc_cmd_h vc_cmd)
 bool
 __vc_get_command_cb(vc_cmd_h vc_command, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Your code */
+    /* Your code */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 foreach_command(vc_cmd_list_h vc_cmd_list)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;vc_cmd_h vc_cmd;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_foreach_commands(vc_cmd_list, __vc_get_command_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    vc_cmd_h vc_cmd;
+    ret = vc_cmd_list_foreach_commands(vc_cmd_list, __vc_get_command_cb, NULL);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
 <li>You can use the <code>vc_cmd_list_get_current()</code> function to get the current command in an output parameter.
 
-  
+
    <div class="note">
         <strong>Note</strong>
         When you get the command handle with the <code>vc_cmd_list_get_current()</code> function, do not release it. To release the command handle, call the <code>vc_cmd_list_remove()</code> function before the <code>vc_cmd_destroy()</code> function.
@@ -772,46 +772,46 @@ foreach_command(vc_cmd_list_h vc_cmd_list)
 void
 get_commands(vc_cmd_list_h vc_cmd_list)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int count;
-&nbsp;&nbsp;&nbsp;&nbsp;vc_cmd_h vc_cmd;
-&nbsp;&nbsp;&nbsp;&nbsp;char* command = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int type = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_get_count(vc_cmd_list, &amp;count);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (0 &gt;= count) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_first(vc_cmd_list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-
-&nbsp;&nbsp;&nbsp;&nbsp;do {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_get_current(vc_cmd_list, &amp;vc_cmd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE == ret) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_get_command(vc_cmd, &amp;command);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (NULL != command) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Command must be released */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(command);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_get_type(vc_cmd, &amp;type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do not release the command handle */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_next(vc_cmd_list);
-&nbsp;&nbsp;&nbsp;&nbsp;} while (VC_ERROR_ITERATION_END != ret);
+    int i;
+    int ret;
+    int count;
+    vc_cmd_h vc_cmd;
+    char* command = NULL;
+    int type = 0;
+
+    ret = vc_cmd_list_get_count(vc_cmd_list, &amp;count);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
+
+    if (0 &gt;= count) {
+        /* Error handling */
+
+        return;
+    }
+
+    ret = vc_cmd_list_first(vc_cmd_list);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
+
+    do {
+        ret = vc_cmd_list_get_current(vc_cmd_list, &amp;vc_cmd);
+        if (VC_ERROR_NONE == ret) {
+            ret = vc_cmd_get_command(vc_cmd, &amp;command);
+            if (VC_ERROR_NONE != ret)
+                /* Error handling */
+            if (NULL != command) {
+                /* Command must be released */
+                free(command);
+            }
+
+            ret = vc_cmd_get_type(vc_cmd, &amp;type);
+            if (VC_ERROR_NONE != ret)
+                /* Error handling */
+            /* Do not release the command handle */
+        }
+
+        ret = vc_cmd_list_next(vc_cmd_list);
+    } while (VC_ERROR_ITERATION_END != ret);
 }
 </pre>
 </li>
@@ -823,10 +823,10 @@ get_commands(vc_cmd_list_h vc_cmd_list)
 void
 set_command(vc_cmd_list_h vc_cmd_list, int type)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_set_command_list(vc_cmd_list, type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_set_command_list(vc_cmd_list, type);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -837,37 +837,37 @@ set_command(vc_cmd_list_h vc_cmd_list, int type)
 void
 unset_command(int type)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_unset_command_list(type);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_unset_command_list(type);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Destroy the command handle */
 void
 destroy_command(vc_cmd_h vc_cmd)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_destroy(vc_cmd);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_cmd_destroy(vc_cmd);
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 /* Destroy the command list handle */
 void
 destroy_command_list(vc_cmd_list_h vc_cmd_list)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_cmd_list_destroy(vc_cmd_list, true); /* true destroys all commands */
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_cmd_list_destroy(vc_cmd_list, true); /* true destroys all commands */
+    if (VC_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
 </ol>
 
      <h2 id="language" name="language">Monitoring Language Changes</h2>
-         
+
 <p>To monitor when the system or application language changes:</p>
 
 <ol>
@@ -877,10 +877,10 @@ destroy_command_list(vc_cmd_list_h vc_cmd_list)
 void
 set_language_changed_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_set_current_language_changed_cb(language_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_set_current_language_changed_cb(language_changed_cb, NULL);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -889,13 +889,13 @@ set_language_changed_cb()
 void
 language_changed_cb(const char *previous, const char *current, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (&quot;en_US&quot; == current) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vc_elm_set_command(handler, &quot;button&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vc_elm_set_command_hint(handler, &quot;button&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (&quot;ko_KR&quot; = current) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vc_elm_set_command(handler, &quot;버튼&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vc_elm_set_command_hint(handler, &quot;버튼&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if ("en_US" == current) {
+        vc_elm_set_command(handler, "button");
+        vc_elm_set_command_hint(handler, "button");
+    } else if ("ko_KR" = current) {
+        vc_elm_set_command(handler, "버튼");
+        vc_elm_set_command_hint(handler, "버튼");
+    }
 }
 </pre></li>
 
@@ -904,16 +904,16 @@ language_changed_cb(const char *previous, const char *current, void* user_data)
 void
 unset_state_changed_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_unset_current_language_changed_cb();
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_unset_current_language_changed_cb();
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li></ol>
-   
-   
+
+
     <h2 id="info_elementary" name="info_elementary">Retrieving Voice Control Information</h2>
-       
+
 <p>To get information about supported languages, widgets, and actions:</p>
 
 <ul>
@@ -923,11 +923,11 @@ unset_state_changed_cb()
 void
 get_language()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *current_language;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_get_current_language(&amp;current_language);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    char *current_language;
+    int ret;
+    ret = vc_elm_get_current_language(&amp;current_language);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 <li>Get the languages supported by the Voice control elementary library with a foreach function that triggers a separate callback for each language.
@@ -936,18 +936,18 @@ get_language()
 bool
 supported_language_cb(const char *language, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return true; /* To continue to get the next language */
+    return true; /* To continue to get the next language */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false; /* To stop the loop */
+    return false; /* To stop the loop */
 }
 
 void
 set_default_language_changed_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_foreach_supported_languages(supported_language_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_foreach_supported_languages(supported_language_cb, NULL);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 <li>Get the UI components supported by the Voice control elementary library with a foreach function that triggers a separate callback for each UI component.
@@ -956,18 +956,18 @@ set_default_language_changed_cb()
 void
 widget_cb(const char *widget, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return true; /* To continue to get the next UI component */
+    return true; /* To continue to get the next UI component */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false; /* To stop the loop */
+    return false; /* To stop the loop */
 }
 
 void
 set_supported_widget_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_foreach_supported_widgets(widget_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_foreach_supported_widgets(widget_cb, NULL);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li>
 <li>Get the actions supported by the Voice control elementary library for specific UI components with a foreach function that triggers a separate callback for each action.
@@ -977,30 +977,30 @@ set_supported_widget_cb()
 void
 action_cb(const char *action, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *command_param;
-&nbsp;&nbsp;&nbsp;&nbsp;vc_elm_get_action_command(action, &amp;command_param);
+    char *command_param;
+    vc_elm_get_action_command(action, &amp;command_param);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true; /* To continue to get the next action */
+    return true; /* To continue to get the next action */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false; /* To stop the loop */
+    return false; /* To stop the loop */
 }
 
 void
 set_supported_action_cb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Elm_Button is an example, it can be obtained
-&nbsp;&nbsp;&nbsp;&nbsp;   using vc_elm_foreach_supported_widgets callback
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_foreach_supported_actions(&quot;Elm_Button&quot;, action_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    /*
+       Elm_Button is an example, it can be obtained
+       using vc_elm_foreach_supported_widgets callback
+    */
+    ret = vc_elm_foreach_supported_actions("Elm_Button", action_cb, NULL);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre></li></ul>
- 
+
       <h2 id="command_hint" name="command_hint">Managing Commands and Hints</h2>
-         
+
 <p>To set and unset commands and hints, and define the hint direction and offset:</p>
 
 <ol>
@@ -1010,10 +1010,10 @@ set_supported_action_cb()
 void
 set_command(vc_elm_h &amp;handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_set_command(handler, &quot;Command&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_set_command(handler, "Command");
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -1023,10 +1023,10 @@ set_command(vc_elm_h &amp;handler)
 void
 set_command_hint(vc_elm_h &amp;handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_set_command_hint(handler, &quot;Hint&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_set_command_hint(handler, "Hint");
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 </li>
@@ -1036,19 +1036,19 @@ set_command_hint(vc_elm_h &amp;handler)
 void
 set_hint_direction(vc_elm_h &amp;handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_set_command_hint_direction(handler, VC_ELM_DIRECTION_RIGHT);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_set_command_hint_direction(handler, VC_ELM_DIRECTION_RIGHT);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 set_hint_offset(vc_elm_h &amp;handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_set_command_hint_offset(handler, 100, 100);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_set_command_hint_offset(handler, 100, 100);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
@@ -1057,22 +1057,22 @@ set_hint_offset(vc_elm_h &amp;handler)
 void
 get_hint_direction(vc_elm_h &amp;handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;vc_elm_direction_e direction;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_get_command_hint_direction(handler, &amp;direction);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    vc_elm_direction_e direction;
+    ret = vc_elm_get_command_hint_direction(handler, &amp;direction);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 get_hint_offset(vc_elm_h &amp;handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_get_command_hint_offset(handler, &amp;x, &amp;y);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    int x;
+    int y;
+    ret = vc_elm_get_command_hint_offset(handler, &amp;x, &amp;y);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 </pre>
 
@@ -1082,19 +1082,19 @@ get_hint_offset(vc_elm_h &amp;handler)
 void
 unset_command(vc_elm_h &amp;handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_unset_command(handler);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_unset_command(handler);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }
 
 void
 unset_command_hint(vc_elm_h &amp;handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = vc_elm_unset_command_hint(handler);
-&nbsp;&nbsp;&nbsp;&nbsp;if (VC_ELM_ERROR_NONE != ret)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    int ret;
+    ret = vc_elm_unset_command_hint(handler);
+    if (VC_ELM_ERROR_NONE != ret)
+        /* Error handling */
 }</pre>
 </li>
 </ol>
@@ -1105,9 +1105,9 @@ unset_command_hint(vc_elm_h &amp;handler)
 
 <a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
 
-<div id="footer"> 
+<div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/dali/actors_n.htm b/org.tizen.guides/html/native/ui/dali/actors_n.htm
index d27ae98..4df29aa 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/actors_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/actors_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Actors</title>  
+       <title>Actors</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -38,10 +38,10 @@
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>                        
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Actors</h1>
@@ -53,7 +53,7 @@
 
 <h2 id="types" name="types">Actor Types</h2>
 
-<p align="center"><strong>Figure: Actor types</strong></p> 
+<p align="center"><strong>Figure: Actor types</strong></p>
 <p align="center"><img alt="Actor types" src="../../../images/actor_types.png"/></p>
 
 <p>Actor has the following concrete types:</p>
@@ -80,16 +80,16 @@ Actor actor = Actor::New();
 Stage::GetCurrent().Add( actor );
 </pre>
 
-       
+
 <h2 id="position" name="position">Positioning Actors</h2>
-<p>An actor inherits its parent&#39;s position. The relative position between the actor &amp; parent is determined by the following properties:</p>
+<p>An actor inherits its parent's position. The relative position between the actor &amp; parent is determined by the following properties:</p>
 <ul>
 <li><strong>Parent origin</strong>
-<p>This Vector3 property defines a point within the parent actor&#39;s area.</p>
+<p>This Vector3 property defines a point within the parent actor's area.</p>
+
+<p align="center"><strong>Figure: Parent origin</strong></p>
+       <p align="center"><img alt="Parent origin" src="../../../images/parent_origin.png"/></p>
 
-<p align="center"><strong>Figure: Parent origin</strong></p>  
-       <p align="center"><img alt="Parent origin" src="../../../images/parent_origin.png"/></p> 
- 
 <p>The default is top-left (<code>Dali::ParentOrigin::TOP_LEFT</code>), which can be visualized in 2D as (0, 0), but is actually Vector3 (0, 0, 0.5) in the 3D DALi world. The actor position is relative to this point.</p>
 <p>For more information, see the <code>Dali::Actor::SetParentOrigin()</code> function.</p>
 </li>
@@ -98,9 +98,9 @@ Stage::GetCurrent().Add( actor );
 
 <p>This Vector3 property defines a point within the child actor area.</p>
 
-<p align="center"><strong>Figure: Anchor point</strong></p>  
-       <p align="center"><img alt="Anchor point" src="../../../images/anchor_point.png"/></p> 
- 
+<p align="center"><strong>Figure: Anchor point</strong></p>
+       <p align="center"><img alt="Anchor point" src="../../../images/anchor_point.png"/></p>
+
 <p>The default is center (<code>Dali::AnchorPoint::CENTER</code>), which can be visualized in 2D as (0.5, 0.5), but is actually Vector3 (0.5, 0.5, 0.5) in the 3D DALi world. The actor position is also relative to this point.</p>
 <p>For more information, see the <code>Dali::Actor::SetAnchorPoint()</code> function.</p>
 </li>
@@ -109,10 +109,10 @@ Stage::GetCurrent().Add( actor );
 <li><strong>Position</strong>
 <p>This is the position vector between the parent origin and anchor point.</p>
 
-<p align="center"><strong>Figure: Position</strong></p>  
-       <p align="center"><img alt="Position" src="../../../images/actor_position.png"/></p> 
- 
-<p>Therefore by default, an actor&#39;s position indicates the vector to its center from the top-left corner of its parent.</p>
+<p align="center"><strong>Figure: Position</strong></p>
+       <p align="center"><img alt="Position" src="../../../images/actor_position.png"/></p>
+
+<p>Therefore by default, an actor's position indicates the vector to its center from the top-left corner of its parent.</p>
 
 <p>For example (with the default camera):</p>
 <ul>
@@ -121,10 +121,10 @@ Stage::GetCurrent().Add( actor );
 </ul>
 <p>For more information, see the <code>Dali::Actor::SetPosition()</code> function.</p>
 </li>
-</ul> 
+</ul>
 
 <h2 id="event" name="event">Event Handling for Actors</h2>
-<p>The <code>Dali::Actor</code> class provides following event signals:</p> 
+<p>The <code>Dali::Actor</code> class provides following event signals:</p>
 <p align="center" class="Table"><strong>Table: Event signals</strong></p>
 <table>
    <tbody>
@@ -159,51 +159,51 @@ Stage::GetCurrent().Add( actor );
    </tbody>
   </table>
 
-<p>For example, a touch event can be handled as follows:</p> 
+<p>For example, a touch event can be handled as follows:</p>
 <pre class="prettyprint">
 // This sample code is for the HelloWorldExample class
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;// Control is one of the simplest types of Actor which is visible
-&nbsp;&nbsp;Control control = Control::New();
-&nbsp;&nbsp;control.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;control.SetSize( 100.0f, 100.0f );
-&nbsp;&nbsp;control.SetBackgroundColor( Color::WHITE );
-&nbsp;&nbsp;Stage::GetCurrent().Add( control );
-
-&nbsp;&nbsp;// Connect to a touch signal emitted by the control
-&nbsp;&nbsp;control.TouchedSignal().Connect( this, &amp;HelloWorldExample::OnTouch );
+  // Control is one of the simplest types of Actor which is visible
+  Control control = Control::New();
+  control.SetParentOrigin( ParentOrigin::CENTER );
+  control.SetSize( 100.0f, 100.0f );
+  control.SetBackgroundColor( Color::WHITE );
+  Stage::GetCurrent().Add( control );
+
+  // Connect to a touch signal emitted by the control
+  control.TouchedSignal().Connect( this, &amp;HelloWorldExample::OnTouch );
 }
 
 bool HelloWorldExample::OnTouch( Actor actor, const TouchEvent&amp; event )
 {
-&nbsp;&nbsp;bool handled = false;
-&nbsp;&nbsp;unsigned int pointCount = event.GetPointCount();
-&nbsp;&nbsp;if( pointCount == 1 )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;if( event.GetPoint( 0 ).state == TouchPoint::Down )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Act on the first touch on screen
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handled = true;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
-&nbsp;&nbsp;else if( pointCount &gt; 1 )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;if( event.GetPoint( pointCount-1 ).state == TouchPoint::Down )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Act on a multi-touch on screen
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handled = true;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
-&nbsp;&nbsp;// true if you have handled the touch, false otherwise
-&nbsp;&nbsp;return handled;
+  bool handled = false;
+  unsigned int pointCount = event.GetPointCount();
+  if( pointCount == 1 )
+  {
+    if( event.GetPoint( 0 ).state == TouchPoint::Down )
+    {
+      // Act on the first touch on screen
+      handled = true;
+    }
+  }
+  else if( pointCount &gt; 1 )
+  {
+    if( event.GetPoint( pointCount-1 ).state == TouchPoint::Down )
+    {
+      // Act on a multi-touch on screen
+      handled = true;
+    }
+  }
+  // true if you have handled the touch, false otherwise
+  return handled;
 }
 </pre>
 
-<p>For more information, see <a href="event_handling_n.htm">Event Handling</a>.</p> 
+<p>For more information, see <a href="event_handling_n.htm">Event Handling</a>.</p>
+
 
-    
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/animation_n.htm b/org.tizen.guides/html/native/ui/dali/animation_n.htm
index d60f6c1..4cf5b1b 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/animation_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/animation_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Animation</title>  
+       <title>Animation</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -51,14 +51,14 @@
 
 <p>You can use animation to allow your objects to move around and change their properties for a specified duration.</p>
 
-<p>DALi provides a rich and easy to use animation framework which allows you to create visually rich applications. The <code>Dali::Animation</code> class can be used to animate the <a href="properties_n.htm#attributes">animatable properties</a> of any number of objects.</p> 
+<p>DALi provides a rich and easy to use animation framework which allows you to create visually rich applications. The <code>Dali::Animation</code> class can be used to animate the <a href="properties_n.htm#attributes">animatable properties</a> of any number of objects.</p>
 
 <p>DALi animations <a href="multi_threaded_n.htm#animations">occur in a dedicated thread</a>. This allows animations to run smoothly, regardless of the time taken to process the input, events, and other factors in the application code.</p>
 
 <p>The following figure illustrates the animation components.</p>
 
-<p align="center"><strong>Figure: DALi animation components</strong></p>  
-       <p align="center"><img alt="DALi animation components" src="../../../images/animation_components.png"/></p> 
+<p align="center"><strong>Figure: DALi animation components</strong></p>
+       <p align="center"><img alt="DALi animation components" src="../../../images/animation_components.png"/></p>
 
 
 <p>To implement a basic animation, create an animation object that takes place over 3 seconds:</p>
@@ -81,12 +81,12 @@ Animation animation = Animation::New( 3.0f );
 <pre class="prettyprint">
 // Animate the actor1 position TO 10.0f, 50.0f, 0.0f
 animation.AnimateTo( Property( actor1, Dali::Actor::Property::POSITION ),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector3( 10.0f, 50.0f, 0.0f ) ); 
+                     Vector3( 10.0f, 50.0f, 0.0f ) );
 // End Position: 10.0f, 50.0f, 0.0f
 
 // Animate the actor2 position BY 10.0f, 50.0f, 0.0f
 animation.AnimateBy( Property( actor2, Dali::Actor::Property::POSITION ),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector3( 10.0f, 50.0f, 0.0f ) ); 
+                     Vector3( 10.0f, 50.0f, 0.0f ) );
 // End Position: 20.0f, 60.0f, 0.0f
 </pre>
 
@@ -117,27 +117,27 @@ animation.SetEndAction( Animation::Discard );
 </pre></li></ul>
 <h2 id="notifications" name="notifications">Using Notifications</h2>
 
-<p>Using DALi&#39;s signal framework, the application can be notified when the animation finishes. The <code>Dali::Animation</code> class supports &quot;fire and forget&quot; behavior, which means that the animation continues to play even if the handle is discarded. In the following example, the finished signal is emitted after 2 seconds:</p>
+<p>Using DALi's signal framework, the application can be notified when the animation finishes. The <code>Dali::Animation</code> class supports "fire and forget" behavior, which means that the animation continues to play even if the handle is discarded. In the following example, the finished signal is emitted after 2 seconds:</p>
 <pre class="prettyprint">
 // This sample code is for the HelloWorldExample class
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;// Create a button
-&nbsp;&nbsp;PushButton button = PushButton::New();
-&nbsp;&nbsp;Stage::GetCurrent().Add( button );
-
-&nbsp;&nbsp;// Create an animation for the button
-&nbsp;&nbsp;Animation animation = Animation::New( 2.0f ); // Duration 2 seconds
-&nbsp;&nbsp;animation.AnimateTo( Property( button, Actor::Property::POSITION ),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector3( 100.0f, 100.0f, 0.0f ) );
-&nbsp;&nbsp;animation.FinishedSignal().Connect( this, &amp;HelloWorldExample::OnFinished );
-&nbsp;&nbsp;animation.Play(); // Fire the animation and forget about it
+  // Create a button
+  PushButton button = PushButton::New();
+  Stage::GetCurrent().Add( button );
+
+  // Create an animation for the button
+  Animation animation = Animation::New( 2.0f ); // Duration 2 seconds
+  animation.AnimateTo( Property( button, Actor::Property::POSITION ),
+                       Vector3( 100.0f, 100.0f, 0.0f ) );
+  animation.FinishedSignal().Connect( this, &amp;HelloWorldExample::OnFinished );
+  animation.Play(); // Fire the animation and forget about it
 } // At this point the animation handle has gone out of scope
 
 void HelloWorldExample::OnFinished( Animation&amp; animation )
 {
-&nbsp;&nbsp;// Do something when the animation is finished
+  // Do something when the animation is finished
 }
 </pre>
 
@@ -151,7 +151,7 @@ animation.SetDefaultAlphaFunction( Dali::AlphaFunction::EASE_IN );
 <pre class="prettyprint">
 float MyAlphaFunction( float progress )
 {
-&nbsp;&nbsp;return progress;
+  return progress;
 }
 
 AlphaFunction alphaFunction( &amp;MyAlphaFunction );
@@ -159,8 +159,8 @@ animation.SetDefaultAlphaFunction( alphaFunction );
 </pre>
 <p>You can specify a different alpha function for each animate call within the <code>Animation</code> object:</p>
 <pre class="prettyprint">
-animation.AnimateTo( Property( actor1, Dali::Actor::Property::POSITION ), 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector3( 10.0f, 50.0f, 0.0f ), Dali::AlphaFunction::EASE_IN );
+animation.AnimateTo( Property( actor1, Dali::Actor::Property::POSITION ),
+                     Vector3( 10.0f, 50.0f, 0.0f ), Dali::AlphaFunction::EASE_IN );
 </pre>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/native/ui/dali/animation_types_n.htm b/org.tizen.guides/html/native/ui/dali/animation_types_n.htm
index 03d569a..be6ca44 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/animation_types_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/animation_types_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Animation Types</title>  
+       <title>Animation Types</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -52,11 +52,11 @@
 <pre class="prettyprint">
 KeyFrames keyFrames = KeyFrames::New();
 keyFrames.Add( 0.0f,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector3( 10.0f, 10.0f, 10.0f ) );
+               Vector3( 10.0f, 10.0f, 10.0f ) );
 keyFrames.Add( 0.7f,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector3( 200.0f, 200.0f, 200.0f ) );
+               Vector3( 200.0f, 200.0f, 200.0f ) );
 keyFrames.Add( 1.0f,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector3( 100.0f, 100.0f, 100.0f ) );
+               Vector3( 100.0f, 100.0f, 100.0f ) );
 </pre>
 
 <p>Next, you can add the key frames to your animation.</p>
@@ -64,16 +64,16 @@ keyFrames.Add( 1.0f,
 animation.AnimateBetween( Property( actor1, Dali::Actor::Property::POSITION ), keyFrames );
 </pre>
 <p>When you play the animation, DALi animates the position of <code>actor1</code> between the specified key frames. The <code>actor1</code> animates from (10.0f, 10.0f, 10.0f) to (200.0f, 200.f, 200.0f) by 70% of the animation time, and then spends the remaining time animating back to (100.0f, 100.0f, 100.0f).</p>
-<p>The advantage of specifying a key frame at 0% is that regardless of where the <code>actor1</code> is, it starts from position (10.0f, 10.0f, 10.0f). If <code>AnimateTo()</code> is used, the start position is the <code>actor1</code>&#39;s current position.</p>
+<p>The advantage of specifying a key frame at 0% is that regardless of where the <code>actor1</code> is, it starts from position (10.0f, 10.0f, 10.0f). If <code>AnimateTo()</code> is used, the start position is the <code>actor1</code>'s current position.</p>
 
 <h2 id="path" name="path">Path Animation</h2>
 <p>The <code>Dali::Path</code> class can be used to animate the position and orientation of actors.</p>
 
 <p>The black points in the following figure are points where the DALi logo travels to. The red points are the control points which express the curvature of the path on the black points.</p>
 
-<p align="center"><strong>Figure: Path animation</strong></p>  
-       <p align="center"><img alt="Path animation" src="../../../images/path_animation.png"/></p> 
-       
+<p align="center"><strong>Figure: Path animation</strong></p>
+       <p align="center"><img alt="Path animation" src="../../../images/path_animation.png"/></p>
+
 <p>The following code presents the black points:</p>
 <pre class="prettyprint">
 Path path = Path::New();
@@ -90,7 +90,7 @@ path.GenerateControlPoints( 0.25f );
 <pre class="prettyprint">
 animation.Animate( actor1, path, Vector3::ZERO );
 </pre>
-<p>The third parameter is the forward vector (in a local space coordinate system) that is oriented with the path&#39;s tangent direction.</p>
+<p>The third parameter is the forward vector (in a local space coordinate system) that is oriented with the path's tangent direction.</p>
 
 
 
diff --git a/org.tizen.guides/html/native/ui/dali/background_n.htm b/org.tizen.guides/html/native/ui/dali/background_n.htm
index ef274b9..2f0f7d9 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/background_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/background_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Background Knowledge</title>  
+       <title>Background Knowledge</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -29,12 +29,12 @@
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>    
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>                        
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Background Knowledge</h1>
@@ -50,7 +50,7 @@
        </ul>
 
 
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/buttons_n.htm b/org.tizen.guides/html/native/ui/dali/buttons_n.htm
index 2ae2bd3..9470411 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/buttons_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/buttons_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Buttons</title>  
+       <title>Buttons</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -42,10 +42,10 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1CheckBoxButton.html">Dali::Toolkit::CheckBoxButton API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1PushButton.html">Dali::Toolkit::PushButton API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1RadioButton.html">Dali::Toolkit::RadioButton API for Wearable Native</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_Button" target="_blank">(DALi) Button Sample Description</a></li>                      
+                       <li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_Button" target="_blank">(DALi) Button Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Buttons</h1>
@@ -83,11 +83,11 @@
   </table>
 
 <h2 id="PushButton" name="PushButton">PushButton</h2>
- 
+
 <p>The <code>Dali::Toolkit::PushButton</code> class provides a button that can be pressed to operate it. A push button changes its appearance when is pressed and returns to its original appearance when is released.</p>
 
-<p align="center"><strong>Figure: PushButton</strong></p>  
-       <p align="center"><img alt="PushButton" src="../../../images/push_button.png"/></p> 
+<p align="center"><strong>Figure: PushButton</strong></p>
+       <p align="center"><img alt="PushButton" src="../../../images/push_button.png"/></p>
 
 <p>A push button emits a <code>Button::PressedSignal()</code> signal when the button is pressed, a <code>Button::ClickedSignal()</code> signal when clicked, and a <code>Button::ReleasedSignal()</code> signal when released or the touch point leaves the boundary of the button. The following code shows an example of a basic push button:</p>
 
@@ -96,46 +96,46 @@
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;PushButton button = PushButton::New();
-&nbsp;&nbsp;button.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;button.SetLabelText( &quot;Press&quot; );
-&nbsp;&nbsp;Stage::GetCurrent().Add( button );
-
-&nbsp;&nbsp;// Connect to button signals emitted by the button
-&nbsp;&nbsp;button.ClickedSignal().Connect( this, &amp;HelloWorldExample::OnButtonClicked );
-&nbsp;&nbsp;button.PressedSignal().Connect( this, &amp;HelloWorldExample::OnButtonPressed );
-&nbsp;&nbsp;button.ReleasedSignal().Connect( this, &amp;HelloWorldExample::OnButtonReleased );
+  PushButton button = PushButton::New();
+  button.SetParentOrigin( ParentOrigin::CENTER );
+  button.SetLabelText( "Press" );
+  Stage::GetCurrent().Add( button );
+
+  // Connect to button signals emitted by the button
+  button.ClickedSignal().Connect( this, &amp;HelloWorldExample::OnButtonClicked );
+  button.PressedSignal().Connect( this, &amp;HelloWorldExample::OnButtonPressed );
+  button.ReleasedSignal().Connect( this, &amp;HelloWorldExample::OnButtonReleased );
 }
 
 bool HelloWorldExample::OnButtonClicked( Button button )
 {
-&nbsp;&nbsp;// Do something when the button is clicked
+  // Do something when the button is clicked
 
-&nbsp;&nbsp;return true;
-} 
+  return true;
+}
 
 bool HelloWorldExample::OnButtonPressed( Button button )
 {
-&nbsp;&nbsp;// Do something when the button is pressed
+  // Do something when the button is pressed
 
-&nbsp;&nbsp;return true;
+  return true;
 }
 
 bool HelloWorldExample::OnButtonReleased( Button button )
 {
-&nbsp;&nbsp;// Do something when the button is released
+  // Do something when the button is released
 
-&nbsp;&nbsp;return true;
+  return true;
 }
 </pre>
 
 
 <h2 id="CheckBoxButton" name="CheckBoxButton">CheckBoxButton</h2>
- 
+
 <p>The <code>Dali::Toolkit::CheckBoxButton</code> class provides a check box button, which can be checked or unchecked.</p>
 
-<p align="center"><strong>Figure: CheckBoxButton</strong></p>  
-       <p align="center"><img alt="CheckBoxButton" src="../../../images/checkbox_button.png"/></p> 
+<p align="center"><strong>Figure: CheckBoxButton</strong></p>
+       <p align="center"><img alt="CheckBoxButton" src="../../../images/checkbox_button.png"/></p>
 
 <p>A checkbox button emits all 4 button input signals, but usually you can just use the <code>Button::StateChangedSignal()</code> signal to be notified when the button changes its state to selected or unselected. The following code shows an example of a basic checkbox button:</p>
 
@@ -144,32 +144,32 @@ bool HelloWorldExample::OnButtonReleased( Button button )
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;CheckBoxButton button = CheckBoxButton::New();
-&nbsp;&nbsp;button.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;button.SetLabelText( &quot;Check&quot; );
-&nbsp;&nbsp;button.SetSize( 200, 40 );
-&nbsp;&nbsp;button.SetBackgroundColor( Color::WHITE );
-&nbsp;&nbsp;Stage::GetCurrent().Add( button );
-
-&nbsp;&nbsp;// Connect to a button signal emitted by the button
-&nbsp;&nbsp;button.StateChangedSignal().Connect( this, &amp;HelloWorldExample::OnButtonStateChanged );
+  CheckBoxButton button = CheckBoxButton::New();
+  button.SetParentOrigin( ParentOrigin::CENTER );
+  button.SetLabelText( "Check" );
+  button.SetSize( 200, 40 );
+  button.SetBackgroundColor( Color::WHITE );
+  Stage::GetCurrent().Add( button );
+
+  // Connect to a button signal emitted by the button
+  button.StateChangedSignal().Connect( this, &amp;HelloWorldExample::OnButtonStateChanged );
 }
 
 bool HelloWorldExample::OnButtonStateChanged( Button button )
 {
-&nbsp;&nbsp;// Do something when the button state is changed
-&nbsp;&nbsp;// You can get the state using button.IsSelected() call
+  // Do something when the button state is changed
+  // You can get the state using button.IsSelected() call
 
-&nbsp;&nbsp;return true;
+  return true;
 }
 </pre>
 
 <h2 id="RadioButton" name="RadioButton">RadioButton</h2>
- 
+
 <p>The <code>Dali::Toolkit::RadioButton</code> class provides a radio button with 2 states: selected and unselected.</p>
 
-<p align="center"><strong>Figure: RadioButton</strong></p>  
-       <p align="center"><img alt="RadioButton" src="../../../images/radio_button.png"/></p> 
+<p align="center"><strong>Figure: RadioButton</strong></p>
+       <p align="center"><img alt="RadioButton" src="../../../images/radio_button.png"/></p>
 
 <p>Usually, radio buttons are grouped. When they have the same parent, 2 or more radio buttons are located in the same group. In each group, only 1 radio button can be selected at a given time. You can use the <code>Button::StateChangedSignal()</code> signal to check which radio button is selected. The following code shows an example of a basic radio button:</p>
 
@@ -178,35 +178,35 @@ bool HelloWorldExample::OnButtonStateChanged( Button button )
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;Actor radioGroup = Actor::New();
-&nbsp;&nbsp;radioGroup.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;Stage::GetCurrent().Add( radioGroup );
-
-&nbsp;&nbsp;RadioButton button1 = RadioButton::New();
-&nbsp;&nbsp;button1.SetLabelText( &quot;button1&quot; );
-&nbsp;&nbsp;button1.SetBackgroundColor( Color::WHITE );
-&nbsp;&nbsp;button1.SetPosition( 0, -40 );
-&nbsp;&nbsp;radioGroup.Add( button1 );
-
-&nbsp;&nbsp;RadioButton button2 = RadioButton::New();
-&nbsp;&nbsp;button2.SetLabelText( &quot;button2&quot; );
-&nbsp;&nbsp;button2.SetBackgroundColor( Color::WHITE );
-&nbsp;&nbsp;button2.SetPosition( 0, 40 );
-&nbsp;&nbsp;radioGroup.Add( button2 );
-
-&nbsp;&nbsp;// Connect a single callback to button signals emitted by both button1 and button2
-&nbsp;&nbsp;button1.StateChangedSignal().Connect( this, &amp;HelloWorldExample::OnButtonStateChanged );
-&nbsp;&nbsp;button2.StateChangedSignal().Connect( this, &amp;HelloWorldExample::OnButtonStateChanged );
+  Actor radioGroup = Actor::New();
+  radioGroup.SetParentOrigin( ParentOrigin::CENTER );
+  Stage::GetCurrent().Add( radioGroup );
+
+  RadioButton button1 = RadioButton::New();
+  button1.SetLabelText( "button1" );
+  button1.SetBackgroundColor( Color::WHITE );
+  button1.SetPosition( 0, -40 );
+  radioGroup.Add( button1 );
+
+  RadioButton button2 = RadioButton::New();
+  button2.SetLabelText( "button2" );
+  button2.SetBackgroundColor( Color::WHITE );
+  button2.SetPosition( 0, 40 );
+  radioGroup.Add( button2 );
+
+  // Connect a single callback to button signals emitted by both button1 and button2
+  button1.StateChangedSignal().Connect( this, &amp;HelloWorldExample::OnButtonStateChanged );
+  button2.StateChangedSignal().Connect( this, &amp;HelloWorldExample::OnButtonStateChanged );
 }
 
 bool HelloWorldExample::OnButtonStateChanged( Toolkit::Button button )
 {
-&nbsp;&nbsp;// Do something when the 2 buttons&#39; states are changed
-&nbsp;&nbsp;// button parameter can be both button1 and button2
-&nbsp;&nbsp;// You can use button.GetLabelText() and button.IsSelected() 
-&nbsp;&nbsp;// to know which button is selected
+  // Do something when the 2 buttons' states are changed
+  // button parameter can be both button1 and button2
+  // You can use button.GetLabelText() and button.IsSelected()
+  // to know which button is selected
 
-&nbsp;&nbsp;return true;
+  return true;
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/dali/constraints_n.htm b/org.tizen.guides/html/native/ui/dali/constraints_n.htm
index 2c314fb..9a25e67 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/constraints_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/constraints_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Constraints</title>  
+       <title>Constraints</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -44,7 +44,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Constraints</h1>
 
-<p>Constraints are used to modify the property of an actor (<strong>target property</strong>), based on other properties of the same actor; properties of the actor&#39;s parent; or properties of another actor altogether (<strong>property input or constraint source</strong>), when the modification needs to be at runtime. Custom functions or functors can be supplied, where the desired value of the property can be calculated. These functions or functors are called in every frame, therefore they must be fast and not too complex, otherwise they can affect performance (<strong>constraint function</strong>).</p>
+<p>Constraints are used to modify the property of an actor (<strong>target property</strong>), based on other properties of the same actor; properties of the actor's parent; or properties of another actor altogether (<strong>property input or constraint source</strong>), when the modification needs to be at runtime. Custom functions or functors can be supplied, where the desired value of the property can be calculated. These functions or functors are called in every frame, therefore they must be fast and not too complex, otherwise they can affect performance (<strong>constraint function</strong>).</p>
 
 <p align="center"><strong>Figure: Conceptual diagram for the DALi constraint system</strong></p>
 <p align="center"><img alt="Conceptual diagram for the DALi constraint system" src="../../../images/constraint-concept.png" /></p>
@@ -52,12 +52,12 @@
 <p>The following pseudocode fragment shows how to set up and apply a constraint:</p>
 <pre class="prettyprint">
 Constraint constraint =
-&nbsp;&nbsp;Constraint::New&lt; &lt;target-property-type&gt; &gt;( &lt;target-handle&gt;, &lt;target-property&gt;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;constraint-function&gt; );
-constraint.AddSource( &lt;property-input-1&gt; ); 
-constraint.AddSource( &lt;property-input-2&gt; ); 
+  Constraint::New&lt; &lt;target-property-type&gt; &gt;( &lt;target-handle&gt;, &lt;target-property&gt;,
+                                             &lt;constraint-function&gt; );
+constraint.AddSource( &lt;property-input-1&gt; );
+constraint.AddSource( &lt;property-input-2&gt; );
 
-constraint.Apply(); 
+constraint.Apply();
 </pre>
 
 <p>Multiple constraints can be applied to the same actor at the same time. The order in which constraints are applied is important as this is the order in which they are processed in the update thread.</p>
@@ -72,19 +72,19 @@ constraint.Apply();
 <p>A constraint input source can be one of the following types:</p>
 <ul>
 <li><strong>Local source</strong> (use <code>Dali::LocalSource</code>)
-<p>A local source is based on the local properties (such as size, position, scale, orientation, or color) of an actor. For example, the actor&#39;s orientation can be used as a constraint input source:</p>
+<p>A local source is based on the local properties (such as size, position, scale, orientation, or color) of an actor. For example, the actor's orientation can be used as a constraint input source:</p>
 <pre class="prettyprint">
 ConstraintSource source( LocalSource( Actor::Property::ORIENTATION ) );
 </pre>
 </li>
 <li><strong>Parent source</strong> (use <code>Dali::ParentSource</code>)
-<p>A parent source is based on properties of the actor&#39;s parent. For example, a parent&#39;s position can be used as a constraint input source:</p>
+<p>A parent source is based on properties of the actor's parent. For example, a parent's position can be used as a constraint input source:</p>
 <pre class="prettyprint">
 ConstraintSource source( ParentSource( Actor::Property::POSITION ) );
 </pre>
 </li>
 <li><strong>Other handle source</strong> (use <code>Dali::Source</code>)
-<p>You can base your source on the properties of another handle altogether. For example, a sibling actor&#39;s color can be used as a constraint input source:</p>
+<p>You can base your source on the properties of another handle altogether. For example, a sibling actor's color can be used as a constraint input source:</p>
 <pre class="prettyprint">
 ConstraintSource source( Source( anotherHandle, Actor::Property::COLOR ) );
 </pre>
@@ -126,42 +126,42 @@ const Vector3&amp; parentSize( inputs[3]-&gt;GetVector3() );
 // C function
 void MyConstraintFunction( Vector4&amp; current, const PropertyInputContainer&amp; inputs )
 {
-&nbsp;&nbsp;const Vector3&amp; position( inputs[0]-&gt;GetVector3() );
-
-&nbsp;&nbsp;float distance = fabs( position.x );
-&nbsp;&nbsp;if( distance &gt; 100.0f ) // More than 100.0f away, color is red
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;current.g = current.b = 0.0f;
-&nbsp;&nbsp;}
-&nbsp;&nbsp;else // Otherwise it blends between white and red
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;current.g = current.b = ( 100.0f - distance ) / 100.0f;
-&nbsp;&nbsp;}
+  const Vector3&amp; position( inputs[0]-&gt;GetVector3() );
+
+  float distance = fabs( position.x );
+  if( distance &gt; 100.0f ) // More than 100.0f away, color is red
+  {
+    current.g = current.b = 0.0f;
+  }
+  else // Otherwise it blends between white and red
+  {
+    current.g = current.b = ( 100.0f - distance ) / 100.0f;
+  }
 }
 
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;// Create a control
-&nbsp;&nbsp;Control control = Control::New();
-&nbsp;&nbsp;control.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;control.SetSize( 100.0f, 100.0f );
-&nbsp;&nbsp;control.SetBackgroundColor( Color::WHITE );
-&nbsp;&nbsp;Stage::GetCurrent().Add( control );
-
-&nbsp;&nbsp;// Use PanGestureDetector to move the control with touch panning
-&nbsp;&nbsp;mDetector = PanGestureDetector::New();
-&nbsp;&nbsp;mDetector.Attach( control );
-&nbsp;&nbsp;mDetector.DetectedSignal().Connect( this, &amp;HelloWorldExample::OnPan );
-
-&nbsp;&nbsp;// Create a constraint that targets the control
-&nbsp;&nbsp;Constraint constraint = Constraint::New&lt; Vector4 &gt;( control, Actor::Property::COLOR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MyConstraintFunction );
-
-&nbsp;&nbsp;// Add the POSITION property of the control as a constraint input
-&nbsp;&nbsp;constraint.AddSource( LocalSource( Actor::Property::POSITION ) ); 
-
-&nbsp;&nbsp;// Apply the constraint
-&nbsp;&nbsp;constraint.Apply(); 
+  // Create a control
+  Control control = Control::New();
+  control.SetParentOrigin( ParentOrigin::CENTER );
+  control.SetSize( 100.0f, 100.0f );
+  control.SetBackgroundColor( Color::WHITE );
+  Stage::GetCurrent().Add( control );
+
+  // Use PanGestureDetector to move the control with touch panning
+  mDetector = PanGestureDetector::New();
+  mDetector.Attach( control );
+  mDetector.DetectedSignal().Connect( this, &amp;HelloWorldExample::OnPan );
+
+  // Create a constraint that targets the control
+  Constraint constraint = Constraint::New&lt; Vector4 &gt;( control, Actor::Property::COLOR,
+                                                      MyConstraintFunction );
+
+  // Add the POSITION property of the control as a constraint input
+  constraint.AddSource( LocalSource( Actor::Property::POSITION ) );
+
+  // Apply the constraint
+  constraint.Apply();
 }
 </pre>
 
@@ -169,8 +169,8 @@ void HelloWorldExample::Create( Application&amp; application )
 <pre class="prettyprint">
 void HelloWorldExample::OnPan( Actor actor, const PanGesture&amp; gesture )
 {
-&nbsp;&nbsp;// Move the button using the detected gesture
-&nbsp;&nbsp;actor.TranslateBy( Vector3( gesture.displacement ) );
+  // Move the button using the detected gesture
+  actor.TranslateBy( Vector3( gesture.displacement ) );
 }
 </pre>
 
@@ -184,35 +184,35 @@ void HelloWorldExample::OnPan( Actor actor, const PanGesture&amp; gesture )
 <pre class="prettyprint">
 struct MyConstraintFunctor
 {
-&nbsp;&nbsp;// Constructor which takes the distance at which the actor is red
-&nbsp;&nbsp;MyConstraintFunctor(float distance)
-&nbsp;&nbsp;&nbsp;&nbsp;: mDistance(distance)  {}
-
-&nbsp;&nbsp;// Functor
-&nbsp;&nbsp;void operator()( Vector4&amp; current, const PropertyInputContainer&amp; inputs )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;const Vector3&amp; position( inputs[0]-&gt;GetVector3() );
-
-&nbsp;&nbsp;&nbsp;&nbsp;float distance = fabs( position.x );
-&nbsp;&nbsp;&nbsp;&nbsp;if( distance &gt; mDistance ) // More than mDistance away, color is red
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.g = current.b = 0.0f;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;else // Otherwise it blends between white and red
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current.g = current.b = ( mDistance - distance ) / mDistance;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
-
-&nbsp;&nbsp;const float mDistance; // Data
+  // Constructor which takes the distance at which the actor is red
+  MyConstraintFunctor(float distance)
+    : mDistance(distance)  {}
+
+  // Functor
+  void operator()( Vector4&amp; current, const PropertyInputContainer&amp; inputs )
+  {
+    const Vector3&amp; position( inputs[0]-&gt;GetVector3() );
+
+    float distance = fabs( position.x );
+    if( distance &gt; mDistance ) // More than mDistance away, color is red
+    {
+      current.g = current.b = 0.0f;
+    }
+    else // Otherwise it blends between white and red
+    {
+      current.g = current.b = ( mDistance - distance ) / mDistance;
+    }
+  }
+
+  const float mDistance; // Data
 };
 </pre>
 
 <p>The <code>MyConstraintFunctor()</code> functor can be applied to the <code>control</code> as follows:</p>
- 
+
 <pre class="prettyprint">
 Constraint constraint = Constraint::New&lt; Vector4 &gt;( control, Actor::Property::COLOR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MyConstraintFunctor( 200.0f ) );
+                                                    MyConstraintFunctor( 200.0f ) );
 </pre>
 
 <p>The <code>MyConstraintFunctor()</code> functor can be used also with another constraint with a different distance. Instead of using the default functor (<code>operator()</code>), another function can be declared in the class or struct and used as the constraint function. For more information, see the <code>New()</code> function in the <code>Dali::Constraint</code> class.</p>
@@ -229,11 +229,11 @@ Constraint constraint = Constraint::New&lt; Vector4 &gt;( control, Actor::Proper
 <p>The built-in <code>Dali::EqualToConstraint()</code> function can be used if you only need to set a property equal to another property:</p>
 <pre class="prettyprint">
 Constraint constraint = Constraint::New&lt; Vector3 &gt;( actor, Actor::Property::POSITION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EqualToConstraint() );
+                                                    EqualToConstraint() );
 constraint.AddSource( Source( anotherActor, Actor::Property::POSITION ) );
 constraint.Apply();
 </pre>
-<p>Here the <code>actor</code>&#39;s position is set to equal the position of <code>anotherActor</code>.</p>
+<p>Here the <code>actor</code>'s position is set to equal the position of <code>anotherActor</code>.</p>
 </li>
 
 <li>Relative to constraint
@@ -242,33 +242,33 @@ constraint.Apply();
 
 <pre class="prettyprint">
 Constraint constraint = Constraint::New&lt; Vector3 &gt;( actor, Actor::Property::POSITION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RelativeToConstraint( 2.0f ) );
+                                                    RelativeToConstraint( 2.0f ) );
 constraint.AddSource( Source( anotherActor, Actor::Property::POSITION ) );
 constraint.Apply();
 </pre>
- 
-<p>Here the <code>actor</code>&#39;s position is relative to the position of <code>anotherActor</code> (multiplied by a given scale). If <code>anotherActor</code> is at (10.0f, 20.0f, 30.0f), <code>actor</code> is at (20.0f, 40.0f, 60.0f).</p></li></ul>
+
+<p>Here the <code>actor</code>'s position is relative to the position of <code>anotherActor</code> (multiplied by a given scale). If <code>anotherActor</code> is at (10.0f, 20.0f, 30.0f), <code>actor</code> is at (20.0f, 40.0f, 60.0f).</p></li></ul>
 
 
 <h2 id="remove" name="remove">Removing Constraints</h2>
 
-<p>When no longer needed, the actor&#39;s constraints can be removed in several ways:</p>
+<p>When no longer needed, the actor's constraints can be removed in several ways:</p>
 
 <ul>
 <li>To remove the constraint itself and stop applying it:
 <pre class="prettyprint">
 constraint.Remove();
-</pre> 
+</pre>
 </li>
 <li>To remove all constraints applied to an actor:
 <pre class="prettyprint">
 actor.RemoveConstraints();
-</pre> 
+</pre>
 </li>
 <li>To remove all constraints with the tag from an actor (the tag can be set using the <code>SetTag()</code> function):
 <pre class="prettyprint">
 actor.RemoveConstraints( tag );
-</pre> 
+</pre>
 </li></ul>
 
 
@@ -313,8 +313,8 @@ actor.RemoveConstraints( tag );
                <td>Use a constraint.</td>
        </tr>
        <tr>
-               <td>Need to modify an actor&#39;s property in real time based on some calculations that require additional data to be stored in-between frames.</td>
-               <td>Use a constraint. 
+               <td>Need to modify an actor's property in real time based on some calculations that require additional data to be stored in-between frames.</td>
+               <td>Use a constraint.
                           <p>The constraint functor can hold any variables within it that need to be preserved frame-to-frame.</p></td>
        </tr>
    </tbody>
diff --git a/org.tizen.guides/html/native/ui/dali/control_base_n.htm b/org.tizen.guides/html/native/ui/dali/control_base_n.htm
index 27bc4e9..9c4c179 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/control_base_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/control_base_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Control</title>  
+       <title>Control</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -37,7 +37,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">Dali::Toolkit::Control API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Control</h1>
@@ -55,18 +55,18 @@ control.SetSize( 200.0f, 200.0f );
 control.SetBackgroundColor( Color::RED );
 </pre>
 
-<p align="center"><strong>Figure: Control object with a red background</strong></p>  
-       <p align="center"><img alt="Control object with a red background" src="../../../images/background_control_color.png"/></p> 
+<p align="center"><strong>Figure: Control object with a red background</strong></p>
+       <p align="center"><img alt="Control object with a red background" src="../../../images/background_control_color.png"/></p>
 
 <p>You can handle all existing controls similarly. For example, to set the background color for a TextLabel:</p>
 
 <pre class="prettyprint">
-TextLabel label = TextLabel::New( &quot;Hello World&quot; );
+TextLabel label = TextLabel::New( "Hello World" );
 label.SetBackgroundColor( Dali::Color::RED );
 </pre>
 
-<p align="center"><strong>Figure: TextLabel object with a red background</strong></p>  
-       <p align="center"><img alt="TextLabel object with a red background" src="../../../images/background_textlabel.png"/></p> 
+<p align="center"><strong>Figure: TextLabel object with a red background</strong></p>
+       <p align="center"><img alt="TextLabel object with a red background" src="../../../images/background_textlabel.png"/></p>
 
 
 <h2 id="background-image" name="background-image">Setting the Background Image</h2>
@@ -75,13 +75,13 @@ label.SetBackgroundColor( Dali::Color::RED );
 
 <pre class="prettyprint">
 Control control = Control::New();
-Image image = Image::New( &quot;image.png&quot; );
+Image image = Image::New( "image.png" );
 control.SetBackgroundImage( image );
 </pre>
 
-<p align="center"><strong>Figure: Control object with a background image</strong></p>  
-       <p align="center"><img alt="Control object with a background image" src="../../../images/background_image.png"/></p> 
-  
+<p align="center"><strong>Figure: Control object with a background image</strong></p>
+       <p align="center"><img alt="Control object with a background image" src="../../../images/background_image.png"/></p>
+
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/native/ui/dali/dali_n.htm b/org.tizen.guides/html/native/ui/dali/dali_n.htm
index b20f7e7..bb16cfe 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/dali_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/dali_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Dynamic Animation Library (DALi)</title>  
+       <title>Dynamic Animation Library (DALi)</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,7 +32,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__dali.html">DALi API References for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Dynamic Animation Library (DALi)</h1>
@@ -60,7 +60,7 @@
        <p>Enables you to use DALi more effectively with background knowledge.</p></li>
 
 </ul>
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/dali_overview_n.htm b/org.tizen.guides/html/native/ui/dali/dali_overview_n.htm
index 4543797..c5c81d8 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/dali_overview_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/dali_overview_n.htm
@@ -98,7 +98,7 @@
 
 <h2 id="create" name="create">Creating a DALi Application</h2>
 
-<p>To create a &#39;Hello World&#39; application with Dali:</p>
+<p>To create a 'Hello World' application with Dali:</p>
 <ol>
 <li>Create a DALi project:
 <ol type="a">
@@ -120,72 +120,72 @@ using namespace Dali::Toolkit;
 
 class HelloWorldExample : public ConnectionTracker
 {
-&nbsp;&nbsp;public:
-
-&nbsp;&nbsp;&nbsp;&nbsp;HelloWorldExample( Application&amp; application )
-&nbsp;&nbsp;&nbsp;&nbsp;: mApplication( application )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Connect to the application&#39;s init signal
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect( this, &amp;HelloWorldExample::Create );
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;~HelloWorldExample()
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Nothing to do here
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;// Init signal is received once (only) during the application lifetime
-&nbsp;&nbsp;&nbsp;&nbsp;void Create( Application&amp; application )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Get a handle to the stage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.SetBackgroundColor( Color::WHITE );
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TextLabel textLabel = TextLabel::New( &quot;Hello World&quot; );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textLabel.SetSize( stage.GetSize() );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, &quot;CENTER&quot; );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, &quot;CENTER&quot; );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add( textLabel );
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Connect to touch and key event signals
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.GetRootLayer().TouchSignal().Connect( this,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;HelloWorldExample::OnTouch );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.KeyEventSignal().Connect( this, &amp;HelloWorldExample::OnKeyEvent );
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;bool OnTouch( Actor actor, const TouchData&amp; touch )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Quit the application
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.Quit();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;void OnKeyEvent( const KeyEvent&amp; event )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if( event.state == KeyEvent::Down )
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if( IsKey( event, DALI_KEY_ESCAPE ) || IsKey( event, DALI_KEY_BACK ) )
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.Quit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;private:
-&nbsp;&nbsp;&nbsp;&nbsp;Application&amp; mApplication;
+  public:
+
+    HelloWorldExample( Application&amp; application )
+    : mApplication( application )
+    {
+      // Connect to the application's init signal
+      mApplication.InitSignal().Connect( this, &amp;HelloWorldExample::Create );
+    }
+
+    ~HelloWorldExample()
+    {
+      // Nothing to do here
+    }
+
+    // Init signal is received once (only) during the application lifetime
+    void Create( Application&amp; application )
+    {
+      // Get a handle to the stage
+      Stage stage = Stage::GetCurrent();
+      stage.SetBackgroundColor( Color::WHITE );
+
+      TextLabel textLabel = TextLabel::New( "Hello World" );
+      textLabel.SetSize( stage.GetSize() );
+      textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+      textLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+      textLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
+      stage.Add( textLabel );
+
+      // Connect to touch and key event signals
+      stage.GetRootLayer().TouchSignal().Connect( this,
+                                                  &amp;HelloWorldExample::OnTouch );
+      stage.KeyEventSignal().Connect( this, &amp;HelloWorldExample::OnKeyEvent );
+    }
+
+    bool OnTouch( Actor actor, const TouchData&amp; touch )
+    {
+      // Quit the application
+      mApplication.Quit();
+
+      return true;
+    }
+
+    void OnKeyEvent( const KeyEvent&amp; event )
+    {
+      if( event.state == KeyEvent::Down )
+      {
+        if( IsKey( event, DALI_KEY_ESCAPE ) || IsKey( event, DALI_KEY_BACK ) )
+        {
+          mApplication.Quit();
+        }
+      }
+    }
+
+  private:
+    Application&amp; mApplication;
 };
 
 
 // Entry point for DALi applications
 int main( int argc, char **argv )
 {
-&nbsp;&nbsp;Application application = Application::New( &amp;argc, &amp;argv );
-&nbsp;&nbsp;HelloWorldExample test( application );
-&nbsp;&nbsp;application.MainLoop();
+  Application application = Application::New( &amp;argc, &amp;argv );
+  HelloWorldExample test( application );
+  application.MainLoop();
 
-&nbsp;&nbsp;return 0;
+  return 0;
 }
 </pre>
 </li>
@@ -234,11 +234,11 @@ mApplication.InitSignal().Connect( this, &amp;HelloWorldExample::Create );
 Stage stage = Stage::GetCurrent();
 stage.SetBackgroundColor( Color::WHITE );
 
-TextLabel textLabel = TextLabel::New( &quot;Hello World&quot; );
+TextLabel textLabel = TextLabel::New( "Hello World" );
 textLabel.SetSize( stage.GetSize() );
 textLabel.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-textLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, &quot;CENTER&quot; );
-textLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, &quot;CENTER&quot; );
+textLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+textLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
 stage.Add( textLabel );
 </pre>
 
@@ -260,7 +260,7 @@ stage.KeyEventSignal().Connect( this, &amp;HelloWorldExample::OnKeyEvent );
 bool OnTouch( Actor actor, const TouchData&amp; touch )
 </pre>
 </li>
- 
+
 <li>Start the application main loop:
 
 <p>To run the application, start its main loop. This ensures that images are displayed, and events as well as signals are dispatched and captured.</p>
@@ -286,7 +286,7 @@ application.MainLoop();
  <p align="center"><strong>Figure: Basic DALi application</strong></p>
 <p align="center"><img alt="Basic DALi application" src="../../../images/hello_world_dali.png" /></p>
 
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/event_handling_n.htm b/org.tizen.guides/html/native/ui/dali/event_handling_n.htm
index 89e8c2b..9404632 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/event_handling_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/event_handling_n.htm
@@ -11,7 +11,7 @@
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Event Handling</title> 
+       <title>Event Handling</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -75,9 +75,9 @@
 <p>The concept of signal and slots were introduced by Qt for communication between objects, and it inspires DALi.</p>
 
 <p align="center"><strong>Figure: Schematic example of signal-slot connections</strong></p>
-<p align="center"><img alt="Schematic example of signal-slot connections" src="../../../images/signal_slot.png"/></p> 
+<p align="center"><img alt="Schematic example of signal-slot connections" src="../../../images/signal_slot.png"/></p>
 <p>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.</p>
- 
+
 <p>The signal and slot system has following advantages:</p>
 <ul>
 <li>Object-oriented: supports callbacks for C++ member functions</li>
@@ -98,7 +98,7 @@ TouchDataSignalType&amp; TouchSignal();</pre>
 <p>This means that a slot of the following type can be connected to the return value of the <code>Actor::TouchSignal()</code> function:</p>
 <pre class="prettyprint">
 bool YourCallbackName( Actor actor,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const TouchData&amp; data );
+                       const TouchData&amp; data );
 </pre>
 
 <p>The return value <code>true</code> indicates that the touch event must be consumed. Otherwise, the signal is emitted on the next sensitive parent of the actor. Note that a callback function signature varies depending on its corresponding signal type. Some signal types do not have a return value in their callback functions.</p>
@@ -114,45 +114,45 @@ bool YourCallbackName( Actor actor,
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;// Control is one of the simplest types of Actor which is visible
-&nbsp;&nbsp;Control control = Control::New();
-&nbsp;&nbsp;control.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;control.SetSize( 100.0f, 100.0f );
-&nbsp;&nbsp;control.SetBackgroundColor( Color::WHITE );
-&nbsp;&nbsp;Stage::GetCurrent().Add( control );
-
-&nbsp;&nbsp;// Connect to a touch signal emitted by the control
-&nbsp;&nbsp;control.TouchSignal().Connect( this, &amp;HelloWorldExample::OnTouch );
+  // Control is one of the simplest types of Actor which is visible
+  Control control = Control::New();
+  control.SetParentOrigin( ParentOrigin::CENTER );
+  control.SetSize( 100.0f, 100.0f );
+  control.SetBackgroundColor( Color::WHITE );
+  Stage::GetCurrent().Add( control );
+
+  // Connect to a touch signal emitted by the control
+  control.TouchSignal().Connect( this, &amp;HelloWorldExample::OnTouch );
 }
 
 bool HelloWorldExample::OnTouch( Actor actor, TouchData&amp; touch )
 {
-&nbsp;&nbsp;const std::size_t pointCount = touch.GetPointCount();
-&nbsp;&nbsp;if( pointCount == 1 )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;// Single touch event
-
-&nbsp;&nbsp;&nbsp;&nbsp;// Get touch state of the primary point
-&nbsp;&nbsp;&nbsp;&nbsp;PointState::Type pointState = touch.GetState( 0 );
-&nbsp;&nbsp;&nbsp;&nbsp;if( pointState == PointState::DOWN )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// User has just pressed on the device
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;else if( pointState == PointState::UP )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// User has just released their finger from the device
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
-&nbsp;&nbsp;else
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;// Multi-touch event
-&nbsp;&nbsp;}
-
-&nbsp;&nbsp;return true; // Touch handled
+  const std::size_t pointCount = touch.GetPointCount();
+  if( pointCount == 1 )
+  {
+    // Single touch event
+
+    // Get touch state of the primary point
+    PointState::Type pointState = touch.GetState( 0 );
+    if( pointState == PointState::DOWN )
+    {
+      // User has just pressed on the device
+    }
+    else if( pointState == PointState::UP )
+    {
+      // User has just released their finger from the device
+    }
+  }
+  else
+  {
+    // Multi-touch event
+  }
+
+  return true; // Touch handled
 }
 </pre>
 
-<p>The touch event is first emitted to the hit actor by the primary touch point, which is the first point that the user touches. If this hit actor does not handle the event, then the event is offered to the hit actor&#39;s parent. Again, if the parent does not handle this event, it is then offered to its parent and so on until the stage is reached or the event is consumed.</p>
+<p>The touch event is first emitted to the hit actor by the primary touch point, which is the first point that the user touches. If this hit actor does not handle the event, then the event is offered to the hit actor's parent. Again, if the parent does not handle this event, it is then offered to its parent and so on until the stage is reached or the event is consumed.</p>
 
 <p>If a parent and child actor both connect to the touch signal, the touch event is first offered to the child. If it is consumed by the child, the parent is not informed.</p>
 
@@ -167,23 +167,23 @@ bool HelloWorldExample::OnTouch( Actor actor, TouchData&amp; touch )
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;// Simple control to render the screen
-&nbsp;&nbsp;PushButton button = PushButton::New();
-&nbsp;&nbsp;Stage::GetCurrent().Add( button );
-&nbsp;&nbsp;// Connect to a key event signal emitted by the stage
-&nbsp;&nbsp;Stage::GetCurrent().KeyEventSignal().Connect( this, &amp;HelloWorldExample::OnKeyEvent );
+  // Simple control to render the screen
+  PushButton button = PushButton::New();
+  Stage::GetCurrent().Add( button );
+  // Connect to a key event signal emitted by the stage
+  Stage::GetCurrent().KeyEventSignal().Connect( this, &amp;HelloWorldExample::OnKeyEvent );
 }
 
 void HelloWorldExample::OnKeyEvent( const KeyEvent&amp; event )
 {
-&nbsp;&nbsp;if( event.state == KeyEvent::Down )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;if( IsKey( event, DALI_KEY_ESCAPE ) || IsKey( event, DALI_KEY_BACK ) )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Quit the application when escape or back key is pressed
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.Quit();
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  if( event.state == KeyEvent::Down )
+  {
+    if( IsKey( event, DALI_KEY_ESCAPE ) || IsKey( event, DALI_KEY_BACK ) )
+    {
+      // Quit the application when escape or back key is pressed
+      mApplication.Quit();
+    }
+  }
 }
 </pre>
 
@@ -363,7 +363,7 @@ void HelloWorldExample::OnKeyEvent( const KeyEvent&amp; event )
        </tr>
    </tbody>
   </table>
-  
+
   <p>The actor receiving events is passed to the callbacks.</p>
 </li>
 
@@ -469,7 +469,7 @@ void HelloWorldExample::OnKeyEvent( const KeyEvent&amp; event )
        </tr>
    </tbody>
   </table>
-  
+
 <p><code>Dali::Toolkit::KeyboardFocusManager</code> 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.</p>
 </li>
 </ul>
@@ -528,28 +528,28 @@ void HelloWorldExample::OnKeyEvent( const KeyEvent&amp; event )
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 class HelloWorldExample : public ConnectionTracker
 {
-&nbsp;&nbsp;// Gesture detector must be a member variable to exist outside the local scope
-&nbsp;&nbsp;PanGestureDetector mDetector;
+  // Gesture detector must be a member variable to exist outside the local scope
+  PanGestureDetector mDetector;
 };
 
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;PushButton button = PushButton::New();
-&nbsp;&nbsp;button.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;button.SetSize( 100.0f, 100.0f );
-&nbsp;&nbsp;Stage::GetCurrent().Add( button );
-
-&nbsp;&nbsp;// Create a PanGestureDetector
-&nbsp;&nbsp;mDetector = PanGestureDetector::New();
-&nbsp;&nbsp;mDetector.Attach( button );
-&nbsp;&nbsp;// Attach the button to the detector
-&nbsp;&nbsp;mDetector.DetectedSignal().Connect( this, &amp;HelloWorldExample::OnPan );
+  PushButton button = PushButton::New();
+  button.SetParentOrigin( ParentOrigin::CENTER );
+  button.SetSize( 100.0f, 100.0f );
+  Stage::GetCurrent().Add( button );
+
+  // Create a PanGestureDetector
+  mDetector = PanGestureDetector::New();
+  mDetector.Attach( button );
+  // Attach the button to the detector
+  mDetector.DetectedSignal().Connect( this, &amp;HelloWorldExample::OnPan );
 }
 
 void HelloWorldExample::OnPan( Actor actor, const PanGesture&amp; gesture )
 {
-&nbsp;&nbsp;// Move the button using detected gesture
-&nbsp;&nbsp;actor.TranslateBy( Vector3( gesture.displacement ) );
+  // Move the button using detected gesture
+  actor.TranslateBy( Vector3( gesture.displacement ) );
 }
 </pre>
 
@@ -560,7 +560,7 @@ void HelloWorldExample::OnPan( Actor actor, const PanGesture&amp; gesture )
 <p>DALi provides the automatic connection management mechanism to prevent this kind of situation. The key is the <code>Dali::ConnectionTracker</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). It tracks connections between signals and slots, and performs an automatic disconnection when either the signal or slot is deleted.</p>
 
 <p>Due to this mechanism, all the DALi sample codes start with a controller class derived from the <code>Dali::ConnectionTracker</code> class. This is a safe and typical way of making a DALi application. You can, of course, create other structures using the <code>Dali::ConnectionTracker</code> class.</p>
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/flexcontainer_n.htm b/org.tizen.guides/html/native/ui/dali/flexcontainer_n.htm
index d561be2..7272f7e 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/flexcontainer_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/flexcontainer_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -45,7 +45,7 @@
 
 <p>The <code>Dali::Toolkit::FlexContainer</code> class provides a control that implements a subset of the <a href="https://www.w3.org/TR/css-flexbox-1/" target="_blank">CSS Flexible Box Layout Module Level 1 specification (defined by W3C)</a>.</p>
 
-<p>The flexible box (flexbox) is a CSS3 Web layout model, which allows responsive elements within a container, automatically arranged to different size screens or devices. The following figure illustrates the various directions and terms applied to a flex container with the &quot;flex direction&quot; defined as &quot;row&quot;.</p>
+<p>The flexible box (flexbox) is a CSS3 Web layout model, which allows responsive elements within a container, automatically arranged to different size screens or devices. The following figure illustrates the various directions and terms applied to a flex container with the "flex direction" defined as "row".</p>
 
 <p align="center"><strong>Figure: Flex container terms</strong></p>
        <p align="center"><img alt="Flex container terms" src="../../../images/dali_flexcontainer1.png"/></p>
@@ -55,7 +55,7 @@
 
 <p>The following basic example shows how to create a gallery-like flexbox layout using the <code>Dali::Toolkit::FlexContainer</code> object.</p>
 
-<p align="center"><strong>Figure: Flex container example</strong></p> 
+<p align="center"><strong>Figure: Flex container example</strong></p>
 <p align="center"><img alt="Flex container example" src="../../../images/dali_flexcontainer_demo.png"/></p>
 
 <ol>
@@ -67,20 +67,20 @@ FlexContainer flexContainer = FlexContainer::New();
 flexContainer.SetParentOrigin( ParentOrigin::TOP_LEFT );
 flexContainer.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 flexContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dimension::ALL_DIMENSIONS );
+                               Dimension::ALL_DIMENSIONS );
 // Set the background color to be white
 flexContainer.SetBackgroundColor( Color::WHITE );
 // Add the container to the stage
-Stage::GetCurrent().Add( flexContainer ); 
+Stage::GetCurrent().Add( flexContainer );
 </pre>
 </li>
 
-<li>Set the flex direction of the main container to &quot;column&quot; to make the toolbar and the actual content display vertically:
+<li>Set the flex direction of the main container to "column" to make the toolbar and the actual content display vertically:
 
 <pre class="prettyprint">
 // Display toolbar and content vertically
 flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::COLUMN ); 
+                           FlexContainer::COLUMN );
 </pre>
 </li>
 
@@ -92,15 +92,15 @@ FlexContainer toolBar = FlexContainer::New();
 toolBar.SetParentOrigin( ParentOrigin::TOP_LEFT );
 toolBar.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 // Set the background color for the toolbar
-toolBar.SetBackgroundColor( Color::CYAN ); 
+toolBar.SetBackgroundColor( Color::CYAN );
 // Add it to the main container
 flexContainer.Add( toolBar );
 flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::COLUMN ); 
+                           FlexContainer::COLUMN );
 </pre>
 </li>
 
-<li>To make the buttons and title display horizontally and be vertically aligned to the center of the toolbar, set the toolbar flex direction to &quot;row&quot; and set its <code>ALIGN_ITEMS</code> property to center.
+<li>To make the buttons and title display horizontally and be vertically aligned to the center of the toolbar, set the toolbar flex direction to "row" and set its <code>ALIGN_ITEMS</code> property to center.
 <p>Set the <code>FLEX</code> property to make the toolbar and the actual content share the height of the main container, so that the toolbar occupies 10 percent of the whole vertical space and the content occupies the rest of the vertical space.</p>
 
 <pre class="prettyprint">
@@ -108,7 +108,7 @@ flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION,
 toolBar.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
 // Align toolbar items vertically center
 toolBar.SetProperty( FlexContainer::Property::ALIGN_ITEMS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::ALIGN_CENTER );
+                     FlexContainer::ALIGN_CENTER );
 // 10 percent of available space in the cross axis
 toolBar.SetProperty( FlexContainer::ChildProperty::FLEX, 0.1f );
 </pre>
@@ -124,14 +124,14 @@ content.SetParentOrigin( ParentOrigin::TOP_LEFT );
 content.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 // Display items horizontally
 content.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
-// Align items horizontally center 
+// Align items horizontally center
 content.SetProperty( FlexContainer::Property::JUSTIFY_CONTENT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::JUSTIFY_CENTER );
+                     FlexContainer::JUSTIFY_CENTER );
 // Align items vertically center
 content.SetProperty( FlexContainer::Property::ALIGN_ITEMS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::ALIGN_CENTER );
+                     FlexContainer::ALIGN_CENTER );
 // 90 percent of available space in the cross axis
-content.SetProperty( FlexContainer::ChildProperty::FLEX, 0.9f ); 
+content.SetProperty( FlexContainer::ChildProperty::FLEX, 0.9f );
 // Add it to the main container
 flexContainer.Add( content );
 </pre>
@@ -146,41 +146,41 @@ PushButton prevButton = PushButton::New();
 prevButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 prevButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 // Minimum size the button must keep
-prevButton.SetMinimumSize( Vector2( 100.0f, 60.0f ) ); 
+prevButton.SetMinimumSize( Vector2( 100.0f, 60.0f ) );
 // Set 10 pixel margin around the button
 prevButton.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) ); 
+                        Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
 toolBar.Add( prevButton );
 // Set the button text
 Property::Map labelMap;
-labelMap[&quot;text&quot;] = &quot;Prev&quot;;
-labelMap[&quot;textColor&quot;] = Color::BLACK;
+labelMap["text"] = "Prev";
+labelMap["textColor"] = Color::BLACK;
 prevButton.SetProperty( Button::Property::LABEL, labelMap );
 // Add a title to the center of the toolbar
-TextLabel title = TextLabel::New( &quot;Gallery&quot; );
+TextLabel title = TextLabel::New( "Gallery" );
 title.SetParentOrigin( ParentOrigin::TOP_LEFT );
 title.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 title.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-title.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, &quot;CENTER&quot; );
-title.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, &quot;CENTER&quot; );
+title.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+title.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
 // Take all the available space left apart from the 2 buttons
-title.SetProperty( FlexContainer::ChildProperty::FLEX, 1.0f ); 
+title.SetProperty( FlexContainer::ChildProperty::FLEX, 1.0f );
 // Set 10 pixel margin around the title
 title.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) ); 
+                   Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
 toolBar.Add( title );
 // Add a button to the right of the toolbar
 PushButton nextButton = PushButton::New();
 nextButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 nextButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 // Minimum size the button must keep
-nextButton.SetMinimumSize( Vector2( 100.0f, 60.0f ) ); 
+nextButton.SetMinimumSize( Vector2( 100.0f, 60.0f ) );
 // Set 10 pixel margin around the button
 nextButton.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) ); 
+                        Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
 toolBar.Add( nextButton );
 // Set the button text
-labelMap[&quot;text&quot;] = &quot;Next&quot;;
+labelMap["text"] = "Next";
 nextButton.SetProperty( Button::Property::LABEL, labelMap );
 </pre>
 
@@ -194,12 +194,12 @@ nextButton.SetProperty( Button::Property::LABEL, labelMap );
 ImageView imageView = ImageView::New( "image.jpg" );
 imageView.SetParentOrigin( ParentOrigin::TOP_LEFT );
 imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-content.Add( imageView ); 
+content.Add( imageView );
 </pre>
 </li>
 </ol>
 
-       
+
 <h2 id="property">Modifying FlexContainer Properties</h2>
 
 <p>You can modify the flex container appearance and behavior through the following properties:</p>
@@ -214,7 +214,7 @@ content.Add( imageView );
 
 <p align="center"><strong>Figure: CONTENT_DIRECTION RTL</strong></p>
         <p align="center"><img alt="CONTENT_DIRECTION RTL" src="../../../images/dali_flexcontainer_content-direction-rtl.png"/></p>
-               
+
 <p align="center" class="Table"><strong>Table: CONTENT_DIRECTION values</strong></p>
 <table>
    <tbody>
@@ -224,7 +224,7 @@ content.Add( imageView );
     </tr>
     <tr>
                 <td><code>INHERIT</code></td>
-                <td>Inherits the parent&#39;s direction</td>
+                <td>Inherits the parent's direction</td>
         </tr>
         <tr>
                 <td><code>LTR</code></td>
@@ -416,7 +416,7 @@ content.Add( imageView );
 FlexContainer flexContainer = FlexContainer::New();
 // Set the flex direction to lay out the items horizontally
 flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::ROW );
+                           FlexContainer::ROW );
 
 // Create flex items and set the proportion
 Control item1 = Control::New();
@@ -438,7 +438,7 @@ flexContainer.Add( item5 );
 </li>
 <li><code>ALIGN_SELF</code>
 
-<p>This property specifies how the item aligns along the cross axis. If set, this property overrides the default alignment for all items defined by the container&#39;s <code>ALIGN_ITEMS</code> property.</p>
+<p>This property specifies how the item aligns along the cross axis. If set, this property overrides the default alignment for all items defined by the container's <code>ALIGN_ITEMS</code> property.</p>
 <p align="center"><strong>Figure: ALIGN_SELF</strong></p>
 <p align="center"><img alt="ALIGN_SELF" src="../../../images/dali_flexcontainer_align-self.png"/></p>
 
@@ -449,17 +449,17 @@ flexContainer.Add( item5 );
 FlexContainer flexContainer = FlexContainer::New();
 // Set the flex direction to lay out the items horizontally
 flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::ROW );
+                           FlexContainer::ROW );
 // Set the items to be aligned at the beginning of the container
-// on the cross axis by default 
+// on the cross axis by default
 flexContainer.SetProperty( FlexContainer::Property::ALIGN_ITEMS,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::ALIGN_FLEX_START );
+                           FlexContainer::ALIGN_FLEX_START );
 
 // Create flex items and add them to the flex container
 Control item1 = Control::New();
 // Align item1 at the center of the container
 item1.SetProperty( FlexContainer::ChildProperty::ALIGN_SELF,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::ALIGN_CENTER );
+                   FlexContainer::ALIGN_CENTER );
 flexContainer.Add( item1 );
 Control item2 = Control::New();
 // item2 is aligned at the beginning of the container
@@ -467,11 +467,11 @@ flexContainer.Add( item2 );
 Control item3 = Control::New();
 // Align item3 at the bottom of the container
 item3.SetProperty( FlexContainer::ChildProperty::ALIGN_SELF,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FlexContainer::ALIGN_FLEX_END );
+                   FlexContainer::ALIGN_FLEX_END );
 flexContainer.Add( item3 );
 Control item4 = Control::New();
 // item4 is aligned at the beginning of the container
-flexContainer.Add( item4 ); 
+flexContainer.Add( item4 );
 </pre>
 </li>
 <li><code>FLEX_MARGIN</code>
@@ -502,7 +502,7 @@ FlexContainer flexContainer = FlexContainer::New();
 Control item = Control::New();
 // Add the margin around the item
 item.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
+                  Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
 // Add the item to the container
 flexContainer.Add( item );
 </pre>
diff --git a/org.tizen.guides/html/native/ui/dali/handle_n.htm b/org.tizen.guides/html/native/ui/dali/handle_n.htm
index 52bd865..905d1fa 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/handle_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/handle_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Handle/Body Pattern</title>  
+       <title>Handle/Body Pattern</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,7 +32,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1BaseHandle.html">Dali::BaseHandle API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Handle/Body Pattern</h1>
@@ -44,7 +44,7 @@
 <p>The handle/body pattern structure is beneficial for both DALi users and developers:</p>
 <ul>
        <li><strong>Easier memory management</strong>
-       <p>Each internal implementation class (body class) contains a single reference count object, which can be initialized with the static &quot;New&quot; functions in the DALi public API. This means that C++ new/delete operators do not have to be used in your code. (The internal body classes inherit from the <code>Dali::BaseObject</code> class, but you do not need to use this class directly.)</p>
+       <p>Each internal implementation class (body class) contains a single reference count object, which can be initialized with the static "New" functions in the DALi public API. This means that C++ new/delete operators do not have to be used in your code. (The internal body classes inherit from the <code>Dali::BaseObject</code> class, but you do not need to use this class directly.)</p>
        </li>
        <li><strong>Better encapsulation</strong>
        <p>The danger of API/ABI breaks is reduced, since the implementation of a class can be changed without modifying the public API, thus without recompiling code using the public API. This can also reduce the build time.</p>
@@ -58,14 +58,14 @@
 <pre class="prettyprint">
 class HandleTest
 {
-&nbsp;&nbsp;HandleTest()
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;mActor = Actor::New();
-&nbsp;&nbsp;}
+  HandleTest()
+  {
+    mActor = Actor::New();
+  }
 
-&nbsp;&nbsp;~HandleTest() {} // Actor object is destroyed automatically
+  ~HandleTest() {} // Actor object is destroyed automatically
 
-&nbsp;&nbsp;Actor mActor;
+  Actor mActor;
 };
 </pre>
 </li>
@@ -74,15 +74,15 @@ class HandleTest
 <pre class="prettyprint">
 class HandleTest
 {
-&nbsp;&nbsp;HandleTest()
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;mActors.push_back( Actor::New() );
-&nbsp;&nbsp;&nbsp;&nbsp;mActors.push_back( Actor::New() );
-&nbsp;&nbsp;}
+  HandleTest()
+  {
+    mActors.push_back( Actor::New() );
+    mActors.push_back( Actor::New() );
+  }
 
-&nbsp;&nbsp;~HandleTest() {} // Actors are destroyed automatically
+  ~HandleTest() {} // Actors are destroyed automatically
 
-&nbsp;&nbsp;std::vector&lt;Actor&gt; mActors;
+  std::vector&lt;Actor&gt; mActors;
 };
 </pre>
 </li>
@@ -91,10 +91,10 @@ class HandleTest
 <pre class="prettyprint">
 void SomeFunction( Actor actor )
 {
-&nbsp;&nbsp;if( actor )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;actor.SomeMethod();
-&nbsp;&nbsp;}
+  if( actor )
+  {
+    actor.SomeMethod();
+  }
 }
 </pre>
 </li>
@@ -102,13 +102,13 @@ void SomeFunction( Actor actor )
 <li>Validity check:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;Actor actor;  // Create a NULL object
+  Actor actor;  // Create a NULL object
 
-&nbsp;&nbsp;// At this stage, you cannot call any of the Actor functions
-&nbsp;&nbsp;if( !actor ) // This test passes, since the actor is NULL
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;actor = Actor::New();
-&nbsp;&nbsp;}
+  // At this stage, you cannot call any of the Actor functions
+  if( !actor ) // This test passes, since the actor is NULL
+  {
+    actor = Actor::New();
+  }
 }
 </pre>
 </li>
@@ -116,18 +116,18 @@ void SomeFunction( Actor actor )
 <li>Equality operators:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;Actor handle1;
-&nbsp;&nbsp;Actor handle2;
-&nbsp;&nbsp;cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // &quot;true&quot;, both handles are empty
+  Actor handle1;
+  Actor handle2;
+  cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // "true", both handles are empty
 
-&nbsp;&nbsp;handle2 = Actor::New();
-&nbsp;&nbsp;cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // &quot;false&quot;, one handle is empty
+  handle2 = Actor::New();
+  cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // "false", one handle is empty
 
-&nbsp;&nbsp;handle1 = Actor::New();
-&nbsp;&nbsp;cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // &quot;false&quot;, handles to different objects
+  handle1 = Actor::New();
+  cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // "false", handles to different objects
 
-&nbsp;&nbsp;handle1 = handle2;
-&nbsp;&nbsp;cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // &quot;true&quot;, handles to same object
+  handle1 = handle2;
+  cout &lt;&lt; handle1 == handle2 &lt;&lt; endl; // "true", handles to same object
 }
 </pre>
 </li>
@@ -136,34 +136,34 @@ void SomeFunction( Actor actor )
 <pre class="prettyprint">
 class AnimationTest
 {
-&nbsp;&nbsp;private:
-&nbsp;&nbsp;&nbsp;&nbsp;Animation mAnimation; // Animation handle
+  private:
+    Animation mAnimation; // Animation handle
 };
 
 void AnimationTest::Initialize()
 {
-&nbsp;&nbsp;// Reference count is 1, the animation object stays alive when the function returns
-&nbsp;&nbsp;mAnimation = Animation::New( 10.0f ); 
+  // Reference count is 1, the animation object stays alive when the function returns
+  mAnimation = Animation::New( 10.0f );
 }
 
 void AnimationTest::SetAnimation( Animation anim )
 {
-&nbsp;&nbsp;// Reference count of the original animation decreased, 
-&nbsp;&nbsp;// &#39;anim&#39; is referenced instead
-&nbsp;&nbsp;// If nobody else had a reference on the initial animation,
-&nbsp;&nbsp;// the object is destroyed
-&nbsp;&nbsp;mAnimation = anim; 
+  // Reference count of the original animation decreased,
+  // 'anim' is referenced instead
+  // If nobody else had a reference on the initial animation,
+  // the object is destroyed
+  mAnimation = anim;
 }
 </pre>
 
 <pre class="prettyprint">
-// At this point, you own a Dali::Actor named &quot;container&quot;
+// At this point, you own a Dali::Actor named "container"
 // Enter a code block
 {
-&nbsp;&nbsp;// Create an text label
-&nbsp;&nbsp;TextLabel actor = TextLabel::New( &quot;test&quot; );
-&nbsp;&nbsp;// Add the text label to a container
-&nbsp;&nbsp;container.Add( actor );
+  // Create an text label
+  TextLabel actor = TextLabel::New( "test" );
+  // Add the text label to a container
+  container.Add( actor );
 }
 // Exit the code block
 // At this stage, the text label is still alive
@@ -174,7 +174,7 @@ void AnimationTest::SetAnimation( Animation anim )
 </ul>
 
 
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/imageview_n.htm b/org.tizen.guides/html/native/ui/dali/imageview_n.htm
index 2db6d5a..9d5e611 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/imageview_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/imageview_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>ImageView</title>  
+       <title>ImageView</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -40,18 +40,18 @@
                        <li><a href="https://developer.tizen.org/development/sample/native/UI/%28DALi%29_ImageView" target="_blank">(DALi) ImageView Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>ImageView</h1>
 
 <p>The <code>Dali::Toolkit::ImageView</code> component displays an image.</p>
- 
-<p align="center"><strong>Figure: ImageView</strong></p>  
+
+<p align="center"><strong>Figure: ImageView</strong></p>
     <p align="center"><img alt="ImageView" src="../../../images/image_view.png"/></p>
 
 
-<h2 id="create" name="create">Creating an ImageView</h2> 
+<h2 id="create" name="create">Creating an ImageView</h2>
 
 <p>The image view is constructed by passing a <code>Dali::Image</code> object. The <code>Dali::Image</code> is an abstract base class with multiple derived classes, and the <code>Dali::ResourceImage</code> class is used for <a href="resources_n.htm">loading an image from a file or URL</a>. The following example shows how to create an <code>ImageView</code> object:</p>
 
@@ -70,7 +70,7 @@ ImageView imageView = ImageView::New( image );
 imageView.SetImage( newImage );
 </pre>
 
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/itemview_n.htm b/org.tizen.guides/html/native/ui/dali/itemview_n.htm
index cecab51..4b693cb 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/itemview_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/itemview_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>ItemView</title>  
+       <title>ItemView</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -54,7 +54,7 @@
 <p>The <code>Dali::Toolkit::ItemView</code> class is a scrollable container that can contain many items. It provides several scrollable layouts, as illustrated in the following figure.</p>
 
 
-<p align="center"><strong>Figure: ItemView layouts</strong></p>  
+<p align="center"><strong>Figure: ItemView layouts</strong></p>
 
        <table >
    <tbody>
@@ -79,19 +79,19 @@
 <pre class="prettyprint">
 class MyFactory : public ItemFactory
 {
-&nbsp;&nbsp;public:  
-&nbsp;&nbsp;&nbsp;&nbsp;virtual unsigned int GetNumberOfItems()
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Return the number of items
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return MY_ITEM_COUNT;
-&nbsp;&nbsp;&nbsp;&nbsp;} 
- 
-&nbsp;&nbsp;&nbsp;&nbsp;virtual Actor NewItem( unsigned int itemId ) 
-&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create the actor representing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// the item based on the itemId
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ImageView::New( MY_IMAGE_PATHS[itemId] );
-&nbsp;&nbsp;&nbsp;&nbsp;}
+  public:
+    virtual unsigned int GetNumberOfItems()
+    {
+      // Return the number of items
+      return MY_ITEM_COUNT;
+    }
+
+    virtual Actor NewItem( unsigned int itemId )
+    {
+      // Create the actor representing
+      // the item based on the itemId
+      return ImageView::New( MY_IMAGE_PATHS[itemId] );
+    }
 };
 </pre>
 
@@ -106,28 +106,28 @@ class MyFactory : public ItemFactory
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 class HelloWorldExample : public ConnectionTracker
 {
-&nbsp;&nbsp;// Store a factory as a member variable
-&nbsp;&nbsp;MyFactory mFactory; 
+  // Store a factory as a member variable
+  MyFactory mFactory;
 };
 
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;// Create an ItemView with the factory
-&nbsp;&nbsp;ItemView itemView = ItemView::New( mFactory ); 
-&nbsp;&nbsp;itemView.SetParentOrigin( ParentOrigin::CENTER );
+  // Create an ItemView with the factory
+  ItemView itemView = ItemView::New( mFactory );
+  itemView.SetParentOrigin( ParentOrigin::CENTER );
 
-&nbsp;&nbsp;// Create a layout
-&nbsp;&nbsp;ItemLayoutPtr spiralLayout = DefaultItemLayout::New( DefaultItemLayout::SPIRAL );
+  // Create a layout
+  ItemLayoutPtr spiralLayout = DefaultItemLayout::New( DefaultItemLayout::SPIRAL );
 
-&nbsp;&nbsp;// Add the layout to the itemView
-&nbsp;&nbsp;itemView.AddLayout( *spiralLayout );
-&nbsp;&nbsp;// More layouts can be created and added to the itemView
+  // Add the layout to the itemView
+  itemView.AddLayout( *spiralLayout );
+  // More layouts can be created and added to the itemView
 
-&nbsp;&nbsp;// Activate the layout
-&nbsp;&nbsp;itemView.ActivateLayout( 0, Vector3( Stage::GetCurrent().GetSize() ), 0 );
+  // Activate the layout
+  itemView.ActivateLayout( 0, Vector3( Stage::GetCurrent().GetSize() ), 0 );
 
-&nbsp;&nbsp;// Add the itemView to the stage
-&nbsp;&nbsp;Stage::GetCurrent().Add( itemView );
+  // Add the itemView to the stage
+  Stage::GetCurrent().Add( itemView );
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/dali/layout_n.htm b/org.tizen.guides/html/native/ui/dali/layout_n.htm
index 1f4f1f7..e843bc8 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/layout_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/layout_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Layout Management</title>  
+       <title>Layout Management</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -38,12 +38,12 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Layout Management</h1>
 
-<p>DALi provides rule-based layout management (size negotiation), which is used to allocate the actor sizes on the stage based on the dependency rules between the actors.</p> 
+<p>DALi provides rule-based layout management (size negotiation), which is used to allocate the actor sizes on the stage based on the dependency rules between the actors.</p>
 
 <h2 id="dimension" name="dimension">Dimensions</h2>
 <p>The notion of width and height is generalized into a concept of a dimension. Several functions take the <code>Dimension</code> parameter. The <code>Dali::Dimension::Type</code> enum (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1Dimension.html#a4e123928ac3109e971b70874653d1b8b">wearable</a> applications) specifies the available dimensions as bit fields:</p>
@@ -51,7 +51,7 @@
 <li><code>Dimension::WIDTH</code></li>
 <li><code>Dimension::HEIGHT</code></li>
 </ul>
-<p>If a function can process width and height at the same time, the <code>Dimension::ALL_DIMENSIONS</code> mask can be specified.</p> 
+<p>If a function can process width and height at the same time, the <code>Dimension::ALL_DIMENSIONS</code> mask can be specified.</p>
 
 <h2 id="resize" name="resize">Resize Policies</h2>
 
@@ -77,17 +77,17 @@
     </tr>
        <tr>
      <td><code>ResizePolicy::FILL_TO_PARENT</code></td>
-     <td>The size of the actor is similar to its parent&#39;s size with proportionate filling considered.</td>
+     <td>The size of the actor is similar to its parent's size with proportionate filling considered.</td>
         <td style="text-align:center;"><img alt="captured screen2" src="../../../images/fill_to_parent.png" /></td>
     </tr>
        <tr>
      <td><code>ResizePolicy::SIZE_RELATIVE_TO_PARENT</code></td>
-     <td>The size of the actor is similar to its parent&#39;s size with a relative scale. Use the <code>SetSizeModeFactor()</code> function to specify the ratio.</td>
+     <td>The size of the actor is similar to its parent's size with a relative scale. Use the <code>SetSizeModeFactor()</code> function to specify the ratio.</td>
         <td style="text-align:center;"></td>
     </tr>
        <tr>
      <td><code>ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</code></td>
-     <td>The size of the actor is similar to its parent&#39;s size with a fixed offset using the <code>SetSizeModeFactor()</code> function.</td>
+     <td>The size of the actor is similar to its parent's size with a fixed offset using the <code>SetSizeModeFactor()</code> function.</td>
         <td style="text-align:center;"></td>
     </tr>
        <tr>
@@ -106,15 +106,15 @@
 
 <h2 id="example" name="example">Actor Layout Examples</h2>
 
-<p>This section describes layout examples with a actor.</p> 
+<p>This section describes layout examples with a actor.</p>
 
 <h3>Specifying Size Policies</h3>
 
-<p>Actors have different size policies by default. For example, the <code>Dali::Toolkit::ImageView</code> is set to <code>USE_NATURAL_SIZE</code>. This ensures that an image view uses its natural size by default when it is placed on the stage. However, if the <code>SetSize()</code> function is used with sizes other than 0 on the image view, the current resize policy is overridden by the <code>FIXED</code> policy and the actor takes the specified size.</p> 
+<p>Actors have different size policies by default. For example, the <code>Dali::Toolkit::ImageView</code> is set to <code>USE_NATURAL_SIZE</code>. This ensures that an image view uses its natural size by default when it is placed on the stage. However, if the <code>SetSize()</code> function is used with sizes other than 0 on the image view, the current resize policy is overridden by the <code>FIXED</code> policy and the actor takes the specified size.</p>
 
-<p>You can specify how an actor is size-negotiated using the <code>SetResizePolicy()</code> function. You can specify different policies for the different dimensions of width and height to archive different layouts.</p> 
+<p>You can specify how an actor is size-negotiated using the <code>SetResizePolicy()</code> function. You can specify different policies for the different dimensions of width and height to archive different layouts.</p>
 
-<p>The following example shows the <code>control</code> with its width set to <code>ResizePolicy::FILL_TO_PARENT</code> and its height set to <code>ResizePolicy::FIT_TO_CHILDREN</code>. It has the <code>imageView</code> added to it with an explicit call to <code>USE_NATURAL_SIZE</code> in both dimensions. This creates the <code>control</code> that fills the space of its parent in the width dimension and fits its child in the height dimension. As the <code>imageView</code> child is using its natural size, the height of the <code>control</code> fits the height of the child image.</p> 
+<p>The following example shows the <code>control</code> with its width set to <code>ResizePolicy::FILL_TO_PARENT</code> and its height set to <code>ResizePolicy::FIT_TO_CHILDREN</code>. It has the <code>imageView</code> added to it with an explicit call to <code>USE_NATURAL_SIZE</code> in both dimensions. This creates the <code>control</code> that fills the space of its parent in the width dimension and fits its child in the height dimension. As the <code>imageView</code> child is using its natural size, the height of the <code>control</code> fits the height of the child image.</p>
 
 <pre class="prettyprint">
 Control control = Control::New();
@@ -132,8 +132,8 @@ control.Add( imageView );
 
 <p>The following figure shows the before and after layouts for this code example.</p>
 
-<p align="center"><strong>Figure: Before and after setting the resize policy</strong></p>  
-       <p align="center"><img alt="Before and after setting the resize policy" src="../../../images/before_resize.png"/> <img alt="Before and after setting the resize policy" src="../../../images/after_resize.png"/></p> 
+<p align="center"><strong>Figure: Before and after setting the resize policy</strong></p>
+       <p align="center"><img alt="Before and after setting the resize policy" src="../../../images/before_resize.png"/> <img alt="Before and after setting the resize policy" src="../../../images/after_resize.png"/></p>
 
 <h3>Adjusting the Negotiated Size</h3>
 
@@ -150,16 +150,16 @@ control.Add( imageView );
 
 <h3>Using Actors in Containers</h3>
 
-<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor with the <code>SetPadding()</code> function. The padding specifies the left, right, bottom, and top padding value.</p> 
+<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor with the <code>SetPadding()</code> function. The padding specifies the left, right, bottom, and top padding value.</p>
 
 <div class="note">
        <strong>Note</strong>
        Beware of infinite dependency loops!
-<p>For example, when the resize policy of a parent actor is set to <code>ResizePolicy::FIT_TO_CHILDREN</code> with a child that has a resize policy of <code>ResizePolicy::FILL_TO_PARENT</code>, an infinite loop occurs.</p> 
-<p>Similarly, consider a situation where a parent actor has a width policy of <code>ResizePolicy::DIMENSION_DEPENDENCY</code> with a height policy of <code>ResizePolicy::FIT_TO_CHILDREN</code>. If the parent has a single child with a height policy <code>ResizePolicy::DIMENSION_DEPENDENCY</code> with width, and the child&#39;s width policy is <code>ResizePolicy::FILL_TO_PARENT</code>, a loop occurs.</p>
+<p>For example, when the resize policy of a parent actor is set to <code>ResizePolicy::FIT_TO_CHILDREN</code> with a child that has a resize policy of <code>ResizePolicy::FILL_TO_PARENT</code>, an infinite loop occurs.</p>
+<p>Similarly, consider a situation where a parent actor has a width policy of <code>ResizePolicy::DIMENSION_DEPENDENCY</code> with a height policy of <code>ResizePolicy::FIT_TO_CHILDREN</code>. If the parent has a single child with a height policy <code>ResizePolicy::DIMENSION_DEPENDENCY</code> with width, and the child's width policy is <code>ResizePolicy::FILL_TO_PARENT</code>, a loop occurs.</p>
 <p>Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates the actors 0 sizes.</p>
 </div>
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/model3dview_n.htm b/org.tizen.guides/html/native/ui/dali/model3dview_n.htm
index 3732318..9d3e9a5 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/model3dview_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/model3dview_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -67,7 +67,7 @@ Stage::GetCurrent().Add( model3dView );
 <h2 id="property">Modifying Model3dView Properties</h2>
 
 <p>You can modify the <code>Model3dView</code> appearance and behavior through its properties. To change a property from its default value, use the <code>SetProperty()</code> function.</p>
-  
+
       <div class="note">
         <strong>Note</strong>
         The resource properties require absolute references as their paths. However, the root resource path for your application can be obtained through the <code>app_get_resource_path()</code> function of the App Common API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__COMMON__MODULE.html">wearable</a> applications), and relative paths can be appended to that root path. If you want to use relative paths, you must specify them in your build files.
@@ -164,7 +164,7 @@ Stage::GetCurrent().Add( model3dView );
 <p align="center"><strong>Figure: Illumination models</strong></p>
 <p align="center"><img alt="DIFFUSE model" src="../../../images/dali_model1.png"/> <img alt="DIFFUSE_WITH_TEXTURE model" src="../../../images/dali_model2.png"/></p>
 <p align="center"><img alt="DIFFUSE_WITH_NORMAL_MAP model" src="../../../images/dali_model3.png"/></p>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/multi_threaded_n.htm b/org.tizen.guides/html/native/ui/dali/multi_threaded_n.htm
index 4513903..cdfd8f3 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/multi_threaded_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/multi_threaded_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Multi-threaded Architecture</title>  
+       <title>Multi-threaded Architecture</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,8 +28,8 @@
                </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-                       <li><a href="#animations">Animations with Multi-threading</a></li> 
-                       <li><a href="#resource">Resource Loading with Multi-threading</a></li> 
+                       <li><a href="#animations">Animations with Multi-threading</a></li>
+                       <li><a href="#resource">Resource Loading with Multi-threading</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -37,7 +37,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Handle.html">DALi::Handle API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Multi-threaded Architecture</h1>
@@ -50,7 +50,7 @@
        <li><strong>Resource thread</strong>: Loads images and decodes them into bitmaps.</li>
 </ul>
 
-<p align="center"><strong>Figure: DALi thread architecture</strong></p> 
+<p align="center"><strong>Figure: DALi thread architecture</strong></p>
        <p align="center"><img alt="DALi thread architecture" src="../../../images/dali_threads.png"/></p>
 
 
@@ -62,9 +62,9 @@
 
 <p>The following figure shows an actor hierarchy, in which one of the actors is being animated. The green objects in are created by the application code, while the blue private objects are used in the dedicated render thread.</p>
 
-<p align="center"><strong>Figure: Actor hierarchy with an animation</strong></p> 
-       <p align="center"><img alt="Actor hierarchy with an animation" src="../../../images/multi_threading2.png"/></p> 
- 
+<p align="center"><strong>Figure: Actor hierarchy with an animation</strong></p>
+       <p align="center"><img alt="Actor hierarchy with an animation" src="../../../images/multi_threading2.png"/></p>
+
 <h3 id="read" name="read">Reading an Animated Value</h3>
 
 <p>When a property is animatable, it can only be modified in the render thread. The value returned from a getter function is the value used when the previous frame was rendered.</p>
@@ -79,33 +79,33 @@ actor.SetPosition( Vector3( 10, 10, 10 ) );
 
 Vector3 current;
 current = actor.GetCurrentPosition();
-std::cout &lt;&lt; &quot;Current position: &quot; &lt;&lt; current.x &lt;&lt; &quot;, &quot; &lt;&lt; current.y
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt; &quot;, &quot; &lt;&lt; current.z &lt;&lt; std::endl;
+std::cout &lt;&lt; "Current position: " &lt;&lt; current.x &lt;&lt; ", " &lt;&lt; current.y
+          &lt;&lt; ", " &lt;&lt; current.z &lt;&lt; std::endl;
 
-std::cout &lt;&lt; &quot;...&quot; &lt;&lt; std::endl;
+std::cout &lt;&lt; "..." &lt;&lt; std::endl;
 
 // Handling another event
 
 current = actor.GetCurrentPosition();
-std::cout &lt;&lt; &quot;Current position: &quot; &lt;&lt; current.x &lt;&lt; &quot;, &quot; &lt;&lt; current.y
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt; &quot;, &quot; &lt;&lt; current.z &lt;&lt; std::endl;
+std::cout &lt;&lt; "Current position: " &lt;&lt; current.x &lt;&lt; ", " &lt;&lt; current.y
+          &lt;&lt; ", " &lt;&lt; current.z &lt;&lt; std::endl;
 </pre>
 
 <p>The above code is likely to output:</p>
 <pre class="prettyprint">
 Actor actor = Actor::New();
-&quot;Current position: 0,0,0&quot;
+"Current position: 0,0,0"
 // Other positions
-&quot;Current position: 10,10,10&quot;
+"Current position: 10,10,10"
 </pre>
 
 <h3 id="set" name="set">Setting a Property during an Animation</h3>
 
 <p>When a property is being animated, the animation overrides all values set with other functions, such as the <code>SetPosition()</code> function.</p>
 
-<p align="center"><strong>Figure: Actor hierarchy with an animated property</strong></p>  
-       <p align="center"><img alt="Actor hierarchy with an animated property" src="../../../images/multi_threading.png"/></p> 
- 
+<p align="center"><strong>Figure: Actor hierarchy with an animated property</strong></p>
+       <p align="center"><img alt="Actor hierarchy with an animated property" src="../../../images/multi_threading.png"/></p>
+
 <p>The order of execution in the render thread is:</p>
 <ol>
 <li>Process the message and call the <code>SetPosition()</code> function.</li>
@@ -113,12 +113,12 @@ Actor actor = Actor::New();
 <li>Render the frame.</li>
 </ol>
 
-<h2 id="resource" name="resource">Resource Loading with Multi-threading</h2> 
+<h2 id="resource" name="resource">Resource Loading with Multi-threading</h2>
+
+<p>DALi loads resources in separate threads. If these resource threads are not used, a large image file causes a block in the main thread, which cannot process the next operation while reading data from a file system or downloading from the network.</p>
 
-<p>DALi loads resources in separate threads. If these resource threads are not used, a large image file causes a block in the main thread, which cannot process the next operation while reading data from a file system or downloading from the network.</p> 
+<p>Currently, DALi creates one thread for loading local resources and another for loading remote resources, as required.</p>
 
-<p>Currently, DALi creates one thread for loading local resources and another for loading remote resources, as required.</p> 
-    
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/properties_n.htm b/org.tizen.guides/html/native/ui/dali/properties_n.htm
index ecb5a12..fe3683a 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/properties_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/properties_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Properties</title>  
+       <title>Properties</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -30,7 +30,7 @@
                <ul class="toc">
                        <li><a href="#access">Accessing Property Values</a></li>
                        <li><a href="#usage">Using Properties</a></li>
-                       <li><a href="#attributes">Managing Property Attributes</a></li> 
+                       <li><a href="#attributes">Managing Property Attributes</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -40,7 +40,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/structDali_1_1Property.html">Dali::Property API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Properties</h1>
@@ -91,18 +91,18 @@
 
 <pre class="prettyprint">
 Actor actor = Actor::New();
-actor.SetName( &quot;test actor&quot; );
-std::cout &lt;&lt; actor.GetName() &lt;&lt; std::endl; // &quot;test actor&quot;
+actor.SetName( "test actor" );
+std::cout &lt;&lt; actor.GetName() &lt;&lt; std::endl; // "test actor"
 </pre>
 
 <pre class="prettyprint">
 Actor actor = Actor::New();
-actor.SetProperty( Actor::Property::NAME, &quot;test actor&quot; );
-// &quot;test actor&quot;
+actor.SetProperty( Actor::Property::NAME, "test actor" );
+// "test actor"
 std::cout &lt;&lt; actor.GetProperty( Actor::Property::NAME ) &lt;&lt; std::endl;
-// &quot;test actor&quot;
+// "test actor"
 std::cout &lt;&lt; actor.GetProperty&lt;std::string&gt;( Actor::Property::NAME ) &lt;&lt; std::endl;
-// &quot;test actor&quot;
+// "test actor"
 std::cout &lt;&lt; actor.GetProperty( Actor::Property::NAME ).Get&lt;std::string&gt;() &lt;&lt; std::endl;
 </pre>
 
@@ -116,35 +116,35 @@ std::cout &lt;&lt; actor.GetProperty( Actor::Property::NAME ).Get&lt;std::string
 <pre class="prettyprint">
 void Create( Application&amp; application )
 {
-&nbsp;&nbsp;for( int i = 0; i &lt; 5; ++i )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;Toolkit::PushButton button = Toolkit::PushButton::New();
-&nbsp;&nbsp;&nbsp;&nbsp;button.SetSize( 100, 100 );
-&nbsp;&nbsp;&nbsp;&nbsp;button.SetPosition( 100*i+50, 50 );
-&nbsp;&nbsp;&nbsp;&nbsp;button.ClickedSignal().Connect( this, OnButtonClicked );
-
-&nbsp;&nbsp;&nbsp;&nbsp;// Register a custom property having button index
-&nbsp;&nbsp;&nbsp;&nbsp;// Store the property index so you can look it up later
-&nbsp;&nbsp;&nbsp;&nbsp;// Note: This is much faster than looking the property up by property name
-&nbsp;&nbsp;&nbsp;&nbsp;// and must be used if possible
-&nbsp;&nbsp;&nbsp;&nbsp;// As all control types are the same (PushButtons),
-&nbsp;&nbsp;&nbsp;&nbsp;// the indices to the unique custom property are all same
-&nbsp;&nbsp;&nbsp;&nbsp;Property::Value data( i );
-&nbsp;&nbsp;&nbsp;&nbsp;mCustomDataIndex = button.RegisterProperty( &quot;custom-data&quot;, data );
-
-&nbsp;&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add( button );
-&nbsp;&nbsp;}
+  for( int i = 0; i &lt; 5; ++i )
+  {
+    Toolkit::PushButton button = Toolkit::PushButton::New();
+    button.SetSize( 100, 100 );
+    button.SetPosition( 100*i+50, 50 );
+    button.ClickedSignal().Connect( this, OnButtonClicked );
+
+    // Register a custom property having button index
+    // Store the property index so you can look it up later
+    // Note: This is much faster than looking the property up by property name
+    // and must be used if possible
+    // As all control types are the same (PushButtons),
+    // the indices to the unique custom property are all same
+    Property::Value data( i );
+    mCustomDataIndex = button.RegisterProperty( "custom-data", data );
+
+    Stage::GetCurrent().Add( button );
+  }
 }
 
 bool OnButtonClicked( Toolkit::Button button )
 {
-&nbsp;&nbsp;// Look up the custom property by the stored property index
-&nbsp;&nbsp;// Note: If the property belongs to a control in another library, 
-&nbsp;&nbsp;// or you do not know the index, you can look the index up first with:
-&nbsp;&nbsp;// Property::Index index = button.GetPropertyIndex( &quot;custom-data&quot; );
-&nbsp;&nbsp;cout &lt;&lt; button.GetProperty( mCustomDataIndex ) &lt;&lt; endl;
+  // Look up the custom property by the stored property index
+  // Note: If the property belongs to a control in another library,
+  // or you do not know the index, you can look the index up first with:
+  // Property::Index index = button.GetPropertyIndex( "custom-data" );
+  cout &lt;&lt; button.GetProperty( mCustomDataIndex ) &lt;&lt; endl;
 
-&nbsp;&nbsp;return true;
+  return true;
 }
 </pre>
 
@@ -160,7 +160,7 @@ RadioButton actor = RadioButton::New();
 Stage::GetCurrent().Add( actor );
 Animation animation = Animation::New( 2.0f ); // Duration 2 seconds
 animation.AnimateTo( Property( actor, Actor::Property::POSITION ),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vector3( 100.0f, 200.0f, 0.0f ) );
+                     Vector3( 100.0f, 200.0f, 0.0f ) );
 animation.Play();
 </pre>
 
@@ -172,7 +172,7 @@ animation.Play();
 
 <pre class="prettyprint">
 Constraint constraint = Constraint::New&lt;Vector3&gt;( actor, Actor::Property::SIZE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EqualToConstraint() );
+                                                  EqualToConstraint() );
 constraint.AddSource( ParentSource( Actor::Property::SIZE ) );
 constraint.Apply();
 </pre>
@@ -182,19 +182,19 @@ constraint.Apply();
 
 <p>A property has the following attributes:</p>
 
-<ul> 
-       <li>Index: Enumeration number indicating the property. The property index is usually used to access properties.</li> 
+<ul>
+       <li>Index: Enumeration number indicating the property. The property index is usually used to access properties.</li>
 
-       <li>Type: Type of the property. Retrieved with the <code>Dali::Handle::GetPropertyType()</code> function.</li> 
+       <li>Type: Type of the property. Retrieved with the <code>Dali::Handle::GetPropertyType()</code> function.</li>
 
-       <li>Name: Name of the property. Retrieved with the <code>Dali::Handle::GetPropertyName()</code> function.</li> 
+       <li>Name: Name of the property. Retrieved with the <code>Dali::Handle::GetPropertyName()</code> function.</li>
 
-       <li>Writable: If <code>true</code>, the property value can be written. Retrieved with the <code>Dali::Handle::IsPropertyWritable()</code> function.</li> 
+       <li>Writable: If <code>true</code>, the property value can be written. Retrieved with the <code>Dali::Handle::IsPropertyWritable()</code> function.</li>
 
-       <li>Animatable: If <code>true</code>, the property can be animated using the <code>Dali::Animation</code> class. Retrieved with the <code>Dali::Handle::IsPropertyAnimatable()</code> function.</li> 
+       <li>Animatable: If <code>true</code>, the property can be animated using the <code>Dali::Animation</code> class. Retrieved with the <code>Dali::Handle::IsPropertyAnimatable()</code> function.</li>
 
-       <li>Constraint-Input: If <code>true</code>, the property can be used as constraint input. Retrieved with the <code>Dali::Handle::IsPropertyAConstraintInput()</code> function.</li> 
-</ul> 
+       <li>Constraint-Input: If <code>true</code>, the property can be used as constraint input. Retrieved with the <code>Dali::Handle::IsPropertyAConstraintInput()</code> function.</li>
+</ul>
 
 <p>The following table lists the type and name attributes of the <code>Dali::Actor</code> properties.</p>
 <p align="center" class="Table"><strong>Table: Dali::Actor property attributes</strong></p>
@@ -208,34 +208,34 @@ constraint.Apply();
                <tr>
                        <td><code>Dali::Actor::POSITION</code></td>
                        <td>Vector3</td>
-                       <td>&quot;position&quot;</td>
+                       <td>"position"</td>
                </tr>
                <tr>
                        <td><code>Dali::Actor::ORIENTATION</code></td>
                        <td>Quaternion</td>
-                       <td>&quot;orientation&quot;</td>
+                       <td>"orientation"</td>
                </tr>
                <tr>
                        <td><code>Dali::Actor::SIZE</code></td>
                        <td>Vector3</td>
-                       <td>&quot;size&quot;</td>
+                       <td>"size"</td>
                </tr>
                <tr>
                        <td><code>Dali::Actor::COLOR</code></td>
                        <td>Vector4</td>
-                       <td>&quot;color&quot;</td>
+                       <td>"color"</td>
                </tr>
                <tr>
                        <td><code>Dali::Actor::NAME</code></td>
                        <td>std::string</td>
-                       <td>&quot;name&quot;</td>
+                       <td>"name"</td>
                </tr>
                </tbody>
        </table>
 
 <p>For more information about properties, see the API reference of each class. For example, for the <code>Dali::Actor</code> class, see the <code>Dali::Actor::Property</code> struct (in <a href="../../../../../org.tizen.native.mobile.apireference/structDali_1_1Actor_1_1Property.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/structDali_1_1Actor_1_1Property.html">wearable</a> applications). For information on the supported property types, see <code>Dali::Property::Type</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Property.html#acb569f557811bc94d2e98b5c880d759c">wearable</a> applications) and <code>Dali::PropertyTypes</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/namespaceDali_1_1PropertyTypes.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/namespaceDali_1_1PropertyTypes.html">wearable</a> applications).</p>
 
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/rendering_effects_n.htm b/org.tizen.guides/html/native/ui/dali/rendering_effects_n.htm
index 760af10..a5e1e13 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/rendering_effects_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/rendering_effects_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -37,7 +37,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Rendering and Effects</h1>
@@ -51,18 +51,18 @@
 
 <p><code>MONO</code> is the default viewing mode. When using the <code>MONO</code> mode, only 1 image per scene is produced in every update. In this setup, DALi creates a default render task, which renders everything added to the stage root layer, and 1 default camera for that render task.</p>
 
-<p>The <code>STEREO_HORIZONTAL</code> and <code>STEREO_VERTICAL</code> modes allow the application to produce stereo images. Stereoscopy is a technique for creating or enhancing the illusion of depth in an image. Stereo rendering technique produces 2 images of the scene with an slight offset between them, which is presented to the left and the right eye independently. In this setup, DALi creates 2 additional render tasks, 1 for the right eye and 1 for the left, each with its own camera. Those cameras are parented to the default camera. The method to generate the projection transformation for each camera is known as &quot;parallel axis asymmetric frustum perspective projection&quot; and is illustrated in the following figure.</p>
+<p>The <code>STEREO_HORIZONTAL</code> and <code>STEREO_VERTICAL</code> modes allow the application to produce stereo images. Stereoscopy is a technique for creating or enhancing the illusion of depth in an image. Stereo rendering technique produces 2 images of the scene with an slight offset between them, which is presented to the left and the right eye independently. In this setup, DALi creates 2 additional render tasks, 1 for the right eye and 1 for the left, each with its own camera. Those cameras are parented to the default camera. The method to generate the projection transformation for each camera is known as "parallel axis asymmetric frustum perspective projection" and is illustrated in the following figure.</p>
+
+<p align="center"><strong>Figure: Stereoscopic projection</strong></p>
+       <p align="center"><img alt="Stereoscopic projection" src="../../../images/stereo_projection.png"/></p>
 
-<p align="center"><strong>Figure: Stereoscopic projection</strong></p>  
-       <p align="center"><img alt="Stereoscopic projection" src="../../../images/stereo_projection.png"/></p> 
- 
-<p>The separation between the 2 cameras is configurable but, typically, it ranges between 50 and 70 millimeters. Too large a separation can be hard to resolve and is known as hyperstereo. The convergence plane for both frustums is the 2D plane, so the projection of anything lying in the 2D plane is coincident for both left and right eye, resulting in no parallax. Objects that lie in front of the projection plane appear to be in front of the screen and objects behind the projection plane appear to be &quot;into&quot; the screen. Objects behind the projection plane (positive parallax) are easier to look at without straining the eyes.</p>
+<p>The separation between the 2 cameras is configurable but, typically, it ranges between 50 and 70 millimeters. Too large a separation can be hard to resolve and is known as hyperstereo. The convergence plane for both frustums is the 2D plane, so the projection of anything lying in the 2D plane is coincident for both left and right eye, resulting in no parallax. Objects that lie in front of the projection plane appear to be in front of the screen and objects behind the projection plane appear to be "into" the screen. Objects behind the projection plane (positive parallax) are easier to look at without straining the eyes.</p>
 
 <p>To view stereoscopic images correctly, each image must be presented to each eye independently. There are devices on the market for this, such as a head-mounted display, which is a display device worn in the head that has 2 small displays, one for each eye. A cheaper alternative to this often expensive device is the Google cardboard viewer.</p>
 
-<p align="center"><strong>Figure: Google cardboard viewer</strong></p>  
-       <p align="center"><img alt="Google cardboard viewer" src="../../../images/google_cardboard.png"/></p> 
- 
+<p align="center"><strong>Figure: Google cardboard viewer</strong></p>
+       <p align="center"><img alt="Google cardboard viewer" src="../../../images/google_cardboard.png"/></p>
+
 <p>With the Google cardboard viewer or a similar device, you can transform your phone into a basic virtual reality headset.</p>
 
 <p>For more information about DALi rendering and practical examples of rendering shapes and SVG graphics, see <a href="rendering_tutorial_n.htm">Shape Drawing</a> and <a href="svg_rendering_n.htm">SVG Rendering</a>.</p>
@@ -83,18 +83,18 @@
 
 <pre class="prettyprint">
 Dali::RenderTask defaultRenderTask =
-&nbsp;&nbsp;Dali::Stage::GetCurrent().GetRenderTaskList().GetTask( 0 ); 
+  Dali::Stage::GetCurrent().GetRenderTaskList().GetTask( 0 );
 Dali::CameraActor defaultCamera = defaultRenderTask.GetCameraActor();
 </pre>
 </li>
-<li>Stereo render tasks render everything added to the stage&#39;s root layer. If the application must render an object hierarchy to an off-screen buffer, it must set the exclusive flag on that render task so that the stereo tasks do not render that particular subtree. To set the exclusive flag in a render task, use the <code>SetExclusive()</code> function defined in the render task.</li>
+<li>Stereo render tasks render everything added to the stage's root layer. If the application must render an object hierarchy to an off-screen buffer, it must set the exclusive flag on that render task so that the stereo tasks do not render that particular subtree. To set the exclusive flag in a render task, use the <code>SetExclusive()</code> function defined in the render task.</li>
 </ul>
 
 <div class="note">
        <strong>Note</strong>
        DALi stereoscopic viewing mode is still under development, and may not be mature enough for commercialized applications at the moment. For example, distortion correction is not supported yet. Tizen continues to improve the stereoscopic mode to give you a chance to provide more exciting and immersive user experience to your customers.
 </div>
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/rendering_tutorial_n.htm b/org.tizen.guides/html/native/ui/dali/rendering_tutorial_n.htm
index 18084c1..e0e6de0 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/rendering_tutorial_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/rendering_tutorial_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -62,27 +62,27 @@
 
 <pre class="prettyprint">
 const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
-&nbsp;&nbsp;attribute mediump vec2 aPosition;
-&nbsp;&nbsp;uniform mediump mat4 uMvpMatrix;
-&nbsp;&nbsp;uniform mediump vec3 uSize;
-&nbsp;&nbsp;void main()
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;mediump vec4 vertexPosition = vec4( aPosition, 0.0, 1.0 );
-&nbsp;&nbsp;&nbsp;&nbsp;vertexPosition.xyz *= uSize;
-&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = uMvpMatrix * vertexPosition;
-&nbsp;&nbsp;}
+  attribute mediump vec2 aPosition;
+  uniform mediump mat4 uMvpMatrix;
+  uniform mediump vec3 uSize;
+  void main()
+  {
+    mediump vec4 vertexPosition = vec4( aPosition, 0.0, 1.0 );
+    vertexPosition.xyz *= uSize;
+    gl_Position = uMvpMatrix * vertexPosition;
+  }
 );
 </pre>
 </li>
-<li>The fragment shader applies the actor&#39;s color:
+<li>The fragment shader applies the actor's color:
 
 <pre class="prettyprint">
 const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
-&nbsp;&nbsp;uniform lowp vec4 uColor;
-&nbsp;&nbsp;void main()
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = uColor;
-&nbsp;&nbsp;}
+  uniform lowp vec4 uColor;
+  void main()
+  {
+    gl_FragColor = uColor;
+  }
 );
 </pre>
 </li></ol>
@@ -93,14 +93,14 @@ const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
 
 <pre class="prettyprint">
 Property::Map vertexFormat;
-vertexFormat[&quot;aPosition&quot;] = Property::VECTOR2;
+vertexFormat["aPosition"] = Property::VECTOR2;
 PropertyBuffer vertices = PropertyBuffer::New( vertexFormat );
 
 struct Vertex { Vector2 position1; };
 Vertex vertexData[2] =
 {
-&nbsp;&nbsp;{ Vector2(  0.5f, 0.5f) },
-&nbsp;&nbsp;{ Vector2( -0.5f, -0.5f) }
+  { Vector2(  0.5f, 0.5f) },
+  { Vector2( -0.5f, -0.5f) }
 };
 const unsigned short INDEX_LINES[] = { 0, 1 };
 vertices.SetData( vertexData, 2 );
@@ -138,14 +138,14 @@ stage.Add( actor );
 
 <h2 id="triangle">Drawing a Triangle</h2>
 
-<p>To draw a triangle, use the same shader and renderer set-up as in the previous &quot;Drawing a Line&quot; example, and simply modify the geometry to draw the triangle:</p>
+<p>To draw a triangle, use the same shader and renderer set-up as in the previous "Drawing a Line" example, and simply modify the geometry to draw the triangle:</p>
 
 <pre class="prettyprint">
 Vertex vertexData[3] =
 {
-&nbsp;&nbsp;{ Vector2(  0.45f, 0.45f) },
-&nbsp;&nbsp;{ Vector2( -0.45f, 0.45f) },
-&nbsp;&nbsp;{ Vector2(  0.0f, -0.45f) }
+  { Vector2(  0.45f, 0.45f) },
+  { Vector2( -0.45f, 0.45f) },
+  { Vector2(  0.0f, -0.45f) }
 };
 const unsigned short INDEX_TRIANGLES[] = { 0, 1, 2 };
 vertices.SetData( vertexData, 3 );
@@ -153,7 +153,7 @@ vertices.SetData( vertexData, 3 );
 Geometry geometry = Geometry::New();
 geometry.AddVertexBuffer( vertices );
 geometry.SetIndexBuffer( &amp;INDEX_TRIANGLES[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sizeof(INDEX_TRIANGLES)/sizeof(INDEX_TRIANGLES[0]) );
+                         sizeof(INDEX_TRIANGLES)/sizeof(INDEX_TRIANGLES[0]) );
 geometry.SetType( Geometry::TRIANGLES );
 </pre>
 
@@ -173,18 +173,18 @@ geometry.SetType( Geometry::TRIANGLES );
 
 <pre class="prettyprint">
 const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
-&nbsp;&nbsp;attribute mediump vec3 aPosition;
-&nbsp;&nbsp;attribute mediump vec3 aColor;
-&nbsp;&nbsp;uniform mediump mat4 uMvpMatrix;
-&nbsp;&nbsp;uniform mediump vec3 uSize;
-&nbsp;&nbsp;varying mediump vec4 vColor;
-&nbsp;&nbsp;void main()
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;mediump vec4 vertexPosition = vec4( aPosition, 1.0 );
-&nbsp;&nbsp;&nbsp;&nbsp;vertexPosition.xyz *= uSize;
-&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = uMvpMatrix * vertexPosition;
-&nbsp;&nbsp;&nbsp;&nbsp;vColor = vec4( aColor, 1.0 );
-&nbsp;&nbsp;}
+  attribute mediump vec3 aPosition;
+  attribute mediump vec3 aColor;
+  uniform mediump mat4 uMvpMatrix;
+  uniform mediump vec3 uSize;
+  varying mediump vec4 vColor;
+  void main()
+  {
+    mediump vec4 vertexPosition = vec4( aPosition, 1.0 );
+    vertexPosition.xyz *= uSize;
+    gl_Position = uMvpMatrix * vertexPosition;
+    vColor = vec4( aColor, 1.0 );
+  }
 );
 </pre>
 </li>
@@ -192,11 +192,11 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
 
 <pre class="prettyprint">
 const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
-&nbsp;&nbsp;varying mediump vec4 vColor;
-&nbsp;&nbsp;void main()
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = vColor;
-&nbsp;&nbsp;}
+  varying mediump vec4 vColor;
+  void main()
+  {
+    gl_FragColor = vColor;
+  }
 );
 </pre>
 </li></ol>
@@ -207,50 +207,50 @@ const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
 
 <pre class="prettyprint">
 Property::Map vertexFormat;
-vertexFormat[&quot;aPosition&quot;] = Property::VECTOR3;
-vertexFormat[&quot;aColor&quot;] = Property::VECTOR3;
+vertexFormat["aPosition"] = Property::VECTOR3;
+vertexFormat["aColor"] = Property::VECTOR3;
 PropertyBuffer vertices = PropertyBuffer::New( vertexFormat );
 
 struct Vertex
 {
-&nbsp;&nbsp;Vector3 position;
-&nbsp;&nbsp;Vector3 color;
+  Vector3 position;
+  Vector3 color;
 };
 
 Vertex vertexData[24] =
 {
-&nbsp;&nbsp;{ Vector3( -0.5, -0.5,  0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5, -0.5,  0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5,  0.5,  0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5,  0.5,  0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5, -0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5, -0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5,  0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5,  0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5, -0.5, -0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5, -0.5, -0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5, -0.5,  0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5, -0.5,  0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5,  0.5, -0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5,  0.5, -0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5,  0.5,  0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5,  0.5,  0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5, -0.5, -0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5,  0.5, -0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5, -0.5,  0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3( -0.5,  0.5,  0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5, -0.5, -0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5,  0.5, -0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5, -0.5,  0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
-&nbsp;&nbsp;{ Vector3(  0.5,  0.5,  0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
+  { Vector3( -0.5, -0.5,  0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
+  { Vector3(  0.5, -0.5,  0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
+  { Vector3( -0.5,  0.5,  0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
+  { Vector3(  0.5,  0.5,  0.5 ), Vector3( 1.0, 0.0, 0.0 ) },
+  { Vector3( -0.5, -0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
+  { Vector3(  0.5, -0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
+  { Vector3( -0.5,  0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
+  { Vector3(  0.5,  0.5, -0.5 ), Vector3( 0.0, 1.0, 0.0 ) },
+  { Vector3( -0.5, -0.5, -0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
+  { Vector3(  0.5, -0.5, -0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
+  { Vector3( -0.5, -0.5,  0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
+  { Vector3(  0.5, -0.5,  0.5 ), Vector3( 0.0, 0.0, 1.0 ) },
+  { Vector3( -0.5,  0.5, -0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
+  { Vector3(  0.5,  0.5, -0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
+  { Vector3( -0.5,  0.5,  0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
+  { Vector3(  0.5,  0.5,  0.5 ), Vector3( 1.0, 1.0, 0.0 ) },
+  { Vector3( -0.5, -0.5, -0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
+  { Vector3( -0.5,  0.5, -0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
+  { Vector3( -0.5, -0.5,  0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
+  { Vector3( -0.5,  0.5,  0.5 ), Vector3( 1.0, 0.0, 1.0 ) },
+  { Vector3(  0.5, -0.5, -0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
+  { Vector3(  0.5,  0.5, -0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
+  { Vector3(  0.5, -0.5,  0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
+  { Vector3(  0.5,  0.5,  0.5 ), Vector3( 0.0, 1.0, 1.0 ) },
 };
 
 const unsigned short INDEX_CUBE[] = { 0,  2,  3,  0,  3,  1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5,  7,  6,  5,  6,  4,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8, 10, 11,  8, 11,  9,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;14, 12, 13, 14, 13, 15,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;16, 17, 19, 16, 19, 18,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;22, 23, 21, 22, 21, 20 };
+                                      5,  7,  6,  5,  6,  4,
+                                      8, 10, 11,  8, 11,  9,
+                                      14, 12, 13, 14, 13, 15,
+                                      16, 17, 19, 16, 19, 18,
+                                      22, 23, 21, 22, 21, 20 };
 
 vertices.SetData( vertexData, 24 );
 
@@ -278,9 +278,9 @@ stage.Add( actor );
 
 mAnimation = Animation::New( 10.0f );
 mAnimation.AnimateTo( Property( actor, Actor::Property::ORIENTATION ),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quaternion( Radian( Degree( 180 ) ), Vector3::ZAXIS ) );
+                      Quaternion( Radian( Degree( 180 ) ), Vector3::ZAXIS ) );
 mAnimation.AnimateTo( Property( actor, Actor::Property::ORIENTATION ),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quaternion( Radian( Degree( 180 ) ), Vector3::YAXIS ) );
+                      Quaternion( Radian( Degree( 180 ) ), Vector3::YAXIS ) );
 mAnimation.Play();
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/dali/resources_n.htm b/org.tizen.guides/html/native/ui/dali/resources_n.htm
index 8da2c30..bf75cf9 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/resources_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/resources_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Resources</title>  
+       <title>Resources</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -39,7 +39,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ResourceImage.html">DALi::ResourceImage API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Resources</h1>
@@ -52,7 +52,7 @@
 <p>You can load an image file with the <code>ResourceImage</code> class by specifying its location:</p>
 
 <pre class="prettyprint">
-Dali::ResourceImage image = Dali::ResourceImage::New( &quot;/my-path/my-image.png&quot; );
+Dali::ResourceImage image = Dali::ResourceImage::New( "/my-path/my-image.png" );
 </pre>
 
 <p>The loaded image can be displayed using the <a href="imageview_n.htm">ImageView</a> component:</p>
@@ -93,33 +93,33 @@ Stage::GetCurrent().Add( imageView );
 <pre class="prettyprint">
 class ResourceImageController : public ConnectionTracker
 {
-&nbsp;&nbsp;public:
-&nbsp;&nbsp;&nbsp;&nbsp;ResourceImageController( Application&amp; application ) : mApplication( application )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect( this, &amp;ResourceImageController::Create );
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;void Create( Application&amp; application )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ResourceImage image =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ResourceImage::New( &quot;https://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-light.png&quot; );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.LoadingFinishedSignal().Connect( this,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;ResourceImageController::OnLoadFinished );
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ImageView imageView = ImageView::New( image );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageView.SetSize( 400, 200 );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageView.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add( imageView );
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;void OnLoadFinished( ResourceImage image )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LoadingState state = image.GetLoadingState();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if( state == ResourceLoadingSucceeded )
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cout &lt;&lt; &quot;Loading &quot; &lt;&lt; image.GetUrl() &lt;&lt; &quot; succeeded&quot; &lt;&lt; endl;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if( state == ResourceLoadingFailed )
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cout &lt;&lt; &quot;Loading &quot; &lt;&lt; image.GetUrl() &lt;&lt; &quot; failed&quot; &lt;&lt; endl;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+  public:
+    ResourceImageController( Application&amp; application ) : mApplication( application )
+    {
+      mApplication.InitSignal().Connect( this, &amp;ResourceImageController::Create );
+    }
+
+    void Create( Application&amp; application )
+    {
+      ResourceImage image =
+        ResourceImage::New( "https://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-light.png" );
+      image.LoadingFinishedSignal().Connect( this,
+                                             &amp;ResourceImageController::OnLoadFinished );
+
+      ImageView imageView = ImageView::New( image );
+      imageView.SetSize( 400, 200 );
+      imageView.SetParentOrigin( ParentOrigin::CENTER );
+      Stage::GetCurrent().Add( imageView );
+    }
+
+    void OnLoadFinished( ResourceImage image )
+    {
+      LoadingState state = image.GetLoadingState();
+      if( state == ResourceLoadingSucceeded )
+         cout &lt;&lt; "Loading " &lt;&lt; image.GetUrl() &lt;&lt; " succeeded" &lt;&lt; endl;
+      else if( state == ResourceLoadingFailed )
+         cout &lt;&lt; "Loading " &lt;&lt; image.GetUrl() &lt;&lt; " failed" &lt;&lt; endl;
+    }
 };
 </pre>
 
@@ -133,7 +133,7 @@ class ResourceImageController : public ConnectionTracker
 
 <pre class="prettyprint">
 Dali::Image image = Dali::ResourceImage::New( filename, ImageDimensions( 240, 240 ),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FittingMode::SCALE_TO_FILL );
+                                              FittingMode::SCALE_TO_FILL );
 </pre>
 
 <p>This example sets the size and fitting mode appropriately for a large thumbnail during the <code>Dali::ResourceImage</code> object construction. In general, to enable scaling on load, pass a non-zero width or height and one of the 4 fitting modes to the <code>Dali::ResourceImage</code> creator function as shown above.</p>
@@ -172,7 +172,7 @@ Dali::Image image = Dali::ResourceImage::New( filename, ImageDimensions( 240, 24
 
 <pre class="prettyprint">
 Dali::ImageDimensions dimensions =
-&nbsp;&nbsp;Dali::ResourceImage::GetImageSize( &quot;/my-path/my-image.png&quot; );
+  Dali::ResourceImage::GetImageSize( "/my-path/my-image.png" );
 </pre>
 
 <p>This is a disk-read operation, which can be slow and block the event thread. This operation is currently not supported for remote resources, such as HTTP or HTTPS URLs.</p>
@@ -186,7 +186,7 @@ Dali::ImageDimensions dimensions =
 Dali::BufferImage image = Dali::BufferImage::New( 200, 200 );
 </pre>
 
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/scrollview_n.htm b/org.tizen.guides/html/native/ui/dali/scrollview_n.htm
index 834f0c9..e292c63 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/scrollview_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/scrollview_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>ScrollView</title>  
+       <title>ScrollView</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -61,7 +61,7 @@
 
 <p>The following figure shows example layouts using the <code>ScrollView</code>.</p>
 
-<p align="center"><strong>Figure: ScrollView</strong></p>  
+<p align="center"><strong>Figure: ScrollView</strong></p>
        <p align="center"><img alt="ScrollView" width="450" src="../../../images/scrollview.png"/></p>
 
 
@@ -76,47 +76,47 @@
 // class in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;// Create a ScrollView instance
-&nbsp;&nbsp;ScrollView scrollView = ScrollView::New();
-&nbsp;&nbsp;scrollView.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;Stage::GetCurrent().Add( scrollView );
-
-&nbsp;&nbsp;// Set the size of scrollView;
-&nbsp;&nbsp;// it covers the entire stage 
-&nbsp;&nbsp;Size size = Stage::GetCurrent().GetSize();
-&nbsp;&nbsp;scrollView.SetSize( size );
-
-&nbsp;&nbsp;// Add actors to the ScrollView 
-&nbsp;&nbsp;for( int i; i &lt; MY_ITEM_COUNT; ++i )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;ImageView imageView = ImageView::New( MY_IMAGE_PATHS[i] );
-&nbsp;&nbsp;&nbsp;&nbsp;imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-&nbsp;&nbsp;&nbsp;&nbsp;imageView.SetPosition( i * size.x, 0.0f );
-&nbsp;&nbsp;&nbsp;&nbsp;scrollView.Add( imageView );
-&nbsp;&nbsp;}
-
-&nbsp;&nbsp;// ScrollView contents are now draggable
-
-&nbsp;&nbsp;// To enforce horizontal-only scrolling,
-&nbsp;&nbsp;// the Y axis ruler can be disabled 
-&nbsp;&nbsp;RulerPtr rulerY = new DefaultRuler();
-&nbsp;&nbsp;rulerY-&gt;Disable();
-&nbsp;&nbsp;scrollView.SetRulerY( rulerY );
-
-&nbsp;&nbsp;// To enable snapping, a FixedRuler can be
-&nbsp;&nbsp;// applied to the X axis,with snap
-&nbsp;&nbsp;// points spaced to the width of the stage
-&nbsp;&nbsp;RulerPtr rulerX1 = new FixedRuler( size.width );
-&nbsp;&nbsp;scrollView.SetRulerX( rulerX1 );
-
-&nbsp;&nbsp;// Domain can be applied to rulers to prevent
-&nbsp;&nbsp;// scrolling beyond this boundary
-&nbsp;&nbsp;// In this case, to 4 times the width of the
-&nbsp;&nbsp;// stage, allowing for 4 pages to be scrolled
-&nbsp;&nbsp;RulerPtr rulerX2 = new FixedRuler( size.width );
-&nbsp;&nbsp;rulerX2-&gt;SetDomain( RulerDomain( 0.0f,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size.width*4.0f ) );
-&nbsp;&nbsp;scrollView.SetRulerX( rulerX2 );
+  // Create a ScrollView instance
+  ScrollView scrollView = ScrollView::New();
+  scrollView.SetParentOrigin( ParentOrigin::CENTER );
+  Stage::GetCurrent().Add( scrollView );
+
+  // Set the size of scrollView;
+  // it covers the entire stage
+  Size size = Stage::GetCurrent().GetSize();
+  scrollView.SetSize( size );
+
+  // Add actors to the ScrollView
+  for( int i; i &lt; MY_ITEM_COUNT; ++i )
+  {
+    ImageView imageView = ImageView::New( MY_IMAGE_PATHS[i] );
+    imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    imageView.SetPosition( i * size.x, 0.0f );
+    scrollView.Add( imageView );
+  }
+
+  // ScrollView contents are now draggable
+
+  // To enforce horizontal-only scrolling,
+  // the Y axis ruler can be disabled
+  RulerPtr rulerY = new DefaultRuler();
+  rulerY-&gt;Disable();
+  scrollView.SetRulerY( rulerY );
+
+  // To enable snapping, a FixedRuler can be
+  // applied to the X axis,with snap
+  // points spaced to the width of the stage
+  RulerPtr rulerX1 = new FixedRuler( size.width );
+  scrollView.SetRulerX( rulerX1 );
+
+  // Domain can be applied to rulers to prevent
+  // scrolling beyond this boundary
+  // In this case, to 4 times the width of the
+  // stage, allowing for 4 pages to be scrolled
+  RulerPtr rulerX2 = new FixedRuler( size.width );
+  rulerX2-&gt;SetDomain( RulerDomain( 0.0f,
+                      size.width*4.0f ) );
+  scrollView.SetRulerX( rulerX2 );
 }
 </pre>
 
@@ -129,7 +129,7 @@ void HelloWorldExample::Create( Application&amp; application )
 
 <p>The <code>ScrollView</code> behavior depends on a combination of the ruler, ruler domain, and wrap modes. The following table shows <code>ScrollView</code> behavior according to the combination.</p>
 
-<p align="center"><strong>Figure: Ruler, ruler domain, and wrap modes</strong></p>  
+<p align="center"><strong>Figure: Ruler, ruler domain, and wrap modes</strong></p>
        <p align="center"><img alt="Ruler, ruler domain, and wrap modes" src="../../../images/scrollview_ruler.png"/></p>
 
 <p align="center" class="Table"><strong>Table: Scrollview behavior in the ruler, ruler domain, and wrap mode</strong></p>
diff --git a/org.tizen.guides/html/native/ui/dali/slider_n.htm b/org.tizen.guides/html/native/ui/dali/slider_n.htm
index 6e0bded..38d2236 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/slider_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/slider_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -53,7 +53,7 @@
 <ul>
 <li>The handle is the indicator sliding within the range
 <p>You can draw the handle using the <code>HANDLE_VISUAL</code> property.</p></li>
-<li>The track is the bar along which the handle moves. 
+<li>The track is the bar along which the handle moves.
 <p>The slider draws the track using 2 distinct images. The region between the start of the track and the handle is the progress region, and you can draw it using the <code>PROGRESS_VISUAL</code> property. The region between the handle and the end of the track is drawn using the <code>TRACK_VISUAL</code> property.</p></li>
 </ul>
 
@@ -92,7 +92,7 @@ slider.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 slider.SetPosition( 0.0f, mStageHeight * 0.1 );
 Stage::GetCurrent().Add( slider );
 </pre>
-  
+
 <h2 id="property">Modifying Slider Properties</h2>
 
 <p>You can modify the slider appearance and behavior through its properties.</p>
@@ -205,8 +205,8 @@ slider.SetProperty( Slider::Property::SHOW_POPUP, true );
 <pre class="prettyprint">
 // Customize the slider handle
 Property::Map handleVisual;
-handleVisual[&quot;size&quot;] = Vector2( 120.0f, 120.0f ); // Set the handle size
-handleVisual[&quot;url&quot;] = mImageDirectory + &quot;handle_img.png&quot;; // Set the handle image
+handleVisual["size"] = Vector2( 120.0f, 120.0f ); // Set the handle size
+handleVisual["url"] = mImageDirectory + "handle_img.png"; // Set the handle image
 slider.SetProperty( Slider::Property::HANDLE_VISUAL, handleVisual );
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/dali/styling_n.htm b/org.tizen.guides/html/native/ui/dali/styling_n.htm
index f47a8a9..a4efdc0 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/styling_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/styling_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -51,7 +51,7 @@
 </li>
 <li>You can style particular controls or sub-groups of controls by specifying their style name programmatically.</li>
 <li>Styles can be inherited and tweaked, so you can create minor updates to existing styles with very little code.</li>
-<li>The platform can change the default system font family and logical size. This is handled by the default stylesheets, but it is possible to override this behavior in your own stylesheets. You can also listen to the style manager&#39;s <code>StyleChangedSignal()</code> in order to determine when the platform style has changed.</li>
+<li>The platform can change the default system font family and logical size. This is handled by the default stylesheets, but it is possible to override this behavior in your own stylesheets. You can also listen to the style manager's <code>StyleChangedSignal()</code> in order to determine when the platform style has changed.</li>
 </ul>
 
 <h2 id="stylesheet">Stylesheet Loading</h2>
@@ -63,19 +63,19 @@
 <pre class="prettyprint">
 int main( int argc, char** argv )
 {
-&nbsp;&nbsp;Application application = Application::New( &amp;argc, &amp;argv, &quot;stylesheet.json&quot; );
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;Demo::StylingApplication stylingApplication( application );
-&nbsp;&nbsp;&nbsp;&nbsp;application.MainLoop();
-&nbsp;&nbsp;}
+  Application application = Application::New( &amp;argc, &amp;argv, "stylesheet.json" );
+  {
+    Demo::StylingApplication stylingApplication( application );
+    application.MainLoop();
+  }
 
-&nbsp;&nbsp;return 0;
+  return 0;
 }
 </pre>
 </li>
 <li>During runtime, use the <code>Dali::Toolkit::StyleManager::ApplyTheme()</code> function:
 <pre class="prettyprint">
-StyleManager::Get().ApplyTheme( &quot;stylesheet.json&quot; );
+StyleManager::Get().ApplyTheme( "stylesheet.json" );
 </pre>
 </li></ul>
 
@@ -135,25 +135,25 @@ StyleManager::Get().ApplyTheme( &quot;stylesheet.json&quot; );
 
 <p>Constants can also be set programmatically by using the <code>StyleManager::SetStyleConstant()</code> function. However, the function only works after the <code>Application::New()</code> function has been called, so it does not affect stylesheets loaded in the <code>Application::New()</code> function.</p>
 
-<p>The constants can be used in any string value in the JSON files, delimited by &#39;{&#39; and &#39;}&#39; characters. In the following example, the <code>IMAGE_DIR</code> constant is defined within the stylesheet, and is used to access the <code>unselectedStateImage</code> image path in the <code>Dali::Toolkit::PushButton</code> control:</p>
+<p>The constants can be used in any string value in the JSON files, delimited by '{' and '}' characters. In the following example, the <code>IMAGE_DIR</code> constant is defined within the stylesheet, and is used to access the <code>unselectedStateImage</code> image path in the <code>Dali::Toolkit::PushButton</code> control:</p>
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;constants&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;IMAGE_DIR=&quot;{APPLICATION_RESOURCE_PATH}/images&quot;
-&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&quot;styles&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;PushButton&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;unselectedStateImage&quot;: &quot;{IMAGE_DIR}/button-up.9.png&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  "constants": {
+    IMAGE_DIR="{APPLICATION_RESOURCE_PATH}/images"
+  },
+
+  "styles": {
+    "PushButton": {
+      "unselectedStateImage": "{IMAGE_DIR}/button-up.9.png"
+    }
+  }
 }
 </pre>
 
 <h3>Includes Section</h3>
 
-<p>The <code>includes</code> section allows inclusion of other JSON files into the stylesheet. Note that since this section is a JSON array, it is delimited by square brackets (&#39;[&#39; and &#39;]&#39;).</p>
+<p>The <code>includes</code> section allows inclusion of other JSON files into the stylesheet. Note that since this section is a JSON array, it is delimited by square brackets ('[' and ']').</p>
 
 <p>The content of the included files are merged with the other content of the current stylesheet. If more than one included file supplies values for a particular key-value pair, then the last file has the highest priority.</p>
 
@@ -161,14 +161,14 @@ StyleManager::Get().ApplyTheme( &quot;stylesheet.json&quot; );
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;constants&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;INCLUDE_DIR&quot;: &quot;include&quot;
-&nbsp;&nbsp;},
-&nbsp;&nbsp;&quot;includes&quot;:
-&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;{INCLUDE_DIR}/first-include.json&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;{INCLUDE_DIR}/second-include.json&quot;
-&nbsp;&nbsp;]
+  "constants": {
+    "INCLUDE_DIR": "include"
+  },
+  "includes":
+  [
+    "{INCLUDE_DIR}/first-include.json",
+    "{INCLUDE_DIR}/second-include.json"
+  ]
 }
 </pre>
 
@@ -176,20 +176,20 @@ StyleManager::Get().ApplyTheme( &quot;stylesheet.json&quot; );
 
 <p>To reduce the number of repeated key-values, you can use the <code>mappings</code> section. It contains an object of key-value pairs, where the value is any valid JSON type (so can also form a tree).</p>
 
-<p>If a value in any section is a JSON string delimited by &#39;&lt;&#39; and &#39;&gt;&#39;, it is checked against the keys in the mapping section, and the value is replaced by the mapping.</p>
+<p>If a value in any section is a JSON string delimited by '&lt;' and '&gt;', it is checked against the keys in the mapping section, and the value is replaced by the mapping.</p>
 
-<p>In the following example, the confirmation popup&#39;s <code>backingColor</code> property value becomes the JSON array representing RGBA values, which is converted internally into a <code>Dali::Vector4</code> when it is applied to an object:</p>
+<p>In the following example, the confirmation popup's <code>backingColor</code> property value becomes the JSON array representing RGBA values, which is converted internally into a <code>Dali::Vector4</code> when it is applied to an object:</p>
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;mappings&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;backgroundColor&quot;: [0.12, 0.0, 0.25, 1.0]
-&nbsp;&nbsp;},
-&nbsp;&nbsp;&quot;styles&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;ConfirmationPopup&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;backingColor&quot;: &quot;&lt;backgroundColor&gt;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  "mappings": {
+    "backgroundColor": [0.12, 0.0, 0.25, 1.0]
+  },
+  "styles": {
+    "ConfirmationPopup": {
+      "backingColor": "&lt;backgroundColor&gt;"
+    }
+  }
 }
 </pre>
 
@@ -198,7 +198,7 @@ StyleManager::Get().ApplyTheme( &quot;stylesheet.json&quot; );
 <p>The <code>styles</code> section is the main section of the stylesheet. Each key in this JSON object is a style name, which is used to match against control instances in your application:</p>
 
 <ul>
-<li>By default, a <code>Dali::Toolkit::Control</code> class&#39;s name is also its style name. For finer control, you can programmatically set a style name for a given control using the <code>Control::SetStyleName()</code> function. In the following example, the slider control handle text label has been given the style name <code>SliderHandleTextLabel</code>. This means that for any instance of the slider, the handle label style can be specified independently of any other label.</li>
+<li>By default, a <code>Dali::Toolkit::Control</code> class's name is also its style name. For finer control, you can programmatically set a style name for a given control using the <code>Control::SetStyleName()</code> function. In the following example, the slider control handle text label has been given the style name <code>SliderHandleTextLabel</code>. This means that for any instance of the slider, the handle label style can be specified independently of any other label.</li>
 <li>For each entry in the <code>styles</code> section, the children of the entry are the property names of the matching control. In the following example, <code>showPopup</code> is the name of a property in the slider. For more information on the properties of a specific control, see its API Reference.</li>
 <li>Each control has a <code>background</code> property, which can specify a visual. In addition, properties named <code>visual</code>, such as those in the following example, specify a visual.</li>
 </ul>
@@ -207,35 +207,35 @@ StyleManager::Get().ApplyTheme( &quot;stylesheet.json&quot; );
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;styles&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;Slider&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;showValue&quot;: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;showPopup&quot;: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;trackVisual&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;url&quot;: &quot;{IMAGE_DIR}/slider-skin.9.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;size&quot;: [27, 27]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;progressVisual&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;url&quot;: &quot;{IMAGE_DIR}/slider-skin-progress.9.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;size&quot;: [27, 27]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;handleVisual&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;url&quot;: &quot;{IMAGE_DIR}/slider-skin-handle.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;size&quot;: [72,72]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;background&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;visualType&quot;: &quot;GRADIENT&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;startPosition&quot;: [0.0, -0.5],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;endPosition&quot;: [0.0, 0.5],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;stopOffset&quot;: [0.0, 0.5, 0.75,1.0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;stopColor&quot;: [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[1.0,1.0,1.0,0.0]]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;SliderHandleTextLabel&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;textColor&quot;:[0.8, 0.8, 1.0, 1.0]
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  "styles": {
+    "Slider": {
+      "showValue": true,
+      "showPopup": true,
+      "trackVisual": {
+        "url": "{IMAGE_DIR}/slider-skin.9.png",
+        "size": [27, 27]
+      },
+      "progressVisual": {
+        "url": "{IMAGE_DIR}/slider-skin-progress.9.png",
+        "size": [27, 27]
+      },
+      "handleVisual": {
+        "url": "{IMAGE_DIR}/slider-skin-handle.png",
+        "size": [72,72]
+      },
+      "background": {
+        "visualType": "GRADIENT",
+        "startPosition": [0.0, -0.5],
+        "endPosition": [0.0, 0.5],
+        "stopOffset": [0.0, 0.5, 0.75,1.0],
+        "stopColor": [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0],
+                      [1.0,1.0,1.0,0.0]]
+      }
+    },
+    "SliderHandleTextLabel": {
+      "textColor":[0.8, 0.8, 1.0, 1.0]
+    }
+  }
 }
 </pre>
 
@@ -258,53 +258,53 @@ StyleManager::Get().ApplyTheme( &quot;stylesheet.json&quot; );
 
 <p>Setting an explicit font size for text controls is generally considered to be a bad idea: the Tizen platform offers 5 levels of logical font size that can be set by the user, and the stylesheet can be used on multiple devices with different screen sizes and resolutions.</p>
 
-<p>To handle the logical to point size conversion after a settings change, the style manager appends <code>FontSize</code> and the logical value (&quot;0&quot;-&quot;4&quot;) to each style name during the update, and uses that style in preference to the control class name or style name if it can find it in the style sheet.</p>
+<p>To handle the logical to point size conversion after a settings change, the style manager appends <code>FontSize</code> and the logical value ("0"-"4") to each style name during the update, and uses that style in preference to the control class name or style name if it can find it in the style sheet.</p>
 
 <p>This means that you can specify alternative mappings for particular text labels. The following example shows how to map the alternative logical sizes, if you have a text label that has a style name of <code>FolderLabel</code>:</p>
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;styles&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;FolderLabelFontSize0&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;pointSize&quot;: 8
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;FolderLabelFontSize1&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;pointSize&quot;: 10
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;FolderLabelFontSize2&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;pointSize&quot;: 12
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;FolderLabelFontSize3&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;pointSize&quot;: 16
-&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;FolderLabelFontSize4&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;pointSize&quot;: 20
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  "styles": {
+    "FolderLabelFontSize0": {
+      "pointSize": 8
+    },
+    "FolderLabelFontSize1": {
+      "pointSize": 10
+    },
+    "FolderLabelFontSize2": {
+      "pointSize": 12
+    },
+    "FolderLabelFontSize3": {
+      "pointSize": 16
+    },
+    "FolderLabelFontSize4": {
+      "pointSize": 20
+    }
+  }
 }
 </pre>
 </li>
 <li>Using style inheritance
 
-<p>It is possible to &quot;inherit&quot; properties from one style into another by specifying the style names in a <code>styles</code> array. More than 1 style can be merged in this way. The inherited styles are first merged in order, and then any properties that follow are merged on top.</p>
+<p>It is possible to "inherit" properties from one style into another by specifying the style names in a <code>styles</code> array. More than 1 style can be merged in this way. The inherited styles are first merged in order, and then any properties that follow are merged on top.</p>
 
 <p>In the following example, the ColorSlider inherits all of the properties from the slider entry, and changes the background to a gradient:</p>
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;styles&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;ColorSlider&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;styles&quot;: [&quot;Slider&quot;], // Inherit from Slider style
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;background&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;visualType&quot;: &quot;GRADIENT&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;startPosition&quot;: [0.0, -0.5],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;endPosition&quot;: [0.0, 0.5],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;stopOffset&quot;: [0.0, 0.5, 0.75,1.0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;stopColor&quot;: [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[1,1,1,0.09]]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  "styles": {
+    "ColorSlider": {
+      "styles": ["Slider"], // Inherit from Slider style
+      "background": {
+        "visualType": "GRADIENT",
+        "startPosition": [0.0, -0.5],
+        "endPosition": [0.0, 0.5],
+        "stopOffset": [0.0, 0.5, 0.75,1.0],
+        "stopColor": [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0],
+                      [1,1,1,0.09]]
+      }
+    }
+  }
 }
 </pre>
 </li>
@@ -314,18 +314,18 @@ StyleManager::Get().ApplyTheme( &quot;stylesheet.json&quot; );
 
 <pre class="prettyprint">
 TextLabel label = TextLabel::New( myLabelText );
-label.SetStyleName( &quot;AppLabel&quot; );
+label.SetStyleName( "AppLabel" );
 </pre>
 
 <p>You can add the alternative style to the application stylesheet as usual:</p>
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;styles&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;AppLabel&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;textColor&quot;: [0.8, 0.8, 1.0, 1.0]
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  "styles": {
+    "AppLabel": {
+      "textColor": [0.8, 0.8, 1.0, 1.0]
+    }
+  }
 }
 </pre>
 </li>
@@ -342,11 +342,11 @@ label.SetStyleName( &quot;AppLabel&quot; );
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;styles&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;AppLabel&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;textColor&quot;: [0.49, 0.235, 0.596, 1.0]
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  "styles": {
+    "AppLabel": {
+      "textColor": [0.49, 0.235, 0.596, 1.0]
+    }
+  }
 }
 </pre>
 
@@ -354,11 +354,11 @@ label.SetStyleName( &quot;AppLabel&quot; );
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;styles&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;AppLabel&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;textColor&quot;: &quot;#7D3C98&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  "styles": {
+    "AppLabel": {
+      "textColor": "#7D3C98"
+    }
+  }
 }
 </pre>
 
@@ -366,11 +366,11 @@ label.SetStyleName( &quot;AppLabel&quot; );
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&quot;styles&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;AppLabel&quot;: {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;textColor&quot;: {&quot;r&quot;:125, &quot;g&quot;:60, &quot;b&quot;:152}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
+  "styles": {
+    "AppLabel": {
+      "textColor": {"r":125, "g":60, "b":152}
+    }
+  }
 }
 </pre>
 </li></ul>
diff --git a/org.tizen.guides/html/native/ui/dali/svg_rendering_n.htm b/org.tizen.guides/html/native/ui/dali/svg_rendering_n.htm
index c6db585..63da82a 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/svg_rendering_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/svg_rendering_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -64,15 +64,15 @@
 
 <pre class="prettyprint">
 // C++ example, use ImageView to render the SVG image
-ImageView myImageView = ImageView::New( &quot;source-image-url.svg&quot; );
+ImageView myImageView = ImageView::New( "source-image-url.svg" );
 Stage::GetCurrent().Add( myImageView );
 
-// JSPN example, use ImageView to render SVG                                          
-{&quot;stage&quot;:[
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;type&quot;: &quot;ImageView&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;image&quot;: { &quot;url&quot;, &quot;ome-image-url.svg&quot; }
-&nbsp;&nbsp;}
+// JSPN example, use ImageView to render SVG
+{"stage":[
+  {
+    "type": "ImageView",
+    "image": { "url", "ome-image-url.svg" }
+  }
 ] }
 </pre>
 </li>
@@ -84,16 +84,16 @@ Stage::GetCurrent().Add( myImageView );
 // C++ example, set SVG image as control background
 Control myControl = Control::New();
 Property::Map backgroundMap;
-backgroundMap[ImageVisual::Property::URL] = &quot;source-image-url.svg&quot;;
+backgroundMap[ImageVisual::Property::URL] = "source-image-url.svg";
 myControl.SetProperty( Control::Property::BACKGROUND, backgroundMap );
 Stage::GetCurrent().Add( myControl );
 
 // JSON example, set SVG image as control background
-{&quot;stage&quot;:[
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;type&quot;: &quot;Control&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;background&quot;: { &quot;url&quot;, &quot;some-image-url.svg&quot; }
-&nbsp;&nbsp;}
+{"stage":[
+  {
+    "type": "Control",
+    "background": { "url", "some-image-url.svg" }
+  }
 ] }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/ui/dali/tableview_n.htm b/org.tizen.guides/html/native/ui/dali/tableview_n.htm
index 3b5bc33..f01cd67 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/tableview_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/tableview_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>TableView</title>  
+       <title>TableView</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -39,9 +39,9 @@
 
 <p>The <code>Dali::Toolkit::TableView</code> class is a layout container for aligning child actors in a grid like layout. <code>TableView</code> constraints the x and y position and width and height of the child actors.</p>
 
-<p align="center"><strong>Figure: TableView</strong></p>  
+<p align="center"><strong>Figure: TableView</strong></p>
        <p align="center"><img alt="TableView" src="../../../images/tableview.png"/></p>
-       
+
 <h2 id="create" name="create">Creating a TableView</h2>
 
 <p>The following example shows how to create a <code>TableView</code> object:</p>
@@ -51,24 +51,24 @@
 // in <a href="dali_overview_n.htm#create">Creating a DALi Application</a>
 void HelloWorldExample::Create( Application&amp; application )
 {
-&nbsp;&nbsp;TableView tableView = TableView::New( 4, 4 );
-&nbsp;&nbsp;tableView.SetKeyboardFocusable( true );
-&nbsp;&nbsp;tableView.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;tableView.SetSize( 300, 300 );
-
-&nbsp;&nbsp;for( int row = 0; row &lt; 4; ++row )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;for( int col = 0; col &lt; 4; ++col )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;std::ostringstream str;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str &lt;&lt; row &lt;&lt; &quot;-&quot; &lt;&lt; col;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TextLabel textLabel = TextLabel::New( str.str() );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textLabel.SetKeyboardFocusable( true );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textLabel.SetBackgroundColor( Color::WHITE );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tableView.AddChild( textLabel, TableView::CellPosition( row, col ) );
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
-&nbsp;&nbsp;Stage::GetCurrent().Add( tableView );
+  TableView tableView = TableView::New( 4, 4 );
+  tableView.SetKeyboardFocusable( true );
+  tableView.SetParentOrigin( ParentOrigin::CENTER );
+  tableView.SetSize( 300, 300 );
+
+  for( int row = 0; row &lt; 4; ++row )
+  {
+    for( int col = 0; col &lt; 4; ++col )
+    {
+      std::ostringstream str;
+      str &lt;&lt; row &lt;&lt; "-" &lt;&lt; col;
+      TextLabel textLabel = TextLabel::New( str.str() );
+      textLabel.SetKeyboardFocusable( true );
+      textLabel.SetBackgroundColor( Color::WHITE );
+      tableView.AddChild( textLabel, TableView::CellPosition( row, col ) );
+    }
+  }
+  Stage::GetCurrent().Add( tableView );
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/dali/texteditor_n.htm b/org.tizen.guides/html/native/ui/dali/texteditor_n.htm
index e279cb7..34322eb 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/texteditor_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/texteditor_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -67,7 +67,7 @@
                 <td>Emitted when the input style is updated as a consequence of a change in the cursor position.</td>
         </tr>
    </tbody>
-</table>       
+</table>
 
 
 <h2 id="create">Creating a TextEditor</h2>
@@ -82,10 +82,10 @@ editor.SetParentOrigin( ParentOrigin::TOP_CENTER );
 editor.SetProperty( TextEditor::Property::DECORATION_BOUNDING_BOX, boundingBox );
 editor.SetProperty( TextEditor::Property::TEXT_COLOR, Color::BLACK );
 editor.SetProperty( TextEditor::Property::TEXT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;This is a multiline text.\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;I can write several lines.\n&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Line wrapping is also supported for very long sentences.&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;The text should be scrollable as well.\n&quot; );
+                    "This is a multiline text.\n"
+                    "I can write several lines.\n"
+                    "Line wrapping is also supported for very long sentences."
+                    "The text should be scrollable as well.\n" );
 Stage::GetCurrent().Add( editor );
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/dali/textfield_n.htm b/org.tizen.guides/html/native/ui/dali/textfield_n.htm
index b1006cc..c6a6553 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/textfield_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/textfield_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>TextField</title>  
+       <title>TextField</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -47,17 +47,17 @@
 
 <p>The <code>Dali::Toolkit::TextField</code> class is a control providing a single-line editable text field.</p>
 
-<p align="center"><strong>Figure: TextField</strong></p>  
+<p align="center"><strong>Figure: TextField</strong></p>
        <p align="center"><img alt="TextField" src="../../../images/textfield.png"/></p>
-       
+
 <h2 id="create" name="create">Creating a TextField</h2>
 
 <p>Before text has been entered, the <code>Dali::Toolkit::TextField</code> class can display a placeholder text. An alternative placeholder can be displayed when the <code>TextField</code> has keyboard focus. For example, a <code>TextField</code> used to enter a username can initially show the text <code>Unknown Name</code>, and the text <code>Enter Name.</code> when the cursor is visible.</p>
 
 <pre class="prettyprint">
 TextField field = TextField::New();
-field.SetProperty( TextField::Property::PLACEHOLDER_TEXT, &quot;Unnamed Name&quot; );
-field.SetProperty( TextField::Property::PLACEHOLDER_TEXT_FOCUSED, &quot;Enter Name.&quot; );
+field.SetProperty( TextField::Property::PLACEHOLDER_TEXT, "Unnamed Name" );
+field.SetProperty( TextField::Property::PLACEHOLDER_TEXT_FOCUSED, "Enter Name." );
 Stage::GetCurrent().Add( field );
 </pre>
 
@@ -73,8 +73,8 @@ std::string fieldTextString = fieldText.Get&lt; std::string &gt;();
 <p>The <code>Dali::Toolkit::TextField</code> class displays a single-line of text, which scrolls if there is not enough space for the text displayed. If there is enough space, the text can be aligned horizontally to the beginning, end, or center of the available area:</p>
 
 <pre class="prettyprint">
-// &quot;CENTER&quot; or &quot;END&quot;
-field.SetProperty( TextField::Property::HORIZONTAL_ALIGNMENT, &quot;BEGIN&quot; );
+// "CENTER" or "END"
+field.SetProperty( TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN" );
 </pre>
 
 <h2 id="decorations" name="decorations">Using Decorations</h2>
diff --git a/org.tizen.guides/html/native/ui/dali/textlabel_n.htm b/org.tizen.guides/html/native/ui/dali/textlabel_n.htm
index df230c2..52849c3 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/textlabel_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/textlabel_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>TextLabel</title>  
+       <title>TextLabel</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -49,7 +49,7 @@
 
 <p>The <code>Dali::Toolkit::TextLabel</code> class provides a control that renders a short text string. The text labels are lightweight, non-editable, and do not respond to user input.</p>
 
-<p align="center"><strong>Figure: TextLabel</strong></p>  
+<p align="center"><strong>Figure: TextLabel</strong></p>
        <p align="center"><img alt="TextLabel" src="../../../images/textlabel.png"/></p>
 
 <h2 id="create" name="create">Creating a TextLabel</h2>
@@ -59,7 +59,7 @@
 <pre class="prettyprint">
 TextLabel label = TextLabel::New();
 label.SetProperty( TextLabel::Property::TEXT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Hello World&quot; );
+                   "Hello World" );
 Stage::GetCurrent().Add( label );
 </pre>
 
@@ -70,8 +70,8 @@ Stage::GetCurrent().Add( label );
 <p>Alternatively, you can request a font using the <code>FONT_FAMILY</code>, <code>FONT_STYLE</code>, and <code>POINT_SIZE</code> properties:</p>
 
 <pre class="prettyprint">
-label.SetProperty( TextLabel::Property::FONT_FAMILY, &quot;HelveticaNue&quot; );
-label.SetProperty( TextLabel::Property::FONT_STYLE, &quot;Regular&quot; );
+label.SetProperty( TextLabel::Property::FONT_FAMILY, "HelveticaNue" );
+label.SetProperty( TextLabel::Property::FONT_STYLE, "Regular" );
 label.SetProperty( TextLabel::Property::POINT_SIZE, 12.0f );
 </pre>
 
@@ -89,8 +89,8 @@ label.SetProperty( TextLabel::Property::MULTI_LINE, true );
 <p>The text can be aligned horizontally to the beginning, end, or center of the available area:</p>
 
 <pre class="prettyprint">
-// &quot;CENTER&quot; or &quot;END&quot;
-label.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, &quot;BEGIN&quot; );
+// "CENTER" or "END"
+label.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "BEGIN" );
 </pre>
 
 <h2 id="size" name="size">Managing the Layout</h2>
@@ -103,7 +103,7 @@ The following examples show the actual size by setting a colored background, whi
 <p>In its natural size, the <code>TextLabel</code> is large enough to display the text without wrapping, and does not have extra space to align the text within. In the following example, the same result is displayed regardless of the alignment or multi-line properties:</p>
 
 <pre class="prettyprint">
-TextLabel label = TextLabel::New( &quot;Hello World&quot; );
+TextLabel label = TextLabel::New( "Hello World" );
 label.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
 label.SetBackgroundColor( Color::BLUE );
@@ -122,7 +122,7 @@ parent.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 
 Stage::GetCurrent().Add( parent );
 
-TextLabel label = TextLabel::New( &quot;Hello World&quot; );
+TextLabel label = TextLabel::New( "Hello World" );
 label.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 label.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 label.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
@@ -131,7 +131,7 @@ label.SetBackgroundColor( Color::BLUE );
 parent.AddChild( label, TableView::CellPosition( 0, 0 ) );
 parent.SetFitHeight( 0 );
 
-label = TextLabel::New( &quot;A Quick Brown Fox Jumps Over The Lazy Dog&quot; );
+label = TextLabel::New( "A Quick Brown Fox Jumps Over The Lazy Dog" );
 label.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 label.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 label.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
@@ -141,7 +141,7 @@ label.SetProperty( TextLabel::Property::MULTI_LINE, true );
 parent.AddChild( label, TableView::CellPosition( 1, 0 ) );
 parent.SetFitHeight( 1 );
 
-label = TextLabel::New( &quot;لإعادة ترتيب الشاشات، يجب تغيير نوع العرض إل&quot; );
+label = TextLabel::New( "لإعادة ترتيب الشاشات، يجب تغيير نوع العرض إل" );
 label.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 label.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 label.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
@@ -152,7 +152,7 @@ parent.AddChild( label, TableView::CellPosition( 2, 0 ) );
 parent.SetFitHeight( 2 );
 </pre>
 
-<p>In the example, the &quot;Hello World&quot; text label has been given the full width, not the natural width.</p>
+<p>In the example, the "Hello World" text label has been given the full width, not the natural width.</p>
 
 <h2 id="decoration" name="decoration">Using Decorations</h2>
 
@@ -258,7 +258,7 @@ parent.SetFitHeight( 2 );
 <p>To change the color of the text, use the <code>TEXT_COLOR</code> property. Unlike the <code>Actor::COLOR</code> property, this does not affect child actors added to the <code>TextLabel</code>.</p>
 
 <pre class="prettyprint">
-label.SetProperty( TextLabel::Property::TEXT, &quot;Red Text&quot; );
+label.SetProperty( TextLabel::Property::TEXT, "Red Text" );
 label.SetProperty( TextLabel::Property::TEXT_COLOR, Color::RED );
 </pre>
 
@@ -268,14 +268,14 @@ label.SetProperty( TextLabel::Property::TEXT_COLOR, Color::RED );
 
 <pre class="prettyprint">
 stage.SetBackgroundColor( Color::BLUE );
-label1.SetProperty( TextLabel::Property::TEXT, &quot;Plain Text&quot; );
-label2.SetProperty( TextLabel::Property::TEXT, &quot;Text with Shadow&quot; );
+label1.SetProperty( TextLabel::Property::TEXT, "Plain Text" );
+label2.SetProperty( TextLabel::Property::TEXT, "Text with Shadow" );
 label2.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 1.0f, 1.0f ) );
 label2.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK );
-label3.SetProperty( TextLabel::Property::TEXT, &quot;Text with Bigger Shadow&quot; );
+label3.SetProperty( TextLabel::Property::TEXT, "Text with Bigger Shadow" );
 label3.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 2.0f, 2.0f ) );
 label3.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK );
-label4.SetProperty( TextLabel::Property::TEXT, &quot;Text with Color Shadow&quot; );
+label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Shadow" );
 label4.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 1.0f, 1.0f ) );
 label4.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::RED );
 </pre>
@@ -285,9 +285,9 @@ label4.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::RED );
 <p>The text can be underlined by setting the <code>UNDERLINE_ENABLED</code> property. The color can also be selected using the <code>UNDERLINE_COLOR</code> property.</p>
 
 <pre class="prettyprint">
-label1.SetProperty( TextLabel::Property::TEXT, &quot;Text with Underline&quot; );
+label1.SetProperty( TextLabel::Property::TEXT, "Text with Underline" );
 label1.SetProperty( TextLabel::Property::UNDERLINE_ENABLED, true );
-label2.SetProperty( TextLabel::Property::TEXT, &quot;Text with Color Underline&quot; );
+label2.SetProperty( TextLabel::Property::TEXT, "Text with Color Underline" );
 label2.SetProperty( TextLabel::Property::UNDERLINE_ENABLED, true );
 label2.SetProperty( TextLabel::Property::UNDERLINE_COLOR, Color::GREEN );
 </pre>
diff --git a/org.tizen.guides/html/native/ui/dali/touchdata_n.htm b/org.tizen.guides/html/native/ui/dali/touchdata_n.htm
index 8989044..fe9c0d4 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/touchdata_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/touchdata_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -53,17 +53,17 @@
 <p>To establish a connection to a touch data signal:</p>
 
 <ol>
-<li>Connect to the actor&#39;s touch signal:
+<li>Connect to the actor's touch signal:
        <ol type="a"><li>Create your touch handling function:
 
 <pre class="prettyprint">
 class MyApplication : public ConnectionTracker
 {
-&nbsp;&nbsp;bool OnTouch( Actor actor, TouchData&amp; touch );
+  bool OnTouch( Actor actor, TouchData&amp; touch );
 };
 </pre>
 </li>
-<li>Connect to the required actor&#39;s touch signal (this is normally done when the init signal is received).
+<li>Connect to the required actor's touch signal (this is normally done when the init signal is received).
 <p>Ensure that your <code>MyApplication</code> class is set up to connect to signals, and that it inherits from the <code>ConnectionTracker</code> class (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1ConnectionTracker.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1ConnectionTracker.html">wearable</a> applications). The <code>ConnectionTracker</code> provides a way of automatically disconnecting from the connected signals when the application dies. This is more useful for application objects that exist only temporarily.</p>
 
 <pre class="prettyprint">
@@ -83,28 +83,28 @@ actor.TouchSignal().Connect( this, &amp;MyApplication::OnTouch );
 <pre class="prettyprint">
 bool MyApplication::OnTouch( Actor actor, TouchData&amp; touch )
 {
-&nbsp;&nbsp;const std::size_t pointCount = touch.GetPointCount();
-&nbsp;&nbsp;if( pointCount == 1 )
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;// Single touch event
-
-&nbsp;&nbsp;&nbsp;&nbsp;// Get touch state of the primary point
-&nbsp;&nbsp;&nbsp;&nbsp;PointState::Type pointState = touch.GetState( 0 );
-&nbsp;&nbsp;&nbsp;&nbsp;if( pointState == PointState::DOWN )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// User has just pressed on the device
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;else if( pointState == PointState::UP )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// User has just released their finger from the device
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;}
-&nbsp;&nbsp;else
-&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;// Multi-touch event
-&nbsp;&nbsp;}
-
-&nbsp;&nbsp;return true; // Touch handled
+  const std::size_t pointCount = touch.GetPointCount();
+  if( pointCount == 1 )
+  {
+    // Single touch event
+
+    // Get touch state of the primary point
+    PointState::Type pointState = touch.GetState( 0 );
+    if( pointState == PointState::DOWN )
+    {
+      // User has just pressed on the device
+    }
+    else if( pointState == PointState::UP )
+    {
+      // User has just released their finger from the device
+    }
+  }
+  else
+  {
+    // Multi-touch event
+  }
+
+  return true; // Touch handled
 }
 </pre>
 </li>
@@ -143,7 +143,7 @@ float averageRadius = touchData.GetRadius( 0 );
 const Vector2&amp; ellipseRadii = touchData.GetEllipseRadius( 0 );
 </pre>
 </li>
-<li>To retrieve the angle of the user&#39;s finger when touching the screen, use the <code>GetAngle()</code> function. The return value is the angle relative to the Y axis.
+<li>To retrieve the angle of the user's finger when touching the screen, use the <code>GetAngle()</code> function. The return value is the angle relative to the Y axis.
 
 <pre class="prettyprint">
 Degree angle = touchData.GetAngle( 0 );
diff --git a/org.tizen.guides/html/native/ui/dali/ui_components_n.htm b/org.tizen.guides/html/native/ui/dali/ui_components_n.htm
index 2189b87..6170ea0 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/ui_components_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/ui_components_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>UI Components</title>  
+       <title>UI Components</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,14 +32,14 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__dali__toolkit.html">Dali::Toolkit API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>UI Components</h1>
 
 <p>UI components are interactive components for layouting and scrolling the user interface. DALi provides UI components, such as buttons, item view, scroll view, table view, text controls, image view, flex container, model3dview, slider, and video view.</p>
 
-<p align="center"><strong>Figure: DALi UI components</strong></p>  
+<p align="center"><strong>Figure: DALi UI components</strong></p>
        <p align="center"><img alt="DALi UI components" src="../../../images/ui_controls.png"/></p>
        <p align="center"><img alt="DALi UI components" src="../../../images/ui_controls2.png"/></p>
 
@@ -114,17 +114,17 @@
        </tr>
    </tbody>
   </table>
-  
+
 <p>The base class for the components is <code>Dali::Toolkit::Control</code> (in <a href="../../../../../org.tizen.native.mobile.apireference/classDali_1_1Toolkit_1_1Control.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/classDali_1_1Toolkit_1_1Control.html">wearable</a> applications). This class can also be used to create your own custom UI components. For tips for the control class, see <a href="control_base_n.htm">Control</a>. In this UI Components guide, both the terms <strong>control</strong> and <strong>component</strong> are used to refer to a UI component.</p>
 
 <p>You can <a href="styling_n.htm">customize the look of the UI components with stylesheets</a>. For a reusable rendering logic that can be used by all UI components, take advantage of <a href="visuals_n.htm">DALi visuals</a>.</p>
 
 <p>The following figure illustrates the hierarchy of the UI components.</p>
 
-<p align="center"><strong>Figure: DALi UI component hierarchy</strong></p>  
-       <p align="center"><img alt="DALi UI component hierarchy" src="../../../images/ui_control_hierarchy.png"/></p> 
-       
-    
+<p align="center"><strong>Figure: DALi UI component hierarchy</strong></p>
+       <p align="center"><img alt="DALi UI component hierarchy" src="../../../images/ui_control_hierarchy.png"/></p>
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/dali/videoview_n.htm b/org.tizen.guides/html/native/ui/dali/videoview_n.htm
index f45bbd5..450100b 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/videoview_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/videoview_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -47,25 +47,25 @@
 <p align="center"><strong>Figure: VideoView</strong></p>
        <p align="center"><img alt="VideoView" src="../../../images/dali_videoview.png"/></p>
 
-  
+
       <div class="note">
         <strong>Note</strong>
         The VideoView control does not use any privileges APIs on its own. However, if you use video files in a specific device storage, the application can require privileges to access the storage. For more information, see the Player API Reference (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications).
     </div>
-       
+
 <p>The <code>VideoView</code> class provides the <code>FinishedSignal()</code>, which is emitted when the video playback is finished. The related callback can support some basic actions.</p>
 
 <pre class="prettyprint">
 void Create( Application&amp; application )
 {
-&nbsp;&nbsp;mView.FinishedSignal().Connect( this, &amp;VideoViewController::OnFinished );
+  mView.FinishedSignal().Connect( this, &amp;VideoViewController::OnFinished );
 }
 
 void OnFinished( VideoView&amp; view )
 {
-&nbsp;&nbsp;mFinished = true;
+  mFinished = true;
 }
-</pre> 
+</pre>
 
 <h2 id="create">Creating a VideoView</h2>
 
@@ -74,35 +74,35 @@ void OnFinished( VideoView&amp; view )
 <pre class="prettyprint">
 class VideoViewController: public ConnectionTracker
 {
-&nbsp;&nbsp;public:
-&nbsp;&nbsp;&nbsp;&nbsp;VideoViewController( Application&amp; application )
-&nbsp;&nbsp;&nbsp;&nbsp;: mApplication( application )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect( this, &amp;VideoViewController::Create );
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;void Create( Application&amp; application )
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set the handle
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mView = Toolkit::VideoView::New( &quot;videofile.mp4&quot; );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage::GetCurrent().Add( mView );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mView.SetParentOrigin( ParentOrigin::CENTER );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mView.SetAnchorPoint( AnchorPoint::CENTER );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mView.SetSize( WIDTH, HEIGHT );
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mView.Play();
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;private:
-&nbsp;&nbsp;&nbsp;&nbsp;Application&amp; mApplication;
-&nbsp;&nbsp;&nbsp;&nbsp;VideoView mView;
+  public:
+    VideoViewController( Application&amp; application )
+    : mApplication( application )
+    {
+      mApplication.InitSignal().Connect( this, &amp;VideoViewController::Create );
+    }
+
+    void Create( Application&amp; application )
+    {
+      // Set the handle
+      mView = Toolkit::VideoView::New( "videofile.mp4" );
+      Stage::GetCurrent().Add( mView );
+      mView.SetParentOrigin( ParentOrigin::CENTER );
+      mView.SetAnchorPoint( AnchorPoint::CENTER );
+      mView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+      mView.SetSize( WIDTH, HEIGHT );
+      mView.Play();
+    }
+
+  private:
+    Application&amp; mApplication;
+    VideoView mView;
 }
 </pre>
 
-  
+
       <div class="note">
         <strong>Note</strong>
-        You can set the video file to be played in the <code>VideoView::New()</code> function, or by modifying <code>VIDEO</code> property with <code>SetProperty( VideoView::Property::VIDEO, &quot;videofile2.mp4&quot; )</code>.
+        You can set the video file to be played in the <code>VideoView::New()</code> function, or by modifying <code>VIDEO</code> property with <code>SetProperty( VideoView::Property::VIDEO, "videofile2.mp4" )</code>.
     </div>
 
 <h2 id="property">Modifying VideoView Properties</h2>
@@ -117,8 +117,8 @@ Property::Value value = mView.GetProperty( VideoView::Property::VOLUME );
 Value.Get( oldMap );
 
 Property::Map newMap;
-newMap.Insert( &quot;volumeLeft&quot;, 1.0f );
-newMap.Insert( &quot;volumeRight&quot;, 0.5f );
+newMap.Insert( "volumeLeft", 1.0f );
+newMap.Insert( "volumeRight", 0.5f );
 mView.SetProperty( VideoView::Property::VOLUME, newMap );
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/dali/visuals_n.htm b/org.tizen.guides/html/native/ui/dali/visuals_n.htm
index bd4b3b6..e7de216 100644 (file)
--- a/org.tizen.guides/html/native/ui/dali/visuals_n.htm
+++ b/org.tizen.guides/html/native/ui/dali/visuals_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -67,12 +67,12 @@
 
 <h2 id="color">Color Visual</h2>
 
-<p>The color visual renders a solid color to the control&#39;s quad.</p>
+<p>The color visual renders a solid color to the control's quad.</p>
 
 <p align="center"><strong>Figure: Color visual</strong></p>
 <p align="center"><img alt="Color visual" src="../../../images/dali_color_visual.png"/></p>
 
-<p>The following table lists the supported properties. The visual type is <code>Visual::COLOR</code> or <code>&quot;COLOR&quot;</code>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::COLOR</code> or <code>"COLOR"</code>.</p>
 
 <p align="center" class="Table"><strong>Table: Image visual properties</strong></p>
 <table>
@@ -106,13 +106,13 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 
 <h2 id="gradient">Gradient Visual</h2>
 
-<p>The gradient visual renders a smooth transition of colors to the control&#39;s quad. Both linear (left in the following figure) and radial (right in the following figure) gradients are supported.</p>
+<p>The gradient visual renders a smooth transition of colors to the control's quad. Both linear (left in the following figure) and radial (right in the following figure) gradients are supported.</p>
 
 <p align="center"><strong>Figure: Gradient visual</strong></p>
 <p align="center"><img alt="Gradient visual linear" src="../../../images/dali_gradient_visual_linear.png"/> <img alt="Gradient visual radial" src="../../../images/dali_gradient_visual_radial.png"/></p>
 
 
-<p>The following table lists the supported properties. The visual type is <code>Visual::GRADIENT</code> or <code>&quot;GRADIENT&quot;</code>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::GRADIENT</code> or <code>"GRADIENT"</code>.</p>
 
 <p align="center" class="Table"><strong>Table: Gradient visual properties</strong></p>
 <table>
@@ -292,7 +292,7 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 
 <h2 id="image">Image Visual</h2>
 
-<p>The image visual renders  an image into the control&#39;s quad. Depending on the extension of the image, a different visual is provided to render the image onto the screen:</p>
+<p>The image visual renders  an image into the control's quad. Depending on the extension of the image, a different visual is provided to render the image onto the screen:</p>
 
 <ul>
 <li>Normal (Quad)</li>
@@ -302,12 +302,12 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 
 <h3>Normal Image</h3>
 
-<p>The normal image visual renders a raster image (such as JPG or PNG) into the control&#39;s quad.</p>
+<p>The normal image visual renders a raster image (such as JPG or PNG) into the control's quad.</p>
 
 <p align="center"><strong>Figure: Normal image visual</strong></p>
 <p align="center"><img alt="Normal image visual" src="../../../images/dali_image_visual_normal.png"/></p>
 
-<p>The following table lists the supported properties. The visual type is <code>Visual::IMAGE</code> or <code>&quot;IMAGE&quot;</code>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::IMAGE</code> or <code>"IMAGE"</code>.</p>
 
 <p align="center" class="Table"><strong>Table: Normal image visual properties</strong></p>
 <table>
@@ -363,18 +363,18 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
 Dali::Property::Map map;
 map[Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE;
-map[ImageVisual::Property::URL] = &quot;path-to-image.jpg&quot;;
+map[ImageVisual::Property::URL] = "path-to-image.jpg";
 control.SetProperty( Control::Property::BACKGROUND, map );
 </pre>
 
 <h3>N-Patch Image</h3>
 
-<p>The n-patch image visual renders an n-patch or a 9-patch image into the control&#39;s quad.</p>
+<p>The n-patch image visual renders an n-patch or a 9-patch image into the control's quad.</p>
 
 <p align="center"><strong>Figure: N-patch image visual</strong></p>
 <p align="center"><img alt="N-patch image visual" src="../../../images/dali_image_visual_nPatch.png"/></p>
 
-<p>The following table lists the supported properties. The visual type is <code>Visual::IMAGE</code> or <code>&quot;IMAGE&quot;</code>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::IMAGE</code> or <code>"IMAGE"</code>.</p>
 
 <p align="center" class="Table"><strong>Table: N-patch image visual properties</strong></p>
 <table>
@@ -409,13 +409,13 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
 Dali::Property::Map map;
 map[Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE;
-map[Dali::Toolkit::ImageVisual::Property::URL] = &quot;path-to-image.9.png&quot;;
+map[Dali::Toolkit::ImageVisual::Property::URL] = "path-to-image.9.png";
 control.SetProperty( Control::Property::BACKGROUND, map );
 </pre>
 
 <h3>SVG Image</h3>
 
-<p>The SVG image visual renders an SVG image into the control&#39;s quad. It supports the following features from the <a href="https://www.w3.org/TR/SVGTiny12" target="_blank">SVG Tiny 1.2 Specification</a>:</p>
+<p>The SVG image visual renders an SVG image into the control's quad. It supports the following features from the <a href="https://www.w3.org/TR/SVGTiny12" target="_blank">SVG Tiny 1.2 Specification</a>:</p>
 
 <ul>
 <li>Basic shapes</li>
@@ -437,7 +437,7 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 <p align="center"><strong>Figure: SVG image visual</strong></p>
 <p align="center"><img alt="SVG image visual" src="../../../images/dali_image_visual_svg.png"/></p>
 
-<p>The following table lists the supported properties. The visual type is <code>Visual::IMAGE</code> or <code>&quot;IMAGE&quot;</code>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::IMAGE</code> or <code>"IMAGE"</code>.</p>
 
 <p align="center" class="Table"><strong>Table: SVG image visual properties</strong></p>
 <table>
@@ -465,7 +465,7 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
 Dali::Property::Map map;
 map[Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE;
-map[Dali::Toolkit::ImageVisual::Property::URL] = &quot;path-to-image.svg&quot;;
+map[Dali::Toolkit::ImageVisual::Property::URL] = "path-to-image.svg";
 control.SetSize( 200.f, 200.f );
 control.SetProperty( Control::Property::BACKGROUND, map );
 </pre>
@@ -473,12 +473,12 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 
 <h2 id="border">Border Visual</h2>
 
-<p>The border visual renders a solid color as an internal border to the control&#39;s quad.</p>
+<p>The border visual renders a solid color as an internal border to the control's quad.</p>
 
 <p align="center"><strong>Figure: Border visual</strong></p>
 <p align="center"><img alt="Border visual" src="../../../images/dali_border_visual.png"/></p>
 
-<p>The following table lists the supported properties. The visual type is <code>Visual::BORDER</code> or <code>&quot;BORDER&quot;</code>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::BORDER</code> or <code>"BORDER"</code>.</p>
 
 <p align="center" class="Table"><strong>Table: Border visual properties</strong></p>
 <table>
@@ -533,7 +533,7 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 <p align="center"><strong>Figure: Mesh visual</strong></p>
 <p align="center"><img alt="Mesh visual" src="../../../images/dali_mesh_visual.png"/></p>
 
-<p>The following table lists the supported properties. The visual type is <code>Visual::MESH</code> or <code>&quot;MESH&quot;</code>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::MESH</code> or <code>"MESH"</code>.</p>
 
 <p align="center" class="Table"><strong>Table: Mesh visual properties</strong></p>
 <table>
@@ -634,9 +634,9 @@ Dali::Stage stage = Dali::Stage::GetCurrent();
 Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
 Dali::Property::Map map;
 map[Visual::Property::TYPE] = Dali::Toolkit::Visual::MESH;
-map[MeshVisual::Property::OBJECT_URL] = &quot;home/models/Dino.obj&quot;;
-map[MeshVisual::Property::MATERIAL_URL] = &quot;home/models/Dino.mtl&quot;;
-map[MeshVisual::Property::TEXTURES_PATH] = &quot;home/images/&quot;;
+map[MeshVisual::Property::OBJECT_URL] = "home/models/Dino.obj";
+map[MeshVisual::Property::MATERIAL_URL] = "home/models/Dino.mtl";
+map[MeshVisual::Property::TEXTURES_PATH] = "home/images/";
 control.SetProperty( Control::Property::BACKGROUND, map );
 </pre>
 
@@ -648,7 +648,7 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 <p align="center"><strong>Figure: Primitive visual</strong></p>
 <p align="center"><img alt="Primitive visual" src="../../../images/dali_primitive_visual1.png"/></p>
 
-<p>The following table lists the supported properties. The visual type is <code>Visual::PRIMITIVE</code> or <code>&quot;PRIMITIVE&quot;</code>.</p>
+<p>The following table lists the supported properties. The visual type is <code>Visual::PRIMITIVE</code> or <code>"PRIMITIVE"</code>.</p>
 
 <p align="center" class="Table"><strong>Table: Primitive visual properties</strong></p>
 <table>
@@ -666,7 +666,7 @@ control.SetProperty( Control::Property::BACKGROUND, map );
                 <td><code>shape</code></td>
                 <td>INTEGER or STRING</td>
                 <td>The specific shape to render.</td>
-                <td><code>PrimitiveVisual::Shape::SPHERE</code> or <code>&quot;SPHERE&quot;</code></td>
+                <td><code>PrimitiveVisual::Shape::SPHERE</code> or <code>"SPHERE"</code></td>
                <td>See the <a href="#shapes">Shape values</a> table.</td>
         </tr>
         <tr>
@@ -898,13 +898,13 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 </li>
 <li><strong>Slices:</strong>
 
-<p>For spheres and conical frustrums, &quot;slices&quot; determine how many divisions there are as you go around the object.</p>
+<p>For spheres and conical frustrums, "slices" determine how many divisions there are as you go around the object.</p>
 
 <p align="center"><img alt="Slices" src="../../../images/dali_slices.png"/></p>
 </li>
 <li><strong>Stacks:</strong>
 
-<p>For spheres, &quot;stacks&quot; determines how many layers there are as you go down the object.</p>
+<p>For spheres, "stacks" determines how many layers there are as you go down the object.</p>
 
 <p align="center"><img alt="Stacks" src="../../../images/dali_stacks.png"/></p>
 </li>
@@ -912,12 +912,12 @@ control.SetProperty( Control::Property::BACKGROUND, map );
 
 <h2 id="wireframe">Wireframe Visual</h2>
 
-<p>The wireframe visual renders a wireframe around a control&#39;s quad. It is mainly used for debugging and is the visual that replaces all other visuals when <strong>Visual Debug Rendering</strong> is switched on. To switch <strong>Visual Debug Rendering</strong> on, set the <code>DALI_DEBUG_RENDERING</code> environment variable to 1 before launching the DALi application.</p>
- 
+<p>The wireframe visual renders a wireframe around a control's quad. It is mainly used for debugging and is the visual that replaces all other visuals when <strong>Visual Debug Rendering</strong> is switched on. To switch <strong>Visual Debug Rendering</strong> on, set the <code>DALI_DEBUG_RENDERING</code> environment variable to 1 before launching the DALi application.</p>
+
 <p align="center"><strong>Figure: Wireframe visual</strong></p>
 <p align="center"><img alt="Wireframe visual" src="../../../images/dali_wireframe_visual.png"/></p>
 
-<p>The visual type is <code>Visual::WIREFRAME</code> or <code>&quot;WIREFRAME&quot;</code>.</p>
+<p>The visual type is <code>Visual::WIREFRAME</code> or <code>"WIREFRAME"</code>.</p>
 
 <p><strong>Usage:</strong></p>
 
diff --git a/org.tizen.guides/html/native/ui/efl/accessibility_architecture_n.htm b/org.tizen.guides/html/native/ui/efl/accessibility_architecture_n.htm
index cfba98a..8f21611 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/accessibility_architecture_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/accessibility_architecture_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Accessibility Architecture</title> 
- </head> 
+  <title>Accessibility Architecture</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,26 +31,26 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Accessibility.html">Accessibility API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Accessibility Architecture</h1> 
+  <h1>Accessibility Architecture</h1>
 
-<p>The Assistive Technology Service Provider Interface (or AT-SPI2) is an API for developing accessible applications for open platforms. The accessibility implementation for the Tizen platform is based on a solution available for the desktop versions of Elementary, such as Elementary ATSPI.</p> 
+<p>The Assistive Technology Service Provider Interface (or AT-SPI2) is an API for developing accessible applications for open platforms. The accessibility implementation for the Tizen platform is based on a solution available for the desktop versions of Elementary, such as Elementary ATSPI.</p>
 
 <p>The <a href="https://phab.enlightenment.org/w/elementary_atspi/" target="_blank">Elementary ATSPI</a> enables applications to interact with graphical Elementary components visible on the screen. For example, an accessibility client, such as a screen reader, can access the text in labels and descriptions of any application running on the screen, read it to the user, or interpret a UI component using its defined role.</p>
 
 <p>The following figure shows the general view of the accessibility framework architecture for Tizen 3.0.</p>
-  
-<p align="center"><strong>Figure: Accessibility framework architecture</strong></p> 
-<p align="center"><img alt="Accessibility framework architecture" src="../../../images/accessibility-framework-architecture.png" /></p> 
+
+<p align="center"><strong>Figure: Accessibility framework architecture</strong></p>
+<p align="center"><img alt="Accessibility framework architecture" src="../../../images/accessibility-framework-architecture.png" /></p>
 
 <p>The following figure and table show the component model of the accessibility framework architecture for Tizen 3.0 and the related components.</p>
- 
-<p align="center"><strong>Figure: Component model</strong></p> 
+
+<p align="center"><strong>Figure: Component model</strong></p>
 <p align="center"><img alt="Component model" src="../../../images/accessibility-framework-architecture-component-model.png" /></p>
- 
+
 <p align="center" class="Table"><strong>Table: Components</strong></p>
 <table>
 <tbody>
@@ -93,21 +93,21 @@
  <tr>
  <td>TTS</td>
  <td>Text-to-speech synthesizer on Tizen</td>
- </tr> 
+ </tr>
  </tbody></table>
 
 <p>The following figure shows the EFL Elementary ATSPI implementation architecture.</p>
 
-<p align="center"><strong>Figure: Implementation architecture</strong></p> 
-<p align="center"><img alt="Implementation architecture" src="../../../images/elm-atspi-architecture.png" /></p> 
+<p align="center"><strong>Figure: Implementation architecture</strong></p>
+<p align="center"><img alt="Implementation architecture" src="../../../images/elm-atspi-architecture.png" /></p>
 
 <h2>Operational Model of the Screen Reader</h2>
 <p>The general outline of the screen reader navigation operation recognizes gestures based on multi-touch pointer events. It queries the accessibility object tree of the active application, and determines which UI element must be highlighted and read.</p>
 <p>The following figure shows the operational model.</p>
 
-<p align="center"><strong>Figure: Screen reader operational model</strong></p> 
-<p align="center"><img alt="Screen reader operational model" src="../../../images/screen-reader-navigation-operation-model.png" /></p>   
-  
+<p align="center"><strong>Figure: Screen reader operational model</strong></p>
+<p align="center"><img alt="Screen reader operational model" src="../../../images/screen-reader-navigation-operation-model.png" /></p>
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/accessibility_config_n.htm b/org.tizen.guides/html/native/ui/efl/accessibility_config_n.htm
index 1ecb376..b945a87 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/accessibility_config_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/accessibility_config_n.htm
@@ -5,25 +5,25 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Configuring Accessibility in a Device</title> 
- </head> 
+  <title>Configuring Accessibility in a Device</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
-                       <li>Tizen 3.0 and Higher for Wearable</li>                      
+                       <li>Tizen 3.0 and Higher for Wearable</li>
                </ul>
                <p class="toc-title">Content</p>
                        <ul class="toc">
@@ -36,16 +36,16 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Accessibility.html">Accessibility API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Configuring Accessibility in a Device</h1> 
+  <h1>Configuring Accessibility in a Device</h1>
 
 <p>Tizen provides the following accessibility features:</p>
 <ul><li><strong>Font size</strong>
-<p>The user can configure system-wide font size settings, such as enlarge the fonts to suit visually-impaired users&#39; needs.</p></li>
-<li><strong>Screen reader</strong> 
+<p>The user can configure system-wide font size settings, such as enlarge the fonts to suit visually-impaired users' needs.</p></li>
+<li><strong>Screen reader</strong>
 <p>Visually-impaired users can interact with a Tizen device through intuitive touch screen gestures. The screen reader reacts to the gestures by examining the elements of the graphical user interface, reading aloud, and highlighting the currently focused content of the screen.</p></li></ul>
 
 <p>You can enable one or more accessibility features at the same time to better suit the device to your needs and preferences. Some features (such as the screen reader) require the use of a small set of specific gestures to operate them, while others (such as changing font size) only need to be enabled in the device settings.</p>
@@ -54,14 +54,14 @@
 <h2 id="screen_reader" name="screen_reader">Enabling the Screen Reader</h2>
 
 <p>To enable the screen reader:</p>
-<ol><li>Install and launch the <strong>UI Components</strong> application. 
+<ol><li>Install and launch the <strong>UI Components</strong> application.
 <p>UI Components is a mobile native sample application included in the Tizen Studio. You can install it through the Tizen Studio.</p></li>
 <li>Select <strong>Accessibility &gt; Screen Reader</strong>.</li>
 <li>Enable the <strong>Screen Reader (TTS)</strong> setting.</li></ol>
 
-<p align="center"><strong>Figure: Enabling the screen reader</strong></p> 
-<p align="center"><img alt="Enabling the screen reader" src="../../../images/ui-controls.png" /> <img alt="Enabling the screen reader" src="../../../images/ui-controls-accessibility.png" /> <img alt="Enabling the screen reader" src="../../../images/ui-controls-accessibility-screen-reader.png" /></p> 
-     
+<p align="center"><strong>Figure: Enabling the screen reader</strong></p>
+<p align="center"><img alt="Enabling the screen reader" src="../../../images/ui-controls.png" /> <img alt="Enabling the screen reader" src="../../../images/ui-controls-accessibility.png" /> <img alt="Enabling the screen reader" src="../../../images/ui-controls-accessibility-screen-reader.png" /></p>
+
 <p>Once the screen reader is enabled, you can configure it by setting the speech rate and the language:</p>
 
 <ul>
@@ -69,9 +69,9 @@
 <p>To set the speech rate, which is the speed of the voice output provided by the screen reader:</p>
 <ol><li>In the built-in Settings application, select <strong>Language and Input &gt; TTS</strong>.</li>
 <li>Select the preferred speech rate by hovering one finger over the <strong>Speech rate</strong> scale. The sample voice output is produced at a corresponding speech rate.</li></ol>
-   
-<p align="center"><strong>Figure: Setting the speech rate</strong></p> 
-<p align="center"><img alt="Setting the speech rate" src="../../../images/settings.png" /> <img alt="Setting the speech rate" src="../../../images/settings-language-and-input.png" /> <img alt="Setting the speech rate" src="../../../images/settings-language-and-input-tts.png" /></p>    
+
+<p align="center"><strong>Figure: Setting the speech rate</strong></p>
+<p align="center"><img alt="Setting the speech rate" src="../../../images/settings.png" /> <img alt="Setting the speech rate" src="../../../images/settings-language-and-input.png" /> <img alt="Setting the speech rate" src="../../../images/settings-language-and-input-tts.png" /></p>
 </li>
 <li>
 <p>To set the language, which is the language of the voice output provided by the screen reader:</p>
@@ -87,7 +87,7 @@
        <strong>Note</strong>
        Changing the font size in the accessibility settings overrides the font size in all applications.
 </div>
-  
+
 <p>To change the system font size:</p>
 <ol><li>In the built-in Settings application, select <strong>Display &gt; Font</strong>.</li>
 <li>Select the font size:
@@ -95,12 +95,12 @@
 <li>To select a preferred font size, hover a finger over the <strong>Size</strong> scale. The sample text in a corresponding font size is displayed above the size scale.</li>
 <li>To restore the font size predefined by the manufacturer, select <strong>Default font</strong>.</li></ul></li></ol>
 
-    
 
-<p align="center"><strong>Figure: Changing the font size</strong></p> 
-<p align="center"><img alt="Changing the font size" src="../../../images/settings.png" /> <img alt="Changing the font size" src="../../../images/settings-display.png" /> <img alt="Changing the font size" src="../../../images/settings-display-fonts.png" /></p> 
 
-  
+<p align="center"><strong>Figure: Changing the font size</strong></p>
+<p align="center"><img alt="Changing the font size" src="../../../images/settings.png" /> <img alt="Changing the font size" src="../../../images/settings-display.png" /> <img alt="Changing the font size" src="../../../images/settings-display-fonts.png" /></p>
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/accessibility_implementation_n.htm b/org.tizen.guides/html/native/ui/efl/accessibility_implementation_n.htm
index 94ce98f..c6ebaff 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/accessibility_implementation_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/accessibility_implementation_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Implementing Accessible Applications</title> 
- </head> 
+  <title>Implementing Accessible Applications</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -36,14 +36,14 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Accessibility.html">Accessibility API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Implementing Accessible Applications</h1> 
+  <h1>Implementing Accessible Applications</h1>
 
 <p>When implementing an accessible application, follow the good accessibility practices. This topic uses an EFL Elementary sample application to demonstrate how you can implement accessibility features in your application.</p>
-  
+
 <h2 id="good_practices" name="good_practices">Good Practices for Implementing Accessibility</h2>
 
 <p>An accessible application requires the following features to be implemented:</p>
@@ -56,7 +56,7 @@
 </li>
 <li>
 <p>Text equivalents for images, audio, and multimedia</p>
-<p>To a screen reader, any graphics on the screen, such as photos or videos, are invisible. Therefore, images and diagrams conveying important information must have text equivalents for users using screen readers. Such descriptions must briefly present all necessary information. For example, the text equivalent for a circle diagram presenting statistics showing that 20% of the population like product X can be &quot;circle diagram: 20% of the population like X&quot;. Purely decorative images do not need text descriptions, such as &quot;pretty blue background&quot;.</p>
+<p>To a screen reader, any graphics on the screen, such as photos or videos, are invisible. Therefore, images and diagrams conveying important information must have text equivalents for users using screen readers. Such descriptions must briefly present all necessary information. For example, the text equivalent for a circle diagram presenting statistics showing that 20% of the population like product X can be "circle diagram: 20% of the population like X". Purely decorative images do not need text descriptions, such as "pretty blue background".</p>
 <p>Similarly, it is advised to add text equivalents or subtitles to audio or audio-video content for the benefit of deaf and hard of hearing users.</p>
 </li>
 </ul>
@@ -78,7 +78,7 @@
 <p>Supplementing color coding</p>
 <p>Color coding must not be the only way of conveying information since some people are not able to distinguish between different colors. This does not only concern individuals with diagnosed color vision disabilities, as it is estimated that about 10% of the male population is color blind to some extent. Even contrasting color pairs can be an issue, such as the commonly used red and green.</p>
 <p>Color coding can and must be used, but it must always be supplemented by other means of conveying the same information, such as appropriate labels, graphics, or font formatting.</p>
-<p>For example, do not ask the user to &quot;press the green button to confirm or the red button to reject&quot; and supply 2 colored but otherwise identical buttons. Instead, add <strong>Confirm</strong> and <strong>Reject</strong> labels to the buttons. If you do not have enough room for that much text, use a symbolic label like <strong>OK</strong> and <strong>X</strong>.</p>
+<p>For example, do not ask the user to "press the green button to confirm or the red button to reject" and supply 2 colored but otherwise identical buttons. Instead, add <strong>Confirm</strong> and <strong>Reject</strong> labels to the buttons. If you do not have enough room for that much text, use a symbolic label like <strong>OK</strong> and <strong>X</strong>.</p>
 </li>
 <li>
 <p>Minimalism</p>
@@ -104,7 +104,7 @@
 </li>
 </ul>
 
-<h2 id="create" name="create">Creating an Accessible Application</h2>  
+<h2 id="create" name="create">Creating an Accessible Application</h2>
 
 <p>You can use the mobile native <a href="https://developer.tizen.org/development/sample/native/UI/UI_Components" target="_blank">UI Components</a> sample application provided within the Tizen Studio to see how the most important accessibility features are implemented in practice. The sample application contains an AT-SPI2 compliant screen reader, which you can use to test the accessibility features in a device. Enable the screen reader by running the sample application and selecting <strong>Accessibility &gt; Screen Reader &gt; Screen Reader (TTS)</strong>.</p>
 <p>In the Tizen 2.4 release, the screen reader is available only inside the UI Components application. This means that when the UI Components application is terminated or paused and sent to the background, the screen reader is automatically disabled, and when the UI Components application is restored, the screen reader is enabled.</p>
@@ -119,28 +119,28 @@
 
 <h3>Making UI Components Readable</h3>
 
-<p>Since the screen reader is a fundamental accessibility feature for low-vision and visually-impaired persons, making your application readable by the screen reader is a priority task. The following example shows how to make your application readable to the AT-SPI2 compliant screen reader.</p> 
+<p>Since the screen reader is a fundamental accessibility feature for low-vision and visually-impaired persons, making your application readable by the screen reader is a priority task. The following example shows how to make your application readable to the AT-SPI2 compliant screen reader.</p>
 <p>The screen reader reads out information about the currently pointed or focused UI component. The UI component information is provided to the screen reader using the AT-SPI2 standard protocol and consists of the following information items:</p>
 
 <ul>
-<li>Label: 
+<li>Label:
 <p>The label on the component is, for example, <strong>Ok</strong> or <strong>Cancel</strong> (in case of a button). The label maps to the <code>name</code> property of the AT-SPI2 object and is equivalent to the result of the <code>elm_object_text_get()</code> function. The property can be also overwritten using the <code>elm_atspi_accessible_name_set()</code> function.</p>
 </li>
-<li>Traits: 
-<p>The traits are the component type or role, for example, <code>&quot;Button&quot;</code> (in case of a button). The trait maps to the <code>role</code> property of the AT-SPI2 object.</p>
+<li>Traits:
+<p>The traits are the component type or role, for example, <code>"Button"</code> (in case of a button). The trait maps to the <code>role</code> property of the AT-SPI2 object.</p>
 </li>
-<li>State: 
-<p>The value or status of the component is, for example, <code>&quot;Disabled&quot;</code> (in case of a disabled button).</p>
+<li>State:
+<p>The value or status of the component is, for example, <code>"Disabled"</code> (in case of a disabled button).</p>
 </li>
-<li>Description (optional attribute): 
-<p>The hint or guide to explain the component is, for example, &quot;This button closes your application&quot; (in case of a button). The description maps to the <code>description</code> property of the AT-SPI2 object.</p>
+<li>Description (optional attribute):
+<p>The hint or guide to explain the component is, for example, "This button closes your application" (in case of a button). The description maps to the <code>description</code> property of the AT-SPI2 object.</p>
 </li>
 </ul>
 
 <p>The screen reader reads the information in the following order when the user selects the button by using the 1-finger-tap gesture. The user also can select a button by using a 1-finger-touch-and-move gesture.</p>
 <ul>
-<li><strong>Ok</strong> (Label) &gt; &quot;Button&quot; (Traits) &gt; &quot;This button closes your application&quot; (Description)</li>
-<li><strong>Cancel</strong> (Label) &gt; &quot;Button&quot; (Traits) &gt; &quot;Disabled&quot; (State)</li>
+<li><strong>Ok</strong> (Label) &gt; "Button" (Traits) &gt; "This button closes your application" (Description)</li>
+<li><strong>Cancel</strong> (Label) &gt; "Button" (Traits) &gt; "Disabled" (State)</li>
 </ul>
 
 <p>The following table lists the functions you can use to set EFL Elementary UI component information to be read by the screen reader, and to support internationalization (i18n) for the information.</p>
@@ -163,7 +163,7 @@
        </tr>
        <tr>
                <td><code>void elm_atspi_accessible_role_set(Elm_Interface_Atspi_Accessible *obj, Elm_Atspi_Role role)</code></td>
-               <td>Set the accessible role. 
+               <td>Set the accessible role.
                <ul>
                <li><code>obj</code>: Elementary object</li>
                <li><code>role</code>: New accessible role for the object</li>
@@ -173,7 +173,7 @@
        <tr>
                <td><code>void elm_atspi_accessible_description_set(Elm_Interface_Atspi_Accessible *obj, const char *text)</code></td>
                <td>Set the accessible description.
-               <ul>            
+               <ul>
                <li><code>obj</code>: Elementary object</li>
                <li><code>text</code>: Description text for the object</li>
                </ul>
@@ -190,13 +190,13 @@
        </tr>
   </tbody>
   </table>
-  
 
-   
+
+
    <p align="center"><strong>Figure: Readable components in the UI Components sample</strong></p>
    <p align="center"><img src="../../../images/ui-controls-accessibility-screen-reader-ui-description.png" alt="Readable components in the UI Components sample" />
   </p>
-  
+
   <p>The Elementary library sets the default information (label, traits, state) for the components, except for an icon and image. You can override the default information in various ways:</p>
   <ul>
   <li>Button with a custom name
@@ -205,22 +205,22 @@
 /* File: src/accessibility/screen_reader/description.c */
 
 btn = elm_button_add(layout);
-elm_object_text_set(btn, &quot;Test Name&quot;);
+elm_object_text_set(btn, "Test Name");
 </pre>
- <p>If the user highlights the button, the screen reader says &quot;Test Name, button&quot; (it reads out the component custom name and default trait).</p>
+ <p>If the user highlights the button, the screen reader says "Test Name, button" (it reads out the component custom name and default trait).</p>
 </li>
 
    <li>Button without a name and description
- <p>If you define a button with an icon image only, no name or description is provided by default.</p>  
+ <p>If you define a button with an icon image only, no name or description is provided by default.</p>
 <pre class="prettyprint">
 /* File: src/accessibility/screen_reader/description.c */
 
 btn = elm_button_add(layout);
 img = elm_image_add(btn);
 elm_image_file_set(img, IMG_PATH, NULL);
-elm_object_part_content_set(btn, &quot;icon&quot;, img);
+elm_object_part_content_set(btn, "icon", img);
 </pre>
-<p>If the user highlights the button, the screen reader says &quot;button&quot; (it reads out the component default trait only).</p>
+<p>If the user highlights the button, the screen reader says "button" (it reads out the component default trait only).</p>
 </li>
 
 <li>Button with an internationalized description
@@ -240,40 +240,40 @@ BuildRequires:  gettext-tools
 /* File: po/CMakeLists.txt */
 
 SET(POFILES en_US.po it_IT.po)
-SET(MSGFMT &quot;/usr/bin/msgfmt&quot;)
+SET(MSGFMT "/usr/bin/msgfmt")
 
 FOREACH(pofile ${POFILES})
-&nbsp;&nbsp;&nbsp;&nbsp;SET(pofile ${CMAKE_CURRENT_SOURCE_DIR}/${pofile})
-&nbsp;&nbsp;&nbsp;&nbsp;MESSAGE(PO: &quot;  ${pofile}&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;GET_FILENAME_COMPONENT(absPofile ${pofile} ABSOLUTE)
-&nbsp;&nbsp;&nbsp;&nbsp;GET_FILENAME_COMPONENT(lang ${absPofile} NAME_WE)
-&nbsp;&nbsp;&nbsp;&nbsp;SET(moFile ${CMAKE_CURRENT_BINARY_DIR}/${lang}.mo)
-&nbsp;&nbsp;&nbsp;&nbsp;ADD_CUSTOM_COMMAND(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OUTPUT ${moFile}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMAND ${MSGFMT} -o ${moFile} ${absPofile}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DEPENDS ${absPofile})
-&nbsp;&nbsp;&nbsp;&nbsp;INSTALL(FILES ${moFile}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DESTINATION ${LOCALEDIR}/${lang}/LC_MESSAGES RENAME ${PACKAGE}.mo)
-&nbsp;&nbsp;&nbsp;&nbsp;SET(moFiles ${moFiles} ${moFile})
+    SET(pofile ${CMAKE_CURRENT_SOURCE_DIR}/${pofile})
+    MESSAGE(PO: "  ${pofile}")
+    GET_FILENAME_COMPONENT(absPofile ${pofile} ABSOLUTE)
+    GET_FILENAME_COMPONENT(lang ${absPofile} NAME_WE)
+    SET(moFile ${CMAKE_CURRENT_BINARY_DIR}/${lang}.mo)
+    ADD_CUSTOM_COMMAND(
+        OUTPUT ${moFile}
+        COMMAND ${MSGFMT} -o ${moFile} ${absPofile}
+        DEPENDS ${absPofile})
+    INSTALL(FILES ${moFile}
+        DESTINATION ${LOCALEDIR}/${lang}/LC_MESSAGES RENAME ${PACKAGE}.mo)
+    SET(moFiles ${moFiles} ${moFile})
 ENDFOREACH(pofile)
 
 ADD_CUSTOM_TARGET(po ALL DEPENDS ${moFiles})
 
 /* File: po/en_US.po */
 
-msgid &quot;IDS_BUTTON_DESCRIPTION&quot;
-msgstr &quot;One finger double tap to activate&quot;
+msgid "IDS_BUTTON_DESCRIPTION"
+msgstr "One finger double tap to activate"
 
-msgid &quot;IDS_BUTTON_NAME&quot;
-msgstr &quot;Button accessibility name&quot;
+msgid "IDS_BUTTON_NAME"
+msgstr "Button accessibility name"
 
 /* File: po/it_IT.po */
 
-msgid &quot;IDS_BUTTON_DESCRIPTION&quot;
-msgstr &quot;Un dito doppio tap per attivare&quot;
+msgid "IDS_BUTTON_DESCRIPTION"
+msgstr "Un dito doppio tap per attivare"
 
-msgid &quot;IDS_BUTTON_NAME&quot;
-msgstr &quot;Button nome di accessibilità&quot;
+msgid "IDS_BUTTON_NAME"
+msgstr "Button nome di accessibilità"
 
 /* File: src/main.c */
 
@@ -284,14 +284,14 @@ textdomain(PACKAGE);
 /* File: src/accessibility/screen_reader/description.c */
 
 btn = elm_button_add(layout);
-elm_object_text_set(btn, &quot;Test Name&quot;);
-elm_object_style_set(btn, &quot;default&quot;);
-elm_object_part_content_set(layout, &quot;button_description&quot;, btn);
-elm_atspi_accessible_description_set(btn, &quot;IDS_BUTTON_DESCRIPTION&quot;);
+elm_object_text_set(btn, "Test Name");
+elm_object_style_set(btn, "default");
+elm_object_part_content_set(layout, "button_description", btn);
+elm_atspi_accessible_description_set(btn, "IDS_BUTTON_DESCRIPTION");
 elm_atspi_accessible_translation_domain_set(btn, PACKAGE);
 </pre>
 
- <p>If the user highlights the button and the display language is set to English (US), the screen reader says &quot;Test Name, button, one finger double tap to activate&quot; (it reads out the component custom name, default trait, and description from the <code>en_US.po</code> file). If the display language is changed, the description string from the relevant PO file is used.</p>
+ <p>If the user highlights the button and the display language is set to English (US), the screen reader says "Test Name, button, one finger double tap to activate" (it reads out the component custom name, default trait, and description from the <code>en_US.po</code> file). If the display language is changed, the description string from the relevant PO file is used.</p>
 </li>
 
  <li>Button with an accessible name
@@ -300,26 +300,26 @@ elm_atspi_accessible_translation_domain_set(btn, PACKAGE);
 /* File: src/accessibility/screen_reader/description.c */
 
 btn = elm_button_add(layout);
-elm_object_text_set(btn, &quot;Test Name&quot;);
-elm_object_style_set(btn, &quot;default&quot;);
-elm_object_part_content_set(layout, &quot;button_a11y_name&quot;, btn);
-elm_atspi_accessible_name_set(btn, &quot;IDS_BUTTON_NAME&quot;);
+elm_object_text_set(btn, "Test Name");
+elm_object_style_set(btn, "default");
+elm_object_part_content_set(layout, "button_a11y_name", btn);
+elm_atspi_accessible_name_set(btn, "IDS_BUTTON_NAME");
 elm_atspi_accessible_translation_domain_set(btn, PACKAGE);
 </pre>
 
-<p>If the user highlights the button, the screen reader says &quot;Button accessibility name, button&quot;  (it reads out the component accessible name from the <code>en_US.po</code> file and the default trait). If the display language is changed, the accessible name string from the relevant PO file is used.</p>
+<p>If the user highlights the button, the screen reader says "Button accessibility name, button"  (it reads out the component accessible name from the <code>en_US.po</code> file and the default trait). If the display language is changed, the accessible name string from the relevant PO file is used.</p>
 <p>The <code>elm_atspi_accessible_name_set()</code> function overrides the custom name set earlier with the <code>elm_object_text_set()</code> function.</p>
 </li>
 </ul>
 
-<p>You can also create a custom reading of multi-style components. Sometimes, it is necessary to have different voice output depending on the style assigned to the UI component. The <code>default</code> style is handled &quot;out of the box&quot; by the accessibility framework, but you must handle any alternative styles on the application side. The elementary checkbox component offers a good example of alternative styles:</p>
+<p>You can also create a custom reading of multi-style components. Sometimes, it is necessary to have different voice output depending on the style assigned to the UI component. The <code>default</code> style is handled "out of the box" by the accessibility framework, but you must handle any alternative styles on the application side. The elementary checkbox component offers a good example of alternative styles:</p>
 <ul>
-<li><code>default</code> style in a checkbox: 
-<p>The reading must be &quot;&lt;label&gt;, &lt;state&gt;&quot;, where &lt;label&gt; is a text assigned to the checkbox and &lt;state&gt; is read as &quot;selected&quot; or &quot;not selected&quot;, depending on the checkbox state.</p></li>
-<li><code>favorite</code> style in a checkbox: 
-<p>The reading must be &quot;Favorite button, &lt;state&gt;&quot;, where &lt;state&gt; is read as &quot;selected&quot; or &quot;not selected&quot;, depending on the checkbox state.</p></li>
-<li><code>on&amp;off</code> style in a checkbox: 
-<p>The reading must be &quot;On/off button, &lt;state&gt;&quot;, where &lt;state&gt; is read as &quot;on&quot; or &quot;off&quot;, depending on the checkbox state.</p></li>
+<li><code>default</code> style in a checkbox:
+<p>The reading must be "&lt;label&gt;, &lt;state&gt;", where &lt;label&gt; is a text assigned to the checkbox and &lt;state&gt; is read as "selected" or "not selected", depending on the checkbox state.</p></li>
+<li><code>favorite</code> style in a checkbox:
+<p>The reading must be "Favorite button, &lt;state&gt;", where &lt;state&gt; is read as "selected" or "not selected", depending on the checkbox state.</p></li>
+<li><code>on&amp;off</code> style in a checkbox:
+<p>The reading must be "On/off button, &lt;state&gt;", where &lt;state&gt; is read as "on" or "off", depending on the checkbox state.</p></li>
 </ul>
 <p>The following source code snippet demonstrates how to handle the <code>favorite</code> and <code>on&amp;off</code> checkbox styles in the application source code:</p>
 
@@ -327,13 +327,13 @@ elm_atspi_accessible_translation_domain_set(btn, PACKAGE);
 /* File: src/check.c */
 
 check = elm_check_add(box);
-elm_object_style_set(check, &quot;favorite&quot;);
-elm_atspi_accessible_name_set(check, &quot;Favorite button&quot;);
+elm_object_style_set(check, "favorite");
+elm_atspi_accessible_name_set(check, "Favorite button");
 
 check = elm_check_add(box);
-elm_object_style_set(check, &quot;on&amp;off&quot;);
+elm_object_style_set(check, "on&amp;off");
 elm_atspi_accessible_role_set(check, ELM_ATSPI_ROLE_TOGGLE_BUTTON);
-elm_atspi_accessible_name_set(check, &quot;On, off&quot;);
+elm_atspi_accessible_name_set(check, "On, off");
 </pre>
 
 
@@ -372,15 +372,15 @@ elm_atspi_accessible_name_set(check, &quot;On, off&quot;);
 </table>
 
 
-<p>The following figure illustrates the UI reading order example in the UI Components sample application. In the top part of the screen, the components have been ordered explicitly by the developer by setting the ATSPI standard relations between accessible objects corresponding to these components. In the bottom part of the screen, the components have no relation-based navigation set at all. This results in the natural reading order of the UI elements maintained implicitly by the screen reader itself. The natural reading order is a heuristic based on the UI elements&#39; geometrical position on the screen (top to bottom, and left to right reading direction).</p>
+<p>The following figure illustrates the UI reading order example in the UI Components sample application. In the top part of the screen, the components have been ordered explicitly by the developer by setting the ATSPI standard relations between accessible objects corresponding to these components. In the bottom part of the screen, the components have no relation-based navigation set at all. This results in the natural reading order of the UI elements maintained implicitly by the screen reader itself. The natural reading order is a heuristic based on the UI elements' geometrical position on the screen (top to bottom, and left to right reading direction).</p>
 
 <p align="center"><strong>Figure: UI reading order in the UI Components sample</strong></p>
 <p align="center"><img src="../../../images/ui-controls-accessibility-screen-reader-ui-reading-order.png" alt="UI reading order in the UI Components sample" />
 </p>
 
 <p>The following code illustrates how the customized reading order for the top part of the screen has been implemented. The component relations are defined with <code>ATSPI_RELATION_FLOWS_TO</code> and <code>ATSPI_RELATION_FLOWS_FROM</code> parameters. In addition to the normal relations used when navigating forward, inverse relations are defined as well to ensure proper behavior when navigating backward.</p>
- 
-<p>You can have various independent relation-based navigation chains on one screen. Each relation-based navigation chain is resolved locally and has priority over the default navigation order maintained by the screen reader. When one of the ends of a relation-based navigation chain is reached, the highlight frame goes forward along to the actual navigation direction to the closest component in the default navigation order. It omits interim components of the relation-based navigation chains. In this example, when the navigation command &quot;next&quot; is called from the <strong>c</strong> button, the highlight frame goes from the <strong>c</strong> button to the <strong>Default reading order</strong> label.</p>
+
+<p>You can have various independent relation-based navigation chains on one screen. Each relation-based navigation chain is resolved locally and has priority over the default navigation order maintained by the screen reader. When one of the ends of a relation-based navigation chain is reached, the highlight frame goes forward along to the actual navigation direction to the closest component in the default navigation order. It omits interim components of the relation-based navigation chains. In this example, when the navigation command "next" is called from the <strong>c</strong> button, the highlight frame goes from the <strong>c</strong> button to the <strong>Default reading order</strong> label.</p>
 
 <pre class="prettyprint">
 /* File: src/accessibility/screen_reader/reading_order.c */
@@ -394,7 +394,7 @@ Evas_Object *labelCustom;
 
 /* Creating buttons with custom order */
 btnA = elm_button_add(layout);
-elm_object_text_set(btnA, &quot;a&quot;);
+elm_object_text_set(btnA, "a");
 
 /*
    Inform the assistive technology that UI information
@@ -412,14 +412,14 @@ elm_atspi_accessible_relationship_append(btnE, ELM_ATSPI_RELATION_FLOWS_FROM, bt
 elm_atspi_accessible_relationship_append(btnD, ELM_ATSPI_RELATION_FLOWS_FROM, labelCustom);
 </pre>
 
-<p>Navigation relations can also be used to exclude some components from the sequential navigation (for example, they are not reachable using the &quot;next&quot; or &quot;previous&quot; navigation commands triggered on 1-finger flicks). In the example, the <strong>a</strong> button was by-passed by setting a navigation relation between the <strong>Custom reading order</strong> label and the <strong>d</strong> button. However, the <strong>a</strong> button can still be reached by direct navigation (1-finger single tap or 1-finger hover). To entirely exclude the component from navigation (including direct navigation), set the <code>ATSPI_ROLE_REDUNDANT_OBJECT</code> role for the component using the <code>elm_atspi_accessible_role_set()</code> function.</p>
+<p>Navigation relations can also be used to exclude some components from the sequential navigation (for example, they are not reachable using the "next" or "previous" navigation commands triggered on 1-finger flicks). In the example, the <strong>a</strong> button was by-passed by setting a navigation relation between the <strong>Custom reading order</strong> label and the <strong>d</strong> button. However, the <strong>a</strong> button can still be reached by direct navigation (1-finger single tap or 1-finger hover). To entirely exclude the component from navigation (including direct navigation), set the <code>ATSPI_ROLE_REDUNDANT_OBJECT</code> role for the component using the <code>elm_atspi_accessible_role_set()</code> function.</p>
 
 
 <h3>Customizing the Highlight Frame</h3>
 <p>The accessibility framework provides a highlight frame around the currently selected or focused UI component, and you can customize its size, shape, and color. The following code snippets demonstrate how to adjust the style of the highlight frame from the default yellow style (left in the figure) to  a custom red style (right in the figure).</p>
 
-<p align="center"><strong>Figure: Highlight frame in the UI Components sample</strong></p> 
-<p align="center"><img alt="Highlight frame in the UI Components sample" src="../../../images/ui-controls-accessibility-screen-reader-ui-custom-frame-1.png" /> <img alt="Highlight frame in the UI Components sample" src="../../../images/ui-controls-accessibility-screen-reader-ui-custom-frame-2.png" /></p> 
+<p align="center"><strong>Figure: Highlight frame in the UI Components sample</strong></p>
+<p align="center"><img alt="Highlight frame in the UI Components sample" src="../../../images/ui-controls-accessibility-screen-reader-ui-custom-frame-1.png" /> <img alt="Highlight frame in the UI Components sample" src="../../../images/ui-controls-accessibility-screen-reader-ui-custom-frame-2.png" /></p>
 
 <p>The following code snippets has been simplified to make the example clearer. Irrelevant code has been omitted, and long variables and resource names have been shortened to avoid line wrapping. The full version of the source code is available in the following files:</p>
 
@@ -454,57 +454,57 @@ elm_atspi_accessible_relationship_append(btnD, ELM_ATSPI_RELATION_FLOWS_FROM, la
 <pre class="prettyprint">
 group
 {
-&nbsp;&nbsp;&nbsp;name: &quot;elm/button/base/custom2&quot;;
-
-&nbsp;&nbsp;&nbsp;data.item: &quot;access_highlight&quot; &quot;on&quot;;
-&nbsp;&nbsp;&nbsp;images.image: &quot;../../res/images/c_h_2.png&quot; COMP;
-
-&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;highlight&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clip_to: &quot;highlight_clip&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;../../res/images/c_h_2.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.border: 10 10 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.middle: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill.smooth: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;elm.text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 30 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;elm.text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: -30 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;programs
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;show_new_highlight&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;elm,action,access_highlight,show&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;elm&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;highlight&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;hide_new_highlight&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;elm,action,access_highlight,hide&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;elm&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;highlight&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   name: "elm/button/base/custom2";
+
+   data.item: "access_highlight" "on";
+   images.image: "../../res/images/c_h_2.png" COMP;
+
+   parts
+   {
+      part
+      {
+         name: "highlight";
+         clip_to: "highlight_clip";
+         description
+         {
+            state: "default" 0.0;
+            image.normal: "../../res/images/c_h_2.png";
+            image.border: 10 10 10 10;
+            image.middle: 0;
+            fill.smooth: 0;
+            rel1.to: "elm.text";
+            rel1.offset: 30 5;
+            rel2.to: "elm.text";
+            rel2.offset: -30 0;
+            visible: 0;
+         }
+         description
+         {
+            state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+   }
+   programs
+   {
+      program
+      {
+         name: "show_new_highlight";
+         signal: "elm,action,access_highlight,show";
+         source: "elm";
+         action: STATE_SET "visible" 0.0;
+         target: "highlight";
+      }
+      program
+      {
+         name: "hide_new_highlight";
+         signal: "elm,action,access_highlight,hide";
+         source: "elm";
+         action: STATE_SET "default" 0.0;
+         target: "highlight";
+      }
+   }
 }
 </pre>
 
@@ -514,16 +514,16 @@ group
 static Evas_Object*
 create_custom_frame(Evas_Object *parent)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *btn;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *layout;
+    Evas_Object *btn;
+    Evas_Object *layout;
 
-&nbsp;&nbsp;&nbsp;&nbsp;layout = elm_layout_add(parent);
+    layout = elm_layout_add(parent);
 
-&nbsp;&nbsp;&nbsp;&nbsp;btn = elm_button_add(layout);
+    btn = elm_button_add(layout);
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_style_set(btn, &quot;custom2&quot;);
+    elm_object_style_set(btn, "custom2");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return layout;
+    return layout;
 }</pre>
 
 
diff --git a/org.tizen.guides/html/native/ui/efl/accessibility_n.htm b/org.tizen.guides/html/native/ui/efl/accessibility_n.htm
index 66c077f..30f3f95 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/accessibility_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/accessibility_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Accessibility</title> 
- </head> 
+  <title>Accessibility</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,15 +31,15 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Accessibility.html">Accessibility API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Accessibility</h1> 
+  <h1>Accessibility</h1>
 
 <p>Accessibility features have become an essential part of high quality software. Their goal is to empower disabled users to use new technologies. This is especially important to low-vision and visually-impaired users who possibly have no access whatsoever to software unless it incorporates appropriate accessibility solutions.</p>
 
-<p>Tizen provides accessibility features for developing applications for disabled users:</p>  
+<p>Tizen provides accessibility features for developing applications for disabled users:</p>
 
 <ul>
        <li><a href="accessibility_architecture_n.htm">Accessibility Architecture</a>
@@ -49,24 +49,24 @@
        <li><a href="accessibility_implementation_n.htm">Implementing Accessible Applications</a>
        <p>You can make your application accessible by following good accessibility practices. Using an EFL Elementary sample application, you can see in practice how to implement readable components for the Screen Reader, and customize the UI reading order and the highlight frame appearance.</p></li>
 </ul>
-  
+
 <h2 id="benefits" name="benefits">Benefits of Accessibility</h2>
 
 <p>Adding accessibility features in your application brings various benefits:</p>
 <ul>
 <li>Using a universal design
 <p>Developing products that can be used by everyone, including often neglected minorities, such as disabled or elderly users, is a good software design practice and as such must be reinforced whenever possible.</p></li>
-<li>Considering disabled users&#39; needs
+<li>Considering disabled users' needs
 <p>Disabled users often find it difficult or even completely impossible to use regular applications. Putting a little effort into making your application accessible can make all the difference.</p></li>
 <li>Increasing the audience of your application
 <p>Disabled people make up a considerable portion of society. It is estimated that 10 to 15% of the global population is disabled. In Europe alone, there are about 80 million people with disabilities. Making your application accessible can increase its potential audience.</p></li>
 <li>Distinguishing your application
-<p>Many of the applications currently available on the market are not accessible. Making yours accessible positively distinguishes it from your competitors&#39; products, and can create a marketing advantage.</p></li>
+<p>Many of the applications currently available on the market are not accessible. Making yours accessible positively distinguishes it from your competitors' products, and can create a marketing advantage.</p></li>
 <li>Complying with legal acts and policies
 <p>Some organizations can be required by law or internal policies to make their products accessible. One of the examples  is Section 508 of the Rehabilitation Act of 1973 which obliges federal agencies in the United States to make their electronic and information technology accessible to disabled users.</p></li>
 </ul>
-  
-  
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/component_background_mn.htm b/org.tizen.guides/html/native/ui/efl/component_background_mn.htm
index 57c8e4d..db0adeb 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_background_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_background_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Background</title>  
+       <title>Background</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,21 +34,21 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Background</h1>
 
 
 <p>The background UI component is used to set a solid background decoration to a window or a container object. It works like an image, but has some background-specific properties. It can be set to a tiled, centered, scaled, or stretched mode. The background is the most simple UI component in that it emits no signals. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Bg.html">Background</a> API.</p>
-   
+
  <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a background component in your application:</p>
 <ol>
 <li>Add a background with the <code>elm_bg_add()</code> function:
@@ -67,13 +67,13 @@ elm_bg_color_set(bg, 64, 127, 256);
 </li>
 <li>Set an Edje group as a background using the <code>elm_bg_file_set()</code> function:
 <pre class="prettyprint">
-elm_bg_file_set(bg, &quot;/path/to/the/edje&quot;, &quot;group name&quot;);
+elm_bg_file_set(bg, "/path/to/the/edje", "group name");
 </pre>
 </li>
 <li>Set an image file as a background using the <code>elm_bg_file_set()</code> function.
 <p>In case of an image background, you can set additional <a href="#bg_options">options</a>.</p>
 <pre class="prettyprint">
-elm_bg_file_set(bg, &quot;/path/to/the/image&quot;, NULL);
+elm_bg_file_set(bg, "/path/to/the/image", NULL);
 </pre>
 </li>
 </ul>
@@ -114,11 +114,11 @@ box = elm_box_add(bg);
 elm_object_content_set(bg, box);
 
 label = elm_label_add(box);
-elm_object_text_set(label, &quot;overlay swallow part&quot;);
+elm_object_text_set(label, "overlay swallow part");
 evas_object_show(label);
 elm_box_pack_end(box,label);
 
-elm_naviframe_item_push(nf, &quot;Background&quot;, NULL, NULL, bg, NULL);
+elm_naviframe_item_push(nf, "Background", NULL, NULL, bg, NULL);
 </pre>
 </td>
 <td>
@@ -135,7 +135,7 @@ elm_naviframe_item_push(nf, &quot;Background&quot;, NULL, NULL, bg, NULL);
 <ul>
 <li><code>ELM_BG_OPTION_CENTER</code>: Centers the background image.</li>
 <li><code>ELM_BG_OPTION_SCALE</code>: Scales the background image, retaining the aspect ratio.</li>
-<li><code>ELM_BG_OPTION_STRETCH</code>: Stretches the background image to fill the UI component&#39;s area.</li>
+<li><code>ELM_BG_OPTION_STRETCH</code>: Stretches the background image to fill the UI component's area.</li>
 <li><code>ELM_BG_OPTION_TILE</code>: Tiles the background image at its original size.</li>
 </ul>
 
@@ -196,7 +196,7 @@ elm_naviframe_item_push(nf, &quot;Background&quot;, NULL, NULL, bg, NULL);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_background_wn.htm b/org.tizen.guides/html/native/ui/efl/component_background_wn.htm
index 70502ec..ef970a4 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_background_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_background_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Background</title>  
+       <title>Background</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Background</h1>
@@ -47,9 +47,9 @@
 <p>The background UI component is used to set a solid background decoration to a window or a container object. It works like an image, but has some background-specific properties. It can be set to a tiled, centered, scaled, or stretched mode. The background is the most simple UI component in that it emits no signals. For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Bg.html">Background</a> API.</p>
 
  <p>This feature is supported in wearable applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a background component in your application:</p>
 <ol>
 <li>Add a background with the <code>elm_bg_add()</code> function:
@@ -68,13 +68,13 @@ elm_bg_color_set(bg, 64, 127, 256);
 </li>
 <li>Set an Edje group as a background using the <code>elm_bg_file_set()</code> function:
 <pre class="prettyprint">
-elm_bg_file_set(bg, &quot;/path/to/the/edje&quot;, &quot;group name&quot;);
+elm_bg_file_set(bg, "/path/to/the/edje", "group name");
 </pre>
 </li>
 <li>Set an image file as a background using the <code>elm_bg_file_set()</code> function.
 <p>In case of an image background, you can set additional <a href="#bg_options">options</a>.</p>
 <pre class="prettyprint">
-elm_bg_file_set(bg, &quot;/path/to/the/image&quot;, NULL);
+elm_bg_file_set(bg, "/path/to/the/image", NULL);
 </pre>
 </li>
 </ul>
@@ -116,11 +116,11 @@ box = elm_box_add(bg);
 elm_object_content_set(bg, box);
 
 label = elm_label_add(box);
-elm_object_text_set(label, &quot;overlay swallow part&quot;);
+elm_object_text_set(label, "overlay swallow part");
 evas_object_show(label);
 elm_box_pack_end(box,label);
 
-elm_naviframe_item_push(nf, &quot;Background&quot;, NULL, NULL, bg, &quot;empty&quot;);
+elm_naviframe_item_push(nf, "Background", NULL, NULL, bg, "empty");
 </pre>
 </td>
 <td>
@@ -136,7 +136,7 @@ elm_naviframe_item_push(nf, &quot;Background&quot;, NULL, NULL, bg, &quot;empty&
 <ul>
 <li><code>ELM_BG_OPTION_CENTER</code>: Centers the background image.</li>
 <li><code>ELM_BG_OPTION_SCALE</code>: Scales the background image, retaining the aspect ratio.</li>
-<li><code>ELM_BG_OPTION_STRETCH</code>: Stretches the background image to fill the UI component&#39;s area.</li>
+<li><code>ELM_BG_OPTION_STRETCH</code>: Stretches the background image to fill the UI component's area.</li>
 <li><code>ELM_BG_OPTION_TILE</code>: Tiles the background image at its original size.</li>
 </ul>
 <p align="center" class="Table"><strong>Table: Background options</strong></p>
@@ -191,7 +191,7 @@ elm_naviframe_item_push(nf, &quot;Background&quot;, NULL, NULL, bg, &quot;empty&
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_button_mn.htm b/org.tizen.guides/html/native/ui/efl/component_button_mn.htm
index 18714bb..0080552 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_button_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_button_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Button</title>  
+       <title>Button</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Button</h1>
@@ -46,9 +46,9 @@
 <p>The button UI component works as a clickable input element to trigger events. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Button.html">Button</a> API.</p>
 
  <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a button component in your application:</p>
 <ol>
    <li>Add a button with the <code>elm_button_add()</code> function:
@@ -62,19 +62,19 @@ button = elm_button_add(parent);
 <ul>
  <li>Set a style to the button with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
 <pre class="prettyprint">
-elm_object_style_set(button, &quot;circle&quot;);
+elm_object_style_set(button, "circle");
 </pre>
  </li>
  <li>Set a label to the button with the <code>elm_object_text_set()</code> function, if the style supports a text part.
 <pre class="prettyprint">
-elm_object_text_set(button, &quot;Home&quot;);
+elm_object_text_set(button, "Home");
 </pre>
  </li>
  <li>Set an image object to the button with the <code>elm_object_part_content_set()</code> function, if the style supports a swallow part.
 <pre class="prettyprint">
 Evas_Object *icon;
 
-elm_object_part_content_set(button, &quot;icon&quot;, icon);
+elm_object_part_content_set(button, "icon", icon);
 </pre>
  </li>
 </ul>
@@ -82,21 +82,21 @@ elm_object_part_content_set(button, &quot;icon&quot;, icon);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>clicked</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, data);
+evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
 
 void
 clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
 }
 </pre>
 
 </li>
 </ol>
- 
+
 <p>The following example shows a simple use case of the button component.</p>
- 
-  <p align="center" class="Table"><strong>Example: Button use case</strong></p> 
+
+  <p align="center" class="Table"><strong>Example: Button use case</strong></p>
 <table border="0">
    <tbody>
       <tr>
@@ -115,19 +115,19 @@ Evas_Object *icon;
 /* Add a box to contain a button and push the box into the naviframe */
 box = elm_box_add(nf);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Button&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Button", NULL, NULL, box, NULL);
 
 /* Add a button and set a style */
 button = elm_button_add(box);
-elm_object_style_set(button, &quot;circle&quot;);
+elm_object_style_set(button, "circle");
 
 /* Set a text to the button */
-elm_object_text_set(button, &quot;Home&quot;);
+elm_object_text_set(button, "Home");
 
 /* Add an icon and set it as a content */
 icon = elm_icon_add(button);
-elm_icon_standard_set(icon, &quot;home&quot;);
-elm_object_part_content_set(button, &quot;icon&quot;, icon);
+elm_icon_standard_set(icon, "home");
+elm_object_part_content_set(button, "icon", icon);
 
 evas_object_show(button);
 elm_box_pack_end(box, button);
@@ -139,11 +139,11 @@ elm_box_pack_end(box, button);
       </tr>
    </tbody>
 </table>
- 
+
 <h2 id="feature">Features</h2>
- 
+
 <p>You can use the autorepeat feature in your application. Once a button is pressed, a <code>repeated</code> signal is emitted repeatedly until the button is released.</p>
- 
+
 <ul>
 <li><p>To disable the autorepeat feature:</p>
 <pre class="prettyprint">
@@ -280,13 +280,13 @@ elm_button_autorepeat_gap_timeout_set(button, 0.5);
 
 <p>You can register callback functions connected to the following signals for a button object.</p>
 
-   <p align="center" class="Table"><strong>Table: Button callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Button callback signals</strong></p>
 <table>
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
         <td><code>clicked</code></td>
@@ -308,7 +308,7 @@ elm_button_autorepeat_gap_timeout_set(button, 0.5);
          <td>The button is released after being pressed.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
 
 <div class="note">
@@ -330,7 +330,7 @@ elm_button_autorepeat_gap_timeout_set(button, 0.5);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_button_wn.htm b/org.tizen.guides/html/native/ui/efl/component_button_wn.htm
index 4587aef..3faf3e4 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_button_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_button_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Button</title>  
+       <title>Button</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -36,10 +36,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Button</h1>
@@ -74,14 +74,14 @@ button = elm_button_add(parent);
 <pre class="prettyprint">
 Evas_Object *ic;
 ic = elm_icon_add(button);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(button, &quot;icon&quot;, ic);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(button, "icon", ic);
 </pre></li>
 
 <li>To add text to the label, use the <code>elm_object_text_set()</code> function:
 
 <pre class="prettyprint">
-elm_object_text_set(button, &quot;Click me!&quot;);
+elm_object_text_set(button, "Click me!");
 </pre></li></ul>
 
 <h2 id="styles">Using the Button Styles</h2>
@@ -104,10 +104,10 @@ elm_object_text_set(button, &quot;Click me!&quot;);
 
 <pre class="prettyprint">
 /* Rectangular screen button style */
-elm_object_style_set(button, &quot;nextdepth&quot;);
+elm_object_style_set(button, "nextdepth");
 
 /* Circular screen button style */
-elm_object_style_set(button, &quot;bottom&quot;);
+elm_object_style_set(button, "bottom");
 </pre>
 
 <h2 id="callback">Using the Button Callbacks</h2>
@@ -132,15 +132,15 @@ elm_object_style_set(button, &quot;bottom&quot;);
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, clicked_cb, data);
+    evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
 }
 
-/* Callback for the &quot;clicked&quot; signal */
+/* Callback for the "clicked" signal */
 /* Called when the button is clicked by the user */
 void
 clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
 }
 </pre>
 
@@ -188,7 +188,7 @@ elm_button_autorepeat_gap_timeout_set(button, 0.5);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_calendar_mn.htm b/org.tizen.guides/html/native/ui/efl/component_calendar_mn.htm
index bc6afe8..08d444f 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_calendar_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_calendar_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Calendar</title>  
+       <title>Calendar</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,10 +34,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Calendar</h1>
@@ -45,17 +45,17 @@
 <p>The calendar UI component displays month views. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Calendar.html">Calendar</a> API.</p>
 
  <p>This feature is supported in mobile applications only.</p>
- 
-<p align="center"><strong>Figure: Calendar component</strong></p> 
-<p align="center"><img alt="Calendar component" src="../../../images/calendar.png" /></p> 
- 
+
+<p align="center"><strong>Figure: Calendar component</strong></p>
+<p align="center"><img alt="Calendar component" src="../../../images/calendar.png" /></p>
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a calendar component in your application:</p>
 <ol>
    <li>Add a calendar with the <code>elm_calendar_add()</code> function.</li>
    <li>Select the month to display with the <code>elm_calendar_selected_time_set()</code> function:
-   
+
 <pre class="prettyprint">
 Evas_Object *calendar;
 Evas_Object *parent;
@@ -66,11 +66,11 @@ time(&amp;the_time); /* Get the current time */
 calendar = elm_calendar_add(parent);
 elm_calendar_selected_time_set(calendar, gmtime(&amp;the_time));
 </pre>
- 
+
    </li>
    <li>Configure the month view:
 <ul><li>
-<p>Change the first day of the week (by default, Sunday).</p> 
+<p>Change the first day of the week (by default, Sunday).</p>
 <p>To change the first weekday to Monday:</p>
 <pre class="prettyprint">
 elm_calendar_first_day_of_week_set(calendar, ELM_DAY_MONDAY);
@@ -78,7 +78,7 @@ elm_calendar_first_day_of_week_set(calendar, ELM_DAY_MONDAY);
 
 <li><p>Modify the names of the weekdays using the <code>elm_calendar_weekdays_names_set()</code> function:</p>
 <pre class="prettyprint">
-const char *weekname[7] = {&quot;A&quot;, &quot;B&quot;, &quot;C&quot;, &quot;D&quot;, &quot;E&quot;, &quot;F&quot;, &quot;G&quot;};
+const char *weekname[7] = {"A", "B", "C", "D", "E", "F", "G"};
 elm_calendar_weekdays_names_set(calendar, &amp;weekname);
 </pre></li>
 
@@ -89,20 +89,20 @@ struct tm *sunday = gmtime(&amp;the_time);
 sunday-&gt;tm_mday -= sunday-&gt;tm_wday;
 sunday-&gt;tm_wday = 0;
 
-elm_calendar_mark_add(calendar, &quot;holiday&quot;, sunday, ELM_CALENDAR_WEEKLY);
+elm_calendar_mark_add(calendar, "holiday", sunday, ELM_CALENDAR_WEEKLY);
 </pre></li></ul>
 </li>
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(calendar, &quot;changed&quot;, changed_cb, data);
+evas_object_smart_callback_add(calendar, "changed", changed_cb, data);
 
 void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Calendar is changed. \n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Calendar is changed. \n");
 }
-</pre> 
+</pre>
 </li>
 </ol>
 
@@ -129,23 +129,23 @@ changed_cb(void *data, Evas_Object *obj, void *event_info)
 
 <p>You can register callback functions connected to the following signals for a calendar object.</p>
 
-   <p align="center" class="Table"><strong>Table: Calendar callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Calendar callback signals</strong></p>
 <table border="1">
-   <colgroup> 
+   <colgroup>
       <col /><col />
-   </colgroup> 
+   </colgroup>
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>changed</code></td>
          <td>The selected date is changed.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
 
 <div class="note">
@@ -167,7 +167,7 @@ changed_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_check_mn.htm b/org.tizen.guides/html/native/ui/efl/component_check_mn.htm
index 6696ce7..edc8b27 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_check_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_check_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Check</title>  
+       <title>Check</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,20 +34,20 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Check</h1>
 
 <p>The check UI component accepts user input by the method of toggling. It is similar to the <a href="component_radio_mn.htm">radio</a> component, except that it does not work as a group. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Check.html">Check</a> API.</p>
-   
+
  <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a check component in your application:</p>
 <ol>
    <li>Add a check component with the <code>elm_check_add()</code> function:
@@ -61,24 +61,24 @@ check = elm_check_add(parent);
       <ul>
          <li>Set a style to the check component with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
 <pre class="prettyprint">
-elm_object_style_set(check, &quot;favorite&quot;);
+elm_object_style_set(check, "favorite");
 </pre>
          </li>
          <li>Set a label to the check component with the <code>elm_object_text_set()</code> or <code>elm_object_part_text_set()</code> function:
 <pre class="prettyprint">
 /* Default style */
-elm_object_text_set(check, &quot;Check&quot;);
+elm_object_text_set(check, "Check");
 
 /* on&amp;off style */
-elm_object_part_text_set(check, &quot;on&quot;, &quot;True&quot;);
-elm_object_part_text_set(check, &quot;off&quot;, &quot;False&quot;);
+elm_object_part_text_set(check, "on", "True");
+elm_object_part_text_set(check, "off", "False");
 </pre>
          </li>
          <li>Set an icon to the button with the <code>elm_object_part_content_set()</code> function and pass the <code>icon</code> part name as a parameter.
 <pre class="prettyprint">
 Evas_Object *icon;
 
-elm_object_part_content_set(check, &quot;icon&quot;, icon);
+elm_object_part_content_set(check, "icon", icon);
 </pre>
          </li>
       </ul>
@@ -86,12 +86,12 @@ elm_object_part_content_set(check, &quot;icon&quot;, icon);
    <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(check, &quot;changed&quot;, changed_cb, data);
+evas_object_smart_callback_add(check, "changed", changed_cb, data);
 
 void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
 </pre>
    </li>
@@ -100,7 +100,7 @@ changed_cb(void *data, Evas_Object *obj, void *event_info)
 <p>The following example shows a simple use case of the check component.</p>
 
    <p align="center" class="Table"><strong>Example: Check use case</strong></p>
-<table border="0"> 
+<table border="0">
    <tbody>
       <tr>
          <td>
@@ -118,7 +118,7 @@ Evas_Object *check;
 box = elm_box_add(nf);
 elm_object_content_set(nf, box);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Check&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Check", NULL, NULL, box, NULL);
 
 check = elm_check_add(box);
 evas_object_show(check);
@@ -131,7 +131,7 @@ elm_box_pack_end(box, check);
       </tr>
    </tbody>
 </table>
- 
+
 <h2 id="style">Styles</h2>
 <p>The following table lists the available component styles.</p>
 
@@ -165,32 +165,32 @@ elm_box_pack_end(box, check);
       </tr>
    </tbody>
 </table>
- 
+
 <h2 id="callback">Callbacks</h2>
 
 <p>You can register callback functions connected to the following signals for a check object.</p>
 
-   <p align="center" class="Table"><strong>Table: Check callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Check callback signals</strong></p>
 <table>
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>changed</code></td>
          <td>The check component value changes.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
- 
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
@@ -205,7 +205,7 @@ elm_box_pack_end(box, check);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_check_wn.htm b/org.tizen.guides/html/native/ui/efl/component_check_wn.htm
index b52856f..e9bf315 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_check_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_check_wn.htm
@@ -62,13 +62,13 @@ check = elm_check_add(parent);
 <ul>
 <li>Set a style to the check component with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
 <pre class="prettyprint">
-elm_object_style_set(check, &quot;popup&quot;);
+elm_object_style_set(check, "popup");
 </pre>
 </li>
 <li>Set a label to the check component with the <code>elm_object_text_set()</code> function:
 <pre class="prettyprint">
 /* Default style */
-elm_object_text_set(check, &quot;Check&quot;);
+elm_object_text_set(check, "Check");
 </pre>
 
 </li>
@@ -77,12 +77,12 @@ elm_object_text_set(check, &quot;Check&quot;);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(check, &quot;changed&quot;, changed_cb, data);
+evas_object_smart_callback_add(check, "changed", changed_cb, data);
 
 void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
 </pre>
    </li>
@@ -107,16 +107,16 @@ Evas_Object *check;
 /* Add a box to pack a check */
 box = elm_box_add(nf);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Check&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Check", NULL, NULL, box, NULL);
 
 check = elm_check_add(box);
 
-elm_object_style_set(check, &quot;default&quot;);
+elm_object_style_set(check, "default");
 evas_object_show(check);
 elm_box_pack_end(box, check);
 
 check = elm_check_add(box);
-elm_object_style_set(check, &quot;on&amp;off&quot;);
+elm_object_style_set(check, "on&amp;off");
 evas_object_show(check);
 elm_box_pack_end(box, check);
 </pre>
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_datetime_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_datetime_wn.htm
index c74f315..ef532e3 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_datetime_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_datetime_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Circle Datetime</title> 
- </head> 
+  <title>Circle Datetime</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -34,10 +34,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Circle Datetime</h1>
@@ -48,8 +48,8 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__DATETIME__MODULE.html">Efl Extension Circle Datetime</a> API.</p>
 
-<p align="center"><strong>Figure: Circle datetime component</strong></p> 
-<p align="center"><img alt="Circle datetime component" width="450" src="../../../images/circle_datetime.png" /></p> 
+<p align="center"><strong>Figure: Circle datetime component</strong></p>
+<p align="center"><img alt="Circle datetime component" width="450" src="../../../images/circle_datetime.png" /></p>
 
 <h2 id="add">Adding a Circle Datetime Component</h2>
 
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_genlist_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_genlist_wn.htm
index 4c6aecc..cfd1af4 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_genlist_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_genlist_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Circle Genlist</title> 
- </head> 
+  <title>Circle Genlist</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -35,10 +35,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Circle Genlist</h1>
@@ -49,8 +49,8 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__GENLIST__MODULE.html">Efl Extension Circle Genlist</a> API.</p>
 
-<p align="center"><strong>Figure: Circle genlist component</strong></p> 
-<p align="center"><img alt="Circle genlist component" width="450" src="../../../images/circle_genlist.png" /></p> 
+<p align="center"><strong>Figure: Circle genlist component</strong></p>
+<p align="center"><img alt="Circle genlist component" width="450" src="../../../images/circle_genlist.png" /></p>
 
 <h2 id="add">Adding a Circle Genlist Component</h2>
 
@@ -75,8 +75,8 @@ circle_genlist = eext_circle_object_genlist_add(genlist, surface);
 <p>The following example sets the horizontal scrollbar off and the vertical scrollbar always on:</p>
 <pre class="prettyprint">
 eext_circle_object_genlist_scroller_policy_set(circle_genlist,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_SCROLLER_POLICY_OFF,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_SCROLLER_POLICY_ON);
+                                               ELM_SCROLLER_POLICY_OFF,
+                                               ELM_SCROLLER_POLICY_ON);
 </pre>
 
 <h2 id="event">Activating a Rotary Event</h2>
@@ -104,7 +104,7 @@ eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
 <li><code>eext_circle_object_disabled_set()</code></li>
 <li><code>eext_circle_object_disabled_get()</code></li>
 </ul></li>
-<li><p>You can modify the circle genlist item properties with the <code>eext_circle_object_item_XXX()</code> functions.</p> 
+<li><p>You can modify the circle genlist item properties with the <code>eext_circle_object_item_XXX()</code> functions.</p>
 <p>The circle genlist has the following items:</p>
 <ul>
 <li><code>default</code>: Default circle item that draws a vertical scroll bar.</li>
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_object_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_object_wn.htm
index 116646a..df3ba69 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_object_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_object_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Circle Object</title> 
- </head> 
+  <title>Circle Object</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -27,19 +27,19 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#add">Adding a Circle Object Component</a></li>
-                       <li><a href="#set_value">Setting the Value and Value Limits</a></li>                    
+                       <li><a href="#set_value">Setting the Value and Value Limits</a></li>
                        <li><a href="#angle">Setting the Angle Details</a></li>
                        <li><a href="#line">Setting the Line Width, Color, and Radius</a></li>
-                       <li><a href="#disable">Disabling the Circle Object</a></li>                     
+                       <li><a href="#disable">Disabling the Circle Object</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Circle Object</h1>
@@ -97,14 +97,14 @@ eext_circle_object_value_min_max_set(circle_obj, 0.0, 10.0);
 Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_value_min_max_set(circle_obj, &quot;default&quot;, 0.0, 10.0);
+eext_circle_object_item_value_min_max_set(circle_obj, "default", 0.0, 10.0);
 </pre>
 <p>To get the current minimum and maximum values of the item, use the <code>eext_circle_object_item_value_min_max_get()</code> function.</p>
 </li>
 </ul>
 </li>
 <li>Set the value:
-  
+
 <div class="note">
        <strong>Note</strong>
        The value cannot be lower than the minimum value or higher than the maximum value.
@@ -128,7 +128,7 @@ eext_circle_object_value_set(circle_obj, 5.0);
 Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_value_set(circle_obj, &quot;default&quot;, 5.0);
+eext_circle_object_item_value_set(circle_obj, "default", 5.0);
 </pre>
 <p>To get the current value of the item, use the <code>eext_circle_object_item_value_get()</code> function.</p>
 </li>
@@ -159,7 +159,7 @@ eext_circle_object_angle_set(circle_obj, 45.0);
 Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_angle_set(circle_obj, &quot;default&quot;, 45.0);
+eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
 </pre>
 <p>To get the current angle of the item, use the <code>eext_circle_object_item_angle_get()</code> function.</p>
 </li>
@@ -186,8 +186,8 @@ eext_circle_object_angle_offset_set(circle_obj, 30.0);
 Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_angle_set(circle_obj, &quot;default&quot;, 45.0); 
-eext_circle_object_item_angle_offset_set(circle_obj, &quot;default&quot;, 30.0);
+eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
+eext_circle_object_item_angle_offset_set(circle_obj, "default", 30.0);
 </pre>
 <p>To get the current angle of the item, use the <code>eext_circle_object_item_angle_offset_get()</code> function.</p>
 </li>
@@ -213,7 +213,7 @@ eext_circle_object_angle_min_max_set(circle_obj, 0.0, 90.0);
 Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_angle_min_max_set(circle_obj, &quot;default&quot;, 0.0, 90.0);
+eext_circle_object_item_angle_min_max_set(circle_obj, "default", 0.0, 90.0);
 </pre>
 <p>To get the current minimum and maximum angles of the item, use the <code>eext_circle_object_item_angle_min_max_get()</code> function.</p>
 </li>
@@ -244,7 +244,7 @@ eext_circle_object_line_width_set(circle_obj, 20);
 Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_line_width_set(circle_obj, &quot;default&quot;, 20);
+eext_circle_object_item_line_width_set(circle_obj, "default", 20);
 </pre>
 <p>To get the current line width of the item, use the <code>eext_circle_object_item_line_width_get()</code> function.</p>
 </li>
@@ -270,7 +270,7 @@ eext_circle_object_color_set(circle_obj, 255, 0, 0, 255);
 Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_value_set(circle_obj, &quot;default&quot;, 255, 0, 0, 255);
+eext_circle_object_item_value_set(circle_obj, "default", 255, 0, 0, 255);
 </pre>
 <p>To get the current color of the item, use the <code>eext_circle_object_item_color_get()</code> function.</p>
 </li>
@@ -295,7 +295,7 @@ eext_circle_object_radius_set(circle_obj, 50.0);
 Evas_Object *circle_obj;
 
 circle_obj = eext_circle_object_add(parent, surface);
-eext_circle_object_item_radius_set(circle_obj, &quot;default&quot;, 50.0);
+eext_circle_object_item_radius_set(circle_obj, "default", 50.0);
 </pre>
 <p>To get the current radius of the item, use the <code>eext_circle_object_item_radius_get()</code> function.</p>
 </li>
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_option_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_option_wn.htm
index f8599d1..f95316b 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_option_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_option_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>More Option</title> 
- </head> 
+  <title>More Option</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -27,7 +27,7 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#add">Adding a More Option Component</a></li>
-                       <li><a href="#item">Adding More Option Items</a></li>                   
+                       <li><a href="#item">Adding More Option Items</a></li>
                        <li><a href="#configure">Configuring the More Option and Items</a></li>
                        <li><a href="#callback">Using the More Option Callbacks</a></li>
                </ul>
@@ -35,10 +35,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>More Option</h1>
@@ -49,10 +49,10 @@
 
 <p>The basic view of the more option contains a cue button (shown on the left in the following figure). When the cue button is clicked, the selector view opens from the cue location (shown on the right in the figure). When the back motion is done in the selector view, the selector view disappears.</p>
 
-<p>The selector view can emit events when an item or the selector are clicked, and it can receive a rotary event. However, you do not need to call the <code>eext_rotary_object_event_activated_set()</code> function to activate the rotary event, since the function is called automatically according to the <code>elm_panel</code> state.</p> 
+<p>The selector view can emit events when an item or the selector are clicked, and it can receive a rotary event. However, you do not need to call the <code>eext_rotary_object_event_activated_set()</code> function to activate the rotary event, since the function is called automatically according to the <code>elm_panel</code> state.</p>
 
-<p align="center"><strong>Figure: More option component</strong></p> 
-<p align="center"><img alt="More option component" width="450" src="../../../images/more_option.png" /></p> 
+<p align="center"><strong>Figure: More option component</strong></p>
+<p align="center"><img alt="More option component" width="450" src="../../../images/more_option.png" /></p>
 
 <h2 id="add">Adding a More Option Component</h2>
 <p>To create a more option component, use the <code>eext_more_option_add()</code> function:</p>
@@ -71,22 +71,22 @@ more_option = eext_more_option_add(parent);
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = NULL;
+    Evas_Object *img = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Append item */
-&nbsp;&nbsp;&nbsp;&nbsp;Eext_Object_Item *item = eext_more_option_item_append(parent);
+    /* Append item */
+    Eext_Object_Item *item = eext_more_option_item_append(parent);
 </pre></li>
 
 <li>Configure the item (for more information, see <a href="#configure">Configuring the More Option and Items</a>).
 <p>In the following example, the main and sub text are set for the item, and an icon is added as the item content:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the text in the rotary_selector */
-&nbsp;&nbsp;&nbsp;&nbsp;eext_more_option_item_part_text_set(item, &quot;selector,main_text&quot;, &quot;test1&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_more_option_item_part_text_set(item, &quot;selector,sub_text&quot;, &quot;test1&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the content icon */
-&nbsp;&nbsp;&nbsp;&nbsp;img = elm_image_add(parent);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_more_option_item_part_content_set(item, &quot;item,icon&quot;, img);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(img, &quot;/music_controller_btn_play.png&quot;, NULL);
+    /* Set the text in the rotary_selector */
+    eext_more_option_item_part_text_set(item, "selector,main_text", "test1");
+    eext_more_option_item_part_text_set(item, "selector,sub_text", "test1");
+    /* Set the content icon */
+    img = elm_image_add(parent);
+    eext_more_option_item_part_content_set(item, "item,icon", img);
+    elm_image_file_set(img, "/music_controller_btn_play.png", NULL);
 }
 </pre></li></ol>
 
@@ -159,15 +159,15 @@ eext_more_option_direction_set(more_option, EEXT_MORE_OPTION_DIRECTION_RIGHT);
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(more_option, &quot;more,option,opened&quot;, _opened_cb, data);
+    evas_object_smart_callback_add(more_option, "more,option,opened", _opened_cb, data);
 }
 
-/* Callback for the &quot;more,option,opened&quot; signal */
+/* Callback for the "more,option,opened" signal */
 /* Called when the rotary selector is shown */
 void
 _opened_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Open the More Option\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Open the More Option\n");
 }</pre>
 
 
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_progressbar_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_progressbar_wn.htm
index 774ac3d..8d98239 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_progressbar_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_progressbar_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Circle Progressbar</title> 
- </head> 
+  <title>Circle Progressbar</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,10 +33,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Circle Progressbar</h1>
@@ -57,7 +57,7 @@ Evas_Object *circle_progressbar;
 Evas_Object *parent;
 
 circle_progressbar = eext_circle_object_progressbar_add(parent,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;surface);
+                                                        surface);
 </pre>
 </li>
 <li>
@@ -101,9 +101,9 @@ circle_surface = eext_circle_surface_conformant_add(conf);
 /* Add a layout and push the layout into the naviframe */
 /* EDJ_PATH is folder path, it contains the progressbar_circle.edj file */
 ly = elm_layout_add(nf);
-elm_layout_file_set(ly, EDJ_PATH &quot;progressbar_circle.edj&quot;, &quot;eext_progressbar_layout&quot;);
+elm_layout_file_set(ly, EDJ_PATH "progressbar_circle.edj", "eext_progressbar_layout");
 evas_object_show(ly);
-elm_naviframe_item_push(nf, &quot;Progress&quot;, NULL, NULL, ly, NULL);
+elm_naviframe_item_push(nf, "Progress", NULL, NULL, ly, NULL);
 
 /* Add a progressbar and set a circle surface to render the progressbar */
 pb = eext_circle_object_progressbar_add(ly, circle_surface);
@@ -112,63 +112,63 @@ eext_circle_object_value_min_max_set(pb, 0.0, 100.0);
 /* Set a progressbar value */
 eext_circle_object_value_set(pb, 65);
 /* Set a part content */
-elm_object_part_content_set(ly, &quot;elm.swallow.content&quot;, pb);
+elm_object_part_content_set(ly, "elm.swallow.content", pb);
 evas_object_show(pb);
 
 /* Get a progressbar value and set a text */
 char buf[255];
 int value = eext_circle_object_value_get(pb);
-snprintf(buf, sizeof(buf), &quot;%d %%&quot;, (int)value);
-elm_object_part_text_set(ly, &quot;elm.text.progressbar&quot;, buf);
+snprintf(buf, sizeof(buf), "%d %%", (int)value);
+elm_object_part_text_set(ly, "elm.text.progressbar", buf);
 
 /* progressbar_circle.edc */
 
 collections {
-&nbsp;&nbsp;&nbsp;group {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;eext_progressbar_layout&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;base&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SPACER;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 360 360;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 360 360;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;base&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;base&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.text.progressbar&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;base&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;base&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Tizen:style=Regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group {
+      name: "eext_progressbar_layout";
+      parts {
+         part {
+            name: "base";
+            type: SPACER;
+            scale: 1;
+            description {
+               state: "default" 0.0;
+               min: 360 360;
+               max: 360 360;
+               fixed: 1 1;
+            }
+         }
+         part {
+            name: "elm.swallow.content";
+            type: SWALLOW;
+            scale: 1;
+            description {
+               state: "default" 0.0;
+               rel1.to: "base";
+               rel2.to: "base";
+            }
+         }
+         part {
+            name: "elm.text.progressbar";
+            type: TEXT;
+            scale: 1;
+            description {
+               state: "default" 0.0;
+               fixed: 1 1;
+               rel1.to: "base";
+               rel2.to: "base";
+               rel1.relative: 0.5 0.5;
+               rel2.relative: 0.5 0.5;
+               text {
+                  font: "Tizen:style=Regular";
+                  size: 50;
+                  min: 1 1;
+               }
+               color: 255 255 255 255;
+            }
+         }
+      }
+   }
 }
 </pre>
                        </td>
@@ -211,7 +211,7 @@ collections {
                </ul>
        </li>
        <li>
-               <p>You can modify the circle progressbar item properties with the <code>eext_circle_object_item_XXX()</code> functions.</p> 
+               <p>You can modify the circle progressbar item properties with the <code>eext_circle_object_item_XXX()</code> functions.</p>
                <p>The circle progressbar has the following items:</p>
                <ul>
                        <li><code>default</code>: Default circle item that draws the progressbar.</li>
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_rotary_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_rotary_wn.htm
index 1b90c53..89846a7 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_rotary_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_rotary_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Rotary Selector</title> 
- </head> 
+  <title>Rotary Selector</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,17 +29,17 @@
                        <li><a href="#add">Adding a Rotary Selector Component</a></li>
                        <li><a href="#event">Activating a Rotary Event</a></li>
                        <li><a href="#item">Adding Rotary Selector Items</a></li>
-                       <li><a href="#configure">Configuring the Selector and Items</a></li>                    
+                       <li><a href="#configure">Configuring the Selector and Items</a></li>
                        <li><a href="#callback">Using the Rotary Selector Callbacks</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Rotary Selector</h1>
@@ -50,9 +50,9 @@
 
 <p>The rotary selector handle can use the <code>elm_layout</code> functions, because the rotary selector handle is an <code>elm_layout</code> object.</p>
 
-<p align="center"><strong>Figure: Rotary selector component</strong></p> 
-<p align="center"><img alt="Rotary selector component" src="../../../images/rotary_selector.png" /></p> 
- 
+<p align="center"><strong>Figure: Rotary selector component</strong></p>
+<p align="center"><img alt="Rotary selector component" src="../../../images/rotary_selector.png" /></p>
+
 <h2 id="add">Adding a Rotary Selector Component</h2>
 
 <p>To create a rotary selector, use the <code>eext_rotary_selector_add()</code> function:</p>
@@ -97,25 +97,25 @@ item = eext_rotary_selector_item_append(rotary_selector);
 <pre class="prettyprint">
 /* Set item icon */
 image = elm_image_add(rotary_selector);
-elm_image_file_set(image, &quot;music_controller_btn_play.png&quot;, NULL);
+elm_image_file_set(image, "music_controller_btn_play.png", NULL);
 
-eext_rotary_selector_item_part_content_set(item, &quot;item,icon&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image);
+eext_rotary_selector_item_part_content_set(item, "item,icon",
+                                           EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
+                                           image);
 
 /* Set selector content icon */
 image = elm_image_add(rotary_selector);
-elm_image_file_set(image, &quot;music_controller_btn.png&quot;, NULL);
-eext_rotary_selector_item_part_content_set(item, &quot;selector,icon&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image);
+elm_image_file_set(image, "music_controller_btn.png", NULL);
+eext_rotary_selector_item_part_content_set(item, "selector,icon",
+                                           EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
+                                           image);
 </pre></li>
 
 <li>Define the item texts. The text is displayed in the selector when the item is selected.
 <p>In the following example, the main text is defined for the new item:</p>
 <pre class="prettyprint">
 /* Set selector main text */
-eext_rotary_selector_item_part_text_set(item, &quot;selector,main_text&quot;, &quot;Options&quot;);
+eext_rotary_selector_item_part_text_set(item, "selector,main_text", "Options");
 </pre>
 
 <p>The following table shows the functions you can use to set the main and sub text of an item.</p>
@@ -142,7 +142,7 @@ eext_rotary_selector_item_part_text_set(item, &quot;selector,main_text&quot;, &q
  </tr>
  </tbody></table></li></ol>
 
- 
+
 <h2 id="configure">Configuring the Selector and Items</h2>
 
 <p>You can configure the color and content of various rotary selector parts.</p>
@@ -181,7 +181,7 @@ eext_rotary_selector_item_part_text_set(item, &quot;selector,main_text&quot;, &q
   <p><code>eext_rotary_selector_part_color_set()</code></p>
    <p><code>eext_rotary_selector_part_content_get()</code></p></td>
  <td><p align="center"><img alt="Selector content" src="../../../images/rotary_selector_selector.png" /></p></td>
- </tr> 
+ </tr>
  </tbody></table>
 
  <p>You can also configure the selector and item appearance based on their current state:</p>
@@ -193,9 +193,9 @@ eext_rotary_selector_item_part_text_set(item, &quot;selector,main_text&quot;, &q
 
 <p>For example, to set the selector color for a normal state selector:</p>
 <pre class="prettyprint">
-eext_rotary_selector_part_color_set(selector, &quot;selector,bg_image&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EEXT_ROTARY_SELECTOR_SELECTOR_STATE_NORMAL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100, 100, 100, 255);
+eext_rotary_selector_part_color_set(selector, "selector,bg_image",
+                                    EEXT_ROTARY_SELECTOR_SELECTOR_STATE_NORMAL,
+                                    100, 100, 100, 255);
 </pre></li>
 <li>The available selector item states are:
 <ul><li><code>EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL</code>: Item is in a normal state.</li>
@@ -203,11 +203,11 @@ eext_rotary_selector_part_color_set(selector, &quot;selector,bg_image&quot;,
 
 <p>For example, to set the item color for a normal state item:</p>
 <pre class="prettyprint">
-eext_rotary_selector_item_part_color_set(item, &quot;item,icon&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100, 100, 100, 255);
+eext_rotary_selector_item_part_color_set(item, "item,icon",
+                                         EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
+                                         100, 100, 100, 255);
 </pre></li></ul>
- 
+
 <h2 id="callback">Using the Rotary Selector Callbacks</h2>
 <p>To receive notifications about the rotary selector events, listen to the following signals:</p>
 
@@ -224,15 +224,15 @@ eext_rotary_selector_item_part_color_set(item, &quot;item,icon&quot;,
 <p>To register and define a callback for the <code>item,clicked</code> signal:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(rotary_selector, &quot;item,clicked&quot;, item_clicked_cb, data);
+    evas_object_smart_callback_add(rotary_selector, "item,clicked", item_clicked_cb, data);
 }
 
-/* Callback for the &quot;item,clicked&quot; signal */
+/* Callback for the "item,clicked" signal */
 /* Called when the item is clicked by the user */
 void
 item_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Item clicked\n");
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_scroller_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_scroller_wn.htm
index 0a5a9f3..743d6e2 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_scroller_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_scroller_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Circle Scroller</title> 
- </head> 
+  <title>Circle Scroller</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -27,7 +27,7 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#add">Adding a Circle Scroller Component</a></li>
-                       <li><a href="#configure">Configuring the Circle Scroller</a></li>       
+                       <li><a href="#configure">Configuring the Circle Scroller</a></li>
                        <li><a href="#event">Activating a Rotary Event</a></li>
                        <li><a href="#property">Configuring the Circle Properties</a></li>
 
@@ -52,10 +52,10 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SCROLLER__MODULE.html">Efl Extension Circle Scroller</a> API.</p>
 
-<p align="center"><strong>Figure: Circle scroller component</strong></p> 
-<p align="center"><img alt="Circle scroller component" width="450" src="../../../images/circle_scroller.png" /></p> 
+<p align="center"><strong>Figure: Circle scroller component</strong></p>
+<p align="center"><img alt="Circle scroller component" width="450" src="../../../images/circle_scroller.png" /></p>
 
-<h2 id="add">Adding a Circle Scroller Component</h2> 
+<h2 id="add">Adding a Circle Scroller Component</h2>
 
 <p>To create a circle scroller component, use the <code>eext_circle_object_scroller_add()</code> function. Pass a <code>elm_scroller</code> component as the first parameter and a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter.</p>
 <pre class="prettyprint">
@@ -82,10 +82,10 @@ circle_scroller = eext_circle_object_scroller_add(scroller, surface);
 
 <pre class="prettyprint">
 eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_SCROLLER_POLICY_OFF);
+                                       ELM_SCROLLER_POLICY_OFF);
 </pre>
 
-<p>To get the current scroller policy, use the <code>eext_circle_object_scroller_policy_get()</code> function.</p> 
+<p>To get the current scroller policy, use the <code>eext_circle_object_scroller_policy_get()</code> function.</p>
 
 <h2 id="event">Activating a Rotary Event</h2>
 
@@ -111,7 +111,7 @@ eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
        <li><code>eext_circle_object_disabled_set()</code></li>
        <li><code>eext_circle_object_disabled_get()</code></li>
 </ul></li>
-<li><p>You can modify the circle scroller item properties with the <code>eext_circle_object_item_XXX()</code> functions.</p> 
+<li><p>You can modify the circle scroller item properties with the <code>eext_circle_object_item_XXX()</code> functions.</p>
 <p>The circle scroller has the following items:</p>
 <ul>
        <li><code>default</code>: Default circle item that draws the vertical scroller.</li>
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_slider_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_slider_wn.htm
index 144da9d..aec238a 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_slider_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_slider_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Circle Slider</title> 
- </head> 
+  <title>Circle Slider</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -34,19 +34,19 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Circle Slider</h1>
 
 
 <p>The circle slider UI component changes corresponding to rotary events. The circle slider not only extends the UI feature of the <a href="component_slider_wn.htm">slider</a> component (<code>elm_slider</code>), but also replaces the functionalities of the <code>elm_slider</code> in the circular design. For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SLIDER__MODULE.html">Efl Extension Circle Slider</a> API.</p>
-       
+
        <p>This feature is supported in wearable applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
 
 <p>To use a circle slider component in your application:</p>
@@ -56,7 +56,7 @@
 Evas_Object *slider = NULL;
 
 slider = eext_circle_object_slider_add(ad-&gt;nf,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;circle_surface);
+                                       ad-&gt;circle_surface);
 </pre>
 </li>
 <li>Configure the circle slider <a href="#feature">features</a>.
@@ -72,15 +72,15 @@ slider = eext_circle_object_slider_add(ad-&gt;nf,
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>value,changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(slider, &quot;value,changed&quot;, _value_changed_cb, NULL);
+evas_object_smart_callback_add(slider, "value,changed", _value_changed_cb, NULL);
 
-/* Callback for the &quot;value,changed&quot; signal */
+/* Callback for the "value,changed" signal */
 /* Called when the value of the circle slider is changed */
 static void
 _value_changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;double _val = eext_circle_object_value_get(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Circle slider value changed. %0.1f\n&quot;, _val);
+    double _val = eext_circle_object_value_get(obj);
+    dlog_print(DLOG_INFO, LOG_TAG, "Circle slider value changed. %0.1f\n", _val);
 }
 </pre>
 </li>
@@ -113,7 +113,7 @@ eext_circle_object_value_set(slider, 5.0);
 eext_circle_object_color_set(slider, 255, 0, 0, 255);
 
 eext_rotary_object_event_activated_set(slider, EINA_TRUE);
-evas_object_smart_callback_add(slider, &quot;value,changed&quot;, _value_changed_cb, 0);
+evas_object_smart_callback_add(slider, "value,changed", _value_changed_cb, 0);
 </pre>
                 </td>
                 <td>
@@ -243,7 +243,7 @@ eext_circle_object_value_set(slider, 5.0);
 eext_circle_object_color_set(slider, 255, 0, 0, 255);
 
 /* Set background color */
-eext_circle_object_item_color_set(slider, &quot;bg&quot;, 0, 0, 255, 255);
+eext_circle_object_item_color_set(slider, "bg", 0, 0, 255, 255);
 </pre>
                                                        </td>
                                                        <td align="center"><img src="../../../images/circle_slider_practice_2.png"/></td>
@@ -269,11 +269,11 @@ eext_circle_object_item_color_set(slider, &quot;bg&quot;, 0, 0, 255, 255);
              </tr>
           </tbody>
        </table>
-       
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
-</div> 
+</div>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_spinner_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_spinner_wn.htm
index 99b81e9..4e7f448 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_spinner_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_spinner_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Circle Spinner</title> 
- </head> 
+  <title>Circle Spinner</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -27,7 +27,7 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#add">Adding a Circle Spinner Component</a></li>
-                       <li><a href="#configure">Configuring the Circle Spinner</a></li>                        
+                       <li><a href="#configure">Configuring the Circle Spinner</a></li>
                        <li><a href="#event">Activating a Rotary Event</a></li>
                        <li><a href="#property">Configuring the Circle Properties</a></li>
                </ul>
@@ -44,7 +44,7 @@
 <h1>Circle Spinner</h1>
 
 <p>This feature is supported in wearable applications only.</p>
- 
+
 <p>The circle spinner component extends the spinner component (<code>elm_spinner</code>) by visualizing its value. The circle spinner increases or decreases the value of the <code>elm_spinner</code> through a clockwise or counter-clockwise rotary event.</p>
 
 <p align="center"><strong>Figure: Circle spinner component</strong></p>
@@ -62,7 +62,7 @@ spinner = elm_spinner_add(parent);
 </pre></li>
 <li>Set the object style as <code>circle</code>:
 <pre class="prettyprint">
-elm_object_style_set(spinner, &quot;circle&quot;);
+elm_object_style_set(spinner, "circle");
 </pre></li>
 <li>Create an <code>eext_spinner</code> object using the <code>eext_circle_object_spinner_add()</code> function. Pass a <a href="component_circ_surface_wn.htm">circle surface</a> as the second parameter.
 <pre class="prettyprint">
diff --git a/org.tizen.guides/html/native/ui/efl/component_circ_surface_wn.htm b/org.tizen.guides/html/native/ui/efl/component_circ_surface_wn.htm
index f7020ca..5430989 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_circ_surface_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_circ_surface_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Circle Surface</title> 
- </head> 
+  <title>Circle Surface</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -44,7 +44,7 @@
 
 <p>This feature is supported in wearable applications only.</p>
 
-<p>The circle surface component manages and renders <a href="component_circ_object_wn.htm">circle objects</a>. Multiple circle objects can be connected to 1 circle surface as candidates of an object to be rendered. When 1 circle object is set as visible, the surface renders the circle object and hides the others.</p> 
+<p>The circle surface component manages and renders <a href="component_circ_object_wn.htm">circle objects</a>. Multiple circle objects can be connected to 1 circle surface as candidates of an object to be rendered. When 1 circle object is set as visible, the surface renders the circle object and hides the others.</p>
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SURFACE__MODULE.html">Efl Extension Circle Surface</a> API.</p>
 
diff --git a/org.tizen.guides/html/native/ui/efl/component_colorselector_mn.htm b/org.tizen.guides/html/native/ui/efl/component_colorselector_mn.htm
index 7e5af7a..d5d4da7 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_colorselector_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_colorselector_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Colorselector</title>  
+       <title>Colorselector</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -45,9 +45,9 @@
 
 <p>The colorselector UI component allows users to select a color. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Colorselector.html">Colorselector</a> API.</p>
    <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a colorselector component in your application:</p>
 <ol>
    <li>Add a colorselector with the <code>elm_colorselector_add()</code> function:
@@ -60,34 +60,34 @@ colorsel = elm_colorselector_add(parent);
    <li>Set a mode to the colorselector with the <code>elm_colorselector_mode_set()</code> function. Currently, only the palette mode is available in Tizen.
 <pre class="prettyprint">
 elm_colorselector_mode_set(colorsel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_COLORSELECTOR_PALETTE);
+                           ELM_COLORSELECTOR_PALETTE);
 </pre>
    </li>
    <li>Set a name to the palette with the <code>elm_colorselector_palette_name_set()</code> function. If you use the default palette, you can skip this step.</li>
    <li>Add colors to the palette. If you use the default style, you can skip this step, since the default palette already has the colors selected.
 <p>The new palette is saved by the elementary configuration and you can load it again later.</p>
 <p>The palette mode displays several color items for the user to select from. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, and it is associated with a unique identifier. You can create a new series of colors (a new palette) and save it under another identifier. By default, the palette mode uses the <code>default</code> palette, which contains 14 colors.</p>
-   
+
    </li>
    <li>Register the <a href="#callback">callback</a> functions.
    <p>When a color in the colorselector is clicked, the color set to the colorselector component changes.
    Retrieve the currently selected color with the <code>elm_colorselector_color_set()</code> function.</p>
    <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(colorselector, &quot;changed&quot;, changed_cb, data);
+evas_object_smart_callback_add(colorselector, "changed", changed_cb, data);
 
 void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The color has changed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The color has changed\n");
 }
-</pre> 
-   
+</pre>
+
    </li>
 </ol>
 
 <p>The following example shows a simple use case of the colorselector component.</p>
-   <p align="center" class="Table"><strong>Example: Colorselector use case</strong></p> 
+   <p align="center" class="Table"><strong>Example: Colorselector use case</strong></p>
 <table border="0">
    <tbody>
       <tr>
@@ -106,7 +106,7 @@ colsel = elm_colorselector_add(nf);
 elm_colorselector_mode_set(colsel, ELM_COLORSELECTOR_PALETTE);
 evas_object_show(colsel);
 
-elm_naviframe_item_push(nf, &quot;Colorselector&quot;, NULL, NULL, colsel, NULL);
+elm_naviframe_item_push(nf, "Colorselector", NULL, NULL, colsel, NULL);
 </pre>
          </td>
          <td>
@@ -115,10 +115,10 @@ elm_naviframe_item_push(nf, &quot;Colorselector&quot;, NULL, NULL, colsel, NULL)
       </tr>
    </tbody>
 </table>
- 
+
 <p>The following example shows how to add a new palette called <code>mypalette</code>, with 3 colors (red, green, and blue).</p>
- 
-   <p align="center" class="Table"><strong>Example: Customized colorselector</strong></p> 
+
+   <p align="center" class="Table"><strong>Example: Customized colorselector</strong></p>
 <table border="0">
    <tbody>
       <tr>
@@ -129,7 +129,7 @@ Evas_Object *conf;
 Evas_Object *nf;
 Evas_Object *colsel;
 Elm_Object_Item *nf_it;
- 
+
 /* Starting right after <a href="ui_layouts_n.htm#code">the basic EFL UI layout code</a> */
 /* win - conformant - naviframe */
 
@@ -137,9 +137,9 @@ colsel = elm_colorselector_add(nf);
 elm_colorselector_mode_set(colsel, ELM_COLORSELECTOR_PALETTE);
 evas_object_show(colsel);
 
-elm_naviframe_item_push(nf, &quot;Colorselector&quot;, NULL, NULL, colsel, NULL);
- 
-elm_colorselector_palette_name_set(colorsel, &quot;mypalette&quot;);
+elm_naviframe_item_push(nf, "Colorselector", NULL, NULL, colsel, NULL);
+
+elm_colorselector_palette_name_set(colorsel, "mypalette");
 elm_colorselector_palette_color_add(colorsel, 255, 0, 0, 255);
 elm_colorselector_palette_color_add(colorsel, 0, 255, 0, 255);
 elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
@@ -151,7 +151,7 @@ elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
       </tr>
    </tbody>
 </table>
- 
+
 <h2 id="style">Styles</h2>
 
 <p>The following table lists the available component styles.</p>
@@ -171,21 +171,21 @@ elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
  </tr>
  </tbody>
 </table>
- 
+
 <h2 id="callback">Callbacks</h2>
 
 <p>You can register callback functions connected to the following signals for a colorselector object.</p>
 
-   <p align="center" class="Table"><strong>Table: Colorselector callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Colorselector callback signals</strong></p>
 <table border="1">
-   <colgroup> 
+   <colgroup>
       <col /><col />
-   </colgroup> 
+   </colgroup>
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>changed</code></td>
@@ -202,14 +202,14 @@ elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
          <td>The color item is long-pressed.</td>
          <td>The long-pressed color item</td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
- 
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
@@ -224,7 +224,7 @@ elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_ctxpopup_mn.htm b/org.tizen.guides/html/native/ui/efl/component_ctxpopup_mn.htm
index 1675eee..054dcaf 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_ctxpopup_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_ctxpopup_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Ctxpopup</title>  
+       <title>Ctxpopup</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -46,11 +46,11 @@
 
 
 <p>The ctxpopup UI component pops up and shows a list of items inside it. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Ctxpopup.html">Ctxpopup</a> API.</p>
-   
+
  <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a ctxpopup component in your application:</p>
 <ol>
    <li>Add a ctxpopup with the <code>elm_ctxpopup_add()</code> function:
@@ -62,22 +62,22 @@ ctxpopup = elm_ctxpopup_add(parent);
    </li>
    <li>Configure the ctxpopup <a href="#feature">features</a>.</li>
    <li>Append items to the ctxpopup with the <code>elm_ctxpopup_item_append()</code> function.
-   The function takes 5 parameters: the pointer of the ctxpopup, a file path of an icon, a text, a callback function to call when the item is clicked, and the parameter passed to the callback. 
+   The function takes 5 parameters: the pointer of the ctxpopup, a file path of an icon, a text, a callback function to call when the item is clicked, and the parameter passed to the callback.
 <pre class="prettyprint">
-elm_ctxpopup_item_append(ctxpopup, &quot;icon.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Call&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_item_selected_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+elm_ctxpopup_item_append(ctxpopup, "icon.png",
+                         "Call",
+                         _item_selected_cb,
+                         NULL);
 </pre>
    </li>
    <li>Register the <a href="#callback">callback</a> functions.</li>
 </ol>
- 
- <p>When shown, the ctxpopup automatically selects an area inside its parent object&#39;s view to optimally fit into it. Set the object view with the <code>elm_ctxpopup_hover_parent_set()</code> function.</p>
- 
+
+ <p>When shown, the ctxpopup automatically selects an area inside its parent object's view to optimally fit into it. Set the object view with the <code>elm_ctxpopup_hover_parent_set()</code> function.</p>
+
 <p>The following example shows a simple use case of the ctxpopup component.</p>
- 
-   <p align="center" class="Table"><strong>Example: Ctxpopup use case</strong></p> 
+
+   <p align="center" class="Table"><strong>Example: Ctxpopup use case</strong></p>
 <table border="0">
    <tbody>
       <tr>
@@ -95,11 +95,11 @@ Evas_Object *btn;
 box = elm_box_add(nf);
 elm_object_content_set(nf, box);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Ctxpopup&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Ctxpopup", NULL, NULL, box, NULL);
 
 btn = elm_button_add(box);
-elm_object_text_set(btn, &quot;Click to see ctxpopup&quot;);
-evas_object_smart_callback_add(btn, &quot;clicked&quot;, _btn_clicked_cb, nf);
+elm_object_text_set(btn, "Click to see ctxpopup");
+evas_object_smart_callback_add(btn, "clicked", _btn_clicked_cb, nf);
 evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, 0);
 elm_box_pack_end(box, btn);
 evas_object_show(btn);
@@ -107,19 +107,19 @@ evas_object_show(btn);
 static void
 _btn_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *nf = data;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord x, y, w, h;
+    Evas_Object *nf = data;
+    Evas_Coord x, y, w, h;
 
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ctxpopup = elm_ctxpopup_add(nf);
+    Evas_Object *ctxpopup = elm_ctxpopup_add(nf);
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_ctxpopup_item_append(ctxpopup, &quot;Item 1&quot;, NULL, ctxpopup_item_select_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_ctxpopup_item_append(ctxpopup, &quot;Item 2&quot;, NULL, ctxpopup_item_select_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_ctxpopup_item_append(ctxpopup, &quot;Item 3&quot;, NULL, ctxpopup_item_select_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_ctxpopup_item_append(ctxpopup, &quot;Item 4&quot;, NULL, ctxpopup_item_select_cb, NULL);
+    elm_ctxpopup_item_append(ctxpopup, "Item 1", NULL, ctxpopup_item_select_cb, NULL);
+    elm_ctxpopup_item_append(ctxpopup, "Item 2", NULL, ctxpopup_item_select_cb, NULL);
+    elm_ctxpopup_item_append(ctxpopup, "Item 3", NULL, ctxpopup_item_select_cb, NULL);
+    elm_ctxpopup_item_append(ctxpopup, "Item 4", NULL, ctxpopup_item_select_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(ctxpopup, x + (w / 2), y + (h / 2));
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ctxpopup);
+    evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+    evas_object_move(ctxpopup, x + (w / 2), y + (h / 2));
+    evas_object_show(ctxpopup);
 }
 </pre>
          </td>
@@ -130,7 +130,7 @@ _btn_clicked_cb(void *data, Evas_Object *obj, void *event_info)
    </tbody>
 </table>
 
- 
+
 <h2 id="feature">Features</h2>
 <p>To configure the ctxpopup features:</p>
 <ul>
@@ -152,9 +152,9 @@ elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
 
 <pre class="prettyprint">
 elm_ctxpopup_direction_priority_set(ctxpopup, ELM_CTXPOPUP_DIRECTION_UP,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_CTXPOPUP_DIRECTION_LEFT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_CTXPOPUP_DIRECTION_DOWN,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_CTXPOPUP_DIRECTION_RIGHT);
+                                    ELM_CTXPOPUP_DIRECTION_LEFT,
+                                    ELM_CTXPOPUP_DIRECTION_DOWN,
+                                    ELM_CTXPOPUP_DIRECTION_RIGHT);
 </pre>
 </li>
 <li>
@@ -167,7 +167,7 @@ elm_ctxpopup_dismiss(ctxpopup);
 
 <h2 id="items">Items</h2>
 
-<p>The ctxpopup can contain a small number of items. Each item can have a label, an icon, or both.</p> 
+<p>The ctxpopup can contain a small number of items. Each item can have a label, an icon, or both.</p>
 
 <p>To manage the ctxpopup items:</p>
 <ol>
@@ -179,7 +179,7 @@ elm_ctxpopup_dismiss(ctxpopup);
 Elm_Object_Item *it;
 Evas_Object *icon;
 
-it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, icon, _ctxpopup_item_cb, NULL);
+it = elm_ctxpopup_item_append(ctxpopup, "test", icon, _ctxpopup_item_cb, NULL);
 </pre>
 </li>
 <li>
@@ -188,7 +188,7 @@ it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, icon, _ctxpopup_item_c
 <li>To change the item label to <code>New label</code>:
 
 <pre class="prettyprint">
-elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
+elm_object_item_part_text_set(it, "default", "New label");
 </pre>
 </li>
 <li>
@@ -196,9 +196,9 @@ elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
 
 <pre class="prettyprint">
 Evas_Object *home_icon = elm_icon_add(ctxpopup);
-elm_icon_standard_set(home_icon, &quot;home&quot;);
+elm_icon_standard_set(home_icon, "home");
 
-elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
+elm_object_item_part_content_set(it, "icon", home_icon);
 </pre></li></ul>
 </li>
 <li>
@@ -207,7 +207,7 @@ elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
 static void
 _ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;ctxpopup item selected\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
 }
 </pre>
 </li>
@@ -218,7 +218,7 @@ _ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
 <p>The following table lists the available component styles.</p>
 
 <p>In Tizen 2.4, dropdown styles are no longer supported. Use a <a href="component_hoversel_mn.htm">hoversel</a> component for those instead.</p>
- 
+
 <p align="center" class="Table"><strong>Table: Ctxpopup styles</strong></p>
 <table>
 <tbody>
@@ -250,27 +250,27 @@ _ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
 
 <p>You can register callback functions connected to the following signals for a ctxpopup object.</p>
 
-   <p align="center" class="Table"><strong>Table: Ctxpopup callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Ctxpopup callback signals</strong></p>
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>dismissed</code></td>
          <td>The ctxpopup is dismissed.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
- 
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
@@ -285,7 +285,7 @@ _ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_ctxpopup_wn.htm b/org.tizen.guides/html/native/ui/efl/component_ctxpopup_wn.htm
index f1fbe12..5434bb6 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_ctxpopup_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_ctxpopup_wn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -40,7 +40,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Ctxpopup</h1>
@@ -52,7 +52,7 @@
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Ctxpopup.html">Ctxpopup</a> API.</p>
     <p align="center"><strong>Figure: Ctxpopup component</strong></p>
 <p align="center"><img alt="Ctxpopup component" src="../../../images/ctxpopup_wn.png" /></p>
-  
+
       <p align="center"><strong>Figure: Ctxpopup hierarchy</strong></p>
   <p align="center"><img alt="Ctxpopup hierarchy" src="../../../images/ctxpopup_tree.png" /></p>
 
@@ -68,7 +68,7 @@ Evas_Object *parent;
 ctxpopup = elm_ctxpopup_add(parent);
 </pre>
 
-<p>When shown, the ctxpopup automatically selects an area inside its parent object&#39;s view to optimally fit into it. Set the object view with the <code>elm_ctxpopup_hover_parent_set()</code> function.</p>
+<p>When shown, the ctxpopup automatically selects an area inside its parent object's view to optimally fit into it. Set the object view with the <code>elm_ctxpopup_hover_parent_set()</code> function.</p>
 <h2 id="styles">Using the Ctxpopup Styles</h2>
 
 <p>The ctxpopup has the following styles for the rectangular screen:</p>
@@ -78,14 +78,14 @@ ctxpopup = elm_ctxpopup_add(parent);
 <p>The ctxpopup has the following styles for the circular screen:</p>
 <ul>
 <li><code>select_mode</code></li>
-<li><code>select_mode/top</code>, <code>select_mode/bottom</code> 
+<li><code>select_mode/top</code>, <code>select_mode/bottom</code>
 <p>These 2 styles can be used as a pair.</p></li>
 </ul>
 
 <p>To set the style to, for example, <code>default</code>:</p>
 
 <pre class="prettyprint">
-elm_object_style_set(ctxpopup, &quot;default&quot;);
+elm_object_style_set(ctxpopup, "default");
 </pre>
 
 <h2 id="configure">Configuring the Ctxpopup</h2>
@@ -109,7 +109,7 @@ elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
 
 <h2 id="items">Managing the Ctxpopup Items</h2>
 
-<p>The ctxpopup can contain a small number of items. Each item can have a label, an icon, or both.</p> 
+<p>The ctxpopup can contain a small number of items. Each item can have a label, an icon, or both.</p>
 
 <p>To manage the ctxpopup items:</p>
 <ol>
@@ -119,7 +119,7 @@ elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
 <pre class="prettyprint">
 Elm_Object_Item *it;
 
-it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, NULL, _ctxpopup_item_cb, NULL);
+it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb, NULL);
 </pre>
 </li>
 <li>
@@ -128,7 +128,7 @@ it = elm_ctxpopup_item_append(ctxpopup, &quot;test&quot;, NULL, _ctxpopup_item_c
 <li>To change the item label to <code>New label</code>:
 
 <pre class="prettyprint">
-elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
+elm_object_item_part_text_set(it, "default", "New label");
 </pre>
 </li>
 <li>
@@ -136,9 +136,9 @@ elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
 
 <pre class="prettyprint">
 Evas_Object *home_icon = elm_icon_add(ctxpopup);
-elm_icon_standard_set(home_icon, &quot;home&quot;);
+elm_icon_standard_set(home_icon, "home");
 
-elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
+elm_object_item_part_content_set(it, "icon", home_icon);
 </pre></li></ul>
 </li>
 <li>
@@ -147,7 +147,7 @@ elm_object_item_part_content_set(it, &quot;icon&quot;, home_icon);
 static void
 _ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;ctxpopup item selected\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
 }
 </pre>
 </li>
@@ -161,24 +161,24 @@ _ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
- 
+
 <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p>
 
 <p>To register and define a callback for the <code>dismissed</code> signal:</p>
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ctxpopup, &quot;dismissed&quot;, dismissed_cb, data);
+    evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
 }
 
-/* Callback for the &quot;dismissed&quot; signal */
+/* Callback for the "dismissed" signal */
 /* Called when the ctxpopup is dismissed */
 void
 dismissed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Ctxpopup dismissed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Ctxpopup dismissed\n");
 }
-</pre> 
+</pre>
 
 <div class="note">
        <strong>Note</strong>
@@ -194,7 +194,7 @@ dismissed_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_custom_n.htm b/org.tizen.guides/html/native/ui/efl/component_custom_n.htm
index fb0e987..035a39d 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_custom_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_custom_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Customizing UI Components</title> 
- </head> 
+  <title>Customizing UI Components</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
        <ul class="toc">
@@ -29,20 +29,20 @@
                <ul class="toc">
                                <li><a href="#theme">Style, Theme, and EDC</a></li>
                                <li><a href="#custom">Customization</a></li>
-                               </ul>   
+                               </ul>
        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Customizing UI Components</h1> 
-  
-<p>This topic explains how to customize UI components. Before learning the process of customization, you must understand the concept of &quot;style&quot; and &quot;theme&quot; in EFL and how EFL applies the right style for a UI component.</p>
+  <h1>Customizing UI Components</h1>
+
+<p>This topic explains how to customize UI components. Before learning the process of customization, you must understand the concept of "style" and "theme" in EFL and how EFL applies the right style for a UI component.</p>
 <p>EFL provides the EDC script as a way to define a look for UI components. For detailed information on how to write an EDC script, see <a href="learn_edc_intro_n.htm">Layouting with EDC</a>.</p>
 
 <h2 id="theme">Style, Theme, and EDC</h2>
@@ -57,38 +57,38 @@
 Evas_Object *check;
 
 check = elm_check_add(parent);
-elm_object_style_set(check, &quot;favorite&quot;);
+elm_object_style_set(check, "favorite");
 </pre>
- 
+
 <p>A theme is defined in <a href="learn_edc_intro_n.htm">EDC</a> (<code>.edc</code>) files, and they are compiled into an EDJ (<code>.edj</code>) file during the project building. An EDC file is a collection of <a href="learn_edc_group_n.htm">group</a> blocks, and one group is composed of <a href="learn_edc_part_n.htm">parts</a> and <a href="learn_edc_program_n.htm">programs</a>. A theme corresponds to one EDJ file, and a style corresponds to 1 group in an EDJ file.</p>
- 
+
 <p>The following example shows some groups in an EDC file (<code>check.edc</code>), which correspond to the styles of the check component in mobile profile:</p>
- 
+
 <pre class="prettyprint">
 group {
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/default&quot;;
-&nbsp;&nbsp;&nbsp;/* Other content */
+   name: "elm/check/base/default";
+   /* Other content */
 }
- 
+
 group {
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/favorite&quot;;
-&nbsp;&nbsp;&nbsp;/* Other content */
+   name: "elm/check/base/favorite";
+   /* Other content */
 }
- 
+
 group {
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/on&amp;off&quot;;
-&nbsp;&nbsp;&nbsp;/* Other content */
+   name: "elm/check/base/on&amp;off";
+   /* Other content */
 }
 </pre>
- 
+
 <p>The groups have a certain format of names according to the naming rule of Elementary. These 3 groups define 3 different styles for the check component: <code>default</code>, <code>favorite</code>, and <code>on&amp;off</code>.</p>
- 
+
 <h2 id="custom">Customization</h2>
- 
+
 <p>In the best scenario, every application can find the style it needs in the already provided theme. However, you can sometimes need customized styles. EFL allows you to define a new style and add it to an existing theme, or even make a new theme.</p>
- 
+
 <p>To customize a UI component:</p>
- 
+
 <ol>
    <li>Create a project for a basic EDC UI application.
        <p>See <a href="../../../../../org.tizen.training/html/native/mobile/first_app_mn.htm">Creating Your First Tizen Mobile Native Application</a> or <a href="../../../../../org.tizen.training/html/native/wearable/first_app_wn.htm">Creating Your First Tizen Wearable Native Application</a> for creating a EDC UI project.</p></li>
@@ -98,7 +98,7 @@ group {
 <pre class="prettyprint">
 char edj_path[PATH_MAX] = {0,};
 
-app_get_resource(&quot;/edje/custom.edj&quot;, edj_path, (int)PATH_MAX);
+app_get_resource("/edje/custom.edj", edj_path, (int)PATH_MAX);
 </pre>
        </li>
    <li>Write a style in the EDC file.</li>
@@ -110,10 +110,10 @@ app_get_resource(&quot;/edje/custom.edj&quot;, edj_path, (int)PATH_MAX);
       <p>The following code snippet shows how to add the new theme file as an extension:</p>
 <pre class="prettyprint">
 char edj_path[PATH_MAX] = {0,};
- 
+
 /* Get the full path of the EDJ file */
-app_get_resource(&quot;/edje/custom.edj&quot;, edj_path, (int)PATH_MAX);
- 
+app_get_resource("/edje/custom.edj", edj_path, (int)PATH_MAX);
+
 /* Load the check custom style as an extension */
 elm_theme_extension_add(NULL, edj_path);
 </pre>
@@ -127,24 +127,24 @@ Evas_Object *check;
 check = elm_check_add(parent);
 
 /* Set the newly defined custom style */
-elm_object_style_set(check, &quot;custom&quot;);
+elm_object_style_set(check, "custom");
 </pre>
    </li>
 </ol>
- 
+
 <p>You can see the above steps implemented in the <a href="https://developer.tizen.org/development/sample/native/UI/ui_theme_extension_sd_mn.htm" target="_blank">ThemeExtension</a> sample application.</p>
- 
+
 <h3>Extension and Overlay</h3>
- 
+
 <p>To attach an EDJ file to an existing theme, you can use:</p>
- 
+
 <ul>
    <li>Extension
-       <p>A theme extension enables you to extend a theme with only a part of the UI component&#39;s style (not all of it).</p>
+       <p>A theme extension enables you to extend a theme with only a part of the UI component's style (not all of it).</p>
        <p>Applications can add and delete a theme in the list of extensions with the following calls:</p>
 <pre class="prettyprint">
-elm_theme_extension_add(NULL, &quot;./theme_button_style_custom.edj&quot;);
-elm_theme_extension_del(NULL, &quot;./theme_button_style_custom.edj&quot;);
+elm_theme_extension_add(NULL, "./theme_button_style_custom.edj");
+elm_theme_extension_del(NULL, "./theme_button_style_custom.edj");
 </pre>
        <p>The above example assumes that the <code>theme_button_style_custom.edj</code> file contains a new button style called <code>custom</code>.</p>
    </li>
@@ -153,11 +153,11 @@ elm_theme_extension_del(NULL, &quot;./theme_button_style_custom.edj&quot;);
        <p>If a new style called <code>default</code> is created
        for a button component and it is added as an overlay, Elementary uses the overlay for all button components
        overriding the default theme.</p>
- 
+
        <p>Applications can add and delete a theme in the list of overlays with the following calls:</p>
  <pre class="prettyprint">
-elm_theme_overlay_add(NULL, &quot;./theme_button.edj&quot;);
-elm_theme_overlay_del(NULL, &quot;./theme_button.edj&quot;);
+elm_theme_overlay_add(NULL, "./theme_button.edj");
+elm_theme_overlay_del(NULL, "./theme_button.edj");
 </pre>
        <p>The above example assumes that the <code>theme_button.edj</code> file
        only contains a new theme for the button component.</p>
@@ -169,9 +169,9 @@ elm_theme_overlay_del(NULL, &quot;./theme_button.edj&quot;);
 </div>
    </li>
 </ul>
- 
+
 <p>The following process shows how Elementary loads a style of a certain name:</p>
- 
+
 <ol>
    <li>Check the list of overlays registered on the current theme.</li>
    <li>If the right style is not found, check the default theme.</li>
@@ -180,32 +180,32 @@ elm_theme_overlay_del(NULL, &quot;./theme_button.edj&quot;);
    <p>This means that the style with the certain name is not defined in the current theme.</p>
    </li>
 </ol>
- 
+
 <p>For example, if you make your own EDJ file and name a group <code>elm/button/base/default</code>:</p>
 <ul>
 <li>If you use the <code>elm_theme_overlay_add</code> function, the newly defined style is applied to a button object.</li>
 <li>If you use the <code>elm_theme_extension_add</code> function, the newly defined style is not applied, since there is a group with the same name in the default theme.</li>
 </ul>
- 
+
 <div class="note">
        <strong>Note</strong>
        When using the <code>elm_theme_extension_add()</code> or <code>elm_theme_overlay_add()</code> function to add a new theme extension or overlay to a theme object (the default theme), Elementary calls the <code>elm_theme_flush()</code> function to flush the Elementary theme caches. This means that the theme of all UI components that use the default theme is reloaded.
 </div>
- 
+
 <h3>Example: Creating a Customized Style for the Check Component</h3>
- 
+
 <p>An easy way to create a customized style is to copy one of the existing styles and modify some parts or programs. The following example shows how to define a custom style of the check component based on the default style. The aim is to update the background and the check images of the UI component with custom images.</p>
- 
-<p>When customizing a style, you need to respect the parts and signals in the default style. If something is missing, it can break the UI component&#39;s behavior. You can add new <code>SWALLOW</code> parts, if you want to control more content from the application. However, removing existing <code>SWALLOW</code> parts can change the UI component&#39;s behavior.</p>
- 
+
+<p>When customizing a style, you need to respect the parts and signals in the default style. If something is missing, it can break the UI component's behavior. You can add new <code>SWALLOW</code> parts, if you want to control more content from the application. However, removing existing <code>SWALLOW</code> parts can change the UI component's behavior.</p>
+
 <p>To create a customized check component style:</p>
 <ol>
 <li><p>Copy the group corresponding to the <code>default</code> style to a new file and rename the group to <code>custom</code> to create a new <code>custom</code> style:</p>
 <pre class="prettyprint">
 group
 {
-&nbsp;&nbsp;&nbsp;name: &quot;elm/check/base/custom&quot;;
-&nbsp;&nbsp;&nbsp;/* Copy of the content of &quot;default&quot; style */
+   name: "elm/check/base/custom";
+   /* Copy of the content of "default" style */
 }
 </pre>
 </li>
@@ -215,71 +215,71 @@ group
 <pre class="prettyprint">
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.offset: 1 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 16 16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 16 16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: VERTICAL;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;check_base.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill.smooth: 0;
-&nbsp;&nbsp;&nbsp;}
+   name: "bg";
+   mouse_events: 0;
+   scale: 1;
+   description
+   {
+      state: "default" 0.0;
+      rel1.offset: 1 1;
+      rel2.relative: 0.0 1.0;
+      rel2.offset: 1 -2;
+      align: 0.0 0.5;
+      min: 16 16;
+      max: 16 16;
+      aspect: 1.0 1.0;
+      aspect_preference: VERTICAL;
+      image
+      {
+         normal: "check_base.png";
+         border: 5 5 5 5;
+         middle: 0;
+      }
+      fill.smooth: 0;
+   }
 }
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
-&nbsp;&nbsp;&nbsp;mouse_events: 0;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -2 -2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;check.png&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;disabled_visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inherit: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 128 128 128 128;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;}
+   name: "check";
+   mouse_events: 0;
+   scale: 1;
+   description
+   {
+      state: "default" 0.0;
+      rel1
+      {
+         to: "bg";
+         offset: 1 1;
+      }
+      rel2
+      {
+         to: "bg";
+         offset: -2 -2;
+      }
+      visible: 0;
+      color: 255 255 255 255;
+      image.normal: "check.png";
+   }
+   description
+   {
+      state: "visible" 0.0;
+      inherit: "default" 0.0;
+      visible: 1;
+   }
+   description
+   {
+      state: "disabled" 0.0;
+      inherit: "default" 0.0;
+      visible: 0;
+      color: 128 128 128 128;
+   }
+   description
+   {
+      state: "disabled_visible" 0.0;
+      inherit: "default" 0.0;
+      color: 128 128 128 128;
+      visible: 1;
+   }
 }
 </pre>
    </li>
@@ -294,40 +294,40 @@ part
        <strong>Note</strong>
        This example assumes that the custom images are the same size as the <code>default</code> images.
 </div>
-         
+
 <pre class="prettyprint">
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">normal: &quot;check_base_custom.png&quot;;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 5 5 5 5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   name: "bg";
+   description
+   {
+      state: "default" 0.0;
+      image
+      {
+         <span class="highlight">normal: "check_base_custom.png";</span>
+         border: 5 5 5 5;
+         middle: 0;
+      }
+   }
 }
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;check&quot;;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">image.normal: &quot;check_custom.png&quot;;</span>
-&nbsp;&nbsp;&nbsp;}
+   name: "check";
+   description
+   {
+      state: "default" 0.0;
+      <span class="highlight">image.normal: "check_custom.png";</span>
+   }
 }
 </pre>
 </li>
 </ol>
-  
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/component_datetime_mn.htm b/org.tizen.guides/html/native/ui/efl/component_datetime_mn.htm
index ef2cb8e..44cd6fc 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_datetime_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_datetime_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Datetime</title>  
+       <title>Datetime</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -46,28 +46,28 @@
 
 <p>The datetime UI component displays date and time values. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Datetime.html">Datetime</a> API.</p>
  <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a datetime component in your application:</p>
  <ol>
    <li>Add a datetime component with the <code>elm_datetime_add()</code> function:
 <pre class="prettyprint">
 Evas_Object *datetime;
- 
+
 datetime = elm_datetime_add(parent);
 </pre>
 </li>
-<li>Set a <a href="#style">style</a> and format. The datetime format is a combination of LIBC standard characters, such as &quot;%d %b %Y %I : %M %M&quot;. For more information about the format characters, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Datetime.html">Datetime</a> API.
+<li>Set a <a href="#style">style</a> and format. The datetime format is a combination of LIBC standard characters, such as "%d %b %Y %I : %M %M". For more information about the format characters, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Datetime.html">Datetime</a> API.
   <ul>
  <li>Set a style to the datetime component with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
 <pre class="prettyprint">
-elm_object_style_set(datetime, &quot;date_layout&quot;);
+elm_object_style_set(datetime, "date_layout");
 </pre>
         </li>
         <li>Set a format using the <code>elm_datetime_format_set()</code> function:
 <pre class="prettyprint">
-elm_datetime_format_set(datetime, &quot;%d%b%Y&quot;);
+elm_datetime_format_set(datetime, "%d%b%Y");
 </pre>
         </li>
   </ul>
@@ -76,19 +76,19 @@ elm_datetime_format_set(datetime, &quot;%d%b%Y&quot;);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(datetime, &quot;changed&quot;, changed_cb, data);
+evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
 
 void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Datetime value changed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Datetime value changed\n");
 }
 </pre>
 </li>
 </ol>
 
 <p>The following example shows a simple use case of the datetime component.</p>
- 
+
    <p align="center" class="Table"><strong>Example: Datetime use case</strong></p>
 <table border="0">
 
@@ -110,15 +110,15 @@ struct tm *time_info;
 /* Add a box to contain a datetime and push the box into the naviframe */
 box = elm_box_add(nf);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Datetime&quot;, NULL, NULL, box, NULL);
- 
+elm_naviframe_item_push(nf, "Datetime", NULL, NULL, box, NULL);
+
 /* Add a datetime and set a style */
 datetime = elm_datetime_add(box);
 evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, EVAS_HINT_FILL);
-elm_object_style_set(datetime, &quot;date_layout&quot;);
+elm_object_style_set(datetime, "date_layout");
 
 /* Set a format for datetime */
-elm_datetime_format_set(datetime, &quot;%d/%b/%Y&quot;);
+elm_datetime_format_set(datetime, "%d/%b/%Y");
 
 /* Get a current local time to set as datetime value */
 time(NULL);
@@ -135,9 +135,9 @@ elm_box_pack_end(box, datetime);
       </tr>
    </tbody>
 </table>
- 
+
 <h2 id="feature">Options</h2>
- 
+
  <p>You can set value ranges for the datetime component:</p>
  <ul>
  <li>Set minimum and maximum values.
@@ -150,12 +150,12 @@ elm_box_pack_end(box, datetime);
    <li><code>Hour</code>: Default value is in terms of the 24-hour format (0~23).</li>
    <li><code>Minute</code>: Default value range is from 0 to 59.</li>
 </ul>
- 
+
 <p>To set the maximum time for the datetime component:</p>
 <pre class="prettyprint">
 elm_datetime_value_max_set(datetime, tm);
 </pre>
- 
+
 <p>To set the minimum time for the datetime component:</p>
 <pre class="prettyprint">
 elm_datetime_value_min_set(datetime, tm);
@@ -171,7 +171,7 @@ elm_datetime_value_min_set(datetime, tm);
    <li><code>ELM_DATETIME_MINUTE</code>: Indicates the minute field.</li>
    <li><code>ELM_DATETIME_AMPM</code>: Indicates the AM/PM field.</li>
 </ul>
- 
+
 <p>To set a value range for a specific field:</p>
 <pre class="prettyprint">
 elm_datetime_field_limit_set(datetime, ELM_DATETIME_DATE, 10, 20);
@@ -210,7 +210,7 @@ elm_datetime_field_limit_set(datetime, ELM_DATETIME_DATE, 10, 20);
 <div class="note">
        <strong>Note</strong>
        Pay attention to the following UX issue since Tizen 2.3:
- 
+
 <p>The <code>time_layout</code> and <code>time_layout_24hr</code> styles need a full-length format that includes the year, month, day, hour, minute, and AM/PM. Each style shows specific fields from the format, limited by the UX concept:</p>
 
 <ul>
@@ -227,12 +227,12 @@ elm_datetime_field_limit_set(datetime, ELM_DATETIME_DATE, 10, 20);
 <p>You can register callback functions connected to the following signals for a datetime object.</p>
 
 <table border="1">
-   <p align="center" class="Table"><strong>Table: Datetime callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Datetime callback signals</strong></p>
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>changed</code></td>
@@ -244,14 +244,14 @@ elm_datetime_field_limit_set(datetime, ELM_DATETIME_DATE, 10, 20);
          <td>The system locale changes.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
- 
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
@@ -266,7 +266,7 @@ elm_datetime_field_limit_set(datetime, ELM_DATETIME_DATE, 10, 20);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_datetime_wn.htm b/org.tizen.guides/html/native/ui/efl/component_datetime_wn.htm
index 929e910..e5627d4 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_datetime_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_datetime_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Datetime</title>  
+       <title>Datetime</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -36,10 +36,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                          
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Datetime</h1>
@@ -50,11 +50,11 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Datetime.html">Datetime</a> API.</p>
 
-<p align="center"><strong>Figure: Datetime component</strong></p> 
-<p align="center"><img alt="Datetime component" src="../../../images/datetime_wn.png" /> </p> 
- 
-<p align="center"><strong>Figure: Datetime hierarchy</strong></p> 
-<p align="center"> <img alt="Datetime hierarchy" src="../../../images/datetime_tree.png" /> </p> 
+<p align="center"><strong>Figure: Datetime component</strong></p>
+<p align="center"><img alt="Datetime component" src="../../../images/datetime_wn.png" /> </p>
+
+<p align="center"><strong>Figure: Datetime hierarchy</strong></p>
+<p align="center"> <img alt="Datetime hierarchy" src="../../../images/datetime_tree.png" /> </p>
 
 <h2 id="add">Adding a Datetime Component</h2>
 
@@ -86,17 +86,17 @@
 
 <p>To set the style to, for example, <code>datepicker_layout</code>:</p>
 <pre class="prettyprint">
-elm_object_style_set(datetime, &quot;datepicker_layout&quot;);
+elm_object_style_set(datetime, "datepicker_layout");
 </pre>
 
 <h2 id="set">Setting the Datetime Format</h2>
 
 <p>The date and time format can be configured with the <code>elm_datetime_format_set()</code> function using a combination of allowed Libc date format specifiers.</p>
-<p>To set the format to &quot;HH : MM&quot;:</p>
+<p>To set the format to "HH : MM":</p>
 
 <pre class="prettyprint">
-elm_object_style_set(datetime, &quot;timepicker_layout&quot;);
-elm_datetime_format_set(datetime, &quot;%d/%b/%Y%I:%M&quot;);
+elm_object_style_set(datetime, "timepicker_layout");
+elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M");
 </pre>
 
 <p>For a complete list of available specifiers, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Datetime.html">Datetime</a> API.</p>
@@ -107,30 +107,30 @@ elm_datetime_format_set(datetime, &quot;%d/%b/%Y%I:%M&quot;);
 <ul>
 <li><code>changed</code>: The datetime field values are changed.</li>
 <li><code>language,changed</code>: The system locale changes.</li>
-</ul> 
+</ul>
 
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
- 
+
 <p>In both these signals, the <code>event_info</code> callback parameter is <code>NULL</code>.</p>
 
 <p>To register and define a callback for the <code>changed</code> signal:</p>
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(datetime, &quot;changed&quot;, changed_cb, data);
+    evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
 }
 
-/* Callback for the &quot;changed&quot; signal */
+/* Callback for the "changed" signal */
 /* Called when the datetime fields change */
 void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Datetime field changed. \n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
 }</pre>
- 
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
@@ -145,8 +145,8 @@ changed_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
- 
+</div>
+
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/component_entry_mn.htm b/org.tizen.guides/html/native/ui/efl/component_entry_mn.htm
index 542867b..102ddee 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_entry_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_entry_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Entry</title>  
+       <title>Entry</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -38,10 +38,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Entry</h1>
@@ -57,17 +57,17 @@
    <li>Read/write from a file</li>
    <li>Theme style overrides</li>
   </ul>
-   
+
 <p>The entry component includes an Evas <a href="../../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Textblock.html">Textblock</a> in it, which means that it supports the features of the textblock component, such as text wrapping and formatted markup text.</p>
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Entry.html">Entry</a> API.</p>
-   
-<p align="center"><strong>Figure: Entry component</strong></p> 
-<p align="center"> <img alt="Entry component" width="220" src="../../../images/entry.png" /> <img alt="Entry component" width="220" src="../../../images/entry2.png" /> </p> 
- 
-<p align="center"><strong>Figure: Entry hierarchy</strong></p> 
-<p align="center"> <img alt="Entry hierarchy" src="../../../images/entry_tree.png" /> </p>    
-   
+
+<p align="center"><strong>Figure: Entry component</strong></p>
+<p align="center"> <img alt="Entry component" width="220" src="../../../images/entry.png" /> <img alt="Entry component" width="220" src="../../../images/entry2.png" /> </p>
+
+<p align="center"><strong>Figure: Entry hierarchy</strong></p>
+<p align="center"> <img alt="Entry hierarchy" src="../../../images/entry_tree.png" /> </p>
+
 <h2 id="add">Adding an Entry Component</h2>
 
 <p>To create an entry component, use the <code>elm_entry_add()</code> function. You can set the text inside it with the <code>elm_entry_entry_set()</code> function.</p>
@@ -77,7 +77,7 @@ Evas_Object *entry;
 Evas_Object *parent;
 
 entry = elm_entry_add(parent);
-elm_entry_entry_set(entry, &quot;A short text.&quot;);
+elm_entry_entry_set(entry, "A short text.");
 </pre>
 
 <h2 id="editor">Managing the Text</h2>
@@ -90,13 +90,13 @@ Add text to the entry:
 <ul><li>Append text to the end of the existing content:
 
 <pre class="prettyprint">
-elm_entry_entry_append(entry, &quot;END&quot;);
+elm_entry_entry_append(entry, "END");
 </pre>
 </li>
 <li>
 <p>Insert text at the current cursor position:</p>
 <pre class="prettyprint">
-elm_entry_entry_insert(entry, &quot;CURSOR&quot;);
+elm_entry_entry_insert(entry, "CURSOR");
 </pre>
 </li></ul></li>
 <li>
@@ -150,8 +150,8 @@ elm_entry_selection_paste(entry);
 static Elm_Entry_Filter_Limit_Size
 limit_size =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;.max_char_count = 8,
-&nbsp;&nbsp;&nbsp;&nbsp;.max_byte_count = 0
+    .max_char_count = 8,
+    .max_byte_count = 0
 };
 
 /*
@@ -164,13 +164,13 @@ elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, &amp;limit_si
 </pre></li>
 
 <li>To define a list of accepted or rejected characters, append the filter with the <code>Elm_Entry_Filter_Accept_Set</code> structure.
-<p>The following example shows how to reject the &#39;+&#39;, &#39;-&#39;, &#39;*&#39;, and &#39;/&#39; characters:</p>
+<p>The following example shows how to reject the '+', '-', '*', and '/' characters:</p>
 <pre class="prettyprint">
 static Elm_Entry_Filter_Accept_Set
 accept_set =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;.accepted = NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;.rejected = &quot;+*-/&quot;
+    .accepted = NULL,
+    .rejected = "+*-/"
 };
 
 elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, &amp;accept_set);
@@ -184,7 +184,7 @@ elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, &amp;accept_s
 <pre class="prettyprint">
 /* Set the file in which the entry text is saved */
 /* Implicitly load the existing file content */
-elm_entry_file_set(entry, &quot;/tmp/test.txt&quot;, ELM_TEXT_FORMAT_MARKUP_UTF8);
+elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
 </pre>
 
 <p>You can also deactivate the automatic saving feature and explicitly save the content when needed:</p>
@@ -234,18 +234,18 @@ elm_entry_cursor_pos_set(entry, 15);
 </pre>
 </li>
 
-<li>Make a text selection while moving the cursor. 
+<li>Make a text selection while moving the cursor.
 <p>The following example starts a selection at the current cursor position, moves 5 characters right, and ends the selection:</p>
 
 <pre class="prettyprint">
 elm_entry_cursor_selection_begin(entry);
 
 for (i = 0; i &lt; 5; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;elm_entry_cursor_next(entry);
+    elm_entry_cursor_next(entry);
 
 elm_entry_cursor_selection_end(entry);
 </pre></li></ul>
- 
+
 <h2 id="configure">Configuring the Entry</h2>
 
 <p>To configure the entry functionality:</p>
@@ -325,23 +325,23 @@ elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
 static Evas_Object*
 item_provider(void *images EINA_UNUSED, Evas_Object *en, const char *item)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *o = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[1024];
+    Evas_Object *o = NULL;
+    char buf[1024];
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(item, &quot;itemprovider&quot;)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s/tizen.png&quot;, ICON_DIR);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;o = evas_object_image_filled_add(evas_object_evas_get(en));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(o, buf, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (!strcmp(item, "itemprovider")) {
+        snprintf(buf, sizeof(buf), "%s/tizen.png", ICON_DIR);
+        o = evas_object_image_filled_add(evas_object_evas_get(en));
+        evas_object_image_file_set(o, buf, NULL);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return o;
+    return o;
 }
 
 Evas_Object *entry;
 
 Entry = elm_entry_add(layout);
-elm_object_text_set(entry, &quot;Item Provider&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;item size=50x50 vsize=full href=itemprovider&gt;&lt;/item&gt;&quot;);
+elm_object_text_set(entry, "Item Provider"
+                    "&lt;item size=50x50 vsize=full href=itemprovider&gt;&lt;/item&gt;");
 elm_entry_item_provider_append(entry, item_provider, NULL);
 </pre></li>
   </ul>
@@ -354,14 +354,14 @@ Evas_Object *entry;
 
 Entry = elm_entry_add(layout);
 elm_entry_text_style_user_push(entry,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DEFAULT=&#39;font=Tizen:style=Light
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size=50 color=#00f align=center&#39;&quot;);
+                               "DEFAULT='font=Tizen:style=Light
+                                         font_size=50 color=#00f align=center'");
 </pre>
 
 <p>The <code>DEFAULT</code> element sets the style properties to a default style that is applied to the complete text. For more information on style properties, such as font, font size, and color, see <a href="evas_objects_n.htm#block">Textblock Objects</a>.</p>
 
-<p align="center"><strong>Figure: Overriding style</strong></p> 
-<p align="center"> <img alt="Overriding style" src="../../../images/entry_style.png" /> </p> 
+<p align="center"><strong>Figure: Overriding style</strong></p>
+<p align="center"> <img alt="Overriding style" src="../../../images/entry_style.png" /> </p>
 </li>
 <li>Modify the content and text parts of the default theme:
 <ul>
@@ -371,14 +371,14 @@ elm_entry_text_style_user_push(entry,
 Evas_Object *icon;
 
 ic = elm_icon_add(entry);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(entry, &quot;end&quot;, icon);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(entry, "end", icon);
 </pre></li>
 <li>You can modify 2 text parts of the default theme: <code>default</code> (entry text) and <code>guide</code> (entry placeholder).
 <p>The following example shows how to set the placeholder text to <code>Hello World</code>:</p>
 
 <pre class="prettyprint">
-elm_object_part_text_set(entry, &quot;guide&quot;, &quot;Hello World&quot;);
+elm_object_part_text_set(entry, "guide", "Hello World");
 </pre></li></ul></li></ul>
 
 
@@ -429,7 +429,7 @@ elm_entry_input_panel_return_key_type_set(entry, ELM_INPUT_PANEL_RETURN_KEY_TYPE
  <tr>
  <td><code>elm/entry/base/default</code></td>
  <td align="center"><img alt="elm/entry/base/default" src="../../../images/entry_default.png" /></td>
- <td><code>elm.guide</code>: for the guide text 
+ <td><code>elm.guide</code>: for the guide text
  <p><code>elm.text</code>: for the main text</p></td>
  <td>The guide text is automatically erased when the main text is entered.</td>
  </tr>
@@ -440,13 +440,13 @@ elm_entry_input_panel_return_key_type_set(entry, ELM_INPUT_PANEL_RETURN_KEY_TYPE
 
 <p>You can register callback functions connected to the following signals for an entry object.</p>
 
-   <p align="center" class="Table"><strong>Table: Entry callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Entry callback signals</strong></p>
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>aborted</code></td>
@@ -465,7 +465,7 @@ elm_entry_input_panel_return_key_type_set(entry, ELM_INPUT_PANEL_RETURN_KEY_TYPE
       </tr>
       <tr>
          <td><code>anchor,down</code></td>
-         <td>The mouse button is pressed on an anchor.</td> 
+         <td>The mouse button is pressed on an anchor.</td>
          <td><code>Elm_Entry_Anchor_Info</code> object</td>
       </tr>
       <tr>
@@ -475,7 +475,7 @@ elm_entry_input_panel_return_key_type_set(entry, ELM_INPUT_PANEL_RETURN_KEY_TYPE
       </tr>
       <tr>
          <td><code>anchor,in</code></td>
-         <td>The mouse cursor is moved into an anchor.</td> 
+         <td>The mouse cursor is moved into an anchor.</td>
          <td><code>Elm_Entry_Anchor_Info</code> object</td>
       </tr>
       <tr>
@@ -485,7 +485,7 @@ elm_entry_input_panel_return_key_type_set(entry, ELM_INPUT_PANEL_RETURN_KEY_TYPE
       </tr>
       <tr>
          <td><code>anchor,up</code></td>
-         <td>The mouse button is released on an anchor.</td> 
+         <td>The mouse button is released on an anchor.</td>
          <td><code>Elm_Entry_Anchor_Info</code> object</td>
       </tr>
       <tr>
@@ -495,7 +495,7 @@ elm_entry_input_panel_return_key_type_set(entry, ELM_INPUT_PANEL_RETURN_KEY_TYPE
       </tr>
       <tr>
          <td><code>changed,user</code></td>
-         <td>The text within the entry is changed because of user interaction.</td> 
+         <td>The text within the entry is changed because of user interaction.</td>
          <td><code>Edje_Entry_Change_Info</code> object</td>
       </tr>
       <tr>
@@ -608,26 +608,26 @@ elm_entry_input_panel_return_key_type_set(entry, ELM_INPUT_PANEL_RETURN_KEY_TYPE
          <td>The request is undone.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
- 
+
 <p>The following example shows how to define and register a callback for the <code>focused</code> signal:</p>
 
 <pre class="prettyprint">
-evas_object_smart_callback_add(entry, &quot;focused&quot;, focused_cb, data);
+evas_object_smart_callback_add(entry, "focused", focused_cb, data);
 
-/* Callback for the &quot;focused&quot; signal */
+/* Callback for the "focused" signal */
 /* Called when the entry receives the focus */
 void
 focused_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Entry focused\n&quot;);
-} 
+    dlog_print(DLOG_INFO, LOG_TAG, "Entry focused\n");
+}
 </pre>
 
 <div class="note">
@@ -644,7 +644,7 @@ focused_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_entry_wn.htm b/org.tizen.guides/html/native/ui/efl/component_entry_wn.htm
index e180777..f261994 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_entry_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_entry_wn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -58,17 +58,17 @@
    <li>Theme style overrides</li>
   </ul>
 
-<p>The entry component includes an Evas <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Textblock.html">Textblock</a> in it, which means that it supports the features of the textblock component, such as text wrapping and formatted markup text.</p>  
-  
+<p>The entry component includes an Evas <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Textblock.html">Textblock</a> in it, which means that it supports the features of the textblock component, such as text wrapping and formatted markup text.</p>
+
   <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Entry.html">Entry</a> API.</p>
 
 <p align="center"><strong>Figure: Entry component</strong></p>
 <p align="center"><img alt="Entry component" src="../../../images/entry_wn.png" /> </p>
- 
+
 <p align="center"><strong>Figure: Entry hierarchy</strong></p>
 <p align="center"><img alt="Entry hierarchy" src="../../../images/entry_tree.png" /> </p>
-  
-  
+
+
 <h2 id="add">Adding an Entry Component</h2>
 
 <p>To create an entry component, use the <code>elm_entry_add()</code> function. You can set the text inside it with the <code>elm_entry_entry_set()</code> function.</p>
@@ -78,7 +78,7 @@ Evas_Object *entry;
 Evas_Object *parent;
 
 entry = elm_entry_add(parent);
-elm_entry_entry_set(entry, &quot;A short text.&quot;);
+elm_entry_entry_set(entry, "A short text.");
 </pre>
 
 <h2 id="editor">Managing the Text</h2>
@@ -91,13 +91,13 @@ Add text to the entry:
 <ul><li>Append text to the end of the existing content:
 
 <pre class="prettyprint">
-elm_entry_entry_append(entry, &quot;END&quot;);
+elm_entry_entry_append(entry, "END");
 </pre>
 </li>
 <li>
 <p>Insert text at the current cursor position:</p>
 <pre class="prettyprint">
-elm_entry_entry_insert(entry, &quot;CURSOR&quot;);
+elm_entry_entry_insert(entry, "CURSOR");
 </pre>
 </li></ul></li>
 <li>
@@ -151,8 +151,8 @@ elm_entry_selection_paste(entry);
 static Elm_Entry_Filter_Limit_Size
 limit_size =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;.max_char_count = 8,
-&nbsp;&nbsp;&nbsp;&nbsp;.max_byte_count = 0
+    .max_char_count = 8,
+    .max_byte_count = 0
 };
 
 /*
@@ -165,13 +165,13 @@ elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, &amp;limit_si
 </pre></li>
 
 <li>To define a list of accepted or rejected characters, append the filter with the <code>Elm_Entry_Filter_Accept_Set</code> structure.
-<p>The following example shows how to reject the &#39;+&#39;, &#39;-&#39;, &#39;*&#39;, and &#39;/&#39; characters:</p>
+<p>The following example shows how to reject the '+', '-', '*', and '/' characters:</p>
 <pre class="prettyprint">
 static Elm_Entry_Filter_Accept_Set
 accept_set =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;.accepted = NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;.rejected = &quot;+*-/&quot;
+    .accepted = NULL,
+    .rejected = "+*-/"
 };
 
 elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, &amp;accept_set);
@@ -185,7 +185,7 @@ elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, &amp;accept_s
 <pre class="prettyprint">
 /* Set the file in which the entry text is saved */
 /* Implicitly load the existing file content */
-elm_entry_file_set(entry, &quot;/tmp/test.txt&quot;, ELM_TEXT_FORMAT_MARKUP_UTF8);
+elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
 </pre>
 
 <p>You can also deactivate the automatic saving feature and explicitly save the content when needed:</p>
@@ -235,18 +235,18 @@ elm_entry_cursor_pos_set(entry, 15);
 </pre>
 </li>
 
-<li>Make a text selection while moving the cursor. 
+<li>Make a text selection while moving the cursor.
 <p>The following example starts a selection at the current cursor position, moves 5 characters right, and ends the selection:</p>
 
 <pre class="prettyprint">
 elm_entry_cursor_selection_begin(entry);
 
 for (i = 0; i &lt; 5; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;elm_entry_cursor_next(entry);
+    elm_entry_cursor_next(entry);
 
 elm_entry_cursor_selection_end(entry);
 </pre></li></ul>
- 
+
 <h2 id="configure">Configuring the Entry</h2>
 
 <p>To configure the entry functionality:</p>
@@ -333,14 +333,14 @@ elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
 Evas_Object *icon;
 
 ic = elm_icon_add(entry);
-elm_image_file_set(ic, &quot;icon.png&quot;, NULL);
-elm_object_part_content_set(entry, &quot;end&quot;, icon);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(entry, "end", icon);
 </pre></li>
 <li>You can modify 2 text parts of the default theme: <code>elm.text</code> (entry text) and <code>elm.guide</code> (entry placeholder).
 <p>The following example shows how to set the placeholder text to <code>Hello World</code>:</p>
 
 <pre class="prettyprint">
-elm_object_part_text_set(entry, &quot;elm.guide&quot;, &quot;Hello World&quot;);
+elm_object_part_text_set(entry, "elm.guide", "Hello World");
 </pre></li></ul></li></ul>
 
 <h2 id="callback">Using the Entry Callbacks</h2>
@@ -349,27 +349,27 @@ elm_object_part_text_set(entry, &quot;elm.guide&quot;, &quot;Hello World&quot;);
   <ul>
    <li><code>aborted</code>: The <strong>Escape</strong> key is pressed on a single line entry.</li>
    <li><code>activated</code>: The <strong>Enter</strong> key is pressed on a single line entry.</li>
-   <li><code>anchor,clicked</code>: An anchor is clicked. 
+   <li><code>anchor,clicked</code>: An anchor is clicked.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
-   <li><code>anchor,down</code>: The mouse button is pressed on an anchor. 
+   <li><code>anchor,down</code>: The mouse button is pressed on an anchor.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
-   <li><code>anchor,hover,opened</code>: The anchor is clicked. 
+   <li><code>anchor,hover,opened</code>: The anchor is clicked.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
-   <li><code>anchor,in</code>: The mouse cursor is moved into an anchor. 
+   <li><code>anchor,in</code>: The mouse cursor is moved into an anchor.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
-   <li><code>anchor,out</code>: The mouse cursor is moved out of an anchor. 
+   <li><code>anchor,out</code>: The mouse cursor is moved out of an anchor.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
-   <li><code>anchor,up</code>: The mouse button is released on an anchor. 
+   <li><code>anchor,up</code>: The mouse button is released on an anchor.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Entry_Anchor_Info</code> object.</p></li>
    <li><code>changed</code>: The text within the entry is changed.</li>
-   <li><code>changed,user</code>: The text within the entry is changed because of user interaction. 
+   <li><code>changed,user</code>: The text within the entry is changed because of user interaction.
    <p>The <code>event_info</code> callback parameter points to an <code>Edje_Entry_Change_Info</code> object.</p></li>
    <li><code>clicked</code>: The entry is clicked (mouse press and release).</li>
    <li><code>clicked,double</code>: The entry is double-clicked.</li>
    <li><code>clicked,triple</code>: The entry is triple-clicked.</li>
    <li><code>cursor,changed</code>: The cursor position is changed.</li>
    <li><code>cursor,changed,manual</code>: The cursor position is changed manually.</li>
-   <li><code>focused</code>: The entry receives focus. 
+   <li><code>focused</code>: The entry receives focus.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Focus_Info</code> object.</p></li>
    <li><code>unfocused</code>: The entry loses focus.</li>
    <li><code>language,changed</code>: The program language is changed.</li>
@@ -388,7 +388,7 @@ elm_object_part_text_set(entry, &quot;elm.guide&quot;, &quot;Hello World&quot;);
    <li><code>theme,changed</code>: The theme is changed.</li>
    <li><code>undo,request</code>: The request is undone.</li>
   </ul>
-  
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -400,16 +400,16 @@ elm_object_part_text_set(entry, &quot;elm.guide&quot;, &quot;Hello World&quot;);
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(entry, &quot;focused&quot;, focused_cb, data);
+    evas_object_smart_callback_add(entry, "focused", focused_cb, data);
 }
 
-/* Callback for the &quot;focused&quot; signal */
+/* Callback for the "focused" signal */
 /* Called when the entry receives the focus */
 void
 focused_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Entry focused\n&quot;);
-} 
+    dlog_print(DLOG_INFO, LOG_TAG, "Entry focused\n");
+}
 </pre>
 
 <div class="note">
@@ -426,7 +426,7 @@ focused_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_flip_mn.htm b/org.tizen.guides/html/native/ui/efl/component_flip_mn.htm
index 9b85dd6..1c65947 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_flip_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_flip_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Flip</title>  
+       <title>Flip</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,10 +34,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Flip</h1>
@@ -46,12 +46,12 @@
 
 <p>The flip UI component is used for a transition effect, which can hold 2 <code>Evas_Objects</code> and  flip between them using several predefined animations. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Flip.html">Flip</a> API.</p>
  <p>This feature is supported in mobile applications only.</p>
- 
- <p align="center"><strong>Figure: Flip hierarchy</strong></p> 
- <p align="center"> <img alt="Flip hierarchy" src="../../../images/flip_tree.png" /> </p> 
- 
+
+ <p align="center"><strong>Figure: Flip hierarchy</strong></p>
+ <p align="center"> <img alt="Flip hierarchy" src="../../../images/flip_tree.png" /> </p>
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a flip component in your application:</p>
 <ol>
   <li>Add a flip with the <code>elm_flip_add()</code> function:
@@ -63,8 +63,8 @@ flip = elm_flip_add(parent);
    </li>
    <li>Add content to the flip using the <code>elm_object_part_content_set()</code> function. Use the <code>front</code> and <code>back</code> part names to define the 2 <code>Evas_Objects</code> used as content:
 <pre class="prettyprint">
-elm_object_part_content_set(flip, &quot;front&quot;, content1);
-elm_object_part_content_set(flip, &quot;back&quot;, content2);
+elm_object_part_content_set(flip, "front", content1);
+elm_object_part_content_set(flip, "back", content2);
 </pre>
    </li>
    <li>Run a flip animation using the <code>elm_flip_go()</code> function. The <code>ELM_FLIP_CUBE_UP</code> animation mode flips up the <code>front</code> content object as if it was on a side of a cube, letting the down facing side of the cube appear with the <code>back</code> content object. For a complete list of animation modes, see <a href="../../../../../org.tizen.native.mobile.apireference/group__Flip.html#ga24518d66196b5b634a207fd02e09250e">elm_flip_go() Remarks</a>.
@@ -76,12 +76,12 @@ elm_flip_go(flip, ELM_FLIP_CUBE_UP);
    <p>The following example shows how to define and register a callback for the <code>animate,begin</code> signal.</p>
 
 <pre class="prettyprint">
-evas_object_smart_callback_add(entry, &quot;animate,begin&quot;, anim_start_cb, data);
+evas_object_smart_callback_add(entry, "animate,begin", anim_start_cb, data);
 
 void
 anim_start_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Animation starts\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Animation starts\n");
 }</pre>
 </li>
 </ol>
@@ -126,9 +126,9 @@ elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
    <p align="center" class="Table"><strong>Table: Flip callback signals</strong></p>
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>animate,begin</code></td>
@@ -140,9 +140,9 @@ elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
          <td>The flip animation is finished.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -162,7 +162,7 @@ elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_flipselector_mn.htm b/org.tizen.guides/html/native/ui/efl/component_flipselector_mn.htm
index ef5766f..7be274c 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_flipselector_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_flipselector_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Flipselector</title>  
+       <title>Flipselector</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -38,7 +38,7 @@
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Flipselector</h1>
@@ -46,9 +46,9 @@
 
 <p>The flipselector UI component has a set of text items and flips up or down the selector to change the text on it. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Flipselector.html">Flipselector</a> API.</p>
    <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a flipselector component in your application:</p>
 <ol>
    <li>Add a flipselector with the <code>elm_flipselector_add()</code> function:
@@ -63,37 +63,37 @@ flipsel = elm_flipselector_add(parent);
 Elm_Object_Item *flip_it;
 
 flip_it = elm_flipselector_item_append(flipsel,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;99&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it_select_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+                                       "99",
+                                       it_select_cb,
+                                       NULL);
 
 /* Called when the flip_it object is selected */
-void 
+void
 it_select_cb(void *data, Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *event_info)
+             void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;flip_it selected\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG,
+               "flip_it selected\n");
 }
 </pre>
 </li>
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>selected</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(flipsel, &quot;selected&quot;, _flip_selected_cb, NULL);
+evas_object_smart_callback_add(flipsel, "selected", _flip_selected_cb, NULL);
 
 static void
 _flip_selected_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *flip_it = event_info;
+    Elm_Object_Item *flip_it = event_info;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Code that does the desired action */
+    /* Code that does the desired action */
 }
 </pre>
 </li>
 </ol>
 <p>The following example shows a simple use case of the flipselector component.</p>
-   <p align="center" class="Table"><strong>Example: Flipselector use case</strong></p> 
+   <p align="center" class="Table"><strong>Example: Flipselector use case</strong></p>
 <table border="0">
    <tbody>
       <tr>
@@ -113,16 +113,16 @@ int i;
 flipsel = elm_flipselector_add(nf);
 
 for (i = 0; i &lt;= 99; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, 8, &quot;%u&quot;, i);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_flipselector_item_append(flipsel, buf, flipselector_item_select_cb, NULL);
+    snprintf(buf, 8, "%u", i);
+    elm_flipselector_item_append(flipsel, buf, flipselector_item_select_cb, NULL);
 }
-elm_naviframe_item_push(nf, &quot;Flipselector&quot;, NULL, NULL, flipsel, NULL);
+elm_naviframe_item_push(nf, "Flipselector", NULL, NULL, flipsel, NULL);
 
-void 
+void
 flipselector_item_select_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;label of selected item is: %s\n&quot;, elm_object_item_text_get(it));
+    Elm_Object_Item *it = event_info;
+    printf("label of selected item is: %s\n", elm_object_item_text_get(it));
 }
 </pre>
          </td>
@@ -197,30 +197,30 @@ elm_flipselector_item_selected_set(flip_it, EINA_TRUE);
 
 <p>You can register callback functions connected to the following signals for a flipselector object.</p>
 
-   <p align="center" class="Table"><strong>Table: Flipselector callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Flipselector callback signals</strong></p>
 <table>
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>selected</code></td>
-         <td>The flipselector&#39;s selected text item changes.</td>
+         <td>The flipselector's selected text item changes.</td>
          <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>overflowed</code></td>
-         <td>The flipselector&#39;s current selection changes from the first item to the last one.</td>
+         <td>The flipselector's current selection changes from the first item to the last one.</td>
          <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>underflowed</code></td>
-         <td>The flipselector&#39;s current selection changes from the last item to the first one.</td>
+         <td>The flipselector's current selection changes from the last item to the first one.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
 
 <div class="note">
@@ -242,7 +242,7 @@ elm_flipselector_item_selected_set(flip_it, EINA_TRUE);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_focus_n.htm b/org.tizen.guides/html/native/ui/efl/component_focus_n.htm
index b82aafd..5226353 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_focus_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_focus_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Managing UI Component Focus</title> 
- </head> 
+  <title>Managing UI Component Focus</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
        <ul class="toc">
@@ -29,19 +29,19 @@
                <ul class="toc">
                                <li><a href="#Focusable">Focusable Objects</a></li>
                                <li><a href="#Movement">Focus Chain</a></li>
-               </ul>   
+               </ul>
        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
   <h1>Managing UI Component Focus</h1>
-  
+
 
 <p>Focus is a common UI concept, which refers to the state of the currently selected or otherwise active UI component on the screen. A UI component is <strong>focused</strong> when it is selected to receive an input event, such as a mouse button click or key press, from the user. A UI component application has, at all times, only 1 focused object to determine where the input event goes to within the application window.</p>
 
@@ -50,7 +50,7 @@
 <p>There are 2 main ways to set focus on a graphical element:</p>
 
 <ul>
-<li>Direct (immediate) selection 
+<li>Direct (immediate) selection
 <p>The user performs this selection by clicking an element using the touch screen or mouse.</p>
 <p>Direct selection does not really need any kind of special treatment, as the user explicitly selects the UI component to interact with.</p></li>
 <li>Relative selection
@@ -66,9 +66,9 @@
 <li>Object is enabled</li>
 <li>Object accepts focus
 <p>To set an object as focusable, or to determine whether the object is focusable, use the <code>elm_object_focus_allow_set()</code> and <code>elm_object_focus_allow_get()</code> functions.</p></li>
-<li>Object&#39;s subtree (if any) is focusable
+<li>Object's subtree (if any) is focusable
 <p>To set an object and its children as focusable, or to determine whether the object and its children are focusable, use the <code>elm_object_tree_focus_allow_set()</code> and <code>elm_object_tree_focus_allow_get()</code> functions.</p></li>
-<li>All of the subtrees in the object&#39;s parents are focusable</li>
+<li>All of the subtrees in the object's parents are focusable</li>
 </ul>
 
 <p>If any of these conditions do not apply, the object is unfocusable.</p>
@@ -89,7 +89,7 @@
 
 
 
-  
+
 <h2 id="Movement" name="Movement">Focus Chain</h2>
 
 <p>The order in which the focus moves from one UI component to another is called the focus chain. The default focus chain is the order in which the UI components have been added to the canvas.</p>
@@ -98,9 +98,9 @@
        <strong>Note</strong>
        If the components are added programmatically in a different order than they appear on the screen, the default focus chain can be quite confusing. In that case, you must customize the focus chain to make it work as expected.
 </div>
-  
-<p>When the user wants to switch the focus to the next object, Elementary searches the first focusable object in the focus chain. If there is a disabled or read-only object in the focus chain, the focus skips over it to the next object in the requested direction.</p> 
-  
+
+<p>When the user wants to switch the focus to the next object, Elementary searches the first focusable object in the focus chain. If there is a disabled or read-only object in the focus chain, the focus skips over it to the next object in the requested direction.</p>
+
 <p>When the focus is changed using key presses, Elementary handles the key presses automatically. According to which key is pressed, Elementary switches the focus to the selected direction. For example, if the user presses the <strong>Tab</strong> key, the focus moves to the next object in the natural (default focus chain) order. On the other hand, if the user presses the direction keys, the focus moves to the next object in the requested direction.</p>
 
 <h3 id="Customization" name="Customization">Customizing the Focus Chain</h3>
@@ -129,8 +129,8 @@
 
 <p>Get the next object in a specific direction using the <code>elm_object_focus_next_object_get()</code> function.</p>
 </li>
-<li>Customizing the entire application&#39;s focus chain
-<p>To customize the application&#39;s focus chain:</p>
+<li>Customizing the entire application's focus chain
+<p>To customize the application's focus chain:</p>
 
 <pre class="prettyprint">
 Evas_Object *main;
@@ -161,12 +161,12 @@ elm_object_focus_custom_chain_prepend(main, obj4, obj1);
 
 <div class="note">
        <strong>Note</strong>
-       The object-specific focus exit overrides the application&#39;s focus chain. This means that if an object is part of a focus chain and, in addition, has the next focused object defined, the next object takes precedence over the focus chain.
+       The object-specific focus exit overrides the application's focus chain. This means that if an object is part of a focus chain and, in addition, has the next focused object defined, the next object takes precedence over the focus chain.
         <p>Consider the above focus chain example: if <code>obj4</code> has <code>obj5</code> defined as its next object, the actual focus chain is <code>obj5, obj3, obj4, obj5</code> (the chain loops back to <code>obj5</code> after <code>obj4</code> instead of moving on the <code>obj1</code>, as defined in the application focus chain).</p>
 </div>
 
 <p>If an Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each UI component, as applicable.</p>
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/component_gengrid_mn.htm b/org.tizen.guides/html/native/ui/efl/component_gengrid_mn.htm
index 0141866..27572e0 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_gengrid_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_gengrid_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Gengrid</title>  
+       <title>Gengrid</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,22 +34,22 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Gengrid</h1>
 
 
- 
+
 <p>The gengrid UI component is based on the same idea as <a href="component_genlist_mn.htm">genlist</a>. It aims at displaying objects on a grid layout and rendering only the visible ones. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Gengrid.html">Gengrid</a> API.</p>
 <p>This feature is supported in mobile applications only.</p>
-<p>To save up memory and speed up processing when many items exist, the gengrid has the concept of &quot;realization&quot; when managing items. It means that a gengrid item creates its text and content when the user scrolls the grid and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <code>Elm_Gengrid_Item_Class</code> structure (gengrid item class) that informs the gengrid component which callbacks to call when an item is created or deleted. When the item is created, the text and content are retrieved by calling the <code>text_get</code> and <code>content_get</code> functions defined in the gengrid item class.</p>
+<p>To save up memory and speed up processing when many items exist, the gengrid has the concept of "realization" when managing items. It means that a gengrid item creates its text and content when the user scrolls the grid and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <code>Elm_Gengrid_Item_Class</code> structure (gengrid item class) that informs the gengrid component which callbacks to call when an item is created or deleted. When the item is created, the text and content are retrieved by calling the <code>text_get</code> and <code>content_get</code> functions defined in the gengrid item class.</p>
 
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a gengrid component in your application:</p>
 <ol>
 <li>Add a gengrid with the <code>elm_gengrid_add()</code> function:
@@ -66,7 +66,7 @@ gengrid = elm_gengrid_add(parent);
 <pre class="prettyprint">
 Elm_Gengrid_Item_Class *itc = elm_gengrid_item_class_new();
 
-itc-&gt;item_style = &quot;default&quot;; 
+itc-&gt;item_style = "default";
 itc-&gt;func.text_get = _item_label_get;
 itc-&gt;func.content_get = _item_content_get;
 itc-&gt;func.del = _item_del;
@@ -78,10 +78,10 @@ itc-&gt;func.del = _item_del;
 static char*
 _item_label_get(void *data, Evas_Object *obj, const char *part)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.text&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;text&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+    if (!strcmp(part, "elm.text"))
+        return strdup("text");
+    else
+        return NULL;
 }
 </pre>
 </li>
@@ -91,24 +91,24 @@ _item_label_get(void *data, Evas_Object *obj, const char *part)
 static Evas_Object*
 _item_content_get(void *data, Evas_Object *obj, const char *part)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.swallow.icon&quot;)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = elm_image_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_Set(img, &quot;sample.png&quot;, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return img;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-} 
+    if (!strcmp(part, "elm.swallow.icon")) {
+        Evas_Object *img = elm_image_add(obj);
+        elm_image_file_Set(img, "sample.png", NULL);
+
+        return img;
+    } else {
+        return NULL;
+    }
+}
 </pre>
 </li>
 <li>Define the <code>del</code> function.
-<p>This function is called when the gengrid item is deleted. It deletes any data that has been allocated at the item&#39;s creation.</p>
+<p>This function is called when the gengrid item is deleted. It deletes any data that has been allocated at the item's creation.</p>
 <pre class="prettyprint">
 static void
 _item_del(void *data, Evas_Object *obj)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;item(%d) is now deleted&quot;, (int) data);
+    printf("item(%d) is now deleted", (int) data);
 }
 </pre>
 </li>
@@ -117,10 +117,10 @@ _item_del(void *data, Evas_Object *obj)
 <li>Append items to the gengrid with the <code>elm_gengrid_item_append()</code> function.
 <pre class="prettyprint">
 elm_gengrid_item_append(gengrid, /* Gengrid object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itc, /* Gengrid item class */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)i, /* Item data */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_item_selected_cb, /* &quot;selected&quot; callback */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)i); /* Callback data */
+                        itc, /* Gengrid item class */
+                        (void *)i, /* Item data */
+                        _item_selected_cb, /* "selected" callback */
+                        (void *)i); /* Callback data */
 </pre>
 </li>
 <li>Register the <a href="#callback">callback</a> functions for the gengrid and its items.
@@ -129,7 +129,7 @@ elm_gengrid_item_append(gengrid, /* Gengrid object */
 static void
 _item_selected_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;item(%d) is selected&quot;, (int) data);
+    printf("item(%d) is selected", (int) data);
 }
 </pre>
 </li>
@@ -194,12 +194,12 @@ elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
 
 <p>To use the <code>popup</code> gengrid style with the <code>default</code> item style:</p>
 <pre class="prettyprint">
-elm_object_style_set(gengrid, &quot;popup&quot;);
-gic-&gt;item_style = &quot;default&quot;;
+elm_object_style_set(gengrid, "popup");
+gic-&gt;item_style = "default";
 </pre>
 
-<p align="center"><strong>Figure: Gengrid styles</strong></p> 
-<p align="center"> <img alt="Gengrid styles" src="../../../images/gengrid_styles.png" /> </p> 
+<p align="center"><strong>Figure: Gengrid styles</strong></p>
+<p align="center"> <img alt="Gengrid styles" src="../../../images/gengrid_styles.png" /> </p>
 
 <p>The following table provides further details of the available gengrid item styles.</p>
 <p align="center" class="Table"><strong>Table: Gengrid item styles</strong></p>
@@ -243,13 +243,13 @@ gic-&gt;item_style = &quot;default&quot;;
 
 <p>You can register callback functions connected to the following signals for a gengrid object.</p>
 
-   <p align="center" class="Table"><strong>Table: Gengrid callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Gengrid callback signals</strong></p>
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>activated</code></td>
@@ -304,51 +304,51 @@ gic-&gt;item_style = &quot;default&quot;;
       <tr>
          <td><code>drag,stop</code></td>
          <td>The item in the list has stopped being dragged.</td>
-         <td><code>Elm_Object_Item</code></td> 
+         <td><code>Elm_Object_Item</code></td>
       </tr>
       <tr>
          <td><code>drag</code></td>
          <td>The item in the list is being dragged.</td>
-         <td><code>Elm_Object_Item</code> object that contains the dragged item</td> 
+         <td><code>Elm_Object_Item</code> object that contains the dragged item</td>
       </tr>
       <tr>
          <td><code>scroll,drag,start</code></td>
          <td>Dragging the content is started.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>scroll,drag,stop</code></td>
-         <td>Dragging the content is stopped.</td> 
-         <td><code>NULL</code></td> 
+         <td>Dragging the content is stopped.</td>
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>scroll</code></td>
          <td>Scrolling is ongoing.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>edge,top</code></td>
          <td>The genlist is scrolled to the top edge.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>edge,bottom</code></td>
-         <td>The genlist is scrolled to the bottom edge.</td> 
-         <td><code>NULL</code></td> 
+         <td>The genlist is scrolled to the bottom edge.</td>
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>edge,left</code></td>
-         <td>The genlist is scrolled to the left edge.</td> 
-         <td><code>NULL</code></td> 
+         <td>The genlist is scrolled to the left edge.</td>
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>edge,right</code></td>
          <td>The genlist is scrolled to the right edge.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>moved</code></td>
-         <td>A genlist item is moved in the reorder mode.</td> 
+         <td>A genlist item is moved in the reorder mode.</td>
          <td><code>Elm_Object_Item</code> object that contains the moved item</td>
       </tr>
       <tr>
@@ -408,9 +408,9 @@ gic-&gt;item_style = &quot;default&quot;;
          <td>The reorder animation stops.</td>
          <td></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -430,7 +430,7 @@ gic-&gt;item_style = &quot;default&quot;;
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_genlist_mn.htm b/org.tizen.guides/html/native/ui/efl/component_genlist_mn.htm
index dbc278c..a41d380 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_genlist_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_genlist_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Genlist</title>  
+       <title>Genlist</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Genlist</h1>
@@ -46,7 +46,7 @@
 
 <p>The genlist UI component displays a scrollable list of items. It allows you to manage a lot of items while still being fast and having a low memory footprint, as only visible items are allocated in the memory. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Genlist.html">Genlist</a> API.</p>
 <p>This feature is supported in mobile applications only.</p>
-<p>To save up memory and speed up processing when many items exist, genlist has the concept of &quot;realization&quot; when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). Since item realization is dynamic, you cannot set content in advance. You need to fill the item in the form of a callback function. That is the key point of using a genlist component.</p>
+<p>To save up memory and speed up processing when many items exist, genlist has the concept of "realization" when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). Since item realization is dynamic, you cannot set content in advance. You need to fill the item in the form of a callback function. That is the key point of using a genlist component.</p>
 
 
 <h2 id="basic">Basic Usage</h2>
@@ -66,7 +66,7 @@ genlist = elm_genlist_add(parent);
 <pre class="prettyprint">
 Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
 
-itc-&gt;item_style = &quot;default&quot;; 
+itc-&gt;item_style = "default";
 itc-&gt;func.text_get = _item_label_get;
 itc-&gt;func.content_get = _item_content_get;
 itc-&gt;func.del = _item_del;
@@ -78,10 +78,10 @@ itc-&gt;func.del = _item_del;
 static char*
 _item_label_get(void *data, Evas_Object *obj, const char *part)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.text&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(&quot;text&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+    if (!strcmp(part, "elm.text"))
+        return strdup("text");
+    else
+        return NULL;
 }
 </pre>
 </li>
@@ -91,24 +91,24 @@ _item_label_get(void *data, Evas_Object *obj, const char *part)
 static Evas_Object*
 _item_content_get(void *data, Evas_Object *obj, const char *part)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.swallow.icon&quot;)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = elm_image_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_Set(img, &quot;sample.png&quot;, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return img;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-} 
+    if (!strcmp(part, "elm.swallow.icon")) {
+        Evas_Object *img = elm_image_add(obj);
+        elm_image_file_Set(img, "sample.png", NULL);
+
+        return img;
+    } else {
+        return NULL;
+    }
+}
 </pre>
 </li>
 <li>Define the <code>del</code> function.
-<p>This function is called when the genlist item is deleted. It deletes any data that has been allocated at the item&#39;s creation.</p>
+<p>This function is called when the genlist item is deleted. It deletes any data that has been allocated at the item's creation.</p>
 <pre class="prettyprint">
 static void
 _item_del(void *data, Evas_Object *obj)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;item(%d) is now deleted&quot;, (int)data);
+    printf("item(%d) is now deleted", (int)data);
 }
 </pre>
 </li>
@@ -117,7 +117,7 @@ _item_del(void *data, Evas_Object *obj)
 <li>Append items to the genlist with the <code>elm_genlist_item_append()</code> function.
 <pre class="prettyprint">
 elm_genlist_item_append(genlist, itc, (void *)i, NULL, ELM_GENLIST_ITEM_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_item_selected_cb, (void *)i);
+                        _item_selected_cb, (void *)i);
 </pre>
 </li>
 <li>Register the <a href="#callback">callback</a> functions for the genlist and its items.
@@ -126,7 +126,7 @@ elm_genlist_item_append(genlist, itc, (void *)i, NULL, ELM_GENLIST_ITEM_NONE,
 static void
 _item_selected_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;item(%d) is selected&quot;, (int)data);
+    printf("item(%d) is selected", (int)data);
 }
 </pre>
 </li>
@@ -152,57 +152,57 @@ Elm_Genlist_Item_Class *itc;
 
 genlist = elm_genlist_add(nf);
 evas_object_show(genlist);
-elm_naviframe_item_push(nf, &quot;Genlist&quot;, NULL, NULL, genlist, NULL);
+elm_naviframe_item_push(nf, "Genlist", NULL, NULL, genlist, NULL);
 
 itc = elm_genlist_item_class_new();
-itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;item_style = "default";
 itc-&gt;func.content_get = _item_content_get;
 itc-&gt;func.text_get = _item_label_get;
 itc-&gt;func.del = _item_del;
 
 int i;
 for (i = 0; i &lt; 10; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(genlist, /* Genlist object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itc, /* Genlist item class */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)i, /* Item data */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, /* Parent item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, /* Item type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, /* Select callback */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL); /* Callback data */
+    elm_genlist_item_append(genlist, /* Genlist object */
+                            itc, /* Genlist item class */
+                            (void *)i, /* Item data */
+                            NULL, /* Parent item */
+                            ELM_GENLIST_ITEM_NONE, /* Item type */
+                            NULL, /* Select callback */
+                            NULL); /* Callback data */
 }
 elm_genlist_item_class_free(itc);
 
 _item_label_get(void *data, Evas_Object *obj, const char *part)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[16];
-&nbsp;&nbsp;&nbsp;&nbsp;int i = (int) data;
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.text&quot;)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;text %d&quot;, i);
+    char buf[16];
+    int i = (int) data;
+    if (!strcmp(part, "elm.text")) {
+        sprintf(buf, "text %d", i);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return strdup(buf);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;else return NULL;
+    else return NULL;
 }
 
 static Evas_Object*
 _item_content_get(void *data, Evas_Object *obj, const char *part)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.swallow.icon&quot;)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = elm_image_add(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = elm_image_file_set(img, ICON_DIR&quot;/tizen.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(img, ELM_SCALE_SIZE(30), ELM_SCALE_SIZE(30));
+    if (!strcmp(part, "elm.swallow.icon")) {
+        Evas_Object *img = elm_image_add(obj);
+        ret = elm_image_file_set(img, ICON_DIR"/tizen.png", NULL);
+        evas_object_size_hint_min_set(img, ELM_SCALE_SIZE(30), ELM_SCALE_SIZE(30));
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return img;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return img;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;else return NULL;
+    else return NULL;
 }
 
 static void
 _item_del(void *data, Evas_Object *obj)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;item(%d) is now deleted&quot;, (int) data);
+    printf("item(%d) is now deleted", (int) data);
 }
 </pre>
 </td>
@@ -252,34 +252,34 @@ int i;
 int j;
 
 itc = elm_genlist_item_class_new();
-itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;item_style = "default";
 itc-&gt;func.content_get = _item_content_get;
 itc-&gt;func.text_get = _item_label_get;
 itc-&gt;func.del = _item_del;
 
 gitc = elm_genlist_item_class_new();
-gitc-&gt;item_style = &quot;group_index&quot;;
+gitc-&gt;item_style = "group_index";
 gitc-&gt;func.text_get = _group_item_label_get;
 gitc-&gt;func.del = _item_del;
 
 
 for (i = 1; i &lt; 10; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;g = elm_genlist_item_append(genlist,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gitc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)i,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_GROUP, /* Group item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;for (j = 1; j &lt; 4; j++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(genlist,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)j,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g, /* Pass group item as a parameter */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE, /* Child item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    g = elm_genlist_item_append(genlist,
+                                gitc,
+                                (void *)i,
+                                NULL,
+                                ELM_GENLIST_ITEM_GROUP, /* Group item */
+                                NULL,
+                                NULL);
+    for (j = 1; j &lt; 4; j++) {
+        elm_genlist_item_append(genlist,
+                                itc,
+                                (void *)j,
+                                g, /* Pass group item as a parameter */
+                                ELM_GENLIST_ITEM_NONE, /* Child item */
+                                NULL,
+                                NULL);
+    }
 }
 elm_genlist_item_class_free(itc);
 elm_genlist_item_class_free(gitc);
@@ -312,71 +312,71 @@ Elm_Genlist_Item_Class *titc;
 Elm_Object_Item *it;
 int i;
 
-/* Register the callback functions to make the genlist &quot;expanded&quot; or &quot;contracted&quot; when &quot;selected&quot; */
-evas_object_smart_callback_add(genlist, &quot;selected&quot;, gl_selected_cb, NULL);
-evas_object_smart_callback_add(genlist, &quot;expanded&quot;, gl_expanded_cb, NULL);
-evas_object_smart_callback_add(genlist, &quot;contracted&quot;, gl_contracted_cb, NULL);
+/* Register the callback functions to make the genlist "expanded" or "contracted" when "selected" */
+evas_object_smart_callback_add(genlist, "selected", gl_selected_cb, NULL);
+evas_object_smart_callback_add(genlist, "expanded", gl_expanded_cb, NULL);
+evas_object_smart_callback_add(genlist, "contracted", gl_contracted_cb, NULL);
 
 titc = elm_genlist_item_class_new();
-titc-&gt;item_style = &quot;group_index/expandable&quot;;
+titc-&gt;item_style = "group_index/expandable";
 titc-&gt;func.text_get = _group_item_label_get;
 titc-&gt;func.del = _item_del;
 
 for (i = 1; i &lt; 10; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;it = elm_genlist_item_append(genlist,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;titc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)i,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_TREE, /* Tree item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Expand each item */
-&nbsp;&nbsp;&nbsp;&nbsp;/* This causes the &quot;expanded&quot; callback to be called */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, EINA_TRUE);
+    it = elm_genlist_item_append(genlist,
+                                 titc,
+                                 (void *)i,
+                                 NULL,
+                                 ELM_GENLIST_ITEM_TREE, /* Tree item */
+                                 NULL,
+                                 NULL);
+    /* Expand each item */
+    /* This causes the "expanded" callback to be called */
+    elm_genlist_item_expanded_set(it, EINA_TRUE);
 }
 
 static void
 gl_selected_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool expanded = EINA_FALSE;
+    Elm_Object_Item *it = event_info;
+    Eina_Bool expanded = EINA_FALSE;
 
-&nbsp;&nbsp;&nbsp;&nbsp;expanded = elm_genlist_item_expanded_get(it);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_expanded_set(it, !expanded);
+    expanded = elm_genlist_item_expanded_get(it);
+    elm_genlist_item_expanded_set(it, !expanded);
 }
 
 static void
 gl_expanded_cb(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *genlist = elm_object_item_widget_get(it);
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-
-&nbsp;&nbsp;&nbsp;&nbsp;itc = elm_genlist_item_class_new();
-&nbsp;&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;default&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get = _item_content_get;
-&nbsp;&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = _item_label_get;
-&nbsp;&nbsp;&nbsp;&nbsp;itc-&gt;func.del = _item_del;
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 1; i &lt; 4; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_append(genlist,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;itc,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)i,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;it, /* Set the selected item as parent */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_GENLIST_ITEM_NONE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_class_free(itc);
+    Elm_Object_Item *it = event_info;
+    Evas_Object *genlist = elm_object_item_widget_get(it);
+    Elm_Genlist_Item_Class *itc;
+    int i;
+
+    itc = elm_genlist_item_class_new();
+    itc-&gt;item_style = "default";
+    itc-&gt;func.content_get = _item_content_get;
+    itc-&gt;func.text_get = _item_label_get;
+    itc-&gt;func.del = _item_del;
+
+    for (i = 1; i &lt; 4; i++) {
+        elm_genlist_item_append(genlist,
+                                itc,
+                                (void *)i,
+                                it, /* Set the selected item as parent */
+                                ELM_GENLIST_ITEM_NONE,
+                                NULL,
+                                NULL);
+    }
+    elm_genlist_item_class_free(itc);
 }
 
 static void
 gl_contracted_cb(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = event_info;
+    Elm_Object_Item *it = event_info;
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_subitems_clear(it);
+    elm_genlist_item_subitems_clear(it);
 }
 </pre>
 </td>
@@ -395,7 +395,7 @@ gl_contracted_cb(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *eve
 <p>The genlist and item size can be managed through the mode set by the <code>elm_genlist_mode_set()</code> function:</p>
 <ul>
 <li><code>ELM_LIST_COMPRESS</code>
-<p>The genlist respects its container&#39;s geometry. Even if there are items exceeding the genlist in the transverse axis, the genlist is not scrollable in that direction.</p></li>
+<p>The genlist respects its container's geometry. Even if there are items exceeding the genlist in the transverse axis, the genlist is not scrollable in that direction.</p></li>
 <li><code>ELM_LIST_SCROLL</code>
 <p>Same as <code>ELM_LIST_COMPRESS</code>, but if there are items exceeding the genlist in the transverse axis, the genlist is scrollable in that direction.</p></li>
 <li><code>ELM_LIST_LIMIT</code>
@@ -422,11 +422,11 @@ gl_contracted_cb(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *eve
 static void
 select_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = (Elm_Object_Item *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Cancel select and highlight when item is selected */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_genlist_item_selected_set(it, EINA_FALSE);
+    Elm_Object_Item *it = (Elm_Object_Item *)event_info;
+    /* Cancel select and highlight when item is selected */
+    elm_genlist_item_selected_set(it, EINA_FALSE);
 }
-</pre>  
+</pre>
 
 <p>Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <code>expanded</code> or <code>contracted</code> signals.</p>
 </div>
@@ -451,7 +451,7 @@ Update only specific parts:
 
 <p>The genlist items have a gradient opacity from the top to the bottom rather than an explicit divider from Tizen 2.4. Each item is identified by its color made by blending its opacity and background color (or image). The <code>solid</code> prefix in a genlist style name means that genlist items have an explicit divider and background color. To set a genlist with a solid background color:</p>
 <pre class="prettyprint">
-elm_object_style_set(genlist, &quot;solid/default&quot;);
+elm_object_style_set(genlist, "solid/default");
 </pre>
 
 <p>The following table lists the available component styles.</p>
@@ -506,7 +506,7 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
 </tr>
 </tbody>
 </table>
-        
+
 <h3 id="item_style">Item Styles</h3>
 
 <p>The genlist item style determines the number of parts for text and content, and their arrangement within the item. For example, a default style item has 1 text part (<code>elm.text</code>), and 2 content parts (<code>elm.swallow.icon</code> and <code>elm.swallow.end</code>).</p>
@@ -556,7 +556,7 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
   <tr>
  <td><code>elm/genlist/item/multiline/default</code></td>
  <td align="center"><img alt="elm/genlist/item/multiline/default" src="../../../images/styleguide_genlist_multiline.png" /></td>
- <td><code>elm.text</code> 
+ <td><code>elm.text</code>
  <p><code>elm.text.multiline</code></p>
  </td>
   <td><code>elm.swallow.bg</code>
@@ -626,9 +626,9 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
 <table border="1">
    <tbody>
       <tr>
-         <th style="text-align:center;margin-left:auto;margin-right:auto;">Signal</th> 
-         <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-         <th style="text-align:center;margin-left:auto;margin-right:auto;"><code>event_info</code></th> 
+         <th style="text-align:center;margin-left:auto;margin-right:auto;">Signal</th>
+         <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+         <th style="text-align:center;margin-left:auto;margin-right:auto;"><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>activated</code></td>
@@ -653,7 +653,7 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
       <tr>
          <td><code>expanded</code></td>
          <td>The item is to be expanded with the <code>elm_genlist_item_expanded_set()</code> function. The callback fills in the child items.</td>
-         <td><code>Elm_Object_Item</code></td> 
+         <td><code>Elm_Object_Item</code></td>
       </tr>
       <tr>
          <td><code>contracted</code></td>
@@ -703,12 +703,12 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
       <tr>
          <td><code>drag,stop</code></td>
          <td>The item in the list has stopped being dragged.</td>
-         <td><code>Elm_Object_Item</code></td> 
+         <td><code>Elm_Object_Item</code></td>
       </tr>
       <tr>
          <td><code>drag</code></td>
          <td>The item in the list is being dragged.</td>
-         <td><code>Elm_Object_Item</code> object that contains the dragged item</td> 
+         <td><code>Elm_Object_Item</code> object that contains the dragged item</td>
       </tr>
       <tr>
          <td><code>longpressed</code></td>
@@ -718,47 +718,47 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
       <tr>
          <td><code>scroll,anim,start</code></td>
          <td>The scrolling animation is started.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>scroll,anim,stop</code></td>
          <td>The scrolling animation is stopped.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>scroll,drag,start</code></td>
          <td>Dragging the content is started.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>scroll,drag,stop</code></td>
-         <td>Dragging the content is stopped.</td> 
-         <td><code>NULL</code></td> 
+         <td>Dragging the content is stopped.</td>
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>scroll</code></td>
          <td>Scrolling is ongoing.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>edge,top</code></td>
          <td>The genlist is scrolled to the top edge.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>edge,bottom</code></td>
-         <td>The genlist is scrolled to the bottom edge.</td> 
-         <td><code>NULL</code></td> 
+         <td>The genlist is scrolled to the bottom edge.</td>
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>edge,left</code></td>
-         <td>The genlist is scrolled to the left edge.</td> 
-         <td><code>NULL</code></td> 
+         <td>The genlist is scrolled to the left edge.</td>
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>edge,right</code></td>
          <td>The genlist is scrolled to the right edge.</td>
-         <td><code>NULL</code></td> 
+         <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>multi,swipe,left</code></td>
@@ -767,17 +767,17 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
       </tr>
       <tr>
          <td><code>multi,swipe,right</code></td>
-         <td>The genlist is multi-touch-swiped right.</td> 
-         <td><code>Elm_Object_Item</code> object that contains the swiped item</td> 
+         <td>The genlist is multi-touch-swiped right.</td>
+         <td><code>Elm_Object_Item</code> object that contains the swiped item</td>
       </tr>
       <tr>
          <td><code>multi,swipe,up</code></td>
-         <td>The genlist is multi-touch-swiped up.</td> 
-         <td><code>Elm_Object_Item</code> object that contains the swiped item</td> 
+         <td>The genlist is multi-touch-swiped up.</td>
+         <td><code>Elm_Object_Item</code> object that contains the swiped item</td>
       </tr>
       <tr>
          <td><code>multi,swipe,down</code></td>
-         <td>The genlist is multi-touch-swiped down.</td> 
+         <td>The genlist is multi-touch-swiped down.</td>
          <td><code>Elm_Object_Item</code> object that contains the swiped item</td>
       </tr>
       <tr>
@@ -792,17 +792,17 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
       </tr>
       <tr>
          <td><code>swipe</code></td>
-         <td>The genlist is swiped.</td> 
+         <td>The genlist is swiped.</td>
          <td><code>Elm_Object_Item</code> object that contains the swiped item</td>
       </tr>
       <tr>
          <td><code>moved</code></td>
-         <td>A genlist item is moved in the reorder mode.</td> 
+         <td>A genlist item is moved in the reorder mode.</td>
          <td><code>Elm_Object_Item</code> object that contains the moved item</td>
       </tr>
       <tr>
          <td><code>moved,after</code></td>
-         <td>A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.</td> 
+         <td>A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.</td>
                 <td><code>Elm_Object_Item</code> object that contains the moved item</td>
       </tr>
       <tr>
@@ -812,12 +812,12 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
       </tr>
       <tr>
          <td><code>language,changed</code></td>
-         <td>The program language changes.</td> 
+         <td>The program language changes.</td>
          <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>tree,effect,finished</code></td>
-         <td>A genlist tree effect is finished.</td> 
+         <td>A genlist tree effect is finished.</td>
          <td><code>NULL</code></td>
       </tr>
       <tr>
@@ -830,14 +830,14 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
          <td>The genlist item is released by mouse up.</td>
          <td><code>Elm_Object_Item</code> object that contains the released item</td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
 
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
-  
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
@@ -852,7 +852,7 @@ elm_object_style_set(genlist, &quot;solid/default&quot;);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_genlist_wn.htm b/org.tizen.guides/html/native/ui/efl/component_genlist_wn.htm
index 6ea0413..c771151 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_genlist_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_genlist_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Genlist</title>  
+       <title>Genlist</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -51,7 +51,7 @@
 <p>Genlist is a UI component that displays a scrollable list of items. It allows you to manage a lot of items while still being fast and having a low memory footprint, as only the visible items are allocated in the memory.</p>
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Genlist.html">Genlist</a> API.</p>
-  
+
 <p align="center"><strong>Figure: Genlist component</strong></p>
 <p align="center"> <img alt="Genlist component" src="../../../images/genlist.png" /> </p>
 
@@ -89,20 +89,20 @@ genlist = elm_genlist_add(parent);
 
 <p>The following figures show examples of the item styles.</p>
 
-<p align="center"><strong>Figure: 1text item style</strong></p> 
-<p align="center"> <img alt="1 text item style" src="../../../images/genlist1_wn.png" /> </p> 
+<p align="center"><strong>Figure: 1text item style</strong></p>
+<p align="center"> <img alt="1 text item style" src="../../../images/genlist1_wn.png" /> </p>
 
-<p align="center"><strong>Figure: 1text.1icon.1 item style</strong></p> 
-<p align="center"> <img alt="1text.1icon.1 item style" src="../../../images/genlist2_wn.png" /> </p> 
+<p align="center"><strong>Figure: 1text.1icon.1 item style</strong></p>
+<p align="center"> <img alt="1text.1icon.1 item style" src="../../../images/genlist2_wn.png" /> </p>
 
-<p align="center"><strong>Figure: 2text.1icon.1 item style</strong></p> 
-<p align="center"> <img alt="2text.1icon.1 item style" src="../../../images/genlist3_wn.png" /> </p> 
+<p align="center"><strong>Figure: 2text.1icon.1 item style</strong></p>
+<p align="center"> <img alt="2text.1icon.1 item style" src="../../../images/genlist3_wn.png" /> </p>
 
 <p>For more information on creating a new genlist item style, see <a href="component_custom_n.htm">Customizing UI Components</a>.</p>
 
 <h2 id="items">Defining the Genlist Item Class</h2>
 
-<p>To save up memory and speed up processing when many items exist, the genlist has the concept of &quot;realization&quot; when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <code>Elm_Genlist_Item_Class</code> structure (genlist item class) that informs the genlist component which callbacks to call when an item is created or deleted.</p>
+<p>To save up memory and speed up processing when many items exist, the genlist has the concept of "realization" when managing items. It means that a genlist item creates its text and content when the user scrolls the list and the item shows up on the display (realize), and frees them when the item is scrolled out of the screen (unrealize). To enable the item realization, you must create and fill an <code>Elm_Genlist_Item_Class</code> structure (genlist item class) that informs the genlist component which callbacks to call when an item is created or deleted.</p>
 
 <p>You can use the genlist item class for the following purposes:</p>
 <ul><li>Setting the item styles</li>
@@ -112,7 +112,7 @@ genlist = elm_genlist_add(parent);
 <pre class="prettyprint">
 Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
 
-itc-&gt;item_style = &quot;default&quot;;
+itc-&gt;item_style = "default";
 itc-&gt;decorate_item_style = NULL;
 itc-&gt;decorate_all_item_style = NULL;
 itc-&gt;func.text_get = _item_label_get;
@@ -126,13 +126,13 @@ itc-&gt;func.del = _item_del;
 <p>The <code>func</code> structure contains pointers to functions that are called when an item is going to be realized or deleted. All of them receive a data parameter that points to the same data passed to the <code>elm_genlist_item_append()</code> function and related item creation functions, and an <code>obj</code> parameter that points to the genlist object itself.</p>
   <ul>
    <li><code>text_get()</code>
-   <p>The <code>PART</code> parameter is the name string of one of the existing text parts in the Edje group implementing the item&#39;s theme. It has to return a string (duplicated with the <code>strdup()</code> function) corresponding to the <code>PART</code> parameter. The caller is in charge of freeing the string when done.</p></li>
+   <p>The <code>PART</code> parameter is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the <code>strdup()</code> function) corresponding to the <code>PART</code> parameter. The caller is in charge of freeing the string when done.</p></li>
 
    <li><code>content_get()</code>
    <p>The <code>PART</code> parameter is the name string of one of the existing swallow parts in the Edje group. The function returns a valid object handle or <code>NULL</code> (when no content is desired). The object is deleted by the genlist on its deletion or when the item is <code>unrealized</code>.</p></li>
 
    <li><code>state_get()</code>
-   <p>The <code>PART</code> parameter is the name string of one of the state parts in the Edje group implementing the item&#39;s theme. It returns <code>EINA_FALSE</code> for false/off or <code>EINA_TRUE</code> for true/on. The default is false. When the state is true, the genlist emits a signal to the <code>PART</code> parameter&#39;s theming Edje object using <code>elm,state,xxx,active</code> as the <code>emission</code> parameter and <code>elm</code> as the <code>source</code> parameter. xxx is the name of the (state) part.</p></li>
+   <p>The <code>PART</code> parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns <code>EINA_FALSE</code> for false/off or <code>EINA_TRUE</code> for true/on. The default is false. When the state is true, the genlist emits a signal to the <code>PART</code> parameter's theming Edje object using <code>elm,state,xxx,active</code> as the <code>emission</code> parameter and <code>elm</code> as the <code>source</code> parameter. xxx is the name of the (state) part.</p></li>
 
    <li><code>del()</code>
    <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
@@ -168,7 +168,7 @@ itc-&gt;func.del = _item_del;
 </li>
 <li>Inspect list elements:
 <p>To help inspect the list items, move to the item at the top of the list with the <code>elm_genlist_first_item_get()</code> function, which returns the item pointer. The <code>elm_genlist_last_item_get()</code> function moves to the item at the end of the list. The <code>elm_genlist_item_next_get()</code> and <code>elm_genlist_item_prev_get()</code> functions move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
- 
+
 <div class="note">
        <strong>Note</strong>
        As a tree, the items are flattened on the list, so the <code>elm_genlist_item_parent_get()</code> function gives you the name of the parent item (even to skip them if needed).
@@ -196,81 +196,81 @@ itc-&gt;func.del = _item_del;
 <h2 id="callback">Using the Genlist Callbacks</h2>
 
 <p>To receive notifications about the genlist events, listen to the following signals:</p>
-   <ul> 
-   <li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar). 
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the activated item.</p></li> 
-   <li><code>clicked,double</code>: The item is double-clicked.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the double-clicked item.</p></li> 
-   <li><code>selected</code>: The item is selected.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the selected item.</p></li> 
-   <li><code>unselected</code>: The item is unselected.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the unselected item.</p></li> 
-   <li><code>expanded</code>: The item is to be expanded with the <code>elm_genlist_item_expanded_set()</code> function. The callback fills in the child items.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be expanded.</p></li> 
-   <li><code>contracted</code>: The item is to be contracted with the <code>elm_genlist_item_expanded_set()</code> function. The callback deletes the child items.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be contracted.</p></li> 
-   <li><code>expand,request</code>: The user wants to expand a tree branch item. The callback decides whether the item can expand (if it has any children) and calls the <code>elm_genlist_item_expanded_set()</code> function to set the state.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be expanded.</p></li> 
-   <li><code>contract,request</code>: The user wants to contract a tree branch item. The callback decides whether the item can contract (if it has any children) and calls the <code>elm_genlist_item_expanded_set()</code> function to set the state.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be contracted.</p></li> 
-   <li><code>realized</code>: The item is created as a real evas object.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be created.</p></li> 
-   <li><code>unrealized</code>: An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be deleted.</p></li> 
-   <li><code>drag,start,up</code>: The item in the list is dragged (not scrolled) up.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li> 
-   <li><code>drag,start,down</code>: The item in the list is dragged (not scrolled) down.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li> 
-   <li><code>drag,start,left</code>: The item in the list is dragged (not scrolled) left.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li> 
-   <li><code>drag,start,right</code>: The item in the list is dragged (not scrolled) right.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li> 
-   <li><code>drag,stop</code>: The item in the list has stopped being dragged.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li> 
-   <li><code>drag</code>: The item in the list is being dragged.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li> 
-   <li><code>longpressed</code>: The item is pressed for a certain amount of time. The default specified time is 1 second.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the pressed item.</p></li> 
-   <li><code>scroll,anim,start</code>: The scrolling animation is started.  
-   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li> 
-   <li><code>scroll,anim,stop</code>: The scrolling animation is stopped.  
-   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li> 
-   <li><code>scroll,drag,start</code>: Dragging the content is started.  
-   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li> 
-   <li><code>scroll,drag,stop</code>: Dragging the content is stopped.  
-   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li> 
-
-   <li><code>edge,top</code>: The genlist is scrolled to the top edge.  
-   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li> 
-   <li><code>edge,bottom</code>: The genlist is scrolled to the bottom edge.  
-   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li> 
-   <li><code>edge,left</code>: The genlist is scrolled to the left edge.  
-   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li> 
-   <li><code>edge,right</code>: The genlist is scrolled to the right edge.  
-   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li> 
-   <li><code>multi,swipe,left</code>: The genlist is multi-touch-swiped left.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li> 
-   <li><code>multi,swipe,right</code>: The genlist is multi-touch-swiped right.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li> 
-   <li><code>multi,swipe,up</code>: The genlist is multi-touch-swiped up.  
-   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li> 
-   <li><code>multi,swipe,down</code>: The genlist is multi-touch-swiped down.  
+   <ul>
+   <li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar).
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the activated item.</p></li>
+   <li><code>clicked,double</code>: The item is double-clicked.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the double-clicked item.</p></li>
+   <li><code>selected</code>: The item is selected.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the selected item.</p></li>
+   <li><code>unselected</code>: The item is unselected.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the unselected item.</p></li>
+   <li><code>expanded</code>: The item is to be expanded with the <code>elm_genlist_item_expanded_set()</code> function. The callback fills in the child items.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be expanded.</p></li>
+   <li><code>contracted</code>: The item is to be contracted with the <code>elm_genlist_item_expanded_set()</code> function. The callback deletes the child items.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be contracted.</p></li>
+   <li><code>expand,request</code>: The user wants to expand a tree branch item. The callback decides whether the item can expand (if it has any children) and calls the <code>elm_genlist_item_expanded_set()</code> function to set the state.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be expanded.</p></li>
+   <li><code>contract,request</code>: The user wants to contract a tree branch item. The callback decides whether the item can contract (if it has any children) and calls the <code>elm_genlist_item_expanded_set()</code> function to set the state.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be contracted.</p></li>
+   <li><code>realized</code>: The item is created as a real evas object.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be created.</p></li>
+   <li><code>unrealized</code>: An item is going to be unrealized. Provided content objects are deleted and the item object is deleted or put into a floating cache.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the item to be deleted.</p></li>
+   <li><code>drag,start,up</code>: The item in the list is dragged (not scrolled) up.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+   <li><code>drag,start,down</code>: The item in the list is dragged (not scrolled) down.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+   <li><code>drag,start,left</code>: The item in the list is dragged (not scrolled) left.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+   <li><code>drag,start,right</code>: The item in the list is dragged (not scrolled) right.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+   <li><code>drag,stop</code>: The item in the list has stopped being dragged.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+   <li><code>drag</code>: The item in the list is being dragged.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the dragged item.</p></li>
+   <li><code>longpressed</code>: The item is pressed for a certain amount of time. The default specified time is 1 second.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the pressed item.</p></li>
+   <li><code>scroll,anim,start</code>: The scrolling animation is started.
+   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+   <li><code>scroll,anim,stop</code>: The scrolling animation is stopped.
+   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+   <li><code>scroll,drag,start</code>: Dragging the content is started.
+   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+   <li><code>scroll,drag,stop</code>: Dragging the content is stopped.
+   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+
+   <li><code>edge,top</code>: The genlist is scrolled to the top edge.
+   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+   <li><code>edge,bottom</code>: The genlist is scrolled to the bottom edge.
+   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+   <li><code>edge,left</code>: The genlist is scrolled to the left edge.
+   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+   <li><code>edge,right</code>: The genlist is scrolled to the right edge.
+   <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
+   <li><code>multi,swipe,left</code>: The genlist is multi-touch-swiped left.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
+   <li><code>multi,swipe,right</code>: The genlist is multi-touch-swiped right.
    <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
-   <li><code>multi,pinch,out</code>: The genlist is multi-touch-pinched out.  
+   <li><code>multi,swipe,up</code>: The genlist is multi-touch-swiped up.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
+   <li><code>multi,swipe,down</code>: The genlist is multi-touch-swiped down.
+   <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
+   <li><code>multi,pinch,out</code>: The genlist is multi-touch-pinched out.
    <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the pinched item.</p></li>
-   <li><code>multi,pinch,in</code>: The genlist is multi-touch-pinched in.  
+   <li><code>multi,pinch,in</code>: The genlist is multi-touch-pinched in.
    <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the pinched item.</p></li>
-   <li><code>swipe</code>: The genlist is swiped.  
+   <li><code>swipe</code>: The genlist is swiped.
    <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the swiped item.</p></li>
-   <li><code>moved</code>: A genlist item is moved in the reorder mode.  
+   <li><code>moved</code>: A genlist item is moved in the reorder mode.
    <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the moved item.</p></li>
-   <li><code>moved,after</code>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.  
+   <li><code>moved,after</code>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use the <code>elm_genlist_item_prev_get()</code> function. This signal is called along with the <code>moved</code> signal.
    <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the moved item.</p></li>
-   <li><code>moved,before</code>: A genlist item is moved before another item in the reorder mode. To access the relative next item, use the <code>elm_genlist_item_next_get()</code> function. This signal is called along with the <code>moved</code> signal.  
+   <li><code>moved,before</code>: A genlist item is moved before another item in the reorder mode. To access the relative next item, use the <code>elm_genlist_item_next_get()</code> function. This signal is called along with the <code>moved</code> signal.
    <p>The <code>event_info</code> callback parameter points at an <code>Elm_Object_Item</code> object that contains the moved item.</p></li>
-   <li><code>language,changed</code> The program language is changed.  
+   <li><code>language,changed</code> The program language is changed.
    <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
-   <li><code>tree,effect,finished</code>: A genlist tree effect is finished.  
+   <li><code>tree,effect,finished</code>: A genlist tree effect is finished.
    <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
   </ul>
 
@@ -278,7 +278,7 @@ itc-&gt;func.del = _item_del;
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
-  
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
@@ -293,7 +293,7 @@ itc-&gt;func.del = _item_del;
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_glview_mn.htm b/org.tizen.guides/html/native/ui/efl/component_glview_mn.htm
index 41d3ea5..d6a4561 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_glview_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_glview_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>GLView</title>  
+       <title>GLView</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -49,8 +49,8 @@
 <p>For more information, see the <a href="../../graphics/opengl_n.htm">OpenGL ES</a> guide and the <a href="../../../../../org.tizen.native.mobile.apireference/group__GLView.html">GLView</a> API.</p>
 
       <p align="center"><strong>Figure: GLView component</strong></p>
-  <p align="center"><img alt="GLView component" src="../../../images/glview.png" /></p> 
-  
+  <p align="center"><img alt="GLView component" src="../../../images/glview.png" /></p>
+
       <p align="center"><strong>Figure: GLView hierarchy</strong></p>
   <p align="center"><img alt="GLView hierarchy" src="../../../images/glview_tree.png" /></p>
 
@@ -125,17 +125,17 @@ elm_glview_render_func_set(glview, _draw_gl_cb);
 
 <p>You can register callback functions connected to the following signals for a glview object:</p>
 
-   <p align="center" class="Table"><strong>Table: GLView callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: GLView callback signals</strong></p>
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>focused</code></td>
-         <td>The GLView component is focused.</td> 
+         <td>The GLView component is focused.</td>
          <td><code>Elm_Focus_Info</code> object</td>
      </tr>
       <tr>
@@ -143,26 +143,26 @@ elm_glview_render_func_set(glview, _draw_gl_cb);
          <td>The GLView object is unfocused.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
- 
+
 <p>The following example shows how to define and register a callback for the <code>focused</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(glview, &quot;focused&quot;, focused_cb, data);
+evas_object_smart_callback_add(glview, "focused", focused_cb, data);
 
-/* Callback for the &quot;focused&quot; signal */
+/* Callback for the "focused" signal */
 /* Called when the GLView is focused */
 void
 focused_cb(void *data, Evas_Object *obj, void  *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Focus_Info *fi = event_info;
+    Elm_Focus_Info *fi = event_info;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;GLView is focused\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "GLView is focused\n");
 }
 </pre>
 
@@ -180,7 +180,7 @@ focused_cb(void *data, Evas_Object *obj, void  *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_glview_wn.htm b/org.tizen.guides/html/native/ui/efl/component_glview_wn.htm
index 14cfacb..fb81a1a 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_glview_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_glview_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>GLView</title>  
+       <title>GLView</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>GLView</h1>
@@ -50,10 +50,10 @@
 <p>For more information, see the <a href="../../graphics/opengl_n.htm">OpenGL ES</a> guide and the <a href="../../../../../org.tizen.native.wearable.apireference/group__GLView.html">GLView</a> API.</p>
 
 
-      <p align="center"><strong>Figure: GLView component</strong></p> 
-  <p align="center"><img alt="GLView component" src="../../../images/glview_wn.png" /></p> 
-  
-      <p align="center"><strong>Figure: GLView hierarchy</strong></p> 
+      <p align="center"><strong>Figure: GLView component</strong></p>
+  <p align="center"><img alt="GLView component" src="../../../images/glview_wn.png" /></p>
+
+      <p align="center"><strong>Figure: GLView hierarchy</strong></p>
   <p align="center"><img alt="GLView hierarchy" src="../../../images/glview_tree.png" /></p>
 
 <h2 id="add">Adding a GLView Component</h2>
@@ -128,7 +128,7 @@ elm_glview_render_func_set(glview, _draw_gl_cb);
 <p>To receive notifications about the GLView events, listen to the following signals:</p>
 
 <ul>
-<li><code>focused</code>: The GLView component is focused. 
+<li><code>focused</code>: The GLView component is focused.
 <p>The <code>event_info</code> callback parameter points at an <code>Elm_Focus_Info</code> object.</p></li>
 <li><code>unfocused</code>: The GLView object is unfocused.</li>
 </ul>
@@ -141,17 +141,17 @@ elm_glview_render_func_set(glview, _draw_gl_cb);
 <p>To register and define a callback for the <code>focused</code> signal:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(glview, &quot;focused&quot;, focused_cb, data);
+    evas_object_smart_callback_add(glview, "focused", focused_cb, data);
 }
 
-/* Callback for the &quot;focused&quot; signal */
+/* Callback for the "focused" signal */
 /* Called when the GLView is focused */
 void
 focused_cb(void *data, Evas_Object *obj, void  *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Focus_Info *fi = event_info;
+    Elm_Focus_Info *fi = event_info;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;GLView is focused\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "GLView is focused\n");
 }
 </pre>
 
@@ -169,7 +169,7 @@ focused_cb(void *data, Evas_Object *obj, void  *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_hoversel_mn.htm b/org.tizen.guides/html/native/ui/efl/component_hoversel_mn.htm
index 2c27a28..48b413e 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_hoversel_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_hoversel_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Hoversel</title>  
+       <title>Hoversel</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,27 +35,27 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>              
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Hoversel</h1>
 
 <p>This feature is supported in mobile applications only.</p>
 
- 
+
 <p>The hoversel component is a button that pops up a list of items (automatically choosing the direction to display).</p>
 <p>The hoversel component inherits from the button component, which means that button functions can be used on the hoversel component.</p>
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Hoversel.html">Hoversel</a> API.</p>
 
-<p align="center"><strong>Figure: Hoversel component</strong></p> 
+<p align="center"><strong>Figure: Hoversel component</strong></p>
 <p align="center"><img alt="Hoversel component" src="../../../images/hoversel.png" /></p>
 
-  
-<p align="center"><strong>Figure: Hoversel hierarchy</strong></p> 
+
+<p align="center"><strong>Figure: Hoversel hierarchy</strong></p>
 <p align="center"><img alt="Hoversel hierarchy" src="../../../images/hoversel_tree.png" /></p>
 
 <h2 id="add">Adding a Hoversel Component</h2>
@@ -69,7 +69,7 @@ Evas_Object *parent;
 /* Create a hoversel */
 hoversel = elm_hoversel_add(parent);
 </pre>
-<p>When activated, the hoversel automatically selects the direction in which to display itself in its parent object&#39;s view.</p>
+<p>When activated, the hoversel automatically selects the direction in which to display itself in its parent object's view.</p>
 
 <h2 id="configure">Configuring the Hoversel</h2>
 
@@ -114,16 +114,16 @@ expanded = elm_hoversel_expanded_get(hoversel);
 <p>To manage items:</p>
 
 <ol><li>Add an item using the <code>elm_hoversel_item_add()</code> function.
-<p>To add an item with a &quot;test&quot; label and the <code>_hoversel_item_cb</code> clicked callback: </p>
+<p>To add an item with a "test" label and the <code>_hoversel_item_cb</code> clicked callback: </p>
 <pre class="prettyprint">
 Elm_Object_Item *it;
 
 it = elm_hoversel_item_add(hoversel, /* Hoversel object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;test&quot;, /* Item label */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, /* Icon file */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_ICON_NONE, /* Icon type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_hoversel_item_cb, /* Clicked callback for the item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL); /* Callback data */
+                           "test", /* Item label */
+                           NULL, /* Icon file */
+                           ELM_ICON_NONE, /* Icon type */
+                           _hoversel_item_cb, /* Clicked callback for the item */
+                           NULL); /* Callback data */
 </pre>
 <p>The signal for the clicked callback is related to an individual item, not the entire hoversel.</p></li>
 <li>
@@ -134,11 +134,11 @@ Eina_List *items;
 items = elm_hoversel_items_get(hoversel);
 </pre></li>
 <li><p>Change the item label using the <code>elm_object_item_part_text_set()</code> function.</p>
-<p>To change the item label to &quot;New Label&quot;:</p>
+<p>To change the item label to "New Label":</p>
 <pre class="prettyprint">
-Elm_Object_Item *it = elm_hoversel_item_add(hoversel, &quot;test&quot;, NULL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_ICON_NONE, NULL, NULL);
-elm_object_item_part_text_set(it, &quot;default&quot;, &quot;New label&quot;);
+Elm_Object_Item *it = elm_hoversel_item_add(hoversel, "test", NULL,
+                                            ELM_ICON_NONE, NULL, NULL);
+elm_object_item_part_text_set(it, "default", "New label");
 </pre></li>
 <li><p>Delete all items together with the <code>elm_hoversel_clear()</code> function:</p>
 <pre class="prettyprint">
@@ -154,9 +154,9 @@ elm_hoversel_clear(hoversel);
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>clicked</code></td>
@@ -183,25 +183,25 @@ elm_hoversel_clear(hoversel);
          <td>The program language changes.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
- 
+
 <p>The following example shows how to define and register a callback for the <code>dismissed</code> signal:</p>
 
 <pre class="prettyprint">
-evas_object_smart_callback_add(hoversel, &quot;dismissed&quot;, dismissed_cb, data);
+evas_object_smart_callback_add(hoversel, "dismissed", dismissed_cb, data);
 
-/* Callback for the &quot;dismissed&quot; signal */
+/* Callback for the "dismissed" signal */
 /* Called when the hoversel is dismissed */
 void
 dismissed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Hoversel dismissed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Hoversel dismissed\n");
 }
 </pre>
 
@@ -219,7 +219,7 @@ dismissed_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_icon_mn.htm b/org.tizen.guides/html/native/ui/efl/component_icon_mn.htm
index 83fadee..cf09170 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_icon_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_icon_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Icon</title>  
+       <title>Icon</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -43,21 +43,21 @@
 <h1>Icon</h1>
 
 
-<p>The icon UI component is used to display standard icon images (&quot;delete&quot;, &quot;home&quot;, and &quot;apps&quot;) or images coming from a custom file (such as PNG, JPG, and Edje) on icon contexts. The icon component inherits from the <a href="component_image_mn.htm">image</a> component, which means that image functions can be used on icon objects. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Icon.html">Icon</a> API.</p>
+<p>The icon UI component is used to display standard icon images ("delete", "home", and "apps") or images coming from a custom file (such as PNG, JPG, and Edje) on icon contexts. The icon component inherits from the <a href="component_image_mn.htm">image</a> component, which means that image functions can be used on icon objects. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Icon.html">Icon</a> API.</p>
 
 <p>This feature is supported in mobile applications only.</p>
- 
+
  <p>In the following cases, use an icon instead of an image:</p>
  <ul>
    <li>You need a thumbnail version of an original image.</li>
    <li>You need freedesktop.org-provided icon images.</li>
    <li>You need theme-provided icon images (Edje groups).</li>
  </ul>
- 
-   
- 
+
+
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use an icon component in your application:</p>
 <ol>
 <li>Add an icon with the <code>elm_icon_add()</code> function:
@@ -74,7 +74,7 @@ Evas_Object *icon;
 Evas_Object *parent;
 
 icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, &quot;Home&quot;);
+elm_icon_standard_set(icon, "Home");
 </pre>
 </li>
 <li>Register the <a href="#callback">callback</a> functions.</li>
@@ -85,18 +85,18 @@ elm_icon_standard_set(icon, &quot;Home&quot;);
 <li>
 <p>You can use an image in the file system (for example, <code>/tmp/Home.png</code>):</p>
 <pre class="prettyprint">
-elm_image_file_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+elm_image_file_set(icon, "/tmp/Home.png", NULL);
 </pre>
 
 <p>You can also use a group in an Edje file (for example, <code>/tmp/Home.edj</code>):</p>
 <pre class="prettyprint">
-elm_image_file_set(icon, &quot;/tmp/Home.edj&quot;, &quot;elm/icon/Home/default&quot;);
+elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
 </pre>
 </li>
 <li>
 <p>You can generate and use a thumbnail:</p>
 <pre class="prettyprint">
-elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
 </pre>
 
 <p>The <code>elm_icon_thumb_set()</code> function sets the file in the icon and enables the use of a cached thumbnail, if it already exists. Otherwise, it creates a new thumbnail and caches it for future use. The Ethumb library support is required for the thumbnail usage.</p>
@@ -105,7 +105,7 @@ elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
 
 <p>The following example shows a simple use case of the icon component.</p>
 
-<p align="center" class="Table"><strong>Example: Icon use case</strong></p> 
+<p align="center" class="Table"><strong>Example: Icon use case</strong></p>
 <table border="0">
 <tbody>
 <tr>
@@ -126,22 +126,22 @@ Elm_Object_Item *nf_it;
 box = elm_box_add(nf);
 elm_object_content_set(nf, box);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Icon&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Icon", NULL, NULL, box, NULL);
 
 icon = elm_icon_add(box);
-elm_icon_standard_set(icon, &quot;apps&quot;);
+elm_icon_standard_set(icon, "apps");
 evas_object_size_hint_min_set(icon, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
 evas_object_show(icon);
 elm_box_pack_end(box, icon);
 
 icon = elm_icon_add(box);
-elm_icon_standard_set(icon, &quot;home&quot;);
+elm_icon_standard_set(icon, "home");
 evas_object_size_hint_min_set(icon, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
 evas_object_show(icon);
 elm_box_pack_end(box, icon);
 
 icon = elm_icon_add(box);
-elm_icon_standard_set(icon, &quot;clock&quot;);
+elm_icon_standard_set(icon, "clock");
 evas_object_size_hint_min_set(icon, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
 evas_object_show(icon);
 elm_box_pack_end(box, icon);
@@ -386,16 +386,16 @@ elm_box_pack_end(box, icon);
 
 <p>You can register callback functions connected to the following signals for an icon object.</p>
 
-   <p align="center" class="Table"><strong>Table: Icon callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Icon callback signals</strong></p>
 <table border="1">
-   <colgroup> 
+   <colgroup>
       <col /><col />
-   </colgroup> 
+   </colgroup>
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>thumb,done</code></td>
@@ -407,9 +407,9 @@ elm_box_pack_end(box, icon);
          <td>The <code>elm_icon_thumb_set()</code> function fails.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -429,7 +429,7 @@ elm_box_pack_end(box, icon);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_icon_wn.htm b/org.tizen.guides/html/native/ui/efl/component_icon_wn.htm
index a6e4959..2c3a1db 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_icon_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_icon_wn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -45,14 +45,14 @@
 
 <p>This feature is supported in wearable applications only.</p>
 
-<p>The icon component is used to display standard icon images, such as &quot;delete&quot;, &quot;home&quot;, and &quot;apps&quot;, in an icon context.</p>
+<p>The icon component is used to display standard icon images, such as "delete", "home", and "apps", in an icon context.</p>
 
 <p>The icon component inherits from the image component, which means that image functions can be used on the icon component.</p>
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Icon.html">Icon</a> API.</p>
 
 <p align="center"><strong>Figure: Icon hierarchy</strong></p>
-<p align="center"> <img alt="Icon hierarchy" src="../../../images/icon_tree.png" /> </p> 
+<p align="center"> <img alt="Icon hierarchy" src="../../../images/icon_tree.png" /> </p>
 
 <h2 id="add">Adding an Icon Component</h2>
 
@@ -64,7 +64,7 @@ Evas_Object *icon;
 Evas_Object *parent;
 
 icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, &quot;Home&quot;);
+elm_icon_standard_set(icon, "Home");
 </pre>
 
 <h2 id="image">Changing the Image File</h2>
@@ -74,18 +74,18 @@ elm_icon_standard_set(icon, &quot;Home&quot;);
 <li>
 <p>You can use an image in the filesystem (for example, <code>/tmp/Home.png</code>):</p>
 <pre class="prettyprint">
-elm_image_file_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+elm_image_file_set(icon, "/tmp/Home.png", NULL);
 </pre>
 
 <p>You can also use a group in an Edje file (for example, <code>/tmp/Home.edj</code>):</p>
 <pre class="prettyprint">
-elm_image_file_set(icon, &quot;/tmp/Home.edj&quot;, &quot;elm/icon/Home/default&quot;);
+elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
 </pre>
 </li>
 <li>
 <p>You can generate and use a thumbnail:</p>
 <pre class="prettyprint">
-elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
+elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
 </pre>
 
 <p>The <code>elm_icon_thumb_set()</code> function sets the file in the icon and enables the use of a cached thumbnail, if it already exists. Otherwise, it creates a new thumbnail and caches it for future use. The Ethumb library support is required for the thumbnail usage.</p>
@@ -99,7 +99,7 @@ elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
    <li><code>thumb,done</code>: The <code>elm_icon_thumb_set()</code> function is completed with success.</li>
    <li><code>thumb,error</code>: The <code>elm_icon_thumb_set()</code> function fails.</li>
   </ul>
-  
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -121,7 +121,7 @@ elm_icon_thumb_set(icon, &quot;/tmp/Home.png&quot;, NULL);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_image_mn.htm b/org.tizen.guides/html/native/ui/efl/component_image_mn.htm
index 7d6ea99..a034714 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_image_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_image_mn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -48,11 +48,11 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Image.html">Image</a> API.</p>
 
-<p align="center"><strong>Figure: Image component</strong></p> 
-<p align="center"> <img alt="Image component" src="../../../images/image.png" /> </p>   
+<p align="center"><strong>Figure: Image component</strong></p>
+<p align="center"> <img alt="Image component" src="../../../images/image.png" /> </p>
 
-<p align="center"><strong>Figure: Image hierarchy</strong></p> 
-<p align="center"> <img alt="Image hierarchy" src="../../../images/image_tree.png" /> </p>   
+<p align="center"><strong>Figure: Image hierarchy</strong></p>
+<p align="center"> <img alt="Image hierarchy" src="../../../images/image_tree.png" /> </p>
 
 <h2 id="add">Adding an Image Component</h2>
 
@@ -76,7 +76,7 @@ elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
 </pre>
 </li>
 <li>
-<p>To keep the original aspect ratio when resizing the image, define how the image fits into the object&#39;s area:</p>
+<p>To keep the original aspect ratio when resizing the image, define how the image fits into the object's area:</p>
 <pre class="prettyprint">
 /* Tell the image to keep original aspect ratio */
 elm_image_aspect_fixed_set(image, EINA_TRUE);
@@ -105,7 +105,7 @@ elm_image_preload_disabled_set(image, EINA_TRUE);
   <ul>
    <li><code>ELM_IMAGE_ORIENT_0</code>: No orientation change.</li>
    <li><code>ELM_IMAGE_ROTATE_90</code>: Rotate the image 90 degrees clockwise.</li>
-   <li><code>ELM_IMAGE_ROTATE_180</code>: Rotate the image 180 degrees clockwise.</li>   
+   <li><code>ELM_IMAGE_ROTATE_180</code>: Rotate the image 180 degrees clockwise.</li>
    <li><code>ELM_IMAGE_ROTATE_270</code>: Rotate the image 90 degrees counter-clockwise.</li>
    <li><code>ELM_IMAGE_FLIP_HORIZONTAL</code>: Flip the image horizontally.</li>
    <li><code>ELM_IMAGE_FLIP_VERTICAL</code>: Flip the image vertically.</li>
@@ -127,8 +127,8 @@ elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
 
 <pre class="prettyprint">
 if (elm_image_animated_available_get(image)) {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_image_animated_set(image, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_image_animated_play_set(image, EINA_TRUE);
+    elm_image_animated_set(image, EINA_TRUE);
+    elm_image_animated_play_set(image, EINA_TRUE);
 }
 </pre>
 </li>
@@ -142,9 +142,9 @@ if (elm_image_animated_available_get(image)) {
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>drop</code></td>
@@ -156,9 +156,9 @@ if (elm_image_animated_available_get(image)) {
          <td>The image is clicked.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -166,16 +166,16 @@ if (elm_image_animated_available_get(image)) {
 
 <p>The following example shows how to define and register a callback for the <code>clicked</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(image, &quot;clicked&quot;, clicked_cb, data);
+evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
 
-/* Callback for the &quot;clicked&quot; signal */
+/* Callback for the "clicked" signal */
 /* Called when the user clicks on the image */
 void
 clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Image clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
 }
-</pre>  
+</pre>
 
 <div class="note">
        <strong>Note</strong>
@@ -191,7 +191,7 @@ clicked_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_image_wn.htm b/org.tizen.guides/html/native/ui/efl/component_image_wn.htm
index 8b78209..cc75634 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_image_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_image_wn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -49,10 +49,10 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Image.html">Image</a> API.</p>
 <p align="center"><strong>Figure: Image component</strong></p>
-<p align="center"> <img alt="Image component" src="../../../images/image_wn.png" /> </p>  
+<p align="center"> <img alt="Image component" src="../../../images/image_wn.png" /> </p>
 
 <p align="center"><strong>Figure: Image hierarchy</strong></p>
-<p align="center"> <img alt="Image hierarchy" src="../../../images/image_tree.png" /> </p>   
+<p align="center"> <img alt="Image hierarchy" src="../../../images/image_tree.png" /> </p>
 
 <h2 id="add">Adding an Image Component</h2>
 
@@ -75,8 +75,8 @@ elm_image_no_scale_set(image, EINA_TRUE);
 elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
 </pre>
 </li>
-<li> 
-<p>To keep the original aspect ratio when resizing the image, define how the image fits into the object&#39;s area:</p>
+<li>
+<p>To keep the original aspect ratio when resizing the image, define how the image fits into the object's area:</p>
 <pre class="prettyprint">
 /* Tell the image to keep original aspect ratio */
 elm_image_aspect_fixed_set(image, EINA_TRUE);
@@ -105,7 +105,7 @@ elm_image_preload_disabled_set(image, EINA_TRUE);
   <ul>
    <li><code>ELM_IMAGE_ORIENT_0</code>: No orientation change.</li>
    <li><code>ELM_IMAGE_ROTATE_90</code>: Rotate the image 90 degrees clockwise.</li>
-   <li><code>ELM_IMAGE_ROTATE_180</code>: Rotate the image 180 degrees clockwise.</li>   
+   <li><code>ELM_IMAGE_ROTATE_180</code>: Rotate the image 180 degrees clockwise.</li>
    <li><code>ELM_IMAGE_ROTATE_270</code>: Rotate the image 90 degrees counter-clockwise.</li>
    <li><code>ELM_IMAGE_FLIP_HORIZONTAL</code>: Flip the image horizontally.</li>
    <li><code>ELM_IMAGE_FLIP_VERTICAL</code>: Flip the image vertically.</li>
@@ -124,7 +124,7 @@ elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
 <p>To receive notifications about the image events, listen to the following signals:</p>
   <ul>
    <li><code>drop</code>: An image typed object is dropped onto the object in question. <p>The <code>event_info</code> callback parameter is the path to that image file.</p></li>
-   <li><code>clicked</code>: The image is clicked. 
+   <li><code>clicked</code>: The image is clicked.
    <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
   </ul>
 
@@ -133,20 +133,20 @@ elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
 
-<p>To register and define a callback for the <code>clicked</code> signal:</p>  
+<p>To register and define a callback for the <code>clicked</code> signal:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(image, &quot;clicked&quot;, clicked_cb, data);
+    evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
 }
 
-/* Callback for the &quot;clicked&quot; signal */
+/* Callback for the "clicked" signal */
 /* Called when the user clicks on the image */
 void
 clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Image clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
 }
-</pre> 
+</pre>
 
 <div class="note">
        <strong>Note</strong>
@@ -162,7 +162,7 @@ clicked_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_index_mn.htm b/org.tizen.guides/html/native/ui/efl/component_index_mn.htm
index 385b140..98208a0 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_index_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_index_mn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -44,12 +44,12 @@
 <h1>Index</h1>
 
 <p>The index UI component gives you an index for fast access to a group of other UI items. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Index.html">Index</a> API.</p>
-   
+
  <p>This feature is supported in mobile applications only.</p>
- 
- 
+
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use an index component in your application:</p>
 <ol>
 <li>Add an index with the <code>elm_index_add()</code> function:
@@ -60,9 +60,9 @@ index = elm_index_add(parent);
 </pre>
 </li>
 <li>Configure the index and set its <a href="#style">style</a>.</li>
-<li>Append items to the index with the <code>elm_index_item_append()</code> function. The function takes 5 parameters: the pointer of the toolbar, a file path of an icon, a text, a callback function to call when the item is clicked, and the parameter passed to the callback. 
+<li>Append items to the index with the <code>elm_index_item_append()</code> function. The function takes 5 parameters: the pointer of the toolbar, a file path of an icon, a text, a callback function to call when the item is clicked, and the parameter passed to the callback.
 <pre class="prettyprint">
-elm_index_item_append(index, &quot;A&quot;, _item_selected_cb, NULL);
+elm_index_item_append(index, "A", _item_selected_cb, NULL);
 </pre>
 </li>
 <li>Register the <a href="#callback">callback</a> functions.</li>
@@ -91,12 +91,12 @@ index = elm_index_add(nf);
 
 for (i = 0; i &lt; 26; i++)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;%c&quot;, (&#39;A&#39; + i));
-&nbsp;&nbsp;&nbsp;&nbsp;elm_index_item_append(index, buf, NULL, NULL);
+    sprintf(buf, "%c", ('A' + i));
+    elm_index_item_append(index, buf, NULL, NULL);
 }
 
 evas_object_show(index);
-elm_naviframe_item_push(nf, &quot;Index&quot;, NULL, NULL, index, NULL);
+elm_naviframe_item_push(nf, "Index", NULL, NULL, index, NULL);
 </pre>
 </td>
 <td>
@@ -108,7 +108,7 @@ elm_naviframe_item_push(nf, &quot;Index&quot;, NULL, NULL, index, NULL);
 
 <h2 id="connect">Index Usage with a List</h2>
 
-<p>The most common usage of an index is with a list. When a list has many items, you can &quot;bring in&quot; a list item by touching the corresponding index item instead of scrolling the list. Remember that index and list are independent UI components. You need to do an extra job to use an index to control a list.</p>
+<p>The most common usage of an index is with a list. When a list has many items, you can "bring in" a list item by touching the corresponding index item instead of scrolling the list. Remember that index and list are independent UI components. You need to do an extra job to use an index to control a list.</p>
 <p>To connect index items with list items:</p>
 <ol>
 <li>Overlap an index on the top of a list using a container object such as a layout or a table.</li>
@@ -116,24 +116,24 @@ elm_naviframe_item_push(nf, &quot;Index&quot;, NULL, NULL, index, NULL);
 <pre class="prettyprint">
 Elm_Object_Item *it;
 
-it = elm_list_item_append(list, &quot;tizen&quot;, NULL, NULL, NULL, NULL);
-elm_index_item_append(index, &quot;T&quot;, NULL, it);
-</pre> 
+it = elm_list_item_append(list, "tizen", NULL, NULL, NULL, NULL);
+elm_index_item_append(index, "T", NULL, it);
+</pre>
 </li>
 <li>Register a callback function to the index for the <code>changed</code> signal. Bring in the corresponding list item in the callback function. The <code>event_info</code> parameter is the changed index item and the <code>elm_object_item_data_get()</code> function retrieves the list item passed to <code>elm_index_item_append()</code> function.
 <pre class="prettyprint">
-void 
+void
 index_changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_list_item_bring_in(elm_object_item_data_get(event_info));
+    elm_list_item_bring_in(elm_object_item_data_get(event_info));
 }
-</pre> 
+</pre>
 </li>
 </ol>
 
 <p>The following example shows an index with a list.</p>
 
-<p align="center" class="Table"><strong>Example: Index with list</strong></p> 
+<p align="center" class="Table"><strong>Example: Index with list</strong></p>
 <table border="0">
 <tbody>
 <tr>
@@ -169,20 +169,20 @@ evas_object_show(index);
 
 for (i = 0; i &lt; 26; i++)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;%c&quot;, (&#39;A&#39; + i));
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(str_buf, &quot;%s string&quot;, buf);
-&nbsp;&nbsp;&nbsp;&nbsp;it = elm_list_item_append(list, str_buf, NULL, NULL, NULL, NULL);
+    sprintf(buf, "%c", ('A' + i));
+    sprintf(str_buf, "%s string", buf);
+    it = elm_list_item_append(list, str_buf, NULL, NULL, NULL, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_index_item_append(index, buf, NULL, it);
+    elm_index_item_append(index, buf, NULL, it);
 }
 
-evas_object_smart_callback_add(index, &quot;changed&quot;, index_changed_cb, list);
-elm_naviframe_item_push(naviframe, &quot;Index&quot;, NULL, NULL, table, NULL);
+evas_object_smart_callback_add(index, "changed", index_changed_cb, list);
+elm_naviframe_item_push(naviframe, "Index", NULL, NULL, table, NULL);
 
 static void
 index_changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_list_item_bring_in(elm_object_item_data_get(event_info));
+    elm_list_item_bring_in(elm_object_item_data_get(event_info));
 }
 </pre>
 </td>
@@ -199,7 +199,7 @@ index_changed_cb(void *data, Evas_Object *obj, void *event_info)
 
 <p>To set the style, use the <code>elm_object_style_set()</code> function:</p>
 <pre class="prettyprint">
-elm_object_style_set(index, &quot;pagecontrol&quot;);
+elm_object_style_set(index, "pagecontrol");
 </pre>
 
 <p>The following table lists the available component styles.</p>
@@ -215,7 +215,7 @@ elm_object_style_set(index, &quot;pagecontrol&quot;);
 <tr>
 <td><code>elm/index/base/vertical/default</code></td>
 <td align="center"><img alt="elm/index/base/vertical/default" src="../../../images/index_default.png" /></td>
-<td>This style has a one-finger-wide area on the right side of the index component&#39;s container. Generally, this style is used together with lists, generic lists, or generic grids.</td>
+<td>This style has a one-finger-wide area on the right side of the index component's container. Generally, this style is used together with lists, generic lists, or generic grids.</td>
 </tr>
 <tr>
 <td><code>elm/index/base/vertical/pagecontrol</code></td>
@@ -238,28 +238,28 @@ elm_index_horizontal_set(index, EINA_TRUE);
 
 <p>You can register callback functions connected to the following signals for an index object.</p>
 
-<p align="center" class="Table"><strong>Table: Index callback signals</strong></p> 
+<p align="center" class="Table"><strong>Table: Index callback signals</strong></p>
 <table border="1">
 <tbody>
 <tr>
-<th>Signal</th> 
-<th>Description</th> 
-<th><code>event_info</code></th> 
+<th>Signal</th>
+<th>Description</th>
+<th><code>event_info</code></th>
 </tr>
 <tr>
 <td><code>changed</code></td>
 <td>The selected index item changes.</td>
-<td>The selected item&#39;s data pointer</td>
+<td>The selected item's data pointer</td>
 </tr>
 <tr>
 <td><code>delay,changed</code></td>
 <td>The selected index item changes, but after a small idling period.</td>
-<td>The selected item&#39;s data pointer</td>
+<td>The selected item's data pointer</td>
 </tr>
 <tr>
 <td><code>selected</code></td>
 <td>The user selects an item by releasing the mouse button.</td>
-<td>The selected item&#39;s data pointer</td>
+<td>The selected item's data pointer</td>
 </tr>
 <tr>
 <td><code>level,up</code></td>
@@ -271,7 +271,7 @@ elm_index_horizontal_set(index, EINA_TRUE);
 <td>The user moves a finger from the second level to the first level.</td>
 <td><code>NULL</code></td>
 </tr>
-</tbody> 
+</tbody>
 </table>
 
 <div class="note">
@@ -293,7 +293,7 @@ elm_index_horizontal_set(index, EINA_TRUE);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_index_wn.htm b/org.tizen.guides/html/native/ui/efl/component_index_wn.htm
index 8ba20dc..1c44502 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_index_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_index_wn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -47,15 +47,15 @@
 
 <p>The index component gives you an index for fast access to a group of other UI items. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas.</p>
 
-<p>In the default theme, the index component is a one-finger-wide area on the right side of the index component&#39;s container. Generally, it is used together with lists, generic lists, or generic grids.</p>
+<p>In the default theme, the index component is a one-finger-wide area on the right side of the index component's container. Generally, it is used together with lists, generic lists, or generic grids.</p>
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Index.html">Index</a> API.</p>
- 
-<p align="center"><strong>Figure: Index component</strong></p> 
-<p align="center"> <img alt="Index component" src="../../../images/index_wn.png" /> </p> 
- 
-<p align="center"><strong>Figure: Index hierarchy</strong></p> 
-<p align="center"> <img alt="Index hierarchy" src="../../../images/index_tree.png" /> </p> 
+
+<p align="center"><strong>Figure: Index component</strong></p>
+<p align="center"> <img alt="Index component" src="../../../images/index_wn.png" /> </p>
+
+<p align="center"><strong>Figure: Index hierarchy</strong></p>
+<p align="center"> <img alt="Index hierarchy" src="../../../images/index_tree.png" /> </p>
 
 <h2 id="add">Adding an Index Component</h2>
 
@@ -76,7 +76,7 @@ index = elm_index_add(parent);
 <pre class="prettyprint">
 Elm_Object_Item *list_item1;
 Elm_Object_Item *list_item2;
-elm_index_item_append(index, &quot;A&quot;, it_select_cb, list_item1);
+elm_index_item_append(index, "A", it_select_cb, list_item1);
 </pre>
 <p>The <code>elm_index_item_append()</code> function appends the indexes to the existing ones. It is also possible to prepend index items with the <code>elm_index_item_prepend()</code> function.</p>
 </li>
@@ -85,7 +85,7 @@ elm_index_item_append(index, &quot;A&quot;, it_select_cb, list_item1);
 <pre class="prettyprint">
 Elm_Object_Item *it[5];
 for (i = 0; i &lt; 5; ++i)
-&nbsp;&nbsp;&nbsp;&nbsp;it[i] = elm_index_item_append(index, NULL, it_select_cb, (void *)i);
+    it[i] = elm_index_item_append(index, NULL, it_select_cb, (void *)i);
 </pre>
 </li>
 <li>
@@ -95,7 +95,7 @@ for (i = 0; i &lt; 5; ++i)
 void
 it_select_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item1 selected\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Item1 selected\n");
 }
 </pre>
 </li>
@@ -106,16 +106,16 @@ it_select_cb(void *data, Evas_Object *obj, void *event_info)
 
 <p>To receive notifications about the index events, listen to the following signals:</p>
   <ul>
-   <li><code>changed</code>: The selected index item changes.  
-<p>The <code>event_info</code> callback parameter is the selected item&#39;s data pointer.</p></li>
-   <li><code>delay,changed</code>: The selected index item changes, but after a small idling period.  
-<p>The <code>event_info</code> callback parameter is the selected item&#39;s data pointer.</p></li>
-   <li><code>selected</code>: The user selects an item by releasing the mouse button.  
-<p>The <code>event_info</code> callback parameter is the selected item&#39;s data pointer.</p></li>
+   <li><code>changed</code>: The selected index item changes.
+<p>The <code>event_info</code> callback parameter is the selected item's data pointer.</p></li>
+   <li><code>delay,changed</code>: The selected index item changes, but after a small idling period.
+<p>The <code>event_info</code> callback parameter is the selected item's data pointer.</p></li>
+   <li><code>selected</code>: The user selects an item by releasing the mouse button.
+<p>The <code>event_info</code> callback parameter is the selected item's data pointer.</p></li>
    <li><code>level,up</code>: The user moves a finger from the first level to the second level.</li>
    <li><code>level,down</code>: The user moves a finger from the second level to the first level.</li>
   </ul>
-  
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -126,12 +126,12 @@ it_select_cb(void *data, Evas_Object *obj, void *event_info)
 static void
 _index_selected_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *lit = event_info;
+    Elm_Object_Item *lit = event_info;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Code that does the desired action */
+    /* Code that does the desired action */
 }
 
-evas_object_smart_callback_add(index, &quot;selected&quot;, _index_selected_cb, NULL);
+evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
 </pre>
 
 <div class="note">
@@ -148,7 +148,7 @@ evas_object_smart_callback_add(index, &quot;selected&quot;, _index_selected_cb,
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_label_mn.htm b/org.tizen.guides/html/native/ui/efl/component_label_mn.htm
index c69ec94..191085a 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_label_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_label_mn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -37,7 +37,7 @@
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Label</h1>
@@ -45,9 +45,9 @@
 <p>The label UI component displays texts with a simple HTML-like markup. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Label.html">Label</a> API.</p>
 
  <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a label component in your application:</p>
 <ol>
 <li>Add a label with the <code>elm_label_add()</code> function:
@@ -59,18 +59,18 @@ label = elm_label_add(parent);
 </li>
 <li>Set a text to the label with the <code>elm_object_text_set()</code> function. Label is based on <a href="evas_objects_n.htm#block">textblock</a>, which means you can use every markup for textblock to a text in a label.
 <pre class="prettyprint">
-elm_object_text_set(label, &quot;This is a label.&quot;);
+elm_object_text_set(label, "This is a label.");
 </pre>
 </li>
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>slide,end</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(label, &quot;slide,end&quot;, slide_end_cb, data);
+evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
 
 void
 slide_end_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slide has reach the end.\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
 }
 </pre>
 </li>
@@ -97,10 +97,10 @@ Evas_Object *label;
 box = elm_box_add(nf);
 elm_object_content_set(nf, box);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Label&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Label", NULL, NULL, box, NULL);
 
 label = elm_label_add(box);
-elm_object_text_set(label, &quot;This is a label&quot;);
+elm_object_text_set(label, "This is a label");
 evas_object_show(label);
 elm_box_pack_end(box, label);
 </pre>
@@ -130,23 +130,23 @@ elm_label_slide_duration_set(label, 3);
 </tr>
 <tr>
  <td><code>default</code></td>
- <td>No animation is used.</td> 
+ <td>No animation is used.</td>
 </tr>
 <tr>
  <td><code>marker</code></td>
- <td>The text is centered and bolded.</td> 
+ <td>The text is centered and bolded.</td>
 </tr>
 <tr>
  <td><code>slide_long</code></td>
- <td>The text appears from the right of the screen and slides until it disappears in the left of the screen (reappearing on the right again).</td> 
+ <td>The text appears from the right of the screen and slides until it disappears in the left of the screen (reappearing on the right again).</td>
 </tr>
 <tr>
  <td><code>slide_short</code></td>
- <td>The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the position is reset.</td> 
+ <td>The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the position is reset.</td>
 </tr>
 <tr>
  <td><code>slide_bounce</code></td>
- <td>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.</td> 
+ <td>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.</td>
 </tr>
 </tbody>
 </table>
@@ -160,9 +160,9 @@ elm_label_slide_duration_set(label, 3);
 <table border="1">
 <tbody>
 <tr>
- <th>Signal</th> 
- <th>Description</th> 
-<th><code>event_info</code></th> 
+ <th>Signal</th>
+ <th>Description</th>
+<th><code>event_info</code></th>
 </tr>
 <tr>
  <td><code>language,changed</code></td>
@@ -176,7 +176,7 @@ elm_label_slide_duration_set(label, 3);
 </tr>
 <tr>
  <td><code>anchor,clicked</code></td>
- <td>The anchor is clicked.</td> 
+ <td>The anchor is clicked.</td>
  <td><code>Elm_Label_Anchor_Info</code> object</td>
 </tr>
 <tr>
@@ -189,7 +189,7 @@ elm_label_slide_duration_set(label, 3);
  <td>The anchor is released by mouse up.</td>
  <td><code>Elm_Label_Anchor_Info</code> object</td>
 </tr>
-</tbody> 
+</tbody>
 </table>
 
 <div class="note">
@@ -211,7 +211,7 @@ elm_label_slide_duration_set(label, 3);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_label_wn.htm b/org.tizen.guides/html/native/ui/efl/component_label_wn.htm
index 34af814..11bf686 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_label_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_label_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Label</title>  
+       <title>Label</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Label</h1>
@@ -49,11 +49,11 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Label.html">Label</a> API.</p>
 
-<p align="center"><strong>Figure: Label component</strong></p> 
-<p align="center"> <img alt="Label component" src="../../../images/label_wn.png" /> </p> 
- 
-<p align="center"><strong>Figure: Label hierarchy</strong></p> 
-<p align="center"> <img alt="Label hierarchy" src="../../../images/label_tree.png" /> </p> 
+<p align="center"><strong>Figure: Label component</strong></p>
+<p align="center"> <img alt="Label component" src="../../../images/label_wn.png" /> </p>
+
+<p align="center"><strong>Figure: Label hierarchy</strong></p>
+<p align="center"> <img alt="Label hierarchy" src="../../../images/label_tree.png" /> </p>
 
 <h2 id="add">Adding a Label Component</h2>
 
@@ -62,7 +62,7 @@
 <pre class="prettyprint">
 Evas_Object *label = elm_label_add(win);
 
-elm_object_text_set(label, &quot;Some long text for our label, that is not so long&quot;);
+elm_object_text_set(label, "Some long text for our label, that is not so long");
 </pre>
 
 <h2 id="configure">Configuring the Label</h2>
@@ -72,17 +72,17 @@ elm_object_text_set(label, &quot;Some long text for our label, that is not so lo
 <li>
 <p>Modify the style with which the label component displays text.</p>
 <p>The following styles are available:</p>
-  <ul> 
-   <li><code>default</code>: No animation</li> 
-   <li><code>marker</code>: The text is centered and bolded.</li> 
-   <li><code>slide_long</code>: The text appears from the right of the screen and slides until it disappears in the left of the screen (reappearing on the right again).</li> 
+  <ul>
+   <li><code>default</code>: No animation</li>
+   <li><code>marker</code>: The text is centered and bolded.</li>
+   <li><code>slide_long</code>: The text appears from the right of the screen and slides until it disappears in the left of the screen (reappearing on the right again).</li>
    <li><code>slide_roll</code>: The text appears from the left of the label and slides to the right to show the overflow, and then appears from the right of the label again.</li>
-   <li><code>slide_short</code>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the position is reset.</li> 
-   <li><code>slide_bounce</code>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>   
+   <li><code>slide_short</code>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the position is reset.</li>
+   <li><code>slide_bounce</code>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>
   </ul>
 
 <pre class="prettyprint">
-elm_object_style_set(label, &quot;slide_roll&quot;);
+elm_object_style_set(label, "slide_roll");
 </pre>
 </li>
 <li>
@@ -101,32 +101,32 @@ elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
   <ul>
    <li><code>language,changed</code>: The program language is changed.</li>
    <li><code>slide,end</code>: The slide reaches the end.</li>
-   <li><code>anchor,clicked</code>: The anchor is clicked. 
+   <li><code>anchor,clicked</code>: The anchor is clicked.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Label_Anchor_Info</code> object.</p></li>
-   <li><code>anchor,mouse,down</code>: The anchor is pressed by mouse down. 
+   <li><code>anchor,mouse,down</code>: The anchor is pressed by mouse down.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Label_Anchor_Info</code> object.</p></li>
-   <li><code>anchor,mouse,up</code>: The anchor is released by mouse up. 
+   <li><code>anchor,mouse,up</code>: The anchor is released by mouse up.
    <p>The <code>event_info</code> callback parameter points to an <code>Elm_Label_Anchor_Info</code> object.</p></li>
   </ul>
-  
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
 </div>
-  
+
 <p>To register and define a callback for the <code>slide,end</code> signal:</p>
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(label, &quot;slide,end&quot;, slide_end_cb, data);
+    evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
 }
 
-/* Callback for the &quot;slide,end&quot; signal */
+/* Callback for the "slide,end" signal */
 /* Called when the label slide reaches the end */
 void
 slide_end_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slide has reach the end.\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
 }
 </pre>
 
@@ -144,7 +144,7 @@ slide_end_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_list_mn.htm b/org.tizen.guides/html/native/ui/efl/component_list_mn.htm
index 3c4e5ab..be57ca4 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_list_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_list_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>List</title>  
+       <title>List</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,35 +28,35 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#add">Adding a List Component</a></li>
-                       <li><a href="#add_item">Adding List Items</a></li>                      
+                       <li><a href="#add_item">Adding List Items</a></li>
                        <li><a href="#change">Modifying List Items</a></li>
                        <li><a href="#use">Accessing and Selecting List Items</a></li>
-                       <li><a href="#callback">Using the List Callbacks</a></li>               
+                       <li><a href="#callback">Using the List Callbacks</a></li>
                </ul>
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>List</h1>
 
 <p>This feature is supported in mobile applications only.</p>
 
-  
+
  <p>The list is a very simple UI component used to manage a limited number of items. For lists with a lot of items, use the <a href="component_genlist_mn.htm">Genlist</a>.</p>
 
  <p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__List.html">List</a> API.</p>
- 
- <p align="center"><strong>Figure: List component</strong></p> 
-<p align="center"> <img alt="List component" src="../../../images/list.png" /> </p> 
-  
-  <p align="center"><strong>Figure: List hierarchy</strong></p> 
-<p align="center"> <img alt="List hierarchy" src="../../../images/list_tree.png" /> </p> 
- 
+
+ <p align="center"><strong>Figure: List component</strong></p>
+<p align="center"> <img alt="List component" src="../../../images/list.png" /> </p>
+
+  <p align="center"><strong>Figure: List hierarchy</strong></p>
+<p align="center"> <img alt="List hierarchy" src="../../../images/list_tree.png" /> </p>
+
 <h2 id="add">Adding a List Component</h2>
 
 <p>To add a list component, use the <code>elm_list_add()</code> function:</p>
@@ -82,21 +82,21 @@ int i;
 static void
 _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool selected = elm_list_item_selected_get(list_it);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;item is %s\n&quot;, selected? &quot;selected&quot;: &quot;unselected&quot;);
+    Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+    Eina_Bool selected = elm_list_item_selected_get(list_it);
+    dlog_print(DLOG_INFO, LOG_TAG, "item is %s\n", selected? "selected": "unselected");
 }
 
 for (i = 0; i &lt; 10; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ic;
-&nbsp;&nbsp;&nbsp;&nbsp;char tmp[8];
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Item %02d&quot;, i);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create an icon */
-&nbsp;&nbsp;&nbsp;&nbsp;ic = elm_icon_add(win);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the file to the icon file */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add the item to the list */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+    Evas_Object *ic;
+    char tmp[8];
+    snprintf(tmp, sizeof(tmp), "Item %02d", i);
+    /* Create an icon */
+    ic = elm_icon_add(win);
+    /* Set the file to the icon file */
+    elm_image_file_set(ic, "path/to/file", NULL);
+    /* Add the item to the list */
+    elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
 }
 </pre>
 
@@ -117,17 +117,17 @@ Elm_Object_Item *it;
 /* Retrieve the current selected item */
 it = elm_list_selected_item_get(list);
 if (!it)
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 
 ic = elm_icon_add(win);
 /* Set the file to the icon file */
-elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+elm_image_file_set(ic, "path/to/file", NULL);
 /* Change the first icon */
-elm_object_item_part_content_set(it, &quot;start&quot;, ic);
+elm_object_item_part_content_set(it, "start", ic);
 /* Change the second icon */
-elm_object_item_part_content_set(it, &quot;end&quot;, ic);
+elm_object_item_part_content_set(it, "end", ic);
 /* Change the label */
-elm_object_item_text_set(it, &quot;I&#39;ve been selected !&quot;);
+elm_object_item_text_set(it, "I've been selected !");
 </pre>
 
 <h2 id="use">Accessing and Selecting List Items</h2>
@@ -176,7 +176,7 @@ Elm_Object_Item *it;
 
 selected_items = elm_list_selected_items_get(list);
 EINA_LIST_FOREACH(selected_items, l, it)
-&nbsp;&nbsp;&nbsp;&nbsp;elm_list_item_selected_set(it, EINA_FALSE);
+    elm_list_item_selected_set(it, EINA_FALSE);
 </pre></li>
 
 <li>Moving within the list:
@@ -202,28 +202,28 @@ elm_list_item_bring_in(next);
 
 <h2 id="callback">Using the List Callbacks</h2>
 
- <p>To receive notifications about the list events, listen to the following signals:</p> 
-  <ul> 
-   <li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar). 
-   <p>The <code>event_info</code> callback parameter points at the activated item.</p></li> 
-   <li><code>clicked,double</code>: The item is double-clicked. 
-   <p>The <code>event_info</code> callback parameter points at the double-clicked item.</p></li> 
-   <li><code>selected</code>: The item is selected. 
-   <p>The <code>event_info</code> callback parameter points at the selected item.</p></li> 
-   <li><code>unselected</code>: The item is unselected. 
-   <p>The <code>event_info</code> callback parameter points at the unselected item.</p></li> 
-   <li><code>longpressed</code>: The item is long-pressed. 
-   <p>The <code>event_info</code> callback parameter points at the long-pressed item.</p></li> 
-   <li><code>edge,top</code>: The list is scrolled to the top edge.</li> 
-   <li><code>edge,bottom</code>: The list is scrolled to the bottom edge.</li> 
-   <li><code>edge,left</code>: The list is scrolled to the left edge.</li> 
-   <li><code>edge,right</code>: The list is scrolled to the right edge.</li> 
-   <li><code>highlighted</code>: An item on the list is highlighted. 
-   <p>The <code>event_info</code> callback parameter points at the highlighted item.</p></li> 
-   <li><code>unhighlighted</code>: An item in the list is unhighlighted. 
-   <p>The <code>event_info</code> callback parameter points at the unhighlighted item.</p></li>  
+ <p>To receive notifications about the list events, listen to the following signals:</p>
+  <ul>
+   <li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar).
+   <p>The <code>event_info</code> callback parameter points at the activated item.</p></li>
+   <li><code>clicked,double</code>: The item is double-clicked.
+   <p>The <code>event_info</code> callback parameter points at the double-clicked item.</p></li>
+   <li><code>selected</code>: The item is selected.
+   <p>The <code>event_info</code> callback parameter points at the selected item.</p></li>
+   <li><code>unselected</code>: The item is unselected.
+   <p>The <code>event_info</code> callback parameter points at the unselected item.</p></li>
+   <li><code>longpressed</code>: The item is long-pressed.
+   <p>The <code>event_info</code> callback parameter points at the long-pressed item.</p></li>
+   <li><code>edge,top</code>: The list is scrolled to the top edge.</li>
+   <li><code>edge,bottom</code>: The list is scrolled to the bottom edge.</li>
+   <li><code>edge,left</code>: The list is scrolled to the left edge.</li>
+   <li><code>edge,right</code>: The list is scrolled to the right edge.</li>
+   <li><code>highlighted</code>: An item on the list is highlighted.
+   <p>The <code>event_info</code> callback parameter points at the highlighted item.</p></li>
+   <li><code>unhighlighted</code>: An item in the list is unhighlighted.
+   <p>The <code>event_info</code> callback parameter points at the unhighlighted item.</p></li>
   </ul>
-  
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -233,18 +233,18 @@ elm_list_item_bring_in(next);
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *list;
+    Evas_Object *list;
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(list, &quot;clicked,double&quot;, double_clicked_cb, data);
+    evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
 }
 
-/* Callback for the &quot;clicked,double&quot; signal */
+/* Callback for the "clicked,double" signal */
 /* Called when the button is double-clicked by the user */
 void
 double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_Object_Item *it = event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;elm_list_selected_item_set(it, EINA_FALSE);
+    elm_Object_Item *it = event_info;
+    elm_list_selected_item_set(it, EINA_FALSE);
 }
 </pre>
 
@@ -262,7 +262,7 @@ double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_list_wn.htm b/org.tizen.guides/html/native/ui/efl/component_list_wn.htm
index d7d1fd7..035c3d1 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_list_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_list_wn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -32,7 +32,7 @@
                        <li><a href="#change">Modifying List Items</a></li>
                        <li><a href="#use">Accessing and Selecting List Items</a></li>
                        <li><a href="#callback">Using the List Callbacks</a></li>
-                       
+
                </ul>
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -41,24 +41,24 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>List</h1>
 
 <p>This feature is supported in wearable applications only.</p>
 
-  
+
  <p>The list is a very simple UI component used to manage a limited number of items. For lists with a lot of items, use the <a href="component_genlist_wn.htm">Genlist</a>.</p>
 
  <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__List.html">List</a> API.</p>
- 
+
  <p align="center"><strong>Figure: List component</strong></p>
-<p align="center"> <img alt="List component" src="../../../images/list_wn.png" /> </p> 
-  
+<p align="center"> <img alt="List component" src="../../../images/list_wn.png" /> </p>
+
   <p align="center"><strong>Figure: List hierarchy</strong></p>
-<p align="center"> <img alt="List hierarchy" src="../../../images/list_tree.png" /> </p> 
- 
+<p align="center"> <img alt="List hierarchy" src="../../../images/list_tree.png" /> </p>
+
 <h2 id="add">Adding a List Component</h2>
 
 <p>To add a list component, use the <code>elm_list_add()</code> function:</p>
@@ -84,21 +84,21 @@ int i;
 static void
 _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool selected = elm_list_item_selected_get(list_it);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;item is %s\n&quot;, selected? &quot;selected&quot;: &quot;unselected&quot;);
+    Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+    Eina_Bool selected = elm_list_item_selected_get(list_it);
+    dlog_print(DLOG_INFO, LOG_TAG, "item is %s\n", selected? "selected": "unselected");
 }
 
 for (i = 0; i &lt; 10; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *ic;
-&nbsp;&nbsp;&nbsp;&nbsp;char tmp[8];
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Item %02d&quot;, i);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create an icon */
-&nbsp;&nbsp;&nbsp;&nbsp;ic = elm_icon_add(win);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the file to the icon file */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add the item to the list */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+    Evas_Object *ic;
+    char tmp[8];
+    snprintf(tmp, sizeof(tmp), "Item %02d", i);
+    /* Create an icon */
+    ic = elm_icon_add(win);
+    /* Set the file to the icon file */
+    elm_image_file_set(ic, "path/to/file", NULL);
+    /* Add the item to the list */
+    elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
 }
 </pre>
 
@@ -119,17 +119,17 @@ Elm_Object_Item *it;
 /* Retrieve the current selected item */
 it = elm_list_selected_item_get(list);
 if (!it)
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 
 ic = elm_icon_add(win);
 /* Set the file to the icon file */
-elm_image_file_set(ic, &quot;path/to/file&quot;, NULL);
+elm_image_file_set(ic, "path/to/file", NULL);
 /* Change the first icon */
-elm_object_item_part_content_set(it, &quot;start&quot;, ic);
+elm_object_item_part_content_set(it, "start", ic);
 /* Change the second icon */
-elm_object_item_part_content_set(it, &quot;end&quot;, ic);
+elm_object_item_part_content_set(it, "end", ic);
 /* Change the label */
-elm_object_item_text_set(it, &quot;I&#39;ve been selected !&quot;);
+elm_object_item_text_set(it, "I've been selected !");
 </pre>
 
 <h2 id="use">Accessing and Selecting List Items</h2>
@@ -170,7 +170,7 @@ elm_list_multi_select_set(list, EINA_TRUE);
 <p>To retrieve all selected items and set their state to <code>unselected</code>:</p>
 
 <pre class="prettyprint">
-Evas_Object *list; 
+Evas_Object *list;
 Eina_List *l;
 Eina_List *selected_items;
 /* Elm_Object_Item list */
@@ -178,7 +178,7 @@ Elm_Object_Item *it;
 
 selected_items = elm_list_selected_items_get(list);
 EINA_LIST_FOREACH(selected_items, l, it)
-&nbsp;&nbsp;&nbsp;&nbsp;elm_list_item_selected_set(it, EINA_FALSE);
+    elm_list_item_selected_set(it, EINA_FALSE);
 </pre></li>
 
 <li>Moving within the list:
@@ -204,26 +204,26 @@ elm_list_item_bring_in(next);
 
 <h2 id="callback">Using the List Callbacks</h2>
 
- <p>To receive notifications about the list events, listen to the following signals:</p> 
-  <ul> 
-   <li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar). 
-   <p>The <code>event_info</code> callback parameter points at the activated item.</p></li> 
-   <li><code>clicked,double</code>: The item is double-clicked. 
-   <p>The <code>event_info</code> callback parameter points at the double-clicked item.</p></li> 
-   <li><code>selected</code>: The item is selected. 
-   <p>The <code>event_info</code> callback parameter points at the selected item.</p></li> 
-   <li><code>unselected</code>: The item is unselected. 
-   <p>The <code>event_info</code> callback parameter points at the unselected item.</p></li> 
-   <li><code>longpressed</code>: The item is long-pressed. 
-   <p>The <code>event_info</code> callback parameter points at the long-pressed item.</p></li> 
-   <li><code>edge,top</code>: The list is scrolled to the top edge.</li> 
-   <li><code>edge,bottom</code>: The list is scrolled to the bottom edge.</li> 
-   <li><code>edge,left</code>: The list is scrolled to the left edge.</li> 
-   <li><code>edge,right</code>: The list is scrolled to the right edge.</li> 
-   <li><code>highlighted</code>: An item on the list is highlighted. 
-   <p>The <code>event_info</code> callback parameter points at the highlighted item.</p></li> 
-   <li><code>unhighlighted</code>: An item in the list is unhighlighted. 
-   <p>The <code>event_info</code> callback parameter points at the unhighlighted item.</p></li>  
+ <p>To receive notifications about the list events, listen to the following signals:</p>
+  <ul>
+   <li><code>activated</code>: The item is double-clicked or pressed (enter | return | spacebar).
+   <p>The <code>event_info</code> callback parameter points at the activated item.</p></li>
+   <li><code>clicked,double</code>: The item is double-clicked.
+   <p>The <code>event_info</code> callback parameter points at the double-clicked item.</p></li>
+   <li><code>selected</code>: The item is selected.
+   <p>The <code>event_info</code> callback parameter points at the selected item.</p></li>
+   <li><code>unselected</code>: The item is unselected.
+   <p>The <code>event_info</code> callback parameter points at the unselected item.</p></li>
+   <li><code>longpressed</code>: The item is long-pressed.
+   <p>The <code>event_info</code> callback parameter points at the long-pressed item.</p></li>
+   <li><code>edge,top</code>: The list is scrolled to the top edge.</li>
+   <li><code>edge,bottom</code>: The list is scrolled to the bottom edge.</li>
+   <li><code>edge,left</code>: The list is scrolled to the left edge.</li>
+   <li><code>edge,right</code>: The list is scrolled to the right edge.</li>
+   <li><code>highlighted</code>: An item on the list is highlighted.
+   <p>The <code>event_info</code> callback parameter points at the highlighted item.</p></li>
+   <li><code>unhighlighted</code>: An item in the list is unhighlighted.
+   <p>The <code>event_info</code> callback parameter points at the unhighlighted item.</p></li>
   </ul>
 
 <div class="note">
@@ -235,18 +235,18 @@ elm_list_item_bring_in(next);
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *list;
+    Evas_Object *list;
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(list, &quot;clicked,double&quot;, double_clicked_cb, data);
+    evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
 }
 
-/* Callback for the &quot;clicked,double&quot; signal */
+/* Callback for the "clicked,double" signal */
 /* Called when the button is double-clicked by the user */
 void
 double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_Object_Item *it = event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;elm_list_selected_item_set(it, EINA_FALSE);
+    elm_Object_Item *it = event_info;
+    elm_list_selected_item_set(it, EINA_FALSE);
 }
 </pre>
 
@@ -264,7 +264,7 @@ double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_map_mn.htm b/org.tizen.guides/html/native/ui/efl/component_map_mn.htm
index b8de3f8..df48f3a 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_map_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_map_mn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -37,7 +37,7 @@
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Map</h1>
@@ -80,12 +80,12 @@ elm_map_region_bring_in(map, 2.2, 48.8);
    <li>Register the <a href="#callback">callback</a> functions.
    <p>The following example shows how to define and register a callback for the <code>clicked</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(map, &quot;clicked&quot;, clicked_cb, data);
+evas_object_smart_callback_add(map, "clicked", clicked_cb, data);
 
 void
 clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Map clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Map clicked\n");
 }
 </pre>
 
@@ -95,9 +95,9 @@ clicked_cb(void *data, Evas_Object *obj, void *event_info)
 <p>The following example shows a simple use case of the map component.</p>
 <p align="center" class="Table"><strong>Example: Map use case</strong></p>
 <table border="0">
-   <colgroup> 
+   <colgroup>
       <col /><col />
-   </colgroup> 
+   </colgroup>
    <tbody>
       <tr>
          <td style="text-align:left;margin-left:auto;margin-right:auto;">
@@ -114,7 +114,7 @@ Evas_Object *map;
 /* Add a box to contain a map and push the box into the naviframe */
 box = elm_box_add(nf);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Map&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Map", NULL, NULL, box, NULL);
 
 /* Add a map */
 map = elm_map_add(box);
@@ -164,9 +164,9 @@ elm_box_pack_end(box, map);
 <table border="1">
    <tbody>
       <tr>
-         <th style="text-align:center;margin-left:auto;margin-right:auto;">Signal</th> 
-         <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-         <th style="text-align:center;margin-left:auto;margin-right:auto;"><code>event_info</code></th> 
+         <th style="text-align:center;margin-left:auto;margin-right:auto;">Signal</th>
+         <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+         <th style="text-align:center;margin-left:auto;margin-right:auto;"><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>clicked</code></td>
@@ -205,12 +205,12 @@ elm_box_pack_end(box, map);
       </tr>
       <tr>
          <td><code>scroll,anim,start</code></td>
-         <td>The scrolling animation starts.</td> 
+         <td>The scrolling animation starts.</td>
          <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>scroll,anim,stop</code></td>
-         <td>The scrolling animation stops.</td> 
+         <td>The scrolling animation stops.</td>
          <td><code>NULL</code></td>
       </tr>
       <tr>
@@ -220,12 +220,12 @@ elm_box_pack_end(box, map);
       </tr>
       <tr>
          <td><code>zoom,stop</code></td>
-         <td>The zoom animation stops.</td> 
+         <td>The zoom animation stops.</td>
          <td><code>NULL</code></td>
       </tr>
       <tr>
          <td><code>zoom,change</code></td>
-         <td>The zoom is changed when using an auto zoom mode.</td> 
+         <td>The zoom is changed when using an auto zoom mode.</td>
          <td><code>NULL</code></td>
       </tr>
       <tr>
@@ -283,7 +283,7 @@ elm_box_pack_end(box, map);
          <td>The map is loaded.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
 
 <div class="note">
@@ -305,7 +305,7 @@ elm_box_pack_end(box, map);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_multibuttonentry_mn.htm b/org.tizen.guides/html/native/ui/efl/component_multibuttonentry_mn.htm
index 187c8ea..d8fbbf4 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_multibuttonentry_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_multibuttonentry_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Multibuttonentry</title>  
+       <title>Multibuttonentry</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,10 +32,10 @@
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -77,7 +77,7 @@
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_notify_mn.htm b/org.tizen.guides/html/native/ui/efl/component_notify_mn.htm
index 50df188..b2f34f2 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_notify_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_notify_mn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -37,7 +37,7 @@
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Notify</h1>
@@ -45,9 +45,9 @@
 
 <p>The notify UI component displays a container in a particular region of the parent object. It can receive some content, and become automatically hidden after a certain amount of time. The <a href="component_popup_mn.htm">popup</a> component is very similar to the notify component, but supports many common layouts. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Notify.html">Notify</a> API.</p>
    <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a notify component in your application:</p>
 <ol>
 <li>Add a notify component with the <code>elm_notify_add()</code> function:
@@ -74,12 +74,12 @@ elm_object_content_set(notify, label);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>timeout</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(notify, &quot;timeout&quot;, timeout_cb, data);
+evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
 
-void 
+void
 timeout_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Notify timeout&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Notify timeout");
 }
 </pre>
 </li>
@@ -109,7 +109,7 @@ elm_notify_timeout_set(notify, 5.0);
 
 /* Add a label to notify */
 label = elm_label_add(notify);
-elm_object_test_set(label, &quot;A label in notify&quot;);
+elm_object_test_set(label, "A label in notify");
 evas_object_show(label);
 elm_object_content_set(notify, label);
 
@@ -132,7 +132,7 @@ evas_object_show(notify);
 
 <p>Using the <code>elm_notify_align_set()</code> function, you can set the notify component alignment.</p>
 
-<p>The second and third parameters have a value between 0.0 and 1.0, meaning the alignment of the notify component&#39;s position within the parent window. The <code>ELM_NOTIFY_ALIGN_FILL</code> value can be used to fill the notify component in each axis direction.</p>
+<p>The second and third parameters have a value between 0.0 and 1.0, meaning the alignment of the notify component's position within the parent window. The <code>ELM_NOTIFY_ALIGN_FILL</code> value can be used to fill the notify component in each axis direction.</p>
 
 <p>To align the notify object on the bottom center of the parent object:</p>
 <pre class="prettyprint">
@@ -158,9 +158,9 @@ elm_notify_timeout_set(notify, 5.0);
 <table border="1">
 <tbody>
 <tr>
-<th>Signal</th> 
-<th>Description</th> 
-<th><code>event_info</code></th> 
+<th>Signal</th>
+<th>Description</th>
+<th><code>event_info</code></th>
 </tr>
 <tr>
 <td><code>timeout</code></td>
@@ -194,7 +194,7 @@ elm_notify_timeout_set(notify, 5.0);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_panel_mn.htm b/org.tizen.guides/html/native/ui/efl/component_panel_mn.htm
index 1f31094..5619f20 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_panel_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_panel_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Panel</title>  
+       <title>Panel</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -33,21 +33,21 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Panel</h1>
-       
+
 <p>The panel UI component can contain subobjects. It can be expanded or contracted by clicking on the button on its edge. The panel component inherits from the <a href="container_layout_n.htm">layout</a> component, which means that layout functions can be used on the panel component. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Panel.html">Panel</a> API.</p>
        <p>This feature is supported in mobile applications only.</p>
-       
+
 <h2 id="basic">Basic Usage</h2>
 
 <p>To use a panel component in your application:</p>
- 
+
 <ol>
 <li>Add a panel with the <code>elm_panel_add()</code> function:
 <pre class="prettyprint">
@@ -67,20 +67,20 @@ elm_panel_orient_set(panel, ELM_PANEL_ORIENT_TOP);
 <pre class="prettyprint">
 Evas_Object *button;
 
-elm_object_part_content_set(panel, &quot;default&quot;, button);
+elm_object_part_content_set(panel, "default", button);
 </pre>
 </li>
 
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>scroll</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(panel, &quot;scroll&quot;, panel_scroll_cb, data);
+evas_object_smart_callback_add(panel, "scroll", panel_scroll_cb, data);
 
-void 
+void
 panel_scroll_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Panel_Scroll_Info *ev = event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Panel scroll to: %f, %f\n&quot;, ev-&gt;rel_x, ev-&gt;rel_y);
+    Elm_Panel_Scroll_Info *ev = event_info;
+    dlog_print(DLOG_INFO, LOG_TAG, "Panel scroll to: %f, %f\n", ev-&gt;rel_x, ev-&gt;rel_y);
 }
 </pre>
 </li>
@@ -106,7 +106,7 @@ Evas_Object *button;
 box = elm_box_add(nf);
 evas_object_show(box);
 elm_object_content_set(nf, box);
-elm_naviframe_item_push(nf, &quot;Panel&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Panel", NULL, NULL, box, NULL);
 
 /* Add an expanded panel to (dis)appear from the top to the box */
 panel = elm_panel_add(box);
@@ -118,10 +118,10 @@ evas_object_show(panel);
 
 /* Add a button to the panel */
 button = elm_button_add(panel);
-elm_object_text_set(button, &quot;Top Button&quot;);
+elm_object_text_set(button, "Top Button");
 evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-elm_object_part_content_set(panel, &quot;default&quot;, button);
+elm_object_part_content_set(panel, "default", button);
 evas_object_show(button);
 
 /* Add a contracted panel to (dis)appear from the bottom to the box */
@@ -135,10 +135,10 @@ evas_object_show(panel);
 
 /* Add a button to the panel */
 button = elm_button_add(panel);
-elm_object_text_set(button, &quot;Bottom Button&quot;);
+elm_object_text_set(button, "Bottom Button");
 evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
-elm_object_part_content_set(panel, &quot;default&quot;, button);
+elm_object_part_content_set(panel, "default", button);
 evas_object_show(button);
 </pre>
  </td>
@@ -188,7 +188,7 @@ evas_object_show(button);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_photocam_mn.htm b/org.tizen.guides/html/native/ui/efl/component_photocam_mn.htm
index 2140101..b493845 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_photocam_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_photocam_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Photocam</title>  
+       <title>Photocam</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,10 +34,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Photocam</h1>
@@ -47,12 +47,12 @@
   <p>The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for the <code>.jpeg</code> image format and has a low memory footprint.</p>
 
   <p>The photocam component implements the scroller interface, which means that scroller functions can be used with the photocam component.</p>
-  
+
   <p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Photocam.html">Photocam</a> API.</p>
-  
-  <p align="center"><strong>Figure: Photocam hierarchy</strong></p> 
-<p align="center"> <img alt="Photocam hierarchy" src="../../../images/photocam_tree.png" /> </p> 
-  
+
+  <p align="center"><strong>Figure: Photocam hierarchy</strong></p>
+<p align="center"> <img alt="Photocam hierarchy" src="../../../images/photocam_tree.png" /> </p>
+
 <h2 id="add_photocam">Adding a Photocam Component</h2>
 
 <p>To create a photocam component, use the <code>elm_photocam_add()</code> function. You can set the image file with the <code>elm_photocam_file_set()</code> function.</p>
@@ -61,7 +61,7 @@
 Evas_Object *photocam;
 
 photocam = elm_photocam_add(win);
-elm_photocam_file_set(photocam, &quot;/tmp/photo.jpeg&quot;);
+elm_photocam_file_set(photocam, "/tmp/photo.jpeg");
 </pre>
 
 <h2 id="use_zoom">Using the Photocam Zoom</h2>
@@ -96,25 +96,25 @@ elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
 <h2 id="photocam_cb">Using the Photocam Callbacks</h2>
 
 <p>To receive notifications about the photocam events, listen to the following signals:</p>
-<ul> 
-   <li><code>clicked</code>: The photo is clicked without dragging around.</li> 
-   <li><code>press</code>: The photo is pressed.</li> 
-   <li><code>longpressed</code>: The photo is pressed down for a long time without dragging around.</li> 
-   <li><code>clicked,double</code>: The photo is double-clicked.</li> 
-   <li><code>load</code>: The photo load begins.</li> 
-   <li><code>loaded</code>: The image file load is complete for the first view (a low resolution blurry version).</li> 
-   <li><code>load,detail</code>: A photo detailed data load begins.</li> 
-   <li><code>loaded,detail</code>: The image file load is complete for the detailed image data (a full resolution version).</li> 
-   <li><code>zoom,start</code>: The zoom animation starts.</li> 
-   <li><code>zoom,stop</code>: The zoom animation stops.</li> 
-   <li><code>zoom,change</code>: The zoom is changed when using an auto zoom mode.</li> 
-   <li><code>scroll</code>: The content is scrolled.</li> 
-   <li><code>scroll,anim,start</code>: The scrolling animation starts.</li> 
-   <li><code>scroll,anim,stop</code>: The scrolling animation stops.</li> 
-   <li><code>scroll,drag,start</code>: Dragging the content around starts.</li> 
-   <li><code>scroll,drag,stop</code>: Dragging the content around stops.</li> 
+<ul>
+   <li><code>clicked</code>: The photo is clicked without dragging around.</li>
+   <li><code>press</code>: The photo is pressed.</li>
+   <li><code>longpressed</code>: The photo is pressed down for a long time without dragging around.</li>
+   <li><code>clicked,double</code>: The photo is double-clicked.</li>
+   <li><code>load</code>: The photo load begins.</li>
+   <li><code>loaded</code>: The image file load is complete for the first view (a low resolution blurry version).</li>
+   <li><code>load,detail</code>: A photo detailed data load begins.</li>
+   <li><code>loaded,detail</code>: The image file load is complete for the detailed image data (a full resolution version).</li>
+   <li><code>zoom,start</code>: The zoom animation starts.</li>
+   <li><code>zoom,stop</code>: The zoom animation stops.</li>
+   <li><code>zoom,change</code>: The zoom is changed when using an auto zoom mode.</li>
+   <li><code>scroll</code>: The content is scrolled.</li>
+   <li><code>scroll,anim,start</code>: The scrolling animation starts.</li>
+   <li><code>scroll,anim,stop</code>: The scrolling animation stops.</li>
+   <li><code>scroll,drag,start</code>: Dragging the content around starts.</li>
+   <li><code>scroll,drag,stop</code>: Dragging the content around stops.</li>
   </ul>
-  
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -128,15 +128,15 @@ elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
 void
 message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(photocam, &quot;loaded&quot;, loaded_cb, data);
+    evas_object_smart_callback_add(photocam, "loaded", loaded_cb, data);
 }
 
-/* Callback for the &quot;loaded&quot; signal */
+/* Callback for the "loaded" signal */
 /* Called when the photo file has been loaded in a low resolution */
 void
 loaded_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The photo has been loaded\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The photo has been loaded\n");
 }
 </pre>
 
@@ -154,7 +154,7 @@ loaded_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_plug_mn.htm b/org.tizen.guides/html/native/ui/efl/component_plug_mn.htm
index 9de60dd..6ecbf94 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_plug_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_plug_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Plug</title>  
+       <title>Plug</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,10 +34,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Plug</h1>
@@ -48,10 +48,10 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Plug.html">Plug</a> API.</p>
 
-  <p align="center"><strong>Figure: Plug hierarchy</strong></p> 
-<p align="center"> <img alt="Plug hierarchy" src="../../../images/plug_tree.png" /> </p> 
+  <p align="center"><strong>Figure: Plug hierarchy</strong></p>
+<p align="center"> <img alt="Plug hierarchy" src="../../../images/plug_tree.png" /> </p>
 
-<h2 id="add">Adding a Plug Component</h2>  
+<h2 id="add">Adding a Plug Component</h2>
 
 <p>To create a plug component, use the <code>elm_plug_add()</code> function:</p>
 
@@ -72,7 +72,7 @@ plug = elm_plug_add(parent);
 <p>To connect to a service named <code>plug_test</code> on the number 0:</p>
 
 <pre class="prettyprint">
-elm_plug_connect(plug, &quot;plug_test&quot;, 0, EINA_FALSE);
+elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
 </pre>
 </li>
 <li>
@@ -87,10 +87,10 @@ Evas_Object *plug_img = elm_plug_image_object_get(plug);
        The socket to connect to must be started with the <code>elm_win_socket_listen()</code> function in the other process on the remote window object (<code>remote_win</code>):
 <pre class="prettyprint">
 /* Create a remote window in the other process */
-Elm_Win *remote_win = elm_win_add(NULL, &quot;Window Socket&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_WIN_SOCKET_IMAGE);
-/* Create a socket named &quot;plug_test&quot; and listen to it */
-elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
+Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
+                                  ELM_WIN_SOCKET_IMAGE);
+/* Create a socket named "plug_test" and listen to it */
+elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
 </pre>
 </div>
 
@@ -101,11 +101,11 @@ elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
 
 <p>To receive notifications about the plug events, listen to the following signals:</p>
 <ul>
-<li><code>clicked</code>: The image is clicked (press/release). 
+<li><code>clicked</code>: The image is clicked (press/release).
 <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
-<li><code>image,deleted</code>: The server side is deleted. 
+<li><code>image,deleted</code>: The server side is deleted.
 <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
-<li><code>image,resized</code>: The server side is resized. 
+<li><code>image,resized</code>: The server side is resized.
 <p>The <code>event_info</code> callback parameter is <code>Evas_Coord_Size</code> (2 integers).</p></li>
 </ul>
 
@@ -117,15 +117,15 @@ elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
 <p>To register and define a callback for the <code>clicked</code> signal:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(plug, &quot;clicked&quot;, clicked_cb, data);
+    evas_object_smart_callback_add(plug, "clicked", clicked_cb, data);
 }
 
-/* Callback for the &quot;clicked&quot; signal */
+/* Callback for the "clicked" signal */
 /* Called when the plug is clicked */
 void
 clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Plug is clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Plug is clicked\n");
 }
 </pre>
 
@@ -143,7 +143,7 @@ clicked_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_plug_wn.htm b/org.tizen.guides/html/native/ui/efl/component_plug_wn.htm
index 6104589..c80114c 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_plug_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_plug_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Plug</title>  
+       <title>Plug</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>          
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Plug</h1>
@@ -49,10 +49,10 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Plug.html">Plug</a> API.</p>
 
-  <p align="center"><strong>Figure: Plug hierarchy</strong></p> 
-<p align="center"> <img alt="Plug hierarchy" src="../../../images/plug_tree.png" /> </p> 
+  <p align="center"><strong>Figure: Plug hierarchy</strong></p>
+<p align="center"> <img alt="Plug hierarchy" src="../../../images/plug_tree.png" /> </p>
 
-<h2 id="add">Adding a Plug Component</h2>  
+<h2 id="add">Adding a Plug Component</h2>
 
 <p>To create a plug component, use the <code>elm_plug_add()</code> function:</p>
 
@@ -73,7 +73,7 @@ plug = elm_plug_add(parent);
 <p>To connect to a service named <code>plug_test</code> on the number 0:</p>
 
 <pre class="prettyprint">
-elm_plug_connect(plug, &quot;plug_test&quot;, 0, EINA_FALSE);
+elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
 </pre>
 </li>
 <li>
@@ -88,10 +88,10 @@ Evas_Object *plug_img = elm_plug_image_object_get(plug);
        The socket to connect to must be started with the <code>elm_win_socket_listen()</code> function in the other process on the remote window object (<code>remote_win</code>):
 <pre class="prettyprint">
 /* Create a remote window in the other process */
-Elm_Win *remote_win = elm_win_add(NULL, &quot;Window Socket&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_WIN_SOCKET_IMAGE);
-/* Create a socket named &quot;plug_test&quot; and listen to it */
-elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
+Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
+                                  ELM_WIN_SOCKET_IMAGE);
+/* Create a socket named "plug_test" and listen to it */
+elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
 </pre>
 </div>
 
@@ -102,11 +102,11 @@ elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
 
 <p>To receive notifications about the plug events, listen to the following signals:</p>
 <ul>
-<li><code>clicked</code>: The image is clicked (press/release). 
+<li><code>clicked</code>: The image is clicked (press/release).
 <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
-<li><code>image,deleted</code>: The server side is deleted. 
+<li><code>image,deleted</code>: The server side is deleted.
 <p>The <code>event_info</code> callback parameter is <code>NULL</code>.</p></li>
-<li><code>image,resized</code>: The server side is resized. 
+<li><code>image,resized</code>: The server side is resized.
 <p>The <code>event_info</code> callback parameter is <code>Evas_Coord_Size</code> (2 integers).</p></li>
 </ul>
 
@@ -118,15 +118,15 @@ elm_win_socket_listen(remote_win, &quot;plug_test&quot;, 0, EINA_FALSE);
 <p>To register and define a callback for the <code>clicked</code> signal:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(plug, &quot;clicked&quot;, clicked_cb, data);
+    evas_object_smart_callback_add(plug, "clicked", clicked_cb, data);
 }
 
-/* Callback for the &quot;clicked&quot; signal */
+/* Callback for the "clicked" signal */
 /* Called when the plug is clicked */
 void
 clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Plug is clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Plug is clicked\n");
 }
 </pre>
 
@@ -144,7 +144,7 @@ clicked_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_popup_mn.htm b/org.tizen.guides/html/native/ui/efl/component_popup_mn.htm
index 54a341d..a89c493 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_popup_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_popup_mn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -35,10 +35,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Popup</h1>
@@ -62,15 +62,15 @@ popup = elm_popup_add(parent);
    </li>
    <li>Set the title text using the <code>title,text</code> part name:
 <pre class="prettyprint">
-elm_object_part_text_set(popup, &quot;title,text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Popup Title&quot;);
+elm_object_part_text_set(popup, "title,text",
+                         "Popup Title");
 </pre>
    </li>
    <li>Set the content of the popup:
       <ul>
          <li>Simple text:
 <pre class="prettyprint">
-elm_object_text_set(popup, &quot;Popup text&quot;);
+elm_object_text_set(popup, "Popup text");
 </pre>
          </li>
          <li>Evas object:
@@ -91,25 +91,25 @@ Evas_Object *button2;
 
 /* Create the 2 buttons */
 button1 = elm_button_add(popup);
-elm_object_text_set(button1, &quot;OK&quot;);
+elm_object_text_set(button1, "OK");
 
 button2 = elm_button_add(popup);
-elm_object_text_set(button2, &quot;Cancel&quot;);
+elm_object_text_set(button2, "Cancel");
 
 /* Set the buttons to the action area */
-elm_object_part_content_set(popup, &quot;button1&quot;;, button1);
-elm_object_part_content_set(popup, &quot;button2&quot;, button2);
+elm_object_part_content_set(popup, "button1";, button1);
+elm_object_part_content_set(popup, "button2", button2);
 </pre>
    </li>
    <li>Register the <a href="#callback">callback</a> functions.
    <p>The following example shows how to define and register a callback for the <code>dismissed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(popup, &quot;dismissed&quot;, dismissed_cb, data);
+evas_object_smart_callback_add(popup, "dismissed", dismissed_cb, data);
 
 void
 dismissed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(obj);
+    evas_object_del(obj);
 }
 </pre>
    </li>
@@ -141,25 +141,25 @@ elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
 evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 
 /* Set a text to title and content part */
-elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
-elm_object_text_set(popup, &quot;This Popup has title area, content area and action area set, &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;action area has two buttons OK and Cancel.&quot;);
+elm_object_part_text_set(popup, "title,text", "Title");
+elm_object_text_set(popup, "This Popup has title area, content area and action area set, "
+                           "action area has two buttons OK and Cancel.");
 
-/* Add an &quot;OK&quot; button to popup */
+/* Add an "OK" button to popup */
 button = elm_button_add(popup);
-elm_object_style_set(button, &quot;popup&quot;);
-elm_object_text_set(button, &quot;OK&quot;);
-elm_object_part_content_set(popup, &quot;button1&quot;, button);
+elm_object_style_set(button, "popup");
+elm_object_text_set(button, "OK");
+elm_object_part_content_set(popup, "button1", button);
 
-/* Add a &quot;Cancel&quot; button to popup */
+/* Add a "Cancel" button to popup */
 button = elm_button_add(popup);
-elm_object_style_set(button, &quot;popup&quot;);
-elm_object_text_set(button, &quot;Cancel&quot;);
-elm_object_part_content_set(popup, &quot;button2&quot;, button);
+elm_object_style_set(button, "popup");
+elm_object_text_set(button, "Cancel");
+elm_object_part_content_set(popup, "button2", button);
 
 /* Add a callback function to popup */
 eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-evas_object_smart_callback_add(popup, &quot;block,clicked&quot;, popup_block_clicked_cb, NULL);
+evas_object_smart_callback_add(popup, "block,clicked", popup_block_clicked_cb, NULL);
 
 evas_object_show(popup);
 </pre>
@@ -233,7 +233,7 @@ elm_popup_dismiss(popup);
    </tbody>
 </table>
 
-<p>The <code>theme_bg</code> style is a unique style for supporting the genlist component&#39;s banded effect.</p>
+<p>The <code>theme_bg</code> style is a unique style for supporting the genlist component's banded effect.</p>
 
 <h2 id="callback">Callbacks</h2>
 
@@ -284,7 +284,7 @@ elm_popup_dismiss(popup);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_popup_wn.htm b/org.tizen.guides/html/native/ui/efl/component_popup_wn.htm
index cf25a3f..1d21e85 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_popup_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_popup_wn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -40,7 +40,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Popup</h1>
@@ -56,10 +56,10 @@
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Popup.html">Popup</a> API.</p>
 
-<p align="center"><strong>Figure: Popup component</strong></p> 
+<p align="center"><strong>Figure: Popup component</strong></p>
 <p align="center"><img alt="Popup component" src="../../../images/popup_wn.png" /></p>
-      
-<p align="center"><strong>Figure: Popup hierarchy</strong></p> 
+
+<p align="center"><strong>Figure: Popup hierarchy</strong></p>
 <p align="center"><img alt="Popup hierarchy" src="../../../images/popup_tree.png" /></p>
 
 <h2 id="add">Adding a Popup Component</h2>
@@ -99,7 +99,7 @@ popup = elm_popup_add(parent);
 
 <p>To set the style to, for example, <code>toast</code>:</p>
 <pre class="prettyprint">
-elm_object_style_set(popup, &quot;toast&quot;);
+elm_object_style_set(popup, "toast");
 </pre>
 
 
@@ -114,7 +114,7 @@ elm_object_style_set(popup, &quot;toast&quot;);
 <li>Set the title text as <code>Test popup</code> using the <code>title,text</code> part name.</li></ul>
 
 <pre class="prettyprint">
-elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Test popup&quot;);
+elm_object_part_text_set(popup, "title,text", "Test popup");
 </pre>
 </li>
 <li>
@@ -122,7 +122,7 @@ elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Test popup&quot;);
 <ul><li>Simple text:
 
 <pre class="prettyprint">
-elm_object_text_set(popup, &quot;simple text&quot;);
+elm_object_text_set(popup, "simple text");
 </pre></li>
 
 <li>Evas object:
@@ -143,20 +143,20 @@ Evas_Object *button2;
 
 /* Create the 2 buttons */
 button1 = elm_button_add(popup);
-elm_object_style_set(button1, &quot;popup&quot;);
+elm_object_style_set(button1, "popup");
 evas_object_size_hint_weight_set(button1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(button1, &quot;Cancel&quot;);
+elm_object_text_set(button1, "Cancel");
 
 button2 = elm_button_add(popup)
-elm_object_style_set(button2, &quot;popup&quot;);
+elm_object_style_set(button2, "popup");
 evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_text_set(button2, &quot;OK&quot;);
+elm_object_text_set(button2, "OK");
 
 evas_object_show(popup);
 
 /* Set the buttons to the action area */
-elm_object_part_content_set(popup, &quot;button1&quot;, button1);
-elm_object_part_content_set(popup, &quot;button2&quot;, button2);
+elm_object_part_content_set(popup, "button1", button1);
+elm_object_part_content_set(popup, "button2", button2);
 </pre>
 </li>
 </ol>
@@ -168,11 +168,11 @@ elm_object_part_content_set(popup, &quot;button2&quot;, button2);
 <p>Set the circular popup item and layout style:</p>
 <pre class="prettyprint">
 /* Set the item style */
-elm_object_style_set(popup, &quot;circle&quot;);
+elm_object_style_set(popup, "circle");
 
 /* Set the layout style */
 layout = elm_layout_add(popup);
-elm_layout_theme_set(layout, &quot;layout&quot;, &quot;popup&quot;, &quot;content/circle/buttons2&quot;);
+elm_layout_theme_set(layout, "layout", "popup", "content/circle/buttons2");
 </pre>
 </li>
 <li>
@@ -180,7 +180,7 @@ elm_layout_theme_set(layout, &quot;layout&quot;, &quot;popup&quot;, &quot;conten
 <p>Set the title text to <code>Test popup</code> using the <code>elm.text.title</code> part name:</p>
 <pre class="prettyprint">
 /* Set the title text */
-elm_object_part_text_set(layout, &quot;elm.text.title&quot;, &quot;Text popup&quot;);
+elm_object_part_text_set(layout, "elm.text.title", "Text popup");
 </pre>
 </li>
 <li>
@@ -188,7 +188,7 @@ elm_object_part_text_set(layout, &quot;elm.text.title&quot;, &quot;Text popup&qu
 <ul>
 <li>Simple text:
 <pre class="prettyprint">
-elm_object_part_text_set(layout, &quot;elm.text.content&quot;, &quot;Test popup&quot;);
+elm_object_part_text_set(layout, "elm.text.content", "Test popup");
 </pre></li>
 
 <li>Evas object:
@@ -215,24 +215,24 @@ Evas_Object *icon;
 /* Create the 2 buttons */
 
 button1 = elm_button_add(popup);
-elm_object_style_set(button1, &quot;popup/circle/left&quot;);
+elm_object_style_set(button1, "popup/circle/left");
 icon = elm_image_add(button1);
-elm_image_file_set(icon, ICON_DIR&quot;/b_option_list_icon_share.png&quot;, NULL);
+elm_image_file_set(icon, ICON_DIR"/b_option_list_icon_share.png", NULL);
 evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_part_content_set(button1, &quot;elm.swallow.content&quot;, icon);
+elm_object_part_content_set(button1, "elm.swallow.content", icon);
 evas_object_show(icon);
 
 button2 = elm_button_add(popup);
-elm_object_style_set(button2, &quot;popup/circle/right&quot;);
+elm_object_style_set(button2, "popup/circle/right");
 icon = elm_image_add(button2);
-elm_image_file_set(icon, ICON_DIR&quot;/b_option_list_icon_delete.png&quot;, NULL);
+elm_image_file_set(icon, ICON_DIR"/b_option_list_icon_delete.png", NULL);
 evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-elm_object_part_content_set(button2, &quot;elm.swallow.content&quot;, icon);
+elm_object_part_content_set(button2, "elm.swallow.content", icon);
 evas_object_show(icon);
 
 /* Set the buttons to the action area */
-elm_object_part_content_set(popup, &quot;button1&quot;, button1);
-elm_object_part_content_set(popup, &quot;button2&quot;, button2);
+elm_object_part_content_set(popup, "button1", button1);
+elm_object_part_content_set(popup, "button2", button2);
 </pre>
 </li>
 </ol>
@@ -265,13 +265,13 @@ elm_popup_timeout_set(popup, 5.0);
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(popup, &quot;timeout&quot;, _timeout_cb, data);
+    evas_object_smart_callback_add(popup, "timeout", _timeout_cb, data);
 }
 
 static void
 _timeout_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Timeout \n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
 }
 </pre>
 
@@ -289,7 +289,7 @@ _timeout_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_progressbar_mn.htm b/org.tizen.guides/html/native/ui/efl/component_progressbar_mn.htm
index ce22a05..90f4a31 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_progressbar_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_progressbar_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Progressbar</title>  
+       <title>Progressbar</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Progressbar</h1>
@@ -62,15 +62,15 @@ progressbar = elm_progressbar_add(parent);
 <ul>
 <li>Set a style to the progressbar with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
 <pre class="prettyprint">
-elm_object_style_set(progressbar, &quot;pending&quot;);
+elm_object_style_set(progressbar, "pending");
 </pre>
 </li>
 <li>Set a label to the progressbar with the <code>elm_object_text_set()</code> or <code>elm_object_part_text_set()</code> function:
 <pre class="prettyprint">
 /* Default style (elm.text.top.right) */
-elm_object_text_set(progressbar, &quot;text&quot;);
+elm_object_text_set(progressbar, "text");
 
-elm_object_part_text_set(progressbar, &quot;elm.text.bottom.left&quot;, &quot;text&quot;);
+elm_object_part_text_set(progressbar, "elm.text.bottom.left", "text");
 </pre>
 </li>
 </ul>
@@ -93,12 +93,12 @@ elm_progressbar_pulse(progressbar, EINA_TRUE);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(progressbar, &quot;changed&quot;, changed_cb, data);
+evas_object_smart_callback_add(progressbar, "changed", changed_cb, data);
 
-void 
+void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
 </pre></li>
 </ol>
@@ -123,9 +123,9 @@ Evas_Object *progressbar;
 /* Add a box to contain the progressbar and push the box into the naviframe */
 box = elm_box_add(nf);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Progressbar&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Progressbar", NULL, NULL, box, NULL);
 
-/* Add a progressbar and set a &quot;default&quot; style */
+/* Add a progressbar and set a "default" style */
 progressbar = elm_progressbar_add(box);
 
 /* Set the progressbar alignment. The progressbar fills whole parent area */
@@ -134,13 +134,13 @@ evas_object_size_hint_align_set(progressbar, EVAS_HINT_FILL, EVAS_HINT_FILL);
 evas_object_size_hint_weight_set(progressbar, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 
 /* Set the progressbar format */
-elm_progressbar_unit_format_set(progressbar, &quot;%1.2f%%&quot;);
+elm_progressbar_unit_format_set(progressbar, "%1.2f%%");
 
 /* Set the progressbar value */
 elm_progressbar_value_set(progressbar, 0.6);
 
 /* Set a text to the progressbar */
-elm_object_text_set(progressbar, &quot;progressbar&quot;);
+elm_object_text_set(progressbar, "progressbar");
 
 evas_object_show(progressbar);
 elm_box_pack_end(box, progressbar);
@@ -167,7 +167,7 @@ elm_box_pack_end(box, progressbar);
 <pre class="prettyprint">
 /* Supported style: default */
 elm_progressbar_value_set(progressbar, 0.2);
-</pre> 
+</pre>
 </li>
 <li>
 <p>Read the current value:</p>
@@ -182,26 +182,26 @@ double value = elm_progressbar_value_get(progressbar);
 <li>Set a label to the progressbar with the <code>elm_object_text_set()</code> function, if the style supports a text part.
 <pre class="prettyprint">
 /* Supported styles: default, pending */
-elm_object_text_set(progressbar, &quot;progressbar&quot;);
+elm_object_text_set(progressbar, "progressbar");
 </pre>
 </li>
-<li>According to the <a href="#style">style</a>, the <code>elm_object_part_text_set()</code> function is used in order to do the setting in the other location. 
+<li>According to the <a href="#style">style</a>, the <code>elm_object_part_text_set()</code> function is used in order to do the setting in the other location.
 <pre class="prettyprint">
-elm_object_part_text_set(progressbar, &quot;elm.text.bottom.left&quot;, &quot;progressbar&quot;);
+elm_object_part_text_set(progressbar, "elm.text.bottom.left", "progressbar");
 </pre>
 </li>
 <li>
 <p>Set the unit label with the <code>elm_progressbar_unit_format_set()</code> function.</p>
 <p>To set the unit label to be a float number with 2 decimals:</p>
 <pre class="prettyprint">
-elm_progressbar_unit_format_set(progressbar, &quot;%1.2f%%&quot;);
+elm_progressbar_unit_format_set(progressbar, "%1.2f%%");
 </pre>
 <p>If you set the <code>elm.text.bottom.right</code> text part, you cannot use a unit label. You can choose 1 unit label or the bottom right label. The default unit label format is <code>%.0f%%</code>.</p>
 </li>
 </ul>
 </li>
 <li>Invert the progressbar.
-<p>In the inverted mode the high values are on the left and the low values on the right.</p> 
+<p>In the inverted mode the high values are on the left and the low values on the right.</p>
 <pre class="prettyprint">
 /* Supported style: default */
 elm_progressbar_inverted_set(progressbar, EINA_TRUE);
@@ -308,7 +308,7 @@ elm_progressbar_inverted_set(progressbar, EINA_TRUE);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_progressbar_wn.htm b/org.tizen.guides/html/native/ui/efl/component_progressbar_wn.htm
index e7e2646..ed634b7 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_progressbar_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_progressbar_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Progressbar</title>  
+       <title>Progressbar</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -36,10 +36,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Progressbar</h1>
@@ -60,15 +60,15 @@ progressbar = elm_progressbar_add(parent);
 <li>Set a <a href="#style">style</a> available for a rectangular or circular UI screen.
 <p>Set a style to the progressbar with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.</p>
 <pre class="prettyprint">
-elm_object_style_set(progressbar, &quot;pending_list&quot;);
+elm_object_style_set(progressbar, "pending_list");
 </pre>
 </li>
 <li>Activate the progressbar:
 <ul>
-<li>Set the progressbar pulse mode to activate the progressbar with the <code>elm_progressbar_pulse_set()</code> function: 
+<li>Set the progressbar pulse mode to activate the progressbar with the <code>elm_progressbar_pulse_set()</code> function:
 <pre class="prettyprint">
 elm_progressbar_pulse_set(progressbar,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EINA_TRUE);
+                          EINA_TRUE);
 </pre>
 <p>The pulse mode makes the progressbar loop infinitely between the start and end position. If you activate the pulse mode in the default style, the unit is invisible.</p>
 </li>
@@ -82,12 +82,12 @@ elm_progressbar_pulse(progressbar, EINA_TRUE);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(progressbar, &quot;changed&quot;, changed_cb, data);
+evas_object_smart_callback_add(progressbar, "changed", changed_cb, data);
 
-void 
+void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
 </pre></li>
 </ol>
@@ -110,9 +110,9 @@ Evas_Object *progressbar;
 /* Add a box to contain the progressbar and push the box into the naviframe */
 box = elm_box_add(nf);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Progressbar&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Progressbar", NULL, NULL, box, NULL);
 
-/* Add a progressbar and set a &quot;default&quot; style */
+/* Add a progressbar and set a "default" style */
 progressbar = elm_progressbar_add(box);
 
 /* Set the progressbar alignment. The progressbar fills whole parent area */
@@ -157,7 +157,7 @@ double value = elm_progressbar_value_get(progressbar);
 </li>
 </ul></li>
 <li>Invert the progressbar.
-<p>In the inverted mode the high values are on the left and the low values on the right.</p> 
+<p>In the inverted mode the high values are on the left and the low values on the right.</p>
 <pre class="prettyprint">
 /* Supported style: default */
 elm_progressbar_inverted_set(progressbar, EINA_TRUE);
@@ -213,7 +213,7 @@ src="../../../images/progressbar_process_small_wn.png" /><p>(circular)</p></td>
 </tr>
 <tr>
 <td><code>elm/progressbar/horizontal/process/popup/small</code></td>
-<td colspan="2" align="center"><img 
+<td colspan="2" align="center"><img
 alt="elm/progressbar/horizontal/pending"
 src="../../../images/progressbar_process_small_wn.png" /><p>(circular)</p></td>
 </tr>
@@ -259,7 +259,7 @@ src="../../../images/progressbar_process_small_wn.png" /><p>(circular)</p></td>
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_radio_mn.htm b/org.tizen.guides/html/native/ui/efl/component_radio_mn.htm
index f334f09..d3de848 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_radio_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_radio_mn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -37,7 +37,7 @@
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Radio</h1>
@@ -45,11 +45,11 @@
 <p>The radio UI component displays 1 or more options and allows users to select 1 of them. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Radio.html">Radio</a> API.</p>
 
 <p>This feature is supported in mobile applications only.</p>
- 
 
- 
+
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a radio component in your application:</p>
 <ol>
 <li>Add a radio button with the <code>elm_radio_add()</code> function:
@@ -64,14 +64,14 @@ radio = elm_radio_add(parent);
 <li>Set a label to the radio button with the <code>elm_object_text_set()</code>
 function, if the style supports a text part:
 <pre class="prettyprint">
-elm_object_text_set(radio, &quot;option 1&quot;);
+elm_object_text_set(radio, "option 1");
 </pre>
  </li>
  <li>Set an image object to the button with the <code>elm_object_part_content_set()</code> function and pass the part name as a parameter:
 <pre class="prettyprint">
 Evas_Object *icon;
 
-elm_object_part_content_set(radio, &quot;icon&quot;, icon);
+elm_object_part_content_set(radio, "icon", icon);
 </pre>
  </li>
 </ul>
@@ -82,7 +82,7 @@ elm_object_part_content_set(radio, &quot;icon&quot;, icon);
 <pre class="prettyprint">
 elm_radio_state_value_set(radio, 1);
 </pre>
- </li> 
+ </li>
  <li>Group the radio buttons with the <code>elm_radio_group_add()</code> function. You can set one of the radio buttons as selected with the <code>elm_radio_value_set()</code> function.
 <pre class="prettyprint">
 elm_radio_group_add(radio, group);
@@ -94,12 +94,12 @@ elm_radio_group_add(radio, group);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(radio, &quot;changed&quot;, changed_cb, data);
+evas_object_smart_callback_add(radio, "changed", changed_cb, data);
 
 void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
 </pre>
 </li>
@@ -107,7 +107,7 @@ changed_cb(void *data, Evas_Object *obj, void *event_info)
 
 <p>The following example shows a simple use case of the radio component.</p>
 
-<p align="center" class="Table"><strong>Example: Radio use case</strong></p> 
+<p align="center" class="Table"><strong>Example: Radio use case</strong></p>
 <table border="0">
 <tbody>
 <tr>
@@ -125,13 +125,13 @@ Evas_Object *group;
 
 box = elm_box_add(nf);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Radio&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Radio", NULL, NULL, box, NULL);
 
 /* Radio 1 */
 /* Add a radio */
 radio = elm_radio_add(box);
 /* Configure the radio */
-elm_object_text_set(radio, &quot;Radio 1&quot;);
+elm_object_text_set(radio, "Radio 1");
 elm_radio_state_value_set(radio, 1);
 evas_object_show(radio);
 elm_box_pack_end(box, radio);
@@ -140,7 +140,7 @@ group = radio;
 
 /* Radio 2 */
 radio = elm_radio_add(box);
-elm_object_text_set(radio, &quot;Radio 2&quot;);
+elm_object_text_set(radio, "Radio 2");
 elm_radio_state_value_set(radio, 2);
 evas_object_show(radio);
 elm_box_pack_end(box, radio);
@@ -149,7 +149,7 @@ elm_radio_group_add(radio, group);
 
 /* Radio 3 */
 radio = elm_radio_add(box);
-elm_object_text_set(radio, &quot;Radio 3&quot;);
+elm_object_text_set(radio, "Radio 3");
 elm_radio_state_value_set(radio, 3);
 evas_object_show(radio);
 elm_box_pack_end(box, radio);
@@ -195,19 +195,19 @@ elm_radio_value_set(group, 1);
 <p>You can register callback functions connected to the following signals for a radio object.</p>
 
 <p align="center" class="Table"><strong>Table: Radio callback signals</strong></p>
-<table border="1"> 
+<table border="1">
 <tbody>
 <tr>
- <th>Callback</th> 
- <th>Description</th> 
- <th><code>event_info</code></th> 
+ <th>Callback</th>
+ <th>Description</th>
+ <th><code>event_info</code></th>
 </tr>
 <tr>
 <td><code>changed</code></td>
  <td>The radio button is selected.</td>
  <td><code>NULL</code></td>
 </tr>
-</tbody> 
+</tbody>
 </table>
 
 <div class="note">
@@ -229,7 +229,7 @@ elm_radio_value_set(group, 1);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_radio_wn.htm b/org.tizen.guides/html/native/ui/efl/component_radio_wn.htm
index da149b2..fba4065 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_radio_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_radio_wn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -38,7 +38,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Radio</h1>
@@ -46,9 +46,9 @@
 <p>The radio UI component displays 1 or more options and allows users to select 1 of them. For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Radio.html">Radio</a> API.</p>
 <p>This feature is supported in wearable applications only.</p>
 
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a radio component in your application:</p>
 <ol>
 <li>Add a radio button with the <code>elm_radio_add()</code> function:
@@ -76,12 +76,12 @@ elm_radio_group_add(radio, group);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(radio, &quot;changed&quot;, changed_cb, data);
+evas_object_smart_callback_add(radio, "changed", changed_cb, data);
 
 void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The value has changed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
 }
 </pre>
 </li>
@@ -107,7 +107,7 @@ Evas_Object *group;
 
 box = elm_box_add(nf);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Radio&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Radio", NULL, NULL, box, NULL);
 
 /* Radio 1 */
 /* Add a radio */
@@ -222,7 +222,7 @@ elm_radio_value_set(group, 1);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_segmentcontrol_mn.htm b/org.tizen.guides/html/native/ui/efl/component_segmentcontrol_mn.htm
index be00ffa..767004b 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_segmentcontrol_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_segmentcontrol_mn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -37,22 +37,22 @@
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Segmentcontrol</h1>
 
 <p>This feature is supported in mobile applications only.</p>
 
- 
+
 <p>The segmentcontrol component consists of several segment items. A segment item is similar to a discrete 2-state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.</p>
 <p>The segmentcontrol component inherits from the layout component, which means that layout functions can be used on the segmentcontrol component.</p>
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__SegmentControl.html">SegmentControl</a> API.</p>
 
-<p align="center"><strong>Figure: Segmentcontrol component (with text on left and with icons on right)</strong></p> 
+<p align="center"><strong>Figure: Segmentcontrol component (with text on left and with icons on right)</strong></p>
 <p align="center"><img alt="Segmentcontrol with text" src="../../../images/segment_text.png" /> <img alt="Segmentcontrol with icons" src="../../../images/segment.png" /></p>
-  
+
 <p align="center"><strong>Figure: Segmentcontrol hierarchy</strong></p>
 <p align="center"><img alt="Segmentcontrol hierarchy" src="../../../images/segment_control_tree.png" /></p>
 
@@ -72,22 +72,22 @@ segcontrol = elm_segment_control_add(parent);
 <p>To manage segmentcontrol items:</p>
 
 <ul>
-<li>Add items to the segmentcontrol component with the <code>elm_segment_control_item_add()</code> function. 
+<li>Add items to the segmentcontrol component with the <code>elm_segment_control_item_add()</code> function.
 <p>In the following example, 4 items containing only text labels (no icons) are added:</p>
 <pre class="prettyprint">
 Elm_Object_Item *it;
 int count;
 int idx;
 
-elm_segment_control_item_add(segcontrol, NULL, &quot;item1&quot;);
-elm_segment_control_item_add(segcontrol, NULL, &quot;item2&quot;);
-elm_segment_control_item_add(segcontrol, NULL, &quot;item3&quot;);
-it = elm_segment_control_item_add(segcontrol, NULL, &quot;item4&quot;);
+elm_segment_control_item_add(segcontrol, NULL, "item1");
+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");
 </pre>
 
 <p>To insert an item at a specific position starting from 0:</p>
 <pre class="prettyprint">
-elm_segment_control_item_insert_at(segcontrol, NULL, &quot;item7&quot;, 2);
+elm_segment_control_item_insert_at(segcontrol, NULL, "item7", 2);
 </pre></li>
 
 <li>Set the state of the item to selected:
@@ -135,17 +135,17 @@ elm_object_disabled_set(segcontrol, EINA_TRUE);
 <p>To register and define a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(segcontrol, &quot;changed&quot;, changed_cb, data);
+    evas_object_smart_callback_add(segcontrol, "changed", changed_cb, data);
 }
 
-/* Callback for the &quot;changed&quot; signal */
+/* Callback for the "changed" signal */
 /* Called when the selected segment item changes */
 void
 changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The selected segment item is %s\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_item_text_get(it));
+    Elm_Object_Item *it = event_info;
+    dlog_print(DLOG_INFO, LOG_TAG, "The selected segment item is %s\n",
+               elm_object_item_text_get(it));
 }
 </pre>
 
@@ -163,7 +163,7 @@ changed_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_slider_mn.htm b/org.tizen.guides/html/native/ui/efl/component_slider_mn.htm
index 1b86b88..8bfbc66 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_slider_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_slider_mn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -38,7 +38,7 @@
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Slider</h1>
@@ -63,15 +63,15 @@ slider = elm_slider_add(parent);
 <ul>
 <li>Set the slider <a href="#style">style</a>:
 <pre class="prettyprint">
-/* Default: &quot;default&quot; */
-elm_object_style_set(slider, &quot;default&quot;);
+/* Default: "default" */
+elm_object_style_set(slider, "default");
 </pre>
 </li>
 <li>Set other <a href="#practices">options</a>.
 <pre class="prettyprint">
 elm_slider_inverted_set(slider, EINA_FALSE);
 elm_slider_indicator_show_set(slider, EINA_TRUE);
-elm_slider_indicator_format_set(slider, &quot;%.1f&quot;);
+elm_slider_indicator_format_set(slider, "%.1f");
 </pre>
 </li>
 </ul>
@@ -79,13 +79,13 @@ elm_slider_indicator_format_set(slider, &quot;%.1f&quot;);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(slider, &quot;changed&quot;, slider_changed_cb, 0);
+evas_object_smart_callback_add(slider, "changed", slider_changed_cb, 0);
 
 static void
 slider_changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;double v = elm_slider_value_get(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The slider value has changed: %0.1f\n&quot;, v);
+    double v = elm_slider_value_get(obj);
+    dlog_print(DLOG_INFO, LOG_TAG, "The slider value has changed: %0.1f\n", v);
 }
 </pre>
 </li>
@@ -108,14 +108,14 @@ Evas_Object *nf;
 /* (win - conformant - naviframe) */
 
 box = elm_box_add(nf);
-elm_naviframe_item_push(nf, &quot;Slider&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Slider", NULL, NULL, box, NULL);
 
 /* Add a slider */
 slider = elm_slider_add(box);
 evas_object_size_hint_align_set(slider, EVAS_HINT_FILL, 0.5);
 
 /* Set a style */
-elm_object_style_set(slider, &quot;center_point&quot;);
+elm_object_style_set(slider, "center_point");
 
 /* Set the slider range */
 elm_slider_min_max_set(slider, 0.0, 10.0);
@@ -155,16 +155,16 @@ Evas_Object *nf;
 Evas_Object *box;
 /* Add a box to contain a slider */
 box = elm_box_add(nf);
-elm_naviframe_item_push(nf, &quot;Slider&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Slider", NULL, NULL, box, NULL);
 
 /* Add a slider */
 slider = elm_slider_add(box);
 evas_object_size_hint_align_set(slider, EVAS_HINT_FILL, 0.5);
 
 /* Set styles in various ways */
-elm_object_style_set(slider, &quot;default&quot;);
+elm_object_style_set(slider, "default");
 <span class="highlight">elm_slider_indicator_show_set(slider, EINA_TRUE);</span>
-elm_slider_indicator_format_set(slider, &quot;%.2f&quot;);
+elm_slider_indicator_format_set(slider, "%.2f");
 
 /* Set the slider range */
 elm_slider_min_max_set(slider, 0.0, 10.0);
@@ -198,7 +198,7 @@ Evas_Object *nf;
 Evas_Object *box;
 
 box = elm_box_add(nf);
-elm_naviframe_item_push(nf, &quot;Slider&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Slider", NULL, NULL, box, NULL);
 
 /* Add a slider */
 slider = elm_slider_add(box);
@@ -234,13 +234,13 @@ elm_box_pack_end(box, slider);
        <td>
 <pre class="prettyprint">
 box = elm_box_add(nf);
-elm_naviframe_item_push(nf, &quot;Slider&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Slider", NULL, NULL, box, NULL);
 
 /* Add a slider */
 slider = elm_slider_add(box);
 evas_object_size_hint_align_set(slider, EVAS_HINT_FILL, 0.5);
 
-elm_object_style_set(slider, &quot;warning&quot;);
+elm_object_style_set(slider, "warning");
 <span class="highlight">elm_slider_inverted_set(slider, EINA_TRUE);</span>
 
 evas_object_show(slider);
@@ -346,7 +346,7 @@ elm_box_pack_end(box, slider);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_slider_wn.htm b/org.tizen.guides/html/native/ui/efl/component_slider_wn.htm
index 221c3e6..3873d88 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_slider_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_slider_wn.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -38,7 +38,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Slider</h1>
@@ -64,9 +64,9 @@ slider = elm_slider_add(parent);
 <li>Set the slider indicator:
 <pre class="prettyprint">
 elm_slider_indicator_show_set(slider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EINA_TRUE);
+                              EINA_TRUE);
 elm_slider_indicator_format_set(slider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;%.0f&quot;);
+                                "%.0f");
 </pre>
 </li>
 <li>Set the range and value of the slider:
@@ -81,13 +81,13 @@ elm_slider_value_set(slider, 5.0);
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>changed</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(slider, &quot;changed&quot;, slider_changed_cb, NULL);
+evas_object_smart_callback_add(slider, "changed", slider_changed_cb, NULL);
 
 void
 slider_changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;double _val = elm_slider_value_get(obj);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Slider value changed. %0.1f\n&quot;, _val);
+    double _val = elm_slider_value_get(obj);
+    dlog_print(DLOG_INFO, LOG_TAG, "Slider value changed. %0.1f\n", _val);
 }
 </pre>
 </li>
@@ -110,14 +110,14 @@ Evas_Object *nf;
 /* (win - conformant - naviframe) */
 
 box = elm_box_add(nf);
-elm_naviframe_item_push(nf, &quot;Slider&quot;, NULL, NULL, box, NULL);
+elm_naviframe_item_push(nf, "Slider", NULL, NULL, box, NULL);
 /* Add a slider */
 slider = elm_slider_add(box);
 evas_object_size_hint_align_set(slider, EVAS_HINT_FILL, 0.5);
 
 /* Indicator shows the value of the slider */
 elm_slider_indicator_show_set(slider, EINA_TRUE);
-elm_slider_indicator_format_set(slider, &quot;%.0f&quot;);
+elm_slider_indicator_format_set(slider, "%.0f");
 
 /* Set the slider range */
 elm_slider_min_max_set(slider, 0.0, 10.0);
@@ -211,7 +211,7 @@ elm_box_pack_end(box, slider);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_spinner_mn.htm b/org.tizen.guides/html/native/ui/efl/component_spinner_mn.htm
index 8b9fbd4..8e0d81d 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_spinner_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_spinner_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Spinner</title>  
+       <title>Spinner</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>              
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Spinner</h1>
@@ -50,11 +50,11 @@
 <p>The spinner component inherits from the layout component, which means that layout functions can be used on the spinner component.</p>
 
 <p>For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Spinner.html">Spinner</a> API.</p>
-                               
-<p align="center"><strong>Figure: Spinner component</strong></p> 
+
+<p align="center"><strong>Figure: Spinner component</strong></p>
 <p align="center"><img alt="Spinner component" src="../../../images/spin.png" /></p>
-      
-<p align="center"><strong>Figure: Spinner hierarchy</strong></p> 
+
+<p align="center"><strong>Figure: Spinner hierarchy</strong></p>
 <p align="center"><img alt="Spinner hierarchy" src="../../../images/spinner_tree.png" /></p>
 
 <h2 id="add">Adding a Spinner Component</h2>
@@ -95,7 +95,7 @@ spin = elm_spinner_add(parent);
 <p>Set the spinner style with the <code>elm_object_style_set()</code> function.</p>
 <p>To set the style to, for example, <code>vertical</code>:</p>
 <pre class="prettyprint">
-elm_object_style_set(spinner, &quot;vertical&quot;);
+elm_object_style_set(spinner, "vertical");
 </pre>
 </li>
 <li>
@@ -113,7 +113,7 @@ char *style = elm_object_style_get(spinner);
 <li>
 <p>Set the label format:</p>
 <pre class="prettyprint">
-elm_spinner_label_format_set(spin, &quot;%1.2f meters&quot;);
+elm_spinner_label_format_set(spin, "%1.2f meters");
 </pre>
 </li>
 <li>
@@ -149,9 +149,9 @@ elm_spinner_interval_set(spin, 0.1);
 Evas_Object *spin2 = elm_spinner_add(parent);
 
 elm_spinner_min_max_set(spin2, 1, 3);
-elm_spinner_special_value_add(spin2, 1, &quot;One&quot;);
-elm_spinner_special_value_add(spin2, 2, &quot;Two&quot;);
-elm_spinner_special_value_add(spin2, 3, &quot;Three&quot;);
+elm_spinner_special_value_add(spin2, 1, "One");
+elm_spinner_special_value_add(spin2, 2, "Two");
+elm_spinner_special_value_add(spin2, 3, "Three");
 </pre>
 </li>
 </ul>
@@ -174,15 +174,15 @@ elm_spinner_special_value_add(spin2, 3, &quot;Three&quot;);
 
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(spin, &quot;delay,changed&quot;, delay_changed_cb, data);
+    evas_object_smart_callback_add(spin, "delay,changed", delay_changed_cb, data);
 }
 
-/* Callback for the &quot;delay,changed&quot; signal */
+/* Callback for the "delay,changed" signal */
 /* Called a short time after the spinner value changes */
 void
 delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;The spinner value has changed\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "The spinner value has changed\n");
 }
 </pre>
 
@@ -200,7 +200,7 @@ delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_toolbar_mn.htm b/org.tizen.guides/html/native/ui/efl/component_toolbar_mn.htm
index 204dce5..7df4c25 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_toolbar_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_toolbar_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Toolbar</title>  
+       <title>Toolbar</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Toolbar</h1>
@@ -47,9 +47,9 @@
 
 <p>The toolbar UI component has a scrollable list of items which can be selected. Only one item can be selected at a time. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Toolbar.html">Toolbar</a> API.</p>
  <p>This feature is supported in mobile applications only.</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use a toolbar component in your application:</p>
 <ol>
 <li>Add a toolbar with the <code>elm_toolbar_add()</code> function:
@@ -60,12 +60,12 @@ toolbar = elm_toolbar_add(parent);
 </pre>
 </li>
 <li>Configure the toolbar <a href="#option">options</a>.</li>
-<li>Append items to the toolbar with <code>elm_toolbar_item_append()</code> function. The function takes 5 parameters: the pointer of the toolbar, a file path of an icon, a text, a callback function to call when the item is clicked, and the parameter passed to the callback. 
+<li>Append items to the toolbar with <code>elm_toolbar_item_append()</code> function. The function takes 5 parameters: the pointer of the toolbar, a file path of an icon, a text, a callback function to call when the item is clicked, and the parameter passed to the callback.
 <pre class="prettyprint">
-elm_toolbar_item_append(toolbar, &quot;icon.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Tab&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_item_selected_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL);
+elm_toolbar_item_append(toolbar, "icon.png",
+                        "Tab",
+                        _item_selected_cb,
+                        NULL);
 </pre>
 
 <p>The following example shows how to add 2 items and define callbacks for when they are clicked:</p>
@@ -74,21 +74,21 @@ elm_toolbar_item_append(toolbar, &quot;icon.png&quot;,
 Elm_Object_Item *home_it;
 Elm_Object_Item *help_it;
 
-home_it = elm_toolbar_item_append(toolbar, &quot;home&quot;, &quot;Home&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_home_item_pressed_cb, NULL);
-help_it = elm_toolbar_item_append(toolbar, &quot;help&quot;, &quot;Help&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_help_item_pressed_cb, NULL);
- 
+home_it = elm_toolbar_item_append(toolbar, "home", "Home",
+                                  _home_item_pressed_cb, NULL);
+help_it = elm_toolbar_item_append(toolbar, "help", "Help",
+                                  _help_item_pressed_cb, NULL);
+
 static void
 _home_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Home item clicked \n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Home item clicked \n");
 }
 
 static void
 _help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Help item clicked \n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Help item clicked \n");
 }
 </pre>
  </li>
@@ -96,16 +96,16 @@ _help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
 <li>Register the <a href="#callback">callback</a> functions.
 <p>The following example shows how to define and register a callback for the <code>clicked</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(toolbar, &quot;clicked&quot;, clicked_cb, data);
+evas_object_smart_callback_add(toolbar, "clicked", clicked_cb, data);
 
-/* Callback for the &quot;clicked&quot; signal */
+/* Callback for the "clicked" signal */
 /* Called when a toolbar item is double-clicked and selected */
 void
 clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Toolbar_Item * item = event_info;
+    Elm_Toolbar_Item * item = event_info;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Item clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Item clicked\n");
 }
 </pre>
 
@@ -114,7 +114,7 @@ clicked_cb(void *data, Evas_Object *obj, void *event_info)
 
 <p>The following example shows a simple use case of the toolbar component.</p>
 
-   <p align="center" class="Table"><strong>Example: Toolbar use case</strong></p> 
+   <p align="center" class="Table"><strong>Example: Toolbar use case</strong></p>
 <table border="0">
    <tbody>
       <tr>
@@ -125,25 +125,25 @@ Evas_Object *conf;
 Evas_Object *nf;
 Evas_Object *tb;
 Elm_Object_Item *nf_it;
- 
+
 /* Starting right after <a href="ui_layouts_n.htm#code">the basic EFL UI layout code</a> */
 /* win - conformant - naviframe */
- 
+
 /* Add a toolbar */
 tb = elm_toolbar_add(nf);
 evas_object_show(tb);
- 
+
 /* Configure the toolbar */
 elm_toolbar_shrink_mode_set(tb, ELM_TOOLBAR_SHRINK_EXPAND);
 elm_toolbar_transverse_expanded_set(tb, EINA_TRUE);
- 
+
 /* Append items */
-elm_toolbar_item_append(tb, NULL, &quot;Tab1&quot;, NULL, NULL);
-elm_toolbar_item_append(tb, NULL, &quot;Tab2&quot;, NULL, NULL);
- 
+elm_toolbar_item_append(tb, NULL, "Tab1", NULL, NULL);
+elm_toolbar_item_append(tb, NULL, "Tab2", NULL, NULL);
+
 /* Set the toolbar as a part of the naviframe item */
-nf_it = elm_naviframe_item_push(nf, &quot;Test&quot;, NULL, NULL, NULL, &quot;tabbar/notitle&quot;);
-elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, tb);
+nf_it = elm_naviframe_item_push(nf, "Test", NULL, NULL, NULL, "tabbar/notitle");
+elm_object_item_part_content_set(nf_it, "tabbar", tb);
  </pre>
          </td>
          <td>
@@ -152,7 +152,7 @@ elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, tb);
       </tr>
    </tbody>
 </table>
- 
+
 <h2 id="option">Options</h2>
 
 <p>You can set the shrink and select mode of the toolbar, and set the items to be displayed homogeneously. You can also define a state for the toolbar item.</p>
@@ -171,9 +171,9 @@ elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, tb);
 <pre class="prettyprint">
 elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_EXPAND);
 </pre>
- 
+
  <p>The following examples illustrate the shrink modes.</p>
- 
+
    <p align="center" class="Table"><strong>Table: Shrink mode example</strong></p>
 <table>
    <tbody>
@@ -202,9 +202,9 @@ elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_EXPAND);
    <li><code>ELM_OBJECT_SELECT_MODE_NONE</code></li>
    <li><code>ELM_OBJECT_SELECT_MODE_DISPLAY_ONLY</code></li>
  </ul>
- 
+
  <p>To set a select mode:</p>
- 
+
 <pre class="prettyprint">
 elm_toolbar_select_mode_set(toolbar, ELM_OBJECT_SELECT_MODE_ALWAYS);
 </pre>
@@ -216,30 +216,30 @@ elm_toolbar_select_mode_set(toolbar, ELM_OBJECT_SELECT_MODE_ALWAYS);
 <pre class="prettyprint">
 elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);
 </pre>
- 
+
 <h3>Item State</h3>
- 
+
 <p>You can define 2 or more states for an item. Each state has its own icon, label, and function to call when an item is clicked.</p>
- 
+
 <p>To create 2 states to the an item with the same icon but 2 different labels:</p>
- 
+
 <pre class="prettyprint">
 Elm_Object_Item *it;
-it = elm_toolbar_item_append(toolbar, NULL, &quot;Tab1&quot;, NULL, NULL);
- 
-elm_toolbar_item_state_add(it, &quot;icon.png&quot;, &quot;State 1&quot;, _item_pressed_cb, NULL);
-elm_toolbar_item_state_add(it, &quot;icon.png&quot;, &quot;State 2&quot;, _item_pressed_cb, NULL);
+it = elm_toolbar_item_append(toolbar, NULL, "Tab1", NULL, NULL);
+
+elm_toolbar_item_state_add(it, "icon.png", "State 1", _item_pressed_cb, NULL);
+elm_toolbar_item_state_add(it, "icon.png", "State 2", _item_pressed_cb, NULL);
  </pre>
 <p>You can cycle through the item states to set the state you want:</p>
  <pre class="prettyprint">
 elm_toolbar_item_state_set(it, elm_toolbar_item_state_next(it));
 </pre>
- 
+
 <h2 id="style">Styles</h2>
 
 <p>To set the style to <code>navigationbar</code>:</p>
 <pre class="prettyprint">
-elm_object_style_set(toolbar, &quot;navigationbar&quot;);
+elm_object_style_set(toolbar, "navigationbar");
 </pre>
 
 <p>The following table lists the available component styles.</p>
@@ -280,14 +280,14 @@ elm_object_style_set(toolbar, &quot;navigationbar&quot;);
  <td></td>
  <td><code>elm.text</code></td>
  <td><code>elm.swallow.icon</code></td>
- <td>This style is for the toolbar&#39;s item. Use the <code>elm_toolbar_item_append()</code> function to set the text and the icon.</td>
+ <td>This style is for the toolbar's item. Use the <code>elm_toolbar_item_append()</code> function to set the text and the icon.</td>
  </tr>
   <tr>
  <td><code>elm/toolbar/item/navigationbar</code></td>
  <td></td>
  <td><code>elm.text</code></td>
  <td>N/A</td>
- <td>This style is for the toolbar&#39;s item. Use the <code>elm_toolbar_item_append()</code> function to set the text and the icon.</td>
+ <td>This style is for the toolbar's item. Use the <code>elm_toolbar_item_append()</code> function to set the text and the icon.</td>
  </tr>
  </tbody>
 </table>
@@ -296,13 +296,13 @@ elm_object_style_set(toolbar, &quot;navigationbar&quot;);
 
 <p>You can register callback functions connected to the following signals for a toolbar object.</p>
 
-   <p align="center" class="Table"><strong>Table: Toolbar callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Toolbar callback signals</strong></p>
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>clicked</code></td>
@@ -359,7 +359,7 @@ elm_object_style_set(toolbar, &quot;navigationbar&quot;);
          <td>The user stops dragging the toolbar.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
 
 <div class="note">
@@ -381,7 +381,7 @@ elm_object_style_set(toolbar, &quot;navigationbar&quot;);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_tooltip_mn.htm b/org.tizen.guides/html/native/ui/efl/component_tooltip_mn.htm
index af26797..dc13b88 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_tooltip_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_tooltip_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Tooltip</title>  
+       <title>Tooltip</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,16 +34,16 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Tooltip</h1>
 
 <p>The tooltip component is a smart object that shows content in a frame when the mouse hovers over the parent object. It provides tips or information about the parent object. A tooltip component is not a UI component as such, so it does not emit signals. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Tooltips.html">Tooltip</a> API.</p>
-   
+
    <p>This feature is supported in mobile applications only.</p>
 
 <h2 id="basic">Basic Usage</h2>
@@ -61,8 +61,8 @@
 Evas_Object *button = elm_button_add(parent);
 
 evas_object_show(button);
- 
-elm_object_tooltip_text_set(button, &quot;The tooltip text&quot;);
+
+elm_object_tooltip_text_set(button, "The tooltip text");
 </pre>
    </li>
 <li>You can set content to the tooltip using the <code>elm_object_tooltip_content_cb_set()</code> function.
@@ -71,18 +71,18 @@ elm_object_tooltip_text_set(button, &quot;The tooltip text&quot;);
 
 <pre class="prettyprint">
 elm_object_tooltip_content_cb_set(obj, tooltip_content_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data, tooltip_content_del_cb);
+                                  data, tooltip_content_del_cb);
 
 Evas_Object*
 tooltip_content_cb(void *data, Evas_Object *obj, Evas_Object *tooltip)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the tooltip content */
+    /* Create the tooltip content */
 }
 
-void 
+void
 tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the tooltip content */
+    /* Destroy the tooltip content */
 }
 </pre>
 </li>
@@ -91,7 +91,7 @@ tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
  <li>Set a style to the tooltip with the <code>elm_object_tooltip_style_set()</code> function. If you use the default style, you can skip this step.
 
 <pre class="prettyprint">
-elm_object_tooltip_style_set(obj, &quot;transparent&quot;);
+elm_object_tooltip_style_set(obj, "transparent");
 </pre>
  </li>
  <li>
@@ -120,7 +120,7 @@ elm_object_tooltip_unset(obj);
 </li>
 </ol>
 <p>The following example shows a simple use case of the tooltip component on a button component.</p>
- 
+
    <p align="center" class="Table"><strong>Example: Tooltip use case</strong></p>
 <table border="0">
   <tbody>
@@ -133,7 +133,7 @@ Evas_Object *nf;
 Evas_Object *box;
 Evas_Object *button;
 Evas_Object *icon;
- 
+
 /* Starting right after <a href="ui_layouts_n.htm#code">the basic EFL UI layout code</a> */
 /* (win - conformant - naviframe) */
 
@@ -141,15 +141,15 @@ box = elm_box_add(nf);
 
 /* Add a button and set a style */
 button = elm_button_add(box);
-elm_object_style_set(button, &quot;circle&quot;);
+elm_object_style_set(button, "circle");
 
 /* Add an icon and set it as a content */
 icon = elm_icon_add(button);
-elm_icon_standard_set(icon, &quot;home&quot;);
-elm_object_part_content_set(button, &quot;icon&quot;, icon);
+elm_icon_standard_set(icon, "home");
+elm_object_part_content_set(button, "icon", icon);
 
 /* Set a tooltip on a button */
-elm_object_tooltip_text_set(button, &quot;The tooltip text&quot;);
+elm_object_tooltip_text_set(button, "The tooltip text");
 
 elm_box_pack_end(box, button);
 evas_object_show(button);
@@ -163,7 +163,7 @@ evas_object_show(box);
       </tr>
    </tbody>
 </table>
- 
+
 <h2 id="feature">Features</h2>
 
 <p>You can activate the window mode for the tooltip with the <code>elm_object_tooltip_window_mode_set()</code> function.</p>
@@ -215,7 +215,7 @@ elm_object_tooltip_window_mode_get(parent);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_win_mn.htm b/org.tizen.guides/html/native/ui/efl/component_win_mn.htm
index 6d224b6..8da4aaa 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_win_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_win_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Win</title>  
+       <title>Win</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -33,10 +33,10 @@
                        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Win</h1>
@@ -55,49 +55,49 @@
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Create and initialize elm_win,
-&nbsp;&nbsp;&nbsp;&nbsp;   which is mandatory to manipulate the window
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+    /* Window */
+    /*
+       Create and initialize elm_win,
+       which is mandatory to manipulate the window
+    */
+    ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+    elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
+        int rots[4] = {0, 90, 180, 270};
+        elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+    evas_object_smart_callback_add(ad-&gt;win, "delete,request", win_delete_request_cb, NULL);
+    eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Conformant */
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Create and initialize elm_conformant,
-&nbsp;&nbsp;&nbsp;&nbsp;   which is mandatory for the base GUI to have a proper size
-&nbsp;&nbsp;&nbsp;&nbsp;   when the indicator or virtual keypad is visible
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
+    /* Conformant */
+    /*
+       Create and initialize elm_conformant,
+       which is mandatory for the base GUI to have a proper size
+       when the indicator or virtual keypad is visible
+    */
+    ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+    elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+    evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+    evas_object_show(ad-&gt;conform);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+    evas_object_show(ad-&gt;win);
 }
 
 static void
 win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_exit();
+    ui_app_exit();
 }
 
 static void
 win_back_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Let the window go to the hide state */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+    appdata_s *ad = data;
+    /* Let the window go to the hide state */
+    elm_win_lower(ad-&gt;win);
 }
 </pre>
          </td>
@@ -107,7 +107,7 @@ win_back_cb(void *data, Evas_Object *obj, void *event_info)
       </tr>
    </tbody>
 </table>
- 
+
 <p>The basic template code includes the following steps:</p>
 <ol>
 <li>Add a window with the <code>elm_win_util_standard_add()</code> function.
@@ -119,9 +119,9 @@ Evas_Object *win;
 Evas_Object *bg;
 
 /* Add a window */
-win = elm_win_add(NULL, &quot;name&quot;, ELM_WIN_BASIC);
+win = elm_win_add(NULL, "name", ELM_WIN_BASIC);
 /* Set a title to the window */
-elm_win_title_set(win, &quot;title&quot;);
+elm_win_title_set(win, "title");
 /* Add a background and set it as the contents of the window */
 bg = elm_bg_add(win);
 evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
@@ -152,12 +152,12 @@ elm_win_resize_object_add(win, obj);
 <p>You can register callback functions connected to the following signals for a win object.</p>
 
 <p align="center" class="Table"><strong>Table: Win callback signals</strong></p>
-<table border="1"> 
+<table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>delete,request</code></td>
@@ -256,7 +256,7 @@ elm_win_resize_object_add(win, obj);
       </tr>
    </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -276,7 +276,7 @@ elm_win_resize_object_add(win, obj);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/component_win_wn.htm b/org.tizen.guides/html/native/ui/efl/component_win_wn.htm
index 30a5a88..8e92a92 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/component_win_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/component_win_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Win</title>  
+       <title>Win</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,10 +34,10 @@
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>                  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Win</h1>
@@ -45,11 +45,11 @@
 <p>Win stands for window, and the win component is a graphical control element containing the graphical user interface of a program. The window component is the bottom-most UI component in an EFL application. In most cases, when an application is launched, a window that fits into the device screen is created and shown. For more information, see the <a href="../../../../../org.tizen.native.wearable.apireference/group__Win.html">Win</a> API.</p>
 <p>This feature is supported in wearable applications only.</p>
 
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>A window is created automatically when you create a Tizen native UI application project with a template. The following example is a part of the template code handling a window component and the corresponding screenshot.</p>
- 
+
 <p align="center" class="Table"><strong>Example: Win use case</strong></p>
 <table border="0">
    <tbody>
@@ -59,49 +59,49 @@
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Create and initialize elm_win,
-&nbsp;&nbsp;&nbsp;&nbsp;   which is mandatory to manipulate the window
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Conformant */
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Create and initialize elm_conformant,
-&nbsp;&nbsp;&nbsp;&nbsp;   which is mandatory for the base GUI to have a proper size
-&nbsp;&nbsp;&nbsp;&nbsp;   when the indicator or virtual keypad is visible
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+    /* Window */
+    /*
+       Create and initialize elm_win,
+       which is mandatory to manipulate the window
+    */
+    ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+    elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+    if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
+        int rots[4] = {0, 90, 180, 270};
+        elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+    }
+
+    evas_object_smart_callback_add(ad-&gt;win, "delete,request", win_delete_request_cb, NULL);
+    eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+    /* Conformant */
+    /*
+       Create and initialize elm_conformant,
+       which is mandatory for the base GUI to have a proper size
+       when the indicator or virtual keypad is visible
+    */
+    ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+    elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+    evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+    evas_object_show(ad-&gt;conform);
+
+    evas_object_show(ad-&gt;win);
 }
 
 static void
 win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_exit();
+    ui_app_exit();
 }
 
 static void
 win_back_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Let the window go to the hide state */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
+    appdata_s *ad = data;
+    /* Let the window go to the hide state */
+    elm_win_lower(ad-&gt;win);
 }
 </pre>
          </td>
@@ -125,9 +125,9 @@ Evas_Object *win;
 Evas_Object *bg;
 
 /* Add a window */
-win = elm_win_add(NULL, &quot;name&quot;, ELM_WIN_BASIC);
+win = elm_win_add(NULL, "name", ELM_WIN_BASIC);
 /* Set a title to the window */
-elm_win_title_set(win, &quot;title&quot;);
+elm_win_title_set(win, "title");
 /* Add a background and set it as the contents of the window */
 bg = elm_bg_add(win);
 evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
@@ -158,13 +158,13 @@ elm_win_resize_object_add(win, obj);
 
 <p>You can register callback functions connected to the following signals for a win object.</p>
 
-   <p align="center" class="Table"><strong>Table: Win callback signals</strong></p> 
+   <p align="center" class="Table"><strong>Table: Win callback signals</strong></p>
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>delete,request</code></td>
@@ -268,7 +268,7 @@ elm_win_resize_object_add(win, obj);
       </tr>
    </tbody>
 </table>
- 
+
 <div class="note">
        <strong>Note</strong>
        The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.
@@ -288,7 +288,7 @@ elm_win_resize_object_add(win, obj);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 
 <script type="text/javascript">
diff --git a/org.tizen.guides/html/native/ui/efl/configuring_n.htm b/org.tizen.guides/html/native/ui/efl/configuring_n.htm
index 60bb518..ec8c501 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/configuring_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/configuring_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Configuring UI Components</title>  
+       <title>Configuring UI Components</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -30,7 +30,7 @@
                <ul class="toc">
                        <li><a href="#config">Managing Elementary Profiles</a></li>
                        <li><a href="#options">Configuring Elementary Options</a></li>
-                       
+
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -38,7 +38,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -46,7 +46,7 @@
 
 <p>When configuring UI components, you can manage Elementary profiles and Elementary options.</p>
 
-<h2 id="config" name="config">Managing Elementary Profiles</h2> 
+<h2 id="config" name="config">Managing Elementary Profiles</h2>
 
 <p>An Elementary profile is a set of preconfigured options that affects the entire look and feel of an application. The options linked to a specific profile form an Elementary configuration, which can be used to store the desired set of options for use in multiple sessions. Once loaded, the Elementary profile configures all the options and sets the look and feel of your Elementary application.</p>
 
@@ -59,7 +59,7 @@ Eina_List *list = elm_config_profile_list_get();
 </li>
 <li>Set a particular profile:
 <pre class="prettyprint">
-elm_config_profile_set(&quot;myprofile&quot;);
+elm_config_profile_set("myprofile");
 </pre>
 </li>
 <li>Get the current profile:
@@ -79,26 +79,26 @@ elm_config_reload();
 <p>The following code snippet is a configuration example from the <code>base.src</code> configuration file:</p>
 
 <pre class="prettyprint">
-group &quot;Elm_Config&quot; struct {
-&nbsp;&nbsp;&nbsp;value &quot;scale&quot; double: 3.0;
-&nbsp;&nbsp;&nbsp;value &quot;finger_size&quot; int: 50;
-&nbsp;&nbsp;&nbsp;value &quot;cache_flush_enable&quot; uchar: 0;
-&nbsp;&nbsp;&nbsp;value &quot;cache_flush_poll_interval&quot; int: 512;
-&nbsp;&nbsp;&nbsp;value &quot;font_cache&quot; int: 512;
-&nbsp;&nbsp;&nbsp;value &quot;image_cache&quot; int: 4096;
-&nbsp;&nbsp;&nbsp;value &quot;edje_cache&quot; int: 32;
-&nbsp;&nbsp;&nbsp;value &quot;edje_collection_cache&quot; int: 64;
-&nbsp;&nbsp;&nbsp;value &quot;glayer_long_tap_start_timeout&quot; double: 0.5;
-&nbsp;&nbsp;&nbsp;value &quot;glayer_double_tap_timeout&quot; double: 0.33;
-&nbsp;&nbsp;&nbsp;value &quot;thumbscroll_bounce_enable&quot; uchar: 0;
-&nbsp;&nbsp;&nbsp;value &quot;thumbscroll_bounce_friction&quot; double: 0.5;
-&nbsp;&nbsp;&nbsp;value &quot;longpress_timeout&quot; double: 0.5;
-&nbsp;&nbsp;&nbsp;value &quot;tooltip_delay&quot; double: 1.0;
-&nbsp;&nbsp;&nbsp;value &quot;password_show_last&quot; uchar: 1;
-&nbsp;&nbsp;&nbsp;value &quot;password_show_last_timeout&quot; double: 2.0;
-&nbsp;&nbsp;&nbsp;value &quot;engine&quot; string: &quot;software_x11&quot;;
-&nbsp;&nbsp;&nbsp;value &quot;selection_clear_enable&quot; uchar: 1;
-&nbsp;&nbsp;&nbsp;value &quot;fps&quot; double: 60.0;
+group "Elm_Config" struct {
+   value "scale" double: 3.0;
+   value "finger_size" int: 50;
+   value "cache_flush_enable" uchar: 0;
+   value "cache_flush_poll_interval" int: 512;
+   value "font_cache" int: 512;
+   value "image_cache" int: 4096;
+   value "edje_cache" int: 32;
+   value "edje_collection_cache" int: 64;
+   value "glayer_long_tap_start_timeout" double: 0.5;
+   value "glayer_double_tap_timeout" double: 0.33;
+   value "thumbscroll_bounce_enable" uchar: 0;
+   value "thumbscroll_bounce_friction" double: 0.5;
+   value "longpress_timeout" double: 0.5;
+   value "tooltip_delay" double: 1.0;
+   value "password_show_last" uchar: 1;
+   value "password_show_last_timeout" double: 2.0;
+   value "engine" string: "software_x11";
+   value "selection_clear_enable" uchar: 1;
+   value "fps" double: 60.0;
 }
 </pre>
 <p>You can set the following options in the Elementary configuration:</p>
@@ -157,7 +157,7 @@ elm_config_glayer_double_tap_timeout_set(0.5);
 </li>
 <li>To manage scrolling:
 <ul>
-<li>Make the scroller bounce when it reaches its viewport&#39;s edge during scrolling by using the <code>elm_config_scroll_bounce_enabled_set()</code> function:
+<li>Make the scroller bounce when it reaches its viewport's edge during scrolling by using the <code>elm_config_scroll_bounce_enabled_set()</code> function:
 <pre class="prettyprint">
 elm_config_scroll_bounce_enabled_set(EINA_TRUE);
 </pre>
@@ -206,7 +206,7 @@ elm_config_tooltip_delay_set(2.0);
 elm_config_password_show_last_set(EINA_TRUE);
 </pre>
 </li>
-<li>Set the visibility timeout (how many seconds the input is visible): 
+<li>Set the visibility timeout (how many seconds the input is visible):
 <pre class="prettyprint">
 elm_config_password_show_last_timeout_set(5.0);
 </pre>
@@ -217,41 +217,41 @@ elm_config_password_show_last_timeout_set(5.0);
 <p>You can define the rendering engine that Elementary uses to draw the windows. The following rendering engines are supported:</p>
 
 <ul>
-    <li>&quot;software_x11&quot;</li>
-    <li>&quot;fb&quot;</li>
-    <li>&quot;directfb&quot;</li>
-    <li>&quot;software_16_x11&quot;</li>
-    <li>&quot;software_8_x11&quot;</li>
-    <li>&quot;xrender_x11&quot;</li>
-    <li>&quot;opengl_x11&quot;</li>
-    <li>&quot;software_gdi&quot;</li>
-    <li>&quot;software_16_wince_gdi&quot;</li>
-    <li>&quot;sdl&quot;</li>
-    <li>&quot;software_16_sdl&quot;</li>
-    <li>&quot;opengl_sdl&quot;</li>
-    <li>&quot;buffer&quot;</li>
-    <li>&quot;ews&quot;</li>
-    <li>&quot;opengl_cocoa&quot;</li>
-    <li>&quot;psl1ght&quot;</li>
+    <li>"software_x11"</li>
+    <li>"fb"</li>
+    <li>"directfb"</li>
+    <li>"software_16_x11"</li>
+    <li>"software_8_x11"</li>
+    <li>"xrender_x11"</li>
+    <li>"opengl_x11"</li>
+    <li>"software_gdi"</li>
+    <li>"software_16_wince_gdi"</li>
+    <li>"sdl"</li>
+    <li>"software_16_sdl"</li>
+    <li>"opengl_sdl"</li>
+    <li>"buffer"</li>
+    <li>"ews"</li>
+    <li>"opengl_cocoa"</li>
+    <li>"psl1ght"</li>
 </ul>
 
 <pre class="prettyprint">
-elm_config_engine_set(&quot;opengl_x11&quot;);
+elm_config_engine_set("opengl_x11");
 </pre>
 </li>
 
-<li>To activate the access mode: 
+<li>To activate the access mode:
 <p>Set the access mode as active, so that information about an Elementary object is read when the object receives an <code>EVAS_CALLBACK_MOUSE_IN</code> event.</p>
 </li>
 
-<li>To configure the selection mode: 
+<li>To configure the selection mode:
 <p>Set the selection mode so that the selection is cleared when the entry component is unfocused:</p>
 <pre class="prettyprint">
 elm_config_selection_unfocused_clear_set(EINA_TRUE);
 </pre>
 </li>
 
-<li>To enable mirroring: 
+<li>To enable mirroring:
 <p>Elementary allows UI mirroring both on a single object and on the entire UI. If mirroring is enabled, an Elementary UI component displays as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the UI component are mirrored. Text is not mirrored.</p>
 
 <pre class="prettyprint">
@@ -267,7 +267,7 @@ elm_config_fps_set(60.0);
 </pre>
 </li>
 </ul>
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/container_box_n.htm b/org.tizen.guides/html/native/ui/efl/container_box_n.htm
index 7ff1232..d9e568f 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/container_box_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/container_box_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Box</title>  
+       <title>Box</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -30,27 +30,27 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#basic">Basic Usage</a></li>
-                       <li><a href="#layout">Box Layouts</a></li>      
+                       <li><a href="#layout">Box Layouts</a></li>
                        </ul>
                <p class="toc-title">Related Info</p>
                        <ul class="toc">
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Box</h1>
 <p>The box container arranges UI components in a linear order, horizontally or vertically. It is a non-graphical object: it adds no graphics to or around the objects it holds. For more information, see the Box API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Box.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Box.html">wearable</a> applications).</p>
- 
+
 <p align="center"><strong>Figure: Box component structure</strong></p>
 <p align="center"><img alt="Box component structure" src="../../../images/box.png" /></p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To build a layout with a box:</p>
 <ol>
    <li>Add a box with the <code>elm_box_add()</code> function:
@@ -69,16 +69,16 @@ elm_box_horizontal_set(box, EINA_TRUE);
 <pre class="prettyprint">
 Evas_Object *box;
 Evas_Object btn;
- 
+
 btn = elm_button_add(parent);
 elm_box_pack_end(box, btn);
 </pre>
 </li>
 </ol>
- 
+
 <p>The following example shows a simple use case of the box component, where 5 button objects are packed into a vertical box. The <code>elm_box_pack_end()</code> function is used to pack each button into the end of the box.</p>
- 
-   <p align="center" class="Table"><strong>Example: Box use case</strong></p> 
+
+   <p align="center" class="Table"><strong>Example: Box use case</strong></p>
 <table border="0">
    <tbody>
       <tr>
@@ -98,19 +98,19 @@ int i;
 /* Add a box and push it into the naviframe */
 box = elm_box_add(nf);
 evas_object_show(box);
-elm_naviframe_item_push(nf, &quot;Box&quot;, NULL, NULL, box, NULL);
- 
+elm_naviframe_item_push(nf, "Box", NULL, NULL, box, NULL);
+
 for (i = 1; i &lt;= 5; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;btn = elm_button_add(box);
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(tmp, sizeof(tmp), &quot;Button %d&quot;, i);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(btn, tmp);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set size hints for weight and align */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, 0.5);
- 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(btn);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, btn);
+    btn = elm_button_add(box);
+    snprintf(tmp, sizeof(tmp), "Button %d", i);
+    elm_object_text_set(btn, tmp);
+
+    /* Set size hints for weight and align */
+    evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, 0.5);
+
+    evas_object_show(btn);
+    elm_box_pack_end(box, btn);
 }
 </pre>
          </td>
@@ -133,28 +133,28 @@ for (i = 1; i &lt;= 5; i++) {
 <p>When building a box layout, you must use <a href="ui_layouts_n.htm#size_hint">size hint functions</a> to adjust the size and position of each element inside it:</p>
 <ul>
 <li>Basically, an object contained in a box takes up space based on its minimum size.</li>
-<li>If the sum of the objects&#39; minimum size is bigger than the size of the box parent, the box takes up all the space occupied by the parent, and the size of the parent may be extended to hold the box.</li>
-<li>If the sum of the objects&#39; minimum size is smaller than the space given for the box, the objects are positioned at the center by default.</li>
+<li>If the sum of the objects' minimum size is bigger than the size of the box parent, the box takes up all the space occupied by the parent, and the size of the parent may be extended to hold the box.</li>
+<li>If the sum of the objects' minimum size is smaller than the space given for the box, the objects are positioned at the center by default.</li>
 </ul>
 
 <p>You can adjust the position of the image objects using the <code>elm_box_align_set()</code> function. The function takes 2 double values, a horizontal value and a vertical value, representing the percentage between 0.0 and 1.0 of the alignment in the horizontal and vertical axes. Remember that a box has a linear structure: the alignment only takes effect in the opposite direction than the one defined with the <code>elm_box_horizontal_set()</code> function.</p>
 
 <p>In the following example, 2 images are packed into a box. The minimum size hints are set to the image objects with the <code>elm_object_size_hint_min_set()</code> function. Since the sum of the minimum size is smaller than the box area, which is equal to the window area in this case, the images are bound together and positioned at the center.</p>
 
-   <p align="center" class="Table"><strong>Table: Various box layouts</strong></p> 
+   <p align="center" class="Table"><strong>Table: Various box layouts</strong></p>
 <table border="0">
    <tbody>
       <tr>
          <td>
  <pre class="prettyprint">
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
 
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -168,13 +168,13 @@ elm_box_pack_end(box, image);
          <td>
 <pre class="prettyprint">
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
 
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -190,13 +190,13 @@ elm_box_pack_end(box, image);
          <td>
 <pre class="prettyprint">
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
 
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -212,7 +212,7 @@ elm_box_pack_end(box, image);
          <td>
 <pre class="prettyprint">
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -220,7 +220,7 @@ elm_box_pack_end(box, image);
 <span class="highlight">evas_object_size_hint_weight_set(image, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);</span>
 
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -236,7 +236,7 @@ elm_box_pack_end(box, image);
          <td>
 <pre class="prettyprint">
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -245,7 +245,7 @@ elm_box_pack_end(box, image);
 <span class="highlight">evas_object_size_hint_align_set(image, 0.0, 0.0);</span>
 
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -262,7 +262,7 @@ elm_box_pack_end(box, image);
          <td>
 <pre class="prettyprint">
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -271,7 +271,7 @@ elm_box_pack_end(box, image);
 <span class="highlight">evas_object_size_hint_align_set(image, 1.0, 1.0);</span>
 
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -288,7 +288,7 @@ elm_box_pack_end(box, image);
          <td>
 <pre class="prettyprint">
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -297,7 +297,7 @@ elm_box_pack_end(box, image);
 <span class="highlight">evas_object_size_hint_align_set(image, EVAS_HINT_FILL, EVAS_HINT_FILL);</span>
 
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -314,7 +314,7 @@ elm_box_pack_end(box, image);
          <td>
 <pre class="prettyprint">
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -323,7 +323,7 @@ elm_box_pack_end(box, image);
 <span class="highlight">evas_object_size_hint_align_set(image, EVAS_HINT_FILL, EVAS_HINT_FILL);</span>
 
 image = elm_image_add(box);
-elm_image_file_set(image, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(image, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(image, 200, 200);
 evas_object_show(image);
 elm_box_pack_end(box, image);
@@ -353,7 +353,7 @@ elm_box_pack_end(box, image);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/container_conformant_n.htm b/org.tizen.guides/html/native/ui/efl/container_conformant_n.htm
index 0ce25fe..ba45326 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/container_conformant_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/container_conformant_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Conformant</title>  
+       <title>Conformant</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -30,28 +30,28 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#basic">Basic Usage</a></li>
-                       <li><a href="#callback">Callbacks</a></li>                      
+                       <li><a href="#callback">Callbacks</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                        <ul class="toc">
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Conformant</h1>
 
 <p>The conformant container accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. For more information, see the Conformant API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Conformant.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Conformant.html">wearable</a> applications).</p>
- 
+
 <p align="center"><strong>Figure: Conformant component structure</strong></p>
  <p align="center"><img alt="Conformant component structure" src="../../../images/conformant.png" /></p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To build a layout with a conformant:</p>
 <ol>
    <li>Add a conformant with the <code>elm_conformant_add()</code> function:
@@ -78,9 +78,9 @@ elm_object_content_set(conformant, main_view);
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>virtualkeypad,state,on</code></td>
@@ -129,7 +129,7 @@ elm_object_content_set(conformant, main_view);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/container_grid_n.htm b/org.tizen.guides/html/native/ui/efl/container_grid_n.htm
index 6016403..521d5e9 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/container_grid_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/container_grid_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Grid</title>  
+       <title>Grid</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -29,17 +29,17 @@
                </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-                       <li><a href="#basic">Basic Usage</a></li>                       
+                       <li><a href="#basic">Basic Usage</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                        <ul class="toc">
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Grid</h1>
@@ -48,7 +48,7 @@
 
 <p align="center"><strong>Figure: Grid component structure</strong></p>
 <p align="center"><img alt="Grid component structure" src="../../../images/grid_concept.png" /></p>
- 
+
 <h2 id="basic">Basic Usage</h2>
 
 <p>To build a layout with a grid:</p>
@@ -94,23 +94,23 @@ Evas_Object *button;
 grid = elm_grid_add(nf);
 elm_object_content_set(nf, grid);
 evas_object_show(grid);
-elm_naviframe_item_push(nf, &quot;Grid&quot;, NULL, NULL, grid, NULL);
+elm_naviframe_item_push(nf, "Grid", NULL, NULL, grid, NULL);
 
 /* Add a button to the grid */
 button = elm_button_add(grid);
-elm_object_text_set(button, &quot;Button1&quot;);
+elm_object_text_set(button, "Button1");
 elm_grid_pack(grid, button, 10, 10, 40, 20);
 evas_object_show(button);
 
 /* Add a button to the grid */
 button = elm_button_add(grid);
-elm_object_text_set(button, &quot;Button2&quot;);
+elm_object_text_set(button, "Button2");
 elm_grid_pack(grid, button, 50, 50, 40, 30);
 evas_object_show(button);
 
 /* Add a button to the grid */
 button = elm_button_add(grid);
-elm_object_text_set(button, &quot;Button3&quot;);
+elm_object_text_set(button, "Button3");
 elm_grid_pack(grid, button, 10, 80, 30, 10);
 evas_object_show(button);
 </pre>
@@ -136,7 +136,7 @@ evas_object_show(button);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/container_layout_n.htm b/org.tizen.guides/html/native/ui/efl/container_layout_n.htm
index 6f3b80e..3337ef3 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/container_layout_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/container_layout_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Layout</title>  
+       <title>Layout</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,10 +32,10 @@
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Layout</h1>
@@ -43,12 +43,12 @@
 <p>The layout container enables you to define a look and feel of the UI with animation and basic event response by using an Edje design file. For more information, see the Layout API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Layout.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Layout.html">wearable</a> applications).</p>
 
 <p>EDC (Edje data collection) is a script language provided by Edje, which is a library in charge of the high-level layouting in EFL. An EDC file describes how the elements of the UI are positioned. An EDC file has an extension <code>.edc</code>. For more information on the syntax of EDC, see <a href="learn_edc_intro_n.htm">Layouting with EDC</a>.</p>
- 
+
 <p align="center"><strong>Figure: EDC file behavior</strong></p>
 <p align="center"><img alt="EDC file behavior" src="../../../images/edj.png" /></p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>You can customize a layout by writing an EDC file, or use a predefined, frequently used layouts provided by Tizen.</p>
 
 <h3>Customized Layout</h3>
@@ -58,11 +58,11 @@
    <li>Create an EDC file in the <code>/res/edje/</code> directory and define a layout in the EDC file.
 <pre class="prettyprint">
 collections {
-&nbsp;&nbsp;&nbsp;group {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group {
+      name: "main";
+      parts {
+      }
+   }
 }
 </pre>
 <p>If you add an <code>example.edc</code> file, the Tizen Studio calls Edje tools automatically to build the final <code>example.edj</code> file when building the project. The EDJ file is installed in the application data path.</p>
@@ -79,20 +79,20 @@ layout = elm_layout_add(parent);
 <pre class="prettyprint">
 char edj_path[128] = {0,};
 
-app_get_resource(&quot;/edje/example.edj&quot;, edj_path, 128);
-elm_layout_file_set(layout, edj_path, &quot;main&quot;);
+app_get_resource("/edje/example.edj", edj_path, 128);
+elm_layout_file_set(layout, edj_path, "main");
 </pre>
    </li>
    <li>Set objects or texts to the layout with the <code>elm_object_part_content_set()</code> or <code>elm_object_part_text_set()</code> function.</li>
    <li>Elementary can send Edje signals to the EDC part using the <code>elm_layout_signal_emit()</code> function. You can also use the <code>elm_layout_signal_callback_add()</code> function to receive signals.
    <p>Use the following code to listen to any signals sent by the layout:</p>
 <pre class="prettyprint">
-elm_layout_signal_callback_add(layout, &quot;*&quot;, &quot;*&quot;, _signal_cb, NULL);
+elm_layout_signal_callback_add(layout, "*", "*", _signal_cb, NULL);
 
 static void
 _signal_cb(void *data, Evas_Object *obj, const char *emission, const char *source)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Info received from layout: %s %s\n&quot;, emission, source);
+    printf("Info received from layout: %s %s\n", emission, source);
 }
 </pre>
    </li>
@@ -100,7 +100,7 @@ _signal_cb(void *data, Evas_Object *obj, const char *emission, const char *sourc
 
 <p>The following example shows a simple use case of the layout component, with a simple EDC script in the <code>example.edc</code> file and a connection from the resulted EDJ file to the C code.</p>
 
-   <p align="center" class="Table"><strong>Example: Layout use case</strong></p> 
+   <p align="center" class="Table"><strong>Example: Layout use case</strong></p>
 <table border="0">
    <tbody>
       <tr>
@@ -109,49 +109,49 @@ _signal_cb(void *data, Evas_Object *obj, const char *emission, const char *sourc
 /* EDC file */
 
 collections {
-&nbsp;&nbsp;&nbsp;base_scale: 1.0;
-&nbsp;&nbsp;&nbsp;group {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;effect: FAR_SOFT_SHADOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 1.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Layout Example&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.5 0.6;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 0.6;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   base_scale: 1.0;
+   group {
+      name: "main";
+      parts {
+         part {
+            name: "bg";
+            type: RECT;
+            description {
+               state: "default" 0.0;
+            }
+         }
+         part {
+            name: "text";
+            type: TEXT;
+            scale: 1;
+            effect: FAR_SOFT_SHADOW;
+            description {
+               state: "default" 0.0;
+               rel1.relative: 0.0 0.0;
+               rel2.relative: 1.0 0.5;
+               color: 0 136 170 255;
+               color2: 0 136 170 50;
+               color3: 0 136 170 25;
+               text {
+                  size: 25;
+                  font: "Sans";
+                  text: "Layout Example";
+                  align: 0.5 0.5;
+               }
+            }
+         }
+         part {
+            name: "content";
+            type: SWALLOW;
+            description {
+               state: "default" 0.0;
+               rel1.relative: 0.5 0.6;
+               rel2.relative: 0.5 0.6;
+               min: 200 100;
+            }
+         }
+      }
+   }
 }
 
 /* C code file */
@@ -167,17 +167,17 @@ char edj_path[128] = {0,};
 /* (win - conformant) */
 
 layout = elm_layout_add(nf);
-app_get_resource(&quot;edje/example.edj&quot;, edj_path, 128);
-elm_layout_file_set(layout, edj_path, &quot;main&quot;);
+app_get_resource("edje/example.edj", edj_path, 128);
+elm_layout_file_set(layout, edj_path, "main");
 evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 eext_object_event_callback_add(layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
 
 button = elm_button_add(layout);
-elm_object_text_set(button, &quot;Button1&quot;);
-elm_layout_content_set(layout, &quot;content&quot;, button);
+elm_object_text_set(button, "Button1");
+elm_layout_content_set(layout, "content", button);
 evas_object_show(button);
 
-elm_naviframe_item_push(nf, &quot;Layout&quot;, NULL, NULL, layout, NULL);
+elm_naviframe_item_push(nf, "Layout", NULL, NULL, layout, NULL);
 </pre>
          </td>
          <td>
@@ -186,34 +186,34 @@ elm_naviframe_item_push(nf, &quot;Layout&quot;, NULL, NULL, layout, NULL);
       </tr>
    </tbody>
 </table>
- 
+
 <h3 id="theme" name="theme">Predefined Layout</h3>
 
 <p>You can skip the first step (writing an EDC script) and set a theme to the layout with the <code>elm_layout_theme_set()</code> function instead of the <code>elm_layout_file_set()</code> function.</p>
 
 
 <p>The following predefined themes are available in the mobile profile:</p>
- 
+
 <ul>
    <li><code>application/default</code>: This layout can be used to display content inside a window.
 <pre class="prettyprint">
-elm_layout_theme_set(layout, &quot;layout&quot;, &quot;application&quot;, &quot;default&quot;);
-elm_object_part_content_set(ly, &quot;elm.swallow.content&quot;, view);
+elm_layout_theme_set(layout, "layout", "application", "default");
+elm_object_part_content_set(ly, "elm.swallow.content", view);
 </pre>
    </li>
    <li><code>drawer/panel</code>: This layout can be used to display 2 different views: a background and a main content.
 <pre class="prettyprint">
-elm_layout_theme_set(ly, &quot;layout&quot;, &quot;drawer&quot;, &quot;panel&quot;);
-elm_object_part_content_set(ly, &quot;elm.swallow.content&quot;, main_view);
-elm_object_part_content_set(ly, &quot;elm.swallow.background&quot;, background);
+elm_layout_theme_set(ly, "layout", "drawer", "panel");
+elm_object_part_content_set(ly, "elm.swallow.content", main_view);
+elm_object_part_content_set(ly, "elm.swallow.background", background);
 </pre>
    </li>
    <li><code>nocontents/default</code>: This layout can be used when there is no content to display, such as in a contact or email list.
    <p>You can only set texts. There are 2 different texts zones: <code>elm.text</code> and <code>elm.help.text</code>. To change the text:</p>
 <pre class="prettyprint">
-elm_layout_theme_set(ly, &quot;layout&quot;, &quot;nocontents&quot;, &quot;default&quot;);
-elm_object_part_text_set(ly, &quot;elm.text&quot;, &quot;Hi All :)&quot;);
-elm_object_part_text_set(ly, &quot;elm.help.text&quot;, &quot;Hi All :)&quot;);
+elm_layout_theme_set(ly, "layout", "nocontents", "default");
+elm_object_part_text_set(ly, "elm.text", "Hi All :)");
+elm_object_part_text_set(ly, "elm.help.text", "Hi All :)");
 </pre>
    </li>
 </ul>
@@ -232,7 +232,7 @@ elm_object_part_text_set(ly, &quot;elm.help.text&quot;, &quot;Hi All :)&quot;);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/container_mapbuf_n.htm b/org.tizen.guides/html/native/ui/efl/container_mapbuf_n.htm
index 986bcf8..ec4fc5b 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/container_mapbuf_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/container_mapbuf_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Mapbuf</title>  
+       <title>Mapbuf</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -31,17 +31,17 @@
                <ul class="toc">
                        <li><a href="#create">Adding a Mapbuf Component</a></li>
                        <li><a href="#add">Adding Content to the Mapbuf</a></li>
-                       <li><a href="#active">Activating the Mapbuf</a></li>                    
+                       <li><a href="#active">Activating the Mapbuf</a></li>
                        </ul>
                <p class="toc-title">Related Info</p>
                        <ul class="toc">
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Mapbuf</h1>
@@ -76,7 +76,7 @@ elm_object_content_set(mapbuf, content);
 
 <div class="note">
        <strong>Note</strong>
-       Calling the <code>elm_object_content_set(mapbuf, content)</code> function is equivalent to calling the <code>elm_object_part_content_set(mapbuf, &quot;default&quot;, content)</code> function.
+       Calling the <code>elm_object_content_set(mapbuf, content)</code> function is equivalent to calling the <code>elm_object_part_content_set(mapbuf, "default", content)</code> function.
 </div>
 
 <p>To activate smooth map rendering and alpha rendering for the mapbuf component:</p>
@@ -106,7 +106,7 @@ elm_mapbuf_enabled_set(mapbuf, EINA_TRUE);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/container_naviframe_n.htm b/org.tizen.guides/html/native/ui/efl/container_naviframe_n.htm
index 13f1681..9a385eb 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/container_naviframe_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/container_naviframe_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Naviframe</title>  
+       <title>Naviframe</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -30,38 +30,38 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#basic">Basic Usage</a></li>
-                       <li><a href="#style">Item Styles</a></li>               
-                       <li><a href="#callback">Callbacks</a></li>              
+                       <li><a href="#style">Item Styles</a></li>
+                       <li><a href="#callback">Callbacks</a></li>
                        </ul>
                <p class="toc-title">Related Info</p>
                        <ul class="toc">
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Naviframe</h1>
 
 <p>The naviframe container manages many views by stacking them and displaying the top-most one. For more information, see the Naviframe API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Naviframe.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Naviframe.html">wearable</a> applications).</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To build a layout with a naviframe:</p>
 <ol>
    <li>Add a naviframe with the <code>elm_naviframe_add()</code> function.</li>
    <li>Add an item (a view) and push it to the stack using the <code>elm_naviframe_item_push()</code> function. The function takes 6 parameters and returns a handler of the item.
 <pre class="prettyprint">
-Elm_Object_Item 
+Elm_Object_Item
 *elm_naviframe_item_push(Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *prev_btn,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *next_btn,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *content,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *item_style);
+                         const char *title,
+                         Evas_Object *prev_btn,
+                         Evas_Object *next_btn,
+                         Evas_Object *content,
+                         const char *item_style);
 </pre>
 <ul>
 <li><p>In Tizen, the <code>next_btn</code> (fourth parameter) is not shown, so use <code>NULL</code>. The <code>prev_btn</code> (third parameter) is supported, but auto pushing is also supported from Tizen 2.4. As a result, use <code>NULL</code> for <code>prev_btn</code> too, and set the auto-pushed flag (about the <code>prev_btn</code>) to <code>true</code> (like below).</p>
@@ -76,21 +76,21 @@ elm_naviframe_prev_btn_auto_pushed_set(nf, EINA_TRUE);
 <p>The last parameter is the style of the naviframe item. In Tizen mobile, various <a href="#style">item styles</a> are provided:</p>
 <ul><li>If an item style supports text parts, fill the text parts with the <code>elm_object_item_part_text_set()</code> function:
 <pre class="prettyprint">
-elm_object_item_part_text_set(nf_it, &quot;subtitle&quot;, &quot;subtitle&quot;);
+elm_object_item_part_text_set(nf_it, "subtitle", "subtitle");
 </pre></li>
 <li>
 <p>If an item style supports swallow parts, fill the swallow parts with the <code>elm_object_item_part_content_set()</code> function:</p>
 <pre class="prettyprint">
-elm_object_item_part_content_set(nf_it, &quot;title_left_btn&quot;, btn);
+elm_object_item_part_content_set(nf_it, "title_left_btn", btn);
 </pre>
  </li>
  </ul>
-<p>The <code>default</code> text part is the title, and the <code>default</code> swallow part is the main content area. You can fill these parts with the <code>elm_naviframe_item_push()</code> function as well.</p> 
-</li></ul> 
+<p>The <code>default</code> text part is the title, and the <code>default</code> swallow part is the main content area. You can fill these parts with the <code>elm_naviframe_item_push()</code> function as well.</p>
+</li></ul>
    </li>
    <li>Repeat step 2 for each view you have. You can pop and delete the top-most view during the process using the <code>elm_naviframe_item_pop()</code> function.</li>
 </ol>
- 
+
 <p>The following example shows a simple use case of the naviframe component in a mobile application.</p>
 <p align="center" class="Table"><strong>Example: Naviframe use case</strong></p>
 <table border="0">
@@ -102,14 +102,14 @@ Evas_Object *nf;
 Evas_Object *ly;
 Evas_Object *tb;
 Elm_Object_Item *nf_it;
- 
+
 /* Variables for naviframe item push */
-const char *title_text = &quot;Naviframe&quot;;
+const char *title_text = "Naviframe";
 Evas_Object *prev_btn = NULL; /* recommended NULL, replace with elm_naviframe_prev_btn_auto_pushed_set() */
 Evas_Object *next_btn = NULL; /* recommended NULL */
 Evas_Object *empty_content = NULL;
 const char *item_style_default = NULL;
-const char *item_style_tabbar = &quot;tabbar&quot;;
+const char *item_style_tabbar = "tabbar";
 
 /* Starting right after the conformant <a href="ui_layouts_n.htm#code">the basic EFL UI layout code</a> */
 /* (win - conformant) */
@@ -121,25 +121,25 @@ evas_object_show(nf);
 
 /* Add a layout */
 ly = elm_layout_add(nf);
-elm_layout_theme_set(ly, &quot;layout&quot;, &quot;nocontents&quot;, &quot;default&quot;);
-elm_object_part_text_set(ly, &quot;elm.text&quot;, &quot;Naviframe Content Area&quot;);
+elm_layout_theme_set(ly, "layout", "nocontents", "default");
+elm_object_part_text_set(ly, "elm.text", "Naviframe Content Area");
 
 /* Add a toolbar */
 tb = elm_toolbar_add(nf);
 elm_toolbar_shrink_mode_set(tb, ELM_TOOLBAR_SHRINK_EXPAND);
 elm_toolbar_transverse_expanded_set(tb, EINA_TRUE);
-elm_toolbar_item_append(tb, NULL, &quot;Tab1&quot;, NULL, NULL);
-elm_toolbar_item_append(tb, NULL, &quot;Tab2&quot;, NULL, NULL);
+elm_toolbar_item_append(tb, NULL, "Tab1", NULL, NULL);
+elm_toolbar_item_append(tb, NULL, "Tab2", NULL, NULL);
 evas_object_show(tb);
 
 /* Push a naviframe item (push 2 items in total to show the back button) */
 elm_naviframe_item_push(nf, title_text, prev_btn, next_btn, empty_content, item_style_default);
 
-/* Push a naviframe item, set the style as &quot;tabbar&quot; and pass the layout as content */
+/* Push a naviframe item, set the style as "tabbar" and pass the layout as content */
 nf_it = elm_naviframe_item_push(nf, title_text, prev_btn, next_btn, ly, item_style_tabbar);
 
-/* Set the toolbar into the &quot;tabbar&quot; part of the naviframe item */
-elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, tb);
+/* Set the toolbar into the "tabbar" part of the naviframe item */
+elm_object_item_part_content_set(nf_it, "tabbar", tb);
 </pre>
 
          </td>
@@ -257,9 +257,9 @@ elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, tb);
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>transition,finished</code></td>
@@ -298,7 +298,7 @@ elm_object_item_part_content_set(nf_it, &quot;tabbar&quot;, tb);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/container_panes_mn.htm b/org.tizen.guides/html/native/ui/efl/container_panes_mn.htm
index 0217d61..ab875de 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/container_panes_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/container_panes_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Panes</title>  
+       <title>Panes</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -29,7 +29,7 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#basic">Basic Usage</a></li>
-                       <li><a href="#callback">Callbacks</a></li>                      
+                       <li><a href="#callback">Callbacks</a></li>
                        </ul>
                <p class="toc-title">Related Info</p>
                        <ul class="toc">
@@ -37,20 +37,20 @@
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Panes</h1>
 
 
 <p>The panes container adds a draggable bar between 2 sections of content. The sections are resized when the bar is dragged. For more information, see the <a href="../../../../../org.tizen.native.mobile.apireference/group__Panes.html">Panes</a> API.</p>
-   
+
 <p>This feature is supported in mobile applications only.</p>
 
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To use panes in your application:</p>
- 
+
 <ol>
    <li>Add a panes with the <code>elm_panes_add()</code> function:
 <pre class="prettyprint">
@@ -64,41 +64,41 @@ panes = elm_panes_add(parent);
 <pre class="prettyprint">
 Evas_Object *left_button;
 
-elm_object_part_content_set(panes, &quot;left&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left_button);
+elm_object_part_content_set(panes, "left",
+                            left_button);
 </pre>
  </li>
    <li>Add a content to the right pane:
 <pre class="prettyprint">
 Evas_Object *right_button;
 
-elm_object_part_content_set(panes, &quot;right&quot;, right_button);
+elm_object_part_content_set(panes, "right", right_button);
 </pre>
 </li></ul></li>
-   <li>Set the direction of the panes with the <code>elm_panes_horizontal_set()</code> function. A panes is vertical by default. Horizontal panes have &quot;top&quot; and &quot;bottom&quot; content, while vertical panes have &quot;left&quot; and &quot;right&quot; content.
+   <li>Set the direction of the panes with the <code>elm_panes_horizontal_set()</code> function. A panes is vertical by default. Horizontal panes have "top" and "bottom" content, while vertical panes have "left" and "right" content.
 <pre class="prettyprint">
 elm_panes_horizontal_set(panes, EINA_TRUE);
-elm_object_part_content_set(panes, &quot;top&quot;, top_button);
-elm_object_part_content_set(panes, &quot;bottom&quot;, bottom_button);
+elm_object_part_content_set(panes, "top", top_button);
+elm_object_part_content_set(panes, "bottom", bottom_button);
 </pre>
    </li>
- 
-   <li>Set the size of the panes with the <code>elm_panes_content_right_size_set</code> function. 
+
+   <li>Set the size of the panes with the <code>elm_panes_content_right_size_set</code> function.
    <p>By default, both sides of the panes have the same size. You can change the size proportion of the panes. If the left content must be displayed over 75% of the panes size, the size must be passed as 0.75. This way, the right content is resized to 25% of the panes size. If displayed vertically, left content is displayed at top, and right content at the bottom.</p>
 <pre class="prettyprint">
 elm_panes_content_left_size_set(panes, 0.75);
 </pre>
    </li>
- 
+
    <li>Register the <a href="#callback">callback</a> functions.
    <p>The following example shows how to define and register a callback for the <code>clicked,double</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(panes, &quot;clicked,double&quot;, clicked_double_cb, data);
+evas_object_smart_callback_add(panes, "clicked,double", clicked_double_cb, data);
 
 void
 clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Panes double clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Panes double clicked\n");
 }
 </pre>
    </li>
@@ -125,18 +125,18 @@ Evas_Object *right_button;
 panes = elm_panes_add(nf);
 elm_object_content_set(nf, panes);
 evas_object_show(panes);
-elm_naviframe_item_push(nf, &quot;Panes&quot;, NULL, NULL, panes, NULL);
+elm_naviframe_item_push(nf, "Panes", NULL, NULL, panes, NULL);
 
 /* Add a button to the left pane */
 left_button = elm_button_add(panes);
-elm_object_text_set(left_button, &quot;Left&quot;);
-elm_object_part_content_set(panes, &quot;left&quot;, left_button);
+elm_object_text_set(left_button, "Left");
+elm_object_part_content_set(panes, "left", left_button);
 evas_object_show(left_button);
 
 /* Add a button to the right pane */
 right_button = elm_button_add(panes);
-elm_object_text_set(right_button, &quot;Right&quot;);
-elm_object_part_content_set(panes, &quot;right&quot;, right_button);
+elm_object_text_set(right_button, "Right");
+elm_object_part_content_set(panes, "right", right_button);
 evas_object_show(right_button);
 </pre>
          </td>
@@ -155,9 +155,9 @@ evas_object_show(right_button);
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>clicked</code></td>
@@ -201,7 +201,7 @@ evas_object_show(right_button);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/container_scroller_n.htm b/org.tizen.guides/html/native/ui/efl/container_scroller_n.htm
index 58c8a57..f02a797 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/container_scroller_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/container_scroller_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Scroller</title>  
+       <title>Scroller</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,25 +32,25 @@
                        <li><a href="#basic">Basic Usage</a></li>
                        <li><a href="#style">Styles</a></li>
                        <li><a href="#callback">Callbacks</a></li>
-                       <li><a href="#example">Example</a></li>                 
+                       <li><a href="#example">Example</a></li>
                        </ul>
                <p class="toc-title">Related Info</p>
                        <ul class="toc">
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Scroller</h1>
 
 <p>The scroller container holds and clips a single object and allows you to scroll across it. This means that the user can use a scroll bar or a finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. A scroller always has a default minimum size that is not limited by its content. For more information, see the Scroller API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Scroller.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Scroller.html">wearable</a> applications).</p>
- 
+
 <h2 id="basic">Basic Usage</h2>
- 
+
 <p>To build a layout with a scroller:</p>
 <ol>
    <li>Add a scroller with the <code>elm_scroller_add()</code> function:
@@ -62,7 +62,7 @@ scroller = elm_scroller_add(parent);
 </li>
    <li>Set a <a href="#style">style</a> to the scroller with the <code>elm_object_style_set()</code> function. If you use the default style, you can skip this step.
 <pre class="prettyprint">
-elm_object_style_set(scroller, &quot;handler&quot;);
+elm_object_style_set(scroller, "handler");
 </pre></li>
    <li>Add an object and set it to the scroller with the <code>elm_object_content_set()</code> function:
 <pre class="prettyprint">
@@ -75,12 +75,12 @@ elm_object_content_set(scroller, image);
    <li>Register the <a href="#callback">callback</a> functions.
     <p>The following example shows how to define and register a callback for the <code>scroll,drag,start</code> signal:</p>
 <pre class="prettyprint">
-evas_object_smart_callback_add(scroller, &quot;scroll,drag,start&quot;, _scroll_start_cb, NULL);
+evas_object_smart_callback_add(scroller, "scroll,drag,start", _scroll_start_cb, NULL);
 
 void
 _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Scroll starts\n&quot;);
+    printf("Scroll starts\n");
 }
 </pre>
    </li>
@@ -88,7 +88,7 @@ _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
 
 <p>The following example shows a simple use case of the scroller component, where an image objects is set into a scroller. The minimum size of the image (1600 x 1600 pixels) is larger than the scroller (smaller than 720 * 1280 pixels), so you can scroll across the image.</p>
 
-   <p align="center" class="Table"><strong>Example: Scroller use case</strong></p> 
+   <p align="center" class="Table"><strong>Example: Scroller use case</strong></p>
 <table border="0">
    <tbody>
       <tr>
@@ -106,11 +106,11 @@ Evas_Object *img;
 /* Add a scroller and push it into the naviframe */
 scroller = elm_scroller_add(nf);
 evas_object_show(scroller);
-elm_naviframe_item_push(nf, &quot;Scroller&quot;, NULL, NULL, scroller, NULL);
+elm_naviframe_item_push(nf, "Scroller", NULL, NULL, scroller, NULL);
 
 /* Add an image and set it into the scroller */
 img = elm_image_add(scroller);
-elm_image_file_set(img, ICON_DIR&quot;/tizen.png&quot;, NULL);
+elm_image_file_set(img, ICON_DIR"/tizen.png", NULL);
 evas_object_size_hint_min_set(img, 1600, 1600);
 evas_object_show(img);
 elm_object_content_set(scroller, img);
@@ -132,7 +132,7 @@ elm_object_content_set(scroller, img);
 <h2 id="style">Styles</h2>
 
 <p>The following table lists the available component styles.</p>
- 
+
    <p align="center" class="Table"><strong>Table: Scroller styles</strong></p>
 <table>
    <col width="20%"/>
@@ -152,7 +152,7 @@ elm_object_content_set(scroller, img);
       </tr>
    </tbody>
 </table>
- 
+
 <h2 id="callback">Callbacks</h2>
 
 <p>You can register callback functions connected to the following signals for a scroller object.</p>
@@ -161,9 +161,9 @@ elm_object_content_set(scroller, img);
 <table border="1">
    <tbody>
       <tr>
-         <th>Signal</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Signal</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>edge,left</code></td>
@@ -254,10 +254,10 @@ elm_object_content_set(scroller, img);
 </div>
 
 <h2 id="example">Example</h2>
- 
+
  <p>A good example of the scroller use is a picture slideshow: add images to the scroller and limit the scrolling to pages, meaning that one picture at a time is shown.</p>
- 
-<p>A scroller can limit scrolling to &quot;pages&quot;. In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single page at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <code>elm_scroller_page_size_set()</code> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
+
+<p>A scroller can limit scrolling to "pages". In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single page at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <code>elm_scroller_page_size_set()</code> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
 
 <p>To create a picture slideshow:</p>
 <ol>
@@ -281,7 +281,7 @@ evas_object_show(box);
 <p>Create all the images and add them to the horizontal box:</p>
 <pre class="prettyprint">
 img = elm_image_add(scroller);
-snprintf(buf, sizeof(buf), IMAGE_DIR&quot;/%d.jpg&quot;, i);
+snprintf(buf, sizeof(buf), IMAGE_DIR"/%d.jpg", i);
 elm_image_file_set(img, buf, NULL);
 evas_object_show(img);
 pages = eina_list_append(pages, img);
@@ -300,12 +300,12 @@ elm_scroller_page_show(scroller, 0, 0);
 <p>Since you need to be informed when the scroller is resized, add a callback on the <code>EVAS_CALLBACK_RESIZE</code> event for the scroller:</p>
 <pre class="prettyprint">
 evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_scroller_resize_cb, NULL);
+                               _scroller_resize_cb, NULL);
 </pre>
 <p>The callback retrieves the new size of the scroller using the <code>evas_object_geometry_get()</code> function on the object pointer. The pointer is relative to the object that has been resized, which in this case is the scroller itself. Iterate through the images of the scroller and set the minimum size to fit the scroller size:</p>
 <pre class="prettyprint">
 EINA_LIST_FOREACH(images, l, page)
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(page, w, h);
+    evas_object_size_hint_min_set(page, w, h);
 </pre>
 <p>Set the page size of the scroller to match the scroller size and display the first page:</p>
 <pre class="prettyprint">
@@ -329,7 +329,7 @@ elm_scroller_page_show(obj, 0, 0);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/container_table_n.htm b/org.tizen.guides/html/native/ui/efl/container_table_n.htm
index b2b6b0d..df39db0 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/container_table_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/container_table_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Table</title>  
+       <title>Table</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -30,17 +30,17 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#basic">Basic Usage</a></li>
-                       <li><a href="#feature">Features</a></li>                        
+                       <li><a href="#feature">Features</a></li>
                        </ul>
                <p class="toc-title">Related Info</p>
                        <ul class="toc">
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                                <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
-                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                               <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Table</h1>
@@ -49,7 +49,7 @@
 
 <p align="center"><strong>Figure: Table component structure</strong></p>
 <p align="center"><img alt="Table component structure" src="../../../images/table.png"/></p>
- 
+
 <h2 id="basic">Basic Usage</h2>
 
 <p>To build a layout with a table:</p>
@@ -74,7 +74,7 @@ elm_table_pack(table, btn, 0, 0, 1, 1);
 <p>The following example shows a simple use case of the table component, where 5 button objects are packed into a table. The <code>elm_table_pack()</code> function is used to add each button to the table. 1 button takes 2 rows and 1 column, and 4 buttons take only 1 row and column.</p>
 
    <p align="center" class="Table"><strong>Example: Table use case</strong></p>
-<table border="0"> 
+<table border="0">
    <tbody>
       <tr>
          <td>
@@ -95,35 +95,35 @@ elm_table_padding_set(table, 1, 1);
 evas_object_show(table);
 
 btn = elm_button_add(table);
-elm_object_text_set(btn, &quot;Button1&quot;);
+elm_object_text_set(btn, "Button1");
 evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
 elm_table_pack(table, btn, 0, 0, 1, 1);
 evas_object_show(btn);
 
 btn = elm_button_add(table);
-elm_object_text_set(btn, &quot;Button2&quot;);
+elm_object_text_set(btn, "Button2");
 evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
 elm_table_pack(table, btn, 1, 0, 1, 1);
 evas_object_show(btn);
 
 btn = elm_button_add(table);
-elm_object_text_set(btn, &quot;Button3&quot;);
+elm_object_text_set(btn, "Button3");
 evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
 elm_table_pack(table, btn, 0, 1, 1, 1);
 evas_object_show(btn);
 
 btn = elm_button_add(table);
-elm_object_text_set(btn, &quot;Button4&quot;);
+elm_object_text_set(btn, "Button4");
 evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
 elm_table_pack(table, btn, 0, 2, 1, 1);
 evas_object_show(btn);
 
 btn = elm_button_add(table);
-elm_object_text_set(btn, &quot;Button5&quot;);
+elm_object_text_set(btn, "Button5");
 evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
 elm_table_pack(table, btn, 1, 1, 1, 2);
@@ -176,7 +176,7 @@ elm_table_homogeneous_set(table, EINA_TRUE);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/core_loop_n.htm b/org.tizen.guides/html/native/ui/efl/core_loop_n.htm
index 3aeab6a..98649ad 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/core_loop_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/core_loop_n.htm
@@ -36,9 +36,9 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-   
+
 <h1>Core Loop and OS Interfacing</h1>
-   
+
 <p>The Ecore library provides convenience functions, which allow you to manage the application processing mechanisms through:</p>
 
 <ul>
@@ -64,7 +64,7 @@
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-   
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/data_types_n.htm b/org.tizen.guides/html/native/ui/efl/data_types_n.htm
index 031a8bd..d7426d9 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/data_types_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/data_types_n.htm
@@ -26,7 +26,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
         <p class="toc-title">Content</p>
-        <ul class="toc">      
+        <ul class="toc">
                         <li><a href="#iterate">Iterator Functions</a></li>
                         <li><a href="#string">Strings</a></li>
                         <li><a href="#array">Arrays</a></li>
@@ -66,7 +66,7 @@
 <li>Data Model API: Container for data with a user-defined hierarchy or structure</li>
 </ul>
 
-  
+
 <h2 id="iterate" name="iterate">Iterator Functions</h2>
 <p>Eina provides a set of iterator functions to manipulate data types, such as arrays.</p>
 <p>These functions allow access to container elements in a generic way, without knowing which container is used (similar to iterators in the C++ STL). Iterators only allow sequential access (that is, from one element to the next one). For random access, Eina provides accessor functions.</p>
@@ -86,18 +86,18 @@
 <li>To create a stringshare, declare a string variable and call the <code>eina_stringshare_add()</code> function:
 <pre class="prettyprint">
 const char *mystr;
-const char *prologue = &quot;Enlightenment is not just a window manager
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for Linux/X11 and others&quot;;
+const char *prologue = "Enlightenment is not just a window manager
+                        for Linux/X11 and others";
 
 mystr = eina_stringshare_add(prologue);
 </pre></li>
 
 <li>To retrieve or modify the string data:
 <ul>
-<li>Retrieve a string for use in a program from a format string using the <code>eina_stringshare_printf()</code> function. If you have a &quot;format&quot; string to pass to a function like <code>printf</code>, you can store it as a stringshare as well.
-<p>The following example produces &quot;1 desktop manager to rule them all&quot;.</p>
+<li>Retrieve a string for use in a program from a format string using the <code>eina_stringshare_printf()</code> function. If you have a "format" string to pass to a function like <code>printf</code>, you can store it as a stringshare as well.
+<p>The following example produces "1 desktop manager to rule them all".</p>
 <pre class="prettyprint">
-const char *myfmtstr = &quot;%d desktop manager to rule them all&quot;;
+const char *myfmtstr = "%d desktop manager to rule them all";
 const char *str;
 
 str = eina_stringshare_printf(myfmtstr, 1);
@@ -108,13 +108,13 @@ print(str);
 
 <li>Replace the value of a stringshare with the <code>eina_stringshare_replace()</code> function. Pass the pointer address and the new value to the function.
 <pre class="prettyprint">
-eina_stringshare_replace(&amp;str, &quot;One desktop manager to rule them all&quot;);
+eina_stringshare_replace(&amp;str, "One desktop manager to rule them all");
 </pre>
 </li>
 
 <li>Retrieve the length of the stringshare value with the <code>eina_stringshare_strlen()</code> function.
 <pre class="prettyprint">
-printf(&quot;length: %d\n&quot;, eina_stringshare_strlen(str));
+printf("length: %d\n", eina_stringshare_strlen(str));
 </pre>
 </li>
 </ul>
@@ -145,18 +145,18 @@ mybuffer = eina_strbuf_new();
 <li>
 <p>For basic strings, use the <code>eina_strbuf_append()</code> function:</p>
 <pre class="prettyprint">
-eina_strbuf_append(mybuffer, &quot;This is my string.&quot;);
+eina_strbuf_append(mybuffer, "This is my string.");
 </pre>
 </li>
 <li>To append 1 character to your buffer, use the <code>eina_strbuf_append_char()</code> function. You can also append a sized string to the buffer using the <code>eina_strbuf_append_length()</code> function.
 <pre class="prettyprint">
-eina_strbuf_append_length(mybuffer, &quot;Buffe&quot;, 5);
-eina_strbuf_append_char(mybuffer, &#39;r&#39;);
+eina_strbuf_append_length(mybuffer, "Buffe", 5);
+eina_strbuf_append_char(mybuffer, 'r');
 </pre>
 </li>
-<li>To handle &quot;printf&quot; format strings, use the <code>eina_strbuf_append_printf()</code> function to add formatted strings to the buffer:
+<li>To handle "printf" format strings, use the <code>eina_strbuf_append_printf()</code> function to add formatted strings to the buffer:
 <pre class="prettyprint">
-eina_strbuf_append_printf(buf, &quot;%s%c&quot;, &quot;buffe&quot;, &#39;r&#39;);
+eina_strbuf_append_printf(buf, "%s%c", "buffe", 'r');
 </pre>
 </li>
 </ul>
@@ -169,7 +169,7 @@ eina_strbuf_remove(buf, 0, 18);
 </pre>
 </li>
 
-<li>To replace characters: 
+<li>To replace characters:
 
 <ul><li>
 <code>eina_strbuf_replace()</code> replaces a specific occurrence of a given string in the buffer with another string.</li>
@@ -178,31 +178,31 @@ eina_strbuf_remove(buf, 0, 18);
 </li>
 </ul>
 <pre class="prettyprint">
-eina_strbuf_append(mybuffer, &quot;buffer buffer buffer&quot;);
+eina_strbuf_append(mybuffer, "buffer buffer buffer");
 
-/* Replacing 1 occurrence of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot; */
-eina_strbuf_replace(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;, 1);
+/* Replacing 1 occurrence of "buffer" by "B-U-F-F-E-R" */
+eina_strbuf_replace(mybuffer, "buffer", "B-U-F-F-E-R", 1);
 
-/* Replacing all the occurrences of &quot;buffer&quot; by &quot;B-U-F-F-E-R&quot; */
-eina_strbuf_replace_all(mybuffer, &quot;buffer&quot;, &quot;B-U-F-F-E-R&quot;);
+/* Replacing all the occurrences of "buffer" by "B-U-F-F-E-R" */
+eina_strbuf_replace_all(mybuffer, "buffer", "B-U-F-F-E-R");
 
-/* Replacing all the occurrences of &quot;B-U-F-F-E-R&quot; by &quot;Buffer&quot; */
-eina_strbuf_replace_all(mybuffer, &quot;B-U-F-F-E-R&quot;, &quot;Buffer&quot;);
+/* Replacing all the occurrences of "B-U-F-F-E-R" by "Buffer" */
+eina_strbuf_replace_all(mybuffer, "B-U-F-F-E-R", "Buffer");
 </pre>
 </li>
 <li>To insert a string at the specified position, use the <code>eina_strbuf_insert()</code> function. Use the <code>eina_strbuf_insert_printf()</code> function with formatted strings.
 <pre class="prettyprint">
-eina_strbuf_insert(mybuffer, &quot;More buffer&quot;, 10);
+eina_strbuf_insert(mybuffer, "More buffer", 10);
 
 /* Using eina_strbuf_length_get to get the buffer length */
-eina_strbuf_insert_printf(buf, &quot;%s: %d&quot;, 6, &quot;length&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_strbuf_length_get(buf));
+eina_strbuf_insert_printf(buf, "%s: %d", 6, "length",
+                          eina_strbuf_length_get(buf));
 </pre>
 </li>
 
 <li>To get the complete length of the string and the buffer, use the <code>eina_strbuf_string_get()</code> and <code>eina_strbuf_length_get()</code> functions:
 <pre class="prettyprint">
-printf(&quot;%s: %d\n&quot;, eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
+printf("%s: %d\n", eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
 </pre>
 </li>
 </ul>
@@ -244,10 +244,10 @@ INDEX | VALUE
 const char*
 strings[] =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;helo&quot;, &quot;hera&quot;, &quot;starbuck&quot;, &quot;kat&quot;, &quot;boomer&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;hotdog&quot;, &quot;longshot&quot;, &quot;jammer&quot;, &quot;crashdown&quot;, &quot;hardball&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;duck&quot;, &quot;racetrack&quot;, &quot;apolo&quot;, &quot;husker&quot;, &quot;freaker&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;skulls&quot;, &quot;bulldog&quot;, &quot;flat top&quot;, &quot;hammerhead&quot;, &quot;gonzo&quot;
+    "helo", "hera", "starbuck", "kat", "boomer",
+    "hotdog", "longshot", "jammer", "crashdown", "hardball",
+    "duck", "racetrack", "apolo", "husker", "freaker",
+    "skulls", "bulldog", "flat top", "hammerhead", "gonzo"
 };
 /* Declaring the array (type Eina_Array) */
 Eina_Array *array;
@@ -258,7 +258,7 @@ array = eina_array_new(20);
 
 /* Inserting elements in the array */
 for (i = 0; i &lt; 20; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
+    eina_array_push(array, strdup(strings[i]));
 </pre>
 </li>
 <li>To change the allocation step, use the <code>eina_array_step_set()</code> function:
@@ -274,7 +274,7 @@ eina_array_step_set(array, sizeof(*array), 30);
 <pre class="prettyprint">
 /* Freeing the array elements */
 while (eina_array_count(array))
-&nbsp;&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
+    free(eina_array_pop(array));
 
 /* Freeing the array itself */
 eina_array_free(array);
@@ -295,14 +295,14 @@ eina_array_data_set(array, 0, strdup(strings[3]);
 <li>To add elements to the end of the array, use the <code>eina_array_push()</code> function. The function returns <code>EINA_TRUE</code> on success, and <code>EINA_FALSE</code> on failure. The first parameter is the array to store the element, the second one is the data you want to store. If you store strings, remember to allocate the memory first. The example uses the <code>strdup()</code> function to duplicate the string contained in <code>strings[]</code>. This function allocates the memory of the returned string, so you do not have to do it yourself.
 <pre class="prettyprint">
 for (i = 0; i &lt; 20; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;eina_array_push(array, strdup(strings[i]));
+    eina_array_push(array, strdup(strings[i]));
 </pre>
 </li>
 
 <li>To remove the last element of an array, use the <code>eina_array_pop()</code> function. It takes the array as a parameter, and if the operation is successful, returns a pointer to the data of the removed element.
 <pre class="prettyprint">
 while (eina_array_count(array))
-&nbsp;&nbsp;&nbsp;&nbsp;free(eina_array_pop(array));
+    free(eina_array_pop(array));
 </pre>
 </li>
 
@@ -317,28 +317,28 @@ while (eina_array_count(array))
 Eina_Bool
 keep(void *data, void *gdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (strlen((const char*)data) &lt;= 5)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    if (strlen((const char*)data) &lt;= 5)
+        return EINA_TRUE;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+    return EINA_FALSE;
 }
 
 int
 remove_array()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Array_Iterator iterator;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *item;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int i;
+    Eina_Array *array;
+    Eina_Array_Iterator iterator;
+    const char *item;
+    unsigned int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating and populating an array */
+    /* Creating and populating an array */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Removing the undesired elements */
-&nbsp;&nbsp;&nbsp;&nbsp;eina_array_remove(array, keep, NULL);
+    /* Removing the undesired elements */
+    eina_array_remove(array, keep, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Flushing and freeing the array */
+    /* Flushing and freeing the array */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
@@ -385,7 +385,7 @@ const char *item;
 unsigned int i;
 
 EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;item #%d: %s\n&quot;, i, item);
+    printf("item #%d: %s\n", i, item);
 </pre>
 </li>
 <li>Use the <code>eina_array_foreach()</code> function to iterate over the array.
@@ -396,25 +396,25 @@ EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
 static Eina_Bool
 elm_print(const void *container, void *data, void *fdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char *)data);
+    printf("%s\n", (char *)data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    return EINA_TRUE;
 }
 
 int
 iterating_array()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int i;
+    Eina_Array *array;
+    unsigned int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating and populating an array */
+    /* Creating and populating an array */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Iterating over the array and calling elm_print on each element */
-&nbsp;&nbsp;&nbsp;&nbsp;eina_array_foreach(array, elm_print, NULL);
+    /* Iterating over the array and calling elm_print on each element */
+    eina_array_foreach(array, elm_print, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Freeing the element data and array */
+    /* Freeing the element data and array */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
@@ -426,68 +426,68 @@ iterating_array()
 static Eina_Bool
 print_one(const void *container, void *data, void *fdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)data);
+    printf("%s\n", (char*)data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    return EINA_TRUE;
 }
 
 int
 new_iterator()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Iterator *it;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned short int i;
-&nbsp;&nbsp;&nbsp;&nbsp;void *uninteresting;
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool rt;
+    Eina_Array *array;
+    Eina_Iterator *it;
+    unsigned short int i;
+    void *uninteresting;
+    Eina_Bool rt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating and populating an array */
+    /* Creating and populating an array */
 
-&nbsp;&nbsp;&nbsp;&nbsp;it = eina_array_iterator_new(array);
+    it = eina_array_iterator_new(array);
 
-&nbsp;&nbsp;&nbsp;&nbsp;it = eina_iterator_next(it, &amp;uninteresting);
-&nbsp;&nbsp;&nbsp;&nbsp;eina_iterator_foreach(it, print_one, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;eina_iterator_free(it);
+    it = eina_iterator_next(it, &amp;uninteresting);
+    eina_iterator_foreach(it, print_one, NULL);
+    eina_iterator_free(it);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
-<li>Use the <code>eina_array_accessor_new()</code> function to get random access to the array elements. 
+<li>Use the <code>eina_array_accessor_new()</code> function to get random access to the array elements.
 <p>The function returns a newly allocated accessor associated with the array. If the array is <code>NULL</code> or the counting of array members is less than or equal to 0, this function returns <code>NULL</code>. If the memory cannot be allocated, <code>NULL</code> is returned and <code>EINA_ERROR_OUT_OF_MEMORY</code> is thrown. Otherwise, a valid accessor is returned.</p>
 <p>To use the accessor to retrieve and print the data of every other array element:</p>
 <pre class="prettyprint">
 int
 random_access()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Declaration of the array */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Array *array;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Declaration of the accessor */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Accessor *acc;
+    /* Declaration of the array */
+    Eina_Array *array;
+    /* Declaration of the accessor */
+    Eina_Accessor *acc;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Generic counter */
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned short int i;
+    /* Generic counter */
+    unsigned short int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Variable to put the data retrieved from an array element */
-&nbsp;&nbsp;&nbsp;&nbsp;void *data;
+    /* Variable to put the data retrieved from an array element */
+    void *data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating and populating an array */
+    /* Creating and populating an array */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating the array accessor */
-&nbsp;&nbsp;&nbsp;&nbsp;acc = eina_array_accessor_new(array);
+    /* Creating the array accessor */
+    acc = eina_array_accessor_new(array);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Random access to the data of the array elements */
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 1; i &lt; 10; i += 2) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Putting the data in the variable &#39;data&#39; */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_accessor_data_get(acc, i, &amp;data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (const char *)data);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* Random access to the data of the array elements */
+    for (i = 1; i &lt; 10; i += 2) {
+        /* Putting the data in the variable 'data' */
+        eina_accessor_data_get(acc, i, &amp;data);
+        printf("%s\n", (const char *)data);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Freeing the accessor */
-&nbsp;&nbsp;&nbsp;&nbsp;eina_accessor_free(acc);
+    /* Freeing the accessor */
+    eina_accessor_free(acc);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Freeing the array */
+    /* Freeing the array */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
@@ -501,7 +501,7 @@ random_access()
 <p>An inline array is a container that stores the data itself, not the pointers to the data. This means there is no memory fragmentation, and for small data types, such as char, short, and int, it is more memory-efficient. This is because the data is stored in the cache and is faster to access. The bigger the data gets, however, the less likely it is and the less interesting it becomes.</p>
 <p>To create an inline array, use the <code>eina_inarray_new()</code> function:</p>
 <ul><li>The first parameter is the size of the value. In this example, only the characters are stored, and because of that, only <code>sizeof(char)</code> is passed to the function.</li>
-<li>The second parameter defines the size of the array allocation step. For example, if you set it to 4, the function returns an inline array of 4 elements, and the next time you grow the inline array, it grows by 4 elements and becomes an array of 8 elements. If you set the step to 0, the function sets a default safe value. 
+<li>The second parameter defines the size of the array allocation step. For example, if you set it to 4, the function returns an inline array of 4 elements, and the next time you grow the inline array, it grows by 4 elements and becomes an array of 8 elements. If you set the step to 0, the function sets a default safe value.
 <p>The step can be changed later on using the <code>eina_inarray_step_set()</code> function.</p></li></ul>
 
 <p>The <code>eina_inarray_new()</code> function returns a pointer to the new <code>Eina_Inarray</code> variable.</p>
@@ -509,16 +509,16 @@ random_access()
 int
 inline_array()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Declare an inline array variable of the type Eina_Inarray */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
+    /* Declare an inline array variable of the type Eina_Inarray */
+    Eina_Inarray *iarr;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create an inline array of &quot;char&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 0);
+    /* Create an inline array of "char" */
+    iarr = eina_inarray_new(sizeof(char), 0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* When no longer needed, free the array memory */
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+    /* When no longer needed, free the array memory */
+    eina_inarray_free(iarr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -530,7 +530,7 @@ inline_array()
 <p>To add data as the last element of the inline array, use the <code>eina_inarray_push()</code> function. The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function. The second parameter is the data you want to push to the inline array.</p>
 <p>If everything runs fine, the function returns the index of the new element. If something goes wrong, it returns <code>-1</code>.</p>
 <pre class="prettyprint">
-ch = &#39;a&#39;;
+ch = 'a';
 eina_inarray_push(iarr, &amp;ch);
 </pre>
 </li>
@@ -541,15 +541,15 @@ eina_inarray_push(iarr, &amp;ch);
 <li>The last parameter is a pointer to the content to be added.</li></ul>
 <p>The content of the pointer is copied to the given position in the inline array. All the members from the position to the end of the array are shifted towards the end. If the position is equal to the end of the array, the member is appended. If the position is bigger than the array length, the function fails.</p>
 <pre class="prettyprint">
-ch = &#39;a&#39;;
+ch = 'a';
 eina_inarray_push(iarr, &amp;ch);
-ch = &#39;b&#39;;
+ch = 'b';
 eina_inarray_push(iarr, &amp;ch);
-ch = &#39;d&#39;;
+ch = 'd';
 eina_inarray_push(iarr, &amp;ch);
 
 /* Adding data on position 3 */
-ch = &#39;c&#39;;
+ch = 'c';
 eina_inarray_insert_at(iarr, 2, &amp;ch);
 </pre>
 </li>
@@ -558,7 +558,7 @@ eina_inarray_insert_at(iarr, 2, &amp;ch);
 <p>In both functions:</p>
 <ul><li>The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function.</li>
 <li>The second parameter is the data you want to push to the inline array.</li>
-<li>The last parameter is the callback comparison function. 
+<li>The last parameter is the callback comparison function.
 <p>The <code>Eina_Compare_Cb</code> callback function compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to the <code>eina_inarray_insert()</code> or <code>eina_inarray_insert_sorted()</code> function as the second parameter. If data1 is less than data2, -1 must be returned, if it is greater, 1 must be returned, and if they are equal, 0 must be returned.</p></li></ul>
 <p>The following example shows how to insert a value before a greater value:</p>
 <pre class="prettyprint">
@@ -566,33 +566,33 @@ eina_inarray_insert_at(iarr, 2, &amp;ch);
 Eina_Compare_Cb
 cmp(const void *a, const void *b)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return *(int*)a &gt; *(int*)b;
+    return *(int*)a &gt; *(int*)b;
 }
 
 int
 inline_insert()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-&nbsp;&nbsp;&nbsp;&nbsp;char ch;
-&nbsp;&nbsp;&nbsp;&nbsp;char *ch3;
-&nbsp;&nbsp;&nbsp;&nbsp;int a;
-&nbsp;&nbsp;&nbsp;&nbsp;int *b;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating an inline array */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Adding data to the inline array */
-&nbsp;&nbsp;&nbsp;&nbsp;a = 97;
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
-&nbsp;&nbsp;&nbsp;&nbsp;a = 98;
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
-&nbsp;&nbsp;&nbsp;&nbsp;a = 100;
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;a);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Inserting data with the criteria */
-&nbsp;&nbsp;&nbsp;&nbsp;a = 99;
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_insert_sorted(iarr, &amp;a, cmp);
-
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+    Eina_Inarray *iarr;
+    char ch;
+    char *ch3;
+    int a;
+    int *b;
+
+    /* Creating an inline array */
+
+    /* Adding data to the inline array */
+    a = 97;
+    eina_inarray_push(iarr, &amp;a);
+    a = 98;
+    eina_inarray_push(iarr, &amp;a);
+    a = 100;
+    eina_inarray_push(iarr, &amp;a);
+
+    /* Inserting data with the criteria */
+    a = 99;
+    eina_inarray_insert_sorted(iarr, &amp;a, cmp);
+
+    eina_inarray_free(iarr);
 }
 </pre>
 </li>
@@ -612,7 +612,7 @@ eina_inarray_pop(iarr);
 <pre class="prettyprint">
 iarr = eina_inarray_new(sizeof(char), 0);
 
-ch = &#39;a&#39;;
+ch = 'a';
 eina_inarray_push(iarr, &amp;ch);
 
 /* Removing data from the array */
@@ -622,7 +622,7 @@ eina_inarray_remove(iarr, &amp;ch);
 
 <li>
 <p>To remove data from a defined position in an inline array, use the <code>eina_inarray_remove_at()</code> function. The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function. The second parameter is the index of the element you want to remove from the inline array.</p>
-<p>The function returns <code>EINA_TRUE</code> on success and <code>EINA_FALSE</code> if something goes wrong. The member is removed from the inline array and any members after it are moved towards the array&#39;s head.</p>
+<p>The function returns <code>EINA_TRUE</code> on success and <code>EINA_FALSE</code> if something goes wrong. The member is removed from the inline array and any members after it are moved towards the array's head.</p>
 <pre class="prettyprint">
 /* Removing data from position 2 */
 eina_inarray_remove_at(iarr, 2);
@@ -639,10 +639,10 @@ eina_inarray_flush(iarr);
 <ul><li>The first parameter is a pointer to the array variable returned by the <code>eina_inarray_new()</code> function.</li>
 <li>The second parameter is the index of the element you want to remove from the inline array.</li>
 <li>The last parameter is the data you want to copy in place of the current data.</li></ul>
-<p>The function returns <code>EINA_TRUE</code> on success, and <code>EINA_FALSE</code> on failure. The given pointer content is copied to the given position in the array. The pointer is not referenced, instead its contents are copied to the member&#39;s array using the previously defined <code>member_size</code>. If the position does not exist, the function fails.</p>
+<p>The function returns <code>EINA_TRUE</code> on success, and <code>EINA_FALSE</code> on failure. The given pointer content is copied to the given position in the array. The pointer is not referenced, instead its contents are copied to the member's array using the previously defined <code>member_size</code>. If the position does not exist, the function fails.</p>
 <pre class="prettyprint">
 /* Replacing the member at position 3 */
-ch = &#39;d&#39;;
+ch = 'd';
 eina_inarray_replace_at(iarr, 3, &amp;ch);
 </pre>
 </li>
@@ -650,33 +650,33 @@ eina_inarray_replace_at(iarr, 3, &amp;ch);
 <li>
 <p>To sort an inline array, use the <code>eina_inarray_sort()</code> function, which applies a quick sorting algorithm to the inline array:</p>
 <ul><li>The first parameter is a pointer to the array returned by the <code>eina_inarray_new()</code> function.</li>
-<li>The last parameter is the <code>Eina_Compare_Cb</code> callback comparison function, which compares data1 and data2. 
+<li>The last parameter is the <code>Eina_Compare_Cb</code> callback comparison function, which compares data1 and data2.
 <p>data1 and data2 are values contained in the inline array. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
 <pre class="prettyprint">
 static int
 short_cmp(const void *pa, const void *pb)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
+    const short *a = pa, *b = pb;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return *a - *b;
+    return *a - *b;
 }
 
 int
 sorting_inline_array()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
+    Eina_Inarray *array;
+    int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating and populating the inline array */
+    /* Creating and populating the inline array */
 
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_sort(array, short_cmp);
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
+    eina_inarray_sort(array, short_cmp);
+    eina_inarray_free(array);
 }
 </pre>
 
 <p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
 </li>
-</ul> 
+</ul>
 
 <h3>Accessing Inline Array Data</h3>
 
@@ -694,25 +694,25 @@ sorting_inline_array()
 Eina_Compare_Cb
 compare(const void *pa, const void *pb)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const short *a = pa, *b = pb;
-&nbsp;&nbsp;&nbsp;&nbsp;if (*a == *b)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    const short *a = pa, *b = pb;
+    if (*a == *b)
+        return EINA_TRUE;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+    return EINA_FALSE;
 }
 
 int
 search_inline_array()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Inarray *array;
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;int elm_index;
-&nbsp;&nbsp;&nbsp;&nbsp;int to_search = 3;
+    Eina_Inarray *array;
+    int i;
+    int elm_index;
+    int to_search = 3;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating and populating the inline array */
+    /* Creating and populating the inline array */
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_index = eina_inarray_search(array, &amp;to_search, compare);
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_free(array);
+    elm_index = eina_inarray_search(array, &amp;to_search, compare);
+    eina_inarray_free(array);
 }
 </pre>
 
@@ -723,7 +723,7 @@ search_inline_array()
 <li>
 <p>To get the number of elements in an inline array, use the <code>eina_inarray_count()</code>. The first parameter is a pointer to the array returned by the <code>eina_inarray_new()</code> function. The function returns an unsigned <code>int</code>, the number of elements.</p>
 <pre class="prettyprint">
-printf(&quot;Inline array of integers with %d elements:\n&quot;, eina_inarray_count(iarr));
+printf("Inline array of integers with %d elements:\n", eina_inarray_count(iarr));
 </pre>
 </li>
 
@@ -747,7 +747,7 @@ a = 99;
 eina_inarray_push(iarr, &amp;a);
 
 EINA_INARRAY_FOREACH(iarr, b)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;int: %d(pointer: %p)\n&quot;, *b, b);
+    printf("int: %d(pointer: %p)\n", *b, b);
 </pre>
 </li>
 <li>To process the array data, use the <code>eina_inarray_foreach()</code> function, which invokes the given function on each element of the array with the given data:
@@ -761,32 +761,32 @@ EINA_INARRAY_FOREACH(iarr, b)
 static Eina_Bool
 array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;short *member = p;
-&nbsp;&nbsp;&nbsp;&nbsp;int *i = user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;(*p)++;
-&nbsp;&nbsp;&nbsp;&nbsp;(*i)++;
+    short *member = p;
+    int *i = user_data;
+    (*p)++;
+    (*i)++;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    return EINA_TRUE;
 }
 
 int
 inline_array_foreach()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-&nbsp;&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
+    Eina_Inarray *iarr;
+    iarr = eina_inarray_new(sizeof(char), 1);
+    int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    for (i = 0; i &lt; numbers_count; i++) {
+        short val = i;
+        eina_inarray_push(iarr, &amp;val);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;i = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_foreach(iarr, array_foreach, &amp;i);
+    i = 0;
+    eina_inarray_foreach(iarr, array_foreach, &amp;i);
 
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+    eina_inarray_free(iarr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
@@ -801,32 +801,32 @@ inline_array_foreach()
 static Eina_Bool
 array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;short *member = p;
-&nbsp;&nbsp;&nbsp;&nbsp;int *i = user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;if (*i == *p)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    short *member = p;
+    int *i = user_data;
+    if (*i == *p)
+        return EINA_TRUE;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+    return EINA_FALSE;
 }
 
 int
 inline_array_foreach_remove()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Inarray *iarr;
-&nbsp;&nbsp;&nbsp;&nbsp;iarr = eina_inarray_new(sizeof(char), 1);
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
+    Eina_Inarray *iarr;
+    iarr = eina_inarray_new(sizeof(char), 1);
+    int i;
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; numbers_count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;short val = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_push(iarr, &amp;val);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    for (i = 0; i &lt; numbers_count; i++) {
+        short val = i;
+        eina_inarray_push(iarr, &amp;val);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;i = 6;
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_foreach_remove(iarr, array_foreach, &amp;i);
+    i = 6;
+    eina_inarray_foreach_remove(iarr, array_foreach, &amp;i);
 
-&nbsp;&nbsp;&nbsp;&nbsp;eina_inarray_free(iarr);
+    eina_inarray_free(iarr);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -838,7 +838,7 @@ inline_array_foreach_remove()
 
 <h2 id="hash" name="hash">Hash Tables</h2>
 <p>The <code>Eina_Hash</code> provides a way to store values in association with a key. For example, if you want to store some tuples into a table, you can do it using the <code>Eina_Hash</code>.</p>
-<p>The <code>Eina_Hash</code> is implemented using an array of &quot;buckets&quot; where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week keys as in the worst case scenario, you can still depend on an efficient binary tree implementation.</p>
+<p>The <code>Eina_Hash</code> is implemented using an array of "buckets" where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week keys as in the worst case scenario, you can still depend on an efficient binary tree implementation.</p>
 
 <h3 id="hash_create" name="hash_create">Creating a Hash Table</h3>
 
@@ -865,8 +865,8 @@ inline_array_foreach_remove()
 <li><p>Create the phone book structure and some static data:</p>
 <pre class="prettyprint">
 struct _Phone_Entry {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *name; /* Full name */
-&nbsp;&nbsp;&nbsp;&nbsp;const char *number; /* Phone number */
+    const char *name; /* Full name */
+    const char *number; /* Phone number */
 };
 
 typedef struct _Phone_Entry Phone_Entry;
@@ -874,11 +874,11 @@ typedef struct _Phone_Entry Phone_Entry;
 static Phone_Entry
 _start_entries[] =
 {
-&nbsp;&nbsp;&nbsp;&nbsp;{&quot;Wolfgang Amadeus Mozart&quot;, &quot;+01 23 456-78910&quot;},
-&nbsp;&nbsp;&nbsp;&nbsp;{&quot;Ludwig van Beethoven&quot;, &quot;+12 34 567-89101&quot;},
-&nbsp;&nbsp;&nbsp;&nbsp;{&quot;Richard Georg Strauss&quot;, &quot;+23 45 678-91012&quot;},
-&nbsp;&nbsp;&nbsp;&nbsp;{&quot;Heitor Villa-Lobos&quot;, &quot;+34 56 789-10123&quot;},
-&nbsp;&nbsp;&nbsp;&nbsp;{NULL, NULL}
+    {"Wolfgang Amadeus Mozart", "+01 23 456-78910"},
+    {"Ludwig van Beethoven", "+12 34 567-89101"},
+    {"Richard Georg Strauss", "+23 45 678-91012"},
+    {"Heitor Villa-Lobos", "+34 56 789-10123"},
+    {NULL, NULL}
 };
 </pre>
 </li>
@@ -888,7 +888,7 @@ _start_entries[] =
 static void
 _phone_entry_free_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+    free(data);
 }
 </pre>
 <p>The free callback can be changed later using the <code>eina_hash_free_cb_set()</code> function. You need to pass the hash and the new callback function.</p>
@@ -900,12 +900,12 @@ _phone_entry_free_cb(void *data)
 int
 free_data()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Hash *phone_book = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
+    Eina_Hash *phone_book = NULL;
+    phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Empty the phone book without destroying it */
-&nbsp;&nbsp;&nbsp;&nbsp;eina_hash_free_buckets(phone_book);
-&nbsp;&nbsp;&nbsp;&nbsp;eina_hash_free(phone_book);
+    /* Empty the phone book without destroying it */
+    eina_hash_free_buckets(phone_book);
+    eina_hash_free(phone_book);
 }
 </pre>
 </li>
@@ -923,21 +923,21 @@ free_data()
 <p>The following example shows how to add the initial data declared earlier to the hash:</p>
 <pre class="prettyprint">
 for (i = 0; _start_entries[i].name != NULL; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;eina_hash_add(phone_book, _start_entries[i].name, strdup(_start_entries[i].number));
+    eina_hash_add(phone_book, _start_entries[i].name, strdup(_start_entries[i].number));
 </pre>
 
 <p>The <code>Eina_Hash</code> offers various ways to add elements to a hash, such as the <code>eina_hash_direct_add()</code> function, which adds the entry without duplicating the string key. The key is stored in the struct, so this function can be used with <code>eina_stringshare</code> to avoid key data duplication.</p>
 <pre class="prettyprint">
 for (i = 0; _start_entries[i].name != NULL; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Allocating memory for the phone entry */
-&nbsp;&nbsp;&nbsp;&nbsp;Phone_Entry *e = malloc(sizeof(Phone_Entry));
+    /* Allocating memory for the phone entry */
+    Phone_Entry *e = malloc(sizeof(Phone_Entry));
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating an eina_stringshare for the name and the phone number */
-&nbsp;&nbsp;&nbsp;&nbsp;e-&gt;name = eina_stringshare_add(_start_entries[i].name);
-&nbsp;&nbsp;&nbsp;&nbsp;e-&gt;number = eina_stringshare_add(_start_entries[i].number);
+    /* Creating an eina_stringshare for the name and the phone number */
+    e-&gt;name = eina_stringshare_add(_start_entries[i].name);
+    e-&gt;number = eina_stringshare_add(_start_entries[i].number);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Adding the entry to the hash */
-&nbsp;&nbsp;&nbsp;&nbsp;eina_hash_direct_add(phone_book, e-&gt;name, e);
+    /* Adding the entry to the hash */
+    eina_hash_direct_add(phone_book, e-&gt;name, e);
 }
 </pre>
 </li>
@@ -948,17 +948,17 @@ for (i = 0; _start_entries[i].name != NULL; i++) {
 char *old_phone = NULL;
 char *phone = NULL;
 /* Replace the phone number of Richard Strauss */
-old_phone = eina_hash_modify(phone_book, &quot;Richard Georg Strauss&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strdup(&quot;+23 45 111-11111&quot;));
-phone = eina_hash_set(phone_book, &quot;Philippe de Magalhães&quot;, strdup(&quot;+33 6 111-11111&quot;));
-eina_hash_set(phone_book, &quot;Richard Georg Strauss&quot;, strdup(&quot;+23 45 111-117711&quot;));
+old_phone = eina_hash_modify(phone_book, "Richard Georg Strauss",
+                             strdup("+23 45 111-11111"));
+phone = eina_hash_set(phone_book, "Philippe de Magalhães", strdup("+33 6 111-11111"));
+eina_hash_set(phone_book, "Richard Georg Strauss", strdup("+23 45 111-117711"));
 </pre>
 </li>
 <li>
 <p>To change the key associated with the data without freeing and creating a new entry, use the <code>eina_hash_move()</code> function. You only have to pass the hash, the old key, and the new key. If the operation succeeds, the function returns <code>EINA_TRUE</code>, if not, it returns <code>EINA_FALSE</code>.</p>
 <pre class="prettyprint">
 Eina_Bool res;
-res = eina_hash_move(phone_book, &quot;Philippe de Magalhães&quot;, &quot;Filipe de Magalhães&quot;);
+res = eina_hash_move(phone_book, "Philippe de Magalhães", "Filipe de Magalhães");
 </pre>
 </li>
 <li>
@@ -966,18 +966,18 @@ res = eina_hash_move(phone_book, &quot;Philippe de Magalhães&quot;, &quot;Filip
 <ul><li>Use the <code>eina_hash_del()</code> function to remove the entry identified by a key or data from the given hash table:
 <pre class="prettyprint">
 Eina_Bool r;
-const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
+const char *entry_name = "Heitor Villa-Lobos";
 r = eina_hash_del(phone_book, entry_name, NULL);
 </pre></li>
 <li>Use the <code>eina_hash_del_by_key()</code> function to remove an entry based on the key:
 <pre class="prettyprint">
-r = eina_hash_del_by_key(phone_book, &quot;Richard Georg Strauss&quot;);
+r = eina_hash_del_by_key(phone_book, "Richard Georg Strauss");
 </pre>
 </li>
 <li>
 <p>Use the <code>eina_hash_del_by_data()</code> function to remove an entry based on the data:</p>
 <pre class="prettyprint">
-r = eina_hash_del_by_data(phone_book, &quot;+12 34 567-89101&quot;);
+r = eina_hash_del_by_data(phone_book, "+12 34 567-89101");
 </pre>
 </li>
 </ul></li></ul>
@@ -989,7 +989,7 @@ r = eina_hash_del_by_data(phone_book, &quot;+12 34 567-89101&quot;);
 <p>To retrieve an entry based on its key, use the <code>eina_hash_find()</code> function by passing the hash and the key you are looking for:</p>
 <pre class="prettyprint">
 char *phone = NULL;
-const char *entry_name = &quot;Heitor Villa-Lobos&quot;;
+const char *entry_name = "Heitor Villa-Lobos";
 
 /* Look for a specific entry and get its phone number */
 phone = eina_hash_find(phone_book, entry_name);
@@ -1003,7 +1003,7 @@ nb_elm = eina_hash_population(phone_book);
 </pre>
 </li>
 
-<li>To iterate through a hash table, you can use various methods: 
+<li>To iterate through a hash table, you can use various methods:
 <ul>
 
 <li>To iterate over the hash table, use the <code>eina_hash_foreach()</code> function:
@@ -1018,21 +1018,21 @@ nb_elm = eina_hash_population(phone_book);
 <pre class="prettyprint">
 static Eina_Bool
 pb_foreach_cb(const Eina_Hash *phone_book, const void *key,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *data, void *fdata)
+              void *data, void *fdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *name = key;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *number = data;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
+    const char *name = key;
+    const char *number = data;
+    printf("%s: %s\n", name, number);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Return EINA_FALSE to stop this callback from being called */
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    /* Return EINA_FALSE to stop this callback from being called */
+    return EINA_TRUE;
 }
 
-printf(&quot;List of phones:\n&quot;);
+printf("List of phones:\n");
 
 /* Running the callback on the hash called phone_book */
 eina_hash_foreach(phone_book, pb_foreach_cb, NULL);
-printf(&quot;\n&quot;);
+printf("\n");
 </pre>
 </li>
 <li>To iterate over the keys, use the <code>eina_hash_iterator_key_new()</code> function:
@@ -1040,18 +1040,18 @@ printf(&quot;\n&quot;);
 /* Declaration of the Eina_Iterator */
 Eina_Iterator *it;
 
-/* Variable to handle the current iteration &quot;data&quot; */
+/* Variable to handle the current iteration "data" */
 void *data;
 
 /* Iterate over the keys (names) */
-printf(&quot;List of names in the phone book:\n&quot;);
+printf("List of names in the phone book:\n");
 
 it = eina_hash_iterator_key_new(phone_book);
 
 /* Use the generic eina_iterator_next() */
 while (eina_iterator_next(it, &amp;data)) {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *name = data;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, name);
+    const char *name = data;
+    printf("%s\n", name);
 }
 
 /* Free the iterator */
@@ -1064,16 +1064,16 @@ eina_iterator_free(it);
 /* Declaration of the Eina_Iterator */
 Eina_Iterator *it;
 
-/* Variable to handle the current iteration &quot;data&quot; */
+/* Variable to handle the current iteration "data" */
 void *data;
 
 /* Iterate over hash data */
-printf(&quot;List of numbers in the phone book:\n&quot;);
+printf("List of numbers in the phone book:\n");
 
 it = eina_hash_iterator_data_new(phone_book);
 while (eina_iterator_next(it, &amp;data)) {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *number = data;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, number);
+    const char *number = data;
+    printf("%s\n", number);
 }
 
 /* Free the iterator */
@@ -1085,16 +1085,16 @@ eina_iterator_free(it);
 /* Declaration of the Eina_Iterator */
 Eina_Iterator *tit;
 
-/* Variable to handle the current iteration &quot;data&quot; */
+/* Variable to handle the current iteration "data" */
 void *tuple;
 
-printf(&quot;List of phones:\n&quot;);
+printf("List of phones:\n");
 tit = eina_hash_iterator_tuple_new(phone_book);
 while (eina_iterator_next(tit, &amp;tuple)) {
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Hash_Tuple *t = tuple;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *name = t-&gt;key;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *number = t-&gt;data;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s: %s\n&quot;, name, number);
+    Eina_Hash_Tuple *t = tuple;
+    const char *name = t-&gt;key;
+    const char *number = t-&gt;data;
+    printf("%s: %s\n", name, number);
 }
 
 /* Always free the iterator after its use */
@@ -1108,10 +1108,10 @@ eina_iterator_free(tit);
 
 <h2 id="list" name="list">Lists</h2>
 
-<p>The <code>Eina_List</code> is a double-linked list that can store data of any type as void pointers. It provides a set of functions to create and manipulate the list to avoid the access to the struct&#39;s fields, similar to a self-made double-link list.</p>
+<p>The <code>Eina_List</code> is a double-linked list that can store data of any type as void pointers. It provides a set of functions to create and manipulate the list to avoid the access to the struct's fields, similar to a self-made double-link list.</p>
 <p>In addition to the previous and next node and its data, the <code>Eina_List</code> nodes keep a reference to an accounting structure. The accounting structure is used to improve the performance of some functions. The structure is private and must not be modified.</p>
 
-<p>In an <code>Eina_List</code>, everything is a &quot;list&quot;: the list itself is a list where each node is a list as well.</p>
+<p>In an <code>Eina_List</code>, everything is a "list": the list itself is a list where each node is a list as well.</p>
 
 <p>Eina provides 2 list types: the classic list (<code>Eina_List</code>) and an inline list (<code>Eina_Inlist</code>).</p>
 
@@ -1123,28 +1123,28 @@ eina_iterator_free(tit);
 int
 list()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Declaration of the Eina_List with NULL as default value */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
+    /* Declaration of the Eina_List with NULL as default value */
+    Eina_List *list = NULL;
 </pre></li>
 
 <li>Call the <code>eina_list_append()</code> function with the list and the data you want to append as parameters.
 <p>The list must be a pointer to the first element of the list (or <code>NULL</code>). The function returns a pointer to the list.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Creating the first element of the list */
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;watch&quot;);
+    /* Creating the first element of the list */
+    list = eina_list_append(list, "watch");
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Adding more elements */
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;phone&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;ivi&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;notebook&quot;);
+    /* Adding more elements */
+    list = eina_list_append(list, "phone");
+    list = eina_list_append(list, "ivi");
+    list = eina_list_append(list, "notebook");
 </pre></li>
 
 <li>When you no longer need the list, free it:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Free the Eina_List */
-&nbsp;&nbsp;&nbsp;&nbsp;eina_list_free(list);
+    /* Free the Eina_List */
+    eina_list_free(list);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre></li>
 </ol>
@@ -1160,20 +1160,20 @@ list()
 <ul>
 <li>To add data at the end of the list, use the <code>eina_list_append()</code> function. To add data at the top of the list, use <code>eina_list_prepend()</code>. The functions work in the same way, only adding the data to different places.
 <pre class="prettyprint">
-list = eina_list_prepend(list, &quot;set-top box&quot;);
+list = eina_list_prepend(list, "set-top box");
 </pre>
 </li>
 
 <li>To insert data into the list after a specified data, use the <code>eina_list_append_relative()</code> function. As the last parameter, define the element after which the data is added.
-<p>For example to append data after the &quot;phone&quot; element:</p>
+<p>For example to append data after the "phone" element:</p>
 <pre class="prettyprint">
-list = eina_list_append_relative(list, &quot;single-board computer&quot;, &quot;phone&quot;);
+list = eina_list_append_relative(list, "single-board computer", "phone");
 </pre>
 </li>
 
 <li>To add a new entry before a specified data, use the <code>eina_list_prepend_relative()</code> function. It is similar to the <code>eina_list_append_relative()</code> function.
 <pre class="prettyprint">
-list = eina_list_prepend_relative(list, &quot;ultrabook&quot;, &quot;ivi&quot;);
+list = eina_list_prepend_relative(list, "ultrabook", "ivi");
 </pre>
 </li>
 
@@ -1182,45 +1182,45 @@ list = eina_list_prepend_relative(list, &quot;ultrabook&quot;, &quot;ivi&quot;);
 </ul>
 </li>
 
-<li>To set data in a list member, use the <code>eina_list_data_set()</code> function. Pass the &quot;list&quot; (node) as the first argument and the data to set as the second.
+<li>To set data in a list member, use the <code>eina_list_data_set()</code> function. Pass the "list" (node) as the first argument and the data to set as the second.
 
 <p>The following example also shows the usage of the <code>eina_list_last()</code> function, which returns the last element of an <code>Eina_List</code>.</p>
 
 <pre class="prettyprint">
 /* Setting new data for the last element */
-eina_list_data_set(eina_list_last(list), eina_stringshare_add(&quot;Boris&quot;));
+eina_list_data_set(eina_list_last(list), eina_stringshare_add("Boris"));
 </pre>
 </li>
 
 <li id="remove_list">To remove a node from the list, use the <code>eina_list_remove()</code> function. This function removes the first instance of the specified data from the given list.
 <pre class="prettyprint">
-list = eina_list_remove(list, &quot;ultrabook&quot;);
+list = eina_list_remove(list, "ultrabook");
 </pre>
-<p>You can also remove a &quot;list&quot; (node) from a list using the <code>eina_list_remove_list()</code> function. Pass the list you want to delete an element from and a &#39;list&#39; (node) you want to delete.</p>
+<p>You can also remove a "list" (node) from a list using the <code>eina_list_remove_list()</code> function. Pass the list you want to delete an element from and a 'list' (node) you want to delete.</p>
 <pre class="prettyprint">
 Eina_List *app_list = NULL;
 Eina_List *to_remove = NULL;
 
 /* Adding some elements to the list (using stringshares) */
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
-
-/* Finding the &quot;list&quot; to remove */
-to_remove = eina_list_data_find_list(list, eina_string_share_add(&quot;enlightenment&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add("enna"));
+app_list = eina_list_append(app_list, eina_stringshare_add("ebird"));
+app_list = eina_list_append(app_list, eina_stringshare_add("calaos"));
+app_list = eina_list_append(app_list, eina_stringshare_add("rage"));
+app_list = eina_list_append(app_list, eina_stringshare_add("terminology"));
+app_list = eina_list_append(app_list, eina_stringshare_add("enlightenment"));
+app_list = eina_list_append(app_list, eina_stringshare_add("eyelight"));
+app_list = eina_list_append(app_list, eina_stringshare_add("ephoto"));
+
+/* Finding the "list" to remove */
+to_remove = eina_list_data_find_list(list, eina_string_share_add("enlightenment"));
 
 list = eina_list_remove_list(list, to_remove);
 </pre>
 </li>
 
-<li>To move elements in a list, you can use various function, such as <code>eina_list_promote_list()</code> that promotes an element to the top of the list or <code>eina_list_demote_list()</code> that puts the specified element at the end of the list. Remember that everything is a list so the second parameter represents the &quot;list&quot; (node) you want to move. Use the functions just like the <code>eina_list_remove_list()</code> function.
+<li>To move elements in a list, you can use various function, such as <code>eina_list_promote_list()</code> that promotes an element to the top of the list or <code>eina_list_demote_list()</code> that puts the specified element at the end of the list. Remember that everything is a list so the second parameter represents the "list" (node) you want to move. Use the functions just like the <code>eina_list_remove_list()</code> function.
 <pre class="prettyprint">
-list = eina_list_promote_list(list, eina_list_data_find_list(list, &quot;ivi&quot;));
+list = eina_list_promote_list(list, eina_list_data_find_list(list, "ivi"));
 </pre>
 </li>
 <li>To reverse all the elements of a list, use the <code>eina_list_reverse()</code> function. To obtain a reversed copy of the list while keeping the initial list unchanged, use the <code>eina_list_reverse_clone()</code> function.
@@ -1236,14 +1236,14 @@ rev_copy = eina_list_reverse_clone(app_list);
 int
 sort_cb(const void *d1, const void *d2)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *txt = d1;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *txt2 = d2;
-&nbsp;&nbsp;&nbsp;&nbsp;if (!txt)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(1);
-&nbsp;&nbsp;&nbsp;&nbsp;if (!txt2)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(-1);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return(strcmp(txt, txt2));
+    const char *txt = d1;
+    const char *txt2 = d2;
+    if (!txt)
+        return(1);
+    if (!txt2)
+        return(-1);
+
+    return(strcmp(txt, txt2));
 }
 
 extern Eina_List *list;
@@ -1255,14 +1255,14 @@ list = eina_list_sort(list, 0, sort_cb);
 int
 sort_cb(void *d1, void *d2)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *txt = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *txt2 = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;if (!d1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(1);
-&nbsp;&nbsp;&nbsp;&nbsp;if (!d2)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(-1);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return(strcmp((const char*)d1, (const char*)d2));
+    const char *txt = NULL;
+    const char *txt2 = NULL;
+    if (!d1)
+        return(1);
+    if (!d2)
+        return(-1);
+
+    return(strcmp((const char*)d1, (const char*)d2));
 }
 
 Eina_List *sorted1;
@@ -1279,7 +1279,7 @@ newlist = eina_list_sorted_merge(sorted1, sorted2, sort_cb);
 </li>
 <li>To split a list, use the <code>eina_list_split_list()</code> function:
 <ul><li>The first parameter is the list to split.</li>
-<li>The second parameter is the &quot;list&quot; (element) after which the list is split.</li>
+<li>The second parameter is the "list" (element) after which the list is split.</li>
 <li>The last parameter is the head of the second list.</li></ul>
 <pre class="prettyprint">
 /* Original list (left list) */
@@ -1291,15 +1291,15 @@ Eina_List *other_list = NULL;
 /* Eina_List (element) */
 Eina_List *l;
 
-list = eina_list_append(list, &quot;super tux&quot;);
-list = eina_list_append(list, &quot;frozen bubble&quot;);
-list = eina_list_append(list, &quot;lincity-ng&quot;);
+list = eina_list_append(list, "super tux");
+list = eina_list_append(list, "frozen bubble");
+list = eina_list_append(list, "lincity-ng");
 
 /* Sorting the list (just for fun) */
 list = eina_list_sort(list, 0, cmp_func);
 
-/* Looking for the &#39;split&#39; element */
-l = eina_list_search_sorted_list(list, cmp_func, &quot;frozen bubble&quot;);
+/* Looking for the 'split' element */
+l = eina_list_search_sorted_list(list, cmp_func, "frozen bubble");
 
 /* Splitting the list */
 list = eina_list_split_list(list, l, &amp;other_list);
@@ -1326,26 +1326,26 @@ Eina_List *app_list = NULL;
 const char *res_str;
 
 /* Adding some elements to the list (using stringshares) */
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enna&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ebird&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;calaos&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;rage&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;terminology&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;enlightenment&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;eyelight&quot;));
-app_list = eina_list_append(app_list, eina_stringshare_add(&quot;ephoto&quot;));
+app_list = eina_list_append(app_list, eina_stringshare_add("enna"));
+app_list = eina_list_append(app_list, eina_stringshare_add("ebird"));
+app_list = eina_list_append(app_list, eina_stringshare_add("calaos"));
+app_list = eina_list_append(app_list, eina_stringshare_add("rage"));
+app_list = eina_list_append(app_list, eina_stringshare_add("terminology"));
+app_list = eina_list_append(app_list, eina_stringshare_add("enlightenment"));
+app_list = eina_list_append(app_list, eina_stringshare_add("eyelight"));
+app_list = eina_list_append(app_list, eina_stringshare_add("ephoto"));
 
 /* Finding the data */
-res_str = eina_list_data_find(list, eina_string_share_add(&quot;enlightenment&quot;));
-if (res_str == eina_stringshare_add(&quot;enlightenment&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Data is present&quot;);
+res_str = eina_list_data_find(list, eina_string_share_add("enlightenment"));
+if (res_str == eina_stringshare_add("enlightenment"))
+    printf("Data is present");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Data not present&quot;);
+    printf("Data not present");
 </pre>
 
-<p>The above example returns &quot;Data is present&quot;.</p>
+<p>The above example returns "Data is present".</p>
 <p>The <code>eina_list_data_find_list()</code> function does the same thing as <code>eina_list_data_find()</code>, but returns an <code>Eina_List</code>. For an example, see the <a href="#remove_list"><code>eina_list_remove_list()</code> function</a>.</p>
-<p>You can access the data or a &quot;list&quot; (node) of an <code>Eina_List</code> using the <code>eina_list_nth()</code> and <code>eina_list_nth_list()</code> functions. The first one returns a pointer to the data of the &quot;n&quot; element and the second a pointer to the &quot;list&quot;. To access the data of the third element of an <code>Eina_List</code>:</p>
+<p>You can access the data or a "list" (node) of an <code>Eina_List</code> using the <code>eina_list_nth()</code> and <code>eina_list_nth_list()</code> functions. The first one returns a pointer to the data of the "n" element and the second a pointer to the "list". To access the data of the third element of an <code>Eina_List</code>:</p>
 <pre class="prettyprint">
 const char *res;
 Eina_List *res_lst;
@@ -1354,7 +1354,7 @@ res = eina_list_nth(app_list, 2);
 res_lst = eina_list_nth_list(app_list, 2);
 </pre>
 
-<p>The <code>res</code> variable contains the pointer to the string &quot;calaos&quot;. The <code>res_lst</code> variable is the list containing &quot;calaos&quot;.</p>
+<p>The <code>res</code> variable contains the pointer to the string "calaos". The <code>res_lst</code> variable is the list containing "calaos".</p>
 </li>
 
 <li>To search for data in a list, select your function based on whether the list is sorted or unsorted.
@@ -1364,7 +1364,7 @@ res_lst = eina_list_nth_list(app_list, 2);
 <li>The second parameter is a callback function for comparison.</li>
 <li>The last parameter is the data you are looking for.</li></ul>
 
-<p>The <code>eina_list_search_unsorted_list()</code> function does the same but returns an &quot;Eina_List&quot;.</p>
+<p>The <code>eina_list_search_unsorted_list()</code> function does the same but returns an "Eina_List".</p>
 
 
 <p>The following example shows 2 searches using both the <code>eina_list_search_unsorted()</code> and <code>eina_list_search_unsorted_list()</code> functions:</p>
@@ -1372,30 +1372,30 @@ res_lst = eina_list_nth_list(app_list, 2);
 int
 search_list()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Declaring the list */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_List *l;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Little trick to use strcmp as Eina_Compare_Cb */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Compare_Cb cmp_func = (Eina_Compare_Cb)strcmp;
+    /* Declaring the list */
+    Eina_List *list = NULL;
+    Eina_List *l;
+    /* Little trick to use strcmp as Eina_Compare_Cb */
+    Eina_Compare_Cb cmp_func = (Eina_Compare_Cb)strcmp;
 
-&nbsp;&nbsp;&nbsp;&nbsp;void *data;
-&nbsp;&nbsp;&nbsp;&nbsp;int cmp_result;
+    void *data;
+    int cmp_result;
 
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;debian&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;archlinux&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, &quot;centos&quot;);
+    list = eina_list_append(list, "debian");
+    list = eina_list_append(list, "archlinux");
+    list = eina_list_append(list, "centos");
 
-&nbsp;&nbsp;&nbsp;&nbsp;data = eina_list_search_unsorted(list, cmp_func, &quot;archlinux&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;l = eina_list_search_unsorted_list(list, cmp_func, &quot;archlinux&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;if (l-&gt;data != data) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_list_free(list);
+    data = eina_list_search_unsorted(list, cmp_func, "archlinux");
+    l = eina_list_search_unsorted_list(list, cmp_func, "archlinux");
+    if (l-&gt;data != data) {
+        eina_list_free(list);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return 1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;eina_list_free(list);
+    eina_list_free(list);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -1413,31 +1413,31 @@ search_list()
 int
 list_data_set()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Declaring the list */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_List *list = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Eina_List in which to place the elements or lists */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_List *l;
-
-&nbsp;&nbsp;&nbsp;&nbsp;void *list_data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Bertrand&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Cedric&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Nicolas&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Vincent&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Raoul&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Fabien&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;Philippe&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_append(list, eina_stringshare_add(&quot;billiob&quot;));
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (l = list; l; l = eina_list_next(l)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Printing the data returned by eina_list_data_get */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(list, list_data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eina_stringshare_del(list_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    /* Declaring the list */
+    Eina_List *list = NULL;
+    /* Eina_List in which to place the elements or lists */
+    Eina_List *l;
+
+    void *list_data;
+
+    list = eina_list_append(list, eina_stringshare_add("Bertrand"));
+    list = eina_list_append(list, eina_stringshare_add("Cedric"));
+    list = eina_list_append(list, eina_stringshare_add("Nicolas"));
+    list = eina_list_append(list, eina_stringshare_add("Vincent"));
+    list = eina_list_append(list, eina_stringshare_add("Raoul"));
+    list = eina_list_append(list, eina_stringshare_add("Fabien"));
+    list = eina_list_append(list, eina_stringshare_add("Philippe"));
+    list = eina_list_append(list, eina_stringshare_add("billiob"));
+
+    for (l = list; l; l = eina_list_next(l)) {
+        /* Printing the data returned by eina_list_data_get */
+        printf("%s\n", (char*)eina_list_data_get(l));
+    }
+
+    EINA_LIST_FREE(list, list_data)
+        eina_stringshare_del(list_data);
+
+    return 0;
 }
 </pre>
 </li>
@@ -1446,67 +1446,67 @@ list_data_set()
 <p>The following example scrolls backwards starting from the end of the list:</p>
 <pre class="prettyprint">
 for (l = eina_list_last(list); l; l = eina_list_prev(l))
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)eina_list_data_get(l));
+    printf("%s\n", (char*)eina_list_data_get(l));
 </pre>
 
 </li>
 
 <li>To count the list elements, use the <code>eina_list_count()</code> function. The function returns the number of items in a list.
 <pre class="prettyprint">
-printf(&quot;List size: %d\n&quot;, eina_list_count(list));
+printf("List size: %d\n", eina_list_count(list));
 </pre>
 </li>
-<li>To iterate through an array, you can use various iterators: 
+<li>To iterate through an array, you can use various iterators:
 <ul>
 <li>To iterate over a list from the beginning to the end, use the <code>EINA_LIST_FOREACH</code> macro:
 <ul><li>The first parameter is the list to iterate.</li>
-<li>The second parameter is an <code>Eina_List *</code> to hold the current &quot;List&quot; (node).</li>
+<li>The second parameter is an <code>Eina_List *</code> to hold the current "List" (node).</li>
 <li>The last parameter receives the current data during the run.</li></ul>
 
-<p>The following example prints the data of each &quot;List&quot; (node) of the list:</p>
+<p>The following example prints the data of each "List" (node) of the list:</p>
 <pre class="prettyprint">
 Eina_List *list = NULL;
 Eina_List *l;
 void *list_data;
 
-list = eina_list_append(list, &quot;ls&quot;);
-list = eina_list_append(list, &quot;top&quot;);
-list = eina_list_append(list, &quot;rmdir&quot;);
-list = eina_list_append(list, &quot;uname&quot;);
+list = eina_list_append(list, "ls");
+list = eina_list_append(list, "top");
+list = eina_list_append(list, "rmdir");
+list = eina_list_append(list, "uname");
 
 EINA_LIST_FOREACH(list, l, list_data)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;%s\n&quot;, (char*)list_data);
+    printf("%s\n", (char*)list_data);
 
 eina_list_free(list);
 </pre>
 </li>
 <li>To iterate from the last element to the first, use the <code>EINA_LIST_REVERSE_FOREACH</code> macro. It works similarly as <code>EINA_LIST_FOREACH()</code>.
 </li>
-<li>To iterate over a list from the beginning to the end, you can also use the <code>EINA_LIST_FOREACH_SAFE</code> macro. It is called safe, because it stores the next &quot;List&quot; (node), so you can safely remove the current &quot;List&quot; (node) and continue the iteration.
+<li>To iterate over a list from the beginning to the end, you can also use the <code>EINA_LIST_FOREACH_SAFE</code> macro. It is called safe, because it stores the next "List" (node), so you can safely remove the current "List" (node) and continue the iteration.
 <pre class="prettyprint">
 Eina_List *list;
 Eina_List *l;
 Eina_List *l_next;
 char *data;
 
-list = eina_list_append(list, &quot;tizen&quot;);
-list = eina_list_append(list, &quot;tizen&quot;);
-list = eina_list_append(list, &quot;tizen&quot;);
-list = eina_list_append(list, &quot;tizen&quot;);
+list = eina_list_append(list, "tizen");
+list = eina_list_append(list, "tizen");
+list = eina_list_append(list, "tizen");
+list = eina_list_append(list, "tizen");
 
-/* Using EINA_LIST_FOREACH_SAFE to free the elements that match &quot;tizen&quot; */
+/* Using EINA_LIST_FOREACH_SAFE to free the elements that match "tizen" */
 
 EINA_LIST_FOREACH_SAFE(list, l, l_next, data) {
-&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(data, &quot;tizen&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list = eina_list_remove_list(list, l);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (strcmp(data, "tizen") == 0) {
+        free(data);
+        list = eina_list_remove_list(list, l);
+    }
 }
 </pre>
 </li>
 
 
-<li>To remove each list element while having access to the node&#39;s data, use the <code>EINA_LIST_FREE</code> macro. Pass the list and a pointer to hold the current data.
+<li>To remove each list element while having access to the node's data, use the <code>EINA_LIST_FREE</code> macro. Pass the list and a pointer to hold the current data.
 <pre class="prettyprint">
 Eina_List *list;
 char *data;
@@ -1514,7 +1514,7 @@ char *data;
 /* List is filled */
 
 EINA_LIST_FREE(list, data)
-&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+    free(data);
 </pre>
 </li>
 </ul>
@@ -1531,9 +1531,9 @@ EINA_LIST_FREE(list, data)
 <li>Define the structure of the data before creating the inline list:
 <pre class="prettyprint">
 struct my_struct {
-&nbsp;&nbsp;&nbsp;&nbsp;EINA_INLIST;
-&nbsp;&nbsp;&nbsp;&nbsp;int a;
-&nbsp;&nbsp;&nbsp;&nbsp;int b;
+    EINA_INLIST;
+    int a;
+    int b;
 };
 </pre>
 
@@ -1547,9 +1547,9 @@ struct my_struct {
 
 <li>
 <p>To create the inlist nodes, allocate the memory and use the <code>eina_inlist_append()</code> function:</p>
-<ul><li>The first parameter is the existing list head or <code>NULL</code> to create a new list. 
+<ul><li>The first parameter is the existing list head or <code>NULL</code> to create a new list.
 <p>The following example passes <code>NULL</code> to create a new list.</p></li>
-<li>The second parameter is the new list node, and it must not be <code>NULL</code>. 
+<li>The second parameter is the new list node, and it must not be <code>NULL</code>.
 <p>You must use the <code>EINA_INLIST_GET()</code> macro to get the inlist object of the datastruct.</p></li></ul>
 <pre class="prettyprint">
 struct my_struct *d;
@@ -1584,7 +1584,7 @@ list = eina_inlist_prepend(list, EINA_INLIST_GET(d));
 </pre>
 </li>
 
-<li>Add a node before or after a given node with the <code>eina_inlist_prepend_relative()</code> and <code>eina_inlist_append_relative()</code> functions. 
+<li>Add a node before or after a given node with the <code>eina_inlist_prepend_relative()</code> and <code>eina_inlist_append_relative()</code> functions.
 <p>In both functions, the first parameter is the target list, the second is the element you want to add, and the last is the reference element to place data after (in this case). Similarly as in a regular <code>Eina_List</code>, everything is a list, so the last parameter is an <code>Eina_Inlist</code> typed variable.</p>
 <pre class="prettyprint">
 d = malloc(sizeof(*d));
@@ -1598,15 +1598,15 @@ list = eina_inlist_append_relative(list, EINA_INLIST_GET(d), list);
 
 <li>When the inline list is no longer needed, destroy it by looping over the list to free each <code>EINA_INLIST</code> structure and the data using allocated memory. Use the <code>eina_inlist_remove()</code> function on each node.
 
-<p>In the following example, the <code>EINA_INLIST_CONTAINER_GET()</code> macro returns the container object of an inlist (the <code>EINA_INLIST</code> of <code>my_struct</code>), and the list element is removed and the allocated memory of the container &quot;object&quot; is freed.</p>
+<p>In the following example, the <code>EINA_INLIST_CONTAINER_GET()</code> macro returns the container object of an inlist (the <code>EINA_INLIST</code> of <code>my_struct</code>), and the list element is removed and the allocated memory of the container "object" is freed.</p>
 
 <pre class="prettyprint">
 while (list) {
-&nbsp;&nbsp;&nbsp;&nbsp;struct my_struct *aux = EINA_INLIST_CONTAINER_GET(list, struct my_struct);
+    struct my_struct *aux = EINA_INLIST_CONTAINER_GET(list, struct my_struct);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Remove the current list element */
-&nbsp;&nbsp;&nbsp;&nbsp;list = eina_inlist_remove(list, list);
-&nbsp;&nbsp;&nbsp;&nbsp;free(aux);
+    /* Remove the current list element */
+    list = eina_inlist_remove(list, list);
+    free(aux);
 }
 </pre>
 </li>
@@ -1638,7 +1638,7 @@ while (list) {
 <li><code>EINA_VALUE_TYPE_ARRAY</code>: array</li>
 <li><code>EINA_VALUE_TYPE_LIST</code>: list</li>
 <li><code>EINA_VALUE_TYPE_HASH</code>: hash</li>
-<li><code>EINA_VALUE_TYPE_TIMEVAL</code>: &#39;struct timeval&#39;</li>
+<li><code>EINA_VALUE_TYPE_TIMEVAL</code>: 'struct timeval'</li>
 <li><code>EINA_VALUE_TYPE_BLOB</code>: blob of bytes</li>
 <li><code>EINA_VALUE_TYPE_STRUCT</code>: struct</li>
 </ul>
@@ -1674,14 +1674,14 @@ eina_value_set(&amp;v, 123);
 <li>To get the value, use the <code>eina_value_get()</code> function. Pass the <code>Eina_Value</code> as the first argument, and a pointer to a variable to store the value (the target variable must have the same type as the <code>Eina_Value</code>).
 <pre class="prettyprint">
 eina_value_get(&amp;v, &amp;i);
-printf(&quot;v=%d\n&quot;, i);
+printf("v=%d\n", i);
 </pre>
-<p>The above example prints &quot;v=123&quot;.</p>
+<p>The above example prints "v=123".</p>
 </li>
 
 <li>To store an <code>Eina_List</code>, use the <code>Eina_Value</code> that corresponds to the <code>EINA_VALUE_TYPE_LIST</code> type.
 </li>
-<li>To create an <code>Eina_Value_List</code>, use the <code>eina_value_list_setup()</code> function. The function initializes a generic value storage of the list type. The first parameter is the &quot;object&quot; value, and the second one is the type (how to manage the stored list members).
+<li>To create an <code>Eina_Value_List</code>, use the <code>eina_value_list_setup()</code> function. The function initializes a generic value storage of the list type. The first parameter is the "object" value, and the second one is the type (how to manage the stored list members).
 </li>
 </ul>
 
@@ -1689,7 +1689,7 @@ printf(&quot;v=%d\n&quot;, i);
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-   
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/data_types_tools_n.htm b/org.tizen.guides/html/native/ui/efl/data_types_tools_n.htm
index 559e3bd..a872f60 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/data_types_tools_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/data_types_tools_n.htm
@@ -34,13 +34,13 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-   
+
    <h1>Data Types and Tools</h1>
 
 <p>UI toolkits, such as Qt and Gtk, generally support their own data types, structures, functions, and macros in order for you to easily and efficiently make their applications. EFL, as one of Tizen native UI toolkits, provides data types and useful tools as well.</p>
 
-<p>The Eina library in EFL implements APIs for data types and structures easy to use and optimized in an efficient way. It also provides some useful tools, such as opening shared libraries, error management, type conversion, time accounting, and memory pool to help convenient application development.</p>  
-   
+<p>The Eina library in EFL implements APIs for data types and structures easy to use and optimized in an efficient way. It also provides some useful tools, such as opening shared libraries, error management, type conversion, time accounting, and memory pool to help convenient application development.</p>
+
 <p>The main features of Eina are:</p>
 <ul>
 <li><a href="data_types_n.htm">Data Types</a> <p>The Eina library is a central part of the EFL. It implements an API for data types, and allows you to create and manipulate several data types.</p></li>
@@ -51,7 +51,7 @@
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-   
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/ecore_animation_n.htm b/org.tizen.guides/html/native/ui/efl/ecore_animation_n.htm
index e5467a6..048100c 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/ecore_animation_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/ecore_animation_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Ecore Animations</title> 
- </head> 
+  <title>Ecore Animations</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
        <ul class="toc">
@@ -40,11 +40,11 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Ecore Animations</h1> 
+  <h1>Ecore Animations</h1>
 
 <p>Ecore provides an <code>Ecore_Animator</code> facility for animations. Ecore animators use the Ecore main loop for creating animations, running a specific action on each tick of a timer in the main loop. To create an Ecore animation, you have to determine the duration of the animation and define a callback function that performs the animation with that duration.</p>
 
@@ -64,13 +64,13 @@ static Ecore_Animator *anim;
 static Eina_Bool
 _do_animation(void *data, double pos)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, 100 * pos, 100 * pos);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Do some more animating */
+    evas_object_move(data, 100 * pos, 100 * pos);
+    /* Do some more animating */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    return ECORE_CALLBACK_RENEW;
 }
 anim = ecore_animator_timeline_add(2, _do_animation,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;my_evas_object);
+                                   my_evas_object);
 
 ecore_animator_del(anim);
 </pre>
@@ -95,14 +95,14 @@ ecore_animator_del(anim);
 static Eina_Bool
 _my_animation(void *data, double pos)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; /* Get the target object */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Target object geometry */
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;int w;
-&nbsp;&nbsp;&nbsp;&nbsp;int h;
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); /* Get the current position and size */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(obj, 500 * pos, y); /* Linear move of the Evas object */
+    Evas_Object *obj = data; /* Get the target object */
+    /* Target object geometry */
+    int x;
+    int y;
+    int w;
+    int h;
+    evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h); /* Get the current position and size */
+    evas_object_move(obj, 500 * pos, y); /* Linear move of the Evas object */
 }
 /* Run the animation in 8 seconds */
 ecore_animator_timeline_add(8, _my_animation, my_evas_object);
@@ -134,25 +134,25 @@ ecore_animator_timeline_add(8, _my_animation, my_evas_object);
 static Eina_Bool
 _slide_back_and_forth(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;typedef enum {LEFT, RIGHT} direction_t; /* Direction datatype */
-&nbsp;&nbsp;&nbsp;&nbsp;static int x = 0; /* Initial position */
-&nbsp;&nbsp;&nbsp;&nbsp;static direction_t direction = RIGHT; /* Initial direction */
-&nbsp;&nbsp;&nbsp;&nbsp;if (x &gt;= 250)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = LEFT; /* Change direction */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (x &lt;= 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = RIGHT; /* Change direction */
-&nbsp;&nbsp;&nbsp;&nbsp;if (direction == RIGHT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, ++x, 350); /* Slide to right */
-&nbsp;&nbsp;&nbsp;&nbsp;else if (direction == LEFT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, --x, 350); /* Slide to left */
-
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    typedef enum {LEFT, RIGHT} direction_t; /* Direction datatype */
+    static int x = 0; /* Initial position */
+    static direction_t direction = RIGHT; /* Initial direction */
+    if (x &gt;= 250)
+        direction = LEFT; /* Change direction */
+    else if (x &lt;= 0)
+        direction = RIGHT; /* Change direction */
+    if (direction == RIGHT)
+        evas_object_move(data, ++x, 350); /* Slide to right */
+    else if (direction == LEFT)
+        evas_object_move(data, --x, 350); /* Slide to left */
+
+    return EINA_TRUE;
 }
 
 anim = ecore_animator_add(_slide_back_and_forth, rectangle);
 
 if (anim != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_del(anim);
+    ecore_animator_del(anim);
 </pre>
 
 <div class="note">
@@ -174,18 +174,18 @@ static int delay = runtime;
 static Eina_Bool
 _start_fold_animation(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _fold_animation, data);
+    ecore_animator_timeline_add(runtime, _fold_animation, data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+    return EINA_FALSE;
 }
 
 /* Second animation */
 static Eina_Bool
 _start_unfold_animation(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(runtime, _unfold_animation, data);
+    ecore_animator_timeline_add(runtime, _unfold_animation, data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+    return EINA_FALSE;
 }
 
 /* Start the first animation */
@@ -212,17 +212,17 @@ ecore_timer_add(delay, _start_unfold_animation, my_evas_object);
 static Eina_Bool
 _freeze_animation(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_freeze(data);
+    ecore_animator_freeze(data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+    return EINA_FALSE;
 }
 
 static Eina_Bool
 _thaw_animation(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_thaw(data);
+    ecore_animator_thaw(data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+    return EINA_FALSE;
 }
 
 /* Start the animation */
@@ -310,7 +310,7 @@ ecore_timer_add(10, _thaw_animation, animator);
 <tr>
        <td><code>ECORE_POS_MAP_ACCELERATE_FACTOR</code></td>
        <td>Start slow, then speed up</td>
-       <td><code>v1</code>: Power factor: 
+       <td><code>v1</code>: Power factor:
        <ul>
        <li>0.0 is linear</li>
        <li>1.0 is standard acceleration</li>
@@ -323,7 +323,7 @@ ecore_timer_add(10, _thaw_animation, animator);
 <tr>
        <td><code>ECORE_POS_MAP_DECELERATE_FACTOR</code></td>
        <td>Start fast, then slow down</td>
-       <td><code>v1</code>: Power factor: 
+       <td><code>v1</code>: Power factor:
        <ul>
        <li>0.0 is linear</li>
        <li>1.0 is standard deceleration</li>
@@ -336,7 +336,7 @@ ecore_timer_add(10, _thaw_animation, animator);
 <tr>
        <td><code>ECORE_POS_MAP_SINUSOIDAL_FACTOR</code></td>
        <td>Start slow, speed up, then slow down at the end</td>
-       <td><code>v1</code>: Power factor: 
+       <td><code>v1</code>: Power factor:
        <ul>
        <li>0.0 is linear</li>
        <li>1.0 is a standard sinusoidal</li>
@@ -363,25 +363,25 @@ ecore_timer_add(10, _thaw_animation, animator);
 static Eina_Bool
 _my_animation_callback(void *data, double pos)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *obj = data; /* Get the target object */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Target object geometry */
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;int w;
-&nbsp;&nbsp;&nbsp;&nbsp;int h;
-&nbsp;&nbsp;&nbsp;&nbsp;double frame = pos; /* Actual position variation */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the frame relative position depending on desired effect */
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Use the ECORE_POS_MAP_BOUNCE position mapping type with
-&nbsp;&nbsp;&nbsp;&nbsp;   7 bounces and the bounce decay factor of 1.8
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get current object position and size attributes */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Move the Evas object 600 pixels down */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(obj, x, 600 * frame);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    Evas_Object *obj = data; /* Get the target object */
+    /* Target object geometry */
+    int x;
+    int y;
+    int w;
+    int h;
+    double frame = pos; /* Actual position variation */
+    /* Get the frame relative position depending on desired effect */
+    /*
+       Use the ECORE_POS_MAP_BOUNCE position mapping type with
+       7 bounces and the bounce decay factor of 1.8
+    */
+    frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.8, 7);
+    /* Get current object position and size attributes */
+    evas_object_geometry_get(obj, &amp;x, &amp;y, &amp;w, &amp;h);
+    /* Move the Evas object 600 pixels down */
+    evas_object_move(obj, x, 600 * frame);
+
+    return EINA_TRUE;
 }
 
 /* Run the animation for 5 seconds */
@@ -395,7 +395,7 @@ ecore_animator_timeline_add(5, _my_animation_callback, my_evas_object);
 <p>Tizen supports default and custom timer sources:</p>
 <ul>
 <li>
-<p>The default timer, used in most cases, is <code>ECORE_ANIMATOR_SOURCE_TIMER</code>. It ticks every &quot;frametime&quot; seconds and allows you to perform transitions within a predefined timeline. The timer uses the system clock to tick over every n<sup>th</sup> second, with the default being 1/30th of a second.</p>
+<p>The default timer, used in most cases, is <code>ECORE_ANIMATOR_SOURCE_TIMER</code>. It ticks every "frametime" seconds and allows you to perform transitions within a predefined timeline. The timer uses the system clock to tick over every n<sup>th</sup> second, with the default being 1/30th of a second.</p>
 
 <p>To tweak the performance, change the frametime value using the <code>ecore_animator_frametime_set()</code> function with the new frametime as the parameter.</p>
 
@@ -424,20 +424,20 @@ ecore_animator_source_set(ECORE_ANIMATOR_SOURCE_CUSTOM);
 void
 _on_progress_update()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Called when some progress occurs */
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_custom_tick(); /* Tick (next frame in progress bar animation) */
+    /* Called when some progress occurs */
+    ecore_animator_custom_tick(); /* Tick (next frame in progress bar animation) */
 }
 </pre>
 
 <p>To drive the timer based on an input tick source (such as another application using the IPC or a vertical blanking interrupt), you can use the <code>ecore_animator_custom_source_tick_begin_callback_set()</code> and <code>ecore_animator_custom_source_tick_end_callback_set()</code> functions. These functions define callbacks that are called when the tick starts and ends, allowing you to set the functions to start and stop the ticking source.</p>
 </li>
   </ul>
-  
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/edje_animation_n.htm b/org.tizen.guides/html/native/ui/efl/edje_animation_n.htm
index f86c510..5073937 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/edje_animation_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/edje_animation_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Edje Animations</title> 
- </head> 
+  <title>Edje Animations</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
        <ul class="toc">
@@ -30,7 +30,7 @@
                                <li><a href="#Signals">Starting an Animation</a></li>
                                <li><a href="#Actions">Using Program Actions</a></li>
                                <li><a href="#Transitions">Using Program Transitions</a></li>
-                               <li><a href="#Chaining">Chaining Multiple Programs Together</a></li>                    
+                               <li><a href="#Chaining">Chaining Multiple Programs Together</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -38,14 +38,14 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Edje Animations</h1> 
+  <h1>Edje Animations</h1>
 
 <p>One of the greatest strengths of EFL and Edje is the ability to create animations. You can <a href="elementary_animation_n.htm">use predefined animations</a> through <code>Elm_Transit</code>, or create your own animations with the Edje library.</p>
-  
+
 <p>The Edje animations are based on a simple principle of moving from one state to another. To animate something with Edje:</p>
 <ol>
 <li>Define 2 states for a part with description blocks.</li>
@@ -70,25 +70,25 @@
 /* Within the rectangle part */
 description
 {
-&nbsp;&nbsp;&nbsp;state: &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;rel1 {relative: 0.3 0.3;}
-&nbsp;&nbsp;&nbsp;rel2 {relative: 0.7 0.4;}
-&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
+   state: "color" 0.0;
+   rel1 {relative: 0.3 0.3;}
+   rel2 {relative: 0.7 0.4;}
+   color: 255 0 0 255;
 }
 </pre>
 </li>
 <li>Create a program to start when the rectangle is clicked.
-<p>The program changes the state of the rectangle part to <code>&quot;color&quot;</code>, and performs the change using a 2-second sinusoidal transition. For more information on transitions, see <a href="#Transitions">Using Program Transitions</a>.</p>
+<p>The program changes the state of the rectangle part to <code>"color"</code>, and performs the change using a 2-second sinusoidal transition. For more information on transitions, see <a href="#Transitions">Using Program Transitions</a>.</p>
 
 <pre class="prettyprint">
 program
 {
-&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 2;
+   name: "animation,color";
+   source: "rectangle";
+   signal: "mouse,clicked,1";
+   action: STATE_SET "color" 0.0;
+   target: "rectangle";
+   transition: SIN 2;
 }
 </pre>
 </li>
@@ -96,23 +96,23 @@ program
 <p>To use signals to start animations, you need to both send a signal from your application and create a program that waits for that signal. For example:</p>
 <ul>
 <li>
-<p>Create a program that changes the state of the <code>menu/side</code> target to <code>&quot;default&quot; 1.0</code>. The program waits for the <code>hide,sidemenu</code> signal emitted by a <code>MenuButton</code> source.</p>
+<p>Create a program that changes the state of the <code>menu/side</code> target to <code>"default" 1.0</code>. The program waits for the <code>hide,sidemenu</code> signal emitted by a <code>MenuButton</code> source.</p>
 <pre class="prettyprint">
 program
 {
-&nbsp;&nbsp;&nbsp;name: &quot;animation,menu_side,hide&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;MenuButton&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;hide,sidemenu&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;target: &quot;menu/side&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
+   name: "animation,menu_side,hide";
+   source: "MenuButton";
+   signal: "hide,sidemenu";
+   action: STATE_SET "default" 1.0;
+   target: "menu/side";
+   transition: LINEAR 0.2;
 }
 </pre>
 </li>
 <li>
 <p>Send the signal from the application using the <code>edje_object_signal_emit()</code> function, which emits a signal to an <code>Evas_Object</code> part of the application. The following code sends a <code>hide,sidemenu</code> signal with a <code>MenuButton</code> source to the layout object:</p>
 <pre class="prettyprint">
-edje_object_signal_emit(layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot;);
+edje_object_signal_emit(layout, "hide,sidemenu", "MenuButton");
 </pre>
 
 <p>If you use the Elementary library in the application, you can use the <code>elm_object_signal_emit()</code> function. It works the same way as the <code>edje_object_signal_emit()</code> function with the same parameters.</p>
@@ -127,16 +127,16 @@ edje_object_signal_emit(layout, &quot;hide,sidemenu&quot;, &quot;MenuButton&quot
 <li>
 <p>The <code>STATE_SET</code> action (the usual animation action) changes the state of the part specified by the <code>target</code> property.</p>
 
-<p>In the following example, the state of the <code>&quot;image&quot;</code> part changes to <code>&quot;default&quot; 0.0</code>:</p>
+<p>In the following example, the state of the <code>"image"</code> part changes to <code>"default" 0.0</code>:</p>
 
 <pre class="prettyprint">
 program
 {
-&nbsp;&nbsp;&nbsp;name: &quot;animate&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;animate&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 3.0;
-&nbsp;&nbsp;&nbsp;target: &quot;image&quot;;
+   name: "animate";
+   signal: "animate";
+   action: STATE_SET "default" 0.0;
+   transition: LINEAR 3.0;
+   target: "image";
 }
 </pre>
 </li>
@@ -147,10 +147,10 @@ program
 <pre class="prettyprint">
 program
 {
-&nbsp;&nbsp;&nbsp;name: &quot;animate_stop&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;animate_stop&quot;;
-&nbsp;&nbsp;&nbsp;action: ACTION_STOP;
-&nbsp;&nbsp;&nbsp;target: &quot;animate_loop&quot;;
+   name: "animate_stop";
+   signal: "animate_stop";
+   action: ACTION_STOP;
+   target: "animate_loop";
 }
 </pre>
 
@@ -159,15 +159,15 @@ program
 <li>
 <p>The <code>SIGNAL_EMIT</code> action emits a signal that is used to communicate with the application directly from the theme.</p>
 
-<p>The following example emits a <code>&quot;frame_move&quot; &quot;start&quot;</code> signal when it receives the <code>mouse,down,*</code> signal from the <code>video_mover</code> part. In other words, it sends the <code>&quot;frame_move&quot; &quot;start&quot;</code> signal when the user presses the mouse in the <code>video_mover</code> part.</p>
+<p>The following example emits a <code>"frame_move" "start"</code> signal when it receives the <code>mouse,down,*</code> signal from the <code>video_mover</code> part. In other words, it sends the <code>"frame_move" "start"</code> signal when the user presses the mouse in the <code>video_mover</code> part.</p>
 
 <pre class="prettyprint">
 program
 {
-&nbsp;&nbsp;&nbsp;name: &quot;video_move_start&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,down,*&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;video_mover&quot;;
-&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;frame_move&quot; &quot;start&quot;;
+   name: "video_move_start";
+   signal: "mouse,down,*";
+   source: "video_mover";
+   action: SIGNAL_EMIT "frame_move" "start";
 }
 </pre>
 </li>
@@ -212,7 +212,7 @@ program
 <h2 id="Chaining" name="Chaining">Chaining Multiple Programs Together</h2>
 
 <p>To perform multiple animations in a sequence, chain Edje programs together so that they are executed one after another.</p>
-<p>The following example uses the <a href="#create_animation">same rectangle as before</a>. The original program changed to the rectangle state to <code>&quot;color&quot; 0.0</code>. This example adds a new program that returns the state to <code>&quot;default&quot; 0.0</code> and chains the 2 programs together.</p>
+<p>The following example uses the <a href="#create_animation">same rectangle as before</a>. The original program changed to the rectangle state to <code>"color" 0.0</code>. This example adds a new program that returns the state to <code>"default" 0.0</code> and chains the 2 programs together.</p>
 <p>To chain programs:</p>
 <ol>
 <li>
@@ -221,13 +221,13 @@ program
 <pre class="prettyprint">
 program
 {
-&nbsp;&nbsp;&nbsp;name: &quot;animation,color&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,1&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;color&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;transition: SIN 2;
-&nbsp;&nbsp;&nbsp;<span class="highlight">after: &quot;animation,state0&quot;;</span>
+   name: "animation,color";
+   source: "rectangle";
+   signal: "mouse,clicked,1";
+   action: STATE_SET "color" 0.0;
+   target: "rectangle";
+   transition: SIN 2;
+   <span class="highlight">after: "animation,state0";</span>
 }
 </pre>
 </li>
@@ -237,12 +237,12 @@ program
 <pre class="prettyprint">
 program
 {
-&nbsp;&nbsp;&nbsp;<span class="highlight">name: &quot;animation,state0&quot;;</span>
-&nbsp;&nbsp;&nbsp;source: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;transition: BOUNCE 5 1.8 6;
+   <span class="highlight">name: "animation,state0";</span>
+   source: "";
+   signal: "";
+   action: STATE_SET "default" 0.0;
+   target: "rectangle";
+   transition: BOUNCE 5 1.8 6;
 }
 </pre>
 </li>
@@ -252,7 +252,7 @@ program
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/efl_n.htm b/org.tizen.guides/html/native/ui/efl/efl_n.htm
index 69a4947..76a1a45 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/efl_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/efl_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Enlightenment Foundation Libraries (EFL)</title>  
+       <title>Enlightenment Foundation Libraries (EFL)</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,7 +32,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Enlightenment Foundation Libraries (EFL)</h1>
@@ -54,15 +54,15 @@
        <li><a href="ui_scalability_n.htm">Scaling</a>
        <p>Enables you to manage various screen and object sizes.</p></li>
        <li><a href="font_setting_n.htm">Fonts</a>
-       <p>Enables you get and set font information.</p></li>   
+       <p>Enables you get and set font information.</p></li>
        <li><a href="learn_edc_intro_n.htm">Layouting with EDC</a>
        <p>Enables you to create application layouts using EDC scripting.</p></li>
        <li><a href="graphical_objects_n.htm">Primitive Graphical Objects</a>
-       <p>Enables you to manage and render Evas objects.</p></li>      
+       <p>Enables you to manage and render Evas objects.</p></li>
        <li><a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>
        <p>Enables you to understand how Evas rendering works.</p></li>
        <li><a href="evas_map_animation_n.htm">Transformation with Evas Map</a>
-       <p>Enables you to apply transformations to all object types through UV mapping.</p></li>        
+       <p>Enables you to apply transformations to all object types through UV mapping.</p></li>
        <li><a href="animation_effects_n.htm">Animations and Effects</a>
        <p>Enables you to create physics-related animations and effects.</p></li>
        <li><a href="core_loop_n.htm">Core Loop and OS Interfacing</a>
@@ -76,7 +76,7 @@
        <li><a href="accessibility_n.htm">Accessibility</a>
        <p>Enables you to build accessible applications for low-vision and visually-impaired users.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/elementary_animation_n.htm b/org.tizen.guides/html/native/ui/efl/elementary_animation_n.htm
index 9fe4893..0178fc5 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/elementary_animation_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/elementary_animation_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Elementary Animations</title> 
- </head> 
+  <title>Elementary Animations</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,7 +33,7 @@
                        <li><a href="#Transitions2">Handling Transition Types</a></li>
                        <li><a href="#Combine_Transitions">Using Parallel Transitions</a></li>
                        <li><a href="#Animation_Chain">Chaining Multiple Transitions Together</a></li>
-                       <li><a href="#Custom_Transition">Creating Custom Transitions</a></li>   
+                       <li><a href="#Custom_Transition">Creating Custom Transitions</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -41,11 +41,11 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Mobile Wearable</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Elementary Animations</h1> 
+  <h1>Elementary Animations</h1>
 
 <p>Elementary animations allow you to apply various transition effects, such as translation and rotation, to Evas objects. Elementary animations are mostly based on Ecore animators, but provide some transition methods at a higher abstraction level. Elementary animations provide a simpler way of animating objects than Ecore animators or Edje animations.</p>
 
@@ -123,9 +123,9 @@ elm_transit_del(transit);
 char buf[PATH_MAX];
 Eina_List *images = NULL;
 Elm_Transit *transit = elm_transit_add();
-snprintf(buf, sizeof(buf), &quot;%s/images/btn_default.png&quot;, PACKAGE_DATA_DIR);
+snprintf(buf, sizeof(buf), "%s/images/btn_default.png", PACKAGE_DATA_DIR);
 images = eina_list_append(images, eina_stringshare_add(buf));
-snprintf(buf, sizeof(buf), &quot;%s/images/btn_hover.png&quot;, PACKAGE_DATA_DIR);
+snprintf(buf, sizeof(buf), "%s/images/btn_hover.png", PACKAGE_DATA_DIR);
 images = eina_list_append(images, eina_stringshare_add(buf));
 elm_transit_effect_image_animation_add(transit, images);
 
@@ -186,7 +186,7 @@ elm_transit_progress_value_get(transit);
 
 <h3 id="Acceleration_Mode" name="Acceleration_Mode">Acceleration</h3>
 
-<p>You can control the acceleration (tween) mode of the animation. The <code>Elm_Transit</code> object supports a number of built-in interpolation methods, which provide different acceleration modes. By default, all interpolations are linear.</p> 
+<p>You can control the acceleration (tween) mode of the animation. The <code>Elm_Transit</code> object supports a number of built-in interpolation methods, which provide different acceleration modes. By default, all interpolations are linear.</p>
 <p>To manage the tween mode:</p>
 <ul>
 <li>To change the tween mode, use the <code>elm_transit_tween_mode_set()</code> function. The first parameter is the <code>Elm_Transit</code> instance and the second is the tween mode of the transition, which is defined by the <code>Elm_Transit_Tween_Mode</code> enumeration (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Transit.html#ga954ecd9ba6266a18a0bde0e5861ccc53">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Transit.html#ga954ecd9ba6266a18a0bde0e5861ccc53">wearable</a> applications).
@@ -299,8 +299,8 @@ elm_transit_go(transit);
 Elm_Transit *transit = elm_transit_add();
 elm_transit_object_add(transit, rectangle);
 elm_transit_effect_color_add(transit, /* Target object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;255, 0, 0, 255, /* From color, with alpha channel 255 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 0, 255, 255); /* To color, with alpha channel 255 */
+                             255, 0, 0, 255, /* From color, with alpha channel 255 */
+                             0, 0, 255, 255); /* To color, with alpha channel 255 */
 elm_transit_duration_set(transit, 3);
 elm_transit_go(transit);
 </pre>
@@ -319,13 +319,13 @@ elm_box_homogeneous_set(parent, EINA_TRUE);
 
 /* Button 1 */
 Evas_Object *btn1 = elm_button_add(parent);
-elm_object_text_set(btn1, &quot;Btn1&quot;);
+elm_object_text_set(btn1, "Btn1");
 elm_box_pack_start(parent, btn1);
 evas_object_show(btn1);
 
 /* Button 2 */
 Evas_Object *btn2 = elm_button_add(parent);
-elm_object_text_set(btn2, &quot;Btn2&quot;);
+elm_object_text_set(btn2, "Btn2");
 elm_box_pack_end(parent, btn2);
 evas_object_show(btn2);
 
@@ -346,8 +346,8 @@ elm_transit_go(transit);
 Elm_Transit *transit = elm_transit_add();
 elm_transit_object_add(transit, my_evas_object);
 elm_transit_effect_wipe_add(transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_TRANSIT_EFFECT_TYPE_HIDE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+                            ELM_TRANSIT_EFFECT_TYPE_HIDE,
+                            ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
 elm_transit_duration_set(transit, 2.0);
 elm_transit_go(transit);
 </pre>
@@ -386,8 +386,8 @@ evas_object_geometry_get(my_evas_object, NULL, NULL, &amp;w, &amp;h);
 Elm_Transit *transit = elm_transit_add();
 elm_transit_object_add(transit, my_evas_object);
 elm_transit_effect_resize_add(transit, /* Transition object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w, h, /* Original size */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h, w); /* Target size */
+                              w, h, /* Original size */
+                              h, w); /* Target size */
 elm_transit_duration_set(transit, 2.0);
 elm_transit_go(transit);
 </pre>
@@ -403,14 +403,14 @@ elm_transit_go(transit);
 <pre class="prettyprint">
 /* Coin head image */
 Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
-if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
+if (!elm_image_file_set(coin_heads, IMG_DIR"/coin_heads.png", NULL))
+    printf("error: could not load image");
 elm_win_resize_object_add(ad-&gt;win, coin_heads);
 
 /* Coin tail image */
 Evas_Object *coin_tails = elm_image_add(ad-&gt;win);
-if (!elm_image_file_set(coin_tails, IMG_DIR&quot;/coin_tails.png&quot;, NULL))
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
+if (!elm_image_file_set(coin_tails, IMG_DIR"/coin_tails.png", NULL))
+    printf("error: could not load image");
 elm_win_resize_object_add(ad-&gt;win, coin_tails);
 
 /* Transition definition */
@@ -481,8 +481,8 @@ elm_transit_go(transit);
 
 <pre class="prettyprint">
 Evas_Object *coin_heads = elm_image_add(ad-&gt;win);
-if (!elm_image_file_set(coin_heads, IMG_DIR&quot;/coin_heads.png&quot;, NULL))
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;error: could not load image&quot;);
+if (!elm_image_file_set(coin_heads, IMG_DIR"/coin_heads.png", NULL))
+    printf("error: could not load image");
 evas_object_resize(coin_heads, 100, 100);
 evas_object_show(coin_heads);
 
@@ -582,10 +582,10 @@ elm_transit_chain_transit_del(transit1, transit2);
 
 <pre class="prettyprint">
 struct _Custom_Effect {
-&nbsp;&nbsp;&nbsp;&nbsp;struct _size {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;from, to;
+    struct _size {
+        Evas_Coord w, h;
+    }
+    from, to;
 };
 typedef struct _Custom_Effect Custom_Effect;
 </pre>
@@ -603,24 +603,24 @@ typedef struct _Custom_Effect Custom_Effect;
 static void
 _custom_op(void *data, Elm_Transit *transit, double progress)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (!data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord w, h;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *obj;
-&nbsp;&nbsp;&nbsp;&nbsp;const Eina_List *elist;
-&nbsp;&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect = data;
-&nbsp;&nbsp;&nbsp;&nbsp;const Eina_List *objs = elm_transit_objects_get(transit);
-&nbsp;&nbsp;&nbsp;&nbsp;/* During the first half, modify the height */
-&nbsp;&nbsp;&nbsp;&nbsp;if (progress &lt; 0.5) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + (custom_effect-&gt;to.h * progress * 2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w;
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* During the second half, modify the width */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h = custom_effect-&gt;from.h + custom_effect-&gt;to.h;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w = custom_effect-&gt;from.w + (custom_effect-&gt;to.w * (progress - 0.5) * 2);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;EINA_LIST_FOREACH(objs, elist, obj)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(obj, w, h);
+    if (!data)
+        return;
+    Evas_Coord w, h;
+    Evas_Object *obj;
+    const Eina_List *elist;
+    Custom_Effect *custom_effect = data;
+    const Eina_List *objs = elm_transit_objects_get(transit);
+    /* During the first half, modify the height */
+    if (progress &lt; 0.5) {
+        h = custom_effect-&gt;from.h + (custom_effect-&gt;to.h * progress * 2);
+        w = custom_effect-&gt;from.w;
+    } else {
+        /* During the second half, modify the width */
+        h = custom_effect-&gt;from.h + custom_effect-&gt;to.h;
+        w = custom_effect-&gt;from.w + (custom_effect-&gt;to.w * (progress - 0.5) * 2);
+    }
+    EINA_LIST_FOREACH(objs, elist, obj)
+        evas_object_resize(obj, w, h);
 }
 </pre>
 
@@ -631,20 +631,20 @@ _custom_op(void *data, Elm_Transit *transit, double progress)
 <pre class="prettyprint">
 static void*
 _custom_context_new(Evas_Coord from_w, Evas_Coord from_h, Evas_Coord to_w,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord to_h)
+                    Evas_Coord to_h)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Custom_Effect *custom_effect;
+    Custom_Effect *custom_effect;
 
-&nbsp;&nbsp;&nbsp;&nbsp;custom_effect = calloc(1, sizeof(Custom_Effect));
-&nbsp;&nbsp;&nbsp;&nbsp;if (!custom_effect)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+    custom_effect = calloc(1, sizeof(Custom_Effect));
+    if (!custom_effect)
+        return NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.w = from_w;
-&nbsp;&nbsp;&nbsp;&nbsp;custom_effect-&gt;from.h = from_h;
-&nbsp;&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.w = to_w - from_w;
-&nbsp;&nbsp;&nbsp;&nbsp;custom_effect-&gt;to.h = to_h - from_h;
+    custom_effect-&gt;from.w = from_w;
+    custom_effect-&gt;from.h = from_h;
+    custom_effect-&gt;to.w = to_w - from_w;
+    custom_effect-&gt;to.h = to_h - from_h;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return custom_effect;
+    return custom_effect;
 }
 </pre>
 </li>
@@ -655,7 +655,7 @@ _custom_context_new(Evas_Coord from_w, Evas_Coord from_h, Evas_Coord to_w,
 static void
 _custom_context_free(void *data, Elm_Transit *transit __UNUSED__)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;free(data);
+    free(data);
 }
 </pre>
 </li>
@@ -672,18 +672,18 @@ _custom_context_free(void *data, Elm_Transit *transit __UNUSED__)
 <pre class="prettyprint">
 Elm_Transit *transit = elm_transit_add();
 elm_transit_effect_add(transit,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_op,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_new(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_custom_context_free);
+                       _custom_op,
+                       _custom_context_new(),
+                       _custom_context_free);
 </pre>
 </li>
 </ol>
-  
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/evas_basic_objects_n.htm b/org.tizen.guides/html/native/ui/efl/evas_basic_objects_n.htm
index 8c552cc..a0fbe30 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/evas_basic_objects_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/evas_basic_objects_n.htm
@@ -5,17 +5,17 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Manipulating Graphical Objects</title>  
+       <title>Manipulating Graphical Objects</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
-       
+
 <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
@@ -33,7 +33,7 @@
                        <li><a href="#color">Changing Colors and Visibility</a></li>
                        <li><a href="#ref">Using Reference Counts</a></li>
                        <li><a href="#order">Changing the Object Order on the Canvas</a></li>
-               </ul>   
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
@@ -42,14 +42,14 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Manipulating Graphical Objects</h1>
 
 <p>This topic introduces the basic manipulations available for the <code>Evas_Object</code> object. Most Evas objects can be manipulated using generic functions.</p>
 
-<p>The list of available basic actions does not depend on the object&#39;s type. Evas implements functionality that allows you to perform basic manipulation, such as showing, hiding, setting and getting geometry, bringing a layer up or down, managing color, clipping, and reference counting.</p>
+<p>The list of available basic actions does not depend on the object's type. Evas implements functionality that allows you to perform basic manipulation, such as showing, hiding, setting and getting geometry, bringing a layer up or down, managing color, clipping, and reference counting.</p>
 
 
 <h2 id="work" name="work">Creating Evas Objects</h2>
@@ -61,7 +61,7 @@
 <pre class="prettyprint">
 /* Create Evas instance */
 ad-&gt;win = elm_win_util_standard_add(PACKAGE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PACKAGE);
+                                    PACKAGE);
 elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
 
 /* Get the canvas */
@@ -80,7 +80,7 @@ evas_object_move(ad-&gt;bg, 0, 0);
 evas_object_show(ad-&gt;bg);
 </pre>
 
-<p align="center"><strong>Figure: White background object</strong></p> 
+<p align="center"><strong>Figure: White background object</strong></p>
 <p align="center"><img alt="White background object" src="../../../images/empty_window.png" /></p>
 
 </li>
@@ -94,14 +94,14 @@ evas_object_show(ad-&gt;bg);
 <pre class="prettyprint">
 /* Create the image object */
 ad-&gt;img = evas_object_image_filled_add(evas);
-_app_get_resource(&quot;images/enlightenment.png&quot;, image_path, PATH_MAX);
+_app_get_resource("images/enlightenment.png", image_path, PATH_MAX);
 evas_object_image_file_set(ad-&gt;img, image_path, NULL);
 if (evas_object_image_load_error_get(ad-&gt;img) != EVAS_LOAD_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 
 /* Set the image object properties */
 evas_object_geometry_get(ad-&gt;spacer, NULL, NULL, &amp;w, &amp;h);
-evas_object_name_set(ad-&gt;img, &quot;background&quot;);
+evas_object_name_set(ad-&gt;img, "background");
 evas_object_resize(ad-&gt;img, WIDTH, HEIGHT);
 evas_object_move(ad-&gt;img, w, h);
 evas_object_show(ad-&gt;img);
@@ -117,7 +117,7 @@ evas_object_clip_set(ad-&gt;img, ad-&gt;clipper);
 evas_object_show(ad-&gt;clipper);
 </pre>
 
-<p align="center"><strong>Figure: Clipping an image</strong></p> 
+<p align="center"><strong>Figure: Clipping an image</strong></p>
 <p align="center"><img alt="Clipping an image" src="../../../images/using_clipper.png" /></p>
 
 
@@ -127,24 +127,24 @@ evas_object_show(ad-&gt;clipper);
 static void
 _clipper_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;const char *object_name = evas_object_name_get(ad-&gt;img);
-&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(object_name, &quot;background&quot;) != 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* If the clipper object currently clips the image object */
-&nbsp;&nbsp;&nbsp;&nbsp;if (evas_object_clip_get(ad-&gt;img) == ad-&gt;clipper) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Disable the clipping */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_clip_unset(ad-&gt;img);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Otherwise, clip the image object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_clip_set(ad-&gt;img, ad-&gt;clipper);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    App_Data *ad = (App_Data *)data;
+
+    const char *object_name = evas_object_name_get(ad-&gt;img);
+    if (strcmp(object_name, "background") != 0)
+        return;
+
+    /* If the clipper object currently clips the image object */
+    if (evas_object_clip_get(ad-&gt;img) == ad-&gt;clipper) {
+        /* Disable the clipping */
+        evas_object_clip_unset(ad-&gt;img);
+    } else {
+        /* Otherwise, clip the image object */
+        evas_object_clip_set(ad-&gt;img, ad-&gt;clipper);
+    }
 }
 </pre>
 
-<p align="center"><strong>Figure: Disabling the clipping</strong></p> 
+<p align="center"><strong>Figure: Disabling the clipping</strong></p>
 <p align="center"><img alt="Disabling the clipping" src="../../../images/using_clipper2.png" /></p>
 
 <h2 id="color" name="color">Changing Colors and Visibility</h2>
@@ -159,30 +159,30 @@ _clipper_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 static void
 _color_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int alpha;
-&nbsp;&nbsp;&nbsp;&nbsp;int r;
-&nbsp;&nbsp;&nbsp;&nbsp;int g;
-&nbsp;&nbsp;&nbsp;&nbsp;int b;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the current clipper color */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Define the new color attributes */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);
-&nbsp;&nbsp;&nbsp;&nbsp;if (g &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = b = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g = b = 255;
-&nbsp;&nbsp;&nbsp;&nbsp;evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the new color */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);
+    App_Data *ad = (App_Data *)data;
+
+    int alpha;
+    int r;
+    int g;
+    int b;
+
+    /* Retrieve the current clipper color */
+    evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);
+
+    /* Define the new color attributes */
+    evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);
+    if (g &gt; 0)
+        g = b = 0;
+    else
+        g = b = 255;
+    evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);
+
+    /* Set the new color */
+    evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);
 }
 </pre>
 
-<p align="center"><strong>Figure: Applying a color</strong></p> 
+<p align="center"><strong>Figure: Applying a color</strong></p>
 <p align="center"><img alt="Applying a color" src="../../../images/applying_color.png" /></p>
 </li>
 <li>
@@ -192,29 +192,29 @@ _color_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 static void
 _opacity_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+    App_Data *ad = (App_Data *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int alpha;
-&nbsp;&nbsp;&nbsp;&nbsp;int r;
-&nbsp;&nbsp;&nbsp;&nbsp;int g;
-&nbsp;&nbsp;&nbsp;&nbsp;int b;
+    int alpha;
+    int r;
+    int g;
+    int b;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the current clipper color and opacity */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);
+    /* Retrieve the current clipper color and opacity */
+    evas_object_color_get(ad-&gt;clipper, &amp;r, &amp;g, &amp;b, &amp;alpha);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Define the new color attributes and alpha value for opacity */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);
-&nbsp;&nbsp;&nbsp;&nbsp;alpha -= 20;
-&nbsp;&nbsp;&nbsp;&nbsp;if (alpha &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alpha = 255;
-&nbsp;&nbsp;&nbsp;&nbsp;evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);
+    /* Define the new color attributes and alpha value for opacity */
+    evas_color_argb_unpremul(alpha, &amp;r, &amp;g, &amp;b);
+    alpha -= 20;
+    if (alpha &lt; 0)
+        alpha = 255;
+    evas_color_argb_premul(alpha, &amp;r, &amp;g, &amp;b);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the new color and opacity */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);
+    /* Set the new color and opacity */
+    evas_object_color_set(ad-&gt;clipper, r, g, b, alpha);
 }
 </pre>
 
-<p align="center"><strong>Figure: Changing the opacity</strong></p> 
+<p align="center"><strong>Figure: Changing the opacity</strong></p>
 <p align="center"><img alt="Changing the opacity" src="../../../images/changing_opacity.png" /></p>
 </li>
 <li>
@@ -224,20 +224,20 @@ _opacity_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 static void
 _visibility_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* If the clipper is visible */
-&nbsp;&nbsp;&nbsp;&nbsp;if (evas_object_visible_get(ad-&gt;clipper)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Hide it */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_hide(ad-&gt;clipper);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Otherwise, show it */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;clipper);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    App_Data *ad = (App_Data *)data;
+
+    /* If the clipper is visible */
+    if (evas_object_visible_get(ad-&gt;clipper)) {
+        /* Hide it */
+        evas_object_hide(ad-&gt;clipper);
+    } else {
+        /* Otherwise, show it */
+        evas_object_show(ad-&gt;clipper);
+    }
 }
 </pre>
 
-<p align="center"><strong>Figure: Changing visibility</strong></p> 
+<p align="center"><strong>Figure: Changing visibility</strong></p>
 <p align="center"><img alt=" Changing visibility" src="../../../images/applying_invisibility.png" /></p>
 </li>
 </ul>
@@ -260,39 +260,39 @@ evas_object_ref(ad-&gt;spacer);
 static void
 _unref_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+    App_Data *ad = (App_Data *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!ad-&gt;spacer)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    if (!ad-&gt;spacer)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (evas_object_ref_get(ad-&gt;spacer) != 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Decrease the reference count */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_unref(ad-&gt;spacer);
+    if (evas_object_ref_get(ad-&gt;spacer) != 0) {
+        /* Decrease the reference count */
+        evas_object_unref(ad-&gt;spacer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;int w;
-&nbsp;&nbsp;&nbsp;&nbsp;int h;
+    int x;
+    int y;
+    int w;
+    int h;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Modify the image and clipper object positions */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_geometry_get(ad-&gt;spacer, &amp;x, &amp;y, NULL, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;img, x, y);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_geometry_get(ad-&gt;img, &amp;x, &amp;y, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;clipper, x + (w / 4), y + (h / 4));
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;clipper_border, x + (w / 4) - 3, y + (h / 4) - 3);
+    /* Modify the image and clipper object positions */
+    evas_object_geometry_get(ad-&gt;spacer, &amp;x, &amp;y, NULL, NULL);
+    evas_object_move(ad-&gt;img, x, y);
+    evas_object_geometry_get(ad-&gt;img, &amp;x, &amp;y, &amp;w, &amp;h);
+    evas_object_move(ad-&gt;clipper, x + (w / 4), y + (h / 4));
+    evas_object_move(ad-&gt;clipper_border, x + (w / 4) - 3, y + (h / 4) - 3);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Delete the green rectangle, if the reference count is 0 */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(ad-&gt;spacer);
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;spacer = NULL;
+    /* Delete the green rectangle, if the reference count is 0 */
+    evas_object_del(ad-&gt;spacer);
+    ad-&gt;spacer = NULL;
 }
 </pre>
 
 <p>In the above example, a green rectangle is used as padding and the clipper object calculates its X, Y coordinates based on the rectangle position. When the rectangle is created, its reference count is increased to 1 by calling the <code>evas_object_ref()</code> function. When the <code>_unref_cb()</code> callback is triggered, the reference count value is higher than 0 and the <code> evas_object_unref()</code> function is called to decrease it. At the end of the callback, the reference count is 0 and the <code>evas_object_del(ad-&gt;spacer)</code> function marks the rectangle object for deletion.</p>
 
-<p align="center"><strong>Figure: Removing padding</strong></p> 
+<p align="center"><strong>Figure: Removing padding</strong></p>
 <p align="center"><img alt="Removing padding" src="../../../images/removing_padding.png" /></p>
 
 <h2 id="order" name="order">Changing the Object Order on the Canvas</h2>
@@ -304,7 +304,7 @@ _unref_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 <pre class="prettyprint">
 /* Create a red rectangle */
 ad-&gt;order_rect1 = evas_object_rectangle_add(evas);
-evas_object_name_set(ad-&gt;order_rect1, &quot;red&quot;);
+evas_object_name_set(ad-&gt;order_rect1, "red");
 evas_object_color_set(ad-&gt;order_rect1, 255, 0, 0, 255);
 evas_object_move(ad-&gt;order_rect1, 120, 310);
 evas_object_resize(ad-&gt;order_rect1, 200, 200);
@@ -313,7 +313,7 @@ evas_object_show(ad-&gt;order_rect1);
 
 /* Create a blue rectangle */
 ad-&gt;order_rect2 = evas_object_rectangle_add(evas);
-evas_object_name_set(ad-&gt;order_rect2, &quot;blue&quot;);
+evas_object_name_set(ad-&gt;order_rect2, "blue");
 evas_object_color_set(ad-&gt;order_rect2, 0, 0, 255, 255);
 evas_object_move(ad-&gt;order_rect2, 180, 350);
 evas_object_resize(ad-&gt;order_rect2, 200, 200);
@@ -321,7 +321,7 @@ evas_object_resize(ad-&gt;order_rect2, 200, 200);
 evas_object_show(ad-&gt;order_rect2);
 </pre>
 
-<p align="center"><strong>Figure: Default object order on the canvas</strong></p> 
+<p align="center"><strong>Figure: Default object order on the canvas</strong></p>
 <p align="center"><img alt="Default object order on the canvas" src="../../../images/default_order.png" /></p>
 </li>
 
@@ -331,26 +331,26 @@ evas_object_show(ad-&gt;order_rect2);
 static void
 _object_order_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the object below the blue rectangle (the red one) */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_below_get(ad-&gt;order_rect2);
-&nbsp;&nbsp;&nbsp;&nbsp;if (!rect)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;const char *name = evas_object_name_get(rect);
-&nbsp;&nbsp;&nbsp;&nbsp;if (name) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* If the object is the red rectangle */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (strcmp(name, &quot;red&quot;) == 0) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Move the blue rectangle below the red one */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_stack_below(ad-&gt;order_rect2, rect);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    App_Data *ad = (App_Data *)data;
+
+    /* Get the object below the blue rectangle (the red one) */
+    Evas_Object *rect = evas_object_below_get(ad-&gt;order_rect2);
+    if (!rect)
+        return;
+
+    const char *name = evas_object_name_get(rect);
+    if (name) {
+        /* If the object is the red rectangle */
+        if (strcmp(name, "red") == 0) {
+            /* Move the blue rectangle below the red one */
+            evas_object_stack_below(ad-&gt;order_rect2, rect);
+
+            return;
+        }
+    }
 }</pre>
 
-<p align="center"><strong>Figure: Changed object order</strong></p> 
+<p align="center"><strong>Figure: Changed object order</strong></p>
 <p align="center"><img alt="Changed object order" src="../../../images/changed_order.png" /></p>
 </li>
 <li>To place an object to the top or bottom of its layer in the canvas object stack, use the <code>evas_object_raise()</code> or <code>evas_object_lower()</code> function.
@@ -360,24 +360,24 @@ _object_order_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 static void
 _lower_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+    App_Data *ad = (App_Data *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Move the background to the bottom */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_lower(ad-&gt;bg);
+    /* Move the background to the bottom */
+    evas_object_lower(ad-&gt;bg);
 }
 
 static void
 _raise_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;App_Data *ad = (App_Data *)data;
+    App_Data *ad = (App_Data *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Move the background to the top */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_raise(ad-&gt;bg);
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;isBgOnTop = EINA_TRUE;
+    /* Move the background to the top */
+    evas_object_raise(ad-&gt;bg);
+    ad-&gt;isBgOnTop = EINA_TRUE;
 }
 </pre>
 
-<p align="center"><strong>Figure: Canvas background at the bottom (left) and on the top (right)</strong></p> 
+<p align="center"><strong>Figure: Canvas background at the bottom (left) and on the top (right)</strong></p>
 <p align="center"><img alt="Canvas background at the bottom (left) and on the top (right)" src="../../../images/background_order.png" /></p>
 </li></ul>
 
@@ -390,7 +390,7 @@ _raise_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/evas_map_animation_n.htm b/org.tizen.guides/html/native/ui/efl/evas_map_animation_n.htm
index b329872..a332de8 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/evas_map_animation_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/evas_map_animation_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Transformation with Evas Map</title> 
- </head> 
+  <title>Transformation with Evas Map</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -38,14 +38,14 @@
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>      
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Mobile Wearable</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Transformation with Evas Map</h1> 
+  <h1>Transformation with Evas Map</h1>
 
 <p>Evas map effects allow you to apply transformations to all object types through UV mapping.</p>
 
@@ -234,7 +234,7 @@ evas_map_free(m);
 <p align="center"><strong>Figure: 3D rotation</strong></p>
 <p align="center"><img alt="3D rotation" src="../../../images/evas_map_6.png" /></p>
 </li>
-<li>A simple overlay over the image shows the original geometry of each object and the axis around which they are being rotated. The Z axis is not shown, since it is orthogonal to the screen. 
+<li>A simple overlay over the image shows the original geometry of each object and the axis around which they are being rotated. The Z axis is not shown, since it is orthogonal to the screen.
 <p>To show the Z axis, that is, to add 3D perspective to the transformation, use the <code>evas_map_util_3d_perspective()</code> function on the map after its position has been set.</p>
 
 <p>The result makes the vanishing point the center of each object.</p>
@@ -246,7 +246,7 @@ evas_map_free(m);
 
 <h2 id="Color_Light" name="Color_Light">Defining Color and Lighting</h2>
 
-<p>Each point in a map can be set to a color, which is multiplied with the object&#39;s own color and linearly interpolated between adjacent points:</p>
+<p>Each point in a map can be set to a color, which is multiplied with the object's own color and linearly interpolated between adjacent points:</p>
 <ul>
 <li>To set the color separately for each point, use the <code>evas_map_point_color_set()</code> function.</li>
 <li>To set the same color for every point, use the <code>evas_map_util_points_color_set()</code> function.</li>
@@ -266,17 +266,17 @@ evas_map_free(m);
 
 <pre class="prettyprint">
 evas_map_util_3d_lighting(m, /* Evas_Map object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;250/2, 150/2, -100, /* Spot light coordinates */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;255, 255, 255, /* Spot light color */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;200, 200, 200); /* Ambient light color */
+                          250/2, 150/2, -100, /* Spot light coordinates */
+                          255, 255, 255, /* Spot light color */
+                          200, 200, 200); /* Ambient light color */
 </pre>
 
 <h2 id="Mapping" name="Mapping">Mapping Images</h2>
 
 <p>Images need special handling when mapped. While Evas can easily handle objects, it is completely oblivious to the content of an image object. This means that if you only map the Evas object, and not the image within the object, only the Evas object is modified according to the mapping. To ensure that the image within the Evas object is also modified as expected, you must map the image UV points separately in addition to the basic map points.</p>
 
-<p>To map image UV points to avoid unexpected problems:</p> 
- 
+<p>To map image UV points to avoid unexpected problems:</p>
+
 <ol>
 <li>At first, create 3 Evas image objects.
 <p>In this example, there are 3 Tux images, each sized at 200 x 200 pixels:</p>
@@ -385,7 +385,7 @@ evas_map_smooth_set(m, EINA_FALSE);
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/evas_map_effects_n.htm b/org.tizen.guides/html/native/ui/efl/evas_map_effects_n.htm
index 1d7dbe4..78c3d50 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/evas_map_effects_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/evas_map_effects_n.htm
@@ -44,7 +44,7 @@
 
 <h1>Creating Evas Map Effects</h1>
 
-<p>The following examples demonstrate how you can use UV mapping and Evas map functions. UV mapping allows you to map points in the 2D Evas source object to 3D space positions in the target object (&quot;U&quot; and &quot;V&quot; denote the axes of the 2D texture). You can then modify the map point U and V texture source points with Evas map mapping APIs to create various effects.</p>
+<p>The following examples demonstrate how you can use UV mapping and Evas map functions. UV mapping allows you to map points in the 2D Evas source object to 3D space positions in the target object ("U" and "V" denote the axes of the 2D texture). You can then modify the map point U and V texture source points with Evas map mapping APIs to create various effects.</p>
 
 <h2 id="create" name="create">Creating the Example Application UI</h2>
 
@@ -66,9 +66,9 @@
 <p>Create an Evas object for an Elementary window and 2 buttons:</p>
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *button;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *default_btn;
+    Evas_Object *win;
+    Evas_Object *button;
+    Evas_Object *default_btn;
 };
 typedef struct appdata appdata_s;
 </pre>
@@ -85,29 +85,29 @@ typedef struct appdata appdata_s;
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *evas_text = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *evas = NULL;
+    Evas_Object *evas_text = NULL;
+    Evas *evas = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;Extra object function&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Extra object function&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+    /* Window */
+    ad-&gt;win = elm_win_util_standard_add("Extra object function",
+                                        "Extra object function");
+    elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+    /* Window callbacks */
+    evas_object_smart_callback_add(ad-&gt;win, "delete,request",
+                                   win_delete_request_cb, NULL);
+    eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas = evas_object_evas_get(ad-&gt;win);
+    evas = evas_object_evas_get(ad-&gt;win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_text = evas_object_text_add(evas);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_text_text_set(evas_text, &quot;Evas Map Mapping&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_text_font_set(evas_text, &quot;Sans&quot;, 18);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(evas_text, 50, 100, 200, 255);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(evas_text, 15, 40);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(evas_text);
+    evas_text = evas_object_text_add(evas);
+    evas_object_text_text_set(evas_text, "Evas Map Mapping");
+    evas_object_text_font_set(evas_text, "Sans", 18);
+    evas_object_color_set(evas_text, 50, 100, 200, 255);
+    evas_object_move(evas_text, 15, 40);
+    evas_object_show(evas_text);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+    evas_object_show(ad-&gt;win);
 }
 </pre>
 </li>
@@ -118,14 +118,14 @@ create_base_gui(appdata_s *ad)
 <pre class="prettyprint">
 /* Create a button for mapping */
 ad-&gt;button = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;button, &quot;Evas Map Mapping &quot;);
+elm_object_text_set(ad-&gt;button, "Evas Map Mapping ");
 evas_object_move(ad-&gt;button, 15, 100);
 evas_object_resize(ad-&gt;button, 350, 150);
 evas_object_show(ad-&gt;button);
 
 /* Create a default button */
 ad-&gt;default_btn = elm_button_add(ad-&gt;win);
-elm_object_text_set(ad-&gt;default_btn, &quot;Default Button &quot;);
+elm_object_text_set(ad-&gt;default_btn, "Default Button ");
 evas_object_move(ad-&gt;default_btn, 15, 600);
 evas_object_resize(ad-&gt;default_btn, 450, 100);
 evas_object_show(ad-&gt;default_btn);
@@ -179,14 +179,14 @@ evas_map_point_image_uv_set(map, 3, 0, 100);
 </pre>
 </li>
 
-<li>To apply the map on the button, use the <code>evas_object_map_set()</code> function. 
+<li>To apply the map on the button, use the <code>evas_object_map_set()</code> function.
 
 <pre class="prettyprint">
 /* Apply the map to the button Evas object */
 evas_object_map_set(ad-&gt;button, map);
 </pre>
 </li>
-<li>To enable the map, use the <code>evas_object_map_enable_set()</code> function. 
+<li>To enable the map, use the <code>evas_object_map_enable_set()</code> function.
 <p>When enabled, the original object geometry is saved, and the new map geometry is used to change the object position and size.</p>
 
 <pre class="prettyprint">
diff --git a/org.tizen.guides/html/native/ui/efl/evas_objects_n.htm b/org.tizen.guides/html/native/ui/efl/evas_objects_n.htm
index c4ab3f3..2074e1b 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/evas_objects_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/evas_objects_n.htm
@@ -48,7 +48,7 @@
 <div id="container"><div id="contents"><div class="content">
 
  <h1>Evas Objects</h1>
-  
+
 <p>An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of UI components, is an Evas object.</p>
 
 <h2 id="renderable" name="renderable">Primitive Renderable Objects</h2>
@@ -68,7 +68,7 @@
 Evas_Object *bg = evas_object_rectangle_add(evas_canvas);
 
 /*
-   Set the rectangle&#39;s
+   Set the rectangle's
    red, green, blue and opacity levels
 */
 /* Opaque white background */
@@ -79,7 +79,7 @@ evas_object_show(bg);
 </pre>
 
 <h4>Debugging</h4>
-<p>When debugging visual issues with Evas programs, the rectangle is a useful tool. The rectangle&#39;s simplicity means that it is easier to pinpoint issues with it than with more complex objects. A common technique to use when writing an Evas program and not getting the desired visual result is to replace an object with a solid color rectangle and seeing how it interacts with the other elements. This often allows us to notice clipping, parenting, or positioning issues. Once the issues are identified and corrected, the rectangle can be replaced with the original object, and in all likelihood any remaining issues are specific to that object&#39;s type.</p>
+<p>When debugging visual issues with Evas programs, the rectangle is a useful tool. The rectangle's simplicity means that it is easier to pinpoint issues with it than with more complex objects. A common technique to use when writing an Evas program and not getting the desired visual result is to replace an object with a solid color rectangle and seeing how it interacts with the other elements. This often allows us to notice clipping, parenting, or positioning issues. Once the issues are identified and corrected, the rectangle can be replaced with the original object, and in all likelihood any remaining issues are specific to that object's type.</p>
 
 <h4>Clipping</h4>
 <p><a href="#clip">Clipping</a> serves 2 main functions:</p>
@@ -93,7 +93,7 @@ evas_object_show(bg);
 <p>An Evas text object shows a basic single-line single-style text.</p>
 <pre class="prettyprint">
 Evas_Object *text = evas_object_text_add(evas_canvas);
-evas_object_text_text_set(text, &quot;some text&quot;);
+evas_object_text_text_set(text, "some text");
 evas_object_color_set(text, 127, 0, 0, 127);
 evas_object_show(text);
 </pre>
@@ -108,7 +108,7 @@ evas_object_show(text);
 <li><code>text</code>: The text object</li>
 <li><code>font</code>: The font name you want to use</li>
 <li><code>size</code>: The font size you want to use.</li>
-</ul> 
+</ul>
 <p>To query the current font, use the <code>evas_object_text_font_get()</code> function.</p>
 </li>
 <li>
@@ -141,7 +141,7 @@ evas_object_show(text);
 
 
 <h2 id="smart" name="smart">Primitive Smart Objects</h2>
-<p>A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object&#39;s user. They can be, for example, a group of objects that move together, or implementations of whole complex UI components, providing some intelligence and extension to simple Evas objects.</p>
+<p>A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object's user. They can be, for example, a group of objects that move together, or implementations of whole complex UI components, providing some intelligence and extension to simple Evas objects.</p>
 
 <h2 id="container_objects" name="container_objects">Primitive Container Objects</h2>
 <p>A container is a smart object that holds children Evas objects in a specific fashion.</p>
@@ -195,7 +195,7 @@ evas_object_table_pack(table, rect, 2, 3, 1, 1);
 <li><code>EVAS_OBJECT_TABLE_HOMOGENEOUS_TABLE</code>: The table size is divided equally among children, filling the whole table area. If the children have a minimum size that is larger than this (including padding), the table overflows and is aligned respecting the alignment hint, possibly overlapping sibling cells.</li>
 <li><code>EVAS_OBJECT_TABLE_HOMOGENEOUS_ITEM</code>: The greatest minimum cell size is used: if no element is set to expand, the contents of the table are the minimum size and the bounding box of all the children is aligned relatively to the table object using the <code>evas_object_table_align_get()</code> function. If the table area is too small to hold this minimum bounding box, the objects keep their size and the bounding box overflows the box area, still respecting the alignment. To get the current mode, use the <code>evas_object_table_homogeneous_get()</code> function.</li>
 </ul>
-<p>The table&#39;s content alignment is set using the <code>evas_object_table_align_set()</code> function, where the second and third parameters (<code>horizontal</code> and <code>vertical</code>) are floating values. To see the current values, use the <code>evas_object_table_align_get()</code> function.</p>
+<p>The table's content alignment is set using the <code>evas_object_table_align_set()</code> function, where the second and third parameters (<code>horizontal</code> and <code>vertical</code>) are floating values. To see the current values, use the <code>evas_object_table_align_get()</code> function.</p>
 <p>To set the padding, use the <code>evas_object_table_padding_set()</code> function. To see the current value, use the <code>evas_object_table_padding_get()</code> function.</p>
 <p>To see the current column and row count, use the <code>evas_object_table_col_row_size_get()</code> function.</p>
 
@@ -203,7 +203,7 @@ evas_object_table_pack(table, rect, 2, 3, 1, 1);
 <h3>Grid</h3>
 <p>A grid is a smart object that packs its children as with a regular grid layout.</p>
 <p>Grids are added to the canvas with the <code>evas_object_grid_add()</code> function.</p>
-<p>To change a grid&#39;s virtual resolution, use the <code>evas_object_grid_size_set()</code> function, and to get the current value, use the <code>evas_object_grid_size_get()</code> function.</p>
+<p>To change a grid's virtual resolution, use the <code>evas_object_grid_size_set()</code> function, and to get the current value, use the <code>evas_object_grid_size_get()</code> function.</p>
 <p>To add an object, use the <code>evas_object_grid_pack()</code> function, where the third, fourth, fifth, and sixth parameters are the following:</p>
 <ul>
 <li><code>x</code>: Virtual x coordinate of the child</li>
@@ -239,14 +239,14 @@ evas_object_table_pack(table, rect, 2, 3, 1, 1);
 <li><code>evas_object_box_layout_stack()</code></li>
 </ul>
 
-<h2 id="image" name="image">Image Objects</h2> 
+<h2 id="image" name="image">Image Objects</h2>
 
 
 <p>Using Evas, you can create and manipulate image objects. Evas supports image loaders of various formats as plug-in modules.</p>
 <p>The image formats that Evas supports include <code>bmp</code>, <code>edj</code>, <code>gif</code>, <code>ico</code>, <code>jpeg</code>, <code>pmaps</code>, <code>png</code>, <code>psd</code>, <code>svg</code>, <code>tga</code>, <code>tiff</code>, <code>wbmp</code>, <code>webp</code>, and <code>xpm</code>.</p>
 
-       <p align="center"><strong>Figure: Evas image loader</strong></p> 
-       <p align="center"><img alt="Evas image loader" src="../../../images/evas_image_loader.png" /></p>  
+       <p align="center"><strong>Figure: Evas image loader</strong></p>
+       <p align="center"><img alt="Evas image loader" src="../../../images/evas_image_loader.png" /></p>
 
 <h3>Evas Object Image Functions</h3>
 
@@ -264,7 +264,7 @@ void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);
 void evas_object_image_size_set(Evas_Object *obj, int w, int h);
 void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);
 Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *key, const char *flags);
+                                 const char *key, const char *flags);
 </pre>
 
 <h3>Creating an Image Object and Setting the Image Data Source</h3>
@@ -278,39 +278,39 @@ Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file,
 int
 main(int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+    elm_init(argc, argv);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a window object */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 400);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(win);
+    /* Create a window object */
+    Evas_Object *win = elm_win_add(NULL, "main", ELM_WIN_BASIC);
+    evas_object_resize(win, 400, 400);
+    evas_object_show(win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Return Evas handle from window */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+    /* Return Evas handle from window */
+    Evas *e = evas_object_evas_get(win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create an image object */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
+    /* Create an image object */
+    Evas_Object *img = evas_object_image_add(e);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set a source file to fetch pixel data */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
+    /* Set a source file to fetch pixel data */
+    evas_object_image_file_set(img, "./logo.png", NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the size and position of the image on the image object area */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(img, 0, 0, 300, 300);
+    /* Set the size and position of the image on the image object area */
+    evas_object_image_fill_set(img, 0, 0, 300, 300);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(img);
+    evas_object_move(img, 50, 50);
+    evas_object_resize(img, 300, 300);
+    evas_object_show(img);
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_run();
+    elm_run();
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_shutdown();
+    elm_shutdown();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
-       <p align="center"><strong>Figure: Image object display</strong></p> 
-       <p align="center"><img alt="Image object display" src="../../../images/evas_object_display.png" /></p>  
-  
+       <p align="center"><strong>Figure: Image object display</strong></p>
+       <p align="center"><img alt="Image object display" src="../../../images/evas_object_display.png" /></p>
+
 <h3 id="manage" name="manage">Managing Images</h3>
 
 <p>To manage image objects in Evas:</p>
@@ -323,7 +323,7 @@ main(int argc, char **argv)
 
 <pre class="prettyprint">
 img = evas_object_image_add(canvas);
-evas_object_image_file_set(img, &quot;path/to/img&quot;, NULL);
+evas_object_image_file_set(img, "path/to/img", NULL);
 evas_object_image_fill_set(img, 0, 0, w, h);
 </pre>
 
@@ -342,8 +342,8 @@ evas_object_image_filled_set(img, EINA_TRUE);
 
 <p>You can decide how to fill the image object area with the given image pixel data by setting the position, width, and height of the image using the <code>evas_object_image_fill_set()</code> function. Without setting this information, the image is not displayed. If the size of the image is bigger than the image object area, only a sub-region of the original image is displayed. If the image is smaller than the area, images are tiled repeatedly to fill the object area.</p>
 
-       <p align="center"><strong>Figure: Image scaling</strong></p> 
-       <p align="center"><img alt="Image scaling" src="../../../images/evas_image_scaling.png" /></p>  
+       <p align="center"><strong>Figure: Image scaling</strong></p>
+       <p align="center"><img alt="Image scaling" src="../../../images/evas_image_scaling.png" /></p>
 
        <table style="border:none;">
        <tbody>
@@ -358,13 +358,13 @@ evas_object_image_filled_set(img, EINA_TRUE);
         <td style="text-align:center; border:none;"><code>evas_object_image_fill_set(obj, 0, 0, 100, 127)</code></td>
        </tr>
        </tbody>
-       </table>  
-       
+       </table>
+
 <p>The <code>evas_object_image_filled_set()</code> function scales the image to fit the object area. Resizing the image object automatically triggers an internal call to the <code>evas_object_image_fill_set()</code> function.</p>
 
 <p>The <code>evas_object_image_filled_add()</code> function creates a new image object that automatically scales its bound image to the object area. This is a helper function around the <code>evas_object_image_add()</code> and <code>evas_object_image_filled_set()</code> functions.</p>
 
-<p>Scaled images&#39; quality can differ according to scaling algorithms. Smooth scaling improves the image quality in the process of size reducing or enlarging. Evas runs its own smooth scaling algorithm by default and provides an API for you to disable the function.</p>
+<p>Scaled images' quality can differ according to scaling algorithms. Smooth scaling improves the image quality in the process of size reducing or enlarging. Evas runs its own smooth scaling algorithm by default and provides an API for you to disable the function.</p>
 
 <p>The algorithm is implemented using the SIMD (Single Instruction Multiple Data) vectorization in case of software rendering. It is optimized on Intel and ARM CPU through MMX and NEON command respectively.</p>
 
@@ -378,38 +378,38 @@ evas_object_image_filled_set(img, EINA_TRUE);
 int
 main(int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+    elm_init(argc, argv);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a window object */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(win);
+    /* Create a window object */
+    Evas_Object *win = elm_win_add(NULL, "main", ELM_WIN_BASIC);
+    evas_object_resize(win, 400, 200);
+    evas_object_show(win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Return Evas handle from window */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+    /* Return Evas handle from window */
+    Evas *e = evas_object_evas_get(win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create an image object */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(img, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(img);
+    /* Create an image object */
+    Evas_Object *img = evas_object_image_filled_add(e);
+    evas_object_image_file_set(img, "./logo.png", NULL);
+    evas_object_move(img, 0, 0);
+    evas_object_resize(img, 200, 200);
+    evas_object_show(img);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create another image object */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img2 = evas_object_image_filled_add(e);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img2, &quot;./logo.png&quot;, NULL);
+    /* Create another image object */
+    Evas_Object *img2 = evas_object_image_filled_add(e);
+    evas_object_image_file_set(img2, "./logo.png", NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Disable smooth scaling */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_smooth_scale_set(img2, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(img2, 200, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(img2, 200, 200);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(img2);
+    /* Disable smooth scaling */
+    evas_object_image_smooth_scale_set(img2, EINA_FALSE);
+    evas_object_move(img2, 200, 0);
+    evas_object_resize(img2, 200, 200);
+    evas_object_show(img2);
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_run();
+    elm_run();
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_shutdown();
+    elm_shutdown();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -436,36 +436,36 @@ main(int argc, char **argv)
 int
 main(int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+    elm_init(argc, argv);
+
+    /* Create a window object */
+    Evas_Object *win = elm_win_add(NULL, "main", ELM_WIN_BASIC);
+    evas_object_resize(win, 400, 200);
+    evas_object_show(win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a window object */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(win, 400, 200);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(win);
+    /* Return Evas handle from window */
+    Evas *e = evas_object_evas_get(win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Return Evas handle from window */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+    /* Create an image object */
+    Evas_Object *img = evas_object_image_filled_add(e);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create an image object */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
+    /*
+       Load the image scaled into the object size
+       before evas_object_image_file_set() is called
+    */
+    evas_object_image_load_size_set(img, 300, 300);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Load the image scaled into the object size
-&nbsp;&nbsp;&nbsp;&nbsp;   before evas_object_image_file_set() is called
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_load_size_set(img, 300, 300);
+    evas_object_image_file_set(img, "./logo.png", NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(img, 50, 50);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(img, 300, 300);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(img);
+    evas_object_move(img, 50, 50);
+    evas_object_resize(img, 300, 300);
+    evas_object_show(img);
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_run();
+    elm_run();
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_shutdown();
+    elm_shutdown();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 </li>
@@ -486,9 +486,9 @@ evas_object_image_data_update_add(image, 100, 100, 50, 50);
 evas_object_image_data_update_add(image, 180, 100, 50, 50);
 evas_object_image_data_update_add(image, 85, 200, 160, 80);
 </pre>
- 
-  <p align="center"><strong>Figure: Partial image update</strong></p> 
-  <p align="center"><img alt="Partial image update" src="../../../images/evas_partial_update.png" /></p>  
+
+  <p align="center"><strong>Figure: Partial image update</strong></p>
+  <p align="center"><img alt="Partial image update" src="../../../images/evas_partial_update.png" /></p>
 
 <p>The following code creates an image object and sets a source file on it. Then it implements the blur effect to the pixel data and saves them using the <code>evas_object_image_save()</code> function.</p>
 
@@ -498,73 +498,73 @@ evas_object_image_data_update_add(image, 85, 200, 160, 80);
 void
 image_blur(Evas_Object *img)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned char *img_src = evas_object_image_data_get(img, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;int w;
-&nbsp;&nbsp;&nbsp;&nbsp;int h;
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_size_get(img, &amp;w, &amp;h);
-&nbsp;&nbsp;&nbsp;&nbsp;int blur_size = 4;
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;int xx;
-&nbsp;&nbsp;&nbsp;&nbsp;int yy;
-
-&nbsp;&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; h; y++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; w; x++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int avg_color[3] = {0, 0, 0};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int blur_pixel_cnt = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int idx = (yy * w * 4) + (xx * 4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[0] += img_src[idx + 0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] += img_src[idx + 1];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] += img_src[idx + 2];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;++blur_pixel_cnt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[0] /= blur_pixel_cnt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[1] /= blur_pixel_cnt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avg_color[2] /= blur_pixel_cnt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int idx = (yy * w * 4) + (xx * 4);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 0] = avg_color[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 1] = avg_color[1];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img_src[idx + 2] = avg_color[2];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_data_update_add(img, 0, 0, w, h);
+    unsigned char *img_src = evas_object_image_data_get(img, EINA_TRUE);
+
+    int w;
+    int h;
+    evas_object_image_size_get(img, &amp;w, &amp;h);
+    int blur_size = 4;
+    int x;
+    int y;
+    int xx;
+    int yy;
+
+    for (y = 0; y &lt; h; y++) {
+        for (x = 0; x &lt; w; x++) {
+            int avg_color[3] = {0, 0, 0};
+            int blur_pixel_cnt = 0;
+
+            for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++) {
+                for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++) {
+                    int idx = (yy * w * 4) + (xx * 4);
+                    avg_color[0] += img_src[idx + 0];
+                    avg_color[1] += img_src[idx + 1];
+                    avg_color[2] += img_src[idx + 2];
+                    ++blur_pixel_cnt;
+                }
+            }
+            avg_color[0] /= blur_pixel_cnt;
+            avg_color[1] /= blur_pixel_cnt;
+            avg_color[2] /= blur_pixel_cnt;
+
+            for (xx = x; (xx &lt; x + blur_size) &amp;&amp; (xx &lt; w); xx++) {
+                for (yy = y; (yy &lt; y + blur_size) &amp;&amp; (yy &lt; h); yy++) {
+                    int idx = (yy * w * 4) + (xx * 4);
+                    img_src[idx + 0] = avg_color[0];
+                    img_src[idx + 1] = avg_color[1];
+                    img_src[idx + 2] = avg_color[2];
+                }
+            }
+        }
+    }
+    evas_object_image_data_update_add(img, 0, 0, w, h);
 }
 
 int
 main(int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
+    elm_init(argc, argv);
 
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_add(NULL, &quot;main&quot;, ELM_WIN_BASIC);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(win, 200, 200);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(win);
+    Evas_Object *win = elm_win_add(NULL, "main", ELM_WIN_BASIC);
+    evas_object_resize(win, 200, 200);
+    evas_object_show(win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *e = evas_object_evas_get(win);
+    Evas *e = evas_object_evas_get(win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_filled_add(e);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, &quot;./logo.png&quot;, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(img);
+    Evas_Object *img = evas_object_image_filled_add(e);
+    evas_object_image_file_set(img, "./logo.png", NULL);
+    evas_object_resize(img, 200, 200);
+    evas_object_show(img);
 
-&nbsp;&nbsp;&nbsp;&nbsp;image_blur(img);
+    image_blur(img);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_save(img, &quot;logo2.png&quot;, NULL, &quot;quality=100 compress=8&quot;);
+    evas_object_image_save(img, "logo2.png", NULL, "quality=100 compress=8");
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_run();
+    elm_run();
 
-&nbsp;&nbsp;&nbsp;&nbsp;elm_shutdown();
+    elm_shutdown();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -579,7 +579,7 @@ main(int argc, char **argv)
    <td style="text-align:center; border:none;">Before</td>
    <td style="text-align:center; border:none;">After</td>
   </tr>
-  </tbody></table>  
+  </tbody></table>
 
 <h4>Giving Performance Hints</h4>
 <p>In image viewer applications, you can display an image in full size. The navigation to the adjacent images on your album must be fluid and fast. Thus, while displaying a given image, the program can load the next and previous image in the background to be able to immediately repaint the screen with a new image.</p>
@@ -588,10 +588,10 @@ main(int argc, char **argv)
 
 <pre class="prettyprint">
 prev = evas_object_image_filled_add(canvas);
-evas_object_image_file_set(prev, &quot;/path/to/prev&quot;, NULL);
+evas_object_image_file_set(prev, "/path/to/prev", NULL);
 evas_object_image_preload(prev, EINA_FALSE);
 next = evas_object_image_filled_add(canvas);
-evas_object_image_file_set(next, &quot;/path/to/next&quot;, NULL);
+evas_object_image_file_set(next, "/path/to/next", NULL);
 evas_object_image_preload(next, EINA_FALSE);
 </pre>
 
@@ -601,7 +601,7 @@ evas_object_image_preload(next, EINA_FALSE);
 
 <pre class="prettyprint">
 img = evas_object_image_filled_add(canvas);
-evas_object_image_file_set(img, &quot;/path/to/next&quot;, NULL);
+evas_object_image_file_set(img, "/path/to/next", NULL);
 evas_object_image_load_scale_down_set(img, 2); /* Loading image size is img/2 */
 </pre>
 
@@ -613,18 +613,18 @@ evas_object_image_load_region_set(img, x, y, w, h);
 <h4>Specifying Borders</h4>
 <p>With Evas, you can specify image margins to be treated as borders. The margins then maintain their aspects when the image is resized. This makes setting frames around other UI objects easier. The following figure illustrates the border behavior, when the image is resized.</p>
 
-<p align="center"><strong>Figure: Borders in Evas</strong></p> 
-<p align="center"><img alt="Borders in Evas" src="../../../images/9patch.png" /></p> 
- 
+<p align="center"><strong>Figure: Borders in Evas</strong></p>
+<p align="center"><img alt="Borders in Evas" src="../../../images/9patch.png" /></p>
+
 
  <h2 id="block" name="block">Textblock Objects</h2>
 
 <p>Unlike basic text objects, a textblock handles complex text, managing multiple styles and multiline text based on HTML-like tags. However, these extra features are heavier on memory and processing cost.</p>
 <p>The textblock objects is an object that shows big chunks of text. Textblock supports many features, including text formatting, automatic and manual text alignment, embedding items (icons, for example). Textblock has 3 important parts: the text paragraphs, the format nodes and the cursors.</p>
-<p>To set markup to format text, use for example <code>&lt;font_size=50&gt;Big!&lt;/font_size&gt;</code>. Set more than one style directive in one tag with <code>&lt;font_size=50 color=#F00&gt;Big and Red!&lt;/font_size&gt;</code>. Note that <code>&lt;/font_size&gt;</code> is used although the format also included color. This is because the first format determines the matching closing tag&#39;s name. You can use anonymous tags, such as <code>&lt;font_size=30&gt;Big&lt;/&gt;</code>, which pop any type of format, but it is advisable to use the named alternatives instead.</p>
+<p>To set markup to format text, use for example <code>&lt;font_size=50&gt;Big!&lt;/font_size&gt;</code>. Set more than one style directive in one tag with <code>&lt;font_size=50 color=#F00&gt;Big and Red!&lt;/font_size&gt;</code>. Note that <code>&lt;/font_size&gt;</code> is used although the format also included color. This is because the first format determines the matching closing tag's name. You can use anonymous tags, such as <code>&lt;font_size=30&gt;Big&lt;/&gt;</code>, which pop any type of format, but it is advisable to use the named alternatives instead.</p>
 <p>Textblock supports the following formats:</p>
 <ul>
-<li><code>font</code>: Font description in fontconfig such as format, for example <code>&quot;Sans:style=Italic:lang=hi&quot; or &quot;Serif:style=Bold&quot;</code>.</li>
+<li><code>font</code>: Font description in fontconfig such as format, for example <code>"Sans:style=Italic:lang=hi" or "Serif:style=Bold"</code>.</li>
 <li><code>font_weight</code>: Overrides the weight defined in <code>font</code>. For example, <code>font_weight=Bold</code> is the same as <code>font=:style=Bold</code>. The supported weights are <code>normal</code>, <code>thin</code>, <code>ultralight</code>, <code>light</code>, <code>book</code>, <code>medium</code>, <code>semibold</code>, <code>bold</code>, <code>ultrabold</code>, <code>black</code>, and <code>extrablack</code>.</li>
 <li><code>font_style</code>: Overrides the style defined in <code>font</code>. For example, <code>font_style=Italic</code> is the same as <code>font=:style=Italic</code>. The supported styles are <code>normal</code>, <code>oblique</code>, and <code>italic</code>.</li>
 <li><code>font_width</code>: Overrides the width defined in <code>font</code>. For example, <code>font_width=Condensed</code> is the same as <code>font=:style=Condensed</code>. The supported widths are <code>normal</code>, <code>ultracondensed</code>, <code>extracondensed</code>, <code>condensed</code>, <code>semicondensed</code>, <code>semiexpanded</code>, <code>expanded</code>, <code>extraexpanded</code>, and <code>ultraexpanded</code>.</li>
@@ -655,7 +655,7 @@ evas_object_image_load_region_set(img, x, y, w, h);
 <li><code>linerelsize</code>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
 <li><code>linegap</code>: To force a line gap in pixels.</li>
 <li><code>linerelgap</code>: Either a floating point value or a percentage indicating the wanted size of the line relative to the calculated size.</li>
-<li><code>item</code>: Creates an empty space that is filled by an upper layer. Use <code>size</code>, <code>abssize</code>, or <code>relsize</code> to define the item&#39;s size, and an optional vsize = full/ascent to define the item&#39;s position in the line.</li>
+<li><code>item</code>: Creates an empty space that is filled by an upper layer. Use <code>size</code>, <code>abssize</code>, or <code>relsize</code> to define the item's size, and an optional vsize = full/ascent to define the item's position in the line.</li>
 <li><code>linefill</code>: Either a float value or percentage indicating how much to fill the line.</li>
 <li><code>ellipsis</code>: A value between 0.0 and 1.0 to indicate the type of ellipsis, or -1.0 to indicate that an ellipsis is not wanted.</li>
 <li><code>password</code>: Either <code>on</code> or <code>off</code>, this is used to specifically turn replacing chars with the password mode (that is, replacement char) on and off. </li>
@@ -677,7 +677,7 @@ evas_object_show(clipper);
 </pre>
 
 <h3>Layer of Color </h3>
-<p>A solid white clipper does not produce a change in the color of the clipped object, only hides what is outside the clipper&#39;s area. Changing the color of an object is accomplished by using a colored clipper. Clippers with color function by multiplying the colors of the clipped object. The following code shows how to remove all the red from an object.</p>
+<p>A solid white clipper does not produce a change in the color of the clipped object, only hides what is outside the clipper's area. Changing the color of an object is accomplished by using a colored clipper. Clippers with color function by multiplying the colors of the clipped object. The following code shows how to remove all the red from an object.</p>
 <pre class="prettyprint">
 Evas_Object *clipper = evas_object_rectangle_add(evas);
 evas_object_move(clipper, my_evas_object_x, my_evas_object_y);
@@ -685,7 +685,7 @@ evas_object_resize(clipper, my_evas_object_width, my_evas_object_height);
 evas_object_color_set(clipper, 0, 255, 255, 255);
 evas_object_clip_set(obj, clipper);
 evas_object_show(clipper);
-</pre> 
+</pre>
 
 
 <h2 id="map" name="map">Mapping Objects</h2>
@@ -797,12 +797,12 @@ evas_map_free(m);
 <p>Rotating in the 3D space does not look natural. A more natural look becomes by adding perspective to the transformation, which is done with the <code>evas_map_util_3d_perspective()</code> function on the map after its position has been set. Use the following parameters:</p>
 
 <ul>
-<li><code>px</code> and <code>py</code> specify the &quot;infinite distance&quot; point in the 3D conversion, where all lines converge to.</li>
+<li><code>px</code> and <code>py</code> specify the "infinite distance" point in the 3D conversion, where all lines converge to.</li>
 <li><code>z0</code> specifies the Z value at which there is a 1:1 mapping between spatial coordinates and screen coordinates: any points on this Z value do not have their X and Y coordinates modified in the transform, while those further away (Z value higher) shrink into the distance, and those less than this value expand.</li>
-<li><code>focal</code> determines the &quot;focal length&quot; of the camera: this is the distance in reality between the camera lens plane (the rendering results are undefined at or closer than this) and the <code>z0</code> value; this function allows for some &quot;depth&quot; control.</li>
+<li><code>focal</code> determines the "focal length" of the camera: this is the distance in reality between the camera lens plane (the rendering results are undefined at or closer than this) and the <code>z0</code> value; this function allows for some "depth" control.</li>
 </ul>
 <h3>Color and Lighting</h3>
-<p>Each point in a map can be set to a color, which is multiplied with the object&#39;s own color and linearly interpolated in between adjacent points. To do this, use <code>evas_map_point_color_set(map, index, r, g, b, a)</code> for each point of the map, or <code>evas_map_util_points_color_set()</code> to set every point into the same color.</p>
+<p>Each point in a map can be set to a color, which is multiplied with the object's own color and linearly interpolated in between adjacent points. To do this, use <code>evas_map_point_color_set(map, index, r, g, b, a)</code> for each point of the map, or <code>evas_map_util_points_color_set()</code> to set every point into the same color.</p>
 <p>To add lighting for the objects, which is useful with 3D transforms, use the <code>evas_map_util_3d_lighting()</code> function with the following parameters:</p>
 <ul>
 <li><code>lightx</code>, <code>lighty</code> and <code>lightz</code> are the local light source coordinates;</li>
diff --git a/org.tizen.guides/html/native/ui/efl/evas_rendering_n.htm b/org.tizen.guides/html/native/ui/efl/evas_rendering_n.htm
index 709bb7e..17cfb8b 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/evas_rendering_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/evas_rendering_n.htm
@@ -36,7 +36,7 @@
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>              
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
                </ul>
     </div></div>
 </div>
@@ -44,10 +44,10 @@
 <div id="container"><div id="contents"><div class="content">
 
  <h1>Evas Rendering Concept and Method</h1>
- 
-<p>Evas is a canvas display library where the canvas is structural and acts as a state engine. It differs from most display and windowing systems, which are immediate mode display targets. Evas handles the logic of the structural display using its state engine, and controls the target windowing system to produce rendered results of the current canvas&#39;s state on the display.</p>
 
-<h2 id="ui_rendering" name="ui_rendering">UI Rendering Modes</h2> 
+<p>Evas is a canvas display library where the canvas is structural and acts as a state engine. It differs from most display and windowing systems, which are immediate mode display targets. Evas handles the logic of the structural display using its state engine, and controls the target windowing system to produce rendered results of the current canvas's state on the display.</p>
+
+<h2 id="ui_rendering" name="ui_rendering">UI Rendering Modes</h2>
 
 <p>Evas removes the need to know about the characteristics of your display system or what graphics calls are used to draw them and how. It deals on an object level where all you do is create and manipulate objects in a canvas, set their properties, and the rest is done for you. This rendering method is called the retained mode, as opposed to the immediate mode used in most display and windowing systems:</p>
 
@@ -56,8 +56,8 @@
 
 <p>The immediate mode is most commonly used in graphic toolkit libraries, such as GTK+, GDI, and GDI+. The application is responsible for repainting the invalid portion of the client area.</p>
 
-<p align="center"><strong>Figure: Immediate mode</strong></p> 
-<p align="center"><img alt="Immediate mode" src="../../../images/immediate_mode.png" /></p> 
+<p align="center"><strong>Figure: Immediate mode</strong></p>
+<p align="center"><img alt="Immediate mode" src="../../../images/immediate_mode.png" /></p>
 
 <p>Immediate mode display systems retain very little or no state. A program executes a series of commands, as in the following pseudo code:</p>
 <pre class="prettyprint">
@@ -71,55 +71,55 @@ draw image bitmap_handle at position (10, 30);
 </pre>
 <p>The series of commands is executed by the windowing system and the results are typically displayed on the screen. Once the commands are executed, the display system does not know how to reproduce this image again, and has to be instructed by the application on how to redraw sections of the screen, if needed. Each successive command is executed as instructed by the application and either emulated by the software or sent to the graphics hardware on the device to be performed.</p>
 <p>The advantage of an immediate mode system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands for better looking interfaces, more work needs to be done at this level by the internals of UI component sets, custom display components, and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws for the display to be fast and interactive, and keep track of the redraw logic.</p>
-<p>In the following pseudo code scene example, if the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the &quot;expose event&quot;), you must manually calculate the updates and repaint the area:</p>
+<p>In the following pseudo code scene example, if the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the "expose event"), you must manually calculate the updates and repaint the area:</p>
 <pre class="prettyprint">
 Redraw from position (0, 0) to position (50, 50):
 
 /* What was in area (0, 0, 50, 50)? */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* 1. intersection part of line (0, 0) to (100, 200)? */
-&nbsp;&nbsp;&nbsp;&nbsp;draw line from position (0, 0) to position (25, 50);
+    /* 1. intersection part of line (0, 0) to (100, 200)? */
+    draw line from position (0, 0) to position (25, 50);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* 2. intersection part of rectangle (10, 30) to (50, 500)? */
-&nbsp;&nbsp;&nbsp;&nbsp;draw rectangle from position (10, 30) to position (50, 50);
+    /* 2. intersection part of rectangle (10, 30) to (50, 500)? */
+    draw rectangle from position (10, 30) to position (50, 50);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* 3. intersection part of image at (10, 30), size 100 x 100? */
-&nbsp;&nbsp;&nbsp;&nbsp;bitmap_subimage = subregion from position (0, 0) to position (40, 20);
-&nbsp;&nbsp;&nbsp;&nbsp;draw image bitmap_subimage at position (10, 30);
+    /* 3. intersection part of image at (10, 30), size 100 x 100? */
+    bitmap_subimage = subregion from position (0, 0) to position (40, 20);
+    draw image bitmap_subimage at position (10, 30);
 </pre>
 
 <p>In the immediate mode, the application commands any drawing issues as it needs, and the display system draws some UI components. After the drawing is done, it appears in the destination. This mode allows you to have exact control over the render cycles. However, if the draw commands are misused, unnecessary drawing can be performed or drawing never happens at all. For example, if all elements in the scene are opaque, the system is doing useless paints: part of the line is behind the rectangle, and part of the rectangle is behind the image. These useless paints tend to be very costly.</p>
 
-<p>The following code example shows the common usage of the immediate mode:</p> 
+<p>The following code example shows the common usage of the immediate mode:</p>
 
 <pre class="prettyprint">
 void
 update()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Image *img = load_image(NEW_IMG);
+    Image *img = load_image(NEW_IMG);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Switch button image to new one */
-&nbsp;&nbsp;&nbsp;&nbsp;update_button_image(img);
+    /* Switch button image to new one */
+    update_button_image(img);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Issue the invalid area (button area) to be redrawn on the screen */
-&nbsp;&nbsp;&nbsp;&nbsp;invalidate_area(button_x, button_y, button_w, button_h);
+    /* Issue the invalid area (button area) to be redrawn on the screen */
+    invalidate_area(button_x, button_y, button_w, button_h);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Move rectangle from (200, 200) to (300, 300) */
-&nbsp;&nbsp;&nbsp;&nbsp;int rect_prev_x = rect_x;
-&nbsp;&nbsp;&nbsp;&nbsp;int rect_prev_y = rect_y;
-&nbsp;&nbsp;&nbsp;&nbsp;rectangle_x = 300;
-&nbsp;&nbsp;&nbsp;&nbsp;rectangle_y = 300;
-&nbsp;&nbsp;&nbsp;&nbsp;set_rect_position(rect_x, rect_y);
+    /* Move rectangle from (200, 200) to (300, 300) */
+    int rect_prev_x = rect_x;
+    int rect_prev_y = rect_y;
+    rectangle_x = 300;
+    rectangle_y = 300;
+    set_rect_position(rect_x, rect_y);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Issue the invalid area (changed area) to be redrawn on the screen */
-&nbsp;&nbsp;&nbsp;&nbsp;int diff_x = rect_x – rect_prev_x;
-&nbsp;&nbsp;&nbsp;&nbsp;int diff_y = rect_y – rect_prev_y;
-&nbsp;&nbsp;&nbsp;&nbsp;invalidate_area(rect_prev_x, rect_prev_y, (rect_w + diff_x), (rect_h + diff_y));
+    /* Issue the invalid area (changed area) to be redrawn on the screen */
+    int diff_x = rect_x – rect_prev_x;
+    int diff_y = rect_y – rect_prev_y;
+    invalidate_area(rect_prev_x, rect_prev_y, (rect_w + diff_x), (rect_h + diff_y));
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* After setting the invalid area, request rendering to update the screen */
-&nbsp;&nbsp;&nbsp;&nbsp;render();
+    /* After setting the invalid area, request rendering to update the screen */
+    render();
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Now you can see how the button image and rectangle position are changed */
+    /* Now you can see how the button image and rectangle position are changed */
 }
 </pre>
 
@@ -128,8 +128,8 @@ update()
 
 <p>A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated.</p>
 
-<p align="center"><strong>Figure: Retained mode</strong></p> 
-<p align="center"><img alt="Retained mode" src="../../../images/retained_mode.png" /></p> 
+<p align="center"><strong>Figure: Retained mode</strong></p>
+<p align="center"><img alt="Retained mode" src="../../../images/retained_mode.png" /></p>
 
 <p>Evas is a structural system in which you create and manage display objects and their properties, and as a result of this higher level state management, the canvas is able to redraw the set of objects when needed to represent the current state of the canvas.</p>
 <p>A program creates the display objects and their properties as a series of commands, as in the following pseudo code:</p>
@@ -161,39 +161,39 @@ render scene;
 void
 create_image()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize an image object to be displayed on the screen */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *img = evas_object_image_add(e);
+    /* Initialize an image object to be displayed on the screen */
+    Evas_Object *img = evas_object_image_add(e);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set image resource */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(img, IMG, NULL);
+    /* Set image resource */
+    evas_object_image_file_set(img, IMG, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set image position */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(img, 100, 100);
+    /* Set image position */
+    evas_object_move(img, 100, 100);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set image size */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(img, 200, 200);
+    /* Set image size */
+    evas_object_resize(img, 200, 200);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set image visibility (show or hide) */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(img);
+    /* Set image visibility (show or hide) */
+    evas_object_show(img);
 }
 
 void
 create_rectangle()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize an rectangle object to be displayed on the screen */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *rect = evas_object_rectangle_add(e);
+    /* Initialize an rectangle object to be displayed on the screen */
+    Evas_Object *rect = evas_object_rectangle_add(e);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set rectangle color */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(rect, 255, 0, 0, 255);
+    /* Set rectangle color */
+    evas_object_color_set(rect, 255, 0, 0, 255);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set rectangle position */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(rect, 200, 200);
+    /* Set rectangle position */
+    evas_object_move(rect, 200, 200);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set rectangle size */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(rect, 200, 200);
+    /* Set rectangle size */
+    evas_object_resize(rect, 200, 200);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set rectangle visibility (show or hide) */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(rect);
+    /* Set rectangle visibility (show or hide) */
+    evas_object_show(rect);
 }
 </pre>
 
@@ -203,11 +203,11 @@ create_rectangle()
 void
 update()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set new image resource */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_image_file_set(img, NEW_IMG, NULL);
+    /* Set new image resource */
+    elm_image_file_set(img, NEW_IMG, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set new rectangle position */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(rect, 300, 300);
+    /* Set new rectangle position */
+    evas_object_move(rect, 300, 300);
 }
 </pre>
 </li>
@@ -217,14 +217,14 @@ update()
 
 <p>Tizen native applications run on the Ecore main loop, which performs a few steps for every frame. At the end of the loop, when it goes to the idle enterer step, Evas redraws any changes in the objects by calculating the changed portions of all display objects and redrawing them. If there are no changes, Evas rendering is skipped.</p>
 
-<p align="center"><strong>Figure: Evas rendering in the main loop</strong></p> 
-<p align="center"><img alt="Evas rendering in the main loop" src="../../../images/rendering1.png" /></p> 
+<p align="center"><strong>Figure: Evas rendering in the main loop</strong></p>
+<p align="center"><img alt="Evas rendering in the main loop" src="../../../images/rendering1.png" /></p>
 
 <p>To minimize the required rendering, Evas tracks the states of all display objects, such as their position, size, visibility, and color. If a state is changed while the object is hidden by other obscured objects, the object is not redrawn. In other words, Evas draws only the necessary changes in the screen.</p>
 
 <p>The following figures illustrate how Evas redraws a changed area:</p>
 
-<ol><li><p>Originally, the screen contains a blue background object (a sky-blue color rectangle) and a partially hidden cloud image object. Above them, there are a red and green rectangle, and the &quot;Hello out there&quot; text printed on the green rectangle.</p>
+<ol><li><p>Originally, the screen contains a blue background object (a sky-blue color rectangle) and a partially hidden cloud image object. Above them, there are a red and green rectangle, and the "Hello out there" text printed on the green rectangle.</p>
 
 <p align="center"><img alt="Evas redrawing example 1" src="../../../images/redrawing01.png" /></p> </li>
 
@@ -238,9 +238,9 @@ update()
 
 <li><p>Evas determines the invalid areas that require cleaning, and redraws them.</p>
 
-<p align="center"><img alt="Evas redrawing example 4" src="../../../images/redrawing04.png" /></p></li> 
+<p align="center"><img alt="Evas redrawing example 4" src="../../../images/redrawing04.png" /></p></li>
 
-<li><p>At the end, the updated screen shows the original screen with the updated areas visible.</p> 
+<li><p>At the end, the updated screen shows the original screen with the updated areas visible.</p>
 
 <p align="center"><img alt="Evas redrawing example 5" src="../../../images/redrawing05.png" /></p>
 </li></ol>
@@ -253,12 +253,12 @@ update()
 <p>Evas can work with and provides multiple engines, such as:</p>
 <ul>
 <li><code>buffer</code>: All the rendering takes place in a buffer.</li>
-<li><code>fb</code>: Rendering takes place in the system&#39;s framebuffer.</li>
+<li><code>fb</code>: Rendering takes place in the system's framebuffer.</li>
 <li><code>software_x11</code>: Renders to an X11 window; this is the most used engine.</li>
 <li><code>gl_x11</code>: Renders to an X11 window, except that it uses OpenGL.</li>
 </ul>
 <p>The engines implement the rendering of all the basic objects by themselves, because they can often be accelerated by the hardware or backend software libraries to provide fast rendering.</p>
-<p>If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version.</p> 
+<p>If a particular engine does not have the provision for a certain primitive object, it reverts back to using a default software version.</p>
 
 <div class="note">
        <strong>Note</strong>
@@ -273,7 +273,7 @@ update()
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/event_handling_n.htm b/org.tizen.guides/html/native/ui/efl/event_handling_n.htm
index 13d6074..1c28eb7 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/event_handling_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/event_handling_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Event Handling</title> 
- </head> 
+  <title>Event Handling</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,20 +33,20 @@
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>      
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>                  
-                       
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Event Handling</h1> 
-  
+  <h1>Event Handling</h1>
+
 <p>EFL relies on events and callbacks. In case of an event, such as a key press, mouse click, or a battery running low, the main loop calls the callback functions that are associated with that specific event. After the callbacks have finished, the main loop takes over and waits for new events, upon which to trigger new callbacks.</p>
 <p>It is important to do light work in the callbacks and to return to the main loop relatively quickly. If there is heavy work to do, use an asynchronous mechanism, such as <code>Ecore_con</code> for network I/O, or threads for CPU-intensive tasks. Failing to return quickly to the main loop blocks the application UI and makes it appear frozen.</p>
 
@@ -56,12 +56,12 @@
 <li><a href="event_types_n.htm#ecore">Ecore events</a> are the lowest-level events and come directly from the system. Except for application-wide shortcuts, it is not advisable to use them.</li>
 <li><a href="event_types_n.htm#evas">Evas events</a> are events on the graphical canvas as a whole. They are fairly low-level and mostly useful when drawing directly on the canvas.</li>
 <li><a href="event_types_n.htm#evas_object">Evas object events</a> concern the objects that are on the canvas. You can also implement <a href="multipoint_touch_n.htm">multi-point touch events</a> for Evas objects.</li>
-<li><a href="event_types_n.htm#evas_smart_object">Evas smart events</a> are the most often used and take place on collections of Evas objects. They are called &quot;smart&quot;, because they have an internal logic and can define their own events, while the other event types are fixed.</li>
+<li><a href="event_types_n.htm#evas_smart_object">Evas smart events</a> are the most often used and take place on collections of Evas objects. They are called "smart", because they have an internal logic and can define their own events, while the other event types are fixed.</li>
 </ul>
 
-  <p align="center"><strong>Figure: Event types in the EFLs</strong></p> 
+  <p align="center"><strong>Figure: Event types in the EFLs</strong></p>
   <p align="center"><img alt="Event types in the EFLs" src="../../../images/events_scope.png" /></p>
-  
+
 <div class="note">
        <strong>Note</strong>
        There are also <a href="event_types_n.htm#edje">Edje signals</a>, which come from program blocks in the theme EDC files. They can be used from the high level Elementary APIs or the low level Edje APIs.
@@ -76,17 +76,17 @@
 <li><p>The callback for the <code>clicked</code> event starts the download in <code>Ecore_con</code>, displays the first progress bar, and adds a callback to monitor the download progress. When the download progress changes, the callback updates the progress bar.</p></li>
 <li><p>After the download is finished, the second progress bar is displayed and the file processing is offloaded to another thread through the <code>Ecore_thread</code>. The processing function regularly updates the progress bar, which wrapped in the <code>ecore_main_loop_thread_safe_call_async()</code> function because GUI operations are not thread-safe.</p></li>
 </ol>
-<p>Events enable operations taking more than a few milliseconds&#39; time to be executed outside of the main loop, therefore not blocking UI redraws.</p>
+<p>Events enable operations taking more than a few milliseconds' time to be executed outside of the main loop, therefore not blocking UI redraws.</p>
 <p>The following figure illustrates the event flow that follows a click on the screen.</p>
 
-  <p align="center"><strong>Figure: Event flow for a user click</strong></p> 
+  <p align="center"><strong>Figure: Event flow for a user click</strong></p>
   <p align="center"><img alt="Event flow for a user click" src="../../../images/events_flow.png" /></p>
-  
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/event_types_n.htm b/org.tizen.guides/html/native/ui/efl/event_types_n.htm
index 7e8267d..2ac7424 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/event_types_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/event_types_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Event Types</title> 
- </head> 
+  <title>Event Types</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -26,7 +26,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
                <p class="toc-title">Content</p>
-               <ul class="toc">                
+               <ul class="toc">
                        <li><a href="#ecore">Ecore Events</a></li>
                        <li><a href="#edje">Edje Events</a></li>
                        <li><a href="#evas">Evas Events</a></li>
@@ -36,23 +36,23 @@
        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>      
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>                  
-                       
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>                      
-                               
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Event Types</h1> 
-  
-<p>EFL provides various event types that you can use to monitor and react to user interactions and system events in the UI.</p>  
-  
+  <h1>Event Types</h1>
+
+<p>EFL provides various event types that you can use to monitor and react to user interactions and system events in the UI.</p>
+
 <h2 id="ecore" name="ecore">Ecore Events</h2>
 
 <p>Ecore events are used for low-level handling of events, such as key presses, network connections, and communication with sub-processes. In case of shortcuts, the low-level handling of key presses is particularly useful: instead of adding a signal handler to a specific graphical element, you can add one globally to guarantee that no matter which UI component is currently receiving events, the shortcut is caught correctly.</p>
@@ -66,151 +66,151 @@
 <p>The following Ecore events are available for shortcuts. The event callbacks receive additional data through a <code>void*</code> object, whose type depends on the received event.</p>
 
 <ul>
-<li><code>ECORE_EVENT_KEY_DOWN</code> and <code>ECORE_EVENT_KEY_UP</code>: 
+<li><code>ECORE_EVENT_KEY_DOWN</code> and <code>ECORE_EVENT_KEY_UP</code>:
 <pre class="prettyprint">
 typedef struct _Ecore_Event_Key Ecore_Event_Key;
 
 struct _Ecore_Event_Key {
-&nbsp;&nbsp;&nbsp;&nbsp;const char *keyname;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *key;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *string;
-&nbsp;&nbsp;&nbsp;&nbsp;const char *compose;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int same_screen;
+    const char *keyname;
+    const char *key;
+    const char *string;
+    const char *compose;
+    Ecore_Window window;
+    Ecore_Window root_window;
+    Ecore_Window event_window;
+
+    unsigned int timestamp;
+    unsigned int modifiers;
+
+    int same_screen;
 };
 </pre>
 
 </li>
 
-<li><code>ECORE_EVENT_MOUSE_BUTTON_DOWN</code> and <code>ECORE_EVENT_MOUSE_BUTTON_UP</code>: 
+<li><code>ECORE_EVENT_MOUSE_BUTTON_DOWN</code> and <code>ECORE_EVENT_MOUSE_BUTTON_UP</code>:
 <pre class="prettyprint">
 typedef struct _Ecore_Event_Mouse_Button Ecore_Event_Mouse_Button;
 
 struct _Ecore_Event_Mouse_Button {
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int buttons;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int double_click;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int triple_click;
-&nbsp;&nbsp;&nbsp;&nbsp;int same_screen;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;struct {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;} root;
-
-&nbsp;&nbsp;&nbsp;&nbsp;struct {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   0 if normal mouse, 1+ for other mouse-devices
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   (such as multi-touch - other fingers)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Radius of press point - radius_x and radius_y
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   if it is an ellipse (radius is the average of the 2)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius_x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius_y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Angle relative to perpendicular (0.0 == perpendicular), in degrees */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Same as x, y, root.x, root.y, but with sub-pixel precision, if available */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
-&nbsp;&nbsp;&nbsp;&nbsp;} multi;
+    Ecore_Window window;
+    Ecore_Window root_window;
+    Ecore_Window event_window;
+
+    unsigned int timestamp;
+    unsigned int modifiers;
+    unsigned int buttons;
+    unsigned int double_click;
+    unsigned int triple_click;
+    int same_screen;
+
+    int x;
+    int y;
+    struct {
+        int x;
+        int y;
+    } root;
+
+    struct {
+        /*
+           0 if normal mouse, 1+ for other mouse-devices
+           (such as multi-touch - other fingers)
+        */
+        int device;
+        /*
+           Radius of press point - radius_x and radius_y
+           if it is an ellipse (radius is the average of the 2)
+        */
+        double radius;
+        double radius_x;
+        double radius_y;
+        /* Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none */
+        double pressure;
+        /* Angle relative to perpendicular (0.0 == perpendicular), in degrees */
+        double angle;
+        /* Same as x, y, root.x, root.y, but with sub-pixel precision, if available */
+        double x;
+        double y;
+        struct {
+            double x;
+            double y;
+        } root;
+    } multi;
 };
 </pre>
- 
+
 </li>
-<li><code>ECORE_EVENT_MOUSE_MOVE</code> and <code>ECORE_EVENT_MOUSE_WHEEL</code>: 
+<li><code>ECORE_EVENT_MOUSE_MOVE</code> and <code>ECORE_EVENT_MOUSE_WHEEL</code>:
 <pre class="prettyprint">
 typedef struct _Ecore_Event_Mouse_Wheel Ecore_Event_Mouse_Wheel;
 
 struct _Ecore_Event_Mouse_Wheel {
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int same_screen;
-&nbsp;&nbsp;&nbsp;&nbsp;int direction;
-&nbsp;&nbsp;&nbsp;&nbsp;int z;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;struct {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;} root;
+    Ecore_Window window;
+    Ecore_Window root_window;
+    Ecore_Window event_window;
+
+    unsigned int timestamp;
+    unsigned int modifiers;
+
+    int same_screen;
+    int direction;
+    int z;
+
+    int x;
+    int y;
+    struct {
+        int x;
+        int y;
+    } root;
 };
 </pre>
 </li>
-<li><code>ECORE_EVENT_MOUSE_IN</code> and <code>ECORE_EVENT_MOUSE_OUT</code>: 
+<li><code>ECORE_EVENT_MOUSE_IN</code> and <code>ECORE_EVENT_MOUSE_OUT</code>:
 <pre class="prettyprint">
 typedef struct _Ecore_Event_Mouse_Move Ecore_Event_Mouse_Move;
 
 struct _Ecore_Event_Mouse_Move {
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window window;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window root_window;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Window event_window;
-
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int timestamp;
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int modifiers;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int same_screen;
-
-&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;struct {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int y;
-&nbsp;&nbsp;&nbsp;&nbsp;} root;
-
-&nbsp;&nbsp;&nbsp;&nbsp;struct {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   0 if normal mouse, 1+ for other mouse-devices
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   (such as multi-touch - other fingers)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int device;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Radius of press point - radius_x and radius_y
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   if it is an ellipse (radius is the average of the 2)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius_x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double radius_y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double pressure;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Angle relative to perpendicular (0.0 == perpendicular), in degrees */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double angle;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Same as x, y, root.x, root.y, but with sub-pixel precision, if available */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double x;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double y;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} root;
-&nbsp;&nbsp;&nbsp;&nbsp;} multi;
+    Ecore_Window window;
+    Ecore_Window root_window;
+    Ecore_Window event_window;
+
+    unsigned int timestamp;
+    unsigned int modifiers;
+
+    int same_screen;
+
+    int x;
+    int y;
+    struct {
+        int x;
+        int y;
+    } root;
+
+    struct {
+        /*
+           0 if normal mouse, 1+ for other mouse-devices
+           (such as multi-touch - other fingers)
+        */
+        int device;
+        /*
+           Radius of press point - radius_x and radius_y
+           if it is an ellipse (radius is the average of the 2)
+        */
+        double radius;
+        double radius_x;
+        double radius_y;
+        /* Pressure - 1.0 == normal, &gt; 1.0 == more, 0.0 == none */
+        double pressure;
+        /* Angle relative to perpendicular (0.0 == perpendicular), in degrees */
+        double angle;
+        /* Same as x, y, root.x, root.y, but with sub-pixel precision, if available */
+        double x;
+        double y;
+        struct {
+            double x;
+            double y;
+        } root;
+    } multi;
 };
 </pre>
 
@@ -220,7 +220,7 @@ struct _Ecore_Event_Mouse_Move {
 
 <p>To manage Ecore event handlers:</p>
 
-<ol><li>To add an Ecore event handler, register a callback for a specific event with the <code>ecore_event_handler_add()</code> function. 
+<ol><li>To add an Ecore event handler, register a callback for a specific event with the <code>ecore_event_handler_add()</code> function.
 <p>The function takes as parameters the event type (such as <code>ECORE_EVENT_KEY_DOWN</code> for key presses), callback function, and additional data delivered to the callback. The function returns an event handler pointer, which you can use to remove the handler later.</p></li>
 
 <li>Define the <code>Ecore_Event_Handler_Cb()</code> callback function.
@@ -235,21 +235,21 @@ Eina_Bool ctrl_pressed = EINA_FALSE;
 static Eina_Bool
 _key_down_cb(void *data __UNUSED__, int type __UNUSED__, void *ev)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Callback is used with the ECORE_EVENT_KEY_DOWN signal: the
-&nbsp;&nbsp;&nbsp;&nbsp;   parameter &quot;void *ev&quot; is therefore of the actual type Ecore_Event_Key
-&nbsp;&nbsp;&nbsp;&nbsp;   Following renders its fields accessible
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Event_Key *event = ev;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Test whether the key that is pressed is Ctrl */
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(&quot;Control_L&quot;, event-&gt;key)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* If it is, store that piece of information */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl_pressed = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Let the event continue to other callbacks which have not been called yet */
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
+    /*
+       Callback is used with the ECORE_EVENT_KEY_DOWN signal: the
+       parameter "void *ev" is therefore of the actual type Ecore_Event_Key
+       Following renders its fields accessible
+    */
+    Ecore_Event_Key *event = ev;
+
+    /* Test whether the key that is pressed is Ctrl */
+    if (!strcmp("Control_L", event-&gt;key)) {
+        /* If it is, store that piece of information */
+        ctrl_pressed = EINA_TRUE;
+    }
+
+    /* Let the event continue to other callbacks which have not been called yet */
+    return ECORE_CALLBACK_PASS_ON;
 }
 
 ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, _key_down_cb, NULL);
@@ -260,26 +260,26 @@ ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, _key_down_cb, NULL);
 <p>You can send Ecore events to the main loop yourself to handle actions of various origins through the same codepath. This is a thread-safe operation.</p>
 <p>To send an event, use the <code>ecore_event_add()</code> function. The function takes as parameters the event type (such as <code>ECORE_EVENT_KEY_DOWN</code> for key presses), additional data delivered to the callback, the <code>Ecore_End_Cb()</code> function used to free the additional data after it is delivered to the callback function, and the pointer to additional data delivered to the free function. The free function and the pointer to its additional data are optional; use <code>NULL</code> if you do not need them.</p>
 
-  
+
 <h2 id="edje" name="edje">Edje Events</h2>
 
 <p>Edje <a href="component_custom_n.htm#theme">themes</a> have program blocks in the EDC file, which are triggered upon the reception of a signal that can execute actions, such as changing the state of an Edje part and running another program.</p>
 
 <h3 id="events_guide_edje_without_layout" name="events_guide_edje_without_layout">Managing a Single Signal Emitter</h3>
-<p>The following example shows a program block of an Edje file. The program is called <code>&quot;change_color&quot;</code>, and it is triggered on mouse clicks on the current part. It emits a <code>&quot;got.a.click&quot;</code> signal where the source is set to <code>&quot;color_changer&quot;</code>.</p>
+<p>The following example shows a program block of an Edje file. The program is called <code>"change_color"</code>, and it is triggered on mouse clicks on the current part. It emits a <code>"got.a.click"</code> signal where the source is set to <code>"color_changer"</code>.</p>
 <pre class="prettyprint">
 program
 {
-&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
-&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;action: SIGNAL_EMIT &quot;got.a.click&quot; &quot;color_changer&quot;;
+   name: "change_color";
+   signal: "mouse,clicked,*";
+   source: "*";
+   action: SIGNAL_EMIT "got.a.click" "color_changer";
 }
 </pre>
 
 <p>To catch the emitted signal in the application code, use either the <code>edje_object_signal_callback_add()</code> or <code>elm_object_signal_callback_add()</code> function. Their only difference is that the previous one operates on an Edje object and the latter one on an Elementary object. Unless you do not use the Elementary library at all, use the Elementary variant.</p>
 
-<p>Both the functions take as parameters the object emitting the signal, the signal name, the signal source, the <code>Edje_Signal_Cb()</code> callback function called when the signal name and source match, and additional data delivered to the callback. For the signal name and source, <code>&quot;*&quot;</code> acts as a wildcard. The additional data is optional; use <code>NULL</code> if you do not need it.</p>
+<p>Both the functions take as parameters the object emitting the signal, the signal name, the signal source, the <code>Edje_Signal_Cb()</code> callback function called when the signal name and source match, and additional data delivered to the callback. For the signal name and source, <code>"*"</code> acts as a wildcard. The additional data is optional; use <code>NULL</code> if you do not need it.</p>
 
 <p>The callback function takes as parameters the additional data defined in the <code>edje_object_signal_callback_add()</code> or <code>elm_object_signal_callback_add()</code> function parameters, the object emitting the signal, the signal name, and the signal source.</p>
 
@@ -291,11 +291,11 @@ program
 
 <p>The <code>elm_layout_signal_callback_add()</code> function works similarly as the <code>elm_object_signal_callback_add()</code> and <code>edje_object_signal_callback_add()</code> functions. The only difference is the type of the object in the first parameter. For <code>elm_layout_signal_callback_add()</code>, it is a pointer to an <code>Evas_Object</code>, which is obtained through the <code>elm_layout_add()</code> function. For more information, see <a href="container_layout_n.htm">Layout</a>.</p>
 
- 
+
 <h2 id="evas" name="evas">Evas Events</h2>
 
 <p>Evas events happen on a canvas as a whole. These events are too low-level for writing applications, and are mostly used when writing the graphical toolkit itself.</p>
- 
+
 <h3>Managing Evas Event Handlers</h3>
 
 <p>Register and remove callback functions with the <code>evas_event_callback_add()</code> and <code>evas_event_callback_add()</code> functions. The <code>evas_event_callback_add()</code> function takes as parameters the Evas canvas on which the event happens (to obtain the canvas, use the <code>Evas_Object</code> through the <code>evas_object_evas_get()</code> function), the event type, the <code>Evas_Event_Cb</code> callback function, and the pointer to the additional data delivered to the callback. The additional data is optional; use <code>NULL</code> if you do not need it.</p>
@@ -305,25 +305,25 @@ program
 <pre class="prettyprint">
 void
 evas_event_callback_add(Evas *e, Evas_Callback_Type type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Event_Cb func, const void *data);
+                        Evas_Event_Cb func, const void *data);
 
 void
 (* Evas_Event_Cb)(void *data, Evas *e, void *event_info);
 </pre>
- 
+
 <h3>Evas Event Types</h3>
 
 <p>The following table lists the available Evas event types.</p>
 
-   <p align="center" class="Table"><strong>Table: Evas event types</strong></p> 
+   <p align="center" class="Table"><strong>Table: Evas event types</strong></p>
 <table border="1">
-   <colgroup> 
+   <colgroup>
       <col /><col />
-   </colgroup> 
+   </colgroup>
    <tbody>
       <tr>
-         <th>Event type</th> 
-         <th>Description</th> 
+         <th>Event type</th>
+         <th>Description</th>
       </tr>
       <tr>
         <td><code>EVAS_CALLBACK_RENDER_FLUSH_PRE</code></td>
@@ -359,7 +359,7 @@ void
          <td><code>EVAS_CALLBACK_RENDER_POST</code></td>
          <td>Rendering on the canvas finishes.</td>
       </tr>
-  </tbody> 
+  </tbody>
 </table>
 
 
@@ -367,7 +367,7 @@ void
 
 <p>Each Evas object on a specific Evas canvas can be manipulated independently. Each object can send events, which you can handle by registering callback functions for them. The events all relate to single objects, not the whole canvas.</p>
 <h3>Managing Evas Object Event Handlers</h3>
- 
+
 <p>Register and remove callback functions with the <code>evas_object_event_callback_add()</code> and <code>evas_object_event_callback_del()</code> functions. The <code>evas_object_event_callback_add()</code> function takes as parameters the <code>Evas_Object_Event_Cb</code> callback function and the pointer to the additional data delivered to the callback.</p>
 
 <p>The callback function takes as parameters the additional data defined in the <code>evas_event_callback_add()</code> function parameters, the canvas where the event happened, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
@@ -375,7 +375,7 @@ void
 <pre class="prettyprint">
 void
 evas_object_event_callback_add(Evas_Object *obj, Evas_Callback_Type type,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object_Event_Cb func, const void *data);
+                               Evas_Object_Event_Cb func, const void *data);
 
 void
 (* Evas_Object_Event_Cb)(void *data, Evas *e, Evas_Object *obj, void *event_info);
@@ -384,16 +384,16 @@ void
 
 <p>The following table lists the available Evas object event types.</p>
 
-   <p align="center" class="Table"><strong>Table: Evas object event types</strong></p> 
+   <p align="center" class="Table"><strong>Table: Evas object event types</strong></p>
 <table border="1">
-   <colgroup> 
+   <colgroup>
       <col /><col />
-   </colgroup> 
+   </colgroup>
    <tbody>
       <tr>
-         <th>Event type</th> 
-         <th>Description</th> 
-         <th><code>event_info</code></th> 
+         <th>Event type</th>
+         <th>Description</th>
+         <th><code>event_info</code></th>
       </tr>
       <tr>
          <td><code>EVAS_CALLBACK_MOUSE_IN</code></td>
@@ -510,21 +510,21 @@ void
          <td>Image data is unloaded.</td>
          <td><code>NULL</code></td>
       </tr>
-   </tbody> 
+   </tbody>
 </table>
 
 <h2 id="evas_smart_object" name="evas_smart_object">Evas Smart Object Events</h2>
 
-<p>Evas smart object events are the most widely-used type of events in graphical applications, since they are used for signals, such as <code>&quot;clicked&quot;</code>, <code>&quot;clicked,double&quot;</code> (double-click), and <code>&quot;pressed&quot;</code>. They are identified by strings, and each smart object is able to define its own events (although the names follow conventions).</p>
+<p>Evas smart object events are the most widely-used type of events in graphical applications, since they are used for signals, such as <code>"clicked"</code>, <code>"clicked,double"</code> (double-click), and <code>"pressed"</code>. They are identified by strings, and each smart object is able to define its own events (although the names follow conventions).</p>
 
 <h3 id="evas_object_smart_callback" name="evas_object_smart_callback">Managing Evas Smart Object Event Handlers</h3>
 
-<ol><li>To add an Evas smart object event handler, register a callback for a specific event to an object with the <code>evas_object_smart_callback_add()</code> function. 
+<ol><li>To add an Evas smart object event handler, register a callback for a specific event to an object with the <code>evas_object_smart_callback_add()</code> function.
 <p>The function takes as parameters the object to which the callback is added, the event name, the callback function, and additional data delivered to the callback. The additional data is optional; use <code>NULL</code> if you do not need it.</p></li>
 
 <li>Define the <code>Evas_Smart_Cb()</code> callback function.
 <p>The function takes as parameters the additional data defined in the <code>evas_object_smart_callback_add()</code> function parameters, the object to which the event happened, and the event info data, which depends on the object type and the event at play.</p>
-<p>If some of the parameters are not used by the callback function, the compiler can raise the &quot;unused parameter&quot; warning. To avoid it, annotate the parameter with the <code>__UNUSED__</code> macro, which is a compiler-independent way to let the compiler know that the parameter is unused willingly, rather than by a mistake:</p>
+<p>If some of the parameters are not used by the callback function, the compiler can raise the "unused parameter" warning. To avoid it, annotate the parameter with the <code>__UNUSED__</code> macro, which is a compiler-independent way to let the compiler know that the parameter is unused willingly, rather than by a mistake:</p>
 <pre class="prettyprint">
 void cb(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__);
 </pre>
@@ -541,21 +541,21 @@ void cb(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__);
 static void
 _button_clicked(void *data __UNUSED__, Evas_Object *obj, void *event_info __UNUSED__)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;fprintf(stdout, &quot;Button clicked.\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;fflush(stdout);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_del(obj, &quot;clicked&quot;, _button_clicked);
+    fprintf(stdout, "Button clicked.\n");
+    fflush(stdout);
+    evas_object_smart_callback_del(obj, "clicked", _button_clicked);
 }
 
 static void
 _add_button(Evas_Object *window)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *button;
+    Evas_Object *button;
 
-&nbsp;&nbsp;&nbsp;&nbsp;button = elm_button_add(window);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(button, &quot;Click Me!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+    button = elm_button_add(window);
+    elm_object_text_set(button, "Click Me!");
+    evas_object_smart_callback_add(button, "clicked", _button_clicked, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(button);
+    evas_object_show(button);
 }
 </pre>
 
@@ -563,7 +563,7 @@ _add_button(Evas_Object *window)
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/font_setting_n.htm b/org.tizen.guides/html/native/ui/efl/font_setting_n.htm
index 04a018c..7de0790 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/font_setting_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/font_setting_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Fonts</title> 
- </head> 
+  <title>Fonts</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,7 +31,7 @@
                                <li><a href="#supported">Supported Font Styles</a></li>
                                <li><a href="#component">Setting the Font for a UI Component</a></li>
                                <li><a href="#edc">Setting the Font Using EDC</a></li>
-                               <li><a href="#edje">Using the Edje Text Class</a></li>                  
+                               <li><a href="#edje">Using the Edje Text Class</a></li>
                        </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -41,22 +41,22 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Fonts</h1> 
-       
+  <h1>Fonts</h1>
+
 
 <p>Tizen provides various methods for setting the fonts of the application text. Basically, all UI components have a default font, which can be changed according to the system settings.</p>
 
 <p>The font handling methods include:</p>
 
-<ul> 
-   <li><a href="#component">Setting the font for a UI component</a> using the Elementary Fonts API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications)</li> 
+<ul>
+   <li><a href="#component">Setting the font for a UI component</a> using the Elementary Fonts API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications)</li>
    <li><a href="#edc">Setting the font using the EDC file</a></li>
-   <li><a href="#edje">Changing the font and text size</a> using the Edje Class: Text API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) 
-   
+   <li><a href="#edje">Changing the font and text size</a> using the Edje Class: Text API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications)
+
 <p>In the application, you can create text classes to apply the same font and font size to various text (textblock) parts.</p>
 
 <p>The following words in the <code>text_class</code> definition are reserved for the system. If you use these text classes in a text or text block, a system font is applied to their texts. When the system font changes, the new font and size are applied to the texts too (except for the <code>tizen</code> text class, which only applies the new font, not the size).</p>
@@ -81,9 +81,9 @@
 
 <h2 id="apply" name="apply">Using the System Font</h2>
 
-<p>Tizen provides a special &quot;Tizen&quot; font name, which does not match with any specific font; it is just an alias for a system-defined font (system font). If you create a text object (with EDC or in the C code) with the &quot;Tizen&quot; font name, the system font is loaded into the user application when the object is created.</p>
+<p>Tizen provides a special "Tizen" font name, which does not match with any specific font; it is just an alias for a system-defined font (system font). If you create a text object (with EDC or in the C code) with the "Tizen" font name, the system font is loaded into the user application when the object is created.</p>
 
-<p>You can use the &quot;Tizen&quot; font name when you <a href="#edc">create a text or textblock part</a> in the application&#39;s EDC file, when you <a href="#edje">use the text class</a>, or when you  <a href="#component">set the UI component text font</a> in the C code.</p>
+<p>You can use the "Tizen" font name when you <a href="#edc">create a text or textblock part</a> in the application's EDC file, when you <a href="#edje">use the text class</a>, or when you  <a href="#component">set the UI component text font</a> in the C code.</p>
 
 <p>For example:</p>
 <ul>
@@ -93,12 +93,12 @@
 <pre class="prettyprint">
 description
 {
-&nbsp;&nbsp;&nbsp;text
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;<span class="highlight">Tizen</span>:style=Regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">text_class: &quot;label&quot;;</span>
-&nbsp;&nbsp;&nbsp;}
+   text
+   {
+      font: "<span class="highlight">Tizen</span>:style=Regular";
+      font_size: 36;
+      <span class="highlight">text_class: "label";</span>
+   }
 }</pre></li>
 
 <li>Use the system font when creating a text part with the <code>tizen</code> text class.
@@ -107,12 +107,12 @@ description
 <pre class="prettyprint">
 description
 {
-&nbsp;&nbsp;&nbsp;text
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;<span class="highlight">Tizen</span>:style=Regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 36;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">text_class: &quot;tizen&quot;;</span>
-&nbsp;&nbsp;&nbsp;}
+   text
+   {
+      font: "<span class="highlight">Tizen</span>:style=Regular";
+      font_size: 36;
+      <span class="highlight">text_class: "tizen";</span>
+   }
 }</pre>
 </li>
 
@@ -121,16 +121,16 @@ description
 <pre class="prettyprint">
 description
 {
-&nbsp;&nbsp;&nbsp;text
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;<span class="highlight">Tizen</span>:style=Regular&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font_size: 50;
-&nbsp;&nbsp;&nbsp;}
+   text
+   {
+      font: "<span class="highlight">Tizen</span>:style=Regular";
+      font_size: 50;
+   }
 }
 </pre>
 <pre class="prettyprint">
-char *buf = &quot;&lt;font=<span class="highlight">Tizen</span>:style=Regular font_size=50&gt;Hello&lt;/font/&gt;Font&quot;;
-elm_object_part_text_set(layout, &quot;textblock1&quot;, buf);
+char *buf = "&lt;font=<span class="highlight">Tizen</span>:style=Regular font_size=50&gt;Hello&lt;/font/&gt;Font";
+elm_object_part_text_set(layout, "textblock1", buf);
 </pre></li>
 </ul>
 
@@ -219,12 +219,12 @@ elm_object_part_text_set(layout, &quot;textblock1&quot;, buf);
 </tr>
 </tbody>
 </table>
-       
+
 <p>The style attributes are not case-sensitive (however, the font feature names are).</p>
 <p>If you set the weight or width attribute to <code>style=</code>, it is processed to the right attribute.</p>
 <pre class="prettyprint">
 font=TizenSans:style=Bold /* Textblock */
-&quot;TizenSans:style=Bold&quot;; /* Text font */
+"TizenSans:style=Bold"; /* Text font */
 &lt;font=TizenSans:style=Bold&gt; /* Markup tag */
 </pre>
 
@@ -249,8 +249,8 @@ font=TizenSans font_style=Regular font_weight=Bold /* Textblock */
 </div>
 
 <pre class="prettyprint">
-char *buf = &quot;&lt;font=Sans:style=Regular font_size=50&gt;Hello&lt;/font/&gt;Font&quot;;
-elm_object_part_text_set(layout, &quot;textblock1&quot;, buf);
+char *buf = "&lt;font=Sans:style=Regular font_size=50&gt;Hello&lt;/font/&gt;Font";
+elm_object_part_text_set(layout, "textblock1", buf);
 </pre>
 </li>
 <li>Set the font for an entry component (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Entry.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Entry.html">wearable</a> applications) using the <code>elm_entry_text_style_user_push()</code> function. It overrides the default style of the entry component for each attribute.
@@ -262,11 +262,11 @@ elm_object_part_text_set(layout, &quot;textblock1&quot;, buf);
 
 <pre class="prettyprint">
 /* Main text font */
-char *user_style = &quot;DEFAULT=&#39;font=Sans:style=Regular font_size=40&#39;&quot;;
+char *user_style = "DEFAULT='font=Sans:style=Regular font_size=40'";
 elm_entry_text_style_user_push(entry, user_style);
 /* Guide text font */
-elm_object_part_text_set(entry, &quot;elm.guide&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;font=Sans:style=Regular font_size=40&gt;Guide Text&lt;/font&gt;&quot;);
+elm_object_part_text_set(entry, "elm.guide",
+                         "&lt;font=Sans:style=Regular font_size=40&gt;Guide Text&lt;/font&gt;");
 </pre>
 </li>
 </ul>
@@ -279,44 +279,44 @@ elm_object_part_text_set(entry, &quot;elm.guide&quot;,
 <pre class="prettyprint">
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">font: &quot;Sans:style=Bold&quot;;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   name: "text";
+   type: TEXT;
+   scale: 1;
+   description
+   {
+      state: "default" 0.0;
+      rel1.relative: 0.0 0.5;
+      rel2.relative: 0.5 1.0;
+      color: 0 136 170 255;
+      color2: 0 136 170 50;
+      color3: 0 136 170 25;
+      text
+      {
+         size: 25;
+         <span class="highlight">font: "Sans:style=Bold";</span>
+         text: "Enventor";
+         align: 0.5 0.5;
+      }
+   }
 }
 
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">text.font: &quot;Sans:style=Bold&quot;;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
-&nbsp;&nbsp;&nbsp;}
+   name: "textblock";
+   type: TEXTBLOCK;
+   scale: 1;
+   description
+   {
+      state: "default" 0.0;
+      align: 0.5 0.5;
+      fixed: 0 0;
+      min: 0 0;
+      visible: 1;
+      text.text: "TEXTBLOCK";
+      <span class="highlight">text.font: "Sans:style=Bold";</span>
+      rel1.relative: 0.16 0.18;
+      rel2.relative: 0.88 0.38;
+   }
 }
 </pre>
 </li>
@@ -325,30 +325,30 @@ part
 <pre class="prettyprint">
 styles
 {
-&nbsp;&nbsp;&nbsp;style
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">name: &quot;textblock_style1&quot;;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">base: &quot;font=Sans:style=Regular font_size=30&quot;;</span>
-&nbsp;&nbsp;&nbsp;}
+   style
+   {
+      <span class="highlight">name: "textblock_style1";</span>
+      <span class="highlight">base: "font=Sans:style=Regular font_size=30";</span>
+   }
 }
 
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">text.style: &quot;textblock_style1&quot;;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
-&nbsp;&nbsp;&nbsp;}
+   name: "textblock";
+   type: TEXTBLOCK;
+   scale: 1;
+   description
+   {
+      state: "default" 0.0;
+      align: 0.5 0.5;
+      fixed: 0 0;
+      min: 0 0;
+      visible: 1;
+      text.text: "TEXTBLOCK";
+      <span class="highlight">text.style: "textblock_style1";</span>
+      rel1.relative: 0.16 0.18;
+      rel2.relative: 0.88 0.38;
+   }
 }
 </pre>
 </li>
@@ -371,26 +371,26 @@ part
 <pre class="prettyprint">
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.5 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 136 170 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color2: 0 136 170 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color3: 0 136 170 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 25;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;Sans:style=Bold&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Enventor&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">text_class: &quot;my_class&quot;;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   name: "text";
+   type: TEXT;
+   scale: 1;
+   description
+   {
+      state: "default" 0.0;
+      rel1.relative: 0.0 0.5;
+      rel2.relative: 0.5 1.0;
+      color: 0 136 170 255;
+      color2: 0 136 170 50;
+      color3: 0 136 170 25;
+      text
+      {
+         size: 25;
+         font: "Sans:style=Bold";
+         text: "Enventor";
+         align: 0.5 0.5;
+         <span class="highlight">text_class: "my_class";</span>
+      }
+   }
 }
 </pre>
 </li>
@@ -398,30 +398,30 @@ part
 <pre class="prettyprint">
 styles
 {
-&nbsp;&nbsp;&nbsp;style
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base: &quot;font=Sans:style=Regular font_size=30 ... <span class="highlight">text_class=my_class</span>&quot;;
-&nbsp;&nbsp;&nbsp;}
+   style
+   {
+      name: "textblock_style1";
+      base: "font=Sans:style=Regular font_size=30 ... <span class="highlight">text_class=my_class</span>";
+   }
 }
 
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;textblock&quot;;
-&nbsp;&nbsp;&nbsp;type: TEXTBLOCK;
-&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.text: &quot;TEXTBLOCK&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text.style: &quot;textblock_style1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.16 0.18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.88 0.38;
-&nbsp;&nbsp;&nbsp;}
+   name: "textblock";
+   type: TEXTBLOCK;
+   scale: 1;
+   description
+   {
+      state: "default" 0.0;
+      align: 0.5 0.5;
+      fixed: 0 0;
+      min: 0 0;
+      visible: 1;
+      text.text: "TEXTBLOCK";
+      text.style: "textblock_style1";
+      rel1.relative: 0.16 0.18;
+      rel2.relative: 0.88 0.38;
+   }
 }
 </pre>
 </li>
@@ -429,14 +429,14 @@ part
 <p>Set the font, style, and size of a text class that you have created in the EDC file:</p>
 
 <pre class="prettyprint">
-elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, 30);
+elm_config_font_overlay_set("my_class", "TizenSans:style=Bold", 30);
 elm_config_font_overlay_apply();
 </pre>
 </li>
 <li>
 <p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code sets the font size as 150% of the given font size.</p>
 <pre class="prettyprint">
-elm_config_font_overlay_set(&quot;my_class&quot;, &quot;TizenSans:style=Bold&quot;, -150);
+elm_config_font_overlay_set("my_class", "TizenSans:style=Bold", -150);
 elm_config_font_overlay_apply();
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/ui/efl/getting_started_n.htm b/org.tizen.guides/html/native/ui/efl/getting_started_n.htm
index 2447897..2b3d58d 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/getting_started_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/getting_started_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Getting Started with EFL UI Programming</title>  
+       <title>Getting Started with EFL UI Programming</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -39,7 +39,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -61,17 +61,17 @@
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Here comes your application code */
+    /* Here comes your application code */
 }
 
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;ad);
+    event_callback.create = app_create;
+    ret = ui_app_main(argc, argv, &amp;event_callback,
+                      &amp;ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -85,12 +85,12 @@ main(int argc, char *argv[])
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_init(argc, argv);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Here comes your application code */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_run();
-&nbsp;&nbsp;&nbsp;&nbsp;elm_shutdown();
+    elm_init(argc, argv);
+    /* Here comes your application code */
+    elm_run();
+    elm_shutdown();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -110,7 +110,7 @@ main(int argc, char *argv[])
 
 <p align="center"><strong>Figure: Empty window</strong></p>
 <p align="center"><img alt="Empty window" src="../../../images/window.png" /></p>
- 
+
 <p>Windows are provided by the Elementary library. Since Elementary is a high-level wrapper on the top-most layer in the EFL hierarchy, you can start EFL UI programming with the Elementary library and expand the scope to lower-level libraries, as needed.</p>
 
 <p>The following code snippet shows how to add a window:</p>
@@ -131,11 +131,11 @@ evas_object_show(win);
 
 <p align="center"><strong>Figure: Window filled with content</strong></p>
 <p align="center"><img alt="Window filled with content" src="../../../images/filled_window.png" /></p>
- 
+
 <p>A conformant is a UI container, which adjusts its size when a virtual keypad becomes visible. The following code snippet shows how to fill a window with a conformant container:</p>
 
 <pre class="prettyprint">
-win = elm_win_util_standard_add(&quot;test&quot;, &quot;Test&quot;);
+win = elm_win_util_standard_add("test", "Test");
 conform = elm_conformant_add(win);
 elm_win_resize_object_add(win, conform);
 </pre>
@@ -162,12 +162,12 @@ elm_object_content_set(conform, nf);
 <li>Elementary UI components define their own behavior internally, which includes visual effects or the response to user input. For example, lists are scrolled up and down according to touch events. Some of them provide animation options by API. For instance, labels have a slide function. Besides these, each UI component defines its own callback signal, so you can define the action triggered by the event. The following code snippet shows how to register a callback for the <code>clicked</code> signal of a button:
 
 <pre class="prettyprint">
-evas_object_smart_callback_add(button, &quot;clicked&quot;, _button_clicked, NULL);
+evas_object_smart_callback_add(button, "clicked", _button_clicked, NULL);
 
 static void
 _button_clicked(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_del(obj, &quot;clicked&quot;, _button_clicked);
+    evas_object_smart_callback_del(obj, "clicked", _button_clicked);
 }
 </pre>
 
@@ -184,7 +184,7 @@ evas_object_event_callback_add(rect, EVAS_CALLBACK_MOUSE_DOWN, _mouse_down_cb, N
 </li>
 <li>Ecore is in charge of running the application main loop and related tasks, such as event handling, timer, and animator. For more information, see <a href="core_loop_n.htm">Core loop and OS Interfacing</a>, <a href="event_types_n.htm#ecore">Ecore Events</a>, and <a href="hw_input_n.htm">Hardware Input Handling</a>.</li>
 </ul>
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/graphical_objects_n.htm b/org.tizen.guides/html/native/ui/efl/graphical_objects_n.htm
index 84d3188..35f0ae2 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/graphical_objects_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/graphical_objects_n.htm
@@ -38,7 +38,7 @@
 <div id="container"><div id="contents"><div class="content">
 
  <h1>Graphical Objects</h1>
-  
+
 <p>Evas is a clean display canvas API for several target display systems that can draw, for example, anti-aliased text, smooth super- and sub-sampled scaled images, and alpha-blend objects. Evas optimizes the rendering pipeline to minimize the effort of redrawing changes made to the canvas, and so takes this work out of your hand, saving a lot of time and energy.</p>
 <p>Evas abstracts any need to know much about what the characteristics of your display system are, what graphics calls are used to draw them, and how. It deals on an object level where all you do is create and manipulate objects in a canvas and set their properties.</p>
 
@@ -49,9 +49,9 @@
 <li><a href="evas_objects_n.htm">Evas objects</a>
 <p>The Evas object is the most basic visual entity.</p>
 
-<p align="center"><strong>Figure: Evas objects</strong></p> 
-<p align="center"><img alt="Evas objects" src="../../../images/evas_object.png" /></p> 
- 
+<p align="center"><strong>Figure: Evas objects</strong></p>
+<p align="center"><img alt="Evas objects" src="../../../images/evas_object.png" /></p>
+
 <p>Evas objects consists of primitive and smart objects:</p>
 <ul><li>Primitive objects implement basic objects, such as lines, rectangles, polygons, images, texts, and textblocks. They are used to build a complex user interface.</li>
 <li>Smart objects implement container objects (such as box, table, and grid) that can hold Evas and Edje objects and whole complex UI components as children. They are used to provide intelligence and extension to simple Evas objects.</li></ul>
diff --git a/org.tizen.guides/html/native/ui/efl/hw_input_n.htm b/org.tizen.guides/html/native/ui/efl/hw_input_n.htm
index 71e9da9..b87cba9 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/hw_input_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/hw_input_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Hardware Input Handling</title> 
- </head> 
+  <title>Hardware Input Handling</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -28,16 +28,16 @@
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>             
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Hardware Input Handling</h1> 
-  
-<p>EFL does not depend on any specific hardware input methods, such as hardware keys, to generate back and home events, or rotary component parts to generate rotary events. Instead, these hardware input events are tightly related to the Tizen UX. As a result, EFL has created the EFL Extension library to support these common UX behaviors between the applications and hardware events.</p>   
+  <h1>Hardware Input Handling</h1>
+
+<p>EFL does not depend on any specific hardware input methods, such as hardware keys, to generate back and home events, or rotary component parts to generate rotary events. Instead, these hardware input events are tightly related to the Tizen UX. As a result, EFL has created the EFL Extension library to support these common UX behaviors between the applications and hardware events.</p>
 
 <p>EFL provides the following hardware event management features:</p>
 <ul>
@@ -52,9 +52,9 @@
 <p>Normally, the hardware keys do only what they are designed to do, such as increase the volume or return to the previous screen. In some applications, you can assign special actions to hardware keys. For example, the volume key can be used to increase and decrease the size of the text. This is called key grabbing.</p>
 </li>
 </ul>
-  
-   
-  
+
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/introduction_n.htm b/org.tizen.guides/html/native/ui/efl/introduction_n.htm
index 8978ad2..a6b44b7 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/introduction_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/introduction_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Introduction</title>  
+       <title>Introduction</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -39,7 +39,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -47,11 +47,11 @@
 
 <p>This topic provides some background information on what EFL is and how it works. To start programming right away, see <a href="getting_started_n.htm">Getting Started with EFL UI Programming</a>.</p>
 
-<p>EFL is a collection of libraries that are independent or can build on top of each-other. They provide useful features that complement an OS&#39;s existing environment, rather than wrap and abstract it, trying to be their own environment and OS in its entirety. This means that EFL expects you to use other system libraries and APIs in conjunction with EFL libraries to provide a whole working application or library - simply using EFL as a set of convenient pre-made libraries to accomplish a whole host of complex or painful tasks for you.</p>
+<p>EFL is a collection of libraries that are independent or can build on top of each-other. They provide useful features that complement an OS's existing environment, rather than wrap and abstract it, trying to be their own environment and OS in its entirety. This means that EFL expects you to use other system libraries and APIs in conjunction with EFL libraries to provide a whole working application or library - simply using EFL as a set of convenient pre-made libraries to accomplish a whole host of complex or painful tasks for you.</p>
 
 <p>An important aspect of EFL is efficiency, both in speed and size:</p>
 <ul>
-<li>The core EFL libraries, even with Elementary, are about half the size of the equivalent &quot;small stack&quot; of GTK+ (used, for example, by GNOME), and about one quarter the size of Qt. Of course, with these kinds of numbers, you can always argue over what exactly constitutes an equivalent measurement.</li>
+<li>The core EFL libraries, even with Elementary, are about half the size of the equivalent "small stack" of GTK+ (used, for example, by GNOME), and about one quarter the size of Qt. Of course, with these kinds of numbers, you can always argue over what exactly constitutes an equivalent measurement.</li>
 <li>EFL is low on actual memory usage at runtime, with memory footprints a fraction the size of those in the GTK+ and Qt environments.</li>
 <li>EFL is fast, considering what it does. Some libraries claim to be very fast - but then, it is easy to be fast when you only handle simple and straightforward tasks. EFL is fast, while also tackling the more complex rendering problems involving, for example, alpha blending, interpolated scaling, and transforms with dithering.</li>
 </ul>
@@ -68,7 +68,7 @@
  <li><strong>Fast performance</strong>
   <p>The main reason Tizen adopted EFL as its native toolkit is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering. EFL is fast even in software rendering.</p></li>
  <li><strong>Small memory footprint</strong>
-  <p>Despite its fast performance, EFL&#39;s memory footprint is smaller than that of other toolkits with similar features. A small memory footprint is useful in the embedded world, since embedded devices do not normally have much memory.</p></li>
+  <p>Despite its fast performance, EFL's memory footprint is smaller than that of other toolkits with similar features. A small memory footprint is useful in the embedded world, since embedded devices do not normally have much memory.</p></li>
  <li><strong>Backend engine support</strong>
   <p>EFL supports several backend engines, such as X11 (OpenGL, Xlib, Xcb), Wayland (OpenGL, SHM), Direct Framebuffer, DRM, memory buffers, PS3 native, Windows&reg;, and Mac OS&reg;. Applications do not need to deal with each backend engine separately.</p></li>
  <li><strong>GUI and logic separation</strong>
@@ -91,39 +91,39 @@
 <p align="center"><img alt="EFL layers" src="../../../images/efllibs.png" /></p>
 
 <p align="center" class="Table"><strong>Table: Libraries in EFL</strong></p>
-<table border="1"> 
-   <colgroup> 
+<table border="1">
+   <colgroup>
       <col /><col />
-   </colgroup> 
+   </colgroup>
    <tbody>
       <tr>
-         <th>Name</th> 
-         <th>Description</th> 
+         <th>Name</th>
+         <th>Description</th>
       </tr>
       <tr>
-         <td>Elementary</td>  
+         <td>Elementary</td>
          <td>Elementary (<a href="ui_components_n.htm">UI Components</a>) is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life-cycle of a view, and add UI components. The full list of UI components that can be used in Tizen can be found in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</td>
       </tr>
       <tr>
-         <td>Edje</td>  
+         <td>Edje</td>
          <td>Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application, or even extend the default theme. For more information about Edje and the EDC format, see <a href="learn_edc_intro_n.htm">Layouting with EDC</a> and <a href="component_custom_n.htm">Customizing UI Components</a>.</td>
       </tr>
       <tr>
-         <td>Ecore</td>  
+         <td>Ecore</td>
          <td>Ecore (<a href="core_loop_n.htm">Core loop and OS Interfacing</a>) is the library that manages the main loop of your application. The main loop is one of the most important concepts you need to know about to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism. The main loop mechanisms are explained in <a href="main_loop_n.htm">Handling the Main Loop</a>.</td>
       </tr>
       <tr>
-         <td>Evas</td>  
-         <td>Evas (<a href="graphical_objects_n.htm">Primitive Graphical Objects</a>) is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. 
-                <p>Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>.</p> 
+         <td>Evas</td>
+         <td>Evas (<a href="graphical_objects_n.htm">Primitive Graphical Objects</a>) is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects.
+                <p>Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_rendering_n.htm">Evas Rendering Concept and Method</a>.</p>
                 <p>Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows you to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, and calculate minimum drawing calls needed to get the job done.</p></td>
       </tr>
       <tr>
-         <td>Eina</td>  
+         <td>Eina</td>
          <td>Eina is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings, open shared libraries, and manage errors and memory pools. Eina concepts are explained in <a href="data_types_tools_n.htm">Data Types and Tools</a>.</td>
       </tr>
-   </tbody> 
-</table> 
+   </tbody>
+</table>
 
 <p>In addition to the most important libraries explained above, the EFL includes other libraries, such as Eet, Embryo, and Emotion. Support for those libraries is planned in the future Tizen releases.</p>
 
@@ -139,29 +139,29 @@
 
 <p>For those familiar with traditional game programming, this is familiar, except that you have also implemented the main loop with an infinite while or for loop that fetches input events, updates the game world, renders the updated scene, and then loops and repeats as quickly as it can.</p>
 
-<p>In case of EFL, the main loop is not &quot;dumb&quot; and does not consume CPU resources unless there is work to do. It sleeps and consumes no CPU time until an event happens (except in rare circumstances, for example, when you use Idlers that are called in a loop during what normally would be idle time waiting for something to happen). From EFL&#39;s point of view, all of this is handled in Ecore, and it supports many constructs for manipulating the main loop in a logical and flexible way. EFL handles animation through animators, where the main loop handles timing out and scheduling these at regularly spaced intervals in time (on a best-effort basis), as with timers, pollers, idle enterers, idle exiters, idlers, jobs, fd handlers (file descriptor handlers) and event handlers.</p>
+<p>In case of EFL, the main loop is not "dumb" and does not consume CPU resources unless there is work to do. It sleeps and consumes no CPU time until an event happens (except in rare circumstances, for example, when you use Idlers that are called in a loop during what normally would be idle time waiting for something to happen). From EFL's point of view, all of this is handled in Ecore, and it supports many constructs for manipulating the main loop in a logical and flexible way. EFL handles animation through animators, where the main loop handles timing out and scheduling these at regularly spaced intervals in time (on a best-effort basis), as with timers, pollers, idle enterers, idle exiters, idlers, jobs, fd handlers (file descriptor handlers) and event handlers.</p>
+
+<p>In the EFL view, the application, when executing any callbacks other than idlers, is "active". It goes in and out of this active state by calling the idle enterer and exiter callbacks (edge-triggered callbacks), which are triggered whenever going in and out of the idle state. Idlers themselves do not transition the main loop as such from being in an idle state, so any Idler that needs to "wake up" the loop conceptually to become active needs to queue something that ordinarily wakes up the main loop, such as a job or timer. This is the only exception due to the conceptual model and the need for efficiency (not entering and exiting idle per idler call).</p>
 
-<p>In the EFL view, the application, when executing any callbacks other than idlers, is &quot;active&quot;. It goes in and out of this active state by calling the idle enterer and exiter callbacks (edge-triggered callbacks), which are triggered whenever going in and out of the idle state. Idlers themselves do not transition the main loop as such from being in an idle state, so any Idler that needs to &quot;wake up&quot; the loop conceptually to become active needs to queue something that ordinarily wakes up the main loop, such as a job or timer. This is the only exception due to the conceptual model and the need for efficiency (not entering and exiting idle per idler call).</p>
+<p>Besides the above exception, the loop model basically starts by calling the idle enterers, and then sleeps until something happens. What happens depends on the system, but wake-up events can be time-based (timers and animators) and these are scheduled by Ecore on a "best effort" basis. That means they use the system sleep mechanism (such as <code>select()</code> function with a timeout or <code>epoll()</code> function) to send the CPU to sleep and wait until an event on an input (a file descriptor) wakes up, or until the timeout happens.</p>
 
-<p>Besides the above exception, the loop model basically starts by calling the idle enterers, and then sleeps until something happens. What happens depends on the system, but wake-up events can be time-based (timers and animators) and these are scheduled by Ecore on a &quot;best effort&quot; basis. That means they use the system sleep mechanism (such as <code>select()</code> function with a timeout or <code>epoll()</code> function) to send the CPU to sleep and wait until an event on an input (a file descriptor) wakes up, or until the timeout happens.</p>
+<p>The system can impose granularity limits on a sleep, so beware that this is not a guaranteed action, but in general good enough. Once Ecore wakes up, it finds out why it woke up and handles the situation appropriately. It calls timers or animators that expired, or calls fd handlers to read data (or write data) on "ready" fds and queue events as a result of this. Ecore also does some things that other main loops do not, such as serializing UNIX system handlers into the main loop event queue, so that things like SIGCHLD from child processes is handled for you with an event for the child exit placed in your event queue.</p>
 
-<p>The system can impose granularity limits on a sleep, so beware that this is not a guaranteed action, but in general good enough. Once Ecore wakes up, it finds out why it woke up and handles the situation appropriately. It calls timers or animators that expired, or calls fd handlers to read data (or write data) on &quot;ready&quot; fds and queue events as a result of this. Ecore also does some things that other main loops do not, such as serializing UNIX system handlers into the main loop event queue, so that things like SIGCHLD from child processes is handled for you with an event for the child exit placed in your event queue.</p>
- 
 <h2 id="rendering">Rendering and Canvas</h2>
 
-<p>Evas and Edje live within the main loop model described above. Evas is the canvas engine that handles the entire &quot;state&quot; of a &quot;window&quot; (canvas) by filling that canvas with objects and manipulating their state. You can, for example, show, hide, move, and resize the objects, set the file sources for images, colors for rectangles, and fonts and text content for text.</p>
+<p>Evas and Edje live within the main loop model described above. Evas is the canvas engine that handles the entire "state" of a "window" (canvas) by filling that canvas with objects and manipulating their state. You can, for example, show, hide, move, and resize the objects, set the file sources for images, colors for rectangles, and fonts and text content for text.</p>
 
 <p>When Evas renders, it evaluates the state of all objects and whether they have changed since the last rendering, and works out what to render and how to reflect the updated state of the canvas in the output. Evas attempts to minimize this update work, since it knows the prior and current state of every object, as well as knowing the entire canvas content:</p>
 
 <ul>
-<li>Evas can discard work well in advance as it knows that &quot;later I cover up this rendering anyway&quot;, and thus Evas can skip it.</li>
-<li>Evas defers as much work until the render time as it can, as at this point it considers the canvas state as &quot;stable&quot; and needing an update. This means that Evas can load fonts and images from the disk at the time it renders, to avoid repeated &quot;create object, set image file, delete the object, create new one&quot; cycles that can happen often during setup or major state changes. By deferring work as late as possible, Evas can avoid lots of &quot;busy work&quot; in doing useless tasks.</li>
+<li>Evas can discard work well in advance as it knows that "later I cover up this rendering anyway", and thus Evas can skip it.</li>
+<li>Evas defers as much work until the render time as it can, as at this point it considers the canvas state as "stable" and needing an update. This means that Evas can load fonts and images from the disk at the time it renders, to avoid repeated "create object, set image file, delete the object, create new one" cycles that can happen often during setup or major state changes. By deferring work as late as possible, Evas can avoid lots of "busy work" in doing useless tasks.</li>
 </ul>
-<p>The work minimization allows the application using Evas to worry less about such optimizing and more about its logic flow, as the above &quot;skip the work&quot; optimizations are often done for you.</p>
+<p>The work minimization allows the application using Evas to worry less about such optimizing and more about its logic flow, as the above "skip the work" optimizations are often done for you.</p>
 
-<p>A major change caused by having such a canvas and state model for the GUI is that you no longer actually render anything yourself. You must change the mindset from a &quot;I draw&quot; to &quot;I create and manipulate&quot; model. This is very different from almost all lower and even mid-level APIs that developers are used to - everything from Xlib, Cairo, and GDI to OpenGL and more. They all work on the &quot;draw and forget&quot; model, while Evas is a retained-mode scene graph that you manipulate.</p>
+<p>A major change caused by having such a canvas and state model for the GUI is that you no longer actually render anything yourself. You must change the mindset from a "I draw" to "I create and manipulate" model. This is very different from almost all lower and even mid-level APIs that developers are used to - everything from Xlib, Cairo, and GDI to OpenGL and more. They all work on the "draw and forget" model, while Evas is a retained-mode scene graph that you manipulate.</p>
 
-<p>Evas makes the cost of most operations (such as <code>evas_object_move()</code>, <code>evas_object_resize()</code>, and <code>evas_object_show()</code>) be &quot;zero cost&quot; (or as close to zero as possible). All most of these calls do is to update coordinates within an object and set a changed flag. That is it. They do not draw anything. For example, even setting the file on an image object through the <code>evas_object_image_file_set()</code> function only loads the image header, so the object can have the original image dimensions and alpha channel flag set. It does not decode the image data, avoiding a lot of file IO and decode overhead, and pushes this off until later (render time, if the image is visible and the data needed). If you are sure that you need the data though, Evas has the ability to begin an asynchronous preload of the image data in a background thread and inform you when it is ready.</p>
+<p>Evas makes the cost of most operations (such as <code>evas_object_move()</code>, <code>evas_object_resize()</code>, and <code>evas_object_show()</code>) be "zero cost" (or as close to zero as possible). All most of these calls do is to update coordinates within an object and set a changed flag. That is it. They do not draw anything. For example, even setting the file on an image object through the <code>evas_object_image_file_set()</code> function only loads the image header, so the object can have the original image dimensions and alpha channel flag set. It does not decode the image data, avoiding a lot of file IO and decode overhead, and pushes this off until later (render time, if the image is visible and the data needed). If you are sure that you need the data though, Evas has the ability to begin an asynchronous preload of the image data in a background thread and inform you when it is ready.</p>
 
 <p>If you mold your programming paradigm around this scene graph and state engine, you find yourself spending less time fighting EFL, and in fact end up with very lean, compact, and concise code that is almost entirely program and UI logic, which is what your application should be anyway, with all the nasty footwork being done for you. If you want to work with a more traditional model, where you have to take care of rendering yourself and you literally drive the timeline by hand, you find yourself fighting EFL and spending a lot of code and time working against optimizations and streamlining. Work with the model and your applications begin to be clean and seamless expressions of high-level logic, with the low-level handled for you by EFL in a clean and efficient way.</p>
 
diff --git a/org.tizen.guides/html/native/ui/efl/key_events_mn.htm b/org.tizen.guides/html/native/ui/efl/key_events_mn.htm
index 9afcb46..46d16f3 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/key_events_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/key_events_mn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Managing Menu and Back Key Events</title> 
- </head> 
+  <title>Managing Menu and Back Key Events</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -26,10 +26,10 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>         
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Managing Menu and Back Key Events</h1>
@@ -40,15 +40,15 @@
 
 <p>Normally, the key events are only delivered to the object in focus. However, with the EFL Extension functions, you can let visible objects without focus get events from the <strong>Menu</strong> and <strong>Back</strong> keys.</p>
 
- <p align="center"><strong>Figure: Menu and Back keys</strong></p> 
-<p align="center"><img alt="Menu and Back keys" src="../../../images/efl_phone.png" /></p> 
+ <p align="center"><strong>Figure: Menu and Back keys</strong></p>
+<p align="center"><img alt="Menu and Back keys" src="../../../images/efl_phone.png" /></p>
 
 <p>The EFL Extension library maintains its own object stack to determine which object receives the event. Only visible objects are added to the stack.</p>
 
 <p>The stack is based on Evas layers, which means that if 2 objects are registered for the same EFL Extension event, the object on the higher Evas layer gets the event. The following figure shows an example of objects on different layers. Objects 1, 2, and 3 are registered with EFL Extension callbacks for the same event, such as a <strong>Back</strong> key event. When the event occurs, object 3, which is on the highest layer (layer 3), gets the event callback.</p>
 
-<p align="center"><strong>Figure: Objects on different layers</strong></p> 
-<p align="center"><img alt="Objects on different layers" src="../../../images/efl_layers.png" /></p> 
+<p align="center"><strong>Figure: Objects on different layers</strong></p>
+<p align="center"><img alt="Objects on different layers" src="../../../images/efl_layers.png" /></p>
 
 <p>If the objects with callbacks for the same event are on the same layer, the object which is registered the callback first gets the event.</p>
 
@@ -85,36 +85,36 @@
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the window */
-&nbsp;&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, _win_del, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the naviframe */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *nf = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;nf = elm_naviframe_add(win);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(win, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, nf);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(nf);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a label */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;label = elm_label_add(nf);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(label, &quot;Press menu key to show popup,&lt;br/&gt;back key to exit.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(nf, &quot;Efl Extension usage&quot;, NULL, NULL, label, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(win);
+    Evas_Object *win = NULL;
+
+    /* Create the window */
+    win = elm_win_util_standard_add(NULL, "extension sample");
+    evas_object_smart_callback_add(win, "delete,request", _win_del, NULL);
+
+    /* Create the naviframe */
+    Evas_Object *nf = NULL;
+    nf = elm_naviframe_add(win);
+    evas_object_size_hint_weight_set(win, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(win, nf);
+    evas_object_show(nf);
+
+    /* Create a label */
+    Evas_Object *label = NULL;
+    label = elm_label_add(nf);
+    elm_object_text_set(label, "Press menu key to show popup,&lt;br/&gt;back key to exit.");
+    elm_naviframe_item_push(nf, "Efl Extension usage", NULL, NULL, label, NULL);
+
+    /* Show the window */
+    evas_object_show(win);
 </pre>
 </li>
 
 <li>Register EFL Extension callbacks for the naviframe:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the Menu key event callback */
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_MORE, _create_popup, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the Back key event callback */
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(nf, EEXT_CALLBACK_BACK, _nf_back_cb, win);
+    /* Register the Menu key event callback */
+    eext_object_event_callback_add(nf, EEXT_CALLBACK_MORE, _create_popup, NULL);
+    /* Register the Back key event callback */
+    eext_object_event_callback_add(nf, EEXT_CALLBACK_BACK, _nf_back_cb, win);
 }
 </pre>
 </li>
@@ -124,23 +124,23 @@ create_base_gui(appdata_s *ad)
 static void
 _create_popup(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *parent = obj;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the popup */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL, *content = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;popup = elm_popup_add(parent);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Title&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_popup_orient_set(popup, ELM_POPUP_ORIENT_CENTER);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add a label to the popup */
-&nbsp;&nbsp;&nbsp;&nbsp;content = elm_label_add(parent);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(content, &quot;Press back key to remove popup.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(popup, content);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the Back key event callback */
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the popup */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(popup);
+    Evas_Object *parent = obj;
+
+    /* Create the popup */
+    Evas_Object *popup = NULL, *content = NULL;
+    popup = elm_popup_add(parent);
+    elm_object_part_text_set(popup, "title,text", "Title");
+    elm_popup_orient_set(popup, ELM_POPUP_ORIENT_CENTER);
+
+    /* Add a label to the popup */
+    content = elm_label_add(parent);
+    elm_object_text_set(content, "Press back key to remove popup.");
+    elm_object_content_set(popup, content);
+
+    /* Register the Back key event callback */
+    eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+    /* Show the popup */
+    evas_object_show(popup);
 }
 </pre>
 </li>
@@ -152,9 +152,9 @@ _create_popup(void *data, Evas_Object *obj, void *event_info)
 <pre class="prettyprint">
 static void
 eext_ctxpopup_back_cb(void *data EINA_UNUSED, Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;void *event_info EINA_UNUSED)
+                      void *event_info EINA_UNUSED)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_ctxpopup_dismiss(obj);
+    elm_ctxpopup_dismiss(obj);
 }
 </pre>
 </li>
@@ -163,16 +163,16 @@ eext_ctxpopup_back_cb(void *data EINA_UNUSED, Evas_Object *obj,
 static void
 _nf_back_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = data;
+    Evas_Object *win = data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Hide the window */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_lower(win);
+    /* Hide the window */
+    elm_win_lower(win);
 }
 </pre>
 </li></ul>
 </li>
 </ol>
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/key_grab_n.htm b/org.tizen.guides/html/native/ui/efl/key_grab_n.htm
index b32eeec..12173e6 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/key_grab_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/key_grab_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Grabbing Hardware Key Events</title> 
- </head> 
+  <title>Grabbing Hardware Key Events</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -28,22 +28,22 @@
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>             
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Grabbing Hardware Key Events</h1> 
+  <h1>Grabbing Hardware Key Events</h1>
 
 <p>The applications do not normally grab hardware key events, because each key event is delivered to the focused window by default. Some applications, however, have more advanced functionalities and behavior. For example, in most applications, a volume key press opens a volume control popup. But, in a memo application, you can use the volume key to resize the text.</p>
 
-<p>To receive special hardware key events in the application, use the <code>eext_win_keygrab_set()</code> and <code>eext_win_keygrab_unset()</code> functions.</p>   
+<p>To receive special hardware key events in the application, use the <code>eext_win_keygrab_set()</code> and <code>eext_win_keygrab_unset()</code> functions.</p>
 
 <p>To grab hardware key events:</p>
 <ol>
-<li>To use the functions and data types of the EFL Extension API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">wearable</a> applications), include the <code>&lt;efl_extension.h&gt;</code> header file in your application: 
+<li>To use the functions and data types of the EFL Extension API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">wearable</a> applications), include the <code>&lt;efl_extension.h&gt;</code> header file in your application:
 <pre class="prettyprint">
 #include &lt;efl_extension.h&gt;
 </pre>
@@ -55,21 +55,21 @@
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
+    Evas_Object *win = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the window */
-&nbsp;&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, _win_del, NULL);
+    /* Create the window */
+    win = elm_win_util_standard_add(NULL, "extension sample");
+    evas_object_smart_callback_add(win, "delete,request", _win_del, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create UI containers and components */
+    /* Create UI containers and components */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(win);
+    /* Show the window */
+    evas_object_show(win);
 }
 </pre>
 </li>
 
-<li>Register and define key event callbacks for the window using the <a href="event_types_n.htm#ecore">Ecore events</a>: 
+<li>Register and define key event callbacks for the window using the <a href="event_types_n.htm#ecore">Ecore events</a>:
 <pre class="prettyprint">
 Eina_Bool ctrl_pressed = EINA_FALSE;
 
@@ -77,17 +77,17 @@ Eina_Bool ctrl_pressed = EINA_FALSE;
 static Eina_Bool
 _key_down_cb(void *data __UNUSED__, int type __UNUSED__, void *ev)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Access the fields of the event key type (&quot;*ev&quot;) */
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Event_Key *event = ev;
+    /* Access the fields of the event key type ("*ev") */
+    Ecore_Event_Key *event = ev;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Test whether the pressed key is Ctrl */
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(&quot;Control_L&quot;, event-&gt;key)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* If it is, store that information */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl_pressed = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* Test whether the pressed key is Ctrl */
+    if (!strcmp("Control_L", event-&gt;key)) {
+        /* If it is, store that information */
+        ctrl_pressed = EINA_TRUE;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Let the event continue to other callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_PASS_ON;
+    /* Let the event continue to other callbacks */
+    return ECORE_CALLBACK_PASS_ON;
 }
 
 /* Register the callback */
@@ -95,17 +95,17 @@ ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, _key_down_cb, NULL);
 </pre>
 </li>
 
-<li>Grab key events using the <code>eext_win_keygrab_set()</code> function with the application window object and the <a href="#keystring">key string</a> as parameters. 
+<li>Grab key events using the <code>eext_win_keygrab_set()</code> function with the application window object and the <a href="#keystring">key string</a> as parameters.
 <pre class="prettyprint">
-eext_win_keygrab_set(win, &quot;XF86AudioRaiseVolume&quot;);
+eext_win_keygrab_set(win, "XF86AudioRaiseVolume");
 </pre>
 </li>
 
 <li>When the application no longer needs to grab key events, call the <code>eext_win_keygrab_unset()</code> function:
 <pre class="prettyprint">
-eext_win_keygrab_unset(win, &quot;XF86AudioRaiseVolume&quot;);
+eext_win_keygrab_unset(win, "XF86AudioRaiseVolume");
 </pre>
-</li>   
+</li>
 </ol>
 
 <p>The following table lists the hardware keys from which you can grab events in different profiles.</p>
@@ -121,553 +121,553 @@ eext_win_keygrab_unset(win, &quot;XF86AudioRaiseVolume&quot;);
                        <th>TV</th>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioRaiseVolume&quot;</code></td>
+                       <td><code>"XF86AudioRaiseVolume"</code></td>
                        <td>Key to raise the volume</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioLowerVolume&quot;</code></td>
+                       <td><code>"XF86AudioLowerVolume"</code></td>
                        <td>Key to lower the volume</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86PowerOff&quot;</code></td>
+                       <td><code>"XF86PowerOff"</code></td>
                        <td>Power key to switch the device on and off</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Menu&quot;</code></td>
+                       <td><code>"XF86Menu"</code></td>
                        <td>Application-specific menu key</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Home&quot;</code></td>
+                       <td><code>"XF86Home"</code></td>
                        <td>Key to go to the home screen</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Back&quot;</code></td>
+                       <td><code>"XF86Back"</code></td>
                        <td>Key to go back to the previous status or page</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Camera&quot;</code></td>
+                       <td><code>"XF86Camera"</code></td>
                        <td>Half shutter key to do something before taking a picture on the camera</td>
                        <td>Yes</td>
                        <td>-</td>
                        <td>-</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Camera_Full&quot;</code></td>
+                       <td><code>"XF86Camera_Full"</code></td>
                        <td>Key to take a picture on the camera</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Search&quot;</code></td>
+                       <td><code>"XF86Search"</code></td>
                        <td>Key to go to the search application</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioPlay&quot;</code></td>
+                       <td><code>"XF86AudioPlay"</code></td>
                        <td>Key to play media</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioPause&quot;</code></td>
+                       <td><code>"XF86AudioPause"</code></td>
                        <td>Key to pause the media being played</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioStop&quot;</code></td>
+                       <td><code>"XF86AudioStop"</code></td>
                        <td>Key to stop the media being played</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioNext&quot;</code></td>
+                       <td><code>"XF86AudioNext"</code></td>
                        <td>Key to go to the next media item</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioPrev&quot;</code></td>
+                       <td><code>"XF86AudioPrev"</code></td>
                        <td>Key to go to the previous media item</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioRewind&quot;</code></td>
+                       <td><code>"XF86AudioRewind"</code></td>
                        <td>Key to rewind the playing position of the media</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioForward&quot;</code></td>
+                       <td><code>"XF86AudioForward"</code></td>
                        <td>Key to forward the playing position of the media</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioMedia&quot;</code></td>
+                       <td><code>"XF86AudioMedia"</code></td>
                        <td>Key to go to the media player</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioPlayPause&quot;</code></td>
+                       <td><code>"XF86AudioPlayPause"</code></td>
                        <td>Key to toggle between play and pause</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioMute&quot;</code></td>
+                       <td><code>"XF86AudioMute"</code></td>
                        <td>Key to mute the media</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioRecord&quot;</code></td>
+                       <td><code>"XF86AudioRecord"</code></td>
                        <td>Key to start recording media</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;Cancel&quot;</code></td>
+                       <td><code>"Cancel"</code></td>
                        <td>Key to cancel the action triggered by the previous keys</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86SoftKBD&quot;</code></td>
+                       <td><code>"XF86SoftKBD"</code></td>
                        <td>Key to show and hide the soft keyboard</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86QuickPanel&quot;</code></td>
+                       <td><code>"XF86QuickPanel"</code></td>
                        <td>Key to toggle the quick panel</td>
                        <td>Yes</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86TaskPane&quot;</code></td>
+                       <td><code>"XF86TaskPane"</code></td>
                        <td>Key to toggle the task switcher</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86HomePage&quot;</code></td>
+                       <td><code>"XF86HomePage"</code></td>
                        <td>Key to go to the homepage of the user-defined Web browser</td>
                        <td>Yes</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86WWW&quot;</code></td>
+                       <td><code>"XF86WWW"</code></td>
                        <td>Key to launch the user-defined Web browser</td>
                        <td>Yes</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Mail&quot;</code></td>
+                       <td><code>"XF86Mail"</code></td>
                        <td>Key to go to the user-defined email application</td>
                        <td>Yes</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86ScreenSaver&quot;</code></td>
+                       <td><code>"XF86ScreenSaver"</code></td>
                        <td>Key to activate the screen lock (such as a pattern lock or a PIN lock)</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86MonBrightnessDown&quot;</code></td>
+                       <td><code>"XF86MonBrightnessDown"</code></td>
                        <td>Key to lower the screen brightness</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86MonBrightnessUp&quot;</code></td>
+                       <td><code>"XF86MonBrightnessUp"</code></td>
                        <td>Key to raise the screen brightness</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Voice&quot;</code></td>
+                       <td><code>"XF86Voice"</code></td>
                        <td>Key to activate a voice-related application</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;Hangul&quot;</code></td>
+                       <td><code>"Hangul"</code></td>
                        <td>Key to toggle the current language</td>
                        <td>Yes</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Apps&quot;</code></td>
+                       <td><code>"XF86Apps"</code></td>
                        <td>Key to call the application holder application</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Call&quot;</code></td>
+                       <td><code>"XF86Call"</code></td>
                        <td>Key to launch the call application</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Game&quot;</code></td>
+                       <td><code>"XF86Game"</code></td>
                        <td>Key to go to the game application</td>
                        <td>Yes</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86VoiceWakeUp_LPSD&quot;</code></td>
+                       <td><code>"XF86VoiceWakeUp_LPSD"</code></td>
                        <td>Key to wake up from voice input (LPSD)</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86VoiceWakeUp&quot;</code></td>
+                       <td><code>"XF86VoiceWakeUp"</code></td>
                        <td>Key to wake up from voice input</td>
                        <td>Yes</td>
                        <td>Yes</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86TV&quot;</code></td>
+                       <td><code>"XF86TV"</code></td>
                        <td>Key to display the TV screen directly</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Display&quot;</code></td>
+                       <td><code>"XF86Display"</code></td>
                        <td>Key to toggle the video source </td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86RCConfig&quot;</code></td>
-                       <td>Key to set the remote control&#39;s specific configuration</td>
+                       <td><code>"XF86RCConfig"</code></td>
+                       <td>Key to set the remote control's specific configuration</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86RCMode&quot;</code></td>
+                       <td><code>"XF86RCMode"</code></td>
                        <td>Key to show and hide the virtual remote control on the screen</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;1&quot;</code></td>
+                       <td><code>"1"</code></td>
                        <td>Numeric key 1 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;2&quot;</code></td>
+                       <td><code>"2"</code></td>
                        <td>Numeric key 2 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;3&quot;</code></td>
+                       <td><code>"3"</code></td>
                        <td>Numeric key 3 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;4&quot;</code></td>
+                       <td><code>"4"</code></td>
                        <td>Numeric key 4 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;5&quot;</code></td>
+                       <td><code>"5"</code></td>
                        <td>Numeric key 5 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;6&quot;</code></td>
+                       <td><code>"6"</code></td>
                        <td>Numeric key 6 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;7&quot;</code></td>
+                       <td><code>"7"</code></td>
                        <td>Numeric key 7 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;8&quot;</code></td>
+                       <td><code>"8"</code></td>
                        <td>Numeric key 8 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;9&quot;</code></td>
+                       <td><code>"9"</code></td>
                        <td>Numeric key 9 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;0&quot;</code></td>
+                       <td><code>"0"</code></td>
                        <td>Numeric key 0 on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;-&quot;</code></td>
+                       <td><code>"-"</code></td>
                        <td>Minus key on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86LowerChannel&quot;</code></td>
+                       <td><code>"XF86LowerChannel"</code></td>
                        <td>Key to lower the channel number</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86RaiseChannel&quot;</code></td>
+                       <td><code>"XF86RaiseChannel"</code></td>
                        <td>Key to raise the channel number</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86ChannelList&quot;</code></td>
+                       <td><code>"XF86ChannelList"</code></td>
                        <td>Key to display the channel list</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86PreviousChannel&quot;</code></td>
+                       <td><code>"XF86PreviousChannel"</code></td>
                        <td>Key to display the previous channel</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86SysMenu&quot;</code></td>
+                       <td><code>"XF86SysMenu"</code></td>
                        <td>Key to launch the system menu</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86SimpleMenu&quot;</code></td>
+                       <td><code>"XF86SimpleMenu"</code></td>
                        <td>Key to launch the simple menu</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86History&quot;</code></td>
+                       <td><code>"XF86History"</code></td>
                        <td>Key to launch the history functionality</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Favorites&quot;</code></td>
+                       <td><code>"XF86Favorites"</code></td>
                        <td>Key to launch the favorite channels functionality</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;Up&quot;</code></td>
+                       <td><code>"Up"</code></td>
                        <td>Arrow key UP on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;Down&quot;</code></td>
+                       <td><code>"Down"</code></td>
                        <td>Arrow key DOWN on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;Left&quot;</code></td>
+                       <td><code>"Left"</code></td>
                        <td>Arrow key LEFT on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;Right&quot;</code></td>
+                       <td><code>"Right"</code></td>
                        <td>Arrow key RIGHT on the remote control</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;Return&quot;</code></td>
+                       <td><code>"Return"</code></td>
                        <td>OK key on the remote control to confirm or select an item</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Close&quot;</code></td>
+                       <td><code>"XF86Close"</code></td>
                        <td>Exit key on the remote control to terminate the current menu or application</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Info&quot;</code></td>
+                       <td><code>"XF86Info"</code></td>
                        <td>Key to display the basic and auxiliary information on the screen</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Red&quot;</code></td>
+                       <td><code>"XF86Red"</code></td>
                        <td>Key to execute the functionality registered to the RED key</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Green&quot;</code></td>
+                       <td><code>"XF86Green"</code></td>
                        <td>Key to execute the functionality registered to the GREEN key</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Yellow&quot;</code></td>
+                       <td><code>"XF86Yellow"</code></td>
                        <td>Key to execute the functionality registered to the YELLOW key</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Blue&quot;</code></td>
+                       <td><code>"XF86Blue"</code></td>
                        <td>Key to execute the functionality registered to the BLUE key</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86ProgInfo&quot;</code></td>
+                       <td><code>"XF86ProgInfo"</code></td>
                        <td>Key to display the program information</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86PictureMode&quot;</code></td>
+                       <td><code>"XF86PictureMode"</code></td>
                        <td>Key to change the screen mode</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86PictureSize&quot;</code></td>
+                       <td><code>"XF86PictureSize"</code></td>
                        <td>Key to change the screen size and aspect ratio</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86PIP&quot;</code></td>
+                       <td><code>"XF86PIP"</code></td>
                        <td>Key to set the PIP (Picture-In-Picture) mode to display one screen on the other</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Guide&quot;</code></td>
+                       <td><code>"XF86Guide"</code></td>
                        <td>Key to display the user guide</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86AudioMode&quot;</code></td>
+                       <td><code>"XF86AudioMode"</code></td>
                        <td>Key to set or change the audio mode</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF86Subtitle&quot;</code></td>
+                       <td><code>"XF86Subtitle"</code></td>
                        <td>Key to display or hide the subtitles</td>
                        <td>-</td>
                        <td>-</td>
                        <td>Yes</td>
                </tr>
                <tr>
-                       <td><code>&quot;XF863D&quot;</code></td>
+                       <td><code>"XF863D"</code></td>
                        <td>Key to set or change the 3D mode</td>
                        <td>-</td>
                        <td>-</td>
@@ -675,11 +675,11 @@ eext_win_keygrab_unset(win, &quot;XF86AudioRaiseVolume&quot;);
                </tr>
        </tbody>
 </table>
-               
-               
-               
-               
-   
+
+
+
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_collections_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_collections_n.htm
index d55cd90..066f3a3 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_collections_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_collections_n.htm
@@ -51,26 +51,26 @@
 
 <pre class="prettyprint">
 collections {
-&nbsp;&nbsp;&nbsp;<a href="#base_scale">base_scale</a>: 1.8;
-&nbsp;&nbsp;&nbsp;<a href="#Sounds">sounds</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-1&quot; 2300;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Tone">tone</a>: &quot;tone-2&quot; 440;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sample">sample</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;sound_file1&quot; RAW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Sound_Source">source</a>: &quot;sound_file1.wav&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;group { 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alias: &quot;anothername;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: width height;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: width height;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scripts {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limits {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
-&nbsp;&nbsp;&nbsp;}
+   <a href="#base_scale">base_scale</a>: 1.8;
+   <a href="#Sounds">sounds</a> {
+      <a href="#Tone">tone</a>: "tone-1" 2300;
+      <a href="#Tone">tone</a>: "tone-2" 440;
+      <a href="#Sample">sample</a> {
+         name: "sound_file1" RAW;
+         <a href="#Sound_Source">source</a>: "sound_file1.wav";
+      }
+   }
+   group {
+      name: "groupname";
+      alias: "anothername;"
+      min: width height;
+      max: width height;
+      parts {}
+      scripts {}
+      limits {}
+      data {}
+      programs {}
+   }
 }
 </pre>
 
@@ -96,7 +96,7 @@ collections {
 
 <ul>
 <li id="Name"><code>name [sample name] [compression type] (quality)</code>
-<p>Used to include each sound file. The full path to the directory holding the sounds can be defined later with the <code>edje_cc</code> tool&#39;s <code>-sd</code> option. The valid compression types are:</p>
+<p>Used to include each sound file. The full path to the directory holding the sounds can be defined later with the <code>edje_cc</code> tool's <code>-sd</code> option. The valid compression types are:</p>
        <ul>
     <li><code>RAW</code>: Uncompressed</li>
     <li><code>COMP</code>: Lossless compression</li>
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_color_classes_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_color_classes_n.htm
index 2f93e14..4d4e65b 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_color_classes_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_color_classes_n.htm
@@ -51,12 +51,12 @@
 
 <pre class="prettyprint">
 color_classes {
-&nbsp;&nbsp;&nbsp;color_class {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#name">name</a>: &quot;colorclassname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#color">color</a>: [0-255] [0-255] [0-255] [0-255];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#color2">color2</a>: [0-255] [0-255] [0-255] [0-255];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#color3">color3</a>color3: [0-255] [0-255] [0-255] [0-255];
-&nbsp;&nbsp;&nbsp;}
+   color_class {
+      <a href="#name">name</a>: "colorclassname";
+      <a href="#color">color</a>: [0-255] [0-255] [0-255] [0-255];
+      <a href="#color2">color2</a>: [0-255] [0-255] [0-255] [0-255];
+      <a href="#color3">color3</a>color3: [0-255] [0-255] [0-255] [0-255];
+   }
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_data_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_data_n.htm
index 3986978..d0a4383 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_data_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_data_n.htm
@@ -50,8 +50,8 @@
 
 <pre class="prettyprint">
 data {
-&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;file: &quot;otherkey&quot; &quot;filename.ext&quot;;
+   item: "key" "value";
+   file: "otherkey" "filename.ext";
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_fonts_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_fonts_n.htm
index 4fd853a..8ab419a 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_fonts_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_fonts_n.htm
@@ -50,14 +50,14 @@
 
 <pre class="prettyprint">
 fonts {
-&nbsp;&nbsp;&nbsp;<a href="#font">font</a>: &quot;filename1.ext&quot; &quot;fontname&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#font">font</a>: &quot;filename2.ext&quot; &quot;otherfontname&quot;;
+   <a href="#font">font</a>: "filename1.ext" "fontname";
+   <a href="#font">font</a>: "filename2.ext" "otherfontname";
 }
 </pre>
 
 <ul>
 <li id="font"><code>font [font filename] [font alias]</code>
-<p>This property is included for each font, and it defines the <code>font file</code> and <code>alias</code>. The full path to the directory containing the font files can be defined later with the <code>edje_cc</code> tool&#39;s <code>-fd</code> option.
+<p>This property is included for each font, and it defines the <code>font file</code> and <code>alias</code>. The full path to the directory containing the font files can be defined later with the <code>edje_cc</code> tool's <code>-fd</code> option.
 </p></li>
 </ul>
 
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_group_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_group_n.htm
index e7ca681..467730b 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_group_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_group_n.htm
@@ -48,26 +48,26 @@
 <p align="center"><img width="450" alt="Group block" src="../../../images/diagram_group.png"/></p>
 
 <pre class="prettyprint">
-group { 
-&nbsp;&nbsp;&nbsp;<a href="#Group_Name">name</a>: &quot;nameusedbytheapplication&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#Alias">alias</a>: &quot;anothername&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#Min">min</a>: width height;
-&nbsp;&nbsp;&nbsp;<a href="#Max">max</a>: width height;
-&nbsp;&nbsp;&nbsp;<a href="#Parts">parts</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;definitions of parts&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Script">script</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Limits">limits</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Vertical">vertical</a>: &quot;limit_name&quot; height_barrier;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Horizontal">horizontal</a>: &quot;limit_name&quot; width_barrier;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Group_Data">data</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Items">items</a>: &quot;key&quot; &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#File">file</a>: &quot;key&quot; &quot;file&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#Programs">programs</a> {}
+group {
+   <a href="#Group_Name">name</a>: "nameusedbytheapplication";
+   <a href="#Alias">alias</a>: "anothername";
+   <a href="#Min">min</a>: width height;
+   <a href="#Max">max</a>: width height;
+   <a href="#Parts">parts</a> {
+      &lt;definitions of parts&gt;
+   }
+   <a href="#Script">script</a> {
+      &lt;embryo script&gt;
+   }
+   <a href="#Limits">limits</a> {
+      <a href="#Vertical">vertical</a>: "limit_name" height_barrier;
+      <a href="#Horizontal">horizontal</a>: "limit_name" width_barrier;
+   }
+   <a href="#Group_Data">data</a> {
+      <a href="#Items">items</a>: "key" "value";
+      <a href="#File">file</a>: "key" "file";
+   }
+   <a href="#Programs">programs</a> {}
 }
 </pre>
 
@@ -128,9 +128,9 @@ group {
 
 <pre class="prettyprint">
 parts {
-&nbsp;&nbsp;&nbsp;part {}
-&nbsp;&nbsp;&nbsp;part {}
-&nbsp;&nbsp;&nbsp;part {}
+   part {}
+   part {}
+   part {}
 }
 </pre>
 
@@ -140,14 +140,14 @@ parts {
 
 <pre class="prettyprint">
 group {
-&nbsp;&nbsp;&nbsp;script {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;program {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;embryo script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   script {
+      &lt;embryo script&gt;
+   }
+   program {
+      script {
+         &lt;embryo script&gt;
+      }
+   }
 }
 </pre>
 
@@ -158,18 +158,18 @@ group {
 
 <pre class="prettyprint">
 limits {
-&nbsp;&nbsp;&nbsp;vertical: &quot;limit_name&quot; height_barrier;
-&nbsp;&nbsp;&nbsp;horizontal: &quot;limit_name&quot; width_barrier;
+   vertical: "limit_name" height_barrier;
+   horizontal: "limit_name" width_barrier;
 }
 </pre>
 
 <p>The <code>limits</code> block is used to trigger signals when the Edje object is resized.</p>
 <ul>
 <li id="Vertical"><code>vertical [name] [height barrier]</code>
-<p>Sends a <code>limit,name,over</code> signal when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, the <code>limit,name,below</code> signal is sent. This limit is applied on the Y axis and is given in pixels.</p>
+<p>Sends a <code>limit,name,over</code> signal when the object is resized and passes the limit by growing over it. When the object's size is reduced below the limit, the <code>limit,name,below</code> signal is sent. This limit is applied on the Y axis and is given in pixels.</p>
 </li>
 <li id="Horizontal"><code>horizontal [name] [width barrier]</code>
-<p>Sends a <code>limit,name,over</code> signal when the object is resized and passes the limit by growing over it. When the object&#39;s size is reduced below the limit, the <code>limit,name,below</code> signal is sent. This limit is applied on the X axis and is given in pixels.</p>
+<p>Sends a <code>limit,name,over</code> signal when the object is resized and passes the limit by growing over it. When the object's size is reduced below the limit, the <code>limit,name,below</code> signal is sent. This limit is applied on the X axis and is given in pixels.</p>
 </li>
 </ul>
 </li>
@@ -178,18 +178,18 @@ limits {
 
 <pre class="prettyprint">
 data {
-&nbsp;&nbsp;&nbsp;item: &quot;key&quot; &quot;value&quot;;
-&nbsp;&nbsp;&nbsp;file: &quot;key2&quot; &quot;somefile&quot;;
+   item: "key" "value";
+   file: "key2" "somefile";
 }
 </pre>
 
 <p>The <code>data</code> block is used to pass arbitrary parameters from the theme to the application. Unlike the <code>images</code> and <code>fonts</code> blocks, additional <code>data</code> blocks can only be included inside the <code>group</code> block.</p>
 
 <ul>
-<li id="Items"><code>items: &quot;key&quot; &quot;value&quot;;</code>
+<li id="Items"><code>items: "key" "value";</code>
 <p>Sets a new parameter, the value is the string specified next to it.</p>
 </li>
-<li id="File"><code>file: &quot;key&quot; &quot;file&quot;;</code>
+<li id="File"><code>file: "key" "file";</code>
 <p>Sets a new parameter, the value is the content of the specified file formatted as a single string of text. This property only works with plain text files.</p>
 </li>
 </ul>
@@ -204,9 +204,9 @@ data {
 
 <pre class="prettyprint">
 programs {
-&nbsp;&nbsp;&nbsp;program {}
-&nbsp;&nbsp;&nbsp;program {}
-&nbsp;&nbsp;&nbsp;program {}
+   program {}
+   program {}
+   program {}
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_images_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_images_n.htm
index ca4d6d2..070fed6 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_images_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_images_n.htm
@@ -50,10 +50,10 @@
 
 <pre class="prettyprint">
 images {
-&nbsp;&nbsp;&nbsp;<a href="#image">image</a>: &quot;filename1.ext&quot; COMP;
-&nbsp;&nbsp;&nbsp;<a href="#image">image</a>: &quot;filename2.ext&quot; LOSSY 99;
-&nbsp;&nbsp;&nbsp;<a href="#set">set</a> {}
-&nbsp;&nbsp;&nbsp;<a href="#set">set</a> {}
+   <a href="#image">image</a>: "filename1.ext" COMP;
+   <a href="#image">image</a>: "filename2.ext" LOSSY 99;
+   <a href="#set">set</a> {}
+   <a href="#set">set</a> {}
 }
 </pre>
 
@@ -61,7 +61,7 @@ images {
 
 <ul>
 <li id="image"><code>image [image file] [compression method] (compression level)</code>
-<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <code>edje_cc</code> tool&#39;s <code>-id</code> option. The available compression methods are:</p>
+<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <code>edje_cc</code> tool's <code>-id</code> option. The available compression methods are:</p>
 <ul>
 <li><code>RAW</code>: Uncompressed</li>
 <li><code>COMP</code>: Lossless compression</li>
@@ -73,10 +73,10 @@ images {
 <li id="set"><code>images.set</code> block
 
 <pre class="prettyprint">
-set { 
-&nbsp;&nbsp;&nbsp;name: &quot;image_name_used&quot;;
-&nbsp;&nbsp;&nbsp;image {}
-&nbsp;&nbsp;&nbsp;image {}
+set {
+   name: "image_name_used";
+   image {}
+   image {}
 }
 </pre>
 
@@ -91,10 +91,10 @@ set {
 
 <pre class="prettyprint">
 image {
-&nbsp;&nbsp;&nbsp;image: &quot;filename4.ext&quot; COMP;
-&nbsp;&nbsp;&nbsp;size: 51 51 200 200;
-&nbsp;&nbsp;&nbsp;border: 0 0 0 0;
-&nbsp;&nbsp;&nbsp;border_scale_by: 0.0;
+   image: "filename4.ext" COMP;
+   size: 51 51 200 200;
+   border: 0 0 0 0;
+   border_scale_by: 0.0;
 }
 </pre>
 
@@ -102,7 +102,7 @@ image {
 
 <ul>
 <li><code>image [image file] [compression method] (compression level)</code>
-<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <code>edje_cc</code> tool&#39;s <code>-id</code> option.</p>
+<p>This property is included for each image file. The full path to the directory holding the image can be defined later with the <code>edje_cc</code> tool's <code>-id</code> option.</p>
 </li>
 <li><code>size [minw] [minh] [maxw] [maxh]</code>
 <p>Sets the minimum and maximum size that selects a specific image.</p>
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_intro_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_intro_n.htm
index 0ef5c20..9b712cb 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_intro_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_intro_n.htm
@@ -61,11 +61,11 @@
 color_classes {}
 styles {}
 collections {
-&nbsp;&nbsp;&nbsp;group {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;my_group&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {}
-&nbsp;&nbsp;&nbsp;}
+   group {
+      name: "my_group";
+      parts {}
+      programs {}
+   }
 }
 </pre>
 
@@ -121,43 +121,43 @@ collections {
 
 <pre class="prettyprint">
 collections {
-&nbsp;&nbsp;&nbsp;group {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;example&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the type to RECT (rectangle) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Default state (blue color) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Blue color */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Second state (red color) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;red&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Red color */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create a program */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;change_color&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Program is triggered on a mouse click */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal: &quot;mouse,clicked,*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the red state of the &quot;rectangle&quot; part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;red&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group {
+      name: "example";
+      parts {
+         /* Create the part */
+         part {
+            name: "rectangle";
+            /* Set the type to RECT (rectangle) */
+            type: RECT;
+            /* Default state (blue color) */
+            description {
+               state: "default" 0.0;
+               align: 0.0 0.0;
+               /* Blue color */
+               color: 0 0 255 255;
+            }
+            /* Second state (red color) */
+            description {
+               state: "red" 0.0;
+               align: 0.0 0.0;
+               /* Red color */
+               color: 255 0 0 255;
+            }
+         }
+      }
+      programs {
+         /* Create a program */
+         program {
+            name: "change_color";
+            /* Program is triggered on a mouse click */
+            signal: "mouse,clicked,*";
+            source: "*";
+            /* Set the red state of the "rectangle" part */
+            action: STATE_SET "red" 0.0;
+            target: "rectangle";
+         }
+      }
+   }
 }
 </pre>
 
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_part_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_part_n.htm
index a7555e5..3e3fac1 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_part_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_part_n.htm
@@ -51,307 +51,307 @@
 <p align="center"><img width="450" alt="Part block" src="../../../images/diagram_part.png"/></p>
 
 <pre class="prettyprint">
-part { 
-&nbsp;&nbsp;&nbsp;/* Name the part */
-&nbsp;&nbsp;&nbsp;<a href="#part_name">name</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;/* Inherit all the fields of another part */
-&nbsp;&nbsp;&nbsp;<a href="#inherit">inherit</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;/* Set the part type */
-&nbsp;&nbsp;&nbsp;<a href="#type">type</a>: IMAGE;
-&nbsp;&nbsp;&nbsp;/* Enable mouse events on the part */
-&nbsp;&nbsp;&nbsp;<a href="#mouse_events">mouse_events</a>: 0/1;
-&nbsp;&nbsp;&nbsp;/* Repeat the mouse events to the parts below the current one */
-&nbsp;&nbsp;&nbsp;<a href="#repeat_events">repeat_events</a>: 0/1;
-&nbsp;&nbsp;&nbsp;<a href="#ignore_flags">ignore_flags</a>: NONE;
-&nbsp;&nbsp;&nbsp;/* Set whether the part sizes scale with the edje scaling factor */
-&nbsp;&nbsp;&nbsp;<a href="#scale">scale</a>: 0/1;
-&nbsp;&nbsp;&nbsp;/* Set whether fully-transparent pixels are considered in collision detection */
-&nbsp;&nbsp;&nbsp;<a href="#precise_is_inside">precise_is_inside</a>: 0/1;
-&nbsp;&nbsp;&nbsp;/* Only render the area of the part that coincides with the given part */
-&nbsp;&nbsp;&nbsp;<a href="#clip_to">clip_to</a>: &quot;anotherpart&quot;;
-&nbsp;&nbsp;&nbsp;/* For group/textblock: swallow the given group (for textblock: goes below text) */
-&nbsp;&nbsp;&nbsp;<a href="#source">source</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;/* Same as the source but goes on top of text */
-&nbsp;&nbsp;&nbsp;<a href="#source2">source2</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   For textblock: swallow the given group below the mouse cursor
-&nbsp;&nbsp;&nbsp;   when it hovers over the part
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;<a href="#source3">source3</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;/* Same as source3 but goes on top of the cursor */
-&nbsp;&nbsp;&nbsp;<a href="#source4">source4</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;/* For textblock: swallow the given group below text anchors (&lt;a&gt;...&lt;/a&gt;) */
-&nbsp;&nbsp;&nbsp;<a href="#source5">source5</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;/* Same as source5 but goes on to top of the anchor */
-&nbsp;&nbsp;&nbsp;<a href="#source6">source6</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;/* Add a shadow effect to the part */
-&nbsp;&nbsp;&nbsp;<a href="#effect">effect</a>: SOFT_SHADOW (BOTTOM_RIGHT);
-&nbsp;&nbsp;&nbsp;/* For textblock: makes the text editable, possibly with a specific behavior */
-&nbsp;&nbsp;&nbsp;<a href="#entry_mode">entry_mode</a>: PASSWORD;
-&nbsp;&nbsp;&nbsp;/* For textblock: change how the text selection is triggered */
-&nbsp;&nbsp;&nbsp;<a href="#select_mode">select_mode</a>: EXPLICIT;
-&nbsp;&nbsp;&nbsp;/* For editable textblock: where to draw the (blinking) cursor */
-&nbsp;&nbsp;&nbsp;<a href="#cursor_mode">cursor_mode</a>: UNDER;
-&nbsp;&nbsp;&nbsp;/* For editable textblock: allow multiple lines */
-&nbsp;&nbsp;&nbsp;<a href="#multiline">multiline</a>: 0/1;
-&nbsp;&nbsp;&nbsp;/* For textblock: accessibility features are used */
-&nbsp;&nbsp;&nbsp;<a href="#access">access</a>: 0/1;
-&nbsp;&nbsp;&nbsp;/* No-one uses that */
-&nbsp;&nbsp;&nbsp;<a href="#pointer_mode">pointer_mode</a>: AUTOGRAB;
-&nbsp;&nbsp;&nbsp;<a href="#use_alternate_font_metrics">use_alternate_font_metrics</a>: 0/1;
-&nbsp;&nbsp;&nbsp;/* Remove the given program; useful when it was inherited */
-&nbsp;&nbsp;&nbsp;<a href="#program_remove">program_remove</a>: &quot;programname&quot;;
-&nbsp;&nbsp;&nbsp;/* Remove the given part; useful when it was inherited */
-&nbsp;&nbsp;&nbsp;<a href="#part_remove">part_remove</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;/* Insert the current part below the given part, as if it were declared before */
-&nbsp;&nbsp;&nbsp;<a href="#insert_before">insert_before</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;/* Insert the current part above the given part, as if it were declared after */
-&nbsp;&nbsp;&nbsp;<a href="#insert_after">insert_after</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;/* Define a new part inside this one */
-&nbsp;&nbsp;&nbsp;<a href="#part_part">part</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;part definition&gt;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#dragable">draggable</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Confine the current part to the given part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_confine">confine</a>: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Only start drag when it has moved enough to be outside the given part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_threshold">threshold</a>: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Forward the drag events to the given part instead of handling them */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_events">events</a>: &quot;another draggable part&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Enable the horizontal drag with step_size steps or with steps_count steps */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_x">x</a>: 0/1 &lt;step_size&gt; &lt;steps_count&gt;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Same as x but vertical */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#dragable_y">y</a>: 1 0 100;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;/* For box or table */
-&nbsp;&nbsp;&nbsp;<a href="#box_table">box/table</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* List of items */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items">items</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Name the item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item">item</a> { <a href="#box_table_items_item_name">name</a>: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Define the item type, can only be GROUP */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_type">type</a>: GROUP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the source for this item, or its content */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_source">source</a>: &quot;groupname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the minimum horizontal and vertical item sizes (-1 for expand) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_min">min</a>: -1 -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the maximum horizontal and vertical item sizes (-1 for ignore) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_max">max</a>: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the item padding in pixels */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_padding">padding</a>: 2 2 2 2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_spread">spread</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the item alignment */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set a weight hint in the box for the given object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_weight">weight</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the aspect ratio hint */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect">aspect</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_aspect_mode">aspect_mode</a>: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the number of columns and rows the item takes */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#box_table_items_item_span">span</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;<a href="#description">description</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Inherit another description */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_inherit">inherit</a>: &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Name the current description */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_state">state</a>: &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Use another part as content of the current proxy part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   This description only works in the proxy part and
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   the current part mirrors the rendering content of the source part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_source">source</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make the part (in)visible (invisible parts emit no signals) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_visible">visible</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Emit a signal when the given dimension becomes zero or stops being zero */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_limit">limit</a>: WIDTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the horizontal and vertical alignment of the part inside its parent */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set that the part does not change size */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_fixed">fixed</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the minimum size for the part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_min">min</a>: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Forcibly multiply the minimum sizes by the given factors */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_minmul">minmul</a>: 1.2 1.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the maximum size for the part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_max">max</a>: 400 400;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make vertical and horizontal resizes happen in steps */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_step">step</a>: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Force the aspect ratio to be kept between min and max between resizes */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect">aspect</a>: 0.8 1.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the dimension to which the aspect ratio applies */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_aspect_preference">aspect_preference</a>: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Use the given color class which can be used to factor font colors */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color_class">color_class</a>: &quot;colorclassname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the text color */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color">color</a>: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the color of the text shadow */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color2">color2</a>: 0 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the color of the text outline */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_color3">color3</a>: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Define the positions of the top-left (rel1) and bottom-right (rel2) corners */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2">rel1/rel2</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make relative and offset use the given part for their positioning */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to">to</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Position the corner relative to the part given through to
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   (0.0 being axis beginning, 1.0 being its end)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_relative">relative</a>: 0.1 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add an absolute offset (in pixels) along each axis */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_offset">offset</a>: 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Same as to but only for the X axis */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_x">to_x</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Same as to but only for the Y axis */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_rel1_2_to_y">to_y</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Settings specific to parts of the image type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image">image</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the name (not path) of the regular image */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_normal">normal</a>: &quot;imagename&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Set the image to use while transitioning to the normal image;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   use several times to create animations
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_tween">tween</a>: &quot;imagename2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Set the number of pixels that make up each border of the image,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   and are not resized with the image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border">border</a>: 4 4 4 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Hide, strip from its alpha, or show (default)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   the non-border part of the image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_middle">middle</a>: DEFAULT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale_by">border_scale_by</a>: 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set whether to scale the border */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_border_scale">border_scale</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_scale_hint">scale_hint</a>: STATIC;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set how the image is going to fill its part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill">fill</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set whether to smooth the image when scaling it */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_smooth">smooth</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_spread">spread</a>: ??;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set whether to scale or tile to fit when resizing the image is needed */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_type">type</a>: SCALE/TILE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Only display the image area below and to the right of the given point */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin">origin</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Specify top-left point as relative coordinates */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_relative">relative</a>: 0.1 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Specify top-left point as a pixel offset */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_origin_offset">offset</a>: 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Specify bottom-right point as relative coordinates */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size">size</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Specify bottom-right point as relative coordinates */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size_relative">relative</a>: 0.1 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Specify bottom-right point as a pixel offset */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_image_fill_size_offset">offset</a>: 10 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Settings specific to parts of the text and textblock type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text">text</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the part text */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text">text</a>: &quot;some text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the text font */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_font">font</a>: &quot;Tizen Sans&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the text size */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size">size</a>: 14;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the text class which can be used to factor font and font-size settings */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_class">text_class</a>: &quot;classname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the styles defined in stylename */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_style">style</a>: &quot;stylename&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   For textblocks in the password mode,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   replace characters to hide with this string
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_repch">repch</a>: &quot;*&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Set the min and max font sizes allowed when
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   resizing (default is 0 0, or unrestricted)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_size_range">size_range</a>: 6 18;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Increase the font size as much as possible
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   while still remaining in the container for both axes
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_fit">fit</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Make the min size of the container equal to
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   the min size of the current text (0 0 by default)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_min">min</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Make the max size of the container equal to
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   the max size of the current text (0 0 by default)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_max">max</a>: 0/1 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the vertical and horizontal alignments of the text */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Reuse the text of another part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_text_source">text_source</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   When the text is too long to fit, set the relative position
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   at which to cut the text and put an ellipsis (&quot;...&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_text_ellipsis">ellipsis</a>: 0.9;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Settings specific to parts of the box type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box">box</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set how children are arranged in the box */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_layout">layout</a>: horizontal_homogeneous;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the vertical and horizontal alignments of the box */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the padding between items of the box */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_padding">padding</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Make the box&#39;s min size the min size of its elements
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   (make it shrinkable as much as its items)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_box_min">min</a>: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table">table</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make items homogeneous */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_homogeneous">homogeneous</a>: NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the vertical and horizontal alignments of the table */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_align">align</a>: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the padding between items of the table */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_padding">padding</a>: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Make the table&#39;s min size the min size of its elements
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   (make it shrinkable as much as its items)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_table_min">min</a>: 0 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map">map</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_light">light</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_on">on</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_smooth">smooth</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_alpha">alpha</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_backface_cull">backface_cull</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_on">perspective_on</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_color">color</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation">rotation</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_center">center</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_x">x</a>: 45;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_y">y</a>: 120;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_rotation_z">z</a>: 90;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective">perspective</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_zplane">zplane</a>: 0/1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_perspective_focal">focal</a>: 20;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Simpler syntax to create transitions to the current part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link">link</a> {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#description_map_link_base">base</a>: &quot;edje,signal&quot; &quot;edje&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+part {
+   /* Name the part */
+   <a href="#part_name">name</a>: "partname";
+   /* Inherit all the fields of another part */
+   <a href="#inherit">inherit</a>: "partname";
+   /* Set the part type */
+   <a href="#type">type</a>: IMAGE;
+   /* Enable mouse events on the part */
+   <a href="#mouse_events">mouse_events</a>: 0/1;
+   /* Repeat the mouse events to the parts below the current one */
+   <a href="#repeat_events">repeat_events</a>: 0/1;
+   <a href="#ignore_flags">ignore_flags</a>: NONE;
+   /* Set whether the part sizes scale with the edje scaling factor */
+   <a href="#scale">scale</a>: 0/1;
+   /* Set whether fully-transparent pixels are considered in collision detection */
+   <a href="#precise_is_inside">precise_is_inside</a>: 0/1;
+   /* Only render the area of the part that coincides with the given part */
+   <a href="#clip_to">clip_to</a>: "anotherpart";
+   /* For group/textblock: swallow the given group (for textblock: goes below text) */
+   <a href="#source">source</a>: "groupname";
+   /* Same as the source but goes on top of text */
+   <a href="#source2">source2</a>: "groupname";
+   /*
+      For textblock: swallow the given group below the mouse cursor
+      when it hovers over the part
+   */
+   <a href="#source3">source3</a>: "groupname";
+   /* Same as source3 but goes on top of the cursor */
+   <a href="#source4">source4</a>: "groupname";
+   /* For textblock: swallow the given group below text anchors (&lt;a&gt;...&lt;/a&gt;) */
+   <a href="#source5">source5</a>: "groupname";
+   /* Same as source5 but goes on to top of the anchor */
+   <a href="#source6">source6</a>: "groupname";
+   /* Add a shadow effect to the part */
+   <a href="#effect">effect</a>: SOFT_SHADOW (BOTTOM_RIGHT);
+   /* For textblock: makes the text editable, possibly with a specific behavior */
+   <a href="#entry_mode">entry_mode</a>: PASSWORD;
+   /* For textblock: change how the text selection is triggered */
+   <a href="#select_mode">select_mode</a>: EXPLICIT;
+   /* For editable textblock: where to draw the (blinking) cursor */
+   <a href="#cursor_mode">cursor_mode</a>: UNDER;
+   /* For editable textblock: allow multiple lines */
+   <a href="#multiline">multiline</a>: 0/1;
+   /* For textblock: accessibility features are used */
+   <a href="#access">access</a>: 0/1;
+   /* No-one uses that */
+   <a href="#pointer_mode">pointer_mode</a>: AUTOGRAB;
+   <a href="#use_alternate_font_metrics">use_alternate_font_metrics</a>: 0/1;
+   /* Remove the given program; useful when it was inherited */
+   <a href="#program_remove">program_remove</a>: "programname";
+   /* Remove the given part; useful when it was inherited */
+   <a href="#part_remove">part_remove</a>: "partname";
+   /* Insert the current part below the given part, as if it were declared before */
+   <a href="#insert_before">insert_before</a>: "partname";
+   /* Insert the current part above the given part, as if it were declared after */
+   <a href="#insert_after">insert_after</a>: "partname";
+   /* Define a new part inside this one */
+   <a href="#part_part">part</a> {
+      &lt;part definition&gt;
+   }
+   <a href="#dragable">draggable</a> {
+      /* Confine the current part to the given part */
+      <a href="#dragable_confine">confine</a>: "another part";
+      /* Only start drag when it has moved enough to be outside the given part */
+      <a href="#dragable_threshold">threshold</a>: "another part";
+      /* Forward the drag events to the given part instead of handling them */
+      <a href="#dragable_events">events</a>: "another draggable part";
+      /* Enable the horizontal drag with step_size steps or with steps_count steps */
+      <a href="#dragable_x">x</a>: 0/1 &lt;step_size&gt; &lt;steps_count&gt;;
+      /* Same as x but vertical */
+      <a href="#dragable_y">y</a>: 1 0 100;
+   }
+   /* For box or table */
+   <a href="#box_table">box/table</a> {
+      /* List of items */
+      <a href="#box_table_items">items</a> {
+            /* Name the item */
+            <a href="#box_table_items_item">item</a> { <a href="#box_table_items_item_name">name</a>: "name";
+            /* Define the item type, can only be GROUP */
+            <a href="#box_table_items_item_type">type</a>: GROUP;
+            /* Set the source for this item, or its content */
+            <a href="#box_table_items_item_source">source</a>: "groupname";
+            /* Set the minimum horizontal and vertical item sizes (-1 for expand) */
+            <a href="#box_table_items_item_min">min</a>: -1 -1;
+            /* Set the maximum horizontal and vertical item sizes (-1 for ignore) */
+            <a href="#box_table_items_item_max">max</a>: 100 100;
+            /* Set the item padding in pixels */
+            <a href="#box_table_items_item_padding">padding</a>: 2 2 2 2;
+            <a href="#box_table_items_item_spread">spread</a>: 1 1;
+            /* Set the item alignment */
+            <a href="#box_table_items_item_align">align</a>: 0.5 0.5;
+            /* Set a weight hint in the box for the given object */
+            <a href="#box_table_items_item_weight">weight</a>: 1 1;
+            /* Set the aspect ratio hint */
+            <a href="#box_table_items_item_aspect">aspect</a>: 1 1;
+            <a href="#box_table_items_item_aspect_mode">aspect_mode</a>: BOTH;
+            /* Set the number of columns and rows the item takes */
+            <a href="#box_table_items_item_span">span</a>: 1 1;
+         }
+      }
+   }
+   <a href="#description">description</a> {
+      /* Inherit another description */
+      <a href="#description_inherit">inherit</a>: "default" 1.0;
+      /* Name the current description */
+      <a href="#description_state">state</a>: "default" 1.0;
+      /*
+         Use another part as content of the current proxy part
+         This description only works in the proxy part and
+         the current part mirrors the rendering content of the source part
+      */
+      <a href="#description_source">source</a>: "partname";
+      /* Make the part (in)visible (invisible parts emit no signals) */
+      <a href="#description_visible">visible</a>: 0/1;
+      /* Emit a signal when the given dimension becomes zero or stops being zero */
+      <a href="#description_limit">limit</a>: WIDTH;
+      /* Set the horizontal and vertical alignment of the part inside its parent */
+      <a href="#description_align">align</a>: 0.5 0.5;
+      /* Set that the part does not change size */
+      <a href="#description_fixed">fixed</a>: 0/1 0/1;
+      /* Set the minimum size for the part */
+      <a href="#description_min">min</a>: 200 200;
+      /* Forcibly multiply the minimum sizes by the given factors */
+      <a href="#description_minmul">minmul</a>: 1.2 1.2;
+      /* Set the maximum size for the part */
+      <a href="#description_max">max</a>: 400 400;
+      /* Make vertical and horizontal resizes happen in steps */
+      <a href="#description_step">step</a>: 0 0;
+      /* Force the aspect ratio to be kept between min and max between resizes */
+      <a href="#description_aspect">aspect</a>: 0.8 1.2;
+      /* Set the dimension to which the aspect ratio applies */
+      <a href="#description_aspect_preference">aspect_preference</a>: BOTH;
+      /* Use the given color class which can be used to factor font colors */
+      <a href="#description_color_class">color_class</a>: "colorclassname";
+      /* Set the text color */
+      <a href="#description_color">color</a>: 255 0 0 255;
+      /* Set the color of the text shadow */
+      <a href="#description_color2">color2</a>: 0 255 0 255;
+      /* Set the color of the text outline */
+      <a href="#description_color3">color3</a>: 0 0 255 255;
+      /* Define the positions of the top-left (rel1) and bottom-right (rel2) corners */
+      <a href="#description_rel1_2">rel1/rel2</a> {
+         /* Make relative and offset use the given part for their positioning */
+         <a href="#description_rel1_2_to">to</a>: "partname";
+         /*
+            Position the corner relative to the part given through to
+            (0.0 being axis beginning, 1.0 being its end)
+         */
+         <a href="#description_rel1_2_relative">relative</a>: 0.1 0.1;
+         /* Add an absolute offset (in pixels) along each axis */
+         <a href="#description_rel1_2_offset">offset</a>: 10 10;
+         /* Same as to but only for the X axis */
+         <a href="#description_rel1_2_to_x">to_x</a>: "partname";
+         /* Same as to but only for the Y axis */
+         <a href="#description_rel1_2_to_y">to_y</a>: "partname";
+      }
+      /* Settings specific to parts of the image type */
+      <a href="#description_image">image</a> {
+         /* Set the name (not path) of the regular image */
+         <a href="#description_image_normal">normal</a>: "imagename";
+         /*
+            Set the image to use while transitioning to the normal image;
+            use several times to create animations
+         */
+         <a href="#description_image_tween">tween</a>: "imagename2";
+         /*
+            Set the number of pixels that make up each border of the image,
+            and are not resized with the image
+         */
+         <a href="#description_image_border">border</a>: 4 4 4 4;
+         /*
+            Hide, strip from its alpha, or show (default)
+            the non-border part of the image
+         */
+         <a href="#description_image_middle">middle</a>: DEFAULT;
+         <a href="#description_image_border_scale_by">border_scale_by</a>: 1.0;
+         /* Set whether to scale the border */
+         <a href="#description_image_border_scale">border_scale</a>: 0/1;
+         <a href="#description_image_scale_hint">scale_hint</a>: STATIC;
+         /* Set how the image is going to fill its part */
+         <a href="#description_image_fill">fill</a> {
+            /* Set whether to smooth the image when scaling it */
+            <a href="#description_image_fill_smooth">smooth</a>: 0/1;
+            <a href="#description_image_fill_spread">spread</a>: ??;
+            /* Set whether to scale or tile to fit when resizing the image is needed */
+            <a href="#description_image_fill_type">type</a>: SCALE/TILE;
+            /* Only display the image area below and to the right of the given point */
+            <a href="#description_image_fill_origin">origin</a> {
+               /* Specify top-left point as relative coordinates */
+               <a href="#description_image_fill_origin_relative">relative</a>: 0.1 0.1;
+               /* Specify top-left point as a pixel offset */
+               <a href="#description_image_fill_origin_offset">offset</a>: 10 10;
+            }
+            /* Specify bottom-right point as relative coordinates */
+            <a href="#description_image_fill_size">size</a> {
+               /* Specify bottom-right point as relative coordinates */
+               <a href="#description_image_fill_size_relative">relative</a>: 0.1 0.1;
+               /* Specify bottom-right point as a pixel offset */
+               <a href="#description_image_fill_size_offset">offset</a>: 10 10;
+            }
+         }
+      }
+      /* Settings specific to parts of the text and textblock type */
+      <a href="#description_text">text</a> {
+         /* Set the part text */
+         <a href="#description_text_text">text</a>: "some text";
+         /* Set the text font */
+         <a href="#description_text_font">font</a>: "Tizen Sans";
+         /* Set the text size */
+         <a href="#description_text_size">size</a>: 14;
+         /* Set the text class which can be used to factor font and font-size settings */
+         <a href="#description_text_text_class">text_class</a>: "classname";
+         /* Set the styles defined in stylename */
+         <a href="#description_text_style">style</a>: "stylename";
+         /*
+            For textblocks in the password mode,
+            replace characters to hide with this string
+         */
+         <a href="#description_text_repch">repch</a>: "*";
+         /*
+            Set the min and max font sizes allowed when
+            resizing (default is 0 0, or unrestricted)
+         */
+         <a href="#description_text_size_range">size_range</a>: 6 18;
+         /*
+            Increase the font size as much as possible
+            while still remaining in the container for both axes
+         */
+         <a href="#description_text_fit">fit</a>: 0/1 0/1;
+         /*
+            Make the min size of the container equal to
+            the min size of the current text (0 0 by default)
+         */
+         <a href="#description_text_min">min</a>: 0/1 0/1;
+         /*
+            Make the max size of the container equal to
+            the max size of the current text (0 0 by default)
+         */
+         <a href="#description_text_max">max</a>: 0/1 0/1;
+         /* Set the vertical and horizontal alignments of the text */
+         <a href="#description_text_align">align</a>: 0.5 0.5;
+         /* Reuse the text of another part */
+         <a href="#description_text_text_source">text_source</a>: "partname";
+         /*
+            When the text is too long to fit, set the relative position
+            at which to cut the text and put an ellipsis ("...")
+         */
+         <a href="#description_text_ellipsis">ellipsis</a>: 0.9;
+      }
+      /* Settings specific to parts of the box type */
+      <a href="#description_box">box</a> {
+         /* Set how children are arranged in the box */
+         <a href="#description_box_layout">layout</a>: horizontal_homogeneous;
+         /* Set the vertical and horizontal alignments of the box */
+         <a href="#description_box_align">align</a>: 0.5 0.5;
+         /* Set the padding between items of the box */
+         <a href="#description_box_padding">padding</a>: 1 1;
+         /*
+            Make the box's min size the min size of its elements
+            (make it shrinkable as much as its items)
+         */
+         <a href="#description_box_min">min</a>: 0 1;
+      }
+      <a href="#description_table">table</a> {
+         /* Make items homogeneous */
+         <a href="#description_table_homogeneous">homogeneous</a>: NONE;
+         /* Set the vertical and horizontal alignments of the table */
+         <a href="#description_table_align">align</a>: 0.5 0.5;
+         /* Set the padding between items of the table */
+         <a href="#description_table_padding">padding</a>: 1 1;
+         /*
+            Make the table's min size the min size of its elements
+            (make it shrinkable as much as its items)
+         */
+         <a href="#description_table_min">min</a>: 0 1;
+      }
+      <a href="#description_map">map</a> {
+         <a href="#description_map_perspective">perspective</a>: "partname";
+         <a href="#description_map_light">light</a>: "partname";
+         <a href="#description_map_on">on</a>: 0/1;
+         <a href="#description_map_smooth">smooth</a>: 0/1;
+         <a href="#description_map_alpha">alpha</a>: 0/1;
+         <a href="#description_map_backface_cull">backface_cull</a>: 0/1;
+         <a href="#description_map_perspective_on">perspective_on</a>: 0/1;
+         <a href="#description_map_color">color</a>: 0/1;
+         <a href="#description_map_rotation">rotation</a> {
+            <a href="#description_map_rotation_center">center</a>: "partname";
+            <a href="#description_map_rotation_x">x</a>: 45;
+            <a href="#description_map_rotation_y">y</a>: 120;
+            <a href="#description_map_rotation_z">z</a>: 90;
+         }
+         <a href="#description_map_perspective">perspective</a> {
+            <a href="#description_map_perspective_zplane">zplane</a>: 0/1;
+            <a href="#description_map_perspective_focal">focal</a>: 20;
+         }
+         /* Simpler syntax to create transitions to the current part */
+         <a href="#description_map_link">link</a> {
+            <a href="#description_map_link_base">base</a>: "edje,signal" "edje";
+         }
+      }
+   }
 }
 </pre>
 
@@ -379,7 +379,7 @@ part {
 </li>
 
 <li id="part_name"><code>name [part name]</code>
-<p>Sets the part name is used as a reference in the theme&#39;s relative positioning system, by programs and in some cases by the application. The part name must be unique within the group.</p>
+<p>Sets the part name is used as a reference in the theme's relative positioning system, by programs and in some cases by the application. The part name must be unique within the group.</p>
 </li>
 
 <li id="type"><code>type [TYPE]</code>
@@ -403,24 +403,24 @@ part {
 <li id="part_part"><code>part [part declaration]</code>
 <p>Sets a nested part that adds hierarchy to Edje. A nested part inherits its location relative to the parent part. To declare a nested part, create a new part within the current part declaration. Define the parent part name before adding nested parts.</p>
 <pre class="prettyprint">
-part { 
-&nbsp;&nbsp;&nbsp;name: &quot;parent_rect&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description {}
-&nbsp;&nbsp;&nbsp;part { name: &quot;nested_rect&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {}
-&nbsp;&nbsp;&nbsp;}
+part {
+   name: "parent_rect";
+   type: RECT;
+   description {}
+   part { name: "nested_rect";
+      type: RECT;
+      description {}
+   }
 }
 </pre>
 </li>
 
-<li id="insert_before"><code>insert_before [another part&#39;s name]</code>
-<p>Sets the part&#39;s name which this part is inserted before. One part cannot have both <code>insert_before</code> and <code>insert_after</code>. One part cannot refer to more than one part name by <code>insert_before</code>.</p>
+<li id="insert_before"><code>insert_before [another part's name]</code>
+<p>Sets the part's name which this part is inserted before. One part cannot have both <code>insert_before</code> and <code>insert_after</code>. One part cannot refer to more than one part name by <code>insert_before</code>.</p>
 </li>
 
-<li id="insert_after"><code>insert_after [another part&#39;s name]</code>
-<p>Sets the part&#39;s name which this part is inserted after. One part cannot have both <code>insert_before</code> and <code>insert_after</code>. One part cannot refer to more than one part name by <code>insert_after</code>.</p>
+<li id="insert_after"><code>insert_after [another part's name]</code>
+<p>Sets the part's name which this part is inserted after. One part cannot have both <code>insert_before</code> and <code>insert_after</code>. One part cannot refer to more than one part name by <code>insert_after</code>.</p>
 </li>
 
 <li id="mouse_events"><code>mouse_events [1 or 0]</code>
@@ -448,7 +448,7 @@ part {
 <p>Sets the mouse pointer behavior for a given part. The default value is <code>AUTOGRAB</code>. The available modes are:</p>
 <ul>
 <li><code>AUTOGRAB</code>: When the part is clicked and the button remains pressed, the part is the source of all future mouse signals emitted, even outside the object, until the button is released</li>
-<li><code>NOGRAB</code>: Effect is limited to the part&#39;s container</li>
+<li><code>NOGRAB</code>: Effect is limited to the part's container</li>
 </ul>
 </li>
 
@@ -460,36 +460,36 @@ part {
 <p>Determines whether Edje uses different size measurement functions. This setting only affects text and textblock parts, and is disabled by default.</p>
 </li>
 
-<li id="clip_to"><code>clip_to [another part&#39;s name]</code>
-<p>Renders only the area of the part that coincides with another part&#39;s container. Overflowing content is not displayed. Note that the part being clipped to can only be a rectangle part.</p>
+<li id="clip_to"><code>clip_to [another part's name]</code>
+<p>Renders only the area of the part that coincides with another part's container. Overflowing content is not displayed. Note that the part being clipped to can only be a rectangle part.</p>
 </li>
 
-<li id="source"><code>source [another group&#39;s name]</code>
-<p>Swallows the specified group into the part&#39;s container if the source is a group. If the source is a textblock, it is used for the group to be loaded and used for selection display under the selected text. <code>source2</code> is used on top of the selected text, if <code>source2</code> is specified.</p>
+<li id="source"><code>source [another group's name]</code>
+<p>Swallows the specified group into the part's container if the source is a group. If the source is a textblock, it is used for the group to be loaded and used for selection display under the selected text. <code>source2</code> is used on top of the selected text, if <code>source2</code> is specified.</p>
 <p>Only available to group or textblock parts.</p>
 </li>
 
-<li id="source2"><code>source2 [another group&#39;s name]</code>
+<li id="source2"><code>source2 [another group's name]</code>
 <p>Used for the group to be loaded and used for selection display over the selected text. <code>source</code> is used under the selected text, if <code>source</code> is specified.</p>
 <p>Only available to textblock parts.</p>
 </li>
 
-<li id="source3"><code>source3 [another group&#39;s name]</code>
+<li id="source3"><code>source3 [another group's name]</code>
 <p>Used for the group to be loaded and used for cursor display under the cursor position. <code>source4</code> is used over the cursor text, if <code>source4</code> is specified.</p>
 <p>Only available to textblock parts.</p>
 </li>
 
-<li id="source4"><code>source4 [another group&#39;s name]</code>
+<li id="source4"><code>source4 [another group's name]</code>
 <p>Used for the group to be loaded and used for cursor display over the cursor position. <code>source3</code> is used under the cursor text, if <code>source3</code> is specified.</p>
 <p>Only available to textblock parts.</p>
 </li>
 
-<li id="source5"><code>source5 [another group&#39;s name]</code>
+<li id="source5"><code>source5 [another group's name]</code>
 <p>Used for the group to be loaded and used for anchors display under the anchor position. <code>source6</code> is used over the anchor text, if <code>source6</code> is specified.</p>
 <p>Only available to textblock parts.</p>
 </li>
 
-<li id="source6"><code>source6 [another group&#39;s name]</code>
+<li id="source6"><code>source6 [another group's name]</code>
 <p>Used for the group to be loaded and used for anchor display over the anchor position. <code>source5</code> is used under the anchor text, if <code>source5</code> is specified.</p>
 <p>Only available to textblock parts.</p>
 </li>
@@ -596,11 +596,11 @@ part {
 
 <pre class="prettyprint">
 draggable {
-&nbsp;&nbsp;&nbsp;confine: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;threshold: &quot;another part&quot;;
-&nbsp;&nbsp;&nbsp;events:  &quot;another draggable part&quot;;
-&nbsp;&nbsp;&nbsp;x: 0 0 0;
-&nbsp;&nbsp;&nbsp;y: 0 0 0;
+   confine: "another part";
+   threshold: "another part";
+   events:  "another draggable part";
+   x: 0 0 0;
+   y: 0 0 0;
 }
 </pre>
 
@@ -616,15 +616,15 @@ draggable {
 <p>Sets up dragging events for the Y axis. The first parameter is used to enable (1 or -1) and disable (0) dragging along the axis. When enabled, 1 sets the starting point at 0.0 and -1 at 1.0. The second parameter takes any integer and limits the movement to values divisible by it, causing the part to jump from position to position. If the step is set to 0, it is calculated as the height of the <code>confine</code> part divided by count.</p>
 </li>
 
-<li id="dragable_confine"><code>confine [another part&#39;s name]</code>
-<p>Limits the movement of the dragged part to another part&#39;s container. Set a min size for the part, or the dragged object does not show up.</p>
+<li id="dragable_confine"><code>confine [another part's name]</code>
+<p>Limits the movement of the dragged part to another part's container. Set a min size for the part, or the dragged object does not show up.</p>
 </li>
 
-<li id="dragable_threshold"><code>threshold [another part&#39;s name]</code>
+<li id="dragable_threshold"><code>threshold [another part's name]</code>
 <p>Allows (when set) the movement of the dragged part start only when it gets moved outside the threshold part.</p>
 </li>
 
-<li id="dragable_events"><code>events [another draggable part&#39;s name]</code>
+<li id="dragable_events"><code>events [another draggable part's name]</code>
 <p>Causes the part to forward the drag events to another part, thus ignoring the drag events for itself.</p>
 </li>
 
@@ -636,21 +636,21 @@ draggable {
 
 <pre class="prettyprint">
 box/table {
-&nbsp;&nbsp;&nbsp;items {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some source&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: -1 -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 1 1 2 2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;some name&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GROUP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: &quot;some other source&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 1.0 0.5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   items {
+      item {
+         type: GROUP;
+         source: "some source";
+         min: -1 -1;
+         max: 100 100;
+         padding: 1 1 2 2;
+      }
+      item {
+         name: "some name";
+         type: GROUP;
+         source: "some other source";
+         align: 1.0 0.5;
+      }
+   }
 }
 </pre>
 
@@ -671,7 +671,7 @@ box/table {
 <p>Sets the name of the object using the <code>evas_object_name_set()</code> function.</p>
 </li>
 
-<li id="box_table_items_item_source"><code>source [another group&#39;s name]</code>
+<li id="box_table_items_item_source"><code>source [another group's name]</code>
 <p>Sets the group this object is made of.</p>
 </li>
 
@@ -744,23 +744,23 @@ box/table {
 
 <pre class="prettyprint">
 description {
-&nbsp;&nbsp;&nbsp;inherit: &quot;another_description&quot; INDEX;
-&nbsp;&nbsp;&nbsp;state: &quot;description_name&quot; INDEX;
-&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;min: 0 0;
-&nbsp;&nbsp;&nbsp;max: -1 -1;
-&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;fixed: 0 0;
-&nbsp;&nbsp;&nbsp;step: 0 0;
-&nbsp;&nbsp;&nbsp;aspect: 1 1;
-
-&nbsp;&nbsp;&nbsp;rel1 {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;rel2 {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;}
+   inherit: "another_description" INDEX;
+   state: "description_name" INDEX;
+   visible: 1;
+   min: 0 0;
+   max: -1 -1;
+   align: 0.5 0.5;
+   fixed: 0 0;
+   step: 0 0;
+   aspect: 1 1;
+
+   rel1 {
+      ...
+   }
+
+   rel2 {
+      ...
+   }
 }
 </pre>
 
@@ -768,12 +768,12 @@ description {
 
 <ul>
 
-<li id="description_inherit"><code>inherit [another description&#39;s name] [another description&#39;s index]</code>
+<li id="description_inherit"><code>inherit [another description's name] [another description's index]</code>
 <p>Sets the description from which all the properties are inherited. The properties defined in this part override the inherited properties, reducing the amount of necessary code for simple state changes. Note that inheritance in Edje is single level only.</p>
 </li>
 
-<li id="description_source"><code>source [another part&#39;s name]</code>
-<p>Causes the part to use another part&#39;s content as the content of this part. This works only with a proxy part.</p>
+<li id="description_source"><code>source [another part's name]</code>
+<p>Causes the part to use another part's content as the content of this part. This works only with a proxy part.</p>
 </li>
 
 <li id="description_state"><code>state [name for the description] [index]</code>
@@ -795,7 +795,7 @@ description {
 </li>
 
 <li id="description_align"><code>align [X axis] [Y axis]</code>
-<p>When the displayed object&#39;s size is smaller or bigger than its container, this property moves it relatively along both axes inside its container. 0.0 means left/top edges of the object touching container&#39;s respective ones, and 1.0 stands for right/bottom edges of the object (on horizontal/vertical axis, respectively). The default value is <code>0.5 0.5</code>. For a more detailed explanation, see <a href="ui_layouts_n.htm#size_hint">Size Hints</a>.</p>
+<p>When the displayed object's size is smaller or bigger than its container, this property moves it relatively along both axes inside its container. 0.0 means left/top edges of the object touching container's respective ones, and 1.0 stands for right/bottom edges of the object (on horizontal/vertical axis, respectively). The default value is <code>0.5 0.5</code>. For a more detailed explanation, see <a href="ui_layouts_n.htm#size_hint">Size Hints</a>.</p>
 </li>
 
 <li id="description_fixed"><code>fixed [width, 0 or 1] [height, 0 or 1]</code>
@@ -858,18 +858,18 @@ description {
 <li id="description_rel1_2" name="description_rel1_2"><code>description.rel1</code> or <code>description.rel2</code> block
 <pre class="prettyprint">
 description {
-&nbsp;&nbsp;&nbsp;rel1 {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:     0   0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;rel2 {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:    -1  -1;
-&nbsp;&nbsp;&nbsp;}
+   rel1 {
+      relative: 0.0 0.0;
+      offset:     0   0;
+   }
+   rel2 {
+      relative: 1.0 1.0;
+      offset:    -1  -1;
+   }
 }
 </pre>
 
-<p>The <code>rel1</code> and <code>rel2</code> blocks are used to define the position of each corner of the part&#39;s container. <code>rel1</code> refers to the left-top corner and <code>rel2</code> to the right-down corner.</p>
+<p>The <code>rel1</code> and <code>rel2</code> blocks are used to define the position of each corner of the part's container. <code>rel1</code> refers to the left-top corner and <code>rel2</code> to the right-down corner.</p>
 
 <ul>
 
@@ -881,16 +881,16 @@ description {
 <p>Affects the corner position a fixed number of pixels along each axis.</p>
 </li>
 
-<li id="description_rel1_2_to"><code>to [another part&#39;s name]</code>
-<p>Positions the corner relative to another part&#39;s container. Setting to <code>&quot;&quot;</code> resets this value for inherited parts.</p>
+<li id="description_rel1_2_to"><code>to [another part's name]</code>
+<p>Positions the corner relative to another part's container. Setting to <code>""</code> resets this value for inherited parts.</p>
 </li>
 
-<li id="description_rel1_2_to_x"><code>to_x [another part&#39;s name]</code>
-<p>Positions the corner relative to the X axis of another part&#39;s container. This affects the first parameter of the <code>relative</code> property. Setting to <code>&quot;&quot;</code> resets this value for inherited parts.</p>
+<li id="description_rel1_2_to_x"><code>to_x [another part's name]</code>
+<p>Positions the corner relative to the X axis of another part's container. This affects the first parameter of the <code>relative</code> property. Setting to <code>""</code> resets this value for inherited parts.</p>
 </li>
 
-<li id="description_rel1_2_to_y"><code>to_y [another part&#39;s name]</code>
-<p>Positions the corner relative to the Y axis of another part&#39;s container. This affects the second parameter of the <code>relative</code> property. Setting to <code>&quot;&quot;</code> resets this value for inherited parts.</p>
+<li id="description_rel1_2_to_y"><code>to_y [another part's name]</code>
+<p>Positions the corner relative to the Y axis of another part's container. This affects the second parameter of the <code>relative</code> property. Setting to <code>""</code> resets this value for inherited parts.</p>
 </li>
 
 </ul>
@@ -899,24 +899,24 @@ description {
 
 <pre class="prettyprint">
 description {
-&nbsp;&nbsp;&nbsp;image {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;filename.ext&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filename2.ext&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tween:  &quot;filenameN.ext&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:  left right top bottom;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;middle:  0/1/NONE/DEFAULT/SOLID;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill {}
-&nbsp;&nbsp;&nbsp;}
+   image {
+      normal: "filename.ext";
+      tween:  "filename2.ext";
+      tween:  "filenameN.ext";
+      border:  left right top bottom;
+      middle:  0/1/NONE/DEFAULT/SOLID;
+      fill {}
+   }
 }
 </pre>
 <p>The <code>image</code> block defines the settings for an image used in a visual element.</p>
 <ul>
 
-<li id="description_image_normal"><code>normal [image&#39;s filename]</code>
+<li id="description_image_normal"><code>normal [image's filename]</code>
 <p>Sets the name of the image to be used as previously declared in the <code>images</code> block. In an animation, this is the first and last image displayed. The file name is required in all image parts.</p>
 </li>
 
-<li id="description_image_tween"><code>tween [image&#39;s filename]</code>
+<li id="description_image_tween"><code>tween [image's filename]</code>
 <p>Sets the name of an image to be used in an animation loop. An <code>image</code> block can have none, one, or multiple tween declarations. Images are displayed in the order they are listed, during the transition to the state they are declared in; the <code>normal</code> image is the final state.</p>
 </li>
 
@@ -954,12 +954,12 @@ description {
 
 <pre class="prettyprint">
 image {
-&nbsp;&nbsp;&nbsp;fill {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SCALE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;smooth: 0-1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size {}
-&nbsp;&nbsp;&nbsp;}
+   fill {
+      type: SCALE;
+      smooth: 0-1;
+      origin {}
+      size {}
+   }
 }
 </pre>
 
@@ -986,21 +986,21 @@ image {
 
 <pre class="prettyprint">
 image {
-&nbsp;&nbsp;&nbsp;fill {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;origin {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: 0 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   fill {
+      origin {
+         relative: 0.0 0.0;
+         offset: 0 0;
+      }
+   }
 }
 </pre>
 
-<p>The <code>origin</code> block is used to place the starting point inside the displayed element that is used to render the tile. By default, the origin is set at the element&#39;s left-top corner.</p>
+<p>The <code>origin</code> block is used to place the starting point inside the displayed element that is used to render the tile. By default, the origin is set at the element's left-top corner.</p>
 
 <ul>
 
 <li id="description_image_fill_origin_relative"><code>relative [X axis] [Y axis]</code>
-<p>Sets the starting point relative to the displayed element&#39;s content.</p>
+<p>Sets the starting point relative to the displayed element's content.</p>
 </li>
 <li id="description_image_fill_origin_offset"><code>offset [X axis] [Y axis]</code>
 <p>Affects the starting point a fixed number of pixels along each axis.</p>
@@ -1013,12 +1013,12 @@ image {
 
 <pre class="prettyprint">
 image {
-&nbsp;&nbsp;&nbsp;fill {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset: -1 -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   fill {
+      size {
+         relative: 1.0 1.0;
+         offset: -1 -1;
+      }
+   }
 }
 </pre>
 
@@ -1043,17 +1043,17 @@ image {
 
 <pre class="prettyprint">
 text {
-&nbsp;&nbsp;&nbsp;text: &quot;some string of text to display&quot;;
-&nbsp;&nbsp;&nbsp;font: &quot;font_name&quot;;
-&nbsp;&nbsp;&nbsp;size: SIZE;
-&nbsp;&nbsp;&nbsp;text_class: &quot;class_name&quot;;
-&nbsp;&nbsp;&nbsp;fit: horizontal vertical;
-&nbsp;&nbsp;&nbsp;min: horizontal vertical;
-&nbsp;&nbsp;&nbsp;max: horizontal vertical;
-&nbsp;&nbsp;&nbsp;align: X-axis Y-axis;
-&nbsp;&nbsp;&nbsp;source: &quot;part_name&quot;;
-&nbsp;&nbsp;&nbsp;text_source: &quot;text_part_name&quot;;
-&nbsp;&nbsp;&nbsp;style: &quot;stylename&quot;;
+   text: "some string of text to display";
+   font: "font_name";
+   size: SIZE;
+   text_class: "class_name";
+   fit: horizontal vertical;
+   min: horizontal vertical;
+   max: horizontal vertical;
+   align: X-axis Y-axis;
+   source: "part_name";
+   text_source: "text_part_name";
+   style: "stylename";
 }
 </pre>
 
@@ -1105,11 +1105,11 @@ text {
 <p>Changes the position of the point of balance inside the container. The default value is <code>0.5 0.5</code>.</p>
 </li>
 
-<li id="description_text_source"><code>source [another TEXT part&#39;s name]</code>
+<li id="description_text_source"><code>source [another TEXT part's name]</code>
 <p>Causes the part to use the text properties (like font and size) of another part and update them as they change.</p>
 </li>
 
-<li id="description_text_text_source"><code>text_source [another TEXT part&#39;s name]</code>
+<li id="description_text_text_source"><code>text_source [another TEXT part's name]</code>
 <p>Causes the part to display the text content of another part and update them as they change.</p>
 </li>
 
@@ -1124,10 +1124,10 @@ text {
 
 <pre class="prettyprint">
 box {
-&nbsp;&nbsp;&nbsp;layout: &quot;vertical&quot;;
-&nbsp;&nbsp;&nbsp;padding: 0 2;
-&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;min: 0 0;
+   layout: "vertical";
+   padding: 0 2;
+   align: 0.5 0.5;
+   min: 0 0;
 }
 </pre>
 
@@ -1172,10 +1172,10 @@ box {
 
 <pre class="prettyprint">
 table {
-&nbsp;&nbsp;&nbsp;homogeneous: TABLE;
-&nbsp;&nbsp;&nbsp;padding: 0 2;
-&nbsp;&nbsp;&nbsp;align: 0.5 0.5;
-&nbsp;&nbsp;&nbsp;min: 0 0;
+   homogeneous: TABLE;
+   padding: 0 2;
+   align: 0.5 0.5;
+   min: 0 0;
 }
 </pre>
 
@@ -1210,28 +1210,28 @@ table {
 
 <pre class="prettyprint">
 map {
-&nbsp;&nbsp;&nbsp;perspective: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;light: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;on: 1;
-&nbsp;&nbsp;&nbsp;smooth: 1;
-&nbsp;&nbsp;&nbsp;perspective_on: 1;
-&nbsp;&nbsp;&nbsp;backface_cull: 1;
-&nbsp;&nbsp;&nbsp;alpha: 1;
-
-&nbsp;&nbsp;&nbsp;rotation {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;}
+   perspective: "name";
+   light: "name";
+   on: 1;
+   smooth: 1;
+   perspective_on: 1;
+   backface_cull: 1;
+   alpha: 1;
+
+   rotation {
+      ...
+   }
 }
 </pre>
 
 <ul>
 
-<li id="description_map_perspective"><code>perspective [another part&#39;s name]</code>
+<li id="description_map_perspective"><code>perspective [another part's name]</code>
 <p>Sets the part that is used as the perspective point for giving a part a 3D look. The perspective point must have a perspective section that provides zplane and focal properties. The center of this part is used as the focal point, thus size, color, and visibility are not relevant, just the center point, zplane, and focal are used. This also implicitly enables perspective transforms.</p>
 </li>
 
-<li id="description_map_light"><code>light [another part&#39;s name]</code>
-<p>Sets the part that is used as the light for calculating the brightness (based on how directly the part&#39;s surface is facing the light source point). Like the perspective point part, the center point is used and zplane is used for the z position (0 being the zero-plane where all 2D objects normally live) and positive values being further away into the distance. The light part <code>color</code> property is used as the light color (alpha not used for light color). The <code>color2</code> property is used for the ambient lighting when calculating brightness (alpha also not used).</p>
+<li id="description_map_light"><code>light [another part's name]</code>
+<p>Sets the part that is used as the light for calculating the brightness (based on how directly the part's surface is facing the light source point). Like the perspective point part, the center point is used and zplane is used for the z position (0 being the zero-plane where all 2D objects normally live) and positive values being further away into the distance. The light part <code>color</code> property is used as the light color (alpha not used for light color). The <code>color2</code> property is used for the ambient lighting when calculating brightness (alpha also not used).</p>
 </li>
 
 <li id="description_map_on"><code>on [1 or 0]</code>
@@ -1267,10 +1267,10 @@ map {
 
 <pre class="prettyprint">
 rotation {
-&nbsp;&nbsp;&nbsp;center: &quot;name&quot;;
-&nbsp;&nbsp;&nbsp;x: 45.0;
-&nbsp;&nbsp;&nbsp;y: 45.0;
-&nbsp;&nbsp;&nbsp;z: 45.0;
+   center: "name";
+   x: 45.0;
+   y: 45.0;
+   z: 45.0;
 }
 </pre>
 
@@ -1278,8 +1278,8 @@ rotation {
 
 <ul>
 
-<li id="description_map_rotation_center"><code>center [another part&#39;s name]</code>
-<p>Sets the part that is used as the center of rotation when rotating the part with this description. The part&#39;s center point is used as the rotation center when applying rotation around the X, Y and Z axes. If no center is given, the part&#39;s original center itself is used for the rotation center.</p>
+<li id="description_map_rotation_center"><code>center [another part's name]</code>
+<p>Sets the part that is used as the center of rotation when rotating the part with this description. The part's center point is used as the rotation center when applying rotation around the X, Y and Z axes. If no center is given, the part's original center itself is used for the rotation center.</p>
 </li>
 
 <li id="description_map_rotation_x"><code>x [X degrees]</code>
@@ -1300,8 +1300,8 @@ rotation {
 
 <pre class="prettyprint">
 perspective {
-&nbsp;&nbsp;&nbsp;zplane: 0;
-&nbsp;&nbsp;&nbsp;focal: 1000;
+   zplane: 0;
+   focal: 1000;
 }
 </pre>
 
@@ -1323,10 +1323,10 @@ perspective {
 
 <pre class="prettyprint">
 link {
-&nbsp;&nbsp;&nbsp;base: &quot;edje,signal&quot; &quot;edje&quot;;
-&nbsp;&nbsp;&nbsp;transition: LINEAR 0.2;
-&nbsp;&nbsp;&nbsp;in: 0.5 0.1;
-&nbsp;&nbsp;&nbsp;after: &quot;some_program&quot;;
+   base: "edje,signal" "edje";
+   transition: LINEAR 0.2;
+   in: 0.5 0.1;
+   after: "some_program";
 }
 </pre>
 
@@ -1334,15 +1334,15 @@ link {
 
 
 <pre class="prettyprint">
-action: STATE_SET &quot;default&quot;;
-signal: &quot;edje,signal&quot;;
-source: &quot;edje&quot;;
+action: STATE_SET "default";
+signal: "edje,signal";
+source: "edje";
 </pre>
 
 <ul>
 
 <li id="description_map_link_base"><code>base [signal] [source]</code>
-<p>Sets the signal and source which triggers the transition to this state. The source parameter is optional, and it is filled with the current group&#39;s default value if it is not provided.</p>
+<p>Sets the signal and source which triggers the transition to this state. The source parameter is optional, and it is filled with the current group's default value if it is not provided.</p>
 </li>
 </ul>
 </li>
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_positioning_parts_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_positioning_parts_n.htm
index 6451cec..d4d53f3 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_positioning_parts_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_positioning_parts_n.htm
@@ -48,53 +48,53 @@
 <pre class="prettyprint">
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;blue&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the size to 200x200 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Blue color */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;}
+   name: "rectangle";
+   type: RECT;
+   description
+   {
+      state: "blue" 0.0;
+      align: 0.0 0.0;
+      /* Set the size to 200x200 */
+      min: 200 200;
+      max: 200 200;
+      /* Blue color */
+      color: 0 0 255 255;
+   }
 }
 </pre>
 </li>
 <li>Define the position of the part in the <code>rel1</code> and <code>rel2</code> blocks, which determine the upper-left corner and the lower-right corner of the part.
-<p>The position can be defined in relation to another part (with the <code>relative</code> property), or as an offset (with the <code>offset</code> property). When using relative positioning, the <code>to</code>, <code>to_x</code> and <code>to_y</code> properties are used to define in relation to which part the positioning is done. If nothing else is specified, the positioning is in relation to the parent&#39;s part.</p>
+<p>The position can be defined in relation to another part (with the <code>relative</code> property), or as an offset (with the <code>offset</code> property). When using relative positioning, the <code>to</code>, <code>to_x</code> and <code>to_y</code> properties are used to define in relation to which part the positioning is done. If nothing else is specified, the positioning is in relation to the parent's part.</p>
 
 <p>To demonstrate relative positioning, the following example creates another rectangle part and positions it under the first part created above. The upper-left corner of the new part starts at the lower-left corner of the previous one.</p>
 
 <pre class="prettyprint">
 part
 {
-&nbsp;&nbsp;&nbsp;name: &quot;rectangle2&quot;;
-&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;green&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the size to 200 x 200 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 200 200;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Green color */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 255 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the position */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* rel1 is relative to &quot;rectangle&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 0.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: &quot;rectangle&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* rel2 is relative to the parent */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative: 1.0 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   name: "rectangle2";
+   type: RECT;
+   description
+   {
+      state: "green" 0.0;
+      align: 0.0 0.0;
+      /* Set the size to 200 x 200 */
+      min: 200 200;
+      max: 200 200;
+      /* Green color */
+      color: 0 255 0 255;
+      /* Set the position */
+      /* rel1 is relative to "rectangle" */
+      rel1
+      {
+         relative: 0.0 1.0;
+         to: "rectangle";
+      }
+      /* rel2 is relative to the parent */
+      rel2
+      {
+         relative: 1.0 1.0;
+      }
+   }
 }
 </pre>
 
@@ -112,8 +112,8 @@ part
 
 <p>The following figure shows the pixel positions for a 4 x 4 rectangle. The indexes start in the top-left corner at (0, 0), and increase to the right and to the bottom. Since the indexes have started at 0, the fourth pixel has an index of 3. To create a 2 x 2 blue rectangle centered inside the green rectangle, the top-left corner must be (1, 1) and the bottom-right one (2, 2).</p>
 
-<p align="center"><strong>Figure: Offset indexes</strong></p> 
-<p align="center"><img alt="Offset indexes" src="../../../images/rel1_rel2_offsets.png" /></p> 
+<p align="center"><strong>Figure: Offset indexes</strong></p>
+<p align="center"><img alt="Offset indexes" src="../../../images/rel1_rel2_offsets.png" /></p>
 
 <p>To determine the relative position of the blue rectangle, Edje needs the following definitions:</p>
 <ul>
@@ -125,13 +125,13 @@ part
 <p>The following code example shows the definitions:</p>
 
 <pre class="prettyprint">
-name: &quot;blue rectangle&quot;;
+name: "blue rectangle";
 
-rel1.to: &quot;green rectangle&quot;;
+rel1.to: "green rectangle";
 rel1.relative: 0 0;
 rel1.offset: 1 1;
 
-rel2.to: &quot;green rectangle&quot;;
+rel2.to: "green rectangle";
 rel2.relative: 0 0;
 rel2.offset: 2 2;
 </pre>
@@ -141,19 +141,19 @@ rel2.offset: 2 2;
 <p>The following example is similar to the previous one but it uses relative positioning instead of offsets to achieve the same result for the 4 x 4 rectangle (though it can scale to larger sizes as well). The blue rectangle starts at 25% of the green rectangle (both vertically and horizontally) and ends at 75% of it (both vertically and horizontally). Like in the previous example, the blue rectangle is named and Edje is told what the object of reference is:</p>
 
 <pre class="prettyprint">
-name: &quot;blue rectangle&quot;;
+name: "blue rectangle";
 
-rel1.to: &quot;green rectangle&quot;;
+rel1.to: "green rectangle";
 rel1.relative: 0.25 0.25;
 
-rel2.to: &quot;green rectangle&quot;;
+rel2.to: "green rectangle";
 rel2.relative: 0.75 0.75;
 </pre>
 
 <p>The following figure shows how to refer to pixels using relative positioning when the offsets are (0, 0).</p>
 
-<p align="center"><strong>Figure: Relative positioning</strong></p> 
-<p align="center"><img alt="Relative positioning" src="../../../images/rel1_rel2_offsets_and_relative.png" /></p> 
+<p align="center"><strong>Figure: Relative positioning</strong></p>
+<p align="center"><img alt="Relative positioning" src="../../../images/rel1_rel2_offsets_and_relative.png" /></p>
 
 <p>Note that in addressing the pixels, (0, 0) is addressed through <code>relative: 0 0; offset 0 0;</code> and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through <code>relative: 0.75 0.75; offset: 0 0;</code> is at (3, 3) and not (2, 2).</p>
 
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_program_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_program_n.htm
index ac95fd1..4eecfa2 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_program_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_program_n.htm
@@ -53,28 +53,28 @@
 
 <pre class="prettyprint">
 program {
-&nbsp;&nbsp;&nbsp;/* Set the name of the program */
-&nbsp;&nbsp;&nbsp;<a href="#program_name">name</a>: &quot;programname&quot;;
-&nbsp;&nbsp;&nbsp;/* Set the signals which trigger the program */
-&nbsp;&nbsp;&nbsp;<a href="#signal">signal</a>: &quot;signalname&quot;;
-&nbsp;&nbsp;&nbsp;/* Filter incoming signals depending on the sender name */
-&nbsp;&nbsp;&nbsp;<a href="#program_source">source</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;/* Filter incoming signals depending on the part&#39;s state */
-&nbsp;&nbsp;&nbsp;<a href="#filter">filter</a>: &quot;partname&quot; &quot;statename&quot;;
-&nbsp;&nbsp;&nbsp;/* Delay the program by X seconds plus a random time between 0 and Y */
-&nbsp;&nbsp;&nbsp;<a href="#in">in</a>: 0.3 0.0;
-&nbsp;&nbsp;&nbsp;/* Set the action to perform */
-&nbsp;&nbsp;&nbsp;<a href="#action">action</a>: STATE_SET &quot;statename&quot; state_value;
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   If the action is STATE_SET,
-&nbsp;&nbsp;&nbsp;   define a transition from the current to the target state
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;<a href="#transition">transition</a>: LINEAR 0.5;
-&nbsp;&nbsp;&nbsp;/* If the action is SIGNAL_EMIT, set the name of the part which receives the signal */
-&nbsp;&nbsp;&nbsp;<a href="#target">target</a>: &quot;partname&quot;;
-&nbsp;&nbsp;&nbsp;/* Run another program after the current one is done */
-&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;programname&quot;;
-&nbsp;&nbsp;&nbsp;<a href="#after">after</a>: &quot;anotherprogram&quot;;
+   /* Set the name of the program */
+   <a href="#program_name">name</a>: "programname";
+   /* Set the signals which trigger the program */
+   <a href="#signal">signal</a>: "signalname";
+   /* Filter incoming signals depending on the sender name */
+   <a href="#program_source">source</a>: "partname";
+   /* Filter incoming signals depending on the part's state */
+   <a href="#filter">filter</a>: "partname" "statename";
+   /* Delay the program by X seconds plus a random time between 0 and Y */
+   <a href="#in">in</a>: 0.3 0.0;
+   /* Set the action to perform */
+   <a href="#action">action</a>: STATE_SET "statename" state_value;
+   /*
+      If the action is STATE_SET,
+      define a transition from the current to the target state
+   */
+   <a href="#transition">transition</a>: LINEAR 0.5;
+   /* If the action is SIGNAL_EMIT, set the name of the part which receives the signal */
+   <a href="#target">target</a>: "partname";
+   /* Run another program after the current one is done */
+   <a href="#after">after</a>: "programname";
+   <a href="#after">after</a>: "anotherprogram";
 }
 </pre>
 
@@ -126,9 +126,9 @@ program {
 <li><code>DRAG_VAL_STEP</code>: Set a step for the <code>draggable</code> part (x, y values)</li>
 <li><code>DRAG_VAL_PAGE</code>: Set a page for the <code>draggable</code> part (x, y values)</li>
 <li><code>FOCUS_SET</code>: Set the focus to the target group</li>
-<li><code>PLAY_SAMPLE &quot;sample name&quot; speed (channel)</code>: Play a music sample clip
+<li><code>PLAY_SAMPLE "sample name" speed (channel)</code>: Play a music sample clip
 
-<p><code>PLAY_SAMPLE</code>&#39;s (optional) channel can be one of:</p>
+<p><code>PLAY_SAMPLE</code>'s (optional) channel can be one of:</p>
 <ul>
 <li><code>EFFECT/FX</code></li>
 <li><code>BACKGROUND/BG</code></li>
@@ -140,8 +140,8 @@ program {
 </ul>
 </li>
 
-<li><code>PLAY_TONE &quot;tone name&quot; duration_in_seconds (Range 0.1 to 10.0)</code>: Play a predefined tone of a specific duration</li>
-<li><code>PLAY_VIBRATION &quot;sample name&quot; repeat (repeat count)</code></li>
+<li><code>PLAY_TONE "tone name" duration_in_seconds (Range 0.1 to 10.0)</code>: Play a predefined tone of a specific duration</li>
+<li><code>PLAY_VIBRATION "sample name" repeat (repeat count)</code></li>
 </ul></li>
 
 
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_signal_handling_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_signal_handling_n.htm
index faa1301..a208b61 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_signal_handling_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_signal_handling_n.htm
@@ -40,48 +40,48 @@
 
 <pre class="prettyprint">
 collections {
-&nbsp;&nbsp;&nbsp;group { name: &quot;main&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part { name: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 0 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 1.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part { name: &quot;swallow.check&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.relative: 0.0 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;programs {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program { name: &quot;to_default_0&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">signal: &quot;to,state,default,0&quot;;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 0.00;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program { name: &quot;to_default_1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">signal: &quot;to,state,default,1&quot;;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action: STATE_SET &quot;default&quot; 1.00;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: ACCELERATE 0.5 CURRENT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group { name: "main";
+      parts {
+         part { name: "rect1";
+            type: RECT;
+            description {
+               state: "default" 0.0;
+               min: 100 100;
+               max: 100 100;
+               color: 255 0 0 255;
+            }
+            description {
+               state: "default" 1.0;
+               min: 100 100;
+               max: 100 100;
+               color: 0 0 255 255;
+            }
+         }
+         part { name: "swallow.check";
+            type: SWALLOW;
+            description {
+               state: "default" 0.0;
+               align: 0.0 0.0;
+               rel1.relative: 0.0 0.0;
+               rel2.relative: 0.0 0.0;
+            }
+         }
+      }
+      programs {
+         program { name: "to_default_0";
+            <span class="highlight">signal: "to,state,default,0";</span>
+            action: STATE_SET "default" 0.00;
+            transition: ACCELERATE 0.5 CURRENT;
+            target: "rect1";
+         }
+         program { name: "to_default_1";
+            <span class="highlight">signal: "to,state,default,1";</span>
+            action: STATE_SET "default" 1.00;
+            transition: ACCELERATE 0.5 CURRENT;
+            target: "rect1";
+         }
+      }
+   }
 }
 </pre>
 </li>
@@ -94,45 +94,45 @@ collections {
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = {0,};
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;/* Create a window */
-&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;/* Create a conformant */
-&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;/* Set a base layout */
-&nbsp;&nbsp;&nbsp;app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
-&nbsp;&nbsp;&nbsp;ad-&gt;layout = elm_layout_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;layout, edj_path, GRP_MAIN);
-&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_EXPAND,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;ad-&gt;check = elm_check_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;swallow.check&quot;, ad-&gt;check);
-&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;check, &quot;changed&quot;, _check_toggled, ad);
-
-&nbsp;&nbsp;&nbsp;/* Show the window */
-&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+   char edj_path[PATH_MAX] = {0,};
+
+   /* Create a window */
+   ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+   elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+   elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+   if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
+      int rots[4] = {0, 90, 180, 270};
+      elm_win_wm_rotation_available_rotations_set(ad-&gt;win,
+                                                  (const int *)(&amp;rots), 4);
+   }
+
+   evas_object_smart_callback_add(ad-&gt;win, "delete,request",
+                                  win_delete_request_cb, NULL);
+   eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+   /* Create a conformant */
+   ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+   elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+   elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
+   evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND,
+                                    EVAS_HINT_EXPAND);
+   elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+   evas_object_show(ad-&gt;conform);
+
+   /* Set a base layout */
+   app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+   ad-&gt;layout = elm_layout_add(ad-&gt;win);
+   elm_layout_file_set(ad-&gt;layout, edj_path, GRP_MAIN);
+   evas_object_size_hint_weight_set(ad-&gt;layout, EVAS_HINT_EXPAND,
+                                    EVAS_HINT_EXPAND);
+
+   ad-&gt;check = elm_check_add(ad-&gt;win);
+   elm_object_part_content_set(ad-&gt;layout, "swallow.check", ad-&gt;check);
+   evas_object_smart_callback_add(ad-&gt;check, "changed", _check_toggled, ad);
+
+   /* Show the window */
+   evas_object_show(ad-&gt;win);
 }
 </pre>
 
@@ -147,12 +147,12 @@ create_base_gui(appdata_s *ad)
 static void
 _check_toggled(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+   appdata_s *ad = data;
 
-&nbsp;&nbsp;&nbsp;if (elm_check_state_get(obj))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;to,state,default,1&quot;, &quot;&quot;);
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;to,state,default,0&quot;, &quot;&quot;);
+   if (elm_check_state_get(obj))
+      elm_object_signal_emit(ad-&gt;layout, "to,state,default,1", "");
+   else
+      elm_object_signal_emit(ad-&gt;layout, "to,state,default,0", "");
 }
 </pre>
 <p>The following figure displays the result.</p>
diff --git a/org.tizen.guides/html/native/ui/efl/learn_edc_styles_n.htm b/org.tizen.guides/html/native/ui/efl/learn_edc_styles_n.htm
index 2828cc3..80207c0 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/learn_edc_styles_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/learn_edc_styles_n.htm
@@ -50,11 +50,11 @@
 
 <pre class="prettyprint">
 styles {
-&nbsp;&nbsp;&nbsp;style {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#name">name</a>: &quot;stylename&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#base">base</a>: &quot;..default style properties..&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#tag">tag</a>: &quot;tagname&quot; &quot;..style properties..&quot;;
-&nbsp;&nbsp;&nbsp;}
+   style {
+      <a href="#name">name</a>: "stylename";
+      <a href="#base">base</a>: "..default style properties..";
+      <a href="#tag">tag</a>: "tagname" "..style properties..";
+   }
 }
 </pre>
 
@@ -88,7 +88,7 @@ styles {
 </li>
 
 <li id="tag"><code>tag [tag name] [style properties string]</code>
-<p>Sets the style to be applied only to text between style <code>&lt;tags&gt;..&lt;/tags&gt;</code>. When creating paired tags, like <code>&lt;bold&gt;&lt;/bold&gt;</code>, a &#39;+&#39; sign must be added at the start of the style properties of the first part (<code>&lt;bold&gt;</code>). If the second part (<code>&lt;/bold&gt;</code>) is also defined, a &#39;-&#39; sign must be added to its style properties. This applies only to paired tags; single tags, like <code>&lt;tab&gt;</code>, must not have a starting &#39;+&#39;.</p>
+<p>Sets the style to be applied only to text between style <code>&lt;tags&gt;..&lt;/tags&gt;</code>. When creating paired tags, like <code>&lt;bold&gt;&lt;/bold&gt;</code>, a '+' sign must be added at the start of the style properties of the first part (<code>&lt;bold&gt;</code>). If the second part (<code>&lt;/bold&gt;</code>) is also defined, a '-' sign must be added to its style properties. This applies only to paired tags; single tags, like <code>&lt;tab&gt;</code>, must not have a starting '+'.</p>
    <ul>
          <li><code>br</code></li>
          <li><code>tab</code></li>
@@ -102,12 +102,12 @@ styles {
 <p>The following code is the style sample for the text style:</p>
 
 <pre class="prettyprint">
-style { name: &quot;list_text_main&quot;;
-&nbsp;&nbsp;&nbsp;base: &quot;font=Tizen:style=Regular font_size=30 color=#ffffff ellipsis=1.0&quot;;
-&nbsp;&nbsp;&nbsp;tag: &quot;br&quot; &quot;\n&quot;;\
-&nbsp;&nbsp;&nbsp;tag: &quot;ps&quot; &quot;ps&quot;;\
-&nbsp;&nbsp;&nbsp;tag: &quot;tab&quot; &quot;\t&quot;;\
-&nbsp;&nbsp;&nbsp;tag: &quot;b&quot; &quot;+ font_weight=Bold&quot;;
+style { name: "list_text_main";
+   base: "font=Tizen:style=Regular font_size=30 color=#ffffff ellipsis=1.0";
+   tag: "br" "\n";\
+   tag: "ps" "ps";\
+   tag: "tab" "\t";\
+   tag: "b" "+ font_weight=Bold";
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/native/ui/efl/main_loop_n.htm b/org.tizen.guides/html/native/ui/efl/main_loop_n.htm
index 240ea06..fd825f4 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/main_loop_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/main_loop_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Handling the Main Loop</title> 
- </head> 
+  <title>Handling the Main Loop</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -34,7 +34,7 @@
                        <li><a href="#Threads">Threads</a></li>
                        <li><a href="#Idlers">Idlers</a></li>
                </ul>
-               
+
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
@@ -43,16 +43,16 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Handling the Main Loop</h1> 
-  
+  <h1>Handling the Main Loop</h1>
+
 <p>The EFL is event-driven. This means that the application polls for data, and listens for events to interact with it.</p>
 
 <p>The Ecore library provides the main loop abstraction. It gets data when data is available and sends the events so that costly polling threads are not needed. Ecore manages polling, timers, events, and file descriptors. When there is no ongoing event, the main loop automatically enters an idle mode, minimizing the power consumption. The loop wakes up when needed.</p>
-  
+
  <h2 id="start" name="start">Starting the Main Loop</h2>
 
 <p>To start the Ecore main loop and move your application into the running state, call the <code>ui_app_main()</code> function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.</p>
@@ -61,18 +61,18 @@
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;ad);
+    ret = ui_app_main(argc, argv, &amp;event_callback,
+                      &amp;ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
-<p>When your application is running:</p> 
+<p>When your application is running:</p>
 <ol><li>Create a window and organize the UI components inside the window.</li>
 <li>Create the application logic code to be called when callbacks or timed events occurs (for example, animators for animations and timers for timeouts).</li></ol>
 
-  
+
 <h2 id="Timers" name="Timers">Timers</h2>
 
 <p>Ecore provides timers, which schedule events that are executed later at a specific time. The event can occur once or several times at specific intervals.</p>
@@ -93,13 +93,13 @@ main(int argc, char *argv[])
 Eina_Bool
 my_timed_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;count++;
+    static int count = 0;
+    count++;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (count &lt; 5)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    if (count &lt; 5)
+        return ECORE_CALLBACK_RENEW;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+    return ECORE_CALLBACK_CANCEL;
 }
 ecore_timer_add(2.0, my_timed_cb, my_data);
 </pre>
@@ -110,11 +110,11 @@ ecore_timer_add(2.0, my_timed_cb, my_data);
 
 <p>To manage a timer:</p>
 <ul>
-<li>To change the timer&#39;s interval, use the <code>ecore_timer_interval_set()</code> function. The interval is specified in seconds. If set during a timer call, this affects the next interval. Use the <code>ecore_timer_interval_get()</code> function to get the timer&#39;s current interval.</li>
+<li>To change the timer's interval, use the <code>ecore_timer_interval_set()</code> function. The interval is specified in seconds. If set during a timer call, this affects the next interval. Use the <code>ecore_timer_interval_get()</code> function to get the timer's current interval.</li>
 
-<li>To get the timer&#39;s pending time, use the <code>ecore_timer_pending_get()</code> function.</li>
+<li>To get the timer's pending time, use the <code>ecore_timer_pending_get()</code> function.</li>
 
-<li>To delay the timer&#39;s next occurrence, use the <code>ecore_timer_delay()</code> function. The function adds the specified time to the current interval. It does not change the future occurrences&#39; interval. You can also reset the current interval to its full value by using the <code>ecore_timer_reset()</code> function.</li>
+<li>To delay the timer's next occurrence, use the <code>ecore_timer_delay()</code> function. The function adds the specified time to the current interval. It does not change the future occurrences' interval. You can also reset the current interval to its full value by using the <code>ecore_timer_reset()</code> function.</li>
 
 <li>To pause the currently running timer, use the <code>ecore_timer_freeze()</code> function. The remaining time is saved and used again when the timer is resumed with the <code>ecore_timer_thaw()</code> function.</li>
 
@@ -141,12 +141,12 @@ ecore_timer_add(2.0, my_timed_cb, my_data);
 Eina_Bool
 my_anim_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;static int count = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;count++;
-&nbsp;&nbsp;&nbsp;&nbsp;if (count &lt; 5)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    static int count = 0;
+    count++;
+    if (count &lt; 5)
+        return ECORE_CALLBACK_RENEW;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+    return ECORE_CALLBACK_CANCEL;
 }
 ecore_animator_add(my_anim_cb, my_data);
 </pre>
@@ -166,10 +166,10 @@ ecore_animator_add(my_anim_cb, my_data);
 Eina_Bool
 my_anim_cb(void *data, double position)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (position &lt; .5)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    if (position &lt; .5)
+        return ECORE_CALLBACK_RENEW;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+    return ECORE_CALLBACK_CANCEL;
 }
 ecore_animator_timeline_add(5., my_anim_cb, my_data);
 </pre>
@@ -191,8 +191,8 @@ ecore_animator_timeline_add(5., my_anim_cb, my_data);
 <li><code>ECORE_POS_MAP_SPRING</code>: start at 0.0, then wobble like a spring to the rest position 1.0, and wobble <code>v2</code> times, with a decay factor of <code>v1</code>.</li>
 </ul>
 
-<p align="center"><strong>Figure: Position maps</strong></p> 
-<p align="center"><img alt="Position maps" src="../../../images/pos_map_all.png" /></p> 
+<p align="center"><strong>Figure: Position maps</strong></p>
+<p align="center"><img alt="Position maps" src="../../../images/pos_map_all.png" /></p>
 </li>
 
 <li>To destroy the animator, use the <code>ecore_animator_del()</code> function. The animator to destroy must be running, that is, it has not returned a <code>false</code> value. If the animator is not running, the function cannot be called.</li>
@@ -223,11 +223,11 @@ ecore_animator_timeline_add(5., my_anim_cb, my_data);
 Eina_Bool
 my_fd_cb(void *data, Ecore_Fd_Handler *handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int fd;
-&nbsp;&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
-&nbsp;&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); /* This is guaranteed not to block */
+    int fd;
+    fd = ecore_main_fd_handler_fd_get(handler);
+    count = read(fd, buf, sizeof(buf)); /* This is guaranteed not to block */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    return ECORE_CALLBACK_RENEW;
 }
 ecore_main_fd_handler_add(my_fd, ECORE_FD_READ, my_fd_cb, my_data, NULL, NULL);
 </pre>
@@ -235,7 +235,7 @@ ecore_main_fd_handler_add(my_fd, ECORE_FD_READ, my_fd_cb, my_data, NULL, NULL);
 
 <li>To delete a file descriptor handler, use the <code>ecore_main_fd_handler_del()</code> function. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</li>
 
-<li>To get the handler&#39;s file descriptor, use the <code>ecore_main_fd_handler_fd_get()</code> function.</li>
+<li>To get the handler's file descriptor, use the <code>ecore_main_fd_handler_fd_get()</code> function.</li>
 
 <li>To select whether a flag is active on a handler, use the <code>ecore_main_fd_handler_active_get()</code> function. For example, the handler is set to monitor both <code>ECORE_FD_READ</code> and <code>ECORE_FD_ERROR</code>. The following example finds out whether the function was called because of an error:
 
@@ -243,19 +243,19 @@ ecore_main_fd_handler_add(my_fd, ECORE_FD_READ, my_fd_cb, my_data, NULL, NULL);
 Eina_Bool
 my_fd_cb(void *data, Ecore_Fd_Handler *handler)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int fd;
-&nbsp;&nbsp;&nbsp;&nbsp;fd = ecore_main_fd_handler_fd_get(handler);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ecore_main_fd_handler_active_get(handler, ECORE_FD_ERROR) == EINA_TRUE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* We have an error! */
+    int fd;
+    fd = ecore_main_fd_handler_fd_get(handler);
+    if (ecore_main_fd_handler_active_get(handler, ECORE_FD_ERROR) == EINA_TRUE) {
+        /* We have an error! */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;count = read(fd, buf, sizeof(buf)); /* This is guaranteed not to block */
+        return ECORE_CALLBACK_CANCEL;
+    }
+    count = read(fd, buf, sizeof(buf)); /* This is guaranteed not to block */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    return ECORE_CALLBACK_RENEW;
 }
 ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;my_data, NULL, NULL);
+                          my_data, NULL, NULL);
 </pre>
 </li>
 
@@ -280,53 +280,53 @@ ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb,
 
 <pre class="prettyprint">
 struct feedback_msg {
-&nbsp;&nbsp;&nbsp;&nbsp;int pos;
+    int pos;
 };
 
 void
 my_short_job(void *data, Ecore_Thread *thread)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;usleep(200000);
+    usleep(200000);
 }
 
 void
 my_feedback_job(void *data, Ecore_Thread *thread)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int i;
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 100; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usleep(50000); /* You can have some real computation done */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct feedback_msg *message = malloc(sizeof(struct feedback_msg));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (message) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message-&gt;pos = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ecore_thread_check(thread))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int i;
+    for (i = 0; i &lt; 100; i++) {
+        usleep(50000); /* You can have some real computation done */
+        struct feedback_msg *message = malloc(sizeof(struct feedback_msg));
+        if (message) {
+            message-&gt;pos = i;
+            ecore_thread_feedback(thread, message);
+        }
+        if (ecore_thread_check(thread))
+            return;
+    }
 }
 
 void
 my_feedback_job_notify(void *data, Ecore_Thread *thread, void *msg)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;struct feedback_msg *message = msg;
-&nbsp;&nbsp;&nbsp;&nbsp;free(message);
+    struct feedback_msg *message = msg;
+    free(message);
 }
 
 void
 my_job_end(void *data, Ecore_Thread *thread)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has normally ended.\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Thread has normally ended.\n");
 }
 
 void
 my_job_cancel(void *data, Ecore_Thread *thread)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Thread has been cancelled.\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Thread has been cancelled.\n");
 }
 
 ecore_thread_run(my_short_job, my_job_end, my_job_cancel, my_data);
-ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;my_job_cancel, my_data, EINA_FALSE);
+ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end,
+                          my_job_cancel, my_data, EINA_FALSE);
 </pre>
 
 <p>To manage threads:</p>
@@ -350,8 +350,8 @@ ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end,
 
 <p>When the rendering is done and all work is finished, the main loop enters its idle state until the next loop. You can get the functions of your application called back before the main loop enters or exits the idle state, or when it is in the idle state. They are respectively called <code>Ecore_Idle_Enterer</code>, <code>Ecore_Idle_Exiter</code>, and <code>Ecore_Idler</code>.</p>
 
-<p align="center"><strong>Figure: Idle loop</strong></p> 
-<p align="center"><img alt="Idle loop" src="../../../images/idlers.png" /></p> 
+<p align="center"><strong>Figure: Idle loop</strong></p>
+<p align="center"><img alt="Idle loop" src="../../../images/idlers.png" /></p>
 
 <p>The idle enterers, exiters, and idlers all have the same prototype, <code>my_idler()</code>, which receives data and returns <code>ECORE_CALLBACK_RENEW</code> or <code>ECORE_CALLBACK_CANCEL</code> to tell Ecore whether it wants to be called again or is finished.</p>
 
@@ -369,19 +369,19 @@ ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end,
 Eina_Bool
 my_idle_enterer_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    return ECORE_CALLBACK_RENEW;
 }
 
 Eina_Bool
 my_idle_exiter_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+    return ECORE_CALLBACK_CANCEL;
 }
 
 Eina_Bool
 my_idler(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    return ECORE_CALLBACK_RENEW;
 }
 
 ecore_idle_enterer_add(my_idle_enterer_cb, my_data);
diff --git a/org.tizen.guides/html/native/ui/efl/multiple_screens_n.htm b/org.tizen.guides/html/native/ui/efl/multiple_screens_n.htm
index 83ca406..7715761 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/multiple_screens_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/multiple_screens_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Multiple Screen Support</title> 
- </head> 
+  <title>Multiple Screen Support</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
        <ul class="toc">
@@ -26,72 +26,72 @@
                <li>Tizen 2.3.1 and Higher for Wearable</li>
        </ul>
        <p class="toc-title">Content</p>
-               <ul class="toc">        
+               <ul class="toc">
                        <li><a href="#key_concepts">Key Concepts</a></li>
                        <li><a href="#apply">Applying the Base Scale</a></li>
-                       <li><a href="#without">Scaling without the Base Scale</a></li>                  
+                       <li><a href="#without">Scaling without the Base Scale</a></li>
                </ul>
        <p class="toc-title">Related Info</p>
-               <ul class="toc">        
+               <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Multiple Screen Support</h1> 
+  <h1>Multiple Screen Support</h1>
+
+  <p>Tizen is available in various devices, which support different screen sizes and resolutions. When developing Tizen applications, you must take this into account if you want your application to function well in various device models.</p>
+  <p>Before <a href="#apply">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key_concepts">key concepts of multiple screen support</a>.</p>
 
-  <p>Tizen is available in various devices, which support different screen sizes and resolutions. When developing Tizen applications, you must take this into account if you want your application to function well in various device models.</p> 
-  <p>Before <a href="#apply">implementing multiple screen support</a>, make sure you are familiar with the <a href="#key_concepts">key concepts of multiple screen support</a>.</p> 
-  
-   <h2 id="key_concepts" name="key_concepts">Key Concepts</h2> 
-  <p>Before building a native application for multiple resolutions using Tizen native UI framework, make sure you are familiar with the following concepts:</p> 
+   <h2 id="key_concepts" name="key_concepts">Key Concepts</h2>
+  <p>Before building a native application for multiple resolutions using Tizen native UI framework, make sure you are familiar with the following concepts:</p>
   <ul>
   <li><a href="#multi">Multi-scale</a></li>
   <li><a href="#base">Base scale</a></li>
   </ul>
 
-  <h3 id="multi" name="multi">Multi-scale in the Tizen Native UI Framework</h3> 
-  <p>Tizen native UI framework supports multiple scaling. If the application is implemented to be scalable, it can be scaled to different device environments by simply changing the <code>elm_scale</code> value in the target environment without modifying the application code.</p> 
-  
+  <h3 id="multi" name="multi">Multi-scale in the Tizen Native UI Framework</h3>
+  <p>Tizen native UI framework supports multiple scaling. If the application is implemented to be scalable, it can be scaled to different device environments by simply changing the <code>elm_scale</code> value in the target environment without modifying the application code.</p>
+
   <p>Scale 1.0 in the Tizen native UI framework means that the application is displayed in a set size and is not scaled. Scale 1.0 is used in a display environment, such as a desktop. In the desktop environment, the monitor has a resolution between 1280 x 800 and 1920 x 1080, with a size between 20 and 27 inch, and the DPI between 80 and 100.</p>
-  
-  <p>If an application is scaled up or down after implementing it in a desktop environment, it can be used in another device without modifying the code. Each device has a proper scale value for adjusting the application size. Edje, which handles layout and themes in the Tizen native UI framework, gets the size of an object by multiplying the application-specified size with the device-specific scale value.</p> 
-  
+
+  <p>If an application is scaled up or down after implementing it in a desktop environment, it can be used in another device without modifying the code. Each device has a proper scale value for adjusting the application size. Edje, which handles layout and themes in the Tizen native UI framework, gets the size of an object by multiplying the application-specified size with the device-specific scale value.</p>
+
   <p>The following figure illustrates a 50 px wide object in a 1280 px wide monitor. If the same object is displayed without scaling in a mobile environment, it looks very small. To show the object in the mobile environment with a similar size as in the monitor, a device-specific scale value of 2.0 is used, resulting in the object size of 100 px instead of 50 px.</p>
-  
-  <p align="center"><strong>Figure: Scaling from desktop to mobile</strong></p> 
-  <p align="center"><img alt="Scaling from desktop to mobile" src="../../../images/scaling.png" /> </p> 
-  
-  <h3 id="base" name="base">Base Scale</h3> 
+
+  <p align="center"><strong>Figure: Scaling from desktop to mobile</strong></p>
+  <p align="center"><img alt="Scaling from desktop to mobile" src="../../../images/scaling.png" /> </p>
+
+  <h3 id="base" name="base">Base Scale</h3>
   <p>The object is multiplied by the scale specified in the system to show the application in a proper size in other devices. The scaling must be based on the scale 1.0, or the scale that the application is based on, which must then be defined in the <a href="#set_edc">EDC</a> and <a href="#set_c">C</a> files. This predefined scale is called the <strong>base scale</strong>.</p>
- 
+
   <p>The size of the scalable object is multiplied with the device scale value, as illustrated in the following figure. If the scalable object has a size of 10 in the base scale 1.0, it is created with that same size 10 in a device with the scale 1.0. In a device with the scale 2.0, the object size is 20; and in a device with the scale 4.0, the object size is 40.</p>
-  
-  <p align="center"><strong>Figure: Base scale</strong></p> 
-  <p align="center"><img alt="Base scale" src="../../../images/base_scale.png" /> </p> 
-  
+
+  <p align="center"><strong>Figure: Base scale</strong></p>
+  <p align="center"><img alt="Base scale" src="../../../images/base_scale.png" /> </p>
+
   <p>The middle object in the above figure has a base scale 2.0. To calculate the size of the scalable object in a device when the base scale is something other than 1.0, use the following formula:</p>
-  
+
 <pre class="prettyprint">
 scale = device_scale (information in the target device) / base_scale (information in the application)
 </pre>
- 
+
 <p>For example, to calculate the size of the scalable object in a device with the scale 4.0 when the base scale in the application is 2.0:</p>
 <p>4.0 / 2.0 = 2.0</p>
-<p>Basically, if the object size is 20 with the base scale 2.0, the object size in a device with the scale 4.0 must be 20 * 2.0 = 40.</p> 
-  
-  <h2 id="apply" name="apply">Applying the Base Scale</h2> 
-  <p>To create an application that supports multiple screen sizes, you must learn how to set the base scale in:</p> 
-  <ul> 
-   <li><a href="#set_edc">EDC file</a></li> 
-   <li><a href="#set_c">C code</a></li> 
-  </ul> 
-  
+<p>Basically, if the object size is 20 with the base scale 2.0, the object size in a device with the scale 4.0 must be 20 * 2.0 = 40.</p>
+
+  <h2 id="apply" name="apply">Applying the Base Scale</h2>
+  <p>To create an application that supports multiple screen sizes, you must learn how to set the base scale in:</p>
+  <ul>
+   <li><a href="#set_edc">EDC file</a></li>
+   <li><a href="#set_c">C code</a></li>
+  </ul>
+
   <h3 id="calc_base" name="calc_base">Calculating the Base Scale</h3>
 
 <p>To get the base scale value of your own display, you must know the DPI of the display. Based on the display DPI, you can calculate the base scale, since it is proportional to the display DPI with the following formula:</p>
@@ -122,7 +122,7 @@ base_scale = (DPI / 90) * profile_factor
  <tr>
  <td>Mobile - normal screen (4.5 inch and upwards)</td>
  <td>0.8</td>
-  </tr> 
+  </tr>
 
  <tr>
  <td>Desktop</td>
@@ -137,25 +137,25 @@ base_scale = (DPI / 90) * profile_factor
 
 <p>If the application is made in the environment using DPI of 233 and mobile profile, its base scale must be set to 1.8. For a desktop, the DPI is 90, resulting in a base scale of 1.0.</p>
 
- 
-<h3 id="set_edc" name="set_edc">Setting the Base Scale in the EDC File</h3> 
+
+<h3 id="set_edc" name="set_edc">Setting the Base Scale in the EDC File</h3>
   <p>The application must specify its base scale.</p>
-<p>The EDJE objects are scaled properly, if the base scale is set in the collections block of the EDC file and the object is set as scalable with the <code>scale</code> property:</p> 
-  
+<p>The EDJE objects are scaled properly, if the base scale is set in the collections block of the EDC file and the object is set as scalable with the <code>scale</code> property:</p>
+
 <pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;<span class="highlight">base_scale: 1.8;</span> /* For WVGA applications */
-&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">scale: 1;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   <span class="highlight">base_scale: 1.8;</span> /* For WVGA applications */
+   parts
+   {
+      part
+      {
+         name: "box";
+         type: RECT;
+         min: 100 100;
+         <span class="highlight">scale: 1;</span>
+      }
+   }
 }
 </pre>
 
@@ -164,40 +164,40 @@ collections
        The base scale for the WVGA resolution is 1.8 and for the HD resolution 2.4.
 </div>
 
-  <h3 id="set_c" name="set_c">Setting the Base Scale in the C Code</h3> 
+  <h3 id="set_c" name="set_c">Setting the Base Scale in the C Code</h3>
   <p>The object size must be specified in the EDC file. However, sometimes it is better to set the object size in a C file.</p>
-<p>If the size is defined in the C file with no scaling, the object is displayed in the same size even if the scale changes. To avoid this, use the <code>ELM_SCALE_SIZE</code> macro:</p> 
+<p>If the size is defined in the C file with no scaling, the object is displayed in the same size even if the scale changes. To avoid this, use the <code>ELM_SCALE_SIZE</code> macro:</p>
 
 <pre class="prettyprint">
 #define ELM_SCALE_SIZE(x) x / elm_app_base_scale_get() * elm_config_scale_get()
 </pre>
 
 <p>In the above definition, the size (<code>x</code>) is first changed to a size based on 1.0 (<code>x/elm_app_base_scale_get()</code>) and then multiplied with the scale of the current target (<code>elm_config_scale_get()</code>).</p>
-  
-<p>To use the <code>ELM_SCALE_SIZE</code> macro in your application:</p> 
+
+<p>To use the <code>ELM_SCALE_SIZE</code> macro in your application:</p>
 
 <ol>
 <li>Set the application base scale using the <code>elm_app_base_scale_set()</code> function:
-  
+
 <pre class="prettyprint">
 int
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;elm_app_base_scale_set(1.8); /* This value is for WVGA application */
+    elm_app_base_scale_set(1.8); /* This value is for WVGA application */
 }
-</pre> 
+</pre>
 </li>
-<li>Define the object size in the application using the <code>ELM_SCALE_SIZE</code> macro: 
+<li>Define the object size in the application using the <code>ELM_SCALE_SIZE</code> macro:
 
 <pre class="prettyprint">
 evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
 evas_object_resize(object, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
 </pre>
-  <p>You can use the <code>ELM_SCALE_SIZE</code> macro in all functions related to setting objects sizes in Tizen native applications.</p> 
+  <p>You can use the <code>ELM_SCALE_SIZE</code> macro in all functions related to setting objects sizes in Tizen native applications.</p>
 </li>
-</ol>  
-  
-  <h2 id="without" name="without">Scaling without the Base Scale</h2>   
+</ol>
+
+  <h2 id="without" name="without">Scaling without the Base Scale</h2>
 
 <p>In Tizen, each device has a scale value in proportion to the display. If scaling is enabled, the objects are drawn on the display by multiplying the user-defined object size with the device scale. If the base scale is set, the objects are drawn by dividing the user-defined object size by the base scale and multiplying it with the device scale.</p>
 
@@ -226,29 +226,29 @@ real_physical_pixel = (a_pixel_before_scaling) x (DPI / 90) x 0.7
  <th>DPI</th>
  <td>129</td>
  <td>233</td>
- <td>294</td> 
+ <td>294</td>
  </tr>
  <tr>
  <th>A pixel before scaling</th>
  <td>100</td>
  <td>100</td>
- <td>100</td> 
+ <td>100</td>
  </tr>
  <tr>
  <th>Real physical pixel</th>
  <td>100</td>
  <td>180</td>
- <td>260</td> 
+ <td>260</td>
  </tr>
  <tr>
  <th>Actual base scale</th>
  <td>1.0</td>
  <td>1.8</td>
- <td>2.6</td> 
- </tr> 
+ <td>2.6</td>
+ </tr>
  </tbody></table>
 
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/multipoint_touch_n.htm b/org.tizen.guides/html/native/ui/efl/multipoint_touch_n.htm
index 4a2cf52..3873dd5 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/multipoint_touch_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/multipoint_touch_n.htm
@@ -5,17 +5,17 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Tracking Multi-point Touch Events</title>  
+       <title>Tracking Multi-point Touch Events</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
-       
+
 <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
@@ -31,23 +31,23 @@
                        <li><a href="#init">Initializing Multi-point Touch</a></li>
                        <li><a href="#canvas">Handling the Canvas</a></li>
                        <li><a href="#touch">Managing Touch Events</a></li>
-               </ul>           
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>                              
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>                  
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>  
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Tracking Multi-point Touch Events</h1>
 
-  
+
 <p>This topic demonstrates how you can use Evas objects to paint on a canvas and track touch events.</p>
 
 <p>In the following example, you create a fully functional application that is able to track multiple simultaneous clicks. For every click, a black rectangle is drawn on the screen. This way it is easy to test the multi-point touch operation with the application.</p>
@@ -59,19 +59,19 @@
 <p>In the <code>multitouch.c</code> file, define the <code>appdata</code> structure that includes the <code>Evas_Object</code> pointers for various UI components, a list, and a Boolean flag:</p>
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *nf;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *button;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *box;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *rect;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* List of mouse spots */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_List *spots;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Flag for checking the mouse down event */
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool down;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *nf;
+    Evas_Object *button;
+    Evas_Object *box;
+    Evas_Object *rect;
+    Evas_Object *label;
+
+    /* List of mouse spots */
+    Eina_List *spots;
+
+    /* Flag for checking the mouse down event */
+    Eina_Bool down;
 };
 typedef struct appdata appdata_s;
 </pre>
@@ -82,43 +82,43 @@ typedef struct appdata appdata_s;
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
-
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ui_app_low_battery, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ui_app_low_memory, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_DEVICE_ORIENTATION_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ui_app_orient_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_LANGUAGE_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lang_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_REGION_FORMAT_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ui_app_region_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    appdata_s *ad = {0,};
+    int ret = 0;
+
+    ui_app_lifecycle_callback_s event_callback = {0,};
+    app_event_handler_h handlers[5] = {NULL,};
+
+    event_callback.create = app_create;
+    event_callback.terminate = app_terminate;
+    event_callback.pause = app_pause;
+    event_callback.resume = app_resume;
+    event_callback.app_control = app_control;
+
+    ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
+                             ui_app_low_battery, &amp;ad);
+    ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
+                             ui_app_low_memory, &amp;ad);
+    ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED],
+                             APP_EVENT_DEVICE_ORIENTATION_CHANGED,
+                             ui_app_orient_changed, &amp;ad);
+    ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED],
+                             APP_EVENT_LANGUAGE_CHANGED,
+                             ui_app_lang_changed, &amp;ad);
+    ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED],
+                             APP_EVENT_REGION_FORMAT_CHANGED,
+                             ui_app_region_changed, &amp;ad);
+    ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+    ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+
+    return ret;
 }
 </pre>
 
 <p>The following figure illustrates the example application screen.</p>
 
-  <p align="center"><strong>Figure: Multi-point touch screen</strong></p> 
-  <p align="center"><img alt="Multi-point touch screen" src="../../../images/multipoint_touch.png" /></p> 
+  <p align="center"><strong>Figure: Multi-point touch screen</strong></p>
+  <p align="center"><img alt="Multi-point touch screen" src="../../../images/multipoint_touch.png" /></p>
 </li>
 </ol>
 
@@ -127,30 +127,30 @@ main(int argc, char *argv[])
  <p>To handle the canvas:</p>
  <ol>
  <li>
-<p>In the <code>create_base_gui()</code> function, create the base UI elements, including the naviframe and button. The naviframe includes each view screen as an item, and the item in turn includes a title, a button which clears the spots when clicked, and the actual content (in this case, a box component).</p> 
+<p>In the <code>create_base_gui()</code> function, create the base UI elements, including the naviframe and button. The naviframe includes each view screen as an item, and the item in turn includes a title, a button which clears the spots when clicked, and the actual content (in this case, a box component).</p>
 
 <pre class="prettyprint">
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Naviframe */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Button */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;button = elm_button_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;button, &quot;Clear&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;button, &quot;clicked&quot;, button_clicked_cb, ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create main view */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;box = create_main_view(ad);
-&nbsp;&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;Multi-point Touch&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL, ad-&gt;box, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_item_part_content_set(nf_it, &quot;title_right_btn&quot;, ad-&gt;button);
-} 
+    Elm_Object_Item *nf_it;
+
+    /* Naviframe */
+    ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
+    elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+    evas_object_show(ad-&gt;nf);
+
+    /* Button */
+    ad-&gt;button = elm_button_add(ad-&gt;nf);
+    elm_object_text_set(ad-&gt;button, "Clear");
+    evas_object_smart_callback_add(ad-&gt;button, "clicked", button_clicked_cb, ad);
+
+    /* Create main view */
+    ad-&gt;box = create_main_view(ad);
+    nf_it = elm_naviframe_item_push(ad-&gt;nf, "Multi-point Touch",
+                                    NULL, NULL, ad-&gt;box, NULL);
+    elm_object_item_part_content_set(nf_it, "title_right_btn", ad-&gt;button);
+}
 </pre>
 </li>
 <li>
@@ -162,32 +162,32 @@ create_base_gui(appdata_s *ad)
 static Evas_Object*
 create_main_view(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *box;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Box */
-&nbsp;&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(box);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Label */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(box);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;None&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;label, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;label, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;label);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Event Rect */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(box));
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, ad-&gt;rect);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;rect);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return box;
+    Evas_Object *box;
+
+    /* Box */
+    box = elm_box_add(ad-&gt;nf);
+    evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    evas_object_show(box);
+
+    /* Label */
+    ad-&gt;label = elm_label_add(box);
+    elm_object_text_set(ad-&gt;label, "None");
+    evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, 0);
+    evas_object_size_hint_align_set(ad-&gt;label, EVAS_HINT_FILL, EVAS_HINT_FILL);
+    evas_object_repeat_events_set(ad-&gt;label, EINA_TRUE);
+    elm_box_pack_end(box, ad-&gt;label);
+    evas_object_show(ad-&gt;label);
+
+    /* Event Rect */
+    ad-&gt;rect = evas_object_rectangle_add(evas_object_evas_get(box));
+    evas_object_size_hint_weight_set(ad-&gt;rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    evas_object_size_hint_align_set(ad-&gt;rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
+    evas_object_color_set(ad-&gt;rect, 204, 204, 204, 255);
+    evas_object_repeat_events_set(ad-&gt;rect, EINA_TRUE);
+    elm_box_pack_end(box, ad-&gt;rect);
+    evas_object_show(ad-&gt;rect);
+
+    return box;
 }
 </pre>
 </li>
@@ -198,14 +198,14 @@ create_main_view(appdata_s *ad)
 Evas_Object*
 create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *spot;
-&nbsp;&nbsp;&nbsp;&nbsp;spot = evas_object_rectangle_add(evas_object_evas_get(parent));
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(spot, size, size);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Adjust X and Y positions to be the object center */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(spot, x - (size/2), y - (size/2));
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(spot);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return spot;
+    Evas_Object *spot;
+    spot = evas_object_rectangle_add(evas_object_evas_get(parent));
+    evas_object_resize(spot, size, size);
+    /* Adjust X and Y positions to be the object center */
+    evas_object_move(spot, x - (size/2), y - (size/2));
+    evas_object_show(spot);
+
+    return spot;
 }
 </pre>
 </li>
@@ -217,16 +217,16 @@ create_spot(Evas_Object *parent, Evas_Coord x, Evas_Coord y, int size)
 static void
 button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *spot;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Remove the objects from the list */
-&nbsp;&nbsp;&nbsp;&nbsp;EINA_LIST_FREE(ad-&gt;spots, spot) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(spot);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spot = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;/* Update the label text */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Clear&quot;);
+    appdata_s *ad = data;
+    Evas_Object *spot;
+
+    /* Remove the objects from the list */
+    EINA_LIST_FREE(ad-&gt;spots, spot) {
+        evas_object_del(spot);
+        spot = NULL;
+    }
+    /* Update the label text */
+    elm_object_text_set(ad-&gt;label, "Clear");
 }
 </pre>
 </li>
@@ -244,47 +244,47 @@ button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
 static void
 mousemove_cb(void *data, Evas *evas, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *spot;
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[1024];
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *ev = event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the coordinates */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord x = ev-&gt;cur.canvas.x;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord y = ev-&gt;cur.canvas.y;
-&nbsp;&nbsp;&nbsp;&nbsp;int size = (int) 5 * elm_config_scale_get();
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (!ad-&gt;down)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Update the label text */
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Mouse Move, %d, %d&quot;, x, y);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Draw the spot rectangle */
-&nbsp;&nbsp;&nbsp;&nbsp;spot = create_spot(ad-&gt;rect, x, y, size);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(spot, 0, 0, 0, 255);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Store the rectangle to the list */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;spots= eina_list_append(ad-&gt;spots, spot);
+    appdata_s *ad = data;
+    Evas_Object *spot;
+    char buf[1024];
+    Evas_Event_Mouse_Move *ev = event_info;
+    /* Retrieve the coordinates */
+    Evas_Coord x = ev-&gt;cur.canvas.x;
+    Evas_Coord y = ev-&gt;cur.canvas.y;
+    int size = (int) 5 * elm_config_scale_get();
+
+    if (!ad-&gt;down)
+        return;
+
+    /* Update the label text */
+    snprintf(buf, sizeof(buf), "Mouse Move, %d, %d", x, y);
+    elm_object_text_set(ad-&gt;label, buf);
+
+    /* Draw the spot rectangle */
+    spot = create_spot(ad-&gt;rect, x, y, size);
+    evas_object_color_set(spot, 0, 0, 0, 255);
+    /* Store the rectangle to the list */
+    ad-&gt;spots= eina_list_append(ad-&gt;spots, spot);
 }
 
 static void
 create_main_view(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *box;
+    Evas_Object *box;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the box */
-&nbsp;&nbsp;&nbsp;&nbsp;box = elm_box_add(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(box);
+    /* Create the box */
+    box = elm_box_add(ad-&gt;nf);
+    evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    evas_object_show(box);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add the callback */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(box, EVAS_CALLBACK_MOUSE_MOVE, mousemove_cb, ad);
+    /* Add the callback */
+    evas_object_event_callback_add(box, EVAS_CALLBACK_MOUSE_MOVE, mousemove_cb, ad);
 }
 </pre>
 
 <div class="note">
        <strong>Note</strong>
-       The event types for a touch event contain the &quot;MOUSE&quot; keyword due to backward compatibility with Tizen 2.3. Before the multi-point touch concept was introduced, there was no difference between a single touch event and a mouse event. As a result, the single touch event used the <code>EVAS_CALLBACK_MOUSE_DOWN/UP/MOVE</code> event types.
+       The event types for a touch event contain the "MOUSE" keyword due to backward compatibility with Tizen 2.3. Before the multi-point touch concept was introduced, there was no difference between a single touch event and a mouse event. As a result, the single touch event used the <code>EVAS_CALLBACK_MOUSE_DOWN/UP/MOVE</code> event types.
 </div>
 
 <p>The following touch event types are supported:</p>
@@ -306,7 +306,7 @@ create_main_view(appdata_s *ad)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/programming_principles_n.htm b/org.tizen.guides/html/native/ui/efl/programming_principles_n.htm
index 2e4b019..a25cc2b 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/programming_principles_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/programming_principles_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Programming Principles of EFL</title>  
+       <title>Programming Principles of EFL</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -38,7 +38,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -58,7 +58,7 @@ Evas_Object* btn;
 Evas_Object* rect;
 Evas_Object* img;
 
-win = elm_win_util_standard_add(&quot;test&quot;, &quot;test&quot;);
+win = elm_win_util_standard_add("test", "test");
 btn = elm_button_add(parent);
 rect = evas_object_rectangle_add(evas);
 img = evas_object_image_add(evas);
@@ -94,19 +94,19 @@ evas_object_show(check);
 <ul>
 <li>Evas treats its objects equally, so it offers a function set that applies to any Evas object, whichever type that may have. These functions manipulate generic Evas objects:
 <ul>
-<li><code>evas_object_show()</code></li> 
-<li><code>evas_object_hide()</code></li> 
+<li><code>evas_object_show()</code></li>
+<li><code>evas_object_hide()</code></li>
 <li><code>evas_object_del()</code></li>
 <li><code>evas_object_geometry_get()</code></li>
 </ul>
- 
+
 <p>For more information, see the Generic Object Functions API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Evas__Object__Group.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Evas__Object__Group.html">wearable</a> applications).</p>
 </li>
 
 <li>Some function usage is limited to a certain object type. The following functions can only be used for the objects generated by the  <code>evas_object_image_add()</code> function:
 
 <ul>
-<li><code>evas_object_image_file_set()</code></li> 
+<li><code>evas_object_image_file_set()</code></li>
 <li><code>evas_object_image_size_get()</code></li>
 <li><code>evas_object_image_preload()</code></li>
 </ul>
@@ -116,9 +116,9 @@ evas_object_show(check);
 <p>The Elementary UI components inherit a lot of their code from the container UI components and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). You can use the container and layout functions on the Elementary UI components, as well as the Elementary object functions, such as:</p>
 
 <ul>
-<li><code>elm_object_part_content_set()</code></li> 
-<li><code>elm_object_part_content_get()</code></li> 
-<li><code>elm_object_part_content_unset()</code></li> 
+<li><code>elm_object_part_content_set()</code></li>
+<li><code>elm_object_part_content_get()</code></li>
+<li><code>elm_object_part_content_unset()</code></li>
 </ul>
 
 <p>For more information, see the General API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__General.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__General.html">wearable</a> applications).</p>
@@ -127,7 +127,7 @@ evas_object_show(check);
 <li>A single UI component has its individual API as well. The following functions can only be used for the objects generated by <code>elm_entry_add()</code> function:
 
 <ul>
-<li><code>elm_entry_file_set()</code></li> 
+<li><code>elm_entry_file_set()</code></li>
 <li><code>elm_entry_bounce_set()</code></li>
 <li><code>elm_entry_utf8_to_markup()</code></li>
 </ul>
@@ -138,7 +138,7 @@ evas_object_show(check);
 <li>In case of the elm_scroller, it is a UI component and an implementation of a scrollable interface at the same time. The following functions can be used for all UI components, which implement a scrollable interface, such as <code>elm_entry</code> and <code>elm_genlist</code>:
 
 <ul>
-<li><code>elm_scroller_region_show()</code></li> 
+<li><code>elm_scroller_region_show()</code></li>
 <li><code>elm_scroller_region_bring_in()</code></li>
 <li><code>elm_scroller_gravity_set()</code></li>
 </ul>
@@ -146,7 +146,7 @@ evas_object_show(check);
 <p>For more information, see the Scroller API (in <a href="../../../../../org.tizen.native.mobile.apireference/group__Scroller.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Scroller.html">wearable</a> applications).</p>
 </li>
 </ul>
-    
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/resource_fallback_n.htm b/org.tizen.guides/html/native/ui/efl/resource_fallback_n.htm
index db40dec..f14fcfd 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/resource_fallback_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/resource_fallback_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Resource Fallback Support</title> 
- </head> 
+  <title>Resource Fallback Support</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,17 +33,17 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Resource Fallback Support</h1> 
-  
+  <h1>Resource Fallback Support</h1>
+
 <p>Tizen native applications can run on different types of devices, such as wearable, phone, tablet, and TV. Tizen also supports various resolutions (WVGA ~ XQXGA) and resources. To take advantage of these features, you can handle resources in the <a href="../../../../../org.tizen.studio/html/native_tools/resource_manager_n.htm">Resource Manager</a> view in the Tizen Studio.</p>
 
 <p>In addition to the possibilities provided by the <strong>Resource Manager</strong> view, you can use Edje to provide sets of alternative images in your application.</p>
 
-<p>The image set elements are used to display a specific image on the screen based on the container size. The image set is used to control the resource quality when the image part is scaled to multiple devices. According to the size of the part&#39;s container, an appropriate image is loaded.</p>
+<p>The image set elements are used to display a specific image on the screen based on the container size. The image set is used to control the resource quality when the image part is scaled to multiple devices. According to the size of the part's container, an appropriate image is loaded.</p>
 
 <p>The image sets can have the following properties:</p>
 <ul><li><code>image: image-name</code>
@@ -63,93 +63,93 @@
 <pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;group
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;pig.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 640 800 1200 1500;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;monkey.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 400 500 639 799;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;cat.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 240 300 399 499;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;mouse.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 80 100 239 299;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;snail.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 79 99;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.45;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.5;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.75;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-}       
+   group
+   {
+      name: "property_test";
+
+      images
+      {
+         set
+         {
+            name: "alternative_animal";
+            image
+            {
+               image: "pig.png" COMP;
+               size: 640 800 1200 1500;
+            }
+            image
+            {
+               image: "monkey.png" COMP;
+               size: 400 500 639 799;
+            }
+            image
+            {
+               image: "cat.png" COMP;
+               size: 240 300 399 499;
+            }
+            image
+            {
+               image: "mouse.png" COMP;
+               size: 80 100 239 299;
+            }
+            image
+            {
+               image: "snail.png" COMP;
+               size: 0 0 79 99;
+            }
+         }
+      }
+
+      parts
+      {
+         part
+         {
+            name: "image1";
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.0;}
+               rel2 {relative: 1.0 0.45;}
+               image.normal: "alternative_animal";
+               aspect: 4/5 4/5;
+               aspect_preference: BOTH;
+            }
+         }
+         part
+         {
+            name: "image2";
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.5;}
+               rel2 {relative: 1.0 0.75;}
+               image.normal: "alternative_animal";
+               aspect: 4/5 4/5;
+               aspect_preference: BOTH;
+            }
+         }
+         part
+         {
+            name: "image3";
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.8;}
+               rel2 {relative: 1.0 1.0;}
+               image.normal: "alternative_animal";
+               aspect: 4/5 4/5;
+               aspect_preference: BOTH;
+            }
+         }
+      }
+   }
+}
 </pre>
 </td>
  <td><p align="center"><img alt="Image set" src="../../../images/fallback_imageset.png" /></p></td>
  </tr>
  </tbody></table>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/rotary_events_wn.htm b/org.tizen.guides/html/native/ui/efl/rotary_events_wn.htm
index 37f1f99..9314f38 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/rotary_events_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/rotary_events_wn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Managing Rotary Events</title> 
- </head> 
+  <title>Managing Rotary Events</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -32,10 +32,10 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>             
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Managing Rotary Events</h1>
@@ -50,20 +50,20 @@
 <li>Rotary event handler</li>
 <li>Rotary object event callback</li>
 </ul>
-  
+
 <h2 id="handler">Rotary Event Handler</h2>
 
 <p>Use the rotary event handler when you do not want to take care of an Evas object, or when the application is not implemented using an Evas object.</p>
 <p>The handler is implemented like the <a href="event_types_n.htm#ecore">Ecore event</a> in EFL:</p>
 <ol><li>Register the handler with the <code>eext_rotary_event_handler_add()</code> function and define the handler function.</li>
 <li>When no longer needed, remove the handler with the <code>eext_rotary_event_handler_del()</code> function.</li></ol>
-<p>The rotary event handlers are treated &quot;first come first served&quot;. This means that the first registered handler is called first when a rotary event occurs. If that handler returns <code>EINA_TRUE</code>, the next handler is called. The loop continues until a handler returns <code>EINA_FALSE</code> or all handlers have been called.</p>
+<p>The rotary event handlers are treated "first come first served". This means that the first registered handler is called first when a rotary event occurs. If that handler returns <code>EINA_TRUE</code>, the next handler is called. The loop continues until a handler returns <code>EINA_FALSE</code> or all handlers have been called.</p>
 
 
 
 <h2 id="callback">Rotary Object Event Callback</h2>
 
-<p>Use the rotary object event callback when you want the EFL Extension API to handle the event delivery between objects. This means that EFL Extension manages callback and object lists, and decides which object&#39;s callback must be called when a rotary event occurs.</p> 
+<p>Use the rotary object event callback when you want the EFL Extension API to handle the event delivery between objects. This means that EFL Extension manages callback and object lists, and decides which object's callback must be called when a rotary event occurs.</p>
 
 <p>The callback is implemented as follows:</p>
 
@@ -94,36 +94,36 @@
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
+    Evas_Object *win = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the window */
-&nbsp;&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension circle sample&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;win_delete_request_cb, NULL);
+    /* Create the window */
+    win = elm_win_util_standard_add(NULL, "extension circle sample");
+    elm_win_autodel_set(win, EINA_TRUE);
+    evas_object_smart_callback_add(win, "delete,request",
+                                   win_delete_request_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the handler */
-&nbsp;&nbsp;&nbsp;&nbsp;eext_rotary_event_handler_add(_rotary_handler_cb, NULL);
+    /* Register the handler */
+    eext_rotary_event_handler_add(_rotary_handler_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(win);
+    /* Show the window after the base GUI is set up */
+    evas_object_show(win);
 }
 </pre>
 </li>
 <li>Define the handler function:
 <pre class="prettyprint">
-Eina_Bool 
+Eina_Bool
 _rotary_handler_cb(void *data, Eext_Rotary_Event_Info *ev)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Rotary device rotated in clockwise direction&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Rotary device rotated in counter-clockwise direction&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+    if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE) {
+        dlog_print(DLOG_DEBUG, LOG_TAG,
+                   "Rotary device rotated in clockwise direction");
+    } else {
+        dlog_print(DLOG_DEBUG, LOG_TAG,
+                   "Rotary device rotated in counter-clockwise direction");
+    }
+
+    return EINA_FALSE;
 }
 </pre>
 </li>
@@ -133,16 +133,16 @@ _rotary_handler_cb(void *data, Eext_Rotary_Event_Info *ev)
 static void
 app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release all resources */
+    /* Release all resources */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Remove the handler */
-&nbsp;&nbsp;&nbsp;&nbsp;eext_rotary_event_handler_del(_rotary_handler_cb);
+    /* Remove the handler */
+    eext_rotary_event_handler_del(_rotary_handler_cb);
 }
 </pre>
 </li>
 </ol>
 </li>
-<li>Implement a rotary event callback for a normal Evas object. 
+<li>Implement a rotary event callback for a normal Evas object.
 <p>In the following example, a rotary event causes the slider value to be adjusted accordingly.</p>
 <ol type="a">
 <li>Create the application window and add a slider component to the window:
@@ -150,32 +150,32 @@ app_terminate(void *data)
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL, *slider = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension sample&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Slider */
-&nbsp;&nbsp;&nbsp;&nbsp;slider = elm_slider_add(win);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(slider, 0, 50);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_step_set(slider, 1.0);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(slider);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, slider);
+    Evas_Object *win = NULL, *slider = NULL;
+
+    /* Window */
+    win = elm_win_util_standard_add(NULL, "extension sample");
+    elm_win_autodel_set(win, EINA_TRUE);
+    evas_object_smart_callback_add(win, "delete,request",
+                                   win_delete_request_cb, NULL);
+
+    /* Slider */
+    slider = elm_slider_add(win);
+    evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_slider_min_max_set(slider, 0, 50);
+    elm_slider_step_set(slider, 1.0);
+    evas_object_show(slider);
+    elm_win_resize_object_add(win, slider);
 </pre>
 </li>
 <li>Register a rotary event callback and set the slider as the activated object:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the callback */
-&nbsp;&nbsp;&nbsp;&nbsp;ext_rotary_object_event_callback_add(slider, _rotary_event_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the slider as activated */
-&nbsp;&nbsp;&nbsp;&nbsp;eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+    /* Register the callback */
+    ext_rotary_object_event_callback_add(slider, _rotary_event_cb, NULL);
+    /* Set the slider as activated */
+    eext_rotary_object_event_activated_set(slider, EINA_TRUE);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(win);
+    /* Show the window after the base GUI is set up */
+    evas_object_show(win);
 }
 </pre>
 </li>
@@ -185,25 +185,25 @@ create_base_gui(appdata_s *ad)
 Eina_Bool
 _rotary_event_cb(void *data, Evas_Object *obj, Eext_Rotary_Event_Info *ev)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *slider = obj;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the current slider value */
-&nbsp;&nbsp;&nbsp;&nbsp;int val = elm_slider_value_get(slider);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Increase the slider value based on a clockwise rotary event */
-&nbsp;&nbsp;&nbsp;&nbsp;if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, val + 1);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Decrease the slider value based on a counter-clockwise rotary event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, val - 1);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+    Evas_Object *slider = obj;
+    /* Retrieve the current slider value */
+    int val = elm_slider_value_get(slider);
+
+    /* Increase the slider value based on a clockwise rotary event */
+    if (ev-&gt;direction == EEXT_ROTARY_DIRECTION_CLOCKWISE) {
+        elm_slider_value_set(slider, val + 1);
+    } else {
+        /* Decrease the slider value based on a counter-clockwise rotary event */
+        elm_slider_value_set(slider, val - 1);
+    }
+
+    return EINA_FALSE;
 }
 </pre>
 </li>
 </ol>
 </li>
-<li>Implement a rotary event callback for an EFL Extension object. 
+<li>Implement a rotary event callback for an EFL Extension object.
 <p>In the following example, a rotary event causes the slider value to be adjusted accordingly.</p>
 <ol type="a">
 <li>Create the application window, add a conformant to the window, and add a circle surface and slider to the conformant:
@@ -211,35 +211,35 @@ _rotary_event_cb(void *data, Evas_Object *obj, Eext_Rotary_Event_Info *ev)
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;Eext_Circle_Surface *sur = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;win = elm_win_util_standard_add(NULL, &quot;extension circle sample&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;win_delete_request_cb, NULL);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Conformant */
-&nbsp;&nbsp;&nbsp;&nbsp;conform = elm_conformant_add(win);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(win, ELM_WIN_INDICATOR_OPAQUE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(conform);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Surface */
-&nbsp;&nbsp;&nbsp;&nbsp;sur = eext_circle_surface_conformant_add(conform);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Slider */
-&nbsp;&nbsp;&nbsp;&nbsp;slider = eext_circle_object_slider_add(conform, sur);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_circle_object_value_min_max_set(slider, 0.0, 30.0);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_circle_object_value_set(slider, 0.0);
+    Evas_Object *win = NULL;
+    Evas_Object *conform = NULL;
+    Eext_Circle_Surface *sur = NULL;
+
+    /* Window */
+    win = elm_win_util_standard_add(NULL, "extension circle sample");
+    elm_win_autodel_set(win, EINA_TRUE);
+    evas_object_smart_callback_add(win, "delete,request",
+                                   win_delete_request_cb, NULL);
+
+    /* Conformant */
+    conform = elm_conformant_add(win);
+    elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_SHOW);
+    elm_win_indicator_opacity_set(win, ELM_WIN_INDICATOR_OPAQUE);
+    evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(win, conform);
+    evas_object_show(conform);
+
+    /* Surface */
+    sur = eext_circle_surface_conformant_add(conform);
+
+    /* Slider */
+    slider = eext_circle_object_slider_add(conform, sur);
+    eext_circle_object_value_min_max_set(slider, 0.0, 30.0);
+    eext_circle_object_value_set(slider, 0.0);
 </pre>
 </li>
 <li>Set the slider as the activated object, and define the slider step.
-<p>The slider step defines how much a rotary event increases or decreases the slider value.</p> 
+<p>The slider step defines how much a rotary event increases or decreases the slider value.</p>
 
 <div class="note">
        <strong>Note</strong>
@@ -247,22 +247,22 @@ create_base_gui(appdata_s *ad)
 </div>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the slider as activated */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Its value increases or decreases based on rotary events */
-&nbsp;&nbsp;&nbsp;&nbsp;eext_rotary_object_event_activated_set(slider, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Each rotary event increases or decreases the slider value by 1 */
-&nbsp;&nbsp;&nbsp;&nbsp;eext_circle_object_slider_step_set(slider, 1.0);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(win);
+    /* Set the slider as activated */
+    /* Its value increases or decreases based on rotary events */
+    eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+    /* Each rotary event increases or decreases the slider value by 1 */
+    eext_circle_object_slider_step_set(slider, 1.0);
+
+    /* Show the window after the base GUI is set up */
+    evas_object_show(win);
 }
 </pre>
 </li>
 </ol>
 </li>
-</ul>  
-  
-    
+</ul>
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/scalability_n.htm b/org.tizen.guides/html/native/ui/efl/scalability_n.htm
index ea8cc5c..e41c3ad 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/scalability_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/scalability_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Scalability Support</title> 
- </head> 
+  <title>Scalability Support</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -26,8 +26,8 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
                <p class="toc-title">Content</p>
-               <ul class="toc">         
-                <li><a href="#key">Key Concepts</a></li>       
+               <ul class="toc">
+                <li><a href="#key">Key Concepts</a></li>
                 <li><a href="#elementary">Scalability Using Elementary UI Components</a></li>
             <li><a href="#edje">Scalability Using the EDC File</a></li>
             <li><a href="#aspect">Aspect Ratio</a></li>
@@ -40,11 +40,11 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Scalability Support</h1> 
+  <h1>Scalability Support</h1>
   <p>To ensure that your application works well in diverse devices, you must consider scalability when designing the application layout:</p>
   <ul>
 <li><a href="#key">Key concepts</a></li>
@@ -52,7 +52,7 @@
 <li><a href="#edje">Scalability using the EDC file</a></li>
 <li><a href="#aspect">Aspect ratio</a></li></ul>
 
-<h2 id="key" name="key">Key Concepts</h2>      
+<h2 id="key" name="key">Key Concepts</h2>
 
 <p>When designing the application layout to be scalable, you must pay attention to the following key concepts:</p>
 
@@ -60,31 +60,31 @@
 
 <p>In the <strong>relative position</strong>, the size is determined in proportion to the size of the referred object. For example, if an orange rectangle occupies 30% of the green rectangle, and the green rectangle is expanded, the orange rectangle is expanded accordingly. However, if the scaling value is changed and the green rectangle is not scaled, the orange rectangle remains unchanged too.</p>
 
-<p align="center"><strong>Figure: Relative position</strong></p> 
-<p align="center"> <img alt="Relative position" src="../../../images/scale_relative.png" /> </p> 
- 
+<p align="center"><strong>Figure: Relative position</strong></p>
+<p align="center"> <img alt="Relative position" src="../../../images/scale_relative.png" /> </p>
+
 <p>In the <strong>fixed position</strong>, the size is determined by a value set for the object. For example, the orange rectangle set to the size of 10. If the green rectangle is expanded, the orange rectangle does not change. However, if the scaling value is, for example, doubled, the size of the orange rectangle grows to 20.</p>
- 
-<p align="center"><strong>Figure: Fixed position</strong></p> 
+
+<p align="center"><strong>Figure: Fixed position</strong></p>
 <p align="center"> <img alt="Fixed position" src="../../../images/scale_fixed.png" /> </p>  </li>
 
 <li>Use the relative position
 <p>If you set the object size as a percentage, the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion of the window size, use the relative position.</p>
 
-<p align="center"><strong>Figure: Scaling relative position</strong></p> 
-<p align="center"> <img alt="Scaling relative position" src="../../../images/scale_relative_scaled.png" /> </p>  </li> 
+<p align="center"><strong>Figure: Scaling relative position</strong></p>
+<p align="center"> <img alt="Scaling relative position" src="../../../images/scale_relative_scaled.png" /> </p>  </li>
 
 <li>If you use the fixed size, make the object scalable
 <p>If you use the EDC file to set up the layout, you can set the object scalable in the <code>part</code> block:</p>
 <pre class="prettyprint">
 parts
 {
-&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;box&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">scale: 1;</span>
-&nbsp;&nbsp;&nbsp;}
+   part
+   {
+      name: "box";
+      type: RECT;
+      <span class="highlight">scale: 1;</span>
+   }
 }
 </pre>
 
@@ -97,13 +97,13 @@ evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
 
 <li>Do not fill the width or height out with a fixed size only
 <p>If you fill the entire height out with a fixed size only and it is scaled, the end result can be larger than the screen size. </p>
- 
-<p align="center"><strong>Figure: Height filled with a fixed size</strong></p> 
-<p align="center"> <img alt="Height filled with a fixed size" src="../../../images/scale_fixed_height.png" /> </p> 
 
-<p>If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.</p> 
- 
-<p align="center"><strong>Figure: Height with a flexible area</strong></p> 
+<p align="center"><strong>Figure: Height filled with a fixed size</strong></p>
+<p align="center"> <img alt="Height filled with a fixed size" src="../../../images/scale_fixed_height.png" /> </p>
+
+<p>If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.</p>
+
+<p align="center"><strong>Figure: Height with a flexible area</strong></p>
 <p align="center"> <img alt="Height with a flexible area" src="../../../images/scale_flexible_height.png" /> </p> </li></ul>
 
 
@@ -126,22 +126,22 @@ evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
 
 <ul><li>Box
 
-<p>The box container makes a layout where child UI components are stacked in either horizontal or vertical direction. The box size is the sum of its child UI components&#39; size:</p>
-<ul><li>A vertical box calculates its height as the sum of its children&#39;s height and its width as the width of the widest child.</li>
-<li>A horizontal box calculates its width as the sum of its children&#39;s width and its height as the height of the tallest child.</li></ul>
+<p>The box container makes a layout where child UI components are stacked in either horizontal or vertical direction. The box size is the sum of its child UI components' size:</p>
+<ul><li>A vertical box calculates its height as the sum of its children's height and its width as the width of the widest child.</li>
+<li>A horizontal box calculates its width as the sum of its children's width and its height as the height of the tallest child.</li></ul>
+
+<p align="center"><strong>Figure: Box layout</strong></p>
+<p align="center"> <img alt="Box layout" src="../../../images/scale_box.png" /> </p>
 
-<p align="center"><strong>Figure: Box layout</strong></p> 
-<p align="center"> <img alt="Box layout" src="../../../images/scale_box.png" /> </p> 
- 
 <p>The box-based linear layout is the best solution to ensure a minimum size for the child UI components in any device or any orientation.</p></li>
 
 <li>Grid
 
 <p>The grid container makes a layout where child UI components set their position and size relative to the container position and size. You can define the virtual width and height of the grid (by default: 100 x 100). You then pack the child UI components into the grid while setting their position and size based on the virtual size of the grid.</p>
 
-<p align="center"><strong>Figure: Grid layout</strong></p> 
-<p align="center"> <img alt="Grid layout" src="../../../images/scale_grid.png" /> </p> 
- 
+<p align="center"><strong>Figure: Grid layout</strong></p>
+<p align="center"> <img alt="Grid layout" src="../../../images/scale_grid.png" /> </p>
+
 <p>The grid-based relative layout can always fill the full screen in any device or any orientation. However, the size of the child UI components is changed based on the screen size.</p></li></ul>
 
 
@@ -163,11 +163,11 @@ evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
 
 <p>The following figures shows how the different weight hints (horizontal, vertical) of a UI component affect the size allocated to it in a container.</p>
 
-<p align="center"><strong>Figure: Weight hint with 1 child UI component</strong></p> 
-<p align="center"> <img alt="Weight hint" src="../../../images/scale_weight_hint.png" /> </p>  
- 
-<p align="center"><strong>Figure: Weight hint across multiple child UI components</strong></p> 
-<p align="center"> <img alt="Weight hint across multiple child UI components" src="../../../images/scale_weight_hint_multiple.png" /> </p> 
+<p align="center"><strong>Figure: Weight hint with 1 child UI component</strong></p>
+<p align="center"> <img alt="Weight hint" src="../../../images/scale_weight_hint.png" /> </p>
+
+<p align="center"><strong>Figure: Weight hint across multiple child UI components</strong></p>
+<p align="center"> <img alt="Weight hint across multiple child UI components" src="../../../images/scale_weight_hint_multiple.png" /> </p>
 
 <h4>Align</h4>
 
@@ -184,13 +184,13 @@ evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
 </ul>
 <p>-1.0 (<code>EVAS_HINT_FILL</code>) means that the UI component fills all of the allocated area.</p></li></ul>
 
-<p align="center"><strong>Figure: Alignment hint</strong></p> 
-<p align="center"> <img alt="Alignment hint" src="../../../images/scale_align_hint.png" /> </p>        
+<p align="center"><strong>Figure: Alignment hint</strong></p>
+<p align="center"> <img alt="Alignment hint" src="../../../images/scale_align_hint.png" /> </p>
 
 <h2 id="edje" name="edje">Scalability Using the EDC File</h2>
 
 <p>The Tizen platform provides a complex graphical design and layout library called Edje, which provides an abstraction layer between the application code and the interface. You can use Edje in your Tizen applications to create visual elements and control the application layout, look, and feel.</p>
-<p>Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an EDC file. The file can be manually produced with the <code>Edje_cc</code> tool by taking a text file (<code>.edc</code> file) and &quot;compiling&quot; an output <code>.edj</code> file that contains the state graph information, images, and any other needed data. The Tizen Studio complies the EDJ file from the EDC file automatically when you build the application.</p>
+<p>Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an EDC file. The file can be manually produced with the <code>Edje_cc</code> tool by taking a text file (<code>.edc</code> file) and "compiling" an output <code>.edj</code> file that contains the state graph information, images, and any other needed data. The Tizen Studio complies the EDJ file from the EDC file automatically when you build the application.</p>
 
 <p>While creating the EDC file, you set specific element properties to control the scalable behavior of the UI. Before creating a scalable UI using Edje, you must be familiar with various scalability properties and part types described in the following sections.</p>
 
@@ -220,12 +220,12 @@ evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
 <p>The default value is <code>0.5 0.5</code>.</p></li>
 
 <li><code>rel1</code>/<code>rel2</code>
-<p>Specifies the position of the left-top and bottom-right corners of the part&#39;s container.</p>
+<p>Specifies the position of the left-top and bottom-right corners of the part's container.</p>
 <ul><li><code>relative</code>: X-axis Y-axis
-<p>Specifies the relative position of the part&#39;s container.</p>
+<p>Specifies the relative position of the part's container.</p>
 <p>The default value is <code>0.0 0.0</code> for <code>rel1.relative</code> and <code>1.0 1.0</code> for <code>rel2.relative</code>.</p></li>
 <li><code>to</code>/<code>to_x</code>/<code>to_y</code>
-<p>Specifies that a corner must be positioned relatively to another part&#39;s container.</p>
+<p>Specifies that a corner must be positioned relatively to another part's container.</p>
 <p>By default, the corners of a part are placed to cover whole interface.</p></li></ul>
 
 <p align="center" class="Table"><strong>Table: Example of the EDC file part block and its properties</strong></p>
@@ -240,70 +240,70 @@ evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
 <pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;group
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;panorama.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Blue rectangle in the middle of the screen */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">rel1 {relative: 0.3 0.4;}</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">rel2 {relative: 0.7 0.6;}</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 127 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Orange rectangle at the bottom of the screen */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;rect2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Affected by scaling factor */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">fixed: 0 1;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Height: 100 pixels (when the scaling factor is 1.0) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">min: 0 100;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">rel1 {relative: 0.0 1.0;}</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">rel2 {relative: 1.0 1.0;}</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Bottom-aligned */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">align: 0.5 1.0;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 127 0 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Image above the orange rectangle */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Affected by scaling factor */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">fixed: 1 1;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Image size: 720 x 180 pixels (when the scaling factor is 1.0) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">min: 720 180;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Y-axis is positioned relative to &quot;rect2&quot; part */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">rel1 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">rel2 {relative: 0.5 0.0; to_y: &quot;rect2&quot;;}</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Bottom-aligned */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">align: 0.5 1.0;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;panorama.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group
+   {
+      name: "property_test";
+      images
+      {
+         image: "panorama.png" COMP;
+      }
+      parts
+      {
+         /* Blue rectangle in the middle of the screen */
+         part
+         {
+            name: "rect1";
+            type: RECT;
+            description
+            {
+               state: "default" 0.0;
+               <span class="highlight">rel1 {relative: 0.3 0.4;}</span>
+               <span class="highlight">rel2 {relative: 0.7 0.6;}</span>
+               color: 0 127 255 255;
+            }
+         }
+         /* Orange rectangle at the bottom of the screen */
+         part
+         {
+            name: "rect2";
+            type: RECT;
+            /* Affected by scaling factor */
+            scale: 1;
+            description
+            {
+               state: "default" 0.0;
+               <span class="highlight">fixed: 0 1;</span>
+               /* Height: 100 pixels (when the scaling factor is 1.0) */
+               <span class="highlight">min: 0 100;</span>
+               <span class="highlight">rel1 {relative: 0.0 1.0;}</span>
+               <span class="highlight">rel2 {relative: 1.0 1.0;}</span>
+               /* Bottom-aligned */
+               <span class="highlight">align: 0.5 1.0;</span>
+               color: 255 127 0 255;
+            }
+         }
+         /* Image above the orange rectangle */
+         part
+         {
+            name: "image";
+            /* Affected by scaling factor */
+            scale: 1;
+            description
+            {
+               state: "default" 0.0;
+               <span class="highlight">fixed: 1 1;</span>
+               /* Image size: 720 x 180 pixels (when the scaling factor is 1.0) */
+               <span class="highlight">min: 720 180;</span>
+               /* Y-axis is positioned relative to "rect2" part */
+               <span class="highlight">rel1 {relative: 0.5 0.0; to_y: "rect2";}</span>
+               <span class="highlight">rel2 {relative: 0.5 0.0; to_y: "rect2";}</span>
+               /* Bottom-aligned */
+               <span class="highlight">align: 0.5 1.0;</span>
+               image.normal: "panorama.png";
+            }
+         }
+      }
+   }
 }
 </pre>
 </td>
@@ -332,32 +332,32 @@ collections
 <pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;group
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;island.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;island.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">aspect: 8/5 8/5;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Keep the aspect ratio based on the part width */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">aspect_preference: HORIZONTAL;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group
+   {
+      name: "property_test";
+
+      images
+      {
+         image: "island.png" COMP;
+      }
+      parts
+      {
+         part
+         {
+            name: "image";
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.0;}
+               rel2 {relative: 1.0 1.0;}
+               image.normal: "island.png";
+               <span class="highlight">aspect: 8/5 8/5;</span>
+               /* Keep the aspect ratio based on the part width */
+               <span class="highlight">aspect_preference: HORIZONTAL;</span>
+            }
+         }
+      }
+   }
 }
 </pre>
 </td>
@@ -372,7 +372,7 @@ collections
 
 <ul><li><code>size</code>: font-size
 <p>Specifies the font size for the text. When the <code>scale</code> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
-       
+
 <li><code>min</code>: horizontal vertical
 <p>Specifies a pair of boolean values that define whether the container can be reduced further than the text size. The property is used to prevent the container from chopping the text.</p>
 <p>When <code>min</code> is set horizontally or vertically, the minimum height or width of the part is decided by the text size.</p>
@@ -395,37 +395,37 @@ collections
 <pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;group
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align: 0.5 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;TIZEN&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Affected by scaling factor */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">size: 80;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Minimum height of the part container is decided by the text size */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">min: 0 1;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group
+   {
+      name: "property_test";
+
+      parts
+      {
+         part
+         {
+            name: "text";
+            type: TEXT;
+            scale: 1;
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.0;}
+               rel2 {relative: 1.0 0.0;}
+               align: 0.5 0.0;
+               color: 108 108 108 255;
+               text
+               {
+                  font: "TIZEN";
+                  /* Affected by scaling factor */
+                  <span class="highlight">size: 80;</span>
+                  /* Minimum height of the part container is decided by the text size */
+                  <span class="highlight">min: 0 1;</span>
+                  text: "Test properties!!";
+               }
+            }
+         }
+      }
+   }
 }
 </pre>
 </td>
@@ -450,32 +450,32 @@ collections
 <pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;group
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;text&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: TEXT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.1;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 108 108 108 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font: &quot;TIZEN&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Resize text to fill the container height */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">fit: 0 1;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: &quot;Test properties!!&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group
+   {
+      name: "property_test";
+      parts
+      {
+         part
+         {
+            name: "text";
+            type: TEXT;
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.0;}
+               rel2 {relative: 1.0 0.1;}
+               color: 108 108 108 255;
+               text
+               {
+                  font: "TIZEN";
+                  /* Resize text to fill the container height */
+                  <span class="highlight">fit: 0 1;</span>
+                  text: "Test properties!!";
+               }
+            }
+         }
+      }
+   }
 }
 </pre>
 </td>
@@ -483,7 +483,7 @@ collections
  </tr>
  </tbody></table></li></ul>
 
- 
+
  <h3>Image</h3>
 <p>The image elements are used to display images on the screen.</p>
 <p>The image blocks in the EDC file can have the following properties related to scalability:</p>
@@ -507,47 +507,47 @@ collections
 <pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;group
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;00_button_01_normal.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.6;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.7;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;00_button_01_normal.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;ninepatch_image&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.9;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;normal: &quot;00_button_01_normal.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">border: 4 4 0 0;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Affected by scaling factor */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">border_scale: 1;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group
+   {
+      name: "property_test";
+
+      images
+      {
+         image: "00_button_01_normal.png" COMP;
+      }
+
+      parts
+      {
+         part
+         {
+            name: "image";
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.6;}
+               rel2 {relative: 1.0 0.7;}
+               image.normal: "00_button_01_normal.png";
+            }
+         }
+         part
+         {
+            name: "ninepatch_image";
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.8;}
+               rel2 {relative: 1.0 0.9;}
+               image
+               {
+                  normal: "00_button_01_normal.png";
+                  <span class="highlight">border: 4 4 0 0;</span>
+                  /* Affected by scaling factor */
+                  <span class="highlight">border_scale: 1;</span>
+               }
+            }
+         }
+      }
+   }
 }
 </pre>
 </td>
@@ -557,12 +557,12 @@ collections
 
 </li></ul>
 <h3>Image Set</h3>
-<p>The image set elements are used to display a specific image on the screen based on the container size. The image set is used to control resource quality when the image part is scaled to multiple devices. According to the size of the part&#39;s container, an appropriate image is loaded.</p>
+<p>The image set elements are used to display a specific image on the screen based on the container size. The image set is used to control resource quality when the image part is scaled to multiple devices. According to the size of the part's container, an appropriate image is loaded.</p>
 <p>The images.set blocks in the EDC file can have the following properties related to scalability:</p>
 
 <ul><li><code>image</code>: image-name
 <p>Specifies the name of the image file.</p></li>
-       
+
 <li><code>size</code>: minw minh maxw maxh
 <p>Specifies the minimum and maximum size that causes a specified image to be selected and shown.</p>
 
@@ -579,92 +579,92 @@ collections
 <pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;group
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;property_test&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">image: &quot;pig.png&quot; COMP;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">size: 640 800 1200 1500;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">image: &quot;monkey.png&quot; COMP;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">size: 400 500 639 799;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">image: &quot;cat.png&quot; COMP;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">size: 240 300 399 499;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">image: &quot;mouse.png&quot; COMP;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">size: 80 100 239 299;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">image: &quot;snail.png&quot; COMP;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">size: 0 0 79 99;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.45;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.5;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 0.75;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;image3&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1 {relative: 0.0 0.8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2 {relative: 1.0 1.0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;alternative_animal&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect: 4/5 4/5;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aspect_preference: BOTH;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group
+   {
+      name: "property_test";
+
+      images
+      {
+         set
+         {
+            name: "alternative_animal";
+            image
+            {
+               <span class="highlight">image: "pig.png" COMP;</span>
+               <span class="highlight">size: 640 800 1200 1500;</span>
+            }
+            image
+            {
+               <span class="highlight">image: "monkey.png" COMP;</span>
+               <span class="highlight">size: 400 500 639 799;</span>
+            }
+            image
+            {
+               <span class="highlight">image: "cat.png" COMP;</span>
+               <span class="highlight">size: 240 300 399 499;</span>
+            }
+            image
+            {
+               <span class="highlight">image: "mouse.png" COMP;</span>
+               <span class="highlight">size: 80 100 239 299;</span>
+            }
+            image
+            {
+               <span class="highlight">image: "snail.png" COMP;</span>
+               <span class="highlight">size: 0 0 79 99;</span>
+            }
+         }
+      }
+
+      parts
+      {
+         part
+         {
+            name: "image1";
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.0;}
+               rel2 {relative: 1.0 0.45;}
+               image.normal: "alternative_animal";
+               aspect: 4/5 4/5;
+               aspect_preference: BOTH;
+            }
+         }
+         part
+         {
+            name: "image2";
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.5;}
+               rel2 {relative: 1.0 0.75;}
+               image.normal: "alternative_animal";
+               aspect: 4/5 4/5;
+               aspect_preference: BOTH;
+            }
+         }
+         part
+         {
+            name: "image3";
+            description
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.8;}
+               rel2 {relative: 1.0 1.0;}
+               image.normal: "alternative_animal";
+               aspect: 4/5 4/5;
+               aspect_preference: BOTH;
+            }
+         }
+      }
+   }
 }
 </pre>
 </td>
  <td><p align="center"> <img alt="Image set example" src="../../../images/scale_example_image_set.png" /> </p> </td>
  </tr>
- </tbody></table> 
+ </tbody></table>
 </li></ul>
 
 <h3>Part Types</h3>
@@ -676,11 +676,11 @@ collections
 <li>When the part <code>scale</code> property is set to 1 (on), the scaling factor has an effect on the minimum size.</li>
 <li>Fixed parts are used when the parts must keep a fixed size in any device or any orientation.</li></ul></li>
 <li>Flexible parts
-<ul><li>Flexible parts resize according to the container size and other fixed parts&#39; size.</li>
+<ul><li>Flexible parts resize according to the container size and other fixed parts' size.</li>
 <li>Flexible parts are used when the parts can be resized in any device or any orientation.</li></ul></li></ul>
 
-<p align="center"><strong>Figure: Fixed and flexible parts</strong></p> 
-<p align="center"> <img alt="Fixed and flexible parts" src="../../../images/scale_fixed_flexible.png" /> </p> 
+<p align="center"><strong>Figure: Fixed and flexible parts</strong></p>
+<p align="center"> <img alt="Fixed and flexible parts" src="../../../images/scale_fixed_flexible.png" /> </p>
 
 
 <h2 id="aspect" name="aspect">Aspect Ratio</h2>
@@ -689,15 +689,15 @@ collections
 <p>As images are scaled in different devices, they are resized based on the container size. The images have specific properties that define the area to be shown when resized.</p>
 
 <p>For example, the following table illustrates what happens to the parts marked with yellow rectangles in the following figure, when scaling properties are applied. in the table, the red dashed rectangle illustrates the container size.</p>
-  
-<p align="center"><strong>Figure: Original image [1920x1280 (8:5)]</strong></p> 
-<p align="center"> <img alt="Original image [1920x1280 (8:5)]" src="../../../images/scale_original_image.png" /> </p> 
+
+<p align="center"><strong>Figure: Original image [1920x1280 (8:5)]</strong></p>
+<p align="center"> <img alt="Original image [1920x1280 (8:5)]" src="../../../images/scale_original_image.png" /> </p>
 
 <div class="note">
        <strong>Note</strong>
        To set the required aspect ratio, use the <code>evas_object_size_hint_aspect_set()</code> function or the <code>aspect_preference</code> property in the EDC file.
 </div>
-  
+
 <p align="center" class="Table"><strong>Table: Image resizing effects with a specific aspect ratio</strong></p>
 <table>
 <col width="40%" />
@@ -719,7 +719,7 @@ collections
  </tr>
  <tr>
  <td>VERTICAL
-<p>Resizing based on the container height while keeping the image aspect ratio.</p> 
+<p>Resizing based on the container height while keeping the image aspect ratio.</p>
 <p>Extra width goes outside the image area and is clipped.</p></td>
  <td><p align="center"><img alt="Scaling effect" src="../../../images/scale_effect_3.png" /></p></td>
  <td><p align="center"><img alt="Scaling effect" src="../../../images/scale_effect_4.png" /></p></td>
@@ -733,11 +733,11 @@ collections
  </tr>
  <tr>
  <td>NONE
-<p>Resizing to fill the available area while keeping the image aspect ratio.</p> 
+<p>Resizing to fill the available area while keeping the image aspect ratio.</p>
 <p>Extra width or height goes outside the image area and is clipped.</p></td>
  <td><p align="center"><img alt="Scaling effect" src="../../../images/scale_effect_7.png" /></p></td>
  <td><p align="center"><img alt="Scaling effect" src="../../../images/scale_effect_8.png" /></p></td>
- </tr> 
+ </tr>
  </tbody></table>
 
 <h3>Setting the Image Aspect Ratio</h3>
diff --git a/org.tizen.guides/html/native/ui/efl/threads_n.htm b/org.tizen.guides/html/native/ui/efl/threads_n.htm
index 67c3971..01d9f07 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/threads_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/threads_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Using Threads</title> 
- </head> 
+  <title>Using Threads</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -28,24 +28,24 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#Thread_safety">Thread Safety</a></li>
-                       <li><a href="#Costs">Thread Pools</a></li> 
+                       <li><a href="#Costs">Thread Pools</a></li>
                        <li><a href="#Functions">Thread Management with Ecore</a></li>
                        <li><a href="#low_level">Low-level Functions</a></li>
                        <li><a href="#Examples">Thread Use Examples</a></li>
-               </ul>           
+               </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc">        
+               <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Using Threads</h1> 
+  <h1>Using Threads</h1>
 
 <p>Threads are concurrent execution environments that are lighter than full-blown processes because they share some operating system resources. Threads make it possible to do several things at the same time while using less resources and offering simpler synchronization and data exchange compared to processes.</p>
 
@@ -94,18 +94,18 @@
 
 <p>The following figures illustrate the thread pool. The first figure shows the occupancy of a hypothetical thread pool. There are several tasks, of which 4 are running. The  <code>thread_max</code> parameter of the pool is 4, and the other tasks are waiting. There is no thread with its <code>func_end()</code> callback currently called.</p>
 
-<p align="center"><strong>Figure: Thread pool, step 1</strong></p> 
-<p align="center"><img alt="Thread pool, step 1" src="../../../images/thread_pool_lifecycle_1.png" /></p> 
+<p align="center"><strong>Figure: Thread pool, step 1</strong></p>
+<p align="center"><img alt="Thread pool, step 1" src="../../../images/thread_pool_lifecycle_1.png" /></p>
 
 <p>When a task, applying the sepia filter on image1, finishes, the corresponding <code>func_end()</code> function is invoked from the main loop.</p>
 
-<p align="center"><strong>Figure: Thread pool, step 2</strong></p> 
-<p align="center"><img alt="Thread pool, step 2" src="../../../images/thread_pool_lifecycle_2.png" /></p> 
+<p align="center"><strong>Figure: Thread pool, step 2</strong></p>
+<p align="center"><img alt="Thread pool, step 2" src="../../../images/thread_pool_lifecycle_2.png" /></p>
 
 <p>With the task done, one of the threads from the pool becomes available, and another thread, adding the reverberation effect on audio3, can run in it.</p>
 
-<p align="center"><strong>Figure: Thread pool, step 3</strong></p> 
-<p align="center"><img alt="Thread pool, step 3" src="../../../images/thread_pool_lifecycle_3.png" /></p> 
+<p align="center"><strong>Figure: Thread pool, step 3</strong></p>
+<p align="center"><img alt="Thread pool, step 3" src="../../../images/thread_pool_lifecycle_3.png" /></p>
 
 <p>As long as there are tasks to be done, the thread pool continues the same way, running tasks in its threads whenever a thread is available.</p>
 
@@ -160,200 +160,200 @@
 
 <p align="center" class="Table"><strong>Table: Locks (mutual exclusions)</strong></p>
 <table>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
+<colgroup>
+<col width="50%" />
+<col width="50%" />
+</colgroup>
 <tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><code>pthread_mutex_new()</code></td> 
-<td><code>eina_lock_new()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_mutex_destroy()</code></td> 
-<td><code>eina_lock_free()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_mutex_lock()</code></td> 
-<td><code>eina_lock_take()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_mutex_trylock()</code></td> 
-<td><code>eina_lock_take_try()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_mutex_unlock()</code></td> 
-<td><code>eina_lock_release()</code></td> 
-</tr>
-<tr> 
-<td>none (prints debug information on the lock)</td> 
-<td><code>eina_lock_debug()</code></td> 
+<tr>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
+</tr>
+<tr>
+<td><code>pthread_mutex_new()</code></td>
+<td><code>eina_lock_new()</code></td>
+</tr>
+<tr>
+<td><code>pthread_mutex_destroy()</code></td>
+<td><code>eina_lock_free()</code></td>
+</tr>
+<tr>
+<td><code>pthread_mutex_lock()</code></td>
+<td><code>eina_lock_take()</code></td>
+</tr>
+<tr>
+<td><code>pthread_mutex_trylock()</code></td>
+<td><code>eina_lock_take_try()</code></td>
+</tr>
+<tr>
+<td><code>pthread_mutex_unlock()</code></td>
+<td><code>eina_lock_release()</code></td>
+</tr>
+<tr>
+<td>none (prints debug information on the lock)</td>
+<td><code>eina_lock_debug()</code></td>
 </tr>
 </tbody>
 </table>
 
 <p align="center" class="Table"><strong>Table: Conditions (notifications when condition objects change)</strong></p>
 <table>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
+<colgroup>
+<col width="50%" />
+<col width="50%" />
+</colgroup>
 <tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><code>pthread_cond_init()</code></td> 
-<td><code>eina_condition_new()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_cond_destroy()</code></td> 
-<td><code>eina_condition_free()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_cond_wait()</code></td> 
-<td><code>eina_condition_wait()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_cond_timedwait()</code></td> 
-<td><code>eina_condition_timedwait()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_cond_broadcast()</code></td> 
-<td><code>eina_condition_broadcast()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_cond_signal()</code></td> 
-<td><code>eina_condition_signal()</code></td> 
+<tr>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
+</tr>
+<tr>
+<td><code>pthread_cond_init()</code></td>
+<td><code>eina_condition_new()</code></td>
+</tr>
+<tr>
+<td><code>pthread_cond_destroy()</code></td>
+<td><code>eina_condition_free()</code></td>
+</tr>
+<tr>
+<td><code>pthread_cond_wait()</code></td>
+<td><code>eina_condition_wait()</code></td>
+</tr>
+<tr>
+<td><code>pthread_cond_timedwait()</code></td>
+<td><code>eina_condition_timedwait()</code></td>
+</tr>
+<tr>
+<td><code>pthread_cond_broadcast()</code></td>
+<td><code>eina_condition_broadcast()</code></td>
+</tr>
+<tr>
+<td><code>pthread_cond_signal()</code></td>
+<td><code>eina_condition_signal()</code></td>
 </tr>
 </tbody>
 </table>
 
 <p align="center" class="Table"><strong>Table: RWLocks (Read-write locks, for multiple-readers/single-writer scenarios)</strong></p>
 <table>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
+<colgroup>
+<col width="50%" />
+<col width="50%" />
+</colgroup>
 <tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><code>pthread_rwlock_init()</code></td> 
+<tr>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
+</tr>
+<tr>
+<td><code>pthread_rwlock_init()</code></td>
 <td><code>
-eina_rwlock_new()</code></td> 
+eina_rwlock_new()</code></td>
 </tr>
-<tr> 
-<td><code>pthread_rwlock_destroy()</code></td> 
-<td><code>eina_rwlock_free()</code></td> 
+<tr>
+<td><code>pthread_rwlock_destroy()</code></td>
+<td><code>eina_rwlock_free()</code></td>
 </tr>
-<tr> 
-<td><code>pthread_rwlock_rwlock_rdlock()</code></td> 
+<tr>
+<td><code>pthread_rwlock_rwlock_rdlock()</code></td>
 <td><code>
-eina_rwlock_take_read()</code></td> 
+eina_rwlock_take_read()</code></td>
 </tr>
-<tr> 
-<td><code>pthread_rwlock_rwlock_wrlock()</code></td> 
+<tr>
+<td><code>pthread_rwlock_rwlock_wrlock()</code></td>
 <td><code>
-eina_rwlock_take_write()</code></td> 
+eina_rwlock_take_write()</code></td>
 </tr>
-<tr> 
-<td><code>pthread_rwlock_unlock()</code></td> 
+<tr>
+<td><code>pthread_rwlock_unlock()</code></td>
 <td><code>
-eina_rwlock_release()</code></td> 
+eina_rwlock_release()</code></td>
 </tr>
 </tbody>
 </table>
 
 <p align="center" class="Table"><strong>Table: TLS (Thread-Local Storage)</strong></p>
 <table>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
+<colgroup>
+<col width="50%" />
+<col width="50%" />
+</colgroup>
 <tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><code>pthread_key_create()</code></td> 
-<td><code>eina_tls_new()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_key_delete()</code></td> 
-<td><code>eina_tls_free()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_getspecific()</code></td> 
-<td><code>eina_tls_get()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_setspecific</code></td> 
-<td><code>eina_tls_set()</code></td> 
+<tr>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
+</tr>
+<tr>
+<td><code>pthread_key_create()</code></td>
+<td><code>eina_tls_new()</code></td>
+</tr>
+<tr>
+<td><code>pthread_key_delete()</code></td>
+<td><code>eina_tls_free()</code></td>
+</tr>
+<tr>
+<td><code>pthread_getspecific()</code></td>
+<td><code>eina_tls_get()</code></td>
+</tr>
+<tr>
+<td><code>pthread_setspecific</code></td>
+<td><code>eina_tls_set()</code></td>
 </tr>
 </tbody>
 </table>
 
 <p align="center" class="Table"><strong>Table: Semaphores (access restrictions for a set of resources)</strong></p>
 <table>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
+<colgroup>
+<col width="50%" />
+<col width="50%" />
+</colgroup>
 <tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><code>sem_init()</code></td> 
-<td><code>eina_semaphore_new()</code></td> 
-</tr>
-<tr> 
-<td><code>sem_destroy()</code></td> 
-<td><code>eina_semaphore_free()</code></td> 
-</tr>
-<tr> 
-<td><code>sem_wait()</code></td> 
-<td><code>eina_semaphore_lock()</code></td> 
-</tr>
-<tr> 
-<td><code>sem_post()</code></td> 
-<td><code>eina_semaphore_release()</code></td> 
+<tr>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
+</tr>
+<tr>
+<td><code>sem_init()</code></td>
+<td><code>eina_semaphore_new()</code></td>
+</tr>
+<tr>
+<td><code>sem_destroy()</code></td>
+<td><code>eina_semaphore_free()</code></td>
+</tr>
+<tr>
+<td><code>sem_wait()</code></td>
+<td><code>eina_semaphore_lock()</code></td>
+</tr>
+<tr>
+<td><code>sem_post()</code></td>
+<td><code>eina_semaphore_release()</code></td>
 </tr>
 </tbody>
 </table>
 
 <p align="center" class="Table"><strong>Table: Barriers</strong></p>
 <table>
-<colgroup> 
-<col width="50%" /> 
-<col width="50%" /> 
-</colgroup> 
+<colgroup>
+<col width="50%" />
+<col width="50%" />
+</colgroup>
 <tbody>
-<tr> 
-<th>pthreads function</th> 
-<th>Eina equivalent</th> 
-</tr> 
-<tr> 
-<td><code>pthread_barrier_init()</code></td> 
-<td><code>eina_barrier_new()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_barrier_destroy()</code></td> 
-<td><code>eina_barrier_free()</code></td> 
-</tr>
-<tr> 
-<td><code>pthread_barrier_wait()</code></td> 
-<td><code>eina_barrier_wait()</code></td> 
+<tr>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
+</tr>
+<tr>
+<td><code>pthread_barrier_init()</code></td>
+<td><code>eina_barrier_new()</code></td>
+</tr>
+<tr>
+<td><code>pthread_barrier_destroy()</code></td>
+<td><code>eina_barrier_free()</code></td>
+</tr>
+<tr>
+<td><code>pthread_barrier_wait()</code></td>
+<td><code>eina_barrier_wait()</code></td>
 </tr>
 </tbody>
 </table>
@@ -372,10 +372,10 @@ eina_rwlock_release()</code></td>
 static void
 _set_label_text(void *data, Ecore_Thread *thread __UNUSED__, void *msgdata)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[64];
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;Tick %d&quot;, (int)(uintptr_t)msgdata);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, buf);
+    char buf[64];
+    appdata_s *ad = data;
+    snprintf(buf, sizeof(buf), "Tick %d", (int)(uintptr_t)msgdata);
+    elm_object_text_set(ad-&gt;label, buf);
 }
 </pre>
 </li>
@@ -385,21 +385,21 @@ _set_label_text(void *data, Ecore_Thread *thread __UNUSED__, void *msgdata)
 static void
 _long_function(void *data __UNUSED__, Ecore_Thread *thread)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int iteration;
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Change the text roughly every 1 second. This is only an example; if you
-&nbsp;&nbsp;&nbsp;&nbsp;   want regular animations, use Ecore animators!
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;for (iteration = 0; ; iteration++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Since you are running from another thread, you need to take special
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   care and instead send data to the main thread and have it run the
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   feedback function given when creating the thread
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Sleep for roughly one second */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int iteration;
+    /*
+       Change the text roughly every 1 second. This is only an example; if you
+       want regular animations, use Ecore animators!
+    */
+    for (iteration = 0; ; iteration++) {
+        /*
+           Since you are running from another thread, you need to take special
+           care and instead send data to the main thread and have it run the
+           feedback function given when creating the thread
+        */
+        ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
+        /* Sleep for roughly one second */
+        sleep(1);
+    }
 }
 </pre>
 </li>
@@ -410,8 +410,8 @@ _long_function(void *data __UNUSED__, Ecore_Thread *thread)
 static void
 _end_func(void *data, Ecore_Thread *thread __UNUSED__)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;Ticks over&quot;);
+    appdata_s *ad = data;
+    elm_object_text_set(ad-&gt;label, "Ticks over");
 }
 </pre>
 </li>
@@ -420,7 +420,7 @@ _end_func(void *data, Ecore_Thread *thread __UNUSED__)
 
 <pre class="prettyprint">
 ecore_thread_feedback_run(_long_function, _set_label_text, _end_func,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, ad, EINA_FALSE);
+                          NULL, ad, EINA_FALSE);
 </pre>
 </li>
 </ol>
@@ -428,24 +428,24 @@ ecore_thread_feedback_run(_long_function, _set_label_text, _end_func,
 <p>To use the <code>ecore_main_loop_thread_safe_call_sync()</code> function:</p>
 
 <ol>
-<li>Implement the GUI function that sets the text of a label and can be called from the main thread. The function receives data as a structure and alternatively displays &quot;Tick d&quot; or &quot;Tock d&quot;.
+<li>Implement the GUI function that sets the text of a label and can be called from the main thread. The function receives data as a structure and alternatively displays "Tick d" or "Tock d".
 
 <pre class="prettyprint">
 struct thd {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad;
-&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool tick_not_tock;
-&nbsp;&nbsp;&nbsp;&nbsp;int iteration;
+    appdata_s *ad;
+    Eina_Bool tick_not_tock;
+    int iteration;
 };
 static void*
 _set_label_text_tick_tock(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[64];
-&nbsp;&nbsp;&nbsp;&nbsp;struct thd *thd = data;
-&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, sizeof(buf), &quot;%s %d&quot;, (thd-&gt;tick_not_tock ? &quot;Tick&quot; : &quot;Tock&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;iteration);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(thd-&gt;ad-&gt;label, buf);
+    char buf[64];
+    struct thd *thd = data;
+    snprintf(buf, sizeof(buf), "%s %d", (thd-&gt;tick_not_tock ? "Tick" : "Tock"),
+             thd-&gt;iteration);
+    elm_object_text_set(thd-&gt;ad-&gt;label, buf);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+    return NULL;
 }
 </pre>
 </li>
@@ -456,17 +456,17 @@ _set_label_text_tick_tock(void *data)
 static void
 _long_function_tick_tock(void *data, Ecore_Thread *thread __UNUSED__)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;struct thd *thd = malloc(sizeof(struct thd));
-&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;for (thd-&gt;iteration = 0; ; (thd-&gt;iteration)++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_TRUE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thd-&gt;tick_not_tock = EINA_FALSE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sleep(1);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;free(thd);
+    struct thd *thd = malloc(sizeof(struct thd));
+    thd-&gt;ad = data;
+    for (thd-&gt;iteration = 0; ; (thd-&gt;iteration)++) {
+        thd-&gt;tick_not_tock = EINA_TRUE;
+        ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
+        sleep(1);
+        thd-&gt;tick_not_tock = EINA_FALSE;
+        ecore_main_loop_thread_safe_call_sync(_set_label_text_tick_tock, thd);
+        sleep(1);
+    }
+    free(thd);
 }
 </pre>
 </li>
@@ -492,7 +492,7 @@ ecore_thread_run(_long_function_tick_tock, _end_func, NULL, ad);
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/tools_n.htm b/org.tizen.guides/html/native/ui/efl/tools_n.htm
index 064e609..82fcfec 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/tools_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/tools_n.htm
@@ -26,7 +26,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
         <p class="toc-title">Content</p>
-        <ul class="toc">             
+        <ul class="toc">
                        <li><a href="#string">String</a></li>
                        <li><a href="#memory">Memory Pool</a></li>
                        <li><a href="#safety">Safety Checks</a></li>
@@ -40,7 +40,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-   
+
    <h1>Tools</h1>
  <p>The Eina library provides a number of tools to help you when coding applications:</p>
 
@@ -57,29 +57,29 @@
 <li>Rectangle: Rectangle structure and standard manipulation methods</li>
 <li><a href="#safety">Safety Checks</a>: Extra checks that report unexpected conditions and can be disabled during compilation</li>
 <li><a href="#string">String</a>: Set of functions that manage C strings</li>
-</ul>    
-  
+</ul>
+
 <h2 id="string" name="string">String</h2>
 
 <p>When creating applications, you always need to manipulate strings. Use the following Eina functions for manipulating C strings:</p>
 
 <ul><li>To split a string into an array of strings based on a delimiter that determines where the string is split, use the <code>eina_str_split()</code> function.
 
-<p>The split is the most common string manipulation method. For example, if you have the <code>&quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;</code> string, and you want to print it in an easily readable format, you can split it using the &quot;:&quot; character as a delimiter.</p>
+<p>The split is the most common string manipulation method. For example, if you have the <code>"Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master"</code> string, and you want to print it in an easily readable format, you can split it using the ":" character as a delimiter.</p>
 
 <p>In the <code>eina_str_split()</code> function, the first parameter is the string to split, the second is the delimiter, and the third is the maximum number of strings to split the string into. If you set the third parameter to be smaller than 1, the function splits the string as many times as possible.</p>
 <p>The function returns a newly-allocated <code>NULL</code>-terminated array of strings, or <code>NULL</code>, if it fails to allocate the array. When no longer needed, free the memory allocated by the <code>eina_str_split()</code> function.</p>
 
 <pre class="prettyprint">
-char *nicks = &quot;Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master&quot;;
+char *nicks = "Rasterman:Bluebugs:Tasn:Illogict:billiob:Puppet_Master";
 char **result_arr;
 int i;
 
-/* Split the string with the &#39;:&#39; delimiter */
-result_arr = eina_str_split(nicks, &quot;:&quot;, 0);
+/* Split the string with the ':' delimiter */
+result_arr = eina_str_split(nicks, ":", 0);
 /* Print the result */
 for (i = 0; result_arr[i]; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Nick: %s\n&quot;, result_arr[i]);
+    printf("Nick: %s\n", result_arr[i]);
 /* Free the memory */
 free(result_arr[0]);
 free(result_arr);
@@ -92,21 +92,21 @@ free(result_arr);
 char *str;
 /* Initialize the string */
 str = malloc(sizeof(char) * 4);
-strcpy(str, &quot;bsd&quot;);
+strcpy(str, "bsd");
 /* Change the string to uppercase */
 eina_str_toupper((char **)&amp;str);
-printf(&quot;%s\n&quot;, str);
+printf("%s\n", str);
 /* Change the string to lowercase */
 eina_str_tolower(&amp;str);
-printf(&quot;%s\n&quot;, str);
+printf("%s\n", str);
 /* Free the memory */
 free(str);
 </pre></li>
 <li>To join 2 strings of known length, use the <code>eina_str_join()</code> function. The first parameter is the buffer to store the result, the second is the size of the buffer, the third is the separator between the 2 strings, and the 2 final parameters are the stings to be joined.
 
 <pre class="prettyprint">
-char *part1 = &quot;Tizen powered by&quot;;
-char *part2 = &quot;Enlightenment Foundation Libraries&quot;;
+char *part1 = "Tizen powered by";
+char *part2 = "Enlightenment Foundation Libraries";
 char *res;
 size_t size;
 /* Calculate the string size + 1 for the delimiter */
@@ -114,8 +114,8 @@ size = strlen(part1) + strlen(part2) + 1;
 /* Allocate memory for the result */
 res = malloc(sizeof(char) * size);
 /* Join the strings */
-eina_str_join(res, size, &#39; &#39;, part1, part2);
-printf(&quot;%s\n&quot;, res);
+eina_str_join(res, size, ' ', part1, part2);
+printf("%s\n", res);
 /* Free the memory */
 free(res);
 </pre></li>
@@ -124,15 +124,15 @@ free(res);
 <p>These functions return <code>EINA_TRUE</code> if the string contains the specified prefix, suffix, or extension, and <code>EINA_FALSE</code> if it does not.</p>
 
 <pre class="prettyprint">
-char *names = &quot;Carsten;Cedric;Tom;Chidambar;Boris;Philippe&quot;;
-if (eina_str_has_prefix(names, &quot;Carsten&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;String starts with &#39;Carsten&#39;&quot;);
-if (eina_str_has_suffix(names, &quot;Philippe&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;String ends with &#39;Philippe&#39;&quot;);
-if (eina_str_has_extension(names, &quot;philippe&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;String has extension &#39;philippe&#39;&quot;);
+char *names = "Carsten;Cedric;Tom;Chidambar;Boris;Philippe";
+if (eina_str_has_prefix(names, "Carsten"))
+    printf("String starts with 'Carsten'");
+if (eina_str_has_suffix(names, "Philippe"))
+    printf("String ends with 'Philippe'");
+if (eina_str_has_extension(names, "philippe"))
+    printf("String has extension 'philippe'");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;String does not have extension &#39;philippe&#39;&quot;);
+    printf("String does not have extension 'philippe'");
 </pre></li></ul>
 
 <h2 id="memory" name="memory">Memory Pool</h2>
@@ -176,12 +176,12 @@ else
 Eina_Bool
 myfunction(char *param)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* If the parameter is NULL, EINA_SAFETY_ON_NULL_RETURN calls &quot;return&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN(param);
+    /* If the parameter is NULL, EINA_SAFETY_ON_NULL_RETURN calls "return" */
+    EINA_SAFETY_ON_NULL_RETURN(param);
 
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;My param is: %s\n&quot;, param);
+    printf("My param is: %s\n", param);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    return EINA_TRUE;
 }
 </pre>
 </li>
@@ -191,11 +191,11 @@ myfunction(char *param)
 Eina_Bool void
 myfunction(char *param)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* If the parameter is NULL, return EINA_FALSE; */
-&nbsp;&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_RETURN_VAL(param, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;My param is: %s\n&quot;, param);
+    /* If the parameter is NULL, return EINA_FALSE; */
+    EINA_SAFETY_ON_NULL_RETURN_VAL(param, EINA_FALSE);
+    printf("My param is: %s\n", param);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    return EINA_TRUE;
 }
 </pre>
 </li>
@@ -205,17 +205,17 @@ myfunction(char *param)
 static void
 isnullcb()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;The parameter is NULL\n&quot;);
+    printf("The parameter is NULL\n");
 }
 
 Eina_Bool void
 myfunction(char *param)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* If the parameter is NULL, call isnullcb() */
-&nbsp;&nbsp;&nbsp;&nbsp;EINA_SAFETY_ON_NULL_GOTO(param, isnullcb);
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;My param is: %s\n&quot;, param);
+    /* If the parameter is NULL, call isnullcb() */
+    EINA_SAFETY_ON_NULL_GOTO(param, isnullcb);
+    printf("My param is: %s\n", param);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+    return EINA_TRUE;
 }
 </pre>
 </li>
@@ -231,7 +231,7 @@ myfunction(char *param)
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-   
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/touch_gesture_n.htm b/org.tizen.guides/html/native/ui/efl/touch_gesture_n.htm
index d26ef57..ddb97e6 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/touch_gesture_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/touch_gesture_n.htm
@@ -5,18 +5,18 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
        <title>Handling Touch Gestures</title>
-      
+
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
-       
+
 <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
@@ -36,20 +36,20 @@
                        <li><a href="#flick">Implementing Flick Gestures</a></li>
                        <li><a href="#zoom">Implementing Zoom Gestures</a></li>
                        <li><a href="#rotate">Implementing Rotate Gestures</a></li>
-               </ul>           
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elm__Gesture__Layer.html">Gesture Layer API for Mobile Native</a></li>
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elm__Gesture__Layer.html">Gesture Layer API for Wearable Native</a></li>                      
+                       <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elm__Gesture__Layer.html">Gesture Layer API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Handling Touch Gestures</h1>
-  
+
 <p>You can implement your application to recognize and react to different types of gestures provided by the EFL library.</p>
 
 <p>The elementary library provides a gesture layer for a wide range of touch gestures, such as tap, double tap, triple tap, long tap, momentum monitoring, line, flick, zoom, and rotate, which can be used by the application to build a dynamic user interface interaction which is simple and intuitive to use.</p>
@@ -68,8 +68,8 @@ Evas_Object *r;
 /* Gesture layer object */
 Evas_Object *g;
 
-win = elm_win_util_standard_add(&quot;gesture_layer&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Gesture Layer&quot;);
+win = elm_win_util_standard_add("gesture_layer",
+                                "Gesture Layer");
 elm_win_autodel_set(win, EINA_TRUE);
 
 /* Gesture layer transparent object */
@@ -101,12 +101,12 @@ evas_object_show(r);
 <pre class="prettyprint">
 /* Get or set the gesture layer long tap start timeout of an object */
 void elm_gesture_layer_long_tap_start_timeout_set(Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double long_tap_start_timeout);
+                                                  double long_tap_start_timeout);
 double elm_gesture_layer_long_tap_start_timeout_get(const Evas_Object *obj);
 
 /* Get or set the gesture layer double tap timeout of an object */
 void elm_gesture_layer_double_tap_timeout_set(Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double double_tap_timeout);
+                                              double double_tap_timeout);
 double elm_gesture_layer_double_tap_timeout_get(const Evas_Object *obj);
 </pre></li>
 
@@ -140,11 +140,11 @@ ELM_GESTURE_STATE_ABORT /* Ongoing gesture aborted */
 <li><p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
 <pre class="prettyprint">
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS, ELM_GESTURE_STATE_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;n_finger_tap_start, NULL);
+                         n_finger_tap_start, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS, ELM_GESTURE_STATE_END,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;n_finger_tap_end, NULL);
+                         n_finger_tap_end, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS, ELM_GESTURE_STATE_ABORT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;n_finger_tap_abort, NULL);
+                         n_finger_tap_abort, NULL);
 </pre>
 </li>
 <li>
@@ -154,21 +154,21 @@ elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS, ELM_GESTURE_STATE_ABORT,
 static Evas_Event_Flags
 n_finger_tap_start(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;N tap started &lt;%p&gt; x,y=&lt;%d,%d&gt; count=&lt;%d&gt; timestamp=&lt;%d&gt; \n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event_info, p-&gt;x, p-&gt;y, p-&gt;n, p-&gt;timestamp);
+    Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *)event_info;
+    printf("N tap started &lt;%p&gt; x,y=&lt;%d,%d&gt; count=&lt;%d&gt; timestamp=&lt;%d&gt; \n",
+           event_info, p-&gt;x, p-&gt;y, p-&gt;n, p-&gt;timestamp);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 <p>The function returns <code>EVAS_EVENT_FLAG_ON_HOLD</code>, if the component acted upon the event.</p>
- 
+
 <p>The <code>event_info</code> attribute contains the tap information in the <code>_Elm_Gesture_Taps_Info</code> data structure. If the number of fingers is bigger than 2, the <code>x</code> and <code>y</code> values get the average value of each <code>x</code> and <code>y</code> geometry values.</p>
 <pre class="prettyprint">
 struct _Elm_Gesture_Taps_Info {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord x, y; /* Center point between fingers */
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int n; /* Number of fingers tapped */
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int timestamp; /* Event timestamp */
+    Evas_Coord x, y; /* Center point between fingers */
+    unsigned int n; /* Number of fingers tapped */
+    unsigned int timestamp; /* Event timestamp */
 };
 </pre>
 </li>
@@ -178,12 +178,12 @@ struct _Elm_Gesture_Taps_Info {
 static Evas_Event_Flags
 n_finger_tap_end(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *)event_info;
+    Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *)event_info;
 
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;N tap started &lt;%p&gt; x,y=&lt;%d,%d&gt; count=&lt;%d&gt; timestamp=&lt;%d&gt; \n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event_info, p-&gt;x, p-&gt;y, p-&gt;n, p-&gt;timestamp);
+    printf("N tap started &lt;%p&gt; x,y=&lt;%d,%d&gt; count=&lt;%d&gt; timestamp=&lt;%d&gt; \n",
+           event_info, p-&gt;x, p-&gt;y, p-&gt;n, p-&gt;timestamp);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -194,10 +194,10 @@ n_finger_tap_end(void *data, void *event_info)
 static Evas_Event_Flags
 n_finger_tap_abort(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;N tap abort\n&quot;);
+    Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *)event_info;
+    printf("N tap abort\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -210,13 +210,13 @@ n_finger_tap_abort(void *data, void *event_info)
 <p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
 <pre class="prettyprint">
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS, ELM_GESTURE_STATE_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dbl_click_start, NULL);
+                         dbl_click_start, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS, ELM_GESTURE_STATE_MOVE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dbl_click_move, NULL);
+                         dbl_click_move, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS, ELM_GESTURE_STATE_END,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dbl_click_end, NULL);
+                         dbl_click_end, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS, ELM_GESTURE_STATE_ABORT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dbl_click_abort, NULL);
+                         dbl_click_abort, NULL);
 </pre>
 </li>
 <li><p>A double tap gesture is started by calling the <code>dbl_click_start()</code> callback function when a mouse down event occurs.</p>
@@ -238,13 +238,13 @@ elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS, ELM_GESTURE_STATE_ABORT,
 <p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
 <pre class="prettyprint">
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS, ELM_GESTURE_STATE_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;triple_click_start, NULL);
+                         triple_click_start, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS, ELM_GESTURE_STATE_MOVE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;triple_click_move, NULL);
+                         triple_click_move, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS, ELM_GESTURE_STATE_END,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;triple_click_end, NULL);
+                         triple_click_end, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS, ELM_GESTURE_STATE_ABORT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;triple_click_abort, NULL);
+                         triple_click_abort, NULL);
 </pre>
 </li>
 <li>
@@ -266,13 +266,13 @@ elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS, ELM_GESTURE_STATE_ABORT,
 <p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
 <pre class="prettyprint">
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LONG_TAPS, ELM_GESTURE_STATE_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;n_long_tap_start, NULL);
+                         n_long_tap_start, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LONG_TAPS, ELM_GESTURE_STATE_MOVE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;n_long_tap_move, NULL);
+                         n_long_tap_move, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LONG_TAPS, ELM_GESTURE_STATE_END,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;n_long_tap_end, NULL);
+                         n_long_tap_end, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LONG_TAPS, ELM_GESTURE_STATE_ABORT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;n_long_tap_abort, NULL);
+                         n_long_tap_abort, NULL);
 </pre>
 </li>
 <li>
@@ -301,13 +301,13 @@ elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LONG_TAPS, ELM_GESTURE_STATE_ABORT,
 <p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
 <pre class="prettyprint">
 elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM, ELM_GESTURE_STATE_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;momentum_start, NULL);
+                         momentum_start, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM, ELM_GESTURE_STATE_END,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;momentum_end, NULL);
+                         momentum_end, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM, ELM_GESTURE_STATE_ABORT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;momentum_abort, NULL);
+                         momentum_abort, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM, ELM_GESTURE_STATE_MOVE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;momentum_move, NULL);
+                         momentum_move, NULL);
 </pre>
 </li>
 <li>
@@ -316,11 +316,11 @@ elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM, ELM_GESTURE_STATE_MOVE,
 static Evas_Event_Flags
 momentum_start(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Momentum_Info *p = (Elm_Gesture_Momentum_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;momentum started x1,y1=&lt;%d,%d&gt; tx,ty=&lt;%u,%u&gt; n=&lt;%u&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;x1, p-&gt;y1, p-&gt;tx, p-&gt;ty, p-&gt;n);
+    Elm_Gesture_Momentum_Info *p = (Elm_Gesture_Momentum_Info *)event_info;
+    printf("momentum started x1,y1=&lt;%d,%d&gt; tx,ty=&lt;%u,%u&gt; n=&lt;%u&gt;\n",
+           p-&gt;x1, p-&gt;y1, p-&gt;tx, p-&gt;ty, p-&gt;n);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 
@@ -328,18 +328,18 @@ momentum_start(void *data, void *event_info)
 <pre class="prettyprint">
 /* Report line ends, timestamps, and momentum computed */
 struct _Elm_Gesture_Momentum_Info {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord x1; /* Final-swipe direction with starting point on X */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord y1; /* Final-swipe direction with starting point on Y */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord x2; /* Final-swipe direction with ending point on X */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord y2; /* Final-swipe direction with ending point on Y */
+    Evas_Coord x1; /* Final-swipe direction with starting point on X */
+    Evas_Coord y1; /* Final-swipe direction with starting point on Y */
+    Evas_Coord x2; /* Final-swipe direction with ending point on X */
+    Evas_Coord y2; /* Final-swipe direction with ending point on Y */
 
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int tx; /* Timestamp of the start of the final X swipe */
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int ty; /* Timestamp of the start of the final Y swipe */
+    unsigned int tx; /* Timestamp of the start of the final X swipe */
+    unsigned int ty; /* Timestamp of the start of the final Y swipe */
 
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord mx; /* Momentum on X */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord my; /* Momentum on Y */
+    Evas_Coord mx; /* Momentum on X */
+    Evas_Coord my; /* Momentum on Y */
 
-&nbsp;&nbsp;&nbsp;&nbsp;unsigned int n; /* Number of fingers */
+    unsigned int n; /* Number of fingers */
 };
 </pre>
 
@@ -352,12 +352,12 @@ struct _Elm_Gesture_Momentum_Info {
 static Evas_Event_Flags
 momentum_move(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Momentum_Info *p = (Elm_Gesture_Momentum_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;momentum move x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tx,ty=&lt;%u,%u&gt; mx=&lt;%d&gt; my=&lt;%d&gt; n=&lt;%u&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;x1, p-&gt;y1, p-&gt;x2, p-&gt;y2, p-&gt;tx, p-&gt;ty, p-&gt;mx, p-&gt;my, p-&gt;n);
+    Elm_Gesture_Momentum_Info *p = (Elm_Gesture_Momentum_Info *)event_info;
+    printf("momentum move x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt;
+            tx,ty=&lt;%u,%u&gt; mx=&lt;%d&gt; my=&lt;%d&gt; n=&lt;%u&gt;\n",
+           p-&gt;x1, p-&gt;y1, p-&gt;x2, p-&gt;y2, p-&gt;tx, p-&gt;ty, p-&gt;mx, p-&gt;my, p-&gt;n);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -367,20 +367,20 @@ momentum_move(void *data, void *event_info)
 static Evas_Event_Flags
 momentum_end(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Momentum_Info *p = (Elm_Gesture_Momentum_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;momentum ended x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tx,ty=&lt;%u,%u&gt; mx=&lt;%d&gt; my=&lt;%d&gt; n=&gt;%u&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;x1, p-&gt;y1, p-&gt;x2, p-&gt;y2, p-&gt;tx, p-&gt;ty, p-&gt;mx, p-&gt;my, p-&gt;n);
+    Elm_Gesture_Momentum_Info *p = (Elm_Gesture_Momentum_Info *)event_info;
+    printf("momentum ended x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt;
+            tx,ty=&lt;%u,%u&gt; mx=&lt;%d&gt; my=&lt;%d&gt; n=&gt;%u&gt;\n",
+           p-&gt;x1, p-&gt;y1, p-&gt;x2, p-&gt;y2, p-&gt;tx, p-&gt;ty, p-&gt;mx, p-&gt;my, p-&gt;n);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 
 static Evas_Event_Flags
 momentum_abort(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;momentum abort\n&quot;);
+    printf("momentum abort\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -401,7 +401,7 @@ int elm_gesture_layer_line_min_length_get(const Evas_Object *obj);
 
 /* Get or set the gesture layer line distance tolerance of an object */
 void elm_gesture_layer_line_distance_tolerance_set(Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord line_distance_tolerance);
+                                                   Evas_Coord line_distance_tolerance);
 Evas_Coord elm_gesture_layer_line_distance_tolerance_get(const Evas_Object *obj);
 </pre></li>
 
@@ -411,7 +411,7 @@ Evas_Coord elm_gesture_layer_line_distance_tolerance_get(const Evas_Object *obj)
 <pre class="prettyprint">
 /* Get or set the gesture layer continue mode of an object */
 void elm_gesture_layer_continues_enable_set(Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eina_Bool continues_enable);
+                                            Eina_Bool continues_enable);
 Eina_Bool elm_gesture_layer_continues_enable_get(const Evas_Object *obj);
 </pre>
 </li></ul>
@@ -424,13 +424,13 @@ Eina_Bool elm_gesture_layer_continues_enable_get(const Evas_Object *obj);
 <p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
 <pre class="prettyprint">
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES, ELM_GESTURE_STATE_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_start, NULL);
+                         line_start, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES, ELM_GESTURE_STATE_MOVE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_move, NULL);
+                         line_move, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES, ELM_GESTURE_STATE_END,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_end, NULL);
+                         line_end, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES, ELM_GESTURE_STATE_ABORT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line_abort, NULL);
+                         line_abort, NULL);
 </pre>
 </li>
 <li>
@@ -439,19 +439,19 @@ elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES, ELM_GESTURE_STATE_ABORT,
 static Evas_Event_Flags
 line_start(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Line_Info *p = (Elm_Gesture_Line_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;line started angle=&lt;%lf&gt; x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt; tx,ty=&lt;%u,%u&gt; n=&lt;%u&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;angle, p-&gt;momentum.x1, p-&gt;momentum.y1, p-&gt;momentum.x2, p-&gt;momentum.y2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;momentum.tx, p-&gt;momentum.ty, p-&gt;momentum.n);
+    Elm_Gesture_Line_Info *p = (Elm_Gesture_Line_Info *)event_info;
+    printf("line started angle=&lt;%lf&gt; x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt; tx,ty=&lt;%u,%u&gt; n=&lt;%u&gt;\n",
+           p-&gt;angle, p-&gt;momentum.x1, p-&gt;momentum.y1, p-&gt;momentum.x2, p-&gt;momentum.y2,
+           p-&gt;momentum.tx, p-&gt;momentum.ty, p-&gt;momentum.n);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 <p>The <code>event_info</code> attribute contains the line information in the <code>Elm_Gesture_Line_Info</code> data structure:</p>
 <pre class="prettyprint">
 struct _Elm_Gesture_Line_Info {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Momentum_Info momentum; /* Line momentum info */
-&nbsp;&nbsp;&nbsp;&nbsp;double angle; /* Angle (direction) of the lines */
+    Elm_Gesture_Momentum_Info momentum; /* Line momentum info */
+    double angle; /* Angle (direction) of the lines */
 };
 </pre>
 </li>
@@ -462,12 +462,12 @@ struct _Elm_Gesture_Line_Info {
 static Evas_Event_Flags
 line_move(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Line_Info *p = (Elm_Gesture_Line_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;line move angle=&lt;%lf&gt; x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt; tx,ty=&lt;%u,%u&gt; n=&lt;%u&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;angle, p-&gt;momentum.x1, p-&gt;momentum.y1, p-&gt;momentum.x2, p-&gt;momentum.y2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;momentum.tx, p-&gt;momentum.ty, p-&gt;momentum.n);
+    Elm_Gesture_Line_Info *p = (Elm_Gesture_Line_Info *)event_info;
+    printf("line move angle=&lt;%lf&gt; x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt; tx,ty=&lt;%u,%u&gt; n=&lt;%u&gt;\n",
+           p-&gt;angle, p-&gt;momentum.x1, p-&gt;momentum.y1, p-&gt;momentum.x2, p-&gt;momentum.y2,
+           p-&gt;momentum.tx, p-&gt;momentum.ty, p-&gt;momentum.n);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -477,12 +477,12 @@ line_move(void *data, void *event_info)
 static Evas_Event_Flags
 line_end(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Line_Info *p = (Elm_Gesture_Line_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;line end angle=&lt;%lf&gt; x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt; tx,ty=&lt;%u,%u&gt; n=&lt;%u&gt;,\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;angle, p-&gt;momentum.x1, p-&gt;momentum.y1, p-&gt;momentum.x2, p-&gt;momentum.y2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;momentum.tx, p-&gt;momentum.ty, p-&gt;momentum.n);
+    Elm_Gesture_Line_Info *p = (Elm_Gesture_Line_Info *)event_info;
+    printf("line end angle=&lt;%lf&gt; x1,y1=&lt;%d,%d&gt; x2,y2=&lt;%d,%d&gt; tx,ty=&lt;%u,%u&gt; n=&lt;%u&gt;,\n",
+           p-&gt;angle, p-&gt;momentum.x1, p-&gt;momentum.y1, p-&gt;momentum.x2, p-&gt;momentum.y2,
+           p-&gt;momentum.tx, p-&gt;momentum.ty, p-&gt;momentum.n);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -492,10 +492,10 @@ line_end(void *data, void *event_info)
 static Evas_Event_Flags
 line_abort(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Line_Info *p = (Elm_Gesture_Line_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;line abort\n&quot;);
+    Elm_Gesture_Line_Info *p = (Elm_Gesture_Line_Info *)event_info;
+    printf("line abort\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -508,7 +508,7 @@ line_abort(void *data, void *event_info)
 <pre class="prettyprint">
 /* Get or set the gesture layer flick time limit (in milliseconds) of an object */
 void elm_gesture_layer_flick_time_limit_ms_set(Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsigned int flick_time_limit_ms);
+                                               unsigned int flick_time_limit_ms);
 unsigned int elm_gesture_layer_flick_time_limit_ms_get(const Evas_Object *obj);
 </pre>
 
@@ -520,11 +520,11 @@ unsigned int elm_gesture_layer_flick_time_limit_ms_get(const Evas_Object *obj);
 <p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
 <pre class="prettyprint">
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS, ELM_GESTURE_STATE_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flick_start, NULL);
+                         flick_start, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS, ELM_GESTURE_STATE_END,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flick_end, NULL);
+                         flick_end, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS, ELM_GESTURE_STATE_ABORT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flick_abort, NULL);
+                         flick_abort, NULL);
 </pre>
 <p>The <code>flick_move()</code> callback function works the same way as the <code>line_move()</code> callback.</p>
 </li>
@@ -553,7 +553,7 @@ double elm_gesture_layer_zoom_step_get(const Evas_Object *obj);
 
 /* Get or set the gesture layer zoom distance tolerance of an object */
 void elm_gesture_layer_zoom_distance_tolerance_set(Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord zoom_distance_tolerance);
+                                                   Evas_Coord zoom_distance_tolerance);
 Evas_Coord elm_gesture_layer_zoom_distance_tolerance_get(const Evas_Object *obj);
 
 /* Get or set the gesture layer zoom wheel factor of an object */
@@ -571,7 +571,7 @@ double elm_gesture_layer_zoom_finger_factor_get(const Evas_Object *obj);
 <ul><li>
 <p>The default zoom value is 1, when the zoom gesture starts. After every zoom gesture, the value is increased or decreased according to the internal calculation logic. The radius value is used for the calculation.</p></li>
 <li><p>If the mouse wheel events are sent with the <strong>Ctrl</strong> key on the gesture layer, the <code>zoom_start()</code> callback function is called with the default zoom value (1) and the zoom value (<code>zoom_finger_factor * zoom _wheel_factor</code>) is increased or decreased on every step to follow the wheel up or down.</p></li>
-<li><p>If a 2-finger down event points closer than the zoom distance tolerance value, the zoom gesture is not started. After the gap is bigger than the <code>zoom_distance_tolerance</code> value, the zoom gesture is started with the default value 1 and the event info gets a radius value and the gesture&#39;s momentum value.</p></li></ul>
+<li><p>If a 2-finger down event points closer than the zoom distance tolerance value, the zoom gesture is not started. After the gap is bigger than the <code>zoom_distance_tolerance</code> value, the zoom gesture is started with the default value 1 and the event info gets a radius value and the gesture's momentum value.</p></li></ul>
 
 <p>To create a zoom gesture:</p>
 <ol>
@@ -579,13 +579,13 @@ double elm_gesture_layer_zoom_finger_factor_get(const Evas_Object *obj);
 <p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
 <pre class="prettyprint">
 elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM, ELM_GESTURE_STATE_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zoom_start, NULL);
+                         zoom_start, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM, ELM_GESTURE_STATE_END,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zoom_end, NULL);
+                         zoom_end, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM, ELM_GESTURE_STATE_ABORT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zoom_abort, NULL);
+                         zoom_abort, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM, ELM_GESTURE_STATE_MOVE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zoom_move, NULL);
+                         zoom_move, NULL);
 </pre>
 </li>
 <li>
@@ -594,21 +594,21 @@ elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM, ELM_GESTURE_STATE_MOVE,
 static Evas_Event_Flags
 zoom_start(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Zoom_Info *p = (Elm_Gesture_Zoom_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;zoom started &lt;%d,%d&gt; zoom=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;x, p-&gt;y, p-&gt;zoom, p-&gt;radius, p-&gt;momentum);
+    Elm_Gesture_Zoom_Info *p = (Elm_Gesture_Zoom_Info *)event_info;
+    printf("zoom started &lt;%d,%d&gt; zoom=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n",
+           p-&gt;x, p-&gt;y, p-&gt;zoom, p-&gt;radius, p-&gt;momentum);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 
 <p>The <code>event_info</code> attribute contains the zoom information in the <code>Elm_Gesture_Zoom_Info</code> data structure:</p>
 <pre class="prettyprint">
 struct _Elm_Gesture_Zoom_Info {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord x, y; /* Zoom center point reported to the user */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord radius; /* Radius between fingers reported to the user */
-&nbsp;&nbsp;&nbsp;&nbsp;double zoom; /* Zoom value: 1.0 means no zoom */
-&nbsp;&nbsp;&nbsp;&nbsp;double momentum; /* Zoom momentum: zoom growth per second (NOT YET SUPPORTED) */
+    Evas_Coord x, y; /* Zoom center point reported to the user */
+    Evas_Coord radius; /* Radius between fingers reported to the user */
+    double zoom; /* Zoom value: 1.0 means no zoom */
+    double momentum; /* Zoom momentum: zoom growth per second (NOT YET SUPPORTED) */
 };
 </pre>
 
@@ -626,11 +626,11 @@ struct _Elm_Gesture_Zoom_Info {
 static Evas_Event_Flags
 zoom_move(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Zoom_Info *p = (Elm_Gesture_Zoom_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;zoom move &lt;%d,%d&gt; zoom=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;x, p-&gt;y, p-&gt;zoom, p-&gt;radius, p-&gt;momentum);
+    Elm_Gesture_Zoom_Info *p = (Elm_Gesture_Zoom_Info *)event_info;
+    printf("zoom move &lt;%d,%d&gt; zoom=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n",
+           p-&gt;x, p-&gt;y, p-&gt;zoom, p-&gt;radius, p-&gt;momentum);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -640,11 +640,11 @@ zoom_move(void *data, void *event_info)
 static Evas_Event_Flags
 zoom_end(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Zoom_Info *p = (Elm_Gesture_Zoom_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;zoom end &lt;%d,%d&gt; zoom=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;x, p-&gt;y, p-&gt;zoom, p-&gt;radius, p-&gt;momentum);
+    Elm_Gesture_Zoom_Info *p = (Elm_Gesture_Zoom_Info *)event_info;
+    printf("zoom end &lt;%d,%d&gt; zoom=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n",
+           p-&gt;x, p-&gt;y, p-&gt;zoom, p-&gt;radius, p-&gt;momentum);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -654,9 +654,9 @@ zoom_end(void *data, void *event_info)
 static Evas_Event_Flags
 zoom_abort(void *data, void *event_info EINA_UNUSED)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;zoom abort\n&quot;);
+    printf("zoom abort\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -673,7 +673,7 @@ double elm_gesture_layer_rotate_step_get(const Evas_Object *obj);
 
 /* Get or set the gesture layer rotate angular tolerance of an object */
 void elm_gesture_layer_rotate_angular_tolerance_set(Evas_Object *obj,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double rotate_angular_tolerance);
+                                                    double rotate_angular_tolerance);
 double elm_gesture_layer_rotate_angular_tolerance_get(const Evas_Object *obj);
 </pre>
 
@@ -691,13 +691,13 @@ double elm_gesture_layer_rotate_angular_tolerance_get(const Evas_Object *obj);
 <p>Use the <code>elm_gesture_layer_cb_set()</code> function to set callbacks to be notified about the change of the gesture state:</p>
 <pre class="prettyprint">
 elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE, ELM_GESTURE_STATE_START,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotate_start, NULL);
+                         rotate_start, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE, ELM_GESTURE_STATE_END,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotate_end, NULL);
+                         rotate_end, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE, ELM_GESTURE_STATE_ABORT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotate_abort, NULL);
+                         rotate_abort, NULL);
 elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE, ELM_GESTURE_STATE_MOVE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotate_move, NULL);
+                         rotate_move, NULL);
 </pre>
 </li>
 <li>
@@ -706,21 +706,21 @@ elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE, ELM_GESTURE_STATE_MOVE,
 static Evas_Event_Flags
 rotate_start(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Rotate_Info *p = (Elm_Gesture_Rotate_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;rotate started &lt;%d,%d&gt; base=&lt;%f&gt; angle=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;x, p-&gt;y, p-&gt;base_angle, p-&gt;angle, p-&gt;radius, p-&gt;momentum);
+    Elm_Gesture_Rotate_Info *p = (Elm_Gesture_Rotate_Info *)event_info;
+    printf("rotate started &lt;%d,%d&gt; base=&lt;%f&gt; angle=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n",
+           p-&gt;x, p-&gt;y, p-&gt;base_angle, p-&gt;angle, p-&gt;radius, p-&gt;momentum);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 <p>The <code>event_info</code> attribute contains the rotation information in the <code>Elm_Gesture_Rotate_Info</code> data structure:</p>
 <pre class="prettyprint">
 struct _Elm_Gesture_Rotate_Info {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord x, y; /* Zoom center point reported to the user */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Coord radius; /* Radius between fingers reported to the user */
-&nbsp;&nbsp;&nbsp;&nbsp;double base_angle; /* Holds the start angle */
-&nbsp;&nbsp;&nbsp;&nbsp;double angle; /* Rotation value: 0.0 means no rotation */
-&nbsp;&nbsp;&nbsp;&nbsp;double momentum; /* Rotation momentum: rotation done per second (NOT SUPPORTED) */
+    Evas_Coord x, y; /* Zoom center point reported to the user */
+    Evas_Coord radius; /* Radius between fingers reported to the user */
+    double base_angle; /* Holds the start angle */
+    double angle; /* Rotation value: 0.0 means no rotation */
+    double momentum; /* Rotation momentum: rotation done per second (NOT SUPPORTED) */
 };
 </pre>
 </li>
@@ -730,11 +730,11 @@ struct _Elm_Gesture_Rotate_Info {
 static Evas_Event_Flags
 rotate_move(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Rotate_Info *p = (Elm_Gesture_Rotate_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;rotate move &lt;%d,%d&gt; base=&lt;%f&gt; angle=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;x, p-&gt;y, p-&gt;base_angle, p-&gt;angle, p-&gt;radius, p-&gt;momentum);
+    Elm_Gesture_Rotate_Info *p = (Elm_Gesture_Rotate_Info *)event_info;
+    printf("rotate move &lt;%d,%d&gt; base=&lt;%f&gt; angle=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n",
+           p-&gt;x, p-&gt;y, p-&gt;base_angle, p-&gt;angle, p-&gt;radius, p-&gt;momentum);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -744,11 +744,11 @@ rotate_move(void *data, void *event_info)
 static Evas_Event_Flags
 rotate_end(void *data, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Elm_Gesture_Rotate_Info *p = (Elm_Gesture_Rotate_Info *)event_info;
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;rotate end &lt;%d,%d&gt; base=&lt;%f&gt; angle=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p-&gt;x, p-&gt;y, p-&gt;base_angle, p-&gt;angle, p-&gt;radius, p-&gt;momentum);
+    Elm_Gesture_Rotate_Info *p = (Elm_Gesture_Rotate_Info *)event_info;
+    printf("rotate end &lt;%d,%d&gt; base=&lt;%f&gt; angle=&lt;%f&gt; radius=&lt;%d&gt; momentum=&lt;%f&gt;\n",
+           p-&gt;x, p-&gt;y, p-&gt;base_angle, p-&gt;angle, p-&gt;radius, p-&gt;momentum);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -758,9 +758,9 @@ rotate_end(void *data, void *event_info)
 static Evas_Event_Flags
 rotate_abort(void *data, void *event_info EINA_UNUSED)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;rotate abort\n&quot;);
+    printf("rotate abort\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return EVAS_EVENT_FLAG_ON_HOLD;
+    return EVAS_EVENT_FLAG_ON_HOLD;
 }
 </pre>
 </li>
@@ -775,7 +775,7 @@ rotate_abort(void *data, void *event_info EINA_UNUSED)
 
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
-</div> 
+</div>
 
 <script type="text/javascript">
 var _gaq = _gaq || [];
diff --git a/org.tizen.guides/html/native/ui/efl/ui_components_mn.htm b/org.tizen.guides/html/native/ui/efl/ui_components_mn.htm
index ae7fce3..0173d3c 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/ui_components_mn.htm
+++ b/org.tizen.guides/html/native/ui/efl/ui_components_mn.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Mobile UI Components</title> 
- </head> 
+  <title>Mobile UI Components</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -27,186 +27,186 @@
        <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
-                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>      
+                       <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Mobile UI Components</h1> 
-  
+  <h1>Mobile UI Components</h1>
+
 <p>EFL Elementary is a set of fast, finger-friendly, scalable, and themeable UI component libraries. The number of supported UI components is around 80, including both <a href="ui_layouts_n.htm">containers</a> and non-containers (listed in this topic). Originally, Elementary was developed as part of the Window Manager development on desktop devices. For the mobile profile, Tizen reused the proper UI components and created new ones, and then enhanced and adjusted all of them for Tizen native applications.</p>
 
 <p>This feature is supported in mobile applications only.</p>
 
 <p>The UI components are mobile-friendly: for example, the naviframe container component supports multiple view management, the entry component supports various modes (such as password, single-line or multi-line, edit or no-edit), the index component supports fast access to another group of UI items, and the toolbar component shows a menu when an item is selected.</p>
 <p>The mobile UI components are designed to allow the user to interact with touch screen-equipped mobile devices. Therefore, when developing mobile applications, you can easily use them through the mobile-related infrastructure in company with view management, and when reacting to touch events and the user finger size.</p>
-  
-   <p align="center" class="Table"><strong>Table: Available UI components</strong></p> 
-  <table border="1"> 
-   <colgroup> 
-    <col /> 
-    <col /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th> 
-        <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th> 
-     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-    </tr> 
-       <tr> 
+
+   <p align="center" class="Table"><strong>Table: Available UI components</strong></p>
+  <table border="1">
+   <colgroup>
+    <col />
+    <col />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>
+        <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
+     <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+    </tr>
+       <tr>
      <td rowspan="3">Navigation elements</td>
-       <td><a href="component_toolbar_mn.htm">Toolbar</a></td> 
+       <td><a href="component_toolbar_mn.htm">Toolbar</a></td>
      <td>The toolbar component is a scrollable list of items. It can also show a menu when an item is selected. Only one item can be selected at a time.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_index_mn.htm">Index</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_index_mn.htm">Index</a></td>
      <td>The index component provides an index for fast access to another group of UI items.</td>
-    </tr>      
-       <tr> 
-        <td><a href="component_segmentcontrol_mn.htm">Segmentcontrol</a></td> 
+    </tr>
+       <tr>
+        <td><a href="component_segmentcontrol_mn.htm">Segmentcontrol</a></td>
      <td>The segmentcontrol component is a horizontal control made of multiple segment items, each segment item functioning similarly as a discrete 2-state button.</td>
-    </tr>      
-       <tr> 
+    </tr>
+       <tr>
        <td rowspan="11">Presentation views</td>
-     <td><a href="component_win_mn.htm">Win</a></td> 
+     <td><a href="component_win_mn.htm">Win</a></td>
      <td>The win component is the root window component often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
     </tr>
-       <tr> 
-     <td><a href="component_background_mn.htm">Background</a></td> 
+       <tr>
+     <td><a href="component_background_mn.htm">Background</a></td>
      <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background-specific properties, such as setting it to a tiled, centered, scaled, or stretched mode.</td>
     </tr>
-       <tr> 
-     <td><a href="component_genlist_mn.htm">Genlist</a></td> 
+       <tr>
+     <td><a href="component_genlist_mn.htm">Genlist</a></td>
      <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (since only the visible items are allocated memory).</td>
     </tr>
-       <tr> 
-     <td><a href="component_gengrid_mn.htm">Gengrid</a></td> 
+       <tr>
+     <td><a href="component_gengrid_mn.htm">Gengrid</a></td>
      <td>The gengrid component displays objects on a grid layout and renders only the visible objects.</td>
     </tr>
-       <tr> 
-     <td><a href="component_panel_mn.htm">Panel</a></td> 
+       <tr>
+     <td><a href="component_panel_mn.htm">Panel</a></td>
      <td>The panel component is an animated object that can contain child objects. It can be expanded or contracted by clicking the button on its edge.</td>
     </tr>
-       <tr> 
-     <td><a href="component_list_mn.htm">List</a></td> 
+       <tr>
+     <td><a href="component_list_mn.htm">List</a></td>
      <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_label_mn.htm">Label</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_label_mn.htm">Label</a></td>
      <td>The label component displays text with simple HTML-like markup.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_image_mn.htm">Image</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_image_mn.htm">Image</a></td>
      <td>The image component can load and display an image from a file or memory.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_icon_mn.htm">Icon</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_icon_mn.htm">Icon</a></td>
      <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_progressbar_mn.htm">Progressbar</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_progressbar_mn.htm">Progressbar</a></td>
      <td>The progressbar component can be used to display the progress status of a given job.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_photocam_mn.htm">Photocam</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_photocam_mn.htm">Photocam</a></td>
      <td>The photocam component is designed to display high-resolution photos taken with a digital camera. It allows you to zoom photos, load photos fast, and fit photos. It is optimized for JPEG images and has a low memory footprint.</td>
-    </tr>      
-       <tr> 
+    </tr>
+       <tr>
                <td rowspan="10">User input</td>
-     <td><a href="component_button_mn.htm">Button</a></td> 
+     <td><a href="component_button_mn.htm">Button</a></td>
      <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
     </tr>
-       <tr> 
-     <td><a href="component_check_mn.htm">Check</a></td> 
+       <tr>
+     <td><a href="component_check_mn.htm">Check</a></td>
      <td>The check component toggles the Boolean value between <code>true</code> and <code>false</code>.</td>
     </tr>
-       <tr> 
-     <td><a href="component_radio_mn.htm">Radio</a></td> 
+       <tr>
+     <td><a href="component_radio_mn.htm">Radio</a></td>
      <td>The radio component can display 1 or more options, while the user can only select one of them. The UI 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 components, it can also be used alone.</td>
     </tr>
-       <tr> 
-     <td><a href="component_entry_mn.htm">Entry</a></td> 
+       <tr>
+     <td><a href="component_entry_mn.htm">Entry</a></td>
      <td>The entry component is a box to which the user can enter text.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_slider_mn.htm">Slider</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_slider_mn.htm">Slider</a></td>
      <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
     </tr>
-       <tr> 
-     <td><a href="component_datetime_mn.htm">Datetime</a></td> 
+       <tr>
+     <td><a href="component_datetime_mn.htm">Datetime</a></td>
      <td>The datetime component can display and accept input for date and time values.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_colorselector_mn.htm">Colorselector</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_colorselector_mn.htm">Colorselector</a></td>
      <td>The colorselector component provides a color selection solution to the user. It has different modes, each of them showing a different configuration of the color selection.</td>
     </tr>
-       <tr> 
-     <td><a href="component_spinner_mn.htm">Spinner</a></td> 
+       <tr>
+     <td><a href="component_spinner_mn.htm">Spinner</a></td>
      <td>The spinner component enables the user to increase or decrease a numeric value by using arrow buttons.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_flipselector_mn.htm">Flipselector</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_flipselector_mn.htm">Flipselector</a></td>
      <td>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.</td>
     </tr>
-       <tr> 
-     <td><a href="component_calendar_mn.htm">Calendar</a></td> 
+       <tr>
+     <td><a href="component_calendar_mn.htm">Calendar</a></td>
      <td>The calendar component displays and manipulates month views.</td>
-    </tr>      
-       <tr> 
+    </tr>
+       <tr>
        <td rowspan="5">Assist views</td>
-     <td><a href="component_popup_mn.htm">Popup</a></td> 
+     <td><a href="component_popup_mn.htm">Popup</a></td>
      <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_ctxpopup_mn.htm">Ctxpopup</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_ctxpopup_mn.htm">Ctxpopup</a></td>
      <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
     </tr>
-               <tr> 
-     <td><a href="component_notify_mn.htm">Notify</a></td> 
+               <tr>
+     <td><a href="component_notify_mn.htm">Notify</a></td>
      <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
     </tr>
-       <tr> 
-     <td><a href="component_tooltip_mn.htm">Tooltip</a></td> 
+       <tr>
+     <td><a href="component_tooltip_mn.htm">Tooltip</a></td>
      <td>The tooltip component is a smart object used to show tips or information about a parent object when the mouse hovers over the parent object.</td>
     </tr>
-       <tr> 
-     <td><a href="component_hoversel_mn.htm">Hoversel</a></td> 
+       <tr>
+     <td><a href="component_hoversel_mn.htm">Hoversel</a></td>
      <td>The hoversel component is a button that pops up a list of items.</td>
-    </tr>      
-       <tr> 
+    </tr>
+       <tr>
        <td rowspan="2">Transition</td>
-     <td>Transit</td> 
+     <td>Transit</td>
      <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations.</td>
-    </tr>      
-       <tr> 
-     <td><a href="component_flip_mn.htm">Flip</a></td> 
+    </tr>
+       <tr>
+     <td><a href="component_flip_mn.htm">Flip</a></td>
      <td>The flip component can hold 2 Evas objects and let the user flip between these objects using a variety of predefined animations.</td>
     </tr>
-       <tr> 
+       <tr>
                <td>Hardware acceleration</td>
-     <td><a href="component_glview_mn.htm">GLView</a></td> 
+     <td><a href="component_glview_mn.htm">GLView</a></td>
      <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
     </tr>
 
-       <tr> 
+       <tr>
        <td rowspan="2">Miscellaneous</td>
-     <td><a href="component_map_mn.htm">Map</a></td> 
+     <td><a href="component_map_mn.htm">Map</a></td>
      <td>The map component can display a geographic map. The default map data is provided by the <a target="_blank" href="http://www.openstreetmap.org/">OpenStreetMap project</a>.</td>
     </tr>
-       <tr> 
-     <td><a href="component_plug_mn.htm">Plug</a></td> 
+       <tr>
+     <td><a href="component_plug_mn.htm">Plug</a></td>
      <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
     </tr>
-   </tbody> 
-  </table> 
-  
+   </tbody>
+  </table>
+
 <div class="note">
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/ui_components_n.htm b/org.tizen.guides/html/native/ui/efl/ui_components_n.htm
index f541fa3..6a2124c 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/ui_components_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/ui_components_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>UI Components</title> 
- </head> 
+  <title>UI Components</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,7 +31,7 @@
                        <li><a href="#style">Styles</a></li>
                        <li><a href="#callback">Callbacks</a></li>
                        <li><a href="#topic">Topics on UI Components</a></li>
-               </ul>           
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
@@ -42,7 +42,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>UI Components</h1> 
+  <h1>UI Components</h1>
 
 <p>Elementary library provides a set of pre-built UI components that allow you to build a rich graphical user interface for your applications. Each profile provides different set of UI components, as you can see in <a href="ui_components_mn.htm">Mobile UI Components</a> and <a href="ui_components_wn.htm">Wearable UI Components</a>.</p>
 
@@ -65,7 +65,7 @@
 <h2 id="style">Styles</h2>
 <p>The style of a UI component refers to its graphical appearance determined by the layout, shapes, fonts, and colors. Every UI component has a distinguished layout according to its function and feature, and the layout of a UI component varies somewhat according to the styles.</p>
 
-<p>In the layout, there are spaces for texts or images which sometimes remain empty for you to fill. In EFL, that space is a &quot;part&quot; (the term comes from <a href="learn_edc_part_n.htm">part</a> in <a href="learn_edc_intro_n.htm">EDC</a>). A layout of a UI component has 2 types of parts: a text part and a swallow part. A swallow part is a blank you can fill with any kind of object.</p>
+<p>In the layout, there are spaces for texts or images which sometimes remain empty for you to fill. In EFL, that space is a "part" (the term comes from <a href="learn_edc_part_n.htm">part</a> in <a href="learn_edc_intro_n.htm">EDC</a>). A layout of a UI component has 2 types of parts: a text part and a swallow part. A swallow part is a blank you can fill with any kind of object.</p>
 
 <p>The following figure shows a default style button. The default style of a button has 1 swallow part and 1 text part. If you create a button and do not set a text or an image, the button looks like the left side. If you set a text and an image to the button, it looks like the right side.</p>
 <p align="center"><strong>Figure: Empty button and button filled with an icon and a text</strong></p>
@@ -78,11 +78,11 @@ Evas_Object *icon;
 
 btn = elm_button_add(parent);
 icon = elm_icon_add(btn);
-elm_icon_standard_set(icon, &quot;home&quot;);
+elm_icon_standard_set(icon, "home");
 /* Set a text to the button */
-elm_object_text_set(btn, &quot;Home&quot;);
+elm_object_text_set(btn, "Home");
 /* Set an icon to the button */
-elm_object_part_content_set(btn, &quot;icon&quot;, icon);
+elm_object_part_content_set(btn, "icon", icon);
 </pre>
 <p>Use the following functions to fill a part with a text or an icon:</p>
  <ul>
@@ -90,32 +90,32 @@ elm_object_part_content_set(btn, &quot;icon&quot;, icon);
    <li><code>elm_object_part_content_set()</code></li>
  </ul>
 <p>If the part name is <code>default</code>, you can use the following functions without specifying the part name:</p>
- 
+
 <ul>
    <li><code>elm_object_text_set()</code></li>
    <li><code>elm_object_content_set()</code></li>
  </ul>
- 
+
 <h2 id="callback">Callbacks</h2>
-<p>UI components emit signals on specific situations so that you can perform some action by registering a callback function connected to the signal. The callback is called a &quot;smart callback&quot;, distinguished from an event callback.</p>
+<p>UI components emit signals on specific situations so that you can perform some action by registering a callback function connected to the signal. The callback is called a "smart callback", distinguished from an event callback.</p>
 
 <p>For example, a button object emits a <code>clicked</code> signal when it is clicked, and you can define a specific action every time the button is clicked. Each UI component provides different kinds of signals. For the available signals, see the topic for each individual UI component.</p>
 <p>Use the <code>evas_object_smart_callback_add()</code> function to register a callback. The following code snippet shows how to register a callback function to the <code>clicked</code> signal:</p>
- 
+
 <pre class="prettyprint">
 /* Add a callback function connected to the clicked signal */
-evas_object_smart_callback_add(btn, &quot;clicked&quot;, _clicked_cb, NULL);
+evas_object_smart_callback_add(btn, "clicked", _clicked_cb, NULL);
 
 /* Print a log every time the button is clicked */
 void
 _clicked_cb(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Button clicked\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
 }
 </pre>
 <p>Besides smart signals, which are defined on the Elementary level, Evas event signals are also available on UI components. You can register callback functions connected to input events (key up, key down, mouse wheel) using the <code>evas_object_event_callback_add()</code> function.</p>
 <p>The following code snippet shows how to register a callback function to the mouse down event:</p>
- 
+
 <pre class="prettyprint">
 /* Add a callback function to the mouse down event */
 evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_DOWN, _down_cb, NULL);
@@ -124,13 +124,13 @@ evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_DOWN, _down_cb, NULL);
 void
 _down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Mouse down on button\n&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Mouse down on button\n");
 }
 </pre>
-<p>For more information about event handling, see <a href="event_handling_n.htm">Event Handling</a>.</p> 
+<p>For more information about event handling, see <a href="event_handling_n.htm">Event Handling</a>.</p>
 
 <h2 id="topic">Topics on UI Components</h2>
- 
+
 <p>For more information about UI components in general, see the following topics:</p>
 <ul>
    <li><a href="configuring_n.htm">Configuring UI Components</a>
@@ -142,7 +142,7 @@ _down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
    </li>
 
    <li><a href="component_focus_n.htm">Managing UI Component Focus</a>
-   <p>The Elementary user interface has the concept of &quot;focus&quot;. A UI component receives input from the user when it is focused.</p>
+   <p>The Elementary user interface has the concept of "focus". A UI component receives input from the user when it is focused.</p>
    </li>
 
    <li><a href="ui_scalability_n.htm">Scaling</a>
diff --git a/org.tizen.guides/html/native/ui/efl/ui_components_wn.htm b/org.tizen.guides/html/native/ui/efl/ui_components_wn.htm
index 65ad190..46c87bc 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/ui_components_wn.htm
+++ b/org.tizen.guides/html/native/ui/efl/ui_components_wn.htm
@@ -5,12 +5,12 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Wearable UI Components</title> 
+  <title>Wearable UI Components</title>
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -36,12 +36,12 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
   <h1>Wearable UI Components</h1>
-  
+
 <p>EFL Elementary is a set of fast, finger-friendly, scalable, and themeable UI component libraries. A number of UI components, including both <a href="ui_layouts_n.htm">containers</a> and non-containers (listed in this topic), are supported. Originally, Elementary was developed as part of the Window Manager development on desktop devices. In the wearable profile, Tizen created new UI styles for circular wearable devices with existing UI components, and optimized all of them for Tizen native applications.</p>
 
 <p>This feature is supported in wearable applications only.</p>
@@ -56,8 +56,8 @@
        <th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>
      <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
      <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
-    </tr> 
-       <tr> 
+    </tr>
+       <tr>
        <td>Navigation elements</td>
      <td><a href="component_index_wn.htm">Index</a></td>
      <td>The index component provides an index for fast access to another group of UI items.</td>
@@ -82,8 +82,8 @@
        <tr>
      <td><a href="component_label_wn.htm">Label</a></td>
      <td>The label component displays text with simple HTML-like markup.</td>
-    </tr>      
-       <tr> 
+    </tr>
+       <tr>
      <td><a href="component_image_wn.htm">Image</a></td>
      <td>The image component can load and display an image from a file or memory.</td>
     </tr>
@@ -131,7 +131,7 @@
     </tr>
        <tr>
        <td>Transition</td>
-     <td>Transit</td> 
+     <td>Transit</td>
      <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations.</td>
     </tr>
        <tr>
@@ -145,8 +145,8 @@
      <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
     </tr>
    </tbody>
-  </table>  
-  
+  </table>
+
 <p>The following UI components are designed for specific circular wearable devices which have rotary component parts. In a circular device, you can draw round UI components, such as a slider, progressbar, and scroller. Generally, wearable UI components provide compatibility between the rectangular and circular wearable devices. However, use circular UI components for circular wearable devices only, because they have a dependency with the round UX and rotary events. For more information on the compatibility of the UI components between rectangular and circular, see the <a href="https://developer.tizen.org/design/wearable" target="_blank">Wearable Design</a> guidelines.</p>
 
    <p align="center" class="Table"><strong>Table: Available circular UI components</strong></p>
@@ -330,7 +330,7 @@
  <tr>
  <td><code>default</code></td>
  <td align="center"><img alt="default" src="../../../images/entry_default_wn.png" /></td>
- <td><code>elm.guide</code>: for the guide text. 
+ <td><code>elm.guide</code>: for the guide text.
  <p><code>elm.text</code>: for the main text.</p></td>
  <td>The guide text is automatically erased when the main text is entered.</td>
  </tr>
@@ -350,7 +350,7 @@
  <td><code>default</code></td>
  <td align="center"><img alt="default" src="../../../images/genlist_def_o_wn.png" /></td>
  <td><code>elm.text</code></td>
- <td><code>elm.swallow.icon</code>: for the icon on the left. 
+ <td><code>elm.swallow.icon</code>: for the icon on the left.
  <p><code>elm.swallow.end</code>: for the icon on the right.</p></td>
  </tr>
 <tr>
@@ -365,7 +365,7 @@
  <td><code>elm.text</code></td>
  <td></td>
 
- </tr> 
+ </tr>
  <tr>
  <td><code>1text</code></td>
  <td align="center"><img alt="1text" src="../../../images/genlist_1text_o_wn.png" /></td>
@@ -543,9 +543,9 @@
  </tbody>
 </table>
 
- 
-<h2 id="styles_r" name="styles_r">Wearable Rectangular UI Component Styles</h2> 
-  
+
+<h2 id="styles_r" name="styles_r">Wearable Rectangular UI Component Styles</h2>
+
 <p>EFL can separate the UI and logic of each UI component, resulting in each component having a different style of look. To change the styles of UI components, use the <code>elm_object_style_get()</code> and <code>elm_object_style_set()</code> functions to get and apply the style for a specific UI component.</p>
 
 <p>The following tables list the styles for each UI component, including the names of the available styles, and the name of the part in the EDC file where you can define the text or some other <code>Evas_Object</code> included in the UI component. The style list in the EFL upstream is more extensive, but only the styles in the following tables are actually supported by Tizen. For more detailed information, see <a href="component_custom_n.htm#theme">Style, Theme, and EDC</a>.</p>
@@ -600,7 +600,7 @@
  <td align="center"><img alt="naviframe/title_icon" src="../../../images/button_titleicon_wn.png" /></td>
  <td></td>
  <td><code>elm.swallow.content</code></td>
- <td>The icon can be set with the <code>elm_object_part_content_set(btn, &quot;icon&quot;, ic)</code> function.</td>
+ <td>The icon can be set with the <code>elm_object_part_content_set(btn, "icon", ic)</code> function.</td>
  </tr>
  </tbody>
 </table>
@@ -621,7 +621,7 @@
  <tr>
  <td><code>on&amp;off</code></td>
  <td align="center"><img alt="on_off" src="../../../images/check_onoff_wn.png" /></td>
- </tr> 
+ </tr>
  </tbody>
 </table>
 
@@ -673,7 +673,7 @@
  <tr>
  <td><code>default</code></td>
  <td align="center"><img alt="default" src="../../../images/entry_default_wn.png" /></td>
- <td><code>elm.guide</code>: for the guide text. 
+ <td><code>elm.guide</code>: for the guide text.
  <p><code>elm.text</code>: for the main text.</p></td>
  <td>The guide text is automatically erased when the main text is entered.</td>
  </tr>
@@ -694,7 +694,7 @@
  <td><code>default</code></td>
  <td align="center"><img alt="default" src="../../../images/genlist_def_wn.png" /></td>
  <td><code>elm.text</code></td>
- <td><code>elm.swallow.icon</code>: for the icon on the left. 
+ <td><code>elm.swallow.icon</code>: for the icon on the left.
  <p><code>elm.swallow.end</code>: for the icon on the right.</p></td>
 
  </tr>
@@ -704,7 +704,7 @@
  <td><code>elm.text</code>: for the main text.
  <p><code>elm.text.1</code>: for the sub text.</p></td>
  <td><code>elm.icon</code></td>
- </tr> 
+ </tr>
  <tr>
  <td><code>1text</code></td>
  <td align="center"><img alt="1text" src="../../../images/genlist_1text_wn.png" /></td>
@@ -764,7 +764,7 @@
    <tr>
  <td><code>multiline/2text</code></td>
  <td align="center"><img alt="multiline/2text" src="../../../images/genlist_multi2_wn.png" /></td>
- <td><code>elm.text</code>: for the main text. 
+ <td><code>elm.text</code>: for the main text.
  <p><code>elm.text.1</code>: for the multi-line sub text.</p></td>
   <td></td>
   </tr>
@@ -836,7 +836,7 @@
  <tr>
  <td><code>process/groupindex</code></td>
  <td align="center"><img alt="process/groupindex" src="../../../images/progressbar_group_wn.png" /></td>
- </tr> 
+ </tr>
  </tbody>
 </table>
 <p align="center" class="Table"><strong>Table: Radio styles</strong></p>
@@ -875,7 +875,7 @@
        <strong>Note</strong>
        Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</a>.
 </div>
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/efl/ui_layouts_n.htm b/org.tizen.guides/html/native/ui/efl/ui_layouts_n.htm
index b8e8d00..8e3ebc0 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/ui_layouts_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/ui_layouts_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Building UI Layouts</title>  
+       <title>Building UI Layouts</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -38,7 +38,7 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API References for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -53,18 +53,18 @@
 
 <p>Container UI components do not have their own visual identity. They only have logical structures for assignment or placement of other UI components. The use of container UI components only differs from the use of the UI components due to the absence of a visual identity.</p>
 
-   <p align="center" class="Table"><strong>Table: UI containers</strong></p> 
+   <p align="center" class="Table"><strong>Table: UI containers</strong></p>
 <table border="1">
-   <colgroup> 
+   <colgroup>
       <col /><col />
-   </colgroup> 
+   </colgroup>
    <tbody>
       <tr>
-         <th style="text-align:center;margin-left:auto;margin-right:auto;">Name</th> 
-         <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
+         <th style="text-align:center;margin-left:auto;margin-right:auto;">Name</th>
+         <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
       </tr>
       <tr>
-         <td><a href="container_box_n.htm">Box</a></td>  
+         <td><a href="container_box_n.htm">Box</a></td>
          <td>Arrange more than 2 objects linearly.</td>
       </tr>
       <tr>
@@ -76,7 +76,7 @@
          <td>Place objects at specific positions along a fixed grid.</td>
       </tr>
       <tr>
-         <td><a href="container_layout_n.htm">Layout</a></td>   
+         <td><a href="container_layout_n.htm">Layout</a></td>
          <td>Take a standard Edje design file and wrap it very thinly in a UI component.</td>
       </tr>
       <tr>
@@ -99,8 +99,8 @@
          <td><a href="container_table_n.htm">Table</a></td>
          <td>Arrange multiple objects like for a box, but with 2 dimensions.</td>
       </tr>
-   </tbody> 
-</table> 
+   </tbody>
+</table>
 
 <h2 id="basic">Basic EFL UI Layout</h2>
 
@@ -109,9 +109,9 @@
 <p>Each component has a specific role:</p>
 
 <ul>
-   <li>A conformant accounts for the space taken up by a factor outside the application layout, such as rotation, an indicator, a virtual keyboard, and a softkey window. A conformant has to be present in every application. 
+   <li>A conformant accounts for the space taken up by a factor outside the application layout, such as rotation, an indicator, a virtual keyboard, and a softkey window. A conformant has to be present in every application.
    <p>The content is resized and positioned based on the space available.</p></li>
-   
+
    <li>A naviframe acts as a view manager and optionally provides the application title. Most of the time, your application has to manage multiple views, and the easiest way to handle them is to create a naviframe object. Every Tizen application can use this top-layer object to facilitate navigation.
    <p>The main layout of the application is added to the naviframe view area.</p></li>
 </ul>
@@ -126,47 +126,47 @@
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create and initialize elm_win,
-&nbsp;&nbsp;&nbsp;&nbsp;   which is mandatory to manipulate a window
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Conformant */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create and initialize elm_conformant,
-&nbsp;&nbsp;&nbsp;&nbsp;   which is mandatory for the base UI to have a proper size
-&nbsp;&nbsp;&nbsp;&nbsp;   when an indicator or virtual keypad is visible
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_HIDE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Naviframe */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;nf);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_naviframe_prev_btn_auto_pushed_set(ad-&gt;nf, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+    /* Window */
+    /* Create and initialize elm_win,
+       which is mandatory to manipulate a window
+    */
+    ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+    elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+    if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
+        int rots[4] = {0, 90, 180, 270};
+        elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+    }
+
+    evas_object_smart_callback_add(ad-&gt;win, "delete,request",
+                                   win_delete_request_cb, NULL);
+    eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+    /* Conformant */
+    /* Create and initialize elm_conformant,
+       which is mandatory for the base UI to have a proper size
+       when an indicator or virtual keypad is visible
+    */
+    ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+    elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_HIDE);
+    evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+    evas_object_show(ad-&gt;conform);
+
+    /* Naviframe */
+    ad-&gt;nf = elm_naviframe_add(ad-&gt;conform);
+    evas_object_show(ad-&gt;nf);
+    elm_naviframe_prev_btn_auto_pushed_set(ad-&gt;nf, EINA_TRUE);
+    elm_object_content_set(ad-&gt;conform, ad-&gt;nf);
+
+    evas_object_show(ad-&gt;win);
 }
 </pre>
 
 <h2 id="size_hint">Size Hints</h2>
 
 <p>When you use a container component, such as a naviframe, a conformant, or a box, you need to understand certain APIs related to size hints.</p>
-<p>Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas honors these requests if it can. This is why they are called &quot;hints&quot;. You can also use the respective get functions to get the current hint values. You can use more than 2 size hint functions together to make the layout you want.</p>
+<p>Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas honors these requests if it can. This is why they are called "hints". You can also use the respective get functions to get the current hint values. You can use more than 2 size hint functions together to make the layout you want.</p>
 
 <ul>
 <li>Alignment
diff --git a/org.tizen.guides/html/native/ui/efl/ui_scalability_n.htm b/org.tizen.guides/html/native/ui/efl/ui_scalability_n.htm
index dd48a6f..3a11bab 100644 (file)
--- a/org.tizen.guides/html/native/ui/efl/ui_scalability_n.htm
+++ b/org.tizen.guides/html/native/ui/efl/ui_scalability_n.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Scaling</title> 
- </head> 
+  <title>Scaling</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,28 +33,28 @@
                        <li><a href="../../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Scaling</h1> 
-  
+  <h1>Scaling</h1>
+
 <p>Supporting UI scalability in a user interface toolkit means that container components and UI components are scaled properly when the resolution or screen size changes. The Elementary library allows you to manipulate scaling on a per-UI-component basis using a scale factor based on the screen resolution, size, and profile configurations.</p>
 
 <p>Tizen native applications can run on different types of devices, such as wearable, phone, tablet, and TV. Tizen also supports various resolutions (WVGA - XQXGA) with the same layouts and resources. However, remember that you must always polish your work to create an optimal application for each device.</p>
-  
+
 <p>The main scalability features are:</p>
 <ul>
 <li><a href="multiple_screens_n.htm">Multiple Screen Support</a> <p>Enables you to design applications for different kinds of screens.</p></li>
 <li><a href="scalability_n.htm">Scalability Support</a> <p>Enables you to design applications so that their UI can be scaled for diverse devices without problems.</p></li>
 <li><a href="resource_fallback_n.htm">Resource Fallback Support</a> <p>Enables you to design applications which can use alternative resources for the device display state.</p></li>
 </ul>
-  
-<h2 id="scalability" name="scalability">Scaling UI Components</h2> 
+
+<h2 id="scalability" name="scalability">Scaling UI Components</h2>
  <p>Through its configuration (Elementary Config API in <a href="../../../../../org.tizen.native.mobile.apireference/group__Config.html">mobile</a> and <a href="../../../../../org.tizen.native.wearable.apireference/group__Config.html">wearable</a> applications), Elementary provides a way to scale UI components with 2 different parameters:</p>
 <ul>
 <li id="Finger_Size">The <code>finger_size</code> parameter is used when the interactive (clickable or editable) zones of the UI components need to be scaled in order to be comfortably used with a finger.
-<p>The <code>finger_size</code> parameter scales UI components based on the user&#39;s finger size. This is useful when using a touch screen with a finger rather than with a stylus. The finger size parameter is in pixels, and determines the minimum size of a square on the screen that is reliably hittable with a finger.</p>
+<p>The <code>finger_size</code> parameter scales UI components based on the user's finger size. This is useful when using a touch screen with a finger rather than with a stylus. The finger size parameter is in pixels, and determines the minimum size of a square on the screen that is reliably hittable with a finger.</p>
 
 <p>The global finger size is set with the <code>elm_config_finger_size_set()</code> function. This adjusts the size and hit area of the UI components so that they are easy to hit with a finger. The current value is retrieved with the <code>elm_config_finger_size_get()</code> function. The finger size is always in pixels.</p>
 
@@ -81,7 +81,7 @@ elm_config_finger_size_set(finger_size + 20);
 
 <div class="note">
        <strong>Note</strong>
-       The scaling factor is multiplicative: if a child already has a scale size set, it is multiplied by its parent&#39;s scale size.
+       The scaling factor is multiplicative: if a child already has a scale size set, it is multiplied by its parent's scale size.
 </div>
 
 <p>The following example sets the global scaling factor to 2.0 and the scaling factor of an existing Elementary button object to 2.0. As a result, the button appears as if it had a 4.0 scaling factor, while the rest of the application is displayed with a 2.0 scaling factor.</p>
@@ -129,41 +129,41 @@ elm_object_scale_set(button, 2.0);
 <pre class="prettyprint">
 group
 {
-&nbsp;&nbsp;&nbsp;name: &quot;button&quot;;
-&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">scale: 1;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;elm.swallow.content&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: SWALLOW;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">scale: 1;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;visible&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   name: "button";
+   images
+   {
+      image: "bg.png" COMP;
+   }
+   parts
+   {
+      part
+      {
+         name: "bg";
+         type: IMAGE;
+         <span class="highlight">scale: 1;</span>
+         description
+         {
+            state: "default" 0.0;
+            image.normal: "bg.png";
+         }
+      }
+      part
+      {
+         name: "elm.swallow.content";
+         type: SWALLOW;
+         <span class="highlight">scale: 1;</span>
+         description
+         {
+            state: "default" 0.0;
+            visible: 0;
+         }
+         description
+         {
+            state: "visible" 0.0;
+            visible: 1;
+         }
+      }
+   }
 }
 </pre>
 
@@ -175,24 +175,24 @@ group
 <ul>
 <li>Use the <code>bg_low.png</code> image file when the size of the image is under 200 px.</li>
 <li>Use the <code>bg_high.png</code> image file for higher resolutions.</li>
-</ul> 
+</ul>
 <pre class="prettyprint">
 images
 {
-&nbsp;&nbsp;&nbsp;set
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_low.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 0 0 200 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image: &quot;bg_high.png&quot; COMP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: 201 101 5000 5000;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   set
+   {
+      name: "bg.png";
+      image
+      {
+         image: "bg_low.png" COMP;
+         size: 0 0 200 100;
+      }
+      image
+      {
+         image: "bg_high.png" COMP;
+         size: 201 101 5000 5000;
+      }
+   }
 }
 </pre>
 
@@ -204,7 +204,7 @@ images
 </ul>
 
 <p align="center"><strong>Figure: Image set example</strong></p>
-<p align="center"><img alt="Image set example" src="../../../images/scale.png" /></p> 
+<p align="center"><img alt="Image set example" src="../../../images/scale.png" /></p>
 </li>
 <li>Image borders
 <p>When the button defined above is resized, its image part is also resized because it is marked as scalable. To resize only the image itself, but not its borders, use the <code>border</code> parameter to specify a static unscalable border size.</p>
@@ -214,28 +214,28 @@ images
 <pre class="prettyprint">
 parts
 {
-&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: IMAGE;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image.normal: &quot;bg.png&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">image.border: 40 40 20 20;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;/* Other parts */
+   part
+   {
+      name: "bg";
+      type: IMAGE;
+      scale: 1;
+      description
+      {
+         state: "default" 0.0;
+         image.normal: "bg.png";
+         <span class="highlight">image.border: 40 40 20 20;</span>
+      }
+   }
+   /* Other parts */
 }
 </pre>
 
 <p>The following figure shows the original button at the top, and the resized button at the bottom. When the button is resized, the borders (and consequently the corners) keep their initial ratio, and only the middle part of the button is changed.</p>
 
-<p align="center"><strong>Figure: Image border example</strong></p> 
-<p align="center"><img alt="Image border example" src="../../../images/border.png" /></p> 
+<p align="center"><strong>Figure: Image border example</strong></p>
+<p align="center"><img alt="Image border example" src="../../../images/border.png" /></p>
 </li></ul>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/native/ui/ui_cover_n.htm b/org.tizen.guides/html/native/ui/ui_cover_n.htm
index 755d1bd..65e8b47 100644 (file)
--- a/org.tizen.guides/html/native/ui/ui_cover_n.htm
+++ b/org.tizen.guides/html/native/ui/ui_cover_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>User Interface</title>  
+       <title>User Interface</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -31,7 +31,7 @@
                        <li><a href="../../../../org.tizen.training/html/native/feature/app_graphics_n.htm">Creating Applications with Graphics and Animation</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>User Interface</h1>
@@ -51,7 +51,7 @@
 
 <p>You can use the DALi 3D UI toolkit if you are creating a high-performance rich UI application. DALi is based on OpenGL ES 2.0 and 3.0; however it hides the complexity of the OpenGL ES API from you. DALi requires a GPU (Graphical Processing Unit) on the device.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/alarm/alarms_w.htm b/org.tizen.guides/html/web/alarm/alarms_w.htm
index 6944714..87b52c1 100644 (file)
--- a/org.tizen.guides/html/web/alarm/alarms_w.htm
+++ b/org.tizen.guides/html/web/alarm/alarms_w.htm
@@ -35,7 +35,7 @@
                        <li><a href="#notification">Managing Alarm Notifications</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc"> 
+               <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html">Alarm API for Mobile Web</a></li>
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">Alarm API for Wearable Web</a></li>
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html">Alarm API for TV Web</a></li>
@@ -45,7 +45,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Alarms</h1> 
+  <h1>Alarms</h1>
 
   <p>Tizen enables you to schedule an application to be run at a specific time. When an alarm is triggered, the application is launched (unless it is already running).</p>
 
@@ -67,20 +67,20 @@
 
 <p>To use the Alarm API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/alarm&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/alarm"/&gt;
 </pre>
 
 <h2 id="manage" name="manage">Managing Alarms</h2>
 
-<p>Both relative and absolute alarms are available: the relative alarm is triggered after a specified delay from the moment it is created, while an absolute alarm is triggered at a specified time and date. You can also create a recurring alarm that is repeated after a specified period of time, or on the given days of the week at a defined time.</p> 
+<p>Both relative and absolute alarms are available: the relative alarm is triggered after a specified delay from the moment it is created, while an absolute alarm is triggered at a specified time and date. You can also create a recurring alarm that is repeated after a specified period of time, or on the given days of the week at a defined time.</p>
 
 <p>To obtains a list of alarms, and create and delete alarms:</p>
 
-<ol> 
-   <li><p>To obtain a list of all the alarms that have been set on a device but not yet triggered, use the <code>getAll()</code> method:</p> 
+<ol>
+   <li><p>To obtain a list of all the alarms that have been set on a device but not yet triggered, use the <code>getAll()</code> method:</p>
 <pre class="prettyprint">
 var alarms = tizen.alarm.getAll();
-console.log(alarms.length + &quot; alarms present in the storage.&quot;);
+console.log(alarms.length + " alarms present in the storage.");
 </pre></li>
 <li>To create an alarm:
 <ul>
@@ -107,7 +107,7 @@ var alarm3 = new tizen.AlarmAbsolute(date, 2 * tizen.alarm.PERIOD_DAY);
    Alarm repeats every Saturday and Sunday,
    at 08:00, starting after April 4, 2012
 */
-var alarm4 = new tizen.AlarmAbsolute(date, [&quot;SA&quot;, &quot;SU&quot;]);
+var alarm4 = new tizen.AlarmAbsolute(date, ["SA", "SU"]);
 </pre>
 <div class="note">
        <strong>Note</strong>
@@ -121,7 +121,7 @@ var alarm4 = new tizen.AlarmAbsolute(date, [&quot;SA&quot;, &quot;SU&quot;]);
    and then repeated every 2 minutes
 */
 var alarm5 = new tizen.AlarmRelative(tizen.alarm.PERIOD_HOUR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2 * tizen.alarm.PERIOD_MINUTE);
+                                     2 * tizen.alarm.PERIOD_MINUTE);
 </pre></li>
 </ul></li>
 
@@ -129,23 +129,23 @@ var alarm5 = new tizen.AlarmRelative(tizen.alarm.PERIOD_HOUR,
 <pre class="prettyprint">
 /* First add created alarm to the device */
 /* Tizen alias ID is deprecated since Tizen 2.3.1 */
-tizen.alarm.add(alarm1, &quot;tizen.internet&quot;);
+tizen.alarm.add(alarm1, "tizen.internet");
 /* Then remove it */
 tizen.alarm.remove(alarm1.id);
 </pre>
 <p>To delete all alarms at once, use the <code>removeAll()</code> method.</p></li>
-  </ol> 
-                       
+  </ol>
+
 <h2 id="launch" name="launch">Launching Applications with Alarms</h2>
-                       
+
                        <p>Learning how to launch application with alarms is a basic alarm management skill:</p>
-  <ol> 
+  <ol>
    <li> <p>To launch an application when an alarm is triggered, you must define the application as a parameter in the <code>add()</code> method used to add the created alarm to the system:</p>
 <pre class="prettyprint">
 /* Run the browser */
 var alarm = new tizen.AlarmAbsolute(new Date(2012, 10, 4, 8, 0));
 /* Tizen alias ID is deprecated since Tizen 2.3.1 */
-tizen.alarm.add(alarm, &quot;tizen.internet&quot;);
+tizen.alarm.add(alarm, "tizen.internet");
 </pre></li>
    <li> <p>To launch an application with additional information when an alarm is triggered, you must use the application control and define the required arguments as a parameter in the <code>add()</code> method used to add the created alarm to the system:</p>
 <pre class="prettyprint">
@@ -156,12 +156,12 @@ tizen.alarm.add(alarm, &quot;tizen.internet&quot;);
 
 var alarm = new tizen.AlarmAbsolute(new Date(2012, 10, 4, 8, 0));
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.application.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;http://www.tizen.org&quot;);
+   new tizen.application.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                            "http://www.tizen.org");
 
-tizen.alarm.add(alarm, &quot;org.tizen.browser&quot;, appControl);
+tizen.alarm.add(alarm, "org.tizen.browser", appControl);
 </pre></li>
-  </ol> 
+  </ol>
 
 <h2 id="check" name="check">Checking for Alarm Events</h2>
 <p>You can retrieve information about the next alarm event using the <code>AlarmAbsolute</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmAbsolute">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmAbsolute">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmAbsolute">TV</a> applications) and <code>AlarmRelative</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html#AlarmRelative">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html#AlarmRelative">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/alarm.html#AlarmRelative">TV</a> applications) interfaces. They provide the time and date of the next scheduled absolute alarm, or the time remaining before the next relative alarm.</p>
@@ -170,21 +170,21 @@ tizen.alarm.add(alarm, &quot;org.tizen.browser&quot;, appControl);
 <pre class="prettyprint">
 /* Alarm is triggered at 8:00 on April 4, 2012 */
 var alarm = new tizen.AlarmAbsolute(new Date(2012, 3, 4, 8, 0));
-tizen.alarm.add(alarm, &quot;org.tizen.browser&quot;);
+tizen.alarm.add(alarm, "org.tizen.browser");
 </pre></li>
    <li><p>Use the <code>getNextScheduledDate()</code> method to retrieve the time and date of the next absolute alarm to be triggered:</p>
 <pre class="prettyprint">
-console.log(&quot;The alarm will trigger at &quot; + alarm.getNextScheduledDate());
+console.log("The alarm will trigger at " + alarm.getNextScheduledDate());
 </pre></li>
    <li><p>Create a relative alarm:</p>
 <pre class="prettyprint">
 /* Alarm is triggered in 3 hours */
 var alarm = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR);
-tizen.alarm.add(alarm, &quot;org.tizen.browser&quot;);
+tizen.alarm.add(alarm, "org.tizen.browser");
 </pre></li>
    <li><p>Use the <code>getRemainingSeconds()</code> method to retrieve the number of seconds till the next relative alarm is triggered:</p>
 <pre class="prettyprint">
-console.log(&quot;The alarm triggers &quot; + alarm.getRemainingSeconds() + &quot; seconds later&quot;);
+console.log("The alarm triggers " + alarm.getRemainingSeconds() + " seconds later");
 </pre></li>
   </ol>
 
@@ -202,17 +202,17 @@ var alarm = new tizen.AlarmRelative(3, 3 * tizen.alarm.PERIOD_HOUR);
 <pre class="prettyprint">
 /* Create ApplicationControl object */
 var appControl = new tizen.ApplicationControl(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"http://tizen.org/appcontrol/operation/default",
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"image/jpg",
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null);
+                     "http://tizen.org/appcontrol/operation/default",
+                     null,
+                     "image/jpg",
+                     null);
 /* You can add additional attibutes to the notification dictionary */
 var notificationDict =
 {
-&nbsp;&nbsp;&nbsp;content: "This is a simple notification's content.",
-&nbsp;&nbsp;&nbsp;vibration : true,
-&nbsp;&nbsp;&nbsp;appId: tizen.application.getCurrentApplication().appInfo.id,
-&nbsp;&nbsp;&nbsp;appControl : appControl,
+   content: "This is a simple notification's content.",
+   vibration : true,
+   appId: tizen.application.getCurrentApplication().appInfo.id,
+   appControl : appControl,
 };
 /* Create StatusNotification object */
 var notification = new tizen.StatusNotification("SIMPLE", "Simple notification's title", notificationDict);
diff --git a/org.tizen.guides/html/web/app_management/app_communication_w.htm b/org.tizen.guides/html/web/app_management/app_communication_w.htm
index 5e5aa90..1f4a634 100644 (file)
--- a/org.tizen.guides/html/web/app_management/app_communication_w.htm
+++ b/org.tizen.guides/html/web/app_management/app_communication_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
diff --git a/org.tizen.guides/html/web/app_management/app_controls_w.htm b/org.tizen.guides/html/web/app_management/app_controls_w.htm
index 687af81..413f913 100644 (file)
--- a/org.tizen.guides/html/web/app_management/app_controls_w.htm
+++ b/org.tizen.guides/html/web/app_management/app_controls_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -53,19 +53,19 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Application Controls</h1> 
+  <h1>Application Controls</h1>
 
-<p>Tizen provides various application management features, including application launching, event handling, and information retrieval.</p> 
+<p>Tizen provides various application management features, including application launching, event handling, and information retrieval.</p>
 
 <p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 
-  <p>The main application management features are:</p> 
+  <p>The main application management features are:</p>
   <ul>
    <li>Application management <p>You can <a href="#manage">manage applications</a> by launching and stopping other applications, and hiding or exiting the current application.</p></li>
 
-   <li>Application information retrieval <p>You can display a list of applications that are currently installed or running on the device, and <a href="#retrieve">retrieve application information</a>, such as application name, application ID, and context ID.</p></li> 
+   <li>Application information retrieval <p>You can display a list of applications that are currently installed or running on the device, and <a href="#retrieve">retrieve application information</a>, such as application name, application ID, and context ID.</p></li>
        <li>Application controls
-       <p>An application control (app control) is a way of sharing an application&#39;s functionality. To use another application&#39;s features through application controls reduces your efforts and time to develop your application.</p>
+       <p>An application control (app control) is a way of sharing an application's functionality. To use another application's features through application controls reduces your efforts and time to develop your application.</p>
        <p>You can use in your application operations, such as calling, Web browsing, and playing media items, which are exported by other applications. This mechanism allows you to conveniently launch other applications whose functionalities you need in your application. If you need to use functionality from another application, launching an application control allows you to request the system to launch that application according to your requirements. You can launch applications based on your immediate needs - you do not need to know their identifiers or specifications. You can use application controls by creating an <a href="#controls">application control request</a>. The request allows you to <a href="#launch">launch other applications</a> to use their functionalities.</p>
        <p>If you want to allow other applications to use your application functionalities, you must <a href="#exporting">export your application controls</a> and be prepared to <a href="#handle">receive requests and respond to them</a>.</p></li>
        <li>Event handling
@@ -89,7 +89,7 @@
 <li>The calling application receives the result through the <code>ApplicationControlDataArrayReplyCallback</code> event handler (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlDataArrayReplyCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlDataArrayReplyCallback">TV</a> applications).</li></ol>
 
 <p>The application control uses the following primary information:</p>
-<ul><li>Application ID 
+<ul><li>Application ID
 <p>Used to identify the provider application of the requested application control. Besides the application ID, a <a href="#common">common application control</a> has a special alias name for the application ID with the prefix <code>tizen</code>. For example, the platform phone application has the alias application ID of <code>tizen.phone</code>.</p>
 <p>Used to identify the provider application of the requested application control.</p>
 
@@ -138,8 +138,8 @@
   <p>The following code example shows an <code>ApplicationControl</code> instance that launches an application to pick images:</p>
 
 <pre class="prettyprint">
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;image/*&quot;, null, null);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
+                                              null, "image/*", null, null);
 
 tizen.application.launchAppControl(appControl, null, successCb, errCb, null);
 </pre>
@@ -147,20 +147,20 @@ tizen.application.launchAppControl(appControl, null, successCb, errCb, null);
 <p>When you make an implicit launch request, there can be multiple applications that can fulfill the request. In that case, the system shows a pop-up which allows the user to select the application of their choice. If you want to select a specific application among the available applications that provide a specific operation, you can use the <code>findAppControl()</code> method of <code>Application</code> interface to search for applications which provide the functionalities that you need. The following code example demonstrates an explicit launch of an application to provide the image view operation that is found using the <code>findAppControl()</code> method:</p>
 <pre class="prettyprint">
 /*
-   Assuming that the filesystem virtual root &quot;images&quot;
+   Assuming that the filesystem virtual root "images"
    has been resolved and saved in variable images
 */
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images.resolve(&quot;image12.jpg&quot;).toURI(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;image/*&quot;, null, null);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                              images.resolve("image12.jpg").toURI(),
+                                              "image/*", null, null);
 
 tizen.application.findAppControl(appControl, function(appInfos, appCtrl)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (appInfos.length &gt;= 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(appCtrl, appInfos[0].id, successCB, errCB, null);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}, function(e) {/* Error handling */});
+   {
+      if (appInfos.length &gt;= 1)
+      {
+         tizen.application.launchAppControl(appCtrl, appInfos[0].id, successCB, errCB, null);
+      }
+   }, function(e) {/* Error handling */});
 </pre>
 
 
@@ -191,7 +191,7 @@ tizen.application.findAppControl(appControl, function(appInfos, appCtrl)
        <li><a href="common_appcontrol_w.htm#inputdelegator">Input Delegator</a></li>
 </ul>
 
-       <h2 id="exporting" name="exporting">Application Control Export</h2> 
+       <h2 id="exporting" name="exporting">Application Control Export</h2>
 
 <p>Your application can export application control functionality. This means that the application can register itself as a provider application, allowing it to receive application control requests from other applications. You can <a href="#handle">handle an incoming application control request</a> using the <code>getRequestedAppControl()</code> method of the <code>Application</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#Application">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#Application">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#Application">TV</a> applications), and respond to the incoming request using the <code>RequestedApplicationControl</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#RequestedApplicationControl">TV</a> applications).</p>
 <p>The system compares the attributes of the application control request against the service descriptions of installed applications to determine which of the available applications are suitable for the request. The service description of the installed applications contains information about the requests that they can handle. The request is resolved only if all specified information in the request matches with the service description retrieved from an installed application. The application control <code>data</code> attribute is not used in resolving the control request.</p>
@@ -205,10 +205,10 @@ tizen.application.findAppControl(appControl, function(appInfos, appCtrl)
 
 <pre class="prettyprint">
 &lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;src name=&quot;view.html&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;file&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;image/jpeg&quot;/&gt;
+   &lt;src name="view.html"/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/view"/&gt;
+   &lt;uri name="file"/&gt;
+   &lt;mime name="image/jpeg"/&gt;
 &lt;/tizen:app-control&gt;
 </pre>
 
@@ -216,27 +216,27 @@ tizen.application.findAppControl(appControl, function(appInfos, appCtrl)
 
 <pre class="prettyprint">
 /*
-   Assuming that the filesystem virtual root &quot;images&quot;
+   Assuming that the filesystem virtual root "images"
    has been resolved and saved in variable images
 */
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images.resolve(&quot;image12.jpg&quot;).toURI(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                              images.resolve("image12.jpg").toURI(),
+                                              null, null, null);
 </pre>
 
 <p>When the system attempts to resolve the request and find the application to be launched, it checks the service descriptions. In the following example, the application with the first service description is not launched, since the <code>uri</code> information does not match the request. However, the application with the second service description is a match and can be launched:</p>
 <pre class="prettyprint">
 &lt;!--First service description: not a match--&gt;
 &lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;file&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;image/*&quot;/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/view"/&gt;
+   &lt;uri name="file"/&gt;
+   &lt;mime name="image/*"/&gt;
 &lt;/tizen:app-control&gt;
 
 &lt;!--Second service description: a match--&gt;
 &lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;image/*&quot;/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/view"/&gt;
+   &lt;mime name="image/*"/&gt;
 &lt;/tizen:app-control&gt;
 </pre>
 
@@ -244,13 +244,13 @@ var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/
 
 <pre class="prettyprint">
 &lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;image/*&quot;/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/view"/&gt;
+   &lt;mime name="image/*"/&gt;
 &lt;/tizen:app-control&gt;
 
 &lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;audio/*&quot;/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/view"/&gt;
+   &lt;mime name="audio/*"/&gt;
 &lt;/tizen:app-control&gt;
 </pre>
 
@@ -261,9 +261,9 @@ var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/
 <p>The following code example demonstrates a service description in the <code>config.xml</code> file, which can handle an image editing application control request without reloading the Web page:</p>
 <pre class="prettyprint">
 &lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;src name=&quot;edit.html&quot; reload=&quot;disable&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/edit&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;image/*&quot;/&gt;
+   &lt;src name="edit.html" reload="disable"/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/edit"/&gt;
+   &lt;mime name="image/*"/&gt;
 &lt;/tizen:app-control&gt;
 </pre>
 
@@ -271,30 +271,30 @@ var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/
 <p>If the currently loaded page is selected by an incoming application control request, and the <code>reload</code> attribute of the service description is set to <code>disable</code>, an <code>appcontrol</code> event is dispatched to that page instead of reloading it. By using an <code>appcontrol</code> event listener, the Web application can get the requested information by calling the <code>getRequestedAppControl()</code> method of the <code>Application</code> interface. An <code>appcontrol</code> event is dispatched only if the <code>reload</code> attribute of the service description is set to <code>disable</code>.</p>
 <p>The following example demonstrates adding an <code>appcontrol</code> event listener and handling an event:</p>
 <pre class="prettyprint">
-window.addEventListener(&quot;appcontrol&quot;, function onAppControl()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var reqAppControl = tizen.application.getCurrentApplication.getRequestedAppControl();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (reqAppControl)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the application control request */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+window.addEventListener("appcontrol", function onAppControl()
+   {
+      var reqAppControl = tizen.application.getCurrentApplication.getRequestedAppControl();
+      if (reqAppControl)
+      {
+         /* Handle the application control request */
+      }
+   });
 </pre>
 
 <h2 id="prerequisites">Prerequisites</h2>
 
 <p>To use the Application API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.info&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/appmanager.kill&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/application.info"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/appmanager.kill"/&gt;
 </pre>
 
 <h2 id="retrieve" name="retrieve">Retrieving Application Information</h2>
 
-<p>You can retrieve information about applications in various ways:</p> 
+<p>You can retrieve information about applications in various ways:</p>
     <ul>
      <li>Retrieve information about installed applications with the <code>getAppInfo()</code> and <code>getAppsInfo()</code> methods of the <code>ApplicationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications).
-        <p>These methods can be used to access the <code>ApplicationInformation</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationInformation">TV</a> applications) to retrieve information about installed applications, such as their name, icon path, and version.</p></li> 
+        <p>These methods can be used to access the <code>ApplicationInformation</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationInformation">TV</a> applications) to retrieve information about installed applications, such as their name, icon path, and version.</p></li>
         <li>Retrieve information about running applications with the <code>getAppContext()</code> and <code>getAppsContext()</code> methods of the <code>ApplicationManager</code> interface.
         <p>These methods can be used to access the <code>ApplicationContext</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationContext">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationContext">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationContext">TV</a> applications) to retrieve the application ID and context ID of the running application.</p>
         <p>The application ID can be used to retrieve application information, or to launch an application. The context ID is a unique identifier given by the platform to a running application.</p></li>
@@ -302,58 +302,58 @@ window.addEventListener(&quot;appcontrol&quot;, function onAppControl()
 
 <p>Learning how to retrieve information about installed and running applications allows you to manage all the device applications from your application: </p>
   <ol>
-   <li><p>To retrieve a list of installed applications, use the <code>getAppsInfo()</code> method of the <code>ApplicationManager</code> interface:</p> 
+   <li><p>To retrieve a list of installed applications, use the <code>getAppsInfo()</code> method of the <code>ApplicationManager</code> interface:</p>
 <pre class="prettyprint">
 function onListInstalledApplications(applications)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The number of installed applications is &quot; + applications.length);
+   console.log("The number of installed applications is " + applications.length);
 }
 tizen.application.getAppsInfo(onListInstalledApplications);
 </pre>
 <p>The list of applications is returned to the <code>ApplicationInformationArraySuccessCallback</code> event handler as an array of <code>ApplicationInformation</code> objects.</p> </li>
-   <li><p>To retrieve a list of running applications, use the <code>getAppsContext()</code> method of the <code>ApplicationManager</code> interface:</p> 
+   <li><p>To retrieve a list of running applications, use the <code>getAppsContext()</code> method of the <code>ApplicationManager</code> interface:</p>
 <pre class="prettyprint">
 function onRunningApplicationContexts(contexts)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The number of running applications is &quot; + contexts.length);
+   console.log("The number of running applications is " + contexts.length);
 }
 tizen.application.getAppsContext(onRunningApplicationContexts);
 </pre>
 <p>The list of application contexts is returned to the given event handler as an array of the <code>ApplicationContext</code> objects.</p></li>
    <li><p>To retrieve basic application information, use the <code>getAppInfo()</code> method of the <code>ApplicationManager</code> interface.</p> <p>Provide the application ID of the application whose information you want as a parameter for the method. If no application ID is set, the method retrieves the information about the application calling the method.</p>
 <pre class="prettyprint">
-var appinfo = tizen.application.getAppInfo(&quot;org.tizen.application&quot;);
-console.log(&quot;The application icon path: &quot; + appinfo.iconPath);
-console.log(&quot;The application name: &quot; + appinfo.name);
+var appinfo = tizen.application.getAppInfo("org.tizen.application");
+console.log("The application icon path: " + appinfo.iconPath);
+console.log("The application name: " + appinfo.name);
 </pre></li>
    <li><p>To retrieve application context information, use the <code>getAppContext()</code> method of the <code>ApplicationManager</code> interface.</p> <p>Provide the context ID of the application whose context information you want as a parameter for the method. If no context ID is set, the method retrieves the information about the application calling the method.</p>
 <pre class="prettyprint">
 var appContext = tizen.application.getAppContext();
-console.log(&quot;Application context retrieved for app &quot; + appContext.id);
+console.log("Application context retrieved for app " + appContext.id);
 </pre></li>
   </ol>
-          
+
 <h2 id="manage" name="manage">Managing Applications</h2>
-                               
+
 <p>You can manage and retrieve information about the current application with the <code>Application</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#Application">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#Application">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#Application">TV</a> applications). The <code>Application</code> object is retrieved using the <code>getCurrentApplication()</code> method of the <code>ApplicationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications). You can exit or hide the current application using the <code>Application</code> interface.</p>
 <p>Learning how to launch and stop other applications, and hide or exit applications running on the device, allows you to manage all the device applications from your application:</p>
   <ol>
-   <li><p>To launch or stop another application, you need the application ID (for launching) or context ID (for stopping) to identify the application. </p> <p>To launch an application, use the <code>launch()</code> method of the <code>ApplicationManager</code> interface, and to stop an application, use the <code>kill()</code> method.</p> <p>In the following example, the application to be launched and stopped is an alarm, with the <code>&quot;samplealarm&quot;</code> ID.</p>
+   <li><p>To launch or stop another application, you need the application ID (for launching) or context ID (for stopping) to identify the application. </p> <p>To launch an application, use the <code>launch()</code> method of the <code>ApplicationManager</code> interface, and to stop an application, use the <code>kill()</code> method.</p> <p>In the following example, the application to be launched and stopped is an alarm, with the <code>"samplealarm"</code> ID.</p>
 
 <pre class="prettyprint">
 /* Launch the application */
-tizen.application.launch(&quot;samplealarm&quot;, onsuccess);
+tizen.application.launch("samplealarm", onsuccess);
 
 /* Stop the application */
 function onGetAppsContextSuccess(appcontexts)
 {
-&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; appcontexts.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (appcontexts[i].appId === &quot;samplealarm&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.kill(appcontexts[i].id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   for (int i = 0; i &lt; appcontexts.length; i++)
+   {
+      if (appcontexts[i].appId === "samplealarm")
+      {
+         tizen.application.kill(appcontexts[i].id);
+      }
+   }
 }
 
 tizen.application.getAppsContext(onGetAppsContextSuccess);
@@ -372,11 +372,11 @@ currApp.hide();
 currApp.exit();
 </pre></li>
   </ol>
-  
+
 
 
 <h2 id="launch" name="launch">Launching Applications with the Application Control</h2>
-                               
+
 <p>With the application control, you can send a request to launch other applications based on their functionality using the <code>launchAppControl()</code> method of the <code>ApplicationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationManager">TV</a> applications) (which can also contain some data).</p>
 
 <p>Any installed application can provide a service which can be identified by the operation name. When other applications request the provided service of the provider application (and optionally passing some data to the service), the provider application is launched and performs a specific operation. The provider application also sends back a response to the request with an <code>ApplicationControlData</code> instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlData">TV</a> applications) (which can also contain some data).</p>
@@ -384,42 +384,42 @@ currApp.exit();
 <p>Learning to use application controls to launch other applications from your application allows you to take advantage of the functionality of other device applications.</p>
 
 <ol>
-<li><p>To use the application control mechanism to pick image files from a list of images, create an <code>ApplicationControl</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControl">TV</a> applications).</p> 
-<p>Define the functionality required from the external application which you want to launch. The application control request must have an operation type suitable for selecting images, with the URI set as <code>null</code>, and the MIME type set as <code>image/*</code>.</p> 
+<li><p>To use the application control mechanism to pick image files from a list of images, create an <code>ApplicationControl</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControl">TV</a> applications).</p>
+<p>Define the functionality required from the external application which you want to launch. The application control request must have an operation type suitable for selecting images, with the URI set as <code>null</code>, and the MIME type set as <code>image/*</code>.</p>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;image/*&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
+                                null, "image/*");
 </pre></li>
 
 <li>Define the format of the reply you want to receive from the application control:
 <pre class="prettyprint">
 var appControlReplyCB =
 {
-&nbsp;&nbsp;&nbsp;/* Reply is sent if the requested operation is successfully delivered */
-&nbsp;&nbsp;&nbsp;onsuccess: function(reply)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var num = 0; num &lt; reply.length; num++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (reply[num].key == &quot;http://tizen.org/appcontrol/data/path&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;picked image path: &quot; + reply[num].value[0]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   /* Reply is sent if the requested operation is successfully delivered */
+   onsuccess: function(reply)
+   {
+      for (var num = 0; num &lt; reply.length; num++)
+      {
+         if (reply[num].key == "http://tizen.org/appcontrol/data/path")
+         {
+            console.log("picked image path: " + reply[num].value[0]);
+         }
+      }
+   }
 }
 </pre></li>
-   <li>Call the <code>launchAppControl()</code> method to find a suitable application to select the images: 
+   <li>Call the <code>launchAppControl()</code> method to find a suitable application to select the images:
 <pre class="prettyprint">
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch appControl succeeded&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e) {/* Error handling */}, appControlReplyCB);
+   {
+      console.log("launch appControl succeeded");
+   }, function(e) {/* Error handling */}, appControlReplyCB);
 </pre></li>
   </ol>
 
 <h2 id="handle" name="handle">Receiving and Replying to Application Control Requests</h2>
-                               
+
   <p>Learning how to handle requests from other applications allows you to create Web applications that can be called from other applications to perform specific actions.</p>
     <p>Web applications can provide a service which can be identified by an operation name. Other applications can request and use the provided service of other applications (and optionally pass some data to the service). The provider application receives the request, performs some actions, and sends the result to the caller application in an <code>ApplicationControlData</code> array (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlData">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlData">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControlData">TV</a> applications).</p>
 
@@ -429,8 +429,8 @@ tizen.application.launchAppControl(appControl, null, function()
 
 <pre class="prettyprint lang-xml">
 &lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;index.html&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://example.tizen.org/operation/get_time&quot;/&gt;
+   &lt;tizen:src name="index.html"/&gt;
+   &lt;tizen:operation name="http://example.tizen.org/operation/get_time"/&gt;
 &lt;/tizen:app-control&gt;
 </pre>
    <p>For more information, see <a href="#exporting">Application Control Export</a>.</p>
@@ -441,22 +441,22 @@ var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppCon
 
 if (reqAppControl &amp;&amp; reqAppControl.callerAppId)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Requester AppID: &quot; + reqAppControl.callerAppId
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;\nwith operation: &quot; + reqAppControl.appControl.operation);
+   console.log("Requester AppID: " + reqAppControl.callerAppId
+               + "\nwith operation: " + reqAppControl.appControl.operation);
 }
 else
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The application was not launched with Application Control.&quot;);
+   console.log("The application was not launched with Application Control.");
 }
 </pre></li>
    <li><p>To send a reply to the caller application, use the <code>replyResult()</code> method of the <code>RequestedApplicationControl</code> interface:</p>
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;/* Construct result data */
-&nbsp;&nbsp;&nbsp;var data = new tizen.ApplicationControlData(&quot;current-time&quot;, [new Date().toString()]);
-&nbsp;&nbsp;&nbsp;/* Reply to caller */
-&nbsp;&nbsp;&nbsp;reqAppControl.replyResult([data]);
+   /* Construct result data */
+   var data = new tizen.ApplicationControlData("current-time", [new Date().toString()]);
+   /* Reply to caller */
+   reqAppControl.replyResult([data]);
 }
 </pre></li>
 </ol>
@@ -472,16 +472,16 @@ var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppCon
 
 if (reqAppControl)
 {
-&nbsp;&nbsp;&nbsp;var retData = reqAppControl.appControl.data;
-&nbsp;&nbsp;&nbsp;var i = retData.length;
-&nbsp;&nbsp;&nbsp;while (--i &gt;= 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var dat = retData[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (dat.key === &quot;http://tizen.org/appcontrol/data/push/launch_type&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Cause of application wake-up: &quot; + JSON.stringify(dat.value))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   var retData = reqAppControl.appControl.data;
+   var i = retData.length;
+   while (--i &gt;= 0)
+   {
+      var dat = retData[i];
+      if (dat.key === "http://tizen.org/appcontrol/data/push/launch_type")
+      {
+         console.log("Cause of application wake-up: " + JSON.stringify(dat.value))
+      }
+   }
 }
 </pre>
 
@@ -501,8 +501,8 @@ if (reqAppControl)
 <p>To broadcast events, use the <code>broadcastEvent()</code> method:</p>
 <pre class="prettyprint">
 var app = tizen.application.getCurrentApplication();
-var appEvent = {name: &quot;first_app_event_1&quot;};
-var data = {foo: &quot;bar&quot;};
+var appEvent = {name: "first_app_event_1"};
+var data = {foo: "bar"};
 
 app.broadcastEvent(appEvent, data);
 </pre>
@@ -516,13 +516,13 @@ app.broadcastTrustedEvent(appEvent, data);
 <pre class="prettyprint">
 var app = tizen.application.getCurrentApplication();
 
-var watchId = app.addEventListener({appId: &quot;a234567890.FirstApp&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;first_app_event_1&quot;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(event, data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Data from first app must be received here */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Data: &quot; + JSON.stringify(data));
-&nbsp;&nbsp;&nbsp;});
+var watchId = app.addEventListener({appId: "a234567890.FirstApp",
+                                    name: "first_app_event_1"},
+                                   function(event, data)
+   {
+      /* Data from first app must be received here */
+      console.log("Data: " + JSON.stringify(data));
+   });
 </pre>
 
 <p>To stop receiving data from the first application, use the <code>removeEventListener()</code> method with the proper <code>watchId</code>:</p>
@@ -545,17 +545,17 @@ app.removeEventListener(watchId);
 
 <p>The following <code>config.xml</code> file example shows how an application can be configured to run on the background:</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
-&lt;widget xmlns=&quot;http://www.w3.org/ns/widgets&quot; xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;http://yourdomain/BackgroundCategory&quot; version=&quot;1.0.0&quot; viewmodes=&quot;maximized&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:application id=&quot;background.category&quot; package=&quot;background&quot; required_version=&quot;2.4&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;content src=&quot;index.html&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon src=&quot;icon.png&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;name&gt;BackgroundCategoryTest&lt;/name&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:background-category value=&quot;media&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:background-category value=&quot;download&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:background-category value=&quot;background-network&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:setting background-support=&quot;enable&quot;/&gt;
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
+        id="http://yourdomain/BackgroundCategory" version="1.0.0" viewmodes="maximized"&gt;
+   &lt;tizen:application id="background.category" package="background" required_version="2.4"/&gt;
+   &lt;content src="index.html"/&gt;
+   &lt;icon src="icon.png"/&gt;
+   &lt;name&gt;BackgroundCategoryTest&lt;/name&gt;
+   &lt;tizen:background-category value="media"/&gt;
+   &lt;tizen:background-category value="download"/&gt;
+   &lt;tizen:background-category value="background-network"/&gt;
+   &lt;tizen:setting background-support="enable"/&gt;
 &lt;/widget&gt;
 </pre>
 
diff --git a/org.tizen.guides/html/web/app_management/app_group_w.htm b/org.tizen.guides/html/web/app_management/app_group_w.htm
index 15089cb..230bad2 100644 (file)
--- a/org.tizen.guides/html/web/app_management/app_group_w.htm
+++ b/org.tizen.guides/html/web/app_management/app_group_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -13,7 +13,7 @@
   <title>Application Groups</title>
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
@@ -46,7 +46,7 @@
 <h1>Application Groups</h1>
 <p>You can define the application launch mode and group your applications into entities that can be managed together.</p>
 
-<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
+<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 
   <p>The main application group features include:</p>
   <ul>
@@ -72,7 +72,7 @@
 
 <p>To use the Application API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
 </pre>
 
 
@@ -92,8 +92,8 @@
 <li>Define the application control object with the <code>GROUP</code> mode:
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;image/jpeg&quot;, null, [], &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                null, "image/jpeg", null, [], "GROUP");
 </pre>
 </li>
 
@@ -101,16 +101,16 @@ var appControl =
 <pre class="prettyprint">
 var appControlReplyCallback =
 {
-&nbsp;&nbsp;&nbsp;/* Callee sent a reply */
-&nbsp;&nbsp;&nbsp;onsuccess: function(data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;onsuccess&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;/* Callee returned failure */
-&nbsp;&nbsp;&nbsp;onfailure: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;onfailure&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* Callee sent a reply */
+   onsuccess: function(data)
+   {
+      console.log("onsuccess");
+   },
+   /* Callee returned failure */
+   onfailure: function()
+   {
+      console.log("onfailure");
+   }
 }
 </pre>
 
@@ -118,12 +118,12 @@ var appControlReplyCallback =
 <li>Launch the application in the <code>GROUP</code> mode with the previously defined application control object:
 <pre class="prettyprint">
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, appControlReplyCallback);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, appControlReplyCallback);
 </pre>
 
 </li>
@@ -151,4 +151,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
+</html>
diff --git a/org.tizen.guides/html/web/app_management/app_icons_w.htm b/org.tizen.guides/html/web/app_management/app_icons_w.htm
index 62f9ded..d44a734 100644 (file)
--- a/org.tizen.guides/html/web/app_management/app_icons_w.htm
+++ b/org.tizen.guides/html/web/app_management/app_icons_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -41,12 +41,12 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Application Icons</h1> 
+  <h1>Application Icons</h1>
 
   <p>When an application has new information requiring user attention, such as missed calls or new messages, it has a number in the upper right hand corner of the application icon. This number is called a badge. For example, when a new message is received, the badge appears on the application icon. The badge remains until the user reads the message.</p>
 
-      
-<p><p>This feature is supported in mobile and wearable applications only.</p></p> 
+
+<p><p>This feature is supported in mobile and wearable applications only.</p></p>
 
   <p align="center"><strong>Figure: Badge</strong></p>
   <p align="center"><img alt="Badge" src="../../images/badge.png" /></p>
@@ -63,7 +63,7 @@
 
 <p>To use the Badge API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/notification&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/notification"/&gt;
 </pre>
 
 
@@ -78,7 +78,7 @@ var appId = tizen.application.getCurrentApplication().appInfo.id;
 <li><p>To check the badge number of the current application, use the <code>getBadgeCount()</code> method of the <code>BadgeManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html#BadgeManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html#BadgeManager">wearable</a> applications):</p>
 <pre class="prettyprint">
 var count = tizen.badge.getBadgeCount(appId);
-console.log(&quot;Badge count of &quot; + appId + &quot; is &quot; + count);
+console.log("Badge count of " + appId + " is " + count);
 </pre></li>
 <li><p>To change the badge of the current application, use the <code>setBadgeCount()</code> method:</p>
 <pre class="prettyprint">
@@ -101,15 +101,15 @@ tizen.badge.setBadgeCount(appId, 0);
 <pre class="prettyprint">
 function watcher(appId, count)
 {
-&nbsp;&nbsp;&nbsp;console.log(appId + &#39; badge number were updated: &#39; + count);
+   console.log(appId + ' badge number were updated: ' + count);
 }
 
-tizen.badge.addChangeListener([&quot;BDb5tZJe47.TestSample&quot;], watcher);
+tizen.badge.addChangeListener(["BDb5tZJe47.TestSample"], watcher);
 </pre>
 <p><code>BDb5tZJe47.TestSample</code> is the application ID of the application to monitor. The first argument of the <code>addChangeListener()</code> method is an array of application identifiers. This allows you to bind the listener to several applications at same time.</p></li>
 <li><p>To stop receiving notification about badge changes, use the <code>removeChangeListener ()</code> method:</p>
 <pre class="prettyprint">
-tizen.badge.removeChangeListener([&quot;BDb5tZJe47.TestSample&quot;]);
+tizen.badge.removeChangeListener(["BDb5tZJe47.TestSample"]);
 </pre></li>
 </ol>
 
diff --git a/org.tizen.guides/html/web/app_management/app_info_control_w.htm b/org.tizen.guides/html/web/app_management/app_info_control_w.htm
index 9a013df..4c9ff10 100644 (file)
--- a/org.tizen.guides/html/web/app_management/app_info_control_w.htm
+++ b/org.tizen.guides/html/web/app_management/app_info_control_w.htm
@@ -30,14 +30,14 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Application Information and Controls</h1> 
+  <h1>Application Information and Controls</h1>
 
-<p>The application information and control features allow you to manage application widgets, and use application controls to take advantage of other application&#39;s features.</p>
+<p>The application information and control features allow you to manage application widgets, and use application controls to take advantage of other application's features.</p>
 
   <p>You can use the following application information and control features in your Web applications:</p>
-  <ul> 
+  <ul>
    <li><a href="app_controls_w.htm">Application Controls</a>
-   <p>The application controls allow you to share an application&#39;s functionality. To use another application&#39;s features through application controls reduces your efforts and time to develop your own application. You can also allow other applications to share your functionality by exporting your application control functionalities.</p>
+   <p>The application controls allow you to share an application's functionality. To use another application's features through application controls reduces your efforts and time to develop your own application. You can also allow other applications to share your functionality by exporting your application control functionalities.</p>
    </li>
    <li><a href="widget_app_w.htm">Widget Information</a> <strong>in mobile and wearable applications only</strong>
    <p>You can manage installed widgets and widget instances in various ways, such as retrieving information about widgets, or getting the widget instances and receiving notifications when the state of the widget changes.</p>
diff --git a/org.tizen.guides/html/web/app_management/app_management_cover_w.htm b/org.tizen.guides/html/web/app_management/app_management_cover_w.htm
index 4294e06..48950d7 100644 (file)
--- a/org.tizen.guides/html/web/app_management/app_management_cover_w.htm
+++ b/org.tizen.guides/html/web/app_management/app_management_cover_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Application Management</title>  
+       <title>Application Management</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,7 +28,7 @@
                        <li>Tizen 3.0 and Higher for TV</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Application Management</h1>
@@ -58,7 +58,7 @@
 
 <li><a href="app_info_control_w.htm">Application Information and Controls</a>
 
-<p>The application controls allow you to share an application&#39;s functionality. To use another application&#39;s features through application controls reduces your efforts and time to develop your own application. You can also manage and retrieve information from installed widgets and widget instances in various ways.</p></li>
+<p>The application controls allow you to share an application's functionality. To use another application's features through application controls reduces your efforts and time to develop your own application. You can also manage and retrieve information from installed widgets and widget instances in various ways.</p></li>
 
 <li><a href="app_communication_w.htm">Application Data Exchange</a>
 
diff --git a/org.tizen.guides/html/web/app_management/applications_w.htm b/org.tizen.guides/html/web/app_management/applications_w.htm
index e22aa99..4944705 100644 (file)
--- a/org.tizen.guides/html/web/app_management/applications_w.htm
+++ b/org.tizen.guides/html/web/app_management/applications_w.htm
@@ -11,7 +11,7 @@
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
   <title>Applications</title>
- </head> 
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
  <div id="toc-navigation">
@@ -45,7 +45,7 @@
 
 <p>The <a href="../../../../org.tizen.studio/html/cover_page.htm">Tizen Studio</a> enables you to create Web applications for mobile and wearable devices. A Web application comprises HTML, JavaScript, and CSS combined in a package, which can be installed on the Tizen device. A <a href="../../../../org.tizen.training/html/web/process/app_dev_process_w.htm#package">Web application package</a> includes all the support files that are needed by the Web application. Therefore, a Web application can run without any additional external resources or network connectivity after installation.</p>
 
-<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
+<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 
 <h2 id="app_models">Web Application Models</h2>
 
@@ -67,8 +67,8 @@
   <p>The application package manager is one of the core modules of the Tizen application framework, and responsible for installing, uninstalling, and updating packages, and storing their information. Using the package manager, you can also retrieve information related to the packages that are installed on the device.</p>
   <p>The application package manager module is expandable to support various types of applications, and designated installation modules can be added to it. </p>
 
-  <p align="center"><strong>Figure: Application package manager</strong></p> 
- <p align="center"><img alt="Application package manager" src="../../images/application_package_manager.png" /></p> 
+  <p align="center"><strong>Figure: Application package manager</strong></p>
+ <p align="center"><img alt="Application package manager" src="../../images/application_package_manager.png" /></p>
 
    <p>Tizen supports both Web application packages and hybrid application packages, which combine a Web application and 1 or more native service applications. Applications in the same package follow the same installation life-cycle, handled by the application package manager.</p>
 
diff --git a/org.tizen.guides/html/web/app_management/common_appcontrol_w.htm b/org.tizen.guides/html/web/app_management/common_appcontrol_w.htm
index 5dbaf24..fc8d6f3 100644 (file)
--- a/org.tizen.guides/html/web/app_management/common_appcontrol_w.htm
+++ b/org.tizen.guides/html/web/app_management/common_appcontrol_w.htm
@@ -100,18 +100,18 @@
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/text&quot;, [&quot;tizen&quot;]);
+   new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text", ["tizen"]);
 
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/search&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, [appControlData], null);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/search",
+                                              null, null, null, [appControlData], null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Loading a Web Page</h3>
@@ -142,23 +142,23 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://www.tizen.org&quot;, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                "https://www.tizen.org", null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="calendar" name="calendar">Calendar in Mobile Applications</h2>
 
 <h3>Adding a Calendar Event</h3>
 
-<p>To add a new event to the user&#39;s calendar, use the <code>http://tizen.org/appcontrol/operation/add</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To add a new event to the user's calendar, use the <code>http://tizen.org/appcontrol/operation/add</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
 
 <p align="center"><strong>Figure: Adding a calendar event</strong></p>
 <p align="center"><img src="../../images/common_appcontrol_calendar.png" alt="Adding a calendar event" /></p>
@@ -215,26 +215,26 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/title&quot;, [&quot;My event&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;My event text&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/title", ["My event"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text",
+                                     ["My event text"])];
 
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/add&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.calendar&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, appControlData, &quot;GROUP&quot;);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/add",
+                                              null, "application/vnd.tizen.calendar",
+                                              null, appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Editing a Calendar Event</h3>
 
-<p>To edit an existing event in the user&#39;s calendar, use the <code>http://tizen.org/appcontrol/operation/edit</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To edit an existing event in the user's calendar, use the <code>http://tizen.org/appcontrol/operation/edit</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
 
 <p align="center"><strong>Figure: Editing a calendar event</strong></p>
 <p align="center"><img src="../../images/common_appcontrol_calendar4.png" alt="Editing a calendar event" /></p>
@@ -295,27 +295,27 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/id&quot;, [&quot;1&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/title&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;Edited Title&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/all_day&quot;, [&quot;true&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["1"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/title",
+                                     ["Edited Title"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/all_day", ["true"])];
 
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/edit&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.calendar&quot;, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControlData, &quot;GROUP&quot;);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit",
+                                              null, "application/vnd.tizen.calendar", null,
+                                              appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Viewing a Calendar Event</h3>
 
-<p>To display a specified event in the user&#39;s calendar, use the <code>http://tizen.org/appcontrol/operation/view</code> operation. To specify various event details, refer to the extras defined below.</p>
+<p>To display a specified event in the user's calendar, use the <code>http://tizen.org/appcontrol/operation/view</code> operation. To specify various event details, refer to the extras defined below.</p>
 <p>To display a specified event from a vcalendar file, use the <code>file:</code> URI. To display a specified event using the calendar ID, use the <code>application/vnd.tizen.calendar</code> MIME type with <code>http://tizen.org/appcontrol/data/id</code>.</p>
 
 <p align="center"><strong>Figure: Viewing a calendar event</strong></p>
@@ -353,38 +353,38 @@ tizen.application.launchAppControl(appControl, null, function()
 <pre class="prettyprint">
 /* To view a calendar event from a vcs file */
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;file://&lt;app&#39;s shared path&gt;/Calendar3.vcs&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                "file://&lt;app's shared path&gt;/Calendar3.vcs",
+                                null, null, null, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 
 /* To view a calendar event from a calendar event ID */
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/id&quot;, [&quot;1&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["1"])];
 
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.calendar&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, appControlData, null);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                              null, "application/vnd.tizen.calendar",
+                                              null, appControlData, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Selecting a Calendar Event</h3>
 
-<p>To select a specified event in the user&#39;s calendar, use the <code>http://tizen.org/appcontrol/operation/pick</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
+<p>To select a specified event in the user's calendar, use the <code>http://tizen.org/appcontrol/operation/pick</code> operation with the <code>application/vnd.tizen.calendar</code> MIME type. To specify various event details, refer to the extras defined below.</p>
 <p align="center"><strong>Figure: Selecting a calendar event</strong></p>
 <p align="center"><img src="../../images/common_appcontrol_calendar3.png" alt="Selecting a calendar event" /></p>
 
@@ -435,21 +435,21 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/type&quot;, [&quot;id&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/selection_mode&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;single&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/type", ["id"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode",
+                                     ["single"])];
 
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.calendar&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, appControlData, &quot;GROUP&quot;);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
+                                              null, "application/vnd.tizen.calendar",
+                                              null, appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="call" name="call">Call in Mobile Applications</h2>
@@ -468,16 +468,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/call&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;tel:0123456789&quot;, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/call",
+                                "tel:0123456789", null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 
@@ -496,16 +496,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/dial&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;tel:0123456789&quot;, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/dial",
+                                "tel:0123456789", null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 
@@ -555,16 +555,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/create_content&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;image/*&quot;, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
+                                null, "image/*", null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Capturing a Picture</h3>
@@ -604,16 +604,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/image_capture&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/image_capture",
+                                null, null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Capturing a Video</h3>
@@ -653,16 +653,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/video_capture&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/video_capture",
+                                null, null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="contact" name="contact">Contact in Mobile Applications</h2>
@@ -699,7 +699,7 @@ tizen.application.launchAppControl(appControl, null, function()
                        </tr>
                        <tr>
                                <td><code>http://tizen.org/appcontrol/data/name</code></td>
-                               <td>The contact&#39;s name. This key must be passed as a string.</td>
+                               <td>The contact's name. This key must be passed as a string.</td>
                        </tr>
                </tbody>
        </table>
@@ -719,24 +719,24 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/phone&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;0123456789&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/email&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;tizen@tizen.org&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/name&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;Tizen User&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/phone",
+                                     ["0123456789"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/email",
+                                     ["tizen@tizen.org"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/name",
+                                     ["Tizen User"])];
 
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/add&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.contact&quot;, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControlData, &quot;GROUP&quot;);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/add",
+                                              null, "application/vnd.tizen.contact", null,
+                                              appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 
@@ -796,21 +796,21 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/id&quot;, [&quot;personId&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/phone&quot;, [&quot;0123456789&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/email&quot;, [&quot;2nd Email&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["personId"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/phone", ["0123456789"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/email", ["2nd Email"])];
 
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/edit&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.contact&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, appControlData, &quot;GROUP&quot;);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit",
+                                              null, "application/vnd.tizen.contact",
+                                              null, appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Viewing a Contact</h3>
@@ -853,42 +853,42 @@ tizen.application.launchAppControl(appControl, null, function()
 <pre class="prettyprint">
 function launchContactDetails(personId)
 {
-&nbsp;&nbsp;&nbsp;var appControlData =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/id&quot;, [&quot;personId&quot;])];
-
-&nbsp;&nbsp;&nbsp;var appControl =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.contact&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, appControlData, &quot;GROUP&quot;);
-
-&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, null);
+   var appControlData =
+      [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["personId"])];
+
+   var appControl =
+      new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                   null, "application/vnd.tizen.contact",
+                                   null, appControlData, "GROUP");
+
+   tizen.application.launchAppControl(appControl, null, function()
+      {
+         console.log("launch application control succeed");
+      }, function(e)
+      {
+         console.log("launch application control failed. reason: " + e.message);
+      }, null);
 }
 
 function launchViewVcard(uri)
 {
-&nbsp;&nbsp;&nbsp;var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uri, &quot;text/vcard&quot;, null, null, &quot;GROUP&quot;);
-
-&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, null);
+   var appControl =
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                uri, "text/vcard", null, null, "GROUP");
+
+   tizen.application.launchAppControl(appControl, null, function()
+      {
+         console.log("launch application control succeed");
+      }, function(e)
+      {
+         console.log("launch application control failed. reason: " + e.message);
+      }, null);
 }
 </pre>
 
 <h3>Selecting a Contact</h3>
 
-<p>To select a specified contact in the user&#39;s contacts, use the <code>http://tizen.org/appcontrol/operation/pick</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
+<p>To select a specified contact in the user's contacts, use the <code>http://tizen.org/appcontrol/operation/pick</code> operation with the <code>application/vnd.tizen.contact</code> MIME type. To specify various contact details, refer to the extras defined below.</p>
 
 <p align="center"><strong>Figure: Selecting a contact</strong></p>
 <p align="center"><img src="../../images/common_appcontrol_contact_select.png" alt="Selecting a contact" /></p>
@@ -950,44 +950,44 @@ function launchViewVcard(uri)
 <pre class="prettyprint">
 function launchContactPick(selectionMode, dataType)
 {
-&nbsp;&nbsp;&nbsp;var appControlReplyCallback =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onsuccess: function(data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; data.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (data[i].key == &quot;http://tizen.org/appcontrol/data/type&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;type: &quot; + data[i].value[0]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (data[i].key == &quot;http://tizen.org/appcontrol/data/selected&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;result: &quot; + data[i].value[0]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onfailure: function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;The launch application control failed&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;var appControlData =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/selection_mode&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[selectionMode]),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/type&quot;, [dataType])];
-
-&nbsp;&nbsp;&nbsp;var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.contact&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, appControlData, &quot;GROUP&quot;);
-
-&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, appControlReplyCallback);
+   var appControlReplyCallback =
+   {
+      onsuccess: function(data)
+      {
+         for (var i = 0; i &lt; data.length; i++)
+         {
+            if (data[i].key == "http://tizen.org/appcontrol/data/type")
+            {
+               console.log("type: " + data[i].value[0]);
+            }
+            else if (data[i].key == "http://tizen.org/appcontrol/data/selected")
+            {
+               console.log("result: " + data[i].value[0]);
+            }
+         }
+      },
+      onfailure: function()
+      {
+         console.log('The launch application control failed');
+      }
+   }
+
+   var appControlData =
+      [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode",
+                                        [selectionMode]),
+       new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/type", [dataType])];
+
+   var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
+                                                 null, "application/vnd.tizen.contact",
+                                                 null, appControlData, "GROUP");
+
+   tizen.application.launchAppControl(appControl, null, function()
+      {
+         console.log("launch application control succeed");
+      }, function(e)
+      {
+         console.log("launch application control failed. reason: " + e.message);
+      }, appControlReplyCallback);
 }
 </pre>
 
@@ -1023,20 +1023,20 @@ function launchContactPick(selectionMode, dataType)
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/type&quot;, [&quot;person&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/id&quot;, [&quot;person_id&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/type", ["person"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["person_id"])];
 
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/share&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.contact&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, appControlData, &quot;GROUP&quot;);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share",
+                                              null, "application/vnd.tizen.contact",
+                                              null, appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Sharing Multiple Contacts</h3>
@@ -1066,21 +1066,21 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/id&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;person_Id1&quot;, &quot;person_Id2&quot;, &quot;person_Id3&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id",
+                                     ["person_Id1", "person_Id2", "person_Id3"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/multi_share&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/vnd.tizen.contact&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, appControlData, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/multi_share",
+                                null, "application/vnd.tizen.contact",
+                                null, appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="email" name="email">Email in Mobile Applications</h2>
@@ -1137,27 +1137,27 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/cc&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;cc@tizen.org&quot;, &quot;cc2@tizen.org&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/bcc&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;bcc@tizen.org&quot;, &quot;bcc2@tizen.org&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/subject&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;test subject&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;line1\nline2&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/cc",
+                                     ["cc@tizen.org", "cc2@tizen.org"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/bcc",
+                                     ["bcc@tizen.org", "bcc2@tizen.org"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/subject",
+                                     ["test subject"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text",
+                                     ["line1\nline2"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/compose&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;mailto:to@tizen.org&quot;, null, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControlData, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/compose",
+                                "mailto:to@tizen.org", null, null,
+                                appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Sharing a Single File Using an Email Message</h3>
@@ -1197,20 +1197,20 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/path&quot;, [&quot;img_path&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/share&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;mailto:&quot;, &quot;image/*&quot;, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControlData, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share",
+                                "mailto:", "image/*", null,
+                                appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Sharing Multiple Items Using an Email Message</h3>
@@ -1248,21 +1248,21 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/path&quot;, [&quot;img_path&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/path&quot;, [&quot;img_path&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/multi_share&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;mailto:&quot;, &quot;image/*&quot;, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControlData, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/multi_share",
+                                "mailto:", "image/*", null,
+                                appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Sharing Text in an Email</h3>
@@ -1306,24 +1306,24 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/path&quot;, [&quot;img_path&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/subject&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;test subject&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;line1\nline2&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/subject",
+                                     ["test subject"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text",
+                                     ["line1\nline2"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/share_text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;mailto:&quot;, null, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControlData, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share_text",
+                                "mailto:", null, null,
+                                appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="file" name="file">File Storage in Mobile Applications</h2>
@@ -1379,20 +1379,20 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/selection_mode&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;single&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode",
+                                     ["single"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, appControlData, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
+                                null, null, null, appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Downloading a File</h3>
@@ -1410,16 +1410,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/download&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;https://img_path&quot;, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/download",
+                                "https://img_path", null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 
@@ -1449,16 +1449,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;geo:50.1,-50.1&quot;, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                "geo:50.1,-50.1", null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Picking a Location from the Map</h3>
@@ -1473,7 +1473,7 @@ tizen.application.launchAppControl(appControl, null, function()
        <p>Show the map at the location of a given keyword (address or POI). For example: <code>geo:0,0?q=Eiffel%20Tower</code></p>
        <p>All strings passed in the <code>geo:</code> URI must be encoded.</p>
        <p>If only <code>geo:</code> is used, it filters out all but map applications in the system, and the location to be shown depends on the application scenario and configuration.</p>
-       
+
 <h4>Extra Input</h4>
        <table>
                <tbody>
@@ -1519,36 +1519,36 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/type&quot;, [&quot;poi&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/type", ["poi"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;geo:0,0?q=Eiffel Tower&quot;, null, null, null, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
+                                "geo:0,0?q=Eiffel Tower", null, null, null,
+                                "GROUP");
 
 var appControlReplyCallback =
 {
-&nbsp;&nbsp;&nbsp;onsuccess: function(data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; data.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;ret: &quot; + data[i].key);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;result: &quot; + data[i].value[0]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onfailure: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;The launch application control failed&#39;);
-&nbsp;&nbsp;&nbsp;}
+   onsuccess: function(data)
+   {
+      for (var i = 0; i &lt; data.length; i++)
+      {
+         console.log("ret: " + data[i].key);
+         console.log("result: " + data[i].value[0]);
+      }
+   },
+   onfailure: function()
+   {
+      console.log('The launch application control failed');
+   }
 }
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, appControlReplyCallback);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, appControlReplyCallback);
 </pre>
 
 <h2 id="message" name="message">Message in Mobile Applications</h2>
@@ -1600,22 +1600,22 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/text&quot;, [&quot;My text&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/subject&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;My subject&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text", ["My text"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/subject",
+                                     ["My subject"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/compose&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;mmsto:1234567890&quot;, null, null, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/compose",
+                                "mmsto:1234567890", null, null, null,
+                                "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Sharing a Single Item Using a Message</h3>
@@ -1656,19 +1656,19 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/path&quot;, [&quot;img_path&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/share&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, appControlData, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share",
+                                null, null, null, appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Sharing Multiple Items Using a Message</h3>
@@ -1706,21 +1706,21 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/path&quot;, [&quot;img_path&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/path&quot;, [&quot;img_path&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/multi_share&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;mmsto:&quot;, null, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControlData, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/multi_share",
+                                "mmsto:", null, null,
+                                appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Sharing Text in a Message</h3>
@@ -1766,23 +1766,23 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;Hello, My name is Tizy.&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/subject&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;My subject&quot;])];
+   [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text",
+                                     ["Hello, My name is Tizy."]),
+    new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/subject",
+                                     ["My subject"])];
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/share_text&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;mmsto:&quot;, null, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appControlData, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share_text",
+                                "mmsto:", null, null,
+                                appControlData, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="multimedia" name="multimedia">Multimedia in Mobile Applications</h2>
@@ -1815,16 +1815,16 @@ tizen.application.launchAppControl(appControl, null, function()
 
 <h4>Example Code</h4>
 <pre class="prettyprint">
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;audio_uri&quot;, null, null, null, null);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                              "audio_uri", null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Viewing an Image File</h3>
@@ -1847,16 +1847,16 @@ tizen.application.launchAppControl(appControl, null, function()
 
 <h4>Example Code</h4>
 <pre class="prettyprint">
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/view&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;image_uri&quot;, null, null, null, null);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
+                                              "image_uri", null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 
@@ -1912,16 +1912,16 @@ tizen.application.launchAppControl(appControl, null, function()
        </table>
 <h4>Example Code</h4>
 <pre class="prettyprint">
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/pick&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;MIME_Type&quot;, null, null, &quot;GROUP&quot;);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
+                                              null, "MIME_Type", null, null, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="settings_main" name="settings_main">System Settings in Mobile Applications</h2>
@@ -1937,16 +1937,16 @@ tizen.application.launchAppControl(appControl, null, function()
 
 <h4>Example Code</h4>
 <pre class="prettyprint">
-var appControl = new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/setting&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, null, null);
+var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting",
+                                              null, null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="settings_bluetooth" name="settings_bluetooth">Settings for Bluetooth in Mobile Applications</h2>
@@ -1965,16 +1965,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/setting/bt_enable&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/bt_enable",
+                                null, null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h3>Showing Bluetooth Settings to Configure Visibility</h3>
@@ -1991,16 +1991,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/setting/bt_visibility&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/bt_visibility",
+                                null, null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="settings_location" name="settings_location">Settings for Location in Mobile Applications</h2>
@@ -2019,16 +2019,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/setting/location&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/location",
+                                null, null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="settings_nfc" name="settings_nfc">Settings for NFC in Mobile Applications</h2>
@@ -2066,16 +2066,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/setting/nfc&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/nfc",
+                                null, null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="settings_wifi" name="settings_wifi">Settings for Wi-Fi in Mobile Applications</h2>
@@ -2093,16 +2093,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/setting/wifi&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/wifi",
+                                null, null, null, null, null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="voice" name="voice">Voice Recorder in Mobile Applications</h2>
@@ -2149,16 +2149,16 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/create_content&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;audio/m4a&quot;, null, null, &quot;GROUP&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
+                                null, "audio/m4a", null, null, "GROUP");
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <h2 id="inputdelegator" name="inputdelegator">Input Delegator in Wearable Applications</h2>
@@ -2207,11 +2207,11 @@ tizen.application.launchAppControl(appControl, null, function()
                        </tr>
                        <tr>
                                <td><code>http://tizen.org/appcontrol/data/input_default_text</code></td>
-                               <td>The preformatted text to be used as default input, such as &quot;http://&quot; for Web addresses. This key must be passed as a string.</td>
+                               <td>The preformatted text to be used as default input, such as "http://" for Web addresses. This key must be passed as a string.</td>
                        </tr>
                       <tr>
                                <td><code>http://tizen.org/appcontrol/data/input_default_text</code></td>
-                               <td>The guide text, such as &quot;Input user name&quot;. This key must be passed as a string.</td>
+                               <td>The guide text, such as "Input user name". This key must be passed as a string.</td>
                       </tr>
                        <tr>
                                <td><code>http://tizen.org/appcontrol/data/input_guide_text</code></td>
@@ -2236,21 +2236,21 @@ tizen.application.launchAppControl(appControl, null, function()
 <h4>Example Code</h4>
 <pre class="prettyprint">
 var appControlData =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControlData(&quot;http://tizen.org/appcontrol/data/input_type&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;input_voice&quot;]);
+   new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/input_type",
+                                    ["input_voice"]);
 
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/get_input&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;text/plain&quot;, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[appControlData], null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/get_input",
+                                null, "text/plain", null,
+                                [appControlData], null);
 
 tizen.application.launchAppControl(appControl, null, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control succeed&quot;);
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;launch application control failed. reason: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;}, null);
+   {
+      console.log("launch application control succeed");
+   }, function(e)
+   {
+      console.log("launch application control failed. reason: " + e.message);
+   }, null);
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/app_management/data_w.htm b/org.tizen.guides/html/web/app_management/data_w.htm
index d5c463f..5b96545 100644 (file)
--- a/org.tizen.guides/html/web/app_management/data_w.htm
+++ b/org.tizen.guides/html/web/app_management/data_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
   <title>Data Control</title>
- </head> 
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
  <div id="toc-navigation">
@@ -57,26 +57,26 @@
   </ul>
 
  <h2 id="prerequisites">Prerequisites</h2>
- 
+
 <p>To use the Data Control API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/datacontrol.consumer&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/datacontrol.consumer"/&gt;
 </pre>
 
 
                                <h2 id="map" name="map">Managing Data in Key-value Pairs</h2>
-                               
+
   <p>Learning how to manage map-type data allows you to use key-value pairs exposed by a DataControl provider:</p>
   <ol>
    <li><p>Retrieve the <code>MappedDataControlConsumer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#MappedDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#MappedDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#MappedDataControlConsumer">TV</a> applications) using the <code>getDataControlConsumer()</code> method of the <code>DataControlManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#DataControlManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#DataControlManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#DataControlManager">TV</a> applications). This object allows accessing the key-value data stored by the DataControl provider.</p>
-   <p>You need a running DataControl provider application, which uses the <code>&quot;http://tizen.org/datacontrol/provider/DictionaryDataControlProvider&quot;</code> provider ID.</p>
+   <p>You need a running DataControl provider application, which uses the <code>"http://tizen.org/datacontrol/provider/DictionaryDataControlProvider"</code> provider ID.</p>
 <pre class="prettyprint">
 /* Get the map-type DataControlConsumerObject */
 try
 {
-&nbsp;&nbsp;&nbsp;var globalMappedConsumer =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.datacontrol.getDataControlConsumer(&quot;http://tizen.org/datacontrol/provider/DictionaryDataControlProvider&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Dictionary&quot;, &quot;MAP&quot;);
+   var globalMappedConsumer =
+      tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider",
+                                               "Dictionary", "MAP");
 }
 </pre></li>
    <li><p>To meet the API requirement of using unique request identifiers, define a global variable, which is incremented every time a new request ID is needed. When the Data Control API responds to a request, it provides the request ID, which allows connecting the response with the specific request.</p>
@@ -87,12 +87,12 @@ var globalReqId = new Date().getTime() % 2e9;
 <pre class="prettyprint">
 function onRequestSuccess(id)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Request &quot; + id + &quot; - done&quot;);
+   console.log("Request " + id + " - done");
 }
 
 function onRequestError(id, error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;error in request &quot; + id + &quot;, message: &quot; + error.message);
+   console.log("error in request " + id + ", message: " + error.message);
 }
 </pre></li>
 <li>To manage key-value pairs:
@@ -101,59 +101,59 @@ function onRequestError(id, error)
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;/* Increase globalReqId for uniqueness */
-&nbsp;&nbsp;&nbsp;globalReqId++;
-&nbsp;&nbsp;&nbsp;globalMappedConsumer.addValue(globalReqId, &quot;tizen&quot;, &quot;Foo&quot;, onRequestSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onRequestError);
+   /* Increase globalReqId for uniqueness */
+   globalReqId++;
+   globalMappedConsumer.addValue(globalReqId, "tizen", "Foo", onRequestSuccess,
+                                 onRequestError);
 }
 </pre></li>
    <li><p>To retrieve values assigned to a key, use the <code>getValue()</code> method of the <code>MappedDataControlConsumer</code>:</p>
 <pre class="prettyprint">
 function onGetValueSuccess(values, id)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Values retrieved in request &quot; + id + &quot;: &quot; + values.toString());
+   console.log("Values retrieved in request " + id + ": " + values.toString());
 }
 
 try
 {
-&nbsp;&nbsp;&nbsp;globalReqId++;
-&nbsp;&nbsp;&nbsp;globalMappedConsumer.getValue(globalReqId, &quot;tizen&quot;, onGetValueSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onRequestError);
+   globalReqId++;
+   globalMappedConsumer.getValue(globalReqId, "tizen", onGetValueSuccess,
+                                 onRequestError);
 }
 </pre></li>
    <li><p>To update a value assigned to a key, use the <code>updateValue()</code> method of the <code>MappedDataControlConsumer</code> interface:</p>
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;globalReqId++;
-&nbsp;&nbsp;&nbsp;globalMappedConsumer.updateValue(globalReqId, &quot;tizen&quot;, &quot;Foo&quot;, &quot;Bar&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onRequestSuccess, onRequestError);
+   globalReqId++;
+   globalMappedConsumer.updateValue(globalReqId, "tizen", "Foo", "Bar",
+                                    onRequestSuccess, onRequestError);
 }
 </pre></li>
    <li><p>To remove a key-value pair, use the <code>removeValue()</code> method of the <code>MappedDataControlConsumer</code> interface:</p>
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;globalReqId++;
-&nbsp;&nbsp;&nbsp;globalMappedConsumer.removeValue(globalReqId, &quot;tizen&quot;, &quot;Bar&quot;, onRequestSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onRequestError);
+   globalReqId++;
+   globalMappedConsumer.removeValue(globalReqId, "tizen", "Bar", onRequestSuccess,
+                                    onRequestError);
 }
 </pre></li></ul></li>
   </ol>
-               
+
                                <h2 id="sql" name="sql">Managing SQL-type Data</h2>
-                               
+
   <p>Learning how to manage SQL-type data allows you to use databases exposed by a DataControl provider:</p>
   <ol>
    <li><p>To retrieve a <code>SQLDataControlConsumer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#SQLDataControlConsumer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#SQLDataControlConsumer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#SQLDataControlConsumer">TV</a> applications), use the <code>getDataControlConsumer()</code> method of the <code>DataControlManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html#DataControlManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/datacontrol.html#DataControlManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/datacontrol.html#DataControlManager">TV</a> applications). This object allows accessing the data stored by the DataControl provider.</p>
-   <p>You need a running DataControl provider application, which uses the <code>&quot;http://tizen.org/datacontrol/provider/DictionaryDataControlProvider&quot;</code> provider ID.</p>
+   <p>You need a running DataControl provider application, which uses the <code>"http://tizen.org/datacontrol/provider/DictionaryDataControlProvider"</code> provider ID.</p>
 <pre class="prettyprint">
 /* Get SQL type DataControlConsumerObject */
 try
 {
-&nbsp;&nbsp;&nbsp;var globalSQLConsumer =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.datacontrol.getDataControlConsumer(&quot;http://tizen.org/datacontrol/provider/DictionaryDataControlProvider&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Dictionary&quot;, &quot;SQL&quot;);
+   var globalSQLConsumer =
+      tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider",
+                                               "Dictionary", "SQL");
 }
 </pre></li>
    <li><p>To meet the API requirement of using unique request identifiers, define a global variable, which is incremented every time new request ID is needed. When the Data Control API responds to a request, it provides the request ID, which allows connecting the response with the specific request.</p>
@@ -164,12 +164,12 @@ var globalReqId = new Date().getTime() % 2e9;
 <pre class="prettyprint">
 function onRequestSuccess(id)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Request &quot; + id + &quot; - done&quot;);
+   console.log("Request " + id + " - done");
 }
 
 function onRequestError(id, error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;error in request &quot; + id + &quot;, message: &quot; + error.message);
+   console.log("error in request " + id + ", message: " + error.message);
 }
 </pre></li>
 
@@ -179,70 +179,70 @@ function onRequestError(id, error)
 <pre class="prettyprint">
 function onInsertSuccess(reqId, rowId)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;request: &quot; + reqId + &quot; succeed - inserted row id:&quot; + rowId);
+   console.log("request: " + reqId + " succeed - inserted row id:" + rowId);
 }
 
 try
 {
-&nbsp;&nbsp;&nbsp;var rowData =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;columns: [&quot;WORD&quot;, &quot;WORD_DESC&quot;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;values: [&quot;&#39;tizen1&#39;&quot;, &quot;&#39;tizen2&#39;&quot;]
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;/* Increases globalReqId for uniqueness */
-&nbsp;&nbsp;&nbsp;globalReqId++;
-&nbsp;&nbsp;&nbsp;globalSQLConsumer.insert(globalReqId, rowData, onInsertSuccess, onRequestError);
+   var rowData =
+   {
+      columns: ["WORD", "WORD_DESC"],
+      values: ["'tizen1'", "'tizen2'"]
+   };
+   /* Increases globalReqId for uniqueness */
+   globalReqId++;
+   globalSQLConsumer.insert(globalReqId, rowData, onInsertSuccess, onRequestError);
 }
 </pre></li>
    <li><p>To select data, use the <code>select()</code> method of the <code>SQLDataControlConsumer</code> interface:</p>
 <pre class="prettyprint">
 function onSelectSuccess(result, id)
 {
-&nbsp;&nbsp;&nbsp;var length = result.length, i, j;
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;==== Row &quot;, i, &quot;:&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (j = 0; j &lt; result[i].columns.length; j++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;column: &quot; + result[i].columns[j]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;, value: &quot; + result[i].values[j]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   var length = result.length, i, j;
+   for (i = 0; i &lt; length; i++)
+   {
+      console.log("==== Row ", i, ":");
+      for (j = 0; j &lt; result[i].columns.length; j++)
+      {
+         console.log("column: " + result[i].columns[j]
+                     + ", value: " + result[i].values[j]);
+      }
+   }
 }
 
 try
 {
-&nbsp;&nbsp;&nbsp;var columns = [&quot;WORD&quot;, &quot;WORD_DESC&quot;];
-&nbsp;&nbsp;&nbsp;var order = &quot;WORD ASC&quot;;
-&nbsp;&nbsp;&nbsp;var page = null;
-&nbsp;&nbsp;&nbsp;var maxNumberPerPage = null;
+   var columns = ["WORD", "WORD_DESC"];
+   var order = "WORD ASC";
+   var page = null;
+   var maxNumberPerPage = null;
 
-&nbsp;&nbsp;&nbsp;globalReqId++;
-&nbsp;&nbsp;&nbsp;globalSQLConsumer.select(globalReqId, columns, &quot;WORD=&#39;tizen1&#39;&quot;, onSelectSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onRequestError, page, maxNumberPerPage, order);
+   globalReqId++;
+   globalSQLConsumer.select(globalReqId, columns, "WORD='tizen1'", onSelectSuccess,
+                            onRequestError, page, maxNumberPerPage, order);
 }
 </pre></li>
    <li><p>To update data, use the <code>update()</code> method of the <code>SQLDataControlConsumer</code> interface:</p>
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;var rowData =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;columns: [&quot;WORD&quot;, &quot;WORD_DESC&quot;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;values: [&quot;&#39;tizen1&#39;&quot;, &quot;&#39;Web apps platform!&#39;&quot;]
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;globalReqId++;
-&nbsp;&nbsp;&nbsp;globalSQLConsumer.update(globalReqId, rowData, &quot;WORD=&#39;tizen1&#39;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onRequestSuccess, onRequestError);
+   var rowData =
+   {
+      columns: ["WORD", "WORD_DESC"],
+      values: ["'tizen1'", "'Web apps platform!'"]
+   };
+   globalReqId++;
+   globalSQLConsumer.update(globalReqId, rowData, "WORD='tizen1'",
+                            onRequestSuccess, onRequestError);
 }
 </pre></li>
    <li><p>To remove data, use the <code>remove()</code> method of the <code>SQLDataControlConsumer</code> interface:</p>
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;globalReqId++;
-&nbsp;&nbsp;&nbsp;globalSQLConsumer.remove(globalReqId, &quot;WORD=&#39;tizen1&#39;&quot;, onRequestSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onRequestError);
+   globalReqId++;
+   globalSQLConsumer.remove(globalReqId, "WORD='tizen1'", onRequestSuccess,
+                            onRequestError);
 }
 </pre> </li></ul></li>
   </ol>
diff --git a/org.tizen.guides/html/web/app_management/message_port_w.htm b/org.tizen.guides/html/web/app_management/message_port_w.htm
index 7f714b3..1d05efb 100644 (file)
--- a/org.tizen.guides/html/web/app_management/message_port_w.htm
+++ b/org.tizen.guides/html/web/app_management/message_port_w.htm
@@ -33,18 +33,18 @@
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html">Message Port API for Mobile Web</a></li>
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html">Message Port API for Wearable Web</a></li> 
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html">Message Port API for TV Web</a></li>                     
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html">Message Port API for Wearable Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html">Message Port API for TV Web</a></li>
         </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Message Port</h1>
- 
+
   <p>Tizen Web applications can communicate with other Web or native applications. The message data type for the communication is map data, which consists of a string key and value that can be a string, string array, byte stream, or byte stream array.</p>
-  
-<p>The Message Port API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
+
+<p>The Message Port API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 
 <p>The main features of the Message Port API include:</p>
 <ul>
@@ -75,67 +75,67 @@
 <p>You can retrieve the instances of the <code>LocalMessagePort</code> and <code>RemoteMessagePort</code> interfaces with the <code>requestLocalMessagePort()</code> and <code>requestRemoteMessagePort()</code> methods of the <code>tizen.messageport</code> object.</p>
 
   <p>Learning how to send messages to and receive responses from other Tizen applications through message ports is a basic data communication skill:</p>
-  <ol> 
+  <ol>
 <li><p>To create a local port which receives messages, use the <code>requestLocalMessagePort()</code> method of the <code>LocalMessagePort</code> interface:</p>
 <pre class="prettyprint">
-var localPort = tizen.messageport.requestLocalMessagePort(&quot;SAMPLE_PORT&quot;);
+var localPort = tizen.messageport.requestLocalMessagePort("SAMPLE_PORT");
 </pre></li>
 <li><p>To retrieve an instance of the <code>RemoteMessagePort</code> interface, use the <code>requestRemoteMessagePort()</code> method of the <code>tizen.messageport</code> object. The <code>RemoteMessagePort</code> interface sends messages to the port identified by an <code>ApplicationId</code> and a port name.</p>
 <pre class="prettyprint">
 var targetApplicationId = tizen.application.getCurrentApplication().appInfo.id;
 var remotePort = tizen.messageport.requestRemoteMessagePort(targetApplicationId,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SAMPLE_PORT&quot;);
+                                                            "SAMPLE_PORT");
 </pre></li>
 <li><p>Use the <code>addMessagePortListener()</code> method of the <code>LocalMessagePort</code> interface to add a callback method that is invoked when the message arrives:</p>
 <pre class="prettyprint">
 var localPortWatchId = localPort.addMessagePortListener(function(data, replyPort)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; data.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var key = data[i].key;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (key)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case &quot;command&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;key:&quot; + key + &quot; / value:&quot; + data[i].value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case &quot;data&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case &quot;byteData&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;key:&quot; + key + &quot; / value:[&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var j = 0; j &lt; data[i].value.length; j++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data[i].value[j] + &quot;, &quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;]&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case &quot;bytesData&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;key:&quot; + key + &quot; / value:[&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var j = 0; j &lt; data[i].value.length; j++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;[&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var k = 0; k &lt; data[i].value.length; k++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data[i].value[j] + &quot;, &quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;]&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;]&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;if (replyPort)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;replyPort given: &quot; + replyPort.messagePortName);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; data.length; i++)
+   {
+      var key = data[i].key;
+      switch (key)
+      {
+         case "command":
+            console.log("key:" + key + " / value:" + data[i].value);
+            break;
+         case "data":
+         case "byteData":
+            console.log("key:" + key + " / value:[");
+            for (var j = 0; j &lt; data[i].value.length; j++)
+            {
+               console.log(data[i].value[j] + ", ")
+            }
+            console.log("]");
+            break;
+         case "bytesData":
+            console.log("key:" + key + " / value:[");
+            for (var j = 0; j &lt; data[i].value.length; j++)
+            {
+               console.log("[");
+               for (var k = 0; k &lt; data[i].value.length; k++)
+               {
+                  console.log(data[i].value[j] + ", ")
+               }
+               console.log("]");
+            }
+            console.log("]");
+            break;
+      }
+   }
+   if (replyPort)
+   {
+      console.log("replyPort given: " + replyPort.messagePortName);
+   }
 });
 </pre></li>
 <li><p>Use the <code>sendMessage()</code> method of the <code>RemoteMessagePort</code> interface to send a message:</p>
 <pre class="prettyprint">
 var messageData =
 [
-&nbsp;&nbsp;&nbsp;{key:&quot;command&quot;, value:&quot;begin&quot;},
-&nbsp;&nbsp;&nbsp;{key:&quot;data&quot;, value:{&quot;dummy1&quot;, &quot;dummy2&quot;}},
-&nbsp;&nbsp;&nbsp;{key:&quot;byteData&quot;, value:[12, 23, 34, 45, 56, 67, 78]},
-&nbsp;&nbsp;&nbsp;{key:&quot;bytesData&quot;, value:[[1, 2, 3, 255], [8, 9, 3, 4, 5]]}
+   {key:"command", value:"begin"},
+   {key:"data", value:{"dummy1", "dummy2"}},
+   {key:"byteData", value:[12, 23, 34, 45, 56, 67, 78]},
+   {key:"bytesData", value:[[1, 2, 3, 255], [8, 9, 3, 4, 5]]}
 ];
 remotePort.sendMessage(messageData);
 </pre>
diff --git a/org.tizen.guides/html/web/app_management/packages_w.htm b/org.tizen.guides/html/web/app_management/packages_w.htm
index 783b464..f75c341 100644 (file)
--- a/org.tizen.guides/html/web/app_management/packages_w.htm
+++ b/org.tizen.guides/html/web/app_management/packages_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -43,18 +43,18 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Package Information</h1> 
+<h1>Package Information</h1>
 <p>Package information features include retrieving detailed information about packages, such as package name, icon path, version details, and package ID. You can receive notifications if packages are updated or removed, or new packages are installed. You can also perform package management tasks, such as installing or uninstalling packages.</p>
 
 <p>The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 
   <p>The main package information features are:</p>
   <ul>
-   <li>Package management 
+   <li>Package management
    <p>You can <a href="#manage">install or uninstall packages</a>.</p></li>
    <li>Package information retrieval
    <p>You can display a list of installed packages on the device, and <a href="#retrieve">retrieve package information</a>, such as name, ID, icon path, and version.</p></li>
-   <li>Package change notifications 
+   <li>Package change notifications
    <p>You can <a href="#receive">receive notifications</a> when packages are installed, updated, or uninstalled.</p></li>
   </ul>
 
@@ -62,15 +62,15 @@
 
 <p>To use the Package API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/package.info&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/packagemanager.install&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/package.info"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/packagemanager.install"/&gt;
 </pre>
 
 <h2 id="retrieve" name="retrieve">Retrieving Package Information</h2>
 <p>You can retrieve information about packages in various ways:</p>
     <ul>
-     <li>Retrieve information about installed packages using the <code>getPackageInfo()</code> and <code>getPackagesInfo()</code> methods of the <code>PackageManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageManager">TV</a> applications).</li> 
-     <li>Use the <code>PackageInformation</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageInformation">TV</a> applications) to retrieve information about installed packages, such as name, icon path, and version.</li> 
+     <li>Retrieve information about installed packages using the <code>getPackageInfo()</code> and <code>getPackagesInfo()</code> methods of the <code>PackageManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageManager">TV</a> applications).</li>
+     <li>Use the <code>PackageInformation</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/package.html#PackageInformation">TV</a> applications) to retrieve information about installed packages, such as name, icon path, and version.</li>
     </ul>
                 <p>Learning how to retrieve information about installed packages allows you to manage device packages from your application:</p>
   <ol>
@@ -78,7 +78,7 @@
 <pre class="prettyprint lang-js">
 function onListInstalledPackages(lists)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The number of installed package is &quot; + lists.length);
+   console.log("The number of installed package is " + lists.length);
 }
 
 tizen.package.getPackagesInfo(onListInstalledPackages);
@@ -86,7 +86,7 @@ tizen.package.getPackagesInfo(onListInstalledPackages);
 <p>The list of installed packages is returned to the <code>PackageInformationArraySuccessCallback()</code> methods as an array of <code>PackageInformation</code> objects.</p></li>
    <li><p>To retrieve basic package information, use the <code>getPackageInfo()</code> method of the <code>PackageManager</code> interface, specifying the package ID. If no package ID is set, the method retrieves information of the application package calling the method.</p>
 <pre class="prettyprint lang-js">
-var packageInfo = tizen.package.getPackageInfo(&quot;org.tizen.calculator&quot;);
+var packageInfo = tizen.package.getPackageInfo("org.tizen.calculator");
 </pre></li>
   </ol>
 
@@ -98,36 +98,36 @@ var packageInfo = tizen.package.getPackageInfo(&quot;org.tizen.calculator&quot;)
 <pre class="prettyprint lang-js">
 var onInstallation =
 {
-&nbsp;&nbsp;&nbsp;onprogress: function(packageId, percentage)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;On installation(&quot; + packageId + &quot;): progress(&quot; + percentage + &quot;)&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;oncomplete: function(packageId)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Installation(&quot; + packageId + &quot;) Complete&quot;);
-&nbsp;&nbsp;&nbsp;}
+   onprogress: function(packageId, percentage)
+   {
+      console.log("On installation(" + packageId + "): progress(" + percentage + ")");
+   },
+   oncomplete: function(packageId)
+   {
+      console.log("Installation(" + packageId + ") Complete");
+   }
 };
 
-tizen.filesystem.resolve(&quot;downloads/test.wgt&quot;, function(packageFile)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.package.install(packageFile.toURI(), onInstallation);
-&nbsp;&nbsp;&nbsp;});
+tizen.filesystem.resolve("downloads/test.wgt", function(packageFile)
+   {
+      tizen.package.install(packageFile.toURI(), onInstallation);
+   });
 </pre></li>
    <li><p>To uninstall a package, use the <code>uninstall()</code> method of the <code>PackageManager</code> interface, specifying the package ID. You can retrieve the uninstallation progress using the <code>PackageProgressCallback</code> interface.</p>
 <pre class="prettyprint lang-js">
 var onUninstallation =
 {
-&nbsp;&nbsp;&nbsp;onprogress: function(packageId, percentage)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;On uninstallation(&quot; + packageId + &quot;): progress(&quot; + percentage + &quot;)&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;oncomplete: function(packageId)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Uninstallation(&quot; + packageId + &quot;) Complete&quot;);
-&nbsp;&nbsp;&nbsp;}
+   onprogress: function(packageId, percentage)
+   {
+      console.log("On uninstallation(" + packageId + "): progress(" + percentage + ")");
+   },
+   oncomplete: function(packageId)
+   {
+      console.log("Uninstallation(" + packageId + ") Complete");
+   }
 };
 
-tizen.package.uninstall(&quot;TEST_APP_ID&quot;, onUninstallation);
+tizen.package.uninstall("TEST_APP_ID", onUninstallation);
 </pre></li>
   </ol>
 
@@ -139,18 +139,18 @@ tizen.package.uninstall(&quot;TEST_APP_ID&quot;, onUninstallation);
 <pre class="prettyprint">
 var packageEventCallback =
 {
-&nbsp;&nbsp;&nbsp;oninstalled: function(packageInfo)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The package &quot; + packageInfo.name + &quot; is installed&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onupdated: function(packageInfo)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The package &quot; + packageInfo.name + &quot; is updated&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onuninstalled: function(packageId)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The package &quot; + packageId + &quot; is uninstalled&quot;);
-&nbsp;&nbsp;&nbsp;}
+   oninstalled: function(packageInfo)
+   {
+      console.log("The package " + packageInfo.name + " is installed");
+   },
+   onupdated: function(packageInfo)
+   {
+      console.log("The package " + packageInfo.name + " is updated");
+   },
+   onuninstalled: function(packageId)
+   {
+      console.log("The package " + packageId + " is uninstalled");
+   }
 };
 </pre></li>
    <li><p>Register the listener to use the defined event handlers with the <code>setPackageInfoEventListener()</code> method of the <code>PackageManager</code> interface:</p>
diff --git a/org.tizen.guides/html/web/app_management/preference_w.htm b/org.tizen.guides/html/web/app_management/preference_w.htm
index d1194b6..fcd7443 100644 (file)
--- a/org.tizen.guides/html/web/app_management/preference_w.htm
+++ b/org.tizen.guides/html/web/app_management/preference_w.htm
@@ -5,12 +5,12 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Application Preferences</title> 
+  <title>Application Preferences</title>
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -67,25 +67,25 @@
 <p>You can <a href="#remove">remove a preference</a> with the <code>remove()</code> and <code>removeAll()</code> functions. The first removes only 1 preference while the second removes them all.</p>
 </li>
 <li>Monitoring preference value changes
-<p>You can provide a listener method which is called every time a given preference&#39;s value changes. <a href="#set_change_listener">Register the listener</a> with the <code>setChangeListener()</code> method. The provided listener is called with a preference key and its new value. If you want to remove the listener, use the <code>unsetChangeListener()</code> method.</p>
+<p>You can provide a listener method which is called every time a given preference's value changes. <a href="#set_change_listener">Register the listener</a> with the <code>setChangeListener()</code> method. The provided listener is called with a preference key and its new value. If you want to remove the listener, use the <code>unsetChangeListener()</code> method.</p>
 </li>
 </ul>
 
   <h2 id="set_value" name="set_value">Setting up a Preference</h2>
   <p>To create a preference with a given key or to change a value of an existing one, use the <code>setValue()</code> method:</p>
 <pre class="prettyprint">
-tizen.preference.setValue(&quot;key1&quot;, &quot;New value&quot;);
+tizen.preference.setValue("key1", "New value");
 </pre>
   <p>If the preference with the given key does not exist, it is created with the given value.  If the preference exists, only its new value is assigned.</p>
 
   <h2 id="get_value" name="get_value">Getting Preference Values</h2>
- 
+
   <p>To retrieve preference values:</p>
   <ul>
   <li>To get the value of a preference with a given key, use the <code>getValue()</code> method:
 <pre class="prettyprint">
-var currentValue = tizen.preference.getValue(&quot;key1&quot;);
-console.log(&quot;The current value of the preference key1 is: &quot; + currentValue);
+var currentValue = tizen.preference.getValue("key1");
+console.log("The current value of the preference key1 is: " + currentValue);
 </pre>
   <p>The value returned by the method can be a string, number, or boolean. If the preference with the given key does not exist, an exception is thrown.</p>
   </li>
@@ -93,12 +93,12 @@ console.log(&quot;The current value of the preference key1 is: &quot; + currentV
 <pre class="prettyprint">
 var successCB = function(preferences)
 {
-&nbsp;&nbsp;&nbsp;var i;
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; preferences.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The preference - key: &quot; + preferences[i].key
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; value: &quot; + preferences[i].value);
-&nbsp;&nbsp;&nbsp;}
+   var i;
+   for (i = 0; i &lt; preferences.length; i++)
+   {
+      console.log("The preference - key: " + preferences[i].key
+                  + " value: " + preferences[i].value);
+   }
 };
 
 tizen.preference.getAll(successCB);
@@ -108,13 +108,13 @@ tizen.preference.getAll(successCB);
   <h2 id="exists" name="exists">Checking Whether a Preference Exists</h2>
   <p>To determine whether a preference with a given key exists, use the <code>exists()</code> method:</p>
 <pre class="prettyprint">
-if (tizen.preference.exists(&quot;key1&quot;))
+if (tizen.preference.exists("key1"))
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Preference with the key key1 exists&quot;);
+   console.log("Preference with the key key1 exists");
 }
 else
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Preference with the key key1 doesn&#39;t exist&quot;);
+   console.log("Preference with the key key1 doesn't exist");
 }
 </pre>
   <p>The method returns <code>true</code> if the preference exists and <code>false</code> if it does not.</p>
@@ -124,7 +124,7 @@ else
   <ul>
   <li>To remove a single preference with the given key, use the <code>remove()</code> method:
 <pre class="prettyprint">
-tizen.preference.remove(&quot;key1&quot;);
+tizen.preference.remove("key1");
 </pre>
   <p>If the preference with the given key does not exist, an exception is thrown.</p>
 </li>
@@ -143,11 +143,11 @@ tizen.preference.removeAll();
 <pre class="prettyprint">
 var listener = function(data)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Preference with the key: &quot; + data.key
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; has a new value: &quot; + data.value);
+   console.log("Preference with the key: " + data.key
+               + " has a new value: " + data.value);
 };
 
-tizen.preference.setChangeListener(&quot;key1&quot;, listener);
+tizen.preference.setChangeListener("key1", listener);
 </pre>
      <p>The listener callback is called every time the value of the given preference changes. The callback parameter is an object that consists of the <code>key</code> and <code>value</code> fields.</p>
     </li>
@@ -157,10 +157,10 @@ tizen.preference.setChangeListener(&quot;key1&quot;, listener);
 <pre class="prettyprint">
 var listener = function(data)
 {
-&nbsp;&nbsp;&nbsp;tizen.preference.unsetChangeListener(data.key);
+   tizen.preference.unsetChangeListener(data.key);
 };
 
-tizen.preference.setChangeListener(&quot;key1&quot;, listener);
+tizen.preference.setChangeListener("key1", listener);
 </pre>
     </li>
   </ul>
@@ -187,4 +187,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
+</html>
diff --git a/org.tizen.guides/html/web/app_management/service_app_w.htm b/org.tizen.guides/html/web/app_management/service_app_w.htm
index 8650a9f..7e871bc 100644 (file)
--- a/org.tizen.guides/html/web/app_management/service_app_w.htm
+++ b/org.tizen.guides/html/web/app_management/service_app_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -39,7 +39,7 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Hybrid/Hybrid_Web_App_1" target="_blank">Hybrid Web App (Wearable) Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
   <h1>Service Application</h1>
@@ -79,19 +79,19 @@
 <li>To make your application visible only for devices that support the Web Service Application, the application must specify the following feature in the <code>config.xml</code> file:
 <pre class="prettyprint">
 &lt;widget&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:feature name=&quot;http://tizen.org/feature/web.service&quot;/&gt;
+   &lt;tizen:feature name="http://tizen.org/feature/web.service"/&gt;
 &lt;/widget&gt;
 </pre>
 </li>
 <li>To ensure that a service application is acknowledged by the platform, you must add a service application extension element (<code>&lt;tizen:service&gt;</code>) to the <code>config.xml</code> file of the application:
 <pre class="prettyprint">
 &lt;widget&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:service id=&quot;[App_ID]&quot; auto-restart=&quot;true&quot; on-boot=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:content src=&quot;[Start_JS_File]&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:name&gt;[App_Name]&lt;/tizen:name&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:icon src=&quot;[App_Icon]&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:description&gt;[Description]&lt;/tizen:description&gt;
-&nbsp;&nbsp;&nbsp;&lt;/tizen:service&gt;
+   &lt;tizen:service id="[App_ID]" auto-restart="true" on-boot="true"&gt;
+      &lt;tizen:content src="[Start_JS_File]"/&gt;
+      &lt;tizen:name&gt;[App_Name]&lt;/tizen:name&gt;
+      &lt;tizen:icon src="[App_Icon]"/&gt;
+      &lt;tizen:description&gt;[Description]&lt;/tizen:description&gt;
+   &lt;/tizen:service&gt;
 &lt;/widget&gt;
 </pre>
 
@@ -100,7 +100,7 @@
 </li>
 <li>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API, the application has to request permission by adding the following privilege to the <code>config.xml</code> file:
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
 </pre>
 </li>
 </ol>
@@ -113,15 +113,15 @@
 <h2 id="create" name="create">Managing the Service Application Life-cycle</h2>
 
 <p>To run a service application, you must export a number of callbacks using the <a href="http://wiki.commonjs.org/wiki/Modules/1.1" target="_blank">CommonJS Modules</a> API. The callbacks need to be added to the <code>module.exports</code> object, which is provided by the environment. The following callbacks are called when there are life-cycle changes or application control events which are triggered by the application management framework:</p>
- 
+
 <ul>
 <li><code>onStart()</code>: The entry point of the service. It is called after the service runtime finishes the set-up.</li>
 <li><code>onRequest()</code>: The listener for application control callbacks. It is provided to handle requests from other applications. You can understand the intention of the request and reply to it using the <code>tizen.application.getCurrentApplication().getRequestedAppControl()</code> method. This callback is also called when the application is first launched as an application launch is considered to be a request as well.</li>
 <li><code>onExit()</code>: This is called when the <a href="#terminate">service ends</a>. You can release resources or save the context by using this callback.</li></ul>
 
-<p align="center"><strong>Figure: State transitions</strong></p> 
+<p align="center"><strong>Figure: State transitions</strong></p>
 <p align="center"><img alt="State transitions" src="../../images/service_app.png" /></p>
-                               
+
  <p>Learning how to manage service application callbacks is a basic application management skill:</p>
 
 <ol><li>Create the service entry point with the <code>onStart()</code> callback.
@@ -129,25 +129,25 @@
 <pre class="prettyprint">
 module.exports.onStart = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;service start&quot;);
-
-&nbsp;&nbsp;&nbsp;var remoteMsgPort =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.messageport.requestRemoteMessagePort(&quot;websvcapp0.WebServiceApplication&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SERVICE_SAMPLE1&quot;);
-&nbsp;&nbsp;&nbsp;var localMsgPort = tizen.messageport.requestLocalMessagePort(&quot;SERVICE_SAMPLE2&quot;);
-
-&nbsp;&nbsp;&nbsp;function onreceived(data, remoteMsgPort)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; data.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (data[i].value == &quot;SERVICE_EXIT&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localMsgPort.removeMessagePortListener(watchId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;var watchId = localMsgPort.addMessagePortListener(onreceived);
+   console.log("service start");
+
+   var remoteMsgPort =
+      tizen.messageport.requestRemoteMessagePort("websvcapp0.WebServiceApplication",
+                                                 "SERVICE_SAMPLE1");
+   var localMsgPort = tizen.messageport.requestLocalMessagePort("SERVICE_SAMPLE2");
+
+   function onreceived(data, remoteMsgPort)
+   {
+      for (var i = 0; i &lt; data.length; i++)
+      {
+         if (data[i].value == "SERVICE_EXIT")
+         {
+            localMsgPort.removeMessagePortListener(watchId);
+            tizen.application.getCurrentApplication().exit();
+         }
+      }
+   }
+   var watchId = localMsgPort.addMessagePortListener(onreceived);
 }
 </pre></li>
 
@@ -156,20 +156,20 @@ module.exports.onStart = function()
 <pre class="prettyprint">
 module.exports.onRequest = function()
 {
-&nbsp;&nbsp;&nbsp;var reqAppControl =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().getRequestedAppControl();
-&nbsp;&nbsp;&nbsp;if (reqAppControl)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (reqAppControl.appControl.operation
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;== &quot;http://tizen.org/appcontrol/operation/service&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.systeminfo.addPropertyValueChangeListener(&quot;DEVICE_ORIENTATION&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onDeviceOrientationSuccess);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   var reqAppControl =
+      tizen.application.getCurrentApplication().getRequestedAppControl();
+   if (reqAppControl)
+   {
+      if (reqAppControl.appControl.operation
+          == "http://tizen.org/appcontrol/operation/service")
+      {
+         try
+         {
+            tizen.systeminfo.addPropertyValueChangeListener("DEVICE_ORIENTATION",
+                                                            onDeviceOrientationSuccess);
+         }
+      }
+   }
 }
 </pre></li>
 
@@ -178,7 +178,7 @@ module.exports.onRequest = function()
 <pre class="prettyprint">
 module.exports.onExit = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;service terminate&quot;);
+   console.log("service terminate");
 }
 </pre></li></ol>
 
@@ -190,21 +190,21 @@ module.exports.onExit = function()
 
 <p>To package the service application with a UI application, define the service in the <code>config.xml</code> file. The <code>&lt;tizen:service&gt;</code> element allows you to define the characteristics of the service application. For example, you can specify the name, icon, and starting JavaScipt file of the service application.</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;TF-8&quot;?&gt;
-&lt;widget xmlns=&quot;http://www.w3.org/ns/widgets&quot; xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;http://yourdomain/WebServiceApplication&quot; version=&quot;1.0.0&quot; viewmodes=&quot;maximized&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:application id=&quot;websvcapp0.WebServiceApplication&quot; package=&quot;websvcapp0&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.3&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;content src=&quot;index.html&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;feature name=&quot;http://tizen.org/feature/screen.size.all&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon src=&quot;icon.png&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;name&gt;WebServiceApplication&lt;/name&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:service id=&quot;websvcapp0.service1&quot; auto-restart=&quot;true&quot; on-boot=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:content src=&quot;service/service1.js&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:name&gt;WebServiceApplication1&lt;/tizen:name&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:icon src=&quot;icon1.png&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:description&gt;WebServiceApplication1&lt;/tizen:description&gt;
-&nbsp;&nbsp;&nbsp;&lt;/tizen:service&gt;
+&lt;?xml version="1.0" encoding="TF-8"?&gt;
+&lt;widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
+        id="http://yourdomain/WebServiceApplication" version="1.0.0" viewmodes="maximized"&gt;
+   &lt;tizen:application id="websvcapp0.WebServiceApplication" package="websvcapp0"
+                      required_version="2.3"/&gt;
+   &lt;content src="index.html"/&gt;
+   &lt;feature name="http://tizen.org/feature/screen.size.all"/&gt;
+   &lt;icon src="icon.png"/&gt;
+   &lt;name&gt;WebServiceApplication&lt;/name&gt;
+   &lt;tizen:service id="websvcapp0.service1" auto-restart="true" on-boot="false"&gt;
+      &lt;tizen:content src="service/service1.js"/&gt;
+      &lt;tizen:name&gt;WebServiceApplication1&lt;/tizen:name&gt;
+      &lt;tizen:icon src="icon1.png"/&gt;
+      &lt;tizen:description&gt;WebServiceApplication1&lt;/tizen:description&gt;
+   &lt;/tizen:service&gt;
 &lt;/widget&gt;
 </pre>
 
@@ -217,18 +217,18 @@ module.exports.onExit = function()
 <li>Launch by other applications
 <p>The Web application launches a service application by calling the <code>launch()</code> or <code>launchAppControl()</code> method with the service application ID:</p>
 <pre class="prettyprint">
-tizen.application.launchAppControl(new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/service&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;websvcapp0.service1&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function() {console.log(&quot;Launch Service succeeded&quot;);},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(e) {console.log(&quot;Launch Service failed: &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ e.message);});
+tizen.application.launchAppControl(new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/service"),
+                                   "websvcapp0.service1",
+                                   function() {console.log("Launch Service succeeded");},
+                                   function(e) {console.log("Launch Service failed: "
+                                                            + e.message);});
 </pre>
 </li>
 
 <li>Launch by the system
 <p>A service application can start automatically if the <code>on-boot</code> attribute is set to <code>true</code>. This requires partner-level certification.</p>
 <pre class="prettyprint">
-&lt;tizen:service id=&quot;websvcapp0.service1&quot; on-boot=&quot;true&quot;&gt;
+&lt;tizen:service id="websvcapp0.service1" on-boot="true"&gt;
 </pre>
 </li>
 </ul>
@@ -242,25 +242,25 @@ tizen.application.launchAppControl(new tizen.ApplicationControl(&quot;http://tiz
 <li><p>The service application can terminate itself when it receives a particular request. The following example code uses the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html">Message Port</a> API to send such a request to the service application.</p>
 <p>The application sends a message by calling the <code>sendMessage()</code> method.</p>
 <pre class="prettyprint">
-var remoteMsgPort = tizen.messageport.requestRemoteMessagePort(&quot;websvcapp0.service1&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SERVICE_SAMPLE2&quot;);
-remoteMsgPort.sendMessage([{key: &quot;key&quot;, value: &quot;SERVICE_EXIT&quot;}]);
+var remoteMsgPort = tizen.messageport.requestRemoteMessagePort("websvcapp0.service1",
+                                                               "SERVICE_SAMPLE2");
+remoteMsgPort.sendMessage([{key: "key", value: "SERVICE_EXIT"}]);
 </pre>
 </li>
 
 <li>The service application can terminate itself by calling the <code>exit()</code> method after getting a signal through the message port:
 <pre class="prettyprint">
-var localMsgPort = tizen.messageport.requestLocalMessagePort(&quot;SERVICE_SAMPLE2&quot;);
+var localMsgPort = tizen.messageport.requestLocalMessagePort("SERVICE_SAMPLE2");
 function onreceived(data, remoteMsgPort)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; data.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (data[i].value == &quot;SERVICE_EXIT&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localMsgPort.removeMessagePortListener(watchId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; data.length; i++)
+   {
+      if (data[i].value == "SERVICE_EXIT")
+      {
+         localMsgPort.removeMessagePortListener(watchId);
+         tizen.application.getCurrentApplication().exit();
+      }
+   }
 }
 var watchId = localMsgPort.addMessagePortListener(onreceived);
 </pre>
@@ -289,7 +289,7 @@ var watchId = localMsgPort.addMessagePortListener(onreceived);
 </tr>
 <tr>
  <td><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a></td>
- <td>This API provides information about the currently running and installed applications and ways to launch other applications.       
+ <td>This API provides information about the currently running and installed applications and ways to launch other applications.
 <p>Note that the <code>getRequestedAppControl()</code> method is only valid inside the <code>onRequest()</code> callback.</p></td>
 </tr>
 <tr>
@@ -311,7 +311,7 @@ var watchId = localMsgPort.addMessagePortListener(onreceived);
 </tr>
 <tr>
  <td><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">System Information</a></td>
- <td>This API provides information about the device&#39;s display, network, storage, and other capabilities.</td>
+ <td>This API provides information about the device's display, network, storage, and other capabilities.</td>
 </tr>
 </tbody>
 </table>
diff --git a/org.tizen.guides/html/web/app_management/web_widget_ww.htm b/org.tizen.guides/html/web/app_management/web_widget_ww.htm
index d00a2b9..77e8312 100644 (file)
--- a/org.tizen.guides/html/web/app_management/web_widget_ww.htm
+++ b/org.tizen.guides/html/web/app_management/web_widget_ww.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -37,9 +37,9 @@
                        <li><a href="#faq">FAQ</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
-<div id="container"><div id="contents"><div class="content">   
+<div id="container"><div id="contents"><div class="content">
 <h1>Widget Application</h1>
 
 <p>Widget applications (or simply widgets) are specialized applications useful in providing users with a quick view of specific information from the parent application. Also, widgets allow users to access certain features without launching the parent applications. Combined with the parent application, your widget can have various features to increase the usability of your application set.</p>
@@ -63,7 +63,7 @@
 
 <h2 id="app_model">Application Model</h2>
 <p>Web widgets use only a subset of HTML, CSS, and DOM APIs available for Web applications. Since a design goal of widgets is to provide a quick view of the widget content to the user, there are some restrictions in the Web widget implementation to prevent unnecessary performance degradation:</p>
-<ul> 
+<ul>
    <li>Web widgets cannot use external network resource loading (for example, CSS, JavaScript, and image files).</li>
    <li>The total size of the HTML, CSS, and JavaScript files in the widget is limited to less than 50 Kbytes.</li>
    <li>The image resolution in a widget must be less than 1.5 times the base image resolution of the Web Widget Specification.</li>
@@ -89,7 +89,7 @@
 <p>The package ID is a random sequence of characters and numbers, which is automatically generated by the Tizen Studio, while you must define the Web application and widget name when creating the applications. For example, if you name your Web application <code>foo</code> and its widget <code>bar</code>, and the Tizen Studio creates the package ID as <code>Zyj5WR</code>, the Web application ID is <code>Zyj5WR.foo</code> and the Web widget ID is <code>Zyj5WR.foo.bar</code>.</p>
 
 <h3 id="lifecycle">Life-cycle</h3>
-<p>The Tizen framework manages the operational states and life-cycle of the Web widgets: installation, creation, termination, and uninstallation. The following figure illustrates the Web widget&#39;s operational state changes.</p>
+<p>The Tizen framework manages the operational states and life-cycle of the Web widgets: installation, creation, termination, and uninstallation. The following figure illustrates the Web widget's operational state changes.</p>
 
 <p align="center"><strong>Figure: Operational state changes</strong></p>
 <p align="center"><img alt="Operational state changes" src="../../images/webwidget_operational_state_changes.png" /></p>
@@ -101,7 +101,7 @@
 
 <li>The users selects the widget in the <strong>Add Widget</strong> menu (by swiping right on the home screen), and the Tizen framework creates an instance of the Web widget and makes it available in the widget board.</li>
 <li>When the user launches the widget from the widget board, an <code>onload</code> event is generated.
-<p>A <code>visibilityChange</code> event is also generated and the value of the <code>visibilityState</code> property is set to <code>visible</code>. This means that the widget is in operation and its content is displayed on the screen. Whenever a widget is visible, the user can tap the UI screen to invoke specified tasks, such as launching the widget&#39;s parent application.</p></li>
+<p>A <code>visibilityChange</code> event is also generated and the value of the <code>visibilityState</code> property is set to <code>visible</code>. This means that the widget is in operation and its content is displayed on the screen. Whenever a widget is visible, the user can tap the UI screen to invoke specified tasks, such as launching the widget's parent application.</p></li>
 <li>While the widget is running:
 <ul><li>The user can suspend the widget by navigating away from the widget UI screen, for example, by rotating the Gear bezel. The <code>visibilityChange</code> event is generated and the value of the <code>visibilityState</code> property is set to <code>hidden</code>. The widget content is no longer visible on the UI screen, but the widget instance remains.</li>
 <li>By navigating to the widget in the widget board, the user can resume the widget operations. The <code>visibilityChange</code> event is generated again, the value of the <code>visibilityState</code> property is set to <code>visible</code>, and the widget content is displayed on the screen.</li>
@@ -119,39 +119,39 @@
 
 <pre class="prettyprint">
 .wgt
-&nbsp;&nbsp;&nbsp;index.html
-&nbsp;&nbsp;&nbsp;config.xml
-&nbsp;&nbsp;&nbsp;icon.png
-&nbsp;&nbsp;&nbsp;css
-&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;js
-&nbsp;&nbsp;&nbsp;lib
-&nbsp;&nbsp;&nbsp;locales
-&nbsp;&nbsp;&nbsp;widget
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget001
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index.html
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config.xml
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preview.png
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;css
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;js
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lib
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locales
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget002
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index.html
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config.xml
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preview.png
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;css
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;js
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lib
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locales
+   index.html
+   config.xml
+   icon.png
+   css
+   images
+   js
+   lib
+   locales
+   widget
+      widget001
+         index.html
+         config.xml
+         preview.png
+         css
+         images
+         js
+         lib
+         locales
+      widget002
+         index.html
+         config.xml
+         preview.png
+         css
+         images
+         js
+         lib
+         locales
 </pre>
 
 <p>The package contains a general <code>config.xml</code> file for the entire package, and a separate <code>config.xml</code> file for each widget:</p>
 <ul>
 <li>The <code>config.xml</code> file of the package contains the information from all the widget configuration files, in addition to the details of the parent Web application. The runtime of the Tizen platform uses the general <code>config.xml</code> file for installing the widget applications.</li>
-<li>The <code>config.xml</code> file of each widget has that widget&#39;s own information.</li>
+<li>The <code>config.xml</code> file of each widget has that widget's own information.</li>
 </ul>
 
 <p>The following examples show the <code>config.xml</code> files in a Web application package:</p>
@@ -159,56 +159,56 @@
 <ul>
 <li>The general <code>config.xml</code> file for the Web application package:
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
-&lt;widget xmlns=&quot;http://www.w3.org/ns/widgets&quot; xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;
-&nbsp;&nbsp;&nbsp;id=&quot;http://yourdomain/DynamicSample&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Information about the widget001--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:app-widget id=&quot;Zyj5WRVa13.DynamicSample.widget001&quot; primary=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-label&gt;TEST_1&lt;/tizen:widget-label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-content src=&quot;widget/widget001/index.html&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-size preview=&quot;widget/widget001/preview.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2x2
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tizen:widget-size&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tizen:widget-content&gt;
-&nbsp;&nbsp;&nbsp;&lt;/tizen:app-widget&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Information about the widget002--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:app-widget id=&quot;Zyj5WRVa13.DynamicSample.widget002&quot; primary=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-label&gt;TEST_2&lt;/tizen:widget-label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-content src=&quot;widget/widget002/index.html&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-size preview=&quot;widget/widget002/preview.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2x2
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tizen:widget-size&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tizen:widget-content&gt;
-&nbsp;&nbsp;&nbsp;&lt;/tizen:app-widget&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;tizen:application id=&quot;Zyj5WRVa13.DynamicSample&quot; package=&quot;Zyj5WRVa13&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.3.2&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon src=&quot;icon.png&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;name&gt;DynamicSample&lt;/name&gt;
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
+   id="http://yourdomain/DynamicSample"&gt;
+
+   &lt;!--Information about the widget001--&gt;
+   &lt;tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget001" primary="true"&gt;
+      &lt;tizen:widget-label&gt;TEST_1&lt;/tizen:widget-label&gt;
+      &lt;tizen:widget-content src="widget/widget001/index.html"&gt;
+         &lt;tizen:widget-size preview="widget/widget001/preview.png"&gt;
+            2x2
+         &lt;/tizen:widget-size&gt;
+      &lt;/tizen:widget-content&gt;
+   &lt;/tizen:app-widget&gt;
+
+   &lt;!--Information about the widget002--&gt;
+   &lt;tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget002" primary="false"&gt;
+      &lt;tizen:widget-label&gt;TEST_2&lt;/tizen:widget-label&gt;
+      &lt;tizen:widget-content src="widget/widget002/index.html"&gt;
+         &lt;tizen:widget-size preview="widget/widget002/preview.png"&gt;
+            2x2
+         &lt;/tizen:widget-size&gt;
+      &lt;/tizen:widget-content&gt;
+   &lt;/tizen:app-widget&gt;
+
+   &lt;tizen:application id="Zyj5WRVa13.DynamicSample" package="Zyj5WRVa13"
+                      required_version="2.3.2"/&gt;
+   &lt;icon src="icon.png"/&gt;
+   &lt;name&gt;DynamicSample&lt;/name&gt;
 &lt;/widget&gt;
 </pre>
 </li>
 <li>The <code>config.xml</code> file of the widget001:
 
 <pre class="prettyprint">
-&lt;tizen:app-widget id=&quot;Zyj5WRVa13.DynamicSample.widget001&quot; primary=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:widget-label&gt;TEST_1&lt;/tizen:widget-label&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:widget-content src=&quot;widget/widget001/index.html&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-size preview=&quot;widget/widget001/preview.png&quot;&gt;2x2&lt;/tizen:widget-size&gt;
-&nbsp;&nbsp;&nbsp;&lt;/tizen:widget-content&gt;
+&lt;tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget001" primary="true"&gt;
+   &lt;tizen:widget-label&gt;TEST_1&lt;/tizen:widget-label&gt;
+   &lt;tizen:widget-content src="widget/widget001/index.html"&gt;
+      &lt;tizen:widget-size preview="widget/widget001/preview.png"&gt;2x2&lt;/tizen:widget-size&gt;
+   &lt;/tizen:widget-content&gt;
 &lt;/tizen:app-widget&gt;
 </pre>
 </li>
 <li>The <code>config.xml</code> file of the widget002:
 
 <pre class="prettyprint">
-&lt;tizen:app-widget id=&quot;Zyj5WRVa13.DynamicSample.widget002&quot; primary=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:widget-label&gt;TEST_2&lt;/tizen:widget-label&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:widget-content src=&quot;widget/widget002/index.html&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-size preview=&quot;widget/widget002/preview.png&quot;&gt;2x2&lt;tizen:widget-size&gt;
-&nbsp;&nbsp;&nbsp;&lt;/tizen:widget-content&gt;
+&lt;tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget002" primary="false"&gt;
+   &lt;tizen:widget-label&gt;TEST_2&lt;/tizen:widget-label&gt;
+   &lt;tizen:widget-content src="widget/widget002/index.html"&gt;
+      &lt;tizen:widget-size preview="widget/widget002/preview.png"&gt;2x2&lt;tizen:widget-size&gt;
+   &lt;/tizen:widget-content&gt;
 &lt;/tizen:app-widget&gt;
 </pre>
 </li>
@@ -233,27 +233,27 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#content
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top: 10px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-left: 33px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-right: 33px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 20px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      body
+      {
+         margin: 0px;
+         text-align: center;
+      }
+      #content
+      {
+         margin-top: 10px;
+         padding-left: 33px;
+         padding-right: 33px;
+         font-size: 20px;
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Go grandmaster Lee Sedol regained a sizeable slice of human pride on Sunday night
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;when he won the latest game in his historic match with
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;an artificially intelligent machine built by Google researchers.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="content"&gt;
+      Go grandmaster Lee Sedol regained a sizeable slice of human pride on Sunday night
+      when he won the latest game in his historic match with
+      an artificially intelligent machine built by Google researchers.
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -266,29 +266,29 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#secondDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-top: 10px; padding-bottom: 10px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      body
+      {
+         text-align: center;
+      }
+      #secondDiv
+      {
+         padding-top: 10px; padding-bottom: 10px;
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;parentDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;firstDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;firstChildDiv1&quot;&gt;Text1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;firstChildDiv2&quot;&gt;Text2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;secondDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;secondChildDiv1&quot;&gt;Text1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;secondChildDiv2&quot;&gt;Text2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;thirdChildDiv&quot;&gt;Text1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="parentDiv"&gt;
+      &lt;div id="firstDiv"&gt;
+         &lt;div id="firstChildDiv1"&gt;Text1&lt;/div&gt;
+         &lt;div id="firstChildDiv2"&gt;Text2&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div id="secondDiv"&gt;
+         &lt;div id="secondChildDiv1"&gt;Text1&lt;/div&gt;
+         &lt;div id="secondChildDiv2"&gt;Text2&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div id="thirdChildDiv"&gt;Text1&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -300,24 +300,24 @@
 
 <pre class="prettyprint">
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;body
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;}
+   body
+   {
+      text-align: center;
+   }
 &lt;/style&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;parentDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;firstChildDiv1&quot;&gt;&lt;img src=&quot;images/image1.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;firstChildDiv2&quot;&gt;Text2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;firstChildDiv3&quot;&gt;Text3&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;secondChildDiv1&quot;&gt;&lt;img src=&quot;images/image2.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;secondChildDiv2&quot;&gt;Text2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;secondChildDiv3&quot;&gt;Text3&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="parentDiv"&gt;
+      &lt;div&gt;
+         &lt;div id="firstChildDiv1"&gt;&lt;img src="images/image1.jpg"/&gt;&lt;/div&gt;
+         &lt;div id="firstChildDiv2"&gt;Text2&lt;/div&gt;
+         &lt;div id="firstChildDiv3"&gt;Text3&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div&gt;
+         &lt;div id="secondChildDiv1"&gt;&lt;img src="images/image2.jpg"/&gt;&lt;/div&gt;
+         &lt;div id="secondChildDiv2"&gt;Text2&lt;/div&gt;
+         &lt;div id="secondChildDiv3"&gt;Text3&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -329,29 +329,29 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#largeImage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 150px; height: 150px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      body
+      {
+         text-align: center;
+      }
+      #largeImage
+      {
+         width: 150px; height: 150px;
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;firstChildDiv1&quot;&gt;Text1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;firstChildDiv2&quot;&gt;Text2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;secondChildDiv1&quot;&gt;&lt;img id=&quot;largeImage&quot; src=&quot;images/image1.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;thirdChildDiv1&quot;&gt;Text1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;thirdChildDiv2&quot;&gt;Text2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div&gt;
+      &lt;div id="firstChildDiv1"&gt;Text1&lt;/div&gt;
+      &lt;div id="firstChildDiv2"&gt;Text2&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div&gt;
+      &lt;div id="secondChildDiv1"&gt;&lt;img id="largeImage" src="images/image1.jpg"/&gt;&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div&gt;
+      &lt;div id="thirdChildDiv1"&gt;Text1&lt;/div&gt;
+      &lt;div id="thirdChildDiv2"&gt;Text2&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -367,44 +367,44 @@
 <pre class="prettyprint">
 #more
 {
-&nbsp;&nbsp;&nbsp;.display: inline-block;
+   .display: inline-block;
 }
 </pre>
 </div>
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#leftDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: right;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#rightDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: left;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.split
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: inline-block;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 45%; height: 100%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.imgArea
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 50px; height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      #leftDiv
+      {
+         text-align: right;
+      }
+      #rightDiv
+      {
+         text-align: left;
+      }
+      .split
+      {
+         display: inline-block;
+         width: 45%; height: 100%;
+      }
+      .imgArea
+      {
+         width: 50px; height: 100px;
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;parentDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;leftDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;leftChildDiv1&quot;&gt;&lt;img class=&quot;imgArea&quot; src=&quot;images/image1.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;leftChildDiv2&quot;&gt;Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;rightDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;rightChildDiv1&quot;&gt;&lt;img class=&quot;imgArea&quot; src=&quot;images/image2.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;rightChildDiv2&quot;&gt;Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="parentDiv"&gt;
+      &lt;div class="split" id="leftDiv"&gt;
+         &lt;div id="leftChildDiv1"&gt;&lt;img class="imgArea" src="images/image1.jpg"/&gt;&lt;/div&gt;
+         &lt;div id="leftChildDiv2"&gt;Text&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="split" id="rightDiv"&gt;
+         &lt;div id="rightChildDiv1"&gt;&lt;img class="imgArea" src="images/image2.jpg"/&gt;&lt;/div&gt;
+         &lt;div id="rightChildDiv2"&gt;Text&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -417,106 +417,106 @@
 <p>Absolute positioning:</p>
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 360px; height: 360px; margin: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px; height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#topDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 130px; /* (360/2)-(100/2) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#leftDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#rightDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 260px; /* 360-100 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#bottomDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 130px; /* (360/2)-(100/2) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      body
+      {
+         width: 360px; height: 360px; margin: 0;
+      }
+      .box
+      {
+         position: absolute;
+         width: 100px; height: 100px;
+      }
+      #topDiv
+      {
+         left: 130px; /* (360/2)-(100/2) */
+      }
+      #leftDiv
+      {
+         top: 100px;
+      }
+      #rightDiv
+      {
+         top: 100px;
+         left: 260px; /* 360-100 */
+      }
+      #bottomDiv
+      {
+         top: 200px;
+         left: 130px; /* (360/2)-(100/2) */
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot; id=&quot;topDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;topChildDiv1&quot;&gt;&lt;img src=&quot;images/image1.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;topChildDiv2&quot;&gt;Top Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot; id=&quot;leftDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;leftChildDiv1&quot;&gt;&lt;img src=&quot;images/image2.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;leftChildDiv2&quot;&gt;Left Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot; id=&quot;rightDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;rightChildDiv1&quot;&gt;&lt;img src=&quot;images/image3.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;rightChildDiv2&quot;&gt;Right Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot; id=&quot;bottomDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;bottomChildDiv1&quot;&gt;&lt;img src=&quot;images/image4.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;bottomChildDiv2&quot;&gt;Bottom Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="box" id="topDiv"&gt;
+      &lt;div id="topChildDiv1"&gt;&lt;img src="images/image1.jpg"/&gt;&lt;/div&gt;
+      &lt;div id="topChildDiv2"&gt;Top Text&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="box" id="leftDiv"&gt;
+      &lt;div id="leftChildDiv1"&gt;&lt;img src="images/image2.jpg"/&gt;&lt;/div&gt;
+      &lt;div id="leftChildDiv2"&gt;Left Text&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="box" id="rightDiv"&gt;
+      &lt;div id="rightChildDiv1"&gt;&lt;img src="images/image3.jpg"/&gt;&lt;/div&gt;
+      &lt;div id="rightChildDiv2"&gt;Right Text&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="box" id="bottomDiv"&gt;
+      &lt;div id="bottomChildDiv1"&gt;&lt;img src="images/image4.jpg"/&gt;&lt;/div&gt;
+      &lt;div id="bottomChildDiv2"&gt;Bottom Text&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
 <p>Static positioning:</p>
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 360px; height: 360px; margin: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px; height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: inline-block;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#topDiv, #midDiv, #bottomDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#leftDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#rightDiv
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-left: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      body
+      {
+         width: 360px; height: 360px; margin: 0;
+      }
+      .box
+      {
+         width: 100px; height: 100px;
+         display: inline-block;
+      }
+      #topDiv, #midDiv, #bottomDiv
+      {
+         text-align: center;
+      }
+      #leftDiv
+      {
+         margin-right: 50px;
+      }
+      #rightDiv
+      {
+         margin-left: 50px;
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;topDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot; id=&quot;topInnerDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;topChildDiv1&quot;&gt;&lt;img src=&quot;images/image1.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;topChildDiv2&quot;&gt;Top Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;midDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot; id=&quot;leftDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;leftChildDiv1&quot;&gt;&lt;img src=&quot;images/image2.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;leftChildDiv2&quot;&gt;Left Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot; id=&quot;rightDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;rightChildDiv1&quot;&gt;&lt;img src=&quot;images/image3.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;rightChildDiv2&quot;&gt;Right Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;bottomDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot; id=&quot;bottomInnerDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;bottomChildDiv1&quot;&gt;&lt;img src=&quot;images/image4.jpg&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;bottomChildDiv2&quot;&gt;Bottom Text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="topDiv"&gt;
+      &lt;div class="box" id="topInnerDiv"&gt;
+         &lt;div id="topChildDiv1"&gt;&lt;img src="images/image1.jpg"/&gt;&lt;/div&gt;
+         &lt;div id="topChildDiv2"&gt;Top Text&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div id="midDiv"&gt;
+      &lt;div class="box" id="leftDiv"&gt;
+         &lt;div id="leftChildDiv1"&gt;&lt;img src="images/image2.jpg"/&gt;&lt;/div&gt;
+         &lt;div id="leftChildDiv2"&gt;Left Text&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="box" id="rightDiv"&gt;
+         &lt;div id="rightChildDiv1"&gt;&lt;img src="images/image3.jpg"/&gt;&lt;/div&gt;
+         &lt;div id="rightChildDiv2"&gt;Right Text&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div id="bottomDiv"&gt;
+      &lt;div class="box" id="bottomInnerDiv"&gt;
+         &lt;div id="bottomChildDiv1"&gt;&lt;img src="images/image4.jpg"/&gt;&lt;/div&gt;
+         &lt;div id="bottomChildDiv2"&gt;Bottom Text&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -527,16 +527,16 @@
 <pre class="prettyprint">
 #text
 {
-&nbsp;&nbsp;&nbsp;font-size: 20pt;
-&nbsp;&nbsp;&nbsp;font-weight: bold; /* Available values: normal, bold, bolder, lighter, number */
-&nbsp;&nbsp;&nbsp;text-align: center;
+   font-size: 20pt;
+   font-weight: bold; /* Available values: normal, bold, bolder, lighter, number */
+   text-align: center;
 }
 
 #more
 {
-&nbsp;&nbsp;&nbsp;border-style: solid;
-&nbsp;&nbsp;&nbsp;border-left-color: lightgray;
-&nbsp;&nbsp;&nbsp;border-top-color: lightgray;
+   border-style: solid;
+   border-left-color: lightgray;
+   border-top-color: lightgray;
 }
 </pre>
 
@@ -548,50 +548,50 @@
 &lt;!--HTML--&gt;
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;viewport&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;day&quot;&gt;26&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;week&quot;&gt;Thursday&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;scheduleTitle&quot;&gt;Project meeting&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;scheduleTime&quot;&gt;1:00PM-2:00PM&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;scheduleTitle&quot;&gt;Conference call&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;scheduleTime&quot;&gt;3:00PM-3:30PM&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;more&quot;&gt;+3&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;body&gt;
+      &lt;div id="viewport"&gt;
+         &lt;div id="day"&gt;26&lt;/div&gt;
+         &lt;div id="week"&gt;Thursday&lt;/div&gt;
+         &lt;div id="scheduleTitle"&gt;Project meeting&lt;/div&gt;
+         &lt;div id="scheduleTime"&gt;1:00PM-2:00PM&lt;/div&gt;
+         &lt;div id="scheduleTitle"&gt;Conference call&lt;/div&gt;
+         &lt;div id="scheduleTime"&gt;3:00PM-3:30PM&lt;/div&gt;
+         &lt;div id="more"&gt;+3&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 
 &lt;!--CSS--&gt;
 #viewport
 {
-&nbsp;&nbsp;&nbsp;font-size: 20pt;
-&nbsp;&nbsp;&nbsp;text-align: center;
+   font-size: 20pt;
+   text-align: center;
 }
 #day
 {
-&nbsp;&nbsp;&nbsp;color: green;
-&nbsp;&nbsp;&nbsp;font-size: 30pt;
+   color: green;
+   font-size: 30pt;
 }
 #scheduleTitle
 {
-&nbsp;&nbsp;&nbsp;margin-top: 5%;
-&nbsp;&nbsp;&nbsp;height: 13%;
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;font-size: 30pt;
+   margin-top: 5%;
+   height: 13%;
+   font-weight: bold;
+   font-size: 30pt;
 }
 #more
 {
-&nbsp;&nbsp;&nbsp;font-size: 16pt;
-&nbsp;&nbsp;&nbsp;width: 50px;
-&nbsp;&nbsp;&nbsp;display: inline-block;
-&nbsp;&nbsp;&nbsp;border-style: solid;
-&nbsp;&nbsp;&nbsp;border-left-color: lightgray;
-&nbsp;&nbsp;&nbsp;border-top-color: lightgray;
+   font-size: 16pt;
+   width: 50px;
+   display: inline-block;
+   border-style: solid;
+   border-left-color: lightgray;
+   border-top-color: lightgray;
 }
 #scheduleTime, #more
 {
-&nbsp;&nbsp;&nbsp;margin-top: 2%;
-&nbsp;&nbsp;&nbsp;color: gray;
+   margin-top: 2%;
+   color: gray;
 }
 </pre>
 
@@ -606,64 +606,64 @@
 &lt;!--HTML--&gt;
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;category&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img id=&quot;imgCategory1&quot; src=&quot;images/science.png&quot; width=&quot;70px&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;content1&quot;&gt;Counter-Terror Office Funds Tube-Launched...&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;category&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img id=&quot;imgCategory2&quot; src=&quot;images/sports.png&quot; width=&quot;70px&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;content2&quot;&gt;Presidential Medal of Freedom for Yogi, Mays&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;more&quot;&gt;+12&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;body&gt;
+      &lt;div class="category"&gt;
+         &lt;img id="imgCategory1" src="images/science.png" width="70px"/&gt;
+      &lt;/div&gt;
+      &lt;div id="content1"&gt;Counter-Terror Office Funds Tube-Launched...&lt;/div&gt;
+      &lt;div class="category"&gt;
+         &lt;img id="imgCategory2" src="images/sports.png" width="70px"/&gt;
+      &lt;/div&gt;
+      &lt;div id="content2"&gt;Presidential Medal of Freedom for Yogi, Mays&lt;/div&gt;
+      &lt;div class="more"&gt;+12&lt;/div&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 
 &lt;!--CSS--&gt;
 body
 {
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;width: 360px; height: 360px;
-&nbsp;&nbsp;&nbsp;font-size: 20px;
-&nbsp;&nbsp;&nbsp;text-align: center;
+   position: absolute;
+   width: 360px; height: 360px;
+   font-size: 20px;
+   text-align: center;
 }
 *
 {
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;margin: 0px; padding: 0px;
+   display: block;
+   margin: 0px; padding: 0px;
 }
 .category
 {
-&nbsp;&nbsp;&nbsp;margin-top: 40px;
-&nbsp;&nbsp;&nbsp;margin-left: 137.5px;
+   margin-top: 40px;
+   margin-left: 137.5px;
 }
 .content
 {
-&nbsp;&nbsp;&nbsp;margin-top: 10px;
-&nbsp;&nbsp;&nbsp;padding-left: 33px;
-&nbsp;&nbsp;&nbsp;padding-right: 33px;
-&nbsp;&nbsp;&nbsp;height: 66px;
-&nbsp;&nbsp;&nbsp;font-size: 26px;
+   margin-top: 10px;
+   padding-left: 33px;
+   padding-right: 33px;
+   height: 66px;
+   font-size: 26px;
 }
 .more
 {
-&nbsp;&nbsp;&nbsp;margin-top: 28px;
-&nbsp;&nbsp;&nbsp;height: 20.2px;
+   margin-top: 28px;
+   height: 20.2px;
 }
 </pre>
 <pre class="prettyprint">
 /* JavaScript */
 function onload()
 {
-&nbsp;&nbsp;&nbsp;/* Load news data here */
-
-&nbsp;&nbsp;&nbsp;/* Content update */
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;imgCategory1&#39;).src = newsData.firstNewsType + &#39;.png&#39;;
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;imgCategory2&#39;).src = newsData.secondNewsType + &#39;.png&#39;;
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;content1&#39;).textContent =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newsData.firstNewsData.substring(0,40) + &#39;...&#39;;
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;content2&#39;).textContent =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newsData.secondNewsData.substring(0,40) + &#39;...&#39;;
+   /* Load news data here */
+
+   /* Content update */
+   document.getElementById('imgCategory1').src = newsData.firstNewsType + '.png';
+   document.getElementById('imgCategory2').src = newsData.secondNewsType + '.png';
+   document.getElementById('content1').textContent =
+      newsData.firstNewsData.substring(0,40) + '...';
+   document.getElementById('content2').textContent =
+      newsData.secondNewsData.substring(0,40) + '...';
 }
 </pre>
 
@@ -680,16 +680,16 @@ var cntImage = 0;
 
 function step()
 {
-&nbsp;&nbsp;&nbsp;document.getElementById(&quot;imgWeather&quot;).src = &quot;images/sun_&quot; + (cntImage++) + &quot;.png&quot;;
-&nbsp;&nbsp;&nbsp;if (cntImage &lt; 4)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.requestAnimationFrame(step);
-&nbsp;&nbsp;&nbsp;}
+   document.getElementById("imgWeather").src = "images/sun_" + (cntImage++) + ".png";
+   if (cntImage &lt; 4)
+   {
+      window.requestAnimationFrame(step);
+   }
 }
 
 function goAni()
 {
-&nbsp;&nbsp;&nbsp;window.requestAnimationFrame(step);
+   window.requestAnimationFrame(step);
 }
 </pre>
 
@@ -703,17 +703,17 @@ var scrollLength = 0;
 
 function step()
 {
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;scheduleTitle&#39;).style.transform =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;translateX(&quot; + (scrollLength--) + &quot;px)&quot;
-&nbsp;&nbsp;&nbsp;if (scrollLength &gt; -300) /* Max length */
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.requestAnimationFrame(step);
-&nbsp;&nbsp;&nbsp;}
+   document.getElementById('scheduleTitle').style.transform =
+      "translateX(" + (scrollLength--) + "px)"
+   if (scrollLength &gt; -300) /* Max length */
+   {
+      window.requestAnimationFrame(step);
+   }
 }
 
 function goAni()
 {
-&nbsp;&nbsp;&nbsp;window.requestAnimationFrame(step);
+   window.requestAnimationFrame(step);
 }
 </pre>
 
@@ -729,7 +729,7 @@ function goAni()
 
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;element onload=&quot;load&quot;&gt;
+&lt;element onload="load"&gt;
 </pre>
 
 <pre class="prettyprint">
@@ -739,22 +739,22 @@ function goAni()
 object.onload=load;
 
 /* Set the event listener */
-object.addEventListener(&#39;load&#39;, load);
+object.addEventListener('load', load);
 
 /* Define the event handler in the main.js file */
 function load()
 {
-&nbsp;&nbsp;&nbsp;/* Load water data from shared file */
-&nbsp;&nbsp;&nbsp;loadWaterData();
+   /* Load water data from shared file */
+   loadWaterData();
 
-&nbsp;&nbsp;&nbsp;/* Change the current amount of water */
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;currentWaterNum&#39;).textContent = currentWaterNum;
+   /* Change the current amount of water */
+   document.getElementById('currentWaterNum').textContent = currentWaterNum;
 
-&nbsp;&nbsp;&nbsp;/* Change the color of the water cups */
-&nbsp;&nbsp;&nbsp;for (var i = 1; i &lt;= currentWaterNum; ++i)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;watercup&#39; + i)).style.backgroundColor = &#39;blue&#39;;
-&nbsp;&nbsp;&nbsp;}
+   /* Change the color of the water cups */
+   for (var i = 1; i &lt;= currentWaterNum; ++i)
+   {
+      document.getElementById('watercup' + i)).style.backgroundColor = 'blue';
+   }
 }
 </pre>
 </li>
@@ -766,7 +766,7 @@ function load()
 
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;element onclick=&quot;click&quot;&gt;
+&lt;element onclick="click"&gt;
 </pre>
 
 <pre class="prettyprint">
@@ -776,23 +776,23 @@ function load()
 object.onclick=click;
 
 /* Set the event listener */
-object.addEventListener(&#39;click&#39;, click);
+object.addEventListener('click', click);
 
 /* Define the event handler in the main.js file */
 /* When the user clicks the button, update the status and change the style */
 function click()
 {
-&nbsp;&nbsp;&nbsp;/* Increase the water amount */
-&nbsp;&nbsp;&nbsp;currentWaterNum++;
+   /* Increase the water amount */
+   currentWaterNum++;
 
-&nbsp;&nbsp;&nbsp;/* Change the current amount of water */
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;currentWaterNum&#39;).textContent = currentWaterNum;
+   /* Change the current amount of water */
+   document.getElementById('currentWaterNum').textContent = currentWaterNum;
 
-&nbsp;&nbsp;&nbsp;/* Change the color of the water cup */
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;watercup&#39; + currentWaterNum).style.backgroundColor = &#39;blue&#39;;
+   /* Change the color of the water cup */
+   document.getElementById('watercup' + currentWaterNum).style.backgroundColor = 'blue';
 
-&nbsp;&nbsp;&nbsp;/* Store water data into a shared file */
-&nbsp;&nbsp;&nbsp;storeWaterData();
+   /* Store water data into a shared file */
+   storeWaterData();
 }
 </pre>
 </li>
@@ -806,19 +806,19 @@ function click()
 /* JavaScript */
 
 /* Set the event listener */
-document.addEventListener(&#39;visibilitychange&#39;, visibilitychange);
+document.addEventListener('visibilitychange', visibilitychange);
 
 /* Define the event handler in the main.js file */
 function visibilitychange()
 {
-&nbsp;&nbsp;&nbsp;if (document.visibilityState === &#39;hidden&#39;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Store shared data */
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Load stored data and update the page */
-&nbsp;&nbsp;&nbsp;}
+   if (document.visibilityState === 'hidden')
+   {
+      /* Store shared data */
+   }
+   else
+   {
+      /* Load stored data and update the page */
+   }
 }
 </pre>
 </li>
@@ -849,10 +849,10 @@ function visibilitychange()
  </tbody></table>
 
 <h3 id="comm_parent">Communicating with a Web Application on a Wearable Device</h3>
-   
-   <p>For data sharing between a Web widget and its parent application on the same device, use the Tizen Preference API. The Preference API allows a Web widget to communicate with its parent Web app (and vice versa) by storing key-value pairs in a hashtable-like data structure. The data stored by the Preference API has a &quot;package&quot; scope, which means that any widgets (or a Web app) in a package can access the data stored by the other widgets (or a Web app) in the same package. In addition, the Preference API does not need additional permissions, so no modifications in the <code>config.xml</code> file are required.</p>
+
+   <p>For data sharing between a Web widget and its parent application on the same device, use the Tizen Preference API. The Preference API allows a Web widget to communicate with its parent Web app (and vice versa) by storing key-value pairs in a hashtable-like data structure. The data stored by the Preference API has a "package" scope, which means that any widgets (or a Web app) in a package can access the data stored by the other widgets (or a Web app) in the same package. In addition, the Preference API does not need additional permissions, so no modifications in the <code>config.xml</code> file are required.</p>
    <p>The following table lists the Preference API methods.</p>
-   
+
 <p align="center" class="Table"><strong>Table: Preference API methods</strong></p>
 <table>
 <tbody>
@@ -861,77 +861,77 @@ function visibilitychange()
  <th>Description</th>
 </tr>
  <tr>
- <td><code>tizen.preference.setValue(&quot;key&quot;, &quot;value&quot;)</code></td>
+ <td><code>tizen.preference.setValue("key", "value")</code></td>
  <td>Stores a key-value pair.</td>
  </tr>
  <tr>
- <td><code>tizen.preference.getValue(&quot;key&quot;)</code></td>
- <td>Retrieves a value for the &quot;key&quot; key.</td>
+ <td><code>tizen.preference.getValue("key")</code></td>
+ <td>Retrieves a value for the "key" key.</td>
  </tr>
  <tr>
- <td><code>tizen.preference.exists(&quot;key&quot;)</code></td>
+ <td><code>tizen.preference.exists("key")</code></td>
  <td>Returns <code>true</code> if the given key exists.</td>
  </tr>
  <tr>
- <td><code>tizen.preference.remove(&quot;key&quot;)</code></td>
- <td>Removes a key-value pair for the &quot;key&quot; key.</td>
+ <td><code>tizen.preference.remove("key")</code></td>
+ <td>Removes a key-value pair for the "key" key.</td>
  </tr>
  <tr>
- <td><code>tizen.preference.setChangeListener(&quot;key&quot;, listener)</code></td>
- <td>Registers a change listener for &quot;key&quot;.</td>
+ <td><code>tizen.preference.setChangeListener("key", listener)</code></td>
+ <td>Registers a change listener for "key".</td>
  </tr>
  <tr>
- <td><code>tizen.preference.unsetChangeListener(&quot;key&quot;)</code></td>
- <td>Unregisters the change listener for &quot;key&quot;.</td>
+ <td><code>tizen.preference.unsetChangeListener("key")</code></td>
+ <td>Unregisters the change listener for "key".</td>
  </tr>
  </tbody></table>
-   
+
 <p>The following example shows how to set a key-value pair in the <code>Widget_main.js</code> file:</p>
 <pre class="prettyprint">
 function checkPreference()
 {
-&nbsp;&nbsp;&nbsp;if (!tizen.preference.exists(&quot;KEY&quot;))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.preference.setValue(&quot;KEY&quot;, &quot;Widget_HELLOWORLD1&quot;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;if (tizen.preference.exists(&quot;KEY&quot;))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.preference.remove(&quot;KEY&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.preference.setValue(&quot;KEY&quot;, &quot;Widget_HELLOWORLD2&quot;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* [Log] value for KEY: Widget_HELLOWORLD2 */
-&nbsp;&nbsp;&nbsp;console.log(&#39;value for KEY: &#39; + tizen.preference.getValue(&#39;KEY&#39;));
-
-&nbsp;&nbsp;&nbsp;/* Callback function */
-&nbsp;&nbsp;&nbsp;var listener = function(data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* [Log] Preference with the key: KEY has a new value: APP_HELLOWORLD */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Preference with the key: &#39; + data.key 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39; has a new value: &#39; + data.value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.preference.unsetChangeListener(&#39;KEY&#39;);
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;tizen.preference.setChangeListener(&#39;KEY&#39;, listener);
+   if (!tizen.preference.exists("KEY"))
+   {
+      tizen.preference.setValue("KEY", "Widget_HELLOWORLD1");
+   }
+
+   if (tizen.preference.exists("KEY"))
+   {
+      tizen.preference.remove("KEY");
+      tizen.preference.setValue("KEY", "Widget_HELLOWORLD2");
+   }
+
+   /* [Log] value for KEY: Widget_HELLOWORLD2 */
+   console.log('value for KEY: ' + tizen.preference.getValue('KEY'));
+
+   /* Callback function */
+   var listener = function(data)
+   {
+      /* [Log] Preference with the key: KEY has a new value: APP_HELLOWORLD */
+      console.log('Preference with the key: ' + data.key
+                  + ' has a new value: ' + data.value);
+      tizen.preference.unsetChangeListener('KEY');
+   };
+
+   tizen.preference.setChangeListener('KEY', listener);
 }
 </pre>
 <p>To set the value in the <code>WebApp_main.js</code> file:</p>
 <pre class="prettyprint">
 window.onload = function()
 {
-&nbsp;&nbsp;&nbsp;var timer = setInterval(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(timer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.preference.setValue(&quot;KEY&quot;, &quot;APP_HELLOWORLD&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (ignore)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 2000);
+   var timer = setInterval(function()
+      {
+         clearInterval(timer);
+         try
+         {
+            tizen.preference.setValue("KEY", "APP_HELLOWORLD");
+            tizen.application.getCurrentApplication().exit();
+         }
+         catch (ignore)
+         {
+         }
+      }, 2000);
 };
 </pre>
 
@@ -939,16 +939,16 @@ window.onload = function()
 
 <p>The <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API allows a widget to launch and access installed applications on the same device. For this, you need to set the following privileges:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.info&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/appmanager.certificate&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/appmanager.kill&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/application.info"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/appmanager.certificate"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/appmanager.kill"/&gt;
 </pre>
 
 <p>In addition, to launch an application, its application ID must be used to identify the application:</p>
 <pre class="prettyprint">
 /* Launch the application */
-tizen.application.launch(&#39;ApplicationIDToLaunch&#39;, onGetAppsContextSuccess);
+tizen.application.launch('ApplicationIDToLaunch', onGetAppsContextSuccess);
 </pre>
 
 <div class="note">
@@ -957,21 +957,21 @@ tizen.application.launch(&#39;ApplicationIDToLaunch&#39;, onGetAppsContextSucces
 </div>
 
 <h3 id="comm_host">Communicating with a Host Application on a Host Device</h3>
-   
+
 <p>The widget and its parent application can reside on separate devices, as when a Web widget is on a wearable device while the host (parent) application is on a mobile device. In this case, the widget and parent applications can communicate through SAP (Samsung Accessory Protocol) to share data between the widget (the consumer in SAP) and the parent application (the provider in SAP).</p>
 
 <p>The following example shows SAP communication implementation between a Web widget on a Tizen wearable device and its parent application on an Android mobile device:</p>
 
-<ul> 
+<ul>
    <li>Widget on a Tizen wearable device:
 <pre class="prettyprint">
 &lt;!--Privilege--&gt;
-&lt;tizen:privilege name=&quot;http://developer.samsung.com/privilege/accessoryprotocol&quot;/&gt;
+&lt;tizen:privilege name="http://developer.samsung.com/privilege/accessoryprotocol"/&gt;
 
 &lt;!--HTML--&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;button1&quot; onclick=&quot;getDataFromHostApp();&quot;&gt;GetData&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
+   &lt;button id="button1" onclick="getDataFromHostApp();"&gt;GetData&lt;/button&gt;
+   &lt;div id="result"&gt;&lt;/div&gt;
 &lt;/body&gt;
 </pre>
 <pre class="prettyprint">
@@ -979,93 +979,93 @@ tizen.application.launch(&#39;ApplicationIDToLaunch&#39;, onGetAppsContextSucces
 var SAAgent = 0;
 var SASocket = 0;
 var CHANNELID = 2000;
-var providerAppName = &#39;WeatherProvider&#39;;
+var providerAppName = 'WeatherProvider';
 
 function onerror(err)
 {
-&nbsp;&nbsp;&nbsp;/* Error handling */
+   /* Error handling */
 }
 
 var agentCallback =
 {
-&nbsp;&nbsp;&nbsp;onconnect: function(socket)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SASocket = socket;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SASocket.setSocketStatusListener(function(reason)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disconnect();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SASocket.setDataReceiveListener(onreceive);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Request the provider to get weather info */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SASocket.sendData(CHANNELID, &#39;request&#39;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onerror: onerror
+   onconnect: function(socket)
+   {
+      SASocket = socket;
+      SASocket.setSocketStatusListener(function(reason)
+         {
+            disconnect();
+         });
+      SASocket.setDataReceiveListener(onreceive);
+      /* Request the provider to get weather info */
+      SASocket.sendData(CHANNELID, 'request');
+   },
+   onerror: onerror
 };
 
 var peerAgentFindCallback =
 {
-&nbsp;&nbsp;&nbsp;onpeeragentfound: function(peerAgent)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (peerAgent.appName == providerAppName)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SAAgent.setServiceConnectionListener(agentCallback);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SAAgent.requestServiceConnection(peerAgent);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (err)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onerror: onerror
+   onpeeragentfound: function(peerAgent)
+   {
+      try
+      {
+         if (peerAgent.appName == providerAppName)
+         {
+            SAAgent.setServiceConnectionListener(agentCallback);
+            SAAgent.requestServiceConnection(peerAgent);
+         }
+      }
+      catch (err)
+      {
+         /* Error handling */
+      }
+   },
+   onerror: onerror
 };
 
 function onsuccess(agents)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (agents.length &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SAAgent = agents[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SAAgent.setPeerAgentFindListener(peerAgentFindCallback);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SAAgent.findPeerAgents();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;catch (err)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      if (agents.length &gt; 0)
+      {
+         SAAgent = agents[0];
+         SAAgent.setPeerAgentFindListener(peerAgentFindCallback);
+         SAAgent.findPeerAgents();
+      }
+   }
+   catch (err)
+   {
+      /* Error handling */
+   }
 }
 
 function onreceive(channelId, data)
 {
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;result&#39;).textContent = data;
+   document.getElementById('result').textContent = data;
 }
 
 function getDataFromHostApp()
 {
-&nbsp;&nbsp;&nbsp;if (SASocket)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false; /* Already connected */
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;webapis.sa.requestSAAgent(onsuccess, function(err)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;catch (err)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;}
+   if (SASocket)
+   {
+      return false; /* Already connected */
+   }
+   try
+   {
+      webapis.sa.requestSAAgent(onsuccess, function(err)
+         {
+            /* Error handling */
+         });
+   }
+   catch (err)
+   {
+      /* Error handling */
+   }
 }
 </pre>
 </li>
 <li>Parent application on an Android mobile device:
-   
+
 <p>For the provider application on the host device, you need to:</p>
 
                <ul>
@@ -1075,147 +1075,147 @@ function getDataFromHostApp()
 
 <pre class="prettyprint">
 &lt;!--Permissions--&gt;
-&lt;uses-permission android:name=&quot;android.permission.BLUETOOTH&quot;/&gt;
-&lt;uses-permission android:name=&quot;android.permission.BLUETOOTH_ADMIN&quot;/&gt;
-&lt;uses-permission android:name=&quot;com.samsung.accessory.permission.ACCESSORY_FRAMEWORK&quot;/&gt;
-&lt;uses-permission android:name=&quot;com.samsung.wmanager.APP&quot;/&gt;
-&lt;uses-permission android:name=&quot;com.samsung.wmanager.ENABLE_NOTIFICATION&quot;/&gt;
+&lt;uses-permission android:name="android.permission.BLUETOOTH"/&gt;
+&lt;uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/&gt;
+&lt;uses-permission android:name="com.samsung.accessory.permission.ACCESSORY_FRAMEWORK"/&gt;
+&lt;uses-permission android:name="com.samsung.wmanager.APP"/&gt;
+&lt;uses-permission android:name="com.samsung.wmanager.ENABLE_NOTIFICATION"/&gt;
 
 &lt;!--Service registration--&gt;
-&lt;service android:name=&quot;.WeatherProviderForWidget&quot;/&gt;
+&lt;service android:name=".WeatherProviderForWidget"/&gt;
 
 &lt;!--Broadcast receiver and intent-filter--&gt;
-&lt;receiver android:name=&quot;com.samsung.android.sdk.accessory.ServiceConnectionIndicationBroadcastReceiver&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;intent-filter&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;action android:name=&quot;android.accessory.service.action.ACCESSORY_SERVICE_CONNECTION_IND&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/intent-filter&gt;
+&lt;receiver android:name="com.samsung.android.sdk.accessory.ServiceConnectionIndicationBroadcastReceiver"&gt;
+   &lt;intent-filter&gt;
+      &lt;action android:name="android.accessory.service.action.ACCESSORY_SERVICE_CONNECTION_IND"/&gt;
+   &lt;/intent-filter&gt;
 &lt;/receiver&gt;
-&lt;receiver android:name=&quot;com.samsung.android.sdk.accessory.RegisterUponInstallReceiver&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;intent-filter&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;action android:name=&quot;android.accessory.device.action.REGISTER_AFTER_INSTALL&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/intent-filter&gt;
+&lt;receiver android:name="com.samsung.android.sdk.accessory.RegisterUponInstallReceiver"&gt;
+   &lt;intent-filter&gt;
+      &lt;action android:name="android.accessory.device.action.REGISTER_AFTER_INSTALL"/&gt;
+   &lt;/intent-filter&gt;
 &lt;/receiver&gt;
 
 &lt;!--Service profile information--&gt;
-&lt;meta-data android:name=&quot;AccessoryServicesLocation&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:value=&quot;/res/xml/accessoryservices.xml&quot;/&gt;
+&lt;meta-data android:name="AccessoryServicesLocation"
+           android:value="/res/xml/accessoryservices.xml"/&gt;
 </pre>
 
 <pre class="prettyprint">
 // Activity (Main) code
 try {
-&nbsp;&nbsp;&nbsp;// To widget
-&nbsp;&nbsp;&nbsp;WeatherProviderForWidget.mConnectionHandler
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.send(WeatherProviderForWidget.WIDGET_CHANNEL_ID, jsonData.toString().getBytes());
+   // To widget
+   WeatherProviderForWidget.mConnectionHandler
+      .send(WeatherProviderForWidget.WIDGET_CHANNEL_ID, jsonData.toString().getBytes());
 } catch (JSONException e) {
-&nbsp;&nbsp;&nbsp;e.printStackTrace();
+   e.printStackTrace();
 }
 catch (IOException e_io) {
-&nbsp;&nbsp;&nbsp;e_io.printStackTrace();
+   e_io.printStackTrace();
 }
 
 // Service (WeatherProviderForWidget)
 @Override
 protected void onServiceConnectionResponse(SAPeerAgent peerAgent, SASocket socket,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int result) {
-&nbsp;&nbsp;&nbsp;if (result == SAAgent.CONNECTION_SUCCESS) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (socket != null) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mConnectionHandler = (ServiceConnection) socket;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;} else if (result == SAAgent.CONNECTION_ALREADY_EXIST) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Log.e(TAG, &quot;onServiceConnectionResponse, CONNECTION_ALREADY_EXIST&quot;);
-&nbsp;&nbsp;&nbsp;}
+                                           int result) {
+   if (result == SAAgent.CONNECTION_SUCCESS) {
+      if (socket != null) {
+         mConnectionHandler = (ServiceConnection) socket;
+      }
+   } else if (result == SAAgent.CONNECTION_ALREADY_EXIST) {
+      Log.e(TAG, "onServiceConnectionResponse, CONNECTION_ALREADY_EXIST");
+   }
 }
 
 public class WeatherProviderForWidget extends SAAgent {
-&nbsp;&nbsp;&nbsp;private static final String TAG = &quot;WeatherProviderForWidget&quot;;
-&nbsp;&nbsp;&nbsp;private static final Class&lt;ServiceConnection&gt; SASOCKET_CLASS =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ServiceConnection.class;
-&nbsp;&nbsp;&nbsp;static ServiceConnection mConnectionHandler = null;
-&nbsp;&nbsp;&nbsp;static final int WIDGET_CHANNEL_ID = 1000;
-
-&nbsp;&nbsp;&nbsp;@Override
-&nbsp;&nbsp;&nbsp;public void onCreate() {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super.onCreate();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SA mAccessory = new SA();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mAccessory.initialize(this);&nbsp;&nbsp;&nbsp;// Connect to Widget
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} catch (Exception e1) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e1.printStackTrace();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@Override
-&nbsp;&nbsp;&nbsp;protected void onServiceConnectionRequested(SAPeerAgent peerAgent) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (peerAgent != null) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;acceptServiceConnectionRequest(peerAgent);&nbsp;&nbsp;&nbsp;// Connection Accepted
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;public class ServiceConnection extends SASocket {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public ServiceConnection() {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super(ServiceConnection.class.getName());
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@Override
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public void onReceive(int channelId, byte[] data) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (mConnectionHandler == null) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String req_message = new String(data);&nbsp;&nbsp;&nbsp;// Get data from Widget
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (req_message.equals(new String(&quot;request&quot;))) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;final JSONObject jsonData = new JSONObject();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Calendar calendar = new GregorianCalendar();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SimpleDateFormat dateFormat = new SimpleDateFormat(&quot;hh:mm&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String timeStr = dateFormat.format(calendar.getTime());
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jsonData.put(&quot;time_text&quot;, timeStr);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jsonData.put(&quot;city_text&quot;, &quot;city name&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mConnectionHandler.send(WIDGET_CHANNEL_ID,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jsonData.toString().getBytes());
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} catch (JSONException e) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.printStackTrace();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} catch (IOException e) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.printStackTrace();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (req_message.equals(new String(&quot;delete_widget&quot;))) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Log.e(TAG, &quot;The widget was deleted from the viewer&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (req_message.equals(new String(&quot;Add city&quot;))) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Context context = getApplicationContext();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Intent intent = new Intent(context, ProviderActivity.class);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.startActivity(intent);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@Override
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;protected void onServiceConnectionLost(int reason) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Log.e(TAG, &quot;Service Connection is Lost&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mConnectionHandler = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   private static final String TAG = "WeatherProviderForWidget";
+   private static final Class&lt;ServiceConnection&gt; SASOCKET_CLASS =
+      ServiceConnection.class;
+   static ServiceConnection mConnectionHandler = null;
+   static final int WIDGET_CHANNEL_ID = 1000;
+
+   @Override
+   public void onCreate() {
+      super.onCreate();
+      SA mAccessory = new SA();
+      try {
+         mAccessory.initialize(this);   // Connect to Widget
+      } catch (Exception e1) {
+         e1.printStackTrace();
+      }
+   }
+
+   @Override
+   protected void onServiceConnectionRequested(SAPeerAgent peerAgent) {
+      if (peerAgent != null) {
+         acceptServiceConnectionRequest(peerAgent);   // Connection Accepted
+      }
+   }
+
+   public class ServiceConnection extends SASocket {
+      public ServiceConnection() {
+         super(ServiceConnection.class.getName());
+      }
+
+      @Override
+      public void onReceive(int channelId, byte[] data) {
+         if (mConnectionHandler == null) {
+            return;
+         }
+         String req_message = new String(data);   // Get data from Widget
+
+         if (req_message.equals(new String("request"))) {
+            final JSONObject jsonData = new JSONObject();
+            try {
+               Calendar calendar = new GregorianCalendar();
+               SimpleDateFormat dateFormat = new SimpleDateFormat("hh:mm");
+               String timeStr = dateFormat.format(calendar.getTime());
+               jsonData.put("time_text", timeStr);
+               jsonData.put("city_text", "city name");
+               mConnectionHandler.send(WIDGET_CHANNEL_ID,
+                                       jsonData.toString().getBytes());
+            } catch (JSONException e) {
+               e.printStackTrace();
+            } catch (IOException e) {
+               e.printStackTrace();
+            }
+         } else if (req_message.equals(new String("delete_widget"))) {
+               Log.e(TAG, "The widget was deleted from the viewer");
+         } else if (req_message.equals(new String("Add city"))) {
+               Context context = getApplicationContext();
+               Intent intent = new Intent(context, ProviderActivity.class);
+               intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
+               context.startActivity(intent);
+         }
+      }
+
+      @Override
+      protected void onServiceConnectionLost(int reason) {
+         Log.e(TAG, "Service Connection is Lost");
+         mConnectionHandler = null;
+      }
+   }
 }
 </pre>
-   </li> 
+   </li>
 </ul>
 
 <h3 id="comm_server">Communicating with a Web Server</h3>
-   
+
    <p>To get data from a Web server through the Internet, use the XMLHttpRequest API. The Web widget engine, however, does not support the full XMLHttpRequest specification. It supports only the <code>GET</code> method, and the <code>TEXT</code> and <code>JSON</code> data types.</p>
    <p>The following example shows Web widget communication with a Web server:</p>
 
 <pre class="prettyprint">
 &lt;!--Privilege--&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/internet&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/internet"/&gt;
 
 &lt;!--HTML--&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;button1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;getDataFromNetwork(&#39;txt.txt&#39;, handleResponseTEXT);&quot;&gt;Text&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;button2&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;getDataFromNetwork(&#39;json.json&#39;, handleResponseJSON);&quot;&gt;Json&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
+   &lt;button id="button1"
+           onclick="getDataFromNetwork('txt.txt', handleResponseTEXT);"&gt;Text&lt;/button&gt;
+   &lt;button id="button2"
+           onclick="getDataFromNetwork('json.json', handleResponseJSON);"&gt;Json&lt;/button&gt;
+   &lt;div id="result"&gt;&lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -1223,61 +1223,61 @@ public class WeatherProviderForWidget extends SAAgent {
 /* JavaScript */
 function errorHandling(e)
 {
-&nbsp;&nbsp;&nbsp;if (e.target.readyState == 3)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.target.abort();
-&nbsp;&nbsp;&nbsp;}
+   if (e.target.readyState == 3)
+   {
+      /* Error handling */
+      e.target.abort();
+   }
 }
 
 function getDataFromNetwork(file, handler)
 {
-&nbsp;&nbsp;&nbsp;var xhr = new XMLHttpRequest();
-&nbsp;&nbsp;&nbsp;xhr.open(&#39;GET&#39;, file, true);
-&nbsp;&nbsp;&nbsp;xhr.onreadystatechange = handler;
-&nbsp;&nbsp;&nbsp;xhr.onload = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.status == 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the response */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;xhr.send();
+   var xhr = new XMLHttpRequest();
+   xhr.open('GET', file, true);
+   xhr.onreadystatechange = handler;
+   xhr.onload = function()
+   {
+      if (this.status == 200)
+      {
+         /* Handle the response */
+      }
+   };
+   xhr.send();
 }
 
 /* In case of getting Text data */
 function handleResponseTEXT(e)
 {
-&nbsp;&nbsp;&nbsp;if (e.target.readyState == 4)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.target.status == 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;result&#39;).textContent = e.target.responseText;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   if (e.target.readyState == 4)
+   {
+      if (e.target.status == 200)
+      {
+         document.getElementById('result').textContent = e.target.responseText;
+      }
+      else
+      {
+         /* Error handling */
+      }
+   }
 }
 
 /* In case of getting JSON data */
 function handleResponseJSON(e)
 {
-&nbsp;&nbsp;&nbsp;if (e.target.readyState == 4)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.target.status == 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var data = JSON.parse(e.target.responseText);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var val = data.employees;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var result = val[0].firstName + &#39; &#39; + val[0].lastName;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;result&#39;).textContent = result;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   if (e.target.readyState == 4)
+   {
+      if (e.target.status == 200)
+      {
+         var data = JSON.parse(e.target.responseText);
+         var val = data.employees;
+         var result = val[0].firstName + ' ' + val[0].lastName;
+         document.getElementById('result').textContent = result;
+      }
+      else
+      {
+         /* Error handling */
+      }
+   }
 }
 </pre>
 
@@ -1358,45 +1358,45 @@ sdb dlog | grep ConsoleMessage
 <h2 id="performance">Performance Considerations</h2>
 <p>It is important to prevent unnecessary performance degradation in widgets. As a result, some restrictions must be followed when implementing Web widgets:</p>
 
-<ul> 
+<ul>
    <li>External network resources
-   
+
    <p>Linking external network resources in an HTML document often introduces significant network delays that result in slow loading of Web applications. Therefore, it is not allowed to load resources from external networks in a Web widget application.</p>
 <p>The following example illustrates forbidden external network resources:</p>
 
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;img id=&quot;img_water&quot; src=&quot;http://spec.example.com/image.png&quot;&gt;
+&lt;img id="img_water" src="http://spec.example.com/image.png"&gt;
 
-&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js&quot;/&gt;
-&lt;script src=&quot;http://code.angularjs.org/angular-1.0.0rc10.min.js&quot;/&gt;
+&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"/&gt;
+&lt;script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"/&gt;
 
-&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://spec.example.com/theme.css&quot;&gt;
+&lt;link rel="stylesheet" type="text/css" href="http://spec.example.com/theme.css"&gt;
 
 &lt;!--CSS--&gt;
 #myImage
 {
-&nbsp;&nbsp;&nbsp;content: url(&#39;http://spec.example.com/image.png&#39;);
+   content: url('http://spec.example.com/image.png');
 }
 </pre>
-   
+
    </li>
    <li>Image size
-   
+
    <p>The width and the height of the image files in Web widgets are limited to 1.5 times the base image resolution. For the wearable profile, for example, the base image resolution is 360 x 360, so the maximum size of the images is 540 x 540. As long as the image size is within the limit, you can include multiple images in the widget.</p>
-   
+
 <p align="center"><strong>Figure: Width and height of the image</strong></p>
 <p align="center"><img alt="Width and height of the image" src="../../images/webwidget_width_and_height_of_image.png" /></p>
-   </li> 
+   </li>
    <li>Resource size
    <p>A Web widget application consists of HTML documents, and JavaScript, CSS, and other resource files. To improve the loading performance, the total size of the Web widget application cannot exceed 50 Kbytes. Because of this limitation, you cannot include heavy JavaScript and CSS libraries, such as jQuery and AngularJS:</p>
-   
+
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;script src=&quot;lib/tau/wearable/js/tau.js&quot;/&gt;
-&lt;link rel=&quot;stylesheet&quot; href=&quot;lib/tau/wearable/theme/default/tau.css&quot;&gt;
+&lt;script src="lib/tau/wearable/js/tau.js"/&gt;
+&lt;link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.css"&gt;
 
-&lt;script src=&quot;libs/jquery/1.12.0/jquery.min.js&quot;/&gt;
+&lt;script src="libs/jquery/1.12.0/jquery.min.js"/&gt;
 </pre>
    </li>
 </ul>
@@ -1408,7 +1408,7 @@ sdb dlog | grep ConsoleMessage
 <li><a href="#user-content-can-i-use-hyperlinks-in-web-widgets">Can I use hyperlinks in Web widgets?</a></li>
 <li><a href="#user-content-what-font-styles-are-supported">Which font styles are supported?</a></li>
 <li><a href="#user-content-what-is-the-best-way-to-use-the-img-tag">What is the best way to use the <code>&lt;img&gt;</code> element?</a></li>
-<li><a href="#user-content-why-cant-i-use-iframes">Why can&#39;t I use iframes?</a></li>
+<li><a href="#user-content-why-cant-i-use-iframes">Why can't I use iframes?</a></li>
 <li><a href="#user-content-what-media-elements-are-supported">Which media elements are supported?</a></li>
 <li><a href="#user-content-how-can-i-create-tables">How can I create tables?</a></li>
 <li><a href="#user-content-what-kind-of-forms-can-i-use">What kind of forms can I use?</a></li>
@@ -1508,7 +1508,7 @@ sdb dlog | grep ConsoleMessage
 <li>Supported resolutions: lower than 1.5 times the base image resolution</li>
 </ul>
 
-<h4 id="user-content-why-cant-i-use-iframes">Why can&#39;t I use iframes?</h4>
+<h4 id="user-content-why-cant-i-use-iframes">Why can't I use iframes?</h4>
 
 <p>Typically, iframes are used for embedding another document within the current document. However, Web widgets provide simple services and content. Therefore, the Web widget engine does not support iframes.</p>
 
@@ -1523,68 +1523,68 @@ sdb dlog | grep ConsoleMessage
 <pre class="prettyprint">
 &lt;!--CSS style--&gt;
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;body
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 360px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 360px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 1.125rem;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: Black;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: White;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;#leftDiv
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid red;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;#rightDiv
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid red;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-left: -5px;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;.split
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: inline-block;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 45%; height: 100%;
-&nbsp;&nbsp;&nbsp;}
+   body
+   {
+      position: absolute;
+      margin: 0px;
+      padding: 0px;
+      top: 0px;
+      left: 0px;
+      width: 360px;
+      height: 360px;
+      font-size: 1.125rem;
+      color: Black;
+      background-color: White;
+   }
+
+   #leftDiv
+   {
+      text-align: center;
+      border: 1px solid red;
+   }
+
+   #rightDiv
+   {
+      text-align: center;
+      border: 1px solid red;
+      margin-left: -5px;
+   }
+
+   .split
+   {
+      display: inline-block;
+      width: 45%; height: 100%;
+   }
 &lt;/style&gt;
 
 &lt;!--Table-like div--&gt;
-&lt;div id=&quot;parentDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;leftDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;First Name
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;rightDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Last Name
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="parentDiv"&gt;
+   &lt;div class="split" id="leftDiv"&gt;
+      First Name
+   &lt;/div&gt;
+   &lt;div class="split" id="rightDiv"&gt;
+      Last Name
+   &lt;/div&gt;
 &lt;/div&gt;
-&lt;div id=&quot;parentDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;leftDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eve
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;rightDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jackson
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;leftDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;John
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;rightDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Doe
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;leftDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Adam
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;split&quot; id=&quot;rightDiv&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Johnson
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="parentDiv"&gt;
+   &lt;div class="split" id="leftDiv"&gt;
+      Eve
+   &lt;/div&gt;
+   &lt;div class="split" id="rightDiv"&gt;
+      Jackson
+   &lt;/div&gt;
+   &lt;div class="split" id="leftDiv"&gt;
+      John
+   &lt;/div&gt;
+   &lt;div class="split" id="rightDiv"&gt;
+      Doe
+   &lt;/div&gt;
+   &lt;div class="split" id="leftDiv"&gt;
+      Adam
+   &lt;/div&gt;
+   &lt;div class="split" id="rightDiv"&gt;
+      Johnson
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1597,16 +1597,16 @@ sdb dlog | grep ConsoleMessage
 <p>The Web widget engine does not support the <code>querySelector()</code> method. However, you can create an alternative select element, as shown in the following example:</p>
 
 <pre class="prettyprint">
-var parent = document.getElementById(&#39;parentDiv&#39;);
+var parent = document.getElementById('parentDiv');
 var c = parent.children;
 var i;
 
 for (i = 0; i &lt; c.length; i++)
 {
-&nbsp;&nbsp;&nbsp;if (c[i].id === &#39;leftDiv&#39;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;}
+   if (c[i].id === 'leftDiv')
+   {
+      /* Do something */
+   }
 }
 </pre>
 
@@ -1620,7 +1620,7 @@ var i;
 
 for (i = 0; i &lt; c.length; i++)
 {
-&nbsp;&nbsp;&nbsp;c[i].style.backgroundColor = &quot;red&quot;;
+   c[i].style.backgroundColor = "red";
 }
 </pre>
 
@@ -1629,7 +1629,7 @@ for (i = 0; i &lt; c.length; i++)
 <p>The Web widget engine does not support <code>innerHTML</code> and <code>innerText</code> properties. To get the text data of an element, use the <code>textContent</code> attribute, as shown in the following example:</p>
 
 <pre class="prettyprint">
-var parent = document.getElementById(&#39;parentDiv&#39;);
+var parent = document.getElementById('parentDiv');
 var parentText = parent.textContent;
 </pre>
 
@@ -1683,7 +1683,7 @@ var parentText = parent.textContent;
 
 <h4 id="user-content-is-it-possible-to-implement-only-web-widget-without-web-application">Is it possible to implement Web widgets without a Web application?</h4>
 
-<p>For your convenience during testing and debugging only, the Web widget engine supports the &quot;Only Web Widget Mode&quot;. To distribute Web widgets through the Tizen Store, each Web widget must have at least 1 parent Web application in the package. For more information, see <a href="#app_model">Application Model</a>.</p>
+<p>For your convenience during testing and debugging only, the Web widget engine supports the "Only Web Widget Mode". To distribute Web widgets through the Tizen Store, each Web widget must have at least 1 parent Web application in the package. For more information, see <a href="#app_model">Application Model</a>.</p>
 
 <h4 id="user-content-how-can-i-determine-which-apis-are-supported-in-web-widgets">How can I determine which APIs are supported in Web widgets?</h4>
 
@@ -1691,7 +1691,7 @@ var parentText = parent.textContent;
 
 <h4 id="user-content-can-web-widgets-re-use-the-javascript-library-or-css-styles-of-their-parent-web-application">Can Web widgets reuse the JavaScript library or CSS styles of their parent Web application?</h4>
 
-<p>Because Web application and Web widget resources are isolated from each other, Web widgets cannot use the JavaScript or CSS files in their parent Web application. The virtual root paths of the Web application and its Web widgets are not the same. You can copy Web application JavaScript and CSS files to the Web widget&#39;s folder. However, the Web Widget Specification places more restrictions on the Web widget files than on the Web application files. Therefore, verify all copied Web application JavaScript and CSS files using the Web widget validator.</p>
+<p>Because Web application and Web widget resources are isolated from each other, Web widgets cannot use the JavaScript or CSS files in their parent Web application. The virtual root paths of the Web application and its Web widgets are not the same. You can copy Web application JavaScript and CSS files to the Web widget's folder. However, the Web Widget Specification places more restrictions on the Web widget files than on the Web application files. Therefore, verify all copied Web application JavaScript and CSS files using the Web widget validator.</p>
 
 <h4 id="user-content-what-are-the-benefits-of-web-widget-apps-compared-with-native-widget-apps">What are the benefits of Web widgets compared with native widget applications?</h4>
 
diff --git a/org.tizen.guides/html/web/app_management/widget_app_w.htm b/org.tizen.guides/html/web/app_management/widget_app_w.htm
index 0ea4b35..42b5276 100644 (file)
--- a/org.tizen.guides/html/web/app_management/widget_app_w.htm
+++ b/org.tizen.guides/html/web/app_management/widget_app_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Widget Information</title> 
- </head> 
+  <title>Widget Information</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
        <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -63,21 +63,21 @@
 
 <div class="note">
        <strong>Note</strong>
-       Do not use &quot;widget&quot; as a name for any of your global variables, as it is the name of a global W3C object.
+       Do not use "widget" as a name for any of your global variables, as it is the name of a global W3C object.
 </div>
 
   <p>The main features of the Widget Service API include:</p>
   <ul>
-   <li>Widget retrieval 
+   <li>Widget retrieval
    <p>You can <a href="#widget">retrieve widgets</a>, for example, get the widgets installed on the device or information about their primary ID or size.</p></li>
 
-   <li>Widget management 
+   <li>Widget management
    <p>You can <a href="#management">manage individual widgets</a> by getting the widget name and a list of widget instances and widget variants, and by receiving notifications about the widget life-cycle events.</p></li>
 
-   <li>Widget instance management 
+   <li>Widget instance management
    <p>You can <a href="#instance">manage widget instances</a> by changing the instance data update interval and managing the instance content.</p></li>
   </ul>
-   
+
 
 <h2 id="widget" name="widget">Widget Retrieval</h2>
 
@@ -90,26 +90,26 @@
 <h3 id="get_widget" name="get_widget">Retrieving a Widget</h3>
 <p>Learning how to retrieve the installed widget list is a basic widget management skill:</p>
   <ol>
-   <li><p>Define a success handler implementing the <code>WidgetArraySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetArraySuccessCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p> 
+   <li><p>Define a success handler implementing the <code>WidgetArraySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetArraySuccessCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p>
 <pre class="prettyprint">
 var successCallback = function(widgets)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;There are &quot; + widgets.length + &quot; installed widgets&quot;);
+   console.log("There are " + widgets.length + " installed widgets");
 };
 
 var errorCallback = function(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error &quot; + error.message);
+   console.log("Error " + error.message);
 };
 </pre></li>
    <li><p>To get a list of all installed widgets, use the <code>getWidgets()</code> method of the <code>WidgetServiceManager</code> interface. If the optional <code>packageId</code> parameter is given, only the widgets belonging to the given package are returned.</p>
 <pre class="prettyprint">
-var packageId = &quot;org.tizen.contacts&quot;;
+var packageId = "org.tizen.contacts";
 tizen.widgetservice.getWidgets(successCallback, errorCallback, packageId);
 </pre>
 <p>You can also get a specific widget object by using the <code>getWidget()</code> method of the <code>WidgetServiceManager</code> interface:</p>
 <pre class="prettyprint">
-var myWidget = tizen.widgetservice.getWidget(&quot;org.tizen.gallery.widget&quot;);
+var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
 </pre></li>
   </ol>
 
@@ -117,13 +117,13 @@ var myWidget = tizen.widgetservice.getWidget(&quot;org.tizen.gallery.widget&quot
 
 <p>Learning how to retrieve the primary widget ID or size makes using the Widget Service API easy and convenient:</p>
   <ul>
-   <li><p>To get the primary widget ID of a given application or package ID, use the <code>getPrimaryWidgetId()</code> method of the <code>WidgetServiceManager</code> interface:</p> 
+   <li><p>To get the primary widget ID of a given application or package ID, use the <code>getPrimaryWidgetId()</code> method of the <code>WidgetServiceManager</code> interface:</p>
 <pre class="prettyprint">
-var widgetId = tizen.widgetservice.getPrimaryWidgetId(&quot;org.tizen.music-player&quot;);
+var widgetId = tizen.widgetservice.getPrimaryWidgetId("org.tizen.music-player");
 </pre></li>
-   <li><p>To get the size of the corresponding size type, use the <code>getSize()</code> method of the <code>WidgetServiceManager</code> interface, specifying the size type:</p> 
+   <li><p>To get the size of the corresponding size type, use the <code>getSize()</code> method of the <code>WidgetServiceManager</code> interface, specifying the size type:</p>
 <pre class="prettyprint">
-var widgetSize = tizen.widgetservice.getSize(&quot;4x4&quot;);
+var widgetSize = tizen.widgetservice.getSize("4x4");
 </pre></li>
   </ul>
 
@@ -141,11 +141,11 @@ var widgetSize = tizen.widgetservice.getSize(&quot;4x4&quot;);
   <ol>
    <li><p>Retrieve the widget whose name you need:</p>
 <pre class="prettyprint">
-var myWidget = tizen.widgetservice.getWidget(&quot;org.tizen.gallery.widget&quot;);
+var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
 </pre></li>
    <li><p>To get the widget name, use the <code>getName()</code> method of the <code>Widget</code> interface. If the locale parameter is omitted, the system locale is used.</p>
 <pre class="prettyprint">
-var name = myWidget.getName(&quot;en-us&quot;);
+var name = myWidget.getName("en-us");
 </pre></li>
   </ol>
 
@@ -153,20 +153,20 @@ var name = myWidget.getName(&quot;en-us&quot;);
 
 <p>Learning how to retrieve information about installed widget instances makes the Widget Service API more useful:</p>
   <ol>
-   <li><p>Define a success handler implementing the <code>WidgetInstancesCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetInstancesCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetInstancesCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p> 
+   <li><p>Define a success handler implementing the <code>WidgetInstancesCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetInstancesCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetInstancesCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p>
 <pre class="prettyprint">
 var successCallback = function(instances)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;There are &quot; + instances.length + &quot; instances&quot;);
+   console.log("There are " + instances.length + " instances");
 };
 
 var errorCallback = function(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error &quot; + error.message);
+   console.log("Error " + error.message);
 };
 </pre></li>
 
-   <li><p>To retrieve a list of all instances belonging to the widget, use the <code>getInstances()</code> method of the <code>Widget</code> interface:</p> 
+   <li><p>To retrieve a list of all instances belonging to the widget, use the <code>getInstances()</code> method of the <code>Widget</code> interface:</p>
 <pre class="prettyprint">
 myWidget.getInstances(successCallback, errorCallback);
 </pre></li>
@@ -176,21 +176,21 @@ myWidget.getInstances(successCallback, errorCallback);
 
 <p>To retrieve variants representing all of the supported widget size types:</p>
   <ol>
-   <li><p>Define a success handler implementing the <code>WidgetVariantsCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetVariantsCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetVariantsCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p> 
+   <li><p>Define a success handler implementing the <code>WidgetVariantsCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetVariantsCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetVariantsCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p>
 <pre class="prettyprint">
 var successCallback = function(variants)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;There are &quot; + variants.length + &quot; variants of the widget&quot;);
+   console.log("There are " + variants.length + " variants of the widget");
 };
 
 var errorCallback = function(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error &quot; + error.message);
+   console.log("Error " + error.message);
 };
 </pre></li>
    <li><p>Retrieve the widget whose variants you need:</p>
 <pre class="prettyprint">
-var myWidget = tizen.widgetservice.getWidget(&quot;org.tizen.gallery.widget&quot;);
+var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
 </pre></li>
    <li><p>To get a list of all variants, use the <code>getVariants()</code> method of the <code>Widget</code> interface:</p>
 <pre class="prettyprint">
@@ -198,7 +198,7 @@ myWidget.getVariants(successCallback, errorCallback);
 </pre>
 <p>You can also get a specific variant by using the <code>getVariant()</code> method with one of the supported size types as a parameter:</p>
 <pre class="prettyprint">
-var variant = myWidget.getVariant(&quot;4x4&quot;);
+var variant = myWidget.getVariant("4x4");
 </pre></li>
   </ol>
 
@@ -206,24 +206,24 @@ var variant = myWidget.getVariant(&quot;4x4&quot;);
 
 <p>Learning to receive notifications when the state of the widget has been changed is a useful widget management skill. There are 4 states that can be noticed: <code>CREATE</code>, <code>DESTROY</code>, <code>PAUSE</code>, and <code>RESUME</code>.</p>
   <ol>
-   <li><p>Define the event handler for state notifications using the <code>WidgetChangeCallback</code> listener interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetChangeCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetChangeCallback">wearable</a> applications):</p> 
+   <li><p>Define the event handler for state notifications using the <code>WidgetChangeCallback</code> listener interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetChangeCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetChangeCallback">wearable</a> applications):</p>
 <pre class="prettyprint">
 var WidgetChangeCallback = function(instance, event)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The instance &quot; + instance + &quot; has state &quot; + event);
+   console.log("The instance " + instance + " has state " + event);
 };
 </pre></li>
 
-   <li><p>Retrieve the widget object using the <code>getWidget()</code> method of the <code>WidgetServiceManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetServiceManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetServiceManager">wearable</a> applications):</p> 
+   <li><p>Retrieve the widget object using the <code>getWidget()</code> method of the <code>WidgetServiceManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetServiceManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetServiceManager">wearable</a> applications):</p>
 <pre class="prettyprint">
-var myWidget = tizen.widgetservice.getWidget(&quot;org.tizen.music-player.widget&quot;);
+var myWidget = tizen.widgetservice.getWidget("org.tizen.music-player.widget");
 </pre></li>
 
-   <li><p>Add the listener to use the defined event handler with the <code>addStateChangeListener()</code> method of the <code>Widget</code> interface:</p> 
+   <li><p>Add the listener to use the defined event handler with the <code>addStateChangeListener()</code> method of the <code>Widget</code> interface:</p>
 <pre class="prettyprint">
 var watchId = myWidget.addStateChangeListener(WidgetChangeCallback);
 </pre></li>
-   <li><p>To stop receiving notifications for the defined listener, use the <code>removeStateChangeListener()</code> method of the <code>Widget</code> interface with the previously obtained listener ID:</p> 
+   <li><p>To stop receiving notifications for the defined listener, use the <code>removeStateChangeListener()</code> method of the <code>Widget</code> interface with the previously obtained listener ID:</p>
 <pre class="prettyprint">
 myWidget.removeStateChangeListener(watchId);
 </pre></li>
@@ -235,20 +235,20 @@ myWidget.removeStateChangeListener(watchId);
       <li>Change the update period of the instance using the <code>changeUpdatePeriod()</code> method.</li>
       <li>Send or get content to and from the widget instance.</li>
     </ul>
-  
+
   <h3 id="period" name="period">Changing the Update Period</h3>
 
 <p>To change the update interval for the widget instance:</p>
   <ol>
-   <li><p>Retrieve the widget instance with the <code>getInstances()</code> method:</p> 
+   <li><p>Retrieve the widget instance with the <code>getInstances()</code> method:</p>
 <pre class="prettyprint">
 var instance;
 var successCallback = function(instances)
 {
-&nbsp;&nbsp;&nbsp;instance = instances[0];
+   instance = instances[0];
 };
 
-var myWidget = tizen.widgetservice.getWidget(&quot;org.tizen.gallery.widget&quot;);
+var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
 myWidget.getInstances(successCallback);
 </pre></li>
    <li><p>To change the update interval, use the <code>changeUpdatePeriod()</code> method of the <code>WidgetInstance</code> interface with the new value (in seconds):</p>
@@ -261,15 +261,15 @@ instance.changeUpdatePeriod(2);
 
 <p>Learning how to send and get the widget content is a useful widget management skill:</p>
   <ol>
-   <li><p>Obtain the widget instance with the <code>getInstances()</code> method:</p> 
+   <li><p>Obtain the widget instance with the <code>getInstances()</code> method:</p>
 <pre class="prettyprint">
 var instance;
 var successCallback = function(instances)
 {
-&nbsp;&nbsp;&nbsp;instance = instances[0];
+   instance = instances[0];
 };
 
-var myWidget = tizen.widgetservice.getWidget(&quot;org.tizen.gallery.widget&quot;);
+var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
 myWidget.getInstances(successCallback);
 </pre></li>
 
@@ -277,16 +277,16 @@ myWidget.getInstances(successCallback);
 <pre class="prettyprint">
 instance.sendContent(data, true);
 </pre></li>
-   <li><p>To retrieve widget instance content, define a success handler implementing the <code>WidgetContentCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetContentCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetContentCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p> 
+   <li><p>To retrieve widget instance content, define a success handler implementing the <code>WidgetContentCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetContentCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetContentCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p>
 <pre class="prettyprint">
 var successCallback = function(object)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Data successfully retrieved&quot;);
+   console.log("Data successfully retrieved");
 };
 
 var errorCallback = function(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error &quot; + error.message);
+   console.log("Error " + error.message);
 };
 </pre>
 <p>Afterwards, use the <code>getContent()</code> method of the <code>WidgetInstance</code> interface:</p>
@@ -317,4 +317,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>        
+</html>
diff --git a/org.tizen.guides/html/web/connectivity/bluetooth_w.htm b/org.tizen.guides/html/web/connectivity/bluetooth_w.htm
index 6d648ad..e96c65e 100644 (file)
--- a/org.tizen.guides/html/web/connectivity/bluetooth_w.htm
+++ b/org.tizen.guides/html/web/connectivity/bluetooth_w.htm
@@ -64,15 +64,15 @@
 
 <p>The main features of the Bluetooth API include:</p>
   <ul>
-   <li>Managing the local Bluetooth adapter 
+   <li>Managing the local Bluetooth adapter
    <p>You can <a href="#Managing_BT_Adapter">enable and disable the local Bluetooth adapter</a>, and change the device name for it.</p></li>
-   <li>Discovering devices 
+   <li>Discovering devices
    <p>You can <a href="#Discovering_BT_Devices">discover other Bluetooth devices</a>.</p></li>
-   <li>Creating a bonding with a Bluetooth device 
+   <li>Creating a bonding with a Bluetooth device
    <p>You can <a href="#Creating_Bond">create a bonding</a> with another device retrieved through the discovery process. The bonding allows the 2 devices to establish a connection.</p> </li>
-   <li>Connecting to and exchanging data with a Bluetooth device 
+   <li>Connecting to and exchanging data with a Bluetooth device
    <p>You can <a href="#Connecting_BT_device">connect to and exchange data with a remote Bluetooth device</a>.</p></li>
-   <li>Communicating with a health source device 
+   <li>Communicating with a health source device
    <p>The Health Device Profile defines the requirements for the Bluetooth health device implementation. In the profile, there are 2 device type: one device is a source, such as a blood pressure monitor or pulse oximeter, while the other is a sink, such as a mobile phone or laptop. You can use your device as a sink and <a href="#Communicating_Health">communicate with a health source device</a>.</p> </li>
   </ul>
 
@@ -105,14 +105,14 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the Application (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications) and Bluetooth (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html">wearable</a> applications) APIs, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/bluetooth&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/bluetooth"/&gt;
 </pre>
 
 
   <h2 id="Managing_BT_Adapter" name="Managing_BT_Adapter">Managing the Local Bluetooth Adapter</h2>
 
-  <p>You can enable or disable the local Bluetooth adapter, and set the device name using the system-provided service through the <code>ApplicationControl</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications).</p> 
+  <p>You can enable or disable the local Bluetooth adapter, and set the device name using the system-provided service through the <code>ApplicationControl</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications).</p>
   <p>To use the Bluetooth functionality of the device, you must switch the Bluetooth adapter on. The Bluetooth API does not provide a method to enable or disable the Bluetooth adapter of the device directly. Whenever Bluetooth is required, request a built-in Settings application to present the relevant switch to the user so that they can enable or disable the Bluetooth.</p>
   <p align="center"><strong>Figure: Bluetooth setting screen</strong></p>
   <p align="center"><img src="../../images/bluetooth_onoff.png" alt="Bluetooth setting screen"/></p>
@@ -120,8 +120,8 @@
    <li>Retrieve a <code>BluetoothAdapter</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and  <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <code>getDefaultAdapter()</code> method and prepare the <code>ApplicationControl</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and  <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications) to request the Bluetooth switching operation:
 <pre class="prettyprint">
 var bluetoothSwitchAppControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/edit&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/x-bluetooth-on-off&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit",
+                                null, "application/x-bluetooth-on-off");
 var adapter = tizen.bluetooth.getDefaultAdapter();
 </pre></li>
 
@@ -129,12 +129,12 @@ var adapter = tizen.bluetooth.getDefaultAdapter();
 <pre class="prettyprint">
 function launchSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Bluetooth Settings application is successfully launched.&quot;);
+   console.log("Bluetooth Settings application is successfully launched.");
 }
 function launchError(error)
 {
-&nbsp;&nbsp;&nbsp;alert(&quot;An error occurred: &quot; + error.name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;. Please enable Bluetooth through the Settings application.&quot;);
+   alert("An error occurred: " + error.name
+         + ". Please enable Bluetooth through the Settings application.");
 }
 </pre></li>
 
@@ -142,23 +142,23 @@ function launchError(error)
 <pre class="prettyprint">
 var serviceReply =
 {
-&nbsp;&nbsp;&nbsp;/* Called when the launched application reports success */
-&nbsp;&nbsp;&nbsp;onsuccess: function(data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (adapter.powered)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Bluetooth is successfully turned on.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Bluetooth is still switched off.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;/* Called when launched application reports failure */
-&nbsp;&nbsp;&nbsp;onfailure: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;Bluetooth Settings application reported failure.&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* Called when the launched application reports success */
+   onsuccess: function(data)
+   {
+      if (adapter.powered)
+      {
+         console.log("Bluetooth is successfully turned on.");
+      }
+      else
+      {
+         console.log("Bluetooth is still switched off.");
+      }
+   },
+   /* Called when launched application reports failure */
+   onfailure: function()
+   {
+      alert("Bluetooth Settings application reported failure.");
+   }
 };
 </pre></li>
 
@@ -166,48 +166,48 @@ var serviceReply =
 <pre class="prettyprint">
 if (adapter.powered)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Bluetooth is already enabled&quot;);
+   console.log("Bluetooth is already enabled");
 }
 else
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Try to launch the Bluetooth Settings application.&quot;);
-&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(bluetoothSwitchAppControl, null, launchSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;launchError, serviceReply);
+   console.log("Try to launch the Bluetooth Settings application.");
+   tizen.application.launchAppControl(bluetoothSwitchAppControl, null, launchSuccess,
+                                      launchError, serviceReply);
 }
 </pre></li>
 
 <li><p>To display the Bluetooth visibility switch, use the <code>application/x-bluetooth-visibility</code> mime option. Bluetooth visibility means that the device is discoverable by other Bluetooth devices.</p>
 <pre class="prettyprint">
 var bluetoothVisibilityAppControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/edit&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;application/x-bluetooth-visibility&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit",
+                                null, "application/x-bluetooth-visibility");
 function launchVisibilityError(error)
 {
-&nbsp;&nbsp;&nbsp;alert(&quot;An error occurred: &quot; + error.name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;. Please enable Bluetooth visibility through the Settings application.&quot;);
+   alert("An error occurred: " + error.name
+         + ". Please enable Bluetooth visibility through the Settings application.");
 }
 var serviceVisibilityReply =
 {
-&nbsp;&nbsp;&nbsp;/* Called when the launched application reports success */
-&nbsp;&nbsp;&nbsp;onsuccess: function(data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Bluetooth is &quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (adapter.visible ? &quot;now discoverable.&quot; : &quot;still not visible.&quot;));
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;/* Called when launched application reports failure */
-&nbsp;&nbsp;&nbsp;onfailure: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;Bluetooth Settings application reported failure.&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* Called when the launched application reports success */
+   onsuccess: function(data)
+   {
+      console.log("Bluetooth is "
+                  + (adapter.visible ? "now discoverable." : "still not visible."));
+   },
+   /* Called when launched application reports failure */
+   onfailure: function()
+   {
+      alert("Bluetooth Settings application reported failure.");
+   }
 };
 tizen.application.launchAppControl(bluetoothVisibilityAppControl, null, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;launchVisibilityError, serviceVisibilityReply);
+                                   launchVisibilityError, serviceVisibilityReply);
 </pre></li>
 
    <li><p>Set a friendly name for the device using the <code>setName()</code> method.</p> <p>The name helps to recognize the device in a list of <a href="#Discovering_BT_Devices">retrieved devices</a>.</p>
 <pre class="prettyprint">
 adapter.setName(chatServerName);
-</pre></li> 
+</pre></li>
   </ol>
 
   <h2 id="Discovering_BT_Devices" name="Discovering_BT_Devices">Discovering Bluetooth Devices</h2>
@@ -215,7 +215,7 @@ adapter.setName(chatServerName);
 <p>You can also retrieve the known devices which were bonded or found in a prior discovery process.</p>
 <p>To search for remote devices and get the known devices:</p>
   <ol>
-   <li>Retrieve a <code>BluetoothAdapter</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <code>getDefaultAdapter()</code> method: 
+   <li>Retrieve a <code>BluetoothAdapter</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <code>getDefaultAdapter()</code> method:
 <pre class="prettyprint">
 var adapter = tizen.bluetooth.getDefaultAdapter();
 </pre></li>
@@ -224,11 +224,11 @@ var adapter = tizen.bluetooth.getDefaultAdapter();
 <pre class="prettyprint">
 var discoverDevicesSuccessCallback =
 {
-&nbsp;&nbsp;&nbsp;/* When a device is found */
-&nbsp;&nbsp;&nbsp;ondevicefound: function(device)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device - name: &quot; + device.name);
-&nbsp;&nbsp;&nbsp;}
+   /* When a device is found */
+   ondevicefound: function(device)
+   {
+      console.log("Found device - name: " + device.name);
+   }
 }
 
 /* Discover devices */
@@ -245,7 +245,7 @@ adapter.discoverDevices(discoverDevicesSuccessCallback, null);
 /* When a known device is found */
 function onGotDevices(devices)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The number of known devices: &quot; + devices.length);
+   console.log("The number of known devices: " + devices.length);
 }
 
 /* Retrieve known devices */
@@ -265,26 +265,26 @@ var adapter = tizen.bluetooth.getDefaultAdapter();
 <pre class="prettyprint">
 function onBondingSuccessCallback(device)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;A bonding is created - name: &quot; + device.name);
+   console.log("A bonding is created - name: " + device.name);
 }
 
 function onErrorCallback(e)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cannot create a bonding, reason: &quot; + e.message);
+   console.log("Cannot create a bonding, reason: " + e.message);
 }
 
-adapter.createBonding(&quot;35:F4:59:D1:7A:03&quot;, onBondingSuccessCallback, onErrorCallback);
+adapter.createBonding("35:F4:59:D1:7A:03", onBondingSuccessCallback, onErrorCallback);
 </pre>
 
 <div class="note">
        <strong>Note</strong>
-       The MAC address of the Bluetooth device is a <code>BluetoothAddress</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAddress">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAddress">wearable</a> applications). You can get the MAC address of the peer device from the <code>BluetoothDevice</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications), which is returned in the success callback of the <code>BluetoothAdapter</code>&#39;s <code>getKnownDevices()</code> and <code>discoverDevices()</code> methods.
+       The MAC address of the Bluetooth device is a <code>BluetoothAddress</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAddress">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAddress">wearable</a> applications). You can get the MAC address of the peer device from the <code>BluetoothDevice</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications), which is returned in the success callback of the <code>BluetoothAdapter</code>'s <code>getKnownDevices()</code> and <code>discoverDevices()</code> methods.
 </div>
    </li>
 
    <li><p>To end the bonding with a remote device, use the <code>destroyBonding()</code> method:</p>
 <pre class="prettyprint">
-adapter.destroyBonding(&quot;35:F4:59:D1:7A:03&quot;);
+adapter.destroyBonding("35:F4:59:D1:7A:03");
 </pre></li>
   </ol>
 
@@ -300,7 +300,7 @@ var adapter = tizen.bluetooth.getDefaultAdapter();
 </pre></li>
    <li><p>To register a service and allow client devices to connect to it, use the <code>registerRFCOMMServiceByUUID()</code> method on the server device:</p>
 <pre class="prettyprint">
-adapter.registerRFCOMMServiceByUUID(serviceUUID, &quot;My service&quot;);
+adapter.registerRFCOMMServiceByUUID(serviceUUID, "My service");
 </pre>
 <div class="note">
        <strong>Note</strong>
@@ -314,13 +314,13 @@ adapter.registerRFCOMMServiceByUUID(serviceUUID, &quot;My service&quot;);
        <li><p>To connect to the server device, use the <code>connectToServiceByUUID()</code> method on the client device:</p>
 <pre class="prettyprint">
 device.connectToServiceByUUID(serviceUUID, function(sock)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;socket connected&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;socket = sock;
-&nbsp;&nbsp;&nbsp;}, function(error)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Error while connecting: &quot; + error.message);
-&nbsp;&nbsp;&nbsp;}
+   {
+      console.log("socket connected");
+      socket = sock;
+   }, function(error)
+   {
+      console.log("Error while connecting: " + error.message);
+   }
 );
 </pre>
 
@@ -339,7 +339,7 @@ var length = socket.writeData(somemsg);
 var data = socket.readData();
 </pre>
 
-<p>When an incoming message is received from the peer device, the <code>onmessage</code> event handler in the <code>BluetoothSocket</code> interface is triggered. </p></li> 
+<p>When an incoming message is received from the peer device, the <code>onmessage</code> event handler in the <code>BluetoothSocket</code> interface is triggered. </p></li>
   </ol>
 
   <h2 id="Communicating_Health" name="Communicating_Health">Communicating with a Health Source Device</h2>
@@ -349,18 +349,18 @@ var data = socket.readData();
    <li>Retrieve a <code>BluetoothHealthProfileHandler</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthProfileHandler">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthProfileHandler">wearable</a> applications):
 <pre class="prettyprint">
 var adapter = tizen.bluetooth.getDefaultAdapter();
-var healthProfileHandler = adapter.getBluetoothProfileHandler(&quot;HEALTH&quot;);
+var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
 var healthApplication = null, healthChannel = null;
 </pre></li>
    <li><p>Register an application as a sink to wait for connection requests from health source devices (4100 means oximeter):</p>
 <pre class="prettyprint">
 function onSinkApp(app)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Success&quot;);
-&nbsp;&nbsp;&nbsp;healthApplication = app;
+   console.log("Success");
+   healthApplication = app;
 }
 
-healthProfileHandler.registerSinkApplication(4100, &quot;testSinkApp&quot;, onSinkApp);
+healthProfileHandler.registerSinkApplication(4100, "testSinkApp", onSinkApp);
 </pre>
 <p>When the sink application is registered successfully, the <code>BluetoothHealthApplicationSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplicationSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthApplicationSuccessCallback">wearable</a> applications) is invoked and you can get the registered sink application object.</p></li>
 <li>Before establishing a connection, your device must be bonded with a health source device. For more information, see <a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a>.</li>
@@ -368,16 +368,16 @@ healthProfileHandler.registerSinkApplication(4100, &quot;testSinkApp&quot;, onSi
 <pre class="prettyprint">
 function onConnect(channel)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Success&quot;);
-&nbsp;&nbsp;&nbsp;healthChannel = channel;
+   console.log("Success");
+   healthChannel = channel;
 }
 
-adapter.getDevice(&quot;35:F4:59:D1:7A:03&quot;, function(device)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;healthProfileHandler.connectToSource(device, healthApplication, onConnect);
-&nbsp;&nbsp;&nbsp;});
+adapter.getDevice("35:F4:59:D1:7A:03", function(device)
+   {
+      healthProfileHandler.connectToSource(device, healthApplication, onConnect);
+   });
 </pre>
-<p>When a connection between 2 devices is established, the success callback of the <code>connectToSource()</code> method is called. In addition, the <code>onconnect</code> event handler of the <code>BluetoothHealthApplication</code> instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplication">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthApplication">wearable</a> applications) is called, if the success callback attribute is set. You can get the connected <code>BluetoothHealthChannel</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannel">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthChannel">wearable</a> applications) from the callbacks.</p></li> 
+<p>When a connection between 2 devices is established, the success callback of the <code>connectToSource()</code> method is called. In addition, the <code>onconnect</code> event handler of the <code>BluetoothHealthApplication</code> instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplication">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthApplication">wearable</a> applications) is called, if the success callback attribute is set. You can get the connected <code>BluetoothHealthChannel</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannel">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthChannel">wearable</a> applications) from the callbacks.</p></li>
 <li><p>To send data to the source device, use the <code>sendData()</code> method:</p>
 <pre class="prettyprint">
 var dataToSend = [0, 0, 0];
@@ -401,7 +401,7 @@ healthChannel.close();
 <pre class="prettyprint">
 function successcallback(device)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Found device: &quot; + device.name + &quot; [&quot; + device.address + &quot;]&quot;);
+   console.log("Found device: " + device.name + " [" + device.address + "]");
 };
 </pre>
 
@@ -445,18 +445,18 @@ var adapter = tizen.bluetooth.getLEAdapter();
 <pre class="prettyprint">
 var advertiseData = new tizen.BluetoothLEAdvertiseData(
 {
-&nbsp;&nbsp;&nbsp;includeName: true,
-&nbsp;&nbsp;&nbsp;serviceuuids: [&quot;180f&quot;] /* 180F is 16bit Battery Service UUID */
+   includeName: true,
+   serviceuuids: ["180f"] /* 180F is 16bit Battery Service UUID */
 });
 var connectable = true;
 
-adapter.startAdvertise(advertiseData, &quot;ADVERTISE&quot;, function onstate(state)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Advertising configured: &quot; + state);
-&nbsp;&nbsp;&nbsp;}, function(error)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;startAdvertise() failed: &quot; + error.message);
-&nbsp;&nbsp;&nbsp;}, &quot;LOW_LATENCY&quot;, connectable);
+adapter.startAdvertise(advertiseData, "ADVERTISE", function onstate(state)
+   {
+      console.log("Advertising configured: " + state);
+   }, function(error)
+   {
+      console.log("startAdvertise() failed: " + error.message);
+   }, "LOW_LATENCY", connectable);
 </pre>
 
 <div class="note">
@@ -484,12 +484,12 @@ var adapter = tizen.bluetooth.getLEAdapter();
 <pre class="prettyprint">
 function connectFail(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Failed to connect to device: &quot; + e.message);
+   console.log("Failed to connect to device: " + e.message);
 }
 
 function connectSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Connected to device&quot;);
+   console.log("Connected to device");
 }
 </pre>
    </li>
@@ -501,15 +501,15 @@ var remoteDevice = null;
 
 function onDeviceFound(device)
 {
-&nbsp;&nbsp;&nbsp;if (remoteDevice === null)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteDevice = device;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device &quot; + device.name + &quot;. Connecting...&quot;);
+   if (remoteDevice === null)
+   {
+      remoteDevice = device;
+      console.log("Found device " + device.name + ". Connecting...");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device.connect(connectSuccess, connectFail);
-&nbsp;&nbsp;&nbsp;}
+      device.connect(connectSuccess, connectFail);
+   }
 
-&nbsp;&nbsp;&nbsp;adapter.stopScan();
+   adapter.stopScan();
 }
 </pre>
    </li>
@@ -540,16 +540,16 @@ var adapter = tizen.bluetooth.getLEAdapter();
 <pre class="prettyprint">
 var connectionListener =
 {
-&nbsp;&nbsp;&nbsp;onconnected: function(device)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Connected to the device: &quot; + device.name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; [&quot; + device.address + &quot;]&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;ondisconnected: function(device)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Disconnected from the device &quot; + device.name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; [&quot; + device.address + &quot;]&quot;);
-&nbsp;&nbsp;&nbsp;}
+   onconnected: function(device)
+   {
+      console.log("Connected to the device: " + device.name
+                  + " [" + device.address + "]");
+   },
+   ondisconnected: function(device)
+   {
+      console.log("Disconnected from the device " + device.name
+                  + " [" + device.address + "]");
+   }
 };
 </pre>
    </li>
@@ -562,17 +562,17 @@ var watchId;
 
 function onDeviceFound(device)
 {
-&nbsp;&nbsp;&nbsp;if (remoteDevice === null)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteDevice = device;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Found device &quot; + device.name + &quot;. Connecting...&quot;);
+   if (remoteDevice === null)
+   {
+      remoteDevice = device;
+      console.log("Found device " + device.name + ". Connecting...");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;watchId = remoteDevice.addConnectStateChangeListener(connectionListener);
+      watchId = remoteDevice.addConnectStateChangeListener(connectionListener);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteDevice.connect();
-&nbsp;&nbsp;&nbsp;}
+      remoteDevice.connect();
+   }
 
-&nbsp;&nbsp;&nbsp;adapter.stopScan();
+   adapter.stopScan();
 }
 </pre>
    </li>
@@ -598,19 +598,19 @@ remoteDevice.removeConnectStateChangeListener(watchId);
 <pre class="prettyprint">
 function showGATTService(service, indent)
 {
-&nbsp;&nbsp;&nbsp;if (indent === undefined)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indent = &quot;&quot;;
-&nbsp;&nbsp;&nbsp;}
+   if (indent === undefined)
+   {
+      indent = "";
+   }
 
-&nbsp;&nbsp;&nbsp;console.log(indent + &quot;Service &quot; + service.uuid + &quot;. Has &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ service.characteristics.length + &quot; characteristics and &quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ service.services.length + &quot; sub-services.&quot;);
+   console.log(indent + "Service " + service.uuid + ". Has "
+               + service.characteristics.length + " characteristics and "
+               + service.services.length + " sub-services.");
 
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; service.services.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showGATTService(service.services[i], indent + &quot;   &quot;);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; service.services.length; i++)
+   {
+      showGATTService(service.services[i], indent + "   ");
+   }
 }
 </pre>
    </li>
@@ -625,9 +625,9 @@ var i = 0, service = null;
 
 for (i; i &lt; serviceUUIDs.length; i++)
 {
-&nbsp;&nbsp;&nbsp;service = remoteDevice.getService(serviceUUIDs[i]);
+   service = remoteDevice.getService(serviceUUIDs[i]);
 
-&nbsp;&nbsp;&nbsp;showGATTService(service);
+   showGATTService(service);
 }
 </pre>
    </li>
@@ -635,7 +635,7 @@ for (i; i &lt; serviceUUIDs.length; i++)
 <pre class="prettyprint">
 var services = remoteDevice.getServiceAllUuids();
 
-console.log(&quot;Services length &quot; + services.length);
+console.log("Services length " + services.length);
 </pre>
 </li>
   </ol>
@@ -665,12 +665,12 @@ var property = gattService.characteristics[0];
 <pre class="prettyprint">
 function readSuccess(value)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Characteristic value: &quot; + value);
+   console.log("Characteristic value: " + value);
 }
 
 function readFail(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;readValue() failed: &quot; + error);
+   console.log("readValue() failed: " + error);
 }
 </pre>
    </li>
@@ -678,7 +678,7 @@ function readFail(error)
 <pre class="prettyprint">
 if (!property.isReadable)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Property seems not to be readable. Attempting to read...&quot;);
+   console.log("Property seems not to be readable. Attempting to read...");
 }
 property.readValue(readSuccess, readFail);
 </pre>
@@ -687,17 +687,17 @@ property.readValue(readSuccess, readFail);
 <pre class="prettyprint">
 function writeSuccess(value)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Written&quot;);
+   console.log("Written");
 }
 
 function writeFail(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;writeValue() failed: &quot; + error);
+   console.log("writeValue() failed: " + error);
 }
 
 if (!property.isWritable)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Property seems not to be writable. Attempting to write...&quot;);
+   console.log("Property seems not to be writable. Attempting to write...");
 }
 var newValue = [82];
 
@@ -731,7 +731,7 @@ var property = gattService.characteristics[0];
 <pre class="prettyprint">
 function onValueChange(value)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Characteristic value is now: &quot; + value);
+   console.log("Characteristic value is now: " + value);
 }
 </pre>
    </li>
@@ -776,12 +776,12 @@ var descriptor = characteristic.descriptors[0];
 <pre class="prettyprint">
 function readSuccess(value)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Descriptor value: &quot; + value);
+   console.log("Descriptor value: " + value);
 }
 
 function readFail(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;readValue() failed: &quot; + error);
+   console.log("readValue() failed: " + error);
 }
 </pre>
    </li>
@@ -794,12 +794,12 @@ descriptor.readValue(readSuccess, readFail);
 <pre class="prettyprint">
 function writeSuccess(value)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Written&quot;);
+   console.log("Written");
 }
 
 function writeFail(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;writeValue() failed: &quot; + error);
+   console.log("writeValue() failed: " + error);
 }
 
 var newValue = [3];
diff --git a/org.tizen.guides/html/web/connectivity/convergence_w.htm b/org.tizen.guides/html/web/connectivity/convergence_w.htm
index ad36ae5..bbf335e 100644 (file)
--- a/org.tizen.guides/html/web/connectivity/convergence_w.htm
+++ b/org.tizen.guides/html/web/connectivity/convergence_w.htm
@@ -75,9 +75,9 @@
     <h2 id="Prerequisites">Prerequisites</h2>
     <p>To use the Convergence API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/convergence.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/convergence.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
     <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/bluetooth&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/internet&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/d2d.datasharing&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/bluetooth"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/internet"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/d2d.datasharing"/&gt;
 </pre>
 
     <h2 id="Discovering_Devices">Searching for Nearby Devices</h2>
@@ -90,11 +90,11 @@ var timeout = 60 * 60;
 
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
+   tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
 }
 catch (err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name + &#39;: &#39; + err.message);
+   console.log(err.name + ': ' + err.message);
 }
 </pre></li>
 
@@ -108,45 +108,45 @@ catch (err)
     <pre class="prettyprint">
 var discoverySuccessCallback =
 {
-&nbsp;&nbsp;&nbsp;onfound: function(device)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Found a device&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot; - id: &quot; + device.id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot; - name: &quot; + device.name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot; - type: &quot; + device.type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot; - service amount: &quot; + device.services.length);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i in device.services)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (device.services[i] instanceof RemoteAppControlService)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (device.services[i].connectionState != &quot;CONNECTED&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device.services[i].connect(onconnected, onerror);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;onfinished: function(foundDevices)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39; Device discovery has finished&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (foundDevices.length &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot; - devices found: &quot; + foundDevices.length);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   onfound: function(device)
+   {
+      console.log('Found a device');
+      console.log(" - id: " + device.id);
+      console.log(" - name: " + device.name);
+      console.log(" - type: " + device.type);
+      console.log(" - service amount: " + device.services.length);
+      for (i in device.services)
+      {
+         if (device.services[i] instanceof RemoteAppControlService)
+         {
+            if (device.services[i].connectionState != "CONNECTED")
+            {
+              device.services[i].connect(onconnected, onerror);
+            }
+         }
+      }
+   },
+
+   onfinished: function(foundDevices)
+   {
+      console.log(' Device discovery has finished');
+      if (foundDevices.length &gt; 0)
+      {
+        console.log(" - devices found: " + foundDevices.length);
+     }
+   }
 };
 
 function onerror(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name + &#39;: &#39; + err.message);
+   console.log(err.name + ': ' + err.message);
 }
 </pre></li>
       <li><p>When a connection is established, the <code>onconnected</code> callback is invoked with the connected <code>service</code> as a parameter:</p>
       <pre class="prettyprint">
 function onconnected(service)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Connected to the service&#39;);
+   console.log('Connected to the service');
 }
 </pre>
         </li>
@@ -159,31 +159,31 @@ function onconnected(service)
     <p>To instantiate a server service:</p>
 
     <ol>
-        <li>Create a <code>ChannelInfo</code> object. It identifies the server and is used by the clients to address their demands. The first parameter of the <code>ChannelInfo</code> constructor is the server&#39;s application ID, set in its <code>config.xml</code> file. The second parameter is an ID set by you.
+        <li>Create a <code>ChannelInfo</code> object. It identifies the server and is used by the clients to address their demands. The first parameter of the <code>ChannelInfo</code> constructor is the server's application ID, set in its <code>config.xml</code> file. The second parameter is an ID set by you.
         <pre class="prettyprint">
-var requestChannel = new tizen.ChannelInfo(&#39;targetApp0.main&#39;, &#39;chA&#39;);
+var requestChannel = new tizen.ChannelInfo('targetApp0.main', 'chA');
 </pre>
         </li>
         <li>Define the success and error callbacks for the server service start:
         <pre class="prettyprint">
 function onerror(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name +&#39;: &#39; + err.message);
+   console.log(err.name +': ' + err.message);
 }
 
 function onstarted(channel, clientInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Channel started&#39;);
-&nbsp;&nbsp;&nbsp;console.log(&#39;channel uri: &#39; + channel.uri);
-&nbsp;&nbsp;&nbsp;console.log(&#39;channel id: &#39; + channel.id);
-
-&nbsp;&nbsp;&nbsp;if (clientInfo)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;clientInfo&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;isHost: &#39; + clientInfo.isHost);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;client id: &#39; + clientInfo.clientId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;connection time: &#39; + clientInfo.connectionTime);
-&nbsp;&nbsp;&nbsp;}
+   console.log('Channel started');
+   console.log('channel uri: ' + channel.uri);
+   console.log('channel id: ' + channel.id);
+
+   if (clientInfo)
+   {
+      console.log('clientInfo');
+      console.log('isHost: ' + clientInfo.isHost);
+      console.log('client id: ' + clientInfo.clientId);
+      console.log('connection time: ' + clientInfo.connectionTime);
+   }
 }
 </pre>
         </li>
@@ -206,14 +206,14 @@ service.start(requestChannel, onstarted, onerror);
         <pre class="prettyprint">
 function onnotify(channel, payload, senderclientid)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;On service notification&#39;);
-&nbsp;&nbsp;&nbsp;console.log(&#39;channel uri: &#39; + channel.uri);
-&nbsp;&nbsp;&nbsp;console.log(&#39;channel id: &#39; + channel.id);
-&nbsp;&nbsp;&nbsp;console.log(&#39;client id of sender: &#39; + senderclientid);
-&nbsp;&nbsp;&nbsp;for (i in payload)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;payload: &#39; + payload[i].key + &#39;-&#39; + payload[i].value);
-&nbsp;&nbsp;&nbsp;}
+   console.log('On service notification');
+   console.log('channel uri: ' + channel.uri);
+   console.log('channel id: ' + channel.id);
+   console.log('client id of sender: ' + senderclientid);
+   for (i in payload)
+   {
+      console.log('payload: ' + payload[i].key + '-' + payload[i].value);
+   }
 }
 </pre></li>
 
@@ -233,72 +233,72 @@ service.setListener(onnotify);
         <pre class="prettyprint">
 function onerror(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name +&#39;: &#39; + err.message);
+   console.log(err.name +': ' + err.message);
 }
 
 var timeout = 60 * 60;
 
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
+   tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
 }
 catch (err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name + &#39;: &#39; + err.message);
+   console.log(err.name + ': ' + err.message);
 }
 </pre></li>
         <li><p>Create a <code>ChannelInfo</code> instance with the same URI and ID as the channel used on the server side. Then start the available server service and send the payload to it.</p>
         <pre class="prettyprint">
 var serverService;
-var channel = new tizen.ChannelInfo(&#39;targetApp0.main&#39;, &#39;chA&#39;);
+var channel = new tizen.ChannelInfo('targetApp0.main', 'chA');
 
 function onerror(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name +&#39;: &#39; + err.message);
+   console.log(err.name +': ' + err.message);
 }
 
 var requestPayload =
 {
-&nbsp;&nbsp;&nbsp;key: &quot;testPayload&quot;,
-&nbsp;&nbsp;&nbsp;value: &quot;Hello!&quot;
+   key: "testPayload",
+   value: "Hello!"
 };
 
 function sendSuccessCallback(channel)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;requestPayload sent&#39;);
-&nbsp;&nbsp;&nbsp;console.log(&#39;channel uri: &#39; + channel.uri);
-&nbsp;&nbsp;&nbsp;console.log(&#39;channel id: &#39; + channel.id);
+   console.log('requestPayload sent');
+   console.log('channel uri: ' + channel.uri);
+   console.log('channel id: ' + channel.id);
 }
 
 function onstarted(channel, clientInfo)
 {
-&nbsp;&nbsp;&nbsp;serverService.send(channel, requestPayload, sendSuccessCallback, onerror);
+   serverService.send(channel, requestPayload, sendSuccessCallback, onerror);
 }
 
 var discoverySuccessCallback =
 {
-&nbsp;&nbsp;&nbsp;onfound: function(device)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i in device.services)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (device.services[i] instanceof AppCommunicationServerService)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;serverService = device.services[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device.services[i].start(channel, onstarted, onerror);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;onfinished: function(foundDevices)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39; Device discovery has finished&#39;);
-&nbsp;&nbsp;&nbsp;}
+   onfound: function(device)
+   {
+      for (i in device.services)
+      {
+         if (device.services[i] instanceof AppCommunicationServerService)
+         {
+            serverService = device.services[i];
+            device.services[i].start(channel, onstarted, onerror);
+         }
+      }
+   },
+
+   onfinished: function(foundDevices)
+   {
+      console.log(' Device discovery has finished');
+   }
 };
 </pre></li>
     </ol>
     <h2 id="Launch_App">Launching an Application Remotely</h2>
 
-       <p>This use case assumes that a &quot;targetApp0.main&quot; application has been installed on the remote device.</p>
+       <p>This use case assumes that a "targetApp0.main" application has been installed on the remote device.</p>
 
     <p>To launch an application on a remote device:</p>
 
@@ -307,70 +307,70 @@ var discoverySuccessCallback =
         <pre class="prettyprint">
 var discoverySuccessCallback =
 {
-&nbsp;&nbsp;&nbsp;onfound: function(device)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i in device.services)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (device.services[i].type === &quot;REMOTE_APP_CONTROL&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (device.services[i].connectionState != &quot;CONNECTED&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device.services[i].connect(onconnected, onerror);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device.services[i].start(onstarted, onerror);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;onfinished: function(foundDevices)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Device discovery has finished&#39;);
-&nbsp;&nbsp;&nbsp;}
+   onfound: function(device)
+   {
+      for (i in device.services)
+      {
+         if (device.services[i].type === "REMOTE_APP_CONTROL")
+         {
+            if (device.services[i].connectionState != "CONNECTED")
+            {
+               device.services[i].connect(onconnected, onerror);
+            }
+            else
+            {
+               device.services[i].start(onstarted, onerror);
+            }
+         }
+      }
+   },
+
+   onfinished: function(foundDevices)
+   {
+      console.log('Device discovery has finished');
+   }
 };
 
 function onerror(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name +&#39;: &#39; + err.message);
+   console.log(err.name +': ' + err.message);
 }
 
 var timeout = 60 * 60;
 
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
+   tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
 }
 catch (err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name + &#39;: &#39; + err.message);
+   console.log(err.name + ': ' + err.message);
 }
 </pre></li>
         <li><p>An application on the remote device is started from the <code>onconnected</code> callback. The <code>remoteAppControlCallback</code> method handles the data sent from the remote device.</p>
         <pre class="prettyprint">
-var requestAppId = &#39;targetApp0.main&#39;;
+var requestAppId = 'targetApp0.main';
 
 function remoteAppControlCallback(data)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; data.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;key: &quot; + data[i].key + &quot;value: &quot; + data[i].value[0]);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;service.disconnect();
+   for (var i = 0; i &lt; data.length; i++)
+   {
+      console.log("key: " + data[i].key + "value: " + data[i].value[0]);
+   }
+   service.disconnect();
 }
 
 function onstarted(service)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Remote app control service started&#39;);
-&nbsp;&nbsp;&nbsp;service.launch(requestAppId, remoteAppControlCallback, onerror);
+   console.log('Remote app control service started');
+   service.launch(requestAppId, remoteAppControlCallback, onerror);
 }
 
 function onconnected(service)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Connected to the remote app control service&#39;);
-&nbsp;&nbsp;&nbsp;service.start(onstarted, onerror);
-&nbsp;&nbsp;&nbsp;service.launch(requestAppId, remoteAppControlCallback, onerror);
+   console.log('Connected to the remote app control service');
+   service.start(onstarted, onerror);
+   service.launch(requestAppId, remoteAppControlCallback, onerror);
 }
 </pre></li>
     </ol>
@@ -382,61 +382,61 @@ function onconnected(service)
         <pre class="prettyprint">
 var discoverySuccessCallback =
 {
-&nbsp;&nbsp;&nbsp;onfound: function(device)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i in device.services)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (device.services[i] instanceof RemoteAppControlService)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (device.services[i].connectionState != &quot;CONNECTED&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device.services[i].connect(onconnected, onerror);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;onfinished: function(foundDevices)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39; Device discovery has finished&#39;);
-&nbsp;&nbsp;&nbsp;}
+   onfound: function(device)
+   {
+      for (i in device.services)
+      {
+         if (device.services[i] instanceof RemoteAppControlService)
+         {
+            if (device.services[i].connectionState != "CONNECTED")
+            {
+               device.services[i].connect(onconnected, onerror);
+            }
+         }
+      }
+   },
+
+   onfinished: function(foundDevices)
+   {
+     console.log(' Device discovery has finished');
+   }
 };
 
 function onerror(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name +&#39;: &#39; + err.message);
+   console.log(err.name +': ' + err.message);
 }
 
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, 60 * 60);
+   tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, 60 * 60);
 }
 catch (err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name + &#39;: &#39; + err.message);
+   console.log(err.name + ': ' + err.message);
 }
 </pre></li>
     <li><p>Create the <code>ApplicationControl</code> object:</p>
        <pre class="prettyprint">
 var requestAppControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&#39;http://tizen.org/appcontrol/operation/view&#39;, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;image/jpeg&#39;, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&#39;images&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[testImgData])]);
+   new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view', null,
+                                'image/jpeg', null,
+                                [new tizen.ApplicationControlData('images',
+                                                                  [testImgData])]);
 </pre></li>
     <li><p>Use the <code>onconnected()</code> callback to send the application control request to the remote service. The <code>launchAppControl()</code> method takes as parameters the <code>ApplicationControl</code> object, optionally the target application ID, and a callback defining the actions to be taken on the remote service reply.</p><pre class="prettyprint">
 function remoteAppControlCallback(data)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; data.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;key: &quot; + data[i].key + &quot;value: &quot; + data[i].value[0]);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; data.length; i++)
+   {
+      console.log("key: " + data[i].key + "value: " + data[i].value[0]);
+   }
 }
 
 function onconnected(service)
 {
-&nbsp;&nbsp;&nbsp;service.launchAppControl(requestAppControl, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remoteAppControlCallback, onerror);
+   service.launchAppControl(requestAppControl, null,
+                            remoteAppControlCallback, onerror);
 }
 </pre></li>
     </ol>
diff --git a/org.tizen.guides/html/web/connectivity/download_w.htm b/org.tizen.guides/html/web/connectivity/download_w.htm
index d602d4d..3b74fb6 100644 (file)
--- a/org.tizen.guides/html/web/connectivity/download_w.htm
+++ b/org.tizen.guides/html/web/connectivity/download_w.htm
@@ -62,7 +62,7 @@
 
 <p>To use the Download API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot; http://tizen.org/privilege/download&quot;/&gt;
+&lt;tizen:privilege name=" http://tizen.org/privilege/download"/&gt;
 </pre>
 
 
@@ -73,55 +73,55 @@
    <li><p>Create an instance of the <code>DownloadRequest</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadRequest">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadRequest">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadRequest">TV</a> applications) that defines the URL of the file to be downloaded:</p>
 <pre class="prettyprint">
 var downloadRequest =
-&nbsp;&nbsp;&nbsp;new tizen.DownloadRequest(&quot;http://download.tizen.org/tools/README.txt&quot;, &quot;downloads&quot;);
+   new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt", "downloads");
 </pre>
-<p>The final parameter (<code>downloads</code>) defines the folder where the downloaded content is stored. The parameter uses a relative folder location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html">TV</a> applications). The folder is not an absolute folder location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (<code>downloads</code> is the default download location in the virtual root).</p></li> 
+<p>The final parameter (<code>downloads</code>) defines the folder where the downloaded content is stored. The parameter uses a relative folder location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html">TV</a> applications). The folder is not an absolute folder location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (<code>downloads</code> is the default download location in the virtual root).</p></li>
 <li><p>It is not possible to download anything when the device is not connected to a network. To check whether any connection is available, use the <code>getPropertyValue()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications):</p>
 <pre class="prettyprint">
-tizen.systeminfo.getPropertyValue(&quot;NETWORK&quot;, function(networkInfo)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (networkInfo.networkType === &quot;NONE&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Network connection is not available.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Download is not possible.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;downloadRequest = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+tizen.systeminfo.getPropertyValue("NETWORK", function(networkInfo)
+   {
+      if (networkInfo.networkType === "NONE")
+      {
+         console.log("Network connection is not available.
+                      Download is not possible.");
+         downloadRequest = null;
+      }
+   });
 </pre></li>
 
  <li>Define the event handlers for different download process notifications using the <code>DownloadCallback</code> listener interface  (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadCallback">TV</a> applications):
 <pre class="prettyprint">
 var listener =
 {
-&nbsp;&nbsp;&nbsp;/* When the download progresses (interval is platform-dependent) */
-&nbsp;&nbsp;&nbsp;onprogress: function(id, receivedSize, totalSize)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Received with id: &#39; + id + &#39;, &#39; + receivedSize + &#39;/&#39; + totalSize);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When the user pauses the download */
-&nbsp;&nbsp;&nbsp;onpaused: function(id)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Paused with id: &#39; + id);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When the user cancels the download */
-&nbsp;&nbsp;&nbsp;oncanceled: function(id)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Canceled with id: &#39; + id);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When the download is completed */
-&nbsp;&nbsp;&nbsp;oncompleted: function(id, fullPath)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Completed with id: &#39; + id + &#39;, full path: &#39; + fullPath);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When the download fails */
-&nbsp;&nbsp;&nbsp;onfailed: function(id, error)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Failed with id: &#39; + id + &#39;, error name: &#39; + error.name);
-&nbsp;&nbsp;&nbsp;}
+   /* When the download progresses (interval is platform-dependent) */
+   onprogress: function(id, receivedSize, totalSize)
+   {
+      console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
+   },
+
+   /* When the user pauses the download */
+   onpaused: function(id)
+   {
+      console.log('Paused with id: ' + id);
+   },
+
+   /* When the user cancels the download */
+   oncanceled: function(id)
+   {
+      console.log('Canceled with id: ' + id);
+   },
+
+   /* When the download is completed */
+   oncompleted: function(id, fullPath)
+   {
+      console.log('Completed with id: ' + id + ', full path: ' + fullPath);
+   },
+
+   /* When the download fails */
+   onfailed: function(id, error)
+   {
+      console.log('Failed with id: ' + id + ', error name: ' + error.name);
+   }
 };
 </pre></li>
    <li><p>To start the download of the HTML file from the Internet, use the <code>start()</code> method of the <code>DownloadManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadManager">TV</a> applications):</p>
@@ -129,8 +129,8 @@ var listener =
 downloadId = tizen.download.start(downloadRequest, listener);
 </pre>
 <p>The <code>start()</code> method returns a unique identifier for the download operation.</p> </li>
-   <li>During the download: 
-    <ol type="a"> 
+   <li>During the download:
+    <ol type="a">
      <li><p>To pause the download, use the <code>pause()</code> method with the download ID:</p>
 <pre class="prettyprint">
 tizen.download.pause(downloadId);
@@ -158,12 +158,12 @@ downloadId = tizen.download.start(downloadRequest, listener);
 <pre class="prettyprint">
 var state = tizen.download.getState(downloadId);
 </pre>
-<p>The method returns a <code>DownloadState</code> enumerator value (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadState">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadState">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadState">TV</a> applications). </p> </li> 
+<p>The method returns a <code>DownloadState</code> enumerator value (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadState">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadState">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadState">TV</a> applications). </p> </li>
    <li><p>Use the <code>getDownloadRequest()</code> method with the download ID as a parameter to get the download request details that the user has previously set:</p>
 <pre class="prettyprint">
 var downloadRequest = tizen.download.getDownloadRequest(downloadId);
 </pre>
-<p>The method returns the <code>DownloadRequest</code> information (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadRequest">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadRequest">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadRequest">TV</a> applications) which is used as the parameter when starting the download.</p> </li> 
+<p>The method returns the <code>DownloadRequest</code> information (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadRequest">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadRequest">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadRequest">TV</a> applications) which is used as the parameter when starting the download.</p> </li>
    <li><p>Use the <code>getMIMEType()</code> method with the download ID as a parameter to get the MIME type of the file that you have started downloading:</p>
 <pre class="prettyprint">
 var MIMEType = tizen.download.getMIMEType(downloadId);
diff --git a/org.tizen.guides/html/web/connectivity/iotcon_w.htm b/org.tizen.guides/html/web/connectivity/iotcon_w.htm
index 1dbd292..b4d78b3 100644 (file)
--- a/org.tizen.guides/html/web/connectivity/iotcon_w.htm
+++ b/org.tizen.guides/html/web/connectivity/iotcon_w.htm
@@ -84,13 +84,13 @@
 <ol>
 <li>To use the Iotcon API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/internet&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/internet"/&gt;
 </pre>
 </li>
-<li>To make your application visible only for devices that support Iotcon, the application must specify the following feature in the <code>config.xml</code> file: 
+<li>To make your application visible only for devices that support Iotcon, the application must specify the following feature in the <code>config.xml</code> file:
 
 <pre class="prettyprint">
-&lt;feature name=&quot;http://tizen.org/feature/iot.ocf&quot;/&gt;
+&lt;feature name="http://tizen.org/feature/iot.ocf"/&gt;
 </pre>
 
 <p>You can also check whether a device supports the API by using the <code>tizen.systeminfo.getCapability()</code> method and accordingly enabling or disabling the code requiring the API:</p>
@@ -98,14 +98,14 @@
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;/* Checks whether a device supports the Iotcon API */
-&nbsp;&nbsp;&nbsp;var iotcon_feature =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.systeminfo.getCapability(&quot;http://tizen.org/feature/iot.ocf&quot;);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Iotcon = &quot; + iotcon_feature);
+   /* Checks whether a device supports the Iotcon API */
+   var iotcon_feature =
+      tizen.systeminfo.getCapability("http://tizen.org/feature/iot.ocf");
+   console.log("Iotcon = " + iotcon_feature);
 }
 catch (error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error name: &quot; + error.name + &quot;, message: &quot; + error.message);
+   console.log("Error name: " + error.name + ", message: " + error.message);
 }
 </pre>
 </li>
@@ -125,14 +125,14 @@ catch (error)
   <p>For managing secure virtual resources, a CBOR format file (Concise Binary Object Representation) must be
        available, preferably in the application local storage. For more information on security, see <a href="https://wiki.iotivity.org/iotivity_security" target="_blank">Iotivity Security</a>.</p>
 <pre class="prettyprint">
-var cborPath = &quot;path_to_my_app_storage/iotcon-server-test.dat&quot;;
+var cborPath = "path_to_my_app_storage/iotcon-server-test.dat";
 </pre>
 </li>
 <li>
   <p>Initialize Iotcon and set a human friendly name:</p>
 <pre class="prettyprint">
 tizen.iotcon.initialize(cborPath);
-tizen.iotcon.deviceName = &quot;Device 1&quot;;
+tizen.iotcon.deviceName = "Device 1";
 </pre>
 </li>
 <li>
@@ -149,20 +149,20 @@ var iotServer = tizen.iotcon.getServer();
   <p>On the server side, prepare a variable for storing the resource object and its attributes. The following example shows a door resource:</p>
 <pre class="prettyprint">
 var doorResource;
-var doorAttributes = {openstate: &quot;open&quot;};
+var doorAttributes = {openstate: "open"};
 </pre>
 </li>
 <li>
   <p>Prepare handlers for the get, put, post, delete, and observing requests from the client.</p>
-<p>The exact list of required handlers depends on the resource interfaces. The following example uses the &quot;oic.if.b&quot; interface.</p>
+<p>The exact list of required handlers depends on the resource interfaces. The following example uses the "oic.if.b" interface.</p>
 <pre class="prettyprint">
 var requestCallbacks =
 {
-&nbsp;&nbsp;&nbsp;onget: function(request) {/* Handler code */},
-&nbsp;&nbsp;&nbsp;onput: function(request) {/* Handler code */},
-&nbsp;&nbsp;&nbsp;onpost: function(request) {/* Handler code */},
-&nbsp;&nbsp;&nbsp;ondelete: function(request) {/* Handler code */},
-&nbsp;&nbsp;&nbsp;onobserving: function(request, observeType, observeId) {/* Handler code */}
+   onget: function(request) {/* Handler code */},
+   onput: function(request) {/* Handler code */},
+   onpost: function(request) {/* Handler code */},
+   ondelete: function(request) {/* Handler code */},
+   onobserving: function(request, observeType, observeId) {/* Handler code */}
 }
 </pre>
 </li>
@@ -179,43 +179,43 @@ var requestCallbacks =
 <pre class="prettyprint">
 var requestCallbacks =
 {
-&nbsp;&nbsp;&nbsp;onget: function(request)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;onget&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var response = new tizen.Response(request);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var representation = new tizen.Representation(doorResource.uriPath);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;representation.resourceTypes = doorResource.resourceTypes;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;representation.resourceInterfaces = doorResource.resourceInterfaces;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;representation.attributes = doorAttributes;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response.representation = representation;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response.result = &quot;SUCCESS&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (err)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(err.name + &quot;: &quot; + err.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response.result = &quot;ERROR&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response.send();
-&nbsp;&nbsp;&nbsp;}
+   onget: function(request)
+   {
+      console.log("onget");
+      var response = new tizen.Response(request);
+      try
+      {
+         var representation = new tizen.Representation(doorResource.uriPath);
+         representation.resourceTypes = doorResource.resourceTypes;
+         representation.resourceInterfaces = doorResource.resourceInterfaces;
+         representation.attributes = doorAttributes;
+         response.representation = representation;
+         response.result = "SUCCESS";
+      }
+      catch (err)
+      {
+         console.log(err.name + ": " + err.message);
+         response.result = "ERROR";
+      }
+      response.send();
+   }
 }
 </pre>
 </li>
 <li>
   <p>Create a resource using the prepared handlers, chosen resource path, types, and interfaces:</p>
 <pre class="prettyprint">
-var uriPath = &quot;/door&quot;;
-var resourceTypes = [&quot;core.door&quot;];
-var resourceInterfaces = [&quot;oic.if.b&quot;];
+var uriPath = "/door";
+var resourceTypes = ["core.door"];
+var resourceInterfaces = ["oic.if.b"];
 var policy =
 {
-&nbsp;&nbsp;&nbsp;isObservable: true,
-&nbsp;&nbsp;&nbsp;isDiscoverable: true
+   isObservable: true,
+   isDiscoverable: true
 };
 
 doorResource = iotServer.createResource(uriPath, resourceTypes, resourceInterfaces,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestCallbacks, policy);
+                                        requestCallbacks, policy);
 </pre>
 </li>
 </ol>
@@ -232,14 +232,14 @@ doorResource = iotServer.createResource(uriPath, resourceTypes, resourceInterfac
   <p>For managing secure virtual resources, a CBOR format file (Concise Binary Object Representation) must be
        available, preferably in the application local storage. For more information on security, see <a href="https://wiki.iotivity.org/iotivity_security" target="_blank">Iotivity Security</a>.</p>
 <pre class="prettyprint">
-var cborPath = &quot;path_to_my_app_storage/iotcon-client-test.dat&quot;;
+var cborPath = "path_to_my_app_storage/iotcon-client-test.dat";
 </pre>
 </li>
 <li>
   <p>Initialize Iotcon and set a human friendly name:</p>
 <pre class="prettyprint">
 tizen.iotcon.initialize(cborPath);
-tizen.iotcon.deviceName = &quot;Device 2&quot;;
+tizen.iotcon.deviceName = "Device 2";
 </pre>
 </li>
 <li>
@@ -264,13 +264,13 @@ var client = tizen.iotcon.getClient();
   <p>The <code>hostAddress</code> value must be in the Constrained Application Protocol (CoAP) format (<code>coap(s)://address:port</code>), for example, <code>coaps://[fe80::ae5a:14ff:fe24:b8fe]:12345</code> or <code>coaps://192.168.1.10:12345</code>. The <code>null</code> value indicates that the client communicates with all nodes (multicast).</p>
 <pre class="prettyprint">
 var hostAddress = null;
-var connectivityType = &quot;IP&quot;;
+var connectivityType = "IP";
 </pre>
 </li>
 <li>
   <p>Prepare a query. You can search for specific <code>resourceType</code> and <code>resourceInterface</code> values, and add an attribute filter:</p>
 <pre class="prettyprint">
-var query = {resourceType: &quot;core.door&quot;};
+var query = {resourceType: "core.door"};
 </pre>
   <p>For more information, see the Query interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#Query">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#Query">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#Query">TV</a> applications).</p>
 </li>
@@ -283,29 +283,29 @@ client.findResource(hostAddress, query, connectivityType, foundSuccess, onerror)
 <pre class="prettyprint">
 function onerror(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Failed to find resource: &quot; + err.message);
+   console.log("Failed to find resource: " + err.message);
 }
 </pre>
   <p>The success callback lists information, types, and interfaces for every found remote resource:</p>
 <pre class="prettyprint">
 function foundSuccess(resource)
 {
-&nbsp;&nbsp;&nbsp;if (resource)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(resource.uriPath);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(resource.hostAddress);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(resource.deviceId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var resourceTypes = resource.resourceTypes;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in resourceTypes)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(resourceTypes[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var resourceInterfaces = resource.resourceInterfaces;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in resourceInterfaces)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(resourceInterfaces[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   if (resource)
+   {
+      console.log(resource.uriPath);
+      console.log(resource.hostAddress);
+      console.log(resource.deviceId);
+      var resourceTypes = resource.resourceTypes;
+      for (var i in resourceTypes)
+      {
+         console.log(resourceTypes[i]);
+      }
+      var resourceInterfaces = resource.resourceInterfaces;
+      for (var i in resourceInterfaces)
+      {
+         console.log(resourceInterfaces[i]);
+      }
+   }
 }
 </pre>
 </li>
@@ -321,17 +321,17 @@ function foundSuccess(resource)
 <pre class="prettyprint">
 function onerror(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Failed to find resource: &quot; + err.message);
+   console.log("Failed to find resource: " + err.message);
 }
 
 function foundSuccess(platformInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(platformInfo.platformId);
-&nbsp;&nbsp;&nbsp;console.log(platformInfo.modelNumber);
-&nbsp;&nbsp;&nbsp;console.log(platformInfo.platformVersion);
-&nbsp;&nbsp;&nbsp;console.log(platformInfo.operatingSystemVersion);
-&nbsp;&nbsp;&nbsp;console.log(platformInfo.systemTime);
-&nbsp;&nbsp;&nbsp;/* Other PlatformInfo object attributes; see the API Reference for details */
+   console.log(platformInfo.platformId);
+   console.log(platformInfo.modelNumber);
+   console.log(platformInfo.platformVersion);
+   console.log(platformInfo.operatingSystemVersion);
+   console.log(platformInfo.systemTime);
+   /* Other PlatformInfo object attributes; see the API Reference for details */
 }
 </pre>
 </li>
@@ -345,8 +345,8 @@ var client = tizen.iotcon.getClient();
   <p>Prepare the server address, connectivity type, and query (with optional filters):</p>
 <pre class="prettyprint">
 /* hostAddress must be a valid IP address, or null for all nodes (multicast) */
-var hostAddress = &quot;coaps://192.168.0.10:12345&quot;;
-var connectivityType = &quot;IP&quot;;
+var hostAddress = "coaps://192.168.0.10:12345";
+var connectivityType = "IP";
 /* null means no filter */
 var query = null;
 </pre>
@@ -357,7 +357,7 @@ var query = null;
   <p>Get the platform information from the remote server:</p>
 <pre class="prettyprint">
 client.findPlatformInfo(hostAddress, query, connectivityType,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foundSuccess, onerror);
+                        foundSuccess, onerror);
 </pre>
 <p>The success callback is called with the <code>PlatformInfo</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#PlatformInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#PlatformInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#PlatformInfo">TV</a> applications) as a parameter. You can access the platform information in the object attributes.</p>
 </li>
@@ -365,7 +365,7 @@ client.findPlatformInfo(hostAddress, query, connectivityType,
   <p>Get the device information from the remote server:</p>
 <pre class="prettyprint">
 client.findDeviceInfo(hostDeviceIpAddress, query, connectivityType,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foundSuccess, onerror);
+                      foundSuccess, onerror);
 </pre>
   <p>The success callback is called with the <code>DeviceInfo</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#DeviceInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#DeviceInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#DeviceInfo">TV</a> applications) as a parameter. You can access the device information in the object attributes.</p>
 </li>
@@ -380,20 +380,20 @@ client.findDeviceInfo(hostDeviceIpAddress, query, connectivityType,
 <pre class="prettyprint">
 function onresponse(remoteResponse)
 {
-&nbsp;&nbsp;&nbsp;if (remoteResponse.result != &quot;SUCCESS&quot;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;the result is not SUCCESS&quot;);
+   if (remoteResponse.result != "SUCCESS")
+   {
+      console.log("the result is not SUCCESS");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
+      return;
+   }
 
-&nbsp;&nbsp;&nbsp;var repr = remoteResponse.representation;
+   var repr = remoteResponse.representation;
 
-&nbsp;&nbsp;&nbsp;/* You can retrieve attributes from Representation object in RemoteResponse */
-&nbsp;&nbsp;&nbsp;for (var key in repr.attributes)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(key + &quot;: &quot; + repr.attributes[key]);
-&nbsp;&nbsp;&nbsp;}
+   /* You can retrieve attributes from Representation object in RemoteResponse */
+   for (var key in repr.attributes)
+   {
+      console.log(key + ": " + repr.attributes[key]);
+   }
 }
 </pre>
 </li>
@@ -404,7 +404,7 @@ function onresponse(remoteResponse)
   <p>Once you have a <code>RemoteResource</code> object, use the <code>methodGet()</code> method to send a request to the server. For a list of resource attributes you can request, see the API Reference (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#RemoteResource">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#RemoteResource">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#RemoteResource">TV</a> applications).</p>
 <pre class="prettyprint">
 /* filter results, query = null means no filter */
-query[&quot;filter&quot;] = {openstate: &quot;open&quot;};
+query["filter"] = {openstate: "open"};
 resource.methodGet(onresponse, query, onerror);
 </pre>
   <p>As a result, the <code>onresponse</code> or (optional) <code>onerror</code> callback is called.</p>
@@ -419,8 +419,8 @@ resource.methodGet(onresponse, query, onerror);
 <pre class="prettyprint">
 function onresponse(remoteResponse)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;result is &quot; + remoteResponse.result);
-&nbsp;&nbsp;&nbsp;/* remoteResponse.result is expected to be &quot;RESOURCE_CHANGED&quot; */
+   console.log("result is " + remoteResponse.result);
+   /* remoteResponse.result is expected to be "RESOURCE_CHANGED" */
 }
 </pre>
 </li>
@@ -431,15 +431,15 @@ function onresponse(remoteResponse)
   <p>Once you have a <code>RemoteResource</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#RemoteResource">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#RemoteResource">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#RemoteResource">TV</a> applications), use the success callback to create a <code>Representation</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#Representation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#Representation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#Representation">TV</a> applications). This object represents the changes in attributes, types, and interfaces.</p>
 <pre class="prettyprint">
 representation = new tizen.Representation(uriPath);
-representation.resourceTypes = [&quot;core.door&quot;];
-representation.attributes = {openstate: &quot;closed&quot;};
+representation.resourceTypes = ["core.door"];
+representation.attributes = {openstate: "closed"};
 </pre>
 </li>
 <li>
   <p>Call the <code>methodPut()</code> method on the <code>RemoteResource</code> object:</p>
 <pre class="prettyprint">
 /* Optional filter, query = null means no filter */
-query[&quot;filter&quot;] = {openstate: &quot;open&quot;}
+query["filter"] = {openstate: "open"}
 resource.methodPut(representation, onresponse, query, onerror);
 </pre>
 <p>After a successful request, the <code>onresponse</code> callback is called with the result and updated resource representation. In case of a failure, the (optional) <code>onerror</code> callback is called.</p>
@@ -459,14 +459,14 @@ resource.methodPut(representation, onresponse, query, onerror);
 <pre class="prettyprint">
 function onchanged(isAlive)
 {
-&nbsp;&nbsp;&nbsp;if (isAlive == true)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Remote resource is alive&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Remote resource is lost&quot;);
-&nbsp;&nbsp;&nbsp;}
+   if (isAlive == true)
+   {
+      console.log("Remote resource is alive");
+   }
+   else
+   {
+      console.log("Remote resource is lost");
+   }
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/connectivity/nfc_w.htm b/org.tizen.guides/html/web/connectivity/nfc_w.htm
index 908b98b..5a2dc75 100644 (file)
--- a/org.tizen.guides/html/web/connectivity/nfc_w.htm
+++ b/org.tizen.guides/html/web/connectivity/nfc_w.htm
@@ -40,7 +40,7 @@
             <li><a href="#Using_NFC_Card_Emulation">Using NFC Card Emulation</a></li>
                        <li><a href="#Using_NFC_Host_Based_Card_Emulation">Using NFC Host-based Card Emulation</a></li>
                        <li><a href="#operations">NFC Application Control Operations</a></li>
-        </ul>          
+        </ul>
                <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC API for Mobile Web</a></li>
@@ -53,7 +53,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Near Field Communication (NFC)</h1>
 
-  <p>Near Field Communication (NFC) service enables information exchange between NFC-enabled devices (called &quot;peers&quot;) or tags. The NFC-enabled devices can share contacts, photos, and videos, and can also act as smart cards. You can use an NFC-enabled device to <a href="#tag">send NDEF messages to NFC tags</a> to implement a variety of activities, such as paying the grocery bill or downloading a coupon. With application controls, you can <a href="#operations">launch NFC applications</a> when NFC-related operations occur.</p>
+  <p>Near Field Communication (NFC) service enables information exchange between NFC-enabled devices (called "peers") or tags. The NFC-enabled devices can share contacts, photos, and videos, and can also act as smart cards. You can use an NFC-enabled device to <a href="#tag">send NDEF messages to NFC tags</a> to implement a variety of activities, such as paying the grocery bill or downloading a coupon. With application controls, you can <a href="#operations">launch NFC applications</a> when NFC-related operations occur.</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
 
@@ -99,14 +99,14 @@
   <p align="center"><img alt="Structure of an NDEF message" src="../../images/nfc_record.png" /></p>
   <p>A record in an NDEF message can be created by using the following payload types:</p>
   <ul>
-   <li>Text 
-   <p>The NDEF record content is created using text format.</p> 
+   <li>Text
+   <p>The NDEF record content is created using text format.</p>
    <p>The <code>NDEFRecordText</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordText">wearable</a> applications) is used to create the text format payload using the <code>text</code>, <code>languageCode</code>, and <code>encoding</code> attributes.</p></li>
-   <li>URI 
-   <p>The NDEF record content is created using a URI.</p> 
+   <li>URI
+   <p>The NDEF record content is created using a URI.</p>
    <p>The <code>NDEFRecordURI</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordURI">wearable</a> applications) is used to create the URI type payload using the <code>uri</code> attribute.</p></li>
-   <li>Media 
-   <p>The NDEF record content is created using a media format.</p> 
+   <li>Media
+   <p>The NDEF record content is created using a media format.</p>
    <p>The <code>NDEFRecordMedia</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordMedia">wearable</a> applications) is used to create the media format payload using the <code>mimeType</code> attribute.</p></li>
   </ul>
 
@@ -115,11 +115,11 @@
 <p>To use the Application (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications) and NFC (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html">wearable</a> applications) APIs, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.cardemulation&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.common&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.p2p&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.tag&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/nfc.cardemulation"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/nfc.common"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/nfc.p2p"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/nfc.tag"/&gt;
 </pre>
 
 
@@ -137,56 +137,56 @@
    <li><p>To get the default NFC adapter, use the <code>getDefaultAdapter()</code> method and prepare an <code>ApplicationControl</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications) to request the NFC switching operation:</p>
 <pre class="prettyprint">
 var nfcSwitchAppControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/setting/nfc&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, null, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[new tizen.ApplicationControlData(&quot;type&quot;, &quot;nfc&quot;)]);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/nfc",
+                                null, null, null,
+                                [new tizen.ApplicationControlData("type", "nfc")]);
 var adapter = tizen.nfc.getDefaultAdapter();
 </pre></li>
    <li>Define the event listener for the <code>launchAppControl()</code> method:
 <pre class="prettyprint">
 function launchSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;NFC Settings application has successfully launched.&quot;);
+   console.log("NFC Settings application has successfully launched.");
 }
-function launchError(error) 
+function launchError(error)
 {
-&nbsp;&nbsp;&nbsp;alert(&quot;An error occurred: &quot; + error.name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;. Please enable NFC through the Settings application.&quot;);
+   alert("An error occurred: " + error.name
+         + ". Please enable NFC through the Settings application.");
 }
 </pre></li>
 <li>Define the event handler for an application control, which implements the <code>ApplicationControlDataArrayReplyCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlDataArrayReplyCallback">wearable</a> applications):
 <pre class="prettyprint">
 var serviceReply =
 {
-&nbsp;&nbsp;&nbsp;/* onsuccess is called when the launched application reports success */
-&nbsp;&nbsp;&nbsp;onsuccess: function(data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (adapter.powered)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;NFC is successfully turned on.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   onfailure is called when the launched application
-&nbsp;&nbsp;&nbsp;   reports failure of the requested operation
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;onfailure: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;NFC Settings application reported failure.&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* onsuccess is called when the launched application reports success */
+   onsuccess: function(data)
+   {
+      if (adapter.powered)
+      {
+         console.log("NFC is successfully turned on.");
+      }
+   }
+   /*
+      onfailure is called when the launched application
+      reports failure of the requested operation
+   */
+   onfailure: function()
+   {
+      alert("NFC Settings application reported failure.");
+   }
 }
 </pre></li>
 <li>If necessary, request launching the NFC Settings with <code>nfcSwitchAppControl</code> as a parameter:
 <pre class="prettyprint">
 if (adapter.powered)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;NFC is already enabled&quot;);
+   console.log("NFC is already enabled");
 }
 else
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Try to launch the NFC Settings application.&quot;);
-&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(nfcSwitchAppControl, null, launchSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;launchError, serviceReply);
+   console.log("Try to launch the NFC Settings application.");
+   tizen.application.launchAppControl(nfcSwitchAppControl, null, launchSuccess,
+                                      launchError, serviceReply);
 }
 </pre></li>
   </ol>
@@ -203,24 +203,24 @@ var nfcAdapter = tizen.nfc.getDefaultAdapter();
 <pre class="prettyprint">
 var setTagDetect =
 {
-&nbsp;&nbsp;&nbsp;/* When an NFC tag is detected */
-&nbsp;&nbsp;&nbsp;onattach: function(nfcTag)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;NFC Tag detected. Its type is: &quot; + nfcTag.type);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* When an NFC tag becomes unavailable */
-&nbsp;&nbsp;&nbsp;ondetach: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;NFC Tag unavailable&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* When an NFC tag is detected */
+   onattach: function(nfcTag)
+   {
+      console.log("NFC Tag detected. Its type is: " + nfcTag.type);
+   }
+
+   /* When an NFC tag becomes unavailable */
+   ondetach: function()
+   {
+      console.log("NFC Tag unavailable");
+   }
 }
 </pre></li>
    <li><p>Register the listener to use the defined event handlers.</p> <p>You can limit the listener to detect only specific NFC tag types by defining the tag types as the second parameter of the <code>setTagListener()</code> method. In the following example, only MIFARE tags are detected.</p>
 <pre class="prettyprint">
 /* Defines the tag types to be detected */
-var tagFilter = [&quot;MIFARE_MINI&quot;, &quot;MIFARE_1K&quot;, &quot;MIFARE_4K&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;MIFARE_ULTRA&quot;, &quot;MIFARE_DESFIRE&quot;];
+var tagFilter = ["MIFARE_MINI", "MIFARE_1K", "MIFARE_4K",
+                 "MIFARE_ULTRA", "MIFARE_DESFIRE"];
 
 /* Registers the event listener */
 nfcAdapter.setTagListener(setTagDetect, tagFilter);
@@ -231,16 +231,16 @@ nfcAdapter.unsetTagListener();
 </pre></li>
   </ol>
   <p>NFC peers are detected similarly as NFC tags, except that the <code>setPeerListener()</code> method is used to register the <code>NFCPeerDetectCallback</code> listener interface, and the <code>unsetPeerListener()</code> method is used to stop the peer detection.</p>
-    
+
   <h2 id="Handling_NDEF_Messages" name="Handling_NDEF_Messages">Handling NDEF Messages</h2>
 
 <p>You can handle NDEF messages by first creating NDEF records using the <code>NDEFRecord</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecord">wearable</a> applications), and then adding the records to an NDEF message using the <code>records</code> attribute of the <code>NDEFMessage</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessage">wearable</a> applications).</p>
 <p>To create NDEF messages:</p>
   <ol>
-   <li><p>To create an NDEF URI record, create an <code>NDEFRecordURI</code> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordURI">wearable</a> applications) and specify the URI parameter.</p> 
-   <p>Additionally, you can create instances of the <code>NDEFRecord</code>, <code>NDEFRecordText</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordText">wearable</a> applications), or <code>NDEFRecordMedia</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordMedia">wearable</a> applications) interfaces based on the record type to be created.</p> 
+   <li><p>To create an NDEF URI record, create an <code>NDEFRecordURI</code> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordURI">wearable</a> applications) and specify the URI parameter.</p>
+   <p>Additionally, you can create instances of the <code>NDEFRecord</code>, <code>NDEFRecordText</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordText">wearable</a> applications), or <code>NDEFRecordMedia</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordMedia">wearable</a> applications) interfaces based on the record type to be created.</p>
 <pre class="prettyprint">
-var newRecord = new tizen.NDEFRecordURI(&quot;https://www.tizen.org/&quot;);
+var newRecord = new tizen.NDEFRecordURI("https://www.tizen.org/");
 </pre></li>
    <li><p>Create an <code>NDEFMessage</code> interface instance:</p>
 <pre class="prettyprint">
@@ -252,18 +252,18 @@ newMessage.records[0] = newRecord;
 </pre></li>
   </ol>
 
-  <h2 id="Exchanging_NDEF_Peers" name="Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</h2> 
-<p>To exchange data between peers, the <code>setReceiveNDEFListener()</code> method of the <code>NFCPeer</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeer">wearable</a> applications) registers an event listener, which triggers an event when an NDEF message is received from a peer.</p> 
+  <h2 id="Exchanging_NDEF_Peers" name="Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</h2>
+<p>To exchange data between peers, the <code>setReceiveNDEFListener()</code> method of the <code>NFCPeer</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeer">wearable</a> applications) registers an event listener, which triggers an event when an NDEF message is received from a peer.</p>
 <p>You can use the <code>NDEFMessageReadCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessageReadCallback">wearable</a> applications) to define event handlers for reading NDEF messages from peer devices.</p>
 <p>To exchange NDEF messages:</p>
   <ol>
    <li><p>To receive NDEF messages from a peer device, use the <code>setReceiveNDEFListener()</code> method of the <code>NFCPeer</code> interface.</p>
-   <p>The <code>setReceiveNDEFListener()</code> method registers the <code>NDEFMessageReadCallback</code> listener interface, which is invoked when an NDEF message from a peer device is read.</p> 
+   <p>The <code>setReceiveNDEFListener()</code> method registers the <code>NDEFMessageReadCallback</code> listener interface, which is invoked when an NDEF message from a peer device is read.</p>
 <pre class="prettyprint">
 /* NDEFMessageReadCallback listener */
 function readMessage(message)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Record Count is &quot; + message.recordCount);
+   console.log("Record Count is " + message.recordCount);
 }
 
 /* Set a listener to receive an NDEF message */
@@ -283,32 +283,32 @@ Peer.sendNDEF(newMessage);
 </div>
 
   <h2 id="Exchanging_NDEF_Tags" name="Exchanging_NDEF_Tags">Exchanging NDEF Data with Tags</h2>
-<p>To exchange data between tags, you can read from tags and write to tags using the <code>readNDEF()</code> and <code>writeNDEF()</code> methods.</p> 
+<p>To exchange data between tags, you can read from tags and write to tags using the <code>readNDEF()</code> and <code>writeNDEF()</code> methods.</p>
 <p>You can use the <code>NDEFMessageReadCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessageReadCallback">wearable</a> applications) to define event handlers for reading NDEF messages from tags.</p>
   <p>To exchange NDEF data with tags:</p>
   <ol>
-   <li><p>To read data from an NFC tag, use the <code>readNDEF()</code> method of the <code>NFCTag</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTag">wearable</a> applications).</p> 
-   <p>The <code>readNDEF()</code> method registers the <code>NDEFMessageReadCallback</code> listener interface, which is invoked when an NDEF message is read.</p> 
+   <li><p>To read data from an NFC tag, use the <code>readNDEF()</code> method of the <code>NFCTag</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTag">wearable</a> applications).</p>
+   <p>The <code>readNDEF()</code> method registers the <code>NDEFMessageReadCallback</code> listener interface, which is invoked when an NDEF message is read.</p>
 <pre class="prettyprint">
 /* NDEFMessageReadCallback listener */
 function readMessage(message)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Record Count is &quot; + message.recordCount);
+   console.log("Record Count is " + message.recordCount);
 }
 
 /* Check whether the NFC tag supports NDEF format */
 if (Tag.isSupportedNDEF)
 {
-&nbsp;&nbsp;&nbsp;/* Read NDEF data */
-&nbsp;&nbsp;&nbsp;Tag.readNDEF(readMessage);
+   /* Read NDEF data */
+   Tag.readNDEF(readMessage);
 }
 </pre></li>
-<li><p>To write data on an NFC tag, use the <code>writeNDEF()</code> method:</p> 
+<li><p>To write data on an NFC tag, use the <code>writeNDEF()</code> method:</p>
 <pre class="prettyprint">
 var newMessage = new tizen.NDEFMessage();
 function writeCallback()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Success!&quot;);
+   console.log("Success!");
 }
 Tag.writeNDEF(newMessage, writeCallback);
 </pre>
@@ -332,39 +332,39 @@ var modeListenerId = 0, aseListenerId = 0, transListenerId = 0;
 <li>Use the <code>addCardEmulationModeChangeListener()</code>  method of the <code>NFCAdapter</code> interface to register a listener to monitor the current card emulation mode:
 <pre class="prettyprint">
 modeListenerId = adapter.addCardEmulationModeChangeListener(function(mode)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (mode === &quot;ALWAYS_ON&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;We are ready to go now&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+   {
+      if (mode === "ALWAYS_ON")
+      {
+         console.log("We are ready to go now");
+      }
+   });
 </pre></li>
 <li>To enable NFC card emulation, change the value of the <code>cardEmulationMode</code> attribute:
 <pre class="prettyprint">
-adapter.cardEmulationMode = &quot;ALWAYS_ON&quot;;
+adapter.cardEmulationMode = "ALWAYS_ON";
 </pre></li>
  <li>To be notified when the type of an active NFC secure element changes, use the <code>addActiveSecureElementChangeListener()</code> method of the <code>NFCAdapter</code> interface:
 <pre class="prettyprint">
 aseListenerId = adapter.addActiveSecureElementChangeListener(function(seType)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Active secure element is &quot; + seType);
-&nbsp;&nbsp;&nbsp;});
+   {
+      console.log("Active secure element is " + seType);
+   });
 </pre></li>
 <li>To be notified when a NFC secure element transaction data is exchanged, use the <code>addTransactionEventListener()</code> method of the <code>NFCAdapter</code> interface:
 <pre class="prettyprint">
 function onDetected(appletId, data)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;NFC secure element transaction detected. Application: &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ appletId + &quot;. Protocol data: &quot; + data);
+   console.log("NFC secure element transaction detected. Application: "
+               + appletId + ". Protocol data: " + data);
 });
-transListenerId = adapter.addTransactionEventListener(&quot;UICC&quot;, onDetected);
+transListenerId = adapter.addTransactionEventListener("UICC", onDetected);
 </pre></li>
 <li>Remove the registered listeners when they are no longer necessary and disable NFC card emulation:
 <pre class="prettyprint">
 adapter.removeActiveSecureElementChangeListener(aseListenerId);
 adapter.removeTransactionEventListener(transListenerId);
 adapter.removeCardEmulationModeChangeListener(modeListenerId);
-adapter.cardEmulationMode = &quot;OFF&quot;;
+adapter.cardEmulationMode = "OFF";
 </pre></li>
 </ol>
 
@@ -377,24 +377,24 @@ adapter.cardEmulationMode = &quot;OFF&quot;;
 <li>
 <p>To tell the platform which AID groups are requested by the application, a metadata element must be included in the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;widget xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xmlns=&quot;http://www.w3.org/ns/widgets&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;http://yourdomain/NFCtest&quot; version=&quot;1.0.0&quot; viewmodes=&quot;maximized&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;profile name=&quot;wearable&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:application id=&quot;ZmAk4fxZWY.NFCtest&quot; package=&quot;ZmAk4fxZWY&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.3.1&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon src=&quot;icon.png&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;name&gt;NFCtest&lt;/name&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.common&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.cardemulation&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;index.xml&quot; reload=&quot;enable&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;nfc://secure/HCE/aid/A0000000041010&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:metadata key=&quot;http://tizen.org/metadata/nfc_cardemulation&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;/res/wgt/wallet.xml&quot;/&gt;
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;widget xmlns:tizen="http://tizen.org/ns/widgets"
+        xmlns="http://www.w3.org/ns/widgets"
+        id="http://yourdomain/NFCtest" version="1.0.0" viewmodes="maximized"&gt;
+   &lt;profile name="wearable"/&gt;
+   &lt;tizen:application id="ZmAk4fxZWY.NFCtest" package="ZmAk4fxZWY"
+                      required_version="2.3.1"/&gt;
+   &lt;icon src="icon.png"/&gt;
+   &lt;name&gt;NFCtest&lt;/name&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/nfc.common"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/nfc.cardemulation"/&gt;
+   &lt;tizen:app-control&gt;
+         &lt;tizen:src name="index.xml" reload="enable"/&gt;
+         &lt;tizen:operation name="http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service"/&gt;
+         &lt;tizen:uri name="nfc://secure/HCE/aid/A0000000041010"/&gt;
+   &lt;/tizen:app-control&gt;
+   &lt;tizen:metadata key="http://tizen.org/metadata/nfc_cardemulation"
+                   value="/res/wgt/wallet.xml"/&gt;
 &lt;/widget&gt;
 </pre>
 <ul><li>The <code>tizen:app-control</code> element must contain the <code>tizen:src</code> and <code>tizen:operation</code>  and <code>tizen:uri</code> elements:
@@ -414,16 +414,16 @@ adapter.cardEmulationMode = &quot;OFF&quot;;
 </li>
 <li><p>The metadata element points to an AID XML file. The following is an example of the file with an AID declaration:</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
-&lt;application name=&quot;NFCtest&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;wallet&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;aid-group category=&quot;payment&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;aid aid=&quot;A0000000041010&quot; se_type=&quot;hce&quot; unlock=&quot;false&quot; power=&quot;on&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/aid-group&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;aid-group category=&quot;other&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;aid aid=&quot;D4100000030001&quot; se_type=&quot;hce&quot; unlock=&quot;false&quot; power=&quot;on&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/aid-group&gt;
-&nbsp;&nbsp;&nbsp;&lt;/wallet&gt;
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;application name="NFCtest"&gt;
+   &lt;wallet&gt;
+      &lt;aid-group category="payment"&gt;
+         &lt;aid aid="A0000000041010" se_type="hce" unlock="false" power="on"/&gt;
+      &lt;/aid-group&gt;
+      &lt;aid-group category="other"&gt;
+         &lt;aid aid="D4100000030001" se_type="hce" unlock="false" power="on"/&gt;
+      &lt;/aid-group&gt;
+   &lt;/wallet&gt;
 &lt;/application&gt;
 </pre>
 <ul><li>The <code>application</code> element must contain a <code>name</code> attribute with an application name.</li>
@@ -446,7 +446,7 @@ adapter.cardEmulationMode = &quot;OFF&quot;;
 var hceListenerId = 0;
 var adapter = tizen.nfc.getDefaultAdapter();
 
-adapter.cardEmulationMode = &quot;ALWAYS_ON&quot;;
+adapter.cardEmulationMode = "ALWAYS_ON";
 </pre></li>
 <li>
 <p>To detect the HCE event, use the <code>addHCEEventListener()</code> method of the <code>NFCAdapter</code> interface to register a listener.</p>
@@ -454,74 +454,74 @@ adapter.cardEmulationMode = &quot;ALWAYS_ON&quot;;
 <pre class="prettyprint">
 var successCB = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Sending APDU response was successful.&quot;);
+   console.log("Sending APDU response was successful.");
 };
 
 var errorCB = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Sending APDU response failed.&quot;);
+   console.log("Sending APDU response failed.");
 };
 
 hceListenerId = adapter.addHCEEventListener(function(event_data)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event_data.eventType == &quot;ACTIVATED&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;HCE activated&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (event_data.eventType == &quot;DEACTIVATED&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;HCE deactivated&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (event_data.eventType == &quot;APDU_RECEIVED&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;APDU received&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var apdu_response = [0x00,0xA4,0x04,0x00,0x04,0x11,0x12, 0x13, 0x14];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;adapter.sendHostAPDUResponse(apdu_response, successCB, errorCB);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+   {
+      if (event_data.eventType == "ACTIVATED")
+      {
+        console.log("HCE activated");
+      }
+      else if (event_data.eventType == "DEACTIVATED")
+      {
+        console.log("HCE deactivated");
+      }
+      else if (event_data.eventType == "APDU_RECEIVED")
+      {
+        console.log("APDU received");
+        var apdu_response = [0x00,0xA4,0x04,0x00,0x04,0x11,0x12, 0x13, 0x14];
+        adapter.sendHostAPDUResponse(apdu_response, successCB, errorCB);
+      }
+   });
 </pre></li>
 <li>To register an AID for a specific category and secure element type, use the <code>registerAID()</code> method of the <code>NFCAdapter</code> interface:
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;var aid = &quot;ABC0012345&quot;;
-&nbsp;&nbsp;&nbsp;adapter.registerAID(&quot;HCE&quot;, aid, &quot;PAYMENT&quot;)
+   var aid = "ABC0012345";
+   adapter.registerAID("HCE", aid, "PAYMENT")
 }
 catch (err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name + &quot;:&quot; + err.message);
+   console.log(err.name + ":" + err.message);
 }
 </pre></li>
  <li>To retrieve the registered AIDs for a specific category and secure element type, use the <code>getAIDsForCategory()</code> method of the <code>NFCAdapter</code> interface:
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;var successCallback = function(aid_datas)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; aid_datas.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;SE Type is &quot; + aid_datas[i].type);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;AID is &quot; + aid_datas[i].aid);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;readonly: &quot; + aid_datas[i].readOnly);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;var errorCallback = function(error)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;getAIDsForCategory failed.&quot;);
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;adapter.getAIDsForCategory(&quot;HCE&quot;, &quot;PAYMENT&quot;, successCallback, errorCallback);
+   var successCallback = function(aid_datas)
+   {
+      for (var i = 0; i &lt; aid_datas.length; i++)
+      {
+         console.log("SE Type is " + aid_datas[i].type);
+         console.log("AID is " + aid_datas[i].aid);
+         console.log("readonly: " + aid_datas[i].readOnly);
+      }
+   };
+
+   var errorCallback = function(error)
+   {
+     console.log("getAIDsForCategory failed.");
+   };
+
+   adapter.getAIDsForCategory("HCE", "PAYMENT", successCallback, errorCallback);
 }
 catch (err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name + &quot;:&quot; + err.message);
+   console.log(err.name + ":" + err.message);
 }
 </pre></li>
 <li>Remove the registered listeners when they are no longer necessary, and disable NFC card emulation:
 <pre class="prettyprint">
 adapter.removeHCEEventListener(hceListenerId);
-adapter.cardEmulationMode = &quot;OFF&quot;;
+adapter.cardEmulationMode = "OFF";
 </pre></li>
 </ol>
 
diff --git a/org.tizen.guides/html/web/connectivity/secure_element_w.htm b/org.tizen.guides/html/web/connectivity/secure_element_w.htm
index 10b76ec..4eedaeb 100644 (file)
--- a/org.tizen.guides/html/web/connectivity/secure_element_w.htm
+++ b/org.tizen.guides/html/web/connectivity/secure_element_w.htm
@@ -43,10 +43,10 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Secure Element Access</h1>
- 
+
   <p>Tizen enables you to access secure elements in a device. You can access various secure elements, such as UICC and SIM cards, embedded secure elements, and secure SD cards.</p>
-  
- <p>This feature is supported in mobile and wearable applications only.</p> 
+
+ <p>This feature is supported in mobile and wearable applications only.</p>
 
   <p>The main features of the Secure Element API include:</p>
   <ul>
@@ -59,46 +59,46 @@
        <li>Closing sessions and channels
        <p>When the channel or session is no longer needed, you can <a href="#Closing_Sessions">close them</a>.</p> </li>
   </ul>
-  
+
 <h2 id="prerequisites">Prerequisites</h2>
-       
+
 <p>To use the Secure Element API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/secureelement&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/secureelement"/&gt;
 </pre>
 
 
   <h2 id="Managing_Secure_Element" name="Managing_Secure_Element">Managing Secure Elements</h2>
-  
-  <p>To use secure elements in your application, you must learn to retrieve them and track changes in them:</p> 
-  <ol> 
+
+  <p>To use secure elements in your application, you must learn to retrieve them and track changes in them:</p>
+  <ol>
    <li><p>To retrieve all the available secure element readers, use the <code>getReaders()</code> method of the <code>SEService</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SEService">wearable</a> applications). The method registers the <code>ReaderArraySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#ReaderArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#ReaderArraySuccessCallback">wearable</a> applications), which is invoked when the list of available secure element readers has been successfully retrieved.</p>
 <pre class="prettyprint">
 function success(readers)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; readers.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (readers[i].isPresent)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Reader Name: &quot; + readers[i].getName());
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; readers.length; i++)
+   {
+      if (readers[i].isPresent)
+         console.log("Reader Name: " + readers[i].getName());
+   }
 }
 tizen.seService.getReaders(success, function(err) {/* Error handling */});
 </pre></li>
 
-   <li> <p>To receive reader change notifications, use the <code>registerSEListener()</code> method of the <code>SEService</code> interface:</p> 
+   <li> <p>To receive reader change notifications, use the <code>registerSEListener()</code> method of the <code>SEService</code> interface:</p>
    <ol type="a">
       <li><p>Define a listener using the <code>SEChangeListener</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEChangeListener">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SEChangeListener">wearable</a> applications):</p>
 <pre class="prettyprint">
 var setSEChange =
 {
-&nbsp;&nbsp;&nbsp;onSEReady: function(reader)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(reader.getName() + &quot; is ready.&quot;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onSENotReady: function(reader)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(reader.getName() + &quot; is not ready.&quot;);
-&nbsp;&nbsp;&nbsp;},
+   onSEReady: function(reader)
+   {
+      console.log(reader.getName() + " is ready.");
+   },
+   onSENotReady: function(reader)
+   {
+      console.log(reader.getName() + " is not ready.");
+   },
 }
 </pre></li>
    <li><p>Register the listener:</p>
@@ -111,22 +111,22 @@ var seListener = tizen.seService.registerSEListener(setSEChange);
 <pre class="prettyprint">
 tizen.seService.unregisterSEListener(seListener);
 </pre></li>
-  </ol> 
-  
+  </ol>
+
   <h2 id="Opening_Sessions" name="Opening_Sessions">Opening Sessions and Channels</h2>
-  
-  <p>To use secure elements in your application, you must learn to open sessions and channels:</p> 
-  <ol> 
+
+  <p>To use secure elements in your application, you must learn to open sessions and channels:</p>
+  <ol>
    <li><p>To open a session, use the <code>openSession()</code> method of the <code>Reader</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Reader">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Reader">wearable</a> applications). The method registers the <code>SessionSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SessionSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SessionSuccessCallback">wearable</a> applications), which is invoked when a session on a specific reader is opened.</p>
 <pre class="prettyprint">
 function successCB(session)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;A session is open successfully&quot;);
+   console.log("A session is open successfully");
 }
 
 function errorCB(err)
 {
-&nbsp;&nbsp;&nbsp;/* Error handling */
+   /* Error handling */
 }
 reader.openSession(successCB, errorCB);
 </pre></li>
@@ -136,36 +136,36 @@ reader.openSession(successCB, errorCB);
 <pre class="prettyprint">
 function successCB(channel)
 {
-&nbsp;&nbsp;&nbsp;if (channel.isBasicChannel)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;A basic channel is opened successfully&quot;);
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;A logical channel is opened successfully&quot;);
+   if (channel.isBasicChannel)
+      console.log("A basic channel is opened successfully");
+   else
+      console.log("A logical channel is opened successfully");
 }
 
 function errorCB(err)
 {
-&nbsp;&nbsp;&nbsp;/* Error handling */
+   /* Error handling */
 }
 
 /* This aid is for testing purposes for your applet */
 session.openBasicChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;successCB, errorCB);
+                          0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe],
+                         successCB, errorCB);
 </pre></li>
    <li><p>Open a logical channel with the <code>openLogicalChannel()</code> method of the <code>Session</code> interface. As with a basic channel, the method registers the <code>ChannelSuccessCallback</code> interface.</p>
 <pre class="prettyprint">
 session.openLogicalChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;successCB, errorCB);
+                            0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe],
+                           successCB, errorCB);
 </pre></li>
-   </ol>   
-   </li> 
+   </ol>
+   </li>
   </ol>
-  
+
   <h2 id="Transmitting_APDU" name="Transmitting_APDU">Transmitting APDUs to Secure Elements</h2>
-  
-  <p>To use secure elements in your application, you must learn to transmit application protocol data units (APDU) to secure elements:</p> 
-  <ol> 
+
+  <p>To use secure elements in your application, you must learn to transmit application protocol data units (APDU) to secure elements:</p>
+  <ol>
    <li><p>To transmit an APDU command to a secure element, use the <code>transmit()</code> method of the <code>Channel</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Channel">wearable</a> applications).</p>
 <pre class="prettyprint">
 /* APDU command is defined in ISO7816-4 */
@@ -175,19 +175,19 @@ channel.transmit(command, successCB, errorCB);
 <pre class="prettyprint">
 function successCB(response)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;An APDU is transmitted successfully. The response is &quot; + response);
+   console.log("An APDU is transmitted successfully. The response is " + response);
 }
 function errorCB(err)
 {
-&nbsp;&nbsp;&nbsp;/* Error handling */
+   /* Error handling */
 }
 </pre></li>
-  </ol> 
-  
+  </ol>
+
   <h2 id="Closing_Sessions" name="Closing_Sessions">Closing Sessions and Channels</h2>
-  
-  <p>To use secure elements in your application, you must learn to close sessions and channels:</p> 
-  <ol> 
+
+  <p>To use secure elements in your application, you must learn to close sessions and channels:</p>
+  <ol>
    <li><p>To close a specific channel, use the <code>close()</code> method of the <code>Channel</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Channel">wearable</a> applications):</p>
 <pre class="prettyprint">
 channel.close();
diff --git a/org.tizen.guides/html/web/connectivity/task_bluetoothchat_w.htm b/org.tizen.guides/html/web/connectivity/task_bluetoothchat_w.htm
index 776c546..013f822 100644 (file)
--- a/org.tizen.guides/html/web/connectivity/task_bluetoothchat_w.htm
+++ b/org.tizen.guides/html/web/connectivity/task_bluetoothchat_w.htm
@@ -35,7 +35,7 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API for Mobile Web</a></li> 
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API for Mobile Web</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/web/Communication/Bluetooth_Chat" target="_blank">Bluetooth Chat Sample Description</a></li>
                </ul>
        </div></div>
@@ -44,14 +44,14 @@
 <div id="container"><div id="contents"><div class="content">
 
   <h1>Task: Bluetooth Chat</h1>
-  <p>This task, based on the BluetoothChat sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth</a> API to create a chat between 2 devices. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Bluetooth_Chat" target="blank">Bluetooth Chat</a>.</p> 
+  <p>This task, based on the BluetoothChat sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth</a> API to create a chat between 2 devices. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Bluetooth_Chat" target="blank">Bluetooth Chat</a>.</p>
   <p>This task consists of the following parts:</p>
   <ul>
    <li><a href="#Defining_App_Layout">Defining the Application Layout</a> defines how to create the application screens.</li>
    <li><a href="#Initializing_App">Initializing the Application</a> defines how to initialize the application.</li>
    <li><a href="#Creating_Connection">Creating the Connection</a> defines how to set up a bluetooth adapter, register a chat server, and connect devices to the server.</li>
    <li><a href="#Exchanging_Data">Sending a Message</a> defines how to send messages between Bluetooth devices.</li>
-  </ul> 
+  </ul>
   <p>This sample is a fully functional application for creating a chat application.</p>
 
   <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
@@ -69,28 +69,28 @@
 
 <pre class="prettyprint lang-html">
 &lt;!--Main screen layout--&gt;
-&lt;div id=&quot;start&quot; data-role=&quot;page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;start-header&quot; data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Bluetooth chat&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="start" data-role="page"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div id="start-header" data-role="header" data-position="fixed"&gt;
+      &lt;h1&gt;Bluetooth chat&lt;/h1&gt;
+   &lt;/div&gt;
 </pre></li>
  <li> <p>The actual content section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>content</code>. It contains <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">buttons</a> for turning on the Bluetooth connection and either creating or joining a server connection. The buttons displayed depend on whether the Bluetooth adapter is on.</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;start-content&quot; data-role=&quot;content&quot; data-scroll=&quot;none&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;ui-btn-start&quot; id=&quot;turnOnButton&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;display: none;&quot;&gt;Turn bluetooth on&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;ui-btn-start&quot; id=&quot;serverButton&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;display: none;&quot;&gt;Create server&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;ui-btn-start&quot; id=&quot;clientButton&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;display: none;&quot;&gt;Join server&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;start-monit&quot; style=&quot;display: none;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Waiting for Bluetooth...&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;!--Content section--&gt;
+   &lt;div id="start-content" data-role="content" data-scroll="none"&gt;
+      &lt;div class="box"&gt;
+         &lt;div data-role="button" class="ui-btn-start" id="turnOnButton"
+              style="display: none;"&gt;Turn bluetooth on&lt;/div&gt;
+         &lt;div data-role="button" class="ui-btn-start" id="serverButton"
+              style="display: none;"&gt;Create server&lt;/div&gt;
+         &lt;div data-role="button" class="ui-btn-start" id="clientButton"
+              style="display: none;"&gt;Join server&lt;/div&gt;
+         &lt;div id="start-monit" style="display: none;"&gt;
+            &lt;p&gt;Waiting for Bluetooth...&lt;/p&gt;
+         &lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
   </li>
@@ -101,26 +101,26 @@
 <pre class="prettyprint">
 checkPowerState: function App_checkPowerState()
 {
-&nbsp;&nbsp;&nbsp;this.ui.setContentStartAttributes(this.model.checkPowerState.bind(this.model,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.ui.showPowerOnButton,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.ui.showStartButtons));
+   this.ui.setContentStartAttributes(this.model.checkPowerState.bind(this.model,
+                                                                     this.ui.showPowerOnButton,
+                                                                     this.ui.showStartButtons));
 },
 </pre>
 </li>
 <li><strong>app.ui.events.js Source File</strong>
 <p>The <strong>Create server</strong> and <strong>Join server</strong> button events are defined in the <code>app.ui.events.js</code> file. All the application events are based on jQuery selectors.</p>
 <pre class="prettyprint">
-$(&#39;#serverButton&#39;).on(&#39;click&#39;, function(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.resetApplicationMode();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startServer();
-&nbsp;&nbsp;&nbsp;});
-
-$(&#39;#clientButton&#39;).on(&#39;click&#39;, function(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.resetApplicationMode();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startClient();
-&nbsp;&nbsp;&nbsp;});
+$('#serverButton').on('click', function(event)
+   {
+      app.resetApplicationMode();
+      app.startServer();
+   });
+
+$('#clientButton').on('click', function(event)
+   {
+      app.resetApplicationMode();
+      app.startClient();
+   });
 </pre>
 </li>
 
@@ -129,48 +129,48 @@ $(&#39;#clientButton&#39;).on(&#39;click&#39;, function(event)
 <li>
 <p>When the user taps the <strong>Create server</strong> or <strong>Join server</strong> button, a keyboard is displayed and the user can enter the server or client name.</p>
 <pre class="prettyprint">
-&lt;div data-role=&quot;page&quot; id=&quot;keyboard&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; id=&quot;keyboard-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; id=&quot;keyboard-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;text&quot; id=&quot;keyboard-text&quot; maxlength=&quot;20&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Footer section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; data-style=&quot;tabbar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id=&quot;keyboard-ok-button&quot;&gt;&lt;a href=&quot;#&quot;&gt;OK&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="keyboard"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header" id="keyboard-header" data-position="fixed"&gt;
+      &lt;h1&gt;&lt;/h1&gt;
+   &lt;/div&gt;
+
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content" id="keyboard-content"&gt;
+      &lt;input type="text" id="keyboard-text" maxlength="20"/&gt;
+   &lt;/div&gt;
+
+   &lt;!--Footer section--&gt;
+   &lt;div data-role="footer" data-position="fixed"&gt;
+      &lt;div data-role="tabbar" data-style="tabbar"&gt;
+         &lt;ul&gt;
+            &lt;li id="keyboard-ok-button"&gt;&lt;a href="#"&gt;OK&lt;/a&gt;&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
 <li><p>When the user enters the server or client name and taps <strong>OK</strong>, the <code>getApplicationMode()</code> method analyzes the input and displays the server selection or chat screen, respectively.</p>
 <pre class="prettyprint">
-$(&#39;#keyboard-ok-button&#39;).on(&#39;click&#39;, function(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var value = $(&#39;#keyboard-text&#39;).val(), mode;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (value.length !== 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.setUserName(value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mode = app.getApplicationMode();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (mode === &#39;server&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.setAdapterName();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (mode === &#39;client&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.mobile.changePage(&#39;#choose&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+$('#keyboard-ok-button').on('click', function(event)
+   {
+      event.preventDefault();
+      var value = $('#keyboard-text').val(), mode;
+      if (value.length !== 0)
+      {
+         app.setUserName(value);
+         mode = app.getApplicationMode();
+         if (mode === 'server')
+         {
+            app.setAdapterName();
+         }
+         else if (mode === 'client')
+         {
+            $.mobile.changePage('#choose');
+         }
+      }
+   });
 </pre>
 </li>
 </ol>
@@ -178,67 +178,67 @@ $(&#39;#keyboard-ok-button&#39;).on(&#39;click&#39;, function(event)
 </ol>
 
 
-<h3 id="server" name="server">Defining the Choose Your Server Screen</h3> 
+<h3 id="server" name="server">Defining the Choose Your Server Screen</h3>
 <ol>
 <li><strong>templates/choose_page.tpl Source File</strong>
 <ol type="a"><li><p>The content section of the Choose your server screen displays a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> of available servers.</p>
 <pre class="prettyprint">
-&lt;div data-role=&quot;page&quot; id=&quot;choose&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; id=&quot;choose-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Choose your server&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;progress&quot; data-style=&quot;circle&quot; id=&quot;discovering&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; id=&quot;choose-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="choose"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header" id="choose-header" data-position="fixed"&gt;
+      &lt;h1&gt;Choose your server&lt;/h1&gt;
+      &lt;div data-role="progress" data-style="circle" id="discovering"&gt;&lt;/div&gt;
+   &lt;/div&gt;
+
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content" id="choose-content"&gt;
+      &lt;ul data-role="listview"&gt;&lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
 <li>
 <p>When the user taps a server name, the system starts searching for the server and attempts to connect to it. After connecting, the system displays confirmation <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Popup.htm">pop-ups</a>.</p>
 <pre class="prettyprint">
-$(&#39;#choose-content&#39;).on(&#39;tap&#39;, &#39;ul.ui-listview li&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.client.stopServerSearching($(this).attr(&#39;address&#39;));
-&nbsp;&nbsp;&nbsp;});
+$('#choose-content').on('tap', 'ul.ui-listview li', function()
+   {
+      app.client.stopServerSearching($(this).attr('address'));
+   });
 </pre>
 </li>
 </ol>
 </li>
-</ol> 
+</ol>
 
 <h3 id="chat" name="chat">Defining the Chat Screen</h3>
 <ol>
 <li><strong>templates/chat_page.tpl Source File</strong>
-<p>The structure of this template is similar to the main screen. The header displays the current role of the device (server or client) and its name.</p> 
+<p>The structure of this template is similar to the main screen. The header displays the current role of the device (server or client) and its name.</p>
 <p>The content area displays a list view with message bubbles. The layout of the bubbles is defined in the <code>left_bubble.tpl</code> and <code>right_bubble.tpl</code> template files.</p>
  <p>The footer section contains a <code>textArea</code> for writing a message and a button for sending it.</p>
 <pre class="prettyprint">
-&lt;div id=&quot;chat&quot; data-role=&quot;page&quot; data-footer-exist=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;chat-header&quot; data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;&lt;span id=&quot;chat-header-type&quot;&gt;&lt;/span&gt;&lt;span id=&quot;chat-header-name&quot;&gt;&lt;/span&gt;&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;chat-content&quot; data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Footer section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;chat-footer&quot; data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ui-textArea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ui-textArea-text&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id=&quot;text&quot; placeholder=&quot;Your message&quot; data-role=&quot;none&quot;&gt;&lt;/textarea&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ui-textArea-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a data-role=&quot;button&quot; id=&quot;ui-mySend&quot;&gt;Send&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="chat" data-role="page" data-footer-exist="true"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div id="chat-header" data-role="header" data-position="fixed"&gt;
+      &lt;h1&gt;&lt;span id="chat-header-type"&gt;&lt;/span&gt;&lt;span id="chat-header-name"&gt;&lt;/span&gt;&lt;/h1&gt;
+   &lt;/div&gt;
+
+   &lt;!--Content section--&gt;
+   &lt;div id="chat-content" data-role="content"&gt;
+      &lt;ul data-role="listview"&gt;&lt;/ul&gt;
+   &lt;/div&gt;
+
+   &lt;!--Footer section--&gt;
+   &lt;div id="chat-footer" data-role="footer" data-position="fixed"&gt;
+      &lt;div id="ui-textArea"&gt;
+         &lt;div id="ui-textArea-text"&gt;
+            &lt;textarea id="text" placeholder="Your message" data-role="none"&gt;&lt;/textarea&gt;
+         &lt;/div&gt;
+         &lt;div id="ui-textArea-button"&gt;
+            &lt;a data-role="button" id="ui-mySend"&gt;Send&lt;/a&gt;
+         &lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -248,14 +248,14 @@ $(&#39;#choose-content&#39;).on(&#39;tap&#39;, &#39;ul.ui-listview li&#39;, func
 <pre class="prettyprint">
 checkSendButtonState: function Ui_checkSendButtonState()
 {
-&nbsp;&nbsp;&nbsp;if (app.helpers.checkStringLength($(&#39;#text&#39;).val().trim()) &amp;&amp; app.isConnection())
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.enableSendButton();
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.disableSendButton();
-&nbsp;&nbsp;&nbsp;}
+   if (app.helpers.checkStringLength($('#text').val().trim()) &amp;&amp; app.isConnection())
+   {
+      this.enableSendButton();
+   }
+   else
+   {
+      this.disableSendButton();
+   }
 },
 </pre>
 </li>
@@ -268,12 +268,12 @@ checkSendButtonState: function Ui_checkSendButtonState()
 <pre class="prettyprint">
 &lt;!--Configuration file content--&gt;
 &lt;widget ...&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/bluetooth.admin&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/bluetooth.gap&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/bluetooth.spp&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
+   &lt;!--Other configuration details--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/bluetooth.admin"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/bluetooth.gap"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/bluetooth.spp"/&gt;
+   &lt;!--Other configuration details--&gt;
 &lt;/widget&gt;
 </pre>
    </li>
@@ -297,21 +297,21 @@ this.adapter = tizen.bluetooth.getDefaultAdapter();
 <pre class="prettyprint">
 powerOn: function Model_powerOn(callback)
 {
-&nbsp;&nbsp;&nbsp;if (!this.adapter.powered)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.adapter.setPowered(true, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {callback();}, 500);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.ui.showPowerOnButton();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback();
-&nbsp;&nbsp;&nbsp;}
+   if (!this.adapter.powered)
+   {
+      try
+      {
+         this.adapter.setPowered(true, function()
+            {
+               setTimeout(function() {callback();}, 500);
+            });
+         app.ui.showPowerOnButton();
+      }
+   }
+   else
+   {
+      callback();
+   }
 },
 </pre>
   </li>
@@ -325,8 +325,8 @@ powerOn: function Model_powerOn(callback)
 <pre class="prettyprint">
 registerServer: function Server_registerServer()
 {
-&nbsp;&nbsp;&nbsp;this.model.registerServer(this.adapter, this.serviceUUID,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.registerServerSuccess.bind(this));
+   this.model.registerServer(this.adapter, this.serviceUUID,
+                             this.registerServerSuccess.bind(this));
 },
 </pre>
   </li>
@@ -340,15 +340,15 @@ registerServer: function Server_registerServer()
   <p>After defining the default Bluetooth adapter and setting up the server, you can select the requested server and bond the devices using the <code>connectToService()</code> method.</p>
 <pre class="prettyprint">
 connectToService: function ClientModel_connectToService(device, serviceUUID,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;successCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorCallback)
+                                                        successCallback,
+                                                        errorCallback)
 {
-&nbsp;&nbsp;&nbsp;this.client.chatServerDevice = device;
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device.connectToServiceByUUID(serviceUUID, successCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorCallback, &#39;RFCOMM&#39;);
-&nbsp;&nbsp;&nbsp;}
+   this.client.chatServerDevice = device;
+   try
+   {
+      device.connectToServiceByUUID(serviceUUID, successCallback,
+                                    errorCallback, 'RFCOMM');
+   }
 },
 </pre>
 </li>
@@ -372,24 +372,24 @@ sendPing: function ClientModel_sendPing(name, socket)
 <pre class="prettyprint">
 sendMessage: function ClientModel_sendMessage(name, socket, message, callback)
 {
-&nbsp;&nbsp;&nbsp;var sendTextMsg = [], messageObj, messageObjToString, i, len;
-&nbsp;&nbsp;&nbsp;name = encodeURIComponent(name);
-&nbsp;&nbsp;&nbsp;message = encodeURIComponent(message);
-&nbsp;&nbsp;&nbsp;messageObj = {name: name, text: message, ping: false, bye: false};
-&nbsp;&nbsp;&nbsp;messageObjToString = JSON.stringify(messageObj);
-&nbsp;&nbsp;&nbsp;len = messageObjToString.length;
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sendTextMsg[i] = messageObjToString.charCodeAt(i);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (socket !== null &amp;&amp; socket.state === &quot;OPEN&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;socket.writeData(sendTextMsg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback(message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   var sendTextMsg = [], messageObj, messageObjToString, i, len;
+   name = encodeURIComponent(name);
+   message = encodeURIComponent(message);
+   messageObj = {name: name, text: message, ping: false, bye: false};
+   messageObjToString = JSON.stringify(messageObj);
+   len = messageObjToString.length;
+   for (i = 0; i &lt; len; i += 1)
+   {
+      sendTextMsg[i] = messageObjToString.charCodeAt(i);
+   }
+   try
+   {
+      if (socket !== null &amp;&amp; socket.state === "OPEN")
+      {
+         socket.writeData(sendTextMsg);
+         callback(message);
+      }
+   }
 },
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/connectivity/task_contactsexchanger_w.htm b/org.tizen.guides/html/web/connectivity/task_contactsexchanger_w.htm
index b54e1a3..493f21b 100644 (file)
--- a/org.tizen.guides/html/web/connectivity/task_contactsexchanger_w.htm
+++ b/org.tizen.guides/html/web/connectivity/task_contactsexchanger_w.htm
@@ -44,11 +44,11 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Task: Contacts Exchanger</h1> 
+  <h1>Task: Contacts Exchanger</h1>
   <p>This task, based on the ContactsExchanger sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC</a> API to exchange contacts between devices. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Contacts_Exchanger" target="blank">Contacts Exchanger</a>.</p>
 
   <p>This task consists of the following parts:</p>
-  <ul> 
+  <ul>
    <li><a href="#Defining_App_Layout">Defining the Application Layout</a> defines how to create the application screens.</li>
    <li><a href="#Initializing_App">Initializing the Application</a> defines how to initialize the application.</li>
    <li><a href="#Setting_NFC_Conn">Setting up the NFC Connection</a> defines how to set up and manage the NFC connection.</li>
@@ -57,8 +57,8 @@
   </ul>
   <p>This sample is a fully functional application for exchanging between devices contact information based on contacts on a SIM card.</p>
 
-  <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2> 
-  <p>The ContactsExchanger sample application layout consists of 4 screens: the main screen displays the default contact and the operation buttons, the Contacts list screen displays a list of contacts, the Add contact screen allows the user to add a new contact, and the transfer screen is displayed when the user clicks an operation button on the main screen.</p> 
+  <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
+  <p>The ContactsExchanger sample application layout consists of 4 screens: the main screen displays the default contact and the operation buttons, the Contacts list screen displays a list of contacts, the Add contact screen allows the user to add a new contact, and the transfer screen is displayed when the user clicks an operation button on the main screen.</p>
 
 
   <p>The following figure shows the main screens of the application.</p>
@@ -68,23 +68,23 @@
 <h3 id="main" name="main">Defining the Main Screen</h3>
   <ol>
    <li><strong>index.html Source File</strong>
-<ol type="a"><li>   
+<ol type="a"><li>
 <p>The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
 <pre class="prettyprint lang-html">
 &lt;!--Main screen layout--&gt;
-&lt;div data-role=&quot;page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; id=&quot;header-start&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Contacts exchanger&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="main"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header" id="header-start"&gt;
+      &lt;h1&gt;Contacts exchanger&lt;/h1&gt;
+   &lt;/div&gt;
 </pre></li>
 <li>
 <p>The main screen content is dynamic and created during the runtime.</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; id=&quot;content-start&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Dynamic content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content" id="content-start"&gt;
+      &lt;!--Dynamic content--&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
    </li>
@@ -95,51 +95,51 @@
 <pre class="prettyprint">
 loadStartPage: function ui_loadStartPage()
 {
-&nbsp;&nbsp;&nbsp;if (localStorage.started === undefined)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.loadTemporaryContent();
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.loadStartContent();
-&nbsp;&nbsp;&nbsp;}
+   if (localStorage.started === undefined)
+   {
+      this.loadTemporaryContent();
+   }
+   else
+   {
+      this.loadStartContent();
+   }
 }
 </pre>
 </li>
 <li>
 <p>If the default contact card is not defined, the content section of the screen displays a message and a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a> allowing user to create the default card.</p>
 <pre class="prettyprint">
-&lt;div class=&quot;box&quot; id=&quot;temporaryBox&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;p class=&quot;defaultText&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Default card is not defined yet!&lt;br/&gt; Do you want to define it now?
-&nbsp;&nbsp;&nbsp;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;ui-btn-create&quot;&gt;Create default card&lt;/div&gt;
+&lt;div class="box" id="temporaryBox"&gt;
+   &lt;p class="defaultText"&gt;
+      Default card is not defined yet!&lt;br/&gt; Do you want to define it now?
+   &lt;/p&gt;
+   &lt;div data-role="button" class="ui-btn-create"&gt;Create default card&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
 <li><p>When the default card is defined and the default contact is selected, the main screen displays information about the default contact, and the operation buttons for changing the default contact, reading from or writing to the card, and communicating with another device.</p>
 <pre class="prettyprint">
-&lt;div class=&quot;box&quot; id=&quot;startBox&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;comment&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;comment&quot;&gt;Your default contact&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;comment&quot; id=&quot;comment-name&quot;&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;comment&quot; id=&quot;comment-phone&quot;&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;ui-btn-create&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Change your default contact
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;gap&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;ui-btn-create&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Read from card
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;gap&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;ui-btn-create&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Write to card
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;gap&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;ui-btn-create&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Communicate with another device
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="box" id="startBox"&gt;
+   &lt;div id="comment"&gt;
+      &lt;p class="comment"&gt;Your default contact&lt;/p&gt;
+      &lt;p class="comment" id="comment-name"&gt;&lt;/p&gt;
+      &lt;p class="comment" id="comment-phone"&gt;&lt;/p&gt;
+   &lt;/div&gt;
+   &lt;div data-role="button" class="ui-btn-create"&gt;
+      Change your default contact
+   &lt;/div&gt;
+   &lt;div class="gap"&gt;&lt;/div&gt;
+   &lt;div data-role="button" class="ui-btn-create"&gt;
+      Read from card
+   &lt;/div&gt;
+   &lt;div class="gap"&gt;&lt;/div&gt;
+   &lt;div data-role="button" class="ui-btn-create"&gt;
+      Write to card
+   &lt;/div&gt;
+   &lt;div class="gap"&gt;&lt;/div&gt;
+   &lt;div data-role="button" class="ui-btn-create"&gt;
+      Communicate with another device
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -150,12 +150,12 @@ loadStartPage: function ui_loadStartPage()
     <ol><li><strong>index.html Source File</strong>
   <p>The Contacts list screen displays an aggregated contact <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> sorted by name. The contacts are loaded from the device default address book using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API methods.</p>
 <pre class="prettyprint">
-&lt;ul data-role=&quot;listview&quot; id=&quot;list-choose&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-multiline&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt; &lt;!--Contact name--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-sub&quot;&gt;&lt;!--Contact phone number--&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&lt;ul data-role="listview" id="list-choose"&gt;
+   &lt;li class="ui-li-multiline"&gt;
+      &lt;a href="#"&gt; &lt;!--Contact name--&gt;
+         &lt;span class="ui-li-text-sub"&gt;&lt;!--Contact phone number--&gt;&lt;/span&gt;
+      &lt;/a&gt;
+   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
 <p>Selecting a list item saves the contact information in the local storage, and returns the user to the main screen.</p>
@@ -168,51 +168,51 @@ loadStartPage: function ui_loadStartPage()
   <ol type="a"><li>
 <p>The transfer page is displayed shortly when the user taps the <strong>Read from card</strong>, <strong>Write to card</strong>, or <strong>Communicate with another device</strong> button on the main screen.</p>
 <pre class="prettyprint">
-$.mobile.changePage(&#39;#transfer&#39;);
+$.mobile.changePage('#transfer');
 </pre>
 </li>
 <li>
 <p>After the <code>pageshow</code> event, the screen is prepared according to the selected button. The <code>getDefaultAdapter()</code> method is used to check the NFC connection status.</p>
 <pre class="prettyprint">
-$(&#39;#transfer&#39;).on(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tizen.nfc.getDefaultAdapter().powered)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var option = $(this).data(&#39;option&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (option === &#39;read&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.prepareWaitingPage(&#39;Card to device&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;PUT WIRELESS TAG&lt;br/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CLOSE TO&lt;br/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;YOUR DEVICE&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.app.nfc.card.setTagDetectRead();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (option === &#39;write&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.prepareWaitingPage(&#39;Device to card&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;PUT WIRELESS TAG&lt;br/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CLOSE TO&lt;br/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;YOUR DEVICE&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.app.nfc.card.setTagDetectWrite();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.prepareWaitingPage(&#39;Device to device&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;PUT YOUR DEVICE&lt;br/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CLOSE TO&lt;br/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OTHER DEVICE&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.app.nfc.peer.setTargetDetect();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.mobile.changePage(&#39;#start&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&#39;Please turn on NFC adapter&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+$('#transfer').on('pageshow', function()
+   {
+      if (tizen.nfc.getDefaultAdapter().powered)
+      {
+         try
+         {
+            var option = $(this).data('option');
+            if (option === 'read')
+            {
+               self.prepareWaitingPage('Card to device',
+                                       'PUT WIRELESS TAG&lt;br/&gt;
+                                        CLOSE TO&lt;br/&gt;
+                                        YOUR DEVICE');
+               self.app.nfc.card.setTagDetectRead();
+            }
+            else if (option === 'write')
+            {
+               self.prepareWaitingPage('Device to card',
+                                       'PUT WIRELESS TAG&lt;br/&gt;
+                                        CLOSE TO&lt;br/&gt;
+                                        YOUR DEVICE');
+               self.app.nfc.card.setTagDetectWrite();
+            }
+            else
+            {
+               self.prepareWaitingPage('Device to device',
+                                       'PUT YOUR DEVICE&lt;br/&gt;
+                                        CLOSE TO&lt;br/&gt;
+                                        OTHER DEVICE');
+               self.app.nfc.peer.setTargetDetect();
+            }
+         }
+      }
+      else
+      {
+         $.mobile.changePage('#start');
+         alert('Please turn on NFC adapter');
+      }
+   });
 </pre>
 </li>
 <li>
@@ -220,15 +220,15 @@ $(&#39;#transfer&#39;).on(&#39;pageshow&#39;, function()
 <pre class="prettyprint">
 prepareWaitingPage: function ui_prepareWaitingPage(title, text)
 {
-&nbsp;&nbsp;&nbsp;var waitingBox, waitingContent, contentTransfer = $(&#39;#content-transfer&#39;);
-&nbsp;&nbsp;&nbsp;waitingBox = $(&#39;&lt;div class=&quot;box&quot; id=&quot;waitingBox&quot;&gt;&lt;/div&gt;&#39;);
-&nbsp;&nbsp;&nbsp;waitingContent = $(this.getWaitingContentHtml(text));
-&nbsp;&nbsp;&nbsp;$(&#39;#header-transfer H1&#39;).text(title);
-&nbsp;&nbsp;&nbsp;contentTransfer.empty();
-&nbsp;&nbsp;&nbsp;waitingBox.append(waitingContent);
-&nbsp;&nbsp;&nbsp;contentTransfer.append(waitingBox);
-&nbsp;&nbsp;&nbsp;$(&#39;#content-start&#39;).trigger(&#39;create&#39;);
-&nbsp;&nbsp;&nbsp;this.app.countDown(10, $(&#39;#counter&#39;));
+   var waitingBox, waitingContent, contentTransfer = $('#content-transfer');
+   waitingBox = $('&lt;div class="box" id="waitingBox"&gt;&lt;/div&gt;');
+   waitingContent = $(this.getWaitingContentHtml(text));
+   $('#header-transfer H1').text(title);
+   contentTransfer.empty();
+   waitingBox.append(waitingContent);
+   contentTransfer.append(waitingBox);
+   $('#content-start').trigger('create');
+   this.app.countDown(10, $('#counter'));
 },
 </pre>
 </li>
@@ -238,36 +238,36 @@ prepareWaitingPage: function ui_prepareWaitingPage(title, text)
 <pre class="prettyprint">
 countDown: function countDown(time, obj)
 {
-&nbsp;&nbsp;&nbsp;if (!this.counterState)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.countDown(time, obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}.bind(this), 500);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;obj.text(time);
-&nbsp;&nbsp;&nbsp;if (time &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.nfc.isPowered())
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time -= 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.timeOutHandler = setTimeout(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.countDown(time, obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}.bind(this), 1000);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nfc.timeExpired();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nfc.timeExpired();
-&nbsp;&nbsp;&nbsp;}
+   if (!this.counterState)
+   {
+      setTimeout(function()
+         {
+            this.countDown(time, obj);
+         }.bind(this), 500);
+
+      return;
+   }
+
+   obj.text(time);
+   if (time &gt; 0)
+   {
+      if (this.nfc.isPowered())
+      {
+         time -= 1;
+         this.timeOutHandler = setTimeout(function()
+            {
+               this.countDown(time, obj);
+            }.bind(this), 1000);
+      }
+      else
+      {
+         this.nfc.timeExpired();
+      }
+   }
+   else
+   {
+      this.nfc.timeExpired();
+   }
 },
 </pre>
 </li>
@@ -279,32 +279,32 @@ countDown: function countDown(time, obj)
 <p>The Add contact screen displays the contact information received from another device. The user can save the contact information in the device default address book by tapping the <strong>Save</strong> button.</p>
 
 <pre class="prettyprint lang-html">
-&lt;div id=&quot;contact&quot; data-role=&quot;page&quot; data-footer-exist=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; id=&quot;header-contact&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Add contact&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a data-role=&quot;button&quot; id=&quot;save-contact&quot;&gt;Save&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="contact" data-role="page" data-footer-exist="true"&gt;
+   &lt;div data-role="header" id="header-contact" data-position="fixed"&gt;
+      &lt;h1&gt;Add contact&lt;/h1&gt;
+      &lt;a data-role="button" id="save-contact"&gt;Save&lt;/a&gt;
+   &lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; id=&quot;content-contact&quot;&gt;&lt;/div&gt;
+   &lt;div data-role="content" id="content-contact"&gt;&lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;footer&quot; id=&quot;footer-contact&quot; data-position=&quot;fixed&quot;&gt;&lt;/div&gt;
+   &lt;div data-role="footer" id="footer-contact" data-position="fixed"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li></ol>
 
  <h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
-  <ol> 
+  <ol>
    <li><strong>config.xml Source File</strong>
     <p>The required privileges are declared in the <code>config.xml</code> file.</p>
 <pre class="prettyprint">
 &lt;!--Configuration file content--&gt;
 &lt;widget ...&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.admin&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.common&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.p2p&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/nfc.tag&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
+   &lt;!--Other configuration details--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/nfc.admin"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/nfc.common"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/nfc.p2p"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/nfc.tag"/&gt;
+   &lt;!--Other configuration details--&gt;
 &lt;/widget&gt;
 </pre>
    </li>
@@ -318,23 +318,23 @@ countDown: function countDown(time, obj)
 <pre class="prettyprint">
 startNFC: function nfc_startNFC()
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nfcAdapter = tizen.nfc.getDefaultAdapter();
+   try
+   {
+      this.nfcAdapter = tizen.nfc.getDefaultAdapter();
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.nfcAdapter.powered)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nfcStateMemory = true;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.onPowerOn();
+      if (this.nfcAdapter.powered)
+      {
+         this.nfcStateMemory = true;
+         this.onPowerOn();
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+         return;
+      }
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nfcStateMemory = false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nfcAdapter.setPowered(true, this.onPowerOn.bind(this),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.onPowerOnFails.bind(this));
+      this.nfcStateMemory = false;
+      this.nfcAdapter.setPowered(true, this.onPowerOn.bind(this),
+                                 this.onPowerOnFails.bind(this));
 
-&nbsp;&nbsp;&nbsp;},
+   },
 }
 </pre>
 </li>
@@ -352,11 +352,11 @@ startNFC: function nfc_startNFC()
 <pre class="prettyprint">
 setTagDetectRead: function nfc_card_setTagDetectRead()
 {
-&nbsp;&nbsp;&nbsp;this.nfc.nfcAdapter.setTagListener(
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onattach: this.sucTagReadAttach.bind(this),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ondetach: this.nfc.sucDetach.bind(this.nfc)
-&nbsp;&nbsp;&nbsp;});
+   this.nfc.nfcAdapter.setTagListener(
+   {
+      onattach: this.sucTagReadAttach.bind(this),
+      ondetach: this.nfc.sucDetach.bind(this.nfc)
+   });
 }
 </pre>
 </li>
@@ -364,15 +364,15 @@ setTagDetectRead: function nfc_card_setTagDetectRead()
 <pre class="prettyprint">
 sucTagReadAttach: function nfc_card_sucTagReadAttach(tag)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!tag.isSupportedNDEF)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;throw {message: &quot;This tag doesn&#39;t support NDEF&quot;};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag.readNDEF(this.nfc.readMessage.bind(this.nfc),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.readMessageErr.bind(this));
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      if (!tag.isSupportedNDEF)
+      {
+         throw {message: "This tag doesn't support NDEF"};
+      }
+      tag.readNDEF(this.nfc.readMessage.bind(this.nfc),
+                   this.readMessageErr.bind(this));
+   }
 }
 </pre>
 </li>
@@ -380,19 +380,19 @@ sucTagReadAttach: function nfc_card_sucTagReadAttach(tag)
 <pre class="prettyprint">
 readMessage: function nfc_readMessage(message)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.fillRecordInfo(message.records[0]);
-&nbsp;&nbsp;&nbsp;} 
+   try
+   {
+      this.fillRecordInfo(message.records[0]);
+   }
 },
 fillRecordInfo: function nfc_fillRecordInfo(record)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var contactsData =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.resolveContact(this.convertNDEF2phoneNumber(record.payload));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.app.nfc.displayContact(contactsData);
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      var contactsData =
+         this.resolveContact(this.convertNDEF2phoneNumber(record.payload));
+      this.app.nfc.displayContact(contactsData);
+   }
 }
 </pre>
 <p>The retrieved contact information can be saved using the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API.</p>
@@ -409,32 +409,32 @@ fillRecordInfo: function nfc_fillRecordInfo(record)
 <pre class="prettyprint">
 setTagDetectWrite: function nfc_card_setTagDetectWrite()
 {
-&nbsp;&nbsp;&nbsp;var suc =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onattach: this.sucTagWriteAttach.bind(this),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ondetach: this.nfc.sucDetach.bind(this.nfc)
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;this.nfc.nfcAdapter.setTagListener(suc);
+   var suc =
+   {
+      onattach: this.sucTagWriteAttach.bind(this),
+      ondetach: this.nfc.sucDetach.bind(this.nfc)
+   };
+   this.nfc.nfcAdapter.setTagListener(suc);
 }
 </pre></li>
 <li><p>When the tag is attached, the contact is prepared for sending it over the NFC connection. The <code>prepareForNFC()</code> and <code>phoneNumber2NDEF()</code> methods convert the contact object to VCARD_30 format, create a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> object, and attach it to the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">NDEFRecordMedia</a> record with the VCARD_30 data. The NDEF message is saved to the tag and the main screen of the application is displayed.</p>
 <pre class="prettyprint">
 sucTagWriteAttach: function nfc_card_sucTagWriteAttach(tag)
 {
-&nbsp;&nbsp;&nbsp;var newMessage = null, fullContact = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Local storage contains the contact object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fullContact = this.nfc.prepareForNFC(localStorage);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newMessage = this.nfc.phoneNumber2NDEF(fullContact);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!tag.isSupportedNDEF)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;throw {message: &quot;This tag doesn&#39;t support NDEF&quot;};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag.writeNDEF(newMessage,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.sucSend.bind(this),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.errSend.bind(this));
-&nbsp;&nbsp;&nbsp;}
+   var newMessage = null, fullContact = '';
+   try
+   {
+      /* Local storage contains the contact object */
+      fullContact = this.nfc.prepareForNFC(localStorage);
+      newMessage = this.nfc.phoneNumber2NDEF(fullContact);
+      if (!tag.isSupportedNDEF)
+      {
+         throw {message: "This tag doesn't support NDEF"};
+      }
+      tag.writeNDEF(newMessage,
+                    this.sucSend.bind(this),
+                    this.errSend.bind(this));
+   }
 }
 </pre>
   </li>
@@ -452,15 +452,15 @@ sucTagWriteAttach: function nfc_card_sucTagWriteAttach(tag)
 <pre class="prettyprint">
 setTargetDetect: function nfc_peer_setTargetDetect()
 {
-&nbsp;&nbsp;&nbsp;var successCallbacks =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onattach: this.sucTargetAttach.bind(this),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ondetach: this.nfc.sucDetach.bind(this.nfc)
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nfc.nfcAdapter.setPeerListener(successCallbacks);
-&nbsp;&nbsp;&nbsp;}
+   var successCallbacks =
+   {
+      onattach: this.sucTargetAttach.bind(this),
+      ondetach: this.nfc.sucDetach.bind(this.nfc)
+   };
+   try
+   {
+      this.nfc.nfcAdapter.setPeerListener(successCallbacks);
+   }
 }
 </pre>
 </li>
@@ -469,16 +469,16 @@ setTargetDetect: function nfc_peer_setTargetDetect()
 <pre class="prettyprint">
 sucTargetAttach: function nfc_peer_sucTargetAttach(target)
 {
-&nbsp;&nbsp;&nbsp;var newMessage = null, fullContact = this.nfc.prepareForNFC(localStorage);
-&nbsp;&nbsp;&nbsp;this.nfc.nfcTarget = target;
-&nbsp;&nbsp;&nbsp;this.setReceiveFromTarget();
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newMessage = this.nfc.phoneNumber2NDEF(fullContact);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.sendNDEF(newMessage,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.sucSendToTarget.bind(this),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.errSendToTarget.bind(this));
-&nbsp;&nbsp;&nbsp;}
+   var newMessage = null, fullContact = this.nfc.prepareForNFC(localStorage);
+   this.nfc.nfcTarget = target;
+   this.setReceiveFromTarget();
+   try
+   {
+      newMessage = this.nfc.phoneNumber2NDEF(fullContact);
+      target.sendNDEF(newMessage,
+                      this.sucSendToTarget.bind(this),
+                      this.errSendToTarget.bind(this));
+   }
 }
 </pre>
 </li>
@@ -489,7 +489,7 @@ sucTargetAttach: function nfc_peer_sucTargetAttach(target)
 <pre class="prettyprint">
 setReceiveFromTarget: function nfc_peer_setReceiveFromTarget()
 {
-&nbsp;&nbsp;&nbsp;this.nfc.nfcTarget.setReceiveNDEFListener(this.nfc.readMessage.bind(this.nfc));
+   this.nfc.nfcTarget.setReceiveNDEFListener(this.nfc.readMessage.bind(this.nfc));
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/connectivity/task_downloadmanager_w.htm b/org.tizen.guides/html/web/connectivity/task_downloadmanager_w.htm
index ea73503..0526e4b 100644 (file)
--- a/org.tizen.guides/html/web/connectivity/task_downloadmanager_w.htm
+++ b/org.tizen.guides/html/web/connectivity/task_downloadmanager_w.htm
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w_optional.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -43,14 +43,14 @@
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Task: Download Manager</h1> 
+  <h1>Task: Download Manager</h1>
 
  <p>This task, based on the DownloadManager sample delivered with the Tizen Studio, demonstrates how you can use the Download API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a> applications) to asynchronously download URL content to the device storage. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Content/Download_Manager" target="blank">Download Manager</a>.</p>
-  <p>This task consists of the following parts:</p> 
+  <p>This task consists of the following parts:</p>
   <ul>
    <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
    <li><a href="#manage">Managing Downloads</a> defines how to start, pause, resume, or cancel a content download.</li>
-  </ul> 
+  </ul>
   <p>This sample is a fully functional application which allows the user to download any content by providing its URL. The user can control the download process.</p>
 
 
@@ -68,47 +68,47 @@
    <li><strong>index.html Source File</strong>
 <p>The main screen of the application displays the URL input field, whose value is by default set to <strong>http://trailers.divx.com/divx_prod/profiles/WiegelesHeliSki_DivXPlus_19Mbps.mkv</strong>, and the <strong>OK</strong> button.</p>
 <pre class="prettyprint lang-html">
-&lt;div id=&quot;main-header&quot; data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Download manager&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;main-url-div&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;main-input-div&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;text&quot; id=&quot;main-url-text&quot; placeholder=&quot;type URL&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;http://trailers.divx.com/divx_prod/profiles/WiegelesHeliSki_DivXPlus_19Mbps.mkv&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;main-button-div&quot;&gt;&lt;a data-role=&quot;button&quot; id=&quot;main-url-ok&quot;&gt;OK&lt;/a&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="main-header" data-role="header" data-position="fixed"&gt;
+   &lt;h1&gt;Download manager&lt;/h1&gt;
+   &lt;div id="main-url-div"&gt;
+      &lt;div id="main-input-div"&gt;
+         &lt;input type="text" id="main-url-text" placeholder="type URL"
+                value="http://trailers.divx.com/divx_prod/profiles/WiegelesHeliSki_DivXPlus_19Mbps.mkv"/&gt;
+      &lt;/div&gt;
+      &lt;div id="main-button-div"&gt;&lt;a data-role="button" id="main-url-ok"&gt;OK&lt;/a&gt;&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
 <li><strong>js/app.ui.events.js Source File</strong>
 <p>Clicking the <strong>OK</strong> button starts the download.</p>
 <pre class="prettyprint">
-$(&#39;#main-header&#39;).on(&#39;tap&#39;, &#39;#main-url-ok&#39;, function onUrlOkTap()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startDownloading($(&#39;#main-url-text&#39;).val());
-&nbsp;&nbsp;&nbsp;});
+$('#main-header').on('tap', '#main-url-ok', function onUrlOkTap()
+   {
+      app.startDownloading($('#main-url-text').val());
+   });
 </pre></li>
 
 <li><strong>index.html Source File</strong>
         <p>The download items are displayed on the main screen as a list, and the footer has the <strong>Refresh</strong> button.</p>
 <pre class="prettyprint lang-html">
-&lt;div id=&quot;main-content&quot; data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;&lt;/ul&gt;
+&lt;div id="main-content" data-role="content"&gt;
+   &lt;ul data-role="listview"&gt;&lt;/ul&gt;
 &lt;/div&gt;
 
-&lt;div id=&quot;main-footer&quot; data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; data-inline=&quot;true&quot; data-style=&quot;round&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;refresh-button&quot;&gt;Refresh&lt;/div&gt;
+&lt;div id="main-footer" data-role="footer" data-position="fixed"&gt;
+   &lt;div data-role="button" data-inline="true" data-style="round"
+        id="refresh-button"&gt;Refresh&lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
 <li><strong>js/app.ui.events.js Source File</strong>
 <p>Clicking the <strong>Refresh</strong> button refreshes the download item list.</p>
 <pre class="prettyprint">
-$(&#39;#refresh-button&#39;).on(&#39;tap&#39;, function onRefreshBtnTap(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.refreshDownloadsList();
-&nbsp;&nbsp;&nbsp;});
+$('#refresh-button').on('tap', function onRefreshBtnTap(event)
+   {
+      event.preventDefault();
+      event.stopPropagation();
+      app.refreshDownloadsList();
+   });
 </pre></li></ol>
 
   <h3 id="template" name="template">Defining the Template Mechanism</h3>
@@ -123,70 +123,70 @@ $(&#39;#refresh-button&#39;).on(&#39;tap&#39;, function onRefreshBtnTap(event)
 <pre class="prettyprint">
 loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
 {
-&nbsp;&nbsp;&nbsp;var self = this,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplName,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplPath;
-
-&nbsp;&nbsp;&nbsp;if ($.isArray(tplNames))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* For each template */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(tplNames, function onTplIterate(index, fileName)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Cache template html */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (self.cache[fileName] === undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplName =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileName,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.config.get(&#39;templateExtension&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;].join(&#39;&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplPath =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.config.get(&#39;templateDir&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplName
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;].join(&#39;/&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: tplPath,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cache: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType: &#39;html&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;async: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success: function onTplLoadSuccess(data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Increase counter */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates += 1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save to cache */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.cache[fileName] = data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* If all templates are cached, launch callback */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (cachedTemplates &gt;= tplNames.length
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error: function onTplLoadError(jqXHR, textStatus, errorThrown)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Template is already cached */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates += 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* If all templates are cached, launch callback */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (cachedTemplates &gt;= tplNames.length
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   var self = this,
+       cachedTemplates = 0,
+       tplName,
+       tplPath;
+
+   if ($.isArray(tplNames))
+   {
+      /* For each template */
+      $.each(tplNames, function onTplIterate(index, fileName)
+         {
+            /* Cache template html */
+            if (self.cache[fileName] === undefined)
+            {
+               tplName =
+               [
+                  fileName,
+                  app.config.get('templateExtension')
+               ].join('');
+               tplPath =
+               [
+                  app.config.get('templateDir'),
+                  tplName
+               ].join('/');
+
+               $.ajax(
+               {
+                  url: tplPath,
+                  cache: true,
+                  dataType: 'html',
+                  async: true,
+                  success: function onTplLoadSuccess(data)
+                  {
+                     /* Increase counter */
+                     cachedTemplates += 1;
+
+                     /* Save to cache */
+                     self.cache[fileName] = data;
+
+                     /* If all templates are cached, launch callback */
+                     if (cachedTemplates &gt;= tplNames.length
+                         &amp;&amp; typeof onSuccess === 'function')
+                     {
+                        onSuccess();
+                     }
+                  },
+                  error: function onTplLoadError(jqXHR, textStatus, errorThrown)
+                  {
+                     /* Error handling */
+                  }
+               });
+            }
+            else
+            {
+               /* Template is already cached */
+               cachedTemplates += 1;
+               /* If all templates are cached, launch callback */
+               if (cachedTemplates &gt;= tplNames.length
+                   &amp;&amp; typeof onSuccess === 'function')
+               {
+                  onSuccess();
+               }
+            }
+      });
+   }
 };
 </pre></li>
 <li>
@@ -194,12 +194,12 @@ loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
 <pre class="prettyprint">
 get: function TemplateManager_get(tplName, tplParams)
 {
-&nbsp;&nbsp;&nbsp;if (this.cache[tplName] !== undefined)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return this.getCompleted(this.cache[tplName], tplParams);
-&nbsp;&nbsp;&nbsp;}
+   if (this.cache[tplName] !== undefined)
+   {
+      return this.getCompleted(this.cache[tplName], tplParams);
+   }
 
-&nbsp;&nbsp;&nbsp;return &#39;&#39;;
+   return '';
 }
 </pre></li>
 <li>
@@ -207,17 +207,17 @@ get: function TemplateManager_get(tplName, tplParams)
 <pre class="prettyprint">
 getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 {
-&nbsp;&nbsp;&nbsp;var tplParam;
+   var tplParam;
 
-&nbsp;&nbsp;&nbsp;for (tplParam in tplParams)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tplParams.hasOwnProperty(tplParam))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplHtml = this.passThruModifiers(tplHtml, tplParam, tplParams[tplParam]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   for (tplParam in tplParams)
+   {
+      if (tplParams.hasOwnProperty(tplParam))
+      {
+         tplHtml = this.passThruModifiers(tplHtml, tplParam, tplParams[tplParam]);
+      }
+   }
 
-&nbsp;&nbsp;&nbsp;return tplHtml;
+   return tplHtml;
 }
 </pre></li>
     </ol> </li></ol>
@@ -227,32 +227,32 @@ getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 <ol>
    <li><strong>templates/download-row.tpl Source File</strong>
 <p>The download items are displayed in a list, where each item is its own row. The rows are placed in the list using the Template Manager.</p>
-<p>Every list element contains an icon suitable for the content type, the file name, some control buttons proper for the current download state, and a progress bar representing the download progress. The elements also have additional attributes used to recognize the download element recognition from the JavaScript code, for example while updating the progress bar value.</p> 
+<p>Every list element contains an icon suitable for the content type, the file name, some control buttons proper for the current download state, and a progress bar representing the download progress. The elements also have additional attributes used to recognize the download element recognition from the JavaScript code, for example while updating the progress bar value.</p>
 <pre class="prettyprint lang-html">
-&lt;li class=&quot;downloadListElement&quot; id=&quot;%downloadId%&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;download-item&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;download-desc&quot; style=&quot;position: relative;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/%fileIcon%&quot; alt=&quot;icon&quot; class=&quot;ui-li-bigicon&quot;&gt;&lt;/img&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;download-name&quot; id=&quot;name%downloadId%&quot;&gt;%fileName%&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;download-control&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;progressbar&quot; id=&quot;progressbar%downloadId%&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;download-buttons&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;download-button download-navigation-button&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state=&quot;play&quot; for-download=&quot;%downloadId%&quot; for-url=&quot;%url%&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;button%downloadId%&quot; listener-flag=&quot;1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/pause.png&quot; class=&quot;download-navigation-button-image&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;buttonimg%downloadId%&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; class=&quot;download-button download-delete-button&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state=&quot;play&quot; for-download=&quot;%downloadId%&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;delete%downloadId%&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/stop.png&quot; class=&quot;download-navigation-button-image&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;deleteimg%downloadId%&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&lt;li class="downloadListElement" id="%downloadId%"&gt;
+   &lt;div class="download-item"&gt;
+      &lt;div class="download-desc" style="position: relative;"&gt;
+         &lt;img src="images/%fileIcon%" alt="icon" class="ui-li-bigicon"&gt;&lt;/img&gt;
+         &lt;p class="download-name" id="name%downloadId%"&gt;%fileName%&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;div class="download-control"&gt;
+         &lt;div data-role="progressbar" id="progressbar%downloadId%"&gt;&lt;/div&gt;
+         &lt;div class="download-buttons"&gt;
+            &lt;div data-role="button" class="download-button download-navigation-button"
+                 state="play" for-download="%downloadId%" for-url="%url%"
+                 id="button%downloadId%" listener-flag="1"&gt;
+               &lt;img src="images/pause.png" class="download-navigation-button-image"
+                    id="buttonimg%downloadId%"/&gt;
+            &lt;/div&gt;
+            &lt;div data-role="button" class="download-button download-delete-button"
+                 state="play" for-download="%downloadId%"
+                 id="delete%downloadId%"&gt;
+               &lt;img src="images/stop.png" class="download-navigation-button-image"
+                    id="deleteimg%downloadId%"/&gt;
+            &lt;/div&gt;
+         &lt;/div&gt;
+      &lt;/div&gt;
+   &lt;div&gt;
 &lt;/li&gt;
 </pre></li>
 </ol>
@@ -273,31 +273,31 @@ getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 <pre class="prettyprint">
 startDownloading: function Model_startDownloading(url, eventHandlers, onSuccess)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Model_startDownloading: &#39; + url);
-&nbsp;&nbsp;&nbsp;var downloadRequest, downloadId;
-
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;downloadRequest = new tizen.DownloadRequest(url, &#39;downloads&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;downloadId = tizen.download.start(downloadRequest, eventHandlers);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess(downloadId, url);
-&nbsp;&nbsp;&nbsp;}
+   console.log('Model_startDownloading: ' + url);
+   var downloadRequest, downloadId;
+
+   try
+   {
+      downloadRequest = new tizen.DownloadRequest(url, 'downloads');
+      downloadId = tizen.download.start(downloadRequest, eventHandlers);
+      onSuccess(downloadId, url);
+   }
 }
 </pre></li>
    <li><strong>js/app.js Source File</strong>
 
-<p>After the download process is started successfully, the download item information is added to the local storage and the application user interface is updated.</p> 
+<p>After the download process is started successfully, the download item information is added to the local storage and the application user interface is updated.</p>
 <pre class="prettyprint">
 onDownloadStarted: function App_onDownloadStarted(id, url)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;App_onDownloadStarted: &#39;, id);
-&nbsp;&nbsp;&nbsp;var fileName = this.helpers.getSourceName(url);
-&nbsp;&nbsp;&nbsp;this.ui.onDownloadStarted(id, url, fileName, this.model.updateRecord.bind(this, id,
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;fileName&#39;: fileName,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;url&#39;: url,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;state&#39;: 0
-&nbsp;&nbsp;&nbsp;}));
+   console.log('App_onDownloadStarted: ', id);
+   var fileName = this.helpers.getSourceName(url);
+   this.ui.onDownloadStarted(id, url, fileName, this.model.updateRecord.bind(this, id,
+   {
+      'fileName': fileName,
+      'url': url,
+      'state': 0
+   }));
 }
 </pre></li>
    <li><strong>js/app.ui.js Source File</strong>
@@ -305,23 +305,23 @@ onDownloadStarted: function App_onDownloadStarted(id, url)
 <p>The user interface is updated using the download row template obtained through the <code>templateManager</code> object.</p>
 <pre class="prettyprint">
 addDownloadRecordToList: function Ui_addDownloadRecordToList(id, url, fileName,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;updateStorageCallback)
+                                                             updateStorageCallback)
 {
-&nbsp;&nbsp;&nbsp;var ul = $(&#39;#main-content ul.ui-listview&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileIcon = app.helpers.resolveFileIcon(app.helpers.getFileExtension(fileName)),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listElement = this.templateManager.get(&#39;download-row&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;downloadId: id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileName: fileName,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: url,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileIcon: fileIcon
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;ul.append(listElement).listview(&#39;refresh&#39;);
-&nbsp;&nbsp;&nbsp;ul.find(&#39;#progressbar&#39; + id).progressbar({value: 0});
-&nbsp;&nbsp;&nbsp;ul.find(&#39;#delete&#39; + id).button();
-&nbsp;&nbsp;&nbsp;ul.find(&#39;#button&#39; + id).button();
-&nbsp;&nbsp;&nbsp;updateStorageCallback($(&#39;#progressbar&#39; + id).progressbar(&#39;option&#39;, &#39;value&#39;));
+   var ul = $('#main-content ul.ui-listview'),
+       fileIcon = app.helpers.resolveFileIcon(app.helpers.getFileExtension(fileName)),
+       listElement = this.templateManager.get('download-row',
+       {
+          downloadId: id,
+          fileName: fileName,
+          url: url,
+          fileIcon: fileIcon
+       });
+
+   ul.append(listElement).listview('refresh');
+   ul.find('#progressbar' + id).progressbar({value: 0});
+   ul.find('#delete' + id).button();
+   ul.find('#button' + id).button();
+   updateStorageCallback($('#progressbar' + id).progressbar('option', 'value'));
 }
 </pre></li>
   </ol>
@@ -331,31 +331,31 @@ addDownloadRecordToList: function Ui_addDownloadRecordToList(id, url, fileName,
    <li><strong>js/app.ui.events.js Source File</strong>
 <p>After the download item is created, the user can pause or resume operations through the applicable buttons in the download list element. To display the correct buttons, you must identify the current state of the download request.</p>
 <pre class="prettyprint">
-$(&#39;#main&#39;).on(&#39;tap&#39;, &#39;.download-navigation-button&#39;, function onNavigationBtnTap(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var obj = $(this);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (obj.attr(&#39;state&#39;) === &#39;play&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.pauseDownloading(obj.attr(&#39;for-download&#39;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (obj.attr(&#39;state&#39;) === &#39;pause&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.resumeDownloading(obj.attr(&#39;for-url&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.attr(&#39;for-download&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.attr(&#39;listener-flag&#39;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (obj.attr(&#39;state&#39;) === &#39;finished&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.launchFile($(&#39;#name&#39; + obj.attr(&#39;for-download&#39;)).text());
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (obj.attr(&#39;state&#39;) === &#39;canceled&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startDownloading(obj.attr(&#39;for-url&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.attr(&#39;for-download&#39;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+$('#main').on('tap', '.download-navigation-button', function onNavigationBtnTap(event)
+   {
+      event.preventDefault();
+      event.stopPropagation();
+      var obj = $(this);
+      if (obj.attr('state') === 'play')
+      {
+         app.pauseDownloading(obj.attr('for-download'));
+      }
+      else if (obj.attr('state') === 'pause')
+      {
+         app.resumeDownloading(obj.attr('for-url'),
+                               obj.attr('for-download'),
+                               obj.attr('listener-flag'));
+      }
+      else if (obj.attr('state') === 'finished')
+      {
+         app.launchFile($('#name' + obj.attr('for-download')).text());
+      }
+      else if (obj.attr('state') === 'canceled')
+      {
+         app.startDownloading(obj.attr('for-url'),
+                              obj.attr('for-download'));
+      }
+   });
 </pre></li>
      <li><strong>js/app.model.js Source File</strong>
 <ol type="a"><li>
@@ -363,26 +363,26 @@ $(&#39;#main&#39;).on(&#39;tap&#39;, &#39;.download-navigation-button&#39;, func
 <pre class="prettyprint">
 pauseDownloading: function Model_pauseDownloading(downloadId)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Model_pauseDownloading&#39;, downloadId);
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.download.pause(downloadId);
-&nbsp;&nbsp;&nbsp;}
+   console.log('Model_pauseDownloading', downloadId);
+   try
+   {
+      tizen.download.pause(downloadId);
+   }
 }
 </pre></li>
 <li>
         <p>If the request in the paused state, the download process is resumed.</p>
 <pre class="prettyprint">
 resumeDownloading: function Model_resumeDownloading(downloadId, eventHandlers,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listenerCallback)
+                                                    listenerCallback)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Model_resumeDownloading: &#39;, downloadId);
-&nbsp;&nbsp;&nbsp;tizen.download.resume(downloadId);
-&nbsp;&nbsp;&nbsp;if (eventHandlers !== null)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.download.setListener(downloadId, eventHandlers);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listenerCallback(downloadId);
-&nbsp;&nbsp;&nbsp;}
+   console.log('Model_resumeDownloading: ', downloadId);
+   tizen.download.resume(downloadId);
+   if (eventHandlers !== null)
+   {
+      tizen.download.setListener(downloadId, eventHandlers);
+      listenerCallback(downloadId);
+   }
 }
 </pre></li>
     </ol> </li>
@@ -392,34 +392,34 @@ resumeDownloading: function Model_resumeDownloading(downloadId, eventHandlers,
    <li><strong>js/app.ui.events.js Source File</strong>
 <p>To stop the download process, you must first determine the download request status.</p>
 <pre class="prettyprint">
-$(&#39;#main&#39;).on(&#39;tap&#39;, &#39;.download-delete-button&#39;, function onDeleteBtnTap(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var obj = $(this);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (obj.attr(&#39;state&#39;) === &#39;play&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.cancelDownloading(obj.attr(&#39;for-download&#39;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (obj.attr(&#39;state&#39;) === &#39;pause&#39; ||
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.attr(&#39;state&#39;) === &#39;finished&#39; ||
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.attr(&#39;state&#39;) === &#39;canceled&#39; ||
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.attr(&#39;state&#39;) === &#39;failed&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.deleteDownloading(obj.attr(&#39;for-download&#39;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+$('#main').on('tap', '.download-delete-button', function onDeleteBtnTap(event)
+   {
+      event.preventDefault();
+      event.stopPropagation();
+      var obj = $(this);
+      if (obj.attr('state') === 'play')
+      {
+         app.cancelDownloading(obj.attr('for-download'));
+      }
+      else if (obj.attr('state') === 'pause' ||
+               obj.attr('state') === 'finished' ||
+               obj.attr('state') === 'canceled' ||
+               obj.attr('state') === 'failed')
+      {
+         app.deleteDownloading(obj.attr('for-download'));
+      }
+   });
 </pre></li>
      <li><strong>js/app.model.js Source File</strong>
         <p>If the download status is play, you can invoke the download cancellation function.</p>
 <pre class="prettyprint">
 cancelDownloading: function Model_cancelDownloading(downloadId)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Model_cancelDownloading: &#39; + downloadId);
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.download.cancel(downloadId);
-&nbsp;&nbsp;&nbsp;}
+   console.log('Model_cancelDownloading: ' + downloadId);
+   try
+   {
+      tizen.download.cancel(downloadId);
+   }
 }
 </pre></li>
      <li><strong>js/app.ui.js Source File</strong>
@@ -427,7 +427,7 @@ cancelDownloading: function Model_cancelDownloading(downloadId)
 <pre class="prettyprint">
 deleteDownloading: function Ui_deleteDownloading(id)
 {
-&nbsp;&nbsp;&nbsp;$(&#39;#&#39; + id).remove();
+   $('#' + id).remove();
 }
 </pre></li>
     </ol>
diff --git a/org.tizen.guides/html/web/cordova/console_w.htm b/org.tizen.guides/html/web/cordova/console_w.htm
index 6c2bef9..9e44645 100644 (file)
--- a/org.tizen.guides/html/web/cordova/console_w.htm
+++ b/org.tizen.guides/html/web/cordova/console_w.htm
@@ -37,7 +37,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/console.html">Console API for Mobile Web</a></li>
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/console.html">Console API for Wearable Web</a></li>
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/console.html">Console API for TV Web</a></li>                 
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/console.html">Console API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -70,12 +70,12 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Connection type: &quot; + navigator.connection.type);
+   console.log("Cordova features now available");
+   console.log("Connection type: " + navigator.connection.type);
 }
 </pre>
 <p>The <code>console</code> global object is available earlier, but it points to a default system console.</p>
@@ -83,8 +83,8 @@ function onDeviceReady()
 <h2 id="loganderror" name="loganderror">Writing Log Messages and Errors</h2>
 <p>To write simple log and error messages to the system console, use the <code>log()</code> and <code>error()</code> methods:</p>
 <pre class="prettyprint">
-console.log(&quot;console.log works well&quot;);
-console.error(&quot;console.error works well&quot;);
+console.log("console.log works well");
+console.error("console.error works well");
 </pre>
 
 <div class="note">
@@ -99,13 +99,13 @@ console.error(&quot;console.error works well&quot;);
 <ul>
 <li>To print without formatting:
 <pre class="prettyprint">
-var john = {name: &quot;John&quot;, surname: &quot;Doe&quot;};
+var john = {name: "John", surname: "Doe"};
 console.dir(john.name);
 </pre></li>
 <li>To print with formatting, use <code>%o</code>:
 <pre class="prettyprint">
-var john = {name: &quot;John&quot;, surname: &quot;Doe&quot;};
-console.dir(&quot;my object %o&quot;, john);
+var john = {name: "John", surname: "Doe"};
+console.dir("my object %o", john);
 </pre></li>
 </ul>
 
@@ -117,19 +117,19 @@ console.dir(&quot;my object %o&quot;, john);
 <ol>
 <li>Start the timer and give it a label (a string), which is used to identify the timer:
 <pre class="prettyprint">
-console.time(&quot;Big array initialization&quot;);
+console.time("Big array initialization");
 </pre></li>
 <li>Perform some operation:
 <pre class="prettyprint">
 var array = new Array(1000000);
 for (var i = array.length - 1; i &gt;= 0; i -= 1)
 {
-&nbsp;&nbsp;&nbsp;array[i] = new Object();
+   array[i] = new Object();
 };
 </pre></li>
 <li>Stop the timer by passing the same label to the <code>timeEnd()</code> method:
 <pre class="prettyprint">
-console.timeEnd(&quot;Big array initialization&quot;);
+console.timeEnd("Big array initialization");
 </pre>
 <p>The following output is shown in the system console:</p>
 <pre class="prettyprint">
diff --git a/org.tizen.guides/html/web/cordova/cordova_cover_w.htm b/org.tizen.guides/html/web/cordova/cordova_cover_w.htm
index 0457e2e..aa59f8c 100644 (file)
--- a/org.tizen.guides/html/web/cordova/cordova_cover_w.htm
+++ b/org.tizen.guides/html/web/cordova/cordova_cover_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -13,7 +13,7 @@
   <title>Cordova</title>
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
@@ -29,7 +29,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Cordova</h1> 
+  <h1>Cordova</h1>
   <p>The Cordova features include common functionalities useful in creating Tizen Web applications.</p>
   <p>The main Cordova features are:</p>
   <ul>
@@ -48,7 +48,7 @@
     <li><a href="filetransfer_w.htm">File Transfers</a>
        <p>You can download and upload files using Cordova.</p></li>
     <li><a href="globalization_w.htm">Globalization</a>
-       <p>You can obtain information and perform operations specific to the user&#39;s locale, language, and time zone.</p></li>       
+       <p>You can obtain information and perform operations specific to the user's locale, language, and time zone.</p></li>
     <li><a href="media_w.htm">Media Playback and Recording</a>
        <p>You can record and play audio files on a device.</p></li>
     <li><a href="network_information_w.htm">Network Information</a>
diff --git a/org.tizen.guides/html/web/cordova/core_w.htm b/org.tizen.guides/html/web/cordova/core_w.htm
index b385e23..29eb8a9 100644 (file)
--- a/org.tizen.guides/html/web/cordova/core_w.htm
+++ b/org.tizen.guides/html/web/cordova/core_w.htm
@@ -30,7 +30,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/cordova.html">Cordova API for Mobile Web</a></li>
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/cordova.html">Cordova API for Wearable Web</a></li>
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/cordova.html">Cordova API for TV Web</a></li>                 
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/cordova.html">Cordova API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -64,12 +64,12 @@ function f(error) {}
        <strong>Note</strong>
        To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Connection type: &quot; + navigator.connection.type);
+   console.log("Cordova features now available");
+   console.log("Connection type: " + navigator.connection.type);
 }
 </pre>
 </div>
diff --git a/org.tizen.guides/html/web/cordova/device_w.htm b/org.tizen.guides/html/web/cordova/device_w.htm
index c57b2b1..0033d3c 100644 (file)
--- a/org.tizen.guides/html/web/cordova/device_w.htm
+++ b/org.tizen.guides/html/web/cordova/device_w.htm
@@ -29,13 +29,13 @@
                 <p class="toc-title">Content</p>
         <ul class="toc">
                        <li><a href="#prerequisites">Prerequisites</a></li>
-                       <li><a href="#loginfo">Accessing Device Properties</a></li>   
+                       <li><a href="#loginfo">Accessing Device Properties</a></li>
                </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/device.html">Device API for Mobile Web</a></li>
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/device.html">Device API for Wearable Web</a></li>
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device.html">Device API for TV Web</a></li>                   
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device.html">Device API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -67,7 +67,7 @@
         <td><code>platform</code></td><td>Operating system name. For example: <code>Tizen</code></td>
    </tr>
     <tr>
-        <td><code>uuid</code></td><td>Device&#39;s Universally Unique Identifier (UUID). The value can be the device IMEI (International Mobile Equipment Identity) or other unique value for the device. The value is converted to a string.</td>
+        <td><code>uuid</code></td><td>Device's Universally Unique Identifier (UUID). The value can be the device IMEI (International Mobile Equipment Identity) or other unique value for the device. The value is converted to a string.</td>
     </tr>
     <tr>
         <td><code>version</code></td><td>Operating system version (as a string). For example: <code>3.0</code></td>
@@ -78,11 +78,11 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
+   console.log("Cordova features now available");
 }
 </pre>
 
@@ -95,20 +95,20 @@ function onDeviceReady()
 <pre class="prettyprint">
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;/* Cordova is ready */
+   /* Cordova is ready */
 
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova version: &quot; + device.cordova);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Model name: &quot; + device.model);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Platform: &quot; + device.platform);
-&nbsp;&nbsp;&nbsp;console.log(&quot;OS version: &quot; + device.version);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Device UUID: &quot; + device.uuid);
+   console.log("Cordova version: " + device.cordova);
+   console.log("Model name: " + device.model);
+   console.log("Platform: " + device.platform);
+   console.log("OS version: " + device.version);
+   console.log("Device UUID: " + device.uuid);
 }
 </pre>
 <p>UUID is a unique identifier for a device, and can be the device IMEI (International Mobile Equipment Identity).</p>
 </li>
 <li>Wait for the <code>deviceready</code> event:
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady);
+document.addEventListener("deviceready", onDeviceReady);
 </pre></li>
 </ol>
 
diff --git a/org.tizen.guides/html/web/cordova/devicemotion_w.htm b/org.tizen.guides/html/web/cordova/devicemotion_w.htm
index af4c30e..84d95a0 100644 (file)
--- a/org.tizen.guides/html/web/cordova/devicemotion_w.htm
+++ b/org.tizen.guides/html/web/cordova/devicemotion_w.htm
@@ -37,7 +37,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/device-motion.html">Device Motion API for Mobile Web</a></li>
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/device-motion.html">Device Motion API for Wearable Web</a></li>
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device-motion.html">Device Motion API for TV Web</a></li>             
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device-motion.html">Device Motion API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -90,14 +90,14 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
+   console.log("Cordova features now available");
 }
 </pre>
-     
+
 <h2 id="getCurrentAcceleration">Getting the Current Acceleration</h2>
 <p>To get the current acceleration along the X, Y, and Z axes:</p>
 
@@ -106,17 +106,17 @@ function onDeviceReady()
 <pre class="prettyprint">
 function onSuccess(acceleration)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Acceleration X: &#39; + acceleration.x + &#39;\n&#39; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Acceleration Y: &#39; + acceleration.y + &#39;\n&#39; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Acceleration Z: &#39; + acceleration.z + &#39;\n&#39; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Timestamp: &#39; + acceleration.timestamp);
+   console.log('Acceleration X: ' + acceleration.x + '\n' +
+               'Acceleration Y: ' + acceleration.y + '\n' +
+               'Acceleration Z: ' + acceleration.z + '\n' +
+               'Timestamp: ' + acceleration.timestamp);
 }
 </pre></li>
 <li><p>Define a callback method to be invoked when errors occur:</p>
 <pre class="prettyprint">
 function onError()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;onError!&#39;);
+   console.log('onError!');
 }
 </pre></li>
 <li><p>Call the <code>getCurrentAcceleration()</code> method and pass the callbacks:</p>
@@ -133,18 +133,18 @@ navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
 <pre class="prettyprint">
 function onSuccess(acceleration)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Acceleration X: &#39; + acceleration.x + &#39;\n&#39; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Acceleration Y: &#39; + acceleration.y + &#39;\n&#39; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Acceleration Z: &#39; + acceleration.z + &#39;\n&#39; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Timestamp: &#39;+ acceleration.timestamp);
-&nbsp;&nbsp;&nbsp;console.log(&#39;Please wait 3 seconds for the next measurement...&#39;);
+   console.log('Acceleration X: ' + acceleration.x + '\n' +
+               'Acceleration Y: ' + acceleration.y + '\n' +
+               'Acceleration Z: ' + acceleration.z + '\n' +
+               'Timestamp: '+ acceleration.timestamp);
+   console.log('Please wait 3 seconds for the next measurement...');
 }
 </pre></li>
 <li><p>Define a callback method to be invoked when errors occur:</p>
 <pre class="prettyprint">
 function onError()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;onError!&#39;);
+   console.log('onError!');
 }
 </pre></li>
 <li>
diff --git a/org.tizen.guides/html/web/cordova/dialogs_w.htm b/org.tizen.guides/html/web/cordova/dialogs_w.htm
index ef33974..6dabdc3 100644 (file)
--- a/org.tizen.guides/html/web/cordova/dialogs_w.htm
+++ b/org.tizen.guides/html/web/cordova/dialogs_w.htm
@@ -38,7 +38,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/dialogs.html">Dialogs API for Mobile Web</a></li>
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/dialogs.html">Dialogs API for Wearable Web</a></li>
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/dialogs.html">Dialogs API for TV Web</a></li>         
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/dialogs.html">Dialogs API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -71,11 +71,11 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
+   console.log("Cordova features now available");
 }
 </pre>
 
@@ -89,18 +89,18 @@ function onDeviceReady()
 <pre class="prettyprint">
 var alertDismissed = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Alert was dismissed&#39;);
+   console.log('Alert was dismissed');
 };
 </pre>
 </li>
 <li><p>Open the alert dialog box with an alert text and callback function:</p>
 <pre class="prettyprint">
-navigator.notification.alert(&#39;Please click OK button.&#39;, alertDismissed);
+navigator.notification.alert('Please click OK button.', alertDismissed);
 </pre>
 <p>Alternatively, you can open the alert dialog box with an optional title (default is <code>Dialog</code>), and an optional button name (default is <code>OK</code>):</p>
 <pre class="prettyprint">
-navigator.notification.alert(&#39;Please click Close button.&#39;, alertDismissed,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Alert title&#39;, &#39;Close&#39;);
+navigator.notification.alert('Please click Close button.', alertDismissed,
+                             'Alert title', 'Close');
 </pre>
 </li>
 </ol>
@@ -116,14 +116,14 @@ navigator.notification.alert(&#39;Please click Close button.&#39;, alertDismisse
 <pre class="prettyprint">
 var confirmCallback = function(buttonIndex)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Selected button was &#39; + buttonIndex);
+   console.log('Selected button was ' + buttonIndex);
 };
 </pre>
 </li>
-<li><p>Open the confirmation dialog box with a set of buttons as the last parameter. The default value is <code>[&#39;OK&#39;, &#39;Cancel&#39;]</code>.</p>
+<li><p>Open the confirmation dialog box with a set of buttons as the last parameter. The default value is <code>['OK', 'Cancel']</code>.</p>
 <pre class="prettyprint">
-navigator.notification.confirm(&#39;Choose one option:&#39;, confirmCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Options title&#39;, [&#39;Option1&#39;, &#39;Option2&#39;]);
+navigator.notification.confirm('Choose one option:', confirmCallback,
+                               'Options title', ['Option1', 'Option2']);
 </pre>
 </li>
 </ol>
@@ -140,15 +140,15 @@ navigator.notification.confirm(&#39;Choose one option:&#39;, confirmCallback,
 <pre class="prettyprint">
 var promptCallback = function(results)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;User entered a value &#39; + results.input1
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;, and selected option &#39; + results.buttonIndex);
+   console.log('User entered a value ' + results.input1
+               + ', and selected option ' + results.buttonIndex);
 };
 </pre>
 </li>
-<li><p>Open a prompt dialog box with a set of buttons and default text to be shown in the text input field. The default values are <code>[&#39;OK&#39;, &#39;Cancel&#39;]</code> and an empty string.</p>
+<li><p>Open a prompt dialog box with a set of buttons and default text to be shown in the text input field. The default values are <code>['OK', 'Cancel']</code> and an empty string.</p>
 <pre class="prettyprint">
-navigator.notification.prompt(&#39;Please enter text:&#39;, promptCallback, &#39;Prompt dialog box&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&#39;OK&#39;, &#39;Exit&#39;], &#39;default text&#39;);
+navigator.notification.prompt('Please enter text:', promptCallback, 'Prompt dialog box',
+                              ['OK', 'Exit'], 'default text');
 </pre>
 </li>
 </ol>
diff --git a/org.tizen.guides/html/web/cordova/events_w.htm b/org.tizen.guides/html/web/cordova/events_w.htm
index d1da9b6..796ec67 100644 (file)
--- a/org.tizen.guides/html/web/cordova/events_w.htm
+++ b/org.tizen.guides/html/web/cordova/events_w.htm
@@ -37,7 +37,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/events.html">Events API for Mobile Web</a></li>
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/events.html">Events API for Wearable Web</a></li>
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/events.html">Events API for TV Web</a></li>           
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/events.html">Events API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -53,7 +53,7 @@
   <p>The Events API provides the following events:</p>
 <ul>
     <li><code>deviceready</code>
-        <p>The <code>deviceready</code> event is a prerequisite for all Cordova operations. You can use the <code>deviceready</code> event to receive a signal when Cordova&#39;s device APIs have loaded and are ready to access. You can also use this event to <a href="#add">register event listeners</a> for other events you are interested in.</p>
+        <p>The <code>deviceready</code> event is a prerequisite for all Cordova operations. You can use the <code>deviceready</code> event to receive a signal when Cordova's device APIs have loaded and are ready to access. You can also use this event to <a href="#add">register event listeners</a> for other events you are interested in.</p>
     </li>
     <li><code>pause</code>
         <p>You can <a href="#pauseresume">use the <code>pause</code> event</a> to receive a signal when the application is put to the background. This happens typically when the screen is being locked or when the user switches to a different application.</p>
@@ -70,18 +70,18 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
+   console.log("Cordova features now available");
 }
 </pre>
 <p>Alternatively, you can add the event listener in the <code>&lt;body&gt;</code> element onload handler:</p>
 <pre class="prettyprint">
 window.onload = function()
 {
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;deviceready&quot;, onDeviceReady);
+   document.addEventListener("deviceready", onDeviceReady);
 };
 </pre>
 
@@ -89,22 +89,22 @@ window.onload = function()
 <p>The applications typically use the <code>document.addEventListener()</code> method to attach an event listener once the <code>deviceready</code> event fires. This means that event listeners for other events (such as <code>pause</code>, <code>resume</code>, and <code>backbutton</code>) are added during or after the <code>deviceready</code> event handler:</p>
 
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pause&quot;, onPause);
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;volumeupbutton&quot;, onVolumeUp);
+   document.addEventListener("pause", onPause);
+   document.addEventListener("volumeupbutton", onVolumeUp);
 }
 
 function onPause()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Application has been put into the background&quot;);
+   console.log("Application has been put into the background");
 }
 
 function onVolumeUp()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Volume up button pressed&quot;);
+   console.log("Volume up button pressed");
 }
 </pre>
 
@@ -119,19 +119,19 @@ function onVolumeUp()
 <pre class="prettyprint">
 function onPause()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Application paused&quot;);
+   console.log("Application paused");
 }
 
 function onResume()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Application resumed&quot;);
+   console.log("Application resumed");
 }
 </pre>
 </li>
 <li><p>In the <code>deviceready</code> event handler, <a href="#add">add the listeners</a>:</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;pause&quot;, onPause);
-document.addEventListener(&quot;resume&quot;, onResume);
+document.addEventListener("pause", onPause);
+document.addEventListener("resume", onResume);
 </pre>
 </li>
 </ol>
@@ -178,21 +178,21 @@ document.addEventListener(&quot;resume&quot;, onResume);
 <pre class="prettyprint">
 function onVolumeChanged()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Volume changed&quot;);
+   console.log("Volume changed");
 }
 
 function onMenuButton()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Menu button pressed&quot;);
+   console.log("Menu button pressed");
 }
 </pre>
 </li>
 <li><p>In the <code>deviceready</code> event handler, <a href="#add">add the listeners</a>.</p>
 <p>In this example, the same listener is used for both the volume up and down buttons.</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;menubutton&quot;, onMenuButton);
-document.addEventListener(&quot;volumeupbutton&quot;, onVolumeChanged);
-document.addEventListener(&quot;volumedownbutton&quot;, onVolumeChanged);
+document.addEventListener("menubutton", onMenuButton);
+document.addEventListener("volumeupbutton", onVolumeChanged);
+document.addEventListener("volumedownbutton", onVolumeChanged);
 </pre>
 </li>
 </ol>
diff --git a/org.tizen.guides/html/web/cordova/file_w.htm b/org.tizen.guides/html/web/cordova/file_w.htm
index 24edb2a..5e6b756 100644 (file)
--- a/org.tizen.guides/html/web/cordova/file_w.htm
+++ b/org.tizen.guides/html/web/cordova/file_w.htm
@@ -39,7 +39,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html">File API for Mobile Web</a></li>
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html">File API for Wearable Web</a></li>
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html">File API for TV Web</a></li>               
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html">File API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -79,11 +79,11 @@
 <li>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
+   console.log("Cordova features now available");
 }
 </pre>
 </li>
@@ -91,13 +91,13 @@ function onDeviceReady()
 <p>To use the File API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;!--To read from files--&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.read&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/filesystem.read"/&gt;
 &lt;!--To write to files--&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/filesystem.write"/&gt;
 </pre>
 </li>
-</ol> 
- 
+</ol>
+
 <h2 id="filesystemresolve">Resolving Filesystem Entries</h2>
 
 <p>To resolve the initial root for other filesystem operations can be performed in 2 ways:</p>
@@ -107,12 +107,12 @@ function onDeviceReady()
 <pre class="prettyprint">
 successCallback = function(fs)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;File system name &#39; + fs.name);
+   console.log('File system name ' + fs.name);
 };
 
 errorCallback = function(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.code);
+   console.log(err.code);
 };
 </pre></li>
 <li>Call the method with the created callbacks. The filesystem request can use a temporary or persistent filesystem with a defined size.
@@ -131,17 +131,17 @@ File system name temporary
 <pre class="prettyprint">
 successCallback = function(entry)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Entry name &#39; + entry.name);
+   console.log('Entry name ' + entry.name);
 };
 
 errorCallback = function(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.code);
+   console.log(err.code);
 };
 </pre></li>
 <li>Call the method with the provided valid URI for an existing file or directory:
 <pre class="prettyprint">
-var uri = &#39;file:///home/owner/content/Documents/example.txt&#39;;
+var uri = 'file:///home/owner/content/Documents/example.txt';
 resolveLocalFileSystemURL(uri, successCallback, errorCallback);
 </pre>
 </li></ol>
@@ -160,12 +160,12 @@ Entry name example.txt
 <li>To create a directory, you can use the <code>getDirectory()</code> method:
 <pre class="prettyprint">
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getDirectory(&quot;ert&quot;, {create:true}, function(dir)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Created dir: &#39; + dir.name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-&nbsp;&nbsp;&nbsp;});
+   {
+      fs.root.getDirectory("ert", {create:true}, function(dir)
+         {
+            console.log('Created dir: ' + dir.name);
+         })
+   });
 </pre>
 <p>If the third parameter is <code>{create:false}</code> or <code>NULL</code>, the entry of the existing directory is returned in the success callback.</p>
 
@@ -180,12 +180,12 @@ Created dir: ert
 
 <pre class="prettyprint">
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getFile(&quot;qa.txt&quot;, {create:true}, function(file)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Created file: &#39; + file.name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;});
+   {
+      fs.root.getFile("qa.txt", {create:true}, function(file)
+         {
+            console.log('Created file: ' + file.name);
+         });
+   });
 </pre>
 <p>Similarly as when creating a directory, if the third parameter is <code>{create:false}</code> or <code>NULL</code>, the entry of the existing file is returned in the success callback.</p>
 
@@ -198,15 +198,15 @@ Created file: qa.txt
 <li>To delete a directory and all of its content, you can use the <code>removeRecursively()</code> method:
 <pre class="prettyprint">
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getDirectory(&quot;testDirectory&quot;, {create:true}, function(directoryEntry)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;directoryEntry.removeRecursively(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;success&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;});
+   {
+      fs.root.getDirectory("testDirectory", {create:true}, function(directoryEntry)
+         {
+            directoryEntry.removeRecursively(function()
+               {
+                  console.log("success");
+               });
+         });
+   });
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -218,24 +218,24 @@ success
 <li>To read entries, first create a reader with the <code>createReader()</code> method:
 <pre class="prettyprint">
 requestFileSystem(TEMPORARY, 100, function(entry)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.root.getDirectory(&quot;MyDocument&quot;, {create:true}, function(dirEntry)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var directoryReader = dirEntry.createReader();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;});
+   {
+      entry.root.getDirectory("MyDocument", {create:true}, function(dirEntry)
+         {
+            var directoryReader = dirEntry.createReader();
+         });
+   });
 </pre>
 
 <p>With the reader, you can read the next block of entries from the current directory with the <code>readEntries()</code> method:</p>
 <pre class="prettyprint">
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var a = fs.root.createReader();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a.readEntries(function successCallback(entries)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;success&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;});
+   {
+      var a = fs.root.createReader();
+      a.readEntries(function successCallback(entries)
+         {
+            console.log("success");
+         });
+   });
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -253,13 +253,13 @@ success
 <li>To look up metadata about an entry, you can use the <code>getMetadata()</code> method:
 <pre class="prettyprint">
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getMetadata(function(metadata)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get metadata successfully */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Last modification time: &quot; + metadata.modificationTime);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;});
+   {
+      fs.root.getMetadata(function(metadata)
+         {
+            /* Get metadata successfully */
+            console.log("Last modification time: " + metadata.modificationTime);
+         });
+   });
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -270,18 +270,18 @@ Last modification time: Fri Jan 02 2015 03:58:08 GMT+0900 (KST)
 
 <li>To move an entry to a different location in the file system, you can use the <code>moveTo()</code> method:
 <pre class="prettyprint">
-successCallback = function(entry) {console.log(&#39;Full path to the moved file: &#39; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ entry.fullPath)};
+successCallback = function(entry) {console.log('Full path to the moved file: '
+                                               + entry.fullPath)};
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getDirectory(&#39;testDirectory&#39;, {create:true}, function(direntry)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getFile(&quot;aa.txt&quot;, {create:true}, function(fileentry)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Full path before move: &#39; + fileentry.fullPath);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileentry.moveTo(direntry, &#39;newname.txt&#39;, successCallback);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   {
+      fs.root.getDirectory('testDirectory', {create:true}, function(direntry)
+         {
+            fs.root.getFile("aa.txt", {create:true}, function(fileentry)
+               {
+                  console.log('Full path before move: ' + fileentry.fullPath);
+                  fileentry.moveTo(direntry, 'newname.txt', successCallback);
+               });
+         });
 });
 </pre>
 
@@ -294,18 +294,18 @@ Full path to the moved file: /testDirectory/newname.txt
 
 <li>To copy an entry to a different location on the file system, you can use the <code>copyTo()</code> method:
 <pre class="prettyprint">
-successCallback = function(entry) {console.log(&#39;Full path to the copied file: &#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ entry.fullPath);};
+successCallback = function(entry) {console.log('Full path to the copied file: '
+                                               + entry.fullPath);};
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getDirectory(&#39;testDirectory&#39;, {create:true}, function(direntry)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getFile(&quot;test.txt&quot;, {create:true}, function(fileentry)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileentry.copyTo(direntry, &#39;newname.txt&#39;, successCallback);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;});
+   {
+      fs.root.getDirectory('testDirectory', {create:true}, function(direntry)
+         {
+            fs.root.getFile("test.txt", {create:true}, function(fileentry)
+               {
+                  fileentry.copyTo(direntry, 'newname.txt', successCallback);
+               });
+         });
+   });
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -314,15 +314,15 @@ Full path to the copied file: /testDirectory/newname.txt
 </pre>
 </li>
 
-<li>To look up the parent directory entry containing the current entry, you can use the <code>getParent()</code> method: 
+<li>To look up the parent directory entry containing the current entry, you can use the <code>getParent()</code> method:
 <pre class="prettyprint">
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getParent(function(entry)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;success&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;});
+   {
+      fs.root.getParent(function(entry)
+         {
+            console.log("success");
+         });
+   });
 </pre>
 <p>If the entry is the root of its filesystem, its parent is itself.</p>
 
@@ -335,15 +335,15 @@ success
 <li>To delete a file or directory, you can use the <code>remove()</code> method:
 <pre class="prettyprint">
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getFile(&#39;test.txt&#39;, {create: true}, function(fileEntry)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileEntry.remove(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;success&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;});
+   {
+      fs.root.getFile('test.txt', {create: true}, function(fileEntry)
+         {
+            fileEntry.remove(function()
+               {
+                  console.log("success");
+               });
+         });
+   });
 </pre>
 
 <div class="note">
@@ -360,13 +360,13 @@ success
 <li>To return a URL that can be used to identify the entry, you can use the <code>toURL()</code> method:
 <pre class="prettyprint">
 requestFileSystem(TEMPORARY, 100, function(fs)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getDirectory(&#39;testDirectory&#39;, {create:true}, function(entry)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var url = entry.toURL();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;URL: &#39; + url);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;});
+   {
+      fs.root.getDirectory('testDirectory', {create:true}, function(entry)
+         {
+            var url = entry.toURL();
+            console.log('URL: ' + url);
+         });
+   });
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -384,9 +384,9 @@ URL: file:///home/owner/apps_rw/WfigBlWDyf/tmp/testDirectory/
 <pre class="prettyprint">
 var f; /* Must be a FileEntry object resolved using the methods presented before */
 f.createWriter(function(fileWriter)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;created fileWriter object for &#39; + fileWriter.fileName);
-&nbsp;&nbsp;&nbsp;});
+   {
+      console.log('created fileWriter object for ' + fileWriter.fileName);
+   });
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -399,9 +399,9 @@ created fileWriter object for testFile.txt
 <pre class="prettyprint">
 var f; /* Must be a FileEntry object resolved using methods presented before */
 f.file(function(file)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;created file object for &#39; + file.name);
-&nbsp;&nbsp;&nbsp;});
+   {
+      console.log('created file object for ' + file.name);
+   });
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -418,11 +418,11 @@ created file object for example.txt
 <ul>
 <li>To read a file and return the data as a base64-encoded data URL, you can use the <code>readAsDataURL()</code> method:
 <pre class="prettyprint">
-var blob = new Blob([&#39;abc&#39;]);
+var blob = new Blob(['abc']);
 var fileReader = new FileReader();
 fileReader.onload = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Loaded, result = &#39; + fileReader.result);
+   console.log('Loaded, result = ' + fileReader.result);
 };
 fileReader.readAsDataURL(blob);
 </pre>
@@ -435,11 +435,11 @@ Loaded, result = data:;base64,YWJj
 
 <li>To read a file and return the data as a text, you can use the <code>readAsText()</code> method:
 <pre class="prettyprint">
-var blob = new Blob([&#39;abc&#39;]);
+var blob = new Blob(['abc']);
 var fileReader = new FileReader();
 fileReader.onload = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Loaded, result = &#39; + fileReader.result);
+   console.log('Loaded, result = ' + fileReader.result);
 };
 fileReader.readAsText(blob);
 </pre>
@@ -452,11 +452,11 @@ Loaded, result = abc
 
 <li>To read a file and return the data as a binary string, you can use the <code>readAsBinaryString()</code> method:
 <pre class="prettyprint">
-var blob = new Blob([&#39;abc&#39;]);
+var blob = new Blob(['abc']);
 var fileReader = new FileReader();
 fileReader.onload = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Loaded, result = &#39; + fileReader.result);
+   console.log('Loaded, result = ' + fileReader.result);
 };
 fileReader.readAsBinaryString(blob);
 </pre>
@@ -469,13 +469,13 @@ Loaded, result = abc
 
 <li>To read a file and return the data as an array buffer (<code>byte[]</code>), you can use the <code>readAsArrayBuffer()</code> method:
 <pre class="prettyprint">
-var blob = new Blob([&#39;abc&#39;]);
+var blob = new Blob(['abc']);
 var fileReader = new FileReader();
 fileReader.onload = function()
 {
-&nbsp;&nbsp;&nbsp;resultValue = fileReader.result;
-&nbsp;&nbsp;&nbsp;console.log(&quot;Result: &quot; + resultValue.toString() + &#39; &#39; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;ByteLength: &#39; + resultValue.byteLength);
+   resultValue = fileReader.result;
+   console.log("Result: " + resultValue.toString() + ' '
+               + 'ByteLength: ' + resultValue.byteLength);
 };
 fileReader.readAsArrayBuffer(blob);
 </pre>
@@ -489,15 +489,15 @@ ByteLength: 3
 
 <li>To abort the current operation of reading a file, you can use the <code>abort()</code> method:
 <pre class="prettyprint">
-var blob = new Blob([&#39;abc&#39;]);
+var blob = new Blob(['abc']);
 var fileReader = new FileReader();
 fileReader.onload = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Loaded&#39;);
+   console.log('Loaded');
 };
 fileReader.onabort = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;aborted&#39;);
+   console.log('aborted');
 };
 fileReader.readAsDataURL(blob);
 fileReader.abort();
@@ -513,15 +513,15 @@ aborted
 <pre class="prettyprint">
 successCallback = function(writer)
 {
-&nbsp;&nbsp;&nbsp;writer.onwrite = function(evt)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;write success&#39;);
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;writer.write(&#39;some sample text&#39;);
+   writer.onwrite = function(evt)
+   {
+      console.log('write success');
+   };
+   writer.write('some sample text');
 };
 errorCallback = function(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.code);
+   console.log(err.code);
 };
 /* Entry is a FileEntry object retrieved by getFile() of the DirectoryEntry interface */
 entry.createWriter(successCallback, errorCallback);
@@ -537,13 +537,13 @@ write success
 <pre class="prettyprint">
 successCallback = function(writer)
 {
-&nbsp;&nbsp;&nbsp;/* Fast forwards the file pointer to the end of file */
-&nbsp;&nbsp;&nbsp;writer.seek(writer.length);
+   /* Fast forwards the file pointer to the end of file */
+   writer.seek(writer.length);
 };
 
 errorCallback = function(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.code);
+   console.log(err.code);
 };
 
 /* Entry is a FileEntry object retrieved by getFile() of the DirectoryEntry interface */
@@ -555,16 +555,16 @@ entry.createWriter(successCallback, errorCallback);
 <pre class="prettyprint">
 successCallback = function(writer)
 {
-&nbsp;&nbsp;&nbsp;writer.onwrite = function(evt)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;truncate success&#39;);
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;writer.truncate(10);
+   writer.onwrite = function(evt)
+   {
+      console.log('truncate success');
+   };
+   writer.truncate(10);
 };
 
 errorCallback = function(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.code);
+   console.log(err.code);
 };
 
 /* Entry is a FileEntry object retrieved by getFile() of the DirectoryEntry interface */
@@ -581,21 +581,21 @@ truncate success
 <pre class="prettyprint">
 successCallback = function(writer)
 {
-&nbsp;&nbsp;&nbsp;writer.onwrite = function(evt)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;write success&#39;);
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;writer.onabort = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;abort&#39;);
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;writer.write(&#39;some sample text&#39;);
-&nbsp;&nbsp;&nbsp;writer.abort();
+   writer.onwrite = function(evt)
+   {
+      console.log('write success');
+   };
+   writer.onabort = function(e)
+   {
+      console.log('abort');
+   };
+   writer.write('some sample text');
+   writer.abort();
 };
 
 errorCallback = function(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.code);
+   console.log(err.code);
 };
 
 /* Entry is a FileEntry object retrieved by getFile() of the DirectoryEntry interface */
diff --git a/org.tizen.guides/html/web/cordova/filetransfer_w.htm b/org.tizen.guides/html/web/cordova/filetransfer_w.htm
index 70a80c0..5b11ac3 100644 (file)
--- a/org.tizen.guides/html/web/cordova/filetransfer_w.htm
+++ b/org.tizen.guides/html/web/cordova/filetransfer_w.htm
@@ -47,7 +47,7 @@
 
   <h1>File Transfers</h1>
 
-<p>You can transfer files using HTTP requests, and download and upload files. You can also track a transfer&#39;s progress and abort it as needed. The default HTTP method is <code>POST</code>, but <code>PUT</code> is also supported.</p>
+<p>You can transfer files using HTTP requests, and download and upload files. You can also track a transfer's progress and abort it as needed. The default HTTP method is <code>POST</code>, but <code>PUT</code> is also supported.</p>
 <p>The File Transfer API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 
 <p>The main features of the File Transfer API include:</p>
@@ -58,12 +58,12 @@
 <p>You can <a href="#upload">upload a file</a> to a remote server.</p></li>
 <li>Abort
 <p>You can <a href="#abort">terminate an on-going transfer</a>.</p></li>
-<li>Progress tracking 
+<li>Progress tracking
 <p>You can <a href="#tracking_progress">track the progress</a> of a file transfer.</p></li>
 </ul>
 
 <p>All file operations are accessible by the <code>FileTransfer</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html#FileTransfer">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html#FileTransfer">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html#FileTransfer">TV</a> applications).</p>
- 
+
 <h2 id="prerequisites">Prerequisites</h2>
 
 <p>To enable your application to use the file transfer functionality:</p>
@@ -71,11 +71,11 @@
 <li>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
+   console.log("Cordova features now available");
 }
 </pre>
 </li>
@@ -83,15 +83,15 @@ function onDeviceReady()
 <p>To use the File Transfer API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/filetransfer.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/filetransfer.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/filetransfer.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;!--To download files--&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/filesystem.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/filesystem.write"/&gt;
 
 &lt;!--To upload files--&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/internet&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/filesystem.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/internet"/&gt;
 
 &lt;!--To abort a transfer--&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/internet&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/internet"/&gt;
 </pre>
 </li>
 </ol>
@@ -113,23 +113,23 @@ function onDeviceReady()
 var destinationURL;
 
 var fileTransfer = new FileTransfer();
-var uri = encodeURI(&#39;http://some.server.com/download.php&#39;);
+var uri = encodeURI('http://some.server.com/download.php');
 
 fileTransfer.download(uri, destinationURL, function(entry)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;download complete: &#39; + entry.toURL());
-&nbsp;&nbsp;&nbsp;}, function(error)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;download error source &#39; + error.source);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;download error target &#39; + error.target);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;upload error code&#39; + error.code);
-&nbsp;&nbsp;&nbsp;}, false,
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;headers:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Authorization&#39;: &#39;Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA==&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+   {
+      console.log('download complete: ' + entry.toURL());
+   }, function(error)
+   {
+      console.log('download error source ' + error.source);
+      console.log('download error target ' + error.target);
+      console.log('upload error code' + error.code);
+   }, false,
+   {
+      headers:
+      {
+         'Authorization': 'Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=='
+      }
+   });
 </pre>
 <p>The following output is shown in the system log:</p>
 <pre class="prettyprint">
@@ -147,20 +147,20 @@ var fileURL;
 
 var win = function(r)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Code = &#39; + r.responseCode);
-&nbsp;&nbsp;&nbsp;console.log(&#39;Response = &#39; + r.response);
-&nbsp;&nbsp;&nbsp;console.log(&#39;Sent = &#39; + r.bytesSent);
+   console.log('Code = ' + r.responseCode);
+   console.log('Response = ' + r.response);
+   console.log('Sent = ' + r.bytesSent);
 }
 
 var fail = function(error)
 {
-&nbsp;&nbsp;&nbsp;alert(&#39;An error has occurred: Code = &#39; + error.code);
-&nbsp;&nbsp;&nbsp;console.log(&#39;upload error source &#39; + error.source);
-&nbsp;&nbsp;&nbsp;console.log(&#39;upload error target &#39; + error.target);
+   alert('An error has occurred: Code = ' + error.code);
+   console.log('upload error source ' + error.source);
+   console.log('upload error target ' + error.target);
 }
 
 var ft = new FileTransfer();
-ft.upload(fileURL, encodeURI(&#39;http://some.server.com/upload.php&#39;), win, fail);
+ft.upload(fileURL, encodeURI('http://some.server.com/upload.php'), win, fail);
 </pre>
 <p>The following output is shown in the system log:</p>
 <pre class="prettyprint">
@@ -179,19 +179,19 @@ var fileURL;
 
 var win = function(r)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Should not be called.&#39;);
+   console.log('Should not be called.');
 }
 
 var fail = function(error)
 {
-&nbsp;&nbsp;&nbsp;/* error.code == FileTransferError.ABORT_ERR */
-&nbsp;&nbsp;&nbsp;alert(&#39;An error has occurred: Code = &#39; + error.code);
-&nbsp;&nbsp;&nbsp;console.log(&#39;upload error source &#39; + error.source);
-&nbsp;&nbsp;&nbsp;console.log(&#39;upload error target &#39; + error.target);
+   /* error.code == FileTransferError.ABORT_ERR */
+   alert('An error has occurred: Code = ' + error.code);
+   console.log('upload error source ' + error.source);
+   console.log('upload error target ' + error.target);
 };
 
 var ft = new FileTransfer();
-ft.upload(fileURL, encodeURI(&#39;http://some.server.com/upload.php&#39;), win, fail);
+ft.upload(fileURL, encodeURI('http://some.server.com/upload.php'), win, fail);
 ft.abort();
 </pre>
 <p>The following output is shown in the system log:</p>
@@ -211,25 +211,25 @@ var fileURL;
 
 var win = function(r)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Success.  File uploaded.&#39;);
+   console.log('Success.  File uploaded.');
 }
 
 var fail = function(error)
 {
-&nbsp;&nbsp;&nbsp;/* error.code == FileTransferError.ABORT_ERR */
-&nbsp;&nbsp;&nbsp;alert(&#39;An error has occurred: Code = &#39; + error.code);
-&nbsp;&nbsp;&nbsp;console.log(&#39;upload error source &#39; + error.source);
-&nbsp;&nbsp;&nbsp;console.log(&#39;upload error target &#39; + error.target);
+   /* error.code == FileTransferError.ABORT_ERR */
+   alert('An error has occurred: Code = ' + error.code);
+   console.log('upload error source ' + error.source);
+   console.log('upload error target ' + error.target);
 };
 
 var ft = new FileTransfer();
 
 ft.onprogress = function(event)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;uploaded: &#39; + event.loaded);
+   console.log('uploaded: ' + event.loaded);
 };
 
-ft.upload(fileURL, encodeURI(&#39;http://some.server.com/upload.php&#39;), win, fail);
+ft.upload(fileURL, encodeURI('http://some.server.com/upload.php'), win, fail);
 </pre>
 <p>The following output is shown in the system log:</p>
 <pre class="prettyprint">
diff --git a/org.tizen.guides/html/web/cordova/globalization_w.htm b/org.tizen.guides/html/web/cordova/globalization_w.htm
index 69667ae..efbf3d4 100644 (file)
--- a/org.tizen.guides/html/web/cordova/globalization_w.htm
+++ b/org.tizen.guides/html/web/cordova/globalization_w.htm
@@ -52,7 +52,7 @@
 
   <h1>Globalization</h1>
 
-<p>You can get information about the user&#39;s locale, language, and time zone. You can also convert strings, numbers, and dates according to the user locale.</p>
+<p>You can get information about the user's locale, language, and time zone. You can also convert strings, numbers, and dates according to the user locale.</p>
 
 <p>The Globalization API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 
@@ -61,8 +61,8 @@
 <li>Obtaining locale information
 <p>You can obtain the following locale information:</p>
 <ul>
-  <li><a href="#current_language">Get the user&#39;s current language</a> as the BCP 47 identifier (such as en-US).</li>
-  <li><a href="#current_locale">Get the user&#39;s current locale</a> as the BCP 47 identifier (such as en-US).</li>
+  <li><a href="#current_language">Get the user's current language</a> as the BCP 47 identifier (such as en-US).</li>
+  <li><a href="#current_locale">Get the user's current locale</a> as the BCP 47 identifier (such as en-US).</li>
   <li><a href="#currency">Get the pattern string to format and parse currency</a> and the ISO 4217 currency code.</li>
   <li><a href="#names_of_months_and_days">Get the names of months and names of the days of the week</a>.</li>
   <li><a href="#date_format">Get the pattern string to format and parse dates</a>.</li>
@@ -73,29 +73,29 @@
 </li>
 <li>Converting data
 <p>You can <a href="#conversions">convert strings, numbers, and dates</a> according to the user locale.</p></li>
-</ul> 
+</ul>
 
 <p>All Globalization functions are accessible by the <code>navigator.globalization</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/globalization.html#GlobalizationManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/globalization.html#GlobalizationManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/globalization.html#GlobalizationManager">TV</a> applications).</p>
 
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onDeviceReady, false);
+document.addEventListener("deviceready",
+                          onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
+   console.log("Cordova features now available");
 }
 </pre>
-     
+
 <h2 id="current_language">Retrieving the Current Language</h2>
 <p>To get the current BCP 47 language identifier:</p>
 <pre class="prettyprint">
 navigator.globalization.getPreferredLanguage(function(language)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Language: &#39; + language.value);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting language.&#39;);});
+   {
+      console.log('Language: ' + language.value);
+   }, function() {console.log('Error getting language.');});
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -113,9 +113,9 @@ Language: en-US
 </p>
 <pre class="prettyprint">
 navigator.globalization.getLocaleName(function(locale)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Locale: &#39; + locale.value);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting locale.&#39;);});
+   {
+      console.log('Locale: ' + locale.value);
+   }, function() {console.log('Error getting locale.');});
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -141,15 +141,15 @@ Locale: en-US
 </ul>
 
 <pre class="prettyprint">
-navigator.globalization.getCurrencyPattern(&#39;USD&#39;, function(pattern)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;pattern: &#39; + pattern.pattern);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;code: &#39; + pattern.code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;fraction: &#39; + pattern.fraction);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;rounding: &#39; + pattern.rounding);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;decimal: &#39; + pattern.decimal);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;grouping: &#39; + pattern.grouping);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting pattern.&#39;);});
+navigator.globalization.getCurrencyPattern('USD', function(pattern)
+   {
+      console.log('pattern: ' + pattern.pattern);
+      console.log('code: ' + pattern.code);
+      console.log('fraction: ' + pattern.fraction);
+      console.log('rounding: ' + pattern.rounding);
+      console.log('decimal: ' + pattern.decimal);
+      console.log('grouping: ' + pattern.grouping);
+   }, function() {console.log('Error getting pattern.');});
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -172,17 +172,17 @@ grouping: ,
 <p>To obtain the names of months:</p>
 <pre class="prettyprint">
 navigator.globalization.getDateNames(function(names)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; names.value.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;month: &#39; + names.value[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting names.&#39;);},
-&nbsp;&nbsp;&nbsp;{type: &#39;wide&#39;, item: &#39;months&#39;});
+   {
+      for (var i = 0; i &lt; names.value.length; i++)
+      {
+         console.log('month: ' + names.value[i]);
+      }
+   }, function() {console.log('Error getting names.');},
+   {type: 'wide', item: 'months'});
 </pre>
 
-<p>In the above example, the third parameter is <code>{type: &#39;wide&#39;, item: &#39;months&#39;}</code>, and the names of months are obtained. To obtain the names of weekdays, pass <code>{type: &#39;wide&#39;, item: &#39;days&#39;}</code> as the third parameter.</p>
- 
+<p>In the above example, the third parameter is <code>{type: 'wide', item: 'months'}</code>, and the names of months are obtained. To obtain the names of weekdays, pass <code>{type: 'wide', item: 'days'}</code> as the third parameter.</p>
+
 <p>The following output is shown in the system log:</p>
 <pre class="prettyprint">
 /*
@@ -209,18 +209,18 @@ month: December
 <ul>
   <li>Date and time pattern that follows Unicode Technical Standard #35</li>
   <li>Abbreviated name of the time zone</li>
-  <li>Current difference in seconds between the user&#39;s time zone and coordinated universal time</li>
-  <li>Current daylight saving time offset in seconds between the user&#39;s non-daylight saving time zone and the user&#39;s daylight saving time zone.</li>
+  <li>Current difference in seconds between the user's time zone and coordinated universal time</li>
+  <li>Current daylight saving time offset in seconds between the user's non-daylight saving time zone and the user's daylight saving time zone.</li>
 </ul>
 
 <pre class="prettyprint">
 function checkDatePattern()
 {
-&nbsp;&nbsp;&nbsp;navigator.globalization.getDatePattern(function(date)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Date pattern: &#39; + date.pattern);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting pattern&#39;);},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{formatLength: &#39;short&#39;, selector: &#39;date and time&#39;});
+   navigator.globalization.getDatePattern(function(date)
+      {
+         console.log('Date pattern: ' + date.pattern);
+      }, function() {console.log('Error getting pattern');},
+      {formatLength: 'short', selector: 'date and time'});
 }
 
 checkDatePattern();
@@ -241,12 +241,12 @@ Date pattern: M/d/yyyy h:mm a
 <p>To obtain information on which day is the first day of the week (1 means Sunday):</p>
 <pre class="prettyprint">
 navigator.globalization.getFirstDayOfWeek(function(day)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;day: &#39; + day.value);
-&nbsp;&nbsp;&nbsp;}, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Error getting first day of week.&#39;);
-&nbsp;&nbsp;&nbsp;});
+   {
+      console.log('day: ' + day.value);
+   }, function()
+   {
+      console.log('Error getting first day of week.');
+   });
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -265,7 +265,7 @@ day: 1
 <ul>
   <li>Number pattern that follows Unicode Technical Standard #35</li>
   <li>Symbol to use when formatting and parsing, such as percent or currency symbol
-  <p>It depends on the third parameter of the <code>getNumberPattern()</code> method, which can be <code>&#39;decimal&#39;</code>, <code>&#39;percent&#39;</code>, or <code>&#39;currency&#39;</code>.</p></li>
+  <p>It depends on the third parameter of the <code>getNumberPattern()</code> method, which can be <code>'decimal'</code>, <code>'percent'</code>, or <code>'currency'</code>.</p></li>
   <li>Number of fractional digits</li>
   <li>Rounding increment</li>
   <li>Symbol to use for positive numbers</li>
@@ -275,17 +275,17 @@ day: 1
 </ul>
 <pre class="prettyprint">
 navigator.globalization.getNumberPattern(function(pattern)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;pattern: &#39; + pattern.pattern);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;symbol: &#39; + pattern.symbol);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;fraction: &#39; + pattern.fraction);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;rounding: &#39; + pattern.rounding);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;positive: &#39; + pattern.positive);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;negative: &#39; + pattern.negative);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;decimal: &#39; + pattern.decimal);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;grouping: &#39; + pattern.grouping);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;An error occurred.&#39;);},
-&nbsp;&nbsp;&nbsp;{type: &#39;decimal&#39;});
+   {
+      console.log('pattern: ' + pattern.pattern);
+      console.log('symbol: ' + pattern.symbol);
+      console.log('fraction: ' + pattern.fraction);
+      console.log('rounding: ' + pattern.rounding);
+      console.log('positive: ' + pattern.positive);
+      console.log('negative: ' + pattern.negative);
+      console.log('decimal: ' + pattern.decimal);
+      console.log('grouping: ' + pattern.grouping);
+   }, function() {console.log('An error occurred.');},
+   {type: 'decimal'});
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -310,9 +310,9 @@ grouping: ,
 <p>To obtain information on whether the daylight saving time is in effect for a given date using the current time zone:</p>
 <pre class="prettyprint">
 navigator.globalization.isDayLightSavingsTime(new Date(), function(date)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;dst: &#39; + date.dst);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting the DST state.&#39;);});
+   {
+      console.log('dst: ' + date.dst);
+   }, function() {console.log('Error getting the DST state.');});
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -330,15 +330,15 @@ dst: true
 <p>To make conversions between strings, numbers, and dates according to the current locale:</p>
 <ul>
   <li>Date to string
-  <p>To convert a date to a string according to the user&#39;s locale and time zone:</p>
+  <p>To convert a date to a string according to the user's locale and time zone:</p>
 <pre class="prettyprint">
 /* This example uses the default conversion options */
 
 navigator.globalization.dateToString(new Date(), function(date)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Date: &#39; + date.value);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting dateString.&#39;);},
-&nbsp;&nbsp;&nbsp;{formatLength: &#39;short&#39;, selector: &#39;date and time&#39;});
+   {
+      console.log('Date: ' + date.value);
+   }, function() {console.log('Error getting dateString.');},
+   {formatLength: 'short', selector: 'date and time'});
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -353,15 +353,15 @@ Date: 9/25/2012 4:21PM
 </pre>
   </li>
   <li>String to date
-  <p>To convert a date formatted as a DOMString according to the user&#39;s locale and time zone:</p>
+  <p>To convert a date formatted as a DOMString according to the user's locale and time zone:</p>
 
 <pre class="prettyprint">
-navigator.globalization.stringToDate(&#39;9/25/2012&#39;, function(date)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;month: &#39; + date.month + &#39;, day: &#39; + date.day +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;, year: &#39; + date.year)
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting date.&#39;);},
-&nbsp;&nbsp;&nbsp;{selector: &#39;date&#39;});
+navigator.globalization.stringToDate('9/25/2012', function(date)
+   {
+      console.log('month: ' + date.month + ', day: ' + date.day +
+                  ', year: ' + date.year)
+   }, function() {console.log('Error getting date.');},
+   {selector: 'date'});
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -378,31 +378,31 @@ month: 8, day: 25, year: 2012
 </pre>
   </li>
   <li>Number to string
-  <p>To return a number formatted as a string according to the user&#39;s preferences:</p>
+  <p>To return a number formatted as a string according to the user's preferences:</p>
 <pre class="prettyprint">
 navigator.globalization.numberToString(3.1415926, function(number)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;decimal number: &#39; + number.value);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting number.&#39;);},
-&nbsp;&nbsp;&nbsp;{type: &#39;decimal&#39;});
+   {
+      console.log('decimal number: ' + number.value);
+   }, function() {console.log('Error getting number.');},
+   {type: 'decimal'});
 
 navigator.globalization.numberToString(1000003, function(number)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;big decimal number: &#39; + number.value);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting number.&#39;);},
-&nbsp;&nbsp;&nbsp;{type: &#39;decimal&#39;});
+   {
+      console.log('big decimal number: ' + number.value);
+   }, function() {console.log('Error getting number.');},
+   {type: 'decimal'});
 
 navigator.globalization.numberToString(0.3183099, function(number)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;percentile: &#39; + number.value);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting number.&#39;);},
-&nbsp;&nbsp;&nbsp;{type: &#39;percent&#39;});
+   {
+      console.log('percentile: ' + number.value);
+   }, function() {console.log('Error getting number.');},
+   {type: 'percent'});
 
 navigator.globalization.numberToString(1099.95, function(number)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;currency: &#39; + number.value);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting number&#39;);},
-&nbsp;&nbsp;&nbsp;{type: &#39;currency&#39;});
+   {
+      console.log('currency: ' + number.value);
+   }, function() {console.log('Error getting number');},
+   {type: 'currency'});
 </pre>
 
 <p>The following output is shown in the system log:</p>
@@ -420,13 +420,13 @@ currency: $1,099.95
 </pre>
   </li>
   <li>String to number
-  <p>To parse a number formatted as a string according to the user&#39;s preferences and return the corresponding number:</p>  
+  <p>To parse a number formatted as a string according to the user's preferences and return the corresponding number:</p>
 <pre class="prettyprint">
-navigator.globalization.stringToNumber(&#39;1234.56&#39;, function(number)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;number: &#39; + number.value);
-&nbsp;&nbsp;&nbsp;}, function() {console.log(&#39;Error getting number.&#39;);},
-&nbsp;&nbsp;&nbsp;{type: &#39;decimal&#39;});
+navigator.globalization.stringToNumber('1234.56', function(number)
+   {
+      console.log('number: ' + number.value);
+   }, function() {console.log('Error getting number.');},
+   {type: 'decimal'});
 </pre>
 
 <p>The following output is shown in the system log:</p>
diff --git a/org.tizen.guides/html/web/cordova/media_w.htm b/org.tizen.guides/html/web/cordova/media_w.htm
index 127446b..5805125 100644 (file)
--- a/org.tizen.guides/html/web/cordova/media_w.htm
+++ b/org.tizen.guides/html/web/cordova/media_w.htm
@@ -40,7 +40,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/media.html">Media API for Mobile Web</a></li>
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/media.html">Media API for Wearable Web</a></li>
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/media.html">Media API for TV Web</a></li>             
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/media.html">Media API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -76,11 +76,11 @@
 <li>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
+   console.log("Cordova features now available");
 }
 </pre>
 </li>
@@ -88,9 +88,9 @@ function onDeviceReady()
 <p>To use the Media API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/media.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/media.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/media.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
 &lt;!--To record audio--&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/mediacapture&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/mediacapture"/&gt;
 &lt;!--To change the volume during playback--&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/volume.set&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/volume.set"/&gt;
 </pre>
 </li>
 </ol>
@@ -103,7 +103,7 @@ function onDeviceReady()
     <li><p>Place the audio file in a directory on a device. In this example, it is in the owner home directory: <code>/home/owner/content/Music/play.mp3</code>.</p></li>
     <li><p>Construct a new media object from the audio file. No additional parameters are required.</p>
 <pre class="prettyprint">
-var myMedia = new Media(&quot;file:///home/owner/content/Music/play.mp3&quot;);
+var myMedia = new Media("file:///home/owner/content/Music/play.mp3");
 </pre>
     </li>
     <li><p>Call the <code>play()</code> method:</p>
@@ -120,7 +120,7 @@ myMedia.play();
 <ol>
     <li><p>Construct a new media object from the audio file.</p>
 <pre class="prettyprint">
-var myMedia = new Media(&quot;file:///home/owner/content/Music/play.mp3&quot;);
+var myMedia = new Media("file:///home/owner/content/Music/play.mp3");
 </pre>
     </li>
     <li><p>Start playing:</p>
@@ -132,17 +132,17 @@ myMedia.play();
 <p>A timer is registered using the <code>setTimeout()</code> global function.</p>
 <pre class="prettyprint">
 setTimeout(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myMedia.seekTo(10000);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Playback position has been set to 10 seconds.&#39;);
-&nbsp;&nbsp;&nbsp;}, 5000);
+   {
+      myMedia.seekTo(10000);
+      console.log('Playback position has been set to 10 seconds.');
+   }, 5000);
 </pre></li>
     <li><p>Stop the media and release after 10 seconds:</p>
 <pre class="prettyprint">
 setTimeout(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myMedia.release();
-&nbsp;&nbsp;&nbsp;}, 10000);
+   {
+      myMedia.release();
+   }, 10000);
 </pre>
     </li>
 </ol>
@@ -153,7 +153,7 @@ setTimeout(function()
 <ol>
     <li><p>Construct a new media object from the audio file:</p>
 <pre class="prettyprint">
-var myMedia = new Media(&quot;file:///home/owner/content/Music/play.mp3&quot;);
+var myMedia = new Media("file:///home/owner/content/Music/play.mp3");
 </pre>
     </li>
     <li><p>Start playing:</p>
@@ -164,16 +164,16 @@ myMedia.play();
     <li><p>Mute the volume after 2 seconds:</p>
 <pre class="prettyprint">
 setTimeout(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myMedia.setVolume(0.0);
-&nbsp;&nbsp;&nbsp;}, 2000);
+   {
+      myMedia.setVolume(0.0);
+   }, 2000);
 </pre></li>
     <li><p>Set volume to 1.0 after 5 seconds:</p>
 <pre class="prettyprint">
 setTimeout(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myMedia.setVolume(1.0);
-&nbsp;&nbsp;&nbsp;}, 5000);
+   {
+      myMedia.setVolume(1.0);
+   }, 5000);
 </pre>
 </li>
 </ol>
@@ -215,7 +215,7 @@ setTimeout(function()
 <pre class="prettyprint">
 var successCallback = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Audio file has been played back.&#39;);
+   console.log('Audio file has been played back.');
 }
 </pre>
     </li>
@@ -224,7 +224,7 @@ var successCallback = function()
 <pre class="prettyprint">
 var errorCallback = function(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;An error occurred: &#39; + err.code);
+   console.log('An error occurred: ' + err.code);
 }
 </pre>
     </li>
@@ -233,28 +233,28 @@ var errorCallback = function(err)
 <pre class="prettyprint">
 var statusCallback = function(status)
 {
-&nbsp;&nbsp;&nbsp;switch (status)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case Media.MEDIA_NONE: console.log(&#39;Audio file status is none&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case Media.MEDIA_STARTING: console.log(&#39;Audio file is starting&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case Media.MEDIA_RUNNING: console.log(&#39;Audio file is running&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case Media.MEDIA_PAUSED: console.log(&#39;Audio file is paused&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case Media.MEDIA_STOPPED: console.log(&#39;Audio file is stopped&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: console.log(&#39;Audio file status unknown&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;}
+   switch (status)
+   {
+      case Media.MEDIA_NONE: console.log('Audio file status is none');
+         break;
+      case Media.MEDIA_STARTING: console.log('Audio file is starting');
+         break;
+      case Media.MEDIA_RUNNING: console.log('Audio file is running');
+         break;
+      case Media.MEDIA_PAUSED: console.log('Audio file is paused');
+         break;
+      case Media.MEDIA_STOPPED: console.log('Audio file is stopped');
+         break;
+      default: console.log('Audio file status unknown');
+         break;
+   }
 }
 </pre>
     </li>
     <li><p>Construct a new media object and pass the callbacks as parameters.</p>
 <p>Since the callbacks are optional, you do not need to provide them all. However, to monitor status changes, you must provide the status callback defined in the previous step.</p>
 <pre class="prettyprint">
-var src = &quot;file:///home/owner/content/Music/play.mp3&quot;;
+var src = "file:///home/owner/content/Music/play.mp3";
 var myMedia = new Media(src, successCallback, errorCallback, statusCallback);
 </pre>
     </li>
@@ -267,14 +267,14 @@ myMedia.play();
         <p>Test the callbacks by pausing and resuming playback after 3 and 5 seconds:</p>
 <pre class="prettyprint">
 setTimeout(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myMedia.pause();
-&nbsp;&nbsp;&nbsp;}, 3000);
+   {
+      myMedia.pause();
+   }, 3000);
 
 setTimeout(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myMedia.play();
-&nbsp;&nbsp;&nbsp;}, 5000);
+   {
+      myMedia.play();
+   }, 5000);
 </pre>
     </li>
 </ol>
@@ -285,13 +285,13 @@ setTimeout(function()
     <li>
         <p>Construct a new media object from an audio file:</p>
 <pre class="prettyprint">
-var myMedia = new Media(&quot;file:///home/owner/content/Music/play.mp3&quot;);
+var myMedia = new Media("file:///home/owner/content/Music/play.mp3");
 </pre>
     </li>
     <li>
         <p>Get the duration and print it to the system log. The -1 value means that the duration is unknown.</p>
 <pre class="prettyprint">
-console.log(&#39;Audio duration in seconds is &#39; + myMedia.getDuration());
+console.log('Audio duration in seconds is ' + myMedia.getDuration());
 </pre>
     </li>
     <li><p>Start playing:</p>
@@ -304,7 +304,7 @@ myMedia.play();
 <pre class="prettyprint">
 var positionCallback = function(position)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Current position in seconds is &#39; + position);
+   console.log('Current position in seconds is ' + position);
 }
 </pre>
     </li>
@@ -313,7 +313,7 @@ var positionCallback = function(position)
 <pre class="prettyprint">
 var errorCallback = function(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;An error occurred: &#39; + err.code);
+   console.log('An error occurred: ' + err.code);
 }
 </pre>
     </li>
@@ -327,9 +327,9 @@ myMedia.getCurrentPosition(positionCallback, errorCallback);
         <p>You can set a timer to get the position 5 seconds later:</p>
 <pre class="prettyprint">
 setTimeout(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myMedia.getCurrentPosition(positionCallback, errorCallback);
-&nbsp;&nbsp;&nbsp;}, 5000);
+   {
+      myMedia.getCurrentPosition(positionCallback, errorCallback);
+   }, 5000);
 </pre>
         <p>Something similar to the following example is shown in the system log:</p>
 <pre class="prettyprint">
@@ -348,18 +348,18 @@ Current position in seconds is 4.919
 <pre class="prettyprint">
 var successCallback = function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Started recording audio file.&#39;);
+   console.log('Started recording audio file.');
 }
 
 var errorCallback = function(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Error occurred &#39; + err.code);
+   console.log('Error occurred ' + err.code);
 }
 </pre>
     </li>
     <li><p>Construct a media object and pass the name for the new audio file:</p>
 <pre class="prettyprint">
-var myMedia = new Media(&quot;recording.mp3&quot;, successCallback, errorCallback);
+var myMedia = new Media("recording.mp3", successCallback, errorCallback);
 </pre>
     </li>
     <li><p>Start recording:</p>
@@ -370,11 +370,11 @@ myMedia.startRecord();
     <li><p>Stop recording after 10 seconds and release the media object:</p>
 <pre class="prettyprint">
 setTimeout(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myMedia.stopRecord();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Stopped recording an audio file.&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myMedia.release();
-&nbsp;&nbsp;&nbsp;}, 10000);
+   {
+      myMedia.stopRecord();
+      console.log('Stopped recording an audio file.');
+      myMedia.release();
+   }, 10000);
 </pre>
 <p>Always release the media object when no longer needed.</p>
     </li>
diff --git a/org.tizen.guides/html/web/cordova/network_information_w.htm b/org.tizen.guides/html/web/cordova/network_information_w.htm
index 383eab0..19d4d49 100644 (file)
--- a/org.tizen.guides/html/web/cordova/network_information_w.htm
+++ b/org.tizen.guides/html/web/cordova/network_information_w.htm
@@ -36,7 +36,7 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/networkInformation.html">Network Information API for Mobile Web</a></li>
             <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/networkInformation.html">Network Information API for Wearable Web</a></li>
-            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/networkInformation.html">Network Information API for TV Web</a></li>                  
+            <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/networkInformation.html">Network Information API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -66,18 +66,18 @@
 <li>
 <p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;deviceready&quot;, onDeviceReady, false);
+document.addEventListener("deviceready", onDeviceReady, false);
 
 function onDeviceReady()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Cordova features now available&quot;);
+   console.log("Cordova features now available");
 }
 </pre>
 </li>
 <li>
 <p>To use the Network Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/networkInformation.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/networkInformation.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/networkInformation.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/telephony&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/telephony"/&gt;
 </pre>
 </li>
 </ol>
@@ -123,9 +123,9 @@ function onDeviceReady()
 <p>To determine whether the device is connected to a Wi-Fi network:</p>
 
 <ol>
-<li>Place a <code>div</code> element with the <code>id=&quot;wifi-indicator&quot;</code> attribute somewhere in the application HTML for text output:
+<li>Place a <code>div</code> element with the <code>id="wifi-indicator"</code> attribute somewhere in the application HTML for text output:
 <pre class="prettyprint">
-&lt;div id=&quot;wifi-indicator&quot;&gt;
+&lt;div id="wifi-indicator"&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -139,11 +139,11 @@ var state = navigator.connection.type;
 <pre class="prettyprint">
 if (state == Connection.WIFI)
 {
-&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#wifi-indicator&#39;).textContent = &quot;Connected to WiFi&quot;;
+   document.querySelector('#wifi-indicator').textContent = "Connected to WiFi";
 }
 else
 {
-&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#wifi-indicator&#39;).textContent = &quot;Not connected to WiFi&quot;;
+   document.querySelector('#wifi-indicator').textContent = "Not connected to WiFi";
 }
 </pre>
 
@@ -157,12 +157,12 @@ else
 <ol>
     <li>Register event handlers after Cordova is set up. The most convenient way is to use the <code>deviceready</code> event callback.
 <pre class="prettyprint">
-document.addEventListener(&#39;deviceready&#39;, register);
+document.addEventListener('deviceready', register);
 
 function register()
 {
-&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;online&#39;, went_online);
-&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;offline&#39;, went_offline);
+   document.addEventListener('online', went_online);
+   document.addEventListener('offline', went_offline);
 }
 </pre>
     </li>
@@ -170,12 +170,12 @@ function register()
 <pre class="prettyprint">
 function went_online()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Went online&quot;);
+   console.log("Went online");
 }
 
 function went_offline()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Went offline&quot;);
+   console.log("Went offline");
 }
 </pre>
     <p>The <code>online</code> event fires when <code>connection.type</code> changes from <code>Connection.NONE</code> to any other value. Similarly, the <code>offline</code> event fires when <code>connection.type</code> becomes <code>Connection.NONE</code>.</p>
diff --git a/org.tizen.guides/html/web/data/data_cover_w.htm b/org.tizen.guides/html/web/data/data_cover_w.htm
index 5d2c59b..6b55736 100644 (file)
--- a/org.tizen.guides/html/web/data/data_cover_w.htm
+++ b/org.tizen.guides/html/web/data/data_cover_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Data Storage and Management</title>  
+       <title>Data Storage and Management</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,7 +28,7 @@
                        <li>Tizen 3.0 and Higher for TV</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Data Storage and Management</h1>
@@ -54,7 +54,7 @@
 
 <p>You can manage ZIP archives on the device. You can create and browse the archives, and extract files from the archive.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/data/data_filter_w.htm b/org.tizen.guides/html/web/data/data_filter_w.htm
index 87fda93..e851d4a 100644 (file)
--- a/org.tizen.guides/html/web/data/data_filter_w.htm
+++ b/org.tizen.guides/html/web/data/data_filter_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Data Filtering and Sorting</title> 
- </head> 
+  <title>Data Filtering and Sorting</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -43,30 +43,30 @@
                <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">Tizen API for Mobile Web</a></li>
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">Tizen API for Wearable Web</a></li>
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html">Tizen API for TV Web</a></li>                  
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html">Tizen API for TV Web</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Data Filtering and Sorting</h1> 
+  <h1>Data Filtering and Sorting</h1>
   <p>When managing large amounts of data, you can create filters to search for specific information, and make queries to receive only the information you are looking for. You can use various filter attributes and sort the received data.</p>
-  
-<p>The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
- 
-  <p>The main data handling features of the Tizen API include:</p> 
-  <ul> 
+
+<p>The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
+
+  <p>The main data handling features of the Tizen API include:</p>
+  <ul>
    <li>Filters <p>The Tizen API supports the following filter types, which are subtypes of the <code>AbstractFilter</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AbstractFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AbstractFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AbstractFilter">TV</a> applications):</p>
-    <ul> 
+    <ul>
      <li><code>AttributeFilter</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeFilter">TV</a> applications)
-        <p>Matches objects containing a defined attribute or attribute value. The match is determined based on match flags defined with the <code>FilterMatchFlag</code> type definition.</p></li> 
+        <p>Matches objects containing a defined attribute or attribute value. The match is determined based on match flags defined with the <code>FilterMatchFlag</code> type definition.</p></li>
      <li><code>AttributeRangeFilter</code>(in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#AttributeRangeFilter">TV</a> applications)
-        <p>Matches objects containing an attribute whose values are within a particular range.</p> </li> 
+        <p>Matches objects containing an attribute whose values are within a particular range.</p> </li>
      <li><code>CompositeFilter</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#CompositeFilter">TV</a> applications)
-        <p>Combines several filters into a set.</p></li> 
+        <p>Combines several filters into a set.</p></li>
     </ul>
-<p>You can create <a href="#filter">attribute filters</a>, <a href="#range">attribute range filters</a>, and <a href="#composite">composite filters</a> to search for specific data and <a href="#make">make complex queries</a>. The attributes you can use with the filter types vary depending on the API you are using. For example, query methods related to the <a href="#calendar">calendar</a>, <a href="#call">call history</a>, <a href="#contact">contact</a>, <a href="#content_filter">content</a>, and <a href="#messaging">messaging</a> data each have their own sets of supported filter attributes.</p> </li> 
-   <li>Sorting 
+<p>You can create <a href="#filter">attribute filters</a>, <a href="#range">attribute range filters</a>, and <a href="#composite">composite filters</a> to search for specific data and <a href="#make">make complex queries</a>. The attributes you can use with the filter types vary depending on the API you are using. For example, query methods related to the <a href="#calendar">calendar</a>, <a href="#call">call history</a>, <a href="#contact">contact</a>, <a href="#content_filter">content</a>, and <a href="#messaging">messaging</a> data each have their own sets of supported filter attributes.</p> </li>
+   <li>Sorting
    <p>You can <a href="#use_modes">sort the results of queried data</a> using the <code>SortMode</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#SortMode">TV</a> applications).</p></li> </ul>
 
 <h2 id="filter" name="filter">Creating Attribute Filters</h2>
@@ -78,14 +78,14 @@
    <p>Create the filter with the <code>AttributeFilter</code> constructor. You can specify attribute options, such as the attribute name, match flag, and match value.</p>
 <pre class="prettyprint">
 /* Use the firstName attribute with the EXACTLY match flag and the Chris value */
-var firstNameFilter = new tizen.AttributeFilter(&#39;name.firstName&#39;, &#39;EXACTLY&#39;, &#39;Chris&#39;);
+var firstNameFilter = new tizen.AttributeFilter('name.firstName', 'EXACTLY', 'Chris');
 </pre></li>
      <li><p>Call the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to find contacts. The filter (<code>firstNameFilter</code>) you created is included as a parameter.</p>
 <pre class="prettyprint">
 tizen.contact.getDefaultAddressBook().find(successCB, errorCB, firstNameFilter);
 </pre></li>
     </ol>
-       
+
 
  <h2 id="range" name="range">Creating Attribute Range Filters</h2>
 
@@ -98,16 +98,16 @@ tizen.contact.getDefaultAddressBook().find(successCB, errorCB, firstNameFilter);
 /* (meaning that you search for all events occurring today) */
 var now = tizen.time.getCurrentDateTime();
 var today_begin = new tizen.TZDate(now.getFullYear(), now.getMonth(), now.getDate());
-var today_end = today_begin.addDuration(new tizen.TimeDuration(1, &quot;DAYS&quot;));
+var today_end = today_begin.addDuration(new tizen.TimeDuration(1, "DAYS"));
 var dateRangeFilter =
-&nbsp;&nbsp;&nbsp;new tizen.AttributeRangeFilter(&quot;startDate&quot;, today_begin, today_end);
+   new tizen.AttributeRangeFilter("startDate", today_begin, today_end);
 </pre></li>
      <li> <p> Call the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface to find events. The filter (<code>dateRangeFilter</code>) you created is included as a parameter.</p>
 <pre class="prettyprint">
-tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;).find(successCB, errorCB, dateRangeFilter);
+tizen.calendar.getDefaultCalendar("EVENT").find(successCB, errorCB, dateRangeFilter);
 </pre></li>
     </ol>
- 
+
  <h2 id="composite" name="composite">Creating Composite Filters</h2>
 
   <p> Learning how to use composite filters allows you effectively incorporate query methods in your application:</p>
@@ -116,10 +116,10 @@ tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;).find(successCB, errorCB, da
 <p>Create the filter with the <code>CompositeFilter</code> constructor. You can specify multiple sub-filters for the filter set.</p>
 <pre class="prettyprint">
 /* Create an attribute filter based on the firstName attribute */
-var firstNameFilter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;);
+var firstNameFilter = new tizen.AttributeFilter("name.firstName", "CONTAINS", "Chris");
 
 /* Create an attribute filter based on the lastName attribute */
-var lastNameFilter = new tizen.AttributeFilter(&quot;name.lastName&quot;, &quot;EXACTLY&quot;, &quot;Smith&quot;);
+var lastNameFilter = new tizen.AttributeFilter("name.lastName", "EXACTLY", "Smith");
 
 /*
    Create a composite filter based on the intersection of these 2 filters
@@ -127,20 +127,20 @@ var lastNameFilter = new tizen.AttributeFilter(&quot;name.lastName&quot;, &quot;
    for the contact to be included in the results)
 */
 var nameCompositeFilter =
-&nbsp;&nbsp;&nbsp;new tizen.CompositeFilter(&quot;INTERSECTION&quot;, [firstNameFilter, lastNameFilter]);
+   new tizen.CompositeFilter("INTERSECTION", [firstNameFilter, lastNameFilter]);
 </pre></li>
      <li><p> Call the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to find matching contacts. The filter (<code>nameCompositeFilter</code>) you created is included as a parameter.</p>
 <pre class="prettyprint">
 tizen.contact.getDefaultAddressBook().find(successCB, errorCB, nameCompositeFilter);
 </pre></li>
     </ol>
-  
+
  <h2 id="use_modes" name="use_modes">Using Sorting Modes</h2>
- 
-    <p>The following sorting modes are supported:</p> 
-    <ul> 
-     <li> <p><code>&quot;ASC&quot;</code>: Ascending sorting order</p> </li> 
-     <li> <p><code>&quot;DESC&quot;</code>: Descending sorting order</p> </li> 
+
+    <p>The following sorting modes are supported:</p>
+    <ul>
+     <li> <p><code>"ASC"</code>: Ascending sorting order</p> </li>
+     <li> <p><code>"DESC"</code>: Descending sorting order</p> </li>
     </ul>
 
   <p> Learning how to use sorting modes allows you effectively incorporate query methods in your application:</p>
@@ -149,7 +149,7 @@ tizen.contact.getDefaultAddressBook().find(successCB, errorCB, nameCompositeFilt
 <p>Create the sort order with the <code>SortMode()</code> method. Specify an attribute name to sort by and an order option.</p>
 <pre class="prettyprint">
 /* Use the firstName attribute with an ASC order */
-var sortMode = new tizen.SortMode(&quot;name.firstName&quot;, &quot;ASC&quot;);
+var sortMode = new tizen.SortMode("name.firstName", "ASC");
 </pre></li>
      <li><p> Call the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to find matching contacts. In this example, the filter parameter in the <code>find()</code> method is defined as <code>null</code>, which means that the method retrieves all contacts in the address book.</p>
 <pre class="prettyprint">
@@ -160,881 +160,881 @@ tizen.contact.getDefaultAddressBook().find(successCB, errorCB, null, sortMode);
 <div class="note">
        <strong>Note</strong>
        If you use a type attribute as a sort mode parameter, the sorting is not performed alphabetically since the attribute values are stored normally after the type conversion in the platform implementation.
-<p>For example, if the <code>ContentType</code> enum (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentType">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentType">TV</a> applications) is the type attribute and the sorting order is <code>&quot;DESC&quot;</code>, the sorting result is ordered according to the listed enum order:</p>
+<p>For example, if the <code>ContentType</code> enum (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentType">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentType">TV</a> applications) is the type attribute and the sorting order is <code>"DESC"</code>, the sorting result is ordered according to the listed enum order:</p>
 <ul>
 <li>Image</li><li>Video</li><li>Audio</li><li>Other</li></ul>
 </div>
- 
+
  <h2 id="make" name="make">Making Complex Queries Using Filters</h2>
- 
+
   <p>Learning how to use filters allows you effectively incorporate complex query methods in your application. You can create queries using AND and OR conditions, like in SQL queries. The following example shows how to make the following query:</p>
-  <p><code>&quot;where ((type=&#39;VIDEO&#39; OR type=&#39;IMAGE&#39;) AND title like &#39;%special%&#39;)&quot;</code></p>
-  <p>Basically, you search in the content of the device for media items where the media type is video or image, and the title contains the word &quot;special&quot;.</p>
+  <p><code>"where ((type='VIDEO' OR type='IMAGE') AND title like '%special%')"</code></p>
+  <p>Basically, you search in the content of the device for media items where the media type is video or image, and the title contains the word "special".</p>
   <ol>
    <li> <p>Create attribute filters to include all content whose media type is either video or image:</p>
 <pre class="prettyprint">
 function makeQueryAndFire()
 {
-&nbsp;&nbsp;&nbsp;/* Filter for the video media type */
-&nbsp;&nbsp;&nbsp;var typeVideoFilter = new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, &quot;VIDEO&quot;);
+   /* Filter for the video media type */
+   var typeVideoFilter = new tizen.AttributeFilter("type", "EXACTLY", "VIDEO");
 
-&nbsp;&nbsp;&nbsp;/* Filter for the image media type */
-&nbsp;&nbsp;&nbsp;var typeImageFilter = new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, &quot;IMAGE&quot;);
+   /* Filter for the image media type */
+   var typeImageFilter = new tizen.AttributeFilter("type", "EXACTLY", "IMAGE");
 </pre></li>
    <li> <p>Create a composite filter that finds all content that matches one of the media type filters:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;var typeFilter =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.CompositeFilter(&quot;UNION&quot;, [typeVideoFilter, typeImageFilter]);
+   var typeFilter =
+      new tizen.CompositeFilter("UNION", [typeVideoFilter, typeImageFilter]);
 </pre></li>
-   <li> <p>Create another attribute filter that includes content containing the word &quot;special&quot; in its title:</p>
+   <li> <p>Create another attribute filter that includes content containing the word "special" in its title:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;var titleFilter = new tizen.AttributeFilter(&quot;title&quot;, &quot;CONTAINS&quot;, &quot;special&quot;);
+   var titleFilter = new tizen.AttributeFilter("title", "CONTAINS", "special");
 </pre></li>
    <li> <p>Create the final composite filter that finds all content that matches both the composite media type filter and the title filter:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;var finalFilter =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.CompositeFilter(&quot;INTERSECTION&quot;, [typeFilter, titleFilter]);
+   var finalFilter =
+      new tizen.CompositeFilter("INTERSECTION", [typeFilter, titleFilter]);
 </pre></li>
-   <li> <p>Call the <code>find()</code> method of the Content API&#39;s <code>ContentManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications) to retrieve the media items that match the final filter:</p> 
+   <li> <p>Call the <code>find()</code> method of the Content API's <code>ContentManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications) to retrieve the media items that match the final filter:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;tizen.content.find(findMediaContentsCallback, onError, null, finalFilter);
+   tizen.content.find(findMediaContentsCallback, onError, null, finalFilter);
 }
 </pre>
 <p>The <code>findMediaContentsCallback()</code> event handler returns the query result.</p> </li>
   </ol>
- 
-   <h2 id="calendar" name="calendar">Calendar Filter Attributes</h2> 
-  <p>The following table lists the filter types you can use with specific calendar item attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface.</p> 
-<p align="center" class="Table"><strong>Table: Calendar filter attributes</strong></p> 
+
+   <h2 id="calendar" name="calendar">Calendar Filter Attributes</h2>
+  <p>The following table lists the filter types you can use with specific calendar item attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface.</p>
+<p align="center" class="Table"><strong>Table: Calendar filter attributes</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Attribute filter supported</th>
+     <th>Attribute range filter supported</th>
+    </tr>
+    <tr>
+     <td><code>id</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>id.uid</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>description</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td> <code>summary</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>isAllDay</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>isDetached</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>startDate</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>location</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>geolocation.latitude</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>geolocation.longitude</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>organizer</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>visibility</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>status</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>priority</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>categories</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>dueDate</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>completedDate</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>progress</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>endDate</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>availability</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>lastModificationDate</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>alarms</code></td>
+     <td>No*</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>attendees</code></td>
+     <td>No*</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>recurrenceRule</code></td>
+     <td>No*</td>
+     <td>No</td>
+    </tr>
+   </tbody>
+  </table>
+  <p>* The attribute filter is only supported with the <code>EXISTS</code> flag. </p>
+
+  <h2 id="call" name="call">Call History Filter Attributes</h2>
+  <p>The following table lists the filter types you can use with specific call history attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface.</p>
+
+<p align="center" class="Table"><strong>Table: Call History filter attributes</strong></p>
 <table>
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td><code>id</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>id.uid</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>description</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td> <code>summary</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>isAllDay</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>isDetached</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>startDate</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>location</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>geolocation.latitude</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>geolocation.longitude</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>organizer</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>visibility</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>status</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>priority</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>categories</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>dueDate</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>completedDate</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>progress</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>endDate</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>availability</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>lastModificationDate</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>alarms</code></td> 
-     <td>No*</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>attendees</code></td> 
-     <td>No*</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>recurrenceRule</code></td> 
-     <td>No*</td> 
-     <td>No</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>* The attribute filter is only supported with the <code>EXISTS</code> flag. </p> 
+  <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Attribute filter supported</th>
+     <th>Attribute range filter supported</th>
+    </tr>
+    <tr>
+     <td><code>uid</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>type</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>features</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>remoteParties.remoteParty</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>remoteParties.personId</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>startTime</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>duration</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>direction</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+   </tbody>
+  </table>
 
-  <h2 id="call" name="call">Call History Filter Attributes</h2> 
-  <p>The following table lists the filter types you can use with specific call history attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface.</p> 
+<h2 id="contact" name="contact">Contact Filter Attributes</h2>
+  <p>The following table lists the filter types you can use with specific contact attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface.</p>
 
-<p align="center" class="Table"><strong>Table: Call History filter attributes</strong></p> 
-<table> 
-  <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td><code>uid</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>type</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>features</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>remoteParties.remoteParty</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>remoteParties.personId</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>startTime</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>duration</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>direction</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-<h2 id="contact" name="contact">Contact Filter Attributes</h2> 
-  <p>The following table lists the filter types you can use with specific contact attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface.</p> 
- 
-<p align="center" class="Table"><strong>Table: Contact filter attributes</strong></p> 
+<p align="center" class="Table"><strong>Table: Contact filter attributes</strong></p>
 <table>
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
-     <td><code>id</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>personId</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>lastUpdated</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>isFavorite</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>birthday</code></td> 
-     <td>Yes</td> 
-     <td>Yes</td> 
-    </tr> 
-    <tr> 
-     <td><code>photoURI</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>ringtoneURI</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>name.prefix</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>name.suffix</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>name.firstName</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>name.middleName</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>name.lastName</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>name.nicknames</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>name.phoneticFirstName</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>name.phoneticLastName</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>name.displayName</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>addresses.country</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>addresses.region</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>addresses.city</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>addresses.streetAddress</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
-     <td><code>addresses.additionalInformation</code></td> 
-     <td>Yes</td> 
-     <td>No</td> 
-    </tr> 
-    <tr> 
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Attribute filter supported</th>
+     <th>Attribute range filter supported</th>
+    </tr>
+    <tr>
+     <td><code>id</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>personId</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>lastUpdated</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>isFavorite</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>birthday</code></td>
+     <td>Yes</td>
+     <td>Yes</td>
+    </tr>
+    <tr>
+     <td><code>photoURI</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>ringtoneURI</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>name.prefix</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>name.suffix</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>name.firstName</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>name.middleName</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>name.lastName</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>name.nicknames</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>name.phoneticFirstName</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>name.phoneticLastName</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>name.displayName</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>addresses.country</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>addresses.region</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>addresses.city</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>addresses.streetAddress</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
+     <td><code>addresses.additionalInformation</code></td>
+     <td>Yes</td>
+     <td>No</td>
+    </tr>
+    <tr>
      <td><code>addresses.postalCode</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>addresses.isDefault</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>addresses.types</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>phoneNumbers.number</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>phoneNumbers.isDefault</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>phoneNumbers.types</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>emails.email</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>emails.isDefault</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>emails.types</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>anniversaries.date</code></td>
      <td>Yes</td>
      <td>Yes</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>anniversaries.label</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>organizations.name</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>organizations.department</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>organizations.title</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>organizations.role</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>organizations.logoUri</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>urls.url</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>urls.type</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>groupIds</code></td>
      <td>Yes</td>
      <td>Yes</td>
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>The following table lists the filter types you can use with specific person attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> 
+    </tr>
+   </tbody>
+  </table>
+  <p>The following table lists the filter types you can use with specific person attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p>
 
-<p align="center" class="Table"><strong>Table: Person filter attributes</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Person filter attributes</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Attribute filter supported</th>
+     <th>Attribute range filter supported</th>
+    </tr>
+    <tr>
      <td><code>id</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>displayName</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>contactCount</code></td>
      <td>Yes</td>
      <td>Yes</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>hasPhoneNumber</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>hasEmail</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>isFavorite</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>photoURI</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>ringtoneURI</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>displayContactId</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-   </tbody> 
-  </table> 
-  
-<h2 id="content_filter" name="content_filter">Content Filter Attributes</h2> 
-  <p>The following table lists the filter types you can use with specific content attributes in the methods of the <code>ContentManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications).</p> 
+    </tr>
+   </tbody>
+  </table>
+
+<h2 id="content_filter" name="content_filter">Content Filter Attributes</h2>
+  <p>The following table lists the filter types you can use with specific content attributes in the methods of the <code>ContentManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications).</p>
 
-<p align="center" class="Table"><strong>Table: Content filter attributes</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
+<p align="center" class="Table"><strong>Table: Content filter attributes</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Attribute filter supported</th>
+     <th>Attribute range filter supported</th>
+    </tr>
+    <tr>
      <td><code>id</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>type</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>mimeType</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>name</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>title</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>contentURI</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>thumbnailURIs</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>releaseDate</code></td>
      <td>Yes</td>
      <td>Yes</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>modifedDate</code></td>
      <td>Yes</td>
      <td>Yes</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>size</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>description</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>rating</code></td>
      <td>Yes</td>
      <td>Yes</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>geolocation.latitude</code></td>
      <td>Yes</td>
      <td>Yes</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>geolocation.longitude</code></td>
      <td>Yes</td>
      <td>Yes</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>album</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>genres</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>artists</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>composers</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>lyrics</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>copyright</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>bitrate</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>trackNumber</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>duration</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>orientation</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-   </tbody> 
-  </table> 
-    
-<h2 id="messaging" name="messaging">Messaging Filter Attributes</h2> 
-  <p>The following tables list the filter types you can use with specific message attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p> 
-  <p>The following table lists the filter attributes related to the <code>findMessage()</code> method.</p> 
- 
-<p align="center" class="Table"><strong>Table: Filter attributes for finding messages</strong></p> 
+    </tr>
+   </tbody>
+  </table>
+
+<h2 id="messaging" name="messaging">Messaging Filter Attributes</h2>
+  <p>The following tables list the filter types you can use with specific message attributes in the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p>
+  <p>The following table lists the filter attributes related to the <code>findMessage()</code> method.</p>
+
+<p align="center" class="Table"><strong>Table: Filter attributes for finding messages</strong></p>
 <table>
- <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
+ <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Attribute filter supported</th>
+     <th>Attribute range filter supported</th>
+    </tr>
+    <tr>
      <td><code>id</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>serviceId</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>conversationId</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>folderId</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>type</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>timestamp</code></td>
      <td>No</td>
      <td>Yes</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>from</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>to</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>cc</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>bcc</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>body.plainBody</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>isRead</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>hasAttachment</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>isHighPriority</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>subject</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
-     <td><code>isResponseTo</code></td> 
+    </tr>
+    <tr>
+     <td><code>isResponseTo</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>messageStatus</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>attachments</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>The following table lists the filter attributes related to the <code>findConversations()</code> method.</p> 
- 
-<p align="center" class="Table"><strong>Table: Filter attributes for finding conversations</strong></p> 
+    </tr>
+   </tbody>
+  </table>
+  <p>The following table lists the filter attributes related to the <code>findConversations()</code> method.</p>
+
+<p align="center" class="Table"><strong>Table: Filter attributes for finding conversations</strong></p>
 <table>
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Attribute filter supported</th>
+     <th>Attribute range filter supported</th>
+    </tr>
+    <tr>
      <td><code>id</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>type</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>timestamp</code></td>
      <td>No</td>
      <td>Yes</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>messageCount</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
-     <td><code>unreadMessages</code></td> 
+    </tr>
+    <tr>
+     <td><code>unreadMessages</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>preview</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>subject</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>isRead</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>from</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>to</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>cc</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>bcc</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>lastMessageId</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>The following table lists the filter attributes related to the <code>findFolders()</code> method.</p> 
- 
-<p align="center" class="Table"><strong>Table: Filter attributes for finding message folders</strong></p> 
+    </tr>
+   </tbody>
+  </table>
+  <p>The following table lists the filter attributes related to the <code>findFolders()</code> method.</p>
+
+<p align="center" class="Table"><strong>Table: Filter attributes for finding message folders</strong></p>
 <table>
-   <tbody> 
-    <tr> 
-     <th>Attribute</th> 
-     <th>Attribute filter supported</th> 
-     <th>Attribute range filter supported</th> 
-    </tr> 
-    <tr> 
+   <tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Attribute filter supported</th>
+     <th>Attribute range filter supported</th>
+    </tr>
+    <tr>
      <td><code>id</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>parentId</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>serviceId</code></td>
      <td>Yes</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>contentType</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>name</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
-     <td><code>path</code></td> 
+    </tr>
+    <tr>
+     <td><code>path</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>type</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-    <tr> 
+    </tr>
+    <tr>
      <td><code>synchronizable</code></td>
      <td>No</td>
      <td>No</td>
-    </tr> 
-   </tbody> 
-  </table> 
-  
+    </tr>
+   </tbody>
+  </table>
+
 <div class="note">
        <strong>Note</strong>
        The <code>FULLSTRING</code> value of the <code>FilterMatchFlag</code> enumerator (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#FilterMatchFlag">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#FilterMatchFlag">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#FilterMatchFlag">TV</a> applications) is not supported and returns an error callback.
-</div> 
- 
+</div>
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/data/file_archiving_w.htm b/org.tizen.guides/html/web/data/file_archiving_w.htm
index 46da7bc..3e097c6 100644 (file)
--- a/org.tizen.guides/html/web/data/file_archiving_w.htm
+++ b/org.tizen.guides/html/web/data/file_archiving_w.htm
@@ -36,24 +36,24 @@
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">Archive API for Mobile Web</a></li>      
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">Archive API for Mobile Web</a></li>
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html">Archive API for Wearable Web</a></li>
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html">Archive API for TV Web</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/web/Storage/Archive_Manager" target="_blank">Archive Manager Sample Description</a></li>                    
+                       <li><a href="https://developer.tizen.org/development/sample/web/Storage/Archive_Manager" target="_blank">Archive Manager Sample Description</a></li>
         </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>File Archiving</h1>
-  
+
   <p>Tizen enables you to operate on the zip archive files.</p>
-  
-<p>The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
+
+<p>The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 
   <p>The main features of the Archive API include:</p>
   <ul>
-   <li>Accessing archive content 
+   <li>Accessing archive content
    <p>You can <a href="#read">read the content of an archive file</a>.</p></li>
     <li>Creating new archives
        <p>You can <a href="#create">create archive files and add files into them</a>.</p> </li>
@@ -101,8 +101,8 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the Archive API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/filesystem.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/filesystem.write"/&gt;
 </pre>
 
 <h2 id="read" name="read">Reading the Content of an Archive</h2>
@@ -115,10 +115,10 @@
 var myArchive = null;
 function openSuccess(arch)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;ArchiveFile mode: &quot; + arch.mode);
-&nbsp;&nbsp;&nbsp;myArchive = arch;
+   console.log("ArchiveFile mode: " + arch.mode);
+   myArchive = arch;
 }
-tizen.archive.open(&quot;downloads/archive.zip&quot;, &quot;r&quot;, openSuccess);
+tizen.archive.open("downloads/archive.zip", "r", openSuccess);
 </pre></li>
 
 <li> <p>Get the list of all files contained inside the archive using the <code>getEntries()</code> method of the <code>ArchiveFile</code> interface.</p>
@@ -126,17 +126,17 @@ tizen.archive.open(&quot;downloads/archive.zip&quot;, &quot;r&quot;, openSuccess
 <pre class="prettyprint">
 function listSuccess(members)
 {
-&nbsp;&nbsp;&nbsp;if (members.length === 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The archive is empty&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;console.log(&quot;Files in the archive:&quot;)
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; members.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(members[i].name);
-&nbsp;&nbsp;&nbsp;}
+   if (members.length === 0)
+   {
+      console.log("The archive is empty");
+
+      return;
+   }
+   console.log("Files in the archive:")
+   for (var i = 0; i &lt; members.length; i++)
+   {
+      console.log(members[i].name);
+   }
 }
 myArchive.getEntries(listSuccess);
 </pre>
@@ -157,7 +157,7 @@ archive.close();
 <li><p>To create the archive file, use the <code>open()</code> method of the <code>ArchiveManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#ArchiveManager">TV</a> applications) and set the mode as <code>w</code>:</p>
 
 <pre class="prettyprint">
-tizen.archive.open(&quot;downloads/new_archive.zip&quot;, &quot;w&quot;, createSuccess);
+tizen.archive.open("downloads/new_archive.zip", "w", createSuccess);
 </pre>
 </li>
 
@@ -167,30 +167,30 @@ tizen.archive.open(&quot;downloads/new_archive.zip&quot;, &quot;w&quot;, createS
 <pre class="prettyprint">
 function progressCallback(opId, val, name)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;opId: &quot; + opId + &quot; with progress val: &quot; + (val * 100).toFixed(0) + &quot;%&quot;);
+   console.log("opId: " + opId + " with progress val: " + (val * 100).toFixed(0) + "%");
 }
 function successCallback()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;File added&quot;);
+   console.log("File added");
 }
 function createSuccess(archive)
 {
-&nbsp;&nbsp;&nbsp;archive.add(&quot;downloads/file.txt&quot;, successCallback, null, progressCallback);
+   archive.add("downloads/file.txt", successCallback, null, progressCallback);
 }
 </pre>
 </li>
 </ol>
-           
+
 <h2 id="extract" name="extract">Extracting Files from an Archive</h2>
 
 <p>Extracting a file from an archive is a basic archive management skill:</p>
 
 <ol>
 <li>
-<p>To access an archive file, use the <code>open()</code> method of the <code>ArchiveManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#ArchiveManager">TV</a> applications). The &quot;r&quot; mode is suitable for extracting from the archive.</p>
+<p>To access an archive file, use the <code>open()</code> method of the <code>ArchiveManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#ArchiveManager">TV</a> applications). The "r" mode is suitable for extracting from the archive.</p>
 
 <pre class="prettyprint">
-tizen.archive.open(&quot;downloads/some_archive.zip&quot;, &quot;r&quot;, openSuccess, openError);
+tizen.archive.open("downloads/some_archive.zip", "r", openSuccess, openError);
 </pre>
 </li>
 
@@ -202,13 +202,13 @@ tizen.archive.open(&quot;downloads/some_archive.zip&quot;, &quot;r&quot;, openSu
 <pre class="prettyprint">
 function progressCallback(opId, val, name)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;extracting operation (: &quot; + opId + &quot;) is in progress (&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (val * 100).toFixed(1) + &quot;%)&quot;);
+   console.log("extracting operation (: " + opId + ") is in progress ("
+               + (val * 100).toFixed(1) + "%)");
 }
 
 function openSuccess(archive)
 {
-&nbsp;&nbsp;&nbsp;archive.extractAll(&quot;music&quot;, null, null, progressCallback);
+   archive.extractAll("music", null, null, progressCallback);
 }
 </pre>
 </li>
@@ -219,22 +219,22 @@ function openSuccess(archive)
 <pre class="prettyprint">
 function extractSuccessCallback()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;File extracted&quot;);
+   console.log("File extracted");
 }
 function getEntrySuccess(entry)
 {
-&nbsp;&nbsp;&nbsp;entry.extract(&quot;downloads/extract&quot;, extractSuccessCallback);
+   entry.extract("downloads/extract", extractSuccessCallback);
 }
 
 function openSuccess(archive)
 {
-&nbsp;&nbsp;&nbsp;archive.getEntryByName(&quot;my_file.txt&quot;, getEntrySuccess);
+   archive.getEntryByName("my_file.txt", getEntrySuccess);
 }
 </pre>
 </li>
 </ul>
 </li>
-</ol> 
+</ol>
 
 <h2 id="abort">Aborting File Operations</h2>
 
@@ -245,11 +245,11 @@ function openSuccess(archive)
 <pre class="prettyprint">
 function openSuccess(archive)
 {
-&nbsp;&nbsp;&nbsp;operationId = archive.extractAll(&quot;downloads/extracted&quot;);
-&nbsp;&nbsp;&nbsp;tizen.archive.abort(operationId);
+   operationId = archive.extractAll("downloads/extracted");
+   tizen.archive.abort(operationId);
 }
 
-tizen.archive.open(&quot;downloads/some_archive.zip&quot;, &quot;r&quot;, openSuccess);
+tizen.archive.open("downloads/some_archive.zip", "r", openSuccess);
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/data/file_system_w.htm b/org.tizen.guides/html/web/data/file_system_w.htm
index 717d368..a796518 100644 (file)
--- a/org.tizen.guides/html/web/data/file_system_w.htm
+++ b/org.tizen.guides/html/web/data/file_system_w.htm
@@ -52,19 +52,19 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>File System</h1>
- 
+
   <p>Tizen enables you to <a href="#access">access the files and directories</a> in the device file system.</p>
-  
-<p>The Filesystem API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
 
-  <p>The Filesystem API provides access to accessible parts of the file system, which are represented as <a href="#roots">virtual root locations</a>.</p> 
+<p>The Filesystem API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
+
+  <p>The Filesystem API provides access to accessible parts of the file system, which are represented as <a href="#roots">virtual root locations</a>.</p>
 
   <p>The main features of the Filesystem API include:</p>
   <ul>
-   <li>File storage management 
+   <li>File storage management
    <p>You can <a href="#manage">manage different storages</a> on the device and retrieve additional information about the storages, including listing available storages and receiving storage change notifications.</p>
    </li>
-   <li>Files and directory management 
+   <li>Files and directory management
    <p>You can <a href="#file_dir">perform basic file and directory management tasks</a> using the <code>File</code> interface: </p>
     <ul>
      <li>You can <a href="#create">create files and directories</a> in the file system.</li>
@@ -78,7 +78,7 @@
 <p>For a practical example of managing files in your application, see the <a href="task_filemanager_w.htm">File Manager</a> sample task.</p>
 
 <h2 id="access">File and Directory Access</h2>
-<p>You can access the virtual file system using the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications):</p> 
+<p>You can access the virtual file system using the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications):</p>
 
 <ul>
 <li>To access a file or directory within the virtual file system, you must use the fully qualified path, <code>&lt;root name&gt;/&lt;path&gt;</code>, where <code>&lt;rootname&gt;</code> is the name of the virtual root and <code>&lt;path&gt;</code> is the relative path to the file or directory within the root.
@@ -86,7 +86,7 @@
 <div class="note">
        <strong>Note</strong>
        When you use a path to access the device file system, make sure that the file path encoding uses the default encoding of the platform.
-</div> 
+</div>
 </li>
 <li>To access a file or directory, you must also retrieve a file handle using the <code>resolve()</code> method of the <code>FileSystemManager</code> interface.
 <p>A file handle is a reference object that points to and represents a file or directory.</p></li>
@@ -97,27 +97,27 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/filesystem.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/filesystem.write"/&gt;
 </pre>
 
 <h2 id="manage" name="manage">Managing File Storages</h2>
-<p>You can manage different storages on the device with the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications).</p> 
+<p>You can manage different storages on the device with the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications).</p>
 <p>You can retrieve additional information about the storages, including listing available storages and receiving storage change notifications with the <code>listStorages()</code> and <code>addStorageStateChangeListener()</code> methods provided by the <code>FileSystemManager</code> interface.</p>
-<p>To manage file storages:</p> 
-<ol> 
+<p>To manage file storages:</p>
+<ol>
    <li><p>To list available storages, use the <code>listStorages()</code> method of the <code>FileSystemManager</code> interface to search for the storages available on the device.</p> <p>If the search is successful, a list of found <code>FileSystemStorage</code> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemStorage">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemStorage">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemStorage">TV</a> applications) is passed to the success event handler.</p>
 <pre class="prettyprint">
 /* Success event handler */
 function checkCorruptedRemovableDrives(storages)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; storages.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (storages[i].type != &quot;EXTERNAL&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (storages[i].state == &quot;UNMOUNTABLE&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;External drive &quot; + storages[i].label + &quot; is corrupted.&quot;);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; storages.length; i++)
+   {
+      if (storages[i].type != "EXTERNAL")
+         continue;
+      if (storages[i].state == "UNMOUNTABLE")
+         console.log("External drive " + storages[i].label + " is corrupted.");
+   }
 }
 
 /* Search for the storages */
@@ -128,11 +128,11 @@ tizen.filesystem.listStorages(checkCorruptedRemovableDrives);
 /* Success event handler */
 function onStorage(storage)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Storage found:&quot; + storage.label);
+   console.log("Storage found:" + storage.label);
 }
 
 /* Retrieve a storage */
-tizen.filesystem.getStorage(&quot;music&quot;, onStorage);
+tizen.filesystem.getStorage("music", onStorage);
 </pre></li>
    <li><p>To receive notifications on the storage state changes, for example, additions and removals, register an event handler with the <code>addStorageStateChangeListener()</code> method.</p> <p>An event is generated each time the storage state changes.</p>
 <pre class="prettyprint">
@@ -141,8 +141,8 @@ var watchID;
 /* Define the event handler */
 function onStorageStateChanged(storage)
 {
-&nbsp;&nbsp;&nbsp;if (storage.state == &quot;MOUNTED&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Storage &quot; + storage.label + &quot; was added!&quot;);
+   if (storage.state == "MOUNTED")
+      console.log("Storage " + storage.label + " was added!");
 }
 
 /* Register the event handler */
@@ -152,39 +152,39 @@ watchID = tizen.filesystem.addStorageStateChangeListener(onStorageStateChanged);
 <pre class="prettyprint">
 tizen.filesystem.removeStorageStateChangeListener(watchID);
 </pre></li>
-  </ol> 
-  
+  </ol>
+
 <h2 id="create" name="create">Creating and Deleting Files and Directories</h2>
-<p>You can create files and directories using the <code>createFile()</code> and <code>createDirectory()</code> methods. The file or directory is created relative to the current directory that the operation is performed on.</p> 
+<p>You can create files and directories using the <code>createFile()</code> and <code>createDirectory()</code> methods. The file or directory is created relative to the current directory that the operation is performed on.</p>
 
 <div class="note">
        <strong>Note</strong>
-       Do not use &quot;.&quot; or &quot;..&quot; characters in the directory or file path components.
+       Do not use "." or ".." characters in the directory or file path components.
 </div>
 
 <p>To create and delete files and directories:</p>
-  <ol> 
+  <ol>
    <li><p>To create a file in the current directory, use the <code>createFile()</code> method of the <code>File</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#File">TV</a> applications):</p>
 <pre class="prettyprint">
 var documentsDir, newFile;
-tizen.filesystem.resolve(&quot;documents&quot;, function(result)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;documentsDir = result;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newFile = documentsDir.createFile(&quot;newFilePath&quot;);
-&nbsp;&nbsp;&nbsp;});
+tizen.filesystem.resolve("documents", function(result)
+   {
+      documentsDir = result;
+      newFile = documentsDir.createFile("newFilePath");
+   });
 </pre></li>
 
    <li><p>To create a directory within the file system, use the <code>createDirectory()</code> method.</p> <p>The directory (and any sub-directories defined in the method parameter) is created relative to the current directory where the operation is performed on.</p>
 <pre class="prettyprint">
-var newDir = documentsDir.createDirectory(&quot;newDir&quot;);
-var anotherNewDir = documentsDir.createDirectory(&quot;newDir1/subNewDir1&quot;);
+var newDir = documentsDir.createDirectory("newDir");
+var anotherNewDir = documentsDir.createDirectory("newDir1/subNewDir1");
 </pre></li>
 
    <li><p>To delete a file, use the <code>deleteFile()</code> method:</p>
 <pre class="prettyprint">
 function onDelete()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;deletedFile() is successfully done.&quot;);
+   console.log("deletedFile() is successfully done.");
 }
 
 documentsDir.deleteFile(newFile.fullPath, onDelete);
@@ -194,51 +194,51 @@ documentsDir.deleteFile(newFile.fullPath, onDelete);
 documentsDir.deleteDirectory(newDir.fullPath, false, onDelete);
 anotherNewDir.parent.deleteDirectory(anotherNewDir.fullPath, false, onDelete);
 </pre></li>
-  </ol> 
-  
+  </ol>
+
 <h2 id="retrieve" name="retrieve">Retrieving Files and File Details</h2>
 <p>You can retrieve a list of files or file URIs using the <code>listFiles()</code> and <code>toURI()</code> methods. The URI can be used to identify the file, for example, by using it as the <code>src</code> attribute on an HTML <code>img</code> element. </p>
-<p>You can retrieve file content as a <code>DOMString</code> with the <code>readAsText()</code> method. The encoding input parameter of the method defines the format in which the file content is returned.</p> 
-<p>To get files and file details from the file system:</p> 
-  <ol> 
+<p>You can retrieve file content as a <code>DOMString</code> with the <code>readAsText()</code> method. The encoding input parameter of the method defines the format in which the file content is returned.</p>
+<p>To get files and file details from the file system:</p>
+  <ol>
    <li><p>To access a specific file or directory within the file system, retrieve a file handle using the <code>resolve()</code> method of the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications):</p>
 <pre class="prettyprint">
-tizen.filesystem.resolve(&#39;documents&#39;, onResolveSuccess, null, &#39;r&#39;);
+tizen.filesystem.resolve('documents', onResolveSuccess, null, 'r');
 </pre>
-<p>The <code>File</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#File">TV</a> applications) is returned in the success event handler.</p> </li> 
+<p>The <code>File</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#File">TV</a> applications) is returned in the success event handler.</p> </li>
    <li>To retrieve a list of all the files and their directories located in a specified directory, use the <code>listFiles()</code> method of the <code>File</code> object:
 <pre class="prettyprint">
 function onResolveSuccess(dir)
 {
-&nbsp;&nbsp;&nbsp;dir.listFiles(onsuccess);
+   dir.listFiles(onsuccess);
 }
 </pre>
-<p>The method returns an array of <code>File</code> objects.</p> </li> 
+<p>The method returns an array of <code>File</code> objects.</p> </li>
    <li><p>To retrieve the file URI, use the <code>toURI()</code> method:</p>
 <pre class="prettyprint">
 function onsuccess(files)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; files.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display the file name and URI */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;File name is &quot; + files[i].name + &quot;, URI is &quot; + files[i].toURI());
+   for (var i = 0; i &lt; files.length; i++)
+   {
+      /* Display the file name and URI */
+      console.log("File name is " + files[i].name + ", URI is " + files[i].toURI());
 </pre></li>
    <li><p>To retrieve the file content as a DOMString, use the <code>readAsText()</code> method. </p><p>The encoding input parameter of the method defines the format in which the file content is returned.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (files[i].isDirectory == false)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files[i].readAsText(function(str)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;File content: &quot; + str);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, null, &quot;UTF-8&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+      if (files[i].isDirectory == false)
+      {
+         files[i].readAsText(function(str)
+            {
+               console.log("File content: " + str);
+            }, null, "UTF-8");
+      }
+   }
 }
 </pre></li>
-  </ol> 
-  
+  </ol>
+
  <h2 id="file_dir" name="file_dir">Managing Files and Directories</h2>
- 
+
 <p>YTou can manage files and directories in many ways:</p>
 <ul>
 <li>You can read and write to a file by first using the <code>openStream()</code> method to open the file. You can specify the file mode and encoding.
@@ -253,38 +253,38 @@ function onsuccess(files)
 </div>
 </li>
 </ul>
-  <p>To read and write to files, and move and copy files and directories:</p> 
-  <ol> 
+  <p>To read and write to files, and move and copy files and directories:</p>
+  <ol>
    <li><p>To open a file, use the <code>openStream()</code> method of the <code>File</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#File">TV</a> applications).</p> <p>The method returns a <code>FileStream</code> object, which is a handle to the opened file. </p>
 <pre class="prettyprint">
 var documentsDir;
 
-tizen.filesystem.resolve(&quot;documents&quot;, function(result)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;documentsDir = result;
-&nbsp;&nbsp;&nbsp;});
+tizen.filesystem.resolve("documents", function(result)
+   {
+      documentsDir = result;
+   });
 
-var testFile = documentsDir.createFile(&quot;test.txt&quot;);
+var testFile = documentsDir.createFile("test.txt");
 if (testFile != null)
 {
-&nbsp;&nbsp;&nbsp;testFile.openStream(&quot;rw&quot;, onOpenSuccess, null, &quot;UTF-8&quot;);
+   testFile.openStream("rw", onOpenSuccess, null, "UTF-8");
 }
 </pre></li>
 <li>Perform all actual operations, such as reading, writing, or closing, on the file through the <code>FileStream</code> object based on a position attribute, which represents the current position in the file:
 <pre class="prettyprint">
 function onOpenSuccess(fs)
 {
-&nbsp;&nbsp;&nbsp;/* Write HelloWorld to the file */
-&nbsp;&nbsp;&nbsp;fs.write(&quot;HelloWorld&quot;);
+   /* Write HelloWorld to the file */
+   fs.write("HelloWorld");
 
-&nbsp;&nbsp;&nbsp;/* Move pointer to the beginning */
-&nbsp;&nbsp;&nbsp;fs.position = 0;
+   /* Move pointer to the beginning */
+   fs.position = 0;
 
-&nbsp;&nbsp;&nbsp;/* Read the file content from the beginning */
-&nbsp;&nbsp;&nbsp;fs.read(testFile.fileSize);
+   /* Read the file content from the beginning */
+   fs.read(testFile.fileSize);
 
-&nbsp;&nbsp;&nbsp;/* Close the file */
-&nbsp;&nbsp;&nbsp;fs.close();
+   /* Close the file */
+   fs.close();
 }
 </pre></li>
    <li><p>To copy a file or directory, use the <code>copyTo()</code> method. The following example copies the files to the <code>images/backup/</code> directory. Since the third parameter is set to <code>true</code>, any existing files with the same name in the target directory are overwritten.</p>
@@ -292,13 +292,13 @@ function onOpenSuccess(fs)
 var files; /* Assume that this is an array of File objects */
 function onSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;success&quot;);
+   console.log("success");
 }
 
 for (var i = 0; i &lt; files.length; i++)
 {
-&nbsp;&nbsp;&nbsp;documentsDir.copyTo(files[i].fullPath, &quot;images/backup/&quot;+files[i].name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true, onSuccess);
+   documentsDir.copyTo(files[i].fullPath, "images/backup/"+files[i].name,
+                       true, onSuccess);
 }
 </pre></li>
    <li><p>To move a file or directory, use the <code>moveTo()</code> method. The following example moves the files to the <code>images/newFolder/</code> directory. Since the third parameter is set to <code>false</code>, no existing files with the same name in the target directory are overwritten.</p>
@@ -307,8 +307,8 @@ var files; /* Assume that this is an array of File objects */
 
 for (var i = 0; i &lt; files.length; i++)
 {
-&nbsp;&nbsp;&nbsp;documentsDir.moveTo(files[i].fullPath, &quot;images/newFolder/&quot;+files[i].name,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false, onSuccess);
+   documentsDir.moveTo(files[i].fullPath, "images/newFolder/"+files[i].name,
+                       false, onSuccess);
 }
 </pre></li>
   </ol>
@@ -365,7 +365,7 @@ for (var i = 0; i &lt; files.length; i++)
     </tr>
    </tbody>
   </table>
-  
+
 
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/data/stored_content_w.htm b/org.tizen.guides/html/web/data/stored_content_w.htm
index 91b6e07..a4ebde6 100644 (file)
--- a/org.tizen.guides/html/web/data/stored_content_w.htm
+++ b/org.tizen.guides/html/web/data/stored_content_w.htm
@@ -61,16 +61,16 @@
 <h1>Stored Content Management</h1>
 
 <p>Tizen enables you to search for content (images, videos, music or other) located on the local device storage. You can also perform content management tasks, such as viewing and updating content attributes.</p>
-  
-<p>The Content API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
-  
+
+<p>The Content API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
+
   <p>The main features of Content API include:</p>
   <ul>
-   <li>Content retrieval 
+   <li>Content retrieval
    <p>You can <a href="#browse">browse and search for content directories and content items</a>.</p></li>
-   <li>Content management 
+   <li>Content management
    <p>You can <a href="#manage">view and edit content item details</a>. The details are common file information and metadata attributes of the media file.</p></li>
-   <li>Content change notifications 
+   <li>Content change notifications
    <p>You can keep the content in your application synchronized with an external content manager by <a href="#receive">receiving notifications</a> in your application when the content changes.</p></li>
    <li>Playlist management
    <p>Using the <code>Playlist</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#Playlist">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#Playlist">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#Playlist">TV</a> applications), you can:</p>
@@ -86,22 +86,22 @@
   </ul>
 
 <p>The Content API uses the same <code>ContentManager</code> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications) for all content-related functionalities. The instance provides higher efficiency by performing batch operations on content items.</p>
-  
+
 <div class="note">
        <strong>Note</strong>
        The batch mode does not provide progress information about operations. To ensure that you can view the progress, break the batch operation down into multiple smaller batch operations. For example, break down a batch of 100 update requests into 10 batch operations that update 10 records at a time. Breaking down a batch operation also helps you avoid blocking other database operations, such as add or remove.
 </div>
-  
+
 <p>For a practical example of browsing and managing the media directories in your application, see the <a href="task_mediacontent_w.htm">Media Content</a> sample task.</p>
 
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the Content API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/content.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/content.write"/&gt;
 </pre>
 
-     
+
  <h2 id="browse" name="browse">Browsing Content</h2>
 
    <p>You can browse and search for content directories and content using the <code>getDirectories()</code> and <code>find()</code> methods of the <code>ContentManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications). When searching for content items, you can create <a href="data_filter_w.htm#filter">attribute filters</a>, <a href="data_filter_w.htm#range">attribute range filters</a>, and <a href="data_filter_w.htm#composite">composite filters</a> based on <a href="data_filter_w.htm#content_filter">specific filter attributes</a> of the <code>ContentManager</code> interface. You can also <a href="data_filter_w.htm#use_modes">sort the search results</a>.</p>
@@ -116,10 +116,10 @@ var manager = tizen.content;
 <pre class="prettyprint">
 function onDirectoryArraySuccess(directories)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; directories.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve folder-specific information */
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; directories.length; i++)
+   {
+      /* Retrieve folder-specific information */
+   }
 }
 
 manager.getDirectories(onDirectoryArraySuccess);
@@ -128,23 +128,23 @@ manager.getDirectories(onDirectoryArraySuccess);
 <pre class="prettyprint">
 function onContentItemArraySuccess(contents)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; contents.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(i + &quot;:&quot; + contents[i].type + &quot;:&quot; + contents[i].title
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;:&quot; + contents[i].mimeType);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; contents.length; i++)
+   {
+      console.log(i + ":" + contents[i].type + ":" + contents[i].title
+                  + ":" + contents[i].mimeType);
+   }
 }
 
-var contentType = &quot;VIDEO&quot;;
-var filter = new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, contentType);
+var contentType = "VIDEO";
+var filter = new tizen.AttributeFilter("type", "EXACTLY", contentType);
 manager.find(onContentItemArraySuccess, null, null, filter);
 </pre>
 
 <p>In the <code>find()</code> method in the above example, the directory ID parameter is set to <code>null</code> (which means that all directories are searched), the filter retrieves all content items whose type is <code>VIDEO</code>, and no sorting order is defined (which means that the default sorting order is used).</p></li>
   </ol>
-  
+
  <h2 id="manage" name="manage">Managing Content</h2>
- 
+
 <p>You can manage content in many ways:</p>
 <ul>
 <li>You can view content item details with the <code>find()</code> method.</li>
@@ -160,39 +160,39 @@ manager.find(onContentItemArraySuccess, null, null, filter);
 
 <p>To view and update content details:</p>
   <ol>
-   <li><p>Retrieve the <code>ContentManager</code> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications) using the <code>tizen</code> global object, and search for the item whose details you want to update.</p> <p>In the following example, the item whose title is <code>image7.jpg</code> is retrieved.</p> 
+   <li><p>Retrieve the <code>ContentManager</code> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications) using the <code>tizen</code> global object, and search for the item whose details you want to update.</p> <p>In the following example, the item whose title is <code>image7.jpg</code> is retrieved.</p>
 <pre class="prettyprint">
 var manager = tizen.content;
 
-var filter = new tizen.AttributeFilter(&quot;title&quot;, &quot;EXACTLY&quot;, &quot;image7.jpg&quot;);
+var filter = new tizen.AttributeFilter("title", "EXACTLY", "image7.jpg");
 manager.find(onMediaItemArraySuccess, null, null, filter);
 </pre></li>
    <li>In the success event handler of the <code>find()</code> method, view the content item details by displaying them in the console log:
 <pre class="prettyprint">
 function onMediaItemArraySuccess(item)
 {
-&nbsp;&nbsp;&nbsp;if (items.length &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(items[0].type + &quot;: &quot; + items[0].title + &quot;: &quot; + items[0].mimeType);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;geolocation-latitude: &quot; + items[0].geolocation.latitude +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot; longitude:&quot; + items[0].geolocation.longitude);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;update(items[0]);
-&nbsp;&nbsp;&nbsp;}
+   if (items.length &gt; 0)
+   {
+      console.log(items[0].type + ": " + items[0].title + ": " + items[0].mimeType);
+      console.log("geolocation-latitude: " + items[0].geolocation.latitude +
+                  " longitude:" + items[0].geolocation.longitude);
+      update(items[0]);
+   }
 }
 </pre></li>
    <li><p>To update the editable attributes of the content item, use the <code>update()</code> method. In the example below, the rating of the content item is increased.</p>
 <pre class="prettyprint">
 function update(item)
 {
-&nbsp;&nbsp;&nbsp;/* Checks whether the attribute is editable */
-&nbsp;&nbsp;&nbsp;if (item.editableAttributes.indexOf(&quot;rating&quot;) &gt;= 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Changes an attribute */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item.rating = 1;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Updates the item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;manager.update(item);
-&nbsp;&nbsp;&nbsp;}
+   /* Checks whether the attribute is editable */
+   if (item.editableAttributes.indexOf("rating") &gt;= 0)
+   {
+      /* Changes an attribute */
+      item.rating = 1;
+
+      /* Updates the item */
+      manager.update(item);
+   }
 }
 </pre></li>
    <li><p>To scan for the content item file, use the <code>scanFile()</code> method. Because scanning is not performed automatically when the content file is copied or moved, call the <code>scanFile()</code> method to find the file.</p>
@@ -200,34 +200,34 @@ function update(item)
 /* Assume the images/photo.jpg is copied to the device */
 function onScanSuccessCallback(path)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Scanning completed:&quot; + path);
+   console.log("Scanning completed:" + path);
 };
 
-tizen.filesystem.resolve(&quot;images/photo.jpg&quot;, function(file)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.content.scanFile(file.toURI(), onScanSuccessCallback);
-&nbsp;&nbsp;&nbsp;});
+tizen.filesystem.resolve("images/photo.jpg", function(file)
+   {
+      tizen.content.scanFile(file.toURI(), onScanSuccessCallback);
+   });
 </pre></li>
 <li><p>To create a thumbnail for a content item, use the <code>createThumbnail()</code> method:</p>
 <pre class="prettyprint">
 function createCB(path)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;A path of a just created thumbnail is &quot; + path);
+   console.log("A path of a just created thumbnail is " + path);
 }
 
 function findCB(contents)
 {
-&nbsp;&nbsp;&nbsp;if (contents.length &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.content.createThumbnail(contents[0], createCB);
-&nbsp;&nbsp;&nbsp;}
+   if (contents.length &gt; 0)
+   {
+      tizen.content.createThumbnail(contents[0], createCB);
+   }
 }
 
 tizen.content.find(findCB);
 </pre>
 </li>
   </ol>
- 
+
  <h2 id="receive" name="receive">Receiving Notifications on Content Changes</h2>
 <p>You can receive notifications when a content item is added, updated, or deleted. The <code>setChangeListener()</code> method of the <code>ContentManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications) registers a change listener. You can use the <code>ContentChangeCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentChangeCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentChangeCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentChangeCallback">TV</a> applications) to define listener event handlers for receiving the notifications.</p>
 
@@ -237,23 +237,23 @@ tizen.content.find(findCB);
 <pre class="prettyprint">
 var listener =
 {
-&nbsp;&nbsp;&nbsp;/* When new items are added */
-&nbsp;&nbsp;&nbsp;oncontentadded: function(content)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(content.contentURI + &quot; content was added&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When items are updated */
-&nbsp;&nbsp;&nbsp;oncontentupdated: function(content)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(content.contentURI + &quot; content was updated&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When items are deleted */
-&nbsp;&nbsp;&nbsp;oncontentremoved: function(id)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(id + &quot; was removed&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* When new items are added */
+   oncontentadded: function(content)
+   {
+      console.log(content.contentURI + " content was added");
+   },
+
+   /* When items are updated */
+   oncontentupdated: function(content)
+   {
+      console.log(content.contentURI + " content was updated");
+   },
+
+   /* When items are deleted */
+   oncontentremoved: function(id)
+   {
+      console.log(id + " was removed");
+   }
 };
 </pre></li>
    <li><p>Register the listener to use the defined event handlers:</p>
@@ -276,10 +276,10 @@ tizen.content.removeChangeListener(listenerId);
 <pre class="prettyprint">
 function createSuccess(playlist)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;create SUCCESS&quot;);
+   console.log("create SUCCESS");
 }
 
-tizen.content.createPlaylist(&quot;My new playlist&quot;, createSuccess);
+tizen.content.createPlaylist("My new playlist", createSuccess);
 </pre></li>
 
 <li>To create a new playlist based on an existing one (basically copy the existing playlist content to a new playlist), use the <code>createPlaylist()</code> method, passing the source playlist as a parameter:
@@ -287,19 +287,19 @@ tizen.content.createPlaylist(&quot;My new playlist&quot;, createSuccess);
 <pre class="prettyprint">
 function createSuccess(playlist)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;create SUCCESS&quot;);
+   console.log("create SUCCESS");
 }
 
 tizen.content.getPlaylists(function(playlists)
 {
-&nbsp;&nbsp;&nbsp;var existingPlaylist = playlists[0];
-&nbsp;&nbsp;&nbsp;tizen.content.createPlaylist(&quot;My new playlist&quot;, createSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, existingPlaylist);
+   var existingPlaylist = playlists[0];
+   tizen.content.createPlaylist("My new playlist", createSuccess,
+                                null, existingPlaylist);
 });
 </pre>
 </li>
 </ul>
-          
+
                 <h2 id="manage_p" name="manage_p">Managing Playlists</h2>
 
 <p>Learning how to retrieve and remove playlists is a basic playlist management skill:</p>
@@ -310,12 +310,12 @@ tizen.content.getPlaylists(function(playlists)
 <pre class="prettyprint">
 function getPlaylistsSuccess(playlists)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; playlists.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var cur = playlists[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;[&quot; + i + &quot;] name:&quot; + cur.name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; number of tracks:&quot; + cur.numberOfTracks);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; playlists.length; i++)
+   {
+      var cur = playlists[i];
+      console.log("[" + i + "] name:" + cur.name
+                  + " number of tracks:" + cur.numberOfTracks);
+   }
 }
 tizen.content.getPlaylists(getPlaylistsSuccess);
 </pre></li>
@@ -325,18 +325,18 @@ tizen.content.getPlaylists(getPlaylistsSuccess);
 <pre class="prettyprint">
 function removePlaylistSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;removePlaylist() is successfully done.&quot;);
+   console.log("removePlaylist() is successfully done.");
 }
 
 tizen.content.getPlaylists(function(playlists)
 {
-&nbsp;&nbsp;&nbsp;var myPlaylist = playlists[0];
-&nbsp;&nbsp;&nbsp;tizen.content.removePlaylist(myPlaylist.id, removePlaylistSuccess);
+   var myPlaylist = playlists[0];
+   tizen.content.removePlaylist(myPlaylist.id, removePlaylistSuccess);
 });
 </pre></li>
 
 </ul>
-     
+
                 <h2 id="items" name="items">Managing Playlist Items</h2>
 
 <p>Learning how to manage list items is a basic playlist management skill:</p>
@@ -353,9 +353,9 @@ var myPlaylist;
 
 tizen.content.getPlaylists(function(playlists)
 {
-&nbsp;&nbsp;&nbsp;myPlaylist = playlists[0];
-&nbsp;&nbsp;&nbsp;tizen.content.find(findSuccess, null, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, &quot;AUDIO&quot;));
+   myPlaylist = playlists[0];
+   tizen.content.find(findSuccess, null, null,
+                      new tizen.AttributeFilter("type", "EXACTLY", "AUDIO"));
 });
 </pre></li>
 
@@ -364,14 +364,14 @@ tizen.content.getPlaylists(function(playlists)
 <pre class="prettyprint">
 function findSuccess(contents)
 {
-&nbsp;&nbsp;&nbsp;if (contents.length &gt;= 3)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myPlaylist.addBatch([contents[0], contents[1], contents[2]]);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Not enough items. Need at least 3&quot;);
-&nbsp;&nbsp;&nbsp;}
+   if (contents.length &gt;= 3)
+   {
+      myPlaylist.addBatch([contents[0], contents[1], contents[2]]);
+   }
+   else
+   {
+      console.log("Not enough items. Need at least 3");
+   }
 }
 </pre></li>
 
@@ -380,10 +380,10 @@ function findSuccess(contents)
 <pre class="prettyprint">
 function findSuccess(contents)
 {
-&nbsp;&nbsp;&nbsp;if (contents.length &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myPlaylist.add(contents[0]);
-&nbsp;&nbsp;&nbsp;}
+   if (contents.length &gt; 0)
+   {
+      myPlaylist.add(contents[0]);
+   }
 }
 </pre>
 </li>
@@ -393,17 +393,17 @@ function findSuccess(contents)
 <pre class="prettyprint">
 function getSuccess(items)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Playlist items:&quot;);
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; items.length; ++i)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;[&quot; + i + &quot;]: name:&quot; + items[i].name);
-&nbsp;&nbsp;&nbsp;}
+   console.log("Playlist items:");
+   for (var i = 0; i &lt; items.length; ++i)
+   {
+      console.log("[" + i + "]: name:" + items[i].name);
+   }
 }
 
 tizen.content.getPlaylists(function(playlists)
 {
-&nbsp;&nbsp;&nbsp;var myPlaylist = playlists[0];
-&nbsp;&nbsp;&nbsp;myPlaylist.get(getSuccess);
+   var myPlaylist = playlists[0];
+   myPlaylist.get(getSuccess);
 });
 </pre>
 </li>
@@ -414,13 +414,13 @@ tizen.content.getPlaylists(function(playlists)
 var myItem; /* Assume that it was retrieved using the get() method */
 function moveSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;move item SUCCESS&quot;);
+   console.log("move item SUCCESS");
 }
 
 tizen.content.getPlaylists(function(playlists)
 {
-&nbsp;&nbsp;&nbsp;var myPlaylist = playlists[0];
-&nbsp;&nbsp;&nbsp;myPlaylist.move(myItem, -2, moveSuccess);
+   var myPlaylist = playlists[0];
+   myPlaylist.move(myItem, -2, moveSuccess);
 });
 </pre>
 
@@ -445,7 +445,7 @@ newOrder.reverse();
 <pre class="prettyprint">
 function setOrderSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Set items order SUCCESS&quot;);
+   console.log("Set items order SUCCESS");
 }
 
 myPlaylist.setOrder(newOrder, setOrderSuccess);
diff --git a/org.tizen.guides/html/web/data/task_filemanager_w.htm b/org.tizen.guides/html/web/data/task_filemanager_w.htm
index bce8820..c8f31c4 100644 (file)
--- a/org.tizen.guides/html/web/data/task_filemanager_w.htm
+++ b/org.tizen.guides/html/web/data/task_filemanager_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: File Manager</title>  
+       <title>Task: File Manager</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -30,8 +30,8 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
             <li><a href="#layout">Defining the Application Layout</a></li>
-            <li><a href="#clipboard">Managing Clipboard</a></li> 
-            <li><a href="#storage">Managing Device Storage</a></li> 
+            <li><a href="#clipboard">Managing Clipboard</a></li>
+            <li><a href="#storage">Managing Device Storage</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -40,258 +40,258 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Storage/File_Manager" target="_blank">File Manager Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Task: File Manager</h1> 
-  <p>This task, based on the FileManager sample delivered with the Tizen Studio, demonstrates how you can use the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications) to manage files in your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Storage/File_Manager" target="blank">File Manager</a>.</p> 
-  <p>This task consists of the following parts:</p> 
-  <ul> 
-   <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li> 
-   <li><a href="#clipboard">Managing Clipboard</a> defines how to work with the clipboard.</li> 
-   <li><a href="#storage">Managing Device Storage</a> defines how to create, copy, move, and remove folders and files.</li> 
-  </ul> 
+  <h1>Task: File Manager</h1>
+  <p>This task, based on the FileManager sample delivered with the Tizen Studio, demonstrates how you can use the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications) to manage files in your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Storage/File_Manager" target="blank">File Manager</a>.</p>
+  <p>This task consists of the following parts:</p>
+  <ul>
+   <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
+   <li><a href="#clipboard">Managing Clipboard</a> defines how to work with the clipboard.</li>
+   <li><a href="#storage">Managing Device Storage</a> defines how to create, copy, move, and remove folders and files.</li>
+  </ul>
   <p>This sample is a fully functional application for browsing the device storage. The user can create, copy, move, and remove folders and files.</p>
-  
-  <h2 id="layout" name="layout">Defining the Application Layout</h2> 
+
+  <h2 id="layout" name="layout">Defining the Application Layout</h2>
   <p>The FileManager sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 1 screen that displays the device storage folder and file structure.</p>
-  
-<p>Additionally, the sample application layout consists of 2 UI elements: the clipboard footer controls enable you to delete, move, or copy selected folders and files, and the More pop-up window enables you to create a new folder and to paste content to a folder.</p> 
- 
-  <p>The following figure shows the main screens of the application.</p> 
-  <p align="center"><strong>Figure: FileManager screen</strong></p> 
-  <p align="center"><img alt="FileManager screen" src="../../images/filemanager.png" /></p> 
-  <h3 id="temp" name="temp">Using the Template Manager</h3> 
+
+<p>Additionally, the sample application layout consists of 2 UI elements: the clipboard footer controls enable you to delete, move, or copy selected folders and files, and the More pop-up window enables you to create a new folder and to paste content to a folder.</p>
+
+  <p>The following figure shows the main screens of the application.</p>
+  <p align="center"><strong>Figure: FileManager screen</strong></p>
+  <p align="center"><img alt="FileManager screen" src="../../images/filemanager.png" /></p>
+  <h3 id="temp" name="temp">Using the Template Manager</h3>
    <p>The template manager enables the HTML output generation to be divided into 3 parts.</p>
-  <ol> 
+  <ol>
    <li><strong>app.ui.templateManager.js Source File</strong>
-    <ol type="a"> 
+    <ol type="a">
      <li>
 <p>The template manager loads the template files into the cache.</p>
 <pre class="prettyprint">
 loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
 {
-&nbsp;&nbsp;&nbsp;var self = this,
-&nbsp;&nbsp;&nbsp;cachedTemplates = 0,
-&nbsp;&nbsp;&nbsp;tplName,
-&nbsp;&nbsp;&nbsp;tplPath;
-
-&nbsp;&nbsp;&nbsp;if ($.isArray(tplNames))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(tplNames, function(index, fileName)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (self.cache[fileName] === undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplName = [fileName, app.config.get(&#39;templateExtension&#39;)].join(&#39;&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplPath = [app.config.get(&#39;templateDir&#39;), tplName].join(&#39;/&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: tplPath,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cache: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType: &#39;html&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;async: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success: function(data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates += 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.cache[fileName] = data;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (cachedTemplates &gt;= tplNames.length
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates += 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (cachedTemplates &gt;= tplNames.length
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   var self = this,
+   cachedTemplates = 0,
+   tplName,
+   tplPath;
+
+   if ($.isArray(tplNames))
+   {
+      $.each(tplNames, function(index, fileName)
+         {
+            if (self.cache[fileName] === undefined)
+            {
+               tplName = [fileName, app.config.get('templateExtension')].join('');
+               tplPath = [app.config.get('templateDir'), tplName].join('/');
+               $.ajax(
+               {
+                  url: tplPath,
+                  cache: true,
+                  dataType: 'html',
+                  async: true,
+                  success: function(data)
+                  {
+                     cachedTemplates += 1;
+                     self.cache[fileName] = data;
+                     if (cachedTemplates &gt;= tplNames.length
+                         &amp;&amp; typeof onSuccess === 'function')
+                     {
+                        onSuccess();
+                     }
+                  },
+
+                  /* Error handling */
+               });
+            }
+            else
+            {
+               cachedTemplates += 1;
+               if (cachedTemplates &gt;= tplNames.length
+                   &amp;&amp; typeof onSuccess === 'function')
+               {
+                  onSuccess();
+               }
+            }
+         });
+   }
 }
 </pre></li>
      <li> <p>Next, the template manager returns the template HTML content from the cache.</p>
 <pre class="prettyprint">
 get: function TemplateManager_get(tplName, tplParams)
 {
-&nbsp;&nbsp;&nbsp;if (this.cache[tplName] !== undefined)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return this.getCompleted(this.cache[tplName], tplParams);
-&nbsp;&nbsp;&nbsp;}
+   if (this.cache[tplName] !== undefined)
+   {
+      return this.getCompleted(this.cache[tplName], tplParams);
+   }
 
-&nbsp;&nbsp;&nbsp;return &#39;&#39;;
+   return '';
 }
 </pre></li>
      <li><p>The <code>getCompleted()</code> method returns the completed template using the specified parameters, prepared by the <code>passThruModifiers()</code> method.</p>
 <pre class="prettyprint">
 getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 {
-&nbsp;&nbsp;&nbsp;var tplParam, replaceRegExp;
+   var tplParam, replaceRegExp;
 
-&nbsp;&nbsp;&nbsp;for (tplParam in tplParams)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tplParams.hasOwnProperty(tplParam))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+   for (tplParam in tplParams)
+   {
+      if (tplParams.hasOwnProperty(tplParam))
+      {
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplHtml = this.passThruModifiers(tplHtml, tplParam, tplParams[tplParam]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+         tplHtml = this.passThruModifiers(tplHtml, tplParam, tplParams[tplParam]);
+      }
+   }
 
-&nbsp;&nbsp;&nbsp;return tplHtml;
+   return tplHtml;
 }
 
 passThruModifiers: function(tplHtml, tplParam, content)
 {
-&nbsp;&nbsp;&nbsp;var regModOn = new RegExp(&#39;%&#39; + tplParam + &#39;\\|([a-zA-Z]){1,}%&#39;, &#39;g&#39;),
-&nbsp;&nbsp;&nbsp;regModOff = new RegExp([&#39;%&#39;, tplParam, &#39;%&#39;].join(&#39;&#39;), &#39;g&#39;),
-&nbsp;&nbsp;&nbsp;regModGet = new RegExp(&#39;%&#39; + tplParam + &#39;\\|(.+?)%&#39;),
-&nbsp;&nbsp;&nbsp;specRegExp = new RegExp(&#39;\\$&#39;, &#39;g&#39;), modifier;
-
-&nbsp;&nbsp;&nbsp;if (content &amp;&amp; (typeof content === &#39;string&#39;))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content = content.replace(specRegExp, &#39;$$$$&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;if (regModOn.test(tplHtml))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;modifier = tplHtml.match(regModGet)[1];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content = this.modifiers[modifier](content);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplHtml = tplHtml.replace(regModOn, content);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplHtml = tplHtml.replace(regModOff, content);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return tplHtml;
+   var regModOn = new RegExp('%' + tplParam + '\\|([a-zA-Z]){1,}%', 'g'),
+   regModOff = new RegExp(['%', tplParam, '%'].join(''), 'g'),
+   regModGet = new RegExp('%' + tplParam + '\\|(.+?)%'),
+   specRegExp = new RegExp('\\$', 'g'), modifier;
+
+   if (content &amp;&amp; (typeof content === 'string'))
+   {
+      content = content.replace(specRegExp, '$$$$');
+   }
+
+   if (regModOn.test(tplHtml))
+   {
+      modifier = tplHtml.match(regModGet)[1];
+      try
+      {
+         content = this.modifiers[modifier](content);
+      }
+
+      tplHtml = tplHtml.replace(regModOn, content);
+   }
+   else
+   {
+      tplHtml = tplHtml.replace(regModOff, content);
+   }
+
+   return tplHtml;
 }
 </pre></li>
-    </ol> </li> 
+    </ol> </li>
   </ol>
-  
-  <h3 id="main" name="main">Defining the Main Screen</h3> 
+
+  <h3 id="main" name="main">Defining the Main Screen</h3>
   <p>The main screen elements initialization and display functionality is implemented in the <code>app.ui.js</code> file.</p>
-  <ol> 
+  <ol>
    <li><strong>main.tpl Source File</strong>
 <p>The main screen of the application displays the device storage folder and file structure. The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
         <p>If the user navigates to another child directory, the header section displays navigation buttons - <strong>Up</strong> and <strong>Home</strong> - to move 1 directory up in the file system and to move to the root directory, respectively. In a child directory, the breadcrumb navigation from the root directory to the current directory is displayed as well.</p>
 <pre class="prettyprint lang-html">
 &lt;!--Header section--&gt;
-&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1 id=&quot;mainTitle&quot;&gt;&lt;/h1&gt;
+&lt;div data-role="header" data-position="fixed"&gt;
+   &lt;h1 id="mainTitle"&gt;&lt;/h1&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+   &lt;!--Other application code--&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;a id=&quot;homeBtn&quot;&gt;Home&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;a id=&quot;levelUpBtn&quot;&gt;Up&lt;/a&gt;
+   &lt;a id="homeBtn"&gt;Home&lt;/a&gt;
+   &lt;a id="levelUpBtn"&gt;Up&lt;/a&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+   &lt;!--Other application code--&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;navbar&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;selectAll&quot; style=&quot;display: none&quot;&gt;&lt;/div&gt;
+   &lt;div id="navbar"&gt;&lt;/div&gt;
+   &lt;div class="selectAll" style="display: none"&gt;&lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+   &lt;!--Other application code--&gt;
 
 &lt;/div&gt;
 </pre></li>
 
      <li><strong>folderRow.tpl Source File</strong>
-<p>The <code>folderRow.tpl</code> template file defines the actual content of the main screen, which is initialized in the  <code>app.ui.js</code> source file.</p> 
+<p>The <code>folderRow.tpl</code> template file defines the actual content of the main screen, which is initialized in the  <code>app.ui.js</code> source file.</p>
 <pre class="prettyprint lang-html">
 &lt;!--Content section--&gt;
-&lt;li class=&quot;node folder ui-li-1line-bigicon1&quot; id=&quot;row%id%&quot; label=&quot;%name%&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;uri=&quot;%uri|escapeEncies%&quot; fullUri=&quot;%fullUri|escapeEncies%&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;form class=&quot;my-ui-checkbox hidden&quot;&gt;&lt;input type=&quot;checkbox&quot;/&gt;&lt;/form&gt;
-&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/folder.png&quot; class=&quot;ui-li-bigicon&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-main nodename&quot;&gt;%name|escape%&lt;/span&gt;
+&lt;li class="node folder ui-li-1line-bigicon1" id="row%id%" label="%name%"
+    uri="%uri|escapeEncies%" fullUri="%fullUri|escapeEncies%"&gt;
+   &lt;form class="my-ui-checkbox hidden"&gt;&lt;input type="checkbox"/&gt;&lt;/form&gt;
+   &lt;img src="images/folder.png" class="ui-li-bigicon"/&gt;
+   &lt;span class="ui-li-text-main nodename"&gt;%name|escape%&lt;/span&gt;
 &lt;/li&gt;
 
 </pre></li>
-  </ol> 
-  
-  <h3 id="foot" name="foot">Defining the Footer Controls</h3> 
-  <ol> 
-   <li><strong>main.tpl Source File</strong> 
+  </ol>
+
+  <h3 id="foot" name="foot">Defining the Footer Controls</h3>
+  <ol>
+   <li><strong>main.tpl Source File</strong>
 <p>The footer section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with a button for enabling the clipboard functionality in the application.</p>
 
 <p>The clipboard consists of buttons for deleting, moving, and copying folders and files, and also canceling the clipboard operation. In the clipboard mode, check boxes appear next to the folders and files list in the current directory on the main screen.</p>
 <pre class="prettyprint lang-html">
-&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-myToolBar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; class=&quot;standardTabbar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;editActionBtn&quot; href=&quot;#&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
+&lt;div data-role="footer" data-position="fixed"&gt;
+   &lt;div class="ui-myToolBar"&gt;
+      &lt;div data-role="tabbar" class="standardTabbar"&gt;
+         &lt;ul&gt;
+            &lt;li&gt;&lt;a id="editActionBtn" href="#"&gt;Edit&lt;/a&gt;&lt;/li&gt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+            &lt;!--Other application code--&gt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; class=&quot;editTabbar&quot; style=&quot;display: none&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;deleteActionBtn&quot; href=&quot;#&quot;&gt;Delete&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;moveActionBtn&quot; href=&quot;#&quot;&gt;Move&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;copyActionBtn&quot; href=&quot;#&quot;&gt;Copy&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;cancelActionBtn&quot; href=&quot;#&quot;&gt;Cancel&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+      &lt;div data-role="tabbar" class="editTabbar" style="display: none"&gt;
+         &lt;ul&gt;
+            &lt;li&gt;&lt;a id="deleteActionBtn" href="#"&gt;Delete&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a id="moveActionBtn" href="#"&gt;Move&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a id="copyActionBtn" href="#"&gt;Copy&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a id="cancelActionBtn" href="#"&gt;Cancel&lt;/a&gt;&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+   &lt;!--Other application code--&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li></ol>
 
   <h3 id="popup" name="popup">Defining the Pop-up Window</h3>
-  <ol> 
-   <li><strong>main.tpl Source File</strong> 
+  <ol>
+   <li><strong>main.tpl Source File</strong>
 <p>The pop-up window consists of a jQuery pop-up menu with options for creating a new folder at the current directory location or for pasting already copied content to the current directory location.</p>
 <pre class="prettyprint lang-html">
-&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-myToolBar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; class=&quot;standardTabbar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
+&lt;div data-role="footer" data-position="fixed"&gt;
+   &lt;div class="ui-myToolBar"&gt;
+      &lt;div data-role="tabbar" class="standardTabbar"&gt;
+         &lt;ul&gt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+            &lt;!--Other application code--&gt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;moreActionBtn&quot; href=&quot;#morePopup&quot; data-rel=&quot;popup&quot;&gt;More&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a id="moreActionBtn" href="#morePopup" data-rel="popup"&gt;More&lt;/a&gt;&lt;/li&gt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+            &lt;!--Other application code--&gt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;morePopup&quot; data-role=&quot;popup&quot;>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other application code--&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+      &lt;div id="morePopup" data-role="popup">
+         &lt;!--Other application code--&gt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li></ol>
- 
-<h2 id="clipboard" name="clipboard">Managing Clipboard</h2> 
+
+<h2 id="clipboard" name="clipboard">Managing Clipboard</h2>
   <p>This section builds upon the elements described in <a href="file_system_w.htm#file_dir">Managing Files and Directories</a>.</p>
-  
+
   <h3 id="initialize" name="initialize">Initializing the Clipboard</h3>
-<p>The clipboard features definition functionality is implemented in the <code>app.clipboard.js</code> file.</p>  
-  <ol> 
+<p>The clipboard features definition functionality is implemented in the <code>app.clipboard.js</code> file.</p>
+  <ol>
    <li><strong>Retrieving Clipboard Content</strong>
    <p>The <code>get()</code> method is defined to retrieve all the filesystem paths saved currently in the clipboard.</p>
 <pre class="prettyprint">
 get: function Clipboard_get()
 {
-&nbsp;&nbsp;&nbsp;return this.data;
+   return this.data;
 }
 </pre></li>
    <li><strong>Adding New Content to the Clipboard</strong>
@@ -299,19 +299,19 @@ get: function Clipboard_get()
 <pre class="prettyprint">
 add: function Clipboard_add(paths)
 {
-&nbsp;&nbsp;&nbsp;var len = paths.length, i;
-
-&nbsp;&nbsp;&nbsp;/* Clear clipboard */
-&nbsp;&nbsp;&nbsp;this.clear();
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.has(paths[i]) === false)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.data.push(paths[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return this.data.length;
+   var len = paths.length, i;
+
+   /* Clear clipboard */
+   this.clear();
+   for (i = 0; i &lt; len; i += 1)
+   {
+      if (this.has(paths[i]) === false)
+      {
+         this.data.push(paths[i]);
+      }
+   }
+
+   return this.data.length;
 }
 </pre></li>
    <li><strong>Checking if a Path is Present in the Clipboard</strong>
@@ -319,7 +319,7 @@ add: function Clipboard_add(paths)
 <pre class="prettyprint">
 has: function Clipboard_has(path)
 {
-&nbsp;&nbsp;&nbsp;return $.inArray(path, this.data) === -1 ? false : true;
+   return $.inArray(path, this.data) === -1 ? false : true;
 }
 </pre></li>
    <li><strong>Setting the Clipboard Mode</strong>
@@ -327,13 +327,13 @@ has: function Clipboard_has(path)
 <pre class="prettyprint">
 setMode: function Clipboard_setMode(mode)
 {
-&nbsp;&nbsp;&nbsp;if ($.inArray(mode, [this.MOVE_MODE_ID, this.COPY_MODE_ID]) === false)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;this.mode = mode;
+   if ($.inArray(mode, [this.MOVE_MODE_ID, this.COPY_MODE_ID]) === false)
+   {
+      /* Error handling */
+   }
+   this.mode = mode;
 
-&nbsp;&nbsp;&nbsp;return true;
+   return true;
 }
 </pre></li>
    <li><strong>Clearing the Clipboard</strong>
@@ -341,196 +341,196 @@ setMode: function Clipboard_setMode(mode)
 <pre class="prettyprint">
 clear: function Clipboard_clear()
 {
-&nbsp;&nbsp;&nbsp;this.data = [];
-&nbsp;&nbsp;&nbsp;this.mode = this.INACTIVE_MODE;
+   this.data = [];
+   this.mode = this.INACTIVE_MODE;
 }
 </pre></li>
-  </ol> 
-  <h3 id="perform" name="perform">Performing Clipboard Operations</h3> 
- <p>The clipboard operation functionality is implemented in the <code>app.js</code> file.</p>  
-  <ol> 
+  </ol>
+  <h3 id="perform" name="perform">Performing Clipboard Operations</h3>
+ <p>The clipboard operation functionality is implemented in the <code>app.js</code> file.</p>
+  <ol>
    <li><strong>Copying Content to the Clipboard</strong>
 <p>The <code>saveToClipboard()</code> method is used to add filesystem paths to the clipboard and set the appropriate clipboard mode.</p>
 <pre class="prettyprint">
 saveToClipboard: function App_saveToClipboard(paths, mode)
 {
-&nbsp;&nbsp;&nbsp;var clipboardLength = this.clipboard.add(paths);
-
-&nbsp;&nbsp;&nbsp;if (clipboardLength &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.clipboard.setMode(mode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.ui.alertPopup(&#39;Data saved in clipboard&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.ui.clearTabbars();
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&#39;Error occurred. Data has not been saved in clipboard&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;this.ui.refreshPasteActionBtn(this.clipboard.isEmpty());
+   var clipboardLength = this.clipboard.add(paths);
+
+   if (clipboardLength &gt; 0)
+   {
+      this.clipboard.setMode(mode);
+      app.ui.alertPopup('Data saved in clipboard');
+      this.ui.clearTabbars();
+   }
+   else
+   {
+      alert('Error occurred. Data has not been saved in clipboard');
+   }
+
+   this.ui.refreshPasteActionBtn(this.clipboard.isEmpty());
 }
 </pre></li>
 
-<li><strong>Pasting Content from the Clipboard</strong> 
-   <ol type="a"><li><p>The <code>pasteClipboard()</code> method is used to copy filesystem paths from the clipboard or to move filesystem paths to the current directory location based on the current clipboard mode.</p>  
+<li><strong>Pasting Content from the Clipboard</strong>
+   <ol type="a"><li><p>The <code>pasteClipboard()</code> method is used to copy filesystem paths from the clipboard or to move filesystem paths to the current directory location based on the current clipboard mode.</p>
 <pre class="prettyprint">
 pasteClipboard: function App_pasteClipboard()
 {
-&nbsp;&nbsp;&nbsp;var clipboardData = this.clipboard.get();
-
-&nbsp;&nbsp;&nbsp;if (clipboardData.length === 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.ui.alertPopup(&#39;Clipboard is empty&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;if (this.clipboard.getMode() === this.clipboard.COPY_MODE_ID)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.model.copyNodes(this.currentDirHandle, clipboardData, this.currentPath,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.onPasteClipboardSuccess.bind(this));
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.model.moveNodes(this.currentDirHandle, clipboardData, this.currentPath,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.onPasteClipboardSuccess.bind(this));
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;this.ui.refreshPasteActionBtn(this.clipboard.isEmpty());
-
-&nbsp;&nbsp;&nbsp;return true;
+   var clipboardData = this.clipboard.get();
+
+   if (clipboardData.length === 0)
+   {
+      app.ui.alertPopup('Clipboard is empty');
+
+      return false;
+   }
+
+   if (this.clipboard.getMode() === this.clipboard.COPY_MODE_ID)
+   {
+      this.model.copyNodes(this.currentDirHandle, clipboardData, this.currentPath,
+                           this.onPasteClipboardSuccess.bind(this));
+   }
+   else
+   {
+      this.model.moveNodes(this.currentDirHandle, clipboardData, this.currentPath,
+                           this.onPasteClipboardSuccess.bind(this));
+   }
+   this.ui.refreshPasteActionBtn(this.clipboard.isEmpty());
+
+   return true;
 }
 </pre></li>
-   <li><p>The <code>onPasteClipboardSuccess()</code> event handler responds to the success event of pasting content from the clipboard by clearing the clipboard.</p> 
+   <li><p>The <code>onPasteClipboardSuccess()</code> event handler responds to the success event of pasting content from the clipboard by clearing the clipboard.</p>
 <pre class="prettyprint">
 onPasteClipboardSuccess: function App_onPasteClipboardSuccess()
 {
-&nbsp;&nbsp;&nbsp;this.clipboard.clear();
-&nbsp;&nbsp;&nbsp;this.refreshCurrentPage();
+   this.clipboard.clear();
+   this.refreshCurrentPage();
 }
 </pre></li></ol>
-   </li> 
-  </ol> 
+   </li>
+  </ol>
 
- <h2 id="storage" name="storage">Managing Device Storage</h2> 
-  <p>This section builds upon the elements described in <a href="file_system_w.htm#manage">Managing File Storages</a>,  <a href="file_system_w.htm#create">Creating and Deleting Files and Directories</a>, and <a href="file_system_w.htm#retrieve">Retrieving Files and File Details</a>.</p> 
+ <h2 id="storage" name="storage">Managing Device Storage</h2>
+  <p>This section builds upon the elements described in <a href="file_system_w.htm#manage">Managing File Storages</a>,  <a href="file_system_w.htm#create">Creating and Deleting Files and Directories</a>, and <a href="file_system_w.htm#retrieve">Retrieving Files and File Details</a>.</p>
 
- <h3 id="configure" name="configure">Initializing the Device Storage</h3> 
-  <ol> 
+ <h3 id="configure" name="configure">Initializing the Device Storage</h3>
+  <ol>
    <li><strong>config.xml Source File</strong>
    <p>The required privileges are declared in the <code>config.xml</code> file.</p>
 <pre class="prettyprint">
 &lt;!--Configuration file content--&gt;
 &lt;widget ...&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.write&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.write&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
+   &lt;!--Other configuration details--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/content.read"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/content.write"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/filesystem.read"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/filesystem.write"/&gt;
+   &lt;!--Other configuration details--&gt;
 &lt;/widget&gt;
 </pre></li>
-  </ol>  
-  <h3 id="retrieve" name="retrieve">Retrieving Storages</h3> 
+  </ol>
+  <h3 id="retrieve" name="retrieve">Retrieving Storages</h3>
 
-  <ol> 
+  <ol>
  <li><strong>app.model.js Source File</strong>
  <p>The <code>loadInternalStorages()</code> method calls the <code>getStorages()</code> method to get the storages of a specific storage type.</p>
 <pre class="prettyprint">
 loadInternalStorages: function Model_loadInternalStorages(onSuccess)
 {
-&nbsp;&nbsp;&nbsp;var self = this;
-
-&nbsp;&nbsp;&nbsp;this.systemIO.getStorages(&#39;INTERNAL&#39;, function(storages)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.storages = storages;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &#39;internal0&#39;);
+   var self = this;
+
+   this.systemIO.getStorages('INTERNAL', function(storages)
+      {
+         self.storages = storages;
+         if (typeof onSuccess === 'function')
+         {
+            onSuccess();
+         }
+      }, 'internal0');
 }
 </pre></li>
-   <li><strong>app.systemIO.js Source File</strong> 
+   <li><strong>app.systemIO.js Source File</strong>
    <p>The <code>listStorages()</code> method of the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a> applications) is used to retrieve all the available storages.</p>
 <pre class="prettyprint">
 getStorages: function SystemIO_getStorages(type, onSuccess, excluded)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.filesystem.listStorages(function(storages)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var tmp = [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = storages.length,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (type !== undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (storages[i].label !== excluded)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (storages[i].type === 0 || storages[i].type === type)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tmp.push(storages[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tmp = storages;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess(tmp);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      tizen.filesystem.listStorages(function(storages)
+         {
+            var tmp = [],
+            len = storages.length,
+            i;
+
+            if (type !== undefined)
+            {
+               for (i = 0; i &lt; len; i += 1)
+               {
+                  if (storages[i].label !== excluded)
+                  {
+                     if (storages[i].type === 0 || storages[i].type === type)
+                        tmp.push(storages[i]);
+                  }
+               }
+            }
+            else
+            {
+               tmp = storages;
+            }
+
+            if (typeof onSuccess === 'function')
+               onSuccess(tmp);
+         });
+   }
 }
 </pre></li>
 </ol>
 
-  <h3 id="manage" name="manage">Managing Files and Directories</h3> 
+  <h3 id="manage" name="manage">Managing Files and Directories</h3>
   <p>The directory creation functionality is implemented in the <code>app.js</code> file. The file creation, file deletion, and directory deletion functionality is implemented in the <code>app.systemIO.js</code> file.</p>
-  <ol> 
+  <ol>
    <li><strong>Creating a File</strong>
-   <p>The <code>createFile()</code> method of the <code>File</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a> applications) is used to create a new file in the current directory.</p> 
+   <p>The <code>createFile()</code> method of the <code>File</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a> applications) is used to create a new file in the current directory.</p>
 <pre class="prettyprint">
 createFile: function SystemIO_createFile(directoryHandle, fileName)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return directoryHandle.createFile(fileName);
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      return directoryHandle.createFile(fileName);
+   }
 }
 </pre>
-<p>Similarly, the <code>createDirectory()</code> method is used to create a directory at the current storage location in the application.</p></li> 
-   <li><strong>Deleting a File</strong> 
-   <p>The <code>deleteFile()</code> method of the <code>File</code> interface is used to delete a file by specifying the filesystem path of the file.</p> 
+<p>Similarly, the <code>createDirectory()</code> method is used to create a directory at the current storage location in the application.</p></li>
+   <li><strong>Deleting a File</strong>
+   <p>The <code>deleteFile()</code> method of the <code>File</code> interface is used to delete a file by specifying the filesystem path of the file.</p>
 <pre class="prettyprint">
 deleteFile: function SystemIO_deleteFile(dir, filePath, onDeleteSuccess, onDeleteError)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dir.deleteFile(filePath, onDeleteSuccess, onDeleteError);
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      dir.deleteFile(filePath, onDeleteSuccess, onDeleteError);
+   }
 }
 </pre>
-<p>Similarly, the <code>deleteDirectory()</code> method is used to delete a selected directory. You can specify if the deletion is to be performed recursively for the sub-directories as well.</p></li> 
-  </ol> 
-  <h3 id="file" name="file">Retrieving File Details</h3> 
-  <p>The file and file list retrieval functionality is implemented in the <code>app.systemIO.js</code> file. The file URI retrieval functionality is implemented in the <code>app.ui.js</code> file.</p> 
-  <ol> 
+<p>Similarly, the <code>deleteDirectory()</code> method is used to delete a selected directory. You can specify if the deletion is to be performed recursively for the sub-directories as well.</p></li>
+  </ol>
+  <h3 id="file" name="file">Retrieving File Details</h3>
+  <p>The file and file list retrieval functionality is implemented in the <code>app.systemIO.js</code> file. The file URI retrieval functionality is implemented in the <code>app.ui.js</code> file.</p>
+  <ol>
    <li><strong>Retrieving a File</strong>
   <p>The <code>resolve()</code> method of the <code>FileSystemManager</code> interface is used to retrieve a file handle by specifying the location of the file.</p>
 <pre class="prettyprint">
 openDir: function SystemIO_openDir(directoryPath, onSuccess, onError, openMode)
 {
-&nbsp;&nbsp;&nbsp;openMode = openMode || &#39;rw&#39;;
-&nbsp;&nbsp;&nbsp;onSuccess = onSuccess || function() {};
+   openMode = openMode || 'rw';
+   onSuccess = onSuccess || function() {};
 
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.filesystem.resolve(directoryPath, onSuccess, onError, openMode);
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      tizen.filesystem.resolve(directoryPath, onSuccess, onError, openMode);
+   }
 }
 </pre></li>
    <li><strong>Retrieving a List of Files</strong>
@@ -538,28 +538,28 @@ openDir: function SystemIO_openDir(directoryPath, onSuccess, onError, openMode)
 <pre class="prettyprint">
 getFilesList: function SystemIO_getFilesList(dir, onSuccess)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dir.listFiles(function(files)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var tmp = [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = files.length,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tmp.push(files[i].name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess(tmp);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;SystemIO_getFilesList dir.listFiles() error:&#39;, e);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      dir.listFiles(function(files)
+         {
+            var tmp = [],
+            len = files.length,
+            i;
+
+            for (i = 0; i &lt; len; i += 1)
+            {
+               tmp.push(files[i].name);
+            }
+
+            if (typeof onSuccess === 'function')
+            {
+               onSuccess(tmp);
+            }
+         }, function(e)
+         {
+            console.error('SystemIO_getFilesList dir.listFiles() error:', e);
+         });
+   }
 }
 </pre></li>
    <li><strong>Retrieving a Folder or File URI</strong>
@@ -567,43 +567,43 @@ getFilesList: function SystemIO_getFilesList(dir, onSuccess)
 <pre class="prettyprint">
 displayFolder: function Ui_displayFolder(folderName, nodes, refresh)
 {
-&nbsp;&nbsp;&nbsp;var len = nodes.length,
-&nbsp;&nbsp;&nbsp;listElements =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[this.templateManager.get(&#39;levelUpRow&#39;)], nodeName, checkedRows = [], i;
-
-&nbsp;&nbsp;&nbsp;/* Other application code */
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i = i + 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nodeName = nodes[i].name.trim();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (nodeName !== &#39;&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (nodes[i].isDirectory)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listElements.push(this.templateManager.get(&#39;folderRow&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: i,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: nodeName,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uri: nodes[i].fullPath,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fullUri: nodes[i].toURI()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listElements.push(this.templateManager.get(&#39;fileRow&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: i,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: nodeName,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uri: nodes[i].fullPath,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fullUri: nodes[i].toURI(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thumbnailURI: this.helpers.getThumbnailURI(nodeName, nodes[i])
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   var len = nodes.length,
+   listElements =
+      [this.templateManager.get('levelUpRow')], nodeName, checkedRows = [], i;
+
+   /* Other application code */
+
+   for (i = 0; i &lt; len; i = i + 1)
+   {
+      nodeName = nodes[i].name.trim();
+      if (nodeName !== '')
+      {
+         if (nodes[i].isDirectory)
+         {
+            listElements.push(this.templateManager.get('folderRow',
+            {
+               id: i,
+               name: nodeName,
+               uri: nodes[i].fullPath,
+               fullUri: nodes[i].toURI()
+            }));
+         }
+         else
+         {
+            listElements.push(this.templateManager.get('fileRow',
+            {
+               id: i,
+               name: nodeName,
+               uri: nodes[i].fullPath,
+               fullUri: nodes[i].toURI(),
+               thumbnailURI: this.helpers.getThumbnailURI(nodeName, nodes[i])
+            }));
+         }
+      }
+   }
 }
 </pre></li>
-  </ol> 
+  </ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/data/task_mediacontent_w.htm b/org.tizen.guides/html/web/data/task_mediacontent_w.htm
index 6729a95..5129369 100644 (file)
--- a/org.tizen.guides/html/web/data/task_mediacontent_w.htm
+++ b/org.tizen.guides/html/web/data/task_mediacontent_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: Media Content</title>  
+       <title>Task: Media Content</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,10 +29,10 @@
                </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-            <li><a href="#layout">Defining the Application Layout</a></li> 
+            <li><a href="#layout">Defining the Application Layout</a></li>
             <li><a href="#initialize">Initializing the Application</a></li>
             <li><a href="#browse">Browsing Content</a></li>
-                       <li><a href="#manage">Viewing Media File Details</a></li> 
+                       <li><a href="#manage">Viewing Media File Details</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
@@ -41,129 +41,129 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Content/Media_Content" target="_blank">Media Content Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Task: Media Content</h1> 
-  <p>This task, based on the MediaContent sample delivered with the Tizen Studio, demonstrates how you can use the Content API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">wearable</a> applications) to manage media files in your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Content/Media_Content" target="blank">Media Content</a>.</p> 
-  <p>This task consists of the following parts:</p> 
-  <ul> 
+  <h1>Task: Media Content</h1>
+  <p>This task, based on the MediaContent sample delivered with the Tizen Studio, demonstrates how you can use the Content API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">wearable</a> applications) to manage media files in your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Content/Media_Content" target="blank">Media Content</a>.</p>
+  <p>This task consists of the following parts:</p>
+  <ul>
    <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
    <li><a href="#initialize">Initializing the Application</a> defines how to initialize the application.</li>
    <li><a href="#browse">Browsing Content</a> defines how to search for media directories and items. </li>
    <li><a href="#manage">Viewing Media File Details</a> defines how to view media item details.</li>
-  </ul> 
-  <p>This sample is a fully functional application which searches for and browses media directories and media item files. The media item files can be viewed and updated.</p> 
-  
-  <h2 id="layout" name="layout">Defining the Application Layout</h2> 
-  <p>The MediaContent sample application layout consists of 3 screens: the main screen displays a list of storage types and folders, the item screen displays a list of media items, and the Details screen displays the media item details.</p> 
+  </ul>
+  <p>This sample is a fully functional application which searches for and browses media directories and media item files. The media item files can be viewed and updated.</p>
+
+  <h2 id="layout" name="layout">Defining the Application Layout</h2>
+  <p>The MediaContent sample application layout consists of 3 screens: the main screen displays a list of storage types and folders, the item screen displays a list of media items, and the Details screen displays the media item details.</p>
 
-  <p>The following figure shows the main screens of the application.</p> 
-  <p align="center"><strong>Figure: MediaContent screens</strong></p> 
-  <p align="center"><img alt="MediaContent screens" src="../../images/content_sd.png" /></p> 
-  <h3 id="main" name="main">Defining the Main Screen</h3> 
-  <ol> 
-   <li><strong>index.html Source File</strong> 
-    <ol type="a"> 
-     <li> <p>The main screen of the application displays a list of storage types and folders containing media items. The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p> 
+  <p>The following figure shows the main screens of the application.</p>
+  <p align="center"><strong>Figure: MediaContent screens</strong></p>
+  <p align="center"><img alt="MediaContent screens" src="../../images/content_sd.png" /></p>
+  <h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol>
+   <li><strong>index.html Source File</strong>
+    <ol type="a">
+     <li> <p>The main screen of the application displays a list of storage types and folders containing media items. The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
 <pre class="prettyprint lang-html">
 &lt;!--Main screen layout--&gt;
-&lt;div data-role=&quot;page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Media content&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="main"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header" data-position="fixed"&gt;
+      &lt;h1&gt;Media content&lt;/h1&gt;
+   &lt;/div&gt;
 </pre></li>
      <li> <p>The actual content section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>content</code>.</p>
-<p>The section has a list component displaying the storage types, and a list divider for the folder list (whose list items are defined in the <code>main.js</code> file).</p>   
+<p>The section has a list component displaying the storage types, and a list divider for the folder list (whose list items are defined in the <code>main.js</code> file).</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot; id=&quot;folder-list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot;&gt;Storage type&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;folder-type-all&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ALL
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;folder-type-internal&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;INTERNAL
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;folder-type-external&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EXTERNAL
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot; id=&quot;folder-text&quot;&gt;Folders&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content"&gt;
+      &lt;ul data-role="listview" id="folder-list"&gt;
+         &lt;li data-role="list-divider"&gt;Storage type&lt;/li&gt;
+         &lt;li class="folder-type-all"&gt;
+            ALL
+         &lt;/li&gt;
+         &lt;li class="folder-type-internal"&gt;
+            INTERNAL
+         &lt;/li&gt;
+         &lt;li class="folder-type-external"&gt;
+            EXTERNAL
+         &lt;/li&gt;
+         &lt;li data-role="list-divider" id="folder-text"&gt;Folders&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li></ol></li></ol>
 
-  <h3 id="folder_screen" name="folder_screen">Defining the Folder Screen</h3> 
-  <ol> 
-   <li><strong>index.html Source File</strong> 
+  <h3 id="folder_screen" name="folder_screen">Defining the Folder Screen</h3>
+  <ol>
+   <li><strong>index.html Source File</strong>
 <p>Similarly as the main screen, the folder screen contains a list component displaying radio buttons (defined within an <code>&lt;input&gt;</code> element whose <code>type</code> attribute is set to <code>radio</code>) for the content types and a list divider for the item list (whose list items are defined in the <code>main.js</code> file).
 </p>
 
 <pre class="prettyprint lang-html">
 &lt;!--Folder screen layout--&gt;
-&lt;div data-role=&quot;page&quot; id=&quot;items&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1 id=&quot;items-title&quot;&gt;&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="items"&gt;
+   &lt;div data-role="header" data-position="fixed"&gt;
+      &lt;h1 id="items-title"&gt;&lt;/h1&gt;
+   &lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot; id=&quot;items-list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot;&gt;Item type&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-has-radio&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ALL
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;item-type&quot; id=&quot;item-type-all&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;ALL&quot; checked=&quot;checked&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-has-radio&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IMAGE
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;item-type&quot; id=&quot;item-type-image&quot; value=&quot;IMAGE&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-has-radio&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VIDEO
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;item-type&quot; id=&quot;item-type-video&quot; value=&quot;VIDEO&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-has-radio&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;AUDIO
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;item-type&quot; id=&quot;item-type-audio&quot; value=&quot;AUDIO&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot;&gt;Items&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content"&gt;
+      &lt;ul data-role="listview" id="items-list"&gt;
+         &lt;li data-role="list-divider"&gt;Item type&lt;/li&gt;
+         &lt;li class="ui-li-has-radio"&gt;
+            ALL
+            &lt;input type="radio" name="item-type" id="item-type-all"
+                   value="ALL" checked="checked"/&gt;
+         &lt;/li&gt;
+         &lt;li class="ui-li-has-radio"&gt;
+            IMAGE
+            &lt;input type="radio" name="item-type" id="item-type-image" value="IMAGE"/&gt;
+         &lt;/li&gt;
+         &lt;li class="ui-li-has-radio"&gt;
+            VIDEO
+            &lt;input type="radio" name="item-type" id="item-type-video" value="VIDEO"/&gt;
+         &lt;/li&gt;
+         &lt;li class="ui-li-has-radio"&gt;
+            AUDIO
+            &lt;input type="radio" name="item-type" id="item-type-audio" value="AUDIO"/&gt;
+         &lt;/li&gt;
+         &lt;li data-role="list-divider"&gt;Items&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
-    </ol> 
-       
+    </ol>
+
        <p>The Details screen content section contains a list component, and every list item is defined in the <code>main.js</code> file.</p>
- 
+
 
  <h2 id="initialize" name="initialize">Initializing the Application</h2>
-  <ol> 
+  <ol>
    <li><strong>config.xml Source File</strong>
    <p>The required privileges are declared in the <code>config.xml</code> file.</p>
 <pre class="prettyprint">
 &lt;!--Configuration file content--&gt;
 &lt;widget ...&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.write&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
+   &lt;!--Other configuration details--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/content.read"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/content.write"/&gt;
+   &lt;!--Other configuration details--&gt;
 &lt;/widget&gt;
 </pre></li>
-  </ol> 
+  </ol>
 
- <h2 id="browse" name="browse">Browsing Content</h2> 
-  <p>This section builds upon the elements described in <a href="stored_content_w.htm#browse">Browsing Content</a>.</p> 
-  
+ <h2 id="browse" name="browse">Browsing Content</h2>
+  <p>This section builds upon the elements described in <a href="stored_content_w.htm#browse">Browsing Content</a>.</p>
 
-  <h3 id="get_folder" name="get_folder">Retrieving Media Directories</h3> 
-  <ol> 
-   <li><strong>main.js Source File</strong> 
-    <ol type="a"> 
+
+  <h3 id="get_folder" name="get_folder">Retrieving Media Directories</h3>
+  <ol>
+   <li><strong>main.js Source File</strong>
+    <ol type="a">
      <li><p>The Content API uses the same <code>ContentManager</code> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a> applications) for all content-related functionalities. Retrieve the <code>ContentManager</code> interface instance using the <code>tizen</code> global object.</p>
 <pre class="prettyprint">
 gMediaSource = tizen.content;
@@ -172,147 +172,147 @@ gMediaSource = tizen.content;
 <pre class="prettyprint">
 function getFolders(storageType)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gMediaSource = tizen.content;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gMediaSource.getDirectories(onGetFoldersSuccess, onGetFoldersError);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;function onGetFoldersSuccess(folders)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#folder-list&quot;).delegate(&quot;li&quot;, &quot;vclick&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var id = $(this).data(&quot;id&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (id != null)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getFolderItems(Number(id), gMediaType);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      gMediaSource = tizen.content;
+      gMediaSource.getDirectories(onGetFoldersSuccess, onGetFoldersError);
+   }
+   function onGetFoldersSuccess(folders)
+   {
+      $("#folder-list").delegate("li", "vclick", function()
+         {
+            var id = $(this).data("id");
+            if (id != null)
+            {
+               getFolderItems(Number(id), gMediaType);
+            }
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gMediaFolders = folders;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showFolderList(storageType);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;function onGetFoldersError(err)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;GetFolders failed:&quot; + err.message);
-&nbsp;&nbsp;&nbsp;}
+            return false;
+         });
+      gMediaFolders = folders;
+      showFolderList(storageType);
+   }
+   function onGetFoldersError(err)
+   {
+      alert("GetFolders failed:" + err.message);
+   }
 
-&nbsp;&nbsp;&nbsp;flagInit = true;
+   flagInit = true;
 }
 </pre></li>
      <li><p>The <code>showFolderList()</code> method calls the <code>makeListItem()</code> method, which creates a list of directories and displays it on the screen.</p> <p>Although all the directories are retrieved in the previous step, the <code>showFolderList()</code> method only displays the directories that match with the storage type the user has selected (<strong>INTERNAL</strong> or <strong>EXTERNAL</strong>).</p>
 <pre class="prettyprint">
 function showFolderList(storageType)
 {
-&nbsp;&nbsp;&nbsp;setLastStorage(storageType);
-&nbsp;&nbsp;&nbsp;if (flagInit == false)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getFolders(storageType);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var str = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; gMediaFolders.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (storageType == &quot;ALL&quot; || storageType == gMediaFolders[i].storageType)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str += makeListItem(i, gMediaFolders[i].title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gMediaFolders[i].directoryURI);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+   setLastStorage(storageType);
+   if (flagInit == false)
+   {
+      getFolders(storageType);
+   }
+   else
+   {
+      var str = '';
+      for (var i = 0; i &lt; gMediaFolders.length; i++)
+      {
+         if (storageType == "ALL" || storageType == gMediaFolders[i].storageType)
+            str += makeListItem(i, gMediaFolders[i].title,
+                                gMediaFolders[i].directoryURI);
+      }
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#folder-list&gt;li[data-id]&quot;).remove();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#folder-list&quot;).append(str).trigger(&quot;create&quot;).listview(&quot;refresh&quot;);
-&nbsp;&nbsp;&nbsp;}
+      $("#folder-list&gt;li[data-id]").remove();
+      $("#folder-list").append(str).trigger("create").listview("refresh");
+   }
 }
 </pre></li>
-    </ol> </li> 
-  </ol> 
-  <h3 id="get_item" name="get_item">Retrieving Media Items</h3> 
-  <ol> 
-   <li><strong>main.js Source File</strong> 
-    <ol type="a"> 
+    </ol> </li>
+  </ol>
+  <h3 id="get_item" name="get_item">Retrieving Media Items</h3>
+  <ol>
+   <li><strong>main.js Source File</strong>
+    <ol type="a">
      <li><p>To get the media item list, use the <code>getFolderItems()</code> method. The method takes 2 attributes: <code>folderId</code>, which takes the folder ID whose media item list is to be displayed and <code>mediaType</code>, which specifies the media type (all, image, audio, or video).</p> <p>The <code>getFolderItems()</code> method is called when the user clicks a specific directory on the main screen, or changes the item type selection with the radio buttons on the item screen.</p>
 <pre class="prettyprint">
 function getFolderItems(folderId, mediaType)
 {
-</pre></li> 
+</pre></li>
      <li><p>The <code>find()</code> method is called to search and retrieve the required media items. After a successful search, the success event handler either updates the item list on the item screen with the <code>showItemList()</code> method (if the item screen is already displayed), or moves to the item screen (which means that the retrieved item list is automatically displayed).</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function onFindItemSuccess(items)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gMediaItems = items;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gFolderId = folderId;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gMediaType = mediaType;
+   function onFindItemSuccess(items)
+   {
+      gMediaItems = items;
+      gFolderId = folderId;
+      gMediaType = mediaType;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ($.mobile.activePage.attr(&quot;id&quot;) == &quot;items&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showItemList();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.mobile.changePage(&quot;#items&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;function onFindItemsError(err)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;getFolderItems findItems failed: &quot; + err.message);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gMediaSource.find(onFindItemSuccess, onFindItemError,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;folderId == null ? null : gMediaFolders[folderId].id,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mediaType ==
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ALL&quot; ? null : new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mediaType),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.SortMode(&quot;title&quot;, &quot;ASC&quot;));
-&nbsp;&nbsp;&nbsp;}
+      if ($.mobile.activePage.attr("id") == "items")
+      {
+         showItemList();
+      }
+      else
+      {
+         $.mobile.changePage("#items");
+      }
+   }
+   function onFindItemsError(err)
+   {
+      alert("getFolderItems findItems failed: " + err.message);
+   }
+   try
+   {
+      gMediaSource.find(onFindItemSuccess, onFindItemError,
+                    folderId == null ? null : gMediaFolders[folderId].id,
+                    mediaType ==
+                       "ALL" ? null : new tizen.AttributeFilter("type", "EXACTLY",
+                                                                mediaType),
+                    new tizen.SortMode("title", "ASC"));
+   }
 }
 </pre></li>
      <li><p>The <code>showItemList()</code> method creates a list of media items and displays it on the screen.</p>
 <pre class="prettyprint">
 function showItemList()
 {
-&nbsp;&nbsp;&nbsp;var str = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;var title = gMediaFolders[gFolderId].title;
-&nbsp;&nbsp;&nbsp;$(&quot;#items-title&quot;).html(gFolderId == null ? &quot;All&quot; : title.toString());
+   var str = '';
+   var title = gMediaFolders[gFolderId].title;
+   $("#items-title").html(gFolderId == null ? "All" : title.toString());
 
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; gMediaItems.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str += makeListItem(i, gMediaItems[i].title, gMediaItems[i].type
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;  Rating: &quot; + gMediaItems[i].rating);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; gMediaItems.length; i++)
+   {
+      str += makeListItem(i, gMediaItems[i].title, gMediaItems[i].type
+             + "  Rating: " + gMediaItems[i].rating);
+   }
 
-&nbsp;&nbsp;&nbsp;$(&quot;#items-list&gt;li[data-id]&quot;).remove();
-&nbsp;&nbsp;&nbsp;$(&quot;#items-list&quot;).append(str).trigger(&quot;create&quot;).listview(&quot;refresh&quot;);
+   $("#items-list&gt;li[data-id]").remove();
+   $("#items-list").append(str).trigger("create").listview("refresh");
 }
 </pre></li>
-    </ol> </li> 
-  </ol> 
+    </ol> </li>
+  </ol>
 
 
 <h2 id="manage" name="manage">Viewing Media File Details</h2>
-  <p>This section builds upon the elements described in <a href="stored_content_w.htm#manage">Managing Content</a>.</p> 
-  <ol> 
+  <p>This section builds upon the elements described in <a href="stored_content_w.htm#manage">Managing Content</a>.</p>
+  <ol>
    <li><strong>main.js Source File</strong>
    <p>To view the details of a media file, use the <code>showMediaDetail()</code> method, which displays the properties of the selected media file depending on the type of the file. The <code>makeCommonPropertiesListItems()</code> method defines a list of properties common to all the types of media files.</p> <p>The <code>showMediaDetail()</code> method is called when the user clicks a media file on the item screen and the Details screen is displayed.</p>
 <pre class="prettyprint">
 function showMediaDetail()
 {
-&nbsp;&nbsp;&nbsp;var str, item = gMediaItems[gItemId];
-&nbsp;&nbsp;&nbsp;/* Details for image items */
-&nbsp;&nbsp;&nbsp;if (item.type == &quot;IMAGE&quot;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str = makeCommonPropertiesListItems(item)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ makeListItem(null, &quot;Width&quot;, item.width)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ makeListItem(null, &quot;Height&quot;, item.height)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ makeListItem(null, &quot;Latitude&quot;, item.geolocation.latitude)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ makeListItem(null, &quot;Longitude&quot;, item.geolocation.longitude);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;/* Details for video and audio items */
+   var str, item = gMediaItems[gItemId];
+   /* Details for image items */
+   if (item.type == "IMAGE")
+   {
+      str = makeCommonPropertiesListItems(item)
+      + makeListItem(null, "Width", item.width)
+      + makeListItem(null, "Height", item.height)
+      + makeListItem(null, "Latitude", item.geolocation.latitude)
+      + makeListItem(null, "Longitude", item.geolocation.longitude);
+   }
+   /* Details for video and audio items */
 
-&nbsp;&nbsp;&nbsp;$(&quot;#media-details&quot;).html(str).trigger(&quot;create&quot;).listview(&quot;refresh&quot;);
+   $("#media-details").html(str).trigger("create").listview("refresh");
 }
 </pre></li>
-  </ol> 
+  </ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/device/device_cover_w.htm b/org.tizen.guides/html/web/device/device_cover_w.htm
index 34a9006..a339d19 100644 (file)
--- a/org.tizen.guides/html/web/device/device_cover_w.htm
+++ b/org.tizen.guides/html/web/device/device_cover_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Device Settings and Systems</title>  
+       <title>Device Settings and Systems</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,7 +28,7 @@
                        <li>Tizen 3.0 and Higher for TV</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Device Settings and Systems</h1>
@@ -62,7 +62,7 @@
 
 <p>You can play a feedback pattern using sound or vibration. You can set specific patterns, and check whether a specific pattern is supported.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/device/feedback_w.htm b/org.tizen.guides/html/web/device/feedback_w.htm
index 4a5be71..93c5958 100644 (file)
--- a/org.tizen.guides/html/web/device/feedback_w.htm
+++ b/org.tizen.guides/html/web/device/feedback_w.htm
@@ -60,14 +60,14 @@
 <p>You can check whether a feedback type (sound or vibration) is supported for a specified pattern. To get information about the supported specified system predefined pattern type pairs, use the <code>isPatternSupported()</code> method of the <code>FeedbackManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/feedback.html#FeedbackManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/feedback.html#FeedbackManager">wearable</a> applications):</p>
 
 <pre class="prettyprint">
-var pattern = &quot;BT_CONNECTED&quot;, type = &quot;TYPE_SOUND&quot;;
+var pattern = "BT_CONNECTED", type = "TYPE_SOUND";
 var isSupported = tizen.feedback.isPatternSupported(pattern, type);
-var isSupportedStr = &quot;&quot;;
+var isSupportedStr = "";
 if (!isSupported)
 {
-&nbsp;&nbsp;&nbsp;isSupportedStr = &quot; not&quot;;
+   isSupportedStr = " not";
 }
-console.log(&quot;pattern &quot; + pattern + &quot; is&quot; + isSupportedStr + &quot; supported&quot;);
+console.log("pattern " + pattern + " is" + isSupportedStr + " supported");
 </pre>
 
 
@@ -80,11 +80,11 @@ console.log(&quot;pattern &quot; + pattern + &quot; is&quot; + isSupportedStr +
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.feedback.play(&quot;CHARGERCONN&quot;);
+   tizen.feedback.play("CHARGERCONN");
 }
 catch (err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name +&#39;: &#39; + err.message);
+   console.log(err.name +': ' + err.message);
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/device/power_w.htm b/org.tizen.guides/html/web/device/power_w.htm
index 0ccb854..9511be6 100644 (file)
--- a/org.tizen.guides/html/web/device/power_w.htm
+++ b/org.tizen.guides/html/web/device/power_w.htm
@@ -36,7 +36,7 @@
         <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html">Power API for Mobile Web</a></li>
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">Power API for Wearable Web</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/web/System/%28Circle%29_Stop_Watch" target="_blank">(Circle) Stop Watch Sample Description</a></li>                 
+                       <li><a href="https://developer.tizen.org/development/sample/web/System/%28Circle%29_Stop_Watch" target="_blank">(Circle) Stop Watch Sample Description</a></li>
             </ul>
     </div></div>
 </div>
@@ -44,7 +44,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Power States</h1>
 
-<p>Tizen enables you to access a device&#39;s power resource. Currently, the screen and CPU power resources are supported, allowing you to request a specific power state and control the brightness of the screen.</p>
+<p>Tizen enables you to access a device's power resource. Currently, the screen and CPU power resources are supported, allowing you to request a specific power state and control the brightness of the screen.</p>
 
 <p>This feature is supported in mobile and wearable applications only.</p>
 
@@ -62,7 +62,7 @@
 
 <p>To use the Power API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/power&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/power"/&gt;
 </pre>
 
 <h2 id="manage" name="manage">Managing the Power Resource</h2>
@@ -100,21 +100,21 @@
        If you request a new power state without releasing the previous state, the Tizen platform follows the highest minimum state requested.
 </div>
 
-<p>To request and release the power state:</p> 
-  <ol> 
+<p>To request and release the power state:</p>
+  <ol>
    <li><p>To set the power state, call the <code>request()</code> method of the <code>PowerManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html#PowerManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html#PowerManager">wearable</a> applications) with the intended power resource and its state. In this example, the <code>SCREEN_NORMAL</code> state is requested for the screen resource:</p>
 <pre class="prettyprint">
-tizen.power.request(&quot;SCREEN&quot;, &quot;SCREEN_NORMAL&quot;);
+tizen.power.request("SCREEN", "SCREEN_NORMAL");
 </pre></li>
    <li><p>To release a power state, call the <code>release()</code> method with the intended resource:</p>
 <pre class="prettyprint">
-tizen.power.release(&quot;SCREEN&quot;);
+tizen.power.release("SCREEN");
 </pre></li>
    <li><p>To listen to the screen state changes, use the <code>setScreenStateChangeListener()</code> method:</p>
 <pre class="prettyprint">
 function onScreenStateChanged(previousState, changedState)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Screen state changed from&quot; + previousState + &quot;to&quot; + changedState);
+   console.log("Screen state changed from" + previousState + "to" + changedState);
 }
 tizen.power.setScreenStateChangeListener(onScreenStateChanged);
 </pre></li>
@@ -124,8 +124,8 @@ tizen.power.setScreenStateChangeListener(onScreenStateChanged);
 tizen.power.unsetScreenStateChangeListener();
 </pre></li>
 
-  </ol>  
-                       
+  </ol>
+
 <h2 id="brightness" name="brightness">Managing the Screen Brightness</h2>
 <p>To get, set, and restore the screen brightness:</p>
 <ul>
@@ -144,7 +144,7 @@ tizen.power.setScreenBrightness(1);
 tizen.power.restoreScreenBrightness();
 </pre></li>
   </ul>
-               
+
 <h2 id="screen" name="screen">Managing the Screen State</h2>
 <p>To switch the screen on and off, and check whether the screen is on:</p>
 <ul>
diff --git a/org.tizen.guides/html/web/device/system_information_w.htm b/org.tizen.guides/html/web/device/system_information_w.htm
index 122f160..65a3c03 100644 (file)
--- a/org.tizen.guides/html/web/device/system_information_w.htm
+++ b/org.tizen.guides/html/web/device/system_information_w.htm
@@ -11,7 +11,7 @@
     <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
   <title>System Information</title>
-  
+
    <style>
 .phone {
  width: 93px;
@@ -51,7 +51,7 @@ tr.images td {
  padding: 30px;
 }
   </style>
-  
+
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -73,8 +73,8 @@ tr.images td {
             <li><a href="#retrieve">Retrieving a Device Capability</a></li>
             <li><a href="#state">Retrieving the Current State of a Property</a></li>
             <li><a href="#memory">Retrieving the Memory State</a></li>
-                       <li><a href="#orientation">Retrieving and Monitoring the Device Orientation</a></li> 
-            <li><a href="#receive">Receiving Notifications on Property Value Changes</a></li>  
+                       <li><a href="#orientation">Retrieving and Monitoring the Device Orientation</a></li>
+            <li><a href="#receive">Receiving Notifications on Property Value Changes</a></li>
                        <li><a href="#properties">System Information Properties</a></li>
         </ul>
         <p class="toc-title">Related Info</p>
@@ -98,10 +98,10 @@ tr.images td {
 
 <p>You can access and monitor the <a href="#properties">device and system properties</a> (both hardware and capability), such as the battery level, available device storage, version number, model name, and the cellular network being used.</p>
 
-<p>The System Information API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
-  
+<p>The System Information API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
+
   <p>The main features of the System Information API include:</p>
- 
+
  <ul>
  <li>Checking the amount of total and available memory
 <p>You can <a href="#memory">retrieve memory amounts</a>, such as the total and available amount of system memory.</p></li>
@@ -120,11 +120,11 @@ tr.images td {
 
 <p>To use the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/system&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/telephony&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/system"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/telephony"/&gt;
 </pre>
 
-   
+
 <h2 id="retrieve" name="retrieve">Retrieving a Device Capability</h2>
 <p>Retrieve a device capability using the <code>getCapability()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications):</p>
 <ol>
@@ -132,8 +132,8 @@ tr.images td {
     <p>To get a specific capability of the device, use the <code>getCapability()</code> method:</p>
 <pre class="prettyprint">
 var barometer =
-&nbsp;&nbsp;&nbsp;tizen.systeminfo.getCapability(&quot;http://tizen.org/feature/sensor.barometer&quot;);
-console.log(&quot; Barometer = &quot; + barometer);
+   tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.barometer");
+console.log(" Barometer = " + barometer);
 </pre>
    </li>
   </ol>
@@ -145,29 +145,29 @@ console.log(&quot; Barometer = &quot; + barometer);
 
   <p>For a list of available keys and their meaning, see the device capability keys (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo_capability_keys.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo_capability_keys.html">wearable</a> applications).</p>
 
-         
+
                 <h2 id="state" name="state">Retrieving the Current State of a Property</h2>
-<p>The property state can determine whether your application has enough resources to complete a particular task or service successfully. For example, if you are creating a file, you need to check the storage property to know whether a writable storage is available on the device.</p> 
+<p>The property state can determine whether your application has enough resources to complete a particular task or service successfully. For example, if you are creating a file, you need to check the storage property to know whether a writable storage is available on the device.</p>
 <p>Retrieve information about the property states using the applicable methods of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications):</p>
 <ol>
    <li> <p>To check the current state of the property, use the <code>getPropertyValue()</code> method. </p> <p>The first method parameter must be of the <code>SystemInfoPropertyId</code> type (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertyId">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertyId">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoPropertyId">TV</a> applications). For the available values, see the <a href="#property">Available properties</a> table.</p>
 <pre class="prettyprint">
 /* Retrieve the battery property */
-tizen.systeminfo.getPropertyValue(&quot;BATTERY&quot;, onPowerSuccessCallback);
+tizen.systeminfo.getPropertyValue("BATTERY", onPowerSuccessCallback);
 
 /* Retrieve the cellular network property */
-tizen.systeminfo.getPropertyValue(&quot;CELLULAR_NETWORK&quot;, onCellularSuccessCallback);
+tizen.systeminfo.getPropertyValue("CELLULAR_NETWORK", onCellularSuccessCallback);
 </pre>
 <p>After retrieving a property, you can use all the details of the property in your code. The property values are returned in the success event handlers defined below.</p> </li>
    <li> <p>Use the power property values.</p> <p>In the following example, the battery level and charging status of the power property are printed to a console log.</p>
 <pre class="prettyprint">
 function onPowerSuccessCallback(battery)
 {
-&nbsp;&nbsp;&nbsp;/* Log the device battery level to the console */
-&nbsp;&nbsp;&nbsp;console.log(&quot;The battery level is &quot; + battery.level);
+   /* Log the device battery level to the console */
+   console.log("The battery level is " + battery.level);
 
-&nbsp;&nbsp;&nbsp;/* Check whether the device is charging */
-&nbsp;&nbsp;&nbsp;var charging = battery.isCharging;
+   /* Check whether the device is charging */
+   var charging = battery.isCharging;
 }
 </pre></li>
    <li> <p>Retrieve the current states of a specific device property using the <code>getPropertyValueArray()</code> method. For example, you can check the state of SIM cards, which are mounted in the Tizen device.</p>
@@ -175,44 +175,44 @@ function onPowerSuccessCallback(battery)
 <pre class="prettyprint">
 function successCallback(properties)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The number of the returned system properties is &quot; + properties.length);
-&nbsp;&nbsp;&nbsp;for (var i = 0; i properties.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;[&quot; + (i+1) + &quot;] SIM&#39;s state is &quot; + properties[i].state);
-&nbsp;&nbsp;&nbsp;}
+   console.log("The number of the returned system properties is " + properties.length);
+   for (var i = 0; i properties.length; i++)
+   {
+      console.log("[" + (i+1) + "] SIM's state is " + properties[i].state);
+   }
 }
 
-tizen.systeminfo.getPropertyValueArray(&quot;SIM&quot;, successCallback);
+tizen.systeminfo.getPropertyValueArray("SIM", successCallback);
 </pre></li>
 
 <li> <p>Retrieve the number of system property information using the <code>getCount()</code> method. For example, you can check the number of SIM cards, which are installed in the Tizen device.</p>
 
 <pre class="prettyprint">
-console.log(&quot;The number of SIM cards in the device is &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ tizen.systeminfo.getCount(&quot;SIM&quot;));
+console.log("The number of SIM cards in the device is "
+            + tizen.systeminfo.getCount("SIM"));
 </pre></li>
   </ol>
-            
+
                 <h2 id="memory" name="memory">Retrieving the Memory State</h2>
 <p>Check the total or available amount of system memory using the applicable method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications):</p>
 <ul>
    <li><p>To get the total amount of system memory, use the <code>getTotalMemory()</code> method:</p>
 
 <pre class="prettyprint">
-console.log(&quot;The total memory size is &quot; + tizen.systeminfo.getTotalMemory()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; bytes.&quot;);
+console.log("The total memory size is " + tizen.systeminfo.getTotalMemory()
+            + " bytes.");
 </pre></li>
 
    <li><p>To get the available amount of system memory, use the <code>getAvailableMemory()</code> method:</p>
 
 <pre class="prettyprint">
-console.log(&quot;The available memory size is &quot; + tizen.systeminfo.getAvailableMemory()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; bytes.&quot;);
+console.log("The available memory size is " + tizen.systeminfo.getAvailableMemory()
+            + " bytes.");
 </pre></li>
   </ul>
-            
+
 <h2 id="orientation" name="orientation">Retrieving and Monitoring the Device Orientation</h2>
-      <p>The device orientation defines the angle between the direction of what is considered to be the &quot;top&quot; side of the device and the physical upward direction. The device orientation is not directly related to the screen orientation. For example, when the <strong>Auto rotate screen</strong> option is disabled or the Web application has the <code>screen-orientation</code> option (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications) set to &quot;landscape&quot; or &quot;portrait&quot;, the screen is not rotated and the <code>window.screen.orientation</code> property does not change; however, the <code>SystemInfo</code> device orientation changes.</p>
+      <p>The device orientation defines the angle between the direction of what is considered to be the "top" side of the device and the physical upward direction. The device orientation is not directly related to the screen orientation. For example, when the <strong>Auto rotate screen</strong> option is disabled or the Web application has the <code>screen-orientation</code> option (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications) set to "landscape" or "portrait", the screen is not rotated and the <code>window.screen.orientation</code> property does not change; however, the <code>SystemInfo</code> device orientation changes.</p>
   <p>When a device is in its natural position, it is considered to be in the <code>PORTRAIT_PRIMARY</code> orientation (if the screen height is greater than its width) or the <code>LANDSCAPE_PRIMARY</code> orientation (otherwise). When the device is rotated 90 degrees clockwise (rotated right), the orientation changes from <code>LANDSCAPE_PRIMARY</code> to <code>PORTRAIT_PRIMARY</code>, from <code>PORTRAIT_PRIMARY</code> to <code>LANDSCAPE_SECONDARY</code>, from <code>LANDSCAPE_SECONDARY</code> to <code>PORTRAIT_SECONDARY</code>, and from <code>PORTRAIT_SECONDARY</code> back to <code>LANDSCAPE_PRIMARY</code>.</p>
 
 <p align="center" class="Table"><strong>Table: Device orientations</strong></p>
@@ -237,43 +237,43 @@ console.log(&quot;The available memory size is &quot; + tizen.systeminfo.getAvai
     </tr>
   </tbody></table>
 
-<p>To retrieve information about the device orientation:</p> 
+<p>To retrieve information about the device orientation:</p>
 
-<ol> 
+<ol>
    <li> <p>To retrieve the current orientation of the device, use the <code>getPropertyValue()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications) and query the <code>DEVICE_ORIENTATION</code> property:</p>
 <pre class="prettyprint">
 function onDeviceOrientation(deviceOrientation)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The device orientation is now: &quot; + deviceOrientation.status);
+   console.log("The device orientation is now: " + deviceOrientation.status);
 }
-tizen.systeminfo.getPropertyValue(&quot;DEVICE_ORIENTATION&quot;, onDeviceOrientation);
+tizen.systeminfo.getPropertyValue("DEVICE_ORIENTATION", onDeviceOrientation);
 </pre></li>
 
    <li>The user can rotate the device and change its orientation. To receive notifications about the orientation changes, use the <code>addPropertyValueChangeListener()</code> method of the <code>SystemInfo</code> interface:
 <pre class="prettyprint">
 var orientationListenerId;
 orientationListenerId =
-&nbsp;&nbsp;&nbsp;tizen.systeminfo.addPropertyValueChangeListener(&quot;DEVICE_ORIENTATION&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onDeviceOrientation);
+   tizen.systeminfo.addPropertyValueChangeListener("DEVICE_ORIENTATION",
+                                                   onDeviceOrientation);
 </pre></li>
 
-   <li> <p>To stop receiving change notifications, use the <code>removePropertyValueChangeListener()</code> method of the <code>SystemInfo</code> interface:</p> 
+   <li> <p>To stop receiving change notifications, use the <code>removePropertyValueChangeListener()</code> method of the <code>SystemInfo</code> interface:</p>
 <pre class="prettyprint">
 tizen.systeminfo.removePropertyValueChangeListener(orientationListenerId);
 </pre></li>
-  </ol> 
+  </ol>
 <h2 id="receive" name="receive">Receiving Notifications on Property Value Changes</h2>
-<p>You can receive state updates when a change occurs in a specific property. The <code>addPropertyValueChangeListener()</code> method registers an event listener for a specific property, and returns the subscription identifier for the listener. You can use the <code>SystemInfoPropertySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">TV</a> applications) to define the event handler for receiving the change notification.</p> 
+<p>You can receive state updates when a change occurs in a specific property. The <code>addPropertyValueChangeListener()</code> method registers an event listener for a specific property, and returns the subscription identifier for the listener. You can use the <code>SystemInfoPropertySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoPropertySuccessCallback">TV</a> applications) to define the event handler for receiving the change notification.</p>
 <p>To receive notifications on property value changes:</p>
   <ol>
    <li> <p>Register a <code>SystemInfoPropertySuccessCallback</code> event handler for the property value changes using the <code>addPropertyValueChangeListener()</code> method of the <code>SystemInfo</code> interface.</p> <p>The first parameter defines the property whose value changes you want to track, and the optional last parameter defines any thresholds when you want the notifications to be triggered. In the following example, an event handler is registered for the memory property value changes.</p>
 <pre class="prettyprint">
 function successCallback(memory)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The memory state is &quot; + memory.state);
+   console.log("The memory state is " + memory.state);
 }
 
-tizen.systeminfo.addPropertyValueChangeListener(&quot;MEMORY&quot;, successCallback);
+tizen.systeminfo.addPropertyValueChangeListener("MEMORY", successCallback);
 </pre>
 <p>The method returns a watch identifier, which can be used to deregister the event handler.</p> </li>
    <li> <p>In the success event handler of the <code>addPropertyValueChangeListener()</code> method, define the notification event actions. </p> <p>In the following example, a warning about the low battery is logged to the console.</p>
@@ -281,23 +281,23 @@ tizen.systeminfo.addPropertyValueChangeListener(&quot;MEMORY&quot;, successCallb
 /* Trigger a notification */
 function onSuccessCallback(battery)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Low battery: &quot; + battery.level);
+   console.log("Low battery: " + battery.level);
 }
 
-tizen.systeminfo.addPropertyValueChangeListener(&quot;BATTERY&quot;, onSuccessCallback);
+tizen.systeminfo.addPropertyValueChangeListener("BATTERY", onSuccessCallback);
 </pre></li>
    <li> <p>To deregister the event handler, use <code>removePropertyValueChangeListener()</code> method with the watch identifier returned from the <code>addPropertyValueChangeListener()</code> method.</p> <p>In the following example, the event handler is deregistered when the first change of the SIM card state is detected.</p>
 <pre class="prettyprint">
 function successCallback(properties)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i properties.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;[&quot; + (i+1) + &quot;] SIM&#39;s state is &quot; + properties[i].state);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;removePropertyValueChangeListener(id);
+   for (var i = 0; i properties.length; i++)
+   {
+      console.log("[" + (i+1) + "] SIM's state is " + properties[i].state);
+   }
+   removePropertyValueChangeListener(id);
 }
 
-var id = tizen.systeminfo.addPropertyValueArrayChangeListener(&quot;SIM&quot;, successCallback);
+var id = tizen.systeminfo.addPropertyValueArrayChangeListener("SIM", successCallback);
 </pre></li>
   </ol>
 
@@ -362,7 +362,7 @@ var id = tizen.systeminfo.addPropertyValueArrayChangeListener(&quot;SIM&quot;, s
       <td><code>SystemInfoNetProxyNetwork</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoNetProxyNetwork">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoNetProxyNetwork">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoNetProxyNetwork">TV</a> applications)</td>
       <td><code>NET_PROXY_NETWORK</code></td>
       <td>Provides information about the proxy type network. With this property, you can, for example, retrieve the network details that allow your application to access the network.</td>
-    </tr>      
+    </tr>
     <tr>
      <td><code>SystemInfoSIM</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoSIM">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoSIM">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoSIM">TV</a> applications)</td>
      <td><code>SIM</code></td>
diff --git a/org.tizen.guides/html/web/device/system_setting_w.htm b/org.tizen.guides/html/web/device/system_setting_w.htm
index 43d6c72..564b6fe 100644 (file)
--- a/org.tizen.guides/html/web/device/system_setting_w.htm
+++ b/org.tizen.guides/html/web/device/system_setting_w.htm
@@ -11,8 +11,8 @@
     <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
   <title>System Settings</title>
-  
-  
+
+
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -48,7 +48,7 @@
 
 <p>You can access and modify some <a href="#properties">system settings properties</a>, such as the home screen and lock screen wallpaper image, incoming call ringtone, and email notification tone.</p>
 
- <p>This feature is supported in mobile and wearable applications only.</p> 
+ <p>This feature is supported in mobile and wearable applications only.</p>
  <p>The main features of the System Setting API include:</p>
  <ul>
  <li>Device wallpaper management
@@ -56,98 +56,98 @@
  <li>Device ringtone and notification tone management
  <p>You can <a href="#tone">set the ringtone</a> for incoming calls and <a href="#tone">the tone for email notifications</a>.</p></li>
  </ul>
-  
+
 <h2 id="prerequisites">Prerequisites</h2>
 
 <p>To use the System Setting API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/setting&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/setting"/&gt;
 </pre>
 
 
 <h2 id="wall" name="wall">Managing the Device Wallpapers</h2>
 <p>You can change the home and lock screen images by using the <code>setProperty()</code> method of the <code>SystemSettingManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html#SystemSettingManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html#SystemSettingManager">wearable</a> applications). Similarly, you can retrieve information about them by using the <code>getProperty()</code> method.</p>
-<p>To set the device wallpaper and get information about it:</p> 
-  <ul> 
+<p>To set the device wallpaper and get information about it:</p>
+  <ul>
    <li><p>To set the specified image as the lock screen wallpaper, use the <code>setProperty()</code> method:</p>
 <pre class="prettyprint">
 function setLockscreenWallpaper()
 {
-&nbsp;&nbsp;&nbsp;tizen.filesystem.resolve(&quot;images/Background.jpg&quot;, function(imageFile)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.systemsetting.setProperty(&quot;LOCK_SCREEN&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageFile.toURI().replace(&quot;file://&quot;, &quot;&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;successCB, errorCB);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (error)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Error: &quot; + error);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+   tizen.filesystem.resolve("images/Background.jpg", function(imageFile)
+      {
+         try
+         {
+            tizen.systemsetting.setProperty("LOCK_SCREEN",
+                                            imageFile.toURI().replace("file://", ""),
+                                            successCB, errorCB);
+         }
+         catch (error)
+         {
+            console.log("Error: " + error);
+         }
+   });
 }
 </pre></li>
    <li><p>To get the current system setting information for the home screen wallpaper, use the <code>getProperty()</code> method:</p>
 <pre class="prettyprint">
 function getHomescreenWallpaper()
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.systemsetting.getProperty(&quot;HOME_SCREEN&quot;, successCB, errorCB);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;catch (error)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Error: &quot; + error);
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      tizen.systemsetting.getProperty("HOME_SCREEN", successCB, errorCB);
+   }
+   catch (error)
+   {
+      console.log("Error: " + error);
+   }
 }
 </pre></li>
-  </ul> 
-                       
+  </ul>
+
                                <h2 id="tone" name="tone">Managing Ringtones and Notification Tones</h2>
 <p>You can modify the incoming call ringtone and notification email tone sound by using the <code>setProperty()</code> method of the <code>SystemSettingManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html#SystemSettingManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html#SystemSettingManager">wearable</a> applications). Similarly, you can retrieve information about them by using the <code>getProperty()</code> method.</p>
-  <p>To set ringtones and notification tones:</p> 
-  <ul> 
+  <p>To set ringtones and notification tones:</p>
+  <ul>
   <li><p>To set the specified audio file as the notification tone for emails, use the <code>setProperty()</code> method of the <code>SystemSettingManager</code> interface:</p>
 <pre class="prettyprint">
 function onSet()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;It&#39;s set&quot;);
+   console.log("It's set");
 }
 
-tizen.filesystem.resolve(&quot;music/Favorite track.mp3&quot;, function(musicFile)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.systemsetting.setProperty(&quot;NOTIFICATION_EMAIL&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;musicFile.toURI().replace(&quot;file://&quot;, &quot;&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSet);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (error)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Error: &quot; + error);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+tizen.filesystem.resolve("music/Favorite track.mp3", function(musicFile)
+   {
+      try
+      {
+         tizen.systemsetting.setProperty("NOTIFICATION_EMAIL",
+                                         musicFile.toURI().replace("file://", ""),
+                                         onSet);
+      }
+      catch (error)
+      {
+         console.log("Error: " + error);
+      }
+   });
 </pre></li>
        <li><p>To get the current system setting information for the incoming call ringtone, use the <code>getProperty()</code> method:</p>
 <pre class="prettyprint">
 function onGet(value)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Current setting option value is: &quot; + value);
+   console.log("Current setting option value is: " + value);
 }
 
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.systemsetting.getProperty(&quot;INCOMING_CALL&quot;, onGet);
+   tizen.systemsetting.getProperty("INCOMING_CALL", onGet);
 }
 catch (error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error: &quot; + error);
+   console.log("Error: " + error);
 }
 </pre></li>
-  </ul> 
+  </ul>
 
- <h2 id="properties">System Settings Properties</h2> 
+ <h2 id="properties">System Settings Properties</h2>
   <p>The following table lists the supported system settings properties.</p>
 
 <p align="center" class="Table"><strong>Table: Available properties</strong></p>
diff --git a/org.tizen.guides/html/web/device/task_systeminfo_w.htm b/org.tizen.guides/html/web/device/task_systeminfo_w.htm
index 638d5af..c981b08 100644 (file)
--- a/org.tizen.guides/html/web/device/task_systeminfo_w.htm
+++ b/org.tizen.guides/html/web/device/task_systeminfo_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: System Information</title>  
+       <title>Task: System Information</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -36,139 +36,139 @@
                <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API for Mobile Web</a></li>
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">System Information API for Wearable Web</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/web/System/System_Info" target="_blank">System Info Sample Description</a></li>                     
+                       <li><a href="https://developer.tizen.org/development/sample/web/System/System_Info" target="_blank">System Info Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
- <h1>Task: System Information</h1> 
-  <p>This task, based on the Systeminfo sample delivered with the Tizen Studio, demonstrates how you can use the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a> applications) to retrieve and display status and details of various device-specific items. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/System/System_Info" target="blank">System Info</a>.</p> 
-  <p>This task consists of the following parts:</p> 
-  <ul> 
-   <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li> 
-   <li><a href="#info">Displaying Device-specific Information</a> defines how to display status information of the device properties.</li> 
-  </ul> 
-  <p>This sample is a fully functional application for retrieving device-specific information and monitoring changes in the system property values.</p> 
-  
-  <h2 id="layout" name="layout">Defining the Application Layout</h2> 
-  <p>The Systeminfo sample application layout consists of 2 screens: the main screen and the information screen.</p> 
-
-  
-  <p>The following figure shows the main screens of the application.</p> 
-  <p align="center"><strong>Figure: Systeminfo screens</strong></p> 
-  <p align="center"><img alt="Systeminfo screens" src="../../images/systeminfo_sd.png" /></p> 
+ <h1>Task: System Information</h1>
+  <p>This task, based on the Systeminfo sample delivered with the Tizen Studio, demonstrates how you can use the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a> applications) to retrieve and display status and details of various device-specific items. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/System/System_Info" target="blank">System Info</a>.</p>
+  <p>This task consists of the following parts:</p>
+  <ul>
+   <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
+   <li><a href="#info">Displaying Device-specific Information</a> defines how to display status information of the device properties.</li>
+  </ul>
+  <p>This sample is a fully functional application for retrieving device-specific information and monitoring changes in the system property values.</p>
+
+  <h2 id="layout" name="layout">Defining the Application Layout</h2>
+  <p>The Systeminfo sample application layout consists of 2 screens: the main screen and the information screen.</p>
+
+
+  <p>The following figure shows the main screens of the application.</p>
+  <p align="center"><strong>Figure: Systeminfo screens</strong></p>
+  <p align="center"><img alt="Systeminfo screens" src="../../images/systeminfo_sd.png" /></p>
   <h3 id="main" name="main">Defining the Main Screen</h3>
-  <ol> 
-   <li><strong>index.html Source File</strong> 
-    <ol type="a"> 
+  <ol>
+   <li><strong>index.html Source File</strong>
+    <ol type="a">
      <li> <p>The main screen of the application displays a list of system properties about which you can retrieve information. The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
 <pre class="prettyprint lang-html">
 &lt;!--Main screen layout--&gt;
-&lt;div data-role=&quot;page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;System information&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="main"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header" data-position="fixed"&gt;
+      &lt;h1&gt;System information&lt;/h1&gt;
+   &lt;/div&gt;
 </pre></li>
      <li><p>The actual content section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a list component (in <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications) displaying the system properties.</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id=&quot;storage-info&quot;&gt;Storage&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id=&quot;battery-info&quot;&gt;Battery&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id=&quot;cpu-info&quot;&gt;CPU&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id=&quot;display-info&quot;&gt;Display&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li id=&quot;orientation-info&quot;&gt;Device orientation&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content"&gt;
+      &lt;ul data-role="listview"&gt;
+         &lt;li id="storage-info"&gt;Storage&lt;/li&gt;
+         &lt;li id="battery-info"&gt;Battery&lt;/li&gt;
+         &lt;li id="cpu-info"&gt;CPU&lt;/li&gt;
+         &lt;li id="display-info"&gt;Display&lt;/li&gt;
+         &lt;li id="orientation-info"&gt;Device orientation&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
- 
-    </ol> </li> 
-  </ol> 
+
+    </ol> </li>
+  </ol>
   <h3 id="information" name="information">Defining the Information Screen</h3>
-  <ol> 
-   <li><strong>index.html Source File</strong> 
-    <ol type="a"> 
+  <ol>
+   <li><strong>index.html Source File</strong>
+    <ol type="a">
      <li> <p>The information screen of the application displays the details of a selected system property. The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen, which varies depending on the list item the user clicks on the main screen.</p>
 <pre class="prettyprint lang-html">
 &lt;!--Information screen layout--&gt;
-&lt;div data-role=&quot;page&quot; id=&quot;info&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1 id=&quot;info-title&quot;&gt;&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="info"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header" data-position="fixed"&gt;
+      &lt;h1 id="info-title"&gt;&lt;/h1&gt;
+   &lt;/div&gt;
 </pre></li>
      <li><p>The actual content section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the information screen contains a list component displaying the details of the selected system property.</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot; id=&quot;info-list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content"&gt;
+      &lt;ul data-role="listview" id="info-list"&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
-    </ol> </li> 
-  </ol>  
-  
- <h2 id="info" name="info">Displaying Device-specific Information</h2> 
-  <p>This section builds upon the elements described in <a href="system_information_w.htm#state">Retrieving the Current State of a Property</a>.</p> 
-  
-
-  
+    </ol> </li>
+  </ol>
+
+ <h2 id="info" name="info">Displaying Device-specific Information</h2>
+  <p>This section builds upon the elements described in <a href="system_information_w.htm#state">Retrieving the Current State of a Property</a>.</p>
+
+
+
   <h3 id="list" name="list">Defining the List Item Types</h3>
-  <ol> 
+  <ol>
    <li><strong>main.js Source File</strong>
-   <p>When the user selects a property list item on the main screen, the information screen opens displaying a list of the details of the selected property.</p> <p>Different properties require different kind of layout and functionality in their list. User-defined methods are defined for creating the following list item types:</p> 
-    <ul> 
+   <p>When the user selects a property list item on the main screen, the information screen opens displaying a list of the details of the selected property.</p> <p>Different properties require different kind of layout and functionality in their list. User-defined methods are defined for creating the following list item types:</p>
+    <ul>
      <li>List item with 1 line (contains the property value)
 <pre class="prettyprint">
 function make1lineListItem(value)
 {
-&nbsp;&nbsp;&nbsp;return &#39;&lt;li&gt;&#39; + value + &#39;&lt;/li&gt;&#39;;
+   return '&lt;li&gt;' + value + '&lt;/li&gt;';
 }
 </pre></li>
      <li>List item with 2 lines (contains both the property title and value)
 <pre class="prettyprint">
 function make2lineListItem(title, value)
 {
-&nbsp;&nbsp;&nbsp;return &#39;&lt;li class=&quot;ui-li-has-multiline ui-li-text-ellipsis&quot;&gt;&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ title
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;&lt;span class=&quot;ui-li-text-sub&quot;&gt;&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ value
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;&lt;/span&gt;&lt;/li&gt;&#39;;
+   return '&lt;li class="ui-li-has-multiline ui-li-text-ellipsis"&gt;'
+          + title
+          + '&lt;span class="ui-li-text-sub"&gt;'
+          + value
+          + '&lt;/span&gt;&lt;/li&gt;';
 }
 </pre></li>
      <li>Divider list item (contains a list divider title)
 <pre class="prettyprint">
 function makeDividerListItem(value)
 {
-&nbsp;&nbsp;&nbsp;return &#39;&lt;li data-role=&quot;list-divider&quot;&gt;&#39; + value + &#39;&lt;/li&gt;&#39;;
+   return '&lt;li data-role="list-divider"&gt;' + value + '&lt;/li&gt;';
 }
 </pre></li>
-    </ul> </li> 
-  </ol> 
+    </ul> </li>
+  </ol>
   <h3 id="display" name="display">Displaying System Property Details</h3>
-  <p>The system property retrieval is implemented in the <code>main.js</code> file.</p> 
-  <p>If the user clicks a system property on the main screen, the <code>getSystemProperty()</code> method is invoked to check the property support and retrieve the property details. If the method succeeds, the applicable event handler displays the property values on the screen. Since all the system properties are displayed similarly, only some of them are described below.</p> 
-  <ol> 
+  <p>The system property retrieval is implemented in the <code>main.js</code> file.</p>
+  <p>If the user clicks a system property on the main screen, the <code>getSystemProperty()</code> method is invoked to check the property support and retrieve the property details. If the method succeeds, the applicable event handler displays the property values on the screen. Since all the system properties are displayed similarly, only some of them are described below.</p>
+  <ol>
    <li><strong>Displaying the Battery Property Values</strong>
    <p>The <code>onBatterySuccess()</code> event handler determines the screen title for the BATTERY property information screen, and defines a list containing the battery level of the device, and information about whether the device is charging (both using list items with a 2-line format). </p> <p>The <code>changePage()</code> method moves the application from the main screen to the information screen containing the defined list.</p>
 <pre class="prettyprint">
 function onBatterySuccess(battery)
 {
-&nbsp;&nbsp;&nbsp;/* Screen title */
-&nbsp;&nbsp;&nbsp;gInfoTitle = &quot;BATTERY&quot;;
+   /* Screen title */
+   gInfoTitle = "BATTERY";
 
-&nbsp;&nbsp;&nbsp;/* Property value list */
-&nbsp;&nbsp;&nbsp;gInfo = make2lineListItem(&quot;Level&quot;, battery.level)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Charging&quot;, (battery.isCharging == true ? &quot;Yes&quot; : &quot;No&quot;));
+   /* Property value list */
+   gInfo = make2lineListItem("Level", battery.level)
+           + make2lineListItem("Charging", (battery.isCharging == true ? "Yes" : "No"));
 
-&nbsp;&nbsp;&nbsp;/* Screen change */
-&nbsp;&nbsp;&nbsp;$.mobile.changePage(&quot;#info&quot;);
+   /* Screen change */
+   $.mobile.changePage("#info");
 }
 </pre></li>
    <li><strong>Displaying the Storage Property Values</strong>
@@ -176,22 +176,22 @@ function onBatterySuccess(battery)
 <pre class="prettyprint">
 function onStorageSuccess(storages)
 {
-&nbsp;&nbsp;&nbsp;gInfoTitle = &quot;STORAGE(&quot; + storages.length + &quot;)&quot;;
-&nbsp;&nbsp;&nbsp;gInfo = &quot;&quot;;
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; storages.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gInfo += makeDividerListItem(&quot;Storage &quot; + (i + 1))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Type&quot;, storages.units[i].type)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Capacity&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Math.floor(storages[i].capacity / 1000000) + &quot; MB&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Available capacity&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Math.floor(storages[i].availableCapacity / 1000000)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; MB&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Removable&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(storages[i].isRemoveable == true ? &quot;Yes&quot; : &quot;No&quot;));
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;$.mobile.changePage(&quot;#info&quot;);
+   gInfoTitle = "STORAGE(" + storages.length + ")";
+   gInfo = "";
+   for (var i = 0; i &lt; storages.length; i++)
+   {
+      gInfo += makeDividerListItem("Storage " + (i + 1))
+               + make2lineListItem("Type", storages.units[i].type)
+               + make2lineListItem("Capacity",
+                                   Math.floor(storages[i].capacity / 1000000) + " MB")
+               + make2lineListItem("Available capacity",
+                                   Math.floor(storages[i].availableCapacity / 1000000)
+                                   + " MB")
+               + make2lineListItem("Removable",
+                                   (storages[i].isRemoveable == true ? "Yes" : "No"));
+   }
+
+   $.mobile.changePage("#info");
 }
 </pre></li>
    <li><strong>Displaying the Display Property Values</strong>
@@ -199,23 +199,23 @@ function onStorageSuccess(storages)
 <pre class="prettyprint">
 function onDisplaySuccess(display)
 {
-&nbsp;&nbsp;&nbsp;gInfoTitle = &quot;DISPLAY&quot;;
-&nbsp;&nbsp;&nbsp;gInfo = makeDividerListItem(&quot;Resolution&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Width&quot;, display.resolutionWidth)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Height&quot;, display.resolutionHeight)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ makeDividerListItem(&quot;Dots per inch&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Horizontal&quot;, display.dotsPerInchWidth)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Vertical&quot;, display.dotsPerInchHeight)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ makeDividerListItem(&quot;Physical size&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Width&quot;, display.physicalWidth)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make2lineListItem(&quot;Height&quot;, display.physicalHeight)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ makeDividerListItem(&quot;Brightness&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ make1lineListItem(display.brightness);
-
-&nbsp;&nbsp;&nbsp;$.mobile.changePage(&quot;#info&quot;);
+   gInfoTitle = "DISPLAY";
+   gInfo = makeDividerListItem("Resolution")
+           + make2lineListItem("Width", display.resolutionWidth)
+           + make2lineListItem("Height", display.resolutionHeight)
+           + makeDividerListItem("Dots per inch")
+           + make2lineListItem("Horizontal", display.dotsPerInchWidth)
+           + make2lineListItem("Vertical", display.dotsPerInchHeight)
+           + makeDividerListItem("Physical size")
+           + make2lineListItem("Width", display.physicalWidth)
+           + make2lineListItem("Height", display.physicalHeight)
+           + makeDividerListItem("Brightness")
+           + make1lineListItem(display.brightness);
+
+   $.mobile.changePage("#info");
 }
 </pre></li>
-  </ol> 
+  </ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/device/time_w.htm b/org.tizen.guides/html/web/device/time_w.htm
index 385ff7c..4126aff 100644 (file)
--- a/org.tizen.guides/html/web/device/time_w.htm
+++ b/org.tizen.guides/html/web/device/time_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Time and Date Management</title> 
- </head> 
+  <title>Time and Date Management</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
         <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -34,7 +34,7 @@
                        <li><a href="#Monitoring_Changes">Retrieving Time Change Notifications</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc"> 
+               <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time API for Mobile Web</a></li>
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time API for Wearable Web</a></li>
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html">Time API for TV Web</a></li>
@@ -47,141 +47,141 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Watch/Weather_Watch" target="_blank">Weather Watch Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
- 
+
  <h1>Time and Date Management</h1>
 
   <p>Tizen enables you to use locale-specific calendar features by retrieving date and time information. You can also change the date, time, and time zone, and make some date- and time-related calculations. The Time API overcomes several limitations of the JavaScript <code>Date</code> object.</p>
-  
-<p>The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
+
+<p>The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 
   <p>Locale refers to the set of information that is specific to a language and a country. It affects the numeric formats (decimal and list separators), date formats, and the character sorting order. It determines how a locale-specific functionality behaves; for example, how numbers are displayed or strings converted to dates.</p>
-  
-  <p>The main features of the Time API include:</p> 
-  <ul> 
-   <li>Managing the current date, time, and time zone 
+
+  <p>The main features of the Time API include:</p>
+  <ul>
+   <li>Managing the current date, time, and time zone
    <p>You can <a href="#Retrieving_Date">retrieve the current date and time</a> or all available time zones, and check whether a specific year is a leap year.</p>
-   </li> 
-   <li>Getting the locale-specific date and time formats 
-   <p>If locale-specific settings have been made on the device, the date must be displayed in the corresponding locale-specific format. Tizen supports several different date and time formats, and you can <a href="#Retrieving_Local_Date">retrieve the currently used formats</a>.</p></li> 
-   <li>Performing date- and time-related calculations 
-   <p>You can <a href="#Calculating_Date">perform different calculations and comparisons on date and time data</a> regardless of the time units used in the compared events.</p> </li> 
+   </li>
+   <li>Getting the locale-specific date and time formats
+   <p>If locale-specific settings have been made on the device, the date must be displayed in the corresponding locale-specific format. Tizen supports several different date and time formats, and you can <a href="#Retrieving_Local_Date">retrieve the currently used formats</a>.</p></li>
+   <li>Performing date- and time-related calculations
+   <p>You can <a href="#Calculating_Date">perform different calculations and comparisons on date and time data</a> regardless of the time units used in the compared events.</p> </li>
    <li>Monitoring time and time zone changes
-   <p>You can <a href="#Monitoring_Changes">retrieve notifications on time changes</a> performed by the user.</p> </li> 
-  </ul> 
+   <p>You can <a href="#Monitoring_Changes">retrieve notifications on time changes</a> performed by the user.</p> </li>
+  </ul>
 
                                <h2 id="Retrieving_Date" name="Retrieving_Date">Retrieving Date and Time</h2>
-<p>With the <code>TimeUtil</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeUtil">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeUtil">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html#TimeUtil">TV</a> applications), you can retrieve the current date, time, and time zone, and the number of available time zones, and determine whether a year is a leap year.</p> 
-<p>You can also perform other date-and time-related tasks, such as getting the date of the next and previous daylight saving time transition, converting current time to UTC standard time, and getting the time zone abbreviation.</p> 
+<p>With the <code>TimeUtil</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeUtil">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeUtil">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html#TimeUtil">TV</a> applications), you can retrieve the current date, time, and time zone, and the number of available time zones, and determine whether a year is a leap year.</p>
+<p>You can also perform other date-and time-related tasks, such as getting the date of the next and previous daylight saving time transition, converting current time to UTC standard time, and getting the time zone abbreviation.</p>
 
 <div class="note">
        <strong>Note</strong>
-       UTC is the primary time standard used by the world to track time. Time zones are created for the world as a positive or negative offset of UTC. For example, the time zone for Iceland is UTC+00:00, and the time zone for India is UTC+05:30. 
+       UTC is the primary time standard used by the world to track time. Time zones are created for the world as a positive or negative offset of UTC. For example, the time zone for Iceland is UTC+00:00, and the time zone for India is UTC+05:30.
        <p>DST (or summer time) is the practice of clocks being advanced temporarily by a fixed time during the summer to take advantage of more daylight. Typically, this temporary adjustment is one hour. For example, one hour shift ahead in time will cause the last moment of 20:59 to jump to 22:00 instead of 21:00. In this case, the day will have 23 hours. In another scenario, one hour shift back in time will cause the day to have 25 hours.</p>
 </div>
-       
-<p>To handle date and time in your application:</p> 
-  <ol> 
+
+<p>To handle date and time in your application:</p>
+  <ol>
    <li> <p>To get the current date and time, use the <code>getCurrentDateTime()</code> method, which returns a <code>TZDate</code> object:</p>
 <pre class="prettyprint">
 var current_dt = tizen.time.getCurrentDateTime();
-console.log(&quot;Current time / date is &quot; + current_dt.toLocaleString());
+console.log("Current time / date is " + current_dt.toLocaleString());
 </pre>
-   </li> 
-   <li>To handle time zone information: 
-    <ol type="a"> 
+   </li>
+   <li>To handle time zone information:
+    <ol type="a">
      <li> <p>To retrieve the current time zone, use the <code>getLocalTimezone()</code> method:</p>
 <pre class="prettyprint">
-console.log(&quot;The current time zone is &quot; + tizen.time.getLocalTimezone());
+console.log("The current time zone is " + tizen.time.getLocalTimezone());
 </pre>
-<p>The general format of the time zones is &quot;general descriptor/specific descriptor 1/specific descriptor 2/specific descriptor n&quot;. For example, &quot;America/Argentina/Buenos_Aires&quot;.</p> </li> 
+<p>The general format of the time zones is "general descriptor/specific descriptor 1/specific descriptor 2/specific descriptor n". For example, "America/Argentina/Buenos_Aires".</p> </li>
      <li> <p>To get the number of available time zones, use the <code>getAvailableTimezones()</code> method:</p>
 <pre class="prettyprint">
 var tzids = tizen.time.getAvailableTimezones();
-console.log(&quot;The device supports &quot; + tzids.length + &quot; time zones.&quot;);
+console.log("The device supports " + tzids.length + " time zones.");
 </pre></li>
-    </ol> 
-   </li> 
+    </ol>
+   </li>
    <li><p>If you are creating a calendar-based application or accepting a date on an application form, you must validate user input for leap year date value. For example, 29/02/2011 is an invalid user input.</p> <p>To determine if the year is a leap year, use the <code>isLeapYear()</code> method:</p>
 <pre class="prettyprint">
 var current_dt = tizen.time.getCurrentDateTime();
 var is_leap = tizen.time.isLeapYear(current_dt.getFullYear());
 if (is_leap)
-&nbsp;&nbsp;&nbsp;console.log(&quot;This year is a leap year.&quot;);
+   console.log("This year is a leap year.");
 </pre>
-   <p> The <code>getFullYear()</code> method returns the year (4 digits) of the <code>TZDate</code> object. </p> 
-   </li> 
+   <p> The <code>getFullYear()</code> method returns the year (4 digits) of the <code>TZDate</code> object. </p>
+   </li>
+
+  </ol>
 
-  </ol>  
-               
                                <h2 id="Retrieving_Local_Date" name="Retrieving_Local_Date">Retrieving the Local Date and Time Format</h2>
-<p>The date and time can be expressed, for example, in a numerical format YYYY-MM-DD hh:mm:ss (for example, &quot;1996-10-23 16:08:27&quot;) or in hybrid format (for example, &quot;Wednesday, October 23, 1996, 04:08:27 PM&quot;).</p>
-<p>To handle date and time formats in your application:</p> 
-  <ol> 
+<p>The date and time can be expressed, for example, in a numerical format YYYY-MM-DD hh:mm:ss (for example, "1996-10-23 16:08:27") or in hybrid format (for example, "Wednesday, October 23, 1996, 04:08:27 PM").</p>
+<p>To handle date and time formats in your application:</p>
+  <ol>
    <li> <p>To check the date format, use the <code>getDateFormat()</code> method:</p>
 <pre class="prettyprint">
 var dateFormat = tizen.time.getDateFormat();
-console.log(&quot;Date format is &quot; + dateFormat);
+console.log("Date format is " + dateFormat);
 </pre></li>
    <li> <p>To check the time format, use the <code>getTimeFormat()</code> method:</p>
 <pre class="prettyprint">
 var timeFormat = tizen.time.getTimeFormat();
-console.log(&quot;Time format is &quot; + timeFormat);
+console.log("Time format is " + timeFormat);
 </pre></li>
-  </ol>  
-               
+  </ol>
+
                                <h2 id="Calculating_Date" name="Calculating_Date">Calculating Date and Time Information</h2>
 <p>Calculate and compare time and date information using the applicable methods of the <code>TimeDuration</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeDuration">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeDuration">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/time.html#TimeDuration">TV</a> applications):</p>
-<ol> 
-   <li> <p>To calculate the duration difference between 2 date or time events, use the <code>difference()</code> method of the <code>TimeDuration</code> object:</p> 
+<ol>
+   <li> <p>To calculate the duration difference between 2 date or time events, use the <code>difference()</code> method of the <code>TimeDuration</code> object:</p>
 <pre class="prettyprint">
 var event1, event2; /* Assume that those are correct tizen.CalendarEvent objects */
 /* Calculate event1.duration - event2.duration */
 var diff = event1.duration.difference(event2.duration);
 if (diff.length &lt; 0)
-&nbsp;&nbsp;&nbsp;console.log(&quot;Event1 is longer than Event2.&quot;);
+   console.log("Event1 is longer than Event2.");
 else if (diff.length == 0)
-&nbsp;&nbsp;&nbsp;console.log(&quot;Event1 is as long as Event2.&quot;);
+   console.log("Event1 is as long as Event2.");
 else
-&nbsp;&nbsp;&nbsp;console.log(&quot;Event1 is shorter than Event2.&quot;);
-</pre> 
+   console.log("Event1 is shorter than Event2.");
+</pre>
 
 <div class="note">
        <strong>Note</strong>
-       The unit of the returned <code>TimeDuration</code> object is equivalent to the largest possible unit amongst the source parameter units while making sure that precision is not lost in the result. This implies that if, for example, a comparison is done between &quot;1 hour&quot; and &quot;20 minutes&quot;, the result is displayed as 40 minutes, not 0.67 hour. Although the hour is a bigger unit than the minute, the result is more precise if presented in minutes.
+       The unit of the returned <code>TimeDuration</code> object is equivalent to the largest possible unit amongst the source parameter units while making sure that precision is not lost in the result. This implies that if, for example, a comparison is done between "1 hour" and "20 minutes", the result is displayed as 40 minutes, not 0.67 hour. Although the hour is a bigger unit than the minute, the result is more precise if presented in minutes.
 </div>
-       </li> 
+       </li>
    <li> <p> To compare 2 <code>TimeDuration</code> objects for equality, use the <code>equalsTo()</code> method: </p>
 <pre class="prettyprint">
-var d1 = new tizen.TimeDuration(60, &quot;MINS&quot;);
-var d2 = new tizen.TimeDuration(1, &quot;HOURS&quot;);
+var d1 = new tizen.TimeDuration(60, "MINS");
+var d2 = new tizen.TimeDuration(1, "HOURS");
 var ret = d1.equalsTo(d2); /* Returns true */
 </pre></li>
    <li> <p> To check whether 1 <code>TimeDuration</code> object is shorter than another, use the <code>lessThan()</code> method: </p>
 <pre class="prettyprint">
 /* Check whether d1 is shorter than d2 */
-var d1 = new tizen.TimeDuration(1, &quot;HOURS&quot;);
-var d2 = new tizen.TimeDuration(120, &quot;MINS&quot;);
+var d1 = new tizen.TimeDuration(1, "HOURS");
+var d2 = new tizen.TimeDuration(120, "MINS");
 var ret = d1.lessThan(d2); /* Returns true */
 </pre></li>
    <li> <p> To check whether 1 <code>TimeDuration</code> object is longer than another, use the <code>greaterThan()</code> method: </p>
 <pre class="prettyprint">
 /* Check whether d1 is longer than d2 */
-var d1 = new tizen.TimeDuration(2, &quot;HOURS&quot;);
-var d2 = new tizen.TimeDuration(60, &quot;MINS&quot;);
+var d1 = new tizen.TimeDuration(2, "HOURS");
+var d2 = new tizen.TimeDuration(60, "MINS");
 var ret = d1.greaterThan(d2); /* Returns true */
 </pre></li>
    <li> <p>To add a predefined time to the current date, use the <code>addDuration()</code> method:</p>
 <pre class="prettyprint">
 /* Convert the current date to the date of the next day, at the same time */
 var now = tizen.time.getCurrentDateTime();
-var tomorrow = now.addDuration(new tizen.TimeDuration(1,&quot;DAYS&quot;);
+var tomorrow = now.addDuration(new tizen.TimeDuration(1,"DAYS");
 </pre>
-<p> If the number of added time is negative, date or time is set to an earlier moment of time. </p> </li> 
-  </ol>  
-                       
+<p> If the number of added time is negative, date or time is set to an earlier moment of time. </p> </li>
+  </ol>
+
                                <h2 id="Monitoring_Changes" name="Monitoring_Changes">Retrieving Time Change Notifications</h2>
 <p>Getting notifications when the user changes the time or time zone allows you to react to those changes in your application.</p>
   <ol>
@@ -191,27 +191,27 @@ var tomorrow = now.addDuration(new tizen.TimeDuration(1,&quot;DAYS&quot;);
 <pre class="prettyprint">
 function timeChangedCallback()
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var current_dt = tizen.time.getCurrentDateTime();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Clock has been set. Current date/time is &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ current_dt.toLocaleString());
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      var current_dt = tizen.time.getCurrentDateTime();
+      console.log("Clock has been set. Current date/time is "
+                  + current_dt.toLocaleString());
+   }
 }
 </pre></li>
     <li> <p>The time zone change event handler is called when the user switches the time zone:</p>
 <pre class="prettyprint">
 function timezoneChangedCallback()
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   New time zone can be retrieved
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   through tizen.time.getLocalTimezone()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var zone = tizen.time.getLocalTimezone();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Time zone has been set to &quot; + zone);
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      /*
+         New time zone can be retrieved
+         through tizen.time.getLocalTimezone()
+      */
+      var zone = tizen.time.getLocalTimezone();
+      console.log("Time zone has been set to " + zone);
+   }
 }
 </pre></li>
     </ul> </li>
@@ -243,7 +243,7 @@ tizen.time.unsetTimezoneChangeListener();
 
   </ol>
 
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/device/web_view_w.htm b/org.tizen.guides/html/web/device/web_view_w.htm
index e4afbff..1e8a2f4 100644 (file)
--- a/org.tizen.guides/html/web/device/web_view_w.htm
+++ b/org.tizen.guides/html/web/device/web_view_w.htm
@@ -33,7 +33,7 @@
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/websetting.html">Web Setting API for Mobile Web</a></li>
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/websetting.html">Web Setting API for TV Web</a></li>                       
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/websetting.html">Web Setting API for TV Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -43,7 +43,7 @@
 
 
   <p>Tizen enables you to set Web view properties.</p>
-  
+
 <p>This feature is supported in mobile and TV applications only.</p>
 
   <p>The main features of the Web Setting API include:</p>
@@ -53,27 +53,27 @@
   </ul>
 
 <h2 id="set" name="set">Setting a User Agent for a Running Application</h2>
-                               
-<p>Use the <code>setUserAgentString()</code> method to set a Web view user agent string:</p> 
+
+<p>Use the <code>setUserAgentString()</code> method to set a Web view user agent string:</p>
 <pre class="prettyprint">
 function successCallback()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The requested user agent string has just been set successfully.&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ navigator.userAgent);
+   console.log("The requested user agent string has just been set successfully."
+               + navigator.userAgent);
 }
 
 /* Set a user agent string */
-var userAgent = &quot;CUSTOM_USER_AGENT_STRING&quot;;
+var userAgent = "CUSTOM_USER_AGENT_STRING";
 tizen.websetting.setUserAgentString(userAgent, successCallback);
 </pre>
 
 <h2 id="delete" name="delete">Deleting Web View Cookies</h2>
-                       
-<p>Use the <code>removeAllCookies()</code> method to delete all the Web view cookies:</p> 
+
+<p>Use the <code>removeAllCookies()</code> method to delete all the Web view cookies:</p>
 <pre class="prettyprint">
 function CookiesRemovedSuccessCallback()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The cookies saved for your application have just been removed.&quot;);
+   console.log("The cookies saved for your application have just been removed.");
 }
 
 tizen.websetting.removeAllCookies(CookiesRemovedSuccessCallback);
diff --git a/org.tizen.guides/html/web/error/error_w.htm b/org.tizen.guides/html/web/error/error_w.htm
index e564db8..b720355 100644 (file)
--- a/org.tizen.guides/html/web/error/error_w.htm
+++ b/org.tizen.guides/html/web/error/error_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Error Handling</title> 
- </head> 
+  <title>Error Handling</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,17 +33,17 @@
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">Tizen API for Mobile Web</a></li>
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">Tizen API for Wearable Web</a></li>              
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html">Tizen API for TV Web</a></li>                  
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">Tizen API for Wearable Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html">Tizen API for TV Web</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Error Handling</h1> 
+  <h1>Error Handling</h1>
   <p>You can handle generic error situations in your application.</p>
-  
-<p>The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
+
+<p>The Tizen API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
 <p>The main error handling features of the Tizen API include:</p>
 <ul>
 <li>Exception handling
@@ -57,16 +57,16 @@
 <li>Generic event handling
   <p>You can <a href="#use_handlers">handle the results of asynchronous operations</a> with generic events. The operations can implemented using the <code>SuccessCallback</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SuccessCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SuccessCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#SuccessCallback">TV</a> applications) and <code>ErrorCallback</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#ErrorCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#ErrorCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#ErrorCallback">TV</a> applications) event handlers of the Tizen API.</p></li>
 </ul>
-  
+
  <h2 id="use_handlers" name="use_handlers">Using the Generic Event Handlers</h2>
 
-<p>Learning how to use generic, predefined event handlers allows you handle application operations and errors efficiently:</p> 
-  <ol> 
+<p>Learning how to use generic, predefined event handlers allows you handle application operations and errors efficiently:</p>
+  <ol>
    <li> <p>The generic <code>onSuccess()</code> event handler of the <code>SuccessCallBack</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SuccessCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SuccessCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#SuccessCallback">TV</a> applications) can be used with methods that do not require a return value when successful.</p> <p>In this example, the event handler is used to stop a running application with the <code>kill()</code> method of the <code>Application</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#Application">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#Application">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#Application">TV</a> applications).</p>
 <pre class="prettyprint">
 function onSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Application terminated successfully&quot;);
+   console.log("Application terminated successfully");
 }
 
 tizen.application.kill(ctxIDToKill, onSuccess);
@@ -75,12 +75,12 @@ tizen.application.kill(ctxIDToKill, onSuccess);
 <pre class="prettyprint">
 function errorCallback(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The following error occurred: &quot; + error.name);
+   console.log("The following error occurred: " + error.name);
 }
 
-tizen.calendar.getCalendars(&quot;EVENT&quot;, calendarListCallback, errorCallback); 
+tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallback);
 </pre></li>
-  </ol> 
+  </ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/guides_w.htm b/org.tizen.guides/html/web/guides_w.htm
index b25c19a..b10271e 100644 (file)
--- a/org.tizen.guides/html/web/guides_w.htm
+++ b/org.tizen.guides/html/web/guides_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Tizen Web Guides</title>  
+       <title>Tizen Web Guides</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -29,10 +29,10 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">Web API References</a></li> 
+                       <li><a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">Web API References</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
@@ -116,10 +116,10 @@
 
 <p>The W3C, HTML5, and supplementary features cover various functionalities you can use in your application. You can use graphics, media, storage, and location features, as well as manage communication and security. These features also enable you to create an application UI using HTML and CSS.</p></li>
 </ul>
-    
+
 <div class="note">
        <strong>Note</strong>
-       In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. 
+       In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional.
 <p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.</p>
 <p>To determine the availability of optional APIs, use the <code>tizen.systeminfo.getCapability()</code> method of the System Information API (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications).</p>
 <p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p>
diff --git a/org.tizen.guides/html/web/localization/localization_w.htm b/org.tizen.guides/html/web/localization/localization_w.htm
index 0388352..947e265 100644 (file)
--- a/org.tizen.guides/html/web/localization/localization_w.htm
+++ b/org.tizen.guides/html/web/localization/localization_w.htm
@@ -43,10 +43,10 @@
 <pre class="prettyprint">
 ┬index.html
 └locales
-&nbsp;&nbsp;└en
-&nbsp;&nbsp;&nbsp;&nbsp;└language.js
-&nbsp;&nbsp;└ko
-&nbsp;&nbsp;&nbsp;&nbsp;└language.js
+  └en
+    └language.js
+  └ko
+    └language.js
 </pre></li>
 <li>Create a common JS object for language strings.
 <p>Define a global JS object in the resource file. In the following example, the JS object is <code>LANG_JSON_DATA</code>. This object defines the key-value pairs for localized strings.</p>
@@ -55,7 +55,7 @@
 <pre class="prettyprint lang-javascript">
 LANG_JSON_DATA=
 {
-&nbsp;&nbsp;&nbsp;&quot;hello&quot;: &quot;hello&quot;
+   "hello": "hello"
 }
 </pre></li>
 
@@ -63,21 +63,21 @@ LANG_JSON_DATA=
 <pre class="prettyprint lang-javascript">
 LANG_JSON_DATA=
 {
-&nbsp;&nbsp;&nbsp;&quot;hello&quot;: &quot;안녕&quot;
+   "hello": "안녕"
 }
 </pre></li>
                </ul>
-        <p>&quot;hello&quot; is the key for the localized string, to be replaced by the value from the appropriate language.</p>
+        <p>"hello" is the key for the localized string, to be replaced by the value from the appropriate language.</p>
 </li>
 <li>Load language resources.
  <p>To load language resources, add the <code>&lt;script&gt;</code> element containing the language resource file in your <code>index.html</code> file:</p>
 <pre class="prettyprint lang-html">
-&lt;script src=&quot;language.js&quot;&gt;&lt;/script&gt;
+&lt;script src="language.js"&gt;&lt;/script&gt;
 </pre>
         <p>
             The Web Runtime loads the <code>language.js</code> file for the current locale and  you can use the defined string element to display localized content. For example:</p>
 <pre class="prettyprint lang-javascript">
-log(&quot;hello=&quot; + LANG_JSON_DATA[&quot;hello&quot;]);
+log("hello=" + LANG_JSON_DATA["hello"]);
 </pre>
 
 <div class="note">
@@ -86,7 +86,7 @@ log(&quot;hello=&quot; + LANG_JSON_DATA[&quot;hello&quot;]);
 <p>If the Web Runtime still fails to find a file in a local folder, it retrieves the folders that match the parent subtag, and prioritizes the files in the subfolders over the files in the local folders closer to the root of the widget package. If after all this, the Web Runtime still cannot find the file, an unexpected problem can occur.</p>
 <p>To avoid problems, leave a default file in the root folder.</p>
 </div>
-               
+
                <p>The following table lists the acceptable locale folder names.</p>
         <p align="center" class="Table"><strong>Table: Locale folder names</strong></p>
             <table>
@@ -177,7 +177,7 @@ log(&quot;hello=&quot; + LANG_JSON_DATA[&quot;hello&quot;]);
             <tr><td>Uzbekistan</td><td><code>uz-uz</code></td></tr>
             <tr><td>Vietnamese</td><td><code>vi-vn</code></td></tr>
              </tbody>    </table></li>
-</ol> 
+</ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/media/audio_w.htm b/org.tizen.guides/html/web/media/audio_w.htm
index 6e18d01..9005d56 100644 (file)
--- a/org.tizen.guides/html/web/media/audio_w.htm
+++ b/org.tizen.guides/html/web/media/audio_w.htm
@@ -47,7 +47,7 @@
   <h1>Audio Management</h1>
 
    <p>Tizen enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices. The available sound types include, for example, system, notifications, alarms, and media.</p>
-   
+
  <p>This feature is supported in mobile and wearable applications only.</p>
 
    <p>The main features of the Sound API include:</p>
@@ -62,7 +62,7 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the Sound API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sound.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sound.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/volume.set&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/volume.set"/&gt;
 </pre>
 
 
@@ -73,7 +73,7 @@
 <li>Get the current volume level using the <code>getVolume()</code> method:
 
 <pre class="prettyprint">
-var vol = tizen.sound.getVolume(&quot;RINGTONE&quot;);
+var vol = tizen.sound.getVolume("RINGTONE");
 </pre>
 
 </li>
@@ -81,7 +81,7 @@ var vol = tizen.sound.getVolume(&quot;RINGTONE&quot;);
 <p>The following example increases the ringtone volume by 10% of the maximum volume level:</p>
 
 <pre class="prettyprint">
-tizen.sound.setVolume(&quot;RINGTONE&quot;, vol + 0.1);
+tizen.sound.setVolume("RINGTONE", vol + 0.1);
 </pre>
 
 </li>
@@ -89,7 +89,7 @@ tizen.sound.setVolume(&quot;RINGTONE&quot;, vol + 0.1);
 
 <pre class="prettyprint">
 var mode = tizen.sound.getSoundMode();
-console.log(&quot;Sound Mode is &quot; + mode);
+console.log("Sound Mode is " + mode);
 </pre>
 
 </li>
@@ -105,9 +105,9 @@ console.log(&quot;Sound Mode is &quot; + mode);
 <pre class="prettyprint">
 function onsuccessCB(type, volume)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;SoundType is &quot; + type);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Volume is &quot; + volume);
-&nbsp;&nbsp;&nbsp;tizen.sound.unsetVolumeChangeListener();
+   console.log("SoundType is " + type);
+   console.log("Volume is " + volume);
+   tizen.sound.unsetVolumeChangeListener();
 }
 
 tizen.sound.setVolumeChangeListener(onsuccessCB);
@@ -119,8 +119,8 @@ tizen.sound.setVolumeChangeListener(onsuccessCB);
 <pre class="prettyprint">
 function onsuccessCB(mode)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Mode is &quot; + mode);
-&nbsp;&nbsp;&nbsp;tizen.sound.unsetSoundModeChangeListener();
+   console.log("Mode is " + mode);
+   tizen.sound.unsetSoundModeChangeListener();
 }
 
 tizen.sound.setSoundModeChangeListener(onsuccessCB);
@@ -138,7 +138,7 @@ var infoArr = tizen.sound.getConnectedDeviceList();
 
 for (var i = 0; i &lt; infoArr.length; i++)
 {
-&nbsp;&nbsp;&nbsp;console.log(infoArr[i].device);
+   console.log(infoArr[i].device);
 }
 </pre>
 </li>
@@ -149,7 +149,7 @@ var infoArr = tizen.sound.getActivatedDeviceList();
 
 for (var i = 0; i &lt; infoArr.length; i++)
 {
-&nbsp;&nbsp;&nbsp;console.log(infoArr[i].device);
+   console.log(infoArr[i].device);
 }
 </pre>
 </li>
@@ -164,23 +164,23 @@ for (var i = 0; i &lt; infoArr.length; i++)
 <pre class="prettyprint">
 function onchangedCB(info)
 {
-&nbsp;&nbsp;&nbsp;if (info.isConnected)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(info.device + &quot; is connected&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(info.device + &quot; is not connected&quot;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;if (info.isActivated)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(info.device + &quot; is activated&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(info.device + &quot; is not activated&quot;);
-&nbsp;&nbsp;&nbsp;}
+   if (info.isConnected)
+   {
+      console.log(info.device + " is connected");
+   }
+   else
+   {
+      console.log(info.device + " is not connected");
+   }
+
+   if (info.isActivated)
+   {
+      console.log(info.device + " is activated");
+   }
+   else
+   {
+      console.log(info.device + " is not activated");
+   }
 }
 
 var listenerId = tizen.sound.addDeviceStateChangeListener(onChangedCB);
diff --git a/org.tizen.guides/html/web/media/camera_w.htm b/org.tizen.guides/html/web/media/camera_w.htm
index 78a9e27..aa1ebc8 100644 (file)
--- a/org.tizen.guides/html/web/media/camera_w.htm
+++ b/org.tizen.guides/html/web/media/camera_w.htm
@@ -46,7 +46,7 @@
 
 <p>You can use the camera features in the Tizen wearable Web applications.</p>
 
-  <p>This feature is supported in wearable applications only.</p> 
+  <p>This feature is supported in wearable applications only.</p>
 
 <p>The main features of the Camera API (Tizen Extension) API include:</p>
 
@@ -65,16 +65,16 @@
 
 <h2 id="access" name="access">Accessing the Camera Device</h2>
 
-  <p>To take advantage of the camera features, you must learn to access the camera device:</p> 
+  <p>To take advantage of the camera features, you must learn to access the camera device:</p>
   <ol>
 <li>Access the camera with the stream that you can receive from the <code>getUserMedia()</code> method. The second parameter for that method is an event handler that is triggered when the stream is successfully retrieved.
 <pre class="prettyprint">
 var stream;
 navigator.webkitGetUserMedia({video: true, audio: false}, gotStreamCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;noStreamCallback);
+                             noStreamCallback);
 function gotStream(rStream)
 {
-&nbsp;&nbsp;&nbsp;stream = rStream;
+   stream = rStream;
 }
 </pre>
 </li>
@@ -92,7 +92,7 @@ function gotCameraCallback(cameraControl)
 
   <h2 id="manage" name="manage">Managing the Camera</h2>
 
-  <p>To take advantage of the camera features, you must learn to manage the camera:</p> 
+  <p>To take advantage of the camera features, you must learn to manage the camera:</p>
   <ul>
    <li>You can record videos with the <code>cameraControl</code> object.
    <p>Use the <code>start()</code> to start the recording, and the <code>stop()</code> method to stop the recording:</p>
@@ -110,18 +110,18 @@ cameraControl.image.takePicture(takePictureSuccess, takePictureError);
 <pre class="prettyprint">
 var recordingSetting =
 {
-&nbsp;&nbsp;&nbsp;fileName: &quot;sample.3gp&quot;;
+   fileName: "sample.3gp";
 }
 cameraControl.recorder.applySettings(recordingSetting,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recorderSettingSuccessCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recorderSettingErrorCallback);
+                                     recorderSettingSuccessCallback,
+                                     recorderSettingErrorCallback);
 </pre>
 
 <div class="note">
        <strong>Note</strong>
        If a setting cannot be set, the error callback is called to resolve the issue.
 </div>
-       </li>  
+       </li>
 </ul>
 
   <h2 id="deallocate" name="deallocate">Deallocating the Camera Preview Stream</h2>
@@ -134,14 +134,14 @@ cameraControl.recorder.applySettings(recordingSetting,
 <pre class="prettyprint">
 function initCameraPreview()
 {
-&nbsp;&nbsp;&nbsp;navigator.webkitGetUserMedia({video: true, audio: false},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPreviewStream,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPreviewStreamError);
+   navigator.webkitGetUserMedia({video: true, audio: false},
+                                onPreviewStream,
+                                onPreviewStreamError);
 }
 
 function onPreviewStream(stream)
 {
-&nbsp;&nbsp;&nbsp;cameraStream = stream;
+   cameraStream = stream;
 }
 </pre>
 </li>
@@ -149,14 +149,14 @@ function onPreviewStream(stream)
 <pre class="prettyprint">
 function onVisibilityChange()
 {
-&nbsp;&nbsp;&nbsp;if (document.visibilityState !== &#39;visible&#39;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraStream.stop();
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initCameraPreview();
-&nbsp;&nbsp;&nbsp;}
+   if (document.visibilityState !== 'visible')
+   {
+      cameraStream.stop();
+   }
+   else
+   {
+      initCameraPreview();
+   }
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/media/jpeg_exif_w.htm b/org.tizen.guides/html/web/media/jpeg_exif_w.htm
index 7fd100a..9e375de 100644 (file)
--- a/org.tizen.guides/html/web/media/jpeg_exif_w.htm
+++ b/org.tizen.guides/html/web/media/jpeg_exif_w.htm
@@ -49,8 +49,8 @@
 
 <p>Tizen enables you to access and modify EXIF information in a JPEG file (with the common <code>.jpg</code> extension).</p>
 
-<p>The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p> 
-  
+<p>The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
+
 <p>The main features of the Exif API include:</p>
 <ul>
  <li>Loading EXIF information<p>You can <a href="#load">retrieve EXIF information from a JPEG file</a>. You can also retrieve the thumbnail image of the file.</p>   </li>
@@ -66,20 +66,20 @@
 <li><p>To retrieve the EXIF data from specific file, you need the URI of an image file in an absolute URI format (for example <code>file:///opt/usr/media/Images/tizen.jpg</code>). The <code>tizen.filesystem.resolve()</code> and <code>toURI()</code> methods can be used to convert a virtual path to a URI.</p>
 
 <pre class="prettyprint">
-var fileURI = &quot;&quot;;
+var fileURI = "";
 function resolveSuccess(file)
 {
-&nbsp;&nbsp;&nbsp;fileURI = file.toURI();
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully resolved file: &quot; + fileURI);
+   fileURI = file.toURI();
+   console.log("Successfully resolved file: " + fileURI);
 }
 
 function resolveFail(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;resolve() error occurred: &quot; + error.name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; with message: &quot; + error.message);
+   console.log("resolve() error occurred: " + error.name
+               + " with message: " + error.message);
 }
 
-tizen.filesystem.resolve(&quot;images/tizen.jpg&quot;, resolveSuccess, resolveFail);
+tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);
 </pre></li>
 
 <li><p>With a valid <code>File</code> object, use the <code>getExifInfo()</code> method of the <code>ExifManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifManager">TV</a> applications) and pass the URI to the method.</p>
@@ -87,12 +87,12 @@ tizen.filesystem.resolve(&quot;images/tizen.jpg&quot;, resolveSuccess, resolveFa
 <pre class="prettyprint">
 function onSuccess(exifInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully got EXIF information object&quot;);
+   console.log("Successfully got EXIF information object");
 }
 
 function onError(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.name + &quot; with message:&quot; + error.message);
+   console.log("Error occurred: " + error.name + " with message:" + error.message);
 }
 
 tizen.exif.getExifInfo(fileURI, onSuccess, onError);
@@ -104,9 +104,9 @@ tizen.exif.getExifInfo(fileURI, onSuccess, onError);
 <ol type="a"><li>Resolve the input JPEG file:
 
 <pre class="prettyprint">
-var fileURI = &quot;&quot;;
+var fileURI = "";
 
-tizen.filesystem.resolve(&quot;images/tizen.jpg&quot;, resolveSuccess, resolveFail);
+tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);
 </pre></li>
 
 <li>Use the <code>getThumbnail()</code> method to retrieve the thumbnail:
@@ -114,26 +114,26 @@ tizen.filesystem.resolve(&quot;images/tizen.jpg&quot;, resolveSuccess, resolveFa
 <pre class="prettyprint">
 function onSuccess(thumbData)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Got thumbnail data from EXIF stored in JPEG file&quot;);
-&nbsp;&nbsp;&nbsp;if (thumbData)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var img = new Image();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.src = thumbData;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.appendChild(img);
-&nbsp;&nbsp;&nbsp;}
+   console.log("Got thumbnail data from EXIF stored in JPEG file");
+   if (thumbData)
+   {
+      var img = new Image();
+      img.src = thumbData;
+      document.body.appendChild(img);
+   }
 }
 
 function onError(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; with message: &quot; + error.message);
+   console.log("Error occurred: " + error.name
+               + " with message: " + error.message);
 }
 
 function resolveSuccess(file)
 {
-&nbsp;&nbsp;&nbsp;fileURI = file.toURI();
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully resolved file: &quot; + file.toURI());
-&nbsp;&nbsp;&nbsp;tizen.exif.getThumbnail(fileURI, onSuccess, onError);
+   fileURI = file.toURI();
+   console.log("Successfully resolved file: " + file.toURI());
+   tizen.exif.getThumbnail(fileURI, onSuccess, onError);
 }
 </pre></li></ol></li>
 
@@ -148,7 +148,7 @@ function resolveSuccess(file)
 
 <pre class="prettyprint">
 var myNewExif = new tizen.ExifInformation();
-myNewExif.userComment = &quot;Photo taken on Charles Bridge in Prague&quot;;
+myNewExif.userComment = "Photo taken on Charles Bridge in Prague";
 myNewExif.gpsLocation = new tizen.SimpleCoordinates(50.086447, 14.411856);
 </pre>
 
@@ -157,19 +157,19 @@ myNewExif.gpsLocation = new tizen.SimpleCoordinates(50.086447, 14.411856);
 <li><p>Resolve the virtual path to the output JPEG file and get the URI:</p>
 
 <pre class="prettyprint">
-var fileNoExifURI = &quot;&quot;;
+var fileNoExifURI = "";
 function resolveSuccess(file)
 {
-&nbsp;&nbsp;&nbsp;fileNoExifURI = file.toURI();
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully resolved file: &quot; + fileNoExifURI);
+   fileNoExifURI = file.toURI();
+   console.log("Successfully resolved file: " + fileNoExifURI);
 }
 
 function resolveFail(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.name + &quot; with message: &quot; + error.message);
+   console.log("Error occurred: " + error.name + " with message: " + error.message);
 }
 
-tizen.filesystem.resolve(&quot;images/image_without_exif.jpg&quot;, resolveSuccess, resolveFail);
+tizen.filesystem.resolve("images/image_without_exif.jpg", resolveSuccess, resolveFail);
 </pre>
 
 </li>
@@ -179,12 +179,12 @@ tizen.filesystem.resolve(&quot;images/image_without_exif.jpg&quot;, resolveSucce
 <pre class="prettyprint">
 function onSaveSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully saved EXIF information to JPEG file&quot;);
+   console.log("Successfully saved EXIF information to JPEG file");
 }
 
 function onSaveError(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred:&quot; + error.name + &quot; with message:&quot; + error.message);
+   console.log("Error occurred:" + error.name + " with message:" + error.message);
 }
 
 myNewExif.uri = fileNoExifURI;
@@ -204,18 +204,18 @@ tizen.exif.saveExifInfo(myNewExif, onSaveSuccess, onSaveError);
 <pre class="prettyprint">
 function getSuccess(exifInfo)
 {
-&nbsp;&nbsp;&nbsp;exifInfo.orientation = &quot;FLIP_HORIZONTAL&quot;;
-&nbsp;&nbsp;&nbsp;exifInfo.userComment = &quot;Great times!&quot;;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;/* Remove basic GPS information */
-&nbsp;&nbsp;&nbsp;exifInfo.gpsLocation = null;
-&nbsp;&nbsp;&nbsp;exifInfo.gpsAltitude = null;
+   exifInfo.orientation = "FLIP_HORIZONTAL";
+   exifInfo.userComment = "Great times!";
+
+   /* Remove basic GPS information */
+   exifInfo.gpsLocation = null;
+   exifInfo.gpsAltitude = null;
 }
 
-tizen.filesystem.resolve(&quot;images/photo.jpg&quot;, function(file)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.exif.getExifInfo(file.toURI(), getSuccess);
-&nbsp;&nbsp;&nbsp;});
+tizen.filesystem.resolve("images/photo.jpg", function(file)
+   {
+      tizen.exif.getExifInfo(file.toURI(), getSuccess);
+   });
 </pre></li>
 
 <li>After updating the property values, use the <code>saveExifInfo()</code> method of the <code>ExifManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifManager">TV</a> applications) to save the changes to the file:
@@ -223,7 +223,7 @@ tizen.filesystem.resolve(&quot;images/photo.jpg&quot;, function(file)
 <pre class="prettyprint">
 function saveSuccess(exifInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;new EXIF saved&quot;);
+   console.log("new EXIF saved");
 }
 
 tizen.exif.saveExifInfo(exifInfo, saveSuccess);
@@ -242,21 +242,21 @@ var sourceExifInfo = null;
 
 function resolveOutSuccess(outFile)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully resolved file: &quot; + outFile.toURI());
-&nbsp;&nbsp;&nbsp;sourceExifInfo.uri = outFile.toURI();
+   console.log("Successfully resolved file: " + outFile.toURI());
+   sourceExifInfo.uri = outFile.toURI();
 }
 
 function resolveOutFail(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.name + &quot; with message: &quot; + error.message);
+   console.log("Error occurred: " + error.name + " with message: " + error.message);
 }
 
 function onSuccess(exifInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully got EXIF information object&quot;);
-&nbsp;&nbsp;&nbsp;sourceExifInfo = exifInfo;
-&nbsp;&nbsp;&nbsp;tizen.filesystem.resolve(&quot;images/image_without_exif.jpg&quot;, resolveOutSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolveOutFail);
+   console.log("Successfully got EXIF information object");
+   sourceExifInfo = exifInfo;
+   tizen.filesystem.resolve("images/image_without_exif.jpg", resolveOutSuccess,
+                            resolveOutFail);
 }
 
 tizen.exif.getExifInfo(fileURI, onSuccess);
@@ -267,19 +267,19 @@ tizen.exif.getExifInfo(fileURI, onSuccess);
 <pre class="prettyprint">
 function onSaveSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully saved EXIF information to JPEG file&quot;);
+   console.log("Successfully saved EXIF information to JPEG file");
 }
 
 function onSaveError(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred:&quot; + error.name + &quot; with message:&quot; + error.message);
+   console.log("Error occurred:" + error.name + " with message:" + error.message);
 }
 
 function resolveOutSuccess(outFile)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully resolved file: &quot; + outFile.toURI());
-&nbsp;&nbsp;&nbsp;sourceExifInfo.uri = outFile.toURI();
-&nbsp;&nbsp;&nbsp;tizen.exif.saveExifInfo(sourceExifInfo, onSaveSuccess, onSaveError);
+   console.log("Successfully resolved file: " + outFile.toURI());
+   sourceExifInfo.uri = outFile.toURI();
+   tizen.exif.saveExifInfo(sourceExifInfo, onSaveSuccess, onSaveError);
 }
 </pre></li>
 
diff --git a/org.tizen.guides/html/web/media/media_controller_w.htm b/org.tizen.guides/html/web/media/media_controller_w.htm
index e7b49fd..f3f881b 100644 (file)
--- a/org.tizen.guides/html/web/media/media_controller_w.htm
+++ b/org.tizen.guides/html/web/media/media_controller_w.htm
@@ -47,10 +47,10 @@
    <p>Tizen provides a functionality for you to communicate between the media controller server and client.</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
-   
+
 <p>To manage the media using the Media Controller API, you have to develop 2 applications:</p>
 <ul><li>Client that sends requests to the server in order to change, for example, the playback state and position modes.</li>
-<li>Server that directly manages the media on the device.</li></ul>  
+<li>Server that directly manages the media on the device.</li></ul>
 
 <p>The main features of the Media Controller API include:</p>
    <ul>
@@ -74,8 +74,8 @@
 
 <p>To use the Media Controller API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/mediacontroller.client&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/mediacontroller.server&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/mediacontroller.client"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/mediacontroller.server"/&gt;
 </pre>
 
 
@@ -103,16 +103,16 @@ var mcServerInfo;
 
 function findSuccessCallback(servers)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Found &quot; + servers.length + &quot; servers&quot;);
-&nbsp;&nbsp;&nbsp;if (servers.length &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mcServerInfo = servers[0];
-&nbsp;&nbsp;&nbsp;}
+   console.log("Found " + servers.length + " servers");
+   if (servers.length &gt; 0)
+   {
+      mcServerInfo = servers[0];
+   }
 }
 
 function findErrorCallback(e)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error name: &quot; + e.name + &quot; Error message: &quot; + e.message);
+   console.log("Error name: " + e.name + " Error message: " + e.message);
 }
 </pre>
 
@@ -137,28 +137,28 @@ mcClient.findServers(findSuccessCallback, findErrorCallback);
 <pre class="prettyprint">
 var requestPlaybackInfoCb =
 {
-&nbsp;&nbsp;&nbsp;onplaybackstaterequest: function(state)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Request to change the playback state to: &#39; + state);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mcServer.updatePlaybackState(state);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onplaybackpositionrequest: function(position)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Request to change the playback position to: &#39; + position);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mcServer.updatePlaybackPosition(position);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onshufflemoderequest: function(mode)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Request to change the playback shuffle mode to: &#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (mode ? &#39;TRUE&#39; : &#39;FALSE&#39;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mcServer.updateShuffleMode(mode);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onrepeatmoderequest: function(mode)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Request to change the playback repeat mode to: &#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (mode ? &#39;TRUE&#39; : &#39;FALSE&#39;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mcServer.updateRepeatMode(mode);
-&nbsp;&nbsp;&nbsp;}
+   onplaybackstaterequest: function(state)
+   {
+      console.log('Request to change the playback state to: ' + state);
+      mcServer.updatePlaybackState(state);
+   },
+   onplaybackpositionrequest: function(position)
+   {
+      console.log('Request to change the playback position to: ' + position);
+      mcServer.updatePlaybackPosition(position);
+   },
+   onshufflemoderequest: function(mode)
+   {
+      console.log('Request to change the playback shuffle mode to: '
+                  + (mode ? 'TRUE' : 'FALSE'));
+      mcServer.updateShuffleMode(mode);
+   },
+   onrepeatmoderequest: function(mode)
+   {
+      console.log('Request to change the playback repeat mode to: '
+                  + (mode ? 'TRUE' : 'FALSE'));
+      mcServer.updateRepeatMode(mode);
+   }
 };
 </pre>
 </li>
@@ -175,12 +175,12 @@ var watchId = mcServer.addChangeRequestPlaybackInfoListener(requestPlaybackInfoC
 <pre class="prettyprint">
 function successCallback()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Playback has been paused.&quot;);
+   console.log("Playback has been paused.");
 }
 
 function errorCallback(e)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error name: &quot; + e.name + &quot; Error message: &quot; + e.message);
+   console.log("Error name: " + e.name + " Error message: " + e.message);
 }
 </pre>
 
@@ -190,7 +190,7 @@ function errorCallback(e)
 </p>
 
 <pre class="prettyprint">
-mcServerInfo.sendPlaybackState(&quot;PAUSE&quot;, successCallback, errorCallback);
+mcServerInfo.sendPlaybackState("PAUSE", successCallback, errorCallback);
 </pre>
 
 </li>
@@ -212,23 +212,23 @@ var watcherId;
 <pre class="prettyprint">
 var playbackListener =
 {
-&nbsp;&nbsp;&nbsp;onplaybackchanged: function(state, position)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Current playback state: &quot; + state);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Current playback position: &quot; + position);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onshufflemodechanged: function(mode)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Shuffle mode changed to: &quot; + mode);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onrepeatmodechanged: function(mode)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(&quot;Repeat mode changed to: &quot; + mode);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onmetadatachanged: function(metadata)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Playback metadata changed: &quot; + JSON.stringify(metadata));
-&nbsp;&nbsp;&nbsp;}
+   onplaybackchanged: function(state, position)
+   {
+      console.log("Current playback state: " + state);
+      console.log("Current playback position: " + position);
+   },
+   onshufflemodechanged: function(mode)
+   {
+      console.log("Shuffle mode changed to: " + mode);
+   },
+   onrepeatmodechanged: function(mode)
+   {
+       console.log("Repeat mode changed to: " + mode);
+   },
+   onmetadatachanged: function(metadata)
+   {
+      console.log("Playback metadata changed: " + JSON.stringify(metadata));
+   }
 };
 </pre>
 
@@ -260,7 +260,7 @@ mcServerInfo.removePlaybackInfoChangeListener(watcherId);
 <pre class="prettyprint">
 var exampleCustomCommandData =
 {
-&nbsp;&nbsp;&nbsp;myFilter: &quot;rock&quot;
+   myFilter: "rock"
 };
 </pre>
 
@@ -270,12 +270,12 @@ var exampleCustomCommandData =
 <pre class="prettyprint">
 function sendCommandSuccessCallback(response)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Command executed with result: &quot; + JSON.stringify(response));
+   console.log("Command executed with result: " + JSON.stringify(response));
 }
 
 function sendCommandErrorCallback(e)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error name: &quot; + e.name + &quot; Error message: &quot; + e.message);
+   console.log("Error name: " + e.name + " Error message: " + e.message);
 }
 </pre>
 
@@ -283,8 +283,8 @@ function sendCommandErrorCallback(e)
 <li>Send the command to the server using the <code>sendCommand()</code> method:
 
 <pre class="prettyprint">
-mcServerInfo.sendCommand(&quot;myPlaylistFilter&quot;, sendCommandSuccessCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sendCommandErrorCallback);
+mcServerInfo.sendCommand("myPlaylistFilter", sendCommandSuccessCallback,
+                         sendCommandErrorCallback);
 </pre>
 
 </li>
@@ -297,10 +297,10 @@ mcServerInfo.sendCommand(&quot;myPlaylistFilter&quot;, sendCommandSuccessCallbac
 <pre class="prettyprint">
 var commandReceiveListener = function(client, command, data)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;command: &#39; + command + &#39; client: &#39; + client
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39; data: &#39; + JSON.stringify(data));
+   console.log('command: ' + command + ' client: ' + client
+               + ' data: ' + JSON.stringify(data));
 
-&nbsp;&nbsp;&nbsp;return {reply: &#39;response from server&#39;};
+   return {reply: 'response from server'};
 };
 </pre>
 <p>The callback within the listener returns the object with the response to the client. The client can obtain this value as an argument of the success callback of the <code>sendCommand()</code> method that it used to send the command.</p>
diff --git a/org.tizen.guides/html/web/media/media_cover_w.htm b/org.tizen.guides/html/web/media/media_cover_w.htm
index 1acf8a5..bc8318d 100644 (file)
--- a/org.tizen.guides/html/web/media/media_cover_w.htm
+++ b/org.tizen.guides/html/web/media/media_cover_w.htm
@@ -28,7 +28,7 @@
                        <li>Tizen 3.0 and Higher for TV</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Media and Camera</h1>
diff --git a/org.tizen.guides/html/web/media/media_key_w.htm b/org.tizen.guides/html/web/media/media_key_w.htm
index 60a735e..d39ca8c 100644 (file)
--- a/org.tizen.guides/html/web/media/media_key_w.htm
+++ b/org.tizen.guides/html/web/media/media_key_w.htm
@@ -65,14 +65,14 @@
 <pre class="prettyprint">
 var myMediaKeyChangeListener =
 {
-&nbsp;&nbsp;&nbsp;onpressed: function(key)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Pressed key: &quot; + key);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onreleased: function(key)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Released key: &quot; + key);
-&nbsp;&nbsp;&nbsp;}
+   onpressed: function(key)
+   {
+      console.log("Pressed key: " + key);
+   },
+   onreleased: function(key)
+   {
+      console.log("Released key: " + key);
+   }
 }
 </pre>
 
@@ -89,7 +89,7 @@ tizen.mediakey.setMediaKeyEventListener(myMediaKeyChangeListener);
 tizen.mediakey.unsetMediaKeyEventListener();
 </pre>
 
-</li></ol> 
+</li></ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/media/player_util_w.htm b/org.tizen.guides/html/web/media/player_util_w.htm
index b2c7900..307f823 100644 (file)
--- a/org.tizen.guides/html/web/media/player_util_w.htm
+++ b/org.tizen.guides/html/web/media/player_util_w.htm
@@ -60,11 +60,11 @@
 var latencyMode;
 try
 {
-&nbsp;&nbsp;&nbsp;latencyMode = tizen.playerutil.getLatencyMode();
+   latencyMode = tizen.playerutil.getLatencyMode();
 }
 catch (error)
 {
-&nbsp;&nbsp;&nbsp;console.log(error.name + &#39;: &#39; + error.message);
+   console.log(error.name + ': ' + error.message);
 }
 </pre>
 
@@ -76,11 +76,11 @@ catch (error)
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.playerutil.setLatencyMode('HIGH');
+   tizen.playerutil.setLatencyMode('HIGH');
 }
 catch (error)
 {
-&nbsp;&nbsp;&nbsp;console.log(error.name + &#39;: &#39; + error.message);
+   console.log(error.name + ': ' + error.message);
 }
 </pre>
 
diff --git a/org.tizen.guides/html/web/media/radio_w.htm b/org.tizen.guides/html/web/media/radio_w.htm
index 7ad1c47..a93359b 100644 (file)
--- a/org.tizen.guides/html/web/media/radio_w.htm
+++ b/org.tizen.guides/html/web/media/radio_w.htm
@@ -44,7 +44,7 @@
 <p>Tizen enables you to access and control the FM radio on the device.</p>
 
 <p>This feature is supported in mobile applications only.</p>
-  
+
 <p>The main features of the FM Radio API include:</p>
 <ul>
 <li>Managing the radio
@@ -75,9 +75,9 @@
 var radioState = tizen.fmradio.state;
 var frequencyToPlay = 99.0;
 
-if (radioState == &quot;READY&quot; || radioState == &quot;PLAYING&quot;)
+if (radioState == "READY" || radioState == "PLAYING")
 {
-&nbsp;&nbsp;&nbsp;tizen.fmradio.start(frequencyToPlay);
+   tizen.fmradio.start(frequencyToPlay);
 }
 </pre>
 <p>
@@ -98,9 +98,9 @@ tizen.fmradio.start(newFrequency);
 <pre class="prettyprint">
 var radioState = tizen.fmradio.state;
 
-if (radioState == &quot;PLAYING&quot;)
+if (radioState == "PLAYING")
 {
-&nbsp;&nbsp;&nbsp;tizen.fmradio.stop();
+   tizen.fmradio.stop();
 }
 </pre>
 </li>
@@ -115,9 +115,9 @@ if (radioState == &quot;PLAYING&quot;)
 <p>To find a radio channel at a higher frequency than the current one, use the <code>seekUp()</code>method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface. This function is available only in <code>PLAYING</code> radio state.</p>
 
 <pre class="prettyprint">
-if (tizen.fmradio.state === &quot;PLAYING&quot;)
+if (tizen.fmradio.state === "PLAYING")
 {
-&nbsp;&nbsp;&nbsp;tizen.fmradio.seekUp(successCallback, errorCallback);
+   tizen.fmradio.seekUp(successCallback, errorCallback);
 }
 </pre>
 </li>
@@ -126,9 +126,9 @@ if (tizen.fmradio.state === &quot;PLAYING&quot;)
 <p>To find a radio channel at a lower frequency than the current one, use the <code>seekDown()</code>method of the <code>FMRadioManager</code> interface. This function is available only in <code>PLAYING</code> radio state.</p>
 
 <pre class="prettyprint">
-if (tizen.fmradio.state === &quot;PLAYING&quot;)
+if (tizen.fmradio.state === "PLAYING")
 {
-&nbsp;&nbsp;&nbsp;tizen.fmradio.seekDown(successCallback, errorCallback);
+   tizen.fmradio.seekDown(successCallback, errorCallback);
 }
 </pre>
 </li>
@@ -137,23 +137,23 @@ if (tizen.fmradio.state === &quot;PLAYING&quot;)
 <pre class="prettyprint">
 var radioScanCallback =
 {
-&nbsp;&nbsp;&nbsp;onfrequencyfound: function(frequency)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;A new frequency found: &quot; + frequency);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onfinished: function(frequencies)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(frequencies.length + &quot;frequencies found!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; frequencies.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(i + &quot;: &quot; + frequencies[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   onfrequencyfound: function(frequency)
+   {
+      console.log("A new frequency found: " + frequency);
+   },
+   onfinished: function(frequencies)
+   {
+      console.log(frequencies.length + "frequencies found!");
+      for (var i = 0; i &lt; frequencies.length; i++)
+      {
+         console.log(i + ": " + frequencies[i]);
+      }
+   }
 };
 
-if (tizen.fmradio.state === &quot;READY&quot;)
+if (tizen.fmradio.state === "READY")
 {
-&nbsp;&nbsp;&nbsp;tizen.fmradio.scanStart(radioScanCallback, errorCallback);
+   tizen.fmradio.scanStart(radioScanCallback, errorCallback);
 }
 </pre>
 
@@ -164,12 +164,12 @@ if (tizen.fmradio.state === &quot;READY&quot;)
 <pre class="prettyprint">
 function successCallback()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The scanning stops&quot;);
+   console.log("The scanning stops");
 }
 
-if (tizen.fmradio.state === &quot;SCANNING&quot;)
+if (tizen.fmradio.state === "SCANNING")
 {
-&nbsp;&nbsp;&nbsp;tizen.fmradio.scanStop(successCallback, errorCallback);
+   tizen.fmradio.scanStop(successCallback, errorCallback);
 }
 </pre>
 </li>
@@ -185,18 +185,18 @@ if (tizen.fmradio.state === &quot;SCANNING&quot;)
 <pre class="prettyprint">
 var interruptCallback =
 {
-&nbsp;&nbsp;&nbsp;oninterrupted: function(reason)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Radio interrupted: &quot; + reason);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;oninterruptfinished: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The radio interruption finished.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tizen.radio.state === &quot;READY&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.radio.start();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   oninterrupted: function(reason)
+   {
+      console.log("Radio interrupted: " + reason);
+   },
+   oninterruptfinished: function()
+   {
+      console.log("The radio interruption finished.");
+      if (tizen.radio.state === "READY")
+      {
+         tizen.radio.start();
+      }
+   }
 };
 
 tizen.fmradio.setFMRadioInterruptedListener(interruptCallback);
diff --git a/org.tizen.guides/html/web/messaging/messages_w.htm b/org.tizen.guides/html/web/messaging/messages_w.htm
index 2f9e84e..2755cb1 100644 (file)
--- a/org.tizen.guides/html/web/messaging/messages_w.htm
+++ b/org.tizen.guides/html/web/messaging/messages_w.htm
@@ -79,8 +79,8 @@
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/messaging.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/messaging.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/messaging.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/messaging.write"/&gt;
 </pre>
 
 
@@ -95,45 +95,45 @@
 
 <p>To create and send messages:</p>
   <ol>
-<li><p>Retrieve the messaging service using the <code>getMessageServices()</code> method. The first parameter specifies the type of the messaging service to retrieve. There are 3 possible types: &quot;messaging.sms&quot;, &quot;messaging.mms&quot; and &quot;messaging.email&quot;. In the following example, the SMS service is retrieved.</p>
+<li><p>Retrieve the messaging service using the <code>getMessageServices()</code> method. The first parameter specifies the type of the messaging service to retrieve. There are 3 possible types: "messaging.sms", "messaging.mms" and "messaging.email". In the following example, the SMS service is retrieved.</p>
 <pre class="prettyprint">
 function errorCallback(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(error.name + &quot;: &quot; + error.message);
+   console.log(error.name + ": " + error.message);
 }
 
-tizen.messaging.getMessageServices(&quot;messaging.sms&quot;, serviceListCB, errorCallback);
+tizen.messaging.getMessageServices("messaging.sms", serviceListCB, errorCallback);
 </pre></li>
 
-<li><p>In the success callback of the <code>getMessageServices()</code> method, use the <code>Message</code> interface to define the content and attributes of the message, and then send the message using the <code>sendMessage()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface. The <code>sendMessage()</code> method requires both success and error event handlers. Depending on the result of the sending operation, the message is moved to the device&#39;s Sent Items or Drafts folder, and additionally stored in the message storage database.</p> 
+<li><p>In the success callback of the <code>getMessageServices()</code> method, use the <code>Message</code> interface to define the content and attributes of the message, and then send the message using the <code>sendMessage()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface. The <code>sendMessage()</code> method requires both success and error event handlers. Depending on the result of the sending operation, the message is moved to the device's Sent Items or Drafts folder, and additionally stored in the message storage database.</p>
 <p>If the message is not ready to be sent yet, save the message draft using the <code>addDraftMessage()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p>
 <pre class="prettyprint">
 function onAddSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully added&quot;);
+   console.log("Successfully added");
 }
 
 function serviceListCB(services)
 {
-&nbsp;&nbsp;&nbsp;/* Define SMS message */
-&nbsp;&nbsp;&nbsp;var msg = new tizen.Message(&quot;messaging.sms&quot;,
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plainBody: &quot;I will arrive in 10 minutes.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: [&quot;+34666666666&quot;, &quot;+34888888888&quot;]
-&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;var msgReady = true;
-
-&nbsp;&nbsp;&nbsp;if (msgReady)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Send SMS message */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;services[0].sendMessage(msg, messageSent, errorCallback);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save a draft */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;services[0].messageStorage.addDraftMessage(msg, onAddSuccess, errorCallback); 
-&nbsp;&nbsp;&nbsp;}
+   /* Define SMS message */
+   var msg = new tizen.Message("messaging.sms",
+   {
+      plainBody: "I will arrive in 10 minutes.",
+      to: ["+34666666666", "+34888888888"]
+   });
+
+   var msgReady = true;
+
+   if (msgReady)
+   {
+      /* Send SMS message */
+      services[0].sendMessage(msg, messageSent, errorCallback);
+   }
+   else
+   {
+      /* Save a draft */
+      services[0].messageStorage.addDraftMessage(msg, onAddSuccess, errorCallback);
+   }
 }
 </pre>
 <p>In case you are sending MMS or email messages with attachments, add the attachments as an array of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageAttachment">MessageAttachment</a> objects with the file path and the MIME type (<code>image/png</code>, <code>text/pdf</code>, or <code>text/html</code>) defined for each object.</p>
@@ -141,22 +141,22 @@ function serviceListCB(services)
 <p>Assign the array to the <code>attachments</code> attribute of the <code>Message</code> object.</p>
 
 <pre class="prettyprint">
-var msg = new tizen.Message(&quot;messaging.email&quot;);
-msg.attachments = [new tizen.MessageAttachment(&quot;images/myimage.png&quot;, &quot;image/png&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.MessageAttachment(&quot;docs/mydoc.pdf&quot;,&quot;text/pdf&quot;)];
+var msg = new tizen.Message("messaging.email");
+msg.attachments = [new tizen.MessageAttachment("images/myimage.png", "image/png"),
+                   new tizen.MessageAttachment("docs/mydoc.pdf","text/pdf")];
 </pre></li>
 <li><p>Define the message sending success callback that is called if the message is sent successfully. (For email, that means that the message is sent to the email delivery system, not to the final recipient of the message.) </p>
 <p>For messaging technologies, such as SMS, where the message is sent individually to every message recipient, the success callback must be invoked individually for each recipient.</p>
 <pre class="prettyprint">
 function messageSent(recipients)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; recipients.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The SMS has been sent to &quot; + recipients[i]);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; recipients.length; i++)
+   {
+      console.log("The SMS has been sent to " + recipients[i]);
+   }
 }
 </pre>
-<p>Defining a sending error callback allows you to handle all possible errors and exceptions that can occur causing the message delivery to fail.</p> </li> 
+<p>Defining a sending error callback allows you to handle all possible errors and exceptions that can occur causing the message delivery to fail.</p> </li>
   </ol>
 
 <h2 id="Selecting_the_SIM_Card" name="Selecting_the_SIM_Card">Selecting the SIM Card for Sending Messages</h2>
@@ -165,10 +165,10 @@ function messageSent(recipients)
 <ol>
 <li>To check how many SIM cards are available, call the <code>getCount()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">SystemInfo</a> interface.
 <pre class="prettyprint">
-var count = tizen.systeminfo.getCount(&quot;SIM&quot;);
+var count = tizen.systeminfo.getCount("SIM");
 if (count &gt; 1)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Dual SIM is supported&quot;);
+   console.log("Dual SIM is supported");
 }
 </pre>
 </li>
@@ -176,13 +176,13 @@ if (count &gt; 1)
 <pre class="prettyprint">
 function getPropertySuccess(sims)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; sims.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;SIM&quot; + (i+1) + &quot; - &quot; + sims[i].msisdn
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; (&quot; + sims[i].operatorName + &quot;) &quot; + sims[i].state);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; sims.length; i++)
+   {
+      console.log("SIM" + (i+1) + " - " + sims[i].msisdn
+                  + " (" + sims[i].operatorName + ") " + sims[i].state);
+   }
 }
-tizen.systeminfo.getPropertyValueArray(&quot;SIM&quot;, getPropertySuccess);
+tizen.systeminfo.getPropertyValueArray("SIM", getPropertySuccess);
 </pre>
 <p>The information can be presented to the user to let them select the SIM card they want.</p>
 </li>
@@ -190,21 +190,21 @@ tizen.systeminfo.getPropertyValueArray(&quot;SIM&quot;, getPropertySuccess);
 <pre class="prettyprint">
 function sendSuccess()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Message has been sent&quot;);
+   console.log("Message has been sent");
 }
 
 function serviceSuccess(messageService)
 {
-&nbsp;&nbsp;&nbsp;message = new Message(messageService.type,
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to: [&quot;0001&quot;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plainBody: &quot;Surprise!&quot;
-&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;/* SIM is selected (first SIM - 1, second SIM - 2) */
-&nbsp;&nbsp;&nbsp;messageService.sendMessage(message, sendSuccess, null, 2);
+   message = new Message(messageService.type,
+   {
+      to: ["0001"],
+      plainBody: "Surprise!"
+   });
+   /* SIM is selected (first SIM - 1, second SIM - 2) */
+   messageService.sendMessage(message, sendSuccess, null, 2);
 }
 
-tizen.messaging.getMessageServices(&quot;messaging.sms&quot;, serviceSuccess);
+tizen.messaging.getMessageServices("messaging.sms", serviceSuccess);
 </pre>
 </li>
 </ol>
@@ -214,19 +214,19 @@ tizen.messaging.getMessageServices(&quot;messaging.sms&quot;, serviceSuccess);
 
 <p>To work with messages in the message store:</p>
   <ol>
-   <li><p>Retrieve messages whose sender is &quot;me&quot; from the message storage using the <code>findMessages()</code> method of the <code>MessageStorage</code> interface .</p>
+   <li><p>Retrieve messages whose sender is "me" from the message storage using the <code>findMessages()</code> method of the <code>MessageStorage</code> interface .</p>
    <p>When searching for messages, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#messaging">specific filter attributes</a>. You can also <a href="../data/data_filter_w.htm#use_modes">sort the search results</a>.</p>
 <pre class="prettyprint">
 var emailService;
 function serviceListCB(services)
 {
-&nbsp;&nbsp;&nbsp;emailService = services[0];
-&nbsp;&nbsp;&nbsp;/* Set the attribute filter */
-&nbsp;&nbsp;&nbsp;var filter = new tizen.AttributeFilter(&quot;from&quot;, &quot;CONTAINS&quot;, &quot;me&quot;);
+   emailService = services[0];
+   /* Set the attribute filter */
+   var filter = new tizen.AttributeFilter("from", "CONTAINS", "me");
 
-&nbsp;&nbsp;&nbsp;emailService.messageStorage.findMessages(filter, messageArrayCB);
+   emailService.messageStorage.findMessages(filter, messageArrayCB);
 }
-tizen.messaging.getMessageServices(&quot;messaging.email&quot;, serviceListCB);
+tizen.messaging.getMessageServices("messaging.email", serviceListCB);
 </pre>
 <p>The <code>findMessages()</code> method returns an array of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Message">Message</a> objects as the search result.</p> <p>The search result does not contain the actual bodies of the messages. To <a href="#Synchronizing_with_the_Server">load a message body</a>, call the <code>loadMessageBody()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface.</p> </li>
    <li><p>To update a message in the message storage, use the <code>updateMessages()</code> method. The method uses an array of <code>Message</code> objects found previously by the <code>findMessages()</code> method as a parameter.</p>
@@ -234,26 +234,26 @@ tizen.messaging.getMessageServices(&quot;messaging.email&quot;, serviceListCB);
 <pre class="prettyprint">
 function successCallback()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Success&quot;);
+   console.log("Success");
 }
 
-function messageArrayCB(messages) 
+function messageArrayCB(messages)
 {
-&nbsp;&nbsp;&nbsp;messages[0].isRead = true;
-&nbsp;&nbsp;&nbsp;emailService.messageStorage.updateMessages(messages, successCallback);
+   messages[0].isRead = true;
+   emailService.messageStorage.updateMessages(messages, successCallback);
 }
 </pre></li>
    <li><p>To delete a message from the message storage, use the <code>removeMessages()</code> method:</p>
 <pre class="prettyprint">
 function messageArrayCB(messages)
 {
-&nbsp;&nbsp;&nbsp;emailService.messagingStorage.removeMessages(messages, successCallback);
+   emailService.messagingStorage.removeMessages(messages, successCallback);
 }
 </pre></li>
   </ol>
 
   <h2 id="Find_Folders" name="Find_Folders">Finding Folders</h2>
-<p>To find message folders, use the <code>findFolders()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface:</p>  
+<p>To find message folders, use the <code>findFolders()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface:</p>
 <ol>
    <li><p>To retrieve the messaging service, use the <code>getMessageServices()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Messaging">Messaging</a> interface: </p>
 <pre class="prettyprint">
@@ -261,32 +261,32 @@ var service;
 
 function serviceListCB(services)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Found &quot; + services.length + &quot; email services&quot;);
-&nbsp;&nbsp;&nbsp;service = services[0];
+   console.log("Found " + services.length + " email services");
+   service = services[0];
 }
 
-tizen.messaging.getMessageServices(&quot;messaging.email&quot;, serviceListCB);
+tizen.messaging.getMessageServices("messaging.email", serviceListCB);
 </pre></li>
    <li><p>Define a success handler implementing the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageFolderArraySuccessCallback">MessageFolderArraySuccessCallback</a> interface, and optionally an error handler too:</p>
 <pre class="prettyprint">
 function onFindFolders(folders)
 {
-&nbsp;&nbsp;&nbsp;console.log(folders.length + &quot; folder(s) found.&quot;);
+   console.log(folders.length + " folder(s) found.");
 
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; folders.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Folder &quot; + (i + 1) + &quot;: &quot; + folders[i].name);
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; folders.length; i++)
+   {
+      console.log("Folder " + (i + 1) + ": " + folders[i].name);
+   }
 }
 
 function onFindFoldersFail(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred:  &quot; + error.name);
+   console.log("Error occurred:  " + error.name);
 }
 </pre></li>
    <li><p>Define a filter (for attributes supported by the message folder filter, see <a href="../data/data_filter_w.htm#messaging">Messaging Filter Attributes</a>):</p>
 <pre class="prettyprint">
-var filter = new tizen.AttributeFilter(&quot;serviceId&quot;, &quot;EXACTLY&quot;, service.id);
+var filter = new tizen.AttributeFilter("serviceId", "EXACTLY", service.id);
 </pre></li>
    <li><p>To get all message folders, use the <code>findFolders()</code> method of the <code>MessageStorage</code> interface:</p>
 <pre class="prettyprint">
@@ -304,32 +304,32 @@ service.messageStorage.findFolders(filter, onFindFolders, onFindFoldersFail);
   <ol>
    <li><p>Retrieve the messaging service using the <code>getMessageServices()</code> method.</p>
 <pre class="prettyprint">
-tizen.messaging.getMessageServices(&quot;messaging.email&quot;, serviceListCB, errorCallback);
+tizen.messaging.getMessageServices("messaging.email", serviceListCB, errorCallback);
 </pre></li>
    <li><p>Search for all email messages with attachments using the <code>findMessages()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface:</p>
 <pre class="prettyprint">
-service.messageStorage.findMessages(new tizen.AttributeFilter(&quot;hasAttachment&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EXACTLY&quot;, true),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messageQueryCallback);
+service.messageStorage.findMessages(new tizen.AttributeFilter("hasAttachment",
+                                                              "EXACTLY", true),
+                                    messageQueryCallback);
 </pre></li>
    <li><p>To load a message body, use the <code>loadMessageBody()</code> method of the <code>MessageService</code> interface:</p>
 <pre class="prettyprint">
 /* Success callback for the search operation */
 function messageQueryCallback(messages)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; messages.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var message = messages[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!message.body.loaded)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.messaging.loadMessageBody(message, successCallback, errorCallback);
+   for (var i = 0; i &lt; messages.length; i++)
+   {
+      var message = messages[i];
+      if (!message.body.loaded)
+      {
+         tizen.messaging.loadMessageBody(message, successCallback, errorCallback);
 </pre></li>
    <li><p>To download the message attachments, use the <code>loadMessageAttachment()</code> method with an array of attachments (with valid file paths) as a parameter:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.messaging.loadMessageAttachment(message.attachments[0], successCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorCallback);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+         tizen.messaging.loadMessageAttachment(message.attachments[0], successCallback,
+                                               errorCallback);
+      }
+   }
 }
 </pre></li>
    <li><p>To synchronize email with an external server:</p>
@@ -339,43 +339,43 @@ function messageQueryCallback(messages)
 /* Synchronize the folders in the success event handler */
 function servicesListSuccessCB(services)
 {
-&nbsp;&nbsp;&nbsp;services[0].sync(serviceSyncedCB, null, 30);
+   services[0].sync(serviceSyncedCB, null, 30);
 }
 
 /* Get the email service */
-tizen.messaging.getMessageServices(&quot;messaging.email&quot;, servicesListSuccessCB);
+tizen.messaging.getMessageServices("messaging.email", servicesListSuccessCB);
 </pre></li>
-     <li>To synchronize a specific folder, use the <code>syncFolder()</code> method. In the following example, only folders containing &quot;INBOX&quot; in their name are synchronized.
+     <li>To synchronize a specific folder, use the <code>syncFolder()</code> method. In the following example, only folders containing "INBOX" in their name are synchronized.
 <pre class="prettyprint">
 var emailService; /* Assume email service is initialized */
 function serviceCallback(services)
 {
-&nbsp;&nbsp;&nbsp;emailService = services[0];
+   emailService = services[0];
 }
 
 /* Synchronize in the search success event handler */
 function folderQueryCallback(folders)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; folders.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (folders[i].type === &quot;INBOX&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;emailService.syncFolder(folders[i], folderSyncedCB, null, 30);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; folders.length; i++)
+   {
+      if (folders[i].type === "INBOX")
+      {
+         emailService.syncFolder(folders[i], folderSyncedCB, null, 30);
+      }
+   }
 };
 
 /* Get the email service */
-tizen.messaging.getMessageServices(&quot;messaging.email&quot;, serviceCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorCallback);
+tizen.messaging.getMessageServices("messaging.email", serviceCallback,
+                                   errorCallback);
 
 /* Search for specific folders */
-var filter = new tizen.AttributeFilter(&quot;serviceId&quot;, &quot;EXISTS&quot;);
+var filter = new tizen.AttributeFilter("serviceId", "EXISTS");
 emailService.messageStorage.findFolders(filter, folderQueryCallback));
 </pre></li>
     </ol> </li>
   </ol>
- 
+
 <h2 id="Receiving_Notifications" name="Receiving_Notifications">Receiving Notifications on Message Storage Changes</h2>
 <p>You can register event listeners to monitor changes in the message storage, a particular conversation, or a particular message folder.</p>
 <p>The <code>addMessagesChangeListener()</code>, <code>addConversationsChangeListener()</code>, and <code>addFoldersChangeListener()</code> methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface register an event listener, which starts asynchronously once the method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessagesChangeCallback">MessagesChangeCallback</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageConversationsChangeCallback">MessageConversationsChangeCallback</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageFoldersChangeCallback">MessageFoldersChangeCallback</a> interfaces to define listener event handlers for receiving notifications about the changes.</p>
@@ -391,23 +391,23 @@ var watchId;
 <pre class="prettyprint">
 var messageChangeCallback =
 {
-&nbsp;&nbsp;&nbsp;/* When messages are updated */
-&nbsp;&nbsp;&nbsp;messagesupdated: function(messages)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(messages.length + &quot; message(s) updated&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When messages are added */
-&nbsp;&nbsp;&nbsp;messagesadded: function(messages)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(messages.length + &quot; message(s) added&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When messages are deleted */
-&nbsp;&nbsp;&nbsp;messagesremoved: function(messages)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(messages.length + &quot; message(s) removed&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* When messages are updated */
+   messagesupdated: function(messages)
+   {
+      console.log(messages.length + " message(s) updated");
+   },
+
+   /* When messages are added */
+   messagesadded: function(messages)
+   {
+      console.log(messages.length + " message(s) added");
+   },
+
+   /* When messages are deleted */
+   messagesremoved: function(messages)
+   {
+      console.log(messages.length + " message(s) removed");
+   }
 };
 </pre></li>
    <li>Register the listener to use the defined event handlers:
diff --git a/org.tizen.guides/html/web/messaging/messaging_cover_w.htm b/org.tizen.guides/html/web/messaging/messaging_cover_w.htm
index 97d3462..652b9a0 100644 (file)
--- a/org.tizen.guides/html/web/messaging/messaging_cover_w.htm
+++ b/org.tizen.guides/html/web/messaging/messaging_cover_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Messaging</title>  
+       <title>Messaging</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Messaging</h1>
@@ -44,7 +44,7 @@
 
 <p>The application can receive push notifications from a push server. You can register your application and connect to the push service, to be ready to receive push notifications when they arrive.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/messaging/push_w.htm b/org.tizen.guides/html/web/messaging/push_w.htm
index 2d30904..34bc17b 100644 (file)
--- a/org.tizen.guides/html/web/messaging/push_w.htm
+++ b/org.tizen.guides/html/web/messaging/push_w.htm
@@ -75,7 +75,7 @@
        <strong>Note</strong>
        Remember about security issues when sending notifications with sensitive information. For a list of strongly recommended rules, see <a href="../../native/messaging/push_n.htm#security">Managing Security</a>.
 </div>
-  
+
 <h2 id="architecture">Architecture</h2>
 
 <p>The architecture of the Tizen Push service is described in detail in the <a href="../../native/messaging/push_n.htm#service">mobile native Push guide</a>.</p>
@@ -100,7 +100,7 @@
     <li>
         <p>To use the Push API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/push.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/push&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/push"/&gt;
 </pre>
     </li>
 <li>Make sure the following requirements are fulfilled:
@@ -194,18 +194,18 @@
    is launched by the notification service
 */
 var service =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/push_test&quot;);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/push_test");
 
 /* Define the error callback */
 function errorCallback(response)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The following error occurred: &quot; + response.name);
+   console.log("The following error occurred: " + response.name);
 }
 
 /* Define the registration success callback */
 function registerSuccessCallback(id)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Registration succeeded with id: &quot; + id);
+   console.log("Registration succeeded with id: " + id);
 }
 </pre>
     </li>
@@ -226,31 +226,31 @@ tizen.push.registerService(service, registerSuccessCallback, errorCallback);
 /* Define the error callback */
 function errorCallback(response)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The following error occurred: &quot; + response.name);
+   console.log("The following error occurred: " + response.name);
 }
 
 /* Define the registration success callback */
 function registerSuccessCallback(id)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Registration succeeded with id: &quot; + id);
+   console.log("Registration succeeded with id: " + id);
 }
 
 /* Define the state change callback */
 function stateChangeCallback(state)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The state is changed to: &quot; + state);
+   console.log("The state is changed to: " + state);
 
-&nbsp;&nbsp;&nbsp;if (state == &quot;UNREGISTERED&quot;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Request application registration */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.push.register(registerSuccessCallback, errorCallback);
-&nbsp;&nbsp;&nbsp;}
+   if (state == "UNREGISTERED")
+   {
+      /* Request application registration */
+      tizen.push.register(registerSuccessCallback, errorCallback);
+   }
 }
 
 /* Define the notification callback */
 function notificationCallback(notification)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;A notification arrives.&quot;);
+   console.log("A notification arrives.");
 }
 </pre>
     </li>
@@ -268,7 +268,7 @@ tizen.push.connect(stateChangeCallback, notificationCallback, errorCallback);
 var registrationId = tizen.push.getRegistrationId();
 if (registrationId != null)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The registration id: &quot; + registrationId);
+   console.log("The registration id: " + registrationId);
 }
 </pre>
 <p>Since Tizen 3.0, you must connect to the push service before getting the registration ID.</p>
@@ -306,14 +306,14 @@ if (registrationId != null)
 <pre class="prettyprint">
 function errorCallback(response)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;The following error occurred: &#39; + response.name);
+   console.log('The following error occurred: ' + response.name);
 }
 
 function notificationCallback(message)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;New push message: &quot; + message.alertMessage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;, date: &quot; + message.date
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;, data: &quot; + message.appData);
+   console.log("New push message: " + message.alertMessage
+               + ", date: " + message.date
+               + ", data: " + message.appData);
 }
 
 /* Since Tizen 3.0, you must provide PushRegistrationStateChangeCallback */
@@ -321,7 +321,7 @@ function notificationCallback(message)
 
 function stateChangeCallback(state)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The state is changed to: &quot; + state);
+   console.log("The state is changed to: " + state);
 }
 </pre>
       <p>The following table lists the fields available in the notification callback.</p>
@@ -349,7 +349,7 @@ function stateChangeCallback(state)
          <td><code>message</code></td>
          <td>String</td>
          <td>Full push notification message.
-                <p>For example: <code>&quot;badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi&quot;</code></p></td>
+                <p>For example: <code>"badgeOption=INCREASE&amp;badgeNumber=1&amp;action=ALERT&amp;alertMessage=Hi"</code></p></td>
         </tr>
         <tr>
          <td><code>date</code></td>
@@ -422,9 +422,9 @@ tizen.push.disconnect();
 /* Method to be called when the notification message arrives */
 function notificationCallback(message)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;New push message: &quot; + message.alertMessage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;, date: &quot; + message.date 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;, data: &quot; + message.appData);
+   console.log("New push message: " + message.alertMessage
+               + ", date: " + message.date
+               + ", data: " + message.appData);
 }
 
 tizen.push.connectService(notificationCallback);
@@ -445,36 +445,36 @@ tizen.push.getUnreadNotifications();
 /* Define the error callback */
 function errorCallback(response)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The following error occurred: &quot; + response.name);
+   console.log("The following error occurred: " + response.name);
 }
 
 /* Define the registration success callback */
 function registerSuccessCallback(id)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Registration succeeded with id: &quot; + id);
+   console.log("Registration succeeded with id: " + id);
 }
 
 /* Define the state change callback */
 function stateChangeCallback(state)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The state is changed to: &quot; + state);
-
-&nbsp;&nbsp;&nbsp;if (state === &quot;UNREGISTERED&quot;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Request application registration */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.push.register(registerSuccessCallback, errorCallback);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (state === &quot;REGISTERED&quot;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Gets unread push notifications */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.push.getUnreadNotifications();
-&nbsp;&nbsp;&nbsp;}
+   console.log("The state is changed to: " + state);
+
+   if (state === "UNREGISTERED")
+   {
+      /* Request application registration */
+      tizen.push.register(registerSuccessCallback, errorCallback);
+   }
+   else if (state === "REGISTERED")
+   {
+      /* Gets unread push notifications */
+      tizen.push.getUnreadNotifications();
+   }
 }
 
 /* Define the notification callback */
 function notificationCallback(notification)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;A notification arrives.&quot;);
+   console.log("A notification arrives.");
 }
 
 tizen.push.connect(stateChangeCallback, notificationCallback, errorCallback);
@@ -491,37 +491,37 @@ tizen.push.connect(stateChangeCallback, notificationCallback, errorCallback);
 <li>Get the requested application control with the <code>getRequestedAppControl()</code> method:
 <pre class="prettyprint">
 var requestedAppControl =
-&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().getRequestedAppControl().appControl;
+   tizen.application.getCurrentApplication().getRequestedAppControl().appControl;
 </pre></li>
 <li>Determine the reason for the application launch. If the reason for the launch is a notification, retrieve the latest push message.
 <pre class="prettyprint">
 for (var i = 0; i &lt; requestedAppControl.data.length; ++i)
 {
-&nbsp;&nbsp;&nbsp;if (requestedAppControl.data[i].key
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=== &#39;http://tizen.org/appcontrol/data/push/launch_type&#39;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Launch type is &#39;registration_change&#39; or &#39;notification&#39; */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var appData = requestedAppControl.data[i].value[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;launch_type: &#39; + appData);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (appData === &#39;registration_change&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Launched due to change in the registration state */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (appData === &#39;notification&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Launched due to a notification */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the latest message */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var pushMessage = tizen.push.getPushMessage();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* <a href="#GetPushMessage">Handle the retrieved message</a> */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (error)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(error.name + &#39;: &#39; + error.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   if (requestedAppControl.data[i].key
+       === 'http://tizen.org/appcontrol/data/push/launch_type')
+   {
+      /* Launch type is 'registration_change' or 'notification' */
+      var appData = requestedAppControl.data[i].value[0];
+      console.log('launch_type: ' + appData);
+      if (appData === 'registration_change')
+      {
+         /* Launched due to change in the registration state */
+      }
+      else if (appData === 'notification')
+      {
+         /* Launched due to a notification */
+         try
+         {
+            /* Retrieve the latest message */
+            var pushMessage = tizen.push.getPushMessage();
+            /* <a href="#GetPushMessage">Handle the retrieved message</a> */
+         }
+         catch (error)
+         {
+            console.log(error.name + ': ' + error.message);
+         }
+      }
+   }
 }
 </pre></li>
 </ol>
@@ -540,15 +540,15 @@ var pushMessage = tizen.push.getPushMessage();
 <pre class="prettyprint">
 if (pushMessage)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;notification received on &#39; + pushMessage.date
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39; from: &#39; + pushMessage.sender);
-&nbsp;&nbsp;&nbsp;console.log(&#39;Details:&#39;);
-&nbsp;&nbsp;&nbsp;console.log(&#39; - data: &#39; + pushMessage.appData);
-&nbsp;&nbsp;&nbsp;console.log(&#39; - alert message: &#39; + pushMessage.alertMessage);
-&nbsp;&nbsp;&nbsp;console.log(&#39; - message: &#39; + pushMessage.message);
-&nbsp;&nbsp;&nbsp;console.log(&#39; - session: &#39; + pushMessage.sessionInfo);
-&nbsp;&nbsp;&nbsp;console.log(&#39; - request ID: &#39; + pushMessage.requestId);
-&nbsp;&nbsp;&nbsp;console.log(&#39; - type: &#39; + pushMessage.type);
+   console.log('notification received on ' + pushMessage.date
+               + ' from: ' + pushMessage.sender);
+   console.log('Details:');
+   console.log(' - data: ' + pushMessage.appData);
+   console.log(' - alert message: ' + pushMessage.alertMessage);
+   console.log(' - message: ' + pushMessage.message);
+   console.log(' - session: ' + pushMessage.sessionInfo);
+   console.log(' - request ID: ' + pushMessage.requestId);
+   console.log(' - type: ' + pushMessage.type);
 }
 </pre></li>
 </ol>
diff --git a/org.tizen.guides/html/web/messaging/task_chatter_w.htm b/org.tizen.guides/html/web/messaging/task_chatter_w.htm
index db6a0b1..d503ff0 100644 (file)
--- a/org.tizen.guides/html/web/messaging/task_chatter_w.htm
+++ b/org.tizen.guides/html/web/messaging/task_chatter_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -63,7 +63,7 @@
   <p align="center"><strong>Figure: Chatter screens</strong></p>
   <p align="center"><img alt="Chatter screens" src="../../images/chatter.png" /></p>
 
-  
+
   <h3 id="main" name="main">Defining the Main Screen</h3>
   <ol>
 
@@ -72,22 +72,22 @@
 <p>The content section of the screen is added dynamically and displays a contact <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a>. The footer section contains a tab bar with a button for starting a new chat.</p>
 <pre class="prettyprint lang-html">
 &lt;!--Header section--&gt;
-&lt;div id=&quot;main-header&quot; data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Chatter&lt;/h1&gt;
+&lt;div id="main-header" data-role="header" data-position="fixed"&gt;
+   &lt;h1&gt;Chatter&lt;/h1&gt;
 &lt;/div&gt;
 
 &lt;!--Content section--&gt;
-&lt;div id=&quot;main-content&quot; data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;&lt;/ul&gt;
+&lt;div id="main-content" data-role="content"&gt;
+   &lt;ul data-role="listview"&gt;&lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;!--Footer section--&gt;
-&lt;div id=&quot;main-footer&quot; data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; data-style=&quot;toolbar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;contactSelect-button&quot;&gt;New chat&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="main-footer" data-role="footer" data-position="fixed"&gt;
+   &lt;div data-role="tabbar" data-style="toolbar"&gt;
+      &lt;ul&gt;
+         &lt;li&gt;&lt;a href="#" id="contactSelect-button"&gt;New chat&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -96,15 +96,15 @@
 <li><strong>app.ui.event.js Source File</strong>
 <p>When the user taps the <strong>New chat</strong> button, an event is fired, and the contact list is loaded. The events are based on jQuery selectors.</p>
 <pre class="prettyprint">
-$(&#39;#contactSelect-button&#39;).on(&#39;click&#39;, function(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.loadContacts();
-&nbsp;&nbsp;&nbsp;});
+$('#contactSelect-button').on('click', function(event)
+   {
+      event.preventDefault();
+      event.stopPropagation();
+      app.loadContacts();
+   });
 </pre>
 </li>
-  </ol> 
+  </ol>
 
   <h3 id="contact" name="contact">Defining the Select Contact Screen</h3>
   <ol>
@@ -112,31 +112,31 @@ $(&#39;#contactSelect-button&#39;).on(&#39;click&#39;, function(event)
   <p>The content section of the Select contact screen displays a contact list. If the user taps the <strong>Enter number</strong> <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a>, a pop-up opens allowing the user to enter a phone number for a contact not on the list. The <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Popup.htm">popup</a> component contains a form for number input.</p>
 <pre class="prettyprint">
 &lt;!--Content section--&gt;
-&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot; id=&quot;contactSelect-list&quot;&gt;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; id=&quot;enterNumber&quot; data-role=&quot;button&quot;&gt;Enter number&lt;/a&gt;
+&lt;div data-role="content"&gt;
+   &lt;ul data-role="listview" id="contactSelect-list"&gt;&lt;/ul&gt;
+   &lt;a href="#" id="enterNumber" data-role="button"&gt;Enter number&lt;/a&gt;
 &lt;/div&gt;
 
-&lt;div data-role=&quot;popup&quot; id=&quot;enterNumber-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-title&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Enter phone number&lt;h1&gt;
+&lt;div data-role="popup" id="enterNumber-popup"&gt;
+   &lt;div class="ui-popup-title"&gt;
+   &lt;h1&gt;Enter phone number&lt;h1&gt;
 &lt;/div&gt;
-&lt;div class=&quot;ui-popup-text&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;form id=&quot;numberForm&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;tel&quot; id=&quot;number&quot; name=&quot;number&quot; maxlength=&quot;20&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/form&gt;
+&lt;div class="ui-popup-text"&gt;
+   &lt;form id="numberForm"&gt;
+      &lt;input type="tel" id="number" name="number" maxlength="20"/&gt;
+   &lt;/form&gt;
 &lt;/div&gt;
-&lt;div class=&quot;ui-popup-button-bg&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;a data-role=&quot;button&quot; id=&quot;enterNumberCreate&quot; data-rel=&quot;back&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-inline=&quot;true&quot; class=&quot;ui-disabled&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Create Chat
-&nbsp;&nbsp;&nbsp;&lt;/a&gt;
+&lt;div class="ui-popup-button-bg"&gt;
+   &lt;a data-role="button" id="enterNumberCreate" data-rel="back"
+      data-inline="true" class="ui-disabled"&gt;
+      Create Chat
+   &lt;/a&gt;
 &lt;/div&gt;
 </pre>
   </li>
   </ol>
 
-  <h3 id="chat" name="chat">Defining the Chat Screen</h3> 
+  <h3 id="chat" name="chat">Defining the Chat Screen</h3>
   <ol>
   <li><strong>chat.tpl Source File</strong>
   <p>When the user taps a list item on the main screen, the chat screen is displayed. The structure of the chat template is similar to main screen. The content section of the screen displays all messages from the selected contact, grouped into a conversation. </p>
@@ -145,29 +145,29 @@ $(&#39;#contactSelect-button&#39;).on(&#39;click&#39;, function(event)
 The template also contains a <code>popup</code> element used to show warning and exceptions information.</p>
 <pre class="prettyprint">
 &lt;!--Content section--&gt;
-&lt;div id=&quot;chat-content&quot; data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot; id=&quot;message-chat&quot;&gt;&lt;/ul&gt;
+&lt;div id="chat-content" data-role="content"&gt;
+   &lt;ul data-role="listview" id="message-chat"&gt;&lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;!--Footer section--&gt;
-&lt;div id=&quot;chat-footer&quot; data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-textArea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-textArea-text&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id=&quot;text&quot; class=&quot;ui-textArea-text-text&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;placeholder=&quot;Your message&quot; data-role=&quot;none&quot;&gt;&lt;/textarea&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-textArea-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a data-role=&quot;button&quot; id=&quot;send&quot;&gt;Send&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;none&quot; id=&quot;counter&quot; class=&quot;counter&quot;&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="chat-footer" data-role="footer" data-position="fixed"&gt;
+   &lt;div class="ui-textArea"&gt;
+      &lt;div class="ui-textArea-text"&gt;
+         &lt;textarea id="text" class="ui-textArea-text-text"
+                   placeholder="Your message" data-role="none"&gt;&lt;/textarea&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-textArea-button"&gt;
+         &lt;a data-role="button" id="send"&gt;Send&lt;/a&gt;
+         &lt;div data-role="none" id="counter" class="counter"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
-&lt;div data-role=&quot;popup&quot; id=&quot;alertPopup&quot; class=&quot;ui-corner-all&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;p class=&quot;text&quot;&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;alertPopup-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot; data-rel=&quot;back&quot;&gt;OK&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="popup" id="alertPopup" class="ui-corner-all"&gt;
+   &lt;p class="text"&gt;&lt;/p&gt;
+   &lt;div class="alertPopup-button"&gt;
+      &lt;a href="#" data-role="button" data-inline="true" data-rel="back"&gt;OK&lt;/a&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
   </li>
@@ -180,20 +180,20 @@ The template also contains a <code>popup</code> element used to show warning and
 <pre class="prettyprint">
 &lt;!--Configuration file content--&gt;
 &lt;widget ...&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/contact.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/contact.write&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/messaging.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/messaging.send&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/messaging.write&quot;/&gt;
+   &lt;!--Other configuration details--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/contact.read"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/contact.write"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/messaging.read"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/messaging.send"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/messaging.write"/&gt;
 &lt;/widget&gt;
 </pre>
    </li>
   </ol>
 
 
-  <h2 id="Managing_Messages" name="Managing_Messages">Managing Messages</h2> 
+  <h2 id="Managing_Messages" name="Managing_Messages">Managing Messages</h2>
 
   <p>This section builds upon the elements described in <a href="messages_w.htm#Managing_Messages">Managing Messages</a>.</p>
 
@@ -206,16 +206,16 @@ The template also contains a <code>popup</code> element used to show warning and
 <pre class="prettyprint">
 initSmsService: function()
 {
-&nbsp;&nbsp;&nbsp;var self = this;
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.messaging.getMessageServices(&quot;messaging.sms&quot;, function(s)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.smsService = s[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.prepareMessages(app.fillUpMessagePage.bind(self));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.messagesChangeListener();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   var self = this;
+   try
+   {
+      tizen.messaging.getMessageServices("messaging.sms", function(s)
+         {
+            self.smsService = s[0];
+            self.prepareMessages(app.fillUpMessagePage.bind(self));
+            self.messagesChangeListener();
+         });
+   }
 }
 </pre>
 </li>
@@ -225,34 +225,34 @@ initSmsService: function()
 <pre class="prettyprint">
 prepareMessages: function(callback)
 {
-&nbsp;&nbsp;&nbsp;var self = this;
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.smsService.messageStorage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.findMessages(new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, &quot;messaging.sms&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(messages)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function compare(a, b)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a.timestamp &gt; b.timestamp)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (a.timestamp &lt; b.timestamp)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messages.sort(compare);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.messagesList = self.groupMessages(messages);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.ui.loadCallerList();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;}
+   var self = this;
+   try
+   {
+      this.smsService.messageStorage
+         .findMessages(new tizen.AttributeFilter("type", "EXACTLY", "messaging.sms"),
+                       function(messages)
+         {
+            function compare(a, b)
+            {
+               if (a.timestamp &gt; b.timestamp)
+               {
+                  return -1;
+               }
+               else if (a.timestamp &lt; b.timestamp)
+               {
+                  return 1;
+               }
+               else
+               {
+                  return 0;
+               }
+            }
+            messages.sort(compare);
+            self.messagesList = self.groupMessages(messages);
+            app.ui.loadCallerList();
+            callback();
+         },
+   }
 }
 </pre>
   </li>
@@ -269,21 +269,21 @@ prepareMessages: function(callback)
 <pre class="prettyprint">
 groupMessages: function(messages)
 {
-&nbsp;&nbsp;&nbsp;var i, obj = {}, folderId;
-&nbsp;&nbsp;&nbsp;for (i in messages)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;folderId = messages[i].folderId;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((folderId !== null &amp;&amp; folderId !== this.DRAFTS_FOLDER)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|| messages[i].messageStatus === &#39;DRAFT&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (messages.hasOwnProperty(i))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj = this.groupMessagesSingle(messages[i], obj);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return obj;
+   var i, obj = {}, folderId;
+   for (i in messages)
+   {
+      folderId = messages[i].folderId;
+      if ((folderId !== null &amp;&amp; folderId !== this.DRAFTS_FOLDER)
+          || messages[i].messageStatus === 'DRAFT')
+      {
+         if (messages.hasOwnProperty(i))
+         {
+            obj = this.groupMessagesSingle(messages[i], obj);
+         }
+      }
+   }
+
+   return obj;
 }
 </pre>
   </li>
@@ -292,42 +292,42 @@ groupMessages: function(messages)
 <pre class="prettyprint">
 groupMessagesSingle: function(message, obj)
 {
-&nbsp;&nbsp;&nbsp;var key, j;
-&nbsp;&nbsp;&nbsp;if (message.from)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key = message.from;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj[key] = this.pushData(message, obj[key]);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (j in message.to)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (message.to.hasOwnProperty(j))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key = message.to[j];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj[key] = this.pushData(message, obj[key]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return obj;
+   var key, j;
+   if (message.from)
+   {
+      key = message.from;
+      obj[key] = this.pushData(message, obj[key]);
+   }
+   else
+   {
+      for (j in message.to)
+      {
+         if (message.to.hasOwnProperty(j))
+         {
+            key = message.to[j];
+            obj[key] = this.pushData(message, obj[key]);
+         }
+      }
+   }
+
+   return obj;
 }
 </pre>
   </li>
- </ol></li> 
+ </ol></li>
   <li><strong>Pushing Data to the Conversation Array</strong>
   <p>The <code>pushData()</code> method pushes the retrieved data into the recipient conversation array and sets the <code>lastMessage</code> object.</p>
 <pre class="prettyprint">
 pushData: function(message, obj)
 {
-&nbsp;&nbsp;&nbsp;obj = obj || this.getGroupObject();
-&nbsp;&nbsp;&nbsp;obj.messages.push(message);
-&nbsp;&nbsp;&nbsp;if (app.helpers.objectLength(obj.lastMessage) === 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.lastMessage = message;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return obj;
+   obj = obj || this.getGroupObject();
+   obj.messages.push(message);
+   if (app.helpers.objectLength(obj.lastMessage) === 0)
+   {
+      obj.lastMessage = message;
+   }
+
+   return obj;
 }
 </pre>
   </li>
@@ -337,26 +337,26 @@ pushData: function(message, obj)
 <pre class="prettyprint">
 getGroupObject: function()
 {
-&nbsp;&nbsp;&nbsp;return
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messages: [], lastMessage: {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;last:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body: {plainBody: null}, timestamp: new Date()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
+   return
+   {
+      messages: [], lastMessage: {},
+      last:
+      {
+         body: {plainBody: null}, timestamp: new Date()
+      }
+   };
 }
 </pre>
   </li>
   </ol>
-  
-  <h2 id="Creating_Sending_Messages" name="Creating_Sending_Messages">Creating and Sending Messages</h2> 
+
+  <h2 id="Creating_Sending_Messages" name="Creating_Sending_Messages">Creating and Sending Messages</h2>
 
   <p>This section builds upon the elements described in <a href="messages_w.htm#Sending_Messages">Creating and Sending Messages</a>.</p>
 
 
   <h3 id="get_contact" name="get_contact">Getting the Contact List</h3>
-  <ol> 
+  <ol>
    <li><strong>app.model.js Source File</strong>
    <ol type="a"><li><p>To get the contact list from the device memory, get the default address book using the <code>getDefaultAddressBook()</code> method.</p>
 <pre class="prettyprint">
@@ -368,31 +368,31 @@ this.addressBook = tizen.contact.getDefaultAddressBook();
 <pre class="prettyprint">
 loadContacts: function(callback)
 {
-&nbsp;&nbsp;&nbsp;var contactsFoundCB, errorCB;
-
-&nbsp;&nbsp;&nbsp;this.contactsLoaded = null;
-
-&nbsp;&nbsp;&nbsp;contactsFoundCB = function(contacts)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.contactsLoaded = [];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i in contacts)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (contacts.hasOwnProperty(i)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; this.getNumberFromContact(contacts[i]))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts[i].primaryNumber =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.getNumberFromContact(contacts[i])
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.contactsLoaded.push(contacts[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (callback instanceof Function)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;this.addressBook.find(contactsFoundCB.bind(this), errorCB);
+   var contactsFoundCB, errorCB;
+
+   this.contactsLoaded = null;
+
+   contactsFoundCB = function(contacts)
+   {
+      var i;
+      this.contactsLoaded = [];
+      for (i in contacts)
+      {
+         if (contacts.hasOwnProperty(i)
+            &amp;&amp; this.getNumberFromContact(contacts[i]))
+         {
+            contacts[i].primaryNumber =
+               this.getNumberFromContact(contacts[i])
+            this.contactsLoaded.push(contacts[i]);
+         }
+      }
+      if (callback instanceof Function)
+      {
+         callback();
+      }
+   };
+
+   this.addressBook.find(contactsFoundCB.bind(this), errorCB);
 }
 </pre>
 </li>
@@ -400,80 +400,80 @@ loadContacts: function(callback)
 </li></ol>
   <h3 id="prepare" name="prepare">Setting the Message Recipient</h3>
   <p>The message recipient selection functionality is implemented in the <code>app.js</code> file.</p>
-  <ol> 
+  <ol>
   <li><strong>Displaying the Contacts</strong>
   <p>Before the user write the message text, they select the message recipient. The recipient list stored in the <code>contactsLoaded</code> object in the device memory is retrieved and displayed for the selection.</p>
 <pre class="prettyprint">
 showContactsLoaded: function()
 {
-&nbsp;&nbsp;&nbsp;var i, len, sortedContactList = [];
-
-&nbsp;&nbsp;&nbsp;if (this.model.contactsLoaded !== null &amp;&amp; this.model.contactsLoaded.length)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = this.model.contactsLoaded.length;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.model.contactsLoaded[i].phoneNumbers.length)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sortedContactList.push(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;caller: this.helpers.getCallerName(this.model.contactsLoaded[i],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;no name&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;number: this.model.contactsLoaded[i].primaryNumber,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contact: this.model.contactsLoaded[i]
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sortedContactList.sort(function(a, b)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a.caller &lt; b.caller)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (a.caller &gt; b.caller)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;this.ui.fillContactList(sortedContactList);
+   var i, len, sortedContactList = [];
+
+   if (this.model.contactsLoaded !== null &amp;&amp; this.model.contactsLoaded.length)
+   {
+      len = this.model.contactsLoaded.length;
+      for (i = 0; i &lt; len; i += 1)
+      {
+         if (this.model.contactsLoaded[i].phoneNumbers.length)
+         {
+            sortedContactList.push(
+            {
+               caller: this.helpers.getCallerName(this.model.contactsLoaded[i],
+                                                  'no name'),
+               number: this.model.contactsLoaded[i].primaryNumber,
+               contact: this.model.contactsLoaded[i]
+            });
+         }
+      }
+
+      sortedContactList.sort(function(a, b)
+         {
+            if (a.caller &lt; b.caller)
+            {
+               return -1;
+            }
+            else if (a.caller &gt; b.caller)
+            {
+               return 1;
+            }
+
+            return 0;
+         });
+   }
+   this.ui.fillContactList(sortedContactList);
 }
 
 fillContactList: function(sortedContactList)
 {
-&nbsp;&nbsp;&nbsp;var i, ul = $(&quot;#contactSelect-list&quot;).empty(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len, listElement, self = this;
-
-&nbsp;&nbsp;&nbsp;len = sortedContactList.length;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listElement = this.templateManager.get(&#39;contactRow&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;number&#39;: sortedContactList[i].number,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;callerName&#39;: sortedContactList[i].caller
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (app.helpers.validateNumberLength(sortedContactList[i].number))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ul.append(listElement);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   var i, ul = $("#contactSelect-list").empty(),
+      len, listElement, self = this;
+
+   len = sortedContactList.length;
+
+   for (i = 0; i &lt; len; i += 1)
+   {
+      listElement = this.templateManager.get('contactRow',
+      {
+         'number': sortedContactList[i].number,
+         'callerName': sortedContactList[i].caller
+      });
+
+      if (app.helpers.validateNumberLength(sortedContactList[i].number))
+      {
+         ul.append(listElement);
+      }
+   }
 </pre>
 </li>
 <li><strong>Selecting the Contact</strong>
 <p>When the user clicks the wanted recipient, the touch event that sets the current list item as the recipient is triggered, and the chat screen is displayed.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;$(&#39;li.ui-li-has-multiline&#39;, ul).on(&#39;click&#39;, function(event)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.ui.onCallerListElementTap(event, $(this));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   $('li.ui-li-has-multiline', ul).on('click', function(event)
+      {
+         app.ui.onCallerListElementTap(event, $(this));
+      });
 
-&nbsp;&nbsp;&nbsp;ul.trigger(&#39;create&#39;);
-&nbsp;&nbsp;&nbsp;ul.listview(&#39;refresh&#39;);
+   ul.trigger('create');
+   ul.listview('refresh');
 }
 </pre>
   </li>
@@ -486,17 +486,17 @@ fillContactList: function(sortedContactList)
 <pre class="prettyprint">
 sendMessage: function(number, text, callback, errorcallback)
 {
-&nbsp;&nbsp;&nbsp;var message;
-&nbsp;&nbsp;&nbsp;callback = callback || new Function();
-&nbsp;&nbsp;&nbsp;errorcallback = errorcallback || new Function();
-&nbsp;&nbsp;&nbsp;message = new tizen.Message(&quot;messaging.sms&quot;, {plainBody: text, to: [number]});
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.smsService.sendMessage(message, callback, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   var message;
+   callback = callback || new Function();
+   errorcallback = errorcallback || new Function();
+   message = new tizen.Message("messaging.sms", {plainBody: text, to: [number]});
+   try
+   {
+      this.smsService.sendMessage(message, callback, function(e)
+      {
+         /* Error handling */
+      });
+   }
 },
 </pre>
   </li>
@@ -515,25 +515,25 @@ Receiving Notifications on Message Storage Changes</a>.</p>
 <pre class="prettyprint">
 messagesChangeListener: function()
 {
-&nbsp;&nbsp;&nbsp;var self = this, config, messageChangeCallback =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messagesupdated: function(messages)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (messages[0].messageStatus !== &#39;SENDING&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.ui.changeMessageStatus(messages[0]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messagesadded: function(messages)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.prepareMessages(app.ui.showMessageChat);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messagesremoved: function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.prepareMessages(app.ui.showMessageChat);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;this.smsService.messageStorage.addMessagesChangeListener(messageChangeCallback);
+   var self = this, config, messageChangeCallback =
+   {
+      messagesupdated: function(messages)
+      {
+         if (messages[0].messageStatus !== 'SENDING')
+         {
+            app.ui.changeMessageStatus(messages[0]);
+         }
+      },
+      messagesadded: function(messages)
+      {
+         self.prepareMessages(app.ui.showMessageChat);
+      },
+      messagesremoved: function()
+      {
+         self.prepareMessages(app.ui.showMessageChat);
+      }
+   };
+   this.smsService.messageStorage.addMessagesChangeListener(messageChangeCallback);
 }
 </pre></li>
 </ol>
@@ -545,31 +545,31 @@ messagesChangeListener: function()
 <pre class="prettyprint">
 changeMessageStatus: function(message, loop)
 {
-&nbsp;&nbsp;&nbsp;var warning = $(&#39;#&#39; + message.id + &#39; .warning&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;classes, i, self = this;
-&nbsp;&nbsp;&nbsp;loop = loop + 1 || 0;
-&nbsp;&nbsp;&nbsp;if (warning.length === 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;classes = warning.attr(&#39;class&#39;).split(&#39; &#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i in classes)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (classes.hasOwnProperty(i))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (/status([A-Z]*)/.test(classes[i]))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;warning.removeClass(classes[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;warning.addClass(&#39;status&#39; + message.messageStatus);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (loop &lt; 3)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.changeMessageStatus(message, loop)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 1000);
-&nbsp;&nbsp;&nbsp;}
+   var warning = $('#' + message.id + ' .warning'),
+       classes, i, self = this;
+   loop = loop + 1 || 0;
+   if (warning.length === 1)
+   {
+      classes = warning.attr('class').split(' ');
+      for (i in classes)
+      {
+         if (classes.hasOwnProperty(i))
+         {
+            if (/status([A-Z]*)/.test(classes[i]))
+            {
+               warning.removeClass(classes[i]);
+            }
+         }
+      }
+      warning.addClass('status' + message.messageStatus);
+   }
+   else if (loop &lt; 3)
+   {
+      setTimeout(function()
+         {
+            self.changeMessageStatus(message, loop)
+         }, 1000);
+   }
 }
 </pre>
   </li>
diff --git a/org.tizen.guides/html/web/notification/notification_w.htm b/org.tizen.guides/html/web/notification/notification_w.htm
index 2611e01..52b4c24 100644 (file)
--- a/org.tizen.guides/html/web/notification/notification_w.htm
+++ b/org.tizen.guides/html/web/notification/notification_w.htm
@@ -35,20 +35,20 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification API for Mobile Web</a></li>    
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html">Notification API for Wearable Web</a></li>                        
-                       <li><a href="https://developer.tizen.org/development/sample/web/Application/Notification_Manager" target="_blank">Notification Manager Sample Description</a></li>                      
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification API for Mobile Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html">Notification API for Wearable Web</a></li>
+                       <li><a href="https://developer.tizen.org/development/sample/web/Application/Notification_Manager" target="_blank">Notification Manager Sample Description</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Notifications</h1> 
+  <h1>Notifications</h1>
 
   <p>Tizen enables you to provide notifications about application events.</p>
 
- <p>This feature is supported in mobile and wearable applications only.</p> 
+ <p>This feature is supported in mobile and wearable applications only.</p>
 
   <p>The main features of the Notification API include:</p>
   <ul>
@@ -72,7 +72,7 @@
   <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the Notification API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html">wearable</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/notification&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/notification"/&gt;
 </pre>
 
 
@@ -84,28 +84,28 @@
 <pre class="prettyprint">
 /* Application control */
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/create_content&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;image/jpg&quot;, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
+                                null, "image/jpg", null, null);
 
 var notificationDict =
 {
-&nbsp;&nbsp;&nbsp;/* Notification content */
-&nbsp;&nbsp;&nbsp;content: &quot;This is a simple notification.&quot;,
-&nbsp;&nbsp;&nbsp;/* Path to the notification icon */
-&nbsp;&nbsp;&nbsp;iconPath: &quot;images/image1.jpg&quot;,
-&nbsp;&nbsp;&nbsp;/* Path to the sound file to be played when the notification is displayed */
-&nbsp;&nbsp;&nbsp;soundPath: &quot;music/Over the horizon.mp3&quot;,
-&nbsp;&nbsp;&nbsp;/* Device vibrates when the notification is displayed */
-&nbsp;&nbsp;&nbsp;vibration: true,
-&nbsp;&nbsp;&nbsp;/* Application control to be launched when the user selects the notification */
-&nbsp;&nbsp;&nbsp;appControl: appControl
+   /* Notification content */
+   content: "This is a simple notification.",
+   /* Path to the notification icon */
+   iconPath: "images/image1.jpg",
+   /* Path to the sound file to be played when the notification is displayed */
+   soundPath: "music/Over the horizon.mp3",
+   /* Device vibrates when the notification is displayed */
+   vibration: true,
+   /* Application control to be launched when the user selects the notification */
+   appControl: appControl
 };
 </pre>
-<p>The path in the <code>iconPath</code> and <code>soundPath</code> parameters means a relative file location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications). The path is not an absolute file location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (such as <code>images</code> in <code>images/image1.jpg</code>).</p></li> 
+<p>The path in the <code>iconPath</code> and <code>soundPath</code> parameters means a relative file location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications). The path is not an absolute file location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (such as <code>images</code> in <code>images/image1.jpg</code>).</p></li>
    <li><p>To be able to display the notification, create a <code>StatusNotification</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotification">wearable</a> applications) with the status notification type, title, and the additional notification properties defined in the previous step.</p>
 <pre class="prettyprint">
-var notification = new tizen.StatusNotification(&quot;SIMPLE&quot;, &quot;Simple notification&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notificationDict);
+var notification = new tizen.StatusNotification("SIMPLE", "Simple notification",
+                                                notificationDict);
 </pre></li>
    <li><p>To post the notification, use the <code>post()</code> method of the <code>NotificationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager">wearable</a> applications):</p>
 <pre class="prettyprint">
@@ -121,42 +121,42 @@ tizen.notification.post(notification);
 <pre class="prettyprint">
 /* Application control */
 var appControl =
-&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&quot;http://tizen.org/appcontrol/operation/create_content&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;null, &quot;image/jpg&quot;, null, null);
+   new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
+                                null, "image/jpg", null, null);
 
 var notificationDict =
 {
-&nbsp;&nbsp;&nbsp;content: &quot;This is a progress notification.&quot;,
-&nbsp;&nbsp;&nbsp;iconPath: &quot;images/image1.jpg&quot;,
-&nbsp;&nbsp;&nbsp;vibration: false,
-&nbsp;&nbsp;&nbsp;appControl: appControl,
-&nbsp;&nbsp;&nbsp;progressType: &quot;PERCENTAGE&quot;,
-&nbsp;&nbsp;&nbsp;progressValue: 0
+   content: "This is a progress notification.",
+   iconPath: "images/image1.jpg",
+   vibration: false,
+   appControl: appControl,
+   progressType: "PERCENTAGE",
+   progressValue: 0
 };
 </pre>
 <p>The path in the <code>iconPath</code> and <code>soundPath</code> parameters means a file location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications). The path is not an absolute file location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (such as <code>images</code> in <code>images/image1.jpg</code>).</p></li>
    <li><p>To be able to display the notification, create a <code>StatusNotification</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotification">wearable</a> applications) with the status notification type, title, and the additional notification properties defined in the previous step:</p>
 <pre class="prettyprint">
 var notification =
-&nbsp;&nbsp;&nbsp;new tizen.StatusNotification(&quot;PROGRESS&quot;, &quot;Progress notification&quot;, notificationDict);
+   new tizen.StatusNotification("PROGRESS", "Progress notification", notificationDict);
 </pre></li>
    <li><p>Define a function which uses the <code>update()</code> method of the <code>NotificationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager">wearable</a> applications) to update the posted notification every second:</p>
 <pre class="prettyprint">
 function updateProgressNotification(progress)
 {
-&nbsp;&nbsp;&nbsp;if (progress &lt;= 100)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification.progressValue = progress;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.notification.update(notification);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;updateProgressNotification(progress + 10);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 1000);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.notification.remove(notification.id);
-&nbsp;&nbsp;&nbsp;}
+   if (progress &lt;= 100)
+   {
+      notification.progressValue = progress;
+      tizen.notification.update(notification);
+      setTimeout(function()
+         {
+            updateProgressNotification(progress + 10);
+         }, 1000);
+   }
+   else
+   {
+      tizen.notification.remove(notification.id);
+   }
 }
 </pre></li>
    <li><p>To post the notification, use the <code>post()</code> method of the <code>NotificationManager</code> interface. If the progress value is set, the progress bar is displayed in the notification. The progress value can change the amount of progress as it moves forward or backward.</p><p>The application must keep the progress value for its job, because the saved value in the notification status tray can be different (rounded) from the exact progress value.</p>
@@ -184,18 +184,18 @@ var index = 0;
 /* For each notification, write the ID and title in the console log */
 for (index = 0; index &lt; notifications.length; index++)
 {
-&nbsp;&nbsp;&nbsp;console.log(notifications[index].id);
-&nbsp;&nbsp;&nbsp;console.log(notifications[index].title);
+   console.log(notifications[index].id);
+   console.log(notifications[index].title);
 }
 </pre></li>
-    </ol></li> 
+    </ol></li>
    <li><p>To update a previously posted notification, use the <code>update()</code> method by specifying the updated notification object:</p>
 <pre class="prettyprint">
-myNotification.content = &quot;My notification&quot;;
+myNotification.content = "My notification";
 tizen.notification.update(myNotification);
 </pre></li>
-   <li>To remove notifications: 
-    <ol type="a"> 
+   <li>To remove notifications:
+    <ol type="a">
      <li><p>To remove a previously posted notification, use the <code>remove()</code> method with the notification ID as a parameter:</p>
 <pre class="prettyprint">
 tizen.notification.remove(myNotification.id);
@@ -221,20 +221,20 @@ var myNotification;
      <li><p>To save the template, use <code>saveNotificationAsTemplate()</code> method of the <code>NotificationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager::saveNotificationAsTemplate">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager::saveNotificationAsTemplate">wearable</a> applications):</p>
 <pre class="prettyprint">
 try {
-&nbsp;&nbsp;&nbsp;var templateName = &quot;importantNoti&quot;;
-&nbsp;&nbsp;&nbsp;tizen.notification.saveNotificationAsTemplate(templateName, myNotification);
+   var templateName = "importantNoti";
+   tizen.notification.saveNotificationAsTemplate(templateName, myNotification);
 } catch(e) {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error &quot; + e.message + &quot; occured&quot;);
+   console.log("Error " + e.message + " occured");
 }
 </pre></li>
     </ol></li>
    <li><p>To use the template for creation of new pre-set notification, use the <code>createNotificationFromTemplate()</code> method of the <code>NotificationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager::createNotificationFromTemplate">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager::createNotificationFromTemplate">wearable</a> applications):</p>
 <pre class="prettyprint">
 try {
-&nbsp;&nbsp;&nbsp;var newTemplateNotification = tizen.notification.createNotificationFromTemplate(templateName);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Content of new notification: &quot; + content);
+   var newTemplateNotification = tizen.notification.createNotificationFromTemplate(templateName);
+   console.log("Content of new notification: " + content);
 } catch (e) {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error &quot; + e.message + &quot; occured&quot;);
+   console.log("Error " + e.message + " occured");
 }
 </pre></li>
     </ol></li>
diff --git a/org.tizen.guides/html/web/personal/account_w.htm b/org.tizen.guides/html/web/personal/account_w.htm
index b83064a..22054b7 100644 (file)
--- a/org.tizen.guides/html/web/personal/account_w.htm
+++ b/org.tizen.guides/html/web/personal/account_w.htm
@@ -31,7 +31,7 @@
             <li><a href="#get_providers">Retrieving Providers</a></li>
             <li><a href="#manage">Managing Accounts</a></li>
             <li><a href="#listener">Receiving Notifications on Account Changes</a></li>
-            <li><a href="#extend">Managing Extended Account Data</a></li>                      
+            <li><a href="#extend">Managing Extended Account Data</a></li>
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -66,7 +66,7 @@
 <ul><li>Provider
 <p>An on-line service provider entity, such as Google, Vodafone, or Facebook. A service provider is identified by its application ID. The account provider is registered while the application is installed. The information is used in the <strong>Add account</strong> screen in the device settings.</p></li>
 <li>Account
-<p>An entity that collects all the data (such as user name, credentials, settings) needed for connecting to services. An account is always bound to a single provider and has a list of service instances bound to the account. The services can be individually enabled and disabled on the given account. For instance, &quot;Laccount1@gmail.com&quot; can identify a Google account, giving access to services, such as gmail, gtalk, Picasa, and Youtube, with each service having a separate service instance bound to the account.</p>
+<p>An entity that collects all the data (such as user name, credentials, settings) needed for connecting to services. An account is always bound to a single provider and has a list of service instances bound to the account. The services can be individually enabled and disabled on the given account. For instance, "Laccount1@gmail.com" can identify a Google account, giving access to services, such as gmail, gtalk, Picasa, and Youtube, with each service having a separate service instance bound to the account.</p>
 </li></ul>
 
 <h2 id="prerequisites">Prerequisites</h2>
@@ -77,15 +77,15 @@
 <li>To make your application visible only for devices that support the account feature, the application must specify the following feature in the <code>config.xml</code> file:
 <pre class="prettyprint">
 &lt;widget&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:feature name=&quot;http://tizen.org/feature/account&quot;/&gt;
+   &lt;tizen:feature name="http://tizen.org/feature/account"/&gt;
 &lt;/widget&gt;
 </pre>
 <p>Additionally, to double-check the Account API support while the application is running, use the <code>tizen.systeminfo.getCapability()</code> method and enable or disable the code that needs the API, as needed.</p>
 </li>
 <li>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/account.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/account.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/account.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/account.write"/&gt;
 </pre>
 </li>
 <li>Some of the account management features can be invoked only in account provider applications. If you are creating an account provider application, pay attention to the following requirements:
@@ -93,13 +93,13 @@
 <li>Account provider applications must have a specially prepared <code>config.xml</code> file with an account provider section:
 
 <pre class="prettyprint">
-&lt;tizen:account multiple-account-support=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:icon section=&quot;Account&quot;&gt;icon.png&lt;/tizen:icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:icon section=&quot;AccountSmall&quot;&gt;icon.png&lt;/tizen:icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:display-name xml:lang=&quot;en-gb&quot;&gt;Test&lt;/tizen:display-name&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:capability&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;http://tizen.org/account/capability/contact
-&nbsp;&nbsp;&nbsp;&lt;/tizen:capability&gt;
+&lt;tizen:account multiple-account-support="true"&gt;
+   &lt;tizen:icon section="Account"&gt;icon.png&lt;/tizen:icon&gt;
+   &lt;tizen:icon section="AccountSmall"&gt;icon.png&lt;/tizen:icon&gt;
+   &lt;tizen:display-name xml:lang="en-gb"&gt;Test&lt;/tizen:display-name&gt;
+   &lt;tizen:capability&gt;
+      http://tizen.org/account/capability/contact
+   &lt;/tizen:capability&gt;
 &lt;/tizen:account&gt;
 </pre>
 </li>
@@ -124,14 +124,14 @@
 <pre class="prettyprint">
 function getAccountsSuccess(accounts)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; accounts.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Use the retrieved accounts */
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; accounts.length; i++)
+   {
+      /* Use the retrieved accounts */
+   }
 }
 function getAccountsError(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Error: &#39; + error.message);
+   console.log('Error: ' + error.message);
 }
 tizen.account.getAccounts(getAccountsSuccess, getAccountsError);
 </pre>
@@ -144,7 +144,7 @@ var account = tizen.account.getAccount(my_account_id);
 </pre>
 </li>
 </ul>
-         
+
                 <h2 id="get_providers" name="get_providers">Retrieving Providers</h2>
 
 <p>To create accounts, you must learn how to get access to account providers:</p>
@@ -163,19 +163,19 @@ var provider = tizen.account.getProvider(appId);
 <pre class="prettyprint">
 function getProvidersSuccess(providers)
 {
-&nbsp;&nbsp;&nbsp;/* Providers is an array whose members are providers with contact capability */
+   /* Providers is an array whose members are providers with contact capability */
 }
 function getProvidersError(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Error: &#39; + error.message);
+   console.log('Error: ' + error.message);
 }
 
 tizen.account.getProviders(getProvidersSuccess, getProvidersError,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;http://tizen.org/account/capability/contact&quot;);
+                           "http://tizen.org/account/capability/contact");
 </pre>
 </li>
 </ul>
-           
+
                 <h2 id="manage" name="manage">Managing Accounts</h2>
 
 <p>Creating, adding, updating, and deleting accounts is a basic account management skill:</p>
@@ -196,7 +196,7 @@ var accountProvider = tizen.account.getProvider(appId);
 
 <pre class="prettyprint">
 var account =
-&nbsp;&nbsp;&nbsp;new tizen.Account(accountProvider, {userName: &#39;admin&#39;, iconUri: &#39;path/to/icon.jpg&#39;});
+   new tizen.Account(accountProvider, {userName: 'admin', iconUri: 'path/to/icon.jpg'});
 </pre>
 </li>
 <li>Add the account to the account database:
@@ -208,7 +208,7 @@ tizen.account.add(account);
 <li>To update the account information, change the attributes of the <code>Account</code> object for the relevant account:
 
 <pre class="prettyprint">
-account.userName = &#39;new username&#39;;
+account.userName = 'new username';
 </pre>
 </li>
 <li>To save the changed values, use the <code>update()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
@@ -225,7 +225,7 @@ tizen.account.remove(account.id);
 </pre>
 </li>
 </ol>
-           
+
                 <h2 id="listener" name="listener">Receiving Notifications on Account Changes</h2>
 
 <p>Learning how to register change listeners enables you to synchronize the view of your application with the changes in the account database:</p>
@@ -236,18 +236,18 @@ tizen.account.remove(account.id);
 <pre class="prettyprint">
 var accountChangeListener =
 {
-&nbsp;&nbsp;&nbsp;onadded: function(account)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Called when an account is added */
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onremoved: function(accountId)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Called when an account is removed */
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onupdated: function(account)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Called when a registered account is changed */
-&nbsp;&nbsp;&nbsp;}
+   onadded: function(account)
+   {
+      /* Called when an account is added */
+   },
+   onremoved: function(accountId)
+   {
+      /* Called when an account is removed */
+   },
+   onupdated: function(account)
+   {
+      /* Called when a registered account is changed */
+   }
 };
 </pre>
 </li>
@@ -275,15 +275,15 @@ tizen.account.removeAccountListener(watchId);
 <p>Set the additional information with the <code>setExtendedData()</code> method:</p>
 
 <pre class="prettyprint">
-var key = &#39;nickname&#39;;
-var value = &#39;nickname of anonymous user&#39;;
+var key = 'nickname';
+var value = 'nickname of anonymous user';
 account.setExtendedData(key, value);
 </pre>
 
 <p>To overwrite the previous data value, set a new value with the same key:</p>
 
 <pre class="prettyprint">
-account.setExtendedData(key, &#39;nickname updated&#39;);
+account.setExtendedData(key, 'nickname updated');
 </pre>
 </li>
 
@@ -291,7 +291,7 @@ account.setExtendedData(key, &#39;nickname updated&#39;);
 <ul><li>To retrieve extended data value for a specific key, use the <code>getExtendedData()</code> method:
 
 <pre class="prettyprint">
-var key = &#39;accessToken&#39;;
+var key = 'accessToken';
 var value = account.getExtendedData(key);
 </pre>
 
@@ -300,17 +300,17 @@ var value = account.getExtendedData(key);
 
 <pre class="prettyprint">
 account.getExtendedData(function(extendedData)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; extendedData.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var key = extendedData.key;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var value = extendedData.value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(key + &quot;: &quot; + value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Error: &quot; + e.message);
-&nbsp;&nbsp;&nbsp;});
+   {
+      for (var i = 0; i &lt; extendedData.length; i++)
+      {
+         var key = extendedData.key;
+         var value = extendedData.value;
+         console.log(key + ": " + value);
+      }
+   }, function(e)
+   {
+      console.log("Error: " + e.message);
+   });
 </pre>
 
 </li></ul></li></ul></li>
diff --git a/org.tizen.guides/html/web/personal/bookmarks_w.htm b/org.tizen.guides/html/web/personal/bookmarks_w.htm
index 4d437ef..6411265 100644 (file)
--- a/org.tizen.guides/html/web/personal/bookmarks_w.htm
+++ b/org.tizen.guides/html/web/personal/bookmarks_w.htm
@@ -43,68 +43,68 @@
 
   <h1>Bookmarks</h1>
 
- 
+
   <p>You can manage the Tizen Web browser bookmarks by retrieving the current bookmark list. You can create or delete both bookmark folders and items.</p>
-  
+
 <p>This feature is supported in mobile applications only.</p>
-  
+
   <p>The main features of the Bookmark API include:</p>
   <ul>
    <li>Creating bookmarks <p>You can <a href="#Creating_Bookmark">create bookmark folders and items</a> using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface.</p> </li>
    <li>Deleting bookmarks <p>You can <a href="#Deleting_Bookmark">delete bookmark folders and items</a> using the <code>BookmarkManager</code> interface.</p> </li>
     <li>Retrieving bookmarks <p>You can <a href="#Retrieving_Bookmark">retrieve a list of current bookmarks</a> of the Tizen Web browser using the <code>BookmarkManager</code> interface.</p> </li>
   </ul>
-   
+
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html">Bookmark</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/bookmark.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/bookmark.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/bookmark.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/bookmark.write"/&gt;
 </pre>
 
-         
+
  <h2 id="Creating_Bookmark" name="Creating_Bookmark">Creating Bookmark Folders and Items</h2>
- 
-  <p>To create engaging applications with bookmark-related features, you must learn how to add bookmark folders and items to the root bookmark folder and subfolders:</p> 
-  <ul> 
-   <li>To add a folder and a bookmark to the root bookmark folder: 
-    <ol> 
+
+  <p>To create engaging applications with bookmark-related features, you must learn how to add bookmark folders and items to the root bookmark folder and subfolders:</p>
+  <ul>
+   <li>To add a folder and a bookmark to the root bookmark folder:
+    <ol>
      <li><p>Create an instance of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkFolder">BookmarkFolder</a> interface by specifying the bookmark folder name:</p>
 <pre class="prettyprint">
-var folder1 = new tizen.BookmarkFolder(&quot;folder1&quot;);
+var folder1 = new tizen.BookmarkFolder("folder1");
 </pre></li>
      <li><p>Create an instance of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkItem">BookmarkItem</a> interface by specifying the bookmark item name and URL:</p>
 <pre class="prettyprint">
-var tizen = new tizen.BookmarkItem(&quot;tizen&quot;, &quot;https://www.tizen.org&quot;);
+var tizen = new tizen.BookmarkItem("tizen", "https://www.tizen.org");
 </pre></li>
      <li><p>Use the <code>add()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface to add both a bookmark folder and a bookmark to the root bookmark folder:</p>
 <pre class="prettyprint">
 tizen.bookmark.add(folder1);
 tizen.bookmark.add(tizen);
 </pre></li>
-    </ol> </li> 
-   <li>To add a folder and a bookmark to a subfolder: 
-    <ol> 
+    </ol> </li>
+   <li>To add a folder and a bookmark to a subfolder:
+    <ol>
      <li><p>Create an instance of the <code>BookmarkFolder</code> and <code>BookmarkItem</code> interface:</p>
 <pre class="prettyprint">
-var folder2 = new tizen.BookmarkFolder(&quot;folder2&quot;);
+var folder2 = new tizen.BookmarkFolder("folder2");
 var developerTizen =
-&nbsp;&nbsp;&nbsp;new tizen.BookmarkItem(&quot;developerTizen&quot;, &quot;https://developer.tizen.org&quot;);
+   new tizen.BookmarkItem("developerTizen", "https://developer.tizen.org");
 </pre></li>
      <li><p>Use the <code>add()</code> method to add a folder and a bookmark to a bookmark subfolder by specifying the parent bookmark folder name:</p>
 <pre class="prettyprint">
 tizen.bookmark.add(folder2, folder1);
 tizen.bookmark.add(developerTizen, folder1);
 </pre>
-<p>As a result of the code snippet above, the <code>folder1</code> folder contains the <code>developerTizen</code> bookmark and the <code>folder2</code> subfolder.</p></li> 
-    </ol> </li> 
-  </ul> 
-  
-                       
+<p>As a result of the code snippet above, the <code>folder1</code> folder contains the <code>developerTizen</code> bookmark and the <code>folder2</code> subfolder.</p></li>
+    </ol> </li>
+  </ul>
+
+
   <h2 id="Deleting_Bookmark" name="Deleting_Bookmark">Deleting Bookmarks</h2>
-  
-  <p>To create engaging applications with bookmark-related features, you must learn how to delete bookmarks:</p> 
-  <ol> 
+
+  <p>To create engaging applications with bookmark-related features, you must learn how to delete bookmarks:</p>
+  <ol>
    <li><p>To remove a bookmark item, use the <code>remove()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface and specify the bookmark item:</p>
 <pre class="prettyprint">
 tizen.bookmark.remove(tizen);
@@ -117,14 +117,14 @@ tizen.bookmark.remove(folder2);
 <pre class="prettyprint">
 tizen.bookmark.remove();
 </pre></li>
-  </ol> 
-  
-    
+  </ol>
+
+
   <h2 id="Retrieving_Bookmark" name="Retrieving_Bookmark">Retrieving the Bookmark List</h2>
-  
-  
-  <p>To create engaging applications with bookmark-related features, you must learn how to retrieve the bookmarks:</p> 
-  <ol> 
+
+
+  <p>To create engaging applications with bookmark-related features, you must learn how to retrieve the bookmarks:</p>
+  <ol>
    <li><p>To retrieve bookmarks only from the root bookmark folder, use the <code>get()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface without specifying any parameter:</p>
 <pre class="prettyprint">
 tizen.bookmark.get();
diff --git a/org.tizen.guides/html/web/personal/calendar_w.htm b/org.tizen.guides/html/web/personal/calendar_w.htm
index 5089c35..5f10f22 100644 (file)
--- a/org.tizen.guides/html/web/personal/calendar_w.htm
+++ b/org.tizen.guides/html/web/personal/calendar_w.htm
@@ -34,8 +34,8 @@
                </ul></li>
                <li><a href="#Events">Events</a>
                <ul class="toc">
-                       <li><a href="#Adding_Events">Adding Events to a Calendar</a></li> 
-                       <li><a href="#Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</a></li> 
+                       <li><a href="#Adding_Events">Adding Events to a Calendar</a></li>
+                       <li><a href="#Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</a></li>
                        <li><a href="#Managing_Event">Managing a Single Event</a></li>
                        <li><a href="#Updating_Event">Updating Recurring Events</a></li>
                        <li><a href="#Managing_Event_Batch">Managing Multiple Events in the Batch Mode</a></li>
@@ -47,9 +47,9 @@
                        <li><a href="#Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</a></li>
                        <li><a href="#Managing_Task">Managing a Single Task</a></li>
                        <li><a href="#Managing_Task_Batch">Managing Multiple Tasks in the Batch Mode</a></li>
-                       <li><a href="#Converting_Task">Converting Task Formats</a></li>  
+                       <li><a href="#Converting_Task">Converting Task Formats</a></li>
                </ul></li>
-               <li><a href="#Receiving_Calendar">Receiving Notifications on Calendar Changes</a></li>          
+               <li><a href="#Receiving_Calendar">Receiving Notifications on Calendar Changes</a></li>
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -65,15 +65,15 @@
   <h1>Calendar</h1>
 
 <p>Tizen enables you to manage your schedule and tasks in calendars. A calendar is a collection of events or tasks, depending upon the calendar type. Each event or task has a series of attributes, such as purpose, starting time, and duration.</p>
-  
+
 <p>This feature is supported in mobile applications only.</p>
   <p>The main features of the Calendar API include:</p>
   <ul>
-  <li>Calendar management 
+  <li>Calendar management
    <p>You can <a href="#Creating_Calendar">create a new calendar</a> using the <code>addCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface (you also need the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html">Account</a> API).</p>
 </li>
-   <li>Calendar item management 
-   <p>You can manage calendar items (add a new <a href="#Adding_Events">event</a> or <a href="#Adding_Tasks">task</a> to a calendar, or manage a single calendar <a href="#Managing_Event">event</a> or <a href="#Managing_Task">task</a>)  by using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface. You can also delete or <a href="#Updating_Event">update a single instance of a recurring event</a>.</p> 
+   <li>Calendar item management
+   <p>You can manage calendar items (add a new <a href="#Adding_Events">event</a> or <a href="#Adding_Tasks">task</a> to a calendar, or manage a single calendar <a href="#Managing_Event">event</a> or <a href="#Managing_Task">task</a>)  by using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface. You can also delete or <a href="#Updating_Event">update a single instance of a recurring event</a>.</p>
    <p>When creating an important event or task, such as a monthly meeting or a task of paying a utility bill, you can set an alarm for it by using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface. The alarm is triggered at a defined time to remind the user of the event or task.</p>
    <p>You can create multiple <a href="#Adding_Events_Batch">events</a> or <a href="#Adding_Tasks_Batch">tasks</a>, and manage multiple calendar <a href="#Managing_Event_Batch">events</a> or <a href="#Managing_Task_Batch">tasks</a> simultaneously by using the applicable batch methods. The batch mode provides faster, optimized processing of multiple calendar items.</p>
 
@@ -82,54 +82,54 @@
        The batch mode does not provide progress information about operations. To ensure that you can view the progress, break the batch operation down into multiple smaller batch operations. For example, break down a batch of 100 update requests into 10 batch operations that update 10 records at a time. Breaking down a batch operation also helps you avoid blocking other database operations, such as add or remove.
 </div>
 </li>
-<li>iCalendar 2.0 format conversions 
+<li>iCalendar 2.0 format conversions
 <p>You can convert a calendar <a href="#Converting_Event">event</a> or <a href="#Converting_Task">task</a> to the iCalendar format and back.</p>
 </li>
-   <li>Calendar change notifications 
-   <p>You can keep the calendar in your application synchronized with user-specific calendars, such as a calendar on a social networking Web site, by <a href="#Receiving_Calendar">receiving notifications</a> in your application when calendar items change.</p> 
+   <li>Calendar change notifications
+   <p>You can keep the calendar in your application synchronized with user-specific calendars, such as a calendar on a social networking Web site, by <a href="#Receiving_Calendar">receiving notifications</a> in your application when calendar items change.</p>
     </li>
 </ul>
 
-  <p>The Calendar API uses the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TZDate">TZDate</a> object of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time</a> API and not the standard JavaScript <code>Date</code> object to handle difficult issues related to the time zone, because the <code>TZDate</code> object handles exact time and provides various utility methods.</p>  
+  <p>The Calendar API uses the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TZDate">TZDate</a> object of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time</a> API and not the standard JavaScript <code>Date</code> object to handle difficult issues related to the time zone, because the <code>TZDate</code> object handles exact time and provides various utility methods.</p>
 
 <p>For a practical example of managing calendar events in your application, see the <a href="task_eventmanager_w.htm">Event Manager</a> sample task.</p>
-  
+
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/calendar.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/calendar.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/calendar.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/calendar.write"/&gt;
 </pre>
 
-       
+
  <h2 id="Creating_Calendar" name="Creating_Calendar">Creating a Calendar</h2>
 
 <div class="note">
        <strong>Note</strong>
        The created calendar is associated with a specified account. Therefore, you must retrieve the account before creating a new calendar.
 </div>
-  
+
 <p>To create a new calendar:</p>
-  
-  <ol> 
+
+  <ol>
    <li>Declare a variable to store the created calendar:
 <pre class="prettyprint">
 var myCalendar = null;
 </pre>
    </li>
-   <li>Define a success callback for the <code>getAccounts()</code> method. The callback receives a list of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> objects. Use the first account ID to construct a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object. 
+   <li>Define a success callback for the <code>getAccounts()</code> method. The callback receives a list of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> objects. Use the first account ID to construct a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object.
    <p>Add the new calendar to the system using the <code>addCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p>
 <pre class="prettyprint">
 function getAccountsSuccess(accounts)
 {
-&nbsp;&nbsp;&nbsp;var account = accounts[0];
-&nbsp;&nbsp;&nbsp;if (account)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New calendar can be created and added */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myCalendar = new tizen.Calendar(account.id, &quot;remote calendar&quot;, &quot;TASK&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.calendar.addCalendar(myCalendar);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;New calendar created with ID=&quot; + myCalendar.id);
-&nbsp;&nbsp;&nbsp;}
+   var account = accounts[0];
+   if (account)
+   {
+      /* New calendar can be created and added */
+      myCalendar = new tizen.Calendar(account.id, "remote calendar", "TASK");
+      tizen.calendar.addCalendar(myCalendar);
+      console.log("New calendar created with ID=" + myCalendar.id);
+   }
 }
 </pre></li>
    <li>To retrieve available accounts, use the <code>getAccounts()</code> method. The following method call invokes the <code>getAccountsSuccess</code> event handler defined above:
@@ -146,64 +146,64 @@ tizen.account.getAccounts(getAccountsSuccess, function(err));
  <li>To retrieve the default calendar, use the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.
  <p>The following example retrieves the event-type default calendar:</p>
 <pre class="prettyprint">
-tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+tizen.calendar.getDefaultCalendar("EVENT");
 </pre></li>
  <li>To retrieve all the available calendars as an array, use the <code>getCalendars()</code> method.
  <p>The following example retrieves all event-type calendars:</p>
 <pre class="prettyprint">
-tizen.calendar.getCalendars(&quot;EVENT&quot;, calendarListCallback, errorCallback);
+tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallback);
 </pre></li>
  <li>To retrieve a special calendar, which combines events (or tasks) from all calendars of the same type, use the <code>getUnifiedCalendar()</code> method of the <code>CalendarManager</code> interface.
  <p>The following example retrieves a unified event-type calendar:</p>
 <pre class="prettyprint">
-tizen.calendar.getUnifiedCalendar(&quot;EVENT&quot;);
+tizen.calendar.getUnifiedCalendar("EVENT");
 </pre></li>
 </ul>
 
  <h2 id="Events" name="Events">Events</h2>
 
   <p>The events are identified using the <code>CalendarEventId</code>, which is a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItemId">CalendarItemId</a> typedef. In recurring events, the <code>CalendarEventId</code> contains a recurrence ID (<code>rid</code>) in addition to the actual event ID, to separately identify each occurrence of the recurring event.</p>
- 
+
 <div class="note">
        <strong>Note</strong>
-       Due to time zone and daylight saving time, an event for &quot;today&quot; can actually occur in the past or in the future.
+       Due to time zone and daylight saving time, an event for "today" can actually occur in the past or in the future.
 </div>
-  
+
   <p>Using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object, you can:</p>
   <ul>
-       <li>Add events to a calendar one by one or in a batch mode.</li> 
+       <li>Add events to a calendar one by one or in a batch mode.</li>
        <li>Update or delete events one by one or in a batch mode.</li>
        <li>Update recurring events.</li>
        <li>Convert events to the iCalendar format and back.</li>
  </ul>
 
  <h3 id="Adding_Events" name="Adding_Events">Adding Events to a Calendar</h3>
- 
+
  <p>To add events to a calendar:</p>
   <ol>
     <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as an event.</p>
 <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+var calendar = tizen.calendar.getDefaultCalendar("EVENT");
 </pre></li>
      <li><p>Create a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object and define the event properties:</p>
 <pre class="prettyprint">
 var ev = new tizen.CalendarEvent
 ({
-&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,
-&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,
-&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(1, &quot;HOURS&quot;),
-&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;,
+   description:"HTML5 Introduction",
+   summary:"HTML5 Webinar",
+   startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+   duration: new tizen.TimeDuration(1, "HOURS"),
+   location:"Huesca",
 </pre></li>
      <li><p>To make a recurring event, define a recurrence rule.</p> <p>In this example, the event repeats once a day for 3 days.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;recurrenceRule: new tizen.CalendarRecurrenceRule(&quot;DAILY&quot;, {occurrenceCount: 3})
+   recurrenceRule: new tizen.CalendarRecurrenceRule("DAILY", {occurrenceCount: 3})
 });
 </pre></li>
     <li><p>To set up an alarm to remind the user about the event, create an alarm with the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface, and add the alarm to the event:</p>
 <pre class="prettyprint">
 /* Alarm is triggered with sound 30 minutes before the event start time */
-var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, &quot;MINS&quot;), &quot;SOUND&quot;);
+var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, "MINS"), "SOUND");
 
 ev.alarms = [alarm];
 </pre></li>
@@ -212,24 +212,24 @@ ev.alarms = [alarm];
 calendar.add(ev); /* ev.id attribute is generated */
 </pre></li>
     </ol>
-                
+
   <h3 id="Adding_Events_Batch" name="Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</h3>
-<p>You can create multiple events simultaneously by using the <code>addBatch()</code> method.</p>  
+<p>You can create multiple events simultaneously by using the <code>addBatch()</code> method.</p>
  <p>To add events to a calendar in the batch mode:</p>
     <ol>
      <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p>
 <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+var calendar = tizen.calendar.getDefaultCalendar("EVENT");
 </pre></li>
      <li><p>Define the items to be added as an array:</p>
 <pre class="prettyprint">
 var ev = new tizen.CalendarEvent
 ({
-&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,
-&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,
-&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;duration: new tizen.TimeDuration(1, &quot;HOURS&quot;),
-&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;
+   description:"HTML5 Introduction",
+   summary:"HTML5 Webinar",
+   startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+   duration: new tizen.TimeDuration(1, "HOURS"),
+   location:"Huesca"
 });
 </pre>
 
@@ -249,14 +249,14 @@ calendar.addBatch([ev]);
 </div>
 </li>
     </ol>
-       
+
   <h3 id="Managing_Event" name="Managing_Event">Managing a Single Event</h3>
-                       
+
   <p>To manage a single event:</p>
     <ol>
      <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p>
 <pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+var myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
 </pre></li>
      <li><p>Retrieve all events stored in the calendar by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p>
 <pre class="prettyprint">
@@ -269,16 +269,16 @@ myCalendar.find(eventSearchSuccessCallback);
 /* Define the event success callback */
 function eventSearchSuccessCallback(events)
 {
-&nbsp;&nbsp;&nbsp;/* Update the first existing event */
-&nbsp;&nbsp;&nbsp;events[0].description = &quot;New Description&quot;;
-&nbsp;&nbsp;&nbsp;myCalendar.update(events[0]);
+   /* Update the first existing event */
+   events[0].description = "New Description";
+   myCalendar.update(events[0]);
 
-&nbsp;&nbsp;&nbsp;/* Delete the second existing event */
-&nbsp;&nbsp;&nbsp;myCalendar.remove(events[1].id);
+   /* Delete the second existing event */
+   myCalendar.remove(events[1].id);
 }
 </pre></li>
     </ol>
-            
+
   <h3 id="Updating_Event" name="Updating_Event">Updating Recurring Events</h3>
    <p>If you need to delete or update a single instance of a recurring event, get the list of event instances first with the <code>expandRecurrence()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object. Then, delete the applicable event instance, or update it by calling the <code>update()</code> method with the <code>updateAllInstances</code> parameter set to <code>false</code>.</p>
   <p>To update recurring events:</p>
@@ -286,13 +286,13 @@ function eventSearchSuccessCallback(events)
      <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p>
 <p>Retrieve the event using the <code>get()</code> method by specifying the event ID.</p>
 <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+var calendar = tizen.calendar.getDefaultCalendar("EVENT");
 var event = calendar.get(evId);
 </pre></li>
      <li>Expand the recurring event to get its instances by using the <code>expandRecurrence()</code> method of the <code>CalendarEvent</code> object:
 <pre class="prettyprint">
 event.expandRecurrence(new tizen.TZDate(2012, 2, 1), new tizen.TZDate(2012, 2, 15),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eventExpandSuccessCB);
+                       eventExpandSuccessCB);
 </pre>
 <p>The expanded event instances have their own <code>id.uid</code> and <code>id.rid</code> attributes, where the <code>id.uid</code> attribute is the same for all instances.</p> </li>
      <li><p>Update a single instance of the expanded recurring event.</p> <p>In case of recurring events, you can use the second parameter of the <code>update()</code> method to determine whether a single instance or all occurrences of the event are updated. If the parameter is set to <code>true</code>, all instances are updated, while if it is set to <code>false</code>, only the indicated instance of the recurring event is updated (based on the <code>id.rid</code> attribute).</p> <p>In this example, the second instance of the event is updated.</p>
@@ -300,19 +300,19 @@ event.expandRecurrence(new tizen.TZDate(2012, 2, 1), new tizen.TZDate(2012, 2, 1
 /* Success event handler */
 function eventExpandSuccessCB(events)
 {
-&nbsp;&nbsp;&nbsp;events[1].summary = &#39;updated summary&#39;;
-&nbsp;&nbsp;&nbsp;calendar.update(events[1], false);
+   events[1].summary = 'updated summary';
+   calendar.update(events[1], false);
 }
 </pre></li>
     </ol>
-           
+
   <h3 id="Managing_Event_Batch" name="Managing_Event_Batch">Managing Multiple Events in the Batch Mode</h3>
 <p>You can manage multiple events simultaneously by using the applicable batch methods: <code>updateBatch()</code> and <code>removeBatch()</code>.</p>
 <p>To manage multiple events in the batch mode:</p>
   <ol>
    <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p>
 <pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+var myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
 </pre></li>
      <li><p>Retrieve all events stored in the calendar by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p>
 <pre class="prettyprint">
@@ -326,13 +326,13 @@ myCalendar.find(eventSearchSuccessCallback, errorCallback);
 <pre class="prettyprint">
 function eventSearchSuccessCallback(events)
 {
-&nbsp;&nbsp;&nbsp;events[0].description = &quot;New Description 1&quot;;
-&nbsp;&nbsp;&nbsp;events[1].description = &quot;New Description 2&quot;;
+   events[0].description = "New Description 1";
+   events[1].description = "New Description 2";
 </pre></li>
        <li><p>Use the <code>updateBatch()</code> method to update multiple calendar items asynchronously:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* Update the first 2 existing events */
-&nbsp;&nbsp;&nbsp;myCalendar.updateBatch(events.slice(0, 2));
+   /* Update the first 2 existing events */
+   myCalendar.updateBatch(events.slice(0, 2));
 }
 </pre></li>
       </ol> </li>
@@ -340,16 +340,16 @@ function eventSearchSuccessCallback(events)
 <pre class="prettyprint">
 function eventSearchSuccessCallback(events)
 {
-&nbsp;&nbsp;&nbsp;/* Delete the first 2 existing events */
-&nbsp;&nbsp;&nbsp;myCalendar.removeBatch([events[0].id, events[1].id]);
+   /* Delete the first 2 existing events */
+   myCalendar.removeBatch([events[0].id, events[1].id]);
 }
 </pre></li>
     </ol>
 
 <h3 id="Converting_Event" name="Converting_Event">Converting Event Formats</h3>
-<p>You can make event exchange more efficient in your application by converting an event to the iCalendar format (or back) using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object constructor and the <code>convertToString()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">CalendarItem</a> interface.</p> 
+<p>You can make event exchange more efficient in your application by converting an event to the iCalendar format (or back) using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object constructor and the <code>convertToString()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">CalendarItem</a> interface.</p>
 <p>The conversion allows you to exchange calendar data between applications by sharing files with the <code>.ics</code> extension. The iCalendar format is independent of the underlying transport protocol, meaning that calendar items can be exchanged using a variety of transports, including HTTP, SMTP, and Infrared. The iCalendar format can be used to store calendar item information and exchange calendar data over the Internet.</p>
-<p>The following example shows a sample event in the iCalendar format:</p> 
+<p>The following example shows a sample event in the iCalendar format:</p>
 <pre class="prettyprint">
 BEGIN:VCALENDAR
 BEGIN:VEVENT
@@ -366,40 +366,40 @@ END:VCALENDAR
     <ol>
      <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p>
 <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+var calendar = tizen.calendar.getDefaultCalendar("EVENT");
 </pre></li>
      <li>Create a new <code>CalendarEvent</code> object from the iCalendar string and add it to the default calendar:
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;var ev = new tizen.CalendarEvent
-&nbsp;&nbsp;&nbsp;(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;BEGIN:VCALENDAR\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;BEGIN:VEVENT\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DTSTAMP:19970901T1300Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DTSTART:19970903T163000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;DTEND:19970903T190000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;SUMMARY:Tizen, Annual Employee Review\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;CATEGORIES:BUSINESS,HUMAN RESOURCES\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;END:VEVENT\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;END:VCALENDAR&quot;, &quot;ICALENDAR_20&quot;
-&nbsp;&nbsp;&nbsp;);
-
-&nbsp;&nbsp;&nbsp;calendar.add(ev);
-&nbsp;&nbsp;&nbsp;console.log(&#39;Event added with UID &#39; + ev.id.uid);
+   var ev = new tizen.CalendarEvent
+   (
+      "BEGIN:VCALENDAR\r\n" +
+      "BEGIN:VEVENT\r\n" +
+      "DTSTAMP:19970901T1300Z\r\n" +
+      "DTSTART:19970903T163000Z\r\n" +
+      "DTEND:19970903T190000Z\r\n" +
+      "SUMMARY:Tizen, Annual Employee Review\r\n" +
+      "CATEGORIES:BUSINESS,HUMAN RESOURCES\r\n" +
+      "END:VEVENT\r\n" +
+      "END:VCALENDAR", "ICALENDAR_20"
+   );
+
+   calendar.add(ev);
+   console.log('Event added with UID ' + ev.id.uid);
 }
 </pre></li>
     </ol> <p>To convert multiple strings and import them to a calendar, convert the strings one by one and then use the <code>addBatch()</code> method to <a href="#Adding_Events_Batch">add all the events at once in a batch mode</a>.</p> </li>
    <li>To convert an event to the iCalendar format:
     <ol>
-     <li>Get the default calendar and find all events which include the &quot;Tizen&quot; string in the <code>Summary</code> attribute:
+     <li>Get the default calendar and find all events which include the "Tizen" string in the <code>Summary</code> attribute:
 <pre class="prettyprint">
 var myCalendar;
 
-myCalendar = tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
 
 /* Define a filter */
-var filter = new tizen.AttributeFilter(&quot;summary&quot;, &quot;CONTAINS&quot;, &quot;Tizen&quot;);
+var filter = new tizen.AttributeFilter("summary", "CONTAINS", "Tizen");
 
 /* Search for the events */
 myCalendar.find(eventSearchSuccessCallback, errorCallback, filter);
@@ -408,8 +408,8 @@ myCalendar.find(eventSearchSuccessCallback, errorCallback, filter);
 <pre class="prettyprint">
 function eventSearchSuccessCallback(events)
 {
-&nbsp;&nbsp;&nbsp;/* Convert the first event */
-&nbsp;&nbsp;&nbsp;var vevent = events[0].convertToString(&quot;ICALENDAR_20&quot;);
+   /* Convert the first event */
+   var vevent = events[0].convertToString("ICALENDAR_20");
 }
 </pre></li>
     </ol>
@@ -417,40 +417,40 @@ function eventSearchSuccessCallback(events)
 
 
 <h2 id="Tasks" name="Tasks">Tasks</h2>
-  
+
 <p>The tasks are identified using the <code>CalendarTaskId</code>, which is a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItemId">CalendarItemId</a> typedef.</p>
-  
+
 <p>Using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object, you can:</p>
   <ul>
-       <li>Add tasks to a calendar one by one or in a batch mode.</li> 
+       <li>Add tasks to a calendar one by one or in a batch mode.</li>
        <li>Update or delete tasks one by one or in a batch mode.</li>
        <li>Convert tasks to the iCalendar format and back.</li>
  </ul>
-  
+
 <h3 id="Adding_Tasks" name="Adding_Tasks">Adding Tasks to a Calendar</h3>
- 
+
 <p>To add tasks to a calendar:</p>
   <ol>
     <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p>
 <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
+var calendar = tizen.calendar.getDefaultCalendar("TASK");
 </pre></li>
      <li><p>Create a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object and define the task properties:</p>
 <pre class="prettyprint">
 var task = new tizen.CalendarTask
 ({
-&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,
-&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,
-&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 10, 10, 0),
-&nbsp;&nbsp;&nbsp;dueDate: new tizen.TZDate(2011, 3, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;completedDate: new tizen.TZDate(2011, 3, 20, 10, 0),
-&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;
+   description:"HTML5 Introduction",
+   summary:"HTML5 Webinar",
+   startDate: new tizen.TZDate(2011, 3, 10, 10, 0),
+   dueDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+   completedDate: new tizen.TZDate(2011, 3, 20, 10, 0),
+   location:"Huesca"
 });
 </pre></li>
         <li><p>To set up an alarm to remind the user about the task, create an alarm with the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface, and add the alarm to the task:</p>
 <pre class="prettyprint">
 /* Alarm is triggered with sound 30 minutes before the task start time */
-var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, &quot;MINS&quot;), &quot;SOUND&quot;);
+var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, "MINS"), "SOUND");
 
 task.alarms = [alarm];
 </pre></li>
@@ -459,25 +459,25 @@ task.alarms = [alarm];
 calendar.add(task); /* task.id attribute is generated */
 </pre></li>
     </ol>
-               
+
 <h3 id="Adding_Tasks_Batch" name="Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</h3>
 <p>You can create multiple tasks simultaneously by using the <code>addBatch()</code> method.</p>
 <p>To add tasks to a calendar in the batch mode:</p>
     <ol>
      <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p>
 <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
+var calendar = tizen.calendar.getDefaultCalendar("TASK");
 </pre></li>
      <li><p>Define the items to be added as an array:</p>
 <pre class="prettyprint">
 var task = new tizen.CalendarTask
 ({
-&nbsp;&nbsp;&nbsp;description:&quot;HTML5 Introduction&quot;,
-&nbsp;&nbsp;&nbsp;summary:&quot;HTML5 Webinar&quot;,
-&nbsp;&nbsp;&nbsp;startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;dueDate: new tizen.TZDate(2011, 5, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;completedDate: new tizen.TZDate(2011, 4, 30, 10, 0),
-&nbsp;&nbsp;&nbsp;location:&quot;Huesca&quot;
+   description:"HTML5 Introduction",
+   summary:"HTML5 Webinar",
+   startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+   dueDate: new tizen.TZDate(2011, 5, 30, 10, 0),
+   completedDate: new tizen.TZDate(2011, 4, 30, 10, 0),
+   location:"Huesca"
 });
 </pre>
 
@@ -497,14 +497,14 @@ calendar.addBatch([task]);
 </div>
 </li>
     </ol>
-       
+
  <h3 id="Managing_Task" name="Managing_Task">Managing a Single Task</h3>
- 
+
   <p>To manage a single task:</p>
     <ol>
      <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p>
 <pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
+var myCalendar = tizen.calendar.getDefaultCalendar("TASK");
 </pre></li>
      <li><p>Retrieve all tasks stored in the calendar by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p>
 <pre class="prettyprint">
@@ -516,23 +516,23 @@ myCalendar.find(taskSearchSuccessCallback);
 /* Define the event success callback */
 function taskSearchSuccessCallback(tasks)
 {
-&nbsp;&nbsp;&nbsp;/* Update the first existing task */
-&nbsp;&nbsp;&nbsp;tasks[0].description = &quot;New Description&quot;;
-&nbsp;&nbsp;&nbsp;myCalendar.update(tasks[0]);
+   /* Update the first existing task */
+   tasks[0].description = "New Description";
+   myCalendar.update(tasks[0]);
 
-&nbsp;&nbsp;&nbsp;/* Delete the second existing task */
-&nbsp;&nbsp;&nbsp;myCalendar.remove(tasks[1].id);
+   /* Delete the second existing task */
+   myCalendar.remove(tasks[1].id);
 }
 </pre></li>
     </ol>
-               
+
  <h3 id="Managing_Task_Batch" name="Managing_Task_Batch">Managing Multiple Tasks in the Batch Mode</h3>
  <p>You can manage multiple tasks simultaneously by using the applicable batch methods: <code>updateBatch()</code> and <code>removeBatch()</code>.</p>
  <p>To manage multiple tasks in the batch mode:</p>
   <ol>
    <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p>
 <pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
+var myCalendar = tizen.calendar.getDefaultCalendar("TASK");
 </pre></li>
      <li><p>Retrieve all tasks stored in the calendar by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p>
 <pre class="prettyprint">
@@ -545,13 +545,13 @@ myCalendar.find(taskSearchSuccessCallback);
 <pre class="prettyprint open-bottom">
 function taskSearchSuccessCallback(tasks)
 {
-&nbsp;&nbsp;&nbsp;tasks[0].description = &quot;New Description 1&quot;;
-&nbsp;&nbsp;&nbsp;tasks[1].description = &quot;New Description 2&quot;;
+   tasks[0].description = "New Description 1";
+   tasks[1].description = "New Description 2";
 </pre></li>
        <li><p>Use the <code>updateBatch()</code> method to update multiple calendar items asynchronously:</p>
 <pre class="prettyprint open-top">
-&nbsp;&nbsp;&nbsp;/* Update the first 2 existing tasks */
-&nbsp;&nbsp;&nbsp;myCalendar.updateBatch(tasks.slice(0, 2));
+   /* Update the first 2 existing tasks */
+   myCalendar.updateBatch(tasks.slice(0, 2));
 }
 </pre></li>
       </ol> </li>
@@ -559,16 +559,16 @@ function taskSearchSuccessCallback(tasks)
 <pre class="prettyprint">
 function taskSearchSuccessCallback(tasks)
 {
-&nbsp;&nbsp;&nbsp;/* Delete the first 2 existing tasks */
-&nbsp;&nbsp;&nbsp;myCalendar.removeBatch([tasks[0].id, tasks[1].id]);
+   /* Delete the first 2 existing tasks */
+   myCalendar.removeBatch([tasks[0].id, tasks[1].id]);
 }
 </pre></li>
-    </ol>             
- 
+    </ol>
+
  <h3 id="Converting_Task" name="Converting_Task">Converting Task Formats</h3>
-<p>You can make task exchange more efficient in your application by converting a task to the iCalendar format (or back) using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object constructor and the <code>convertToString()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">CalendarItem</a> interface.</p> 
+<p>You can make task exchange more efficient in your application by converting a task to the iCalendar format (or back) using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object constructor and the <code>convertToString()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">CalendarItem</a> interface.</p>
 <p>The conversion allows you to exchange calendar data between applications by sharing files with the <code>.ics</code> extension. The iCalendar format is independent of the underlying transport protocol, meaning that calendar items can be exchanged using a variety of transports, including HTTP, SMTP, and Infrared. The iCalendar format can be used to store calendar item information and exchange calendar data over the Internet.</p>
-<p>The following example shows a sample task in the iCalendar format:</p> 
+<p>The following example shows a sample task in the iCalendar format:</p>
 <pre class="prettyprint">
 BEGIN:VCALENDAR
 BEGIN:VTODO
@@ -586,39 +586,39 @@ END:VCALENDAR
     <ol>
      <li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p>
 <pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
+var calendar = tizen.calendar.getDefaultCalendar("TASK");
 </pre></li>
      <li>Create a new <code>CalendarTask</code> object from the iCalendar string and add it to the default calendar:
 <pre class="prettyprint">
 var task = new tizen.CalendarTask
 (
-&nbsp;&nbsp;&nbsp;&quot;BEGIN:VCALENDAR\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;VERSION:2.0\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;BEGIN:VTODO\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;DTSTAMP:TZID=CET:20110902T110000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;DTSTART;TZID=CET:20110906T140000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;DUE;TZID=CET:20110906T150000Z\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;SUMMARY:Tizen, discuss the schedule\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;DESCRIPTION:Find the feasible schedule\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;CATEGORIES:HUMAN RESOURCES\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;END:VTODO\r\n&quot; +
-&nbsp;&nbsp;&nbsp;&quot;END:VCALENDAR&quot;, &quot;ICALENDAR_20&quot;
+   "BEGIN:VCALENDAR\r\n" +
+   "VERSION:2.0\r\n" +
+   "BEGIN:VTODO\r\n" +
+   "DTSTAMP:TZID=CET:20110902T110000Z\r\n" +
+   "DTSTART;TZID=CET:20110906T140000Z\r\n" +
+   "DUE;TZID=CET:20110906T150000Z\r\n" +
+   "SUMMARY:Tizen, discuss the schedule\r\n" +
+   "DESCRIPTION:Find the feasible schedule\r\n" +
+   "CATEGORIES:HUMAN RESOURCES\r\n" +
+   "END:VTODO\r\n" +
+   "END:VCALENDAR", "ICALENDAR_20"
 );
 
 calendar.add(task);
-console.log(&#39;Task added with id &#39; + task.id);
+console.log('Task added with id ' + task.id);
 </pre></li>
     </ol> <p>To convert multiple strings and import them to a calendar, convert the strings one by one and then use the <code>addBatch()</code> method to <a href="#Adding_Tasks_Batch">add all the tasks at once in a batch mode</a>.</p> </li>
    <li>To convert a task to the iCalendar format:
     <ol>
-     <li>Get the default calendar and find all calendar items which include the &quot;Tizen&quot; string in the <code>Summary</code> attribute:
+     <li>Get the default calendar and find all calendar items which include the "Tizen" string in the <code>Summary</code> attribute:
 <pre class="prettyprint">
 var myCalendar;
 
-myCalendar = tizen.calendar.getDefaultCalendar(&quot;TASK&quot;);
+myCalendar = tizen.calendar.getDefaultCalendar("TASK");
 
 /* Define a filter */
-var filter = new tizen.AttributeFilter(&quot;summary&quot;, &quot;CONTAINS&quot;, &quot;Tizen&quot;);
+var filter = new tizen.AttributeFilter("summary", "CONTAINS", "Tizen");
 
 /* Search for the tasks */
 myCalendar.find(taskSearchSuccessCallback, null, filter);
@@ -627,8 +627,8 @@ myCalendar.find(taskSearchSuccessCallback, null, filter);
 <pre class="prettyprint">
 function taskSearchSuccessCallback(tasks)
 {
-&nbsp;&nbsp;&nbsp;/* Convert the first task */
-&nbsp;&nbsp;&nbsp;var vtodo = tasks[0].convertToString(&quot;ICALENDAR_20&quot;);
+   /* Convert the first task */
+   var vtodo = tasks[0].convertToString("ICALENDAR_20");
 }
 </pre></li>
     </ol> <p>To export and convert multiple tasks from a calendar, find the required tasks using the <code>find()</code> method with an applicable filter, and then convert the found tasks one by one.</p> </li>
@@ -637,7 +637,7 @@ function taskSearchSuccessCallback(tasks)
   <h2 id="Receiving_Calendar" name="Receiving_Calendar">Receiving Notifications on Calendar Changes</h2>
 <p>You can keep the calendar in your application synchronized with user-specific calendars by receiving notifications in your application when calendar items are added, updated, or deleted. Every change made to the calendar database triggers an event for which you can define a notification. For batch mode operations, each operation generates only a single event. A recurring event is treated as one event.</p>
 
-<p>The <code>addChangeListener()</code> method of the <code>Calendar</code> interface registers an event listener, which starts asynchronously once the <code>addChangeListener()</code> method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarChangeCallback">CalendarChangeCallback</a> interface to define listener event handlers for receiving the notifications.</p> 
+<p>The <code>addChangeListener()</code> method of the <code>Calendar</code> interface registers an event listener, which starts asynchronously once the <code>addChangeListener()</code> method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarChangeCallback">CalendarChangeCallback</a> interface to define listener event handlers for receiving the notifications.</p>
 
   <p>To receive notifications when calendar items are added, updated, or removed:</p>
   <ol>
@@ -653,23 +653,23 @@ var calendar;
 <pre class="prettyprint">
 var watcher =
 {
-&nbsp;&nbsp;&nbsp;/* When new items are added */
-&nbsp;&nbsp;&nbsp;onitemsadded: function(items)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(items.length + &quot; items were added&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When items are updated */
-&nbsp;&nbsp;&nbsp;onitemsupdated: function(items)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(items.length + &quot; items were updated&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When items are deleted */
-&nbsp;&nbsp;&nbsp;onitemsremoved: function(ids)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ids.length + &quot; items were removed&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* When new items are added */
+   onitemsadded: function(items)
+   {
+      console.log(items.length + " items were added");
+   },
+
+   /* When items are updated */
+   onitemsupdated: function(items)
+   {
+      console.log(items.length + " items were updated");
+   },
+
+   /* When items are deleted */
+   onitemsremoved: function(ids)
+   {
+      console.log(ids.length + " items were removed");
+   }
 };
 </pre></li>
    <li><p>Register the listener to use the defined event handlers:</p>
@@ -680,10 +680,10 @@ watcherId = calendar.addChangeListener(watcher);
 <pre class="prettyprint">
 function cancelWatch()
 {
-&nbsp;&nbsp;&nbsp;calendar.removeChangeListener(watcherId);
+   calendar.removeChangeListener(watcherId);
 }
 </pre></li>
-  </ol> 
+  </ol>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/personal/call_history_w.htm b/org.tizen.guides/html/web/personal/call_history_w.htm
index 16aad31..b7f802f 100644 (file)
--- a/org.tizen.guides/html/web/personal/call_history_w.htm
+++ b/org.tizen.guides/html/web/personal/call_history_w.htm
@@ -44,35 +44,35 @@
 
   <h1>Call History</h1>
 
- 
+
   <p>You can access information about various telephony services for circuit-switched telephony and voice over IP (VoIP). You can browse the call history of a device, remove call history entries, and monitor changes.</p>
-  
+
 <p>This feature is supported in mobile applications only.</p>
-  
+
   <p>The main features of the Call History API include:</p>
   <ul>
-   <li>Call history tracking 
+   <li>Call history tracking
    <p>You can <a href="#Searching_Call_History">search and store data about all incoming and outgoing calls</a> using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface. The retrieved data is displayed as a list using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> interface.</p></li>
    <li>Call history item deletion
    <p>You can manage the call history by <a href="#Removing_Call_History">removing unnecessary call history items</a> using the <code>CallHistory</code> interface.</p></li>
-   <li>Change monitoring 
+   <li>Change monitoring
    <p>You can register event listeners to <a href="#Monitoring_Call_History">monitor changes in the call history</a> using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryChangeCallback">CallHistoryChangeCallback</a> listener interface.</p> </li>
   </ul>
- 
-<p>For a practical example of managing call logs in your application, see the <a href="task_calllog_w.htm">Call Log</a> sample task.</p> 
+
+<p>For a practical example of managing call logs in your application, see the <a href="task_calllog_w.htm">Call Log</a> sample task.</p>
 
 <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/callhistory.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/callhistory.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/callhistory.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/callhistory.write"/&gt;
 </pre>
 
 
   <h2 id="Searching_Call_History" name="Searching_Call_History">Searching for Call History Items</h2>
-                       
-  <p>Learning how to retrieve call history items using different parameters allows you to view specific items in a specific order, making call history monitoring easy and convenient.</p> 
-  <ol> 
+
+  <p>Learning how to retrieve call history items using different parameters allows you to view specific items in a specific order, making call history monitoring easy and convenient.</p>
+  <ol>
    <li>To retrieve call history items, use the <code>find(successCallback, errorCallback, filter, sortMode, limit, offset)</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface. <p>This method is asynchronous, and the result of the query is an array of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> objects.</p>
 <pre class="prettyprint">
 tizen.callhistory.find(onSuccess, onError, ifilter, sortMode, 20, 10);
@@ -81,72 +81,72 @@ tizen.callhistory.find(onSuccess, onError, ifilter, sortMode, 20, 10);
 <pre class="prettyprint">
 function onSuccess(results)
 {
-&nbsp;&nbsp;&nbsp;console.log(results.length + &quot; call history item(s) found!&quot;);
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; results.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(i + &quot;. &quot; + results[i].toString());
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Process the CallHistoryEntry */
-&nbsp;&nbsp;&nbsp;}
+   console.log(results.length + " call history item(s) found!");
+   for (var i = 0; i &lt; results.length; i++)
+   {
+      console.log(i + ". " + results[i].toString());
+      /* Process the CallHistoryEntry */
+   }
 }
 </pre></li>
    <li> <p>Use the <code>filter</code> parameter of the <code>find()</code> method to define a filter for the query result set. A filter with the <code>CallHistoryEntry</code> attributes is used to limit the results of the call history search.</p>
 <p>When searching for call history items, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#call">specific filter attributes</a>.</p>
-   <p>You can define various filters:</p> 
-    <ul> 
+   <p>You can define various filters:</p>
+    <ul>
      <li><p>The <code>AttributeFilter</code> type is used to search based on a single <code>CallHistoryEntry</code> attribute.</p> <p>For example, the following filters define that only cellular calls or calls where the remote party has the telephone number 123456789 are included in the query results:</p>
 <pre class="prettyprint">
 /* First filter example */
-var filter = new tizen.AttributeFilter(&quot;type&quot;, &quot;EXACTLY&quot;, &quot;TEL&quot;);
+var filter = new tizen.AttributeFilter("type", "EXACTLY", "TEL");
 
 /* Second filter example */
-var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EXACTLY&quot;, &quot;123456789&quot;);
+var numberFilter = new tizen.AttributeFilter("remoteParties.remoteParty",
+                                             "EXACTLY", "123456789");
 </pre></li>
      <li> <p> The <code>CompositeFilter</code> type represents a set of filters. The <code>UNION</code> type composite filter matches any object that is matched by any of its filters; the <code>INTERSECTION</code> type composite filter matches all objects that are matched by all of its filters.</p> <p>For example, the following code snippet defines a set of filters that include in the query results only the video calls where the remote party has the telephone number 123456789 and the call has started during the year 2009 or 2011:</p>
 <pre class="prettyprint">
 /* Create the ranges for the time filter */
-var y2009Filter = new tizen.AttributeRangeFilter(&quot;startTime&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2009, 0, 1),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2010, 0, 1));
-var y2011Filter = new tizen.AttributeRangeFilter(&quot;startTime&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2011, 0, 1),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new Date(2012, 0, 1));
+var y2009Filter = new tizen.AttributeRangeFilter("startTime",
+                                                 new Date(2009, 0, 1),
+                                                 new Date(2010, 0, 1));
+var y2011Filter = new tizen.AttributeRangeFilter("startTime",
+                                                 new Date(2011, 0, 1),
+                                                 new Date(2012, 0, 1));
 
 /* Create a time filter */
-var dataFilter = new tizen.CompositeFilter(&quot;UNION&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[y2009Filter, y2011Filter]);
+var dataFilter = new tizen.CompositeFilter("UNION",
+                                           [y2009Filter, y2011Filter]);
 
 /* Create a video call filter */
-var tfilter = new tizen.AttributeFilter(&quot;features&quot;, &quot;EXACTLY&quot;, &quot;VIDEOCALL&quot;);
+var tfilter = new tizen.AttributeFilter("features", "EXACTLY", "VIDEOCALL");
 
 /* Combine the filters into a set */
-var ifilter = new tizen.CompositeFilter(&quot;INTERSECTION&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[numberFilter, dataFilter, tfilter]);
+var ifilter = new tizen.CompositeFilter("INTERSECTION",
+                                        [numberFilter, dataFilter, tfilter]);
 </pre></li>
-    </ul> </li> 
+    </ul> </li>
    <li> <p>Use the <code>sortMode</code> parameter to <a href="../data/data_filter_w.htm#use_modes">order the query result set</a>. If the parameter is undefined or set to <code>null</code>, the results are sorted by default in a descending order.</p> <p>In the following code snippet, the found call history items are sorted according to the start time, in descending order:</p>
 <pre class="prettyprint">
-var sortMode = new tizen.SortMode(&quot;startTime&quot;, &quot;DESC&quot;);
+var sortMode = new tizen.SortMode("startTime", "DESC");
 </pre></li>
-   <li> <p>Use the <code>limit</code> and <code>offset</code> parameters of the <code>find()</code> method to specify the starting point and upper limit of the results that are returned.</p> <p>The <code>limit</code> parameter specifies the maximum number of matching results that are returned (the value 0 makes the limit infinite), while the <code>offset</code> parameter skips that many matching results that are to be returned (the value 0 means nothing is skipped).</p> <p>For example, if your search results consist of 100 matching results and you have specified an offset of 10 and a limit of 20, you get the objects from 10-29. The matching results from 0-9 are skipped due to the offset, and the 20 results starting from the first result after the offset are returned.</p> </li> 
-  </ol> 
+   <li> <p>Use the <code>limit</code> and <code>offset</code> parameters of the <code>find()</code> method to specify the starting point and upper limit of the results that are returned.</p> <p>The <code>limit</code> parameter specifies the maximum number of matching results that are returned (the value 0 makes the limit infinite), while the <code>offset</code> parameter skips that many matching results that are to be returned (the value 0 means nothing is skipped).</p> <p>For example, if your search results consist of 100 matching results and you have specified an offset of 10 and a limit of 20, you get the objects from 10-29. The matching results from 0-9 are skipped due to the offset, and the 20 results starting from the first result after the offset are returned.</p> </li>
+  </ol>
+
 
-  
   <h2 id="Removing_Call_History" name="Removing_Call_History">Removing Call History Items</h2>
-                       
-  <p>Learning how to remove call history items allows you to keep the call history list organized and save storage space on the device:</p> 
-  <ol> 
+
+  <p>Learning how to remove call history items allows you to keep the call history list organized and save storage space on the device:</p>
+  <ol>
    <li><p> Use the <code>remove()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface to remove a specific item from the call history. First, search for the entry to be removed with the <code>find()</code> method, and then handle the removal in the event handler that is called when the <code>find()</code> method is successful.</p>
 <pre class="prettyprint">
 /* Remove the found call history item */
 function onSuccess(results)
 {
-&nbsp;&nbsp;&nbsp;if (results.length &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.callhistory.remove(results[0]);
+   if (results.length &gt; 0)
+      tizen.callhistory.remove(results[0]);
 }
 
-var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EXACTLY&quot;, &quot;123456789&quot;);
+var numberFilter = new tizen.AttributeFilter("remoteParties.remoteParty",
+                                             "EXACTLY", "123456789");
 /* Search for the item to be removed */
 tizen.callhistory.find(onSuccess, onError, numberFilter, null, 1);
 </pre></li>
@@ -155,60 +155,60 @@ tizen.callhistory.find(onSuccess, onError, numberFilter, null, 1);
 /* Define success callback */
 function onSuccess(results)
 {
-&nbsp;&nbsp;&nbsp;tizen.callhistory.removeBatch(results);
+   tizen.callhistory.removeBatch(results);
 }
 
-var numberFilter = new tizen.AttributeFilter(&quot;remoteParties.remoteParty&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EXACTLY&quot;, &quot;123456789&quot;);
+var numberFilter = new tizen.AttributeFilter("remoteParties.remoteParty",
+                                             "EXACTLY", "123456789");
 tizen.callhistory.find(onSuccess, onError, numberFilter);
-</pre></li> 
+</pre></li>
    <li><p> To remove all call history items, use the <code>removeAll()</code> method:</p>
 <pre class="prettyprint">
 tizen.callhistory.removeAll();
 </pre></li>
-  </ol> 
-  
-               
-  
+  </ol>
+
+
+
   <h2 id="Monitoring_Call_History" name="Monitoring_Call_History">Monitoring the Call History</h2>
-                       
-  <p>Learning how to register change listeners allows you to synchronize the view of your application to changes in the call history database.</p> 
-  <ol> 
+
+  <p>Learning how to register change listeners allows you to synchronize the view of your application to changes in the call history database.</p>
+  <ol>
 
    <li> <p>Define the <code>onadded</code> event handler of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryChangeCallback">CallHistoryChangeCallback</a> listener interface, which tracks all new incoming and outgoing calls that are added to the call history.</p>
 <pre class="prettyprint">
 var onHistoryChange =
 {
-&nbsp;&nbsp;&nbsp;onadded: function(newItems)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in newItems)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Item &quot; + i + &quot; is newly added. Its startTime: &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ newItems[i].startTime);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
+   onadded: function(newItems)
+   {
+      for (var i in newItems)
+      {
+         console.log("Item " + i + " is newly added. Its startTime: "
+                     + newItems[i].startTime);
+      }
+   },
 </pre></li>
    <li> <p>Define the <code>onchanged</code> event handler, which tracks all changes in the call history.</p> <p>The event handler receives as an argument an array of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> instances, which represent the changed items in the call history.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;onchanged: function(changedItems)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in changedItems)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Item &quot; + i + &quot; is updated. Its direction: &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ changedItems[i].direction);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;},
+   onchanged: function(changedItems)
+   {
+      for (var i in changedItems)
+      {
+         console.log("Item " + i + " is updated. Its direction: "
+                     + changedItems[i].direction);
+      }
+   },
 </pre></li>
 <li><p>Define the <code>onremoved</code> event handler, which tracks all items that are removed from the call history:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;onremoved: function(removedItems)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i in removedItems)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Item &quot; + i + &quot; is removed. The removed item&#39;s UID: &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ removedItems[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   onremoved: function(removedItems)
+   {
+      for (var i in removedItems)
+      {
+         console.log("Item " + i + " is removed. The removed item's UID: "
+                     + removedItems[i]);
+      }
+   }
 };
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/personal/contacts_w.htm b/org.tizen.guides/html/web/personal/contacts_w.htm
index 5f431f1..b3e81cf 100644 (file)
--- a/org.tizen.guides/html/web/personal/contacts_w.htm
+++ b/org.tizen.guides/html/web/personal/contacts_w.htm
@@ -74,19 +74,19 @@
 
 
   <p>Tizen enables you to manage the contacts and persons listed in your address books. A <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object is always associated with a specific address book. A <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Person">Person</a> object is an aggregation of one or more contacts associated with the same person.</p>
-  
+
 <p>This feature is supported in mobile applications only.</p>
-  
+
 <p>The main features of the Contact API include:</p>
   <ul>
-<li>Address book management 
+<li>Address book management
 <p>You can <a href="#Adding_Addressbook">create a new address book</a>, or <a href="#Getting_Address_Books">access the device address books</a> to access existing contacts.</p>
 </li>
-<li>Contact management 
+<li>Contact management
 <p>You can <a href="#Adding_Contact">add</a> and <a href="#Managing_Contact">manage</a> a single contact at a time using synchronous operations.</p>
-<p>You can also keep the address book in your application synchronized with an external contact manager by <a href="#Receiving_Contact">receiving notifications</a> in your application when contact information changes. Every change made to the address book triggers an event for which you can define a notification.</p> 
+<p>You can also keep the address book in your application synchronized with an external contact manager by <a href="#Receiving_Contact">receiving notifications</a> in your application when contact information changes. Every change made to the address book triggers an event for which you can define a notification.</p>
 </li>
-<li>Group and multiple contact management 
+<li>Group and multiple contact management
 <p>You can <a href="#Managing_Groups">manage contact groups</a>, including getting, updating, and deleting them, using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface.</p>
 <p>You can also <a href="#Adding_Multiple_Contact">create</a> and <a href="#Managing_Multiple_Contact">manage</a> multiple contacts simultaneously using the batch mode. The batch mode provides faster, optimized processing of multiple contacts.</p>
 
@@ -98,20 +98,20 @@
  <p>If you want to receive notifications for batch mode operations, note that each requested batch operation generates only a single event.</p>
 </li>
 
-<li>Person management 
+<li>Person management
 <p>You can <a href="#Managing_Persons">manage persons</a> using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p>
 <p>Persons are automatically added or modified when contacts are added to or unlinked from existing persons. You cannot add persons directly.</p>
-</li>   
-<li>vCard format conversions 
-<p>You can convert the contacts to <a target="_blank" href="https://tools.ietf.org/html/rfc2426">vCard format</a> or back to <a href="#Importing_Contact">import</a> and <a href="#Exporting_Contact">export</a> contacts.</p> 
+</li>
+<li>vCard format conversions
+<p>You can convert the contacts to <a target="_blank" href="https://tools.ietf.org/html/rfc2426">vCard format</a> or back to <a href="#Importing_Contact">import</a> and <a href="#Exporting_Contact">export</a> contacts.</p>
 <p>The vCard (RFC 2426) file format (<code>.vcf</code> or <code>.vcard</code>) is a standard for electronic business cards, which contain contact information, such as name, address, phone numbers, email addresses, URLs, logos, photographs, and audio clips.</p><p>The Contact API supports vCard version 3.0.</p></li>
   </ul>
 
          <h2 id="prerequisites">Prerequisites</h2>
 <p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/contact.read&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/contact.write&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/contact.read"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/contact.write"/&gt;
 </pre>
 
   <h2 id="Adding_Addressbook" name="Adding_Addressbook">Creating an Address Book</h2>
@@ -120,28 +120,28 @@
        <strong>Note</strong>
        The created address book is associated with a specified account. Therefore, you must retrieve the account before creating a new address book.
 </div>
-  
+
   <p>To create a new address book:</p>
-  <ol> 
+  <ol>
    <li>Declare a variable to store the created address book:
 <pre class="prettyprint">
 var myAddressBook = null;
 </pre>
    </li>
    <li>Define a success callback for the <code>getAccounts()</code> method. The callback receives a list of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> objects. Use the first account ID to construct a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> object.
-   
+
    <p>Add the new address book to the system using the <code>addAddressBook()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>
 <pre class="prettyprint">
 function getAccountsSuccess(accounts)
 {
-&nbsp;&nbsp;&nbsp;var account = accounts[0];
-&nbsp;&nbsp;&nbsp;if (account)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New address book can be created and added */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;myAddressBook = new tizen.AddressBook(account.id, &quot;remote address book&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.contact.addAddressBook(myAddressBook);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;New address book created with ID=&quot; + myAddressBook.id);
-&nbsp;&nbsp;&nbsp;}
+   var account = accounts[0];
+   if (account)
+   {
+      /* New address book can be created and added */
+      myAddressBook = new tizen.AddressBook(account.id, "remote address book");
+      tizen.contact.addAddressBook(myAddressBook);
+      console.log("New address book created with ID=" + myAddressBook.id);
+   }
 }
 </pre></li>
    <li>To retrieve available accounts, use the <code>getAccounts()</code> method. The following method call invokes the <code>getAccountsSuccess</code> event handler defined above.
@@ -166,11 +166,11 @@ var addressBook;
 
 function addressBooksCB(addressBooks)
 {
-&nbsp;&nbsp;&nbsp;if (addressBooks.length &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addressBook = addressBooks[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The addressbook name is &quot; + addressBook.name);
-&nbsp;&nbsp;&nbsp;}
+   if (addressBooks.length &gt; 0)
+   {
+      addressBook = addressBooks[0];
+      console.log("The addressbook name is " + addressBook.name);
+   }
 }
 
 /* Get the list of available address books */
@@ -180,7 +180,7 @@ tizen.contact.getAddressBooks(addressBooksCB);
  </li>
 
   </ul>
-           
+
   <h2 id="Adding_Contact" name="Adding_Contact">Adding a Contact</h2>
 <p>You can add a contact using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface.</p>
 <p>To add a contact to an address book:</p>
@@ -193,8 +193,8 @@ var addressbook = tizen.contact.getDefaultAddressBook();
 <pre class="prettyprint">
 var contact = new tizen.Contact
 ({
-&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({firstName: &quot;Jeffrey&quot;, lastName: &quot;Hyman&quot;}),
-&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&quot;user@example.com&quot;)]
+   name: new tizen.ContactName({firstName: "Jeffrey", lastName: "Hyman"}),
+   emails: [new tizen.ContactEmailAddress("user@example.com")]
 });
 </pre></li>
      <li><p>Add the <code>Contact</code> object to the default address book with the <code>add()</code> method of the <code>AddressBook</code> interface:</p>
@@ -202,9 +202,9 @@ var contact = new tizen.Contact
 addressbook.add(contact);
 </pre></li>
     </ol>
-               
+
   <h2 id="Managing_Contact" name="Managing_Contact">Managing a Contact</h2>
- <p>You can manage a contact by using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface. When managing a single contact at a time, the operations are handled in a synchronous mode.</p> 
+ <p>You can manage a contact by using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface. When managing a single contact at a time, the operations are handled in a synchronous mode.</p>
   <p>To manage a contact in your address book:</p>
   <ol>
    <li>To retrieve a single contact, use the <code>get()</code> method of the <code>AddressBook</code> interface with the <code>ContactID</code> as a parameter:
@@ -214,9 +214,9 @@ addressbook.add(contact);
 var contactRef;
 try
 {
-&nbsp;&nbsp;&nbsp;/* Retrieve the contact corresponding to the given reference */
-&nbsp;&nbsp;&nbsp;var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
-&nbsp;&nbsp;&nbsp;var contact = addressBook.get(contactRef.contactId);
+   /* Retrieve the contact corresponding to the given reference */
+   var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
+   var contact = addressBook.get(contactRef.contactId);
 }
 </pre></li>
    <li>To manage a single contact:
@@ -227,38 +227,38 @@ var addressbook = tizen.contact.getDefaultAddressBook();
 </pre></li>
      <li><p>Retrieve contacts stored in the address book by using the <code>find()</code> method of the <code>AddressBook</code> interface:</p>
 <pre class="prettyprint">
-var filter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;);
-var sortMode = new tizen.SortMode(&quot;name.lastName&quot;, &quot;ASC&quot;);
+var filter = new tizen.AttributeFilter("name.firstName", "CONTAINS", "Chris");
+var sortMode = new tizen.SortMode("name.lastName", "ASC");
 
 try
 {
-&nbsp;&nbsp;&nbsp;addressbook.find(contactsFoundCB, null, filter, sortMode);
+   addressbook.find(contactsFoundCB, null, filter, sortMode);
 }
 </pre>
 
-<p>When searching for contacts, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#contact">specific filter attributes</a>. You can also <a href="../data/data_filter_w.htm#use_modes">sort the search results</a>. In this example, contacts whose first name contains &quot;Chris&quot; are retrieved and sorted in the ascending order based on their last name. The filter includes the standard English characters in the uppercase and lowercase. The entire list consists of ASCII characters from 32 to 126, and from 160 to 255.</p>
+<p>When searching for contacts, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#contact">specific filter attributes</a>. You can also <a href="../data/data_filter_w.htm#use_modes">sort the search results</a>. In this example, contacts whose first name contains "Chris" are retrieved and sorted in the ascending order based on their last name. The filter includes the standard English characters in the uppercase and lowercase. The entire list consists of ASCII characters from 32 to 126, and from 160 to 255.</p>
 <p>The contacts that match the filter are passed as an array to the registered success event handler in the selected sorting order.</p> </li>
      <li><p>Update or delete the found contact inside the <code>contactsFoundCB</code> event handler.</p> <p>In this example, the first name of the first contact is changed and the contact is updated in the address book using the <code>update()</code> method. The second contact is deleted using the <code>remove()</code> method.</p>
 <pre class="prettyprint">
 /* Define the event success callback */
 function contactsFoundCB(contacts)
 {
-&nbsp;&nbsp;&nbsp;contacts[0].name.firstName = &quot;Christopher&quot;;
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Update the first found contact */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addressbook.update(contacts[0]);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete the second found contact */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addressbook.remove(contacts[1].id);
-&nbsp;&nbsp;&nbsp;}
+   contacts[0].name.firstName = "Christopher";
+   try
+   {
+      /* Update the first found contact */
+      addressbook.update(contacts[0]);
+
+      /* Delete the second found contact */
+      addressbook.remove(contacts[1].id);
+   }
 }
 </pre></li>
     </ol> </li>
   </ol>
-            
+
   <h2 id="Receiving_Contact" name="Receiving_Contact">Receiving Notifications on Contact Changes</h2>
-<p>You can keep the address book in your application synchronized with the external contact manager by receiving notifications in your application when contact information is added, updated, or deleted.</p> 
+<p>You can keep the address book in your application synchronized with the external contact manager by receiving notifications in your application when contact information is added, updated, or deleted.</p>
 <p>The <code>addChangeListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface registers an event listener, which starts asynchronously once the <code>addChangeListener()</code> method returns the subscription identifier for the listener. You can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBookChangeCallback">AddressBookChangeCallback</a> interface to define listener event handlers for receiving the notifications.</p>
 
   <p>To receive notifications when contact information changes:</p>
@@ -275,23 +275,23 @@ var addressbook;
 <pre class="prettyprint">
 var watcher =
 {
-&nbsp;&nbsp;&nbsp;/* When contacts are added */
-&nbsp;&nbsp;&nbsp;oncontactsadded: function(contacts)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(contacts.length + &quot; contacts were added&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When contacts are updated */
-&nbsp;&nbsp;&nbsp;oncontactsupdated: function(contacts)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(contacts.length + &quot; contacts were updated&quot;);
-&nbsp;&nbsp;&nbsp;},
-
-&nbsp;&nbsp;&nbsp;/* When contacts are deleted */
-&nbsp;&nbsp;&nbsp;oncontactsremoved: function(ids)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ids.length + &quot; contacts were deleted&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* When contacts are added */
+   oncontactsadded: function(contacts)
+   {
+      console.log(contacts.length + " contacts were added");
+   },
+
+   /* When contacts are updated */
+   oncontactsupdated: function(contacts)
+   {
+      console.log(contacts.length + " contacts were updated");
+   },
+
+   /* When contacts are deleted */
+   oncontactsremoved: function(ids)
+   {
+      console.log(ids.length + " contacts were deleted");
+   }
 };
 </pre></li>
    <li><p>Register the listener to use the defined event handlers:</p>
@@ -309,10 +309,10 @@ watcherId = addressbook.addChangeListener(watcher);
 addressbook.removeChangeListener(watcherId);
 </pre></li>
   </ol>
-  
-         
+
+
   <h2 id="Adding_Multiple_Contact" name="Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</h2>
-<p>You can create multiple contacts simultaneously using the <code>addBatch()</code> method.</p>  
+<p>You can create multiple contacts simultaneously using the <code>addBatch()</code> method.</p>
 <p>To add multiple contacts to an address book in the batch mode:</p>
 <ol>
      <li><p>Retrieve the default system address book using the <code>getDefaultAddressBook()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>
@@ -323,14 +323,14 @@ addressbook = tizen.contact.getDefaultAddressBook();
 <pre class="prettyprint">
 var c1 = new tizen.Contact(
 {
-&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({firstName:&quot;Jeffrey&quot;, lastName:&quot;Hyman&quot;}),
-&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&quot;user1@example.com&quot;)]
+   name: new tizen.ContactName({firstName:"Jeffrey", lastName:"Hyman"}),
+   emails: [new tizen.ContactEmailAddress("user1@example.com")]
 });
 
 var c2 = new tizen.Contact(
 {
-&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({firstName:&quot;Elton&quot;, lastName:&quot;John&quot;}),
-&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&quot;user2@example.com&quot;)]
+   name: new tizen.ContactName({firstName:"Elton", lastName:"John"}),
+   emails: [new tizen.ContactEmailAddress("user2@example.com")]
 });
 </pre></li>
      <li><p>Use the <code>addBatch()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to add the contacts in the array to the address book:</p>
@@ -344,7 +344,7 @@ addressbook.addBatch([c1, c2]);
 </div>
 </li>
     </ol>
-           
+
   <h2 id="Managing_Multiple_Contact" name="Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</h2>
 <p>You can manage multiple contacts simultaneously using the applicable batch methods: <code>updateBatch()</code> and <code>removeBatch()</code>.</p>
 <p>To manage multiple contacts in your address books in the batch mode:</p>
@@ -355,15 +355,15 @@ var addressbook = tizen.contact.getDefaultAddressBook();
 </pre></li>
      <li><p>Retrieve contacts stored in the address book by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p>
 <pre class="prettyprint">
-var filter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;};
-var sortMode = new tizen.SortMode(&quot;name.lastName&quot;, &quot;ASC&quot;);
+var filter = new tizen.AttributeFilter("name.firstName", "CONTAINS", "Chris"};
+var sortMode = new tizen.SortMode("name.lastName", "ASC");
 
 try
 {
-&nbsp;&nbsp;&nbsp;addressbook.find(contactsFoundCB, null, filter, sortMode);
+   addressbook.find(contactsFoundCB, null, filter, sortMode);
 }
 </pre>
-<p>When searching for contacts, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#contact">specific filter attributes</a>. You can also <a href="../data/data_filter_w.htm#use_modes">sort the search results</a>. In this example, contacts whose first name contains &quot;Chris&quot; are retrieved and sorted in the ascending order based on their last name.</p>
+<p>When searching for contacts, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#contact">specific filter attributes</a>. You can also <a href="../data/data_filter_w.htm#use_modes">sort the search results</a>. In this example, contacts whose first name contains "Chris" are retrieved and sorted in the ascending order based on their last name.</p>
 </li>
      <li>To update contacts:
       <ol type="a">
@@ -371,16 +371,16 @@ try
 <pre class="prettyprint">
 function contactsFoundCB(contacts)
 {
-&nbsp;&nbsp;&nbsp;/* Change the first names of all the found contacts */
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; contacts.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contacts[i].name.firstName = &quot;Christopher&quot;;
-&nbsp;&nbsp;&nbsp;}
+   /* Change the first names of all the found contacts */
+   for (var i = 0; i &lt; contacts.length; i++)
+   {
+      contacts[i].name.firstName = "Christopher";
+   }
 </pre></li>
        <li><p>Use the <code>updateBatch()</code> method to update multiple contacts asynchronously:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* Update all found contacts */
-&nbsp;&nbsp;&nbsp;addressbook.updateBatch(contacts);
+   /* Update all found contacts */
+   addressbook.updateBatch(contacts);
 }
 </pre></li>
       </ol> </li>
@@ -388,8 +388,8 @@ function contactsFoundCB(contacts)
 <pre class="prettyprint">
 function contactsFoundCB(contacts)
 {
-&nbsp;&nbsp;&nbsp;/* Delete the first 2 found contacts */
-&nbsp;&nbsp;&nbsp;addressbook.removeBatch([contacts[0].id, contacts[1].id]);
+   /* Delete the first 2 found contacts */
+   addressbook.removeBatch([contacts[0].id, contacts[1].id]);
 }
 </pre></li>
     </ol>
@@ -398,9 +398,9 @@ function contactsFoundCB(contacts)
        <strong>Note</strong>
        The <code>updateBatch()</code> and <code>removeBatch()</code> methods are asynchronous. Make sure you provide success and error callbacks with them.
 </div>
-             
+
   <h2 id="Managing_Groups" name="Managing_Groups">Managing Contact Groups</h2>
-  
+
   <p>To create engaging applications with various contact features, learn to manage contact groups:</p>
   <ol>
     <li><p>Retrieve the default system address book using the <code>getDefaultAddressBook()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>
@@ -412,9 +412,9 @@ var addressbook = tizen.contact.getDefaultAddressBook();
 var group;
 try
 {
-&nbsp;&nbsp;&nbsp;group = new tizen.ContactGroup(&quot;Company&quot;);
-&nbsp;&nbsp;&nbsp;addressbook.addGroup(group)
-&nbsp;&nbsp;&nbsp;console.log(&quot;Group added with ID &quot; + group.id);
+   group = new tizen.ContactGroup("Company");
+   addressbook.addGroup(group)
+   console.log("Group added with ID " + group.id);
 }
 </pre></li>
 
@@ -426,7 +426,7 @@ try
 var groups;
 try
 {
-&nbsp;&nbsp;&nbsp;groups = addressbook.getGroups();
+   groups = addressbook.getGroups();
 }
 </pre></li>
    <li><p>To change the name of the group, assign the <code>name</code> property a new value and use the <code>updateGroup()</code>
@@ -434,9 +434,9 @@ try
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;groups[0].name = &quot;Friends&quot;;
-&nbsp;&nbsp;&nbsp;addressbook.updateGroup(groups[0]);
-&nbsp;&nbsp;&nbsp;console.log(&quot;First group updated&quot;);
+   groups[0].name = "Friends";
+   addressbook.updateGroup(groups[0]);
+   console.log("First group updated");
 }
 </pre></li>
    <li><p>To retrieve a specific group, use the <code>getGroup()</code> method of
@@ -444,7 +444,7 @@ try
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;group = addressbook.getGroup(group.id);
+   group = addressbook.getGroup(group.id);
 }
 </pre></li>
    <li><p>To remove a group from the address book, use the <code>removeGroup()</code> method of
@@ -452,15 +452,15 @@ try
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;addressbook.removeGroup(group.id);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Group was removed&quot;);
+   addressbook.removeGroup(group.id);
+   console.log("Group was removed");
 }
 </pre></li></ul></li>
   </ol>
-              
+
   <h2 id="Managing_Persons" name="Managing_Persons">Managing Persons</h2>
-  
-<p>You can manage persons, including searching, updating, and deleting, using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> 
+
+<p>You can manage persons, including searching, updating, and deleting, using the applicable methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p>
 <p>To manage persons in your contact database:</p>
   <ul>
    <li>To manage a single person:
@@ -469,30 +469,30 @@ try
      <li><p>To retrieve persons, use the <code>find()</code> method of the <code>ContactManager</code> interface.</p>
         <p>You can retrieve the most frequently used persons using the sort mode as the final parameter.</p>
 <pre class="prettyprint">
-var sortMode = new tizen.SortMode(&quot;usageCount&quot;, &quot;ASC&quot;);
+var sortMode = new tizen.SortMode("usageCount", "ASC");
 tizen.contact.find(personsFoundCB, personsErrorCB, null, sortMode);
 </pre>
 <p>When searching for persons, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#contact">specific filter attributes</a>. You can also <a href="../data/data_filter_w.htm#use_modes">sort the search results</a>. In this example, all contacts are retrieved (since no filter is defined), and the result is sorted in the ascending order based on the most frequently used persons.</p>
 </li>
-        
+
      <li><p>Update or delete the found persons in the <code>personsFoundCB()</code> event handler. In this example, the favorite flag of the first person is changed and the contact is updated using the <code>update()</code> method. The second person is deleted using the <code>remove()</code> method.</p>
 <pre class="prettyprint">
 /* Define the event success callback */
 function personsFoundCB(persons)
 {
-&nbsp;&nbsp;&nbsp;persons[0].isFavorite = true;
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Update the first found person */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.contact.update(persons[0]);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete the second found person */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.contact.remove(persons[1].id);
-&nbsp;&nbsp;&nbsp;}
+   persons[0].isFavorite = true;
+   try
+   {
+      /* Update the first found person */
+      tizen.contact.update(persons[0]);
+
+      /* Delete the second found person */
+      tizen.contact.remove(persons[1].id);
+   }
 }
 </pre></li>
     </ol> </li>
-<li>To handle multiple persons simultaneously, use the applicable batch methods: <code>updateBatch()</code> and <code>removeBatch()</code>.</li>       
+<li>To handle multiple persons simultaneously, use the applicable batch methods: <code>updateBatch()</code> and <code>removeBatch()</code>.</li>
 
    <li>To merge multiple persons into a single person item:
     <ol>
@@ -501,21 +501,21 @@ function personsFoundCB(persons)
 <pre class="prettyprint">
 function personsFoundCB(persons)
 {
-&nbsp;&nbsp;&nbsp;var sourcePerson = persons[0];
-&nbsp;&nbsp;&nbsp;var targetPerson = persons[1];
+   var sourcePerson = persons[0];
+   var targetPerson = persons[1];
 </pre></li>
      <li><p>Use the <code>link()</code> method to link contacts that are linked to the other person:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   Link 2 persons, contacts from sourcePerson are added to targetPerson
-&nbsp;&nbsp;&nbsp;   and sourcePerson is removed
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;targetPerson.link(sourcePerson.id);
+   /*
+      Link 2 persons, contacts from sourcePerson are added to targetPerson
+      and sourcePerson is removed
+   */
+   targetPerson.link(sourcePerson.id);
 }
 </pre></li>
     </ol> </li>
-   <li>To get and reset the number of person&#39;s calls, messages, and emails:
-   <p>You can get the total number of each person&#39;s calls, messages, and emails by using the <code>getUsageCount()</code> function. You can also reset the usage count of a person using the <code>resetUsageCount()</code> function of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Person">Person</a> interface, which works in a synchronous mode. To reset the usage count for multiple persons, use the <code>resetUsageCountBatch()</code> function, which works in an asynchronous mode.</p>  
+   <li>To get and reset the number of person's calls, messages, and emails:
+   <p>You can get the total number of each person's calls, messages, and emails by using the <code>getUsageCount()</code> function. You can also reset the usage count of a person using the <code>resetUsageCount()</code> function of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Person">Person</a> interface, which works in a synchronous mode. To reset the usage count for multiple persons, use the <code>resetUsageCountBatch()</code> function, which works in an asynchronous mode.</p>
     <ul>
      <li><p>Retrieve the total number of calls, messages, and emails of a particular person:</p>
 <pre class="prettyprint">
@@ -530,7 +530,7 @@ var usage_count = person.getUsageCount();
 /* Get a person first */
 var person = tizen.contact.get(person_id);
 /* Get number of incoming calls */
-var usage_count = person.getUsageCount(&#39;INCOMING_CALLS&#39;);
+var usage_count = person.getUsageCount('INCOMING_CALLS');
 </pre></li>
 
      <li><p>Reset the total number of calls, messages, and emails of a particular person:</p>
@@ -546,7 +546,7 @@ person.resetUsageCount();
 /* Get a person first */
 var person = tizen.contact.get(person_id);
 /* Reset incoming calls */
-person.resetUsageCount(&#39;INCOMING_CALLS&#39;);
+person.resetUsageCount('INCOMING_CALLS');
 </pre></li>
 
      <li><p>Reset the total number of calls, messages, and emails for a few persons:</p>
@@ -556,15 +556,15 @@ tizen.contact.resetUsageCountBatch([person1_id, person2_id]);
 
      <li><p>Reset the number usages of a specified type for a few persons:</p>
 <pre class="prettyprint">
-tizen.contact.resetUsageCountBatch([person1_id, person2_id], &#39;INCOMING_CALLS&#39;);
+tizen.contact.resetUsageCountBatch([person1_id, person2_id], 'INCOMING_CALLS');
 </pre></li>
     </ul>
     </li>
   </ul>
 
-         
+
   <h2 id="Importing_Contact" name="Importing_Contact">Importing Contacts</h2>
-  
+
   <p>To create engaging applications with various contacts features, import contacts with the help of the vCard format:</p>
 
     <ol>
@@ -578,35 +578,35 @@ var contact = null;
 
 try
 {
-&nbsp;&nbsp;&nbsp;contact = new tizen.Contact(&quot;BEGIN:VCARD\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;VERSION:3.0\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;N:Gump;Forrest\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;FN:Forrest Gump\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;ORG:Bubba Gump Shrimp Co.\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;TITLE:Shrimp Man\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;TEL;WORK:(111) 555-1212\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;TEL;HOME:(404) 555-1212\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;EMAIL;WORK;PREF:forrestgump@example.com\n&quot;+
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;END:VCARD&quot;);
-
-&nbsp;&nbsp;&nbsp;addressbook.add(contact);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Contact was added with ID &quot; + contact.id);
+   contact = new tizen.Contact("BEGIN:VCARD\n"+
+                               "VERSION:3.0\n"+
+                               "N:Gump;Forrest\n"+
+                               "FN:Forrest Gump\n"+
+                               "ORG:Bubba Gump Shrimp Co.\n"+
+                               "TITLE:Shrimp Man\n"+
+                               "TEL;WORK:(111) 555-1212\n"+
+                               "TEL;HOME:(404) 555-1212\n"+
+                               "EMAIL;WORK;PREF:forrestgump@example.com\n"+
+                               "END:VCARD");
+
+   addressbook.add(contact);
+   console.log("Contact was added with ID " + contact.id);
 }
 </pre></li>
     </ol> <p>To convert multiple strings and import them to an address book, convert the strings one by one and then use the <code>addBatch()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to <a href="#Adding_Multiple_Contact">add all the contacts at once in the batch mode</a>.</p>
-             
+
   <h2 id="Exporting_Contact" name="Exporting_Contact">Exporting Contacts</h2>
-  
+
   <p>To create engaging applications with various contacts features, export contacts with the help of the vCard format:</p>
     <ol>
-     <li><p>Retrieve the default system address book using the <code>getDefaultAddressBook()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface and find all contacts with &quot;Chris&quot; in the first name:</p>
+     <li><p>Retrieve the default system address book using the <code>getDefaultAddressBook()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface and find all contacts with "Chris" in the first name:</p>
 <pre class="prettyprint">
 var addressbook;
 
 var addressbook = tizen.contact.getDefaultAddressBook();
 
 /* Define a filter */
-var filter = new tizen.AttributeFilter(&quot;name.firstName&quot;, &quot;CONTAINS&quot;, &quot;Chris&quot;);
+var filter = new tizen.AttributeFilter("name.firstName", "CONTAINS", "Chris");
 
 /* Search for the contacts */
 addressbook.find(contactsFoundCB, errorCB, filter);
@@ -615,12 +615,12 @@ addressbook.find(contactsFoundCB, errorCB, filter);
 <pre class="prettyprint">
 function contactsFoundCB(contacts)
 {
-&nbsp;&nbsp;&nbsp;/* Convert the first contact */
-&nbsp;&nbsp;&nbsp;var vcard = contacts[0].convertToString(&quot;VCARD_30&quot;);
+   /* Convert the first contact */
+   var vcard = contacts[0].convertToString("VCARD_30");
 }
 </pre></li>
     </ol>
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/personal/personal_cover_w.htm b/org.tizen.guides/html/web/personal/personal_cover_w.htm
index 81a5c68..f095088 100644 (file)
--- a/org.tizen.guides/html/web/personal/personal_cover_w.htm
+++ b/org.tizen.guides/html/web/personal/personal_cover_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Personal Data</title>  
+       <title>Personal Data</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -26,7 +26,7 @@
                        <li>Tizen 2.4 and Higher for Mobile</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Personal Data</h1>
@@ -60,7 +60,7 @@
 <p>You can synchronize device data, such as contacts and calendar events, using the OMA DS server.</p></li>
 
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/personal/sync_w.htm b/org.tizen.guides/html/web/personal/sync_w.htm
index 90986d7..ed8f836 100644 (file)
--- a/org.tizen.guides/html/web/personal/sync_w.htm
+++ b/org.tizen.guides/html/web/personal/sync_w.htm
@@ -28,7 +28,7 @@
         <ul class="toc">
                        <li><a href="#prerequisites">Prerequisites</a></li>
             <li><a href="#Creating_Sync_Profile">Creating a Sync Profile</a></li>
-            <li><a href="#Starting_Sync">Starting and Monitoring Data Synchronization</a></li>                 
+            <li><a href="#Starting_Sync">Starting and Monitoring Data Synchronization</a></li>
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -43,17 +43,17 @@
   <h1>Data Synchronization</h1>
 
   <p>You can synchronize device data, such as contacts and calendar events, with the OMA DS server using the <a href="http://openmobilealliance.org/" target="_blank">OMA</a> DS (Data Synchronization) 1.2 protocol.</p>
-  
+
 <p>This feature is supported in mobile applications only.</p>
 
   <p>The main features of the Data Synchronization API include:</p>
   <ul>
-   <li>Creating a sync profile 
+   <li>Creating a sync profile
    <p>You can <a href="#Creating_Sync_Profile">create a profile</a>, define the profile name, and provide other profile and operation information using the applicable interfaces.</p>
-       <p>Tizen sets a limitation on the number of supported OMA DS profiles on the device. Before creating a new profile, you must check whether sync profile slots are available.</p>   
+       <p>Tizen sets a limitation on the number of supported OMA DS profiles on the device. Before creating a new profile, you must check whether sync profile slots are available.</p>
    </li>
-   <li>Retrieving synchronization process information 
-   <p>After starting the synchronization process, you can <a href="#Starting_Sync">monitor the progress</a> of the operation.</p> 
+   <li>Retrieving synchronization process information
+   <p>After starting the synchronization process, you can <a href="#Starting_Sync">monitor the progress</a> of the operation.</p>
    </li>
   </ul>
 
@@ -61,12 +61,12 @@
        <strong>Note</strong>
        As a prerequisite to synchronizing your device data with the server, you must create an OMA DS server account.
 </div>
- 
+
 <h2 id="prerequisites">Prerequisites</h2>
 
 <p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html">Data Synchronization</a> API, the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/datasync&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/datasync"/&gt;
 </pre>
 
 
@@ -83,39 +83,39 @@ var numProfiles = tizen.datasync.getProfilesNum();
 <pre class="prettyprint">
 if ((numMaxProfiles &lt;= 0) || (numProfiles &lt; numMaxProfiles))
 {
-&nbsp;&nbsp;&nbsp;var syncInfo = new tizen.SyncInfo(&quot;http://example.com/sync&quot;, &quot;myId&quot;, &quot;myPassword&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;MANUAL&quot;, &quot;TWO_WAY&quot;);
-&nbsp;&nbsp;&nbsp;var contactInfo = new tizen.SyncServiceInfo(true, &quot;CONTACT&quot;, &quot;serverContact&quot;);
-&nbsp;&nbsp;&nbsp;var eventInfo = new tizen.SyncServiceInfo(true, &quot;EVENT&quot;, &quot;serverEvent&quot;);
-&nbsp;&nbsp;&nbsp;var serviceInfo = [contactInfo, eventInfo];
-&nbsp;&nbsp;&nbsp;var profile = new tizen.SyncProfileInfo(&quot;MyProfile&quot;, syncInfo, serviceInfo);
+   var syncInfo = new tizen.SyncInfo("http://example.com/sync", "myId", "myPassword",
+                                     "MANUAL", "TWO_WAY");
+   var contactInfo = new tizen.SyncServiceInfo(true, "CONTACT", "serverContact");
+   var eventInfo = new tizen.SyncServiceInfo(true, "EVENT", "serverEvent");
+   var serviceInfo = [contactInfo, eventInfo];
+   var profile = new tizen.SyncProfileInfo("MyProfile", syncInfo, serviceInfo);
 </pre></li>
    <li><p>To be able to use the created profile, add it to your device using the <code>add()</code> method of the <code>DataSynchronizationManager</code> interface:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;tizen.datasync.add(profile);
-&nbsp;&nbsp;&nbsp;var profileId = profile.profileId;
+   tizen.datasync.add(profile);
+   var profileId = profile.profileId;
 }
 </pre></li>
   </ol>
-       
+
   <h2 id="Starting_Sync" name="Starting_Sync">Starting and Monitoring Data Synchronization</h2>
-<p>After starting the synchronization process using the <code>startSync()</code> method of the <code>DataSynchronizationManager</code> interface, you can monitor the progress of the operation. Use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProgressCallback">SyncProgressCallback</a> interface to define listeners for receiving notifications. After the synchronization is completed, you can retrieve statistics using the <code>getLastSyncStatistics()</code> method.</p>  
+<p>After starting the synchronization process using the <code>startSync()</code> method of the <code>DataSynchronizationManager</code> interface, you can monitor the progress of the operation. Use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProgressCallback">SyncProgressCallback</a> interface to define listeners for receiving notifications. After the synchronization is completed, you can retrieve statistics using the <code>getLastSyncStatistics()</code> method.</p>
   <p>To start and monitor the data synchronization process:</p>
   <ol>
    <li><p>Define the event handlers for the notifications using the <code>SyncProgressCallback</code> listener interface:</p>
 <pre class="prettyprint">
 var syncCallback =
 {
-&nbsp;&nbsp;&nbsp;onprogress: function(profileId, serviceType, isFromServer,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;totalPerType, syncedPerType)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Total: &#39; + totalPerType + &#39;, synced: &#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ syncedPerType + &#39; for the sync type: &#39; + serviceType);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onfailed: function(profileId, error)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Failed with id: &#39; + profileId + &#39;, error name: &#39; + error.name);
-&nbsp;&nbsp;&nbsp;}
+   onprogress: function(profileId, serviceType, isFromServer,
+                        totalPerType, syncedPerType)
+   {
+      console.log('Total: ' + totalPerType + ', synced: '
+                  + syncedPerType + ' for the sync type: ' + serviceType);
+   },
+   onfailed: function(profileId, error)
+   {
+      console.log('Failed with id: ' + profileId + ', error name: ' + error.name);
+   }
 };
 </pre></li>
    <li><p>Start the sync operation using the <code>startSync()</code> method, with the corresponding listener as a parameter:</p>
diff --git a/org.tizen.guides/html/web/personal/task_calllog_w.htm b/org.tizen.guides/html/web/personal/task_calllog_w.htm
index 9325fcb..274121a 100644 (file)
--- a/org.tizen.guides/html/web/personal/task_calllog_w.htm
+++ b/org.tizen.guides/html/web/personal/task_calllog_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: Call Log</title>  
+       <title>Task: Call Log</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w_optional.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -39,242 +39,242 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Social/Call_Log" target="_blank">Call Log Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
 
 
-  <h1>Task: Call Log</h1> 
-  <p>This task, based on the CallLog sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API to manage call logs in your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Social/Call_Log" target="blank">Call Log</a>.</p> 
-  <p>This task consists of the following parts:</p> 
-  <ul> 
+  <h1>Task: Call Log</h1>
+  <p>This task, based on the CallLog sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API to manage call logs in your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Social/Call_Log" target="blank">Call Log</a>.</p>
+  <p>This task consists of the following parts:</p>
+  <ul>
    <li><a href="#Defining">Defining the Application Layout</a> defines how to create the application screens.</li>
    <li><a href="#Initializing">Initializing the Application</a> defines how to initialize the application.</li>
-   <li><a href="#Browsing">Browsing a Call Log</a> defines how to retrieve a call history log.</li> 
-   <li><a href="#Managing">Managing Caller History</a> defines how to manage the call history of a specific caller.</li> 
-  </ul> 
-  <p>This sample is a fully functional application for displaying a detailed call history of the device or of a specific caller. The user can respond by calling or sending a message. Additionally, the user can delete a call history log.</p> 
-  
-  <h2 id="Defining" name="Defining">Defining the Application Layout</h2> 
-  <p>The CallLog sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 2 screens: the main screen displays the entire call history and the History for Caller screen displays the detailed call history of a specific caller.</p> 
- 
-  <p>The following figure shows the main screens of the application.</p> 
-  <p align="center"><strong>Figure: CallLog screens</strong></p> 
-  <p align="center"><img alt="CallLog screens" src="../../images/calllog.png" /></p> 
-  <h3 id="temp" name="temp">Using the Template Manager</h3> 
+   <li><a href="#Browsing">Browsing a Call Log</a> defines how to retrieve a call history log.</li>
+   <li><a href="#Managing">Managing Caller History</a> defines how to manage the call history of a specific caller.</li>
+  </ul>
+  <p>This sample is a fully functional application for displaying a detailed call history of the device or of a specific caller. The user can respond by calling or sending a message. Additionally, the user can delete a call history log.</p>
+
+  <h2 id="Defining" name="Defining">Defining the Application Layout</h2>
+  <p>The CallLog sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 2 screens: the main screen displays the entire call history and the History for Caller screen displays the detailed call history of a specific caller.</p>
+
+  <p>The following figure shows the main screens of the application.</p>
+  <p align="center"><strong>Figure: CallLog screens</strong></p>
+  <p align="center"><img alt="CallLog screens" src="../../images/calllog.png" /></p>
+  <h3 id="temp" name="temp">Using the Template Manager</h3>
    <p>The template manager enables the HTML output generation to be divided into 3 parts.</p>
-  <ol> 
-   <li><strong>app.ui.templateManager.js Source File</strong> 
-    <ol type="a"> 
+  <ol>
+   <li><strong>app.ui.templateManager.js Source File</strong>
+    <ol type="a">
      <li>
 <p>The template manager loads the template files into the cache.</p>
 <pre class="prettyprint">
 loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
 {
-&nbsp;&nbsp;&nbsp;var self = this,
-&nbsp;&nbsp;&nbsp;cachedTemplates = 0,
-&nbsp;&nbsp;&nbsp;tplName,
-&nbsp;&nbsp;&nbsp;tplPath;
+   var self = this,
+   cachedTemplates = 0,
+   tplName,
+   tplPath;
 
-&nbsp;&nbsp;&nbsp;if ($.isArray(tplNames))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(tplNames, function(index, fileName)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (self.cache[fileName] === undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplName = [fileName, app.config.get(&#39;templateExtension&#39;)].join(&#39;&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplPath = [app.config.get(&#39;templateDir&#39;), tplName].join(&#39;/&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: tplPath,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cache: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType: &#39;html&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;async: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success: function(data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates += 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.cache[fileName] = data;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (cachedTemplates &gt;= tplNames.length
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error: function(jqXHR, textStatus, errorThrown)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;templateManagerError: &#39; + errorThrown);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates += 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (cachedTemplates &gt;= tplNames.length
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   if ($.isArray(tplNames))
+   {
+      $.each(tplNames, function(index, fileName)
+         {
+            if (self.cache[fileName] === undefined)
+            {
+               tplName = [fileName, app.config.get('templateExtension')].join('');
+               tplPath = [app.config.get('templateDir'), tplName].join('/');
+               $.ajax(
+               {
+                  url: tplPath,
+                  cache: true,
+                  dataType: 'html',
+                  async: true,
+                  success: function(data)
+                  {
+                     cachedTemplates += 1;
+                     self.cache[fileName] = data;
+                     if (cachedTemplates &gt;= tplNames.length
+                         &amp;&amp; typeof onSuccess === 'function')
+                     {
+                        onSuccess();
+                     }
+                  },
+                  error: function(jqXHR, textStatus, errorThrown)
+                  {
+                     console.error('templateManagerError: ' + errorThrown);
+                  }
+               });
+            }
+            else
+            {
+               cachedTemplates += 1;
+               if (cachedTemplates &gt;= tplNames.length
+                   &amp;&amp; typeof onSuccess === 'function')
+               {
+                  onSuccess();
+               }
+            }
+         });
+   }
 }
-</pre> </li> 
+</pre> </li>
      <li> <p>Next, the template manager returns the template HTML content from the cache.</p>
 <pre class="prettyprint">
 get: function TemplateManager_get(tplName, tplParams)
 {
-&nbsp;&nbsp;&nbsp;if (this.cache[tplName] !== undefined)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return this.getCompleted(this.cache[tplName], tplParams);
-&nbsp;&nbsp;&nbsp;}
+   if (this.cache[tplName] !== undefined)
+   {
+      return this.getCompleted(this.cache[tplName], tplParams);
+   }
 
-&nbsp;&nbsp;&nbsp;return &#39;&#39;;
+   return '';
 }
-</pre> </li> 
+</pre> </li>
      <li><p>Finally, the template manager returns the completed template using the specified parameters.</p>
 <pre class="prettyprint">
 getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 {
-&nbsp;&nbsp;&nbsp;var tplParam, replaceRegExp;
+   var tplParam, replaceRegExp;
 
-&nbsp;&nbsp;&nbsp;for (tplParam in tplParams)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tplParams.hasOwnProperty(tplParam))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;replaceRegExp = new RegExp([&#39;%&#39;, tplParam, &#39;%&#39;].join(&#39;&#39;), &#39;g&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   for (tplParam in tplParams)
+   {
+      if (tplParams.hasOwnProperty(tplParam))
+      {
+         replaceRegExp = new RegExp(['%', tplParam, '%'].join(''), 'g');
+         tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]);
+      }
+   }
 
-&nbsp;&nbsp;&nbsp;return tplHtml;
+   return tplHtml;
 }
 </pre></li>
-    </ol> </li> 
+    </ol> </li>
   </ol>
-  
-  <h3 id="main" name="main">Defining the Main Screen</h3> 
-  <ol> 
-   <li><strong>callView.tpl Source File</strong> 
-    <ol type="a"> 
+
+  <h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol>
+   <li><strong>callView.tpl Source File</strong>
+    <ol type="a">
      <li> <p>The main screen of the application displays an aggregated call history list sorted by date. The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
 <pre class="prettyprint lang-html">
-&lt;div data-role=&quot;page&quot; id=&quot;callView&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; id=&quot;page-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;CALL LOG&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="callView"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header" id="page-header" data-position="fixed"&gt;
+      &lt;h1&gt;CALL LOG&lt;/h1&gt;
+   &lt;/div&gt;
 </pre></li>
      <li><p>The actual content section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> component displaying the elements listed in the <code>templates/callItemRow.tpl</code> and <code>templates/dateRow.tpl</code> files. To display the search bar, the <code>data-filter</code> attribute is set to <code>true</code>.</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;page-content-scroll&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;page-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot; id=&quot;calllogList&quot; data-filter=&quot;true&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-position=&quot;fixed&quot; data-insert=&quot;true&quot;&gt;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;!--Content section--&gt;
+   &lt;div id="page-content-scroll"&gt;
+      &lt;div id="page-content"&gt;
+         &lt;ul data-role="listview" id="calllogList" data-filter="true"
+             data-position="fixed" data-insert="true"&gt;&lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
-    </ol> </li> 
-   <li><strong>dateRow.tpl Source File</strong> 
+    </ol> </li>
+   <li><strong>dateRow.tpl Source File</strong>
 <p>The <code>dateRow.tpl</code> template file defines the date at which a call has been logged in the history.</p>
 <pre class="prettyprint lang-html">
-&lt;li class=&quot;date&quot;&gt;%date%&lt;/li&gt;
+&lt;li class="date"&gt;%date%&lt;/li&gt;
 </pre></li>
      <li><strong>callItemRow.tpl Source File</strong>
         <p>The <code>callItemRow.tpl</code> template file defines the details of each call.</p>
 <pre class="prettyprint lang-html">
-&lt;li data-filtertext=&quot;%name%&quot; class=&quot;%cssClasses%&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;toRemove hidden&quot;&gt;&lt;input type=&quot;checkbox&quot;/&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;numberOrName&quot;&gt;%name%&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;iconStatus&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;callTime&quot;&gt;%callTime%&lt;/div&gt;
+&lt;li data-filtertext="%name%" class="%cssClasses%"&gt;
+   &lt;div class="toRemove hidden"&gt;&lt;input type="checkbox"/&gt;&lt;/div&gt;
+   &lt;div class="numberOrName"&gt;%name%&lt;/div&gt;
+   &lt;div class="iconStatus"&gt;&lt;/div&gt;
+   &lt;div class="callTime"&gt;%callTime%&lt;/div&gt;
 &lt;/li&gt;
 </pre></li>
-  </ol> 
+  </ol>
 
   <h2 id="Initializing" name="Browsing">Initializing the Application</h2>
-   <ol> 
+   <ol>
    <li><strong>config.xml Source File</strong>
    <p>The required privileges are declared in the <code>config.xml</code> file. </p>
 <pre class="prettyprint">
 &lt;!--Configuration file content--&gt;
 &lt;widget ...&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/callhistory.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/callhistory.write&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/contact.read&quot;/&gt;
+   &lt;!--Other configuration details--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/callhistory.read"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/callhistory.write"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/contact.read"/&gt;
 &lt;/widget&gt;
 </pre></li>
-  </ol> 
+  </ol>
 
-  <h2 id="Browsing" name="Browsing">Browsing a Call Log</h2> 
-  <p>This section builds upon the elements described in <a href="call_history_w.htm#Searching_Call_History">Searching for Call History Items</a>.</p> 
+  <h2 id="Browsing" name="Browsing">Browsing a Call Log</h2>
+  <p>This section builds upon the elements described in <a href="call_history_w.htm#Searching_Call_History">Searching for Call History Items</a>.</p>
   <p>The call log retrieval functionality is implemented in the <code>app.model.js</code> file.</p>
-  <ol> 
-   <li><strong>Retrieving the Complete Call History</strong> 
+  <ol>
+   <li><strong>Retrieving the Complete Call History</strong>
    <ol type="a">
-   <li><p>The <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface, placed in the <code>app.model.js</code> file, is used to retrieve the call history in the descending order by specifying the required parameters.</p> 
+   <li><p>The <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface, placed in the <code>app.model.js</code> file, is used to retrieve the call history in the descending order by specifying the required parameters.</p>
 <pre class="prettyprint">
 getCallHistory: function Model_getCallHistory(onSuccess, onError)
 {
-&nbsp;&nbsp;&nbsp;tizen.callhistory.find(onSuccess, onError, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.SortMode(&#39;startTime&#39;, &#39;DESC&#39;));
+   tizen.callhistory.find(onSuccess, onError, null,
+                          new tizen.SortMode('startTime', 'DESC'));
 }
 </pre></li>
-   <li><p>The <code>showCallHistory()</code> method, placed in the <code>app.js</code> file, calls the <code>getCallHistory()</code> method from <code>app.model.js</code> and shows the results of the call history retrieval on the screen.</p> 
+   <li><p>The <code>showCallHistory()</code> method, placed in the <code>app.js</code> file, calls the <code>getCallHistory()</code> method from <code>app.model.js</code> and shows the results of the call history retrieval on the screen.</p>
 <pre class="prettyprint">
 showCallHistory: function App_showCallHistory()
 {
-&nbsp;&nbsp;&nbsp;this.model.getCallHistory(this.ui.showCallHistory.bind(this.ui));
+   this.model.getCallHistory(this.ui.showCallHistory.bind(this.ui));
 }
 </pre></li></ol>
-   </li> 
-   <li><strong>Retrieving the Call History for a Specific Caller</strong> 
-   <ol type="a"><li><p>To retrieve the call history for a specific caller, the phone number of the caller is specified as an additional filter parameter in the <code>find()</code> method.</p> 
+   </li>
+   <li><strong>Retrieving the Call History for a Specific Caller</strong>
+   <ol type="a"><li><p>To retrieve the call history for a specific caller, the phone number of the caller is specified as an additional filter parameter in the <code>find()</code> method.</p>
 <pre class="prettyprint">
 getCallHistoryForCaller: function Model_getCallHistoryForCaller(phoneNumber,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess)
+                                                                onSuccess)
 {
-&nbsp;&nbsp;&nbsp;tizen.callhistory.find(onSuccess, null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.AttributeFilter(&#39;remoteParties.remoteParty&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;EXACTLY&#39;, phoneNumber),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.SortMode(&#39;startTime&#39;, &#39;DESC&#39;));
+   tizen.callhistory.find(onSuccess, null,
+                          new tizen.AttributeFilter('remoteParties.remoteParty',
+                                                    'EXACTLY', phoneNumber),
+                          new tizen.SortMode('startTime', 'DESC'));
 }
 </pre></li>
-   <li><p>The <code>showHistoryForCaller()</code> method calls the <code>getCallHistoryForCaller()</code> method and shows the results of the specific caller history retrieval on the screen.</p> 
+   <li><p>The <code>showHistoryForCaller()</code> method calls the <code>getCallHistoryForCaller()</code> method and shows the results of the specific caller history retrieval on the screen.</p>
 <pre class="prettyprint">
 showHistoryForCaller: function App_showHistoryForCaller(phoneNumber)
 {
-&nbsp;&nbsp;&nbsp;this.lastViewedCaller = phoneNumber;
-&nbsp;&nbsp;&nbsp;this.model.getCallHistoryForCaller(phoneNumber,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.ui.showHistoryForCaller.bind(this.ui,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;phoneNumber));
+   this.lastViewedCaller = phoneNumber;
+   this.model.getCallHistoryForCaller(phoneNumber,
+                                      this.ui.showHistoryForCaller.bind(this.ui,
+                                                                        phoneNumber));
 }
 </pre></li></ol>
-   </li> 
-  </ol> 
-  
-  <h2 id="Managing" name="Managing">Managing Caller History</h2> 
-  <p>This section builds upon the elements described in <a href="call_history_w.htm#Removing_Call_History">Removing Call History Items</a>.</p> 
+   </li>
+  </ol>
+
+  <h2 id="Managing" name="Managing">Managing Caller History</h2>
+  <p>This section builds upon the elements described in <a href="call_history_w.htm#Removing_Call_History">Removing Call History Items</a>.</p>
 
-  <h3 id="listen" name="listen">Listening to Call History Changes</h3> 
-  <ol> 
-   <li><strong>app.model.js Source File</strong> 
+  <h3 id="listen" name="listen">Listening to Call History Changes</h3>
+  <ol>
+   <li><strong>app.model.js Source File</strong>
    <p>The <code>addChangeListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface is used to add an event listener for listening to change events in the call history.</p>
 <pre class="prettyprint">
 registerChangeListener: function Model_registerChangeListener(onSuccessCallback)
 {
-&nbsp;&nbsp;&nbsp;var callHistoryListener =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onadded: onSuccessCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onchanged: onSuccessCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onremoved: onSuccessCallback
-&nbsp;&nbsp;&nbsp;};
+   var callHistoryListener =
+   {
+      onadded: onSuccessCallback,
+      onchanged: onSuccessCallback,
+      onremoved: onSuccessCallback
+   };
 
-&nbsp;&nbsp;&nbsp;tizen.callhistory.addChangeListener(callHistoryListener);
+   tizen.callhistory.addChangeListener(callHistoryListener);
 }
 </pre></li>
 <li><strong>app.js Source File</strong>
@@ -282,52 +282,52 @@ registerChangeListener: function Model_registerChangeListener(onSuccessCallback)
 <pre class="prettyprint">
 init: function App_init()
 {
-&nbsp;&nbsp;&nbsp;this.config = new Config();
-&nbsp;&nbsp;&nbsp;this.model = new Model();
-&nbsp;&nbsp;&nbsp;this.model.registerChangeListener(this.updateCallLists.bind(this));
+   this.config = new Config();
+   this.model = new Model();
+   this.model.registerChangeListener(this.updateCallLists.bind(this));
 
-&nbsp;&nbsp;&nbsp;this.ui = new Ui();
+   this.ui = new Ui();
 
-&nbsp;&nbsp;&nbsp;return this;
+   return this;
 }
 </pre></li></ol>
-  <h3 id="delete" name="delete">Deleting the Call History for a Caller</h3> 
-  <ol> 
+  <h3 id="delete" name="delete">Deleting the Call History for a Caller</h3>
+  <ol>
    <li><strong>app.model.js Source File</strong>
-   <p>The <code>remove()</code> method of the <code>CallHistory</code> interface is used to delete a specific call log entry.</p> 
+   <p>The <code>remove()</code> method of the <code>CallHistory</code> interface is used to delete a specific call log entry.</p>
 <pre class="prettyprint">
 deleteLog: function Model_deleteLog(entry)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.callhistory.remove(entry);
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      tizen.callhistory.remove(entry);
+   }
 }
 </pre></li>
-  </ol> 
-  <h3 id="respond" name="respond">Responding to a Call Log Entry</h3> 
-  <p>The call log entry response functionality is implemented in the <code>app.js</code> file.</p> 
-  <ol> 
+  </ol>
+  <h3 id="respond" name="respond">Responding to a Call Log Entry</h3>
+  <p>The call log entry response functionality is implemented in the <code>app.js</code> file.</p>
+  <ol>
    <li><strong>Calling</strong>
    <p>The <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> interface of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API is used to <a href="../app_management/app_controls_w.htm">launch other applications</a>. To respond to the call log by calling, specify the <code>http://tizen.org/appcontrol/operation/dial</code> operation and the contact number as parameters.</p>
 <pre class="prettyprint">
 makeCall: function App_makeCall(phoneNumber)
 {
-&nbsp;&nbsp;&nbsp;var self = this, appControl =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&#39;http://tizen.org/appcontrol/operation/call&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;tel:&#39; + phoneNumber);
+   var self = this, appControl =
+      new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/call',
+                                   'tel:' + phoneNumber);
 
-&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(appControl, null, function() {}, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onsuccess: function() {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onfailure: function(er)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+   tizen.application.launchAppControl(appControl, null, function() {}, function(e)
+      {
+         /* Error handling */
+      },
+      {
+         onsuccess: function() {},
+         onfailure: function(er)
+         {
+            /* Error handling */
+         }
+      }
 },
 </pre></li>
    <li><strong>Sending a Message</strong>
@@ -335,27 +335,27 @@ makeCall: function App_makeCall(phoneNumber)
 <pre class="prettyprint">
 sendSms: function App_sendSms(phoneNumber)
 {
-&nbsp;&nbsp;&nbsp;var self = this, appControl =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.ApplicationControl(&#39;http://tizen.org/appcontrol/operation/compose&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;sms:&#39; + phoneNumber);
+   var self = this, appControl =
+      new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/compose',
+                                   'sms:' + phoneNumber);
 
-&nbsp;&nbsp;&nbsp;tizen.application.launchAppControl(appControl, null, function() {}, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onsuccess: function() {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onfailure: function(er)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   tizen.application.launchAppControl(appControl, null, function() {}, function(e)
+      {
+         /* Error handling */
+      },
+      {
+         onsuccess: function() {},
+         onfailure: function(er)
+         {
+            /* Error handling */
+         }
+      });
 }
 </pre></li>
-  </ol> 
+  </ol>
+
 
 
-    
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/personal/task_eventmanager_w.htm b/org.tizen.guides/html/web/personal/task_eventmanager_w.htm
index 262514b..35fe3e1 100644 (file)
--- a/org.tizen.guides/html/web/personal/task_eventmanager_w.htm
+++ b/org.tizen.guides/html/web/personal/task_eventmanager_w.htm
@@ -59,7 +59,7 @@
 
   <h2 id="Defining" name="Defining">Defining the Application Layout</h2>
   <p>The EventManager sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 3 screens: the main screen displays the events list, the New event screen allows adding and editing events, and the Set alarm screen enables setting an alarm for an event.</p>
-  
+
   <p>The following figure shows the main screens of the application.</p>
   <p align="center"><strong>Figure: EventManager screens</strong></p>
   <p align="center"><img alt="EventManager screens" src="../../images/eventmanager.png" /></p>
@@ -73,82 +73,82 @@
 <pre class="prettyprint">
 loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
 {
-&nbsp;&nbsp;&nbsp;var self = this,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplName,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplPath;
-
-&nbsp;&nbsp;&nbsp;if ($.isArray(tplNames))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(tplNames, function(index, fileName)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (self.cache[fileName] === undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplName = [fileName, app.config.get(&#39;templateExtension&#39;)].join(&#39;&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplPath = [app.config.get(&#39;templateDir&#39;), tplName].join(&#39;/&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: tplPath,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cache: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType: &#39;html&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;async: true,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success: function(data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates += 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.cache[fileName] = data;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (cachedTemplates &gt;= tplNames.length
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error: function(jqXHR, textStatus, errorThrown)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cachedTemplates += 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (cachedTemplates &gt;= tplNames.length
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; typeof onSuccess === &#39;function&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   var self = this,
+       cachedTemplates = 0,
+       tplName,
+       tplPath;
+
+   if ($.isArray(tplNames))
+   {
+      $.each(tplNames, function(index, fileName)
+         {
+            if (self.cache[fileName] === undefined)
+            {
+               tplName = [fileName, app.config.get('templateExtension')].join('');
+               tplPath = [app.config.get('templateDir'), tplName].join('/');
+               $.ajax(
+               {
+                  url: tplPath,
+                  cache: true,
+                  dataType: 'html',
+                  async: true,
+                  success: function(data)
+                  {
+                     cachedTemplates += 1;
+                     self.cache[fileName] = data;
+                     if (cachedTemplates &gt;= tplNames.length
+                         &amp;&amp; typeof onSuccess === 'function')
+                     {
+                        onSuccess();
+                     }
+                  },
+                  error: function(jqXHR, textStatus, errorThrown)
+                  {
+                     /* Error handling */
+                  }
+               });
+            }
+            else
+            {
+               cachedTemplates += 1;
+               if (cachedTemplates &gt;= tplNames.length
+                   &amp;&amp; typeof onSuccess === 'function')
+               {
+                  onSuccess();
+               }
+            }
+         });
+   }
 }
 </pre></li>
      <li> <p>Next, the template manager returns the template HTML content from the cache.</p>
 <pre class="prettyprint">
 get: function TemplateManager_get(tplName, tplParams)
 {
-&nbsp;&nbsp;&nbsp;if (this.cache[tplName] !== undefined)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return this.getCompleted(this.cache[tplName], tplParams);
-&nbsp;&nbsp;&nbsp;}
+   if (this.cache[tplName] !== undefined)
+   {
+      return this.getCompleted(this.cache[tplName], tplParams);
+   }
 
-&nbsp;&nbsp;&nbsp;return &#39;&#39;;
+   return '';
 }
 </pre></li>
      <li><p>Finally, the template manager returns the completed template using the specified parameters.</p>
 <pre class="prettyprint">
 getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 {
-&nbsp;&nbsp;&nbsp;var tplParam, replaceRegExp;
-
-&nbsp;&nbsp;&nbsp;for (tplParam in tplParams)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tplParams.hasOwnProperty(tplParam))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;replaceRegExp = new RegExp([&#39;%&#39;, tplParam, &#39;%&#39;].join(&#39;&#39;), &#39;g&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return tplHtml;
+   var tplParam, replaceRegExp;
+
+   for (tplParam in tplParams)
+   {
+      if (tplParams.hasOwnProperty(tplParam))
+      {
+         replaceRegExp = new RegExp(['%', tplParam, '%'].join(''), 'g');
+         tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]);
+      }
+   }
+
+   return tplHtml;
 }
 </pre></li>
     </ol> </li>
@@ -161,60 +161,60 @@ getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 <p>The main screen displays a list of calendar events. The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
 
 <pre class="prettyprint lang-html">
-&lt;div data-role=&quot;page&quot; id=&quot;home&quot; data-add-back-btn=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Event manager&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="home" data-add-back-btn="false"&gt;
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header"&gt;
+      &lt;h1&gt;Event manager&lt;/h1&gt;
+   &lt;/div&gt;
 </pre></li>
 <li><p>The actual content section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> component displaying the elements as defined in the <code>templates/event.tpl</code> and <code>templates/all_day_event.tpl</code> files.</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;center&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;date&quot; id=&quot;homeDateFilter&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/center&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;events_list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;&gt;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content"&gt;
+      &lt;div&gt;
+         &lt;center&gt;
+            &lt;input type="date" id="homeDateFilter"/&gt;
+         &lt;/center&gt;
+      &lt;/div&gt;
+      &lt;div id="events_list"&gt;
+         &lt;ul data-role="listview" data-inset="true"&gt;&lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 </pre></li>
 <li><p>The footer section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with buttons for adding an event and closing the application.</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&lt;!--Footer section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; data-style=&quot;tabbar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#new_event&quot; id=&quot;newEventBtn&quot;&gt;Add New Event&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; id=&quot;exit_btn&quot;&gt;Exit&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;!--Footer section--&gt;
+   &lt;div data-role="footer" data-position="fixed"&gt;
+      &lt;div data-role="tabbar" data-style="tabbar"&gt;
+         &lt;ul&gt;
+            &lt;li&gt;&lt;a href="#new_event" id="newEventBtn"&gt;Add New Event&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href="javascript:void(0)" id="exit_btn"&gt;Exit&lt;/a&gt;&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li></ol>
 </li>
 <li><strong>templates/event.tpl Source File</strong>
 <p>Each event is displayed in the list showing a summary text, and a start and end date, and 2 <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">buttons</a>.</p>
 <pre class="prettyprint lang-html">
-&lt;li class=&quot;event&quot; data-eventid=&quot;%uid%&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-li-aside ui-li-desc&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;description&quot;&gt;%summary|escape%&lt;/span&gt;&lt;br/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;green_dot&quot;&gt;&lt;/div&gt;&lt;small&gt;%startDateTime%&lt;/small&gt;&lt;br/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;red_dot&quot;&gt;&lt;/div&gt;&lt;small&gt;%endDateTime%&lt;/small&gt;&lt;br/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;editEvent&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;form&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; class=&quot;edit_event_btn&quot; data-inline=&quot;true&quot; value=&quot;edit&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;deleteEvent&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;form&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; class=&quot;remove_event_btn&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-inline=&quot;true&quot; value=&quot;delete&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;li class="event" data-eventid="%uid%"&gt;
+   &lt;div class="ui-li-aside ui-li-desc"&gt;
+      &lt;span class="description"&gt;%summary|escape%&lt;/span&gt;&lt;br/&gt;
+      &lt;div class="green_dot"&gt;&lt;/div&gt;&lt;small&gt;%startDateTime%&lt;/small&gt;&lt;br/&gt;
+      &lt;div class="red_dot"&gt;&lt;/div&gt;&lt;small&gt;%endDateTime%&lt;/small&gt;&lt;br/&gt;
+   &lt;/div&gt;
+   &lt;div class="editEvent"&gt;
+      &lt;form&gt;
+         &lt;input type="button" class="edit_event_btn" data-inline="true" value="edit"/&gt;
+      &lt;/form&gt;
+   &lt;/div&gt;
+   &lt;div class="deleteEvent"&gt;
+      &lt;form&gt;
+         &lt;input type="button" class="remove_event_btn"
+                data-inline="true" value="delete"/&gt;
+      &lt;/form&gt;
+   &lt;/div&gt;
 &lt;/li&gt;
 </pre>
 </li></ol>
@@ -224,62 +224,62 @@ getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 <p>The New event screen contains UI components for setting the event title, type, start and end date, and an alarm for the event. The footer section of the screen contains a tab bar with buttons for saving the event information, or deleting it.</p>
 <pre class="prettyprint lang-html">
 &lt;!--New event screen layout--&gt;
-&lt;div data-role=&quot;page&quot; id=&quot;new_event&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;New event&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;title&quot;&gt;Title&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;&lt;input type=&quot;text&quot; name=&quot;summary&quot; id=&quot;title&quot; maxlength=&quot;9&quot;/&gt;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;dataAllDay&quot;&gt;Type&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;dataAllDay&quot; data-role=&quot;dataAllDay&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;allDaySwitcher&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select id=&quot;allDay&quot; data-role=&quot;slider&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&quot;1&quot;&gt;All day&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=&quot;0&quot;&gt;Period&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;demo-date-1&quot;&gt;Start&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;date-1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;datetime&quot; name=&quot;startDate&quot; id=&quot;demo-date-1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-format=&quot;MMM dd yyyy HH:mm&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;demo-date-2&quot;&gt;End&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;date-2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;ui-li-text-main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;datetime&quot; name=&quot;endDate&quot; id=&quot;demo-date-2&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-format=&quot;MMM dd yyyy HH:mm&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;alarm&quot;&gt;Alarm&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;alarm&quot;&gt;0 minutes before&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;add_alarm&quot; data-inline=&quot;true&quot; data-role=&quot;button&quot;&gt;change&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Footer section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; data-style=&quot;tabbar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;add-event-cancel-btn&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;add-event-btn&quot; data-inline=&quot;true&quot;&gt;OK&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="new_event"&gt;
+
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header" data-position="fixed"&gt;
+      &lt;h1&gt;New event&lt;/h1&gt;
+   &lt;/div&gt;
+
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content"&gt;
+      &lt;fieldset&gt;
+         &lt;label for="title"&gt;Title&lt;/label&gt;
+         &lt;div&gt;&lt;input type="text" name="summary" id="title" maxlength="9"/&gt;&lt;/div&gt;
+
+         &lt;label for="dataAllDay"&gt;Type&lt;/label&gt;
+         &lt;div id="dataAllDay" data-role="dataAllDay"&gt;
+            &lt;span class="allDaySwitcher"&gt;
+            &lt;select id="allDay" data-role="slider"&gt;
+               &lt;option value="1"&gt;All day&lt;/option&gt;
+               &lt;option value="0"&gt;Period&lt;/option&gt;
+            &lt;/select&gt;
+         &lt;/div&gt;
+
+         &lt;label for="demo-date-1"&gt;Start&lt;/label&gt;
+         &lt;div id="date-1"&gt;
+            &lt;span class="ui-li-text-main"&gt;
+               &lt;input type="datetime" name="startDate" id="demo-date-1"
+                      data-format="MMM dd yyyy HH:mm"/&gt;
+            &lt;/span&gt;
+         &lt;/div&gt;
+
+         &lt;label for="demo-date-2"&gt;End&lt;/label&gt;
+         &lt;div id="date-2"&gt;
+            &lt;span class="ui-li-text-main"&gt;
+               &lt;input type="datetime" name="endDate" id="demo-date-2"
+                      data-format="MMM dd yyyy HH:mm"/&gt;
+            &lt;/span&gt;
+         &lt;/div&gt;
+
+         &lt;label for="alarm"&gt;Alarm&lt;/label&gt;
+         &lt;div&gt;
+            &lt;span id="alarm"&gt;0 minutes before&lt;/span&gt;
+            &lt;a id="add_alarm" data-inline="true" data-role="button"&gt;change&lt;/a&gt;
+         &lt;/div&gt;
+
+      &lt;/fieldset&gt;
+   &lt;/div&gt;
+
+   &lt;!--Footer section--&gt;
+   &lt;div data-role="footer" data-position="fixed"&gt;
+      &lt;div data-role="tabbar" data-style="tabbar"&gt;
+         &lt;ul&gt;
+            &lt;li&gt;&lt;a id="add-event-cancel-btn" data-inline="true"&gt;Cancel&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a id="add-event-btn" data-inline="true"&gt;OK&lt;/a&gt;&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li></ol>
@@ -289,48 +289,48 @@ getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 <p>The Set alarm screen contains radio buttons for defining the time of the alarm. The footer section of the screen contains a button for saving the alarm setting.</p>
 <pre class="prettyprint lang-html">
 &lt;!--Set alarm screen layout--&gt;
-&lt;div data-role=&quot;page&quot; id=&quot;new_alarm&quot; data-add-back-btn=&quot;false&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Set alarm&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-0&quot; value=&quot;-1&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;radio-choice-0&quot;&gt;(Off)&lt;/label&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-1&quot; value=&quot;0&quot; checked /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;radio-choice-1&quot;&gt;On time&lt;/label&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-2&quot; value=&quot;5&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;radio-choice-2&quot;&gt;5 minutes before&lt;/label&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-3&quot; value=&quot;30&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;radio-choice-3&quot;&gt;30 minutes before&lt;/label&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-4&quot; value=&quot;60&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;radio-choice-4&quot;&gt;1 hour before&lt;/label&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;radio&quot; class=&quot;customDuration&quot; name=&quot;radio-choice&quot; id=&quot;yes_1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;Yes&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;yes_1&quot;&gt;custom time:&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;customDetails&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input placeholder=&quot;00&quot; class=&quot;customDuration&quot; type=&quot;number&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name=&quot;radio-choice&quot; min=&quot;0&quot; max=&quot;99&quot; id=&quot;customDuration&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minute(s) before
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Footer section--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;footer&quot; data-position =&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; data-style=&quot;tabbar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#new_event&quot; id=&quot;add-alarm&quot;&gt;Save&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="new_alarm" data-add-back-btn="false"&gt;
+
+   &lt;!--Header section--&gt;
+   &lt;div data-role="header" data-position="fixed"&gt;
+      &lt;h1&gt;Set alarm&lt;/h1&gt;
+   &lt;/div&gt;
+
+   &lt;!--Content section--&gt;
+   &lt;div data-role="content"&gt;
+      &lt;input type="radio" name="radio-choice" id="radio-choice-0" value="-1"/&gt;
+      &lt;label for="radio-choice-0"&gt;(Off)&lt;/label&gt;
+
+      &lt;input type="radio" name="radio-choice" id="radio-choice-1" value="0" checked /&gt;
+      &lt;label for="radio-choice-1"&gt;On time&lt;/label&gt;
+
+      &lt;input type="radio" name="radio-choice" id="radio-choice-2" value="5"/&gt;
+      &lt;label for="radio-choice-2"&gt;5 minutes before&lt;/label&gt;
+
+      &lt;input type="radio" name="radio-choice" id="radio-choice-3" value="30"/&gt;
+      &lt;label for="radio-choice-3"&gt;30 minutes before&lt;/label&gt;
+
+      &lt;input type="radio" name="radio-choice" id="radio-choice-4" value="60"/&gt;
+      &lt;label for="radio-choice-4"&gt;1 hour before&lt;/label&gt;
+
+      &lt;input type="radio" class="customDuration" name="radio-choice" id="yes_1"
+             value="Yes"/&gt;
+      &lt;label for="yes_1"&gt;custom time:&lt;/label&gt;
+      &lt;span class="customDetails"&gt;
+         &lt;input placeholder="00" class="customDuration" type="number"
+                name="radio-choice" min="0" max="99" id="customDuration"/&gt;
+         minute(s) before
+      &lt;/span&gt;
+   &lt;/div&gt;
+
+   &lt;!--Footer section--&gt;
+   &lt;div data-role="footer" data-position ="fixed"&gt;
+      &lt;div data-role="tabbar" data-style="tabbar"&gt;
+         &lt;ul&gt;
+            &lt;li&gt;&lt;a href="#new_event" id="add-alarm"&gt;Save&lt;/a&gt;&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -343,11 +343,11 @@ getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 <pre class="prettyprint">
 &lt;!--Configuration file content--&gt;
 &lt;widget ...&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/calendar.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/calendar.write&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/time&quot;/&gt;
+   &lt;!--Other configuration details--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/calendar.read"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/calendar.write"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/time"/&gt;
 &lt;/widget&gt;
 </pre></li>
   </ol>
@@ -361,7 +361,7 @@ getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
 <pre class="prettyprint">
 getCalendar: function Model_getCalendar()
 {
-&nbsp;&nbsp;&nbsp;return tizen.calendar.getDefaultCalendar(&quot;EVENT&quot;);
+   return tizen.calendar.getDefaultCalendar("EVENT");
 },
 </pre>
 </li>
@@ -370,10 +370,10 @@ getCalendar: function Model_getCalendar()
 <pre class="prettyprint">
 addEventToDefaultCalendar: function Model_addEventToDefaultCalendar(calendarItemInit)
 {
-&nbsp;&nbsp;&nbsp;var calendar = null, event = null;
-&nbsp;&nbsp;&nbsp;calendar = this.getCalendar();
-&nbsp;&nbsp;&nbsp;event = new tizen.CalendarEvent(calendarItemInit);
-&nbsp;&nbsp;&nbsp;.add(event);
+   var calendar = null, event = null;
+   calendar = this.getCalendar();
+   event = new tizen.CalendarEvent(calendarItemInit);
+   .add(event);
 },
 </pre>
 </li>
@@ -382,16 +382,16 @@ addEventToDefaultCalendar: function Model_addEventToDefaultCalendar(calendarItem
 <pre class="prettyprint">
 updateEvent: function Model_updateEvent(event_id, new_values)
 {
-&nbsp;&nbsp;&nbsp;var myCalendar = this.getCalendar(), new_event, prop,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event = myCalendar.get(new tizen.CalendarEventId(event_id));
-&nbsp;&nbsp;&nbsp;for (prop in new_values)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (new_values.hasOwnProperty(prop))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event[prop] = new_values[prop]; /* Copy the new values into the event object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;myCalendar.update(event, false);
+   var myCalendar = this.getCalendar(), new_event, prop,
+       event = myCalendar.get(new tizen.CalendarEventId(event_id));
+   for (prop in new_values)
+   {
+      if (new_values.hasOwnProperty(prop))
+      {
+         event[prop] = new_values[prop]; /* Copy the new values into the event object */
+      }
+   }
+   myCalendar.update(event, false);
 },
 </pre>
 </li>
@@ -401,9 +401,9 @@ updateEvent: function Model_updateEvent(event_id, new_values)
 <pre class="prettyprint">
 deleteEvent: function Model_deleteEvent(event_id)
 {
-&nbsp;&nbsp;&nbsp;var myCalendar = this.getCalendar();
-&nbsp;&nbsp;&nbsp;myCalendar.remove(new tizen.CalendarEventId(event_id));
-&nbsp;&nbsp;&nbsp;this.app.loadEvents();
+   var myCalendar = this.getCalendar();
+   myCalendar.remove(new tizen.CalendarEventId(event_id));
+   this.app.loadEvents();
 },
 </pre>
 </li>
@@ -418,24 +418,24 @@ deleteEvent: function Model_deleteEvent(event_id)
 <pre class="prettyprint">
 getStartDateFilter: function Model_getStartDateFilter(date)
 {
-&nbsp;&nbsp;&nbsp;var today = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tomorrow =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()+1);
-
-&nbsp;&nbsp;&nbsp;return new tizen.CompositeFilter(&quot;UNION&quot;,
-&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.CompositeFilter(&quot;INTERSECTION&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.AttributeFilter(&quot;isAllDay&quot;, &quot;EXACTLY&quot;, false),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.AttributeRangeFilter(&quot;startDate&quot;, null, tomorrow),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.AttributeRangeFilter(&quot;endDate&quot;, today, null)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.CompositeFilter(&quot;INTERSECTION&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.AttributeFilter(&quot;isAllDay&quot;, &quot;EXACTLY&quot;, true),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new tizen.AttributeRangeFilter(&quot;startDate&quot;, tomorrow, tomorrow),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;])
-&nbsp;&nbsp;&nbsp;]);
+   var today = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()),
+       tomorrow =
+          new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()+1);
+
+   return new tizen.CompositeFilter("UNION",
+   [
+      new tizen.CompositeFilter("INTERSECTION",
+      [
+         new tizen.AttributeFilter("isAllDay", "EXACTLY", false),
+         new tizen.AttributeRangeFilter("startDate", null, tomorrow),
+         new tizen.AttributeRangeFilter("endDate", today, null)
+      ]),
+      new tizen.CompositeFilter("INTERSECTION",
+      [
+         new tizen.AttributeFilter("isAllDay", "EXACTLY", true),
+         new tizen.AttributeRangeFilter("startDate", tomorrow, tomorrow),
+      ])
+   ]);
 },
 </pre>
 </li>
@@ -443,13 +443,13 @@ getStartDateFilter: function Model_getStartDateFilter(date)
 <p>Use the <code>find()</code> method with the composite filter created above to retrieve filtered events from the calendar.</p>
 <pre class="prettyprint">
 getEventsFromDefaultCalendar: function Model_getEventsFromDefaultCalendar(date,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onError)
+                                                                          onSuccess,
+                                                                          onError)
 {
-&nbsp;&nbsp;&nbsp;var calendar = null, filter = null;
-&nbsp;&nbsp;&nbsp;calendar = this.getCalendar();
-&nbsp;&nbsp;&nbsp;filter = this.getStartDateFilter(app.homeDateFilter);
-&nbsp;&nbsp;&nbsp;calendar.find(onSuccess, onError, filter);
+   var calendar = null, filter = null;
+   calendar = this.getCalendar();
+   filter = this.getStartDateFilter(app.homeDateFilter);
+   calendar.find(onSuccess, onError, filter);
 },
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/security/secure_key_w.htm b/org.tizen.guides/html/web/security/secure_key_w.htm
index 15ea42d..40a3c1d 100644 (file)
--- a/org.tizen.guides/html/web/security/secure_key_w.htm
+++ b/org.tizen.guides/html/web/security/secure_key_w.htm
@@ -30,7 +30,7 @@
         <ul class="toc">
             <li><a href="#access">Data Access Control</a></li>
                        <li><a href="#save">Saving Data</a></li>
-            <li><a href="#get">Getting Data</a></li>                   
+            <li><a href="#get">Getting Data</a></li>
             <li><a href="#remove">Removing Data</a></li>
         </ul>
         <p class="toc-title">Related Info</p>
@@ -44,7 +44,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Secure Key Management</h1>
-  
+
 <p>The key manager allows you to <a href="#access">control data access</a> by securely storing in a central secure repository keys, certificates, and sensitive data related to users and their password-protected applications. Additionally, the key manager provides secure cryptographic operations for non-exportable keys without revealing the key values to clients. The central secure repository is protected by a password.</p>
 
 <p>The Key Manager API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
@@ -58,7 +58,7 @@
                <li>Removing data
                <p>You can <a href="#remove">remove data</a> from a repository. You can remove both data that you have added yourself, and data that another application has added and granted you permissions to remove.</p></li>
     </ul>
-       
+
 <h2 id="access">Data Access Control</h2>
 
 <p>With the key manager, you can control various security aspects of your application:</p>
@@ -84,18 +84,18 @@
 </li>
 </ul>
 
-   <p align="center"><strong>Figure: Key manager process</strong></p> 
+   <p align="center"><strong>Figure: Key manager process</strong></p>
    <p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p>
 
 <h2 id="save">Saving Data</h2>
 
 <p>To save data in a repository:</p>
 
-<ol> 
+<ol>
 <li><p>Save the data using the <code>saveData()</code> method:</p>
 
 <pre class="prettyprint">
-var data_name = &quot;data1&quot;, raw_data = &quot;my data&quot;;
+var data_name = "data1", raw_data = "my data";
 
 tizen.keymanager.saveData(data_name, raw_data, null, onSave);
 </pre></li>
@@ -106,17 +106,17 @@ tizen.keymanager.saveData(data_name, raw_data, null, onSave);
 <pre class="prettyprint">
 function onPermissionSet()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Successfully set permission&quot;);
+   console.log("Successfully set permission");
 }
 
 function onSave()
 {
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   Dictionary does not require a package ID because an
-&nbsp;&nbsp;&nbsp;   application can only set permission for data which it saved
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;tizen.keymanager.setPermission({&quot;name&quot;: data_name}, &quot;9PdoiICQ4c&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;READ_REMOVE&quot;, onPermissionSet);
+   /*
+      Dictionary does not require a package ID because an
+      application can only set permission for data which it saved
+   */
+   tizen.keymanager.setPermission({"name": data_name}, "9PdoiICQ4c",
+                                  "READ_REMOVE", onPermissionSet);
 }
 </pre>
 </li>
@@ -130,16 +130,16 @@ function onSave()
 <ul>
 <li><p>Retrieve data which your application has added:</p>
 <pre class="prettyprint">
-var data_name = &quot;data1&quot;, raw_data = &quot;my data&quot;;
+var data_name = "data1", raw_data = "my data";
 
 function onSave()
 {
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   Dictionary does not require a package ID because the
-&nbsp;&nbsp;&nbsp;   application calling getData() saved &quot;data1&quot;
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;var app_data = tizen.keymanager.getData({&quot;name&quot;: data_name});
-&nbsp;&nbsp;&nbsp;console.log(&quot;App data: &quot; + app_data + &quot; was retrieved&quot;);
+   /*
+      Dictionary does not require a package ID because the
+      application calling getData() saved "data1"
+   */
+   var app_data = tizen.keymanager.getData({"name": data_name});
+   console.log("App data: " + app_data + " was retrieved");
 }
 
 tizen.keymanager.saveData(data_name, raw_data, null, onSave);
@@ -154,12 +154,12 @@ var aliases = tizen.keymanager.getDataAliasList();
 
 if (aliases.length != 0)
 {
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   Assuming that the application calling getData()
-&nbsp;&nbsp;&nbsp;   has permission to read aliases[0]
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;var app_data = tizen.keymanager.getData(aliases[0]);
-&nbsp;&nbsp;&nbsp;console.log(&quot;App data: &quot; + app_data + &quot; was retrieved&quot;);
+   /*
+      Assuming that the application calling getData()
+      has permission to read aliases[0]
+   */
+   var app_data = tizen.keymanager.getData(aliases[0]);
+   console.log("App data: " + app_data + " was retrieved");
 }
 </pre>
 </li>
@@ -173,41 +173,41 @@ if (aliases.length != 0)
 <li><p>Remove data which your application has added:</p>
 
 <pre class="prettyprint">
-var data_name = &quot;data1&quot;, raw_data = &quot;my data&quot;;
+var data_name = "data1", raw_data = "my data";
 
 function onSave()
 {
-&nbsp;&nbsp;&nbsp;/* Do something */
+   /* Do something */
 
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   Dictionary does not require a package ID because the
-&nbsp;&nbsp;&nbsp;   application calling removeData() saved &quot;data1&quot;
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;tizen.keymanager.removeData({&quot;name&quot;: data_name});
+   /*
+      Dictionary does not require a package ID because the
+      application calling removeData() saved "data1"
+   */
+   tizen.keymanager.removeData({"name": data_name});
 }
 
 tizen.keymanager.saveData(data_name, raw_data, null, onSave);
 </pre>
 </li>
- 
+
 <li><p>Remove data which another application has saved, and granted permission for you to remove.</p>
 <p>The following example assumes that the application that created <code>aliases[0]</code> also gave your application permission to remove it:</p>
-  
+
 <pre class="prettyprint">
 var aliases = tizen.keymanager.getDataAliasList();
 
 if (aliases.length != 0)
 {
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   Assuming that the application calling removeData()
-&nbsp;&nbsp;&nbsp;   has permission to remove aliases[0]
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;var app_data = tizen.keymanager.removeData(aliases[0]);
+   /*
+      Assuming that the application calling removeData()
+      has permission to remove aliases[0]
+   */
+   var app_data = tizen.keymanager.removeData(aliases[0]);
 }
 </pre>
 </li>
 </ol>
-       
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/security/security_cover_w.htm b/org.tizen.guides/html/web/security/security_cover_w.htm
index b6c3cda..3fae815 100644 (file)
--- a/org.tizen.guides/html/web/security/security_cover_w.htm
+++ b/org.tizen.guides/html/web/security/security_cover_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Security</title>  
+       <title>Security</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,7 +28,7 @@
                        <li>Tizen 3.0 and Higher for TV</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Security</h1>
@@ -41,7 +41,7 @@
 
 <p>You can provide a secure repository for keys, certificates, and sensitive data related to users and their password-protected applications. You can also use secure cryptographic operations for non-exportable keys without revealing the key values to clients.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/sensors/device_sensors_w.htm b/org.tizen.guides/html/web/sensors/device_sensors_w.htm
index 14d5e5e..9f0cfac 100644 (file)
--- a/org.tizen.guides/html/web/sensors/device_sensors_w.htm
+++ b/org.tizen.guides/html/web/sensors/device_sensors_w.htm
@@ -42,7 +42,7 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Sensor/Metal_Detector" target="_blank">Metal Detector Sample Description</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/web/Sensor/Sensor_Ball" target="_blank">Sensor Ball (Mobile) Sample Description</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/web/Sensor/Sensor_Ball_1" target="_blank">Sensor Ball (Wearable) Sample Description</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/web/Sensor/Sunburn_Monitor" target="_blank">Sunburn Monitor Sample Description</a></li>                     
+                       <li><a href="https://developer.tizen.org/development/sample/web/Sensor/Sunburn_Monitor" target="_blank">Sunburn Monitor Sample Description</a></li>
             </ul>
     </div></div>
 </div>
@@ -53,14 +53,14 @@
 <p>Tizen provides interfaces and methods to manage sensor data from <a href="#capability">various sensors on the device</a>. The main purpose of a sensor is to provide a value for the relevant environment parameter.</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
-  
+
 <p>The main features of the Sensor API include:</p>
 <ul>
 <li>Managing sensors
 <p>You can <a href="#manage">enable the sensor, read sensor data, and disable the sensor</a>.</p></li>
 <li>Receiving notifications
 <p>You can <a href="#receive">receive notifications on sensor data changes</a>.</p></li>
-<li>Obtaining sensor hardware information 
+<li>Obtaining sensor hardware information
 <p>You can <a href="#hw-information">retrieve information about the technical limits of the sensor</a>.</p></li>
 </ul>
 
@@ -75,12 +75,12 @@
 
 <pre class="prettyprint">
 var proximityCapability =
-&nbsp;&nbsp;&nbsp;tizen.systeminfo.getCapability(&quot;http://tizen.org/feature/sensor.proximity&quot;);
+   tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.proximity");
 
 if (proximityCapability === true)
 {
-&nbsp;&nbsp;&nbsp;/* Device supports the proximity sensor */
-&nbsp;&nbsp;&nbsp;var proximitySensor = tizen.sensorservice.getDefaultSensor(&quot;PROXIMITY&quot;);
+   /* Device supports the proximity sensor */
+   var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
 }
 </pre>
 </li>
@@ -89,18 +89,18 @@ if (proximityCapability === true)
 
 <pre class="prettyprint">
 var sensors = tizen.sensorservice.getAvailableSensors();
-console.log(&quot;Available sensor: &quot; + sensors.toString());
+console.log("Available sensor: " + sensors.toString());
 </pre>
 </li>
 
 <li><p>Obtain the <code>Sensor</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#Sensor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#Sensor">wearable</a> applications) using the <code>getDefaultSensor()</code> method of the <code>SensorService</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#SensorService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#SensorService">wearable</a> applications). Enable the sensor using the <code>start()</code> method:</p>
 
 <pre class="prettyprint">
-var proximitySensor = tizen.sensorservice.getDefaultSensor(&quot;PROXIMITY&quot;);
+var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
 
 function onsuccessCB()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;The proximity sensor started successfully.&quot;);
+   console.log("The proximity sensor started successfully.");
 }
 
 proximitySensor.start(onsuccessCB);
@@ -110,18 +110,18 @@ proximitySensor.start(onsuccessCB);
 <li><p>To get data from the sensor, use the appropriate method of the sensor object. For example, for the <code>LightSensor</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#LightSensor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#LightSensor">wearable</a> applications), use the <code>getLightSensorData()</code> method:</p>
 
 <pre class="prettyprint">
-var lightSensor = tizen.sensorservice.getDefaultSensor(&quot;LIGHT&quot;);
+var lightSensor = tizen.sensorservice.getDefaultSensor("LIGHT");
 
 function onGetSuccessCB(sensorData)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;light level: &quot; + sensorData.lightLevel);
+   console.log("light level: " + sensorData.lightLevel);
 }
 
 function onsuccessCB()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;sensor started&quot;);
-&nbsp;&nbsp;&nbsp;lightSensor.getLightSensorData(onGetSuccessCB);
-&nbsp;&nbsp;&nbsp;lightSensor.stop();
+   console.log("sensor started");
+   lightSensor.getLightSensorData(onGetSuccessCB);
+   lightSensor.stop();
 }
 
 lightSensor.start(onsuccessCB);
@@ -134,7 +134,7 @@ proximitySensor.stop();
 </pre>
 </li>
 </ol>
-          
+
                 <h2 id="receive" name="receive">Receiving Notifications on Sensor Data Changes</h2>
 
 <p>Learning how to register a change event handler for sensor data enables your application to react to changes without the need to check current values constantly:</p>
@@ -145,7 +145,7 @@ proximitySensor.stop();
 <pre class="prettyprint">
 function onchangedCB(sensorData)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Light sensor data: &quot; + sensorData.lightLevel);
+   console.log("Light sensor data: " + sensorData.lightLevel);
 }
 </pre>
 </li>
@@ -162,16 +162,16 @@ function onchangedCB(sensorData)
 </ul>
 
 <pre class="prettyprint">
-var lightSensor = tizen.sensorservice.getDefaultSensor(&quot;LIGHT&quot;);
+var lightSensor = tizen.sensorservice.getDefaultSensor("LIGHT");
 
 function onsuccessCB()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Light sensor service has started successfully.&quot;);
+   console.log("Light sensor service has started successfully.");
 }
 
 function onchangedCB(sensorData)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Light sensor data: &quot; + sensorData.lightLevel);
+   console.log("Light sensor data: " + sensorData.lightLevel);
 }
 
 lightSensor.setChangeListener(onchangedCB, 500, 2000);
@@ -180,16 +180,16 @@ lightSensor.start(onsuccessCB);
 
 <p>The default value of the second parameter is 100 and for the third parameter 0. If you do not pass a value, the default is used:</p>
 <pre class="prettyprint">
-var lightSensor = tizen.sensorservice.getDefaultSensor(&quot;LIGHT&quot;);
+var lightSensor = tizen.sensorservice.getDefaultSensor("LIGHT");
 
 function onsuccessCB()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Light sensor service has started successfully.&quot;);
+   console.log("Light sensor service has started successfully.");
 }
 
 function onchangedCB(sensorData)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Light sensor data: &quot; + sensorData.lightLevel);
+   console.log("Light sensor data: " + sensorData.lightLevel);
 }
 
 /* Use the default interval value (100 ms) */
@@ -205,10 +205,10 @@ lightSensor.unsetChangeListener();
 </pre>
 </li>
 </ol>
-  
+
 <h2 id="hw-information" name="hw-information">Obtaining Sensor Hardware Information</h2>
 
-<p>Learning how to retrieve information about the sensor hardware enables your application to know the sensor&#39;s technical limits:</p>
+<p>Learning how to retrieve information about the sensor hardware enables your application to know the sensor's technical limits:</p>
 
 <ol>
 
@@ -216,26 +216,26 @@ lightSensor.unsetChangeListener();
 <pre class="prettyprint">
 function onsuccessCB(hwInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;name: &quot; + hwInfo.name);
-&nbsp;&nbsp;&nbsp;console.log(&quot;type: &quot; + hwInfo.type);
-&nbsp;&nbsp;&nbsp;console.log(&quot;vendor: &quot; + hwInfo.vendor);
-&nbsp;&nbsp;&nbsp;console.log(&quot;minValue: &quot; + hwInfo.minValue);
-&nbsp;&nbsp;&nbsp;console.log(&quot;maxValue: &quot; + hwInfo.maxValue);
-&nbsp;&nbsp;&nbsp;console.log(&quot;resolution: &quot; + hwInfo.resolution);
-&nbsp;&nbsp;&nbsp;console.log(&quot;minInterval: &quot; + hwInfo.minInterval);
-&nbsp;&nbsp;&nbsp;console.log(&quot;maxBatchCount: &quot; + hwInfo.maxBatchCount);
+   console.log("name: " + hwInfo.name);
+   console.log("type: " + hwInfo.type);
+   console.log("vendor: " + hwInfo.vendor);
+   console.log("minValue: " + hwInfo.minValue);
+   console.log("maxValue: " + hwInfo.maxValue);
+   console.log("resolution: " + hwInfo.resolution);
+   console.log("minInterval: " + hwInfo.minInterval);
+   console.log("maxBatchCount: " + hwInfo.maxBatchCount);
 }
 
 function onerrorCB(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;An error occurred: &quot; + error.message);
+   console.log("An error occurred: " + error.message);
 }
 </pre>
 </li>
 
 <li>Call the <code>getSensorHardwareInfo()</code> method of an existing <code>Sensor</code> object to obtain its hardware information as the <code>SensorHardwareInfo</code> object:
 <pre class="prettyprint">
-var proximitySensor = tizen.sensorservice.getDefaultSensor(&quot;PROXIMITY&quot;);
+var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
 
 proximitySensor.getSensorHardwareInfo(onsuccessCB, onerrorCB);
 </pre>
@@ -292,10 +292,10 @@ proximitySensor.getSensorHardwareInfo(onsuccessCB, onerrorCB);
     <tr>
         <td>Linear acceleration sensor</td>
         <td><code>http://tizen.org/feature/sensor.linear_acceleration</code></td>
-    </tr>      
+    </tr>
    </tbody>
   </table>
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/sensors/ham_w.htm b/org.tizen.guides/html/web/sensors/ham_w.htm
index 2bd86c3..5f58689 100644 (file)
--- a/org.tizen.guides/html/web/sensors/ham_w.htm
+++ b/org.tizen.guides/html/web/sensors/ham_w.htm
@@ -40,7 +40,7 @@
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">Human Activity Monitor API for Mobile Web</a></li>
-                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">Human Activity Monitor API for Wearable Web</a></li>                      
+                       <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">Human Activity Monitor API for Wearable Web</a></li>
             </ul>
     </div></div>
 </div>
@@ -51,7 +51,7 @@
 <p>Tizen enables you to access and record human activity data from various <a href="#capability">sensors</a> and <a href="#recorder">recorders</a> on the device.</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
-  
+
 <p>The main features of the Human Activity Monitor API include:</p>
 <ul>
 <li>Retrieving data
@@ -70,8 +70,8 @@
 
 <p>To use the Human Activity Monitor API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">wearable</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
 <pre class="prettyprint">
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/healthinfo&quot;/&gt;
-&lt;tizen:privilege name=&quot;http://tizen.org/privilege/location&quot;/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/healthinfo"/&gt;
+&lt;tizen:privilege name="http://tizen.org/privilege/location"/&gt;
 </pre>
 
 
@@ -88,18 +88,18 @@ var counter = 0;
 
 function onchangedCB(hrmInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Heart Rate: &quot; + hrmInfo.heartRate);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Peak-to-peak interval: &quot; + hrmInfo.rRInterval + &quot; milliseconds&quot;);
-
-&nbsp;&nbsp;&nbsp;counter++;
-&nbsp;&nbsp;&nbsp;if (counter &gt; 10)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Stop the sensor after detecting a few changes */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.humanactivitymonitor.stop(&quot;HRM&quot;);
-&nbsp;&nbsp;&nbsp;}
+   console.log("Heart Rate: " + hrmInfo.heartRate);
+   console.log("Peak-to-peak interval: " + hrmInfo.rRInterval + " milliseconds");
+
+   counter++;
+   if (counter &gt; 10)
+   {
+      /* Stop the sensor after detecting a few changes */
+      tizen.humanactivitymonitor.stop("HRM");
+   }
 }
 
-tizen.humanactivitymonitor.start(&quot;HRM&quot;, onchangedCB);
+tizen.humanactivitymonitor.start("HRM", onchangedCB);
 </pre>
 
 <p>You can also detect the wrist up gesture using the <code>start()</code> method:</p>
@@ -107,10 +107,10 @@ tizen.humanactivitymonitor.start(&quot;HRM&quot;, onchangedCB);
 <pre class="prettyprint">
 function onchangedCB()
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;You are looking at your smartwatch&quot;);
+   console.log("You are looking at your smartwatch");
 }
 
-tizen.humanactivitymonitor.start(&quot;WRIST_UP&quot;, onchangedCB)
+tizen.humanactivitymonitor.start("WRIST_UP", onchangedCB)
 </pre>
 </li>
 
@@ -118,21 +118,21 @@ tizen.humanactivitymonitor.start(&quot;WRIST_UP&quot;, onchangedCB)
 <pre class="prettyprint">
 function onsuccessCB(hrmInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Heart rate: &quot; + hrmInfo.heartRate);
+   console.log("Heart rate: " + hrmInfo.heartRate);
 }
 
 function onerrorCB(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.message);
+   console.log("Error occurred: " + error.message);
 }
 
-tizen.humanactivitymonitor.getHumanActivityData(&quot;HRM&quot;, onsuccessCB, onerrorCB);
+tizen.humanactivitymonitor.getHumanActivityData("HRM", onsuccessCB, onerrorCB);
 </pre>
 </li>
 
 <li>To disable HAM when it is no longer required, use the <code>stop()</code> method of the <code>HumanActivityMonitorManager</code> interface:
 <pre class="prettyprint">
-tizen.humanactivitymonitor.stop(&quot;HRM&quot;);
+tizen.humanactivitymonitor.stop("HRM");
 </pre>
 </li>
 </ol>
@@ -144,43 +144,43 @@ tizen.humanactivitymonitor.stop(&quot;HRM&quot;);
 <ol>
 <li>To check whether a sensor is supported, use the <code>getCapability()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications):
 <pre class="prettyprint">
-if (tizen.systeminfo.getCapability(&quot;http://tizen.org/feature/sensor.barometer&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;=== false)
+if (tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.barometer")
+    === false)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;PRESSURE is not supported on this device.&quot;);
+   console.log("PRESSURE is not supported on this device.");
 
-&nbsp;&nbsp;&nbsp;return;
+   return;
 }
 </pre>
 </li>
 
 <li>To enable data recording, use the <code>startRecorder()</code> method of the <code>HumanActivityMonitorManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">wearable</a> applications). Optionally, you can also define an interval and period for the data recording.
 <pre class="prettyprint">
-var type = &#39;PRESSURE&#39;;
+var type = 'PRESSURE';
 
 var options =
 {
-&nbsp;&nbsp;&nbsp;retentionPeriod: 1 /* 1 hour */
+   retentionPeriod: 1 /* 1 hour */
 }
 
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.humanactivitymonitor.startRecorder(type, options);
+   tizen.humanactivitymonitor.startRecorder(type, options);
 }
 catch (err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name + &#39;: &#39; + err.message);
+   console.log(err.name + ': ' + err.message);
 }
 </pre>
 <p>To stop recording sensor data, use the <code>stopRecorder()</code> method of the <code>HumanActivityMonitorManager</code> interface:</p>
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.humanactivitymonitor.stopRecorder(&#39;PRESSURE&#39;);
+   tizen.humanactivitymonitor.stopRecorder('PRESSURE');
 }
 catch (err)
 {
-&nbsp;&nbsp;&nbsp;console.log(err.name + &#39;: &#39; + err.message);
+   console.log(err.name + ': ' + err.message);
 }
 </pre>
 </li>
@@ -188,8 +188,8 @@ catch (err)
 <pre class="prettyprint">
 /* To retrieve data from July 1, 2016 to July 31, 2016 */
 var query = {};
-query[&#39;startTime&#39;] = (new Date(2016, 7, 1)).getTime() / 1000;
-query[&#39;endTime&#39;] = (new Date(2016, 7, 31)).getTime() / 1000;
+query['startTime'] = (new Date(2016, 7, 1)).getTime() / 1000;
+query['endTime'] = (new Date(2016, 7, 31)).getTime() / 1000;
 </pre>
   </li>
   <li>To get the data sliced by an interval, you can use a combination of the <code>anchorTime</code> and <code>interval</code> options in the <code>HumanActivityRecorderQuery</code> interface.
@@ -197,8 +197,8 @@ query[&#39;endTime&#39;] = (new Date(2016, 7, 31)).getTime() / 1000;
 <pre class="prettyprint">
 /* To retrieve data everyday at midnight */
 /* Time is 0:00 internally */
-query[&#39;anchorTime&#39;] = (new Date(2016, 7, 1, 0, 0)).getTime() / 1000;
-query[&#39;interval&#39;] = 1440; /* Day */
+query['anchorTime'] = (new Date(2016, 7, 1, 0, 0)).getTime() / 1000;
+query['interval'] = 1440; /* Day */
 </pre>
   </li>
   <li>To read the human activity recorder data from the database, use the <code>readRecorderData()</code> method of the <code>HumanActivityMonitorManager</code> interface with the query.
@@ -207,26 +207,26 @@ query[&#39;interval&#39;] = 1440; /* Day */
 <pre class="prettyprint">
 function onerror(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(error.name + &#39;: &#39; + error.message);
+   console.log(error.name + ': ' + error.message);
 }
 
 function onread(data)
 {
-&nbsp;&nbsp;&nbsp;for (var idx = 0; idx &lt; data.length; ++idx)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;average pressure: &#39; + data[idx].average);
-&nbsp;&nbsp;&nbsp;}
+   for (var idx = 0; idx &lt; data.length; ++idx)
+   {
+      console.log('average pressure: ' + data[idx].average);
+   }
 }
 
-var type = &#39;PRESSURE&#39;;
+var type = 'PRESSURE';
 
 try
 {
-&nbsp;&nbsp;&nbsp;tizen.humanactivitymonitor.readRecorderData(type, query, onread, onerror);
+   tizen.humanactivitymonitor.readRecorderData(type, query, onread, onerror);
 }
 catch (error)
 {
-&nbsp;&nbsp;&nbsp;console.log(error.name + &#39;: &#39; + error.message);
+   console.log(error.name + ': ' + error.message);
 }
 </pre>
 </li>
@@ -243,20 +243,20 @@ var mySampleInterval = 10000;
 
 function onchangedCB(gpsInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;this callback is called every &quot; + myCallbackInterval + &quot; milliseconds&quot;);
-&nbsp;&nbsp;&nbsp;console.log(&quot;the gpsInfo includes the information of the GPS that is collected every &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ mySampleInterval + &quot; milliseconds&quot;);
+   console.log("this callback is called every " + myCallbackInterval + " milliseconds");
+   console.log("the gpsInfo includes the information of the GPS that is collected every "
+               + mySampleInterval + " milliseconds");
 }
 
 function onerrorCB(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred. Name:&quot; + error.name + &quot;, message: &quot; + error.message);
+   console.log("Error occurred. Name:" + error.name + ", message: " + error.message);
 }
 
-var option = {&quot;callbackInterval&quot;: myCallbackInterval,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;sampleInterval&quot;: mySampleInterval};
+var option = {"callbackInterval": myCallbackInterval,
+              "sampleInterval": mySampleInterval};
 
-tizen.humanactivitymonitor.start(&quot;GPS&quot;, onchangedCB, onerrorCB, option);
+tizen.humanactivitymonitor.start("GPS", onchangedCB, onerrorCB, option);
 </pre>
 </li>
 
@@ -264,23 +264,23 @@ tizen.humanactivitymonitor.start(&quot;GPS&quot;, onchangedCB, onerrorCB, option
 <pre class="prettyprint">
 function onsuccessCB(hrmInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Heart rate: &quot; + hrmInfo.heartRate);
+   console.log("Heart rate: " + hrmInfo.heartRate);
 }
 function onerrorCB(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Error occurred: &quot; + error.message);
+   console.log("Error occurred: " + error.message);
 }
-tizen.humanactivitymonitor.getHumanActivityData(&quot;HRM&quot;, onsuccessCB, onerrorCB);
+tizen.humanactivitymonitor.getHumanActivityData("HRM", onsuccessCB, onerrorCB);
 </pre>
 </li>
 
 <li>To disable HAM when it is no longer required, use the <code>stop()</code> method of the <code>HumanActivityMonitorManager</code> interface:
 <pre class="prettyprint">
-tizen.humanactivitymonitor.stop(&quot;HRM&quot;);
+tizen.humanactivitymonitor.stop("HRM");
 </pre>
 </li>
 </ol>
-          
+
                 <h2 id="receive" name="receive">Receiving Notifications on Pedometer Data Changes</h2>
 
 <p>Learning how to register a listener for accumulative allows you to monitor the step count maintained by the system without enabling the Pedometer sensor and the <code>PEDOMETER</code> monitor is a basic Human Activity Monitor (HAM) management skill:</p>
@@ -289,11 +289,11 @@ tizen.humanactivitymonitor.stop(&quot;HRM&quot;);
 <pre class="prettyprint">
 function onchangedCB(pedometerInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Step status: &quot; + pedometerInfo.stepStatus);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Speed: &quot; + pedometerInfo.speed);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Walking frequency: &quot; + pedometerInfo.walkingFrequency);
-&nbsp;&nbsp;&nbsp;/* Deregisters a previously registered listener */
-&nbsp;&nbsp;&nbsp;tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
+   console.log("Step status: " + pedometerInfo.stepStatus);
+   console.log("Speed: " + pedometerInfo.speed);
+   console.log("Walking frequency: " + pedometerInfo.walkingFrequency);
+   /* Deregisters a previously registered listener */
+   tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
 }
 
 tizen.humanactivitymonitor.setAccumulativePedometerListener(onchangedCB);
@@ -317,25 +317,25 @@ tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
 <pre class="prettyprint">
 function errorCallback(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(error.name +&quot;: &quot; + error.message);
+   console.log(error.name +": " + error.message);
 }
 
 function listener(info)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;type: &quot; + info.type);
-&nbsp;&nbsp;&nbsp;console.log(&quot;timestamp: &quot; + info.timestamp);
-&nbsp;&nbsp;&nbsp;console.log(&quot;accuracy: &quot; + info.accuracy);
+   console.log("type: " + info.type);
+   console.log("timestamp: " + info.timestamp);
+   console.log("accuracy: " + info.accuracy);
 }
 
 try
 {
-&nbsp;&nbsp;&nbsp;var listenerId =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.humanactivitymonitor.addActivityRecognitionListener(&quot;WALKING&quot;, listener,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorCallback);
+   var listenerId =
+      tizen.humanactivitymonitor.addActivityRecognitionListener("WALKING", listener,
+                                                                errorCallback);
 }
 catch (error)
 {
-&nbsp;&nbsp;&nbsp;console.log(error.name +&quot;: &quot; + error.message);
+   console.log(error.name +": " + error.message);
 }
 </pre></li>
 
@@ -346,51 +346,51 @@ var listenerId;
 
 function errorCallback(error)
 {
-&nbsp;&nbsp;&nbsp;console.log(error.name + &quot;: &quot; + error.message);
+   console.log(error.name + ": " + error.message);
 }
 
 function listener(info)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;type: &quot; + info.type);
-&nbsp;&nbsp;&nbsp;console.log(&quot;timestamp: &quot; + info.timestamp);
-&nbsp;&nbsp;&nbsp;console.log(&quot;accuracy: &quot; + info.accuracy);
+   console.log("type: " + info.type);
+   console.log("timestamp: " + info.timestamp);
+   console.log("accuracy: " + info.accuracy);
 
-&nbsp;&nbsp;&nbsp;tizen.humanactivitymonitor.removeActivityRecognitionListener(listenerId,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorCallback);
+   tizen.humanactivitymonitor.removeActivityRecognitionListener(listenerId,
+                                                                errorCallback);
 }
 
 try
 {
-&nbsp;&nbsp;&nbsp;listenerId =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.humanactivitymonitor.addActivityRecognitionListener(&quot;WALKING&quot;, listener,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorCallback);
+   listenerId =
+      tizen.humanactivitymonitor.addActivityRecognitionListener("WALKING", listener,
+                                                                errorCallback);
 }
 catch (error)
 {
-&nbsp;&nbsp;&nbsp;console.log(error.name +&quot;: &quot; + error.message);
+   console.log(error.name +": " + error.message);
 }
 </pre>
 </li>
 </ol>
 
 <h2 id="sleep_monitor" name="sleep_monitor">Monitoring Sleep</h2>
- 
+
 <p>Learning how to detect whether the user is asleep is a basic Human Activity Monitor (HAM) management skill:</p>
 <ol>
 <li>To enable the monitor and start collecting data, use the <code>start()</code> method of the <code>HumanActivityMonitorManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">wearable</a> applications):
 <pre class="prettyprint">
 function onchangedCB(sleepInfo)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;Sleep status: &quot; + sleepInfo.status);
-&nbsp;&nbsp;&nbsp;console.log(&quot;Timestamp: &quot; + sleepInfo.timestamp + &quot; milliseconds&quot;);
+   console.log("Sleep status: " + sleepInfo.status);
+   console.log("Timestamp: " + sleepInfo.timestamp + " milliseconds");
 }
 
-tizen.humanactivitymonitor.start(&quot;SLEEP_MONITOR&quot;, onchangedCB);
+tizen.humanactivitymonitor.start("SLEEP_MONITOR", onchangedCB);
 </pre>
 </li>
 <li>To disable the monitor when it is no longer required, use the <code>stop()</code> method of the <code>HumanActivityMonitorManager</code> interface:
 <pre class="prettyprint">
-tizen.humanactivitymonitor.stop(&quot;SLEEP_MONITOR&quot;);
+tizen.humanactivitymonitor.stop("SLEEP_MONITOR");
 </pre>
 </li>
 </ol>
@@ -405,7 +405,7 @@ tizen.humanactivitymonitor.stop(&quot;SLEEP_MONITOR&quot;);
     <tr>
      <th>Monitor</th>
      <th>Capability</th>
-     <th>Notes</th>     
+     <th>Notes</th>
     </tr>
     <tr>
     <td>Pedometer and accumulative pedometer</td>
@@ -433,7 +433,7 @@ tizen.humanactivitymonitor.stop(&quot;SLEEP_MONITOR&quot;);
         <td>Sleep monitor</td>
      <td><code>http://tizen.org/feature/sensor.sleep_monitor</code></td>
         <td>When the sleep sensor is started, a change callback is invoked when data changes. Use the <code>getHumanActivityData()</code> method to get the current data.</td>
-    </tr>      
+    </tr>
     <tr>
         <td>Activity recognition</td>
      <td><code>http://tizen.org/feature/sensor.activity_recognition</code></td>
@@ -444,10 +444,10 @@ tizen.humanactivitymonitor.stop(&quot;SLEEP_MONITOR&quot;);
   <li><code>RUNNING</code></li>
   <li><code>IN_VEHICLE</code></li>
 </ul></td>
-    </tr>      
+    </tr>
    </tbody>
   </table>
-  
+
 <h2 id="recorder" name="recorder">Supported Recorders in Wearable Applications</h2>
 
 <p>The following table introduces the available recorder types and lists the capabilities you can use to <a href="#support">determine whether a specific recorder is supported</a> on a device.</p>
@@ -466,7 +466,7 @@ tizen.humanactivitymonitor.stop(&quot;SLEEP_MONITOR&quot;);
         <td>Use the <code>startRecorder()</code> and <code>stopRecorder()</code> methods to record the pressure sensor data for the specific period of time. Use the <code>readRecorderData()</code> method to read the recorded pressure sensor data.</td>
       </tr>
     </tbody>
-  </table>  
+  </table>
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 
diff --git a/org.tizen.guides/html/web/sensors/sensors_cover_w.htm b/org.tizen.guides/html/web/sensors/sensors_cover_w.htm
index dc3a89e..f42328e 100644 (file)
--- a/org.tizen.guides/html/web/sensors/sensors_cover_w.htm
+++ b/org.tizen.guides/html/web/sensors/sensors_cover_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Sensors</title>  
+       <title>Sensors</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Sensors</h1>
@@ -44,7 +44,7 @@
 
 <p>You can read and manage data from various sensors on the device, and also receive notifications when the sensor data changes. You can access information from various environmental sensors, such as the light and magnetic sensors, and from user-related sensors, such as the heart rate monitor.</p></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/sensors/task_sensorball_w.htm b/org.tizen.guides/html/web/sensors/task_sensorball_w.htm
index 8cce58e..cfd01e1 100644 (file)
--- a/org.tizen.guides/html/web/sensors/task_sensorball_w.htm
+++ b/org.tizen.guides/html/web/sensors/task_sensorball_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w_optional.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -38,63 +38,63 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Sensor/Sensor_Ball" target="_blank">Sensor Ball (Mobile) Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Task: Sensor Ball</h1> 
-  <p>This task, based on the SensorBall sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor</a> API to read and process gyro sensor data. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Sensor/Sensor_Ball" target="blank">Sensor Ball</a>.</p> 
-  <p>This task consists of the following parts:</p> 
-  <ul> 
+  <h1>Task: Sensor Ball</h1>
+  <p>This task, based on the SensorBall sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor</a> API to read and process gyro sensor data. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Sensor/Sensor_Ball" target="blank">Sensor Ball</a>.</p>
+  <p>This task consists of the following parts:</p>
+  <ul>
    <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
    <li><a href="#configure">Initializing the Application</a> defines how to initialize the application.</li>
    <li><a href="#data">Managing the Gyro Sensor Data</a> defines how to handle the sensor data.</li>
-   </ul> 
-
-<p>This sample is a fully functional application which uses the gyro sensor to create a game where the game elements move on the screen based on the sensor data.</p>   
- 
- <h2 id="layout" name="layout">Defining the Application Layout</h2> 
-  <p>The SensorBall sample application layout contains only 1 screen: the main screen that displays the game.</p> 
-  
-   <p>The following figure shows the main screen of the application.</p> 
-  <p align="center"><strong>Figure: SensorBall screen</strong></p> 
-  <p align="center"><img alt="SensorBall screen" src="../../images/sensorball.png" /></p> 
-  
+   </ul>
+
+<p>This sample is a fully functional application which uses the gyro sensor to create a game where the game elements move on the screen based on the sensor data.</p>
+
+ <h2 id="layout" name="layout">Defining the Application Layout</h2>
+  <p>The SensorBall sample application layout contains only 1 screen: the main screen that displays the game.</p>
+
+   <p>The following figure shows the main screen of the application.</p>
+  <p align="center"><strong>Figure: SensorBall screen</strong></p>
+  <p align="center"><img alt="SensorBall screen" src="../../images/sensorball.png" /></p>
+
 <h3 id="main" name="main">Defining the Main Screen</h3>
-  <ol> 
+  <ol>
    <li><strong>index.html Source File</strong>
-   <ol type="a"><li> <p>The main screen displays the game screen. The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>   
+   <ol type="a"><li> <p>The main screen displays the game screen. The header section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;page&quot; id=&quot;mainPage&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Header section--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Sensor ball&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div data-role="page" id="mainPage"&gt;
+      &lt;!--Header section--&gt;
+      &lt;div data-role="header" data-position="fixed"&gt;
+         &lt;h1&gt;Sensor ball&lt;/h1&gt;
+      &lt;/div&gt;
 </pre></li>
 <li> <p>The actual content section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a background image (defined in the <code>style.css</code> file based on the <code>background</code> class), and the image of the game ball.
-</p>   
+</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content section--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot; class=&quot;background background1&quot; data-scroll=&quot;none&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img id=&quot;image1&quot; class=&quot;ball&quot; src=&quot;./images/ball1.png&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+      &lt;!--Content section--&gt;
+      &lt;div data-role="content" class="background background1" data-scroll="none"&gt;
+         &lt;div id="main"&gt;
+            &lt;img id="image1" class="ball" src="./images/ball1.png"/&gt;
+         &lt;/div&gt;
+      &lt;/div&gt;
 </pre></li>
-<li> <p>The footer section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with buttons for switching between the animation modes of the game.</p>   
+<li> <p>The footer section of the screen is defined within a <code>&lt;div&gt;</code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with buttons for switching between the animation modes of the game.</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Footer section--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; data-style=&quot;toolbar&quot; id=&quot;footerControls&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;btnBall&quot; class=&quot;ui-btn-active&quot;&gt;BALL&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;btnSky&quot;&gt;SKY&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;btnSpace&quot;&gt;SPACE&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+      &lt;!--Footer section--&gt;
+      &lt;div data-role="footer" data-position="fixed"&gt;
+         &lt;div data-role="tabbar" data-style="toolbar" id="footerControls"&gt;
+            &lt;ul&gt;
+               &lt;li&gt;&lt;a href="#" id="btnBall" class="ui-btn-active"&gt;BALL&lt;/a&gt;&lt;/li&gt;
+               &lt;li&gt;&lt;a href="#" id="btnSky"&gt;SKY&lt;/a&gt;&lt;/li&gt;
+               &lt;li&gt;&lt;a href="#" id="btnSpace"&gt;SPACE&lt;/a&gt;&lt;/li&gt;
+            &lt;/ul&gt;
+         &lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre></li>
 </ol>
@@ -105,152 +105,152 @@ style.css</code> file defines the background image for each animation mode and t
 <pre class="prettyprint">
 .background1
 {
-&nbsp;&nbsp;&nbsp;background-image: url(&#39;../images/background1.jpg&#39;);
+   background-image: url('../images/background1.jpg');
 }
 
 .background2
 {
-&nbsp;&nbsp;&nbsp;background-image: url(&#39;../images/background2.jpg&#39;);
+   background-image: url('../images/background2.jpg');
 }
 
 .background3
 {
-&nbsp;&nbsp;&nbsp;background-image: url(&#39;../images/background3.jpg&#39;);
-&nbsp;&nbsp;&nbsp;background-color: #000;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
+   background-image: url('../images/background3.jpg');
+   background-color: #000;
+   overflow: hidden;
 }
 
 .ball
 {
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;top: 0px;
-&nbsp;&nbsp;&nbsp;width: 86px;
-&nbsp;&nbsp;&nbsp;height: 86px;
+   position: absolute;
+   left: 0px;
+   top: 0px;
+   width: 86px;
+   height: 86px;
 }
 </pre>
 </li>
  </ol>
 
  <h2 id="configure" name="configure">Initializing the Application</h2>
- <ol> 
+ <ol>
   <li><strong>config.xml Source File</strong>
   <p>The required privileges are declared in the <code>config.xml</code> file. </p>
 <pre class="prettyprint">
 &lt;!--Configuration file content--&gt;
 &lt;widget ...&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
+   &lt;!--Other configuration details--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
 &lt;/widget&gt;
 </pre>
-  </li> 
+  </li>
  </ol>
 
- <h2 id="data" name="data">Managing the Gyro Sensor Data</h2> 
+ <h2 id="data" name="data">Managing the Gyro Sensor Data</h2>
  <p>This section builds upon the elements described in <a href="../w3c/device/device_orientation_w.htm#accelerate">Detecting Device Acceleration</a>.</p>
-  
+
 
  <h3 id="appobjectcreate" name="appobjectcreate">Managing the Application and Window Objects</h3>
  <p>The object management functionality is implemented in the <code>main.js</code> file.</p>
-  <ol> 
+  <ol>
   <li><strong>Creating the Application Object</strong>
 <p>The application object is initialized when the document <code>ready()</code> event is fired. All the application events are bound during the initialization.</p>
 
 <pre class="prettyprint">
 $(document).ready(function()
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
-&nbsp;&nbsp;&nbsp;var img,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentHeight = screen.availHeight - $(&#39;div[data-role=&quot;header&quot;]&#39;).outerHeight()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- $(&#39;div[data-role=&quot;footer&quot;]&#39;).outerHeight();
-
-&nbsp;&nbsp;&nbsp;$(&#39;div[data-role=&quot;content&quot;]&#39;).css(&#39;height&#39;, contentHeight - 33);
-&nbsp;&nbsp;&nbsp;app.gameWidth = screen.availWidth;
-&nbsp;&nbsp;&nbsp;app.ballWidth = parseInt($(&#39;.ball&#39;).css(&#39;width&#39;), 10);
-&nbsp;&nbsp;&nbsp;app.ballHeight = parseInt($(&#39;.ball&#39;).css(&#39;height&#39;), 10);
-
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;devicemotion&#39;, app.saveSensorData.bind(app), false);
-
-&nbsp;&nbsp;&nbsp;app.fun();
-
-&nbsp;&nbsp;&nbsp;/* Hardware Back key event */
-&nbsp;&nbsp;&nbsp;$(window).on(&#39;tizenhwkey&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.originalEvent.keyName === &quot;back&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;/* Button events */
-&nbsp;&nbsp;&nbsp;$(&#39;#btnBall&#39;).bind(&#39;click&#39;, function(event)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#sun&#39;).remove();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startBall();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;$(&#39;#btnSky&#39;).bind(&#39;click&#39;, function(event)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#sun&#39;).remove();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startSky();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;$(&#39;#btnSpace&#39;).bind(&#39;click&#39;, function(event)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#sun&#39;).remove();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startSpace();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;/* Screen show event */
-&nbsp;&nbsp;&nbsp;$(&#39;#mainPage&#39;).on(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.startBall();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;webkitvisibilitychange&#39;, function(event)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.webkitVisibilityState === &#39;visible&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.fun();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;/* Preload backgrounds */
-&nbsp;&nbsp;&nbsp;img = $(&#39;&lt;img&gt;&#39;).hide();
-&nbsp;&nbsp;&nbsp;img.attr(&#39;src&#39;, &#39;images/background1.png&#39;);
+   "use strict";
+   var img,
+       contentHeight = screen.availHeight - $('div[data-role="header"]').outerHeight()
+                       - $('div[data-role="footer"]').outerHeight();
+
+   $('div[data-role="content"]').css('height', contentHeight - 33);
+   app.gameWidth = screen.availWidth;
+   app.ballWidth = parseInt($('.ball').css('width'), 10);
+   app.ballHeight = parseInt($('.ball').css('height'), 10);
+
+   window.addEventListener('devicemotion', app.saveSensorData.bind(app), false);
+
+   app.fun();
+
+   /* Hardware Back key event */
+   $(window).on('tizenhwkey', function(e)
+      {
+         if (e.originalEvent.keyName === "back")
+         {
+            tizen.application.getCurrentApplication().exit();
+         }
+      });
+
+   /* Button events */
+   $('#btnBall').bind('click', function(event)
+      {
+         $('#sun').remove();
+         app.startBall();
+      });
+
+   $('#btnSky').bind('click', function(event)
+      {
+         $('#sun').remove();
+         app.startSky();
+      });
+
+   $('#btnSpace').bind('click', function(event)
+      {
+         $('#sun').remove();
+         app.startSpace();
+      });
+
+   /* Screen show event */
+   $('#mainPage').on('pageshow', function()
+      {
+         app.startBall();
+      });
+
+   document.addEventListener('webkitvisibilitychange', function(event)
+      {
+         if (document.webkitVisibilityState === 'visible')
+         {
+            app.fun();
+         }
+      });
+
+   /* Preload backgrounds */
+   img = $('&lt;img&gt;').hide();
+   img.attr('src', 'images/background1.png');
 });
 </pre></li>
 <li><strong>Resizing the Window</strong>
 <p>The application handles the window resize events and sets the display accordingly.</p>
 <pre class="prettyprint">
 $(window).resize(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.gameWidth = screen.availWidth;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.gameHeight = $(&#39;.background&#39;).outerHeight();
-&nbsp;&nbsp;&nbsp;});
+   {
+      'use strict';
+      app.gameWidth = screen.availWidth;
+      app.gameHeight = $('.background').outerHeight();
+   });
 </pre></li>
 </ol>
-        
-  
+
+
 <h3 id="access" name="access">Accessing Gyro Sensor Data</h3>
 
-  <ol> 
-   <li><strong>main.js Source File</strong> 
+  <ol>
+   <li><strong>main.js Source File</strong>
  <ol type="a">
  <li>The <code>
 devicemotion</code> event listener calls the <code>
 saveSensorData()</code> method each time the event takes place. The event allows the application to access information about sensor data changes.
 <pre class="prettyprint">
-window.addEventListener(&#39;devicemotion&#39;, app.saveSensorData.bind(app), false);
+window.addEventListener('devicemotion', app.saveSensorData.bind(app), false);
 </pre></li>
 <li>The <code>
 saveSensorData()</code> methods stores the event (containing the gyro sensor data) for later processing.
 <pre class="prettyprint">
 saveSensorData: function saveSensorData(event)
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
-&nbsp;&nbsp;&nbsp;this.event = event;
+   "use strict";
+   this.event = event;
 }
 </pre></li>
 <li>The stored event is used by the <code>
diff --git a/org.tizen.guides/html/web/text_input/input_device_w.htm b/org.tizen.guides/html/web/text_input/input_device_w.htm
index 83a446f..55233ed 100644 (file)
--- a/org.tizen.guides/html/web/text_input/input_device_w.htm
+++ b/org.tizen.guides/html/web/text_input/input_device_w.htm
@@ -42,7 +42,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Input Device</h1>
   <p>Tizen enables you to manage input device keys.</p>
-  
+
  <p>This feature is supported in mobile and wearable applications only.</p>
 
   <p>The main features of the Input Device API include:</p>
@@ -66,11 +66,11 @@
 var keyCodes = {};
 var supportedKeys = tizen.inputdevice.getSupportedKeys();
 
-console.log(&quot;Supported keys list&quot;);
+console.log("Supported keys list");
 for (var i = 0; i &lt; supportedKeys.length; ++i)
 {
-&nbsp;&nbsp;&nbsp;keyCodes[supportedKeys[i].name] = supportedKeys[i].code;
-&nbsp;&nbsp;&nbsp;console.log(i + &quot;: &quot; + supportedKeys[i].name + &quot; - &quot; + supportedKeys[i].code);
+   keyCodes[supportedKeys[i].name] = supportedKeys[i].code;
+   console.log(i + ": " + supportedKeys[i].name + " - " + supportedKeys[i].code);
 }
 </pre></li>
 
@@ -86,7 +86,7 @@ for (var i = 0; i &lt; supportedKeys.length; ++i)
 <p>If you do not want to gather information about all supported keys, create a separate list of keys for information gathering. If you want information about all supported keys, use the list retrieved in the previous use case.</p>
 
 <pre class="prettyprint">
-var keys = [&quot;VolumeUp&quot;, &quot;VolumeDown&quot;];
+var keys = ["VolumeUp", "VolumeDown"];
 var keyCodes = {};
 </pre>
 </li>
@@ -97,24 +97,24 @@ var keyCodes = {};
 <pre class="prettyprint">
 for (var i = 0; i &lt; keys.length; i++)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var key = tizen.inputdevice.getKey(keys[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (key == null)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;key: &quot; + keys[i] + &quot; is not supported&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyCodes[key.name] = key.code;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;key: &quot; + key.name + &quot; has code: &quot; + key.code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;catch (e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;error: &quot; + e.name + &quot;:&quot; + e.message
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;, when getting key with name &quot; + keys[i]);
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      var key = tizen.inputdevice.getKey(keys[i]);
+      if (key == null)
+      {
+         console.log("key: " + keys[i] + " is not supported");
+      }
+      else
+      {
+         keyCodes[key.name] = key.code;
+         console.log("key: " + key.name + " has code: " + key.code);
+      }
+   }
+   catch (e)
+   {
+      console.log("error: " + e.name + ":" + e.message
+                  + ", when getting key with name " + keys[i]);
+   }
 }
 </pre>
 </li>
@@ -144,32 +144,32 @@ var supportedKeys = tizen.inputdevice.getSupportedKeys();
 
 for (var i = 0; i &lt; supportedKeys.length; ++i)
 {
-&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.inputdevice.registerKey(supportedKeys[i].name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;codeNamesMap[supportedKeys[i].code] = supportedKeys[i].name;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;key: &quot; + supportedKeys[i].name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; was registered for event handling&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;catch (error)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;failed to register &quot; + supportedKeys[i].name + &quot;: &quot; + error);
-&nbsp;&nbsp;&nbsp;}
+   try
+   {
+      tizen.inputdevice.registerKey(supportedKeys[i].name);
+      codeNamesMap[supportedKeys[i].code] = supportedKeys[i].name;
+      console.log("key: " + supportedKeys[i].name
+                  + " was registered for event handling");
+   }
+   catch (error)
+   {
+      console.log("failed to register " + supportedKeys[i].name + ": " + error);
+   }
 }
 </pre>
 
 <p>If you know the exact list of keys you want to register, the registration can also be done with the asynchronous <code>registerKeyBatch()</code> method:</p>
 <pre class="prettyprint">
-var keys = [&quot;VolumeUp&quot;, &quot;VolumeDown&quot;];
+var keys = ["VolumeUp", "VolumeDown"];
 
 function errorCB(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;The following error occurred: &#39; + err.name);
+   console.log('The following error occurred: ' + err.name);
 }
 
 function successCB()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;All keys registered successfully&#39;);
+   console.log('All keys registered successfully');
 }
 
 tizen.inputdevice.registerKeyBatch(keys, successCB, errorCB);
@@ -180,31 +180,31 @@ tizen.inputdevice.registerKeyBatch(keys, successCB, errorCB);
 <li>
 <p>To handle events for registered keys:</p>
 <pre class="prettyprint">
-window.addEventListener(&quot;keydown&quot;, function(keyEvent)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (codeNamesMap.hasOwnProperty(keyEvent.keyCode))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Registered key was pressed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Define some custom action */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Some other key was pressed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
-
-window.addEventListener(&quot;keyup&quot;, function(keyEvent)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (codeNamesMap.hasOwnProperty(keyEvent.keyCode))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Registered key was released&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Define some custom action */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Some other key was released&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+window.addEventListener("keydown", function(keyEvent)
+   {
+      if (codeNamesMap.hasOwnProperty(keyEvent.keyCode))
+      {
+         console.log("Registered key was pressed");
+         /* Define some custom action */
+      }
+      else
+      {
+         console.log("Some other key was pressed");
+      }
+   });
+
+window.addEventListener("keyup", function(keyEvent)
+   {
+      if (codeNamesMap.hasOwnProperty(keyEvent.keyCode))
+      {
+         console.log("Registered key was released");
+         /* Define some custom action */
+      }
+      else
+      {
+         console.log("Some other key was released");
+      }
+   });
 </pre>
 </li>
 
@@ -213,24 +213,24 @@ window.addEventListener(&quot;keyup&quot;, function(keyEvent)
 <pre class="prettyprint">
 for (var i = 0; i &lt; supportedKeys.length; ++i)
 {
-&nbsp;&nbsp;&nbsp;tizen.inputdevice.unregisterKey(supportedKeys[i].name);
-&nbsp;&nbsp;&nbsp;console.log(&quot;key: &quot; + supportedKeys[i].name
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; was unregistered for event handling&quot;);
+   tizen.inputdevice.unregisterKey(supportedKeys[i].name);
+   console.log("key: " + supportedKeys[i].name
+               + " was unregistered for event handling");
 }
 </pre>
 
 <p>The deregistration can also be done with the <code>unregisterKeyBatch()</code> method:</p>
 <pre class="prettyprint">
-var keys = [&quot;VolumeUp&quot;, &quot;VolumeDown&quot;];
+var keys = ["VolumeUp", "VolumeDown"];
 
 function errorCB(err)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;The following error occurred: &#39; + err.name);
+   console.log('The following error occurred: ' + err.name);
 }
 
 function successCB()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;Unregistered successfully&#39;);
+   console.log('Unregistered successfully');
 }
 
 tizen.inputdevice.unregisterKeyBatch(keys, successCB, errorCB);
diff --git a/org.tizen.guides/html/web/text_input/input_method_w.htm b/org.tizen.guides/html/web/text_input/input_method_w.htm
index dcd1d34..118d7b3 100644 (file)
--- a/org.tizen.guides/html/web/text_input/input_method_w.htm
+++ b/org.tizen.guides/html/web/text_input/input_method_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>IME Application</title> 
- </head> 
+  <title>IME Application</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable Web" src="../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -40,337 +40,337 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Input+Method+Editor/%28Circle%29_IME_Double_Keys" target="_blank">(Circle) IME Double Keys Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>IME Application</h1>
 
-<p>Tizen Web IME (Input Method Editor) applications are written in HTML5 for Tizen, combining HTML, JavaScript, and CSS into a package that can be installed on a Tizen device, such as Samsung Gear, or the Tizen emulator. Both the Tizen device and the emulator must run Tizen version 2.3 or later to run Web IME applications.</p> 
+<p>Tizen Web IME (Input Method Editor) applications are written in HTML5 for Tizen, combining HTML, JavaScript, and CSS into a package that can be installed on a Tizen device, such as Samsung Gear, or the Tizen emulator. Both the Tizen device and the emulator must run Tizen version 2.3 or later to run Web IME applications.</p>
 
 <p>This feature is supported in wearable applications only.</p>
 
 <h2 id="architecture" name="architecture">Architecture</h2>
- 
-  <p>IME applications differ from other applications in that they do not follow the normal application life-cycle management and they need a mechanism to interact with the client application requesting the IME.</p> 
-  <p>Tizen provides a special architecture to guarantee that Web IME applications work just like native IME applications (however, there are some restrictions due to the capability limitations of the Web applications in general). A Web IME application can be run within the core Input Service Engine process, which is also used to run native IME applications.</p> 
-  <p>The following figure shows the overall architecture of the Tizen Web IME support.</p> 
-  <p align="center"><strong>Figure: Tizen Web IME support architecture</strong></p>  
-  <p align="center"><img alt="Tizen Web IME support architecture" src="../../images/web_ime_architecture.png"/></p> 
-  <p>When a Web IME is executed, the Input Service framework launches the Input Service Engine process, just like with native IME applications. The Input Service Engine process loads a special bridge IME module, <code>ise-web-helper-agent</code>, which executes a Web IME within its Web container and communicates with the executed Web IME.</p> 
-  <p>The communication between the Web IME and the <code>ise-web-helper-agent</code> module is accomplished by 2 utility modules, <code>web-helper-agent</code> on the Web helper agent side and <code>web-helper-client</code> on the Web IME side. Therefore, a Web IME application must contain the <code>web-helper-client.js</code>, which is created automatically when you create a Web IME project using the Tizen Studio.</p> 
-  <p>Since the Web IME runs within a Web container and communicates with it, as a Web IME application developer you do not need knowledge of the platform architecture or details of the native API. You can develop Web IME applications as if they were normal Web applications, as long as the <code>web-helper-client.js</code> file is included and properly used.</p> 
- 
+
+  <p>IME applications differ from other applications in that they do not follow the normal application life-cycle management and they need a mechanism to interact with the client application requesting the IME.</p>
+  <p>Tizen provides a special architecture to guarantee that Web IME applications work just like native IME applications (however, there are some restrictions due to the capability limitations of the Web applications in general). A Web IME application can be run within the core Input Service Engine process, which is also used to run native IME applications.</p>
+  <p>The following figure shows the overall architecture of the Tizen Web IME support.</p>
+  <p align="center"><strong>Figure: Tizen Web IME support architecture</strong></p>
+  <p align="center"><img alt="Tizen Web IME support architecture" src="../../images/web_ime_architecture.png"/></p>
+  <p>When a Web IME is executed, the Input Service framework launches the Input Service Engine process, just like with native IME applications. The Input Service Engine process loads a special bridge IME module, <code>ise-web-helper-agent</code>, which executes a Web IME within its Web container and communicates with the executed Web IME.</p>
+  <p>The communication between the Web IME and the <code>ise-web-helper-agent</code> module is accomplished by 2 utility modules, <code>web-helper-agent</code> on the Web helper agent side and <code>web-helper-client</code> on the Web IME side. Therefore, a Web IME application must contain the <code>web-helper-client.js</code>, which is created automatically when you create a Web IME project using the Tizen Studio.</p>
+  <p>Since the Web IME runs within a Web container and communicates with it, as a Web IME application developer you do not need knowledge of the platform architecture or details of the native API. You can develop Web IME applications as if they were normal Web applications, as long as the <code>web-helper-client.js</code> file is included and properly used.</p>
+
 <h2 id="types" name="types">Supported Application Types</h2>
 
-  <p>Tizen Web IME can interact with 2 types of Tizen applications:</p> 
+  <p>Tizen Web IME can interact with 2 types of Tizen applications:</p>
 
-  <ul> 
-   <li>In-house (native) application</li> 
+  <ul>
+   <li>In-house (native) application</li>
    <li>Downloaded (Web) application</li>
   </ul>
-  
+
    <p>The <a href="#architecture">Web container is executed by the core Input Service Engine process</a>, allowing the Web IME to provide text input services to both Web applications and in-house native applications.</p>
- 
+
 <h2 id="apis" name="apis">Supported APIs</h2>
 
   <p>All the APIs you can use for your Web IME are provided by the <code>WebHelperClient</code> object, which is accessible when you include the <code>web-helper-client.js</code> file in your Web IME project:</p>
 <pre class="prettyprint">
-&lt;script type=&quot;text/javascript&quot; src=&quot;js/web-helper-client.js&quot;&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="js/web-helper-client.js"&gt;&lt;/script&gt;
 </pre>
   <p>The following table lists the <code>WebHelperClient</code> methods that you can invoke in your Web IME.</p>
-  
- 
-<p align="center" class="Table"><strong>Table: WebHelperClient methods</strong></p> 
+
+
+<p align="center" class="Table"><strong>Table: WebHelperClient methods</strong></p>
 <table>
-  <tbody> 
-    <tr> 
-     <th>Method</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>initialize(handler)</code></td> 
+  <tbody>
+    <tr>
+     <th>Method</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>initialize(handler)</code></td>
      <td>Initializes the WebHelperClient object by registering a handler object. Before using the <code>WebHelperClient</code> functionalities, make sure to call this method passing the handler object as its parameter, which implements the event handlers that must be handled by the IME.
         <p><code>handler</code> parameter: Handler object implementing the <code>on*</code> event handlers.</p>
         <p>The following example shows how to initialize the <code>WebHelperClient</code> by passing a customized handler object.</p>
 <pre class="prettyprint">
 var WebHelperClientHandler =
 {
-&nbsp;&nbsp;&nbsp;onInit: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do what you want when your IME gets the INIT message */
-&nbsp;&nbsp;&nbsp;}
+   onInit: function()
+   {
+      /* Do what you want when your IME gets the INIT message */
+   }
 };
 WebHelperClient.initialize(WebHelperClientHandler);
 </pre>
 
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>log(str)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>log(str)</code></td>
      <td>Leaves a dlog message.
         <p><code>str</code> parameter: Log message to display.</p>
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>commitString(str)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>commitString(str)</code></td>
      <td>Commits a UTF-8 string to the client application directly.
         <p><code>str</code> parameter: Byte array of the UTF-8 string to be committed.</p>
-        </td> 
-    </tr> 
-       <tr> 
-     <td><code>updatePreeditString(str)</code></td> 
+        </td>
+    </tr>
+       <tr>
+     <td><code>updatePreeditString(str)</code></td>
      <td>Updates a new UTF-8 string for pre-edit.
        <p><code>str</code> parameter: Byte array of the UTF-8 string to be updated.</p>
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>sendKeyEvent(code)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>sendKeyEvent(code)</code></td>
      <td>Sends a key event to a client application.
         <p><code>code</code> parameter: Key event to be sent.</p>
-        </td> 
-    </tr>      
-    <tr> 
-     <td><code>setKeyboardSizes(portraitWidth, portraitHeight, landscapeWidth, landscapeHeight)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>setKeyboardSizes(portraitWidth, portraitHeight, landscapeWidth, landscapeHeight)</code></td>
      <td>Updates the keyboard window geometry information.
-        <p>You must specify the portrait and landscape sizes of the Web IME using this method, or the Web IME cannot be displayed correctly as the Input Service Engine process cannot resize the IME window to the desired size.</p> 
+        <p>You must specify the portrait and landscape sizes of the Web IME using this method, or the Web IME cannot be displayed correctly as the Input Service Engine process cannot resize the IME window to the desired size.</p>
         <p><code>portraitWidth</code> parameter: Width of the keyboard, when in portrait mode.<br/>
           <code>portraitHeight</code> parameter: Height of the keyboard, when in portrait mode.<br/>
           <code>landscapeWidth</code> parameter: Width of the keyboard, when in landscape mode.<br/>
           <code>landscapeHeight</code> parameter: Height of the keyboard, when in landscape mode.
           </p>
-        </td> 
+        </td>
     </tr>
-       <tr> 
-     <td><code>setSelection(start_index, end_index)</code></td> 
+       <tr>
+     <td><code>setSelection(start_index, end_index)</code></td>
      <td>Selects text.
         <p><code>start_index</code> parameter: Text start position.<br/>
           <code>end_index</code> parameter: Text end position.</p>
-        </td> 
+        </td>
     </tr>
-    <tr> 
-     <td><code>getSelection()</code></td> 
+    <tr>
+     <td><code>getSelection()</code></td>
      <td>Gets the selected text.
-        </td> 
+        </td>
     </tr>
-    <tr> 
-     <td><code>getSurroundingText(maxlen_before, maxlen_after)</code></td> 
+    <tr>
+     <td><code>getSurroundingText(maxlen_before, maxlen_after)</code></td>
      <td>Selects the surrounding text.
         <p><code>maxlen_before</code> parameter: Max length before.<br/>
           <code>maxlen_after</code> parameter: Max length after.</p>
-        </td> 
+        </td>
     </tr>
-    <tr> 
-     <td><code>deleteSurroundingText(offset, len)</code></td> 
+    <tr>
+     <td><code>deleteSurroundingText(offset, len)</code></td>
      <td>Deletes the surrounding text.
         <p><code>offset</code> parameter: Cursor position offset.<br/>
           <code>len</code> parameter: Length of the text deletion.</p>
-        </td> 
+        </td>
     </tr>
    </tbody>
   </table>
-  
+
   <p>The following table lists the <code>WebHelperClient</code> enumerations that you can use when invoking the <code>sendKeyEvent()</code> and <code>forwardKeyEvent()</code> methods of the <code>WebHelperClient</code> object.</p>
-  
-
-<p align="center" class="Table"><strong>Table: WebHelperClient enumerations </strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Enumeration</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>Keycode</code></td> 
-     <td>Enumeration values used when invoking the <code>sendKeyEvent()</code> and <code>forwardKeyEvent()</code> methods. 
+
+
+<p align="center" class="Table"><strong>Table: WebHelperClient enumerations </strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Enumeration</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>Keycode</code></td>
+     <td>Enumeration values used when invoking the <code>sendKeyEvent()</code> and <code>forwardKeyEvent()</code> methods.
          <p>Keycode example:</p>
 <pre class="prettyprint">
 Keycode:
 {
-&nbsp;&nbsp;&nbsp;BACKSPACE:0xff08,
-&nbsp;&nbsp;&nbsp;TAB:0xff09,
-&nbsp;&nbsp;&nbsp;RETURN:0xff0d,
+   BACKSPACE:0xff08,
+   TAB:0xff09,
+   RETURN:0xff0d,
 
-&nbsp;&nbsp;&nbsp;ASCIITILDE:0x07e
+   ASCIITILDE:0x07e
 },
 </pre>
 
-        </td> 
-    </tr> 
+        </td>
+    </tr>
    </tbody>
   </table>
-  
+
   <p>You can display event notifications, such as client application requesting the IME, on the screen. In these cases, implement the event handlers in your handler  object, which you pass as a parameter of the <code>WebHelperClient</code> object <code>initialize()</code> method.</p>
- 
+
  <p>The following table lists the events that you can implement in your handler object.</p>
- 
-<p align="center" class="Table"><strong>Table: Handler events</strong></p> 
-<table> 
-   <tbody> 
-    <tr> 
-     <th>Event</th> 
-     <th>Description</th> 
-    </tr>
-    <tr> 
-     <td><code>onInit()</code></td> 
+
+<p align="center" class="Table"><strong>Table: Handler events</strong></p>
+<table>
+   <tbody>
+    <tr>
+     <th>Event</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>onInit()</code></td>
      <td>Handler for the initialization signal, used when the Web IME framework initialization is finished.
 
-        </td> 
-    </tr> 
+        </td>
+    </tr>
     <tr>
-        <td><code>onExit()</code></td> 
+        <td><code>onExit()</code></td>
      <td>Handler for the exit signal, used when this Web IME is about to be terminated.
-        </td> 
-    </tr> 
+        </td>
+    </tr>
     <tr>
-        <td><code>onFocusIn(inputContext)</code></td> 
+        <td><code>onFocusIn(inputContext)</code></td>
      <td>Handler for the focus in signal, used to do something when the input context is focused in.
         <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
-        </td> 
-    </tr> 
+        </td>
+    </tr>
     <tr>
-        <td><code>onFocusOut(inputContext)</code></td> 
+        <td><code>onFocusOut(inputContext)</code></td>
      <td>Handler for the focus out signal, used to do something when the input context is focused out.
          <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>onShow(inputContext)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>onShow(inputContext)</code></td>
      <td>Handler for the show signal, used to show the keyboard.
           <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>onHide(inputContext)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>onHide(inputContext)</code></td>
      <td>Handler for the hide signal, used to hide the keyboard.
           <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>onSetRotation(degree)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>onSetRotation(degree)</code></td>
      <td>Handler for the rotation signal, used to notify that the keyboard is being rotated.
           <p><code>degree</code> parameter: Angle that this keyboard is being rotated to.</p>
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>onUpdateCursorPosition(inputContext, position)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>onUpdateCursorPosition(inputContext, position)</code></td>
      <td>Handler for the update cursor position signal, used to let the keyboard get the cursor position information.
           <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>onSetLanguage(language)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>onSetLanguage(language)</code></td>
      <td>Handler for the set language signal, used to set the input language.
           <p><code>language</code> parameter: Language to be set.</p>
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>onSetImdata(imdata)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>onSetImdata(imdata)</code></td>
      <td>Handler for the set IM data signal, used to send IM data to the keyboard.
           <p><code>imdata</code> parameter: IM data to be set.</p>
-        </td> 
-    </tr> 
-       <tr> 
-     <td><code>onGetImdata()</code></td> 
+        </td>
+    </tr>
+       <tr>
+     <td><code>onGetImdata()</code></td>
      <td>Handler for the get IM data signal, used to get IM data from the keyboard.
           <p>This method returns the current IM data value.</p>
-        </td> 
-    </tr> 
-    <tr> 
-     <td><code>onSetReturnKeyType(type)</code></td> 
+        </td>
+    </tr>
+    <tr>
+     <td><code>onSetReturnKeyType(type)</code></td>
      <td>Handler for the set return key type signal, used to set the return key type to the keyboard.
-          <p><code>type</code> parameter: Type of the return key to be set; the following values are acceptable:</p>   
+          <p><code>type</code> parameter: Type of the return key to be set; the following values are acceptable:</p>
 <pre class="prettyprint">
-&quot;default&quot;
-&quot;done&quot;
-&quot;go&quot;
-&quot;join&quot;
-&quot;login&quot;
-&quot;next&quot;
-&quot;search&quot;
-&quot;send&quot;
-&quot;signin&quot;
+"default"
+"done"
+"go"
+"join"
+"login"
+"next"
+"search"
+"send"
+"signin"
 </pre>
-        </td> 
-    </tr> 
-       <tr> 
-     <td><code>onGetReturnKeyType()</code></td> 
+        </td>
+    </tr>
+       <tr>
+     <td><code>onGetReturnKeyType()</code></td>
      <td>Handler for the get return key type signal, used to get the return key type from the keyboard.
           <p>This method returns the current return key type value, which is one of the values introduced in the <code>onSetReturnKeyType()</code> event.</p>
-        </td> 
+        </td>
     </tr>
-    <tr> 
-     <td><code>onSetReturnKeyDisable(disabled)</code></td> 
+    <tr>
+     <td><code>onSetReturnKeyDisable(disabled)</code></td>
      <td>Handler for the set return key disable signal, used to set the return key disabled state to the keyboard.
           <p><code>disabled</code> parameter: Value that indicates whether the return key must be disabled.</p>
-        </td> 
-    </tr> 
-       <tr> 
-     <td><code>onGetReturnKeyDisable()</code></td> 
+        </td>
+    </tr>
+       <tr>
+     <td><code>onGetReturnKeyDisable()</code></td>
      <td>Handler for the get return key disable signal, used to get the return key disabled state from the keyboard.
           <p>This method returns the current return key disabled state value.</p>
-        </td> 
+        </td>
     </tr>
-       <tr> 
-     <td><code>onSetLayout(layout)</code></td> 
+       <tr>
+     <td><code>onSetLayout(layout)</code></td>
      <td>Handler for the set virtual keyboard layout signal, used to set the virtual keyboard layout.
-          <p><code>layout</code> parameter: Virtual keyboard layout value to be set; the following values are acceptable:</p>  
+          <p><code>layout</code> parameter: Virtual keyboard layout value to be set; the following values are acceptable:</p>
 <pre class="prettyprint">
-&quot;normal&quot;
-&quot;number&quot;
-&quot;email&quot;
-&quot;url&quot;
-&quot;phonenumber&quot;
-&quot;ip&quot;
-&quot;month&quot;
-&quot;numberonly&quot;
-&quot;password&quot;
-&quot;datetime&quot;
+"normal"
+"number"
+"email"
+"url"
+"phonenumber"
+"ip"
+"month"
+"numberonly"
+"password"
+"datetime"
 </pre>
 
-        </td> 
-    </tr> 
-       <tr> 
-     <td><code>onGetLayout()</code></td> 
+        </td>
+    </tr>
+       <tr>
+     <td><code>onGetLayout()</code></td>
      <td>Handler for the get virtual keyboard layout signal, used to get the virtual keyboard layout.
           <p>This method returns the current virtual keyboard layout value, which is one of the values introduced in <code>onSetLayout()</code> event.</p>
-        </td> 
+        </td>
     </tr>
-       <tr> 
-     <td><code>onResetInputContext(inputContext)</code></td> 
+       <tr>
+     <td><code>onResetInputContext(inputContext)</code></td>
      <td>Handler for the reset input context signal, used to reset the keyboard input context.
           <p><code>inputContext</code> parameter: Handle of the client input context that sent this event.</p>
-        </td> 
-    </tr> 
-       <tr> 
-     <td><code>onProcessKeyEvent(code, mask, layout)</code></td> 
+        </td>
+    </tr>
+       <tr>
+     <td><code>onProcessKeyEvent(code, mask, layout)</code></td>
      <td>Handler for the process key event signal.
-        
+
           <p>
           <code>code</code> parameter: Key code of the current key event.<br/>
           <code>mask</code> parameter: Modifier mask of the current key event.<br/>
           <code>layout</code> parameter: Hardware keyboard layout identifier.
           </p>
           <p>This method returns <code>true</code> if the event is processed; otherwise it is forwarded to the client application.</p>
-        </td> 
+        </td>
     </tr>
-       <tr> 
-     <td><code>onUpdateSurroundingText(cursor, text)</code></td> 
+       <tr>
+     <td><code>onUpdateSurroundingText(cursor, text)</code></td>
      <td>Handler for the surrounding text signal update.
-        
+
           <p>
           <code>cursor</code> parameter: Cursor position.<br/>
           <code>text</code> parameter: Surrounding text near the cursor.</p>
-        </td> 
+        </td>
     </tr>
-       <tr> 
-     <td><code>onUpdateSelection(text)</code></td> 
+       <tr>
+     <td><code>onUpdateSelection(text)</code></td>
      <td>Handler for the selection signal update.
-        
+
           <p>
           <code>text</code> parameter: Currently selected text.</p>
-        </td> 
+        </td>
     </tr>
-       
+
    </tbody>
   </table>
 
@@ -380,16 +380,16 @@ Keycode:
 </div>
 
 <h2 id="config" name="config">Web IME Configuration</h2>
- 
-  <p>The Web IME configuration follows the Tizen packaging policy with certain extensions. Tizen applications are packaged according to the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget packaging guidelines</a>. For more information about Tizen extensions to configuration elements, see <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#elements">Configuration Elements</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">Extending Configuration Elements</a>.</p> 
-  <p>Internally, the application package manager is responsible for installing, uninstalling, and updating packages and storing their information.</p> 
-  <p>Tizen has the following additional configuration elements:</p> 
-  <ul> 
+
+  <p>The Web IME configuration follows the Tizen packaging policy with certain extensions. Tizen applications are packaged according to the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget packaging guidelines</a>. For more information about Tizen extensions to configuration elements, see <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#elements">Configuration Elements</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">Extending Configuration Elements</a>.</p>
+  <p>Internally, the application package manager is responsible for installing, uninstalling, and updating packages and storing their information.</p>
+  <p>Tizen has the following additional configuration elements:</p>
+  <ul>
    <li>
     <code>tizen:category</code>
-       <p>To identify with other IMEs, the Web IME application must contain the UUID information.</p>  
+       <p>To identify with other IMEs, the Web IME application must contain the UUID information.</p>
 <pre class="prettyprint">
-&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;
+&lt;tizen:category name="http://tizen.org/category/ime"/&gt;
 </pre>
    </li>
    <li>
@@ -407,16 +407,16 @@ Keycode:
    </li>
    <li>
     <code>tizen:languages</code>
-       
-       <p>The locale string in the <code>&lt;tizen:language&gt;</code> element can be used to display the input language the specific Input Method Editor supports. The <code>&lt;tizen:languages&gt;</code> parent element can have more than 1 <code>&lt;tizen:language&gt;</code> child element.</p>        
+
+       <p>The locale string in the <code>&lt;tizen:language&gt;</code> element can be used to display the input language the specific Input Method Editor supports. The <code>&lt;tizen:languages&gt;</code> parent element can have more than 1 <code>&lt;tizen:language&gt;</code> child element.</p>
 <pre class="prettyprint">
 &lt;tizen:languages&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:language&gt;en-us&lt;/tizen:language&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:language&gt;en-gb&lt;/tizen:language&gt;
+   &lt;tizen:language&gt;en-us&lt;/tizen:language&gt;
+   &lt;tizen:language&gt;en-gb&lt;/tizen:language&gt;
 &lt;/tizen:languages&gt;
 </pre>
    </li>
-  </ul> 
+  </ul>
 
 <div class="note">
        <strong>Note</strong>
@@ -426,11 +426,11 @@ Keycode:
 
 <h2 id="hw" name="hw">Hardware Key Events</h2>
 
-  <p>The Web IME is capable of not only showing a soft keyboard and emitting key events to client application, but also handling hardware key events and translating them to a specific language. This is very common when typing texts in CJK (Chinese, Japanese, and Korean) languages, where each key event must be composed to produce a final result string.</p> 
-  <p>When a hardware key is pressed, the client application receives the key event and requests the Input Service framework to translate the key event. The request is then delivered to the currently selected Web IME through the event handler.</p>  
+  <p>The Web IME is capable of not only showing a soft keyboard and emitting key events to client application, but also handling hardware key events and translating them to a specific language. This is very common when typing texts in CJK (Chinese, Japanese, and Korean) languages, where each key event must be composed to produce a final result string.</p>
+  <p>When a hardware key is pressed, the client application receives the key event and requests the Input Service framework to translate the key event. The request is then delivered to the currently selected Web IME through the event handler.</p>
 
-  <p>When creating the handler object for <code>WebHelperClient</code>, implement the <code>onProcessKeyEvent()</code> method in case you want to translate each hardware key event.</p> 
-  <p>The following example translates the key event to a string &quot;ㅁ&quot;, which is a Korean character mapped to the <code>a</code> key event. </p> 
+  <p>When creating the handler object for <code>WebHelperClient</code>, implement the <code>onProcessKeyEvent()</code> method in case you want to translate each hardware key event.</p>
+  <p>The following example translates the key event to a string "ㅁ", which is a Korean character mapped to the <code>a</code> key event. </p>
 
 <div class="note">
        <strong>Note</strong>
@@ -440,98 +440,98 @@ Keycode:
 <pre class="prettyprint">
 var WebHelperClientHandler =
 {
-&nbsp;&nbsp;&nbsp;onProcessKeyEvent: function(code, mask, layout)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (code == WebHelperClient.Keycode.a)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WebHelperClient.commitString(&quot;ㅁ&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   onProcessKeyEvent: function(code, mask, layout)
+   {
+      if (code == WebHelperClient.Keycode.a)
+      {
+         WebHelperClient.commitString("ㅁ");
+
+         return true;
+      }
+      else
+      {
+         return false;
+      }
+   }
 };
 WebHelperClient.initialize(WebHelperClientHandler);
 </pre>
 
-  <p>When the processing of a hardware key event is completed, the <code>onProcessKeyEvent</code> event handler must return <code>true</code>. Otherwise, the client application considers the Web IME as not reacting to the key event, and tries to invoke its fallback handler, which appends an additional <code>a</code> to the committed &quot;ㅁ&quot; string.</p> 
- 
+  <p>When the processing of a hardware key event is completed, the <code>onProcessKeyEvent</code> event handler must return <code>true</code>. Otherwise, the client application considers the Web IME as not reacting to the key event, and tries to invoke its fallback handler, which appends an additional <code>a</code> to the committed "ㅁ" string.</p>
+
 <h2 id="key" name="key">Key Events, Commit Strings, and Pre-edit Strings</h2>
 
-  <p>Key events, commit strings and pre-edit strings are needed to send appropriate messages to the client application.</p> 
-  <p>Key events, when sent to the client application, use the same process as when a hardware key is pressed. Therefore, sending a key event to the client application using the <code>sendKeyEvent()</code> method calls the Web IME <code>onProcessKeyEvent()</code> event handler.</p> 
-  <p>To prevent the key event from being sent back to the Web IME (as there is no need to translate that key event again), use the <code>forwardKeyEvent()</code> method that invokes the client application&#39;s fallback key event handler.</p> 
+  <p>Key events, commit strings and pre-edit strings are needed to send appropriate messages to the client application.</p>
+  <p>Key events, when sent to the client application, use the same process as when a hardware key is pressed. Therefore, sending a key event to the client application using the <code>sendKeyEvent()</code> method calls the Web IME <code>onProcessKeyEvent()</code> event handler.</p>
+  <p>To prevent the key event from being sent back to the Web IME (as there is no need to translate that key event again), use the <code>forwardKeyEvent()</code> method that invokes the client application's fallback key event handler.</p>
 <pre class="prettyprint">
-&lt;script type=&quot;text/javascript&quot;&gt;
-&nbsp;&nbsp;&nbsp;/* Trigger the Web IME onProcessKeyEvent() event handler */
-&nbsp;&nbsp;&nbsp;WebHelperClient.sendKeyEvent(WebHelperClient.Keycode.a);
-&nbsp;&nbsp;&nbsp;/* Do NOT trigger the Web IME onProcessKeyEvent() event handler */
-&nbsp;&nbsp;&nbsp;WebHelperClient.forwardKeyEvent(WebHelperClient.Keycode.SEMICOLON);
+&lt;script type="text/javascript"&gt;
+   /* Trigger the Web IME onProcessKeyEvent() event handler */
+   WebHelperClient.sendKeyEvent(WebHelperClient.Keycode.a);
+   /* Do NOT trigger the Web IME onProcessKeyEvent() event handler */
+   WebHelperClient.forwardKeyEvent(WebHelperClient.Keycode.SEMICOLON);
 &lt;/script&gt;
 </pre>
 
-  <p>To send a batch of strings simultaneously, without generating key events for each of the component of a specific string, use the <code>commitString()</code> method:</p> 
+  <p>To send a batch of strings simultaneously, without generating key events for each of the component of a specific string, use the <code>commitString()</code> method:</p>
 <pre class="prettyprint">
 /*
-   Generate the &quot;a&quot; key event in the client application
-   &quot;a&quot; is appended to the client application&#39;s editable widget
+   Generate the "a" key event in the client application
+   "a" is appended to the client application's editable widget
 */
 WebHelperClient.forwardKeyEvent(WebHelperClient.Keycode.a);
 /*
-   Append the string &quot;www.&quot; to the client application&#39;s editable widget,
+   Append the string "www." to the client application's editable widget,
    without generating key events
 */
-WebHelperClient.commitString(&quot;www.&quot;);
+WebHelperClient.commitString("www.");
 </pre>
-  <p>To display a pre-edit string (a string that has not been finalized and can be substituted with another string), use the <code>updatePreeditString()</code> method:</p> 
+  <p>To display a pre-edit string (a string that has not been finalized and can be substituted with another string), use the <code>updatePreeditString()</code> method:</p>
 <pre class="prettyprint">
 /*
-   Show the pre-edit string &quot;abc&quot;, usually marked with an underline or highlight,
-   such as &quot;<u>abc</u>&quot; or &quot;<span class="highlight">abc</span>&quot;
+   Show the pre-edit string "abc", usually marked with an underline or highlight,
+   such as "<u>abc</u>" or "<span class="highlight">abc</span>"
 */
-WebHelperClient.updatePreeditString(&quot;abc&quot;);
+WebHelperClient.updatePreeditString("abc");
 /*
-   Substitute the &quot;abc&quot; pre-edit string with a new pre-edit string &quot;def&quot;,
-   erasing the existing &quot;abc&quot; pre-edit string and displaying &quot;<u>def</u>&quot;
-   or &quot;<span class="highlight">def</span>&quot; string on the editable widget
+   Substitute the "abc" pre-edit string with a new pre-edit string "def",
+   erasing the existing "abc" pre-edit string and displaying "<u>def</u>"
+   or "<span class="highlight">def</span>" string on the editable widget
 */
-WebHelperClient.updatePreeditString(&quot;def&quot;);
+WebHelperClient.updatePreeditString("def");
 </pre>
- 
+
 <h2 id="lifecycle" name="lifecycle">Web IME Life-cycle</h2>
 
-  <p>The Web IME applications have exactly the same life-cycle as the native IME applications. They have 4 states: unloaded, invisible, visible, and terminated.</p> 
-  <p>A Web IME in the unloaded state is loaded and transferred to the invisible state when:</p> 
-  <ul> 
-   <li>The system starts.</li> 
+  <p>The Web IME applications have exactly the same life-cycle as the native IME applications. They have 4 states: unloaded, invisible, visible, and terminated.</p>
+  <p>A Web IME in the unloaded state is loaded and transferred to the invisible state when:</p>
+  <ul>
+   <li>The system starts.</li>
    <li>The Web IME is selected in setting the application keyboard selection menu.</li>
   </ul>
-  
+
    <p>The invisible state changes to the visible state when the Web IME receives a request from a client application to show the IME, and decides to show itself according to the request. This process is usually initiated by the user touching the editable widget area. In contrast, the visible state changes back to the invisible state when the Web IME receives a hide request message due to the loss of focus in the client application and decides to hide itself. On occasion, the Web IME can hide itself without a request from client application, for example, when the Web IME provides a <strong>Hide keyboard</strong> button within the soft keyboard, and hides itself when the button is pressed.</p>
    <p>A Web IME in the visible or invisible state can move on to the terminated state when:</p>
-  <ul> 
-   <li>The system is shut down.</li> 
+  <ul>
+   <li>The system is shut down.</li>
    <li>A different Web IME is selected in setting the application keyboard selection menu.</li>
   </ul>
- 
+
  <h2 id="sample" name="sample">Sample IME Application</h2>
- 
+
   <p>To create an IME application:</p>
-  
-  <ol> 
+
+  <ol>
    <li>To create the Web IME project, launch the Tizen Studio and go to <strong>File &gt; New &gt; Tizen Project</strong>.</li>
    <li>In the Project Wizard, select <strong>Template</strong> as the project type, <strong>WEARABLE</strong> profile and applicable version, <strong>Web Application</strong> type, and <strong>Web Input Method Editor</strong> template.</li>
    <li>Enter the project name and click <strong>Finish</strong>.
-   <p align="center"><img alt="Create a Web IME project" src="../../images/web_ime_create_project.png"/></p></li> 
+   <p align="center"><img alt="Create a Web IME project" src="../../images/web_ime_create_project.png"/></p></li>
    <li>Modify the source code in, for example, the <code>index.html</code> and <code>style.css</code> files, as needed.</li>
-   <li>Install the Web IME package  on the emulator. To run the application, go to <strong>Run As &gt; Tizen Web Application</strong>.</li> 
+   <li>Install the Web IME package  on the emulator. To run the application, go to <strong>Run As &gt; Tizen Web Application</strong>.</li>
    <li>In the emulator, change the default keyboard with the Web IME you developed in <strong>Setting &gt; Text input</strong>.
-   <p align="center"><img alt="Setting main" src="../../images/web_ime_setting_main.png"/><img alt="Setting text input" src="../../images/web_ime_setting_text_input.png"/></p></li> 
+   <p align="center"><img alt="Setting main" src="../../images/web_ime_setting_main.png"/><img alt="Setting text input" src="../../images/web_ime_setting_text_input.png"/></p></li>
   </ol>
- 
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/text_input/text_input_cover_w.htm b/org.tizen.guides/html/web/text_input/text_input_cover_w.htm
index a64510f..e782692 100644 (file)
--- a/org.tizen.guides/html/web/text_input/text_input_cover_w.htm
+++ b/org.tizen.guides/html/web/text_input/text_input_cover_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Text Input</title>  
+       <title>Text Input</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Text Input</h1>
@@ -45,7 +45,7 @@
 <p>You can manage input keys in the application. You can retrieve information about the available keys, and add custom actions to be performed when specific input keys are pressed.</p></li>
 </ul>
 
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/ui/tau/accessibility_w.htm b/org.tizen.guides/html/web/ui/tau/accessibility_w.htm
index c43c80d..e3626b9 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/accessibility_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/accessibility_w.htm
@@ -58,38 +58,38 @@
 <ul>
        <li>Result: checkbox checked, double tap to uncheck
 <pre class="prettyprint">
-&lt;div role=&quot;checkbox&quot; aria-checked=&quot;true&quot; aria-label=&quot;double tap to uncheck&quot;&gt;&lt;/div&gt;
+&lt;div role="checkbox" aria-checked="true" aria-label="double tap to uncheck"&gt;&lt;/div&gt;
 </pre></li>
        <li>Result: test button, double tap to click
 <pre class="prettyprint">
-&lt;div role=&quot;button&quot; aria-label=&quot;double tap to click&quot;&gt;test&lt;/div&gt;
+&lt;div role="button" aria-label="double tap to click"&gt;test&lt;/div&gt;
 </pre></li>
 </ul>
 
 <p>When creating applications that use the Tizen screen reader, keep in mind the following exceptions:</p>
 <ul>
        <li>If the <code>aria-hidden</code> attribute of an element is set to <code>true</code>, the screen reader does not read the content of the element or its child elements.
-               <p>In the following snippet, the screen reader reads &quot;on&quot;, but not &quot;off&quot; or &quot;child&quot;.</p>
+               <p>In the following snippet, the screen reader reads "on", but not "off" or "child".</p>
 <pre class="prettyprint">
-&lt;div tabindex=&quot;0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;on&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div aria-hidden=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;off
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;child&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div tabindex="0"&gt;
+   &lt;div&gt;on&lt;/div&gt;
+   &lt;div aria-hidden="true"&gt;
+      off
+      &lt;div&gt;child&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
        <li>If the <code>role</code> attribute is not defined, it is not read.
-               <p>In the following snippet, the screen reader reads &quot;test&quot;, but not &quot;link&quot;.</p>
+               <p>In the following snippet, the screen reader reads "test", but not "link".</p>
 <pre class="prettyprint">
-&lt;a role=&quot;&quot; href=&quot;test.html&quot;&gt;test&lt;/a&gt;
+&lt;a role="" href="test.html"&gt;test&lt;/a&gt;
 </pre></li>
        <li>The screen reader does not read elements that are hidden, for example, if the <code>display</code> property is set to <code>none</code>.</li>
 </ul>
 
 <p>The <code>&lt;img&gt;</code> element supports the image alt text through the <code>alt</code> attribute:</p>
 <pre class="prettyprint">
-&lt;img src=&quot;icon.jpg&quot; alt=&quot;icon&quot;&gt;
+&lt;img src="icon.jpg" alt="icon"&gt;
 </pre>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/ui/tau/animation_w.htm b/org.tizen.guides/html/web/ui/tau/animation_w.htm
index f2fc488..28b3d6c 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/animation_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/animation_w.htm
@@ -29,7 +29,7 @@
         <ul class="toc">
                        <li><a href="#fundamentals">Animation Fundamentals</a></li>
                        <li><a href="#functions">Animation Functions</a></li>
-            
+
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -92,14 +92,14 @@
 <p align="center"><strong>Figure: Target object</strong></p>
 <p align="center"><img src="../../../images/tau_animation_2.png" alt="Target object" /></p>
 <pre class="prettyprint">
-&lt;div id=&quot;blueBox&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;
+&lt;div id="blueBox"
+     style="background-color: 'blue'; position:absolute; width:100px; height:100px;"&gt;
 &lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target,
-&nbsp;&nbsp;&nbsp;&nbsp;blueBox = document.getElementById(&#39;blueBox&#39;);
-t(&#39;#blueBox&#39;);
+    blueBox = document.getElementById('blueBox');
+t('#blueBox');
 /* Pure HTML element can be a target */
 t(blueBox);
 </pre>
@@ -107,16 +107,16 @@ t(blueBox);
 <li>Create an animation with transform, CSS properties, effects, and ease.
 <p>Once the target object is made, you can create an animation. The animation consists of an animation value including transform, CSS properties, and effect. Basically, an animation option is inserted with the duration of 1 s (1000 ms) only as a default. If you want to add an ease function, delay, loop, or callback, create an object for an animation option.</p>
 <pre class="prettyprint">
-&lt;div id=&quot;blueBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;
+&lt;div id="blueBox"
+     style="background-color: 'blue'; position:absolute; width:100px; height:100px;"&gt;
 &lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;#blueBox&#39;).tween({translateX: 1000}, {duration: 1000, delay: 500})
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({scaleX: 1.2, scaleY: 1.2}, {duration: 1000})
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({rotateZ: 30}, {duration: 1000})
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({skewX: 30}, {duration: 1000});
+t('#blueBox').tween({translateX: 1000}, {duration: 1000, delay: 500})
+             .tween({scaleX: 1.2, scaleY: 1.2}, {duration: 1000})
+             .tween({rotateZ: 30}, {duration: 1000})
+             .tween({skewX: 30}, {duration: 1000});
 </pre>
 </li>
 <li>Put the animations into an animation queue.
@@ -130,9 +130,9 @@ t(&#39;#blueBox&#39;).tween({translateX: 1000}, {duration: 1000, delay: 500})
 <p>In the above queue, there are 4 animations in queue. When all animations are inserted, the animations are popped and animated sequentially by the TweenAnimator.</p>
 </li>
 <li>The Ticker calls the <code>requestAnimationFrame()</code> method.
-<p>The TweenAnimator invokes the play and tick methods in the Ticker. The Ticker calls the <code>on()</code> method, and the <code>on()</code> method includes the <code>requestAnimationFrame()</code> method. The <code>RAF()</code> method is invoked until the TweenAnimator&#39;s tick time reaches the end of the duration.</p>
+<p>The TweenAnimator invokes the play and tick methods in the Ticker. The Ticker calls the <code>on()</code> method, and the <code>on()</code> method includes the <code>requestAnimationFrame()</code> method. The <code>RAF()</code> method is invoked until the TweenAnimator's tick time reaches the end of the duration.</p>
 </li>
-<li>During the <code>requestAnimationFrame()</code> method call, the <code>AnimationObject</code> renders the target object and the TweenAnimator&#39;s time logic is operating.
+<li>During the <code>requestAnimationFrame()</code> method call, the <code>AnimationObject</code> renders the target object and the TweenAnimator's time logic is operating.
 <p>The <code>AnimationObject</code> can get the time value using the calculating animation. The <code>AnimationObject</code> renders the target object based on the time value. If the duration is 1000 (ms), the TweenAnimator gives time 0 through 1000.</p>
 <p align="center"><strong>Figure: TweenAnimator</strong></p>
 <p align="center"><img src="../../../images/tau_animation_4.png" alt="TweenAnimator" /></p>
@@ -151,30 +151,30 @@ tween({animation}, {option});
 </pre>
 <p><code>{animation}</code> can be various animations, such as transform, CSS property, or predefined effect. Basically, <code>{animation}</code> indicates the destination of the animation. For example, <code>{rotateZ: 90}</code> indicates a rotation from the current value to 90 degrees. To do this, you must set the starting point of the animation, and for this, an additional animation form is provided. <code>{rotateZ: [30, 90]}</code> indicates the changing rotation value of the transform from 30 to 90.</p>
 <pre class="prettyprint">
-&lt;div id=&quot;redBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
-&lt;div id=&quot;blueBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;blue&#39;; position:absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:100px; height:100px; left: 200px;&quot;&gt;&lt;/div&gt;
+&lt;div id="redBox"
+     style="background-color: 'red'; position:absolute; width:100px; height:100px;"&gt;&lt;/div&gt;
+&lt;div id="blueBox"
+     style="background-color: 'blue'; position:absolute;
+            width:100px; height:100px; left: 200px;"&gt;&lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;#redBox&#39;).tween({translateX: 1000}, 1000); /* Translate from current position to 1000 */
+t('#redBox').tween({translateX: 1000}, 1000); /* Translate from current position to 1000 */
 /* Add left property from current to 200, add top property from 100 to 300 */
-t(&#39;#blueBox&#39;).tween({left: 200, top: [100, 300]}, 1000);
+t('#blueBox').tween({left: 200, top: [100, 300]}, 1000);
 </pre>
 
 <h3 id="chaining">Chaining</h3>
 <p>The animation is inserted to the animation queue automatically before playing. At first, this feature does not seem important for making an animation, but if this method is supported, the LOC (Line Of Code) is decreased significantly.</p>
 <pre class="prettyprint">
-&lt;div id=&quot;blueBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+&lt;div id="blueBox"
+     style="background-color: 'blue'; position:absolute; width:100px; height:100px;"&gt;&lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;#blueBox&#39;).tween({translateX: [500, 1000]}, 1000).tween({translateY: 500}, 1000)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({rotateZ: 120}, 1000).tween({skewX: [0, 30]}, 1000)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.tween({opacity: [1, 0]}, 1000).tween({opacity: 0.5}, 1000);
+t('#blueBox').tween({translateX: [500, 1000]}, 1000).tween({translateY: 500}, 1000)
+             .tween({rotateZ: 120}, 1000).tween({skewX: [0, 30]}, 1000)
+             .tween({opacity: [1, 0]}, 1000).tween({opacity: 0.5}, 1000);
 </pre>
 
 <p align="center"><strong>Figure: Animation queue and chaining</strong></p>
@@ -193,82 +193,82 @@ t(&#39;#blueBox&#39;).tween({translateX: [500, 1000]}, 1000).tween({translateY:
 
 <p>To make an identical effect, you can make many single animations. The following example shows the <code>shake</code> effect:</p>
 <pre class="prettyprint">
-&lt;div id=&quot;blueBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+&lt;div id="blueBox"
+     style="background-color: 'blue'; position:absolute; width:100px; height:100px;"&gt;&lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
-t(&#39;#blueBox&#39;).tween({translateX: 10}, 100);
-t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
-t(&#39;#blueBox&#39;).tween({translateX: 10}, 100);
-t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
-t(&#39;#blueBox&#39;).tween({translateX: 10}, 100);
-t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
-t(&#39;#blueBox&#39;).tween({translateX: 10}, 100);
-t(&#39;#blueBox&#39;).tween({translateX: -10}, 100);
-t(&#39;#blueBox&#39;).tween({translateX: 0}, 100);
+t('#blueBox').tween({translateX: -10}, 100);
+t('#blueBox').tween({translateX: 10}, 100);
+t('#blueBox').tween({translateX: -10}, 100);
+t('#blueBox').tween({translateX: 10}, 100);
+t('#blueBox').tween({translateX: -10}, 100);
+t('#blueBox').tween({translateX: 10}, 100);
+t('#blueBox').tween({translateX: -10}, 100);
+t('#blueBox').tween({translateX: 10}, 100);
+t('#blueBox').tween({translateX: -10}, 100);
+t('#blueBox').tween({translateX: 0}, 100);
 </pre>
 <p>Or instead, you can use a predefined animation:</p>
 <pre class="prettyprint">
-&lt;div id=&quot;blueBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
+&lt;div id="blueBox"
+     style="background-color: 'blue'; position:absolute; width:100px; height:100px;"&gt;&lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;#blueBox&#39;).tween(&#39;shake&#39;, 1000);
+t('#blueBox').tween('shake', 1000);
 </pre>
 
 <h3 id="group">Group</h3>
-<p>Sometimes, you need to animate all objects with the same animation. To make an animation group for this purpose, the <code>target()</code> method is provided. If all classes of DOM are <code>box</code>, you can create a box group. Like a CSS selector, &#39;.&#39; means a class selector and &#39;#&#39; means an ID selector. Also, a pure HTML element can be a parameter of the <code>target()</code> method.</p>
+<p>Sometimes, you need to animate all objects with the same animation. To make an animation group for this purpose, the <code>target()</code> method is provided. If all classes of DOM are <code>box</code>, you can create a box group. Like a CSS selector, '.' means a class selector and '#' means an ID selector. Also, a pure HTML element can be a parameter of the <code>target()</code> method.</p>
 <pre class="prettyprint">
-&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;.box&#39;).tween({rotateZ: 120}, 1000);
+t('.box').tween({rotateZ: 120}, 1000);
 /* All DOM are rotated */
 </pre>
 
 <h3 id="stagger">Stagger</h3>
 <p>In case of handling an animation group, you can apply a different delay value to a group. The following example shows a delay with the <code>zoomIn</code> effect:</p>
 <pre class="prettyprint">
-&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
-&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
-&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
-&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
-&lt;div class=&#39;box&#39;&gt;&lt;/div&gt;
+&lt;div class='box'&gt;&lt;/div&gt;
+&lt;div class='box'&gt;&lt;/div&gt;
+&lt;div class='box'&gt;&lt;/div&gt;
+&lt;div class='box'&gt;&lt;/div&gt;
+&lt;div class='box'&gt;&lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;.box&#39;).tween(&#39;zoomIn&#39;, {duration: 1000, stagger: 200});
+t('.box').tween('zoomIn', {duration: 1000, stagger: 200});
 /* Each box is animated with 200 ms time difference */
 </pre>
 
 <h3 id="callback">Callback</h3>
 <p>You can add some actions before and after an animation. If you add the <code>onStart</code> callback, it is invoked before the animation. The <code>onComplete</code> callback is invoked after the animation.</p>
 <pre class="prettyprint">
-&lt;div id=&#39;blueBox&#39;&gt;&lt;/div&gt;
+&lt;div id='blueBox'&gt;&lt;/div&gt;
 </pre>
 <pre class="prettyprint"
 >var t = tau.animation.target;
-t(&#39;#blueBox&#39;).tween({translateY: [0, 150], rotateZ: [0, 180]},
+t('#blueBox').tween({translateY: [0, 150], rotateZ: [0, 180]},
 {
-&nbsp;&nbsp;&nbsp;duration: 1000,
-&nbsp;&nbsp;&nbsp;onStart: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).innerText = &#39;start&#39;;
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onComplete: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).tween({backgroundColor: &#39;navy&#39;}, {duration: 1000});
-&nbsp;&nbsp;&nbsp;}
+   duration: 1000,
+   onStart: function()
+   {
+      t('#blueBox').innerText = 'start';
+   },
+   onComplete: function()
+   {
+      t('#blueBox').tween({backgroundColor: 'navy'}, {duration: 1000});
+   }
 });
 </pre>
-<p>In the above animation, the box is translated by Y axis from 0 to 150 and rotated from 0 to 180. Before translating and rotating, the <code>start</code> text is inserted into the box. After translating and rotating, the box&#39;s background color is changed to navy.</p>
+<p>In the above animation, the box is translated by Y axis from 0 to 150 and rotated from 0 to 180. Before translating and rotating, the <code>start</code> text is inserted into the box. After translating and rotating, the box's background color is changed to navy.</p>
 
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/ui/tau/circle_progressbar_ww.htm b/org.tizen.guides/html/web/ui/tau/circle_progressbar_ww.htm
index b3f0567..5f9187b 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/circle_progressbar_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/circle_progressbar_ww.htm
@@ -49,20 +49,20 @@
 <li>Edit the HTML code to add the component to your application screen:
 
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageCircleProgressBar&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-enable-page-scroll=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Circle Progress&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;result&quot; id=&quot;result&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-grid-col-2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;minus&quot;&gt;-10%&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot; id=&quot;plus&quot;&gt;+10%&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
-&nbsp;&nbsp;&nbsp;&lt;progress class=&quot;ui-circle-progress&quot; id=&quot;circleprogress&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max=&quot;100&quot; value=&quot;20&quot;&gt;&lt;/progress&gt;
+&lt;div class="ui-page ui-page-active" id="pageCircleProgressBar"
+     data-enable-page-scroll="false"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Circle Progress&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content content-padding"&gt;
+      &lt;div class="result" id="result"&gt;&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;footer class="ui-footer ui-grid-col-2"&gt;
+      &lt;a href="#" class="ui-btn" id="minus"&gt;-10%&lt;/a&gt;
+      &lt;a href="#" class="ui-btn" id="plus"&gt;+10%&lt;/a&gt;
+   &lt;/footer&gt;
+   &lt;progress class="ui-circle-progress" id="circleprogress"
+             max="100" value="20"&gt;&lt;/progress&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -72,32 +72,32 @@
 <pre class="prettyprint">
 .ui-progressbar-large
 {
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;left: 50%;
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-50%, -50%, 0);
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   -webkit-transform: translate3d(-50%, -50%, 0);
 }
 .result
 {
-&nbsp;&nbsp;&nbsp;font-size: 35px;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;top: 33%;
-&nbsp;&nbsp;&nbsp;left: 50%;
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-50%, -50%, 0);
-&nbsp;&nbsp;&nbsp;position: absolute;
+   font-size: 35px;
+   text-align: center;
+   top: 33%;
+   left: 50%;
+   -webkit-transform: translate3d(-50%, -50%, 0);
+   position: absolute;
 }
 
 @media all and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;.result
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.ui-footer
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
-&nbsp;&nbsp;&nbsp;}
+   .result
+   {
+      top: 50%;
+      margin: 0;
+   }
+   .ui-footer
+   {
+      display: none;
+   }
 }
 </pre>
 </li>
@@ -107,134 +107,134 @@
 <pre class="prettyprint">
 (function()
 {
-&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;pageCircleProgressBar&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = document.getElementById(&quot;circleprogress&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn = document.getElementById(&quot;minus&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn = document.getElementById(&quot;plus&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv = document.getElementById(&quot;result&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isCircle = tau.support.shape.circle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultText,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i;
-
-&nbsp;&nbsp;&nbsp;function printResult()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultText = progressBarWidget.value();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerHTML = resultText + &quot;%&quot;;
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function clearVariables()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv = null;
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function unbindEvents()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pageshow&quot;, pageBeforeShowHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pagehide&quot;, pageHideHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isCircle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn.removeEventListener(&quot;click&quot;, minusBtnClickHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn.removeEventListener(&quot;click&quot;, plusBtnClickHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function minusBtnClickHandler()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = i - 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function plusBtnClickHandler()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = i + 10;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (i &gt; 100)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function rotaryDetentHandler()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the rotary direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var direction = event.detail.direction,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = parseInt(progressBarWidget.value());
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (direction === &quot;CW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (value &lt; 100)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value++;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (direction === &quot;CCW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (value &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value--;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printResult();
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function pageBeforeShowHandler()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isCircle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Make the circular progressbar object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{size: &quot;full&quot;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{size: &quot;large&quot;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minusBtn.addEventListener(&quot;click&quot;, minusBtnClickHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plusBtn.addEventListener(&quot;click&quot;, plusBtnClickHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = parseInt(progressBarWidget.value());
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerHTML = i + &quot;%&quot;;
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;function pageHideHandler()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unbindEvents();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearVariables();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Release the object */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.destroy();
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, pageBeforeShowHandler);
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagehide&quot;, pageHideHandler);
+   var page = document.getElementById("pageCircleProgressBar"),
+       progressBar = document.getElementById("circleprogress"),
+       minusBtn = document.getElementById("minus"),
+       plusBtn = document.getElementById("plus"),
+       resultDiv = document.getElementById("result"),
+       isCircle = tau.support.shape.circle,
+       progressBarWidget,
+       resultText,
+       i;
+
+   function printResult()
+   {
+      resultText = progressBarWidget.value();
+      resultDiv.innerHTML = resultText + "%";
+   };
+
+   function clearVariables()
+   {
+      page = null;
+      progressBar = null;
+      minusBtn = null;
+      plusBtn = null;
+      resultDiv = null;
+   };
+
+   function unbindEvents()
+   {
+      page.removeEventListener("pageshow", pageBeforeShowHandler);
+      page.removeEventListener("pagehide", pageHideHandler);
+      if (isCircle)
+      {
+         document.removeEventListener("rotarydetent", rotaryDetentHandler);
+      }
+      else
+      {
+         minusBtn.removeEventListener("click", minusBtnClickHandler);
+         plusBtn.removeEventListener("click", plusBtnClickHandler);
+      }
+   };
+
+   function minusBtnClickHandler()
+   {
+      i = i - 10;
+      if (i &lt; 0)
+      {
+         i = 0;
+      }
+      progressBarWidget.value(i);
+      printResult();
+   };
+
+   function plusBtnClickHandler()
+   {
+      i = i + 10;
+      if (i &gt; 100)
+      {
+         i = 100;
+      }
+      progressBarWidget.value(i);
+      printResult();
+   };
+
+   function rotaryDetentHandler()
+   {
+      /* Get the rotary direction */
+      var direction = event.detail.direction,
+          value = parseInt(progressBarWidget.value());
+
+      if (direction === "CW")
+      {
+         /* Right direction */
+         if (value &lt; 100)
+         {
+            value++;
+         }
+         else
+         {
+            value = 100;
+         }
+      }
+      else if (direction === "CCW")
+      {
+         /* Left direction */
+         if (value &gt; 0)
+         {
+            value--;
+         }
+         else
+         {
+            value = 0;
+         }
+      }
+
+      progressBarWidget.value(value);
+      printResult();
+   }
+
+   function pageBeforeShowHandler()
+   {
+      if (isCircle)
+      {
+         /* Make the circular progressbar object */
+         progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
+                                                              {size: "full"});
+         document.addEventListener("rotarydetent", rotaryDetentHandler);
+      }
+      else
+      {
+         progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
+                                                              {size: "large"});
+         minusBtn.addEventListener("click", minusBtnClickHandler);
+         plusBtn.addEventListener("click", plusBtnClickHandler);
+      }
+
+      i = parseInt(progressBarWidget.value());
+      resultDiv.innerHTML = i + "%";
+   };
+
+   function pageHideHandler()
+   {
+      unbindEvents();
+      clearVariables();
+      /* Release the object */
+      progressBarWidget.destroy();
+   };
+
+   page.addEventListener("pagebeforeshow", pageBeforeShowHandler);
+   page.addEventListener("pagehide", pageHideHandler);
 }());
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/circular_ui_ww.htm b/org.tizen.guides/html/web/ui/tau/circular_ui_ww.htm
index afd3537..a4bb041 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/circular_ui_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/circular_ui_ww.htm
@@ -61,27 +61,27 @@
 </ol>
 
 <pre class="prettyprint">
-&lt;head name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;title&gt;Support for Circular UI&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;tau.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--CSS media query on a link element--&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media=&quot;all and (-tizen-geometric-shape: circle)&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;tau.circle.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
+&lt;head name="viewport" content="width=device-width, user-scalable=no"&gt;
+   &lt;title&gt;Support for Circular UI&lt;/title&gt;
+   &lt;link rel="stylesheet" href="tau.css"&gt;
+   &lt;!--CSS media query on a link element--&gt;
+   &lt;link rel="stylesheet"
+         media="all and (-tizen-geometric-shape: circle)"
+         href="tau.circle.css"&gt;
+   &lt;link rel="stylesheet" href="css/style.css"&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Implement your code for circular UI */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Implement your code for rectangular UI */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+   &lt;script type="text/javascript" src="tau.js"&gt;&lt;/script&gt;
+   &lt;script&gt;
+      if (tau.support.shape.circle)
+      {
+         /* Implement your code for circular UI */
+      }
+      else
+      {
+         /* Implement your code for rectangular UI */
+      }
+   &lt;/script&gt;
 &lt;/body&gt;
 </pre>
 
@@ -120,15 +120,15 @@
 <pre class="prettyprint">
 .className
 {
-&nbsp;&nbsp;&nbsp;/* Implement the basic CSS style for all types of devices (rectangular and circular) */
+   /* Implement the basic CSS style for all types of devices (rectangular and circular) */
 }
 
 @media screen and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;.className
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Implement the CSS style to be overridden in circular */
-&nbsp;&nbsp;&nbsp;}
+   .className
+   {
+      /* Implement the CSS style to be overridden in circular */
+   }
 }
 </pre>
 
@@ -138,11 +138,11 @@
 <pre class="prettyprint">
 if (tau.support.shape.circle)
 {
-&nbsp;&nbsp;&nbsp;/* Implement your code for circular UI */
+   /* Implement your code for circular UI */
 }
 else
 {
-&nbsp;&nbsp;&nbsp;/* Implement your code for rectangular UI */
+   /* Implement your code for rectangular UI */
 }
 </pre>
 
@@ -158,7 +158,7 @@ else
        </tr>
     <tr>
         <td><a href="tau_rotary_ww.htm">Rotary Events</a></td>
-        <td>Shows how to support the &quot;rotarydetent&quot; event.</td>
+        <td>Shows how to support the "rotarydetent" event.</td>
     </tr>
        <tr>
         <td><a href="helper_ww.htm">Helper Script</a></td>
diff --git a/org.tizen.guides/html/web/ui/tau/creating_animation_w.htm b/org.tizen.guides/html/web/ui/tau/creating_animation_w.htm
index e95b74c..dcd644c 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/creating_animation_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/creating_animation_w.htm
@@ -47,15 +47,15 @@
 <p>You can import the TAU Animation with HTML:</p>
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;title&gt;TAU Animation Sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;lib/tau/animation/tau.animation.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+   &lt;title&gt;TAU Animation Sample&lt;/title&gt;
+   &lt;script src="lib/tau/animation/tau.animation.min.js" type="text/javascript"&gt;&lt;/script&gt;
 &lt;/head&gt;
 </pre>
 <p><code>tau.animation</code> is the namespace of the TAU Animation. You can call TAU Animation methods through this namespace.</p>
 
 <div class="note">
        <strong>Note</strong>
-       To get the <code>tau.animation.min.js</code> library, create a new project from the <a href="https://developer.tizen.org/development/sample/web/UI/TAU_UI_Components" target="_blank">UIComponent</a> sample. The library is included in the sample&#39;s <code>lib/tau/animation</code> directory.
+       To get the <code>tau.animation.min.js</code> library, create a new project from the <a href="https://developer.tizen.org/development/sample/web/UI/TAU_UI_Components" target="_blank">UIComponent</a> sample. The library is included in the sample's <code>lib/tau/animation</code> directory.
 </div>
 
 <h2 id="create">Creating TAU Animations</h2>
@@ -63,23 +63,23 @@
 <p>The following code snippet shows how to create a TAU Animation:</p>
 
 <pre class="prettyprint">
-&lt;div id=&quot;redBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
-&lt;div id=&quot;blueBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;blue&#39;; position:absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:100px; height:100px; left: 200px;&quot;&gt;&lt;/div&gt;
+&lt;div id="redBox"
+     style="background-color: 'red'; position:absolute; width:100px; height:100px;"&gt;&lt;/div&gt;
+&lt;div id="blueBox"
+     style="background-color: 'blue'; position:absolute;
+            width:100px; height:100px; left: 200px;"&gt;&lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;#redBox&#39;).tween(&#39;swing&#39;, 1000);
-t(&#39;#blueBox&#39;).tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);
+t('#redBox').tween('swing', 1000);
+t('#blueBox').tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);
 </pre>
 
-<p>If you want to animate the HTML element directly, you can use <code>mixin</code>. You can animate any effect, transform, or CSS property. You can use the &#39;target&#39; method. Like a CSS selector, &#39;.&#39; means class selector, &#39;#&#39; means ID selector. Also, a pure HTML element can be a parameter of the target method.</p>
+<p>If you want to animate the HTML element directly, you can use <code>mixin</code>. You can animate any effect, transform, or CSS property. You can use the 'target' method. Like a CSS selector, '.' means class selector, '#' means ID selector. Also, a pure HTML element can be a parameter of the target method.</p>
 
 <p>Available animation methods:</p>
 <ul><li>Predefined effects
-<p>When the first parameter of the <code>tween()</code> method indicates a string (such as &#39;swing&#39; above) instead of an object, it is a predefined effect animation. Various <a href="animation_w.htm#effects">predefined effects</a> are available.</p></li>
+<p>When the first parameter of the <code>tween()</code> method indicates a string (such as 'swing' above) instead of an object, it is a predefined effect animation. Various <a href="animation_w.htm#effects">predefined effects</a> are available.</p></li>
 
 <li>Chaining
 <p>The <code>blueBox</code> animation above is a type of a connected animation. If animations are connected to the same target object, it is added to the queue. And if the <code>play()</code> method is invoked, all animations in the queue are called in the sequence order.</p></li>
@@ -94,61 +94,61 @@ tween({animation}, {option})
 <li><code>transform</code> options:
 <p><code>translateX</code>, <code>translateY</code>, <code>translateZ</code>, <code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code>, <code>scaleX</code>, <code>scaleY</code>, <code>skewX</code>, <code>skewY</code></p>
 </li>
-<li><code>css</code> options: 
+<li><code>css</code> options:
 <p><code>left</code>, <code>top</code>, <code>width</code>, <code>height</code>, <code>background-color</code>, <code>color</code>, <code>border</code>, <code>border-width</code>, <code>border-color</code>, <code>margin</code>, <code>marginTop</code>, <code>marginRight</code>, <code>marginBottom</code>, <code>marginLeft</code>, <code>padding</code>, <code>paddingTop</code>, <code>paddingRight</code>, <code>paddingBottom</code>, <code>paddingLeft</code>, <code>font-size</code>, <code>line-height</code>, <code>clip-path</code>, <code>background-position</code>, <code>background-size</code>, <code>box-shadow</code></p>
 </li>
 </ul>
 <pre class="prettyprint">
-&lt;div id=&quot;redBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;
+&lt;div id="redBox"
+     style="background-color: 'red'; position:absolute; width:100px; height:100px;"&gt;
 &lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;#redBox&#39;).tween({rotateZ: 120}, 1000); /* Transform */
+t('#redBox').tween({rotateZ: 120}, 1000); /* Transform */
 /* CSS property */
-t(&#39;#redBox&#39;).tween({backgroundColor: &#39;red&#39;, border: &#39;10px 10px 10px 3px white&#39;}, 1000);
-t(&#39;#redBox&#39;).tween(&#39;swing&#39;, 1000).tween(&#39;tada&#39;, 1000); /* Predefined effect */
+t('#redBox').tween({backgroundColor: 'red', border: '10px 10px 10px 3px white'}, 1000);
+t('#redBox').tween('swing', 1000).tween('tada', 1000); /* Predefined effect */
 </pre></li>
 
 <li>Option
 <p>An <code>option</code> consists of a duration, ease, delay, callback, and stagger. In order to provide better usage, if you want to use only duration, you can set the duration as a number value like in the previous examples. If any other options are needed, you must make an <code>{option}</code> object and insert the <code>duration: value</code> into the object.
 </p>
 <pre class="prettyprint">
-&lt;div id=&quot;redBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;
+&lt;div id="redBox"
+     style="background-color: 'red'; position:absolute; width:100px; height:100px;"&gt;
 &lt;/div&gt;
-&lt;div id=&quot;blueBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;blue&#39;; position:absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:100px; height:100px; left: 200px;&quot;&gt;&lt;/div&gt;
-&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
+&lt;div id="blueBox"
+     style="background-color: 'blue'; position:absolute;
+            width:100px; height:100px; left: 200px;"&gt;&lt;/div&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 var t = tau.animation.target;
-t(&#39;#redBox&#39;).tween({rotateZ: 120}, 1000);
-t(&#39;#redBox&#39;).tween({rotateZ: 120}, {duration: 1000});
+t('#redBox').tween({rotateZ: 120}, 1000);
+t('#redBox').tween({rotateZ: 120}, {duration: 1000});
 /* Result of this tween method is identical with the above method */
-t(&#39;#blueBox&#39;).tween({rotateZ: 120}, {duration: 1000, ease: &#39;bounceInOut&#39;});
+t('#blueBox').tween({rotateZ: 120}, {duration: 1000, ease: 'bounceInOut'});
 /* After 500ms, blueBox is rotated */
-t(&#39;#blueBox&#39;).tween({rotateZ: 120}, {duration: 1000, delay: 500});
-t(&#39;#blueBox&#39;).tween({rotateZ: 120}, {duration: 1000, onStart: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Before animation, the text is inserted into blueBox */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).style.innerText = &#39;start&#39;;
-&nbsp;&nbsp;&nbsp;}, onComplete: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* After animation, blueBox is animated with a predefined effect */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).tween(&#39;swing&#39;, 1000);
-&nbsp;&nbsp;&nbsp;}
+t('#blueBox').tween({rotateZ: 120}, {duration: 1000, delay: 500});
+t('#blueBox').tween({rotateZ: 120}, {duration: 1000, onStart: function()
+   {
+      /* Before animation, the text is inserted into blueBox */
+      t('#blueBox').style.innerText = 'start';
+   }, onComplete: function()
+   {
+      /* After animation, blueBox is animated with a predefined effect */
+      t('#blueBox').tween('swing', 1000);
+   }
 });
 /*
-   All boxes that include the className &#39;box&#39; are
+   All boxes that include the className 'box' are
    rotated sequentially with a 200ms time difference
 */
-t(&#39;.box&#39;).tween({rotateZ: 120}, {duration: 1000, stagger: 200});
+t('.box').tween({rotateZ: 120}, {duration: 1000, stagger: 200});
 </pre></li></ul>
 
 
@@ -157,42 +157,42 @@ t(&#39;.box&#39;).tween({rotateZ: 120}, {duration: 1000, stagger: 200});
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: red;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;title&gt;TAU Animation Sample&lt;/title&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Load TAU Animation--&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;lib/tau/animation/tau.animation.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+   &lt;style&gt;
+      .box
+      {
+         position: absolute;
+         width: 100px;
+         height: 100px;
+         background-color: red;
+         left: 100px;
+         top: 100px;
+      }
+   &lt;/style&gt;
+
+   &lt;title&gt;TAU Animation Sample&lt;/title&gt;
+
+   &lt;!--Load TAU Animation--&gt;
+   &lt;script src="lib/tau/animation/tau.animation.min.js" type="text/javascript"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;redBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;red&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;blueBox&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;background-color: &#39;blue&#39;; position:absolute; width:100px; height:100px;&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var t = tau.animation.target;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Single animation */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#redBox&#39;).tween(&#39;swing&#39;, 1000);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Single animation */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;#blueBox&#39;).tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Group animation */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;t(&#39;.box&#39;).tween({translateY: 500}, {duration: 1000, stagger: 200});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+   &lt;div id="redBox"
+        style="background-color: 'red'; position:absolute; width:100px; height:100px;"&gt;&lt;/div&gt;
+   &lt;div id="blueBox"
+        style="background-color: 'blue'; position:absolute; width:100px; height:100px;"&gt;&lt;/div&gt;
+   &lt;div class="box"&gt;&lt;/div&gt;
+   &lt;div class="box"&gt;&lt;/div&gt;
+   &lt;div class="box"&gt;&lt;/div&gt;
+   &lt;div class="box"&gt;&lt;/div&gt;
+
+   &lt;script&gt;
+      var t = tau.animation.target;
+      /* Single animation */
+      t('#redBox').tween('swing', 1000);
+      /* Single animation */
+      t('#blueBox').tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);
+      /* Group animation */
+      t('.box').tween({translateY: 500}, {duration: 1000, stagger: 200});
+   &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
diff --git a/org.tizen.guides/html/web/ui/tau/event_handling_w.htm b/org.tizen.guides/html/web/ui/tau/event_handling_w.htm
index d16af52..1b4ab19 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/event_handling_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/event_handling_w.htm
@@ -76,15 +76,15 @@
 </table>
 <p>To bind an event callback on the <code>tizenhwkey</code> events, use the following code:</p>
 <pre class="prettyprint">
-window.addEventListener(&quot;tizenhwkey&quot;, function(ev)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ev.keyName == &quot;back&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Call window.history.back() to go to previous browser window */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Call tizen.application.getCurrentApplication().exit() to exit application */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add script to add another behavior */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+window.addEventListener("tizenhwkey", function(ev)
+   {
+      if (ev.keyName == "back")
+      {
+         /* Call window.history.back() to go to previous browser window */
+         /* Call tizen.application.getCurrentApplication().exit() to exit application */
+         /* Add script to add another behavior */
+      }
+   });
 </pre>
 
 <h3>Exiting the Application with the Back Key</h3>
@@ -94,28 +94,28 @@ window.addEventListener(&quot;tizenhwkey&quot;, function(ev)
 <pre class="prettyprint">
 (function()
 {
-&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;tizenhwkey&quot;, function(ev);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ev.keyName === &quot;back&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementsByClassName(&quot;ui-page-active&quot;)[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageid = page ? page.id: &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pageid === &quot;main&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (ignore)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   window.addEventListener("tizenhwkey", function(ev);
+      {
+         if (ev.keyName === "back")
+         {
+            var page = document.getElementsByClassName("ui-page-active")[0],
+                pageid = page ? page.id: "";
+            if (pageid === "main")
+            {
+               try
+               {
+                  tizen.application.getCurrentApplication().exit();
+               }
+               catch (ignore)
+               {
+               }
+            }
+            else
+            {
+               window.history.back();
+            }
+         }
+      });
 }());
 </pre>
 
@@ -147,11 +147,11 @@ window.addEventListener(&quot;tizenhwkey&quot;, function(ev)
 
 <p>To bind an event callback on rotary events, use the following code:</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;rotarydetent&quot;, function(ev)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var direction = ev.detail.direction;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add behavior for detent detected event with a direction value */
-&nbsp;&nbsp;&nbsp;});
+document.addEventListener("rotarydetent", function(ev)
+   {
+      var direction = ev.detail.direction;
+      /* Add behavior for detent detected event with a direction value */
+   });
 </pre>
 
 
diff --git a/org.tizen.guides/html/web/ui/tau/footerbutton_ww.htm b/org.tizen.guides/html/web/ui/tau/footerbutton_ww.htm
index a11e772..27f77b8 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/footerbutton_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/footerbutton_ww.htm
@@ -41,7 +41,7 @@
 <p>The following figures show the layout of the footer button component in a rectangular and circular UI.</p>
 <p align="center"><strong>Figure: Footer button component in rectangular and circular devices</strong></p>
                        <p align="center"><img alt="Footer button in a rectangular device" src="../../../images/rectangular_footer.png"/> <img alt="Footer button in a circular device" src="../../../images/round_footer.png"/></p>
-                       
+
 <p align="center"><strong>Figure: Multiple footer buttons in rectangular and circular devices</strong></p>
                        <p align="center"><img alt="Multiple footer buttons in a rectangular device" src="../../../images/rectangular_multibtn.png"/> <img alt="Multiple footer buttons in a circular device" src="../../../images/round_multibtn.png"/></p>
 <p>The footer button on the circular UI has the <code>ui-bottom-button</code> class. When there are multiple buttons, the other buttons except for the first button use the drawer component in the circular UI.</p>
@@ -54,17 +54,17 @@
 <p>Edit the HTML code to add the footer button component to your application screen.</p>
 
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;bottomButtonPage&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a real pleasure for me to finally get to meet you. My colleagues join me
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;in sending you our holiday greetings.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-bottom-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;Button&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&lt;div class="ui-page ui-page-active" id="bottomButtonPage"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Bottom Button&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content content-padding"&gt;
+      It was a real pleasure for me to finally get to meet you. My colleagues join me
+      in sending you our holiday greetings.
+   &lt;/div&gt;
+   &lt;footer class="ui-footer ui-bottom-button"&gt;
+      &lt;a href="#" class="ui-btn"&gt;Button&lt;/a&gt;
+   &lt;/footer&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -76,32 +76,32 @@
 <p>When there are multiple buttons, the buttons (except for the first button) use the drawer in the circular UI.</p>
 
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;bottomButtonWithMorePage&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Multiple Buttons&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a real pleasure for me to finally get to meet you.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;My colleagues join me in sending you our holiday greetings.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;a class=&quot;drawer-handler&quot;&gt;&lt;/a&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Circle profile--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;moreoptionsDrawer&quot; class=&quot;ui-drawer drawer-elem&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-drawer-target=&quot;#bottomButtonWithMorePage&quot; data-position=&quot;right&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-enable=&quot;true&quot; data-drag-edge=&quot;1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;selector&quot; class=&quot;ui-selector&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item show-icon&quot; data-title=&quot;2&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item human-icon&quot; data-title=&quot;3&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;footer class=&quot;ui-footer ui-grid-col-3 ui-bottom-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;1&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;2&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;3&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
+&lt;div class="ui-page ui-page-active" id="bottomButtonWithMorePage"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Multiple Buttons&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content content-padding"&gt;
+      It was a real pleasure for me to finally get to meet you.
+      My colleagues join me in sending you our holiday greetings.
+   &lt;/div&gt;
+
+   &lt;a class="drawer-handler"&gt;&lt;/a&gt;
+
+   &lt;!--Circle profile--&gt;
+   &lt;div id="moreoptionsDrawer" class="ui-drawer drawer-elem"
+        data-drawer-target="#bottomButtonWithMorePage" data-position="right"
+        data-enable="true" data-drag-edge="1"&gt;
+      &lt;div id="selector" class="ui-selector"&gt;
+         &lt;div class="ui-item show-icon" data-title="2"&gt;&lt;/div&gt;
+         &lt;div class="ui-item human-icon" data-title="3"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
+
+   &lt;footer class="ui-footer ui-grid-col-3 ui-bottom-button"&gt;
+      &lt;a href="#" class="ui-btn"&gt;1&lt;/a&gt;
+      &lt;a href="#" class="ui-btn"&gt;2&lt;/a&gt;
+      &lt;a href="#" class="ui-btn"&gt;3&lt;/a&gt;
+   &lt;/footer&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -111,29 +111,29 @@
 <pre class="prettyprint">
 .drawer-elem
 {
-&nbsp;&nbsp;&nbsp;display: none;
+   display: none;
 }
 
 @media all and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;.drawer-handler
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 24px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 115px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: fixed;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 122px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: transparent;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #a4a4a4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-image: url(/* Image path */);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-size: 18px 36px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-repeat: no-repeat;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-position: 0 40px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.ui-bottom-button a + a 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
-&nbsp;&nbsp;&nbsp;}
+   .drawer-handler
+   {
+      width: 24px;
+      height: 115px;
+      position: fixed;
+      top: 122px;
+      right: 0;
+      color: transparent;
+      background-color: #a4a4a4;
+      -webkit-mask-image: url(/* Image path */);
+      -webkit-mask-size: 18px 36px;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 0 40px;
+   }
+   .ui-bottom-button a + a
+   {
+       display: none;
+   }
 }
 </pre>
 
@@ -142,20 +142,20 @@
 <pre class="prettyprint">
 (function()
 {
-&nbsp;&nbsp;&nbsp;var page = document.querySelector(&quot;#bottomButtonWithMorePage&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer = page.querySelector(&quot;#moreoptionsDrawer&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler = page.querySelector(&quot;.ui-more&quot;);
-
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.helper.DrawerMoreStyle.create(drawer,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler: &quot;.drawer-handler&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   var page = document.querySelector("#bottomButtonWithMorePage"),
+       drawer = page.querySelector("#moreoptionsDrawer"),
+       handler = page.querySelector(".ui-more");
+
+   page.addEventListener("pagebeforeshow", function()
+      {
+         if (tau.support.shape.circle)
+         {
+            tau.helper.DrawerMoreStyle.create(drawer,
+            {
+               handler: ".drawer-handler",
+            });
+         }
+      });
 })();
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/globalization_w.htm b/org.tizen.guides/html/web/ui/tau/globalization_w.htm
index 0fd27ae..e4921c3 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/globalization_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/globalization_w.htm
@@ -47,7 +47,7 @@
     <p>The TAU Globalize utility supports internationalization and localization. It wraps the <a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> functionality for easy access from Tizen Web applications, and it is extended to support the right-to-left (RTL) languages.</p>
 
         <p>This feature is supported in mobile and wearable applications only.</p>
-       
+
     <h2 id="jquery_globalize" name="jquery_globalize">jQuery and Globalize</h2>
 
     <p>Globalize is a jQuery JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data. The library works both for the browser and as a Node.js module. jQuery and Globalize have dependencies with <a href="https://github.com/rxaviers/cldrjs" target="_blank">cldr.js</a>, which is a CLDR low-level manipulation tool.</p>
@@ -64,7 +64,7 @@
 
     <h3 id="cldr" name="cldr">CLDR Data</h3>
 
-    <p>The Unicode CLDR provides the key building blocks for software to support the world&#39;s languages. It includes:</p>
+    <p>The Unicode CLDR provides the key building blocks for software to support the world's languages. It includes:</p>
     <ul>
         <li>Locale-specific patterns for formatting and parsing dates, times, time zones, numbers, and currency values</li>
         <li>Translations of names: languages, scripts, countries and regions, currencies, eras, months, weekdays, day periods, time zones, cities, and time units</li>
@@ -134,25 +134,25 @@
         <li>Set the locale using the following example code:
 <pre class="prettyprint">
 var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId = &quot;ko-KR&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId).done(function(ko)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* &quot;ko&quot; is the Globalize utility instance */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getLocale()); /* &quot;ko&quot; */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-&nbsp;&nbsp;&nbsp;})
+    localeId = "ko-KR";
+
+document.addEventListener('pageshow', function()
+   {
+      globalize.setLocale(localeId).done(function(ko)
+      {
+         /* "ko" is the Globalize utility instance */
+         console.log(ko.getLocale()); /* "ko" */
+      })
+   })
 </pre>
 
             <p>The <code>setLocale()</code> method is not synchronous, and it returns the deferred object with the methods <code>then()</code>, <code>done()</code>, and <code>fail()</code>. Use these methods to receive the Globalize utility instance.</p>
             <p>You can specify locales in 2 ways using IETF language tags, such as en, pt-BR, or zh-Hant-TW:</p>
             <ul>
-                <li>Specify the locale ID in the <code>lang</code> attribute of the body element, such as <code>&lt;body lang=&quot;ko-KR&quot;&gt;</code>.</li>
-                <li>Use a string variable as an input argument of the <code>setLocale()</code> method (for example <code>ko.setLocale(&quot;en&quot;)</code>) to overwrite the body element setting. </li>
+                <li>Specify the locale ID in the <code>lang</code> attribute of the body element, such as <code>&lt;body lang="ko-KR"&gt;</code>.</li>
+                <li>Use a string variable as an input argument of the <code>setLocale()</code> method (for example <code>ko.setLocale("en")</code>) to overwrite the body element setting. </li>
             </ul>
-            <p>If no <code>lang</code> attribute or <code>setLocale()</code> input argument is defined, the Globalize utility finds the locale by checking the <code>window.navigator.language</code> property. If the check result is false, the utility uses the default locale &quot;en&quot;.</p>
+            <p>If no <code>lang</code> attribute or <code>setLocale()</code> input argument is defined, the Globalize utility finds the locale by checking the <code>window.navigator.language</code> property. If the check result is false, the utility uses the default locale "en".</p>
             <p>The following table illustrates the locale setting method order.</p>
 
 <p align="center" class="Table"><strong>Table: Locale setting methods</strong></p>
@@ -168,7 +168,7 @@ document.addEventListener(&#39;pageshow&#39;, function()
                 </tr>
                 <tr>
                     <td>2</td>
-                    <td><code>&lt;body lang=&quot;ko-KR&quot;&gt;</code></td>
+                    <td><code>&lt;body lang="ko-KR"&gt;</code></td>
                 </tr>
                 <tr>
                     <td>3</td>
@@ -176,7 +176,7 @@ document.addEventListener(&#39;pageshow&#39;, function()
                 </tr>
                 <tr>
                     <td>4</td>
-                    <td>Default locale &quot;en&quot;</td>
+                    <td>Default locale "en"</td>
                 </tr>
                 </tbody>
             </table>
@@ -239,16 +239,16 @@ document.addEventListener(&#39;pageshow&#39;, function()
         <li><code>formatCurrency()</code>:
 <pre class="prettyprint">
 var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId = &quot;ko-KR&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
-
-document.addEventListener(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId).done(function(ko)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatCurrency(69000, currency_unit)); /* ₩69,900 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-&nbsp;&nbsp;&nbsp;})
+    localeId = "ko-KR",
+    currency_unit = "KRW"; /* ISO 4217 */
+
+document.addEventListener('pageshow', function()
+   {
+      globalize.setLocale(localeId).done(function(ko)
+      {
+         console.log(ko.formatCurrency(69000, currency_unit)); /* ₩69,900 */
+      })
+   })
 </pre>
             <p>For more information, see the <a href="http://en.wikipedia.org/wiki/ISO_4217" target="_blank">currency unit standard in ISO 4217</a>.</p>
         </li>
@@ -256,16 +256,16 @@ document.addEventListener(&#39;pageshow&#39;, function()
         <li><code>formatDate()</code>:
 <pre class="prettyprint">
 var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId = &quot;ko-KR&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;currency_unit = &quot;KRW&quot;; /* ISO 4217 */
-
-document.addEventListener(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId).done(function(ko)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatDate(new Date(), {datetime:&quot;medium&quot;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-&nbsp;&nbsp;&nbsp;})
+    localeId = "ko-KR",
+    currency_unit = "KRW"; /* ISO 4217 */
+
+document.addEventListener('pageshow', function()
+   {
+      globalize.setLocale(localeId).done(function(ko)
+         {
+            console.log(ko.formatDate(new Date(), {datetime:"medium"});
+         })
+   })
 </pre>
             <p>For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md" target="_blank">date-formatter</a>.</p>
         </li>
@@ -273,15 +273,15 @@ document.addEventListener(&#39;pageshow&#39;, function()
         <li><code>getCalendar()</code>:
 <pre class="prettyprint">
 var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId = &quot;ko-KR&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId).done(function(ko)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.getCalendar().months.format.wide, undefined, 4));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-&nbsp;&nbsp;&nbsp;})
+    localeId = "ko-KR";
+
+document.addEventListener('pageshow', function()
+   {
+      globalize.setLocale(localeId).done(function(ko)
+      {
+         console.log(ko.getCalendar().months.format.wide, undefined, 4));
+      })
+   })
 </pre>
             <p>The calendar format is specified in the <code>gregorian.json</code> file in the CLDR data.</p>
         </li>
@@ -293,37 +293,37 @@ document.addEventListener(&#39;pageshow&#39;, function()
 <pre class="prettyprint">
 index.html
 locale
-&nbsp;&nbsp;&nbsp;en.json
-&nbsp;&nbsp;&nbsp;ko.json
+   en.json
+   ko.json
 </pre>
                 </li>
                 <li>Create a JSON file for the <code>formatMessage</code> strings (custom locale strings) in locales paths:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&quot;en&quot;:
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;like&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;{0, plural, offset:1&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=0 {Be the first to like this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;=1 {You liked this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;one {You and someone else liked this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;other {You and # others liked this}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;}&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;greeting&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;hello&quot;:&quot;hello&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;bye&quot;:&quot;bye&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;longText&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;quis exercitationem culpa nesciunt nihil aut nostrum explicabo&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;reprehenderit optio amet ab temporibus asperiores quasi cupiditate.&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Voluptatum ducimus voluptates voluptas?&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]
-&nbsp;&nbsp;&nbsp;}
+   "en":
+   {
+      "like":
+      [
+         "{0, plural, offset:1",
+         "=0 {Be the first to like this}",
+         "=1 {You liked this}",
+         "one {You and someone else liked this}",
+         "other {You and # others liked this}",
+         "}"
+      ],
+      "greeting":
+      {
+         "hello":"hello",
+         "bye":"bye"
+      },
+      "longText":
+      [
+         "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non",
+         "quis exercitationem culpa nesciunt nihil aut nostrum explicabo",
+         "reprehenderit optio amet ab temporibus asperiores quasi cupiditate.",
+         "Voluptatum ducimus voluptates voluptas?"
+      ]
+   }
 }
 </pre>
                 </li>
@@ -331,17 +331,17 @@ locale
                 <li>Call the <code>setLocale()</code> method to load the custom locale files automatically:
 <pre class="prettyprint">
 var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId = &quot;ko-KR&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId).done(function(ko)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/hello&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;greeting/bye&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ko.formatMessage(&quot;longText&quot;));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-&nbsp;&nbsp;&nbsp;})
+    localeId = "ko-KR";
+
+document.addEventListener('pageshow', function()
+   {
+      globalize.setLocale(localeId).done(function(ko)
+      {
+         console.log(ko.formatMessage("greeting/hello"));
+         console.log(ko.formatMessage("greeting/bye"));
+         console.log(ko.formatMessage("longText"));
+      })
+   })
 </pre>
                 </li>
             </ol>
@@ -353,14 +353,14 @@ document.addEventListener(&#39;pageshow&#39;, function()
                 <li>Create a locale resource in the locales path:
 <pre class="prettyprint">
 {
-&nbsp;&nbsp;&nbsp;&quot;en&quot;:
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;formatter&quot;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;welcome&quot;:&quot;Hello Mr. {0}&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;thankyou&quot;:&quot;Bye Mr. {custom}.&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   "en":
+   {
+      "formatter":
+      {
+         "welcome":"Hello Mr. {0}",
+         "thankyou":"Bye Mr. {custom}."
+      }
+   }
 }
 </pre>
                 </li>
@@ -368,21 +368,21 @@ document.addEventListener(&#39;pageshow&#39;, function()
                 <li>Use the <code>messageFormatter()</code> method:
 <pre class="prettyprint">
 var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId = &quot;en-US&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId).done(function(en)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var welcomeFormatter = en.messageFormatter(&#39;formatter/welcome&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouFormatter = en.messageFormatter(&#39;formatter/thankyou&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;welcomeMessageList = [&quot;Tom&quot;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thankyouMessageList = {custom:&quot;Tom&quot;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(welcomeFormatter(welcomeMessageList));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(thankyouFormatter(thankyouMessageList));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-&nbsp;&nbsp;&nbsp;})
+    localeId = "en-US";
+
+document.addEventListener('pageshow', function()
+   {
+      globalize.setLocale(localeId).done(function(en)
+      {
+         var welcomeFormatter = en.messageFormatter('formatter/welcome'),
+             thankyouFormatter = en.messageFormatter('formatter/thankyou'),
+             welcomeMessageList = ["Tom"],
+             thankyouMessageList = {custom:"Tom"};
+
+         console.log(welcomeFormatter(welcomeMessageList));
+         console.log(thankyouFormatter(thankyouMessageList));
+      })
+   })
 </pre>
                 </li>
             </ol>
@@ -403,21 +403,21 @@ document.addEventListener(&#39;pageshow&#39;, function()
         <li>The following example has ar-EG as the given locale, and the language has an RTL direction:
 <pre class="prettyprint">
 var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId = &quot;ar-EG&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId).done(function(ar)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-&nbsp;&nbsp;&nbsp;})
+    localeId = "ar-EG";
+
+document.addEventListener('pageshow', function()
+   {
+      globalize.setLocale(localeId).done(function(ar)
+      {
+         /* Do something */
+      })
+   })
 </pre>
         </li>
 
         <li>The following example has a DOM of body with a locale-specific CSS named <code>ui-script-direction-rtl</code>:
 <pre class="prettyprint">
-&lt;body class=&quot;ui-script-direction-rtl&quot;&gt;
+&lt;body class="ui-script-direction-rtl"&gt;
 </pre>
         </li>
 
@@ -425,12 +425,12 @@ document.addEventListener(&#39;pageshow&#39;, function()
 <pre class="prettyprint">
 .ui-script-direction-rtl .ui-listview
 {
-&nbsp;&nbsp;&nbsp;direction: rtl;
+   direction: rtl;
 }
 .ui-script-direction-rtl .ui-li.ui-li-static
 {
-&nbsp;&nbsp;&nbsp;text-align: right;
-&nbsp;&nbsp;&nbsp;unicode-bidi: bidi-override;
+   text-align: right;
+   unicode-bidi: bidi-override;
 }
 </pre>
         </li>
@@ -439,15 +439,15 @@ document.addEventListener(&#39;pageshow&#39;, function()
     <p>The following example shows how to use the RTL property in a locale object (the <code>rtl</code> variable). If a given locale has an RTL direction, the variable is <code>true</code>.</p>
 <pre class="prettyprint">
 var globalize = tau.util.globalize,
-&nbsp;&nbsp;&nbsp;&nbsp;localeId = &quot;ar-EG&quot;;
-
-document.addEventListener(&#39;pageshow&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;globalize.setLocale(localeId).done(function(ar)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(ar.rtl); /* true */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-&nbsp;&nbsp;&nbsp;})
+    localeId = "ar-EG";
+
+document.addEventListener('pageshow', function()
+   {
+      globalize.setLocale(localeId).done(function(ar)
+      {
+         console.log(ar.rtl); /* true */
+      })
+   })
 </pre>
 
 
diff --git a/org.tizen.guides/html/web/ui/tau/header_ww.htm b/org.tizen.guides/html/web/ui/tau/header_ww.htm
index 0a83a50..c2d0832 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/header_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/header_ww.htm
@@ -44,13 +44,13 @@
 
 <p>To implement the header component, edit the HTML code to add the header component to your application screen:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;headerPage&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot; id=&quot;myHeader&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Long title with ExpandableHeader&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header is expandable in Circular UI.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="headerPage"&gt;
+   &lt;header class="ui-header" id="myHeader"&gt;
+      &lt;h2 class="ui-title"&gt;Long title with ExpandableHeader&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content content-padding"&gt;
+      Header is expandable in Circular UI.
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -83,29 +83,29 @@
 <p>The following examples show header events with Marquee.</p>
 
 <pre class="prettyprint">
-var page = document.querySelector(&quot;#myPage&quot;);
-
-page.addEventListener(&quot;pagebeforeshow&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var textElement = page.querySelector(&quot;.ui-title&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee = new tau.widget.Marquee(textElement);
-&nbsp;&nbsp;&nbsp;}, false);
-
-page.addEventListener(&quot;headercollapse&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (marquee)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee.reset();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}, false);
-
-page.addEventListener(&quot;headerexpandcomplete&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (marquee)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marquee.start();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}, false);
+var page = document.querySelector("#myPage");
+
+page.addEventListener("pagebeforeshow", function()
+   {
+      var textElement = page.querySelector(".ui-title"),
+          marquee = new tau.widget.Marquee(textElement);
+   }, false);
+
+page.addEventListener("headercollapse", function()
+   {
+      if (marquee)
+      {
+         marquee.reset();
+      }
+   }, false);
+
+page.addEventListener("headerexpandcomplete", function()
+   {
+      if (marquee)
+      {
+         marquee.start();
+      }
+   }, false);
 </pre>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/ui/tau/helloworld_w.htm b/org.tizen.guides/html/web/ui/tau/helloworld_w.htm
index 0175d1a..37a7d94 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/helloworld_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/helloworld_w.htm
@@ -50,17 +50,17 @@
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;myapp.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello TAU&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--HTML BODY CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta name="viewport" content="width=device-width, user-scalable=no"/&gt;
+      &lt;link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/&gt;
+      &lt;link rel="stylesheet" href="myapp.css"/&gt;
+      &lt;title&gt;Hello TAU&lt;/title&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--HTML BODY CONTENT--&gt;
+      &lt;script type="text/javascript" src="./lib/tau/mobile/js/tau.js"&gt;&lt;/script&gt;
+      &lt;script src="myapp.js"&gt;&lt;/script&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -68,38 +68,38 @@
 <h2 id="scaling">Scaling the UI</h2>
 <p>The Tizen Advanced UI (TAU)-based template provides 2 scaling methods: device-width and fixed-width.</p>
 <ul>
-       <li>Device-width scaling 
+       <li>Device-width scaling
        <p>This scaling mode is suited for most mobile devices, such as Tizen, iPhone&reg; and Android&reg;. In this mode, the viewport width is set to <code>device-width</code>, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web applications, a 320 px screen width is assumed.</p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;
+&lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt;
 </pre>
        </li>
-       <li>Fixed-width scaling 
+       <li>Fixed-width scaling
        <p>This scaling mode is best suited for Tizen devices, since the entire screen can be scaled on the viewport level. In the viewport scaling mode, set the size of all resources to fit the 360 px screen width.</p>
        <p>You can also use fixed-width scaling if you do not want to scale your application or if you want to set your own scale. In this case, declare a viewport but note that the default viewport scaling is overridden by the declared viewport. In the Tizen Web UI components, viewport scaling is set automatically to <code>device-width</code>:</p>
 <pre class="prettyprint lang-html">
-&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;
+&lt;meta name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
 </pre>
-       <p>To enable fixed-width scaling, the header must contain the <code>&lt;meta name=&quot;viewport&quot;&gt;</code> element:</p>
+       <p>To enable fixed-width scaling, the header must contain the <code>&lt;meta name="viewport"&gt;</code> element:</p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=360, initial-scale=1, user-scalable=no&quot;&gt;
+&lt;meta name="viewport" content="width=360, initial-scale=1, user-scalable=no"&gt;
 </pre>
        </li>
 </ul>
 
 <h2 id="import_tau">Importing TAU</h2>
-<p>You can import TAU with HTML. For better performance, all CSS files must be included in the header and all script elements must be put before the body element&#39;s close tag:</p>
+<p>You can import TAU with HTML. For better performance, all CSS files must be included in the header and all script elements must be put before the body element's close tag:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--HTML BODY CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--HTML BODY CONTENT--&gt;
+      &lt;script type="text/javascript" src="./lib/tau/mobile/js/tau.js"&gt;&lt;/script&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 <p>In HTML, use the <code>&lt;script&gt;</code> and <code>&lt;link&gt;</code> elements. These default elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:</p>
@@ -109,37 +109,37 @@
 </ul>
 
 <h2 id="custom_js">Running Custom JavaScript and CSS</h2>
-<p>You can add an additional <code>&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</code> or <code>&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</code> element to include your own scripts and style sheets. However, place them <strong>after</strong> the default <code>&lt;script&gt;</code> elements, as you can use any TAU APIs provided by the default libraries.</p>
+<p>You can add an additional <code>&lt;script src="&lt;CUSTOM_LIBRARY&gt;"&gt;</code> or <code>&lt;link rel="stylesheet" src="&lt;CUSTOM_CSS&gt;"&gt;</code> element to include your own scripts and style sheets. However, place them <strong>after</strong> the default <code>&lt;script&gt;</code> elements, as you can use any TAU APIs provided by the default libraries.</p>
 <p>To load your JavaScript file, include the file in the <code>&lt;script&gt;</code> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
 <pre class="prettyprint">
-&lt;script src=&quot;{YOUR_SCRIPT_PATH}&quot;&gt;&lt;/script&gt;
+&lt;script src="{YOUR_SCRIPT_PATH}"&gt;&lt;/script&gt;
 </pre>
 
 <h2 id="fill_content">Creating a Page in the Body</h2>
 
 <p>The body section of the HTML file contains 1 or more pages.</p>
-<p>To create a page in <code>&lt;body&gt;</code>, you can use the <code>&quot;ui-page&quot;</code> class with the <code>&lt;div&gt;</code> element:</p>
+<p>To create a page in <code>&lt;body&gt;</code>, you can use the <code>"ui-page"</code> class with the <code>&lt;div&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="ui-page" id="main"&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
 <p>Each page has a header, mandatory content, and a footer: </p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello World&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello TAU!&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="ui-page" id="main"&gt;
+      &lt;div class="ui-header"&gt;
+         &lt;h1&gt;Hello World&lt;/h1&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-content"&gt;
+         &lt;p&gt;Hello TAU!&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-footer"&gt;
+         &lt;button&gt;OK&lt;/button&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -147,27 +147,27 @@
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;./lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;myapp.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello TAU&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello World&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello TAU!&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;./lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta name="viewport" content="width=device-width, user-scalable=no"/&gt;
+      &lt;link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css"/&gt;
+      &lt;link rel="stylesheet" href="myapp.css"/&gt;
+      &lt;title&gt;Hello TAU&lt;/title&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div class="ui-page" id="main"&gt;
+         &lt;div class="ui-header"&gt;
+            &lt;h1&gt;Hello World&lt;/h1&gt;
+         &lt;/div&gt;
+         &lt;div class="ui-content"&gt;
+            &lt;p&gt;Hello TAU!&lt;/p&gt;
+         &lt;/div&gt;
+         &lt;div class="ui-footer"&gt;
+            &lt;button&gt;OK&lt;/button&gt;
+         &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;script type="text/javascript" src="./lib/tau/mobile/js/tau.js"&gt;&lt;/script&gt;
+      &lt;script src="myapp.js"&gt;&lt;/script&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
diff --git a/org.tizen.guides/html/web/ui/tau/helper_ww.htm b/org.tizen.guides/html/web/ui/tau/helper_ww.htm
index d996a4f..d098bb2 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/helper_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/helper_ww.htm
@@ -42,7 +42,7 @@
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var helperInstance = tau.helper.&lt;NameSpace&gt;
+   var helperInstance = tau.helper.&lt;NameSpace&gt;
 &lt;/script&gt;
 </pre>
 
@@ -56,44 +56,44 @@
 <p>The following example shows how to create your own listview style with SnapListMarqueeStyle. In the example, the list item text scrolls horizontally and the sub text appears if the list item is placed in the middle of the screen.</p>
 
 <p>To create a SnapListMarqueeStyle:</p>
-       
+
 <ol>
 <li>Edit the HTML code to add the SnapListMarqueeStyle component to your application screen.
 <p>You can add a multiline style listview as follows.</p>
 
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snaplistTest&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Bottom Button&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.SnapListview with Marquee SnapListview with Marquee
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.SnapListview with Marquee SnapListview with Marquee
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.SnapListview with Marquee SnapListview with Marquee
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-2line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.SnapListview with Marquee SnapListview with Marquee
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="snaplistTest"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Bottom Button&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;ul class="ui-listview ui-snap-listview expand-list" id="snapList"&gt;
+         &lt;li class="li-has-2line"&gt;
+            &lt;div class="ui-marquee ui-marquee-gradient"&gt;
+               1.SnapListview with Marquee SnapListview with Marquee
+            &lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+         &lt;/li&gt;
+         &lt;li class="li-has-2line"&gt;
+            &lt;div class="ui-marquee ui-marquee-gradient"&gt;
+               2.SnapListview with Marquee SnapListview with Marquee
+            &lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+         &lt;/li&gt;
+         &lt;li class="li-has-2line"&gt;
+            &lt;div class="ui-marquee ui-marquee-gradient"&gt;
+               3.SnapListview with Marquee SnapListview with Marquee
+            &lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+         &lt;/li&gt;
+         &lt;li class="li-has-2line"&gt;
+            &lt;div class="ui-marquee ui-marquee-gradient"&gt;
+               4.SnapListview with Marquee SnapListview with Marquee
+            &lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+         &lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -102,26 +102,26 @@
 <pre class="prettyprint">
 .ui-listview.expand-list li.li-has-2line .ui-marquee
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 16px, 0);
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease .5s;
+   -webkit-transform: translate3d(0, 16px, 0);
+   -webkit-transition: all ease .5s;
 }
 .ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-marquee
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+   -webkit-transform: translate3d(0, 0, 0);
+   -webkit-transition: all ease 1s;
 }
 
 .ui-listview.expand-list li.li-has-2line .ui-li-sub-text
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -20px, 0);
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease .5s;
+   -webkit-transform: translate3d(0, -20px, 0);
+   opacity: 0;
+   -webkit-transition: all ease .5s;
 }
 .ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-li-sub-text
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+   -webkit-transform: translate3d(0, 0, 0);
+   opacity: 1;
+   -webkit-transition: all ease 1s;
 }
 </pre>
 </li>
@@ -129,19 +129,19 @@
 <li>Edit the JavaScript code to make your list into a SnapListMarqueeStyle component and manage the list events:
 <pre class="prettyprint">
 &lt;script&gt;
-var page = document.getElementById(&quot;snaplistTest&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;list = document.getElementById(&quot;snapList&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
-
-page.addEventListener(&quot;pageshow&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-&nbsp;&nbsp;&nbsp;});
-
-page.addEventListener(&quot;pagehide&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper.destroy();
-&nbsp;&nbsp;&nbsp;});
+var page = document.getElementById("snaplistTest"),
+    list = document.getElementById("snapList"),
+    listHelper;
+
+page.addEventListener("pageshow", function()
+   {
+      listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+   });
+
+page.addEventListener("pagehide", function()
+   {
+      listHelper.destroy();
+   });
 &lt;/script&gt;
 </pre>
 </li>
@@ -149,7 +149,7 @@ page.addEventListener(&quot;pagehide&quot;, function()
 
 <p>The following table shows the options you have in creating your SnapListMarqueeStyle component.</p>
 
-<p align="center" class="Table"><strong>Table: SnapListMarqueeStyle component options</strong></p>     
+<p align="center" class="Table"><strong>Table: SnapListMarqueeStyle component options</strong></p>
 <table>
                <tbody>
                <tr>
@@ -177,16 +177,16 @@ page.addEventListener(&quot;pagehide&quot;, function()
                <p>This method is supported since Tizen 2.3.</p>
                <p>The following code example shows the use of the method:</p>
 <pre class="prettyprint">
-&lt;ul class=&quot;ui-listview ui-snap-listview&quot; id=&quot;snapList&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;some element or text&lt;/li&gt;
+&lt;ul class="ui-listview ui-snap-listview" id="snapList"&gt;
+   &lt;li&gt;some element or text&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+   var list = document.getElementById("snapList"),
+       listHelper;
 
-&nbsp;&nbsp;&nbsp;/* Create the helper */
-&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+   /* Create the helper */
+   listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
 &lt;/script&gt;
 </pre>
 </li>
@@ -195,19 +195,19 @@ page.addEventListener(&quot;pagehide&quot;, function()
                <p>This method is supported since Tizen 2.3. It has no return value.</p>
                <p>The following code example shows the use of the method:</p>
 <pre class="prettyprint">
-&lt;ul class=&quot;ui-listview ui-snap-listview&quot; id=&quot;snapList&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;some element or text&lt;/li&gt;
+&lt;ul class="ui-listview ui-snap-listview" id="snapList"&gt;
+   &lt;li&gt;some element or text&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
+   var list = document.getElementById("snapList"),
+       listHelper;
 
-&nbsp;&nbsp;&nbsp;/* Create the helper */
-&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+   /* Create the helper */
+   listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
 
-&nbsp;&nbsp;&nbsp;/* Destroy the helper */
-&nbsp;&nbsp;&nbsp;listHelper.destroy();
+   /* Destroy the helper */
+   listHelper.destroy();
 &lt;/script&gt;
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/indexscrollbar_ww.htm b/org.tizen.guides/html/web/ui/tau/indexscrollbar_ww.htm
index 3468510..1a8749f 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/indexscrollbar_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/indexscrollbar_ww.htm
@@ -50,30 +50,30 @@
 <ol>
 <li>Edit the HTML code to add the component to your application screen:
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageIndexScrollbar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header ui-header-small&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title ui-title-text-fadeout&quot;&gt;Index Scroll Bar&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-snap-listview&quot; id=&quot;list1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-listview-divider&quot;&gt;A&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Anton&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-listview-divider&quot;&gt;B&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Barry&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Bob&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-listview-divider&quot;&gt;C&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Carry&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-listview-divider&quot;&gt;D&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Daisy&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-listview-divider&quot;&gt;E&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Eric&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-listview-divider&quot;&gt;F&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Fay&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-listview-divider&quot;&gt;G&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Garry&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/section&gt;
+&lt;div class="ui-page ui-page-active" id="pageIndexScrollbar"&gt;
+   &lt;header class="ui-header ui-header-small"&gt;
+      &lt;h2 class="ui-title ui-title-text-fadeout"&gt;Index Scroll Bar&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div id="indexscrollbar"&gt;&lt;/div&gt;
+   &lt;section class="ui-content"&gt;
+      &lt;ul class="ui-listview ui-snap-listview" id="list1"&gt;
+         &lt;li class="ui-listview-divider"&gt;A&lt;/li&gt;
+         &lt;li&gt;Anton&lt;/li&gt;
+         &lt;li class="ui-listview-divider"&gt;B&lt;/li&gt;
+         &lt;li&gt;Barry&lt;/li&gt;
+         &lt;li&gt;Bob&lt;/li&gt;
+         &lt;li class="ui-listview-divider"&gt;C&lt;/li&gt;
+         &lt;li&gt;Carry&lt;/li&gt;
+         &lt;li class="ui-listview-divider"&gt;D&lt;/li&gt;
+         &lt;li&gt;Daisy&lt;/li&gt;
+         &lt;li class="ui-listview-divider"&gt;E&lt;/li&gt;
+         &lt;li&gt;Eric&lt;/li&gt;
+         &lt;li class="ui-listview-divider"&gt;F&lt;/li&gt;
+         &lt;li&gt;Fay&lt;/li&gt;
+         &lt;li class="ui-listview-divider"&gt;G&lt;/li&gt;
+         &lt;li&gt;Garry&lt;/li&gt;
+       &lt;/ul&gt;
+   &lt;/section&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -81,28 +81,28 @@
 <li>Edit the JavaScript code to manage the index scroll bar events and other functionality:
 <p>To create a component selectively:</p>
 <pre class="prettyprint">
-var indexScrollbarElement = document.getElementById(&quot;indexscrollbar&quot;);
+var indexScrollbarElement = document.getElementById("indexscrollbar");
 
 if (!tau.support.shape.circle)
 {
-&nbsp;&nbsp;&nbsp;/* Create IndexScrollbar */
-&nbsp;&nbsp;&nbsp;indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
+   /* Create IndexScrollbar */
+   indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
 }
 else
 {
-&nbsp;&nbsp;&nbsp;/* Create CircularIndexScrollbar */
-&nbsp;&nbsp;&nbsp;indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
+   /* Create CircularIndexScrollbar */
+   indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
 }
 </pre>
 
 <p>To use the callback:</p>
 <pre class="prettyprint">
-indexScrollbarElement.addEventListener(&quot;select&quot;, function(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var index = event.detail.index;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Do something using the index */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(index);
-&nbsp;&nbsp;&nbsp;});
+indexScrollbarElement.addEventListener("select", function(event)
+   {
+      var index = event.detail.index;
+      /* Do something using the index */
+      console.log(index);
+   });
 </pre>
 
 <p>In the following example, the list scrolls to the position of the list item defined using the <code>ui-listview-divider</code> class, selected by the index scroll bar.</p>
@@ -111,76 +111,76 @@ indexScrollbarElement.addEventListener(&quot;select&quot;, function(event)
 <pre class="prettyprint">
 (function()
 {
-&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;pageIndexScrollbar&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listviewElement = document.getElementById(&quot;list1&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isCircle = tau.support.shape.circle,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar;
-
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pageshow&quot;, function(ev)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var indexScrollbarElement = document.getElementById(&quot;indexscrollbar&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* List dividers */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listDividers =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listviewElement.getElementsByClassName(&quot;ui-listview-divider&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dividers = {}, /* Collection of list dividers */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indices = [], /* Index list */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i, idx;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* For all list dividers */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; listDividers.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add the list divider elements to the collection */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divider = listDividers[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;idx = divider.innerText;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dividers[idx] = divider;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add the index to the index list */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indices.push(idx);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller = tau.util.selectors.getScrollableParent(listviewElement);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!isCircle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{index: indices,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;container: scroller});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create IndexScrollbar */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{index: indices});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add SnapListview item &quot;selected&quot; event handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listviewElement.addEventListener(&quot;selected&quot;, function(ev)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var indexValue = ev.target.textContent[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar.value(indexValue);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add IndexScrollbar index &quot;select&quot; event handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbarElement.addEventListener(&quot;select&quot;, function(ev)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var divider,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;idx = ev.detail.index;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divider = dividers[idx];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (divider &amp;&amp; scroller)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Scroll to the ui-listview-divider element */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagehide&quot;, function(ev)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar.destroy();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   var page = document.getElementById("pageIndexScrollbar"),
+       listviewElement = document.getElementById("list1"),
+       isCircle = tau.support.shape.circle,
+       scroller,
+       indexScrollbar;
+
+   page.addEventListener("pageshow", function(ev)
+      {
+         var indexScrollbarElement = document.getElementById("indexscrollbar"),
+             /* List dividers */
+             listDividers =
+                listviewElement.getElementsByClassName("ui-listview-divider"),
+             dividers = {}, /* Collection of list dividers */
+             indices = [], /* Index list */
+             divider,
+             i, idx;
+
+         /* For all list dividers */
+         for (i = 0; i &lt; listDividers.length; i++)
+         {
+            /* Add the list divider elements to the collection */
+            divider = listDividers[i];
+            idx = divider.innerText;
+            dividers[idx] = divider;
+
+            /* Add the index to the index list */
+            indices.push(idx);
+         }
+
+         scroller = tau.util.selectors.getScrollableParent(listviewElement);
+
+         if (!isCircle)
+         {
+            indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement,
+                                                           {index: indices,
+                                                            container: scroller});
+         }
+         else
+         {
+            /* Create IndexScrollbar */
+            indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement,
+                                                                   {index: indices});
+
+            /* Add SnapListview item "selected" event handler */
+            listviewElement.addEventListener("selected", function(ev)
+            {
+               var indexValue = ev.target.textContent[0];
+               indexScrollbar.value(indexValue);
+            });
+         }
+
+         /* Add IndexScrollbar index "select" event handler */
+         indexScrollbarElement.addEventListener("select", function(ev)
+         {
+            var divider,
+                idx = ev.detail.index;
+
+            divider = dividers[idx];
+            if (divider &amp;&amp; scroller)
+            {
+               /* Scroll to the ui-listview-divider element */
+               scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
+            }
+         });
+      });
+
+   page.addEventListener("pagehide", function(ev)
+      {
+         indexScrollbar.destroy();
+      });
 }());
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/list_ww.htm b/org.tizen.guides/html/web/ui/tau/list_ww.htm
index 1d56124..25c37a7 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/list_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/list_ww.htm
@@ -47,49 +47,49 @@
 <ol>
 <li>Edit the HTML code to add the list component to your application screen:
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;snapListPage&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Snap List&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview ui-snap-listview expand-list&quot; id=&quot;snapList&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.3line SnapListview with Marquee SnapListview with Marquee
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.3line SnapListview with Marquee SnapListview with Marquee
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.3line SnapListview with Marquee SnapListview with Marquee
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.3line SnapListview with Marquee SnapListview with Marquee
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;li-has-3line&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-marquee ui-marquee-gradient&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5.3line SnapListview with Marquee SnapListview with Marquee
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;li-text-sub ui-li-sub-text&quot;&gt;sub-text&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="snapListPage"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Snap List&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;ul class="ui-listview ui-snap-listview expand-list" id="snapList"&gt;
+         &lt;li class="li-has-3line"&gt;
+            &lt;div class="ui-marquee ui-marquee-gradient"&gt;
+               1.3line SnapListview with Marquee SnapListview with Marquee
+            &lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+         &lt;/li&gt;
+         &lt;li class="li-has-3line"&gt;
+            &lt;div class="ui-marquee ui-marquee-gradient"&gt;
+               2.3line SnapListview with Marquee SnapListview with Marquee
+            &lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+         &lt;/li&gt;
+         &lt;li class="li-has-3line"&gt;
+            &lt;div class="ui-marquee ui-marquee-gradient"&gt;
+               3.3line SnapListview with Marquee SnapListview with Marquee
+            &lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+         &lt;/li&gt;
+         &lt;li class="li-has-3line"&gt;
+            &lt;div class="ui-marquee ui-marquee-gradient"&gt;
+               4.3line SnapListview with Marquee SnapListview with Marquee
+            &lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+         &lt;/li&gt;
+         &lt;li class="li-has-3line"&gt;
+            &lt;div class="ui-marquee ui-marquee-gradient"&gt;
+               5.3line SnapListview with Marquee SnapListview with Marquee
+            &lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+            &lt;div class="li-text-sub ui-li-sub-text"&gt;sub-text&lt;/div&gt;
+         &lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -98,87 +98,87 @@
 <pre class="prettyprint">
 .ui-listview li .li-text-sub
 {
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
-&nbsp;&nbsp;&nbsp;line-height: 32px;
-&nbsp;&nbsp;&nbsp;color: rgb(51, 51, 51);
+   display: block;
+   text-overflow: ellipsis;
+   overflow: hidden;
+   line-height: 32px;
+   color: rgb(51, 51, 51);
 }
 
 .ui-listview li.li-has-3line
 {
-&nbsp;&nbsp;&nbsp;padding-top: 0;
-&nbsp;&nbsp;&nbsp;padding-bottom: 0;
-&nbsp;&nbsp;&nbsp;height: 115px;
+   padding-top: 0;
+   padding-bottom: 0;
+   height: 115px;
 }
 
 .ui-listview.expand-list li.li-has-3line .ui-marquee
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 30px, 0);
+   -webkit-transform: translate3d(0, 30px, 0);
 }
 
 .ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-marquee
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+   -webkit-transform: translate3d(0, 0, 0);
+   -webkit-transition: all ease 1s;
 }
 
 .ui-listview.expand-list li.li-has-3line .ui-li-sub-text:nth-child(2)
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -10px, 0);
-&nbsp;&nbsp;&nbsp;opacity: 0;
+   -webkit-transform: translate3d(0, -10px, 0);
+   opacity: 0;
 }
 
 .ui-listview.expand-list
 li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:nth-child(2)
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+   -webkit-transform: translate3d(0, 0, 0);
+   opacity: 1;
+   -webkit-transition: all ease 1s;
 }
 
 .ui-listview.expand-list li.li-has-3line .ui-li-sub-text:last-child
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, -42px, 0);
-&nbsp;&nbsp;&nbsp;opacity: 0;
+   -webkit-transform: translate3d(0, -42px, 0);
+   opacity: 0;
 }
 
 .ui-listview.expand-list
 li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:last-child
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all ease 1s;
+   -webkit-transform: translate3d(0, 0, 0);
+   opacity: 1;
+   -webkit-transition: all ease 1s;
 }
 </pre>
 </li>
 
 <li>Edit the JavaScript code to manage the list events and other functionality:
 <pre class="prettyprint">
-var page = document.querySelector(&quot;#snapListPage&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
-
-page.addEventListener(&quot;pagebeforeshow&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var list = document.getElementById(&quot;snapList&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
-
-page.addEventListener(&quot;pagehide&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (listHelper)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper.destroy();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+var page = document.querySelector("#snapListPage"),
+    listHelper;
+
+page.addEventListener("pagebeforeshow", function()
+   {
+      var list = document.getElementById("snapList");
+
+      if (tau.support.shape.circle)
+      {
+         listHelper =
+            tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+      }
+   });
+
+page.addEventListener("pagehide", function()
+   {
+      if (tau.support.shape.circle)
+      {
+         if (listHelper)
+         {
+            listHelper.destroy();
+         }
+      }
+   });
 </pre>
 </li>
 </ol>
diff --git a/org.tizen.guides/html/web/ui/tau/managing_page_w.htm b/org.tizen.guides/html/web/ui/tau/managing_page_w.htm
index 182fb9b..95ae77f 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/managing_page_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/managing_page_w.htm
@@ -78,34 +78,34 @@
 <ol>
 <li><p>Create a single page with the following code:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;Simple page
+&lt;div class="ui-page"&gt;
+   Simple page
 &lt;/div&gt;
 </pre>
 
 <p>To create a page for your application, use the <code>class</code> attribute with the <code>ui-page</code> value. TAU uses that information to properly acquire the <code>div</code> element and bind the DOM element to its JavaScript component implementation.</p>
 </li>
-<li><p>Create a header area by using the <code>class=&quot;ui-header&quot;</code> attribute:</p>
+<li><p>Create a header area by using the <code>class="ui-header"</code> attribute:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;This is a header&lt;/div&gt;
+&lt;div class="ui-page"&gt;
+   &lt;div class="ui-header"&gt;This is a header&lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
-<li><p>Create a footer area by using the <code>class=&quot;ui-footer&quot;</code> attribute:</p>
+<li><p>Create a footer area by using the <code>class="ui-footer"</code> attribute:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;This is a footer&lt;/div&gt;
+&lt;div class="ui-page"&gt;
+   &lt;div class="ui-footer"&gt;This is a footer&lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
 
-<li><p>Create the main content area by using the <code>class=&quot;ui-content&quot;</code> attribute:</p>
+<li><p>Create the main content area by using the <code>class="ui-content"</code> attribute:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;MyApplication header&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello world!
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;Application status line&lt;/div&gt;
+&lt;div class="ui-page"&gt;
+   &lt;div class="ui-header"&gt;MyApplication header&lt;/div&gt;
+   &lt;div class="ui-content"&gt;
+      Hello world!
+   &lt;/div&gt;
+   &lt;div class="ui-footer"&gt;Application status line&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 <p>The previous example shows a full page structure. The header and footer areas can contain multiple UI components, such as buttons or images.</p>
@@ -113,16 +113,16 @@
 <li>
 <p>You can also create a popup for your page:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;Popup Open Page&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#popup&quot; class=&quot;ui-btn&quot; data-rel=&quot;popup&quot;&gt;Popup Open&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;popup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Popup Page&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;Popup Content&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page"&gt;
+   &lt;div class="ui-header"&gt;Popup Open Page&lt;/div&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;a href="#popup" class="ui-btn" data-rel="popup"&gt;Popup Open&lt;/a&gt;
+   &lt;/div&gt;
+
+   &lt;div id="popup" class="ui-popup"&gt;
+      &lt;div class="ui-popup-header"&gt;Popup Page&lt;/div&gt;
+      &lt;div class="ui-popup-content"&gt;Popup Content&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 <p>The popup works because TAU opens (makes visible) the page whose <code>id</code> attribute corresponds to the <code>#hashtag</code> page. This is basic page routing; for more information, see <a href="#pageRouting">Page Routing</a>.</p>
@@ -132,21 +132,21 @@
 <h2 id="createtwo">Creating Multiple Pages in One HTML Code</h2>
 
 
-<p>You can implement a template containing multiple <code>page</code> containers in the application&#39;s <code>index.html</code> file.</p>
+<p>You can implement a template containing multiple <code>page</code> containers in the application's <code>index.html</code> file.</p>
 <p>In a multi-page layout, the main page is defined with the <code>ui-page-active</code> class. If no page has the <code>ui-page-active</code> class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="ui-page ui-page-active" id="first"&gt;
+      &lt;div class="ui-content"&gt;
+         &lt;!--CONTENT--&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
+
+   &lt;div class="ui-page" id="two"&gt;
+      &lt;div class="ui-content"&gt;
+         &lt;!--CONTENT--&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -162,31 +162,31 @@
 <p>TAU uses every <code>&lt;a&gt;</code> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper <code>href</code> attribute work with the framework router. The active page has a <code>ui-page-active</code> class assigned. Set that class yourself to be sure the correct page is displayed.</p>
 <pre class="prettyprint">
 &lt;!--pageOne.html--&gt;
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageTwo.html&quot;&gt;Go to page two&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="first"&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;a href="pageTwo.html"&gt;Go to page two&lt;/a&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;!--pageTwo.html--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;pageOne.html&quot;&gt;Go to page one&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="two"&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;a href="pageOne.html"&gt;Go to page one&lt;/a&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 <p>With multiple pages in one HTML code, you can use only the ID of the page in the <code>href</code> attribute:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#two&quot;&gt;Go to page two&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="first"&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;a href="#two"&gt;Go to page two&lt;/a&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
-&lt;div class=&quot;ui-page&quot; id=&quot;two&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#first&quot;&gt;Go to page one&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="two"&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;a href="#first"&gt;Go to page one&lt;/a&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -194,53 +194,53 @@
 <p>You can change pages through the TAU API by using the <code>tau.changePage()</code> method:</p>
 <pre class="prettyprint">
 &lt;!--pageOne.html--&gt;
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;first&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;You are viewing the first page of the example.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;first-button&quot;&gt;Click here to change to page two&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el1 = document.getElementById(&quot;first-button&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el1.addEventListener(&quot;click&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageTwo.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;div class="ui-page ui-page-active" id="first"&gt;
+   &lt;div class="ui-content"&gt;
+      You are viewing the first page of the example.
+      &lt;button id="first-button"&gt;Click here to change to page two&lt;/button&gt;
+   &lt;/div&gt;
+   &lt;script&gt;
+      var el1 = document.getElementById("first-button");
+      el1.addEventListener("click", function()
+         {
+            tau.changePage("pageTwo.html");
+         });
+   &lt;/script&gt;
 &lt;/div&gt;
 
 &lt;!--pageTwo.html--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;second&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the second page of the example.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;second-button&quot;&gt;Click here to change to page one&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var el2 = document.getElementById(&quot;second-button&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el2.addEventListener(&quot;click&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(&quot;pageOne.html&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+&lt;div class="ui-page" id="second"&gt;
+   &lt;div class="ui-content"&gt;
+      This is the second page of the example.
+      &lt;button id="second-button"&gt;Click here to change to page one&lt;/button&gt;
+   &lt;/div&gt;
+   &lt;script&gt;
+      var el2 = document.getElementById("second-button");
+      el2.addEventListener("click", function()
+         {
+            tau.changePage("pageOne.html");
+         });
+   &lt;/script&gt;
 &lt;/div&gt;
 </pre>
 </li>
 
 <li>To load pages from external resources:
-<p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <code>base</code> element&#39;s <code>href</code> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
+<p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <code>base</code> element's <code>href</code> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
 <p>To load pages from external resources, define the proper local address in the <code>href</code> attribute of the link:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot;&gt;Change to external&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page"&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;a href="external_text.html"&gt;Change to external&lt;/a&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-<p>To create an external link that is not supposed to be handled by the TAU router, use the <code>rel=&quot;external&quot;</code>, <code>data-ajax=&quot;false&quot;</code>, or <code>target=&quot;_self&quot;</code> attribute:</p>
+<p>To create an external link that is not supposed to be handled by the TAU router, use the <code>rel="external"</code>, <code>data-ajax="false"</code>, or <code>target="_self"</code> attribute:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;external_text.html&quot; target=&quot;_self&quot;&gt;Change to external&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page"&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;a href="external_text.html" target="_self"&gt;Change to external&lt;/a&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/moreoptions_ww.htm b/org.tizen.guides/html/web/ui/tau/moreoptions_ww.htm
index 5fd6008..c3af15e 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/moreoptions_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/moreoptions_ww.htm
@@ -48,49 +48,49 @@
 
 <li>Edit the HTML code to add the more options component to your application screen:
 <pre class="prettyprint">
-&lt;div id=&quot;moreoptionsPage&quot; class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;./moreoptions.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header ui-has-more&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;More Options&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-more ui-icon-overflow&quot;&gt;More Options&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a real pleasure for me to finally get to meet you. My colleagues join me
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;in sending you our holiday greetings.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Rectangular profile--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;moreoptionsPopup&quot; class=&quot;ui-popup&quot; data-transition=&quot;slideup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-header&quot;&gt;Options&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Circular profile--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;moreoptionsDrawer&quot; class=&quot;ui-drawer&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-drawer-target=&quot;#moreoptionsPage&quot; data-position=&quot;right&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-enable=&quot;true&quot; data-drag-edge=&quot;1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;selector&quot; class=&quot;ui-selector&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item show-icon&quot; data-title=&quot;Show&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item human-icon&quot; data-title=&quot;Human&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item delete-icon&quot; data-title=&quot;Delete&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item show-icon&quot; data-title=&quot;Show&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item human-icon&quot; data-title=&quot;Human&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item delete-icon&quot; data-title=&quot;Delete&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item x-icon&quot; data-title=&quot;X Icon&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item fail-icon&quot; data-title=&quot;Fail&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item show-icon&quot; data-title=&quot;Show&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item human-icon&quot; data-title=&quot;Human&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item delete-icon&quot; data-title=&quot;Delete&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item show-icon&quot; data-title=&quot;Show&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-item human-icon&quot; data-title=&quot;Human&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="moreoptionsPage" class="ui-page"&gt;
+   &lt;link rel="stylesheet" href="./moreoptions.css"&gt;
+   &lt;header class="ui-header ui-has-more"&gt;
+      &lt;h2 class="ui-title"&gt;More Options&lt;/h2&gt;
+      &lt;button type="button" class="ui-more ui-icon-overflow"&gt;More Options&lt;/button&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content content-padding"&gt;
+      It was a real pleasure for me to finally get to meet you. My colleagues join me
+      in sending you our holiday greetings.
+   &lt;/div&gt;
+
+   &lt;!--Rectangular profile--&gt;
+   &lt;div id="moreoptionsPopup" class="ui-popup" data-transition="slideup"&gt;
+      &lt;div class="ui-popup-header"&gt;Options&lt;/div&gt;
+      &lt;div class="ui-popup-content"&gt;
+         &lt;ul class="ui-listview"&gt;
+            &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
+
+   &lt;!--Circular profile--&gt;
+   &lt;div id="moreoptionsDrawer" class="ui-drawer"
+        data-drawer-target="#moreoptionsPage" data-position="right"
+        data-enable="true" data-drag-edge="1"&gt;
+      &lt;div id="selector" class="ui-selector"&gt;
+         &lt;div class="ui-item show-icon" data-title="Show"&gt;&lt;/div&gt;
+         &lt;div class="ui-item human-icon" data-title="Human"&gt;&lt;/div&gt;
+         &lt;div class="ui-item delete-icon" data-title="Delete"&gt;&lt;/div&gt;
+         &lt;div class="ui-item show-icon" data-title="Show"&gt;&lt;/div&gt;
+         &lt;div class="ui-item human-icon" data-title="Human"&gt;&lt;/div&gt;
+         &lt;div class="ui-item delete-icon" data-title="Delete"&gt;&lt;/div&gt;
+         &lt;div class="ui-item x-icon" data-title="X Icon"&gt;&lt;/div&gt;
+         &lt;div class="ui-item fail-icon" data-title="Fail"&gt;&lt;/div&gt;
+         &lt;div class="ui-item show-icon" data-title="Show"&gt;&lt;/div&gt;
+         &lt;div class="ui-item human-icon" data-title="Human"&gt;&lt;/div&gt;
+         &lt;div class="ui-item delete-icon" data-title="Delete"&gt;&lt;/div&gt;
+         &lt;div class="ui-item show-icon" data-title="Show"&gt;&lt;/div&gt;
+         &lt;div class="ui-item human-icon" data-title="Human"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -100,21 +100,21 @@
 <pre class="prettyprint">
 #moreoptionsDrawer
 {
-&nbsp;&nbsp;&nbsp;display: none;
+   display: none;
 }
 
 @media all and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;#moreoptionsDrawer
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: rgba(255, 255, 255, 0.1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 100%;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;#moreoptionsPopup
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
-&nbsp;&nbsp;&nbsp;}
+   #moreoptionsDrawer
+   {
+      display: block;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 100%;
+   }
+   #moreoptionsPopup
+   {
+      display: none;
+   }
 }
 </pre>
 
@@ -124,44 +124,44 @@
 <pre class="prettyprint">
 (function()
 {
-&nbsp;&nbsp;&nbsp;var&nbsp;page&nbsp;=&nbsp;document.querySelector(&quot;#moreoptionsPage&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup&nbsp;=&nbsp;page.querySelector(&quot;#moreoptionsPopup&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler&nbsp;=&nbsp;page.querySelector(&quot;.ui-more&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer&nbsp;=&nbsp;page.querySelector(&quot;#moreoptionsDrawer&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selector&nbsp;=&nbsp;page.querySelector(&quot;#selector&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clickHandlerBound;
-
-&nbsp;&nbsp;&nbsp;function&nbsp;clickHandler(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.openPopup(popup);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;,&nbsp;function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(tau.support.shape.circle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper&nbsp;=&nbsp;tau.helper.DrawerMoreStyle.create(drawer,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler:&nbsp;&quot;.drawer-handler&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;Shape&nbsp;is&nbsp;square */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clickHandlerBound&nbsp;=&nbsp;clickHandler.bind(null);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler.addEventListener(&quot;click&quot;,&nbsp;clickHandlerBound);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforehide&quot;,&nbsp;function()&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(tau.support.shape.circle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler.removeEventListener(&quot;click&quot;,&nbsp;clickHandlerBound);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper.destroy();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   var page = document.querySelector("#moreoptionsPage"),
+       popup = page.querySelector("#moreoptionsPopup"),
+       handler = page.querySelector(".ui-more"),
+       drawer = page.querySelector("#moreoptionsDrawer"),
+       selector = page.querySelector("#selector"),
+       helper,
+       clickHandlerBound;
+
+   function clickHandler(event)
+   {
+      tau.openPopup(popup);
+   }
+
+   page.addEventListener("pagebeforeshow", function()
+      {
+         if (tau.support.shape.circle)
+         {
+            helper = tau.helper.DrawerMoreStyle.create(drawer,
+            {
+               handler: ".drawer-handler"
+            });
+         }
+         else
+         {
+            /* Shape is square */
+            clickHandlerBound = clickHandler.bind(null);
+            handler.addEventListener("click", clickHandlerBound);
+         }
+      });
+
+   page.addEventListener("pagebeforehide", function()
+      {
+         if (tau.support.shape.circle)
+         {
+            handler.removeEventListener("click", clickHandlerBound);
+            helper.destroy();
+         }
+      });
 })();
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/notepad_w.htm b/org.tizen.guides/html/web/ui/tau/notepad_w.htm
index c9c71a6..8356402 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/notepad_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/notepad_w.htm
@@ -53,33 +53,33 @@
 <p>Because the application runs on mobile or wearable devices, make sure that you have the correct <code>tau.css</code> styles for the corresponding profile:</p>
 <ul><li>Mobile:
 <pre class="prettyprint">
-&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;lib/tau/mobile/theme/default/tau.min.css&quot;/&gt;
+&lt;link rel="stylesheet" type="text/css"
+      href="lib/tau/mobile/theme/default/tau.min.css"/&gt;
 </pre></li>
        <li>Wearable:
 <pre class="prettyprint">
-&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;lib/tau/wearable/theme/default/tau.min.css&quot;/&gt;
+&lt;link rel="stylesheet" type="text/css"
+      href="lib/tau/wearable/theme/default/tau.min.css"/&gt;
 </pre>
        </li></ul>
 <p>Add also your own styles for the application:</p>
 <pre class="prettyprint">
-&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
+&lt;link rel="stylesheet" type="text/css" href="css/style.css"/&gt;
 </pre>
 
 <p>The following example shows how the section header looks after editing:</p>
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Tizen basic template generated by Tizen Web IDE&quot;/&gt;
+   &lt;meta charset="utf-8"/&gt;
+   &lt;meta name="viewport"
+         content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
+   &lt;meta name="description" content="Tizen basic template generated by Tizen Web IDE"/&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;title&gt;Notepad&lt;/title&gt;
+   &lt;title&gt;Notepad&lt;/title&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;!--Use &#39;mobile&#39; or &#39;wearable&#39; to choose the device TAU profile--&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
+   &lt;!--Use 'mobile' or 'wearable' to choose the device TAU profile--&gt;
+   &lt;link rel="stylesheet" type="text/css" href="lib/tau/mobile/theme/default/tau.css"/&gt;
+   &lt;link rel="stylesheet" type="text/css" href="css/style.css"/&gt;
 &lt;/head&gt;
 </pre>
 </li>
@@ -88,40 +88,40 @@
 <li>The main page is the first page, defined with the <code>div</code> block with the <code>ui-page</code> class and <code>main</code> id.
        <ol type="a"><li>Add the title header (<strong>Notes</strong>) for the page:
 <pre class="prettyprint">
-&lt;div id=&quot;main&quot; class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
+&lt;div id="main" class="ui-page"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h1&gt;Notes&lt;/h1&gt;
+   &lt;/header&gt;
 &lt;/div&gt;
 </pre></li>
                <li>Add content for the main page by adding a <code>div</code> element with
                        the <code>_ui-content</code> class. Add to this a <code>ul</code> element, which creates the list of notes.
-                       <p>Set the <code>data-scroll=&quot;y&quot;</code> and <code>data-handler=&quot;true&quot;</code> attributes.</p>
+                       <p>Set the <code>data-scroll="y"</code> and <code>data-handler="true"</code> attributes.</p>
                        <p>The item in the list is represented as a <code>li</code> element. When a note on the main page is clicked, the application triggers the <code>changepage</code> event to the <code>editor</code> page and shows the item.</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
+&lt;div class="ui-content" data-scroll="y" data-handler="true"&gt;
+   &lt;ul class="ui-listview" id="notesList"&gt;&lt;/ul&gt;
 &lt;/div&gt;
 </pre></li>
                <li>Add a navigation button to the application to change to the editor page. The button is placed in the footer, and it is created from an <code>a</code> element,
-                       which has the <code>id=&quot;newBtn&quot;</code> attribute.
+                       which has the <code>id="newBtn"</code> attribute.
 <pre class="prettyprint">
-&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
+&lt;div class="ui-footer"&gt;
+   &lt;a class="ui-btn" href="javascript:void()" id="newBtn"&gt;New note&lt;/a&gt;
 &lt;/div&gt;
 </pre></li></ol>
        <p>The above examples apply to a wearable application. The following example shows the full code for the main page in a mobile application:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notes&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot; data-scroll=&quot;y&quot; data-handler=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;notesList&quot;&gt;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; href=&quot;javascript:void()&quot; id=&quot;newBtn&quot;&gt;New note&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="main"&gt;
+   &lt;div class"ui-header" data-position="fixed"&gt;
+      &lt;h1&gt;Notes&lt;/h1&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-content" data-scroll="y" data-handler="true"&gt;
+      &lt;ul class="ui-listview" id="notesList"&gt;&lt;/ul&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-footer"&gt;
+      &lt;a class="ui-btn" href="javascript:void()" id="newBtn"&gt;New note&lt;/a&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -132,30 +132,30 @@
 </li>
 
 <li>On the editing page, the header and footer are similar to the main page.
-<p> The only difference is that the action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a <code>div</code> block with the <code>id=&quot;editor&quot;</code> and <code>class=&quot;ui-page&quot;</code> attributes.</p>
+<p> The only difference is that the action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a <code>div</code> block with the <code>id="editor"</code> and <code>class="ui-page"</code> attributes.</p>
 <p>The editing page is needed for adding or editing a selected note. It has a <code>textarea</code> element to allow the user to edit the selected note.</p>
 
 <pre class="prettyprint">
 &lt;!--This code applies to wearable applications--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;editor&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Editor&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id=&quot;editorField&quot; placeholder=&quot;enter note&quot;&gt;&lt;/textarea&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;javascript:void()&quot; id=&quot;saveBtn&quot;&gt;Save&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="editor"&gt;
+   &lt;div class="ui-header"&gt;
+      &lt;h1&gt;Editor&lt;/h1&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;textarea id="editorField" placeholder="enter note"&gt;&lt;/textarea&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-footer"&gt;
+      &lt;a href="javascript:void()" id="saveBtn"&gt;Save&lt;/a&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre></li></ol></li>
 
 <li>Link to the TAU library sources and add the script to the application:
 <pre class="prettyprint">
-&lt;script src=&quot;lib/jquery.js&quot;&gt;&lt;/script&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-build-remove=&quot;false&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
+&lt;script src="lib/jquery.js"&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="lib/tau/mobile/js/tau.js"
+        data-build-remove="false"&gt;&lt;/script&gt;
+&lt;script src="js/main.js"&gt;&lt;/script&gt;
 </pre>
 
 <p>The <code>index.html</code> file is now ready.</p>
@@ -165,271 +165,271 @@
 <pre class="prettyprint">
 a
 {
-&nbsp;&nbsp;&nbsp;color: #FFF;
+   color: #FFF;
 }
 
 #notesList.ui-listview
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
+   width: 100%;
 }
 
 #notesList.ui-listview li
 {
-&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;white-space: nowrap;
+   margin: 0;
+   white-space: nowrap;
 }
 
 #notesList.ui-listview li .ui-inline
 {
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;right: 5px;
-&nbsp;&nbsp;&nbsp;top: 5px;
+   position: absolute;
+   right: 5px;
+   top: 5px;
 }
 
 #notesList.ui-listview li .ui-swipe-item-cover-inner
 {
-&nbsp;&nbsp;&nbsp;text-overflow: ellipsis;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
+   text-overflow: ellipsis;
+   overflow: hidden;
 }
 
 #editor .ui-scrollview-view
 {
-&nbsp;&nbsp;&nbsp;height: 100%;
+   height: 100%;
 }
 
 #editor textarea
 {
-&nbsp;&nbsp;&nbsp;height: 95%;
-&nbsp;&nbsp;&nbsp;width: 100%;
+   height: 95%;
+   width: 100%;
 }
 </pre>
 </li>
 <li>Create the <code>main.js</code> file and create a function to close the application.
 <p>The application is started when the HTML content is ready.</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;DOMContentLoaded&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var newBtn = document.getElementById(&#39;newBtn&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn = document.getElementById(&#39;saveBtn&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField = document.getElementById(&#39;editorField&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList = document.getElementById(&#39;notesList&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage = document.getElementById(&#39;editor&#39;),
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mainPageId = &#39;#main&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPageId = &#39;#editor&#39;,
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null,
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EMPTY_CONTENT = &#39;(empty)&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STORAGE_KEY = &#39;notepad&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Get data from local storage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   @return {Array}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getStorage(key)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return JSON.parse(window.localStorage.getItem(key)) || false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Add data to local storage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   @param {Array} data
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function addStorage(data)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Return current page ID
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   @returns
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getCurrentPageId()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return $(&#39;.ui-page:visible&#39;)[0].id;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Refresh current page */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function refreshCurrentPage()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#&#39; + getCurrentPageId()).trigger(&#39;create&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Get notes from storage
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   @return {Array}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function getNotes()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return getStorage(STORAGE_KEY) || [];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear list with notes */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearNotesList()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.innerHTML = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete note from storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function deleteNote(index)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes.splice(index, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;deleteNote: note not found&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Edit note using array index
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   @param index
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function editNote(index)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (notes[index] !== undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = index;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = getNotes()[index];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;editNote: note not found&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshCurrentPage();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show all notes extracted from local storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function showNotes()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesLen = notes.length,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeCover = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;swipeItem = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearNotesList();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i; i &lt; notesLen; i += 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li = document.createElement(&#39;li&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.addEventListener(&#39;click&#39;, editNote.bind(this, i), false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn = document.createElement(&#39;button&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.className(&#39;ui-btn&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.setAttribute(&#39;data-inline&#39;, &#39;true&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.innerText = &#39;Delete&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;deleteBtn.addEventListener(&#39;click&#39;, deleteNote.bind(this, i), false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.innerText = notes[i].replace(/\n/g, &#39; &#39;) || EMPTY_CONTENT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.appendChild(deleteBtn);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesList.appendChild(li);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst = tau.widget.getInstance(notesList);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.Button(deleteBtn);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notesListInst.refresh();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clear editor textarea */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function clearEditor()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.value = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save note to storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function saveNote()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var notes = getNotes();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (currentIndex !== null)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes[currentIndex] = editorField.value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notes.push(editorField.value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addStorage(notes);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(mainPageId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* New note button handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function newNote()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentIndex = null;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearEditor();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.changePage(editorPageId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* On editor page show handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function onEditorPageShow()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorField.focus();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Attach events */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function events()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newBtn.addEventListener(&#39;click&#39;, newNote);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveBtn.addEventListener(&#39;click&#39;, saveNote);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editorPage.addEventListener(&#39;pageshow&#39;, onEditorPageShow);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.keyName === &quot;back&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;&amp; window.tizen.application)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (getCurrentPageId())
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case &#39;main&#39;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function init()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showNotes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;events();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init();
-&nbsp;&nbsp;&nbsp;}, false);
+document.addEventListener("DOMContentLoaded", function()
+   {
+      'use strict';
+
+      var newBtn = document.getElementById('newBtn'),
+          saveBtn = document.getElementById('saveBtn'),
+          editorField = document.getElementById('editorField'),
+          notesList = document.getElementById('notesList'),
+          editorPage = document.getElementById('editor'),
+
+          mainPageId = '#main',
+          editorPageId = '#editor',
+
+          currentIndex = null,
+
+          EMPTY_CONTENT = '(empty)',
+          STORAGE_KEY = 'notepad';
+
+      /*
+         Get data from local storage
+         @return {Array}
+      */
+      function getStorage(key)
+      {
+         return JSON.parse(window.localStorage.getItem(key)) || false;
+      }
+
+      /*
+         Add data to local storage
+         @param {Array} data
+      */
+      function addStorage(data)
+      {
+         window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+      }
+
+      /*
+         Return current page ID
+         @returns
+      */
+      function getCurrentPageId()
+      {
+         return $('.ui-page:visible')[0].id;
+      }
+
+      /* Refresh current page */
+      function refreshCurrentPage()
+      {
+         $('#' + getCurrentPageId()).trigger('create');
+      }
+
+      /*
+         Get notes from storage
+         @return {Array}
+      */
+      function getNotes()
+      {
+         return getStorage(STORAGE_KEY) || [];
+      }
+
+      /* Clear list with notes */
+      function clearNotesList()
+      {
+         notesList.innerHTML = '';
+      }
+
+      /* Delete note from storage */
+      function deleteNote(index)
+      {
+         var notes = getNotes();
+
+         if (notes[index] !== undefined)
+         {
+            notes.splice(index, 1);
+            addStorage(notes);
+         }
+         else
+         {
+            console.error('deleteNote: note not found');
+         }
+
+         showNotes();
+         refreshCurrentPage();
+         event.stopPropagation();
+      }
+
+      /*
+         Edit note using array index
+         @param index
+      */
+      function editNote(index)
+      {
+         var notes = getNotes();
+
+         if (notes[index] !== undefined)
+         {
+            currentIndex = index;
+            editorField.value = getNotes()[index];
+            tau.changePage(editorPageId);
+         }
+         else
+         {
+            console.error('editNote: note not found');
+            showNotes();
+            refreshCurrentPage();
+         }
+      }
+
+      /* Show all notes extracted from local storage */
+      function showNotes()
+      {
+         var notes = getNotes(),
+             notesLen = notes.length,
+             li = {},
+             swipeCover = {},
+             swipeItem = {},
+             deleteBtn = {},
+             i = 0,
+             notesListInst;
+
+         clearNotesList();
+
+         for (i; i &lt; notesLen; i += 1)
+         {
+            li = document.createElement('li');
+            li.addEventListener('click', editNote.bind(this, i), false);
+
+            deleteBtn = document.createElement('button');
+            deleteBtn.className('ui-btn');
+            deleteBtn.setAttribute('data-inline', 'true');
+            deleteBtn.innerText = 'Delete';
+
+            deleteBtn.addEventListener('click', deleteNote.bind(this, i), false);
+
+            li.innerText = notes[i].replace(/\n/g, ' ') || EMPTY_CONTENT;
+            li.appendChild(deleteBtn);
+            notesList.appendChild(li);
+            notesListInst = tau.widget.getInstance(notesList);
+            tau.widget.Button(deleteBtn);
+            notesListInst.refresh();
+         }
+      }
+
+      /* Clear editor textarea */
+      function clearEditor()
+      {
+         editorField.value = '';
+      }
+
+      /* Save note to storage */
+      function saveNote()
+      {
+         var notes = getNotes();
+
+         if (currentIndex !== null)
+         {
+            notes[currentIndex] = editorField.value;
+         }
+         else
+         {
+            notes.push(editorField.value);
+         }
+
+         addStorage(notes);
+
+         clearEditor();
+         showNotes();
+         tau.changePage(mainPageId);
+      }
+
+      /* New note button handler */
+      function newNote()
+      {
+         currentIndex = null;
+         clearEditor();
+
+         tau.changePage(editorPageId);
+      }
+
+      /* On editor page show handler */
+      function onEditorPageShow()
+      {
+         editorField.focus();
+      }
+
+      /* Attach events */
+      function events()
+      {
+         newBtn.addEventListener('click', newNote);
+         saveBtn.addEventListener('click', saveNote);
+
+         editorPage.addEventListener('pageshow', onEditorPageShow);
+
+         window.addEventListener('tizenhwkey', function(e)
+            {
+               if (e.keyName === "back"
+                  &amp;&amp; window.tizen
+                  &amp;&amp; window.tizen.application)
+               {
+                  switch (getCurrentPageId())
+                  {
+                     case 'main':
+                        window.tizen.application.getCurrentApplication().exit();
+                        break;
+                     default:
+                        window.history.back();
+                        break;
+                  }
+
+                  return false;
+               }
+            }, false);
+      }
+
+      /* Initialize */
+      function init()
+      {
+         showNotes();
+         events();
+      }
+
+      init();
+   }, false);
 </pre>
 <p>Now the application is ready and you can deploy it to a device or emulator.</p>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/popup_ww.htm b/org.tizen.guides/html/web/ui/tau/popup_ww.htm
index 69bce4f..dcf8991 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/popup_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/popup_ww.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -55,38 +55,38 @@
 
 <p>Edit the HTML code to add the bottom popup button component to your application screen. To add the bottom button to the circular UI, you must add the <code>ui-bottom-button</code> class to the popup footer. The popup can have only 1 bottom button.</p>
 <pre class="prettyprint">
-&lt;div id=&quot;bottomBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-bottom-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;bottomBtn&quot; class=&quot;ui-btn&quot;&gt;Check&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="bottomBtnPopup" class="ui-popup"&gt;
+   &lt;div class="ui-popup-content"&gt;
+      Turning on Power
+      saving mode will
+      limit the maximum
+      power
+   &lt;/div&gt;
+   &lt;div class="ui-popup-footer ui-bottom-button"&gt;
+      &lt;button id="bottomBtn" class="ui-btn"&gt;Check&lt;/button&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
 
-<li>To implement a side popup button component: 
+<li>To implement a side popup button component:
 <p>Edit the HTML code to add the side popup button component to your application screen. To add side buttons for the circular UI, you must add the <code>ui-side-button</code> class to the popup footer. The popup can have only 2 side buttons.</p>
 <pre class="prettyprint">
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;.btn-icon-cancel::before {-webkit-mask-image: url(./cancel.png)}
-&nbsp;&nbsp;&nbsp;.btn-icon-ok::before {-webkit-mask-image: url(./ok.png)}
+   .btn-icon-cancel::before {-webkit-mask-image: url(./cancel.png)}
+   .btn-icon-ok::before {-webkit-mask-image: url(./ok.png)}
 &lt;/style&gt;
-&lt;div id=&quot;sideBtnPopup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Turning on Power
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saving mode will
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limit the maximum
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;power
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-grid-col-2 ui-side-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-1&quot; class=&quot;ui-btn btn-icon-cancel&quot;&gt;Cancel&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;sideBtn-2&quot; class=&quot;ui-btn btn-icon-ok&quot;&gt;OK&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="sideBtnPopup" class="ui-popup"&gt;
+   &lt;div class="ui-popup-content"&gt;
+      Turning on Power
+      saving mode will
+      limit the maximum
+      power
+   &lt;/div&gt;
+   &lt;div class="ui-popup-footer ui-grid-col-2 ui-side-button"&gt;
+      &lt;button id="sideBtn-1" class="ui-btn btn-icon-cancel"&gt;Cancel&lt;/button&gt;
+      &lt;button id="sideBtn-2" class="ui-btn btn-icon-ok"&gt;OK&lt;/button&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/processing_ww.htm b/org.tizen.guides/html/web/ui/tau/processing_ww.htm
index 22cb9d7..6c10379 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/processing_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/processing_ww.htm
@@ -47,17 +47,17 @@
 <ol>
 <li>Edit the HTML code to add the processing component to your application screen:
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageProcessing&quot; data-enable-page-scroll=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Processing&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content content-padding&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing-text&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Description about progress
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-processing ui-processing-full-size&quot;&gt;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="pageProcessing" data-enable-page-scroll="false"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Processing&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content content-padding"&gt;
+      &lt;div class="ui-processing"&gt;&lt;/div&gt;
+      &lt;div class="ui-processing-text"&gt;
+         Description about progress
+      &lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-processing ui-processing-full-size"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -66,19 +66,19 @@
 <pre class="prettyprint">
 .ui-processing-full-size
 {
-&nbsp;&nbsp;&nbsp;display: none;
+   display: none;
 }
 
 @media all and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;.ui-processing
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.ui-processing.ui-processing-full-size
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;}
+   .ui-processing
+   {
+      display: none;
+   }
+   .ui-processing.ui-processing-full-size
+   {
+      display: block;
+   }
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/tau_porting_w.htm b/org.tizen.guides/html/web/ui/tau/tau_porting_w.htm
index 4ce2ee8..a067218 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/tau_porting_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/tau_porting_w.htm
@@ -35,7 +35,7 @@
         <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component API Reference for Mobile Web</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Gesture_Events/gesture.htm">Gesture Events API for Mobile Web</a></li>                    
+                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Gesture_Events/gesture.htm">Gesture Events API for Mobile Web</a></li>
         </ul>
     </div></div>
 </div>
@@ -61,13 +61,13 @@
 
 <pre class="prettyprint">
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;../lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;../lib/tau/mobile/js/tau.support-2.3.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;../lib/tau/mobile/theme/default/tau.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;../lib/tau/mobile/theme/default/tau.support-2.3.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/custom.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
+   &lt;head&gt;
+      &lt;script type="text/javascript" src="../lib/tau/mobile/js/tau.js"&gt;&lt;/script&gt;
+      &lt;script type="text/javascript" src="../lib/tau/mobile/js/tau.support-2.3.js"&gt;&lt;/script&gt;
+      &lt;link rel="stylesheet" href="../lib/tau/mobile/theme/default/tau.css"&gt;
+      &lt;link rel="stylesheet" href="../lib/tau/mobile/theme/default/tau.support-2.3.css"&gt;
+      &lt;link rel="stylesheet" href="css/custom.css"&gt;
+   &lt;/head&gt;
 &lt;/html&gt;
 </pre>
 
@@ -78,33 +78,33 @@
 
 <h2 id="selector">Component Definitions</h2>
 
-<p>Since Tizen 2.4, it is strongly recommended to use the <code>class</code> selector to define the components in HTML files. The <code>&quot;data-role&quot;</code> selector has been deprecated and is no longer supported.</p>
+<p>Since Tizen 2.4, it is strongly recommended to use the <code>class</code> selector to define the components in HTML files. The <code>"data-role"</code> selector has been deprecated and is no longer supported.</p>
 
-<p>The class selectors in TAU are composed with the <code>&quot;ui-&quot;</code> prefix and followed by the <code>&lt;COMPONENT_NAME&gt;</code>. For more information, see <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component API Reference</a>.</p>
+<p>The class selectors in TAU are composed with the <code>"ui-"</code> prefix and followed by the <code>&lt;COMPONENT_NAME&gt;</code>. For more information, see <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component API Reference</a>.</p>
 <p>The following example shows how to define the UI components before and after:</p>
 <ul>
 <li>Before:
 
 <pre class="prettyprint">
 &lt;!--Create Expandable component--&gt;
-&lt;div data-role=&quot;expandable&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable head&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;div data-role="expandable"&gt;
+   &lt;h1&gt;Expandable head&lt;/h1&gt;
+   &lt;div&gt;Content&lt;/div&gt;
 &lt;/div&gt;
 
 &lt;!--Create ToggleSwitch component--&gt;
-&lt;select data-role=&quot;toggleswitch&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;off&quot;&gt;&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;on&quot;&gt;&lt;/option&gt;
+&lt;select data-role="toggleswitch"&gt;
+   &lt;option value="off"&gt;&lt;/option&gt;
+   &lt;option value="on"&gt;&lt;/option&gt;
 &lt;/select&gt;
 
 &lt;!--Create SectionChanger component--&gt;
-&lt;div data-role=&quot;section-changer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="section-changer"&gt;
+   &lt;div&gt;
+      &lt;section&gt;
+         &lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
+      &lt;/section&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -116,24 +116,24 @@
 <li>After:
 <pre class="prettyprint">
 &lt;!--Create Expandable component--&gt;
-&lt;div class=&quot;ui-expandable&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable head&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;div class="ui-expandable"&gt;
+   &lt;h1&gt;Expandable head&lt;/h1&gt;
+   &lt;div&gt;Content&lt;/div&gt;
 &lt;/div&gt;
 
 &lt;!--Create ToggleSwitch component--&gt;
-&lt;select class=&quot;ui-toggleswitch&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;off&quot;&gt;&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;on&quot;&gt;&lt;/option&gt;
+&lt;select class="ui-toggleswitch"&gt;
+   &lt;option value="off"&gt;&lt;/option&gt;
+   &lt;option value="on"&gt;&lt;/option&gt;
 &lt;/select&gt;
 
 &lt;!--Create SectionChanger component--&gt;
-&lt;div class=&quot;ui-section-changer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-section-changer"&gt;
+   &lt;div&gt;
+      &lt;section&gt;
+         &lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
+      &lt;/section&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -259,7 +259,7 @@
         </tr>
         <tr>
             <td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_ProgressBar.htm">Progress Bar</a></td>
-            <td>Progress component with the <code>data-type=&quot;bar&quot;</code> option.</td>
+            <td>Progress component with the <code>data-type="bar"</code> option.</td>
         </tr>
         <tr>
             <td><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_ScrollHandler.htm">Scroll Handler</a></td>
@@ -293,111 +293,111 @@
         <li><strong>CheckboxRadio</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot;/&gt;
-&lt;input type=&quot;radio&quot; name=&quot;radio-1&quot; id=&quot;radio-1&quot;/&gt;
+&lt;input type="checkbox" name="checkbox-1" id="checkbox-1"/&gt;
+&lt;input type="radio" name="radio-1" id="radio-1"/&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var element1 = document.getElementById(&quot;checkbox-1&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element2 = document.getElementById(&quot;radio-1&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkboxWidget = tau.widget.Checkboxradio(element1),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioWidget = tau.widget.Checkboxradio(element2);
+   var element1 = document.getElementById("checkbox-1"),
+       element2 = document.getElementById("radio-1"),
+       checkboxWidget = tau.widget.Checkboxradio(element1),
+       radioWidget = tau.widget.Checkboxradio(element2);
 
-&nbsp;&nbsp;&nbsp;checkboxWidget.enable();
-&nbsp;&nbsp;&nbsp;radioWidget.disable();
+   checkboxWidget.enable();
+   radioWidget.disable();
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot;/&gt;
-&lt;input type=&quot;radio&quot; name=&quot;radio-1&quot; id=&quot;radio-1&quot;/&gt;
+&lt;input type="checkbox" name="checkbox-1" id="checkbox-1"/&gt;
+&lt;input type="radio" name="radio-1" id="radio-1"/&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var element1 = document.getElementById(&quot;checkbox-1&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element2 = document.getElementById(&quot;radio-1&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkboxWidget = tau.widget.Checkbox(element1),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioWidget = tau.widget.Radio(element2);
+   var element1 = document.getElementById("checkbox-1"),
+       element2 = document.getElementById("radio-1"),
+       checkboxWidget = tau.widget.Checkbox(element1),
+       radioWidget = tau.widget.Radio(element2);
 
-&nbsp;&nbsp;&nbsp;checkboxWidget.enable();
-&nbsp;&nbsp;&nbsp;radioWidget.disable();
+   checkboxWidget.enable();
+   radioWidget.disable();
 &lt;/script&gt;
 </pre>
         </li>
         <li><strong>Collapsible</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;ul data-role=&quot;listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li id=&quot;collapsible&quot; data-role=&quot;collapsible&quot; data-inset=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Collapsible head&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Sub list in collapsible li--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;sub list item1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;sub list item2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--List item in 1st depth--&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;other list item&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;other list item&lt;/li&gt;
+&lt;ul data-role="listview"&gt;
+   &lt;li id="collapsible" data-role="collapsible" data-inset="false"&gt;
+      &lt;h2&gt;Collapsible head&lt;/h2&gt;
+      &lt;!--Sub list in collapsible li--&gt;
+      &lt;ul data-role="listview"&gt;
+         &lt;li&gt;sub list item1&lt;/li&gt;
+         &lt;li&gt;sub list item2&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/li&gt;
+   &lt;!--List item in 1st depth--&gt;
+   &lt;li&gt;other list item&lt;/li&gt;
+   &lt;li&gt;other list item&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var collapsibleElement = document.getElementById(&quot;collapsible&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsible = tau.widget.Collapsible(collapsibleElement);
+   var collapsibleElement = document.getElementById("collapsible"),
+       collapsible = tau.widget.Collapsible(collapsibleElement);
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;div id=&quot;expandable&quot; class=&quot;ui-expandable&quot; data-collapsed=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable head&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;div id="expandable" class="ui-expandable" data-collapsed="false"&gt;
+   &lt;h1&gt;Expandable head&lt;/h1&gt;
+   &lt;div&gt;Content&lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var expandableEl = document.getElementById(&quot;expandable&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expandableWidget = tau.widget.Expandable(expandableEl);
+   var expandableEl = document.getElementById("expandable"),
+       expandableWidget = tau.widget.Expandable(expandableEl);
 &lt;/script&gt;
 </pre>
         </li>
         <li><strong>Fast Scroll</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;div data-role=&quot;page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;list&quot; data-role=&quot;listview&quot; data-fastscroll=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot;&gt;A&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Anton&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Arabella&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot;&gt;B&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Barry&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Bily&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="main"&gt;
+   &lt;div data-role="content"&gt;
+      &lt;ul id="list" data-role="listview" data-fastscroll="true"&gt;
+         &lt;li data-role="list-divider"&gt;A&lt;/li&gt;
+         &lt;li&gt;Anton&lt;/li&gt;
+         &lt;li&gt;Arabella&lt;/li&gt;
+         &lt;li data-role="list-divider"&gt;B&lt;/li&gt;
+         &lt;li&gt;Barry&lt;/li&gt;
+         &lt;li&gt;Bily&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var fastscroll = tau.widget.FastScroll(document.getElementById(&quot;list&quot;));
+   var fastscroll = tau.widget.FastScroll(document.getElementById("list"));
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot; id=&quot;indexscrollbarPage&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-indexscrollbar&quot; id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;isbList&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-group-index&quot;&gt;A&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-static&quot;&gt;Anton&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-static&quot;&gt;Arabella&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-group-index&quot;&gt;B&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-static&quot;&gt;Barry&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-static&quot;&gt;Bibi&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="indexscrollbarPage"&gt;
+   &lt;div class="ui-indexscrollbar" id="indexscrollbar"&gt;&lt;/div&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;ul class="ui-listview" id="isbList"&gt;
+         &lt;li class="ui-group-index"&gt;A&lt;/li&gt;
+         &lt;li class="ui-li-static"&gt;Anton&lt;/li&gt;
+         &lt;li class="ui-li-static"&gt;Arabella&lt;/li&gt;
+         &lt;li class="ui-group-index"&gt;B&lt;/li&gt;
+         &lt;li class="ui-li-static"&gt;Barry&lt;/li&gt;
+         &lt;li class="ui-li-static"&gt;Bibi&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var isb = tau.widget.IndexScrollbar(document.getElementById(&quot;indexscrollbar&quot;));
+   var isb = tau.widget.IndexScrollbar(document.getElementById("indexscrollbar"));
 &lt;/script&gt;
 </pre>
         </li>
@@ -405,42 +405,42 @@
         <li><strong>Gallery</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;div data-role=&quot;content&quot; data-scroll=&quot;none&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;gallery&quot; id=&quot;gallery&quot; data-vertical-align=&quot;middle&quot;&gt;&lt;/div&gt;
+&lt;div data-role="content" data-scroll="none"&gt;
+   &lt;div data-role="gallery" id="gallery" data-vertical-align="middle"&gt;&lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var galleryWidget = tau.widget.Gallery(document.getElementById(&quot;gallery&quot;));
+   var galleryWidget = tau.widget.Gallery(document.getElementById("gallery"));
 
-&nbsp;&nbsp;&nbsp;galleryWidget.add(&quot;./images/01.jpg&quot;);
-&nbsp;&nbsp;&nbsp;galleryWidget.add(&quot;./images/02.jpg&quot;);
-&nbsp;&nbsp;&nbsp;galleryWidget.add(&quot;./images/03.jpg&quot;);
-&nbsp;&nbsp;&nbsp;galleryWidget.refresh(1);
+   galleryWidget.add("./images/01.jpg");
+   galleryWidget.add("./images/02.jpg");
+   galleryWidget.add("./images/03.jpg");
+   galleryWidget.refresh(1);
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;div id=&quot;gallerySection&quot; class=&quot;ui-content ui-section-changer&quot; data-orientation=&quot;horizontal&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;gallery-section&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/01.jpg&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;gallery-section&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/02.jpg&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="gallerySection" class="ui-content ui-section-changer" data-orientation="horizontal"&gt;
+   &lt;div&gt;
+      &lt;section class="gallery-section"&gt;
+         &lt;img src="images/01.jpg"/&gt;
+      &lt;/section&gt;
+      &lt;section class="gallery-section"&gt;
+         &lt;img src="images/02.jpg"/&gt;
+      &lt;/section&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var sectionChangerElement = document.getElementById(&quot;gallerySection&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget = tau.widget.SectionChanger(sectionChangerElement),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newSectionElement = document.createElement(&quot;section&quot;);
-
-&nbsp;&nbsp;&nbsp;newSectionElement.innerHTML = &quot;&lt;img src=&#39;images/03.jpg&#39;&gt;&quot;;
-&nbsp;&nbsp;&nbsp;sectionsParentNode.appendChild(newSectionElement);
-&nbsp;&nbsp;&nbsp;sectionChangerWidget.refresh();
-&nbsp;&nbsp;&nbsp;sectionChangerWidget.setActiveSection(1);
+   var sectionChangerElement = document.getElementById("gallerySection"),
+       sectionChangerWidget = tau.widget.SectionChanger(sectionChangerElement),
+       newSectionElement = document.createElement("section");
+
+   newSectionElement.innerHTML = "&lt;img src='images/03.jpg'&gt;";
+   sectionsParentNode.appendChild(newSectionElement);
+   sectionChangerWidget.refresh();
+   sectionChangerWidget.setActiveSection(1);
 &lt;/script&gt;
 </pre>
         </li>
@@ -448,21 +448,21 @@
         <li><strong>List Divider</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;ul data-role=&quot;listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li data-role=&quot;list-divider&quot;&gt;Item styles&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
+&lt;ul data-role="listview"&gt;
+   &lt;li data-role="list-divider"&gt;Item styles&lt;/li&gt;
+   &lt;li&gt;&lt;a href="#"&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;a href="#"&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;a href="#"&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-group-index&quot;&gt;Item styles&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
+&lt;ul class="ui-listview"&gt;
+   &lt;li class="ui-group-index"&gt;Item styles&lt;/li&gt;
+   &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
+   &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
+   &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Normal lists&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
         </li>
@@ -470,47 +470,47 @@
         <li><strong>Notification</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;div data-role=&quot;page&quot; id=&quot;demo&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;notification&quot; id=&quot;notification&quot; data-type=&quot;popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Notification Demo TEST&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Notification&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;button&quot; id=&quot;noti-demo&quot;&gt;Show small popup&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="page" id="demo"&gt;
+   &lt;div data-role="notification" id="notification" data-type="popup"&gt;
+      &lt;p&gt;Notification Demo TEST&lt;/p&gt;
+   &lt;/div&gt;
+   &lt;div data-role="header" data-position="fixed"&gt;
+      &lt;h1&gt;Notification&lt;/h1&gt;
+   &lt;/div&gt;
+   &lt;div data-role="content"&gt;
+      &lt;div data-role="button" id="noti-demo"&gt;Show small popup&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var notification = tau.widget.Notification(document.getElementById(&quot;notification&quot;)),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buttonEl = document.getElementById(&quot;noti-demo&quot;);
+   var notification = tau.widget.Notification(document.getElementById("notification")),
+       buttonEl = document.getElementById("noti-demo");
 
-&nbsp;&nbsp;&nbsp;buttonEl.addEventListener(&quot;vclick&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification.open();
-&nbsp;&nbsp;&nbsp;});
+   buttonEl.addEventListener("vclick", function()
+   {
+      notification.open();
+   });
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;div data-role=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;a class=&quot;ui-btn&quot; id=&quot;open&quot; data-inline=&quot;true&quot;&gt;Button&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;popup_toast&quot; data-role=&quot;popup&quot; class=&quot;ui-popup ui-popup-toast&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Toast popup text Toast popup text
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="content"&gt;
+   &lt;a class="ui-btn" id="open" data-inline="true"&gt;Button&lt;/a&gt;
+   &lt;div id="popup_toast" data-role="popup" class="ui-popup ui-popup-toast"&gt;
+      &lt;div class="ui-popup-content"&gt;
+         Toast popup text Toast popup text
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var btn = document.getElementById(&quot;open&quot;);
+   var btn = document.getElementById("open");
 
-&nbsp;&nbsp;&nbsp;btn.addEventListener(&quot;vclick&quot;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.openPopup(&quot;#popup_toast&quot;);
-&nbsp;&nbsp;&nbsp;});
+   btn.addEventListener("vclick", function()
+   {
+      tau.openPopup("#popup_toast");
+   });
 &lt;/script&gt;
 </pre>
         </li>
@@ -518,24 +518,24 @@
         <li><strong>Progress Bar</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;div data-role=&quot;progressbar&quot; id=&quot;progressbar&quot;&gt;&lt;/div&gt;
+&lt;div data-role="progressbar" id="progressbar"&gt;&lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var progressbarWidget =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.ProgressBar(document.getElementById(&quot;progressbar&quot;));
+   var progressbarWidget =
+      tau.widget.ProgressBar(document.getElementById("progressbar"));
 
-&nbsp;&nbsp;&nbsp;progressbarWidget.value(30);
+   progressbarWidget.value(30);
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-progress&quot; data-type=&quot;bar&quot; id=&quot;progressbar&quot;&gt;&lt;/div&gt;
+&lt;div class="ui-progress" data-type="bar" id="progressbar"&gt;&lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var progressWidget = tau.widget.Progress(document.getElementById(&quot;progressbar&quot;));
+   var progressWidget = tau.widget.Progress(document.getElementById("progressbar"));
 
-&nbsp;&nbsp;&nbsp;progressWidget.value(30);
+   progressWidget.value(30);
 &lt;/script&gt;
 </pre>
         </li>
@@ -543,25 +543,25 @@
         <li><strong>Search Bar</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;input type=&quot;search&quot; name=&quot;search&quot; id=&quot;search-bar&quot;/&gt;
+&lt;input type="search" name="search" id="search-bar"/&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var searchBarElement = document.getElementById(&quot;searchbar&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchBarWidget = tau.widget.SearchBar(searchBarElement);
+   var searchBarElement = document.getElementById("searchbar"),
+       searchBarWidget = tau.widget.SearchBar(searchBarElement);
 
-&nbsp;&nbsp;&nbsp;value = searchBarWidget.disable();
+   value = searchBarWidget.disable();
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;input type=&quot;search&quot; id=&quot;search-test&quot;/&gt;
+&lt;input type="search" id="search-test"/&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var searchEl = document.getElementById(&quot;search-test&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;searchWidget = tau.widget.SearchInput(searchEl);
+   var searchEl = document.getElementById("search-test"),
+       searchWidget = tau.widget.SearchInput(searchEl);
 
-&nbsp;&nbsp;&nbsp;searchInputWidget.disable();
+   searchInputWidget.disable();
 &lt;/script&gt;
 </pre>
         </li>
@@ -569,35 +569,35 @@
         <li><strong>Select Menu</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;select id=&quot;selectmenu&quot; data-native-menu=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;1&quot;&gt;Item1&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;2&quot;&gt;Item2&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;3&quot;&gt;Item3&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;4&quot;&gt;Item4&lt;/option&gt;
+&lt;select id="selectmenu" data-native-menu="false"&gt;
+   &lt;option value="1"&gt;Item1&lt;/option&gt;
+   &lt;option value="2"&gt;Item2&lt;/option&gt;
+   &lt;option value="3"&gt;Item3&lt;/option&gt;
+   &lt;option value="4"&gt;Item4&lt;/option&gt;
 &lt;/select&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;selectmenu&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget = tau.widget.SelectMenu(element);
+   var element = document.getElementById("selectmenu"),
+       widget = tau.widget.SelectMenu(element);
 
-&nbsp;&nbsp;&nbsp;widget.open();
+   widget.open();
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;select id=&quot;dropdownmenu&quot; data-native-menu=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;1&quot;&gt;Item1&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;2&quot;&gt;Item2&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;3&quot;&gt;Item3&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;4&quot;&gt;Item4&lt;/option&gt;
+&lt;select id="dropdownmenu" data-native-menu="false"&gt;
+   &lt;option value="1"&gt;Item1&lt;/option&gt;
+   &lt;option value="2"&gt;Item2&lt;/option&gt;
+   &lt;option value="3"&gt;Item3&lt;/option&gt;
+   &lt;option value="4"&gt;Item4&lt;/option&gt;
 &lt;/select&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var element = document.getElementById(&quot;dropdownmenu&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget = tau.widget.DropdownMenu(element);
+   var element = document.getElementById("dropdownmenu"),
+       widget = tau.widget.DropdownMenu(element);
 
-&nbsp;&nbsp;&nbsp;widget.open();
+   widget.open();
 &lt;/script&gt;
 </pre>
         </li>
@@ -605,52 +605,52 @@
         <li><strong>Tab Bar</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;div data-role=&quot;header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div data-role=&quot;tabbar&quot; id=&quot;tab-bar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tabbar1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tabbar2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tabbar3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div data-role="header"&gt;
+   &lt;div data-role="tabbar" id="tab-bar"&gt;
+      &lt;ul&gt;
+         &lt;li&gt;&lt;a href="#"&gt;Tabbar1&lt;/a&gt;&lt;/li&gt;
+         &lt;li&gt;&lt;a href="#"&gt;Tabbar2&lt;/a&gt;&lt;/li&gt;
+         &lt;li&gt;&lt;a href="#"&gt;Tabbar3&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var tabBar = tau.widget.TabBar(document.getElementById(&quot;tab-bar&quot;));
+   var tabBar = tau.widget.TabBar(document.getElementById("tab-bar"));
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
 &lt;!--Tabs component is composed with Tabbar and SectionChanger--&gt;
-&lt;div id=&quot;tabs&quot; class=&quot;ui-tabs&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-tabbar&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;ui-btn-active&quot;&gt;Tab1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tab2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tab3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-section-changer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Tab1&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Tab2&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Tab3&lt;/p&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="tabs" class="ui-tabs"&gt;
+   &lt;div class="ui-tabbar"&gt;
+      &lt;ul&gt;
+         &lt;li&gt;&lt;a href="#" class="ui-btn-active"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
+         &lt;li&gt;&lt;a href="#"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
+         &lt;li&gt;&lt;a href="#"&gt;Tab3&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-section-changer"&gt;
+      &lt;div&gt;
+         &lt;section class="ui-section-active"&gt;
+            &lt;p&gt;Tab1&lt;/p&gt;
+         &lt;/section&gt;
+         &lt;section&gt;
+            &lt;p&gt;Tab2&lt;/p&gt;
+         &lt;/section&gt;
+         &lt;section&gt;
+            &lt;p&gt;Tab3&lt;/p&gt;
+         &lt;/section&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var tabsElement = document.getElementById(&quot;tabs&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabs = tau.widget.Tabs(tabsElement);
+   var tabsElement = document.getElementById("tabs"),
+       tabs = tau.widget.Tabs(tabsElement);
 
-&nbsp;&nbsp;&nbsp;tabs.setIndex(1);
+   tabs.setIndex(1);
 &lt;/script&gt;
 </pre>
         </li>
@@ -658,24 +658,24 @@
         <li><strong>Token Text Area</strong>
             <p>Before:</p>
 <pre class="prettyprint">
-&lt;div data-role=&quot;tokentextarea&quot; id=&quot;tokentext&quot;&gt;&lt;/div&gt;
+&lt;div data-role="tokentextarea" id="tokentext"&gt;&lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var tokenWidget = tau.widget.TokenTextarea(document.getElementById(&quot;tokentext&quot;));
+   var tokenWidget = tau.widget.TokenTextarea(document.getElementById("tokentext"));
 
-&nbsp;&nbsp;&nbsp;tokenWidget.add(&quot;foobar&quot;);
+   tokenWidget.add("foobar");
 &lt;/script&gt;
 </pre>
 
             <p>After:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-text-enveloper&quot;&gt;&lt;/div&gt;
+&lt;div class="ui-text-enveloper"&gt;&lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var textEnveloperElement = document.getElementById(&quot;textenveloper&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textEnveloper = tau.component.TextEnveloper(textEnveloperElement);
+   var textEnveloperElement = document.getElementById("textenveloper"),
+       textEnveloper = tau.component.TextEnveloper(textEnveloperElement);
 
-&nbsp;&nbsp;&nbsp;textEnveloper.add(&quot;hello&quot;);
+   textEnveloper.add("hello");
 &lt;/script&gt;
 </pre>
         </li>
@@ -691,37 +691,37 @@
        <p>To enable the swipe event, use the <code>enableGesture()</code> method. The following example shows how to enable the swipe event on the content area:</p>
 <pre class="prettyprint">
 &lt;!--HTML code--&gt;
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;pageSwipe&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Swipe Event&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;content&quot; class=&quot;ui-content&gt;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="pageSwipe"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Swipe Event&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div id="content" class="ui-content&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 <pre class="prettyprint">
 (function()
 {
-&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;pageSwipe&quot;);
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var content = document.getElementById(&quot;content&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.event.enableGesture(content, new tau.event.gesture.Swipe(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation: &quot;horizontal&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   var page = document.getElementById("pageSwipe");
+   page.addEventListener("pagebeforeshow", function()
+      {
+         var content = document.getElementById("content");
+         tau.event.enableGesture(content, new tau.event.gesture.Swipe(
+         {
+            orientation: "horizontal"
+         }));
+      });
 }());
 </pre>
 <p>When the <code>swipe</code> event is enabled, the application can handle this event with some event detail data:</p>
 <pre class="prettyprint">
 (function()
 {
-&nbsp;&nbsp;&nbsp;var content = document.getElementById(&quot;content&quot;);
+   var content = document.getElementById("content");
 
-&nbsp;&nbsp;&nbsp;content.addEventListener(&quot;swipe&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;swipe direction = &quot; + e.detail.direction);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   content.addEventListener("swipe", function(e)
+      {
+         console.log("swipe direction = " + e.detail.direction);
+      });
 }());
 </pre>
 
@@ -733,22 +733,22 @@
     <p>Since 2.4, the <code>tap</code> event has been deprecated. Use the <code>click</code> event instead.</p>
        <p>If the application has one button in the content area:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;a id=&quot;btn&quot; href=&quot;#&quot; class=&quot;ui-btn&quot;&gt;Click me&lt;/a&gt;
+&lt;div class="ui-content"&gt;
+   &lt;a id="btn" href="#" class="ui-btn"&gt;Click me&lt;/a&gt;
 &lt;/div&gt;
 </pre>
         <p>Before:</p>
 <pre class="prettyprint">
-var button = document.getElementById(&quot;btn&quot;);
+var button = document.getElementById("btn");
 
-button.addEventListener(&quot;tap&quot;, eventHandler);
+button.addEventListener("tap", eventHandler);
 </pre>
 
     <p>After:</p>
 <pre class="prettyprint">
-var button = document.getElementById(&quot;btn&quot;);
+var button = document.getElementById("btn");
 
-button.addEventListener(&quot;click&quot;, eventHandler);
+button.addEventListener("click", eventHandler);
 </pre>
     </li>
 </ul>
diff --git a/org.tizen.guides/html/web/ui/tau/tau_rotary_ww.htm b/org.tizen.guides/html/web/ui/tau/tau_rotary_ww.htm
index 1107fb5..8329ca1 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/tau_rotary_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/tau_rotary_ww.htm
@@ -34,11 +34,11 @@
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="event_handling_w.htm">Event Handling</a></li>
-                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Base/page.htm">Page Handling</a></li>                     
-                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm">CircleProgressBar API for Wearable Web</a></li>     
-                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_popup.htm">Popup API for Wearable Web</a></li>                     
-                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_sectionchanger.htm">Section Changer API for Wearable Web</a></li>                  
-                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview API for Wearable Web</a></li>                       
+                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Base/page.htm">Page Handling</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm">CircleProgressBar API for Wearable Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_popup.htm">Popup API for Wearable Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_sectionchanger.htm">Section Changer API for Wearable Web</a></li>
+                       <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListview API for Wearable Web</a></li>
                </ul>
        </div></div>
 </div>
@@ -80,96 +80,96 @@
 
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;TAU Basic&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#popup&quot; data-rel=&quot;popup&quot;&gt;Open Popup&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Fill content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Popup--&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;popup&quot; class=&quot;ui-popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Fill content--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-popup-footer ui-bottom-button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;1btnPopup-cancel&quot; href=&quot;#&quot; class=&quot;ui-btn&quot; data-rel=&quot;back&quot;&gt;Check&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="main"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;TAU Basic&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;a href="#popup" data-rel="popup"&gt;Open Popup&lt;/a&gt;
+      &lt;!--Fill content--&gt;
+   &lt;/div&gt;
+   &lt;!--Popup--&gt;
+   &lt;div id="popup" class="ui-popup"&gt;
+      &lt;div class="ui-popup-content"&gt;
+         &lt;!--Fill content--&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-popup-footer ui-bottom-button"&gt;
+         &lt;a id="1btnPopup-cancel" href="#" class="ui-btn" data-rel="back"&gt;Check&lt;/a&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;!--Script--&gt;
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var SCROLL_STEP = 50, /* Distance of moving scroll for each rotary event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = document.getElementById(&quot;main&quot;); /* Query with page ID */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;popupshow&quot;, function popupOpenHandler(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var popup = e.target, /* Popup element */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Element that has scroll */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller = popup.querySelector(&quot;.ui-popup-wrapper&quot;),
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Rotary event handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotaryEventHandler = function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.detail.direction === &quot;CW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller.scrollTop += SCROLL_STEP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (e.detail.direction === &quot;CCW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller.scrollTop -= SCROLL_STEP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Register the rotary event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;, rotaryEventHandler, false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Deregister the rotary event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup.addEventListener(&quot;popuphide&quot;, function popupHideHandler()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup.removeEventListener(&quot;popuphide&quot;, popupHideHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;, rotaryEventHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function pageScrollHandler(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = e.target;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elScroller = page.querySelector(&quot;.ui-scroller&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Rotary event handler */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotaryEventHandler = function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.detail.direction === &quot;CW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elScroller.scrollTop += SCROLL_STEP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (e.detail.direction === &quot;CCW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elScroller.scrollTop -= SCROLL_STEP;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Register the rotary event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;, rotaryEventHandler, false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Deregister the rotary event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforehide&quot;, function pageHideHandler()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;pagebeforehide&quot;, pageHideHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;, rotaryEventHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-&nbsp;&nbsp;&nbsp;}());
+   (function()
+   {
+      var SCROLL_STEP = 50, /* Distance of moving scroll for each rotary event */
+          page = document.getElementById("main"); /* Query with page ID */
+
+      page.addEventListener("popupshow", function popupOpenHandler(e)
+         {
+            var popup = e.target, /* Popup element */
+                /* Element that has scroll */
+                scroller = popup.querySelector(".ui-popup-wrapper"),
+
+                /* Rotary event handler */
+                rotaryEventHandler = function(e)
+                {
+                   if (e.detail.direction === "CW")
+                   /* Right direction */
+                   {
+                      scroller.scrollTop += SCROLL_STEP;
+                   }
+                   else if (e.detail.direction === "CCW")
+                   /* Left direction */
+                   {
+                      scroller.scrollTop -= SCROLL_STEP;
+                   }
+                };
+
+            /* Register the rotary event */
+            document.addEventListener("rotarydetent", rotaryEventHandler, false);
+
+            /* Deregister the rotary event */
+            popup.addEventListener("popuphide", function popupHideHandler()
+               {
+                  popup.removeEventListener("popuphide", popupHideHandler, false);
+                  document.removeEventListener("rotarydetent", rotaryEventHandler, false);
+               }, false);
+         }, false);
+
+      page.addEventListener("pagebeforeshow", function pageScrollHandler(e)
+         {
+            var page = e.target;
+            elScroller = page.querySelector(".ui-scroller");
+
+            /* Rotary event handler */
+            rotaryEventHandler = function(e)
+            {
+               if (e.detail.direction === "CW")
+               /* Right direction */
+               {
+                  elScroller.scrollTop += SCROLL_STEP;
+               }
+               else if (e.detail.direction === "CCW")
+               /* Left direction */
+               {
+                  elScroller.scrollTop -= SCROLL_STEP;
+               }
+            };
+
+            /* Register the rotary event */
+            document.addEventListener("rotarydetent", rotaryEventHandler, false);
+
+            /* Deregister the rotary event */
+            page.addEventListener("pagebeforehide", function pageHideHandler()
+               {
+                  page.removeEventListener("pagebeforehide", pageHideHandler, false);
+                  document.removeEventListener("rotarydetent", rotaryEventHandler, false);
+               }, false);
+
+         }, false);
+   }());
 &lt;/script&gt;
 </pre>
 <h2 id="snaplist">Controlling a Snap List</h2>
@@ -177,63 +177,63 @@
 
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;SnapListview&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="main"&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;ul class="ui-listview"&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+         &lt;li&gt;SnapListview&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;!--Script--&gt;
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;(function(tau)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var list,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snapListviewWidget,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotarydetentHandler = function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var selectedIndex = snapListviewWidget.getSelectedIndex(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = e.detail.direction;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (direction === &quot;CW&quot; &amp;&amp; selectedIndex !== null)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snapListviewWidget.scrollToPosition(++selectedIndex);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (direction === &quot;CCW&quot; &amp;&amp; selectedIndex !== null)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snapListviewWidget.scrollToPosition(--selectedIndex);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pagebeforeshow&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list = document.getElementById(&quot;snapList&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snapListviewWidget = tau.widget.SnapListview(list);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;rotarydetent&quot;, rotarydetentHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pagebeforehide&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (list)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snapListviewWidget.destroy();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.removeEventListener(&quot;rotarydetent&quot;, rotarydetentHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}(tau));
+   (function(tau)
+   {
+      var list,
+          snapListviewWidget,
+          rotarydetentHandler = function(e)
+          {
+             var selectedIndex = snapListviewWidget.getSelectedIndex(),
+                 direction = e.detail.direction;
+
+             if (direction === "CW" &amp;&amp; selectedIndex !== null)
+             {
+                snapListviewWidget.scrollToPosition(++selectedIndex);
+             }
+             else if (direction === "CCW" &amp;&amp; selectedIndex !== null)
+             {
+                snapListviewWidget.scrollToPosition(--selectedIndex);
+             }
+          };
+
+      if (tau.support.shape.circle)
+      {
+         document.addEventListener("pagebeforeshow", function()
+            {
+               list = document.getElementById("snapList");
+               snapListviewWidget = tau.widget.SnapListview(list);
+               window.addEventListener("rotarydetent", rotarydetentHandler);
+            });
+
+         document.addEventListener("pagebeforehide", function(e)
+            {
+               if (list)
+               {
+                  snapListviewWidget.destroy();
+                  window.removeEventListener("rotarydetent", rotarydetentHandler);
+               }
+            });
+      }
+   }(tau));
 &lt;/script&gt;
 </pre>
 <h2 id="sectionchanger">Changing the Section Changer Index</h2>
@@ -241,90 +241,90 @@
 
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;div id=&quot;main&quot; class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;hsectionchanger&quot; class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Section changer has only one child--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;section&quot; style=&quot;text-align:center&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT2 PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;section&quot; style=&quot;text-align:center&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;section&quot; class=&quot;ui-section-active&quot; style=&quot;text-align:center&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;section&quot; style=&quot;text-align:center&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;RIGHT1 PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;section&quot; style=&quot;text-align:center&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;RIGHT2 PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="main" class="ui-page"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;SectionChanger&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div id="hsectionchanger" class="ui-content"&gt;
+      &lt;!--Section changer has only one child--&gt;
+      &lt;div&gt;
+         &lt;section class="section" style="text-align:center"&gt;
+            &lt;h3&gt;LEFT2 PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+         &lt;section class="section" style="text-align:center"&gt;
+            &lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+         &lt;section class="section" class="ui-section-active" style="text-align:center"&gt;
+            &lt;h3&gt;MAIN PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+         &lt;section class="section" style="text-align:center"&gt;
+            &lt;h3&gt;RIGHT1 PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+         &lt;section class="section" style="text-align:center"&gt;
+            &lt;h3&gt;RIGHT2 PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;!--Script--&gt;
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;(function(tau)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var changer,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sections,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionsLength;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotarydetentHandler = function(event)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var direction = event.detail.direction,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;activeSection;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;activeSection = sectionChangerWidget.getActiveSectionIndex();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (direction === &quot;CW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (activeSection &lt; sectionsLength - 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget.setActiveSection(activeSection + 1, 30);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (direction === &quot;CCW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (activeSection &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget.setActiveSection(activeSection - 1, 30);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pagebeforeshow&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changer = document.getElementById(&quot;hsectionchanger&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget = tau.widget.SectionChanger(changer, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circular: false,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation: &quot;horizontal&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useBouncingEffect: false
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sections = changer.querySelectorAll(&quot;.section&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionsLength = sections.length;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;, rotarydetentHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pagebeforehide&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget.destroy();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;, rotarydetentHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}(tau));
+   (function(tau)
+   {
+      var changer,
+          sectionChangerWidget,
+          sections,
+          sectionsLength;
+
+          rotarydetentHandler = function(event)
+          {
+             var direction = event.detail.direction,
+                 activeSection;
+
+             activeSection = sectionChangerWidget.getActiveSectionIndex();
+
+             if (direction === "CW")
+             /* Right direction */
+             {
+                if (activeSection &lt; sectionsLength - 1)
+                {
+                   sectionChangerWidget.setActiveSection(activeSection + 1, 30);
+                }
+             }
+             else if (direction === "CCW")
+             /* Left direction */
+             {
+                if (activeSection &gt; 0)
+                {
+                   sectionChangerWidget.setActiveSection(activeSection - 1, 30);
+                }
+             }
+          };
+
+      if (tau.support.shape.circle)
+      {
+         document.addEventListener("pagebeforeshow", function()
+            {
+               changer = document.getElementById("hsectionchanger");
+               sectionChangerWidget = tau.widget.SectionChanger(changer,
+               {
+                  circular: false,
+                  orientation: "horizontal",
+                  useBouncingEffect: false
+               });
+               sections = changer.querySelectorAll(".section");
+               sectionsLength = sections.length;
+
+               document.addEventListener("rotarydetent", rotarydetentHandler);
+            });
+
+         document.addEventListener("pagebeforehide", function(e)
+            {
+               sectionChangerWidget.destroy();
+               document.removeEventListener("rotarydetent", rotarydetentHandler);
+            });
+      }
+   }(tau));
 &lt;/script&gt;
 </pre>
 <h2 id="progress">Changing the Circle-shaped Progress Bar Value</h2>
@@ -332,77 +332,77 @@
 
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;div class=&quot;ui-page&quot; id=&quot;pageRotaryEvent&quot; data-enable-page-scroll=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Rotary Event&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;progress class=&quot;ui-circle-progress&quot; id=&quot;circleprogress&quot; max=&quot;100&quot; value=&quot;20&quot;&gt;&lt;/progress&gt;
+&lt;div class="ui-page" id="pageRotaryEvent" data-enable-page-scroll="false"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Rotary Event&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;div id="result"&gt;&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;progress class="ui-circle-progress" id="circleprogress" max="100" value="20"&gt;&lt;/progress&gt;
 &lt;/div&gt;
 
 &lt;!--Script--&gt;
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;(function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var progressBar,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotaryDetentHandler = function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get rotary direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;direction = e.detail.direction;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (direction === &quot;CW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (parseInt(progressBarWidget.value(), 10) &lt; 100)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = parseInt(progressBarWidget.value(), 10) + 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (direction === &quot;CCW&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left direction */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (parseInt(progressBarWidget.value(), 10) &gt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = parseInt(progressBarWidget.value(), 10) - 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerText = value + &quot;%&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.value(value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pagebeforeshow&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv = document.getElementById(&quot;result&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBar = document.getElementById(&quot;circleprogress&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{size: &quot;large&quot;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultDiv.innerText = progressBarWidget.value() + &quot;%&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add rotarydetent handler to document */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pagehide&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressBarWidget.destroy();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.removeEventListener(&quot;rotarydetent&quot;, rotaryDetentHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}());
+   (function()
+   {
+      var progressBar,
+          progressBarWidget,
+          resultDiv,
+          value,
+          direction,
+          rotaryDetentHandler = function(e)
+          {
+             /* Get rotary direction */
+             direction = e.detail.direction;
+
+             if (direction === "CW")
+             {
+                /* Right direction */
+                if (parseInt(progressBarWidget.value(), 10) &lt; 100)
+                {
+                   value = parseInt(progressBarWidget.value(), 10) + 1;
+                }
+                else
+                {
+                   value = 100;
+                }
+             }
+             else if (direction === "CCW")
+             {
+                /* Left direction */
+                if (parseInt(progressBarWidget.value(), 10) &gt; 0)
+                {
+                   value = parseInt(progressBarWidget.value(), 10) - 1;
+                }
+                else
+                {
+                   value = 0;
+                }
+             }
+
+             resultDiv.innerText = value + "%";
+             progressBarWidget.value(value);
+          };
+
+      document.addEventListener("pagebeforeshow", function()
+         {
+            resultDiv = document.getElementById("result");
+
+            progressBar = document.getElementById("circleprogress");
+            progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
+                                                                 {size: "large"});
+            resultDiv.innerText = progressBarWidget.value() + "%";
+            /* Add rotarydetent handler to document */
+            document.addEventListener("rotarydetent", rotaryDetentHandler);
+         });
+
+      document.addEventListener("pagehide", function()
+         {
+            progressBarWidget.destroy();
+            document.removeEventListener("rotarydetent", rotaryDetentHandler);
+         });
+   }());
 &lt;/script&gt;
 </pre>
 
diff --git a/org.tizen.guides/html/web/ui/tau/tau_w.htm b/org.tizen.guides/html/web/ui/tau/tau_w.htm
index 46acb4d..ceab89f 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/tau_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/tau_w.htm
@@ -34,12 +34,12 @@
 
 <div id="container"><div id="contents"><div class="content">
     <h1>Tizen Advanced UI</h1>
-       
+
 <p>The Tizen Advanced UI Framework components allow you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider, which gives you interaction and manipulation features.</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
 
-<p>TAU is the standard Web UI library for Tizen platform, originated from the Tizen Web UI Framework Library (standard library for Tizen 2.2.1), which was mainly an extension to jQuery Mobile. The key features of the Web UI Framework Library were coding simplification and application creation speed.  The purpose of TAU is to be the &quot;framework advanced to the next level&quot;.</p>
+<p>TAU is the standard Web UI library for Tizen platform, originated from the Tizen Web UI Framework Library (standard library for Tizen 2.2.1), which was mainly an extension to jQuery Mobile. The key features of the Web UI Framework Library were coding simplification and application creation speed.  The purpose of TAU is to be the "framework advanced to the next level".</p>
 
 <div class="note">
        <strong>Note</strong>
diff --git a/org.tizen.guides/html/web/ui/tau/thumbnail_ww.htm b/org.tizen.guides/html/web/ui/tau/thumbnail_ww.htm
index 737efa0..7fcbb92 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/thumbnail_ww.htm
+++ b/org.tizen.guides/html/web/ui/tau/thumbnail_ww.htm
@@ -49,21 +49,21 @@
 <ol>
 <li>Edit the HTML code to add the thumbnail component to your application screen:
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;sectionChangerPage&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-enable-page-scroll=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;sectionChanger&quot; class=&quot;ui-content ui-section-changer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;scroller&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;thumbnail&quot;&gt;3&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="sectionChangerPage"
+     data-enable-page-scroll="false"&gt;
+   &lt;div id="sectionChanger" class="ui-content ui-section-changer"&gt;
+      &lt;div id="scroller"&gt;
+         &lt;section class="ui-section-active"&gt;
+            &lt;div class="thumbnail"&gt;1&lt;/div&gt;
+         &lt;/section&gt;
+         &lt;section&gt;
+            &lt;div class="thumbnail"&gt;2&lt;/div&gt;
+         &lt;/section&gt;
+         &lt;section&gt;
+            &lt;div class="thumbnail"&gt;3&lt;/div&gt;
+         &lt;/section&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -72,49 +72,49 @@
 <pre class="prettyprint">
 section
 {
-&nbsp;&nbsp;&nbsp;padding: 0 10px 0 10px;
-&nbsp;&nbsp;&nbsp;height: 100%;
+   padding: 0 10px 0 10px;
+   height: 100%;
 }
 .thumbnail
 {
-&nbsp;&nbsp;&nbsp;height: 300px;
-&nbsp;&nbsp;&nbsp;width: 200px;
-&nbsp;&nbsp;&nbsp;background-color: #80482f;
-&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;transform: translate3d(0, -50%, 0);
-&nbsp;&nbsp;&nbsp;position: relative;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;line-height: 300px;
+   height: 300px;
+   width: 200px;
+   background-color: #80482f;
+   top: 50%;
+   transform: translate3d(0, -50%, 0);
+   position: relative;
+   text-align: center;
+   line-height: 300px;
 }
 .ui-section-active .thumbnail
 {
-&nbsp;&nbsp;&nbsp;background-color: #000000;
-&nbsp;&nbsp;&nbsp;border: 1px solid #a06322;
+   background-color: #000000;
+   border: 1px solid #a06322;
 }
 
 @media all and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;section
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.thumbnail
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 50%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #802532;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(0.8) translate3d(0, -60%, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: transform 300ms;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.ui-section-active .thumbnail
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(1) translate3d(0, -50%, 0);
-&nbsp;&nbsp;&nbsp;}
+   section
+   {
+      padding: 0;
+   }
+   .thumbnail
+   {
+      height: 200px;
+      width: 200px;
+      border-radius: 50%;
+      background-color: #802532;
+      top: 50%;
+      position: relative;
+      text-align: center;
+      line-height: 200px;
+      transform: scale(0.8) translate3d(0, -60%, 0);
+      transition: transform 300ms;
+   }
+   .ui-section-active .thumbnail
+   {
+      transform: scale(1) translate3d(0, -50%, 0);
+   }
 }
 </pre>
 </li>
@@ -122,17 +122,17 @@ section
 <pre class="prettyprint">
 (function()
 {
-&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;sectionChangerPage&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChanger = document.getElementById(&quot;sectionChanger&quot;);
-
-&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.widget.SectionChanger(sectionChanger,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation: &quot;horizontal&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fillContent: false
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   var page = document.getElementById("sectionChangerPage"),
+       sectionChanger = document.getElementById("sectionChanger");
+
+   page.addEventListener("pagebeforeshow", function()
+      {
+         tau.widget.SectionChanger(sectionChanger,
+         {
+            orientation: "horizontal",
+            fillContent: false
+         });
+      });
 })();
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/tau/ui_component_w.htm b/org.tizen.guides/html/web/ui/tau/ui_component_w.htm
index d8cbdf7..37e7f72 100644 (file)
--- a/org.tizen.guides/html/web/ui/tau/ui_component_w.htm
+++ b/org.tizen.guides/html/web/ui/tau/ui_component_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -58,15 +58,15 @@
 <p>The following example shows the creation of some components with a <code>class</code> selector:</p>
 <pre class="prettyprint">
 &lt;!--Create an Expandable component--&gt;
-&lt;div class=&quot;ui-expandable&quot; id=&quot;expandable-test&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Expandable head&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Content&lt;/div&gt;
+&lt;div class="ui-expandable" id="expandable-test"&gt;
+   &lt;h1&gt;Expandable head&lt;/h1&gt;
+   &lt;div&gt;Content&lt;/div&gt;
 &lt;/div&gt;
 
 &lt;!--Create a ToggleSwitch component--&gt;
-&lt;select class=&quot;ui-toggleswitch&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;off&quot;&gt;&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;on&quot;&gt;&lt;/option&gt;
+&lt;select class="ui-toggleswitch"&gt;
+   &lt;option value="off"&gt;&lt;/option&gt;
+   &lt;option value="on"&gt;&lt;/option&gt;
 &lt;/select&gt;
 </pre>
 </li>
@@ -75,13 +75,13 @@
 <p>The following example shows the creation of some components with a <code>data-role</code> selector:</p>
 <pre class="prettyprint">
 &lt;!--Create a TextEnveloper component--&gt;
-&lt;div data-role=&quot;textenveloper&quot;&gt;&lt;/div&gt;
+&lt;div data-role="textenveloper"&gt;&lt;/div&gt;
 
 &lt;!--Create a Drawer component--&gt;
-&lt;div data-role=&quot;drawer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul data-role=&quot;listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List item 1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;div data-role="drawer"&gt;
+   &lt;ul data-role="listview"&gt;
+      &lt;li&gt;&lt;a href="#"&gt;List item 1&lt;/a&gt;&lt;/li&gt;
+   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -96,22 +96,22 @@
 <p>Various options can be set with <code>data-</code> attribute when the component is being created. You can set options this way only when the component is created. After creating the component, changing the data attributes on the HTML element does not change the component options.</p>
 <p>The following example shows a SectionChanger code with a <code>data-</code> option:</p>
 <pre class="prettyprint">
-&lt;div id=&quot;hasSectionchangerPage&quot; class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-section-changer&quot; data-orientation=&quot;horizontal&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-circular=&quot;true&quot; data-use-tab=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="hasSectionchangerPage" class="ui-page"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;SectionChanger&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-section-changer" data-orientation="horizontal"
+        data-circular="true" data-use-tab="true"&gt;
+      &lt;div&gt;
+         &lt;section&gt;
+            &lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+         &lt;section class="ui-section-active"&gt;
+            &lt;h3&gt;MAIN PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+         &lt;section&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 <p>The <code>data-circular</code> and <code>data-use-tab</code> attributes are the initial options for creating a SectionChanger.</p>
@@ -122,30 +122,30 @@
 <p>Options can be set as arguments to the component constructor. When using options as arguments, you must use the camelCase name.</p>
 <p>The following example shows the use of a manual constructor:</p>
 <pre class="prettyprint">
-&lt;div id=&quot;hasSectionchangerPage&quot; class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-section-changer&quot; id=&quot;sectionchanger&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="hasSectionchangerPage" class="ui-page"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;SectionChanger&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-section-changer" id="sectionchanger"&gt;
+      &lt;div&gt;
+         &lt;section&gt;
+            &lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+         &lt;section class="ui-section-active"&gt;
+            &lt;h3&gt;MAIN PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var sectionEl = document.getElementById(&quot;sectionchanger&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget = tau.widget.SectionChanger(sectionEl,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;orientation: &quot;horizontal&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circular: true
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useTab: true
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   var sectionEl = document.getElementById("sectionchanger"),
+       sectionChangerWidget = tau.widget.SectionChanger(sectionEl,
+       {
+          orientation: "horizontal",
+          circular: true
+          useTab: true
+       });
 &lt;/script&gt;
 </pre>
 </li>
@@ -153,29 +153,29 @@
 <li>Setting options with a method call
 <p>To set options dynamically, use the <code>option</code>() method.</p>
 <pre class="prettyprint">
-&lt;div id=&quot;hasSectionchangerPage&quot; class=&quot;ui-page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;SectionChanger&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-section-changer&quot; data-orientation=&quot;horizontal&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-circular=&quot;true&quot; data-use-tab=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=&quot;ui-section-active&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;MAIN PAGE&lt;/h3&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div id="hasSectionchangerPage" class="ui-page"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;SectionChanger&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-section-changer" data-orientation="horizontal"
+        data-circular="true" data-use-tab="true"&gt;
+      &lt;div&gt;
+         &lt;section&gt;
+            &lt;h3&gt;LEFT1 PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+         &lt;section class="ui-section-active"&gt;
+            &lt;h3&gt;MAIN PAGE&lt;/h3&gt;
+         &lt;/section&gt;
+         &lt;section&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var sectionEl = document.getElementById(&quot;sectionchanger&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sectionChangerWidget = tau.widget.SectionChanger(sectionEl);
+   var sectionEl = document.getElementById("sectionchanger"),
+       sectionChangerWidget = tau.widget.SectionChanger(sectionEl);
 
-&nbsp;&nbsp;&nbsp;sectionChangerWidget.option(&quot;circular&quot;, true);
+   sectionChangerWidget.option("circular", true);
 &lt;/script&gt;
 </pre>
 </li>
@@ -187,21 +187,21 @@
 <ol>
 <li>Create the UI component:
 <pre class="prettyprint">
-&lt;div class=&quot;ui-indexscrollbar&quot; id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
+&lt;div class="ui-indexscrollbar" id="indexscrollbar"&gt;&lt;/div&gt;
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar();
+   $("#indexscrollbar").indexscrollbar();
 &lt;/script&gt;
 </pre>
 </li>
 <li>Use the call methods:
 <pre class="prettyprint">
-$(&quot;.selector&quot;).componentName(&quot;methodName&quot;, argument1, argument2, ...);
+$(".selector").componentName("methodName", argument1, argument2, ...);
 </pre>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-indexscrollbar&quot; id=&quot;indexscrollbar&quot;&gt;&lt;/div&gt;
+&lt;div class="ui-indexscrollbar" id="indexscrollbar"&gt;&lt;/div&gt;
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* If the IndexScrollBar component is created */
-&nbsp;&nbsp;&nbsp;$(&quot;#indexscrollbar&quot;).indexscrollbar(&quot;destroy&quot;);
+   /* If the IndexScrollBar component is created */
+   $("#indexscrollbar").indexscrollbar("destroy");
 &lt;/script&gt;
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/ui/ui_guide_w.htm b/org.tizen.guides/html/web/ui/ui_guide_w.htm
index 2c04d3f..296eb76 100644 (file)
--- a/org.tizen.guides/html/web/ui/ui_guide_w.htm
+++ b/org.tizen.guides/html/web/ui/ui_guide_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>User Interface</title>  
+       <title>User Interface</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>User Interface</h1>
@@ -42,7 +42,7 @@
 </ul>
 
 
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm b/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
index 8d50ceb..28911a5 100644 (file)
--- a/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm
@@ -39,15 +39,15 @@
   <p>The main communication features are:</p>
   <ul>
        <li><a href="web_messaging_w.htm">HTML5 Web Messaging</a> <strong>in mobile and wearable applications only</strong>
-       <p>Enables you to send and receive data between Web sites and through a message channel.</p></li>       
+       <p>Enables you to send and receive data between Web sites and through a message channel.</p></li>
        <li><a href="websocket_w.htm">WebSocket</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to connect to the socket server, and send and receive data.</p></li>
        <li><a href="xmlhttprequest_w.htm">XMLHttpRequest (Level 1 and 2)</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to use cross-origin resource sharing (CORS) to request and send data of various content types, and to monitor the operation progress.</p></li>
-       <li><a href="server_sent_w.htm">Server-Sent Events</a> <strong>in mobile applications only</strong> 
+       <li><a href="server_sent_w.htm">Server-Sent Events</a> <strong>in mobile applications only</strong>
        <p>Enables you to exchange push data with the server.</p></li>
   </ul>
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm b/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm
index be6a291..7e4043d 100644 (file)
--- a/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm
@@ -38,10 +38,10 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Server-Sent Events</h1>
- 
+
 <p>Server-Sent Events feature is used to realize server push in a Web environment. The server push feature has evolved over time from a hidden IFrame through Ajax polling and Comet to the current implementation of server-sent events.</p>
 
-<p>This feature is supported in mobile applications only.</p> 
+<p>This feature is supported in mobile applications only.</p>
 
 <p>The Server-Sent Events API defines a simple data structure and interface, and a communication mechanism to realize the server push. In addition, it can handle the received data in the general DOM event format. However, the API repeatedly requests the data from the client to the server, so it is not a complete server push. The repeat period of the server request is determined by the <code>retry</code> value of the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream data format</a>. If the value is not defined, the repeat period is the default value of the browser.</p>
 
@@ -57,14 +57,14 @@
 </ul>
 
 <h2 id="Triggering" name="Triggering">Triggering Server Push Requests</h2>
-  
+
 <p>To take advantage of the server push feature, you must learn to connect to the server to request push data:</p>
 <ol>
 <li>Create an <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#the-eventsource-interface" target="_blank">EventSource</a> interface instance:
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var serverPage = &quot;http://165.213.198.151:8080/server_sent_events_server.php&quot;;
-&nbsp;&nbsp;&nbsp;var eventSource = new EventSource(serverPage);
+   var serverPage = "http://165.213.198.151:8080/server_sent_events_server.php";
+   var eventSource = new EventSource(serverPage);
 </pre>
 
 <div class="note">
@@ -74,21 +74,21 @@
 </li>
 <li>Implement the event handler for the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#handler-eventsource-onopen" target="_blank">open</a> event:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;var log = document.getElementById(&quot;log&quot;)
+   var log = document.getElementById("log")
 
-&nbsp;&nbsp;&nbsp;/* Open event */
-&nbsp;&nbsp;&nbsp;eventSource.onopen = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML+= &quot;&lt;p&gt;open: &quot; + new Date() + &quot;&lt;/p&gt;&quot;;
-&nbsp;&nbsp;&nbsp;};
+   /* Open event */
+   eventSource.onopen = function(e)
+   {
+      log.innerHTML+= "&lt;p&gt;open: " + new Date() + "&lt;/p&gt;";
+   };
 &lt;/script&gt;
 </pre>
 <p>The <code>open</code> event is triggered repeatedly based on the <code>retry</code> value of the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream data format</a>, to request push messages from the server.</p>
 </li>
 </ol>
 <p>In the following figure, the <code>open</code> event is fired every 2 seconds.</p>
-<p align="center"><strong>Figure: Push request event</strong></p> 
-<p align="center"><img alt="Push request event" src="../../../images/server-sent_request.png" /></p> 
+<p align="center"><strong>Figure: Push request event</strong></p>
+<p align="center"><img alt="Push request event" src="../../../images/server-sent_request.png" /></p>
 
  <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following files:</p>
@@ -96,22 +96,22 @@
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/server_sent_events" target="_blank">server_sent_events_client1.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/server_sent_events" target="_blank">server_sent_events_server.php</a></li>
  </ul>
- 
+
   <h2 id="Receiving" name="Receiving">Receiving Server Push Data</h2>
-  
-<p>To take advantage of the server push feature, you must learn to handle the push data events:</p> 
+
+<p>To take advantage of the server push feature, you must learn to handle the push data events:</p>
 <ol>
 <li><p>Define the data server that the client connects to, according to the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream interpretation rules</a>.</p>
 <p>Set the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#text-event-stream" target="_blank">MIME type</a> to <code>text/event-stream</code> so that the event stream can be sent, and set the header not to be cached.</p>
 <pre class="prettyprint">
 &lt;?php
-&nbsp;&nbsp;&nbsp;header(&#39;Content-Type: text/event-stream&#39;);
-&nbsp;&nbsp;&nbsp;header(&#39;Cache-Control: no-cache&#39;);
+   header('Content-Type: text/event-stream');
+   header('Cache-Control: no-cache');
 
-&nbsp;&nbsp;&nbsp;echo &quot;retry: 2000\n\n&quot;; /* Reconnection interval */
-&nbsp;&nbsp;&nbsp;echo &quot;data: push time =&gt; &quot;. date(&#39;r&#39;) . &quot;\n\n&quot;;
+   echo "retry: 2000\n\n"; /* Reconnection interval */
+   echo "data: push time =&gt; ". date('r') . "\n\n";
 
-&nbsp;&nbsp;&nbsp;flush();
+   flush();
 ?&gt;
 </pre>
 </li>
@@ -119,29 +119,29 @@
 <p>Create an <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#the-eventsource-interface" target="_blank">EventSource</a> interface instance and implement the event handler for the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#handler-eventsource-onmessage" target="_blank">message</a> event:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var serverPage = &quot;http://localhost/server_sent_events_server.php&quot;;
-&nbsp;&nbsp;&nbsp;var eventSource = new EventSource(serverPage);
-&nbsp;&nbsp;&nbsp;var log = document.getElementById(&quot;log&quot;);
-
-&nbsp;&nbsp;&nbsp;/* Open event */
-&nbsp;&nbsp;&nbsp;eventSource.onopen = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML+= &quot;&lt;p&gt;-----------------------&lt;/p&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML+= &quot;&lt;p&gt;open: &quot; + new Date() + &quot;&lt;/p&gt;&quot;;
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;/* message event */
-&nbsp;&nbsp;&nbsp;eventSource.onmessage = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML+= &quot;&lt;p&gt;[push data]: &lt;br/&gt;&quot; + e.data + &quot;&lt;/p&gt;&quot;;
-&nbsp;&nbsp;&nbsp;};
+   var serverPage = "http://localhost/server_sent_events_server.php";
+   var eventSource = new EventSource(serverPage);
+   var log = document.getElementById("log");
+
+   /* Open event */
+   eventSource.onopen = function(e)
+   {
+      log.innerHTML+= "&lt;p&gt;-----------------------&lt;/p&gt;";
+      log.innerHTML+= "&lt;p&gt;open: " + new Date() + "&lt;/p&gt;";
+   };
+
+   /* message event */
+   eventSource.onmessage = function(e)
+   {
+      log.innerHTML+= "&lt;p&gt;[push data]: &lt;br/&gt;" + e.data + "&lt;/p&gt;";
+   };
 &lt;/script&gt;
 </pre>
 </li>
 </ol>
 <p>In the following figure, the <code>open</code> event is fired every 2 seconds and the <code>message</code> event shows that push data is received.</p>
-<p align="center"><strong>Figure: Push message event</strong></p> 
-<p align="center"><img alt="Push message event" src="../../../images/server-sent_message.png" /></p> 
+<p align="center"><strong>Figure: Push message event</strong></p>
+<p align="center"><img alt="Push message event" src="../../../images/server-sent_message.png" /></p>
  <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following files:</p>
  <ul>
diff --git a/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm b/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm
index 99fd6e9..fba02be 100644 (file)
--- a/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm
@@ -60,41 +60,41 @@
 <p>The <code>postMessage()</code> method supports the following parameters:</p>
 <ul>
 <li><code>message</code>: Message to be sent.</li>
-<li><code>targetOrigin</code>: Domain receiving the message. If a certain domain cannot be defined, use the wildcard (&#39;*&#39;).</li>
+<li><code>targetOrigin</code>: Domain receiving the message. If a certain domain cannot be defined, use the wildcard ('*').</li>
 <li><code>transfer</code> (optional): List of transferable objects.</li>
 </ul>
 
-<p>Learning how to use cross-document messaging enhances the communication capabilities of your application:</p>  
+<p>Learning how to use cross-document messaging enhances the communication capabilities of your application:</p>
 <ol>
 <li>Create document A and B.</li>
 <li>Insert document B as <code>iframe</code> into document A:
 <pre class="prettyprint">
-&lt;iframe id=&quot;frame1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src=&quot;./web_messaging_cross_document_messaging_iframe.htm&quot;&gt;&lt;/iframe&gt;
+&lt;iframe id="frame1"
+        src="./web_messaging_cross_document_messaging_iframe.htm"&gt;&lt;/iframe&gt;
 </pre>
 </li>
 <li>In document A, use the <code>sendMessage()</code> method to send a message to document B.
 <p>Use the <code>postMessage()</code> method of the <code>iframe</code> window, which sends the message from the method content, to deliver the message to the <code>iframe</code>.</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function sendMessage(message)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame1 = document.getElementById(&#39;frame1&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame1.contentWindow.postMessage(message, &#39;*&#39;);
-&nbsp;&nbsp;&nbsp;}
+   function sendMessage(message)
+   {
+      var frame1 = document.getElementById('frame1');
+      frame1.contentWindow.postMessage(message, '*');
+   }
 &lt;/script&gt;
 </pre>
 </li>
 <li>Register the <code>message</code> event handler in document B to receive the sent message:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;btnSendMessageHandler = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var messageEle = document.getElementById(&#39;message&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sendMessage(messageEle.value);
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;/* Register event handler */
-&nbsp;&nbsp;&nbsp;btnSendMessage.onclick = btnSendMessageHandler;
+   btnSendMessageHandler = function(e)
+   {
+      var messageEle = document.getElementById('message');
+      sendMessage(messageEle.value);
+   };
+   /* Register event handler */
+   btnSendMessage.onclick = btnSendMessageHandler;
 &lt;/script&gt;
 </pre>
 </li>
@@ -104,34 +104,34 @@
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_web_messaging" target="_blank">web_messaging_cross_document_messaging.htm</a></li>
  </ul>
-  
+
   <h2 id="Channel_Messaging" name="Channel_Messaging">Using Channel Messaging</h2>
-<p>The <code>MessageChannel</code> instance broadcasts message sending and receiving, and has 2 properties: <code>port1</code> and <code>port2</code>. Each port is used to send and receive messages, and a message that is sent from one port with the <code>postMessage()</code> method is received by the other through the <code>message</code> event.</p>  
-<p>Learning how to use channel messaging enhances the communication capabilities of your application:</p>  
+<p>The <code>MessageChannel</code> instance broadcasts message sending and receiving, and has 2 properties: <code>port1</code> and <code>port2</code>. Each port is used to send and receive messages, and a message that is sent from one port with the <code>postMessage()</code> method is received by the other through the <code>message</code> event.</p>
+<p>Learning how to use channel messaging enhances the communication capabilities of your application:</p>
 <ol>
-<li>To send a message from document A to document B, create in document A a <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">MessageChannel</a> interface instance, which has 2 <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-ports" target="_blank">message port</a> attributes: <code>port1</code> and <code>port2</code>. 
+<li>To send a message from document A to document B, create in document A a <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">MessageChannel</a> interface instance, which has 2 <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-ports" target="_blank">message port</a> attributes: <code>port1</code> and <code>port2</code>.
 <p>The <code>port2</code> attribute of the <code>MessageChannel</code> instance is delivered to document B through the <code>postMessage()</code> method of the document B window object:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var messageChannel = new MessageChannel();
-
-&nbsp;&nbsp;&nbsp;function setMessagePort()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* iframe element ID of the port to be delivered */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame1 = document.getElementById(&#39;iframe1&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame1.contentWindow.postMessage(&#39;&#39;, [messageChannel.port2], &#39;*&#39;);
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;window.onload = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setMessagePort();
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;/* Message is sent to port2 through port1 */
-&nbsp;&nbsp;&nbsp;function sendMessage(message)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messageChannel.port1.postMessage(message);
-&nbsp;&nbsp;&nbsp;};
+   var messageChannel = new MessageChannel();
+
+   function setMessagePort()
+   {
+      /* iframe element ID of the port to be delivered */
+      var frame1 = document.getElementById('iframe1');
+      frame1.contentWindow.postMessage('', [messageChannel.port2], '*');
+   };
+
+   window.onload = function()
+   {
+      setMessagePort();
+   };
+
+   /* Message is sent to port2 through port1 */
+   function sendMessage(message)
+   {
+      messageChannel.port1.postMessage(message);
+   };
 &lt;/script&gt;
 </pre>
 
@@ -144,19 +144,19 @@
 <li>Define a <code>message</code> event in the <code>window</code> object of document B, and register the event handler in the <code>port</code> sent from document A.
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var port = null;
-
-&nbsp;&nbsp;&nbsp;messageHandler = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;port = e.ports[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;port.onmessage = function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var messageEle = document.getElementById(&#39;message&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;messageEle.innerHTML = e.data;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;window.onmessage = messageHandler;
+   var port = null;
+
+   messageHandler = function(e)
+   {
+      port = e.ports[0];
+      port.onmessage = function(e)
+      {
+         var messageEle = document.getElementById('message');
+         messageEle.innerHTML = e.data;
+      };
+   };
+
+   window.onmessage = messageHandler;
 &lt;/script&gt;
 </pre>
 <p>A message sent through the <code>postMessage()</code> method of <code>port1</code> from document A is received through the <code>message</code> event of <code>port2</code> in document B, and the message sent through the <code>postMessage()</code> method of <code>port2</code> from document B is received through the <code>message</code> event of <code>port1</code> in document A.</p>
diff --git a/org.tizen.guides/html/web/w3c/communication/websocket_w.htm b/org.tizen.guides/html/web/w3c/communication/websocket_w.htm
index 914ede3..f1462c4 100644 (file)
--- a/org.tizen.guides/html/web/w3c/communication/websocket_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/websocket_w.htm
@@ -31,7 +31,7 @@
                        <li><a href="#Sending_Data">Sending Data to the Server</a></li>
                        <li><a href="#Receiving_Data">Receiving Data from the Server</a></li>
                        <li><a href="#Closing_Socket_Connection">Closing the Socket Connection</a></li>
-               </ul>           
+               </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket API for Mobile Web</a></li>
@@ -42,12 +42,12 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>WebSocket</h1>
-  
+
 <p>WebSocket in a Web environment enables connection-oriented full duplex communication, as with a TCP socket. (The server and browser can send and receive data real-time through a continuously connected TCP line.)</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
 
-<p>The difference between the previously used communication method in the Web environment and the new  Web socket lies in the protocol. The Web socket protocol uses HTTP in establishing a connection, however, all communication after the connection is established happens using the Web socket&#39;s independent protocol.</p>
+<p>The difference between the previously used communication method in the Web environment and the new  Web socket lies in the protocol. The Web socket protocol uses HTTP in establishing a connection, however, all communication after the connection is established happens using the Web socket's independent protocol.</p>
 
 <p>With a Web socket, the used header is extremely small, causing very little overhead. A long-term connection is used as a basis, meaning that if there is connection, sending data from client or server is possible. The long-term connection means that data can be sent and received through 1 connection, and you do not need to establish a separate connection for each sending and receiving instance. <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#ping-and-pong-frames" target="_blank">Ping and pong frames</a> can also be used.</p>
 
@@ -69,12 +69,12 @@ URL format has some restrictions</a>, for example, it must use the <code>ws</cod
 </ul>
 
 <h2 id="Connecting_Socket_Server" name="Connecting_Socket_Server">Connecting to the Socket Server</h2>
-  
-<p>To use the Web socket features in your application, you must learn to connect to a socket server:</p>  
+
+<p>To use the Web socket features in your application, you must learn to connect to a socket server:</p>
 <ol>
 <li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
 <pre class="prettyprint">
-var webSocketUrl = &quot;wss://html5labs-interop.cloudapp.net:443/echo&quot;;
+var webSocketUrl = "wss://html5labs-interop.cloudapp.net:443/echo";
 
 var webSocket = new WebSocket(webSocketURL);
 </pre>
@@ -85,13 +85,13 @@ var webSocket = new WebSocket(webSocketURL);
 /* If the connection is established */
 webSocket.onopen = function(e)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;connection open, readyState: &#39; + e.target.readyState);
+   console.log('connection open, readyState: ' + e.target.readyState);
 };
 
 /* If the connection fails or is closed with prejudice */
 webSocket.onerror = function(e)
 {
-&nbsp;&nbsp;&nbsp;/* Error handling */
+   /* Error handling */
 };
 </pre>
 <p>If the connection is established, the <code>readyState</code> attribute is changed to <code>1</code> and the <code>open</code> event is triggered. If the connection fails, the attribute value is set to <code>3</code>, and the HTTP 503 error is returned.</p>
@@ -104,12 +104,12 @@ webSocket.onerror = function(e)
  </ul>
 
   <h2 id="Sending_Data" name="Sending_Data">Sending Data to the Server</h2>
-  
-<p>To use the Web socket features in your application, you must learn to connect to send data to the server:</p>  
+
+<p>To use the Web socket features in your application, you must learn to connect to send data to the server:</p>
 <ol>
 <li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
 <pre class="prettyprint">
-var webSocketUrl = &quot;wss://html5labs-interop.cloudapp.net:443/echo&quot;;
+var webSocketUrl = "wss://html5labs-interop.cloudapp.net:443/echo";
 
 var webSocket = new WebSocket(webSocketURL);
 </pre>
@@ -119,10 +119,10 @@ var webSocket = new WebSocket(webSocketURL);
 <pre class="prettyprint">
 function sendMessage(msg)
 {
-&nbsp;&nbsp;&nbsp;if (webSocket.readyState === 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;webSocket.send(msg);
-&nbsp;&nbsp;&nbsp;}
+   if (webSocket.readyState === 1)
+   {
+      webSocket.send(msg);
+   }
 };
 </pre>
 </li>
@@ -135,12 +135,12 @@ function sendMessage(msg)
 
 
   <h2 id="Receiving_Data" name="Receiving_Data">Receiving Data from the Server</h2>
-  
-<p>To use the Web socket features in your application, you must learn to receive data from the server:</p>  
+
+<p>To use the Web socket features in your application, you must learn to receive data from the server:</p>
 <ol>
 <li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
 <pre class="prettyprint">
-var webSocketUrl = &quot;wss://html5labs-interop.cloudapp.net:443/echo&quot;;
+var webSocketUrl = "wss://html5labs-interop.cloudapp.net:443/echo";
 
 var webSocket = new WebSocket(webSocketURL);
 </pre>
@@ -149,7 +149,7 @@ var webSocket = new WebSocket(webSocketURL);
 <pre class="prettyprint">
 webSocket.onmessage = function(e)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;server message: &#39; + e.data);
+   console.log('server message: ' + e.data);
 };
 </pre>
 </li>
@@ -160,14 +160,14 @@ webSocket.onmessage = function(e)
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/the_websocket_api" target="_blank">web_socket.htm</a></li>
  </ul>
 
- 
+
   <h2 id="Closing_Socket_Connection" name="Closing_Socket_Connection">Closing the Socket Connection</h2>
-  
-<p>To use the Web socket features in your application, you must learn to close the socket connection:</p>  
+
+<p>To use the Web socket features in your application, you must learn to close the socket connection:</p>
 <ol>
 <li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
 <pre class="prettyprint">
-var webSocketUrl = &quot;wss://html5labs-interop.cloudapp.net:443/echo&quot;;
+var webSocketUrl = "wss://html5labs-interop.cloudapp.net:443/echo";
 
 var webSocket = new WebSocket(webSocketURL);
 </pre>
@@ -176,7 +176,7 @@ var webSocket = new WebSocket(webSocketURL);
 <pre class="prettyprint">
 webSocket.onclose = function(e)
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;connection close, readyState: &#39; + e.target.readyState);
+   console.log('connection close, readyState: ' + e.target.readyState);
 };
 </pre>
 </li>
@@ -185,10 +185,10 @@ webSocket.onclose = function(e)
 <pre class="prettyprint">
 function closeConnection()
 {
-&nbsp;&nbsp;&nbsp;if (webSocket.readyState === 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;webSocket.close();
-&nbsp;&nbsp;&nbsp;}
+   if (webSocket.readyState === 1)
+   {
+      webSocket.close();
+   }
 };
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm b/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm
index fbc927a..572f8b2 100644 (file)
--- a/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm
+++ b/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm
@@ -105,19 +105,19 @@
 
 
 <h2 id="Sending_Request" name="Sending_Request">Sending a Cross-origin Request</h2>
-  
+
 <p>To use the XML HTTP request features in your application, you must learn to send a cross-origin request:</p>
 <ol>
 <li><p>Create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance:</p>
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var client = new XMLHttpRequest();
+   var client = new XMLHttpRequest();
 </pre>
 </li>
 <li><p>Open the connection with the <code>open()</code> method using the cross-domain URL as a parameter. Send the request with the <code>send()</code> method.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;client.open(&quot;GET&quot;, &quot;video_sample.mp4&quot;);
-&nbsp;&nbsp;&nbsp;client.send();
+   client.open("GET", "video_sample.mp4");
+   client.send();
 &lt;/script&gt;
 </pre>
 
@@ -134,45 +134,45 @@
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">video_sample.mp4</a></li>
  </ul>
 
- 
+
 <h2 id="Uploading_Files" name="Uploading_Files">Uploading Files with Ajax</h2>
 
 <p>To use the XML HTTP request features in your application, you must learn to upload files on the background with Ajax:</p>
 <ol>
 <li><p>Define the input elements for the file upload. Use the <code>upload()</code> method for the button click event to upload the file when the button is clicked.</p>
 <pre class="prettyprint">
-&lt;input type=&quot;file&quot; id=&quot;uploadfile&quot; name=&quot;uploadfile&quot;/&gt;
-&lt;input type=&quot;button&quot; value=&quot;upload&quot; onclick=&quot;upload()&quot;/&gt;
+&lt;input type="file" id="uploadfile" name="uploadfile"/&gt;
+&lt;input type="button" value="upload" onclick="upload()"/&gt;
 </pre>
 </li>
-<li><p>In the <code>upload()</code> method, create a <a href="http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface" target="_blank">FormData</a> interface instance, and add the <a href="http://www.w3.org/wiki/HTML/Elements/input/file" target="_blank">file</a> element with the attached file into it. Use the <code>send()</code> method to send the <code>FormData</code> to the server.  
+<li><p>In the <code>upload()</code> method, create a <a href="http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface" target="_blank">FormData</a> interface instance, and add the <a href="http://www.w3.org/wiki/HTML/Elements/input/file" target="_blank">file</a> element with the attached file into it. Use the <code>send()</code> method to send the <code>FormData</code> to the server.
 </p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var client = new XMLHttpRequest();
-
-&nbsp;&nbsp;&nbsp;function upload()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var file = document.getElementById(&quot;uploadfile&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create a FormData instance */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var formData = new FormData();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add the file */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;formData.append(&quot;upload&quot;, file.files[0]);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;client.open(&quot;post&quot;, &quot;/upload&quot;, true);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;client.setRequestHeader(&quot;Content-Type&quot;, &quot;multipart/form-data&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;client.send(formData); /* Send to server */
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* Check the response status */
-&nbsp;&nbsp;&nbsp;client.onreadystatechange = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (client.readyState == 4 &amp;&amp; client.status == 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(client.statusText);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   var client = new XMLHttpRequest();
+
+   function upload()
+   {
+      var file = document.getElementById("uploadfile");
+
+      /* Create a FormData instance */
+      var formData = new FormData();
+      /* Add the file */
+      formData.append("upload", file.files[0]);
+
+      client.open("post", "/upload", true);
+      client.setRequestHeader("Content-Type", "multipart/form-data");
+      client.send(formData); /* Send to server */
+   }
+
+   /* Check the response status */
+   client.onreadystatechange = function()
+   {
+      if (client.readyState == 4 &amp;&amp; client.status == 200)
+      {
+         alert(client.statusText);
+      }
+   }
 &lt;/script&gt;
 </pre>
 </li>
@@ -182,95 +182,95 @@
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">xhr1.html</a></li>
  </ul>
- 
+
 <h2 id="Handling_Requests" name="Handling_Requests">Handling Request Events</h2>
 
  <p>To use the XML HTTP request features in your application, you must learn to track requests through events:</p>
 <ol>
 <li><p>Define a text element in which to display the request event results:</p>
 <pre class="prettyprint">
-&lt;div id=&quot;divText&quot;&gt;&lt;/div&gt;
+&lt;div id="divText"&gt;&lt;/div&gt;
 </pre>
 </li>
 <li><p>Create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and define event handlers for it:</p>
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var html = &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;var client = new XMLHttpRequest();
-
-&nbsp;&nbsp;&nbsp;/* Event handlers */
-&nbsp;&nbsp;&nbsp;client.onloadstart = onloadstarthandler;
-&nbsp;&nbsp;&nbsp;client.onprogress = onprogresshandler;
-&nbsp;&nbsp;&nbsp;client.onabort = onaborthandler;
-&nbsp;&nbsp;&nbsp;client.onerror = onerrorhandler;
-&nbsp;&nbsp;&nbsp;client.onload = onloadhandler;
-&nbsp;&nbsp;&nbsp;client.ontimeout = ontimeouthandler;
-&nbsp;&nbsp;&nbsp;client.onloadend = onloadendhandler;
-&nbsp;&nbsp;&nbsp;client.onreadystatechange = onreadystatechangehandler;
-
-&nbsp;&nbsp;&nbsp;/* Assign request type and server path */
-&nbsp;&nbsp;&nbsp;client.open(&quot;GET&quot;, &quot;video_sample.mp4&quot;);
-&nbsp;&nbsp;&nbsp;client.send();
+   var html = "";
+
+   var client = new XMLHttpRequest();
+
+   /* Event handlers */
+   client.onloadstart = onloadstarthandler;
+   client.onprogress = onprogresshandler;
+   client.onabort = onaborthandler;
+   client.onerror = onerrorhandler;
+   client.onload = onloadhandler;
+   client.ontimeout = ontimeouthandler;
+   client.onloadend = onloadendhandler;
+   client.onreadystatechange = onreadystatechangehandler;
+
+   /* Assign request type and server path */
+   client.open("GET", "video_sample.mp4");
+   client.send();
 </pre>
 </li>
 <li><p>Define the actions of each <a href="http://www.w3.org/TR/XMLHttpRequest/#event-handlers" target="_blank">event handler</a>:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* When the request begins */
-&nbsp;&nbsp;&nbsp;function onloadstarthandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html += &quot;onloadstart&lt;br/&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = html;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* When the request is in progress */
-&nbsp;&nbsp;&nbsp;function onprogresshandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html += &quot;onprogress&lt;br/&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = html;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* When the client cancels the request */
-&nbsp;&nbsp;&nbsp;function onaborthandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html += &quot;onabort&lt;br/&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = html;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* When server exception occurs */
-&nbsp;&nbsp;&nbsp;function onerrorhandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html += &quot;onerror&lt;br/&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = html;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* When the request is successfully terminated */
-&nbsp;&nbsp;&nbsp;function onloadhandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html += &quot;onload&lt;br/&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = html;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* When a timeout occurs */
-&nbsp;&nbsp;&nbsp;function ontimeouthandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html += &quot;ontimeout&lt;br/&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = html;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* When request is terminated regardless of success or failure */
-&nbsp;&nbsp;&nbsp;function onloadendhandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html += &quot;onloadend&lt;br/&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = html;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* Checks current progress based on a random repetition period */
-&nbsp;&nbsp;&nbsp;function onreadystatechangehandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html += &quot;onreadystate&lt;br/&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = html;
-&nbsp;&nbsp;&nbsp;}
+   /* When the request begins */
+   function onloadstarthandler(e)
+   {
+      html += "onloadstart&lt;br/&gt;";
+      document.getElementById("divText").innerHTML = html;
+   }
+
+   /* When the request is in progress */
+   function onprogresshandler(e)
+   {
+      html += "onprogress&lt;br/&gt;";
+      document.getElementById("divText").innerHTML = html;
+   }
+
+   /* When the client cancels the request */
+   function onaborthandler(e)
+   {
+      html += "onabort&lt;br/&gt;";
+      document.getElementById("divText").innerHTML = html;
+   }
+
+   /* When server exception occurs */
+   function onerrorhandler(e)
+   {
+      html += "onerror&lt;br/&gt;";
+      document.getElementById("divText").innerHTML = html;
+   }
+
+   /* When the request is successfully terminated */
+   function onloadhandler(e)
+   {
+      html += "onload&lt;br/&gt;";
+      document.getElementById("divText").innerHTML = html;
+   }
+
+   /* When a timeout occurs */
+   function ontimeouthandler(e)
+   {
+      html += "ontimeout&lt;br/&gt;";
+      document.getElementById("divText").innerHTML = html;
+   }
+
+   /* When request is terminated regardless of success or failure */
+   function onloadendhandler(e)
+   {
+      html += "onloadend&lt;br/&gt;";
+      document.getElementById("divText").innerHTML = html;
+   }
+
+   /* Checks current progress based on a random repetition period */
+   function onreadystatechangehandler(e)
+   {
+      html += "onreadystate&lt;br/&gt;";
+      document.getElementById("divText").innerHTML = html;
+   }
 &lt;/script&gt;
 </pre>
 </li>
@@ -281,55 +281,55 @@
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">xhr2.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">video_sample.mp4</a></li>
  </ul>
- 
+
 <h2 id="Tracking_Download" name="Tracking_Download">Tracking Download Progress State</h2>
 
-<p>To use the XML HTTP request features in your application, you must learn to track download progress:</p> 
+<p>To use the XML HTTP request features in your application, you must learn to track download progress:</p>
 <ol>
 <li><p>Define the input elements for managing a download. Use the <code>sendRequest()</code> and <code>abortRequest()</code> methods for the button click events to start and cancel a download.</p>
 <pre class="prettyprint">
-&lt;input type=&quot;button&quot; value=&quot;Send XMLHttpRequest&quot; onclick=&quot;sendRequest()&quot;/&gt;
-&lt;input type=&quot;button&quot; value=&quot;Abort Sending&quot; onclick=&quot;abortRequest()&quot;/&gt;
-&lt;div id=&quot;divText&quot;&gt;&lt;/div&gt;
+&lt;input type="button" value="Send XMLHttpRequest" onclick="sendRequest()"/&gt;
+&lt;input type="button" value="Abort Sending" onclick="abortRequest()"/&gt;
+&lt;div id="divText"&gt;&lt;/div&gt;
 </pre>
 </li>
 <li><p>Create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and define the handlers for the <code>onprogress</code> and <code>onabort</code> events to track the download progress and cancellation events:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var client = new XMLHttpRequest();
+   var client = new XMLHttpRequest();
 
-&nbsp;&nbsp;&nbsp;client.onprogress = onprogresshandler;
-&nbsp;&nbsp;&nbsp;client.onabort = onaborthandler;
+   client.onprogress = onprogresshandler;
+   client.onabort = onaborthandler;
 &lt;/script&gt;
 </pre>
 </li>
 <li><p>Use the <code>send()</code> method to request for a file to be read when the <strong>Start download</strong> button is clicked. When the <strong>Cancel download</strong> button is clicked, use the <code>abort()</code> method to cancel the download.</p>
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* When Start download button is clicked */
-&nbsp;&nbsp;&nbsp;function sendRequest()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;client.send();
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* When Cancel download button is clicked */
-&nbsp;&nbsp;&nbsp;function abortRequest()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;client.abort();
-&nbsp;&nbsp;&nbsp;}
+   /* When Start download button is clicked */
+   function sendRequest()
+   {
+      client.send();
+   }
+
+   /* When Cancel download button is clicked */
+   function abortRequest()
+   {
+      client.abort();
+   }
 </pre>
 </li>
 <li><p>During the download, use the <code>onprogresshandler</code> event handler to track the current and total download size, and calculate the download status. With the <code>onaborthandler</code> event handler, you can display the cancellation notification on the screen.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function onprogresshandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = &quot;DownLoading... (&quot; + parseInt(e.loaded / e.totalSize * 100) + &quot;%)&quot;;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function onaborthandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;divText&quot;).innerHTML = &quot;Download has been cancelled by user.&quot;;
-&nbsp;&nbsp;&nbsp;}
+   function onprogresshandler(e)
+   {
+      document.getElementById("divText").innerHTML = "DownLoading... (" + parseInt(e.loaded / e.totalSize * 100) + "%)";
+   }
+
+   function onaborthandler(e)
+   {
+      document.getElementById("divText").innerHTML = "Download has been cancelled by user.";
+   }
 &lt;/script&gt;
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/w3c/device/battery_w.htm b/org.tizen.guides/html/web/w3c/device/battery_w.htm
index f583213..6d7ee5e 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/battery_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/battery_w.htm
@@ -11,7 +11,7 @@
     <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
   <title>Battery Status</title>
-  
+
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -45,9 +45,9 @@
 <h1>Battery Status</h1>
 
   <p>You can programmatically determine the battery status of the device on which your application is running.</p>
-  
+
    <p>This feature is supported in mobile and wearable applications only.</p>
-  
+
   <p>The main features of the Battery Status API include:</p>
   <ul>
    <li>Retrieving the battery status
@@ -57,7 +57,7 @@
 <p>You can set event listeners with the <code>BatteryManager</code> interface attributes to <a href="#detect">detect changes in the battery status</a>.</p>
 </li>
   </ul>
-  
+
 <p>Knowing the battery status of the device helps you to defer or scale back work when the device is not charging or is low on battery. For example:</p>
 <ul><li>A Web-based email client can modify how often it checks the server for new email based on the battery status. It can make the check every few seconds if the device is charging or has a full battery, but less often if the device is not charging or is low on battery.</li>
 <li>A Web-based word processor can monitor the battery level and prevent data loss by saving any changes before the battery runs out.</li></ul>
@@ -65,23 +65,23 @@
 
 <h2 id="retrieve" name="retrieve">Retrieving Battery Status Information</h2>
 
-                       <p>To enhance the user interaction with the device, you must learn to retrieve and display the battery status:</p> 
-  <ol> 
+                       <p>To enhance the user interaction with the device, you must learn to retrieve and display the battery status:</p>
+  <ol>
    <li>
    <p>Define the elements used to display the battery status information on the screen:</p>
 <pre class="prettyprint">
-&lt;div&gt;charging: &lt;span id=&quot;charging&quot;&gt;&lt;/span&gt;&lt;/div&gt;
-&lt;div&gt;level: &lt;span id=&quot;level&quot;&gt;&lt;/span&gt;&lt;/div&gt;
+&lt;div&gt;charging: &lt;span id="charging"&gt;&lt;/span&gt;&lt;/div&gt;
+&lt;div&gt;level: &lt;span id="level"&gt;&lt;/span&gt;&lt;/div&gt;
 </pre>
-</li> 
+</li>
 <li>
 <p>Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the <code>battery</code> property:</p>
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* As Tizen is webkit-based, it uses the webkit prefix */
-&nbsp;&nbsp;&nbsp;var battery = navigator.battery || navigator.webkitBattery
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|| navigator.mozBattery;
+   /* As Tizen is webkit-based, it uses the webkit prefix */
+   var battery = navigator.battery || navigator.webkitBattery
+      || navigator.mozBattery;
 &lt;/script&gt;
 </pre>
 </li>
@@ -92,21 +92,21 @@
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;load&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Charging status: true or false */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#charging&#39;).textContent =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;battery.charging ? &#39;charging&#39; : &#39;not charging&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Battery.level: between 0 and 1 (for example, 0.50) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#level&#39;).textContent =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Math.floor(battery.level * 100) + &#39;%&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+   window.addEventListener('load', function(e)
+      {
+         /* Charging status: true or false */
+         document.querySelector('#charging').textContent =
+            battery.charging ? 'charging' : 'not charging';
+
+         /* Battery.level: between 0 and 1 (for example, 0.50) */
+         document.querySelector('#level').textContent =
+            Math.floor(battery.level * 100) + '%';
+      }, false);
 &lt;/script&gt;
 </pre></li>
-  </ol> 
+  </ol>
 
-<p align="center"><strong>Figure: Displaying battery status (in mobile applications only)</strong></p> 
+<p align="center"><strong>Figure: Displaying battery status (in mobile applications only)</strong></p>
 <p align="center"><img alt="Displaying battery status (in mobile applications only)" src="../../../images/charging_battery.png" /></p>
 
 <h3>Source Code</h3>
@@ -114,29 +114,29 @@
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/battery_status_api" target="_blank">show_battery_state.htm</a></li>
  </ul>
-               
+
                                <h2 id="detect" name="detect">Detecting Battery Status Changes</h2>
-                               
-                       <p>To enhance the user interaction with the device, you must learn to set event handlers to detect changes in the battery status:</p> 
-  <ol> 
+
+                       <p>To enhance the user interaction with the device, you must learn to set event handlers to detect changes in the battery status:</p>
+  <ol>
    <li>
    <p>Define the elements used to display the battery status change information on the screen:</p>
 <pre class="prettyprint">
-&lt;div id=&quot;charging&quot;&gt;&lt;/div&gt;
+&lt;div id="charging"&gt;&lt;/div&gt;
 &lt;div&gt;
-&nbsp;&nbsp;&nbsp;&lt;progress id=&quot;progress&quot; value=&quot;0&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;
-&nbsp;&nbsp;&nbsp;&lt;span id=&quot;level&quot;&gt;&lt;/span&gt;
+   &lt;progress id="progress" value="0" max="100"&gt;&lt;/progress&gt;
+   &lt;span id="level"&gt;&lt;/span&gt;
 &lt;/div&gt;
-&lt;div id=&quot;message&quot;&gt;&lt;/div&gt;
+&lt;div id="message"&gt;&lt;/div&gt;
 </pre>
-</li> 
+</li>
 <li><p>Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the <code>battery</code> property:</p>
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* As Tizen is webkit-based, it uses the webkit prefix */
-&nbsp;&nbsp;&nbsp;var battery = navigator.battery || navigator.mozBattery
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|| navigator.webkitBattery;
+   /* As Tizen is webkit-based, it uses the webkit prefix */
+   var battery = navigator.battery || navigator.mozBattery
+      || navigator.webkitBattery;
 &lt;/script&gt;
 </pre>
 </li>
@@ -145,12 +145,12 @@
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;load&#39;, getBatteryState);
+   window.addEventListener('load', getBatteryState);
 
-&nbsp;&nbsp;&nbsp;/* Detects changes in the battery charging status */
-&nbsp;&nbsp;&nbsp;battery.addEventListener(&#39;chargingchange&#39;, getBatteryState);
-&nbsp;&nbsp;&nbsp;/* Detects changes in the battery level */
-&nbsp;&nbsp;&nbsp;battery.addEventListener(&#39;levelchange&#39;, getBatteryState);
+   /* Detects changes in the battery charging status */
+   battery.addEventListener('chargingchange', getBatteryState);
+   /* Detects changes in the battery level */
+   battery.addEventListener('levelchange', getBatteryState);
 &lt;/script&gt;
 </pre>
 </li>
@@ -159,28 +159,28 @@
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function getBatteryState()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var message = &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var charging = battery.charging;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var level = Math.floor(battery.level * 100);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (charging == false &amp;&amp; level &lt; 100)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Not charging */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (level == 100)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message = &quot;Charging is completed&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#charging&#39;).textContent =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;charging ? &#39;charging...&#39; : &#39;Please connect the charger.&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#level&#39;).textContent = level + &quot;%&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#progress&#39;).value = level;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#message&#39;).textContent = message;
-&nbsp;&nbsp;&nbsp;}
+   function getBatteryState()
+   {
+      var message = "";
+
+      var charging = battery.charging;
+      var level = Math.floor(battery.level * 100);
+
+      if (charging == false &amp;&amp; level &lt; 100)
+      {
+         /* Not charging */
+      }
+      else if (level == 100)
+      {
+         message = "Charging is completed";
+      }
+
+      document.querySelector('#charging').textContent =
+         charging ? 'charging...' : 'Please connect the charger.';
+      document.querySelector('#level').textContent = level + "%";
+      document.querySelector('#progress').value = level;
+      document.querySelector('#message').textContent = message;
+   }
 &lt;/script&gt;
 </pre>
 <p>If the battery is not charging, a message is displayed telling you to charge the battery.</p>
@@ -188,10 +188,10 @@
 You can use a progress bar to display the battery charging level.
 </p>
 </li>
-  </ol> 
+  </ol>
 
-<p align="center"><strong>Figure: Battery status (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Battery status (in mobile applications only)" src="../../../images/changing_batterystatus.png" /></p> 
+<p align="center"><strong>Figure: Battery status (in mobile applications only)</strong></p>
+<p align="center"><img alt="Battery status (in mobile applications only)" src="../../../images/changing_batterystatus.png" /></p>
 
 
 <h3>Source Code</h3>
diff --git a/org.tizen.guides/html/web/w3c/device/browser_state_w.htm b/org.tizen.guides/html/web/w3c/device/browser_state_w.htm
index 812fad3..371fc39 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/browser_state_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/browser_state_w.htm
@@ -37,10 +37,10 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>HTML5 Browser state</h1>
-  
+
 <p>You can <a href="#Retrieving_Browser_State">access information about the network connection state of the browser</a>.</p>
 
-<p>This feature is supported in mobile applications only.</p> 
+<p>This feature is supported in mobile applications only.</p>
 
 <p>The <code>navigator.onLine</code> attribute returns <code>false</code>, if the browser cannot establish a connection to the network when a remote page is requested. To track the changes in the connection state, you must subscribe to the applicable events: <code>online</code> and <code>offline</code>. The events can be executed in the <code>Window</code> or <code>WorkerGlobalScope</code> object.</p>
 
@@ -85,32 +85,32 @@
 <pre class="prettyprint lang-html">
 &lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Online status&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
+   &lt;head&gt;
+      &lt;title&gt;Online status&lt;/title&gt;
+      &lt;script&gt;
 </pre>
 <pre class="prettyprint lang-js">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function updateIndicator()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var status = navigator.onLine ? &#39;online&#39; : &#39;offline&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;indicator&#39;).textContent = status;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+         function updateIndicator()
+         {
+            var status = navigator.onLine ? 'online' : 'offline';
+            document.getElementById('indicator').textContent = status;
+         }
 </pre></li>
 <li><p>Subscribe to event listeners to be informed when the connection state changes:</p>
 <pre class="prettyprint lang-js">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Receive event when page is loaded */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = updateIndicator;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Receive event when network connection is available */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.ononline = updateIndicator;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Receive event when network connection is unavailable */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onoffline = updateIndicator;
+         /* Receive event when page is loaded */
+         window.onload = updateIndicator;
+         /* Receive event when network connection is available */
+         window.ononline = updateIndicator;
+         /* Receive event when network connection is unavailable */
+         window.onoffline = updateIndicator;
 </pre>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;The network is: &lt;span id=&quot;indicator&quot;&gt;(state unknown)&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+      &lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;p&gt;The network is: &lt;span id="indicator"&gt;(state unknown)&lt;/span&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre></li></ol>
 <h3>Source Code</h3>
diff --git a/org.tizen.guides/html/web/w3c/device/device_guide_w.htm b/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
index 0575f25..d5bddfa 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/device_guide_w.htm
@@ -43,13 +43,13 @@
    <li><a href="device_orientation_w.htm">DeviceOrientation Event Specification</a> <strong>in mobile and wearable applications only</strong>
    <p>Enables you to detect rotation and acceleration motions on the device.</p></li>
    <li><a href="touch_w.htm">Touch Events version 1</a> <strong>in mobile and wearable applications only</strong>
-   <p>Enables you to implement various types of touch events, coordinate touch points, and control multi-touch.</p></li>   
+   <p>Enables you to implement various types of touch events, coordinate touch points, and control multi-touch.</p></li>
    <li><a href="vibration_w.htm">Vibration</a> <strong>in mobile and wearable applications only</strong>
    <p>Enables you to implement different vibration patterns on a Tizen device.</p></li>
    <li><a href="browser_state_w.htm">HTML5 Browser state</a> <strong>in mobile applications only</strong>
    <p>Enables you to retrieve information about the network connection state of the browser.</p></li>
    <li><a href="screen_orientation_w.htm">Screen Orientation</a> <strong>in mobile applications only</strong>
-   <p>Enables you to retrieve the current screen orientation state, monitor state changes, and lock the screen to a specific orientation.</p></li>  
+   <p>Enables you to retrieve the current screen orientation state, monitor state changes, and lock the screen to a specific orientation.</p></li>
   </ul>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm b/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm
index 2c05a11..a4921fd 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm
@@ -11,7 +11,7 @@
     <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
   <title>DeviceOrientation Event Specification</title>
-  
+
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -66,26 +66,26 @@
 <pre class="prettyprint lang-html">
 &lt;h1&gt;Device orientation tutorial&lt;/h1&gt;
 &lt;div&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;alpha&quot;&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;beta&quot;&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;gamma&quot;&gt;&lt;/p&gt;
+   &lt;p id="alpha"&gt;&lt;/p&gt;
+   &lt;p id="beta"&gt;&lt;/p&gt;
+   &lt;p id="gamma"&gt;&lt;/p&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
 </pre>
 <pre class="prettyprint lang-js">
-&nbsp;&nbsp;&nbsp;var alphaElem = document.getElementById(&quot;alpha&quot;);
-&nbsp;&nbsp;&nbsp;var betaElem = document.getElementById(&quot;beta&quot;);
-&nbsp;&nbsp;&nbsp;var gammaElem = document.getElementById(&quot;gamma&quot;);
+   var alphaElem = document.getElementById("alpha");
+   var betaElem = document.getElementById("beta");
+   var gammaElem = document.getElementById("gamma");
 </pre></li>
 <li>To track changes in the device rotation, subscribe to the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#deviceorientation" target="_blank">deviceorientation</a> event:
 <pre class="prettyprint lang-js">
-&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;deviceorientation&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alphaElem.innerHTML =&#39;alpha value &#39; + Math.round(e.alpha);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;betaElem.innerHTML = &#39;beta value &#39; + Math.round(e.beta);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gammaElem.innerHTML = &#39;gamma value &#39; + Math.round(e.gamma);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, true);
+   window.addEventListener("deviceorientation", function(e)
+      {
+         alphaElem.innerHTML ='alpha value ' + Math.round(e.alpha);
+         betaElem.innerHTML = 'beta value ' + Math.round(e.beta);
+         gammaElem.innerHTML = 'gamma value ' + Math.round(e.gamma);
+      }, true);
 </pre>
 <pre class="prettyprint lang-html">
 &lt;/script&gt;
@@ -96,7 +96,7 @@
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/device_orientation_event_specification" target="_blank">device_orientation.html</a></li>
  </ul>
-                       
+
                                <h2 id="accelerate" name="accelerate">Detecting Device Acceleration</h2>
                        <p>Learning how to detect device acceleration is a basic device motion handling skill:</p>
 <ol>
@@ -104,40 +104,40 @@
 <pre class="prettyprint lang-html">
 &lt;h1&gt;device orientation tutorial&lt;/h1&gt;
 &lt;div&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;firElem&quot;&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;secElem&quot;&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;thirElem&quot;&gt;&lt;/p&gt;
+   &lt;p id="firElem"&gt;&lt;/p&gt;
+   &lt;p id="secElem"&gt;&lt;/p&gt;
+   &lt;p id="thirElem"&gt;&lt;/p&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
 </pre>
 <pre class="prettyprint lang-js">
-&nbsp;&nbsp;&nbsp;var firElem = document.getElementById(&quot;firElem&quot;);
-&nbsp;&nbsp;&nbsp;var secElem = document.getElementById(&quot;secElem&quot;);
-&nbsp;&nbsp;&nbsp;var thirElem = document.getElementById(&quot;thirElem&quot;);
+   var firElem = document.getElementById("firElem");
+   var secElem = document.getElementById("secElem");
+   var thirElem = document.getElementById("thirElem");
 </pre></li>
 <li>To track changes in the device acceleration, subscribe to the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#devicemotion" target="_blank">devicemotion</a> event:
 <pre class="prettyprint lang-js">
-&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;devicemotion&quot;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Data for acceleration */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firElem.innerHTML = &#39;acceleration value&lt;br/&gt;&lt;br/&gt; &#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;[ x value: &#39; + Math.round(e.acceleration.x) + &quot; ]&lt;br/&gt;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;[ y value: &#39; + Math.round(e.acceleration.y) + &quot; ]&lt;br/&gt;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;[ z value: &#39; + Math.round(e.acceleration.z) + &#39;]&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Data for acceleration, including gravity */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;secElem.innerHTML = &#39;accelerationIncludingGravity value&lt;br/&gt;&lt;br/&gt; &#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;[ x value: &#39; + Math.round(e.accelerationIncludingGravity.x) + &quot; ]&lt;br/&gt;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;[ y value: &#39; + Math.round(e.accelerationIncludingGravity.y) + &quot; ]&lt;br/&gt;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;[ z value: &#39; + Math.round(e.accelerationIncludingGravity.z) + &#39;]&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Data for rotation rate */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thirElem.innerHTML = &#39;rotationRate value&lt;br/&gt;&lt;br/&gt; &#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;[ alpha value: &#39; + Math.round(e.rotationRate.alpha) + &quot; degree ]&lt;br/&gt;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;[ beta value: &#39; + Math.round(e.rotationRate.beta) + &quot; degree ]&lt;br/&gt;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;[ gamma value: &#39; + Math.round(e.rotationRate.gamma) + &#39; degree ]&#39;;
-&nbsp;&nbsp;&nbsp;}, true);
+   window.addEventListener("devicemotion", function(e)
+   {
+      /* Data for acceleration */
+      firElem.innerHTML = 'acceleration value&lt;br/&gt;&lt;br/&gt; '
+         + '[ x value: ' + Math.round(e.acceleration.x) + " ]&lt;br/&gt;"
+         + '[ y value: ' + Math.round(e.acceleration.y) + " ]&lt;br/&gt;"
+         + '[ z value: ' + Math.round(e.acceleration.z) + ']';
+
+      /* Data for acceleration, including gravity */
+      secElem.innerHTML = 'accelerationIncludingGravity value&lt;br/&gt;&lt;br/&gt; '
+         + '[ x value: ' + Math.round(e.accelerationIncludingGravity.x) + " ]&lt;br/&gt;"
+         + '[ y value: ' + Math.round(e.accelerationIncludingGravity.y) + " ]&lt;br/&gt;"
+         + '[ z value: ' + Math.round(e.accelerationIncludingGravity.z) + ']';
+
+      /* Data for rotation rate */
+      thirElem.innerHTML = 'rotationRate value&lt;br/&gt;&lt;br/&gt; '
+         + '[ alpha value: ' + Math.round(e.rotationRate.alpha) + " degree ]&lt;br/&gt;"
+         + '[ beta value: ' + Math.round(e.rotationRate.beta) + " degree ]&lt;br/&gt;"
+         + '[ gamma value: ' + Math.round(e.rotationRate.gamma) + ' degree ]';
+   }, true);
 </pre>
 <pre class="prettyprint lang-html">
 &lt;/script&gt;
@@ -146,7 +146,7 @@
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/device_orientation_event_specification" target="_blank">device_motion.html</a></li>
- </ul> 
+ </ul>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm b/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
index 5e8c928..fe9ae1d 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm
@@ -53,7 +53,7 @@
 <p>To receive notifications of the screen orientation changes, add an event listener to the <code>Screen</code> object, or assign a function reference to the <code>screen.onorientationchange</code> attribute:</p>\r
 <pre class="prettyprint">\r
 /* Add listener */\r
-screen.addEventListener(&quot;orientationchange&quot;, handleScreenOrientationFun, false);\r
+screen.addEventListener("orientationchange", handleScreenOrientationFun, false);\r
 \r
 /* Or assign reference */\r
 screen.onorientationchange = handleScreenOrientationFun;\r
@@ -75,18 +75,18 @@ screen.onorientationchange = handleScreenOrientationFun;
 <ol><li>Define the text and button elements for the screen (the body of the HTML page):\r
 <pre class="prettyprint">\r
 &lt;body&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;main&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Current orientation is:&lt;/p&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;currentOrientation&quot; class=&quot;current-orientation&quot;&gt;&lt;/p&gt;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;portrait-primary&quot; class=&quot;button&quot;&gt;Portrait primary&lt;/button&gt;&lt;br/&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;landscape-secondary&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class=&quot;button&quot;&gt;Landscape secondary&lt;/button&gt;&lt;br/&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;portrait-secondary&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class=&quot;button&quot;&gt;Portrait secondary&lt;/button&gt;&lt;br/&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;landscape-primary&quot; class=&quot;button&quot;&gt;Landscape primary&lt;/button&gt;&lt;br/&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;unlock-orientation&quot; class=&quot;button&quot;&gt;Unlock orientation&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+   &lt;div class="main"&gt;\r
+      &lt;p&gt;Current orientation is:&lt;/p&gt;\r
+      &lt;p id="currentOrientation" class="current-orientation"&gt;&lt;/p&gt;\r
+\r
+      &lt;button id="portrait-primary" class="button"&gt;Portrait primary&lt;/button&gt;&lt;br/&gt;\r
+      &lt;button id="landscape-secondary"\r
+              class="button"&gt;Landscape secondary&lt;/button&gt;&lt;br/&gt;\r
+      &lt;button id="portrait-secondary"\r
+              class="button"&gt;Portrait secondary&lt;/button&gt;&lt;br/&gt;\r
+      &lt;button id="landscape-primary" class="button"&gt;Landscape primary&lt;/button&gt;&lt;br/&gt;\r
+      &lt;button id="unlock-orientation" class="button"&gt;Unlock orientation&lt;/button&gt;\r
+   &lt;/div&gt;\r
 &lt;/body&gt;\r
 </pre></li>\r
 \r
@@ -94,15 +94,15 @@ screen.onorientationchange = handleScreenOrientationFun;
 \r
 <pre class="prettyprint lang-js">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;function updateCurrOrrTxt()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;currentOrientation&quot;).innerHTML = screen.orientation;\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;window.onload = function()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;currentOrientation&quot;).innerHTML = screen.orientation;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;screen.addEventListener(&quot;orientationchange&quot;, updateCurrOrrTxt, false);\r
+   function updateCurrOrrTxt()\r
+   {\r
+      document.getElementById("currentOrientation").innerHTML = screen.orientation;\r
+   }\r
+\r
+   window.onload = function()\r
+   {\r
+      document.getElementById("currentOrientation").innerHTML = screen.orientation;\r
+      screen.addEventListener("orientationchange", updateCurrOrrTxt, false);\r
 </pre></li>\r
 \r
 <li><p>Use the <code>onclick</code> event handlers to react to the button clicks. For the first 4 buttons, use the <code>lockOrientation()</code> method to lock the screen orientation in place, and for the final button, use the <code>unlockOrientation()</code> method to release the orientation lock.\r
@@ -111,18 +111,18 @@ screen.onorientationchange = handleScreenOrientationFun;
 <p>The <code>lockOrientation()</code> method accepts the following parameter values: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, and <code>landscape</code>.</p>\r
 \r
 <pre class="prettyprint">\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;portrait-primary&quot;).onclick = function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;screen.lockOrientation(&#39;portrait-primary&#39;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Other 3 orientation buttons are handled similarly */\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;unlock-orientation&quot;).onclick = function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;screen.unlockOrientation();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;}\r
+      document.getElementById("portrait-primary").onclick = function()\r
+      {\r
+         screen.lockOrientation('portrait-primary');\r
+      }\r
+\r
+      /* Other 3 orientation buttons are handled similarly */\r
+\r
+      document.getElementById("unlock-orientation").onclick = function()\r
+      {\r
+         screen.unlockOrientation();\r
+      }\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
 \r
@@ -136,34 +136,34 @@ screen.onorientationchange = handleScreenOrientationFun;
 \r
 <li>Define CSS styles in the &lt;head&gt; section of the document to make the application more eye-catching.\r
 <pre class="prettyprint">\r
-&lt;style type=&quot;text/css&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;*\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Lucida Sans, Arial, Helvetica, sans-serif;\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;.main\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 32px;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top: auto;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-left: auto;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right: auto;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: auto;\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;.button\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: x-large;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top: 25px;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 80%;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 50px;\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;.current-orientation\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: xx-large;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bolder;\r
-&nbsp;&nbsp;&nbsp;}\r
+&lt;style type="text/css"&gt;\r
+   *\r
+   {\r
+      font-family: Lucida Sans, Arial, Helvetica, sans-serif;\r
+   }\r
+   .main\r
+   {\r
+      font-size: 32px;\r
+      text-align: center;\r
+      margin-top: auto;\r
+      margin-left: auto;\r
+      margin-right: auto;\r
+      margin-bottom: auto;\r
+   }\r
+\r
+   .button\r
+   {\r
+      font-size: x-large;\r
+      margin-top: 25px;\r
+      width: 80%;\r
+      height: 50px;\r
+   }\r
+\r
+   .current-orientation\r
+   {\r
+      font-size: xx-large;\r
+      font-weight: bolder;\r
+   }\r
 &lt;/style&gt;\r
 </pre></li></ol>\r
 \r
diff --git a/org.tizen.guides/html/web/w3c/device/task_compass_w.htm b/org.tizen.guides/html/web/w3c/device/task_compass_w.htm
index c5574e6..8ef17be 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/task_compass_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/task_compass_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: Compass</title>  
+       <title>Task: Compass</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -38,68 +38,68 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Sensor/Compass" target="_blank">Compass Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Task: Compass</h1> 
-  <p>This task, based on the Compass sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification</a> API to create a compass-functionality for your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Sensor/Compass" target="blank">Compass</a>.</p> 
-  <p>This task consists of the following parts:</p> 
-  <ul> 
+  <h1>Task: Compass</h1>
+  <p>This task, based on the Compass sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification</a> API to create a compass-functionality for your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Sensor/Compass" target="blank">Compass</a>.</p>
+  <p>This task consists of the following parts:</p>
+  <ul>
    <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
    <li><a href="#configure">Initializing the Application</a> defines how to initialize the application.</li>
    <li><a href="#needle">Managing the Needle Movement</a> defines how to interpret the device orientation data and reflect it in the compass needle.</li>
-  </ul> 
-   
+  </ul>
+
    <p>This sample is a fully functional application for gathering and using the orientation data from the device motion sensor.</p>
 
- <h2 id="layout" name="layout">Defining the Application Layout</h2> 
-  <p>The Compass sample application layout contains only 1 screen: the main screen that displays the compass and its current direction. The sample does not use the Web UI framework.</p> 
-  
-   <p>The following figure shows the main screen of the application.</p> 
-  <p align="center"><strong>Figure: Compass screen</strong></p> 
-  <p align="center"><img alt="Compass screen" src="../../../images/compass.png" /></p> 
-  
+ <h2 id="layout" name="layout">Defining the Application Layout</h2>
+  <p>The Compass sample application layout contains only 1 screen: the main screen that displays the compass and its current direction. The sample does not use the Web UI framework.</p>
+
+   <p>The following figure shows the main screen of the application.</p>
+  <p align="center"><strong>Figure: Compass screen</strong></p>
+  <p align="center"><img alt="Compass screen" src="../../../images/compass.png" /></p>
+
 <h3 id="main" name="main">Defining the Main Screen</h3>
-  <ol> 
+  <ol>
    <li><strong>index.html Source File</strong>
- <p>The main screen of the application displays the compass: the rotation section is a graphical representation of the compass, the shadow section shows certain graphical effects, and the direction and angle sections define the current angle to the north and the cardinal direction the device is currently facing.</p>   
+ <p>The main screen of the application displays the compass: the rotation section is a graphical representation of the compass, the shadow section shows certain graphical effects, and the direction and angle sections define the current angle to the north and the cardinal direction the device is currently facing.</p>
 <pre class="prettyprint">
-&lt;div id=&quot;application&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;rotation&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;shadow&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;direction&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;angle&quot;&gt;&lt;/div&gt;
+&lt;div id="application"&gt;
+   &lt;div id="rotation"&gt;&lt;/div&gt;
+   &lt;div id="shadow"&gt;&lt;/div&gt;
+   &lt;div id="direction"&gt;&lt;/div&gt;
+   &lt;div id="angle"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre></li>
  </ol>
 
   <h2 id="configure" name="configure">Initializing the Application</h2>
-  <ol> 
-   <li><strong>main.js Source File</strong> 
-       <ol type="a">  
- <li><p>The application uses the <code>ready</code> event to determine when it has been initialized, and to call the <code>init()</code> method.</p> 
+  <ol>
+   <li><strong>main.js Source File</strong>
+       <ol type="a">
+ <li><p>The application uses the <code>ready</code> event to determine when it has been initialized, and to call the <code>init()</code> method.</p>
 <pre class="prettyprint">
 $(document).ready(init);
 </pre></li>
-  
+
  <li><p>The <code>init()</code> method start the motion sensor by registering a listener for capturing orientation change events.</p>
 <pre class="prettyprint">
 function init()
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
-&nbsp;&nbsp;&nbsp;hdExitButton();
-&nbsp;&nbsp;&nbsp;startSensor();
+   "use strict";
+   hdExitButton();
+   startSensor();
 }
 
 function startSensor()
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
-&nbsp;&nbsp;&nbsp;window.addEventListener(&quot;deviceorientation&quot;, onDeviceOrientation, false);
+   "use strict";
+   window.addEventListener("deviceorientation", onDeviceOrientation, false);
 }
 </pre></li></ol></li></ol>
 
-<h2 id="needle" name="needle">Managing the Needle Movement</h2> 
+<h2 id="needle" name="needle">Managing the Needle Movement</h2>
  <p>The orientation data interpretation and needle movement functionality is implemented in the <code>main.js</code> file.</p>
   <ol>
 <li><strong>Determining the Cardinal Direction</strong>
@@ -109,8 +109,8 @@ function startSensor()
 <pre class="prettyprint">
 function onDeviceOrientation(dataEvent)
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
-&nbsp;&nbsp;&nbsp;var angle = dataEvent.alpha,
+   "use strict";
+   var angle = dataEvent.alpha,
 }
 </pre></li>
 
@@ -122,44 +122,44 @@ function onDeviceOrientation(dataEvent)
 <pre class="prettyprint">
 if (angle &lt; 68 || angle &gt; 292)
 {
-&nbsp;&nbsp;&nbsp;text += &#39;NORTH&#39;;
-} 
+   text += 'NORTH';
+}
 else if (angle &gt; 112 &amp;&amp; angle &lt; 248)
 {
-&nbsp;&nbsp;&nbsp;text += &#39;SOUTH&#39;;,
+   text += 'SOUTH';,
 }
 
 if (angle &gt; 22 &amp;&amp; angle &lt; 158)
 {
-&nbsp;&nbsp;&nbsp;text += &#39;EAST&#39;;
+   text += 'EAST';
 }
 else if (angle &gt; 202 &amp;&amp; angle &lt; 338)
 {
-&nbsp;&nbsp;&nbsp;text += &#39;WEST&#39;;
+   text += 'WEST';
 }
 </pre>
 
 </li></ol></li>
 <li><strong>Updating the Compass Needle Position</strong>
-<ol type="a"> 
+<ol type="a">
 <li><p>To update the compass needle position on the screen, the change required in the needle position is calculated based on the previous and new angle.</p>
 
 <pre class="prettyprint">
 deltaAngle = angleMemory - angle;
 if (Math.abs(deltaAngle) &gt; 180)
 {
-&nbsp;&nbsp;&nbsp;if (deltaAngle &gt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation -= ((360 - angleMemory) + angle);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation += (angleMemory + (360 - angle));
-&nbsp;&nbsp;&nbsp;}
+   if (deltaAngle &gt; 0)
+   {
+      rotation -= ((360 - angleMemory) + angle);
+   }
+   else
+   {
+      rotation += (angleMemory + (360 - angle));
+   }
 }
 else
 {
-&nbsp;&nbsp;&nbsp;rotation += deltaAngle;
+   rotation += deltaAngle;
 }
 angleMemory = angle;
 </pre></li>
@@ -168,9 +168,9 @@ angleMemory = angle;
 
 
 <pre class="prettyprint">
-$(&#39;#direction&#39;).text(text);
-$(&quot;#angle&quot;).html(Math.round(angle) + &quot;&lt;sup&gt;o&lt;/sup&gt;&quot;);
-$(&#39;#rotation&#39;).css(&#39;-webkit-transform&#39;, &#39;rotate(&#39; + rotation + &#39;deg)&#39;);
+$('#direction').text(text);
+$("#angle").html(Math.round(angle) + "&lt;sup&gt;o&lt;/sup&gt;");
+$('#rotation').css('-webkit-transform', 'rotate(' + rotation + 'deg)');
 </pre></li>
 </ol></li></ol>
 
diff --git a/org.tizen.guides/html/web/w3c/device/task_touch_paint_mw.htm b/org.tizen.guides/html/web/w3c/device/task_touch_paint_mw.htm
index 2990b1d..35035ea 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/task_touch_paint_mw.htm
+++ b/org.tizen.guides/html/web/w3c/device/task_touch_paint_mw.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: Touch Paint</title>  
+       <title>Task: Touch Paint</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,116 +33,116 @@
             <li><a href="#feature">Using Drawing Features</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc"> 
+               <ul class="toc">
             <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1 API for Mobile Web</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="_blank">Touch Paint Sample Description</a></li>                 
+                       <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="_blank">Touch Paint Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
 <h1>Task: Touch Paint</h1>
 
-<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="blank">Touch Paint</a>.</p> 
+<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="blank">Touch Paint</a>.</p>
 
-<p>This task consists of the following parts:</p> 
-  <ul> 
+<p>This task consists of the following parts:</p>
+  <ul>
    <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
-   <li><a href="#draw">Drawing on Canvas</a> defines how to detect touch events and draw lines on the canvas.</li> 
-   <li><a href="#feature">Using Drawing Features</a> defines how to select and use drawing features, such as colors and line widths.</li> 
-  </ul> 
-<p>This sample is a fully functional application for implementing a basic drawing application.</p> 
+   <li><a href="#draw">Drawing on Canvas</a> defines how to detect touch events and draw lines on the canvas.</li>
+   <li><a href="#feature">Using Drawing Features</a> defines how to select and use drawing features, such as colors and line widths.</li>
+  </ul>
+<p>This sample is a fully functional application for implementing a basic drawing application.</p>
 
 
 <h2 id="layout" name="layout">Defining the Application Layout</h2>
 
-<p>The TouchPaint sample application layout contains only 1 screen: the main screen that displays a canvas on which you can draw with a finger.</p> 
+<p>The TouchPaint sample application layout contains only 1 screen: the main screen that displays a canvas on which you can draw with a finger.</p>
+
 
+  <p>The following figure shows the main screen of the application.</p>
 
-  <p>The following figure shows the main screen of the application.</p> 
- 
-<p align="center"><strong>Figure: TouchPaint screen</strong></p> 
-<p align="center"><img alt="TouchPaint screen" src="../../../images/touchpaint_sd.png" /></p> 
+<p align="center"><strong>Figure: TouchPaint screen</strong></p>
+<p align="center"><img alt="TouchPaint screen" src="../../../images/touchpaint_sd.png" /></p>
 
 <h3 id="main" name="main">Defining the Main Screen</h3>
-  <ol> 
+  <ol>
 
    <li><strong>index.html Source File</strong>
 <p>The main screen displays a <a href="../graphics/canvas_w.htm">Canvas</a> element, and a description area. The description area defines a color picker and a slider as <code>&lt;input&gt;</code> elements to allow the user can select the color and line width of their strokes. A <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a> is also defined to allow the user to clear the canvas.</p>
 <pre class="prettyprint lang-html">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h2&gt;Touch paint&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;canvas class=&quot;canvas addHeight&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This browser is not supported
-&nbsp;&nbsp;&nbsp;&lt;/canvas&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;desc&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Color:&lt;input type=&quot;color&quot; class=&quot;strokeColor&quot;&gt;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;Line width:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;range&quot; min=&quot;5&quot; max=&quot;30&quot; step=&quot;5&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;5&quot; class=&quot;strokeWidth&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;nav&gt;&lt;/nav&gt;
-&nbsp;&nbsp;&nbsp;&lt;button class=&quot;clearBtn&quot;&gt;Clear&lt;/button&gt;
+   &lt;h2&gt;Touch paint&lt;/h2&gt;
+   &lt;canvas class="canvas addHeight"&gt;
+      This browser is not supported
+   &lt;/canvas&gt;
+   &lt;div class="desc"&gt;
+      &lt;label&gt;Color:&lt;input type="color" class="strokeColor"&gt;&lt;/label&gt;
+      &lt;label&gt;Line width:
+         &lt;input type="range" min="5" max="30" step="5"
+                value="5" class="strokeWidth"/&gt;
+      &lt;/label&gt;
+   &lt;/div&gt;
+   &lt;nav&gt;&lt;/nav&gt;
+   &lt;button class="clearBtn"&gt;Clear&lt;/button&gt;
 &lt;/body&gt;
 </pre>
 
 </li>
-  </ol> 
+  </ol>
 
 
 <h2 id="draw" name="draw">Drawing on Canvas</h2>
 
-  <p>This section builds upon the elements described in <a href="touch_w.htm#handle">Handling Touch Events</a> and <a href="touch_w.htm#control">Controlling Multi-point Touches</a>.</p> 
+  <p>This section builds upon the elements described in <a href="touch_w.htm#handle">Handling Touch Events</a> and <a href="touch_w.htm#control">Controlling Multi-point Touches</a>.</p>
 
 
 <h3 id="initialize" name="initialize">Initializing the Canvas</h3>
-  <ol> 
-   <li><strong>main.js Source File</strong> 
+  <ol>
+   <li><strong>main.js Source File</strong>
 <p>Define event listeners and handlers to manage the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events on the canvas.</p>
 
 <pre class="prettyprint">
 window.onload = function()
 {
-&nbsp;&nbsp;&nbsp;canvas = document.querySelector(&quot;.canvas&quot;);
-&nbsp;&nbsp;&nbsp;var context = canvas.getContext(&quot;2d&quot;);
+   canvas = document.querySelector(".canvas");
+   var context = canvas.getContext("2d");
 
-&nbsp;&nbsp;&nbsp;/* Canvas size setting */
-&nbsp;&nbsp;&nbsp;canvas.width = document.width;
-&nbsp;&nbsp;&nbsp;canvas.height = document.height - 130;
+   /* Canvas size setting */
+   canvas.width = document.width;
+   canvas.height = document.height - 130;
 
-&nbsp;&nbsp;&nbsp;/* Touch event listeners */
-&nbsp;&nbsp;&nbsp;canvas.addEventListener(&quot;touchstart&quot;, touchStartHandler, false);
-&nbsp;&nbsp;&nbsp;canvas.addEventListener(&quot;touchmove&quot;, touchMoveHandler, false);
-&nbsp;&nbsp;&nbsp;canvas.addEventListener(&quot;touchend&quot;, touchEndHandler, false);
+   /* Touch event listeners */
+   canvas.addEventListener("touchstart", touchStartHandler, false);
+   canvas.addEventListener("touchmove", touchMoveHandler, false);
+   canvas.addEventListener("touchend", touchEndHandler, false);
 }
 </pre>
 </li></ol>
 
  <h3 id="draw2" name="draw2">Drawing Lines Based on Touch Events</h3>
-<p>The line drawing functionality is implemented in the <code>main.js</code> file.</p> 
-  <ol> 
+<p>The line drawing functionality is implemented in the <code>main.js</code> file.</p>
+  <ol>
 <li><strong>Drawing based on Retrieved Event Coordinates</strong>
-<p>To draw an image with fingers, you must find out the coordinates of the triggered touch events.  
-Retrieve the coordinates in the <code>touchMoveHandler()</code> event handler.</p> 
+<p>To draw an image with fingers, you must find out the coordinates of the triggered touch events.
+Retrieve the coordinates in the <code>touchMoveHandler()</code> event handler.</p>
 <pre class="prettyprint">
 function touchMoveHandler(e)
 {
-&nbsp;&nbsp;&nbsp;touches = e.touches.item(0);
+   touches = e.touches.item(0);
 
-&nbsp;&nbsp;&nbsp;log.innerHTML =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;strong&gt;pageX:&lt;/strong&gt; &#39; + touches.pageX +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;br/&gt;&lt;strong&gt;pageY:&lt;/strong&gt; &#39; + touches.pageY;
+   log.innerHTML =
+      '&lt;strong&gt;pageX:&lt;/strong&gt; ' + touches.pageX +
+      '&lt;br/&gt;&lt;strong&gt;pageY:&lt;/strong&gt; ' + touches.pageY;
 
-&nbsp;&nbsp;&nbsp;context.fillStyle = &quot;#f00&quot;;
+   context.fillStyle = "#f00";
 
-&nbsp;&nbsp;&nbsp;/* For accurate coordinates, calculate minus offset(Left) from page(X) */
-&nbsp;&nbsp;&nbsp;context.fillRect(touches.pageX - this.offsetLeft,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touches.pageY - this.offsetTop, 5, 5);
+   /* For accurate coordinates, calculate minus offset(Left) from page(X) */
+   context.fillRect(touches.pageX - this.offsetLeft,
+                    touches.pageY - this.offsetTop, 5, 5);
 }
 </pre>
-<p>Every time a <code>touchmove</code> event is fired, the pageX and pageY coordinates of the page are shown in the log, and a quadrangle of 5 x 5 pixels is created. However, since it is difficult to implement line drawing this way, use the <code>changedTouches</code> attribute instead, as shown below.</p> 
+<p>Every time a <code>touchmove</code> event is fired, the pageX and pageY coordinates of the page are shown in the log, and a quadrangle of 5 x 5 pixels is created. However, since it is difficult to implement line drawing this way, use the <code>changedTouches</code> attribute instead, as shown below.</p>
 </li>
 
 <li><strong>Drawing based on Stored Event Coordinates</strong>
@@ -159,9 +159,9 @@ var isMoved = false;
 
 function touchStartHandler(e)
 {
-&nbsp;&nbsp;&nbsp;/* Store the current touch information (coordinates) */
-&nbsp;&nbsp;&nbsp;touches = e.changedTouches;
-&nbsp;&nbsp;&nbsp;drawPath.push(touches[0]);
+   /* Store the current touch information (coordinates) */
+   touches = e.changedTouches;
+   drawPath.push(touches[0]);
 }
 </pre>
 </li>
@@ -170,32 +170,32 @@ function touchStartHandler(e)
 <pre class="prettyprint">
 function touchMoveHandler(e)
 {
-&nbsp;&nbsp;&nbsp;isMoved = true;
-&nbsp;&nbsp;&nbsp;touches = e.changedTouches;
-
-&nbsp;&nbsp;&nbsp;/* Assign the line style to be drawn */
-&nbsp;&nbsp;&nbsp;context.lineWidth = strokeWidth;
-&nbsp;&nbsp;&nbsp;context.strokeStyle = strokeColor;
-&nbsp;&nbsp;&nbsp;context.lineJoin = &quot;round&quot;;
-
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; touches.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var idx = drawPathSetting(touches[i].identifier);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Draw a line from the stored coordinates to the current coordinates */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.beginPath();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.moveTo(drawPath[idx].pageX - this.offsetLeft,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawPath[idx].pageY - this.offsetTop);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.lineTo(touches[i].pageX - this.offsetLeft,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touches[i].pageY - this.offsetTop);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.closePath();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.stroke();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Delete the stored coordinates and store the current ones */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawPath.splice(idx, 1, touches[i]);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;e.preventDefault();
+   isMoved = true;
+   touches = e.changedTouches;
+
+   /* Assign the line style to be drawn */
+   context.lineWidth = strokeWidth;
+   context.strokeStyle = strokeColor;
+   context.lineJoin = "round";
+
+   for (var i = 0; i &lt; touches.length; i++)
+   {
+      var idx = drawPathSetting(touches[i].identifier);
+
+      /* Draw a line from the stored coordinates to the current coordinates */
+      context.beginPath();
+      context.moveTo(drawPath[idx].pageX - this.offsetLeft,
+                     drawPath[idx].pageY - this.offsetTop);
+      context.lineTo(touches[i].pageX - this.offsetLeft,
+                     touches[i].pageY - this.offsetTop);
+
+      context.closePath();
+      context.stroke();
+
+      /* Delete the stored coordinates and store the current ones */
+      drawPath.splice(idx, 1, touches[i]);
+   }
+   e.preventDefault();
 }
 </pre>
 </li>
@@ -204,42 +204,42 @@ function touchMoveHandler(e)
 <pre class="prettyprint">
 function touchEndHandler()
 {
-&nbsp;&nbsp;&nbsp;/* Display the touching point */
-&nbsp;&nbsp;&nbsp;if (!isMoved)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var startPoint = (Math.PI/180)*0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var endPoint = (Math.PI/180)*360;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.fillStyle = strokeColor;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.beginPath();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.arc(touches[0].pageX - this.offsetLeft,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touches[0].pageY - this.offsetTop,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strokeWidth/2, startPoint, endPoint, true);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.closePath();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.fill();
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;isMoved=false;
-&nbsp;&nbsp;&nbsp;drawPath.length = 0; /* Initialize the stored coordinates */
+   /* Display the touching point */
+   if (!isMoved)
+   {
+      var startPoint = (Math.PI/180)*0;
+      var endPoint = (Math.PI/180)*360;
+      context.fillStyle = strokeColor;
+      context.beginPath();
+      context.arc(touches[0].pageX - this.offsetLeft,
+                  touches[0].pageY - this.offsetTop,
+                  strokeWidth/2, startPoint, endPoint, true);
+      context.closePath();
+      context.fill();
+   }
+   isMoved=false;
+   drawPath.length = 0; /* Initialize the stored coordinates */
 }
 </pre>
 </li>
 </ol></li>
 <li><strong>Drawing based on Multi-point Touches</strong>
-<p>If the application is controlled with fingers, you must handle multi-point touches (a mouse-controlled application only create one touch at a time and only needs 2 events to handle it). To manage multi-touches, the index of the <code>touches[index]</code> array is used.</p> 
+<p>If the application is controlled with fingers, you must handle multi-point touches (a mouse-controlled application only create one touch at a time and only needs 2 events to handle it). To manage multi-touches, the index of the <code>touches[index]</code> array is used.</p>
 <p>The <code>drawPathSetting()</code> method allows the application to handle multi-point touches since the existing and current coordinates of the touch events are connected respectively.</p>
 <p>The <code>touchMoveHandler()</code> event handler uses the <code>drawPathSetting()</code> method to return the index of the <code>drawPath</code> array (which contains the touch event details saved so far). Since the information is similar to the <code>identifier</code> of the touch event which has been currently triggered, the array enables each touch event to have its own information.</p>
 <pre class="prettyprint">
 function drawPathSetting(idx)
 {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; drawPath.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var _idx = drawPath[i].identifier;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (_idx === idx)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return -1;
+   for (var i = 0; i &lt; drawPath.length; i++)
+   {
+      var _idx = drawPath[i].identifier;
+      if (_idx === idx)
+      {
+         return i;
+      }
+   }
+
+   return -1;
 }
 </pre>
 
@@ -250,10 +250,10 @@ function drawPathSetting(idx)
 
 <h2 id="feature" name="feature">Using Drawing Features</h2>
 
- 
+
  <h3 id="initialize2" name="initialize2">Initializing Drawing</h3>
-  <ol> 
-   <li><strong>main.js Source File</strong> 
+  <ol>
+   <li><strong>main.js Source File</strong>
 <p>Variables are declared to store and display the color and line width selection of the user.</p>
 <pre class="prettyprint">
 var strokeColorSel, strokeWidthSel;
@@ -263,43 +263,43 @@ var strokeWidth = 5;
 </li></ol>
 
 <h3 id="stroke" name="stroke">Applying the Stroke Styles</h3>
-  <ol> 
+  <ol>
    <li><strong>main.js Source File</strong>
 <ol type="a">
 <li>Add the color and line width values that the user has selected to the applicable variables, and define event handlers to track changes in the user selection.
 <pre class="prettyprint">
 window.onload = function()
 {
-&nbsp;&nbsp;&nbsp;strokeColorSel = document.querySelector(&quot;.strokeColor&quot;);
-&nbsp;&nbsp;&nbsp;strokeWidthSel = document.querySelector(&quot;.strokeWidth&quot;);
+   strokeColorSel = document.querySelector(".strokeColor");
+   strokeWidthSel = document.querySelector(".strokeWidth");
 
-&nbsp;&nbsp;&nbsp;/* Add event listeners */
-&nbsp;&nbsp;&nbsp;strokeColorSel.addEventListener(&quot;change&quot;, changeStrokeColor, false);
-&nbsp;&nbsp;&nbsp;strokeWidthSel.addEventListener(&quot;change&quot;, changeStrokeWidth, false);
+   /* Add event listeners */
+   strokeColorSel.addEventListener("change", changeStrokeColor, false);
+   strokeWidthSel.addEventListener("change", changeStrokeWidth, false);
 </pre>
 </li>
 <li>If the user changes the color or line width, the event handlers call the <code>changeStrokeColor()</code> or <code>changeStrokeWidth()</code> method to set the new style value.
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function changeStrokeColor()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strokeColor = this.value;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function changeStrokeWidth()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strokeWidth = this.value;
-&nbsp;&nbsp;&nbsp;}
+   function changeStrokeColor()
+   {
+      strokeColor = this.value;
+   }
+
+   function changeStrokeWidth()
+   {
+      strokeWidth = this.value;
+   }
 }
 </pre>
 </li>
-<li>To use the style values, apply them in the <code>touchMoveHandler()</code> event handler, which draws the user&#39;s strokes on the canvas.
+<li>To use the style values, apply them in the <code>touchMoveHandler()</code> event handler, which draws the user's strokes on the canvas.
 <pre class="prettyprint">
 function touchMoveHandler(e)
 {
-&nbsp;&nbsp;&nbsp;context.lineWidth = strokeWidth; /* Selected line width */
-&nbsp;&nbsp;&nbsp;context.strokeStyle = strokeColor; /* Selected line color */
+   context.lineWidth = strokeWidth; /* Selected line width */
+   context.strokeStyle = strokeColor; /* Selected line color */
 
-&nbsp;&nbsp;&nbsp;/* Draw the strokes */
+   /* Draw the strokes */
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/w3c/device/task_touch_paint_ww.htm b/org.tizen.guides/html/web/w3c/device/task_touch_paint_ww.htm
index b9a62ee..b8712c8 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/task_touch_paint_ww.htm
+++ b/org.tizen.guides/html/web/w3c/device/task_touch_paint_ww.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: Touch Paint</title>  
+       <title>Task: Touch Paint</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -38,124 +38,124 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="_blank">Touch Paint Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
 <h1>Task: Touch Paint</h1>
 
-<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="blank">Touch Paint</a>.</p> 
+<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="blank">Touch Paint</a>.</p>
 
-<p>This task consists of the following parts:</p> 
-  <ul> 
+<p>This task consists of the following parts:</p>
+  <ul>
    <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
-   <li><a href="#draw">Drawing on Canvas</a> defines how to detect touch events and draw lines on the canvas.</li> 
-   <li><a href="#feature">Using Drawing Features</a> defines how to select and use drawing features, such as colors and line widths.</li> 
-  </ul> 
-<p>This sample is a fully functional application for implementing a basic drawing application.</p> 
+   <li><a href="#draw">Drawing on Canvas</a> defines how to detect touch events and draw lines on the canvas.</li>
+   <li><a href="#feature">Using Drawing Features</a> defines how to select and use drawing features, such as colors and line widths.</li>
+  </ul>
+<p>This sample is a fully functional application for implementing a basic drawing application.</p>
 
 
 <h2 id="layout" name="layout">Defining the Application Layout</h2>
 
-<p>The TouchPaint sample application layout contains 2 screens: the main screen displaying a canvas on which you can draw with a finger, and the Options screen which allows you to set up the color and the thickness of the line being drawn.</p> 
- 
-  <p>The following figure shows the main screens of the application.</p> 
- 
-<p align="center"><strong>Figure: TouchPaint screens</strong></p> 
-<p align="center"><img alt="TouchPaint screens" src="../../../images/touchpaint_sd_ww.png" /></p> 
+<p>The TouchPaint sample application layout contains 2 screens: the main screen displaying a canvas on which you can draw with a finger, and the Options screen which allows you to set up the color and the thickness of the line being drawn.</p>
+
+  <p>The following figure shows the main screens of the application.</p>
+
+<p align="center"><strong>Figure: TouchPaint screens</strong></p>
+<p align="center"><img alt="TouchPaint screens" src="../../../images/touchpaint_sd_ww.png" /></p>
 
 <h3 id="main" name="main">Defining the Main Screen</h3>
-  <ol> 
+  <ol>
 
-   <li><strong>index.html Source File</strong> 
+   <li><strong>index.html Source File</strong>
 <p>The main screen displays a <a href="../graphics/canvas_w.htm">Canvas</a> element and 2 buttons (for accessing the Options screen and for clearing the canvas area).</p>
 <pre class="prettyprint lang-html">
-&lt;div class=&quot;ui-page ui-page-active&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; id=&quot;main-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;TouchPaint&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot; id=&quot;main-content&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer ui-grid-col-2&quot; id=&quot;main-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; id=&quot;main-options-btn&quot;&gt;Options&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; id=&quot;main-clear-btn&quot;&gt;Clear&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page ui-page-active" id="main"&gt;
+   &lt;div class="ui-header" id="main-header" data-position="fixed"&gt;
+      &lt;h2 class="ui-title"&gt;TouchPaint&lt;/h2&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-content" id="main-content"&gt;&lt;/div&gt;
+   &lt;div class="ui-footer ui-grid-col-2" id="main-footer"&gt;
+      &lt;button type="button" class="ui-btn" id="main-options-btn"&gt;Options&lt;/button&gt;
+      &lt;button type="button" class="ui-btn" id="main-clear-btn"&gt;Clear&lt;/button&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
-<p>The above code snippet does not contain the canvas element, which is added to the <code>&lt;div id=&quot;main-content&quot;&gt;</code> element by the JavaScript code after the application start.</p>
+<p>The above code snippet does not contain the canvas element, which is added to the <code>&lt;div id="main-content"&gt;</code> element by the JavaScript code after the application start.</p>
 </li>
-  </ol> 
+  </ol>
 
-  <h3 id="option" name="option">Defining the Options Screen</h3> 
-  <ol> 
+  <h3 id="option" name="option">Defining the Options Screen</h3>
+  <ol>
 
-   <li><strong>index.html Source File</strong> 
+   <li><strong>index.html Source File</strong>
 <p>The Options screen displays a slider element, line preview, 4-color (white, red, green, and blue) picker and 2 buttons (<strong>Cancel</strong> and <strong>OK</strong>).</p>
 <p>The slider allows the user to change the line width. Each slider position change results in a change in the line preview thickness. A tap action on the color picker results in a change in the line preview color. A tap action on the buttons moves the user to main screen without or with saving the changes.</p>
 
 <pre class="prettyprint lang-html">
-&lt;div class=&quot;ui-page&quot; id=&quot;options&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Options&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;range&quot; min=&quot;1&quot; max=&quot;20&quot; value=&quot;1&quot; id=&quot;options-range&quot;&gt;&lt;/input&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;options-preview&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;options-colors&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;options-colors-white&quot; class=&quot;options-colors&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;options-colors-red&quot; class=&quot;options-colors&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;options-colors-green&quot; class=&quot;options-colors&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;options-colors-blue&quot; class=&quot;options-colors&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer ui-grid-col-2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; id=&quot;options-cancel-btn&quot;&gt;Cancel&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn&quot; id=&quot;options-ok-btn&quot;&gt;OK&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="options"&gt;
+   &lt;div class="ui-header" data-position="fixed"&gt;
+      &lt;h2 class="ui-title"&gt;Options&lt;/h2&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;input type="range" min="1" max="20" value="1" id="options-range"&gt;&lt;/input&gt;
+      &lt;div id="options-preview"&gt;&lt;/div&gt;
+      &lt;div id="options-colors"&gt;
+         &lt;div id="options-colors-white" class="options-colors"&gt;&lt;/div&gt;
+         &lt;div id="options-colors-red" class="options-colors"&gt;&lt;/div&gt;
+         &lt;div id="options-colors-green" class="options-colors"&gt;&lt;/div&gt;
+         &lt;div id="options-colors-blue" class="options-colors"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-footer ui-grid-col-2"&gt;
+      &lt;button type="button" class="ui-btn" id="options-cancel-btn"&gt;Cancel&lt;/button&gt;
+      &lt;button type="button" class="ui-btn" id="options-ok-btn"&gt;OK&lt;/button&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
 </li>
-  </ol>   
+  </ol>
+
 
-  
 
 <h2 id="draw" name="draw">Drawing on Canvas</h2>
 
-  <p>This section builds upon the elements described in <a href="touch_w.htm#handle">Handling Touch Events</a> and <a href="touch_w.htm#control">Controlling Multi-point Touches</a>.</p> 
- 
+  <p>This section builds upon the elements described in <a href="touch_w.htm#handle">Handling Touch Events</a> and <a href="touch_w.htm#control">Controlling Multi-point Touches</a>.</p>
+
 
 <h3 id="initialize" name="initialize">Initializing the Canvas</h3>
-  <ol> 
-   <li><strong>main.js Source File</strong> 
+  <ol>
+   <li><strong>main.js Source File</strong>
 <p>The canvas is initialized in JavaScript, and includes the size calculation, ID setting, and adding of the element to the main page content.</p>
 
 <pre class="prettyprint">
 function initCanvas()
 {
-&nbsp;&nbsp;&nbsp;canvas = document.createElement(&#39;canvas&#39;);
-&nbsp;&nbsp;&nbsp;canvas.width = window.innerWidth;
-&nbsp;&nbsp;&nbsp;canvas.height = window.innerHeight - header.offsetHeight - footer.offsetHeight;
-&nbsp;&nbsp;&nbsp;canvas.setAttribute(&#39;id&#39;, &#39;main-canvas&#39;);
-&nbsp;&nbsp;&nbsp;content.appendChild(canvas);
-&nbsp;&nbsp;&nbsp;context = canvas.getContext(&#39;2d&#39;);
+   canvas = document.createElement('canvas');
+   canvas.width = window.innerWidth;
+   canvas.height = window.innerHeight - header.offsetHeight - footer.offsetHeight;
+   canvas.setAttribute('id', 'main-canvas');
+   content.appendChild(canvas);
+   context = canvas.getContext('2d');
 }
 </pre>
 </li></ol>
 
  <h3 id="draw2" name="draw2">Drawing Lines Based on Touch Events</h3>
-<p>The line drawing functionality is implemented in the <code>main.js</code> file.</p> 
-  <ol> 
-<li><strong>main.js Source File</strong> 
+<p>The line drawing functionality is implemented in the <code>main.js</code> file.</p>
+  <ol>
+<li><strong>main.js Source File</strong>
 <ol type="a"><li>
-<p>Define event listeners and handlers to manage the <code>touchstart</code>, <code>touchmove</code>, and <code>touchend</code> events on the canvas.</p> 
+<p>Define event listeners and handlers to manage the <code>touchstart</code>, <code>touchmove</code>, and <code>touchend</code> events on the canvas.</p>
 <pre class="prettyprint">
 function addCanvasListeners()
 {
-&nbsp;&nbsp;&nbsp;canvas.addEventListener(&#39;touchstart&#39;, onCanvasTouchStart);
-&nbsp;&nbsp;&nbsp;canvas.addEventListener(&#39;touchend&#39;, onCanvasTouchEnd);
-&nbsp;&nbsp;&nbsp;canvas.addEventListener(&#39;touchmove&#39;, onCanvasTouchMove);
-&nbsp;&nbsp;&nbsp;footer.addEventListener(&#39;touchend&#39;, onFooterTouchEnd);
+   canvas.addEventListener('touchstart', onCanvasTouchStart);
+   canvas.addEventListener('touchend', onCanvasTouchEnd);
+   canvas.addEventListener('touchmove', onCanvasTouchMove);
+   footer.addEventListener('touchend', onFooterTouchEnd);
 }
 </pre>
 </li>
@@ -170,57 +170,57 @@ function addCanvasListeners()
 <pre class="prettyprint">
 function onCanvasTouchStart(ev)
 {
-&nbsp;&nbsp;&nbsp;var touch = ev.changedTouches[0];
-
-&nbsp;&nbsp;&nbsp;drawPath[touch.identifier] = touch;
-
-&nbsp;&nbsp;&nbsp;context.fillStyle = strokeColor;
-&nbsp;&nbsp;&nbsp;context.beginPath();
-&nbsp;&nbsp;&nbsp;context.arc(drawPath[touch.identifier].pageX - canvas.offsetLeft,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawPath[touch.identifier].pageY - canvas.offsetTop
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- header.offsetHeight,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strokeWidth / 2, 0, Math.PI * 2, true);
-&nbsp;&nbsp;&nbsp;context.closePath();
-&nbsp;&nbsp;&nbsp;context.fill();
+   var touch = ev.changedTouches[0];
+
+   drawPath[touch.identifier] = touch;
+
+   context.fillStyle = strokeColor;
+   context.beginPath();
+   context.arc(drawPath[touch.identifier].pageX - canvas.offsetLeft,
+               drawPath[touch.identifier].pageY - canvas.offsetTop
+               - header.offsetHeight,
+               strokeWidth / 2, 0, Math.PI * 2, true);
+   context.closePath();
+   context.fill();
 }
 
 function onCanvasTouchEnd(ev)
 {
-&nbsp;&nbsp;&nbsp;var touch = ev.changedTouches[0];
+   var touch = ev.changedTouches[0];
 
-&nbsp;&nbsp;&nbsp;delete drawPath[touch.identifier];
+   delete drawPath[touch.identifier];
 }
 
 function onCanvasTouchMove(ev)
 {
-&nbsp;&nbsp;&nbsp;var touches = ev.changedTouches,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touchesLength = touches.length,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentDrawPath = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0;
-
-&nbsp;&nbsp;&nbsp;context.lineWidth = strokeWidth + ADDITIONAL_LINE_WIDTH;
-&nbsp;&nbsp;&nbsp;context.strokeStyle = strokeColor;
-&nbsp;&nbsp;&nbsp;context.lineJoin = &#39;round&#39;;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; touchesLength; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentDrawPath = drawPath[touches[i].identifier];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (currentDrawPath !== undefined)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.beginPath();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.moveTo(currentDrawPath.pageX - canvas.offsetLeft + HALF_PIXEL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentDrawPath.pageY - canvas.offsetTop
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ HALF_PIXEL - header.offsetHeight);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.lineTo(touches[i].pageX - canvas.offsetLeft + HALF_PIXEL,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touches[i].pageY - canvas.offsetTop
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ HALF_PIXEL - header.offsetHeight);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.closePath();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.stroke();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawPath[touches[i].identifier] = touches[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;ev.preventDefault();
+   var touches = ev.changedTouches,
+       touchesLength = touches.length,
+       currentDrawPath = null,
+       i = 0;
+
+   context.lineWidth = strokeWidth + ADDITIONAL_LINE_WIDTH;
+   context.strokeStyle = strokeColor;
+   context.lineJoin = 'round';
+
+   for (i = 0; i &lt; touchesLength; i += 1)
+   {
+      currentDrawPath = drawPath[touches[i].identifier];
+      if (currentDrawPath !== undefined)
+      {
+         context.beginPath();
+         context.moveTo(currentDrawPath.pageX - canvas.offsetLeft + HALF_PIXEL,
+                        currentDrawPath.pageY - canvas.offsetTop
+                        + HALF_PIXEL - header.offsetHeight);
+         context.lineTo(touches[i].pageX - canvas.offsetLeft + HALF_PIXEL,
+                        touches[i].pageY - canvas.offsetTop
+                        + HALF_PIXEL - header.offsetHeight);
+         context.closePath();
+         context.stroke();
+
+         drawPath[touches[i].identifier] = touches[i];
+      }
+   }
+   ev.preventDefault();
 }
 </pre>
 </li>
@@ -231,50 +231,50 @@ function onCanvasTouchMove(ev)
 <h2 id="feature" name="feature">Using Drawing Features</h2>
 
 
-  <h3 id="thick" name="thick">Changing the Line Thickness</h3> 
-  <ol> 
-   <li><strong>options.js Source File</strong> 
+  <h3 id="thick" name="thick">Changing the Line Thickness</h3>
+  <ol>
+   <li><strong>options.js Source File</strong>
 <p>The user changes the line thickness using a slider. The new slider value is set as the width of the <code>preview</code> element, as well as a value in the <code>options</code> object.</p>
 <pre class="prettyprint">
 function onRangeChange(ev)
 {
-&nbsp;&nbsp;&nbsp;setPreviewHeight(ev.target.value);
+   setPreviewHeight(ev.target.value);
 }
 function setPreviewHeight(value)
 {
-&nbsp;&nbsp;&nbsp;preview.style.height = value + 'px';
+   preview.style.height = value + 'px';
 }
 function setOptionValues()
 {
-&nbsp;&nbsp;&nbsp;options.setStrokeWidth(range.value);
+   options.setStrokeWidth(range.value);
 }
 </pre>
 </li>
-<li><strong>main.js Source File</strong>   
+<li><strong>main.js Source File</strong>
 <p>During drawing, the selected thickness is applied to the line being drawn.</p>
 <pre class="prettyprint">
 function getOptionValues()
 {
-&nbsp;&nbsp;&nbsp;strokeWidth = options.getStrokeWidth();
+   strokeWidth = options.getStrokeWidth();
 }
 
 context.lineWidth = strokeWidth + ADDITIONAL_LINE_WIDTH;
 </pre>
 </li></ol>
 
-<h3 id="color" name="color">Changing the Line Color</h3> 
-  <ol> 
+<h3 id="color" name="color">Changing the Line Color</h3>
+  <ol>
    <li><strong>options.js Source File</strong>
 <p>The user changes the line color by selecting it from the color picker. The new color is set as the <code>preview</code> element background, as well as a value in the <code>options</code> object.</p>
 <pre class="prettyprint">
 function onWhiteTap()
 {
-&nbsp;&nbsp;&nbsp;preview.style.backgroundColor = &#39;#fff&#39;;
+   preview.style.backgroundColor = '#fff';
 }
 
 function setOptionValues()
 {
-&nbsp;&nbsp;&nbsp;o.setStrokeColor(preview.style.backgroundColor);
+   o.setStrokeColor(preview.style.backgroundColor);
 }
 </pre>
 </li>
@@ -283,7 +283,7 @@ function setOptionValues()
 <pre class="prettyprint">
 function getOptionValues()
 {
-&nbsp;&nbsp;&nbsp;strokeColor = o.getStrokeColor();
+   strokeColor = o.getStrokeColor();
 }
 
 context.strokeStyle = strokeColor;
diff --git a/org.tizen.guides/html/web/w3c/device/touch_w.htm b/org.tizen.guides/html/web/w3c/device/touch_w.htm
index b16c01f..fa6502a 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/touch_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/touch_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Touch Events version 1</title> 
- </head> 
+  <title>Touch Events version 1</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -35,20 +35,20 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1 API for Mobile Web</a></li>            
+                       <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1 API for Mobile Web</a></li>
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1 API for Wearable Web</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/web/General/Hello_Tizen" target="_blank">Hello Tizen (Mobile) Sample Description</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/web/General/Hello_Tizen_1" target="_blank">Hello Tizen (Wearable) Sample Description</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/web/General/Page_Navigation" target="_blank">Page Navigation Sample Description</a></li>                    
+                       <li><a href="https://developer.tizen.org/development/sample/web/General/Page_Navigation" target="_blank">Page Navigation Sample Description</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="_blank">Touch Paint (Mobile) Sample Description</a></li>
-                       <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="_blank">Touch Paint (Wearable) Sample Description</a></li>                        
+                       <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="_blank">Touch Paint (Wearable) Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Touch Events version 1</h1> 
+  <h1>Touch Events version 1</h1>
 
 <p>As there is no mouse in a mobile device, the user actions must be handled with touch events, instead of mouse events.</p>
 
@@ -76,26 +76,26 @@
 <p>For a practical example of drawing a simple image by using touch events and canvas elements, see the Touch Paint sample task (in <a href="task_touch_paint_mw.htm">mobile</a> and <a href="task_touch_paint_ww.htm">wearable</a> applications).</p>
 
  <p>A touch-based mobile operating system uses tap and double-tap gestures. The tap is used to generate a click event, and double-tap used for zooming. To recognize the touch gestures, the OS sets a timer which starts at the first tap and checks for a second before the event is fired. This causes a delay in the single tap event, making the touch responsiveness of the application suffer.  To avoid the delay, you can <a href="#enhance">enhance the touch event responsiveness</a> by making the page unscalable, or modifying touch responses.</p>
-  
+
 <h2 id="handle" name="handle">Handling Touch Events</h2>
 
 <p>Depending on the touch type, different touch events occur:</p>
 <ul>
 <li>When the user first touches the element and removes their finger from the screen, the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events occur.
 
-<p align="center"><strong>Figure: Simple touch (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Simple touch (in mobile applications only)" src="../../../images/touch1.png" /></p> 
+<p align="center"><strong>Figure: Simple touch (in mobile applications only)</strong></p>
+<p align="center"><img alt="Simple touch (in mobile applications only)" src="../../../images/touch1.png" /></p>
 </li>
 
-<li>When the user moves their finger across the element, and then removes their finger, the <code>touchstart</code>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <code>touchend</code> events occur. 
+<li>When the user moves their finger across the element, and then removes their finger, the <code>touchstart</code>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <code>touchend</code> events occur.
 
-<p align="center"><strong>Figure: Moving touch (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Moving touch (in mobile applications only)" src="../../../images/touch2.png" /></p> 
+<p align="center"><strong>Figure: Moving touch (in mobile applications only)</strong></p>
+<p align="center"><img alt="Moving touch (in mobile applications only)" src="../../../images/touch2.png" /></p>
 </li>
 
 <li>When the user long-presses the DOM element, such as text or image, in the element, the <code>touchstart</code> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchcancel-event" target="_blank">touchcancel</a> events occur.
 
-<p align="center"><strong>Figure: Canceling touch with a long press (in mobile applications only)</strong></p> 
+<p align="center"><strong>Figure: Canceling touch with a long press (in mobile applications only)</strong></p>
 <p align="center"><img alt="Canceling touch with a long press (in mobile applications only)" src="../../../images/touch3.png" /></p>
 
 <div class="note">
@@ -103,51 +103,51 @@
        In Tizen, the <code>touchcancel</code> event occurs when a context menu is activated by a long press of a DOM element, such as text or image.
 </div>
 </li>
-</ul>                  
+</ul>
 
 <p>Learning how to handle touch events improves the user interaction of your application:</p>
 
 <ol>
 <li>Define the element from which you want to trigger touch events. In this case, an area with a text and an image is defined as an element.
 <pre class="prettyprint">
-&lt;div id=&quot;touchable&quot;&gt;
-&nbsp;&nbsp;&nbsp;Touch or drag this box with one finger.
-&nbsp;&nbsp;&nbsp;&lt;img src=&quot;https://www.tizen.org/sites/all/themes/tizen_theme/logo.png&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alt=&quot;Tizen logo&quot;&gt;
+&lt;div id="touchable"&gt;
+   Touch or drag this box with one finger.
+   &lt;img src="https://www.tizen.org/sites/all/themes/tizen_theme/logo.png"
+        alt="Tizen logo"&gt;
 &lt;/div&gt;
-&lt;div id=&quot;log&quot;&gt;&lt;/div&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
 </pre>
 </li>
 
 <li>Add event handlers for the defined element:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var log = document.querySelector(&quot;log&quot;);
-&nbsp;&nbsp;&nbsp;var touchable = document.querySelector(&quot;touchable&quot;);
-
-&nbsp;&nbsp;&nbsp;/* touchstart event */
-&nbsp;&nbsp;&nbsp;touchable.addEventListener(&quot;touchstart&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;&lt;p&gt;Touch Event: touchstart&lt;/p&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;/* touchend event */
-&nbsp;&nbsp;&nbsp;touchable.addEventListener(&quot;touchend&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;p&gt;Touch Event: touchend&lt;/p&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;/* touchmove event */
-&nbsp;&nbsp;&nbsp;touchable.addEventListener(&quot;touchmove&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;p&gt;Touch Event: touchmove&lt;/p&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;/* touchcancel event */
-&nbsp;&nbsp;&nbsp;touchable.addEventListener(&quot;touchcancel&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;p&gt;Touch Event: touchcancel&lt;/p&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+   var log = document.querySelector("log");
+   var touchable = document.querySelector("touchable");
+
+   /* touchstart event */
+   touchable.addEventListener("touchstart", function(e)
+      {
+         log.innerHTML = "&lt;p&gt;Touch Event: touchstart&lt;/p&gt;";
+      }, false);
+
+   /* touchend event */
+   touchable.addEventListener("touchend", function(e)
+      {
+         log.innerHTML += "&lt;p&gt;Touch Event: touchend&lt;/p&gt;";
+      }, false);
+
+   /* touchmove event */
+   touchable.addEventListener("touchmove", function(e)
+      {
+         log.innerHTML += "&lt;p&gt;Touch Event: touchmove&lt;/p&gt;";
+      }, false);
+
+   /* touchcancel event */
+   touchable.addEventListener("touchcancel", function(e)
+      {
+         log.innerHTML += "&lt;p&gt;Touch Event: touchcancel&lt;/p&gt;";
+      }, false);
 &lt;/script&gt;
 </pre>
 </li></ol>
@@ -157,14 +157,14 @@
        Since the device input takes place by touching the screen, sometimes the features of your application and the browser can respond simultaneously to the same touch event. To prevent the unintended effects (for example, the customized gesture and the browser scroll operating simultaneously),  use the <code>preventDefault()</code> method to prevent the basic browser events:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;touchable.addEventListener(&quot;touchmove&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event.touches.length &gt;= 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;p&gt;Touch Event: touchmove&lt;/p&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault(); /* Prevent default scroll action */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+   touchable.addEventListener("touchmove", function(e)
+      {
+         if (event.touches.length &gt;= 1)
+         {
+            log.innerHTML += "&lt;p&gt;Touch Event: touchmove&lt;/p&gt;";
+            e.preventDefault(); /* Prevent default scroll action */
+         }
+      }, false);
 &lt;/script&gt;
 </pre>
 </div>
@@ -173,49 +173,49 @@
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/touch_events_version_1" target="_blank">touch_event_types.html</a></li>
- </ul>  
-                       
+ </ul>
+
                                <h2 id="retrieve" name="retrieve">Retrieving the Event Point Occurrence</h2>
-                               
+
                                <p>Learning how to retrieve the coordinate of the touch event point occurrence improves the user interaction of your application:</p>
 
 <ol>
 <li>Define the element from which you want to trigger touch events. In this case, an area with a text is defined as an element.
 <pre class="prettyprint">
-&lt;div id=&quot;touchable&quot;&gt;
-&nbsp;&nbsp;&nbsp;Touch and move this box with one finger.
+&lt;div id="touchable"&gt;
+   Touch and move this box with one finger.
 &lt;/div&gt;
-&lt;div id=&quot;log&quot;&gt;&lt;/div&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
 </pre>
 </li>
 
 <li>Add an event listener and handler for the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a> event to the defined element:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var log = document.getElementById(&quot;log&quot;);
-&nbsp;&nbsp;&nbsp;var touchable = document.getElementById(&quot;touchable&quot;);
-
-&nbsp;&nbsp;&nbsp;/* touchmove event */
-&nbsp;&nbsp;&nbsp;touchable.addEventListener(&quot;touchmove&quot;, phaseCalcul, false);
-
-&nbsp;&nbsp;&nbsp;function phaseCalcul(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var pTarget = e.touches.item(0);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log.innerHTML =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;strong&gt;pageX:&lt;/strong&gt; &#39; + pTarget.pageX +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;br/&gt;&lt;strong&gt;pageY:&lt;/strong&gt; &#39; + pTarget.pageY +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;br/&gt;&lt;strong&gt;clientX:&lt;/strong&gt; &#39; + pTarget.clientX +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;br/&gt;&lt;strong&gt;clientY:&lt;/strong&gt; &#39; + pTarget.clientY +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;br/&gt;&lt;strong&gt;screenX:&lt;/strong&gt; &#39; + pTarget.screenX +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;br/&gt;&lt;strong&gt;screenY:&lt;/strong&gt; &#39; + pTarget.screenY;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
-&nbsp;&nbsp;&nbsp;}
+   var log = document.getElementById("log");
+   var touchable = document.getElementById("touchable");
+
+   /* touchmove event */
+   touchable.addEventListener("touchmove", phaseCalcul, false);
+
+   function phaseCalcul(e)
+   {
+      var pTarget = e.touches.item(0);
+
+      log.innerHTML =
+         '&lt;strong&gt;pageX:&lt;/strong&gt; ' + pTarget.pageX +
+         '&lt;br/&gt;&lt;strong&gt;pageY:&lt;/strong&gt; ' + pTarget.pageY +
+         '&lt;br/&gt;&lt;strong&gt;clientX:&lt;/strong&gt; ' + pTarget.clientX +
+         '&lt;br/&gt;&lt;strong&gt;clientY:&lt;/strong&gt; ' + pTarget.clientY +
+         '&lt;br/&gt;&lt;strong&gt;screenX:&lt;/strong&gt; ' + pTarget.screenX +
+         '&lt;br/&gt;&lt;strong&gt;screenY:&lt;/strong&gt; ' + pTarget.screenY;
+
+      e.preventDefault();
+   }
 &lt;/script&gt;
 </pre>
 
-<p>Each time the <code>touchmove</code> event is triggered, the position of the touch point is renewed. The position is returned in 2D coordinates of the page, client, and screen. You can use the position to compare the coordinates to the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events, and to analyze the gesture of the user by using the consequent <code>touchmove</code> events to determine the movement direction.  
+<p>Each time the <code>touchmove</code> event is triggered, the position of the touch point is renewed. The position is returned in 2D coordinates of the page, client, and screen. You can use the position to compare the coordinates to the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events, and to analyze the gesture of the user by using the consequent <code>touchmove</code> events to determine the movement direction.
 </p>
 </li>
 </ol>
@@ -223,50 +223,50 @@
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/touch_events_version_1" target="_blank">event_handling_prevent_default.html</a></li>
- </ul>  
-               
+ </ul>
+
                                <h2 id="control" name="control">Controlling Multi-point Touches</h2>
-                               
+
                                <p>Learning how to control multiple concurrent touch events improves the user interaction of your application:</p>
 
 <ol>
 <li>Define the element from which you want to trigger touch events. In this case, an area with a text is defined as an element.
 <pre class="prettyprint">
-&lt;div id=&quot;touchable&quot;&gt; Touch this box with two finger. &lt;/div&gt;
+&lt;div id="touchable"&gt; Touch this box with two finger. &lt;/div&gt;
 </pre>
 </li>
 
 <li>Add an event listener and handler for the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> event to the defined element:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var touchable = document.getElementById(&quot;touchable&quot;);
-
-&nbsp;&nbsp;&nbsp;/* touchstart event */
-&nbsp;&nbsp;&nbsp;touchable.addEventListener(&quot;touchstart&quot;, touchStartHandler, false);
-
-&nbsp;&nbsp;&nbsp;function touchStartHandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Return if there is no multi-point touch */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.touches.length &lt; 2) return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var width = Math.abs(e.touches.item(0).clientX - e.touches.item(1).clientX);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var height = Math.abs(e.touches.item(0).clientY - e.touches.item(1).clientY);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create a new image object instance */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var tizenLogo = document.createElement(&quot;img&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenLogo.setAttribute(&quot;src&quot;, &quot;sample_image.png&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenLogo.setAttribute(&quot;width&quot;, width);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenLogo.setAttribute(&quot;height&quot;, height);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenLogo.style.position = &quot;absolute&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Assign the position where the image is shown based on the touch point */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenLogo.style.left =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(e.touches.item(0).pageX + e.touches.item(1).pageX - width) / 2 + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenLogo.style.top =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(e.touches.item(0).pageY + e.touches.item(1).pageY - height) / 2 + &quot;px&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.appendChild(tizenLogo);
-&nbsp;&nbsp;&nbsp;}
+   var touchable = document.getElementById("touchable");
+
+   /* touchstart event */
+   touchable.addEventListener("touchstart", touchStartHandler, false);
+
+   function touchStartHandler(e)
+   {
+      /* Return if there is no multi-point touch */
+      if (e.touches.length &lt; 2) return;
+
+      var width = Math.abs(e.touches.item(0).clientX - e.touches.item(1).clientX);
+      var height = Math.abs(e.touches.item(0).clientY - e.touches.item(1).clientY);
+
+      /* Create a new image object instance */
+      var tizenLogo = document.createElement("img");
+      tizenLogo.setAttribute("src", "sample_image.png");
+      tizenLogo.setAttribute("width", width);
+      tizenLogo.setAttribute("height", height);
+      tizenLogo.style.position = "absolute";
+
+      /* Assign the position where the image is shown based on the touch point */
+      tizenLogo.style.left =
+         (e.touches.item(0).pageX + e.touches.item(1).pageX - width) / 2 + "px";
+      tizenLogo.style.top =
+         (e.touches.item(0).pageY + e.touches.item(1).pageY - height) / 2 + "px";
+
+      this.appendChild(tizenLogo);
+   }
 &lt;/script&gt;
 </pre>
 
@@ -279,64 +279,64 @@
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/touch_events_version_1" target="_blank">multi_touch.html</a></li>
- </ul>  
+ </ul>
                                <h2 id="enhance" name="enhance">Enhancing Touch Responsiveness</h2>
-                               
+
                                <p>To avoid having a delay in the single tap gesture, you can make the page unscalable, or modify touch responses:</p>
 
 <ul>
 <li>Make a page unscalable:
  <p>If a page is made unscalable, the double-tap gesture is not required for zooming, so the single tap gesture can be processed without delay. To make a page unscalable, use the <code>viewport</code> meta tag:</p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1.0, minimum-scale=1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maximum-scale=1.0, user-scalable=0&quot;&gt;
+&lt;meta name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
+               maximum-scale=1.0, user-scalable=0"&gt;
 </pre></li>
 <li>Modify touch responses
 <p>A touch event occurs immediately when the touched point is released, making it faster than the tap event. However, the touch event occurs even though the touched point is moved before releasing.</p>
  <ul>
  <li> To avoid processing the gesture when the touched point is moved, check whether the touched point is moved by setting a flag in the <code>touchmove()</code> event handler:
 <pre class="prettyprint">
-&lt;a id=&quot;test&quot; href=&quot;#&quot;&gt;Click test using touch event&lt;/a&gt;
-&lt;div id=&quot;log&quot;&gt;&lt;/div&gt;
+&lt;a id="test" href="#"&gt;Click test using touch event&lt;/a&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var moved = false;
+   var moved = false;
 
-&nbsp;&nbsp;&nbsp;$(&#39;#test&#39;).on(&#39;touchstart&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;moved = false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   $('#test').on('touchstart', function(e)
+      {
+         moved = false;
+      });
 
-&nbsp;&nbsp;&nbsp;$(&#39;#test&#39;).on(&#39;touchmove&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;moved = true;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   $('#test').on('touchmove', function(e)
+      {
+         moved = true;
+      });
 
-&nbsp;&nbsp;&nbsp;$(&#39;#test&#39;).on(&#39;touchend&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!moved)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#log&#39;).innerHTML = &quot;Test link is clicked!&quot;;
+   $('#test').on('touchend', function(e)
+      {
+         if (!moved)
+            $('#log').innerHTML = "Test link is clicked!";
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+         return false;
+      });
 &lt;/script&gt;
 </pre>
 <p>To avoid activating the click event after the touch event, set the return type to <code>false</code>.</p></li>
 <li> You can also use the <code>vclick</code> event provided by jQuery Mobile. The <code>vclick</code> event is based on the touch event and generated only if the touched point is not moved.
 <pre class="prettyprint">
-&lt;a id=&quot;test&quot; href=&quot;#&quot;&gt;Click test using touch event&lt;/a&gt;
-&lt;div id=&quot;log&quot;&gt;&lt;/div&gt;
+&lt;a id="test" href="#"&gt;Click test using touch event&lt;/a&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;$(&#39;#test&#39;).on(&#39;vclick&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#log&#39;).html(&quot;Test link is clicked!&quot;);
+   $('#test').on('vclick', function(e)
+      {
+         $('#log').html("Test link is clicked!");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+         return false;
+      });
 &lt;/script&gt;
 </pre>
 </li>
-</ul></li></ul> 
+</ul></li></ul>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/device/vibration_w.htm b/org.tizen.guides/html/web/w3c/device/vibration_w.htm
index 322cc80..c975771 100644 (file)
--- a/org.tizen.guides/html/web/w3c/device/vibration_w.htm
+++ b/org.tizen.guides/html/web/w3c/device/vibration_w.htm
@@ -11,7 +11,7 @@
     <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
     <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
   <title>Vibration</title>
-  
+
  </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -54,7 +54,7 @@
 </ul>
 
 <h2 id="manage" name="manage">Managing Vibrations</h2>
-                       
+
                        <p>To enhance the user interaction with the device, learn to manage vibrations:</p>
 
 <ol>
@@ -62,69 +62,69 @@
 <pre class="prettyprint lang-html">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Tizen Vibration API Example code&lt;/title&gt;
+   &lt;head&gt;
+      &lt;meta charset="utf-8"/&gt;
+      &lt;meta name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
+      &lt;title&gt;Tizen Vibration API Example code&lt;/title&gt;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
+      &lt;script&gt;
 </pre>
 <pre class="prettyprint lang-js">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function singleVibration()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Vibrate for 2 seconds */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.vibrate(2000);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+         function singleVibration()
+         {
+            /* Vibrate for 2 seconds */
+            navigator.vibrate(2000);
+         }
 </pre>
 </li>
 <li>To launch a vibration that uses a pattern of vibration and still periods, define the pattern as the <code>vibrate()</code> method parameter:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function patternVibration()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Vibrate in a given pattern: 1 sec on, 1 sec off, 2 sec on, 2 sec off */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.vibrate([1000, 1000, 2000, 2000, 1000]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+         function patternVibration()
+         {
+            /* Vibrate in a given pattern: 1 sec on, 1 sec off, 2 sec on, 2 sec off */
+            navigator.vibrate([1000, 1000, 2000, 2000, 1000]);
+         }
 </pre>
 </li>
 <li>To stop the vibration before it ends naturally, use the <code>vibrate()</code> method with <code>0</code> or <code>[]</code> as a parameter. The method call cancels all existing vibrations.
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function stopVibration()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.vibrate(0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+         function stopVibration()
+         {
+            navigator.vibrate(0);
+         }
 </pre>
 </li>
 <li>Create the buttons used to manage the vibrations:
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header style=&quot;width: 100%; text-align: center;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Vibration API Example&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav style=&quot;width: 100%; text-align: center;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Button click calls singleVibration()--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button onclick=&quot;singleVibration();&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;width: 200px; height: 50px; margin-bottom: 10px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Single vibration
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Button click calls patternVibration()--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button onclick=&quot;patternVibration();&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;width: 200px; height: 50px; margin-bottom: 10px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pattern vibration
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Button click calls stopVibration()--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button onclick=&quot;stopVibration();&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;width: 200px; height: 50px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stop vibration
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/nav&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+      &lt;/script&gt;
+   &lt;/head&gt;
+
+   &lt;body&gt;
+      &lt;header style="width: 100%; text-align: center;"&gt;
+         &lt;h1&gt;Vibration API Example&lt;/h1&gt;
+      &lt;/header&gt;
+
+      &lt;nav style="width: 100%; text-align: center;"&gt;
+         &lt;!--Button click calls singleVibration()--&gt;
+         &lt;button onclick="singleVibration();"
+                 style="width: 200px; height: 50px; margin-bottom: 10px"&gt;
+            Single vibration
+         &lt;/button&gt;
+
+         &lt;!--Button click calls patternVibration()--&gt;
+         &lt;button onclick="patternVibration();"
+                 style="width: 200px; height: 50px; margin-bottom: 10px"&gt;
+            Pattern vibration
+         &lt;/button&gt;
+
+         &lt;!--Button click calls stopVibration()--&gt;
+         &lt;button onclick="stopVibration();"
+                 style="width: 200px; height: 50px"&gt;
+            Stop vibration
+         &lt;/button&gt;
+      &lt;/nav&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre></li></ol>
 <h3>Source Code</h3>
diff --git a/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm b/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
index f0678a2..79ac458 100644 (file)
--- a/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML5 Canvas</title> 
- </head> 
+  <title>HTML5 Canvas</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -45,11 +45,11 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/System/World_Clock" target="_blank">World Clock Sample Description</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
    <h1>HTML5 Canvas</h1>
- 
+
 <p>The HTML5 canvas allows you to use graphics on the screen, and draw and manage various shapes. The HTML Canvas 2D Context API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#canvas2d">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">wearable</a> applications) defines a special canvas element that expresses images or shapes with JavaScript.</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
@@ -67,13 +67,13 @@
 <p>You can also <a href="#mask">draw and mask objects</a> on the canvas.</p>
 </li>
 <li>Using styles and transformations
-<p>You can use a canvas to <a href="#text">create text or lines</a> other than images and shapes.</p> 
+<p>You can use a canvas to <a href="#text">create text or lines</a> other than images and shapes.</p>
 </li>
 </ul>
 <p>For all canvas objects (images, shapes, text, and lines), you can define colors (the <code>fillStyle</code> and <code>strokeStyle</code> attributes), shadows (the <code>shadowColor</code> and <code>shadowBlur</code> attributes), and gradation (the <code>createLinearGradient()</code> method). You can also use the transformation methods, such as <code>scale()</code>, <code>translate()</code>, <code>transform()</code>, and <code>rotate()</code>, to implement, for example, transparency or shape gradient transformations.</p>
 
- 
-<p>In mobile applications only, in HTML5, the HTML5 SVG API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#svg">wearable</a> applications) provides similar features as the canvas. Their difference is that SVG expresses graphics using vectors, while the canvas is based on pixels. To express complex graphics, use the canvas, and to express graphics with a liberal expansion or reduction, use <a href="svg_w.htm">SVG</a>.  
+
+<p>In mobile applications only, in HTML5, the HTML5 SVG API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#svg">wearable</a> applications) provides similar features as the canvas. Their difference is that SVG expresses graphics using vectors, while the canvas is based on pixels. To express complex graphics, use the canvas, and to express graphics with a liberal expansion or reduction, use <a href="svg_w.htm">SVG</a>.
 </p>
 
 <div class="note">
@@ -86,14 +86,14 @@
 <h2 id="canvas" name="canvas">Using a Canvas</h2>
 
 <p>To create a canvas in your application:</p>
- 
+
 <ol>
-<li>Create a <code>&lt;canvas&gt;</code> element with the HTML5 Canvas Element API. 
+<li>Create a <code>&lt;canvas&gt;</code> element with the HTML5 Canvas Element API.
 <p>The canvas assigns the region (canvas context) where images are drawn with JavaScript.</p>
 
 <pre class="prettyprint">
-&lt;canvas width=&quot;300&quot; height=&quot;300&quot; id=&quot;canvas&quot;&gt;
-&nbsp;&nbsp;&nbsp;This browser is not supported
+&lt;canvas width="300" height="300" id="canvas"&gt;
+   This browser is not supported
 &lt;/canvas&gt;
 </pre>
 
@@ -105,10 +105,10 @@
 
 <li>Use the <a href="http://www.w3.org/TR/2012/WD-2dcontext-20120329/#canvasrenderingcontext2d" target="_blank">CanvasRenderingContext2D</a> interface to connect to the canvas and get the canvas context:
 <pre class="prettyprint">
-var canvas = document.querySelector(&quot;canvas&quot;),
-var context = canvas.getContext(&#39;2d&#39;);
+var canvas = document.querySelector("canvas"),
+var context = canvas.getContext('2d');
 </pre>
-<p>The interface has various methods and attributes for expressing images and shapes.</p></li> 
+<p>The interface has various methods and attributes for expressing images and shapes.</p></li>
 <li>To manage the work stack of the canvas, use the following methods:
 <ul>
 <li><code>save()</code>: Pushes the current state onto the stack.</li>
@@ -122,7 +122,7 @@ var context = canvas.getContext(&#39;2d&#39;);
 <pre class="prettyprint">
 if (!(canvas.getContext))
 {
-&nbsp;&nbsp;&nbsp;alert(&quot;This browser is not supported&quot;);
+   alert("This browser is not supported");
 }
 </pre>
 <h3>Source Code</h3>
@@ -131,7 +131,7 @@ if (!(canvas.getContext))
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial1.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial2.html</a></li>
  </ul>
-               
+
                                <h2 id="image" name="image">Using Images on the Canvas</h2>
 <p>To use images in the canvas, use the <code>drawImage()</code> method of the HTML Canvas 2D Context API. The method receives information, such as the image URL and position, and where it is indicated, and then creates the image in the canvas. The created image is pixel-based.</p>
 
@@ -141,7 +141,7 @@ if (!(canvas.getContext))
 </div>
 
 <p>To use images on a canvas:</p>
- 
+
  <ol><li>
  <p>Use the <code>drawImage()</code> method to express an image in the canvas.</p>
 <p>When you define the URL of the image to be imported and its coordinates, the original image is imported as it is. You can hide certain parts of the image by assigning its size accordingly.</p>
@@ -165,15 +165,15 @@ var transImage = context.getImageData(30, 20, image.width, image.height);
 /* Convert the data color value for each image pixel */
 for (var i = 0; i &lt; transImage.data.length; i += 4)
 {
-&nbsp;&nbsp;&nbsp;transImage.data[i + 0] = 255 - transImage.data[i + 0];
-&nbsp;&nbsp;&nbsp;transImage.data[i + 1] = 255 - transImage.data[i + 1];
-&nbsp;&nbsp;&nbsp;transImage.data[i + 2] = 255 - transImage.data[i + 2];
+   transImage.data[i + 0] = 255 - transImage.data[i + 0];
+   transImage.data[i + 1] = 255 - transImage.data[i + 1];
+   transImage.data[i + 2] = 255 - transImage.data[i + 2];
 }
 
 /* Insert the converted image back to the canvas */
 context.putImageData(transImage, 30, 20);
 </pre></li>
-<li><p>Use the <code>CanvasTransformation</code> interface to transform the selected object, for example, its size, angle, or position. By connecting to the image used in the canvas, you can also rotate it. (The following figure applies to mobile applications only.) 
+<li><p>Use the <code>CanvasTransformation</code> interface to transform the selected object, for example, its size, angle, or position. By connecting to the image used in the canvas, you can also rotate it. (The following figure applies to mobile applications only.)
 </p>
 
 <pre class="prettyprint">
@@ -202,10 +202,10 @@ context.restore();
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial1.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial2.html</a></li>
  </ul>
-               
+
                                <h2 id="shape" name="shape">Drawing Shapes to the Canvas</h2>
 <p>With the HTML Canvas 2D Context API, you can draw various shapes, such as rectangles (<code>rect()</code>), circles (<code>arc()</code> and <code>arcTo()</code>), and lines (<code>lineTo()</code> and <code>bezierCurveTo()</code>), to a canvas. You can define the position and size of the shapes, and also merge shapes with other shape objects.</p>
-<p>To create and draw shapes on a canvas:</p> 
+<p>To create and draw shapes on a canvas:</p>
 
 <ol>
 <li>Use the <code>rect()</code> method to create a rectangle.
@@ -213,17 +213,17 @@ context.restore();
 
 <pre class="prettyprint">
 /* Rectangle fill style */
-context.fillStyle = &#39;#333&#39;;
+context.fillStyle = '#333';
 context.fillRect(10, 10, 300, 300);
 
 /* Rectangle stroke style */
-context.strokeStyle = &#39;#ff0&#39;;
+context.strokeStyle = '#ff0';
 context.strokeRect(100, 100, 100, 100);
 
 /* Rectangle clear style */
 context.clearRect(50, 50, 100, 100);
 </pre>
-<p align="center"><img alt="Assign rectangle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes1.png" /></p> 
+<p align="center"><img alt="Assign rectangle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes1.png" /></p>
 </li>
 
 <li>Use the <code>arc()</code> method to create a circle.
@@ -250,7 +250,7 @@ context.arcTo(150, 50, 100, 100, 50);
 context.lineTo(300, 200);
 context.stroke();
 </pre>
-<p align="center"><img alt="Assign circle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes2.png" /></p> 
+<p align="center"><img alt="Assign circle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes2.png" /></p>
 </li>
 
 <li><p>Use the <code>CanvasTransformation</code> interface to transform the created shapes. With compositing, a certain part of the shape can be made transparent. (The following figure applies to mobile applications only.)</p>
@@ -265,9 +265,9 @@ context.beginPath();
 context.arc(150, 150, 100, 0, 2 * Math.PI);
 
 /* Fill the shape */
-context.fillStyle = &#39;tomato&#39;;
+context.fillStyle = 'tomato';
 </pre>
-<p align="center"><img alt="Transform shapes (in mobile applications only)" src="../../../images/canvas_drawing_shapes3.png" /></p> 
+<p align="center"><img alt="Transform shapes (in mobile applications only)" src="../../../images/canvas_drawing_shapes3.png" /></p>
 </li>
 </ol>
 
@@ -275,24 +275,24 @@ context.fillStyle = &#39;tomato&#39;;
        <strong>Note</strong>
        For a canvas, the rendering occurs in the order from the back of the input source.
 </div>
-       
+
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial3.html</a></li>
- </ul> 
+ </ul>
 
 <h2 id="mask" name="mask">Drawing Masks to the Canvas</h2>
-       
-<p>To draw masks on a canvas:</p> 
+
+<p>To draw masks on a canvas:</p>
 
 <ol>
 <li>Create the HTML layout with a canvas and 2 button input elements for brush selection:
 
 <pre class="prettyprint">
-&lt;canvas id=&quot;canvas&quot; width=&quot;600&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;
-&lt;input type=&quot;button&quot; value=&quot;Small brush&quot; id=&quot;smallBrush&quot;/&gt;
-&lt;input type=&quot;button&quot; value=&quot;Big brush&quot; id=&quot;bigBrush&quot;/&gt;
+&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+&lt;input type="button" value="Small brush" id="smallBrush"/&gt;
+&lt;input type="button" value="Big brush" id="bigBrush"/&gt;
 </pre>
 </li>
 
@@ -300,11 +300,11 @@ context.fillStyle = &#39;tomato&#39;;
 
 <pre class="prettyprint">
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;body
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: url(images/tizen_blackfold3.png) no-repeat;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-size: cover;
-&nbsp;&nbsp;&nbsp;}
+   body
+   {
+      background: url(images/tizen_blackfold3.png) no-repeat;
+      background-size: cover;
+   }
 &lt;/style&gt;
 </pre>
 </li>
@@ -313,9 +313,9 @@ context.fillStyle = &#39;tomato&#39;;
 
 <pre class="prettyprint">
 var lastX = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;lastX = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;mouseBtn = false,
-&nbsp;&nbsp;&nbsp;&nbsp;brushSize = 4;
+    lastX = 0,
+    mouseBtn = false,
+    brushSize = 4;
 var canvas, context;
 </pre>
 </li>
@@ -324,71 +324,71 @@ var canvas, context;
 <pre class="prettyprint">
 window.onload = function()
 {
-&nbsp;&nbsp;&nbsp;canvas = document.getElementById(&#39;canvas&#39;);
-&nbsp;&nbsp;&nbsp;context = canvas.getContext(&quot;2d&quot;);
-&nbsp;&nbsp;&nbsp;if (!context)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
+   canvas = document.getElementById('canvas');
+   context = canvas.getContext("2d");
+   if (!context)
+   {
+      return;
+   }
 }
 </pre>
 </li>
 
-<li>Draw an image on the canvas using the <code>drawImage()</code> method. The user is able to replace the image with another using a brush. 
+<li>Draw an image on the canvas using the <code>drawImage()</code> method. The user is able to replace the image with another using a brush.
 <p>Create a new <code>Image</code> object, including the path of the image file. Define the line width to be based on the brush size selected by the user.</p>
 
 <pre class="prettyprint">
 var img = new Image();
-img.addEventListener(&#39;load&#39;, function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.drawImage(img, 0, 0);
-&nbsp;&nbsp;&nbsp;});
-img.src = &quot;images/TizenPinwheelArrows.png&quot;;
+img.addEventListener('load', function()
+   {
+      context.drawImage(img, 0, 0);
+   });
+img.src = "images/TizenPinwheelArrows.png";
 context.lineWidth = brushSize;
-context.lineCap = &#39;round&#39;;
+context.lineCap = 'round';
 </pre>
 </li>
 <li>Define the button events and brushes:
 <pre class="prettyprint">
-var smallBtn = document.getElementById(&quot;smallBrush&quot;);
-smallBtn.addEventListener(&#39;click&#39;, smallBrush);
-var bigBtn = document.getElementById(&quot;bigBrush&quot;);
-bigBtn.addEventListener(&#39;click&#39;, bigBrush);
+var smallBtn = document.getElementById("smallBrush");
+smallBtn.addEventListener('click', smallBrush);
+var bigBtn = document.getElementById("bigBrush");
+bigBtn.addEventListener('click', bigBrush);
 
 function smallBrush(e)
 {
-&nbsp;&nbsp;&nbsp;context.beginPath();
-&nbsp;&nbsp;&nbsp;brushSize = 4;
-&nbsp;&nbsp;&nbsp;context.lineWidth = brushSize;
+   context.beginPath();
+   brushSize = 4;
+   context.lineWidth = brushSize;
 }
 /* Define the big brush similarly */
 </pre></li>
 <li>Add event listeners to detect touch and mouse events:
 <pre class="prettyprint">
-canvas.addEventListener(&#39;touchstart&#39;, startDraw);
-canvas.addEventListener(&#39;touchmove&#39;, drawStep);
-canvas.addEventListener(&#39;touchend&#39;, stopDraw);
-canvas.addEventListener(&#39;mouseout&#39;, stopDraw);
+canvas.addEventListener('touchstart', startDraw);
+canvas.addEventListener('touchmove', drawStep);
+canvas.addEventListener('touchend', stopDraw);
+canvas.addEventListener('mouseout', stopDraw);
 /* Event listeners for mouse events */
 </pre>
 <p>The <code>touchstart</code> and <code>mousedown</code> events only store the event coordinates, the <code>touchmove</code> and <code>mousemove</code> events define the position and direction of the drawing, and the <code>touchend</code> and <code>mouseup</code> events indicate that the user event ends, as illustrated in the following figure.</p>
 <p align="center"><img alt="Drawing events" src="../../../images/drawing_line_sequence.png" /></p>
 </li>
-<li>Use the <code>updateLastPos()</code> method to update the <code>lastX</code> and <code>lastY</code> variable values. The real coordinates can be calculated by reducing the offset position of the canvas element from the touch position coordinates. The <code>&#39;touch&#39;</code> string indicates that the event is a touch event.
+<li>Use the <code>updateLastPos()</code> method to update the <code>lastX</code> and <code>lastY</code> variable values. The real coordinates can be calculated by reducing the offset position of the canvas element from the touch position coordinates. The <code>'touch'</code> string indicates that the event is a touch event.
 <pre class="prettyprint">
 function updateLastPos(e)
 {
-&nbsp;&nbsp;&nbsp;if (e.type.indexOf(&#39;touch&#39;) &gt;= 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var pos = e.touches.item(0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastX = pos.clientX-pos.target.offsetLeft;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastY = pos.clientY-pos.target.offsetTop;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastX = e.offsetX;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastY = e.offsetY;
-&nbsp;&nbsp;&nbsp;}
+   if (e.type.indexOf('touch') &gt;= 0)
+   {
+      var pos = e.touches.item(0);
+      lastX = pos.clientX-pos.target.offsetLeft;
+      lastY = pos.clientY-pos.target.offsetTop;
+   }
+   else
+   {
+      lastX = e.offsetX;
+      lastY = e.offsetY;
+   }
 }
 </pre>
 </li>
@@ -397,11 +397,11 @@ function updateLastPos(e)
 <pre class="prettyprint">
 function startDraw(e)
 {
-&nbsp;&nbsp;&nbsp;updateLastPos(e);
-&nbsp;&nbsp;&nbsp;context.globalCompositeOperation = &#39;destination-out&#39;;
-&nbsp;&nbsp;&nbsp;context.beginPath();
-&nbsp;&nbsp;&nbsp;context.moveTo(lastX, lastY);
-&nbsp;&nbsp;&nbsp;mouseBtn = true;
+   updateLastPos(e);
+   context.globalCompositeOperation = 'destination-out';
+   context.beginPath();
+   context.moveTo(lastX, lastY);
+   mouseBtn = true;
 }
 </pre>
 </li>
@@ -410,12 +410,12 @@ function startDraw(e)
 <pre class="prettyprint">
 function drawStep(e)
 {
-&nbsp;&nbsp;&nbsp;if (mouseBtn)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;updateLastPos(e);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.lineTo(lastX, lastY);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.stroke();
-&nbsp;&nbsp;&nbsp;}
+   if (mouseBtn)
+   {
+      updateLastPos(e);
+      context.lineTo(lastX, lastY);
+      context.stroke();
+   }
 }
 </pre>
 </li>
@@ -423,34 +423,34 @@ function drawStep(e)
 <pre class="prettyprint">
 function stopDraw(e)
 {
-&nbsp;&nbsp;&nbsp;context.globalCompositeOperation = &#39;source-over&#39;;
-&nbsp;&nbsp;&nbsp;mouseBtn = false;
+   context.globalCompositeOperation = 'source-over';
+   mouseBtn = false;
 }
 </pre>
 <p align="center"><img alt="Drawing masks" src="../../../images/canvas_drawing_masks.png" /></p>
 </li>
 </ol>
 
- 
+
        <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context/scratchcard" target="_blank">renamed_index.html</a></li>
- </ul>  
+ </ul>
 
 <h2 id="text" name="text">Creating Text and Lines on the Canvas</h2>
 <p>To create text and lines on a canvas:</p>
- 
+
 <ol>
 
 <li><p>To draw a line, use the <code>moveTo()</code> method to assign the beginning point of the line, and the <code>lineTo()</code> method to assign the end point of the line. The <code>stroke()</code> method draws the full line. </p>
 
 <pre class="prettyprint">
-context.lineJoin = &quot;bevel&quot;;
+context.lineJoin = "bevel";
 context.lineWidth = 20;
 
 context.beginPath();
-context.lineJoin = &quot;round&quot;;
+context.lineJoin = "round";
 context.moveTo(20, 20);
 context.lineTo(100, 40);
 context.stroke();
@@ -460,9 +460,9 @@ context.stroke();
 <p>The <code>font</code> attribute defines the font style, and the <code>textBaseline</code> attribute the vertical alignment of the text.</p>
 
 <pre class="prettyprint">
-context.font = &#39;italic 400 22px/2 sans-serif&#39;;
-context.strokeStyle = &quot;#f00&quot;;
-context.textBaseline = &quot;alphabetic&quot;;
+context.font = 'italic 400 22px/2 sans-serif';
+context.strokeStyle = "#f00";
+context.textBaseline = "alphabetic";
 context.moveTo(150, 20);
 context.lineTo(150, 170);
 context.stroke();
@@ -471,10 +471,10 @@ context.stroke();
 <li><p>Use the <code>textAlign</code> attribute and the <code>fillText()</code> method to position the text in the assigned location:</p>
 
 <pre class="prettyprint">
-context.textAlign = &quot;start&quot;;
-context.fillText(&quot;textAlign=start&quot;, 150, 50);
-context.textAlign = &quot;end&quot;;
-context.measureText(&quot;textAlign=end&quot;, 150, 100);
+context.textAlign = "start";
+context.fillText("textAlign=start", 150, 50);
+context.textAlign = "end";
+context.measureText("textAlign=end", 150, 100);
 </pre></li>
 </ol>
 
@@ -482,44 +482,44 @@ context.measureText(&quot;textAlign=end&quot;, 150, 100);
        <strong>Note</strong>
        When drawing multiple images in a canvas, indicate the starting point with the <code>beginPath()</code> method to prevent unforeseen errors.
 </div>
-       
+
        <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following files:</p>
  <ul>
     <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">Line_Styles_3.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">Text_Styles_2.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">Text_Styles_4.html</a></li>
- </ul> 
- 
+ </ul>
+
 <h2 id="comparison" name="comparison">Performance Comparison of Canvas 2D and WebGL in Mobile Applications</h2>
 
-<p>In Web documents prior to HTML5, only simple image loading was supported. To create graphic animations, you had to use a separate plug-in. However, as the graphic-related APIs have become more standardized, you can now express graphics by using only JavaScript, without a separate plug-in.</p>  
+<p>In Web documents prior to HTML5, only simple image loading was supported. To create graphic animations, you had to use a separate plug-in. However, as the graphic-related APIs have become more standardized, you can now express graphics by using only JavaScript, without a separate plug-in.</p>
+
+<p>When developing Web applications that need to express complex graphics, such as games, the most important issue to consider is graphic performance. Currently, the HTML Canvas 2D Context API and <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL</a> are used to express graphic elements in many games. The following example illustrates how to create an effective graphic animation by comparing the performance of the renderers in the Canvas 2D Context API and WebGL.</p>
 
-<p>When developing Web applications that need to express complex graphics, such as games, the most important issue to consider is graphic performance. Currently, the HTML Canvas 2D Context API and <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL</a> are used to express graphic elements in many games. The following example illustrates how to create an effective graphic animation by comparing the performance of the renderers in the Canvas 2D Context API and WebGL.</p> 
- 
 <p>To compare the performance, 2 simple Web applications must be created, using respectively the Canvas 2D Context API and WebGL:</p>
 
 <ol>
 <li>Create the applications with the following logic:
-<ol type="a"><li>Load an image.</li> 
-<li>Render the loaded image in the random location of the canvas.</li>  
-<li>Use the <code>requestAnimationFrame()</code> method of the Timing control for script-based animations API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">wearable</a> applications) to change the color of the loaded image, based on different times.</li>  
-<li>Create a logic that measures FPS (frames per second) in order to check the performance.</li></ol></li>  
-<li>Execute the applications and measure the FPS.</li>  
-<li>Increase only the number of objects so that the same 1~N images, under the same conditions, are shown repeatedly based on 1~N.</li>  
-<li>Measure the FPS as the number of repeatedly shown objects increase.</li> </ol> 
+<ol type="a"><li>Load an image.</li>
+<li>Render the loaded image in the random location of the canvas.</li>
+<li>Use the <code>requestAnimationFrame()</code> method of the Timing control for script-based animations API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">wearable</a> applications) to change the color of the loaded image, based on different times.</li>
+<li>Create a logic that measures FPS (frames per second) in order to check the performance.</li></ol></li>
+<li>Execute the applications and measure the FPS.</li>
+<li>Increase only the number of objects so that the same 1~N images, under the same conditions, are shown repeatedly based on 1~N.</li>
+<li>Measure the FPS as the number of repeatedly shown objects increase.</li> </ol>
 
 <p>The following figure shows the result of the test: As the number of objects increase, the performance of the Canvas 2D Context API rapidly decreases when compared to WebGL (the result is subject to change according to the complexity of the application logic). As such, when expressing many graphic objects all differently, it is much more efficient to use WebGL than the Canvas 2D Context API.</p>
 
-  <p align="center"><strong>Figure: Test result</strong></p> 
+  <p align="center"><strong>Figure: Test result</strong></p>
   <p align="center"><img alt="Test result" src="../../../images/comp_test_result.png" /></p>
- 
-<p>There is one problem with using WebGL; the ratio of mobile browsers supporting it is quite low compared to the Canvas 2D Context API, and even when it is supported, usually only partial features are included (support for 3D acceleration, reflection effect, and camera effect is particularly low). The following figure shows the support status of WebGL in computer (top) and mobile (bottom) browsers, as published in <a href="http://webglstats.com/" target="_blank">http://webglstats.com/</a> in June 2013.</p> 
 
-  <p align="center"><strong>Figure: WebGL support in computer and mobile browsers</strong></p> 
+<p>There is one problem with using WebGL; the ratio of mobile browsers supporting it is quite low compared to the Canvas 2D Context API, and even when it is supported, usually only partial features are included (support for 3D acceleration, reflection effect, and camera effect is particularly low). The following figure shows the support status of WebGL in computer (top) and mobile (bottom) browsers, as published in <a href="http://webglstats.com/" target="_blank">http://webglstats.com/</a> in June 2013.</p>
+
+  <p align="center"><strong>Figure: WebGL support in computer and mobile browsers</strong></p>
   <p align="center"><img alt="WebGL support in computer and mobile browsers" src="../../../images/comp_test_support.png" /></p>
 
-<p>Many mobile browsers do not support WebGL or only partially support WebGL. Even though Tizen supports WebGL, it is recommended to use the Canvas 2D Context API for small amount of 2D drawings, since the API is supported in most mobile browsers. However, for performance critical applications, use WebGL for faster 2D performance.</p>  
+<p>Many mobile browsers do not support WebGL or only partially support WebGL. Even though Tizen supports WebGL, it is recommended to use the Canvas 2D Context API for small amount of 2D drawings, since the API is supported in most mobile browsers. However, for performance critical applications, use WebGL for faster 2D performance.</p>
 
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm b/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
index 3454ee9..976207c 100644 (file)
--- a/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Graphics</title> 
- </head> 
+  <title>Graphics</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,20 +31,20 @@
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">Graphics API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
    <h1>Graphics</h1>
    <p>The graphics features include creating and editing various kinds of images, shapes, text, and elements.</p>
-   
+
  <p>The following graphics features apply in <strong>mobile and wearable applications only</strong>:</p>
   <ul>
    <li><a href="canvas_w.htm">HTML5 Canvas</a>
    <p>Enables you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context.</p></li>
    <li><a href="svg_w.htm">HTML5 SVG</a>
-   <p>Enables you to create and modify SVG elements in your application.</p></li> 
+   <p>Enables you to create and modify SVG elements in your application.</p></li>
    </ul>
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/graphics/svg_w.htm b/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
index 45c53b9..190e05e 100644 (file)
--- a/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML5 SVG</title> 
- </head> 
+  <title>HTML5 SVG</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -40,11 +40,11 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Shape_Editor" target="_blank">Shape Editor Sample Description</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
    <h1>HTML5 SVG</h1>
- 
+
 <p>The SVG supports 2D graphics through SVG (Scalable Vector Graphics). Prior to HTML5, SVG functioned based on XML, so it was only used in XHTML or with a separate SVG plug-in. Since HTML5, however, an <code>svg</code> tag is used in the XML format, and can be added as an inline element in HTML.</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
@@ -70,17 +70,17 @@
 <li>Text
 <p>Define the textual content and the location on the screen:</p>
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;text x=&quot;60&quot; y=&quot;150&quot;&gt;Hello World&lt;/text&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
+   &lt;text x="60" y="150"&gt;Hello World&lt;/text&gt;
 &lt;/svg&gt;
 </pre>
 </li>
 <li>Images
 <p>Define the image file, the image location on the screen, and the image size:</p>
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;image xlink:href=&quot;http://developer.tizen.org/sites/all/themes/tizen_theme/logo.png&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x=&quot;10&quot; y=&quot;10&quot; width=&quot;224&quot; height=&quot;74&quot;/&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
+   &lt;image xlink:href="http://developer.tizen.org/sites/all/themes/tizen_theme/logo.png"
+          x="10" y="10" width="224" height="74"/&gt;
 &lt;/svg&gt;
 </pre>
 </li>
@@ -88,8 +88,8 @@
 
 <h2 id="make" name="make">Making Shapes</h2>
 
-<p>To create shapes as inline SVG elements:</p>  
- 
+<p>To create shapes as inline SVG elements:</p>
+
 <ol>
 <li>Create the SVG element with the <code>svg</code> tag.</li>
 <li>Use the graphic elements to create various shapes. The absolute coordinates of the graphics element determine the size of the SVG. You can define the shape, size, location on the screen, line width, and the line and fill colors for the shapes.
@@ -98,195 +98,195 @@
 <li><p>To create a line between 2 assigned coordinates, use the <code>&lt;line&gt;</code> element:</p>
 
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;300px&quot; height=&quot;200px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;line x1=&quot;20&quot; y1=&quot;20&quot; x2=&quot;220&quot; y2=&quot;120&quot; stroke=&quot;blue&quot; stroke-width=&quot;5&quot;/&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+   &lt;line x1="20" y1="20" x2="220" y2="120" stroke="blue" stroke-width="5"/&gt;
 &lt;/svg&gt;
 </pre></li>
 
 <li><p>To create a rectangle at the assigned coordinates, use the <code>&lt;rect&gt;</code> element:</p>
 
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;300px&quot; height=&quot;200px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;rect x=&quot;1&quot; y=&quot;1&quot; width=&quot;120&quot; height=&quot;40&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill=&quot;blue&quot; stroke=&quot;red&quot; stroke-width=&quot;2&quot;/&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+   &lt;rect x="1" y="1" width="120" height="40"
+         fill="blue" stroke="red" stroke-width="2"/&gt;
 &lt;/svg&gt;
 </pre></li>
 
 <li><p>To create a circle with the assigned barycentric coordinate and radius, use the <code>&lt;circle&gt;</code> element:</p>
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;300px&quot; height=&quot;200px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;circle cx=&quot;150&quot; cy=&quot;100&quot; r=&quot;50&quot; fill=&quot;blue&quot; stroke=&quot;red&quot; stroke-width=&quot;3&quot;/&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+   &lt;circle cx="150" cy="100" r="50" fill="blue" stroke="red" stroke-width="3"/&gt;
 &lt;/svg&gt;
 </pre></li>
 
 <li><p>To create an ellipse with the assigned barycentric coordinate and the X and Y axis radius, use the <code>&lt;ellipse&gt;</code> element:</p>
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;300px&quot; height=&quot;200px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ellipse  cx=&quot;130&quot; cy=&quot;80&quot; rx=&quot;125&quot; ry=&quot;50&quot; fill=&quot;blue&quot;/&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+   &lt;ellipse  cx="130" cy="80" rx="125" ry="50" fill="blue"/&gt;
 &lt;/svg&gt;
 </pre></li>
 
 <li><p>To create a polygon comprised of a set of assigned coordinates, use the <code>&lt;polygon&gt;</code> element:</p>
 
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;300px&quot; height=&quot;200px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;polygon fill-rule=&quot;evenodd&quot; fill=&quot;blue&quot; stroke=&quot;black&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;points=&quot;148,16 116,96 196,48 100,48 180,96&quot;/&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+   &lt;polygon fill-rule="evenodd" fill="blue" stroke="black"
+            points="148,16 116,96 196,48 100,48 180,96"/&gt;
 &lt;/svg&gt;
 </pre></li></ul></li></ol>
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_shape.html</a></li>
- </ul>  
-       
+ </ul>
+
 <h2 id="group" name="group">Grouping SVG Elements</h2>
-       
-<p>To group inline SVG elements:</p> 
- 
+
+<p>To group inline SVG elements:</p>
+
 <ol>
 <li><p>Combine various SVG elements in a group using the <code>&lt;g&gt;</code> container element, whose <code>id</code> attribute must be defined.</p>
 <p>If you assign a presentation attribute to the group, all the child elements inherit it. For example, in the example below, the stroke color black is defined for the group, which means that both the rectangle and circle elements within the group use the black stroke color.</p>
 
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;600px&quot; height=&quot;600px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;g id=&quot;shape-group&quot; stroke=&quot;black&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;desc&gt;Shape Group&lt;/desc&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;rect x=&quot;0.5&quot; y=&quot;0.5&quot;  fill=&quot;blue&quot;  width=&quot;275&quot; height=&quot;168&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;circle fill=&quot;red&quot; stroke-width=&quot;4&quot; cx=&quot;245&quot; cy=&quot;159&quot; r=&quot;93&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/g&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="600px" height="600px"&gt;
+   &lt;g id="shape-group" stroke="black"&gt;
+      &lt;desc&gt;Shape Group&lt;/desc&gt;
+      &lt;rect x="0.5" y="0.5"  fill="blue"  width="275" height="168"/&gt;
+      &lt;circle fill="red" stroke-width="4" cx="245" cy="159" r="93"/&gt;
+   &lt;/g&gt;
 </pre></li>
 <li>
 <p>You can reference the group using the <code>id</code> attribute:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&lt;use xlink:href=&quot;#shape-group&quot; x=&quot;20&quot; y=&quot;40&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;use xlink:href=&quot;#shape-group&quot; x=&quot;40&quot; y=&quot;60&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;use xlink:href=&quot;#shape-group&quot; x=&quot;60&quot; y=&quot;80&quot;/&gt;
+   &lt;use xlink:href="#shape-group" x="20" y="40"/&gt;
+   &lt;use xlink:href="#shape-group" x="40" y="60"/&gt;
+   &lt;use xlink:href="#shape-group" x="60" y="80"/&gt;
 &lt;/svg&gt;
 </pre></li>
 
 <li><p>If you have multiple groups, use the <code>&lt;defs&gt;</code> element as a container for them:</p>
 
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;600px&quot; height=&quot;600px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;defs&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;g id=&quot;shape-group&quot; stroke=&quot;black&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;desc&gt;Shape Group 1&lt;/desc&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;rect x=&quot;0.5&quot; y=&quot;0.5&quot;  fill=&quot;blue&quot;  width=&quot;275&quot; height=&quot;168&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;circle fill=&quot;red&quot; stroke-width=&quot;4&quot; cx=&quot;245&quot; cy=&quot;159&quot; r=&quot;93&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/g&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;g id=&quot;shape-group2&quot; stroke=&quot;black&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;desc&gt;Shape Group 2&lt;/desc&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;rect x=&quot;0.5&quot; y=&quot;0.5&quot;  fill=&quot;red&quot;  width=&quot;275&quot; height=&quot;168&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;circle fill=&quot;blue&quot; stroke-width=&quot;4&quot; cx=&quot;245&quot; cy=&quot;159&quot; r=&quot;93&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/g&gt;
-&nbsp;&nbsp;&nbsp;&lt;/defs&gt;
-&nbsp;&nbsp;&nbsp;&lt;g&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;desc&gt;Shape Group 3&lt;/desc&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;use xlink:href=&quot;#shape-group&quot; x=&quot;60&quot; y=&quot;80 &quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;use xlink:href=&quot;#shape-group2&quot; transform=&quot;rotate(40)&quot; x=&quot;120&quot; y=&quot;70&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;use xlink:href=&quot;#shape-group&quot; transform=&quot;rotate(15)&quot; x=&quot;190&quot; y=&quot;120&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;use xlink:href=&quot;#shape-group2&quot; transform=&quot;rotate(20)&quot; x=&quot;120&quot; y=&quot;70&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/g&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="600px" height="600px"&gt;
+   &lt;defs&gt;
+      &lt;g id="shape-group" stroke="black"&gt;
+         &lt;desc&gt;Shape Group 1&lt;/desc&gt;
+         &lt;rect x="0.5" y="0.5"  fill="blue"  width="275" height="168"/&gt;
+         &lt;circle fill="red" stroke-width="4" cx="245" cy="159" r="93"/&gt;
+      &lt;/g&gt;
+      &lt;g id="shape-group2" stroke="black"&gt;
+         &lt;desc&gt;Shape Group 2&lt;/desc&gt;
+         &lt;rect x="0.5" y="0.5"  fill="red"  width="275" height="168"/&gt;
+         &lt;circle fill="blue" stroke-width="4" cx="245" cy="159" r="93"/&gt;
+      &lt;/g&gt;
+   &lt;/defs&gt;
+   &lt;g&gt;
+      &lt;desc&gt;Shape Group 3&lt;/desc&gt;
+      &lt;use xlink:href="#shape-group" x="60" y="80 "/&gt;
+      &lt;use xlink:href="#shape-group2" transform="rotate(40)" x="120" y="70"/&gt;
+      &lt;use xlink:href="#shape-group" transform="rotate(15)" x="190" y="120"/&gt;
+      &lt;use xlink:href="#shape-group2" transform="rotate(20)" x="120" y="70"/&gt;
+   &lt;/g&gt;
 &lt;/svg&gt;
 </pre></li></ol>
 <h3>Source Code</h3>
        <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_group.html</a></li>
- </ul>  
-       
+ </ul>
+
 <h2 id="animate" name="animate">Animating SVG Elements</h2>
-       
-<p>To animate inline SVG elements:</p> 
- 
+
+<p>To animate inline SVG elements:</p>
+
 <ol>
 <li>
 <p>To animate a specific element attribute based on time, use the <code>&lt;animate&gt;</code> element:</p>
 
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;300px&quot; height=&quot;200px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;rect x=&quot;1&quot; y=&quot;1&quot; width=&quot;120&quot; height=&quot;40&quot; fill=&quot;blue&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stroke=&quot;red&quot; stroke-width=&quot;2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;animate attributeName=&quot;width&quot; to=&quot;300&quot; dur=&quot;5s&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;repeatCount=&quot;1&quot; fill=&quot;remove&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/rect&gt;
-&nbsp;&nbsp;&nbsp;&lt;rect x=&quot;1&quot; y=&quot;50&quot; width=&quot;120&quot; height=&quot;40&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill=&quot;blue&quot; stroke=&quot;red&quot; stroke-width=&quot;2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;animate attributeName=&quot;width&quot; to=&quot;300&quot; dur=&quot;5s&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;repeatCount=&quot;1&quot; fill=&quot;freeze&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/rect&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+   &lt;rect x="1" y="1" width="120" height="40" fill="blue"
+         stroke="red" stroke-width="2"&gt;
+      &lt;animate attributeName="width" to="300" dur="5s"
+               repeatCount="1" fill="remove"/&gt;
+   &lt;/rect&gt;
+   &lt;rect x="1" y="50" width="120" height="40"
+         fill="blue" stroke="red" stroke-width="2"&gt;
+      &lt;animate attributeName="width" to="300" dur="5s"
+               repeatCount="1" fill="freeze"/&gt;
+   &lt;/rect&gt;
 &lt;/svg&gt;
 </pre></li>
 
 <li><p>To change the (fill or line) color of the element, use the <code>&lt;animateColor&gt;</code> element:</p>
 
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;300px&quot; height=&quot;200px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;rect x=&quot;1&quot; y=&quot;1&quot; width=&quot;120&quot; height=&quot;40&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill=&quot;blue&quot; stroke=&quot;red&quot; stroke-width=&quot;2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;animateColor to=&quot;red&quot; attributeName=&quot;fill&quot; dur=&quot;5s&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;repeatCount=&quot;indefinite&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/rect&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+   &lt;rect x="1" y="1" width="120" height="40"
+         fill="blue" stroke="red" stroke-width="2"&gt;
+      &lt;animateColor to="red" attributeName="fill" dur="5s"
+                    repeatCount="indefinite"/&gt;
+   &lt;/rect&gt;
 &lt;/svg&gt;
 </pre></li>
 
 <li><p>To create a motion animation, use the <code>&lt;animateMotion&gt;</code> element. The element assigns the parent element to the <code>&lt;mpath&gt;</code> as reference element, and animates according to the shape of the <code>&lt;mpath&gt;</code> element.</p>
 
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;300px&quot; height=&quot;200px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;path d=&quot;M-12.5, -6.75 L12.5, -6.75 L0, -43.75 z&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill=&quot;blue&quot; stroke=&quot;gray&quot; stroke-width=&quot;3&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;animateMotion dur=&quot;6s&quot; repeatCount=&quot;indefinite&quot; rotate=&quot;auto&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mpath xlink:href=&quot;#path1&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/animateMotion&gt;
-&nbsp;&nbsp;&nbsp;&lt;/path&gt;
-&nbsp;&nbsp;&nbsp;&lt;path id=&quot;path1&quot; d=&quot;M25, 100 Q50, 20 75, 70 T135, 70 T185, 70 T235, 70 T275, 70&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill=&quot;none&quot; stroke=&quot;blue&quot; stroke-width=&quot;3&quot;/&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+   &lt;path d="M-12.5, -6.75 L12.5, -6.75 L0, -43.75 z"
+         fill="blue" stroke="gray" stroke-width="3"&gt;
+      &lt;animateMotion dur="6s" repeatCount="indefinite" rotate="auto"&gt;
+         &lt;mpath xlink:href="#path1"/&gt;
+      &lt;/animateMotion&gt;
+   &lt;/path&gt;
+   &lt;path id="path1" d="M25, 100 Q50, 20 75, 70 T135, 70 T185, 70 T235, 70 T275, 70"
+         fill="none" stroke="blue" stroke-width="3"/&gt;
 &lt;/svg&gt;
 </pre></li></ol>
        <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_animation.html</a></li>
- </ul>  
-       
+ </ul>
+
 <h2 id="control" name="control">Controlling SVG Elements through Scripting</h2>
-       
+
 <p>To use scripts to manage events related to SVG elements:</p>
- 
+
 <ol>
 <li>Define an SVG element:
 <pre class="prettyprint">
-&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;300px&quot; height=&quot;200px&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;rect x=&quot;1&quot; y=&quot;1&quot; width=&quot;120&quot; height=&quot;40&quot; fill=&quot;blue&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stroke=&quot;red&quot; stroke-width=&quot;2&quot;/&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+   &lt;rect x="1" y="1" width="120" height="40" fill="blue"
+         stroke="red" stroke-width="2"/&gt;
 &lt;/svg&gt;
 </pre></li>
 
 <li><p>Use the <code>&lt;script&gt;</code> element to handle events related to the SVG elements.</p>
-<p>The script usage is similar to handling DOM as a script. The following example controls the SVG element&#39;s <code>width</code> attribute through the click event.  
+<p>The script usage is similar to handling DOM as a script. The following example controls the SVG element's <code>width</code> attribute through the click event.
 </p>
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var rectElemt = document.getElementById(&#39;rect&#39;)
-&nbsp;&nbsp;&nbsp;rectElemt].addEventListener(&#39;click&#39;, rect_click);
-
-&nbsp;&nbsp;&nbsp;function rect_click(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var target = event.target
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var targetWidth = target.getAttribute(&quot;width&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (targetWidth == 120)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.setAttribute(&quot;width&quot;, targetWidth * 2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.setAttribute(&quot;width&quot;, targetWidth * 0.5);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;};
+   var rectElemt = document.getElementById('rect')
+   rectElemt].addEventListener('click', rect_click);
+
+   function rect_click(event)
+   {
+      var target = event.target
+      var targetWidth = target.getAttribute("width");
+      if (targetWidth == 120)
+      {
+         target.setAttribute("width", targetWidth * 2);
+      }
+      else
+      {
+         target.setAttribute("width", targetWidth * 0.5);
+      };
+   };
 &lt;/script&gt;
 </pre></li></ol>
        <h3>Source Code</h3>
@@ -294,7 +294,7 @@
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_script.html</a></li>
  </ul>
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/graphics/task_basicwatch_w.htm b/org.tizen.guides/html/web/w3c/graphics/task_basicwatch_w.htm
index 8a05f02..f60dff2 100644 (file)
--- a/org.tizen.guides/html/web/w3c/graphics/task_basicwatch_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/task_basicwatch_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: Basic Watch</title>  
+       <title>Task: Basic Watch</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -38,93 +38,93 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Watch/Basic_Watch" target="_blank">Basic Watch Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
 <h1>Task: Basic Watch</h1>
-  
-<p>This task, based on the BasicWatch sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context</a> API to create an analog watch on a canvas. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Watch/Basic_Watch" target="blank">Basic Watch</a>.</p>  
 
-  <p>This task consists of the following parts:</p> 
-  <ul> 
+<p>This task, based on the BasicWatch sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context</a> API to create an analog watch on a canvas. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Watch/Basic_Watch" target="blank">Basic Watch</a>.</p>
+
+  <p>This task consists of the following parts:</p>
+  <ul>
     <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
     <li><a href="#initialize">Initializing the Application</a> defines how to initialize the application.</li>
     <li><a href="#time">Displaying the Time</a> defines how to show the clock needles on the watch canvas in a correct location.</li>
-  </ul> 
-  <p>This sample is a fully functional application for displaying a clock on a canvas.</p> 
+  </ul>
+  <p>This sample is a fully functional application for displaying a clock on a canvas.</p>
 
 <h2 id="layout" name="layout">Defining the Application Layout</h2>
- 
- <p>The BasicWatch sample application layout contains only 1 screen: the main screen that displays the clock.</p> 
- 
-  <p>The following figure shows the main screen of the application.</p> 
-  <p align="center"><strong>Figure: BasicWatch screen</strong></p> 
+
+ <p>The BasicWatch sample application layout contains only 1 screen: the main screen that displays the clock.</p>
+
+  <p>The following figure shows the main screen of the application.</p>
+  <p align="center"><strong>Figure: BasicWatch screen</strong></p>
   <p align="center"><img alt="BasicWatch screen" src="../../../images/basicwatch_sd.png" /></p>
- 
-  <h3 id="main" name="main">Defining the Main Screen</h3> 
-  <ol> 
-   <li><strong>index.html Source File</strong> 
+
+  <h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol>
+   <li><strong>index.html Source File</strong>
  <p>The main screen displays a <a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element" target="_blank">canvas</a> element on which the watch face and needles are placed.</p>
 
 <pre class="prettyprint lang-html">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;title&gt;Canvas Clock - Canvas API Tutorial&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
+   &lt;title&gt;Canvas Clock - Canvas API Tutorial&lt;/title&gt;
+   &lt;link rel="stylesheet" type="text/css" href="css/style.css"/&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;canvas class=&quot;canvas&quot;&gt;&lt;/canvas&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
+   &lt;canvas class="canvas"&gt;&lt;/canvas&gt;
+   &lt;script src="js/main.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
 </pre> </li>
 <li><strong>main.js Source File</strong>
 <ol type="a">
- <li>   
-<p>Create the clock in the middle of the canvas. Define the watch face style.</p>  
+ <li>
+<p>Create the clock in the middle of the canvas. Define the watch face style.</p>
 <pre class="prettyprint">
 function renderDots()
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
 
-&nbsp;&nbsp;&nbsp;var dx = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angle = null;
+   var dx = 0,
+       dy = 0,
+       i = 1,
+       angle = null;
 
-&nbsp;&nbsp;&nbsp;context.save();
-&nbsp;&nbsp;&nbsp;context.translate(canvas.width / 2, canvas.height / 2);
-&nbsp;&nbsp;&nbsp;context.beginPath();
-&nbsp;&nbsp;&nbsp;context.fillStyle = &#39;#999999&#39;;
+   context.save();
+   context.translate(canvas.width / 2, canvas.height / 2);
+   context.beginPath();
+   context.fillStyle = '#999999';
 </pre></li>
 <li><p>Create 4 dots on the sides of the watch face and use the <code>fill()</code> method to style the dots.</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;for (i = 1; i &lt;= 4; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angle = (i - 3) * (Math.PI * 2) / 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = clockRadius * 0.9 * Math.cos(angle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = clockRadius * 0.9 * Math.sin(angle);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.arc(dx, dy, 3, 0, 2 * Math.PI, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.fill();
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;context.closePath();
+   for (i = 1; i &lt;= 4; i++)
+   {
+      angle = (i - 3) * (Math.PI * 2) / 4;
+      dx = clockRadius * 0.9 * Math.cos(angle);
+      dy = clockRadius * 0.9 * Math.sin(angle);
+
+      context.arc(dx, dy, 3, 0, 2 * Math.PI, false);
+      context.fill();
+   }
+   context.closePath();
 </pre></li>
- 
+
 <li>
 <p>Create the center point.</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;context.beginPath();
+   context.beginPath();
 
-&nbsp;&nbsp;&nbsp;context.fillStyle = &#39;#ff9000&#39;;
-&nbsp;&nbsp;&nbsp;context.strokeStyle = &#39;#fff&#39;;
-&nbsp;&nbsp;&nbsp;context.lineWidth = 4;
+   context.fillStyle = '#ff9000';
+   context.strokeStyle = '#fff';
+   context.lineWidth = 4;
 
-&nbsp;&nbsp;&nbsp;context.arc(0, 0, 7, 0, 2 * Math.PI, false);
-&nbsp;&nbsp;&nbsp;context.fill();
-&nbsp;&nbsp;&nbsp;context.stroke();
-&nbsp;&nbsp;&nbsp;context.closePath();
+   context.arc(0, 0, 7, 0, 2 * Math.PI, false);
+   context.fill();
+   context.stroke();
+   context.closePath();
 }
 </pre></li></ol></li></ol>
 
@@ -135,29 +135,29 @@ function renderDots()
    <p>Define the application category.</p>
 
 <pre class="prettyprint">
-&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot;/&gt;
+&lt;tizen:category name="http://tizen.org/category/wearable_clock"/&gt;
 </pre>
 
 <div class="note">
        <strong>Note</strong>
-       To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <code>&lt;tizen:category name=&quot;com.samsung.wmanager.WATCH_CLOCK&quot;/&gt;</code> instead of <code>&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot;/&gt;</code>.
+       To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <code>&lt;tizen:category name="com.samsung.wmanager.WATCH_CLOCK"/&gt;</code> instead of <code>&lt;tizen:category name="http://tizen.org/category/wearable_clock"/&gt;</code>.
 </div>
-  </li>  
+  </li>
   <li><strong>main.js Source File</strong>
    <ol type="a">
     <li>
      <p>Modify the <code>window.requestAnimationFrame()</code> method to make the application compatible with the main browsers.</p>
 <pre class="prettyprint">
 window.requestAnimationFrame = window.requestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;window.webkitRequestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;window.mozRequestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;window.oRequestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;window.msRequestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;function(callback)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.setTimeout(callback, 1000 / 60);
-&nbsp;&nbsp;&nbsp;};
+   window.webkitRequestAnimationFrame ||
+   window.mozRequestAnimationFrame ||
+   window.oRequestAnimationFrame ||
+   window.msRequestAnimationFrame ||
+   function(callback)
+   {
+      'use strict';
+      window.setTimeout(callback, 1000 / 60);
+   };
 </pre>
     </li>
     <li>
@@ -165,28 +165,28 @@ window.requestAnimationFrame = window.requestAnimationFrame ||
 <pre class="prettyprint">
 window.onload = function()
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
 
-&nbsp;&nbsp;&nbsp;canvas = document.querySelector(&#39;canvas&#39;);
-&nbsp;&nbsp;&nbsp;context = canvas.getContext(&#39;2d&#39;);
-&nbsp;&nbsp;&nbsp;clockRadius = document.width / 2;
+   canvas = document.querySelector('canvas');
+   context = canvas.getContext('2d');
+   clockRadius = document.width / 2;
 
-&nbsp;&nbsp;&nbsp;canvas.width = document.width;
-&nbsp;&nbsp;&nbsp;canvas.height = canvas.width;
+   canvas.width = document.width;
+   canvas.height = canvas.width;
 </pre>
     </li>
     <li>
      <p>Define an event listener to detect back key events.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.keyName == &#39;back&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;window.requestAnimationFrame(watch);
+   window.addEventListener('tizenhwkey', function(e)
+      {
+         if (e.keyName == 'back')
+         {
+            tizen.application.getCurrentApplication().exit();
+         }
+      });
+
+   window.requestAnimationFrame(watch);
 };
 </pre>
     </li>
@@ -195,31 +195,31 @@ window.onload = function()
  </ol>
 
 <h2 id="time" name="time">Displaying the Time</h2>
- 
-<p>This section builds upon the elements described in <a href="canvas_w.htm#text">Creating Text and Lines on the Canvas</a>.</p> 
+
+<p>This section builds upon the elements described in <a href="canvas_w.htm#text">Creating Text and Lines on the Canvas</a>.</p>
 
 
 <h3 id="needle" name="needle">Creating the Clock Needles</h3>
 The clock needles are rendered in the <code>main.js</code> file.
-  <ol> 
+  <ol>
    <li><strong>Rendering the Clock Needles</strong>
 <p>The needles can be created using the <code>renderNeedle()</code> method.</p>
    <p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <code>moveTo()</code> method. To assign the rest of the points of the triangle or polygon, use the <code>lineTo()</code> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <code>lineTo()</code> method.</p>
 <pre class="prettyprint">
 function renderNeedle(angle, radius)
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-&nbsp;&nbsp;&nbsp;context.save();
-&nbsp;&nbsp;&nbsp;context.rotate(angle);
-&nbsp;&nbsp;&nbsp;context.beginPath();
-&nbsp;&nbsp;&nbsp;context.lineWidth = 4;
-&nbsp;&nbsp;&nbsp;context.strokeStyle = &#39;#fff&#39;;
-&nbsp;&nbsp;&nbsp;context.moveTo(6, 0);
-&nbsp;&nbsp;&nbsp;context.lineTo(radius, 0);
-&nbsp;&nbsp;&nbsp;context.closePath();
-&nbsp;&nbsp;&nbsp;context.stroke();
-&nbsp;&nbsp;&nbsp;context.closePath();
-&nbsp;&nbsp;&nbsp;context.restore();
+   'use strict';
+   context.save();
+   context.rotate(angle);
+   context.beginPath();
+   context.lineWidth = 4;
+   context.strokeStyle = '#fff';
+   context.moveTo(6, 0);
+   context.lineTo(radius, 0);
+   context.closePath();
+   context.stroke();
+   context.closePath();
+   context.restore();
 }
 </pre></li>
    <li><strong>Creating the Hour Needle</strong>
@@ -227,14 +227,14 @@ function renderNeedle(angle, radius)
 <pre class="prettyprint">
 function renderHourNeedle(hour)
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
 
-&nbsp;&nbsp;&nbsp;var angle = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radius = null;
+   var angle = null,
+       radius = null;
 
-&nbsp;&nbsp;&nbsp;angle = (hour - 3) * (Math.PI * 2) / 12;
-&nbsp;&nbsp;&nbsp;radius = clockRadius * 0.55;
-&nbsp;&nbsp;&nbsp;renderNeedle(angle, radius);
+   angle = (hour - 3) * (Math.PI * 2) / 12;
+   radius = clockRadius * 0.55;
+   renderNeedle(angle, radius);
 }
 </pre></li>
    <li><strong>Creating the Minute Needle</strong>
@@ -242,55 +242,55 @@ function renderHourNeedle(hour)
 <pre class="prettyprint">
 function renderMinuteNeedle(minute)
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
 
-&nbsp;&nbsp;&nbsp;var angle = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radius = null;
+   var angle = null,
+       radius = null;
 
-&nbsp;&nbsp;&nbsp;angle = (minute - 15) * (Math.PI * 2) / 60;
-&nbsp;&nbsp;&nbsp;radius = clockRadius * 0.75;
-&nbsp;&nbsp;&nbsp;renderNeedle(angle, radius);
+   angle = (minute - 15) * (Math.PI * 2) / 60;
+   radius = clockRadius * 0.75;
+   renderNeedle(angle, radius);
 }
 </pre></li>
 </ol>
 
 <h3 id="current" name="current">Indicating the Current Time</h3>
 <p>The time displaying functionality is implemented in the <code>main.js</code> file.</p>
-  <ol> 
-   <li><strong>Determining the Time</strong>     
+  <ol>
+   <li><strong>Determining the Time</strong>
 <p>Use the <code>new Date()</code> method to find out the current time. To point the needles accurately, define variables for the current hour and minute.</p>
 
 <pre class="prettyprint">
 function watch()
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-
-&nbsp;&nbsp;&nbsp;var date = new Date(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hours = date.getHours(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minutes = date.getMinutes(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seconds = date.getSeconds(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hour = hours + minutes / 60,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minute = minutes + seconds / 60;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nextMove = 1000 - date.getMilliseconds();
+   'use strict';
+
+   var date = new Date(),
+       hours = date.getHours(),
+       minutes = date.getMinutes(),
+       seconds = date.getSeconds(),
+       hour = hours + minutes / 60,
+       minute = minutes + seconds / 60;
+       nextMove = 1000 - date.getMilliseconds();
 </pre></li>
 <li><strong>Erasing the Previous Time</strong>
 <p>Use the <code>clearRect()</code> method to delete the previous time (the previously positioned needles) every time a new time is indicated. </p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+   context.clearRect(0, 0, context.canvas.width, context.canvas.height);
 </pre></li>
 <li><strong>Pointing the Clock Needles</strong>
 <p>Display the current time.</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;renderDots();
-&nbsp;&nbsp;&nbsp;renderHourNeedle(hour);
-&nbsp;&nbsp;&nbsp;renderMinuteNeedle(minute);
-
-&nbsp;&nbsp;&nbsp;context.restore();
-&nbsp;&nbsp;&nbsp;setTimeout(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.requestAnimationFrame(watch);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, nextMove);
+   renderDots();
+   renderHourNeedle(hour);
+   renderMinuteNeedle(minute);
+
+   context.restore();
+   setTimeout(function()
+      {
+         window.requestAnimationFrame(watch);
+      }, nextMove);
 }
 </pre></li></ol>
 
diff --git a/org.tizen.guides/html/web/w3c/location/geolocation_w.htm b/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
index 4287c89..6cc8d21 100644 (file)
--- a/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
+++ b/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
@@ -48,7 +48,7 @@
 
  <p>This feature is supported in mobile and wearable applications only.</p>
 
-<p>Using the <code>Geolocation</code> interface, you can <a href="#Retrieving_Location_Info">retrieve position information</a> with &quot;one-shot&quot; position requests (with the <code>getCurrentPosition()</code> method) or repeated position updates (with the <code>watchPosition()</code> method). Both methods take the following parameters:</p>
+<p>Using the <code>Geolocation</code> interface, you can <a href="#Retrieving_Location_Info">retrieve position information</a> with "one-shot" position requests (with the <code>getCurrentPosition()</code> method) or repeated position updates (with the <code>watchPosition()</code> method). Both methods take the following parameters:</p>
 <ul>
 <li>Success event handler, which is a function invoked when an attempt to obtain the current location is successful.</li>
 <li>Error event handler, which is a function invoked when an attempt to obtain the current location fails (optional).</li>
@@ -70,54 +70,54 @@
 
    <p>To provide users with location-based features, you must learn to create a mobile GPS application to retrieve location information:</p>
    <ol>
-    <li>Create event handlers for the location requests. 
-               <p>The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface allows 2 types of location requests: &quot;one-shot&quot; position request and repeated position updates. Both request types use the same event handlers. The success event handler is invoked when an attempt to obtain the current location is successful, while the error event handler is invoked when the attempt fails. The success event handler is mandatory, and contains a <code>position</code> parameter that hold the actual position information.</p>
+    <li>Create event handlers for the location requests.
+               <p>The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface allows 2 types of location requests: "one-shot" position request and repeated position updates. Both request types use the same event handlers. The success event handler is invoked when an attempt to obtain the current location is successful, while the error event handler is invoked when the attempt fails. The success event handler is mandatory, and contains a <code>position</code> parameter that hold the actual position information.</p>
 
 <pre class="prettyprint">
 function successCallback(position)
 {
-&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Latitude: &quot; + position.coords.latitude
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;&lt;br/&gt;Longitude: &quot; + position.coords.longitude;
+   document.getElementById("locationInfo").innerHTML =
+      "Latitude: " + position.coords.latitude
+      + "&lt;br/&gt;Longitude: " + position.coords.longitude;
 }
 
 function errorCallback(error)
 {
-&nbsp;&nbsp;&nbsp;var errorInfo = document.getElementById(&quot;locationInfo&quot;);
-
-&nbsp;&nbsp;&nbsp;switch (error.code)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.PERMISSION_DENIED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;User denied the request for Geolocation.&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.POSITION_UNAVAILABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;Location information is unavailable.&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.TIMEOUT:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;The request to get user location timed out.&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case error.UNKNOWN_ERROR:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorInfo.innerHTML = &quot;An unknown error occurred.&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;}
+   var errorInfo = document.getElementById("locationInfo");
+
+   switch (error.code)
+   {
+      case error.PERMISSION_DENIED:
+         errorInfo.innerHTML = "User denied the request for Geolocation.";
+         break;
+      case error.POSITION_UNAVAILABLE:
+         errorInfo.innerHTML = "Location information is unavailable.";
+         break;
+      case error.TIMEOUT:
+         errorInfo.innerHTML = "The request to get user location timed out.";
+         break;
+      case error.UNKNOWN_ERROR:
+         errorInfo.innerHTML = "An unknown error occurred.";
+         break;
+   }
 }
 </pre>
        </li>
-       <li>Create a &quot;one-shot&quot; position request with the <code>getCurrentPosition()</code> method.
+       <li>Create a "one-shot" position request with the <code>getCurrentPosition()</code> method.
                <p>The <code>maximumAge</code> parameter determines that if the user agent does not have cached position information that is fresher than 60000 milliseconds (1 minute), new location information is automatically obtained.</p>
 <pre class="prettyprint">
 function oneShotFunc()
 {
-&nbsp;&nbsp;&nbsp;if (navigator.geolocation)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{maximumAge: 60000});
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Geolocation is not supported.&quot;;
-&nbsp;&nbsp;&nbsp;}
+   if (navigator.geolocation)
+   {
+      navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
+                                               {maximumAge: 60000});
+   }
+   else
+   {
+      document.getElementById("locationInfo").innerHTML =
+         "Geolocation is not supported.";
+   }
 }
 </pre>
                <p>If you do not want to wait for new position information, but are willing to use cached information regardless of how old it is, you can use the <code>maximumAge</code> and <code>timeout</code> parameters together (<code>{maximumAge: Infinity, timeout: 0}</code>). In this case, if the user agent has no position information cached, it automatically invokes the error event handler.</p>
@@ -127,15 +127,15 @@ function oneShotFunc()
 <pre class="prettyprint">
 function watchFunc()
 {
-&nbsp;&nbsp;&nbsp;if (navigator.geolocation)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Geolocation is not supported.&quot;;
-&nbsp;&nbsp;&nbsp;}
+   if (navigator.geolocation)
+   {
+      watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
+   }
+   else
+   {
+      document.getElementById("locationInfo").innerHTML =
+         "Geolocation is not supported.";
+   }
 }
 </pre>
        </li>
@@ -143,22 +143,22 @@ function watchFunc()
 <pre class="prettyprint">
 function stopWatchFunc()
 {
-&nbsp;&nbsp;&nbsp;if (navigator.geolocation)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.geolocation.clearWatch(watchId);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;locationInfo&quot;).innerHTML =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;Geolocation is not supported.&quot;;
-&nbsp;&nbsp;&nbsp;}
+   if (navigator.geolocation)
+   {
+      navigator.geolocation.clearWatch(watchId);
+   }
+   else
+   {
+      document.getElementById("locationInfo").innerHTML =
+         "Geolocation is not supported.";
+   }
 }
 </pre>
        </li>
    </ol>
 
    <p>The following figure illustrates the GPS application.</p>
-   <p align="center"><strong>Figure: GPS application (in mobile applications only)</strong></p> 
+   <p align="center"><strong>Figure: GPS application (in mobile applications only)</strong></p>
    <p align="center"><img alt="GPS application (in mobile applications only)" src="../../../images/geolocation.png" /></p>
 
   <h3>Source Code</h3>
diff --git a/org.tizen.guides/html/web/w3c/location/location_guide_w.htm b/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
index 2f33467..518f7d0 100644 (file)
--- a/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
@@ -45,7 +45,7 @@
        <li><a href="geolocation_w.htm">Geolocation API Specification</a>
        <p>Allows you to determine the geographical position of a mobile device using various positioning methods, such as the Global Positioning System (GPS) and network positioning system.</p></li>
   </ul>
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
index 29b4a63..f3eaac5 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
@@ -70,18 +70,18 @@
 <li>Create the HTML5 video element (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#video">wearable</a> applications) and a button used to control audio stream access:\r
 <pre class="prettyprint">\r
 &lt;body&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;videoPlay&quot; src=&quot;&quot; autoplay controls &gt;&lt;/video&gt;&lt;br/&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; value=&quot;START&quot; onclick=&quot;getVideoStream();&quot; id=&quot;btnStart&quot;/&gt;\r
+   &lt;video id="videoPlay" src="" autoplay controls &gt;&lt;/video&gt;&lt;br/&gt;\r
+   &lt;input type="button" value="START" onclick="getVideoStream();" id="btnStart"/&gt;\r
 &lt;/body&gt;\r
 </pre>\r
 </li>\r
 <li>Use the <code>navigator.webkitGetUserMedia()</code> method to derive audio streams:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;function getVideoStream()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.webkitGetUserMedia({video: true}, successCallBack, errorCallBack);\r
-&nbsp;&nbsp;&nbsp;}\r
+   function getVideoStream()\r
+   {\r
+      navigator.webkitGetUserMedia({video: true}, successCallBack, errorCallBack);\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
 \r
@@ -91,11 +91,11 @@
  <li>Retrieve audio stream information and create stream URL: \r
 <pre class="prettyprint">\r
 &lt;script>\r
-&nbsp;&nbsp;&nbsp;function SuccessCallback(stream)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var URL = window.webkitURL;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;videoPlay&quot;).src = URL.createObjectURL(stream);\r
-&nbsp;&nbsp;&nbsp;}\r
+   function SuccessCallback(stream)\r
+   {\r
+      var URL = window.webkitURL;\r
+      document.getElementById("videoPlay").src = URL.createObjectURL(stream);\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
  </li>\r
@@ -114,13 +114,13 @@
 \r
 <pre class="prettyprint">\r
 &lt;body&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;videoView&quot; src=&quot;&quot; autoplay&gt;&lt;/video&gt;&lt;br/&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;img id=&quot;imgView&quot; src=&quot;&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;canvas id=&quot;canvasView&quot; style=&quot;display: none;&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;300&quot; height=&quot;225&quot;&gt;&lt;/canvas&gt;&lt;br/&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; value=&quot;WebCamStart&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;getVideoStream();&quot; id=&quot;btnPlay&quot;/&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; value=&quot;Capture&quot; onclick=&quot;getCapture();&quot; id=&quot;btnCapture&quot;/&gt;\r
+   &lt;video id="videoView" src="" autoplay&gt;&lt;/video&gt;&lt;br/&gt;\r
+   &lt;img id="imgView" src=""&gt;\r
+   &lt;canvas id="canvasView" style="display: none;"\r
+           width="300" height="225"&gt;&lt;/canvas&gt;&lt;br/&gt;\r
+   &lt;input type="button" value="WebCamStart"\r
+          onclick="getVideoStream();" id="btnPlay"/&gt;\r
+   &lt;input type="button" value="Capture" onclick="getCapture();" id="btnCapture"/&gt;\r
 &lt;/body&gt;\r
 </pre>\r
 </li>\r
@@ -128,20 +128,20 @@
 <li><p>Enable rendering of the retrieved media stream by calling the <code>webkitGetUserMedia()</code> method:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;function getVideoStream()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigator.webkitGetUserMedia({video: true}, SuccessCallBack, ErrorCallBack);\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;function SuccessCallBack(stream)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var URL = window.webkitURL;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;videoView&quot;).src = URL.createObjectURL(stream);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localStream = stream;\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;function ErrorCallBack(e)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */\r
-&nbsp;&nbsp;&nbsp;}\r
+   function getVideoStream()\r
+   {\r
+      navigator.webkitGetUserMedia({video: true}, SuccessCallBack, ErrorCallBack);\r
+   }\r
+   function SuccessCallBack(stream)\r
+   {\r
+      var URL = window.webkitURL;\r
+      document.getElementById("videoView").src = URL.createObjectURL(stream);\r
+      localStream = stream;\r
+   }\r
+   function ErrorCallBack(e)\r
+   {\r
+      /* Error handling */\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
 </li>\r
@@ -149,18 +149,18 @@
 <li><p>Display the captured frame in a <a href="video_audio_w.htm">video</a>  element using the <code>drawImage()</code> method: </p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var localStream = &quot;&quot;;\r
-&nbsp;&nbsp;&nbsp;function getCapture()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (localStream)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(&quot;canvasView&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var context = canvas.getContext(&#39;2d&#39;);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.drawImage(document.getElementById(&quot;videoView&quot;), 0, 0, 300, 225);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;imgView&quot;).src = canvas.toDataURL(&#39;image/web&#39;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;}\r
+   var localStream = "";\r
+   function getCapture()\r
+   {\r
+      if (localStream)\r
+      {\r
+         var canvas = document.getElementById("canvasView");\r
+         var context = canvas.getContext('2d');\r
+\r
+         context.drawImage(document.getElementById("videoView"), 0, 0, 300, 225);\r
+         document.getElementById("imgView").src = canvas.toDataURL('image/web');\r
+      }\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
 </li>\r
diff --git a/org.tizen.guides/html/web/w3c/media/media_capture_w.htm b/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
index 32fc8ff..0cb4837 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
@@ -59,7 +59,7 @@
 </p>\r
 \r
 <pre class="prettyprint">\r
-&lt;input type=&quot;file&quot; capture=&quot;filesystem&quot;/&gt;\r
+&lt;input type="file" capture="filesystem"/&gt;\r
 </pre>\r
 \r
 <p align="center"><img alt="File types" src="../../../images/media_capture_file_types.png" /></p>\r
@@ -68,9 +68,9 @@
 <p>Assign format, such as <code>filesystem</code>, <code>camera</code>, or <code>camcorder</code>:</p>\r
 \r
 <pre class="prettyprint">\r
-&lt;input type=&quot;file&quot; accept=&quot;audio/*&quot; capture=&quot;camera&quot;/&gt;\r
-&lt;input type=&quot;file&quot; accept=&quot;image/*&quot; capture=&quot;camcorder&quot;/&gt;\r
-&lt;input type=&quot;file&quot; accept=&quot;video/*&quot; capture=&quot;microphone&quot;/&gt;\r
+&lt;input type="file" accept="audio/*" capture="camera"/&gt;\r
+&lt;input type="file" accept="image/*" capture="camcorder"/&gt;\r
+&lt;input type="file" accept="video/*" capture="microphone"/&gt;\r
 </pre>\r
 \r
 <p>\r
diff --git a/org.tizen.guides/html/web/w3c/media/task_piano_w.htm b/org.tizen.guides/html/web/w3c/media/task_piano_w.htm
index 4409f9f..f18a34b 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/task_piano_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/task_piano_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: Piano</title>  
+       <title>Task: Piano</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -39,52 +39,52 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Multimedia/Piano" target="_blank">Piano Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>Task: Piano</h1> 
-  <p>This task, based on the Piano sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element</a> API to create a piano application and play sounds. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Multimedia/Piano" target="blank">Piano</a>.</p> 
-  
-  <p>This task consists of the following parts:</p> 
-  <ul> 
+  <h1>Task: Piano</h1>
+  <p>This task, based on the Piano sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element</a> API to create a piano application and play sounds. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Multimedia/Piano" target="blank">Piano</a>.</p>
+
+  <p>This task consists of the following parts:</p>
+  <ul>
    <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
    <li><a href="#initialize">Initializing the Application</a> defines how to initialize the application.</li>
-   <li><a href="#handle">Handling the Keys</a> defines how to create the piano object.</li>   
-   <li><a href="#play">Playing Sounds</a> defines how to use the <code>audio</code> element to play sounds.</li> 
-  </ul> 
-  <p>This sample is a fully functional application for playing a piano. The user can use multi-touch to play a combination of sounds from a single octave.</p> 
-  
-<h2 id="layout" name="layout">Defining the Application Layout</h2> 
-  <p>The Piano sample application layout contains only 1 screen: the main screen that displays the piano keyboard.</p> 
-
-  <p>The following figure shows the main screen of the application.</p> 
-  <p align="center"><strong>Figure: Piano screen</strong></p> 
-  <p align="center"><img alt="Piano screen" src="../../../images/piano.png" /></p> 
- 
-  <h3 id="main" name="main">Defining the Main Screen</h3> 
-  <ol> 
+   <li><a href="#handle">Handling the Keys</a> defines how to create the piano object.</li>
+   <li><a href="#play">Playing Sounds</a> defines how to use the <code>audio</code> element to play sounds.</li>
+  </ul>
+  <p>This sample is a fully functional application for playing a piano. The user can use multi-touch to play a combination of sounds from a single octave.</p>
+
+<h2 id="layout" name="layout">Defining the Application Layout</h2>
+  <p>The Piano sample application layout contains only 1 screen: the main screen that displays the piano keyboard.</p>
+
+  <p>The following figure shows the main screen of the application.</p>
+  <p align="center"><strong>Figure: Piano screen</strong></p>
+  <p align="center"><img alt="Piano screen" src="../../../images/piano.png" /></p>
+
+  <h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol>
    <li><strong>index.html Source File</strong>
 <p>The main screen displays a piano keyboard. The keys are defined as <code>&lt;div&gt;</code> elements whose <code>class</code> attribute is set to <code>button</code>.</p>
 
 <pre class="prettyprint lang-html">
-&lt;body ondragstart=&quot;return false&quot; onselectstart=&quot;return false&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;div class="button white_btn&quot; id=&quot;play0&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button white_btn&quot; id=&quot;play2&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button white_btn&quot; id=&quot;play4&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button white_btn&quot; id=&quot;play5&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button white_btn&quot; id=&quot;play7&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button white_btn&quot; id=&quot;play9&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button white_btn&quot; id=&quot;play11&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button white_btn&quot; id=&quot;play12&quot;&gt;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button black_btn&quot; style=&quot;left: 8.6%&quot; id=&quot;play1&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button black_btn&quot; style=&quot;left: 21.2%&quot; id=&quot;play3&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button black_btn&quot; style=&quot;left: 45.8%&quot; id=&quot;play6&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button black_btn&quot; style=&quot;left: 58.4%&quot; id=&quot;play8&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button black_btn&quot; style=&quot;left: 70.9%&quot; id=&quot;play10&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;button black_btn&quot; style=&quot;left: 95%&quot; id=&quot;play13&quot;&gt;&lt;/div&gt;
+&lt;body ondragstart="return false" onselectstart="return false"&gt;
+
+   &lt;div class="button white_btn" id="play0"&gt;&lt;/div&gt;
+   &lt;div class="button white_btn" id="play2"&gt;&lt;/div&gt;
+   &lt;div class="button white_btn" id="play4"&gt;&lt;/div&gt;
+   &lt;div class="button white_btn" id="play5"&gt;&lt;/div&gt;
+   &lt;div class="button white_btn" id="play7"&gt;&lt;/div&gt;
+   &lt;div class="button white_btn" id="play9"&gt;&lt;/div&gt;
+   &lt;div class="button white_btn" id="play11"&gt;&lt;/div&gt;
+   &lt;div class="button white_btn" id="play12"&gt;&lt;/div&gt;
+
+   &lt;div class="button black_btn" style="left: 8.6%" id="play1"&gt;&lt;/div&gt;
+   &lt;div class="button black_btn" style="left: 21.2%" id="play3"&gt;&lt;/div&gt;
+   &lt;div class="button black_btn" style="left: 45.8%" id="play6"&gt;&lt;/div&gt;
+   &lt;div class="button black_btn" style="left: 58.4%" id="play8"&gt;&lt;/div&gt;
+   &lt;div class="button black_btn" style="left: 70.9%" id="play10"&gt;&lt;/div&gt;
+   &lt;div class="button black_btn" style="left: 95%" id="play13"&gt;&lt;/div&gt;
 
 &lt;/body&gt;
 </pre></li>
@@ -94,47 +94,47 @@
 <pre class="prettyprint">
 .white_btn
 {
-&nbsp;&nbsp;&nbsp;background: url(&#39;../white.png&#39;) bottom center no-repeat transparent;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;display: inline-block;
-&nbsp;&nbsp;&nbsp;background-size: 100%;
-&nbsp;&nbsp;&nbsp;width: 12.5%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;position: relative;
-&nbsp;&nbsp;&nbsp;float: left;
-&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;padding: 0;
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;margin: 0;
+   background: url('../white.png') bottom center no-repeat transparent;
+   height: 100%;
+   display: inline-block;
+   background-size: 100%;
+   width: 12.5%;
+   height: 100%;
+   position: relative;
+   float: left;
+   margin: 0;
+   padding: 0;
+   display: block;
+   margin: 0;
 }
 
 .white_btn.pressed
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;background-image: url(&#39;../white_pressed.png&#39;);
+   {
+   background-image: url('../white_pressed.png');
 }
 
 .black_btn
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;float: left;
-&nbsp;&nbsp;&nbsp;background: url(&#39;../black.png&#39;)  bottom center no-repeat transparent;
-&nbsp;&nbsp;&nbsp;width: 7.6%;
-&nbsp;&nbsp;&nbsp;height: 73.8%;
-&nbsp;&nbsp;&nbsp;background-size: 100%;
-&nbsp;&nbsp;&nbsp;background-position: top center;
-&nbsp;&nbsp;&nbsp;position: fixed;
-&nbsp;&nbsp;&nbsp;top: 0px;
+   {
+   float: left;
+   background: url('../black.png')  bottom center no-repeat transparent;
+   width: 7.6%;
+   height: 73.8%;
+   background-size: 100%;
+   background-position: top center;
+   position: fixed;
+   top: 0px;
 }
 
 .black_btn.pressed
 {
-&nbsp;&nbsp;&nbsp;background-image: url(&#39;../black_pressed.png&#39;);
+   background-image: url('../black_pressed.png');
 }
 
 </pre></li>
-</ol>   
+</ol>
 
   <h2 id="initialize" name="initialize">Initializing the Application</h2>
-  <ol> 
+  <ol>
    <li><strong>main.js Source File</strong>
     <ol type="a">
      <li>
@@ -144,20 +144,20 @@ var piano;
 
 function Piano()
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
+   "use strict";
 }
 
 function()
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
-&nbsp;&nbsp;&nbsp;Piano.prototype =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touchPianoKey: [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lockIds: {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio: [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;whiteCache: null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blackCache: null
-&nbsp;&nbsp;&nbsp;}
+   "use strict";
+   Piano.prototype =
+   {
+      touchPianoKey: [],
+      lockIds: {},
+      audio: [],
+      whiteCache: null,
+      blackCache: null
+   }
 };
 </pre>
      </li>
@@ -166,17 +166,17 @@ function()
 <pre class="prettyprint">
 Piano.prototype.audioInit = function audioInit()
 {
-&nbsp;&nbsp;&nbsp;var i, self = this;
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt;= 13; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.audio[i] = document.createElement(&#39;audio&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.audio[i].name = i;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.audio[i].src = this.audio[i].name + &quot;.wav&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.audio[i].addEventListener(&quot;playing&quot;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.lockIds[&quot;play&quot; + this.name] = false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   var i, self = this;
+   for (i = 0; i &lt;= 13; i += 1)
+   {
+      this.audio[i] = document.createElement('audio');
+      this.audio[i].name = i;
+      this.audio[i].src = this.audio[i].name + ".wav";
+      this.audio[i].addEventListener("playing", function()
+      {
+         self.lockIds["play" + this.name] = false;
+      });
+   }
 };
 </pre>
      </li>
@@ -184,9 +184,9 @@ Piano.prototype.audioInit = function audioInit()
    </li>
   </ol>
 
-  <h2 id="handle" name="handle">Handling the Keys</h2> 
-  <p>The event handling functionality is implemented in the <code>main.js</code> file.</p>   
-  <ol> 
+  <h2 id="handle" name="handle">Handling the Keys</h2>
+  <p>The event handling functionality is implemented in the <code>main.js</code> file.</p>
+  <ol>
    <li><strong>Creating Event Listeners</strong>
    <ol type="a"><li>
 <p>The <code>onPianoKeyTouchDown()</code> event listener is created to detect the touch event, when the user presses a piano key.</p>
@@ -194,25 +194,25 @@ Piano.prototype.audioInit = function audioInit()
 <pre class="prettyprint">
 Piano.prototype.onPianoKeyTouchDown = function onPianoKeyTouchDown(data)
 {
-&nbsp;&nbsp;&nbsp;data.originalEvent.preventDefault();
-&nbsp;&nbsp;&nbsp;var element, touch, i, len;
-&nbsp;&nbsp;&nbsp;for (i = 0, len = data.originalEvent.changedTouches.length; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touch = data.originalEvent.changedTouches[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element = document.elementFromPoint(touch.clientX, touch.clientY);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (element)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.touchPianoKey[touch.identifier] !== element.id)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#&#39; +
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.touchPianoKey[touch.identifier]).removeClass(&#39;pressed&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.playAudioByElement(element, touch.identifier, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.lockIds[element.id] = true;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   data.originalEvent.preventDefault();
+   var element, touch, i, len;
+   for (i = 0, len = data.originalEvent.changedTouches.length; i &lt; len; i += 1)
+   {
+      touch = data.originalEvent.changedTouches[i];
+      element = document.elementFromPoint(touch.clientX, touch.clientY);
+      if (element)
+      {
+         if (this.touchPianoKey[touch.identifier] !== element.id)
+         {
+            $('#' +
+              this.touchPianoKey[touch.identifier]).removeClass('pressed');
+            this.playAudioByElement(element, touch.identifier, function()
+            {
+               this.lockIds[element.id] = true;
+            });
+         }
+      }
+   }
 };
 </pre></li>
    <li>
@@ -221,19 +221,19 @@ Piano.prototype.onPianoKeyTouchDown = function onPianoKeyTouchDown(data)
 <pre class="prettyprint">
 Piano.prototype.onPianoKeyTouchUp = function onPianoKeyTouchUp(data)
 {
-&nbsp;&nbsp;&nbsp;var i, touchId, len, buttonId;
-&nbsp;&nbsp;&nbsp;for (i = 0, len = data.originalEvent.changedTouches.length; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the number assigned to the finger touching the screen */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touchId = data.originalEvent.changedTouches[i].identifier;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buttonId = this.touchPianoKey[touchId];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function(id) {$(&#39;#&#39; + id).removeClass(&#39;pressed&#39;);})
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(buttonId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 100);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.touchPianoKey[touchId] = undefined;
-&nbsp;&nbsp;&nbsp;}
+   var i, touchId, len, buttonId;
+   for (i = 0, len = data.originalEvent.changedTouches.length; i &lt; len; i += 1)
+   {
+      /* Get the number assigned to the finger touching the screen */
+      touchId = data.originalEvent.changedTouches[i].identifier;
+      buttonId = this.touchPianoKey[touchId];
+      setTimeout(function()
+         {
+            (function(id) {$('#' + id).removeClass('pressed');})
+            (buttonId);
+         }, 100);
+      this.touchPianoKey[touchId] = undefined;
+   }
 };
 </pre></li>
 </ol>
@@ -244,75 +244,75 @@ Piano.prototype.onPianoKeyTouchUp = function onPianoKeyTouchUp(data)
 <pre class="prettyprint">
 Piano.prototype.bindEvents = function bindEvents()
 {
-&nbsp;&nbsp;&nbsp;var self = this;
-
-&nbsp;&nbsp;&nbsp;$(&quot;.button&quot;).bind(&#39;touchstart touchmove&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.onPianoKeyTouchDown(e);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;$(&quot;.button&quot;).bind(&#39;touchend&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.onPianoKeyTouchUp(e);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;$(&#39;#back&#39;).bind(&#39;touchstart&#39;, function(event)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Apply CSS style dynamically */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).addClass(&#39;active&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;$(&#39;#back&#39;).bind(&#39;touchend&#39;, function(event)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Cancel the applied CSS style */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).removeClass(&#39;active&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;webkitvisibilitychange&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.webkitVisibilityState === &#39;visible&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.audioInit()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
+   var self = this;
+
+   $(".button").bind('touchstart touchmove', function(e)
+      {
+         self.onPianoKeyTouchDown(e);
+      });
+   $(".button").bind('touchend', function(e)
+      {
+         self.onPianoKeyTouchUp(e);
+      });
+   $('#back').bind('touchstart', function(event)
+      {
+         event.preventDefault();
+         event.stopPropagation();
+         /* Apply CSS style dynamically */
+         $(this).addClass('active');
+         tizen.application.getCurrentApplication().exit();
+      });
+
+   $('#back').bind('touchend', function(event)
+      {
+         /* Cancel the applied CSS style */
+         $(this).removeClass('active');
+      });
+
+   document.addEventListener('webkitvisibilitychange', function()
+      {
+         if (document.webkitVisibilityState === 'visible')
+         {
+            self.audioInit()
+         }
+      })
 };
 </pre></li>
-</ol> 
-  
-  
-  <h2 id="play" name="play">Playing Sounds</h2> 
-  
-  <p>This section builds upon the elements described in <a href="video_audio_w.htm#play">Playing Media Files</a>.</p> 
-  <ol> 
+</ol>
+
+
+  <h2 id="play" name="play">Playing Sounds</h2>
+
+  <p>This section builds upon the elements described in <a href="video_audio_w.htm#play">Playing Media Files</a>.</p>
+  <ol>
    <li><strong>main.js Source File</strong>
 <p>The <code>playAudioByElement()</code> method is used to play the sound determined in the <code>audio</code> element, when a given key button is pressed.</p>
 
 <pre class="prettyprint">
 Piano.prototype.playAudioByElement =
-&nbsp;&nbsp;&nbsp;function playAudioByElement(element, touchId, callback)
+   function playAudioByElement(element, touchId, callback)
 {
-&nbsp;&nbsp;&nbsp;var audio = this.audio[element.id.substr(4)];
-&nbsp;&nbsp;&nbsp;$(element).addClass(&#39;pressed&#39;);
-&nbsp;&nbsp;&nbsp;this.touchPianoKey[touchId] = element.id;
-&nbsp;&nbsp;&nbsp;if (audio)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (audio.paused)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio.play();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (audio.currentTime !== 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio.currentTime = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (callback instanceof Function)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback.call(this);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   var audio = this.audio[element.id.substr(4)];
+   $(element).addClass('pressed');
+   this.touchPianoKey[touchId] = element.id;
+   if (audio)
+   {
+      if (audio.paused)
+      {
+         audio.play();
+      }
+      if (audio.currentTime !== 0)
+      {
+         audio.currentTime = 0;
+      }
+      if (callback instanceof Function)
+      {
+         callback.call(this);
+      }
+   }
 };
 </pre></li>
-</ol>  
+</ol>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/media/task_selfcamera_w.htm b/org.tizen.guides/html/web/w3c/media/task_selfcamera_w.htm
index cb7463d..7ee1769 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/task_selfcamera_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/task_selfcamera_w.htm
@@ -69,23 +69,23 @@
  <p>The <code>&lt;div&gt;</code> elements are used to define the camera elements for the screen.</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;camera&quot;&gt;&lt;/div&gt;
+   &lt;div id="camera"&gt;&lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;countdown&quot;&gt;&lt;/div&gt;
+   &lt;div id="countdown"&gt;&lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;timers&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;timer2&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;timer5&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;timer10&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="timers"&gt;
+      &lt;div id="timer2"&gt;&lt;/div&gt;
+      &lt;div id="timer5"&gt;&lt;/div&gt;
+      &lt;div id="timer10"&gt;&lt;/div&gt;
+   &lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;thumbnail&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;upImage&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="thumbnail"&gt;
+      &lt;div id="upImage"&gt;&lt;/div&gt;
+   &lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;shutter-container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;shutter&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="shutter-container"&gt;
+      &lt;div id="shutter"&gt;&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre></li>
 <li><strong>css/style.css Source File</strong>
@@ -94,55 +94,55 @@ style.css</code> file defines the positions and styles of the camera elements.</
 <pre class="prettyprint">
 #camera
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
+   width: 100%;
+   height: 100%;
+   overflow: hidden;
 }
 
 div#countdown
 {
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;top: 20%;
-&nbsp;&nbsp;&nbsp;font-size: 200pt;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;vertical-align: middle;
-&nbsp;&nbsp;&nbsp;color: rgba(135, 226, 0, 0.8);
-&nbsp;&nbsp;&nbsp;margin: auto 0;
-&nbsp;&nbsp;&nbsp;z-index: 10;
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   top: 20%;
+   font-size: 200pt;
+   text-align: center;
+   vertical-align: middle;
+   color: rgba(135, 226, 0, 0.8);
+   margin: auto 0;
+   z-index: 10;
 }
 
 .timers
 {
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;background-color: rgba(10, 10, 10, 0.4);
-&nbsp;&nbsp;&nbsp;top: 0;
-&nbsp;&nbsp;&nbsp;left: 0;
+   position: absolute;
+   width: 100%;
+   background-color: rgba(10, 10, 10, 0.4);
+   top: 0;
+   left: 0;
 }
 
 div#thumbnail
 {
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;width: 56px;
-&nbsp;&nbsp;&nbsp;height: 64px;
-&nbsp;&nbsp;&nbsp;left: 13px;
-&nbsp;&nbsp;&nbsp;bottom: 19px;
-&nbsp;&nbsp;&nbsp;background-size: 56px 64px;
-&nbsp;&nbsp;&nbsp;background-color: transparent;
-&nbsp;&nbsp;&nbsp;background-image: url(&#39;../images/none.png&#39;);
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
-&nbsp;&nbsp;&nbsp;z-index: 100;
+   position: absolute;
+   width: 56px;
+   height: 64px;
+   left: 13px;
+   bottom: 19px;
+   background-size: 56px 64px;
+   background-color: transparent;
+   background-image: url('../images/none.png');
+   background-repeat: no-repeat;
+   z-index: 100;
 }
 
 div#shutter-container
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 86px;
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;bottom: 0;
-&nbsp;&nbsp;&nbsp;z-index: 11
+   width: 100%;
+   height: 86px;
+   position: absolute;
+   bottom: 0;
+   z-index: 11
 }
 </pre></li></ol>
 
@@ -153,12 +153,12 @@ div#shutter-container
 <pre class="prettyprint">
 &lt;!--Configuration file content--&gt;
 &lt;widget ...&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other configuration details--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/filesystem.write&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.read&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/content.write&quot;/&gt;
+   &lt;!--Other configuration details--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/filesystem.read"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/filesystem.write"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/content.read"/&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/content.write"/&gt;
 &lt;/widget&gt;
 </pre></li>
   </ol>
@@ -166,7 +166,7 @@ div#shutter-container
 <h2 id="stream" name="stream">Accessing the Camera Stream</h2>
 
   <p>This section builds upon the elements described in <a href="getusermedia_w.htm#access">Accessing a Video Stream</a>.</p>
-  
+
 
  <h3 id="app" name="app">Managing the Application Object</h3>
  <p>The application object functionality is implemented in the <code>main.js</code> file.</p>
@@ -179,33 +179,33 @@ div#shutter-container
 var selfCamera;
 function SelfCamera()
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
+   "use strict";
 }
 
 function()
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
-&nbsp;&nbsp;&nbsp;var DELAY_2_SECOND = 2, DELAY_5_SECOND = 5, DELAY_10_SECOND = 10;
-&nbsp;&nbsp;&nbsp;var previewLock = false;
-
-&nbsp;&nbsp;&nbsp;SelfCamera.prototype =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;countdown: -1, /* Current value after clicking the camera button */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;countdownTimeoutID: -1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;countSound: new Audio(&#39;sounds/sounds_count.wav&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img: document.createElement(&#39;canvas&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filename: &#39;&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loadDirectory: &#39;&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveDirectory: &#39;images/&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IMG_PREFIX: &#39;SelfCamera_&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shutterSound: new Audio(&#39;sounds/sounds_Shutter_01.wav&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timer: null, /* Value set by the buttons */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;systemIO: null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video: null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isMediaWorking: false
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;previewLock: false
-&nbsp;&nbsp;&nbsp;};
+   "use strict";
+   var DELAY_2_SECOND = 2, DELAY_5_SECOND = 5, DELAY_10_SECOND = 10;
+   var previewLock = false;
+
+   SelfCamera.prototype =
+   {
+      countdown: -1, /* Current value after clicking the camera button */
+      countdownTimeoutID: -1,
+      countSound: new Audio('sounds/sounds_count.wav'),
+      img: document.createElement('canvas'),
+      filename: '',
+      loadDirectory: '',
+      saveDirectory: 'images/',
+      IMG_PREFIX: 'SelfCamera_',
+      shutterSound: new Audio('sounds/sounds_Shutter_01.wav'),
+      timer: null, /* Value set by the buttons */
+      systemIO: null,
+      video: null,
+      src: null,
+      isMediaWorking: false
+      previewLock: false
+   };
 }
 </pre></li>
 
@@ -215,8 +215,8 @@ function()
 selfCamera = new SelfCamera();
 $(document).ready(function()
 {
-&nbsp;&nbsp;&nbsp;&quot;use strict&quot;;
-&nbsp;&nbsp;&nbsp;selfCamera.init();
+   "use strict";
+   selfCamera.init();
 });
 </pre></li>
 </ol></li>
@@ -227,10 +227,10 @@ $(document).ready(function()
 <pre class="prettyprint">
 SelfCamera.prototype.bindVideoEvents = function()
 {
-&nbsp;&nbsp;&nbsp;var self = this;
-&nbsp;&nbsp;&nbsp;$(this.video).on(&quot;stalled&quot;, function(e) {this.load();});
-&nbsp;&nbsp;&nbsp;$(this.video).on(&quot;playing&quot;, this.resizeVideo.bind(this));
-&nbsp;&nbsp;&nbsp;$(this.video).on(&#39;click&#39;, function() {this.play();});
+   var self = this;
+   $(this.video).on("stalled", function(e) {this.load();});
+   $(this.video).on("playing", this.resizeVideo.bind(this));
+   $(this.video).on('click', function() {this.play();});
 };
 </pre></li>
 
@@ -238,48 +238,48 @@ SelfCamera.prototype.bindVideoEvents = function()
 <pre class="prettyprint">
 SelfCamera.prototype.bindEvents = function bindEvents()
 {
-&nbsp;&nbsp;&nbsp;var self = this;
-
-&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;webkitvisibilitychange&#39;, function(event)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.clearCountdown();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;previewLock = false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.webkitVisibilityState === &#39;visible&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (self.video !== null)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.reloadSaveDirectory(function() {self.video.play();});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.loadThumbnail(true, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;$(&#39;shutter&#39;).mousedown(function(ev) {$(&#39;shutter&#39;).addClass(&#39;active&#39;);})
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.mouseup(function(ev) {$(&#39;shutter&#39;).removeClass(&#39;active&#39;);})
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.on(&#39;touchstart&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(ev) {$(&#39;shutter&#39;).addClass(&#39;active&#39;);})
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.on(&#39;touchend&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(ev) {$(&#39;shutter&#39;).removeClass(&#39;active&#39;);});
-
-&nbsp;&nbsp;&nbsp;$(window).on(&#39;tizenhwkey&#39;, function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.originalEvent.keyName === &quot;back&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (self.countdownTimeoutID !== -1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.clearCountdown();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.loadThumbnail(true, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;this.bindTimerClicks();
-
-&nbsp;&nbsp;&nbsp;$(&#39;#thumbnail&#39;).on(&#39;click&#39;, this.launchPreview.bind(this));
-&nbsp;&nbsp;&nbsp;$(&#39;#shutter&#39;).on(&#39;touchstart&#39;, this.shutterTouched.bind(this));
+   var self = this;
+
+   document.addEventListener('webkitvisibilitychange', function(event)
+   {
+      self.clearCountdown();
+      previewLock = false;
+      if (document.webkitVisibilityState === 'visible')
+      {
+         if (self.video !== null)
+         {
+            self.reloadSaveDirectory(function() {self.video.play();});
+         }
+         self.loadThumbnail(true, false);
+      }
+   });
+
+   $('shutter').mousedown(function(ev) {$('shutter').addClass('active');})
+               .mouseup(function(ev) {$('shutter').removeClass('active');})
+               .on('touchstart',
+                   function(ev) {$('shutter').addClass('active');})
+               .on('touchend',
+                   function(ev) {$('shutter').removeClass('active');});
+
+   $(window).on('tizenhwkey', function(e)
+   {
+      if (e.originalEvent.keyName === "back")
+      {
+         if (self.countdownTimeoutID !== -1)
+         {
+            self.clearCountdown();
+            self.loadThumbnail(true, false);
+         }
+         else
+         {
+            tizen.application.getCurrentApplication().exit();
+         }
+   });
+
+   this.bindTimerClicks();
+
+   $('#thumbnail').on('click', this.launchPreview.bind(this));
+   $('#shutter').on('touchstart', this.shutterTouched.bind(this));
 };
 </pre>
 
@@ -292,19 +292,19 @@ SelfCamera.prototype.bindEvents = function bindEvents()
  <li> The <code>startPreview()</code> method requests the video stream using the <code>getUserMedia()</code> method of the navigator.
 <pre class="prettyprint">
 navigator.getUserMedia(options, this.onCaptureVideoSuccess.bind(this),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.onCaptureVideoError.bind(this));
+                       this.onCaptureVideoError.bind(this));
 </pre></li>
 
 <li>The <code>onCaptureVideoSuccess()</code> event handler obtains the stream URL and creates the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">video element</a> with the <code>createVideoElement()</code> method.
 <pre class="prettyprint">
 SelfCamera.prototype.onCaptureVideoSuccess = function onCaptureVideoSuccess(stream)
 {
-&nbsp;&nbsp;&nbsp;var urlStream;
-&nbsp;&nbsp;&nbsp;urlStream = window.webkitURL.createObjectURL(stream); /* Create stream */
-&nbsp;&nbsp;&nbsp;this.isMediaWorking = true;
-&nbsp;&nbsp;&nbsp;/* Create video element with stream handler */
-&nbsp;&nbsp;&nbsp;this.createVideoElement(urlStream);
-&nbsp;&nbsp;&nbsp;this.setTimer(DELAY_2_SECOND); /* Initialize timer button options */
+   var urlStream;
+   urlStream = window.webkitURL.createObjectURL(stream); /* Create stream */
+   this.isMediaWorking = true;
+   /* Create video element with stream handler */
+   this.createVideoElement(urlStream);
+   this.setTimer(DELAY_2_SECOND); /* Initialize timer button options */
 };
 </pre></li>
 <li><p>The <code>createVideoElement()</code> method defines the video element, except for the <code>
@@ -312,15 +312,15 @@ src</code> attribute, which is already defined by the <code>onCaptureVideoSucces
 <pre class="prettyprint">
 SelfCamera.prototype.createVideoElement = function(src)
 {
-&nbsp;&nbsp;&nbsp;this.video = $(&#39;&lt;video/&gt;&#39;,
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autoplay: &#39;autoplay&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: &#39;video&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style: &#39;height:&#39; + $(window).height() + &#39;px&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: src
-&nbsp;&nbsp;&nbsp;}).appendTo(&quot;#camera&quot;).get(0);
-
-&nbsp;&nbsp;&nbsp;this.bindVideoEvents();
+   this.video = $('&lt;video/&gt;',
+   {
+      autoplay: 'autoplay',
+      id: 'video',
+      style: 'height:' + $(window).height() + 'px',
+      src: src
+   }).appendTo("#camera").get(0);
+
+   this.bindVideoEvents();
 };
 </pre>
 </li>
@@ -335,24 +335,24 @@ SelfCamera.prototype.createVideoElement = function(src)
 <pre class="prettyprint">
 SelfCamera.prototype.captureImage = function captureImage(video)
 {
-&nbsp;&nbsp;&nbsp;var sourceWidth = window.innerWidth,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sourceHeight = window.innerHeight,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sourceX = (sourceWidth - $(video).width()) / 2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sourceY = (sourceHeight - $(video).height()) / 2;
-
-&nbsp;&nbsp;&nbsp;this.img.width = sourceWidth;
-&nbsp;&nbsp;&nbsp;this.img.height = sourceHeight;
-
-&nbsp;&nbsp;&nbsp;/* Crop image to viewport dimensions */
-&nbsp;&nbsp;&nbsp;this.img.getContext(&#39;2d&#39;).drawImage(video, sourceX, sourceY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(video).width(), $(video).height());
-
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   For the best available dimension, use the following:
-&nbsp;&nbsp;&nbsp;   this.img.width = video.videoWidth;
-&nbsp;&nbsp;&nbsp;   this.img.height = video.videoHeight;
-&nbsp;&nbsp;&nbsp;   this.img.getContext(&#39;2d&#39;).drawImage(video, 0, 0);
-&nbsp;&nbsp;&nbsp;*/
+   var sourceWidth = window.innerWidth,
+       sourceHeight = window.innerHeight,
+       sourceX = (sourceWidth - $(video).width()) / 2,
+       sourceY = (sourceHeight - $(video).height()) / 2;
+
+   this.img.width = sourceWidth;
+   this.img.height = sourceHeight;
+
+   /* Crop image to viewport dimensions */
+   this.img.getContext('2d').drawImage(video, sourceX, sourceY,
+                                       $(video).width(), $(video).height());
+
+   /*
+      For the best available dimension, use the following:
+      this.img.width = video.videoWidth;
+      this.img.height = video.videoHeight;
+      this.img.getContext('2d').drawImage(video, 0, 0);
+   */
 };
 </pre></li>
 
@@ -360,45 +360,45 @@ SelfCamera.prototype.captureImage = function captureImage(video)
 <pre class="prettyprint">
 SelfCamera.prototype.saveCanvas = function saveCanvas(canvas, fileName)
 {
-&nbsp;&nbsp;&nbsp;var data, self = this,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess = function(fileHandle)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setLoadDirectory(this.getFileDirectoryURI(fileHandle));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.content.scanFile(fileName,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function() {self.loadThumbnail(false, false);},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function() {/* Error handling */});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}.bind(this);
-
-&nbsp;&nbsp;&nbsp;data = canvas.toDataURL().replace(&#39;data:image/png;base64,&#39;, &#39;&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.replace(&#39;data:,&#39;, &#39;&#39;);
-
-&nbsp;&nbsp;&nbsp;this.systemIO.saveFileContent(fileName, data, onSuccess, &#39;base64&#39;);
+   var data, self = this,
+       onSuccess = function(fileHandle)
+       {
+          this.setLoadDirectory(this.getFileDirectoryURI(fileHandle));
+          tizen.content.scanFile(fileName,
+                                 function() {self.loadThumbnail(false, false);},
+                                 function() {/* Error handling */});
+       }.bind(this);
+
+   data = canvas.toDataURL().replace('data:image/png;base64,', '')
+      .replace('data:,', '');
+
+   this.systemIO.saveFileContent(fileName, data, onSuccess, 'base64');
 };
 </pre></li>
 
  <li>Save the image.
 <pre class="prettyprint">
 saveFileContent: function SystemIO_saveFileContent(filePath, fileContent,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSaveSuccess, fileEncoding)
+                                                   onSaveSuccess, fileEncoding)
 {
-&nbsp;&nbsp;&nbsp;var pathData = this.getPathData(filePath),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self = this,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileHandle;
-
-&nbsp;&nbsp;&nbsp;function onOpenDirSuccess(dir)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create a new file */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileHandle = self.createFile(dir, pathData.fileName);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (fileHandle !== false)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save data into the file */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.writeFile(fileHandle, fileContent, onSaveSuccess,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false, fileEncoding);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;/* Open the directory */
-&nbsp;&nbsp;&nbsp;this.openDir(pathData.dirName, onOpenDirSuccess);
+   var pathData = this.getPathData(filePath),
+       self = this,
+       fileHandle;
+
+   function onOpenDirSuccess(dir)
+   {
+      /* Create a new file */
+      fileHandle = self.createFile(dir, pathData.fileName);
+      if (fileHandle !== false)
+      {
+         /* Save data into the file */
+         self.writeFile(fileHandle, fileContent, onSaveSuccess,
+                        false, fileEncoding);
+      }
+   }
+
+   /* Open the directory */
+   this.openDir(pathData.dirName, onOpenDirSuccess);
 };
 </pre>
   </li></ol></li></ol>
diff --git a/org.tizen.guides/html/web/w3c/media/video_audio_w.htm b/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
index 85cb7b8..214b7ca 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
@@ -69,7 +69,7 @@
 <p>You can use the  <code>Play()</code> and  <code>Pause()</code> methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-elements" target="_blank">Media</a> object to <a href="#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>\r
 </li>\r
 <li>Retrieving duration and play time\r
-<p>You can <a href="#retrieve">retrieve the duration and play time</a> of the media file, if its metadata (such as playing time, duration,  and video&#39;s width and height) is loaded.</p>\r
+<p>You can <a href="#retrieve">retrieve the duration and play time</a> of the media file, if its metadata (such as playing time, duration,  and video's width and height) is loaded.</p>\r
 </li>\r
 <li>Playing from a random position\r
 <p>You can indicate the playback time by <a href="#move">playing the media file from a random position</a>. To do this, you must change the <code>currentTime</code> value of the <code>Media</code> object to trigger the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#event-media-timeupdate" target="_blank">timeupdate</a> event.</p>\r
@@ -93,8 +93,8 @@
 <li>\r
 <p>To create an audio player, create an <code>audio</code> element including the necessary attributes:</p>\r
 <pre class="prettyprint">\r
-&lt;audio id=&quot;audio&quot; src=&quot;media/audio_sample.mp3&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preload=&quot;auto&quot; controls muted loop autoplay&gt;\r
+&lt;audio id="audio" src="media/audio_sample.mp3"\r
+       preload="auto" controls muted loop autoplay&gt;\r
 &lt;/audio&gt;\r
 </pre>\r
 <p align="center"><img alt="Audio player" src="../../../images/video_audio3.png" /></p>\r
@@ -102,12 +102,12 @@
 <li>\r
 <p>To create a video player, create a <code>video</code> element including the necessary attributes. In addition to the attributes available for the <code>audio</code> element, you can also use the <code>width</code>, <code>height</code>, and <code>poster</code> attributes.</p>\r
 <pre class="prettyprint">\r
-&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;400&quot; height=&quot;220&quot; poster=&quot;media/poster_sample.png&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;preload=&quot;auto&quot; controls muted loop&gt;\r
+&lt;video id="video" src="media/video_sample.mp4"\r
+       width="400" height="220" poster="media/poster_sample.png"\r
+       preload="auto" controls muted loop&gt;\r
 &lt;/video&gt;\r
 </pre>\r
-<p>A player with a play control (built-in control provided in the browser) is created. The control is visible only when the <code>controls</code> attribute is added. If the <code>poster</code> attribute is not defined, the video&#39;s first frame is shown on the screen before the playback. The following figure shows the video player before and during playback.\r
+<p>A player with a play control (built-in control provided in the browser) is created. The control is visible only when the <code>controls</code> attribute is added. If the <code>poster</code> attribute is not defined, the video's first frame is shown on the screen before the playback. The following figure shows the video player before and during playback.\r
 </p>\r
 <p align="center"><img alt="Video player before playback" src="../../../images/video_audio1.png" /> <img alt="Video player during playback" src="../../../images/video_audio2.png" /></p>\r
 </li>\r
@@ -140,12 +140,12 @@
 <ol>\r
 <li>Create the <code>video</code> element and buttons used to control the play and pause:\r
 <pre class="prettyprint lang-html">\r
-&lt;div class=&quot;media&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot;&gt;&lt;/video&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-play&quot; type=&quot;button&quot;&gt;play&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-pause&quot; type=&quot;button&quot; disabled &gt;pause&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&lt;div class="media"&gt;\r
+   &lt;video id="video" src="media/video_sample.mp4"&gt;&lt;/video&gt;\r
+   &lt;div&gt;\r
+      &lt;button id="v-play" type="button"&gt;play&lt;/button&gt;\r
+      &lt;button id="v-pause" type="button" disabled &gt;pause&lt;/button&gt;\r
+   &lt;/div&gt;\r
 &lt;/div&gt;\r
 </pre>\r
 <p>The <strong>Pause</strong> button is disabled until the play event occurs.</p>\r
@@ -154,43 +154,43 @@
 \r
 <pre class="prettyprint lang-js">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var play_button = document.getElementById(&quot;v-play&quot;);\r
-&nbsp;&nbsp;&nbsp;var pause_button = document.getElementById(&quot;v-pause&quot;);\r
-\r
-&nbsp;&nbsp;&nbsp;play_button.addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.play(); /* Play movie */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;pause_button.addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.pause(); /* Pause movie */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+   var play_button = document.getElementById("v-play");\r
+   var pause_button = document.getElementById("v-pause");\r
+\r
+   play_button.addEventListener("click", function()\r
+      {\r
+         video.play(); /* Play movie */\r
+      }, false);\r
+\r
+   pause_button.addEventListener("click", function()\r
+      {\r
+         video.pause(); /* Pause movie */\r
+      }, false);\r
 </pre>\r
 </li>\r
 \r
 <li>\r
  <p>Apply event listeners to detect button events an react to them:</p>\r
 <pre class="prettyprint">\r
-&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;);\r
-\r
-&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;play&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = true; /* Play button disabled */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = false; /* Pause button enabled */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;pause&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = false; /* Play button enabled */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = true; /* Pause button disabled */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;ended&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = false; /* Play button enabled */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = true; /* Pause button disabled */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+   var video = document.getElementById("video");\r
+\r
+   video.addEventListener("play", function()\r
+      {\r
+         play_button.disabled = true; /* Play button disabled */\r
+         pause_button.disabled = false; /* Pause button enabled */\r
+      }, false);\r
+\r
+   video.addEventListener("pause", function()\r
+      {\r
+         play_button.disabled = false; /* Play button enabled */\r
+         pause_button.disabled = true; /* Pause button disabled */\r
+      }, false);\r
+\r
+   video.addEventListener("ended", function()\r
+      {\r
+         play_button.disabled = false; /* Play button enabled */\r
+         pause_button.disabled = true; /* Pause button disabled */\r
+      }, false);\r
 &lt;/script&gt;\r
 </pre>\r
 \r
@@ -217,11 +217,11 @@
 <ol>\r
 <li><p>Create the <code>video</code> element and the elements to display the total duration and playing time of the file:</p>\r
 <pre class="prettyprint">\r
-&lt;div class=&quot;media&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Play Time Example&lt;/h1&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot; controls preload=&quot;auto&quot;&gt;&lt;/video&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;log&quot;&gt;Current Play Time: &lt;span id=&quot;currentTime&quot;&gt;&lt;/span&gt;&lt;/div&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;log&quot;&gt;Total Play Time: &lt;span id=&quot;totalTime&quot;&gt;&lt;/span&gt;&lt;/div&gt;\r
+&lt;div class="media"&gt;\r
+   &lt;h1&gt;Play Time Example&lt;/h1&gt;\r
+   &lt;video id="video" src="media/video_sample.mp4" controls preload="auto"&gt;&lt;/video&gt;\r
+   &lt;div class="log"&gt;Current Play Time: &lt;span id="currentTime"&gt;&lt;/span&gt;&lt;/div&gt;\r
+   &lt;div class="log"&gt;Total Play Time: &lt;span id="totalTime"&gt;&lt;/span&gt;&lt;/div&gt;\r
 &lt;/div&gt;\r
 </pre>\r
 </li>\r
@@ -230,39 +230,39 @@
 \r
 <pre class="prettyprint lang-js">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;);\r
-&nbsp;&nbsp;&nbsp;var currentTime = document.getElementById(&quot;currentTime&quot;);\r
-&nbsp;&nbsp;&nbsp;var totalTime = document.getElementById(&quot;totalTime&quot;);\r
-\r
-&nbsp;&nbsp;&nbsp;/* Indicate the total duration */\r
-&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;loadedmetadata&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Total video duration */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var totalSec = video.duration;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Import method to change seconds to time (HH:MM:SS) format */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var time = secondsToTime(totalSec);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display the calculated time on screen */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;totalTime.innerHTML = parseInt(totalSec)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;sec (&quot; + time.h + &quot;:&quot; + time.m + &quot;:&quot; + time.s + &quot;)&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+   var video = document.getElementById("video");\r
+   var currentTime = document.getElementById("currentTime");\r
+   var totalTime = document.getElementById("totalTime");\r
+\r
+   /* Indicate the total duration */\r
+   video.addEventListener("loadedmetadata", function()\r
+      {\r
+         /* Total video duration */\r
+            var totalSec = video.duration;\r
+\r
+         /* Import method to change seconds to time (HH:MM:SS) format */\r
+         var time = secondsToTime(totalSec);\r
+\r
+         /* Display the calculated time on screen */\r
+         totalTime.innerHTML = parseInt(totalSec)\r
+            + "sec (" + time.h + ":" + time.m + ":" + time.s + ")";\r
+      }, false);\r
 </pre>\r
 </li>\r
 <li>\r
 <p>Apply the <code>timeupdate</code> media event to the <code>video</code> object to get the playing time:</p>\r
 <pre class="prettyprint">\r
-&nbsp;&nbsp;&nbsp;/* Indicate play time status */\r
-&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;timeupdate&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Current play time */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var currSec = video.currentTime;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var c_time = secondsToTime(currSec\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display the current play time */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentTime.innerHTML = parseInt(currSec)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;sec (&quot; + c_time.h + &quot;:&quot; + c_time.m + &quot;:&quot; + c_time.s + &quot;)&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+   /* Indicate play time status */\r
+   video.addEventListener("timeupdate", function()\r
+      {\r
+         /* Current play time */\r
+         var currSec = video.currentTime;\r
+         var c_time = secondsToTime(currSec\r
+\r
+         /* Display the current play time */\r
+         currentTime.innerHTML = parseInt(currSec)\r
+            + "sec (" + c_time.h + ":" + c_time.m + ":" + c_time.s + ")";\r
+      }, false);\r
 &lt;/script&gt;\r
 </pre>\r
 </li>\r
@@ -270,33 +270,33 @@
 \r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;/* Change seconds to time (HH:MM:SS) format */\r
-&nbsp;&nbsp;&nbsp;function secondsToTime(secs)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var hours = Math.floor(secs / (60 * 60));\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var divisor_for_minutes = secs % (60 * 60);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var minutes = Math.floor(divisor_for_minutes / 60);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var divisor_for_seconds = divisor_for_minutes % 60;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var seconds = Math.ceil(divisor_for_seconds);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set as JSON object */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var obj =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;h&quot;: intToString(hours),\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;m&quot;: intToString(minutes),\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;s&quot;: intToString(seconds)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return obj;\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;/* Ensure that each time is set in 2 characters according to the time format */\r
-&nbsp;&nbsp;&nbsp;function intToString(time)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (parseInt(time) &lt; 10 ? (&quot;0&quot; + time) : time);\r
-&nbsp;&nbsp;&nbsp;}\r
+   /* Change seconds to time (HH:MM:SS) format */\r
+   function secondsToTime(secs)\r
+   {\r
+      var hours = Math.floor(secs / (60 * 60));\r
+\r
+      var divisor_for_minutes = secs % (60 * 60);\r
+      var minutes = Math.floor(divisor_for_minutes / 60);\r
+\r
+      var divisor_for_seconds = divisor_for_minutes % 60;\r
+      var seconds = Math.ceil(divisor_for_seconds);\r
+\r
+      /* Set as JSON object */\r
+      var obj =\r
+      {\r
+         "h": intToString(hours),\r
+         "m": intToString(minutes),\r
+         "s": intToString(seconds)\r
+      };\r
+\r
+      return obj;\r
+   }\r
+\r
+   /* Ensure that each time is set in 2 characters according to the time format */\r
+   function intToString(time)\r
+   {\r
+      return (parseInt(time) &lt; 10 ? ("0" + time) : time);\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
 <p align="center"><strong>Figure: Displaying the duration and play time (in mobile applications only)</strong></p> \r
@@ -319,13 +319,13 @@
 <p>Create the <code>video</code> element and buttons used to control the timeline:</p>\r
 \r
 <pre class="prettyprint">\r
-&lt;div class=&quot;media&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot; controls &gt;&lt;/video&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-back&quot;&gt;5 Sec Backward&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-forw&quot;&gt;5 Sec Forward&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div&gt;&lt;button id=&quot;v-goto&quot;&gt;Go to 40 Sec&lt;/button&gt;&lt;/div&gt;\r
+&lt;div class="media"&gt;\r
+   &lt;video id="video" src="media/video_sample.mp4" controls &gt;&lt;/video&gt;\r
+   &lt;div&gt;\r
+      &lt;button id="v-back"&gt;5 Sec Backward&lt;/button&gt;\r
+      &lt;button id="v-forw"&gt;5 Sec Forward&lt;/button&gt;\r
+   &lt;/div&gt;\r
+   &lt;div&gt;&lt;button id="v-goto"&gt;Go to 40 Sec&lt;/button&gt;&lt;/div&gt;\r
 &lt;/div&gt;\r
 </pre>\r
 </li>\r
@@ -333,28 +333,28 @@
 \r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;); /* Video object */\r
-&nbsp;&nbsp;&nbsp;var back_button = document.getElementById(&quot;v-back&quot;); /* Back button */\r
-&nbsp;&nbsp;&nbsp;var forw_button = document.getElementById(&quot;v-forw&quot;); /* Forward button */\r
-&nbsp;&nbsp;&nbsp;var go_button = document.getElementById(&quot;v-goto&quot;); /* Jump button */\r
-\r
-&nbsp;&nbsp;&nbsp;/* Move 5 seconds back */\r
-&nbsp;&nbsp;&nbsp;back_button.addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.currentTime -= 5;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;/* Move 5 seconds forward */\r
-&nbsp;&nbsp;&nbsp;forw_button.addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.currentTime += 5;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;/* Move timeline to 40 seconds */\r
-&nbsp;&nbsp;&nbsp;go_button.addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.currentTime = 40;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+   var video = document.getElementById("video"); /* Video object */\r
+   var back_button = document.getElementById("v-back"); /* Back button */\r
+   var forw_button = document.getElementById("v-forw"); /* Forward button */\r
+   var go_button = document.getElementById("v-goto"); /* Jump button */\r
+\r
+   /* Move 5 seconds back */\r
+   back_button.addEventListener("click", function()\r
+      {\r
+         video.currentTime -= 5;\r
+      }, false);\r
+\r
+   /* Move 5 seconds forward */\r
+   forw_button.addEventListener("click", function()\r
+      {\r
+         video.currentTime += 5;\r
+      }, false);\r
+\r
+   /* Move timeline to 40 seconds */\r
+   go_button.addEventListener("click", function()\r
+      {\r
+         video.currentTime = 40;\r
+      }, false);\r
 &lt;/script&gt;\r
 </pre>\r
 <p>If the metadata of the media file is loaded, you can move to the assigned timeline position even when the media file is not playing. For more information, see <a href="#retrieve">Retrieving Media Information.</a></p>\r
@@ -378,10 +378,10 @@
 <li><p>Create the <code>video</code> element and the elements to display the download progress status of the media file:</p>\r
 \r
 <pre class="prettyprint">\r
-&lt;div class=&quot;media&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot; controls\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;poster=&quot;media/poster_sample.png&quot;&gt;&lt;/video&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Progress: &lt;span id=&quot;state&quot;&gt;&lt;/span&gt;&lt;/div&gt;\r
+&lt;div class="media"&gt;\r
+   &lt;video id="video" src="media/video_sample.mp4" controls\r
+          poster="media/poster_sample.png"&gt;&lt;/video&gt;\r
+   &lt;div&gt;Progress: &lt;span id="state"&gt;&lt;/span&gt;&lt;/div&gt;\r
 &lt;/div&gt;\r
 </pre>\r
 <p>While the download is in progress, the <code>poster1.png</code> image is shown.</p>\r
@@ -391,27 +391,27 @@
 \r
 <pre class="prettyprint lang-js">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;)\r
+   var video = document.getElementById("video")\r
 \r
-&nbsp;&nbsp;&nbsp;/* Progress event */\r
-&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;progress&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Returns a TimeRanges object */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var buffered = video.buffered;\r
+   /* Progress event */\r
+   video.addEventListener("progress", function()\r
+      {\r
+         /* Returns a TimeRanges object */\r
+         var buffered = video.buffered;\r
 \r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Returns time in seconds */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var buffered_end = buffered.end();\r
+         /* Returns time in seconds */\r
+         var buffered_end = buffered.end();\r
 </pre>\r
 </li>\r
 <li>\r
 <p>Use the <code>progress</code> <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media event</a> to convert the end time to percent form, and display the progress state:</p>\r
 <pre class="prettyprint lang-js">\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Change to progress rate percent */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var progress = (buffered_end / video.duration) * 100;\r
+         /* Change to progress rate percent */\r
+         var progress = (buffered_end / video.duration) * 100;\r
 \r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display the progress state */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;state&quot;).innerHTML = parseInt(progress) + &quot;%&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+         /* Display the progress state */\r
+         document.getElementById("state").innerHTML = parseInt(progress) + "%";\r
+      }, false);\r
 &lt;/script&gt;\r
 </pre>\r
  <p align="center"><strong>Figure: Displaying the progress state (in mobile applications only)</strong></p>\r
@@ -438,11 +438,11 @@
  <li><p>Create the <code>video</code> element and buttons used to control the screen size:</p>\r
  \r
 <pre class="prettyprint">\r
-&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot; controls &gt;&lt;/video&gt;\r
+&lt;video id="video" src="media/video_sample.mp4" controls &gt;&lt;/video&gt;\r
 &lt;div&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;size_big&quot;&gt;600 * 410&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;size_middle&quot;&gt;320 * 220&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;size_small&quot;&gt;150 * 150&lt;/button&gt;\r
+   &lt;button id="size_big"&gt;600 * 410&lt;/button&gt;\r
+   &lt;button id="size_middle"&gt;320 * 220&lt;/button&gt;\r
+   &lt;button id="size_small"&gt;150 * 150&lt;/button&gt;\r
 &lt;/div&gt;\r
 </pre>\r
  </li>\r
@@ -451,28 +451,28 @@
  \r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;)\r
-\r
-&nbsp;&nbsp;&nbsp;/* Resize to big size */\r
-&nbsp;&nbsp;&nbsp;document.getElementById(&quot;size_big&quot;).addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.width = 600;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.height = 410;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;/* Resize to middle size */\r
-&nbsp;&nbsp;&nbsp;document.getElementById(&quot;size_middle&quot;).addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.width = 320;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.height = 220;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;/* Resize to small size */\r
-&nbsp;&nbsp;&nbsp;document.getElementById(&quot;size_small&quot;).addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.width = 150;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.height = 150;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+   var video = document.getElementById("video")\r
+\r
+   /* Resize to big size */\r
+   document.getElementById("size_big").addEventListener("click", function()\r
+      {\r
+         video.width = 600;\r
+         video.height = 410;\r
+      }, false);\r
+\r
+   /* Resize to middle size */\r
+   document.getElementById("size_middle").addEventListener("click", function()\r
+      {\r
+         video.width = 320;\r
+         video.height = 220;\r
+      }, false);\r
+\r
+   /* Resize to small size */\r
+   document.getElementById("size_small").addEventListener("click", function()\r
+      {\r
+         video.width = 150;\r
+         video.height = 150;\r
+      }, false);\r
 &lt;/script&gt;\r
 </pre>\r
  <p align="center"><strong>Figure: Resizing the video screen (in mobile applications only)</strong></p> \r
@@ -500,29 +500,29 @@
 <ol>\r
 <li><p>Create the <code>video</code> element and determine the media files you want to check:</p>\r
 <pre class="prettyprint">\r
-&lt;div class=&quot;media&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video1&quot; src=&quot;media/video_sample_001.ogv&quot; controls &gt;&lt;/video&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;log&quot;&gt;video/ogg can play type: &lt;span id=&quot;vlog1&quot;&gt;&lt;/span&gt;&lt;/div&gt;\r
+&lt;div class="media"&gt;\r
+   &lt;video id="video1" src="media/video_sample_001.ogv" controls &gt;&lt;/video&gt;\r
+   &lt;div class="log"&gt;video/ogg can play type: &lt;span id="vlog1"&gt;&lt;/span&gt;&lt;/div&gt;\r
 &lt;/div&gt;\r
 \r
-&lt;div class=&quot;media&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video2&quot; src=&quot;media/video_sample_002.webm&quot; controls &gt;&lt;/video&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;log&quot;&gt;audio/acc can play type: &lt;span id=&quot;vlog2&quot;&gt;&lt;/span&gt;&lt;/div&gt;\r
+&lt;div class="media"&gt;\r
+   &lt;video id="video2" src="media/video_sample_002.webm" controls &gt;&lt;/video&gt;\r
+   &lt;div class="log"&gt;audio/acc can play type: &lt;span id="vlog2"&gt;&lt;/span&gt;&lt;/div&gt;\r
 &lt;/div&gt;\r
 </pre>\r
 </li>\r
 <li><p>Use the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#dom-navigator-canplaytype" target="_blank">canPlayType()</a> method to check, whether the selected media files have an acceptable MIME type, and can be played:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var video1 = document.getElementById(&quot;video1&quot;);\r
-&nbsp;&nbsp;&nbsp;var video2 = document.getElementById(&quot;video2&quot;);\r
-&nbsp;&nbsp;&nbsp;var videoElem03 = document.getElementById(&quot;video3&quot;);\r
+   var video1 = document.getElementById("video1");\r
+   var video2 = document.getElementById("video2");\r
+   var videoElem03 = document.getElementById("video3");\r
 \r
-&nbsp;&nbsp;&nbsp;/* Check the ogg format */\r
-&nbsp;&nbsp;&nbsp;document.getElementById(&quot;vlog1&quot;).innerHTML = video1.canPlayType(&#39;video/ogg&#39;);\r
+   /* Check the ogg format */\r
+   document.getElementById("vlog1").innerHTML = video1.canPlayType('video/ogg');\r
 \r
-&nbsp;&nbsp;&nbsp;/* Check the webm format */\r
-&nbsp;&nbsp;&nbsp;document.getElementById(&quot;vlog2&quot;).innerHTML = video2.canPlayType(&#39;audio/acc&#39;);\r
+   /* Check the webm format */\r
+   document.getElementById("vlog2").innerHTML = video2.canPlayType('audio/acc');\r
 &lt;/script&gt;\r
 </pre>\r
 </li>\r
@@ -541,44 +541,44 @@
 <ol>\r
 <li><p>Create the video and button elements, which can induce errors:</p>\r
 <pre class="prettyprint">\r
-&lt;div class=&quot;media&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;media/video_sample.mp4&quot; controls &gt;&lt;/video&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;btn01&quot;&gt;src Null&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&lt;div class="media"&gt;\r
+   &lt;video id="video" src="media/video_sample.mp4" controls &gt;&lt;/video&gt;\r
+   &lt;div&gt;\r
+      &lt;button id="btn01"&gt;src Null&lt;/button&gt;\r
+   &lt;/div&gt;\r
 &lt;/div&gt;\r
 </pre>\r
 </li>\r
 <li><p>Add an event listener to detect errors and trigger error messages:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;)\r
-\r
-&nbsp;&nbsp;&nbsp;/* Button event: induce error */\r
-&nbsp;&nbsp;&nbsp;document.getElementById(&quot;btn01&quot;).addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.src = &quot;&quot;; /* Set value as null value */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;error&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Video playback failed: show a message saying why */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (video.error.code)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1:\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;MEDIA_ERR_ABORTED = 1 Media data download is stopped by the user&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 2:\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;MEDIA_ERR_NETWORK = 2 Download is stopped due to network error &quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 3:\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;MEDIA_ERR_DECODE = 3 Media data decoding failure &quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 4:\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;MEDIA_ERR_SRC_NOT_SUPPORTED = 4 Format not supported&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+   var video = document.getElementById("video")\r
+\r
+   /* Button event: induce error */\r
+   document.getElementById("btn01").addEventListener("click", function()\r
+      {\r
+         video.src = ""; /* Set value as null value */\r
+      }, false);\r
+\r
+   video.addEventListener("error", function()\r
+      {\r
+         /* Video playback failed: show a message saying why */\r
+         switch (video.error.code)\r
+         {\r
+            case 1:\r
+               alert("MEDIA_ERR_ABORTED = 1 Media data download is stopped by the user");\r
+               break;\r
+            case 2:\r
+               alert("MEDIA_ERR_NETWORK = 2 Download is stopped due to network error ");\r
+               break;\r
+            case 3:\r
+               alert("MEDIA_ERR_DECODE = 3 Media data decoding failure ");\r
+               break;\r
+            case 4:\r
+               alert("MEDIA_ERR_SRC_NOT_SUPPORTED = 4 Format not supported");\r
+               break\r
+         }\r
+      }, false);\r
 &lt;/script&gt;\r
 </pre>\r
 </li>\r
diff --git a/org.tizen.guides/html/web/w3c/media/webaudio_w.htm b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
index 44ca138..7af99fb 100644 (file)
--- a/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
@@ -69,12 +69,12 @@
 <li><p>Load a source audio file using XMLHttpRequest. Set the <code>responseType</code> to <code>arraybuffer</code> to receive binary response:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var url = &quot;sample.mp3&quot;;\r
-&nbsp;&nbsp;&nbsp;var request = new XMLHttpRequest();\r
-&nbsp;&nbsp;&nbsp;request.open(&quot;GET&quot;, url, true);\r
-&nbsp;&nbsp;&nbsp;request.responseType = &quot;arraybuffer&quot;;\r
+   var url = "sample.mp3";\r
+   var request = new XMLHttpRequest();\r
+   request.open("GET", url, true);\r
+   request.responseType = "arraybuffer";\r
 \r
-&nbsp;&nbsp;&nbsp;request.send();\r
+   request.send();\r
 &lt;/script&gt;\r
 </pre>\r
 </li>\r
@@ -82,12 +82,12 @@
 <li><p>The <code>onload</code> event is triggered. Retrieve the decoded audio data:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;/* Asynchronous event handling */\r
-&nbsp;&nbsp;&nbsp;request.onload = function()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Put the modulated audio data into the audioData variable */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var audioData = request.response;\r
-&nbsp;&nbsp;&nbsp;};\r
+   /* Asynchronous event handling */\r
+   request.onload = function()\r
+   {\r
+      /* Put the modulated audio data into the audioData variable */\r
+      var audioData = request.response;\r
+   };\r
 &lt;/script&gt;\r
 </pre>\r
 <p>This data is used in the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBuffer-section" target="_blank">AudioBuffer</a>.</p>\r
@@ -98,8 +98,8 @@
 <p>Create a WebKit-based <code>AudioContext</code> instance, which plays and manages the audio data:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var context;\r
-&nbsp;&nbsp;&nbsp;context = new webkitAudioContext();\r
+   var context;\r
+   context = new webkitAudioContext();\r
 &lt;/script&gt;\r
 </pre>\r
 <p>AudioContext instance supports various sound inputs, and it is possible to create an audio graph. You can create 1 or more sound sources to manage sound and connect to the sound destination.</p>\r
@@ -112,24 +112,24 @@
 <li><p>Create the audio buffer using the <code>createBuffer()</code> method:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var context = new webkitAudioContext();\r
-&nbsp;&nbsp;&nbsp;function setSound()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var url = &quot;sample_audio.mp3&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var request = new XMLHttpRequest();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.open(&quot;GET&quot;, url, true);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.responseType = &quot;arraybuffer&quot;;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Asynchronous callback */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.onload = function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the sound source */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource = context.createBufferSource();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundBuffer = context.createBuffer(request.response, true);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = soundBuffer;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.send();\r
-&nbsp;&nbsp;&nbsp;}\r
+   var context = new webkitAudioContext();\r
+   function setSound()\r
+   {\r
+      var url = "sample_audio.mp3";\r
+      var request = new XMLHttpRequest();\r
+      request.open("GET", url, true);\r
+      request.responseType = "arraybuffer";\r
+\r
+      /* Asynchronous callback */\r
+      request.onload = function()\r
+      {\r
+         /* Create the sound source */\r
+         soundSource = context.createBufferSource();\r
+         soundBuffer = context.createBuffer(request.response, true);\r
+         soundSource.buffer = soundBuffer;\r
+      };\r
+      request.send();\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
 <p>The <code>createBuffer()</code> method is used as a synchronous decoding method to create an audio buffer of the required size.</p>\r
@@ -138,32 +138,32 @@
 <li><p>Create the audio buffer using the <code>decodeAudioData()</code> method:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var context = new webkitAudioContext();\r
-&nbsp;&nbsp;&nbsp;function setSound()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var url = &quot;sample_audio.mp3&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var request = new XMLHttpRequest();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.open(&quot;GET&quot;, url, true);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.responseType = &quot;arraybuffer&quot;;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Asynchronous callback */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.onload = function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the sound source */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource = context.createBufferSource();\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Import a callback that provides PCM audio data\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   decoded as an audio buffer\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.decodeAudioData(request.response, function(buffer)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bufferData = buffer;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = bufferData;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, this.onDecodeError);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.send();\r
-&nbsp;&nbsp;&nbsp;}\r
+   var context = new webkitAudioContext();\r
+   function setSound()\r
+   {\r
+      var url = "sample_audio.mp3";\r
+      var request = new XMLHttpRequest();\r
+      request.open("GET", url, true);\r
+      request.responseType = "arraybuffer";\r
+\r
+      /* Asynchronous callback */\r
+      request.onload = function()\r
+      {\r
+         /* Create the sound source */\r
+         soundSource = context.createBufferSource();\r
+\r
+         /*\r
+            Import a callback that provides PCM audio data\r
+            decoded as an audio buffer\r
+         */\r
+         context.decodeAudioData(request.response, function(buffer)\r
+            {\r
+               bufferData = buffer;\r
+               soundSource.buffer = bufferData;\r
+            }, this.onDecodeError);\r
+      };\r
+      request.send();\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
 <p>The <code>decodeAudioData()</code> method asynchronously decodes audio data from the <a href="../communication/xmlhttprequest_w.htm">XMLHttpRequest</a> array buffer. Since this method does not prevent the execution of JavaScript threads, consider using it instead of the <code>createBuffer()</code> method.</p>\r
@@ -189,23 +189,23 @@
 <li><p>Create a WebKit-based <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> instance:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var context;\r
-&nbsp;&nbsp;&nbsp;context = new webkitAudioContext();\r
+   var context;\r
+   context = new webkitAudioContext();\r
 </pre>\r
 </li>\r
 <li><p>Route a single audio source directly to the output:</p>\r
 <pre class="prettyprint">\r
-&nbsp;&nbsp;&nbsp;var soundSource;\r
+   var soundSource;\r
 \r
-&nbsp;&nbsp;&nbsp;function startSound(audioData)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource = context.createBufferSource();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = soundBuffer;\r
+   function startSound(audioData)\r
+   {\r
+      soundSource = context.createBufferSource();\r
+      soundSource.buffer = soundBuffer;\r
 \r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Direct routing to speaker */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.connect(volumeNode);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;volumeNode.connect(context.destination);\r
-&nbsp;&nbsp;&nbsp;}\r
+      /* Direct routing to speaker */\r
+      soundSource.connect(volumeNode);\r
+      volumeNode.connect(context.destination);\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
 <p>All routing occurs within an <code>AudioContext</code> containing a single <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioDestinationNode-section" target="_blank">AudioDestinationNode</a>.</p>\r
@@ -220,31 +220,31 @@
 <li><p>Create an <code>AudioContext</code> instance:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var context;\r
-&nbsp;&nbsp;&nbsp;context = new webkitAudioContext();\r
+   var context;\r
+   context = new webkitAudioContext();\r
 </pre>\r
 </li>\r
 <li><p>Create the sound source:</p>\r
 <pre class="prettyprint lang-js">\r
-&nbsp;&nbsp;&nbsp;function startSound(audioData)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource = context.createBufferSource();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundBuffer = context.createBuffer(audioData, true);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = soundBuffer;\r
+   function startSound(audioData)\r
+   {\r
+      soundSource = context.createBufferSource();\r
+      soundBuffer = context.createBuffer(audioData, true);\r
+      soundSource.buffer = soundBuffer;\r
 \r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;volumeNode = context.createGainNode();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter = context.createBiquadFilter();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audioAnalyser = context.createAnalyser();\r
+      volumeNode = context.createGainNode();\r
+      filter = context.createBiquadFilter();\r
+      audioAnalyser = context.createAnalyser();\r
 \r
 </pre>\r
 </li>\r
 <li><p>Create the node to manage the output, for example, adjusting volume and applying filters:</p>\r
 <pre class="prettyprint lang-js">\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.connect(volumeNode);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;volumeNode.connect(filter);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter.connect(audioAnalyser);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audioAnalyser.connect(context.destination);\r
-&nbsp;&nbsp;&nbsp;}\r
+      soundSource.connect(volumeNode);\r
+      volumeNode.connect(filter);\r
+      filter.connect(audioAnalyser);\r
+      audioAnalyser.connect(context.destination);\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
 \r
@@ -270,24 +270,24 @@
 <li><p>Create a WebKit-based <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> instance:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var context;\r
-&nbsp;&nbsp;&nbsp;context = new webkitAudioContext();\r
+   var context;\r
+   context = new webkitAudioContext();\r
 </pre>\r
 </li>\r
 <li><p>Play audio through direct sound destination using the <code>noteOn()</code> method:</p>\r
 <pre class="prettyprint">\r
-&nbsp;&nbsp;&nbsp;function playSound()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var soundSource = context.createBufferSource();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.buffer = soundBuffer;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.connect(context.destination);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;soundSource.noteOn(context.currentTime);\r
-&nbsp;&nbsp;&nbsp;}\r
+   function playSound()\r
+   {\r
+      var soundSource = context.createBufferSource();\r
+      soundSource.buffer = soundBuffer;\r
+      soundSource.connect(context.destination);\r
+      soundSource.noteOn(context.currentTime);\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
-<p>Use time as parameter of the <code>noteOn()</code> method. Time is based on the <code>currentTime</code> property of the <code>AudioContext</code>, and expressed in seconds. If you set the value as &#39;0&#39;, the playback begins immediately.</p>\r
+<p>Use time as parameter of the <code>noteOn()</code> method. Time is based on the <code>currentTime</code> property of the <code>AudioContext</code>, and expressed in seconds. If you set the value as '0', the playback begins immediately.</p>\r
 \r
-<p>You can also use time as parameter of the <code>noteOff()</code> method. If you set the value as &#39;0&#39;, the playback stops immediately.</p>\r
+<p>You can also use time as parameter of the <code>noteOff()</code> method. If you set the value as '0', the playback stops immediately.</p>\r
 </li>\r
 </ol>\r
 \r
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
index 9ad269b..7841efe 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
@@ -49,70 +49,70 @@
        \r
 <p>The following example HTML code has been used as a basis when describing the techniques:</p>\r
 <pre class="prettyprint">\r
-&lt;div id=&quot;contents&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;div id="contents"&gt;\r
+   &lt;h3&gt;Selector Test&lt;/h3&gt;\r
+   &lt;ul id="contents_list"&gt;\r
+      &lt;li&gt;List 1&lt;/li&gt;\r
+      &lt;li&gt;List 2&lt;/li&gt;\r
+      &lt;li&gt;List 3&lt;/li&gt;\r
+   &lt;/ul&gt;\r
+   &lt;button id="search_dom" class="blue"&gt;Search DOM&lt;/button&gt;\r
 &lt;/div&gt;\r
-&lt;div id=&quot;contents1&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list1&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom1&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;div id="contents1"&gt;\r
+   &lt;h3&gt;Selector Test&lt;/h3&gt;\r
+   &lt;ul id="contents_list1"&gt;\r
+      &lt;li&gt;List 1&lt;/li&gt;\r
+      &lt;li&gt;List 2&lt;/li&gt;\r
+      &lt;li&gt;List 3&lt;/li&gt;\r
+   &lt;/ul&gt;\r
+   &lt;button id="search_dom1" class="blue"&gt;Search DOM&lt;/button&gt;\r
 &lt;/div&gt;\r
-&lt;div id=&quot;contents2&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list2&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom2&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;div id="contents2"&gt;\r
+   &lt;h3&gt;Selector Test&lt;/h3&gt;\r
+   &lt;ul id="contents_list2"&gt;\r
+      &lt;li&gt;List 1&lt;/li&gt;\r
+      &lt;li&gt;List 2&lt;/li&gt;\r
+      &lt;li&gt;List 3&lt;/li&gt;\r
+   &lt;/ul&gt;\r
+   &lt;button id="search_dom2" class="blue"&gt;Search DOM&lt;/button&gt;\r
 &lt;/div&gt;\r
-&lt;div id=&quot;contents3&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list3&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom3&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;div id="contents3"&gt;\r
+   &lt;h3&gt;Selector Test&lt;/h3&gt;\r
+   &lt;ul id="contents_list3"&gt;\r
+      &lt;li&gt;List 1&lt;/li&gt;\r
+      &lt;li&gt;List 2&lt;/li&gt;\r
+      &lt;li&gt;List 3&lt;/li&gt;\r
+   &lt;/ul&gt;\r
+   &lt;button id="search_dom3" class="blue"&gt;Search DOM&lt;/button&gt;\r
 &lt;/div&gt;\r
-&lt;div id=&quot;contents4&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list4&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom4&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;div id="contents4"&gt;\r
+   &lt;h3&gt;Selector Test&lt;/h3&gt;\r
+   &lt;ul id="contents_list4"&gt;\r
+      &lt;li&gt;List 1&lt;/li&gt;\r
+      &lt;li&gt;List 2&lt;/li&gt;\r
+      &lt;li&gt;List 3&lt;/li&gt;\r
+   &lt;/ul&gt;\r
+   &lt;button id="search_dom4" class="blue"&gt;Search DOM&lt;/button&gt;\r
 &lt;/div&gt;\r
-&lt;div id=&quot;contents5&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Selector Test&lt;/h3&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;contents_list5&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 1&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 2&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List 3&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;search_dom5&quot; class=&quot;blue&quot;&gt;Search DOM&lt;/button&gt;\r
+&lt;div id="contents5"&gt;\r
+   &lt;h3&gt;Selector Test&lt;/h3&gt;\r
+   &lt;ul id="contents_list5"&gt;\r
+      &lt;li&gt;List 1&lt;/li&gt;\r
+      &lt;li&gt;List 2&lt;/li&gt;\r
+      &lt;li&gt;List 3&lt;/li&gt;\r
+   &lt;/ul&gt;\r
+   &lt;button id="search_dom5" class="blue"&gt;Search DOM&lt;/button&gt;\r
 &lt;/div&gt;\r
 </pre>\r
  <h2 id="selector" name="selector">Using Selectors</h2>\r
 <p> When navigating a specific element, use an ID selector prior to other selectors, such as tags and classes. The following example shows how using an ID selector improves performance.</p>\r
 <pre class="prettyprint">\r
 /* Code#1 */\r
-var search_button = $(&#39;button&#39;);\r
+var search_button = $('button');\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#2 */\r
-var search_button = $(&#39;#contents button&#39;);\r
+var search_button = $('#contents button');\r
 </pre>\r
 <p align="center"><strong>Figure: jQuery performance improvement result (in mobile applications only)</strong></p> \r
 <p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector1.png" /></p> \r
@@ -135,15 +135,15 @@ var search_button = $(&#39;#contents button&#39;);
 <p> When using a class selector, apply a tag preceded by the class name. The following example shows how using a tag improves performance.</p>\r
 <pre class="prettyprint">\r
 /* Code#1 */\r
-var search_button = $(&#39;.blue&#39;);\r
+var search_button = $('.blue');\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#2 */\r
-var search_button = $(&#39;button.blue&#39;);\r
+var search_button = $('button.blue');\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#3 */\r
-var search_button = $(&#39;#contents button.blue&#39;);\r
+var search_button = $('#contents button.blue');\r
 </pre>\r
 <p align="center"><strong>Figure: jQuery performance improvement result (in mobile applications only)</strong></p> \r
 <p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector2.png" /></p>\r
@@ -171,16 +171,16 @@ var search_button = $(&#39;#contents button.blue&#39;);
 <p>The following example shows how using a cache improves performance.</p>\r
 <pre class="prettyprint">\r
 /* Code#1 */\r
-$(&quot;#search_dom&quot;).on(&#39;click&#39;, function() {});\r
-$(&quot;#search_dom&quot;).removeClass(&#39;blue&#39;);\r
-$(&quot;#search_dom&quot;).addClass(&#39;red&#39;);\r
+$("#search_dom").on('click', function() {});\r
+$("#search_dom").removeClass('blue');\r
+$("#search_dom").addClass('red');\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#2 */\r
-var $search_button = $(&quot;#search_dom&quot;);\r
-$search_button.on(&#39;click&#39;, function() {});\r
-$search_button.removeClass(&#39;blue&#39;);\r
-$search_button.addClass(&#39;red&#39;);\r
+var $search_button = $("#search_dom");\r
+$search_button.on('click', function() {});\r
+$search_button.removeClass('blue');\r
+$search_button.addClass('red');\r
 </pre>\r
 <p align="center"><strong>Figure: jQuery performance improvement result (in mobile applications only)</strong></p> \r
 <p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_cache.png" /></p> \r
@@ -205,13 +205,13 @@ $search_button.addClass(&#39;red&#39;);
 <p>When a DOM element is changed, chaining ties similar object references into groups for execution. jQuery objects need not be repeatedly created as existing ones can be reused. The following example shows how chaining improves performance.</p>\r
 <pre class="prettyprint">\r
 /* Code#1 */\r
-$(&quot;#contents&quot;).addClass(&#39;active&#39;);\r
-$(&quot;#contents&quot;).css(&#39;border&#39;, &#39;1px solid&#39;);\r
-$(&quot;#contents&quot;).(&#39;background-color&#39;, &#39;red&#39;);\r
+$("#contents").addClass('active');\r
+$("#contents").css('border', '1px solid');\r
+$("#contents").('background-color', 'red');\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#2 */\r
-$(&quot;#contents&quot;).addClass(&#39;active&#39;).css(&#39;border&#39;, &#39;1px solid&#39;).(&#39;background-color&#39;, &#39;red&#39;);\r
+$("#contents").addClass('active').css('border', '1px solid').('background-color', 'red');\r
 </pre>\r
 <p align="center"><strong>Figure: jQuery performance improvement result (in mobile applications only)</strong></p> \r
 <p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_chaining.png" /></p> \r
@@ -236,23 +236,23 @@ $(&quot;#contents&quot;).addClass(&#39;active&#39;).css(&#39;border&#39;, &#39;1
 <p>The following example shows how applying DOM control improves performance.</p>\r
 <pre class="prettyprint">\r
 /* Code#1 */\r
-var $contents_list = $(&#39;#contents_list&#39;),\r
-&nbsp;&nbsp;&nbsp;&nbsp;array_list = [...];\r
+var $contents_list = $('#contents_list'),\r
+    array_list = [...];\r
 \r
 for (var i = 0, len = array_list.length; i &lt; len; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;$contents_list.append(&#39;&lt;li&gt;&#39; + array_list[i] + &#39;&lt;/li&gt;&#39;);\r
+   $contents_list.append('&lt;li&gt;' + array_list[i] + '&lt;/li&gt;');\r
 }\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#2 */\r
-var $contents_list = $(&#39;#contents_list&#39;),\r
-&nbsp;&nbsp;&nbsp;&nbsp;array_list = [...],\r
-&nbsp;&nbsp;&nbsp;&nbsp;list = &#39;&#39;;\r
+var $contents_list = $('#contents_list'),\r
+    array_list = [...],\r
+    list = '';\r
 \r
 for (var i = 0, len = array_list.length; i &lt; len; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;list += &#39;&lt;li&gt;&#39; + array_list[i] + &#39;&lt;/li&gt;&#39;;\r
+   list += '&lt;li&gt;' + array_list[i] + '&lt;/li&gt;';\r
 }\r
 $contents_list.append(list);\r
 </pre>\r
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
index cb7b09e..a416804 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm
@@ -54,22 +54,22 @@
 <pre class="prettyprint">\r
 /* Code#1 */\r
 var array_list = [0,1,2,3,4,5,6,7,8,9],\r
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];\r
+    new_array_list = [];\r
 \r
 for (var i = 0, len = array_list.length; i &lt; len; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);\r
-&nbsp;&nbsp;&nbsp;console.log(array_list[i]);\r
+   new_array_list.push(array_list[i]);\r
+   console.log(array_list[i]);\r
 }\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#2 */\r
 var array_list = [0,1,2,3,4,5,6,7,8,9],\r
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];\r
+    new_array_list = [];\r
 \r
 for (var i = 0, len = array_list.length; i &lt; len; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i])\r
+   new_array_list.push(array_list[i])\r
 }\r
 </pre>\r
 <p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p> \r
@@ -95,20 +95,20 @@ for (var i = 0, len = array_list.length; i &lt; len; i++)
 <pre class="prettyprint">\r
 /* Code#1 */\r
 var array_list = [0,1,2,3,4,5,6,7,8,9],\r
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];\r
+    new_array_list = [];\r
 for (var idx in array_list)\r
 {\r
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[idx]);\r
+   new_array_list.push(array_list[idx]);\r
 }\r
 </pre>\r
 \r
 <pre class="prettyprint">\r
 /* Code#2 */\r
 var array_list = [0,1,2,3,4,5,6,7,8,9],\r
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [];\r
+    new_array_list = [];\r
 for (var i = 0, len = array_list.length; i &lt; len; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);\r
+   new_array_list.push(array_list[i]);\r
 }\r
 </pre>\r
 <p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p> \r
@@ -139,30 +139,30 @@ for (var i = 0, len = array_list.length; i &lt; len; i++)
 <pre class="prettyprint">\r
 /* Code#1 */\r
 var array_list = [],\r
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [],\r
-&nbsp;&nbsp;&nbsp;&nbsp;i = 0;\r
+    new_array_list = [],\r
+    i = 0;\r
 for (i = 0; i &lt; 100; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;array_list.push(i);\r
+   array_list.push(i);\r
 }\r
 for (i = 0; i &lt; array_list.length; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);\r
+   new_array_list.push(array_list[i]);\r
 }\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#2 */\r
 var array_list = [],\r
-&nbsp;&nbsp;&nbsp;&nbsp;new_array_list = [],\r
-&nbsp;&nbsp;&nbsp;&nbsp;i = 0,\r
-&nbsp;&nbsp;&nbsp;&nbsp;arrayLen = 0;\r
+    new_array_list = [],\r
+    i = 0,\r
+    arrayLen = 0;\r
 for (i = 0; i &lt; 100; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;array_list.push(i);\r
+   array_list.push(i);\r
 }\r
 for (i = 0, arrayLen = array_list.length; i &lt; arrayLen; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;new_array_list.push(array_list[i]);\r
+   new_array_list.push(array_list[i]);\r
 }\r
 </pre>\r
 <p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p> \r
@@ -187,18 +187,18 @@ for (i = 0, arrayLen = array_list.length; i &lt; arrayLen; i++)
 <p> Using literal expressions instead of newly created ones improves the JavaScript performance. Literal expressions are optimized for modern browser engines. They reduce the amount of interpretation time of the JavaScript interpreter. The following example shows how using literal expressions improves performance.</p>\r
 <pre class="prettyprint">\r
 /* Code#1 */\r
-var str = &quot;&quot;;\r
+var str = "";\r
 for (var i = 0; i &lt; 100; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;str = new String(&quot;abcd&quot;);\r
+   str = new String("abcd");\r
 }\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#2 */\r
-var str = &quot;&quot;;\r
+var str = "";\r
 for (var i = 0; i &lt; 100; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;str = &quot;abcd&quot;;\r
+   str = "abcd";\r
 }\r
 </pre>\r
 \r
@@ -226,27 +226,27 @@ for (var i = 0; i &lt; 100; i++)
 <p>The following example shows how applying DOM control improves performance.</p>\r
 <pre class="prettyprint">\r
 /* Code#1 */\r
-var id = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;id&#39;);\r
-var name = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;name&#39;);\r
-var style = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;style&#39;);\r
+var id = document.getElementById('contents_list').getAttribute('id');\r
+var name = document.getElementById('contents_list').getAttribute('name');\r
+var style = document.getElementById('contents_list').getAttribute('style');\r
 for (var i = 0; i &lt; 100; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;id = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;id&#39;);\r
-&nbsp;&nbsp;&nbsp;name = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;name&#39;);\r
-&nbsp;&nbsp;&nbsp;style = document.getElementById(&#39;contents_list&#39;).getAttribute(&#39;style&#39;);\r
+   id = document.getElementById('contents_list').getAttribute('id');\r
+   name = document.getElementById('contents_list').getAttribute('name');\r
+   style = document.getElementById('contents_list').getAttribute('style');\r
 }\r
 </pre>\r
 <pre class="prettyprint">\r
 /* Code#2 */\r
-var contents_list = document.getElementById(&#39;contents_list&#39;);\r
-var id = contents_list.getAttribute(&#39;id&#39;);\r
-var name = contents_list.getAttribute(&#39;name&#39;);\r
-var style = contents_list.getAttribute(&#39;style&#39;);\r
+var contents_list = document.getElementById('contents_list');\r
+var id = contents_list.getAttribute('id');\r
+var name = contents_list.getAttribute('name');\r
+var style = contents_list.getAttribute('style');\r
 for (var i = 0; i &lt; 100; i++)\r
 {\r
-&nbsp;&nbsp;&nbsp;id = contents_list.getAttribute(&#39;id&#39;);\r
-&nbsp;&nbsp;&nbsp;name = contents_list.getAttribute(&#39;name&#39;);\r
-&nbsp;&nbsp;&nbsp;style = contents_list.getAttribute(&#39;style&#39;);\r
+   id = contents_list.getAttribute('id');\r
+   name = contents_list.getAttribute('name');\r
+   style = contents_list.getAttribute('style');\r
 }\r
 </pre>\r
 <p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p> \r
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
index 4736621..97ca3e3 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm
@@ -71,21 +71,21 @@
     <li><p>Retrieve the page visibility status with the <code>hidden</code> property:  </p>\r
 <pre class="prettyprint lang-js">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var logText = document.querySelector(&#39;.log&#39;);\r
+   var logText = document.querySelector('.log');\r
 \r
-&nbsp;&nbsp;&nbsp;function pageVisibilityHandler()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logText.innerHTML +=\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;p&gt;Hidden: &lt;span&gt;&#39; + document.webkitHidden; + &#39;&lt;/span&gt;&lt;/p&gt;&#39;;\r
+   function pageVisibilityHandler()\r
+   {\r
+      logText.innerHTML +=\r
+         '&lt;p&gt;Hidden: &lt;span&gt;' + document.webkitHidden; + '&lt;/span&gt;&lt;/p&gt;';\r
 </pre>\r
-    <p>The <code>hidden</code> property returns <code>true</code> if the document in the top-level browsing context (root window in the browser&#39;s viewport) [HTML5] is not visible at all. If the document is at least partially visible, the property returns <code>false</code>.</p> \r
+    <p>The <code>hidden</code> property returns <code>true</code> if the document in the top-level browsing context (root window in the browser's viewport) [HTML5] is not visible at all. If the document is at least partially visible, the property returns <code>false</code>.</p> \r
     </li>\r
     <li><p>Retrieve the page visibility status with the <code>visibilityState</code> property:</p>  \r
 <pre class="prettyprint lang-js">\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logText.innerHTML +=\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;p&gt;VisibilityState: &lt;span&gt;&#39; + document.webkitVisibilityState;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &#39;&lt;/span&gt;&lt;/p&gt;&#39;;\r
-&nbsp;&nbsp;&nbsp;}\r
+      logText.innerHTML +=\r
+         '&lt;p&gt;VisibilityState: &lt;span&gt;' + document.webkitVisibilityState;\r
+         + '&lt;/span&gt;&lt;/p&gt;';\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
        <p>The <code>visibilityState</code> property returns one of the following DOMString types:</p>\r
@@ -120,67 +120,67 @@
        <li><p>Define the elements used to play video on the screen:</p>\r
 <pre class="prettyprint">\r
 &lt;!--video control--&gt;\r
-&lt;div class=&quot;media&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; src=&quot;video_sample.mp4&quot; width=&quot;360&quot; height=&quot;220&quot;&gt;&lt;/video&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--video control buttons--&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-play&quot; type=&quot;button&quot;&gt;play&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=&quot;v-pause&quot; type=&quot;button&quot; disabled &gt;pause&lt;/button&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
+&lt;div class="media"&gt;\r
+   &lt;video id="video" src="video_sample.mp4" width="360" height="220"&gt;&lt;/video&gt;\r
+   &lt;div&gt;\r
+      &lt;!--video control buttons--&gt;\r
+      &lt;button id="v-play" type="button"&gt;play&lt;/button&gt;\r
+      &lt;button id="v-pause" type="button" disabled &gt;pause&lt;/button&gt;\r
+   &lt;/div&gt;\r
 &lt;/div&gt;\r
 </pre>\r
        </li>\r
        <li><p>Add event listeners to play and pause the video based on the button clicks:</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var play_button = document.getElementById(&quot;v-play&quot;);\r
-&nbsp;&nbsp;&nbsp;var pause_button = document.getElementById(&quot;v-pause&quot;);\r
-&nbsp;&nbsp;&nbsp;var video = document.getElementById(&quot;video&quot;);\r
-\r
-&nbsp;&nbsp;&nbsp;play_button.addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.play(); /* Play video */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;pause_button.addEventListener(&quot;click&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.pause(); /* Pause video */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;/* Enable and disable buttons based on the playback status */\r
-&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;play&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = true; /* Disable play button */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = false; /* Enable pause button */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;video.addEventListener(&quot;pause&quot;, function()\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;play_button.disabled = false; /* Enable play button */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pause_button.disabled = true; /* Disable pause button */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+   var play_button = document.getElementById("v-play");\r
+   var pause_button = document.getElementById("v-pause");\r
+   var video = document.getElementById("video");\r
+\r
+   play_button.addEventListener("click", function()\r
+      {\r
+         video.play(); /* Play video */\r
+      }, false);\r
+\r
+   pause_button.addEventListener("click", function()\r
+      {\r
+         video.pause(); /* Pause video */\r
+      }, false);\r
+\r
+   /* Enable and disable buttons based on the playback status */\r
+   video.addEventListener("play", function()\r
+      {\r
+         play_button.disabled = true; /* Disable play button */\r
+         pause_button.disabled = false; /* Enable pause button */\r
+      }, false);\r
+\r
+   video.addEventListener("pause", function()\r
+      {\r
+         play_button.disabled = false; /* Enable play button */\r
+         pause_button.disabled = true; /* Disable pause button */\r
+      }, false);\r
 &lt;/script&gt;\r
 </pre>\r
        </li>\r
        <li><p>Add an event listener to track the page visibility status changes. When the status changes and the <code>visibilityChange</code> event is triggered, use the <code>hidden</code> property to check whether the page is hidden or visible, and to play or pause the video accordingly.</p>\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;/* Add visibility status event listener */\r
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;webkitvisibilitychange&quot;, pageVisibilityHandler, false);\r
-\r
-&nbsp;&nbsp;&nbsp;/* When the visibility status changes */\r
-&nbsp;&nbsp;&nbsp;function pageVisibilityHandler()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Check whether the page is hidden */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!(document.webkitHidden))\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.play(); /* Play video */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.pause(); /* Pause video */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;}\r
+   /* Add visibility status event listener */\r
+   document.addEventListener("webkitvisibilitychange", pageVisibilityHandler, false);\r
+\r
+   /* When the visibility status changes */\r
+   function pageVisibilityHandler()\r
+   {\r
+      /* Check whether the page is hidden */\r
+      if (!(document.webkitHidden))\r
+      {\r
+         video.play(); /* Play video */\r
+      }\r
+      else\r
+      {\r
+         video.pause(); /* Pause video */\r
+      }\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
        </li>\r
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
index bdbf2b6..69a0856 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm
@@ -51,14 +51,14 @@
        In mobile applications, when using the emulator, you must include the  <code>webkit</code> prefix in method names, such as <code>window.performance.webkitNow()</code>. However, when using a device, the prefix must not be used. In addition, when using the emulator, methods assigned to variables must be formatted as follows:\r
 <pre class="prettyprint">\r
 window.performance.windowNow =\r
-&nbsp;&nbsp;&nbsp;window.performance.now || window.performance.webkitNow || Date.now;\r
+   window.performance.now || window.performance.webkitNow || Date.now;\r
 window.performance.windowNow();\r
 </pre>\r
 \r
 <p>In wearable applications, when you are using the emulator and want to support backward compatibility, methods assigned to variables must be formatted as follows:</p>\r
 <pre class="prettyprint">\r
 window.performance.windowNow =\r
-&nbsp;&nbsp;&nbsp;window.performance.now || window.performance.webkitNow || Date.now;\r
+   window.performance.now || window.performance.webkitNow || Date.now;\r
 window.performance.windowNow();\r
 </pre>\r
 </div>\r
@@ -73,14 +73,14 @@ window.performance.windowNow();
                <li><p>Create the HTML layout, including a <code>&lt;nav&gt;</code> element with 3 buttons and <code>&lt;div&gt;</code> elements for the pinwheel image and text:</p>\r
 <pre class="prettyprint">\r
 &lt;nav&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; id=&quot;leftBtn&quot; class=&quot;btn&quot;&gt;Left&lt;/a&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; id=&quot;playstopBtn&quot; class=&quot;btn&quot;&gt;Stop&lt;/a&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot; id=&quot;rightBtn&quot; class=&quot;btn&quot;&gt;Right&lt;/a&gt;\r
+   &lt;a href="#" id="leftBtn" class="btn"&gt;Left&lt;/a&gt;\r
+   &lt;a href="#" id="playstopBtn" class="btn"&gt;Stop&lt;/a&gt;\r
+   &lt;a href="#" id="rightBtn" class="btn"&gt;Right&lt;/a&gt;\r
 &lt;/nav&gt;\r
 \r
-&lt;div id=&quot;pinwheel&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;rotateBackground&quot;&gt;&lt;/div&gt;\r
-&nbsp;&nbsp;&nbsp;TIZEN OS\r
+&lt;div id="pinwheel"&gt;\r
+   &lt;div id="rotateBackground"&gt;&lt;/div&gt;\r
+   TIZEN OS\r
 &lt;/div&gt;\r
 </pre>\r
                </li>\r
@@ -90,69 +90,69 @@ window.performance.windowNow();
 <pre class="prettyprint">\r
 body\r
 {\r
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;\r
-&nbsp;&nbsp;&nbsp;-webkit-flex-direction: column;\r
+   display: -webkit-flex;\r
+   -webkit-flex-direction: column;\r
 }\r
 \r
 nav\r
 {\r
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;\r
-&nbsp;&nbsp;&nbsp;-webkit-flex-direction: row;\r
-&nbsp;&nbsp;&nbsp;-webkit-align-content: stretch;\r
-&nbsp;&nbsp;&nbsp;width: 100%;\r
+   display: -webkit-flex;\r
+   -webkit-flex-direction: row;\r
+   -webkit-align-content: stretch;\r
+   width: 100%;\r
 }\r
 </pre></li>\r
                                <li><p>To enable the rotation of the background, define the <code>pinwheel</code> element in relation to its children, and set its size to change according to the display size. Define the <code>rotateBackground</code> element to have a fixed size depending on the display size:</p>\r
 <pre class="prettyprint">\r
 #pinwheel\r
 {\r
-&nbsp;&nbsp;&nbsp;width: 90vw;\r
-&nbsp;&nbsp;&nbsp;height: 80vh;\r
-&nbsp;&nbsp;&nbsp;position: relative;\r
-&nbsp;&nbsp;&nbsp;overflow: hidden;\r
-&nbsp;&nbsp;&nbsp;line-height: 80vh;\r
-&nbsp;&nbsp;&nbsp;text-align: center;\r
+   width: 90vw;\r
+   height: 80vh;\r
+   position: relative;\r
+   overflow: hidden;\r
+   line-height: 80vh;\r
+   text-align: center;\r
 }\r
 \r
 #rotateBackground\r
 {\r
-&nbsp;&nbsp;&nbsp;background: url(images/Tizen-Pinwheel-On-Dark-RGB.png) no-repeat center;\r
-&nbsp;&nbsp;&nbsp;background-size: 90vw;\r
-&nbsp;&nbsp;&nbsp;content: &quot;&quot;;\r
-&nbsp;&nbsp;&nbsp;position: absolute;\r
-&nbsp;&nbsp;&nbsp;width: 90vw;\r
-&nbsp;&nbsp;&nbsp;height: 90vh;\r
-&nbsp;&nbsp;&nbsp;z-index: -1;\r
+   background: url(images/Tizen-Pinwheel-On-Dark-RGB.png) no-repeat center;\r
+   background-size: 90vw;\r
+   content: "";\r
+   position: absolute;\r
+   width: 90vw;\r
+   height: 90vh;\r
+   z-index: -1;\r
 }\r
 </pre></li>\r
                        </ol>\r
                </li>\r
                <li><p>Declare the variables used in the application:</p>\r
 <pre class="prettyprint lang-js">\r
-&lt;script type=&quot;text/javascript&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;var leftDiv, rightDiv, playstopDiv,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerRequest, rotateBackgroundDiv, rotation = 0, speed = -1;\r
+&lt;script type="text/javascript"&gt;\r
+   var leftDiv, rightDiv, playstopDiv,\r
+       handlerRequest, rotateBackgroundDiv, rotation = 0, speed = -1;\r
 &lt;/script&gt;\r
 </pre>\r
                <p>The <code>leftDiv</code>, <code>rightDiv</code>, <code>playstopDiv</code>, and <code>rotateBackgroundDiv</code> variables contain DOM elements from the application UI. The <code>handlerRequest</code> variable handles the <code>requestAnimationFrame()</code> requests. The <code>rotation</code> variable is the current angle of the pinwheel, and the <code>speed</code> variable is the rotation speed in degrees per frame.</p>\r
                </li>\r
                <li><p>Create a DOM object for the <strong>Play</strong> or <strong>Stop</strong> button and define button events:</p>\r
 <pre class="prettyprint">\r
-playstopDiv = document.getElementById(&quot;playstopBtn&quot;);\r
+playstopDiv = document.getElementById("playstopBtn");\r
 \r
 playstopDiv.onclick = function()\r
 {\r
-&nbsp;&nbsp;&nbsp;if (handlerRequest)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.webkitCancelRequestAnimationFrame(handlerRequest);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerRequest = 0;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;playstopDiv.innerHTML = &quot;Play&quot;;\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;playstopDiv.innerHTML = &quot;Stop&quot;;\r
-&nbsp;&nbsp;&nbsp;}\r
+   if (handlerRequest)\r
+   {\r
+      window.webkitCancelRequestAnimationFrame(handlerRequest);\r
+      handlerRequest = 0;\r
+      playstopDiv.innerHTML = "Play";\r
+   }\r
+   else\r
+   {\r
+      handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
+      playstopDiv.innerHTML = "Stop";\r
+   }\r
 }\r
 </pre>\r
                <p>When the <code>handlerRequest</code> variable returns <code>true</code>, the animation is played. Clicking the button calls the <code>cancelRequestAnimationFrame()</code> method to stop the animation. The <code>handlerRequest</code> is reset to value 0, and the button text changes from <strong>Stop</strong> to <strong>Play</strong>.</p>  \r
@@ -162,33 +162,33 @@ playstopDiv.onclick = function()
 <pre class="prettyprint">\r
 function nextFrame(arg)\r
 {\r
-&nbsp;&nbsp;&nbsp;rotation += speed;\r
-\r
-&nbsp;&nbsp;&nbsp;if (rotation &gt; 360)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation -= 360;\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;else if (rotation &lt; -360)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotation += 360;\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;rotateBackgroundDiv.style.webkitTransform = &quot;rotate(&quot; + rotation + &quot;deg)&quot;;\r
-&nbsp;&nbsp;&nbsp;handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
+   rotation += speed;\r
+\r
+   if (rotation &gt; 360)\r
+   {\r
+      rotation -= 360;\r
+   }\r
+   else if (rotation &lt; -360)\r
+   {\r
+      rotation += 360;\r
+   }\r
+   rotateBackgroundDiv.style.webkitTransform = "rotate(" + rotation + "deg)";\r
+   handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
 }\r
 </pre>\r
                <p>The callback method is automatically called before the screen is updated. To keep the animation going, the <code>requestAnimationFrame()</code> method is called at the end of the callback method. Because the callback is synchronized with screen updates, when application is in the background and not visible on the screen, the updates are not called and the animation stops.</p>\r
                </li>\r
                <li><p>Set events for the <strong>Left</strong> and <strong>Right</strong> buttons. Tapping the buttons increases or decreases the animation speed.</p>\r
 <pre class="prettyprint">\r
-leftDiv = document.getElementById(&quot;leftBtn&quot;);\r
+leftDiv = document.getElementById("leftBtn");\r
 leftDiv.onclick = function()\r
 {\r
-&nbsp;&nbsp;&nbsp;speed -= 0.5;\r
+   speed -= 0.5;\r
 }\r
-rightDiv = document.getElementById(&quot;rightBtn&quot;);\r
+rightDiv = document.getElementById("rightBtn");\r
 rightDiv.onclick = function()\r
 {\r
-&nbsp;&nbsp;&nbsp;speed += 0.5;\r
+   speed += 0.5;\r
 }\r
 handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
 </pre>\r
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
index 2f0d01b..c2b2d53 100644 (file)
--- a/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm
@@ -84,10 +84,10 @@ If a worker triggers a message event, the <code>onmessage()</code> event handler
 var n = 1;\r
 index: while (true)\r
 {\r
-&nbsp;&nbsp;&nbsp;n += 1;\r
-&nbsp;&nbsp;&nbsp;for (var i = 2; i &lt;= Math.sqrt(n); i += 1)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (n % i == 0) continue index;\r
-&nbsp;&nbsp;&nbsp;postMessage(n);\r
+   n += 1;\r
+   for (var i = 2; i &lt;= Math.sqrt(n); i += 1)\r
+      if (n % i == 0) continue index;\r
+   postMessage(n);\r
 }\r
 </pre>\r
                        <p>This JavaScript operation delivers the calculated value of the <code>Math.sqrt(n)</code> method to the <code>postMessage()</code> method. It cannot be used for continuous posting of the Boolean operation.</p>\r
@@ -95,21 +95,21 @@ index: while (true)
                        <li>\r
                        <p>Create a Web worker to be activated in the background. The JavaScript URL defining the worker needs to be delivered when creating the worker object:</p>\r
 <pre class="prettyprint lang-html">\r
-&lt;button type=&quot;button&quot; onclick=&quot;workerStart()&quot;&gt;Start&lt;/button&gt;\r
-&lt;button type=&quot;button&quot; onclick=&quot;worker.terminate()&quot;&gt;Stop&lt;/button&gt;\r
+&lt;button type="button" onclick="workerStart()"&gt;Start&lt;/button&gt;\r
+&lt;button type="button" onclick="worker.terminate()"&gt;Stop&lt;/button&gt;\r
 &lt;output&gt;&lt;/output&gt;\r
 </pre>\r
 <pre class="prettyprint lang-js">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var worker = new Worker(&quot;worker3.js&quot;);\r
-\r
-&nbsp;&nbsp;&nbsp;function workerStart()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.onmessage = function(e)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;output&quot;).textContent = e.data;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};\r
-&nbsp;&nbsp;&nbsp;}\r
+   var worker = new Worker("worker3.js");\r
+\r
+   function workerStart()\r
+   {\r
+      worker.onmessage = function(e)\r
+      {\r
+         document.querySelector("output").textContent = e.data;\r
+      };\r
+   }\r
 &lt;/script&gt;\r
 </pre>\r
                        <p>When the <strong>Start</strong> button is clicked, message data is received from the worker and displayed in the <code>&lt;output&gt;</code> element. When the <strong>Stop</strong> button is clicked, the worker is terminated.</p>\r
@@ -119,8 +119,8 @@ index: while (true)
                </li>\r
                <li>To create a subworker, use the <code>importScripts()</code> method:\r
 <pre class="prettyprint">\r
-importScripts(&#39;worker1.js&#39;);\r
-importScripts(&#39;worker1.js&#39;, &#39;worker2.js&#39;);\r
+importScripts('worker1.js');\r
+importScripts('worker1.js', 'worker2.js');\r
 </pre>\r
                <p>The subworker creates its own independent thread, and is activated in it, so it has the same restrictions as a host worker. This means that communication between subworkers is impossible, but a host worker can communicate with subworkers within the same object.</p>\r
                </li>\r
@@ -130,9 +130,9 @@ importScripts(&#39;worker1.js&#39;, &#39;worker2.js&#39;);
 <pre class="prettyprint">\r
 worker.onerror = function(e)\r
 {\r
-&nbsp;&nbsp;&nbsp;document.querySelectorAll(&quot;output&quot;)[1].textContent =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&#39;filename: &#39;, e.filename, &#39; lineno: &#39;, e.lineno, &#39; error: &#39;, e.message]\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.join(&#39; &#39;);\r
+   document.querySelectorAll("output")[1].textContent =\r
+      ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message]\r
+      .join(' ');\r
 };\r
 </pre>\r
                                </li>\r
@@ -140,12 +140,12 @@ worker.onerror = function(e)
 <pre class="prettyprint">\r
 function errorMessage(e)\r
 {\r
-&nbsp;&nbsp;&nbsp;document.querySelectorAll(&quot;output&quot;)[1].textContent =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&#39;filename: &#39;, e.filename, &#39; lineno: &#39;, e.lineno, &#39; error: &#39;, e.message]\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.join(&#39; &#39;);\r
+   document.querySelectorAll("output")[1].textContent =\r
+      ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message]\r
+      .join(' ');\r
 }\r
 \r
-worker.addEventListener(&#39;error&#39;, errorMessage, false);\r
+worker.addEventListener('error', errorMessage, false);\r
 </pre></li>\r
                        </ul>\r
                </li>\r
@@ -159,19 +159,19 @@ worker.addEventListener(&#39;error&#39;, errorMessage, false);
        <li>Send a message in one of the following ways:\r
                <ul>\r
                        <li>\r
-                       <p>Use the <code>postMessage()</code> method to send a &quot;Hello&quot; message to a Web worker:</p>\r
+                       <p>Use the <code>postMessage()</code> method to send a "Hello" message to a Web worker:</p>\r
 <pre class="prettyprint">\r
-var worker = new Worker(&#39;worker1.js&#39;);\r
-worker.postMessage(&quot;Hello&quot;);\r
+var worker = new Worker('worker1.js');\r
+worker.postMessage("Hello");\r
 </pre>\r
                        </li>\r
                        <li>\r
                        <p>Use the JSON format to send the message:</p>\r
 <pre class="prettyprint">\r
-var worker = new Worker(&#39;worker2.js&#39;);\r
+var worker = new Worker('worker2.js');\r
 worker.postMessage(\r
 {\r
-&nbsp;&nbsp;&nbsp;a: &quot;Hello&quot;, b: &quot;Tizen&quot;\r
+   a: "Hello", b: "Tizen"\r
 });\r
 </pre>\r
                        </li>\r
@@ -182,16 +182,16 @@ worker.postMessage(
 <pre class="prettyprint">\r
 worker.onmessage = function(e)\r
 {\r
-&nbsp;&nbsp;&nbsp;alert(e.data);\r
+   alert(e.data);\r
 };\r
 </pre>\r
                        </li>\r
                        <li><p>Use the <code>addEventListener()</code> method to listen to the event of receiving a message:</p>\r
 <pre class="prettyprint">\r
-worker.addEventListener(&quot;message&quot;, function(e)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(e.data);\r
-&nbsp;&nbsp;&nbsp;}, false);\r
+worker.addEventListener("message", function(e)\r
+   {\r
+      alert(e.data);\r
+   }, false);\r
 </pre>\r
                        </li>\r
                </ul>\r
@@ -202,7 +202,7 @@ worker.addEventListener(&quot;message&quot;, function(e)
 <pre class="prettyprint">\r
 self.onmessage = function(e)\r
 {\r
-&nbsp;&nbsp;&nbsp;self.postMessage(&quot;You say: &quot; + e.data);\r
+   self.postMessage("You say: " + e.data);\r
 };\r
 </pre>\r
                        </li>\r
@@ -210,15 +210,15 @@ self.onmessage = function(e)
 <pre class="prettyprint">\r
 self.onmessage = function(e)\r
 {\r
-&nbsp;&nbsp;&nbsp;var b = e.data.b;\r
-&nbsp;&nbsp;&nbsp;if (b === &quot;Tizen&quot;)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.postMessage(e.data.b + &quot; say: &quot; + e.data.a);\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.postMessage(&quot;You say: &quot; + e.data.a);\r
-&nbsp;&nbsp;&nbsp;}\r
+   var b = e.data.b;\r
+   if (b === "Tizen")\r
+   {\r
+      self.postMessage(e.data.b + " say: " + e.data.a);\r
+   }\r
+   else\r
+   {\r
+      self.postMessage("You say: " + e.data.a);\r
+   }\r
 };\r
 </pre>\r
                        </li>\r
@@ -254,44 +254,44 @@ self.onmessage = function(e)
 <pre class="prettyprint">\r
 function colorFilterStart()\r
 {\r
-&nbsp;&nbsp;&nbsp;var picture = document.getElementById(&#39;picture&#39;);\r
-&nbsp;&nbsp;&nbsp;var canvas = document.querySelector(&#39;canvas&#39;);\r
-&nbsp;&nbsp;&nbsp;canvas.width = document.width;\r
-&nbsp;&nbsp;&nbsp;canvas.height = picture.clientHeight;\r
-&nbsp;&nbsp;&nbsp;var tempContext = canvas.getContext(&quot;2d&quot;);\r
-&nbsp;&nbsp;&nbsp;tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
-&nbsp;&nbsp;&nbsp;var pixels = canvas.width * canvas.height * 4;\r
-&nbsp;&nbsp;&nbsp;var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);\r
-&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;\r
-&nbsp;&nbsp;&nbsp;var timeStart = new Date();\r
-\r
-&nbsp;&nbsp;&nbsp;colorFilter(binaryData, pixels);\r
-&nbsp;&nbsp;&nbsp;tempContext.putImageData(canvasData, 0, 0);\r
-&nbsp;&nbsp;&nbsp;var timeDiffer = new Date() - timeStart;\r
-&nbsp;&nbsp;&nbsp;message.innerHTML = timeDiffer + &quot; ms&quot;;\r
+   var picture = document.getElementById('picture');\r
+   var canvas = document.querySelector('canvas');\r
+   canvas.width = document.width;\r
+   canvas.height = picture.clientHeight;\r
+   var tempContext = canvas.getContext("2d");\r
+   tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
+   var pixels = canvas.width * canvas.height * 4;\r
+   var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);\r
+   var binaryData = canvasData.data;\r
+   var timeStart = new Date();\r
+\r
+   colorFilter(binaryData, pixels);\r
+   tempContext.putImageData(canvasData, 0, 0);\r
+   var timeDiffer = new Date() - timeStart;\r
+   message.innerHTML = timeDiffer + " ms";\r
 };\r
 \r
 function colorChange(scale, gab, position)\r
 {\r
-&nbsp;&nbsp;&nbsp;return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
+   return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
 };\r
 \r
 function colorFilter(binaryData, pixels)\r
 {\r
-&nbsp;&nbsp;&nbsp;var data = binaryData;\r
-&nbsp;&nbsp;&nbsp;var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; pixels; i += .5)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i] =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorChange(Math.random() * 0.5 + 0.5, (data[i] * colorValue)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.769) + (data[i + 2] * 0.189), data[i]);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 1] =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.349)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.686) + (data[i + 2] * 0.168), data[i + 1]);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 2] =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.272)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.534) + (data[i + 2] * 0.131), data[i + 2]);\r
-&nbsp;&nbsp;&nbsp;}\r
+   var data = binaryData;\r
+   var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
+   for (var i = 0; i &lt; pixels; i += .5)\r
+   {\r
+      binaryData[i] =\r
+         colorChange(Math.random() * 0.5 + 0.5, (data[i] * colorValue)\r
+         + (data[i + 1] * 0.769) + (data[i + 2] * 0.189), data[i]);\r
+      binaryData[i + 1] =\r
+         colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.349)\r
+         + (data[i + 1] * 0.686) + (data[i + 2] * 0.168), data[i + 1]);\r
+      binaryData[i + 2] =\r
+         colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.272)\r
+         + (data[i + 1] * 0.534) + (data[i + 2] * 0.131), data[i + 2]);\r
+   }\r
 };\r
 </pre>\r
 \r
@@ -317,46 +317,46 @@ function colorFilter(binaryData, pixels)
 <pre class="prettyprint">\r
 function colorFilterStart()\r
 {\r
-&nbsp;&nbsp;&nbsp;var picture = document.getElementById(&#39;picture&#39;);\r
-&nbsp;&nbsp;&nbsp;var canvas = document.querySelector(&#39;canvas&#39;);\r
-&nbsp;&nbsp;&nbsp;canvas.width = document.width;\r
-&nbsp;&nbsp;&nbsp;canvas.height = picture.clientHeight;\r
-&nbsp;&nbsp;&nbsp;var tempContext = canvas.getContext(&quot;2d&quot;);\r
-&nbsp;&nbsp;&nbsp;var pixels = canvas.width * canvas.height * 4;\r
-&nbsp;&nbsp;&nbsp;tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
-&nbsp;&nbsp;&nbsp;var workerNember = 4;\r
-&nbsp;&nbsp;&nbsp;var count = 0;\r
-&nbsp;&nbsp;&nbsp;var pixelLength = pixels / workerNember;\r
-&nbsp;&nbsp;&nbsp;var pixelSize = canvas.height / workerNember;\r
-&nbsp;&nbsp;&nbsp;var timeStart = new Date();\r
-\r
-&nbsp;&nbsp;&nbsp;/* Loop to use multi-thread Web workers */\r
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; workerNember; i++)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var worker = new Worker(&quot;js/worker.js&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvasData =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempContext.getImageData(0, pixelSize * i, canvas.width, pixelSize);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle data received from the host worker */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.onmessage = function(e)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count++;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempContext.putImageData(e.data.canvasData, 0, pixelSize * e.data.count);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (count == workerNember)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var timeDiffer = new Date() - timeStart;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = timeDiffer + &quot; ms&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Send data to the host worker */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.postMessage(\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;data&quot;: canvasData,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;length&quot;: pixelLength,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;count&quot;: i\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\r
-&nbsp;&nbsp;&nbsp;}\r
+   var picture = document.getElementById('picture');\r
+   var canvas = document.querySelector('canvas');\r
+   canvas.width = document.width;\r
+   canvas.height = picture.clientHeight;\r
+   var tempContext = canvas.getContext("2d");\r
+   var pixels = canvas.width * canvas.height * 4;\r
+   tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
+   var workerNember = 4;\r
+   var count = 0;\r
+   var pixelLength = pixels / workerNember;\r
+   var pixelSize = canvas.height / workerNember;\r
+   var timeStart = new Date();\r
+\r
+   /* Loop to use multi-thread Web workers */\r
+   for (var i = 0; i &lt; workerNember; i++)\r
+   {\r
+      var worker = new Worker("js/worker.js");\r
+      var canvasData =\r
+         tempContext.getImageData(0, pixelSize * i, canvas.width, pixelSize);\r
+\r
+      /* Handle data received from the host worker */\r
+      worker.onmessage = function(e)\r
+      {\r
+         count++;\r
+         tempContext.putImageData(e.data.canvasData, 0, pixelSize * e.data.count);\r
+         if (count == workerNember)\r
+         {\r
+            var timeDiffer = new Date() - timeStart;\r
+            message.innerHTML = timeDiffer + " ms";\r
+         }\r
+      };\r
+\r
+      /* Send data to the host worker */\r
+      worker.postMessage(\r
+      {\r
+         "data": canvasData,\r
+         "length": pixelLength,\r
+         "count": i\r
+      });\r
+   }\r
 }\r
 </pre>\r
 \r
@@ -364,40 +364,40 @@ function colorFilterStart()
 <pre class="prettyprint">\r
 onmessage = function(e)\r
 {\r
-&nbsp;&nbsp;&nbsp;var canvasData = e.data.data;\r
-&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;\r
-&nbsp;&nbsp;&nbsp;var pixels = e.data.length;\r
-&nbsp;&nbsp;&nbsp;var count = e.data.count;\r
-\r
-&nbsp;&nbsp;&nbsp;colorFilter(binaryData, pixels);\r
-&nbsp;&nbsp;&nbsp;postMessage(\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;canvasData&quot;: canvasData,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;count&quot;: count\r
-&nbsp;&nbsp;&nbsp;});\r
+   var canvasData = e.data.data;\r
+   var binaryData = canvasData.data;\r
+   var pixels = e.data.length;\r
+   var count = e.data.count;\r
+\r
+   colorFilter(binaryData, pixels);\r
+   postMessage(\r
+   {\r
+      "canvasData": canvasData,\r
+      "count": count\r
+   });\r
 };\r
 \r
 function colorChange(scale, gab, position)\r
 {\r
-&nbsp;&nbsp;&nbsp;return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
+   return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
 };\r
 \r
 function colorFilter(binaryData, pixels)\r
 {\r
-&nbsp;&nbsp;&nbsp;var data = binaryData;\r
-&nbsp;&nbsp;&nbsp;var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; pixels; i += .5)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i] =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorChange(Math.random() * 0.5 + 0.5, (data[i] * colorValue)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.769) + (data[i + 2] * 0.189), data[i]);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 1] =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.349)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.686) + (data[i + 2] * 0.168), data[i + 1]);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;binaryData[i + 2] =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.272)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ (data[i + 1] * 0.534) + (data[i + 2] * 0.131), data[i + 2]);\r
-&nbsp;&nbsp;&nbsp;}\r
+   var data = binaryData;\r
+   var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
+   for (var i = 0; i &lt; pixels; i += .5)\r
+   {\r
+      binaryData[i] =\r
+         colorChange(Math.random() * 0.5 + 0.5, (data[i] * colorValue)\r
+         + (data[i + 1] * 0.769) + (data[i + 2] * 0.189), data[i]);\r
+      binaryData[i + 1] =\r
+         colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.349)\r
+         + (data[i + 1] * 0.686) + (data[i + 2] * 0.168), data[i + 1]);\r
+      binaryData[i + 2] =\r
+         colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.272)\r
+         + (data[i + 1] * 0.534) + (data[i + 2] * 0.131), data[i + 2]);\r
+   }\r
 };\r
 </pre>\r
 \r
diff --git a/org.tizen.guides/html/web/w3c/security/cors_w.htm b/org.tizen.guides/html/web/w3c/security/cors_w.htm
index 5f06225..8af7334 100644 (file)
--- a/org.tizen.guides/html/web/w3c/security/cors_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/cors_w.htm
@@ -117,12 +117,12 @@
 <li>Create an <a href="../communication/xmlhttprequest_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var method = &quot;GET&quot;;\r
-&nbsp;&nbsp;&nbsp;var url = &quot;http://another-domain.com/CORS/&quot;;\r
-&nbsp;&nbsp;&nbsp;var xhr = new XMLHttpRequest();\r
+   var method = "GET";\r
+   var url = "http://another-domain.com/CORS/";\r
+   var xhr = new XMLHttpRequest();\r
 \r
-&nbsp;&nbsp;&nbsp;xhr.open(method, url);\r
-&nbsp;&nbsp;&nbsp;xhr.send();\r
+   xhr.open(method, url);\r
+   xhr.send();\r
 &lt;/script&gt;\r
 </pre>\r
 </li>\r
@@ -130,13 +130,13 @@
 <li>On the server side, define the domain from which requests are allowed. In this case, the <code>http://origin-domain.com</code> domain has the required authority.\r
 <pre class="prettyprint">\r
 &lt;?php\r
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: http://origin-domain.com&quot;);\r
+   header("Access-Control-Allow-Origin: http://origin-domain.com");\r
 ?&gt;\r
 </pre>\r
 <p>If all sites are allowed to send requests, use the wildcard (*):</p>\r
 <pre class="prettyprint">\r
 &lt;?php\r
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: *&quot;);\r
+   header("Access-Control-Allow-Origin: *");\r
 ?&gt;\r
 </pre>\r
 </li>\r
@@ -184,13 +184,13 @@ Origin http://another-domain.com/CORS is not allowed by Access-Control-Allow-Ori
 <li>Create an <a href="../communication/xmlhttprequest_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication. In addition, define the request <code>Content-Type</code> and add a custom header.\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;var xhr = new XMLHttpRequest();\r
-&nbsp;&nbsp;&nbsp;xhr.open(&quot;PUT&quot;, &quot;http://another-domain.com/CORS/&quot;);\r
+   var xhr = new XMLHttpRequest();\r
+   xhr.open("PUT", "http://another-domain.com/CORS/");\r
 \r
-&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/json&quot;);\r
+   xhr.setRequestHeader("Content-Type", "application/json");\r
 \r
-&nbsp;&nbsp;&nbsp;xhr.setRequestHeader(&quot;Header-Custom-TizenCORS&quot;, &quot;OK&quot;);\r
-&nbsp;&nbsp;&nbsp;xhr.send(data);\r
+   xhr.setRequestHeader("Header-Custom-TizenCORS", "OK");\r
+   xhr.send(data);\r
 &lt;/script&gt;\r
 </pre>\r
 </li>\r
@@ -198,28 +198,28 @@ Origin http://another-domain.com/CORS is not allowed by Access-Control-Allow-Ori
 <li><p>On the server side, define the domain from which requests are allowed. In this case, the <code>http://110.0.0.160:8081</code> domain has the required authority. In addition, define various server settings.</p>\r
 <pre class="prettyprint">\r
 &lt;?php\r
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Origin: http://110.0.0.160:8081&quot;);\r
+   header("Access-Control-Allow-Origin: http://110.0.0.160:8081");\r
 \r
-&nbsp;&nbsp;&nbsp;/* Allowed request method */\r
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Methods: PUT&quot;);\r
+   /* Allowed request method */\r
+   header("Access-Control-Allow-Methods: PUT");\r
 \r
-&nbsp;&nbsp;&nbsp;/* Allowed custom header */\r
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Allow-Headers: Content-Type&quot;);\r
+   /* Allowed custom header */\r
+   header("Access-Control-Allow-Headers: Content-Type");\r
 \r
-&nbsp;&nbsp;&nbsp;/* Age set to 1 day to improve speed caching */\r
-&nbsp;&nbsp;&nbsp;header(&quot;Access-Control-Max-Age: 86400&quot;);\r
+   /* Age set to 1 day to improve speed caching */\r
+   header("Access-Control-Max-Age: 86400");\r
 \r
-&nbsp;&nbsp;&nbsp;/* Options request exits before the page is completely loaded */\r
-&nbsp;&nbsp;&nbsp;if (strtolower($_SERVER[&#39;REQUEST_METHOD&#39;]) == &#39;options&#39;)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exit();\r
-&nbsp;&nbsp;&nbsp;}\r
+   /* Options request exits before the page is completely loaded */\r
+   if (strtolower($_SERVER['REQUEST_METHOD']) == 'options')\r
+   {\r
+      exit();\r
+   }\r
 \r
-&nbsp;&nbsp;&nbsp;/* Response data */\r
-&nbsp;&nbsp;&nbsp;$arr = array(&quot;user_name&quot; =&gt; &quot;tizen&quot;, &quot;phone_number&quot; =&gt; &quot;12312334234&quot;);\r
+   /* Response data */\r
+   $arr = array("user_name" =&gt; "tizen", "phone_number" =&gt; "12312334234");\r
 \r
-&nbsp;&nbsp;&nbsp;/* Response data returned in JSON format */\r
-&nbsp;&nbsp;&nbsp;echo json_encode($arr);\r
+   /* Response data returned in JSON format */\r
+   echo json_encode($arr);\r
 ?&gt;\r
 </pre>\r
 </li>\r
diff --git a/org.tizen.guides/html/web/w3c/security/iframe_w.htm b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
index b8902af..9de8097 100644 (file)
--- a/org.tizen.guides/html/web/w3c/security/iframe_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
@@ -92,104 +92,104 @@
 <ol>\r
 <li>Create an <code>&lt;input&gt;</code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow script execution in the <code>iframe</code> element content and cookie access, set the <code>sandbox</code> attribute value as <code>allow-same-origin</code>:\r
 <pre class="prettyprint">\r
-&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot;/&gt; Enable Sandbox\r
-&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;\r
-\r
-&lt;iframe src=&quot;iframe_cookie_stolen.html&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;100%&quot; height=&quot;350px&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;border: 1px solid #DCDCDC;&quot;&gt;&lt;/iframe&gt;\r
+&lt;input type="checkbox" id="chkSandbox" name="chkSandbox"\r
+       onclick="setSandbox()"/&gt; Enable Sandbox\r
+&lt;div id="description" style="padding: 10px; margin: 10px;"&gt;&lt;/div&gt;\r
+\r
+&lt;iframe src="iframe_cookie_stolen.html"\r
+        sandbox="allow-scripts allow-same-origin"\r
+        id="iframe" seamless\r
+        width="100%" height="350px"\r
+        style="border: 1px solid #DCDCDC;"&gt;&lt;/iframe&gt;\r
 </pre></li>\r
 <li>Create a test cookie:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;SetCookie(&#39;userid&#39;, &#39;example@tizen.org&#39;, 7);\r
-\r
-&nbsp;&nbsp;&nbsp;function SetCookie(name, value, expiredays)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var today = new Date();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;today.setDate(today.getDate() + expiredays);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.cookie =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name + &quot;=&quot; + escape(value) + &quot;; path=/; expires=&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ today.toGMTString() + &quot;;&quot;;\r
-&nbsp;&nbsp;&nbsp;}\r
+   SetCookie('userid', 'example@tizen.org', 7);\r
+\r
+   function SetCookie(name, value, expiredays)\r
+   {\r
+      var today = new Date();\r
+      today.setDate(today.getDate() + expiredays);\r
+      document.cookie =\r
+         name + "=" + escape(value) + "; path=/; expires="\r
+         + today.toGMTString() + ";";\r
+   }\r
 &lt;/script&gt;\r
 </pre></li>\r
 \r
 <li>To block cookie access, remove the <code>allow-same-origin</code> attribute from the <code>sandbox</code> attribute value:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;function setSandbox()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Access to cookies within the same domain is not allowed */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts&#39;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts&quot;&gt;&lt;/iframe&gt;&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Access to cookies within the same domain is allowed */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_cookie_stolen.html&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;\r
-&nbsp;&nbsp;&nbsp;}\r
+   function setSandbox()\r
+   {\r
+      var checkbox = document.querySelector('#chkSandbox');\r
+      var frame = document.querySelector('#iframe');\r
+      var frameInfo = "", flag = "";\r
+\r
+      if (checkbox.checked)\r
+      {\r
+         /* Access to cookies within the same domain is not allowed */\r
+         flag = "allow-scripts';\r
+         frameInfo = "&lt;iframe src sandbox="allow-scripts"&gt;&lt;/iframe&gt;";\r
+      }\r
+      else\r
+      {\r
+         /* Access to cookies within the same domain is allowed */\r
+         flag = "allow-scripts allow-same-origin";\r
+         frameInfo =\r
+            "&lt;iframe src sandbox="allow-scripts allow-same-origin"&gt;&lt;/iframe&gt;";\r
+      }\r
+\r
+      frame.setAttribute("sandbox", flag);\r
+      frame.setAttribute("src", "iframe_cookie_stolen.html");\r
+      document.querySelector("#description").textContent = frameInfo;\r
+   }\r
 &lt;/script&gt;\r
 </pre></li>\r
 <li>Display the result:\r
 <pre class="prettyprint">\r
-&lt;div id=&quot;message&quot;&gt;&lt;/div&gt;\r
+&lt;div id="message"&gt;&lt;/div&gt;\r
 </pre></li>\r
 <li>If the sandboxing functionality is active, a message is displayed. If the sandboxing functionality is inactive, the imported cookie is displayed:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;window.onload = function()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var message = document.getElementById(&quot;message&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;h3&gt;stole parent window&#39;s cookie&lt;/h3&gt; userid: &quot; + GetCookie(&quot;userid&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (e)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message.innerHTML = &quot;&lt;h3&gt;HTML5 Sandbox blocked access to cookies.&lt;/h3&gt;&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;function GetCookie(Name)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var search = Name + &quot;=&quot;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.cookie.length &gt; 0)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset = document.cookie.indexOf(search)\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (offset != -1)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset += search.length\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end = document.cookie.indexOf(&quot;;&quot;, offset)\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (end == -1) end = document.cookie.length\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return unescape(document.cookie.substring(offset, end));\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;&quot;;\r
-&nbsp;&nbsp;&nbsp;}\r
+   window.onload = function()\r
+   {\r
+      var message = document.getElementById("message");\r
+      try\r
+      {\r
+         message.innerHTML =\r
+            "&lt;h3&gt;stole parent window's cookie&lt;/h3&gt; userid: " + GetCookie("userid");\r
+      }\r
+      catch (e)\r
+      {\r
+         message.innerHTML = "&lt;h3&gt;HTML5 Sandbox blocked access to cookies.&lt;/h3&gt;";\r
+      }\r
+   }\r
+\r
+   function GetCookie(Name)\r
+   {\r
+      var search = Name + "="\r
+\r
+      if (document.cookie.length &gt; 0)\r
+      {\r
+\r
+         offset = document.cookie.indexOf(search)\r
+\r
+         if (offset != -1)\r
+         {\r
+            offset += search.length\r
+            end = document.cookie.indexOf(";", offset)\r
+\r
+            if (end == -1) end = document.cookie.length\r
+\r
+            return unescape(document.cookie.substring(offset, end));\r
+         }\r
+      }\r
+\r
+      return "";\r
+   }\r
 &lt;/script&gt;\r
 </pre></li>\r
 </ol>\r
@@ -208,61 +208,61 @@
 <ol>\r
 <li>Create an <code>&lt;input&gt;</code> element of the <code>checkbox</code> type that disables the sandbox. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property:\r
 <pre class="prettyprint">\r
-&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot;/&gt; Disable Sandbox\r
-&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;\r
+&lt;input type="checkbox" id="chkSandbox" name="chkSandbox"\r
+       onclick="setSandbox()"/&gt; Disable Sandbox\r
+&lt;div id="description" style="padding: 10px; margin: 10px;"&gt;&lt;/div&gt;\r
 \r
-&lt;iframe src=&quot;iframe_page_redirection.html&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless&gt;&lt;/iframe&gt;\r
+&lt;iframe src="iframe_page_redirection.html"\r
+        sandbox="allow-scripts"\r
+        id="iframe" seamless&gt;&lt;/iframe&gt;\r
 </pre></li>\r
 <li>If the <code>sandbox</code> attribute is deactivated, set the <code>allow-top-navigation</code> attribute to the <code>sandbox</code> attribute value:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;function setSandbox()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&quot;#chkSandbox&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&quot;#iframe&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-top-navigation&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;iframe src sandbox=&quot;allow-scripts allow-top-navigation&quot;&gt;&lt;/iframe&gt;&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo = &quot;&lt;iframe src sandbox=&quot;allow-scripts&quot;&gt;&lt;/iframe&gt;&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_page_redirection.html&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;\r
-&nbsp;&nbsp;&nbsp;}\r
+   function setSandbox()\r
+   {\r
+      var checkbox = document.querySelector("#chkSandbox");\r
+      var frame = document.querySelector("#iframe");\r
+      var frameInfo = "", flag = "";\r
+\r
+      if (checkbox.checked)\r
+      {\r
+         flag = "allow-scripts allow-top-navigation";\r
+         frameInfo =\r
+            "&lt;iframe src sandbox="allow-scripts allow-top-navigation"&gt;&lt;/iframe&gt;";\r
+      }\r
+      else\r
+      {\r
+         flag = "allow-scripts";\r
+         frameInfo = "&lt;iframe src sandbox="allow-scripts"&gt;&lt;/iframe&gt;";\r
+      }\r
+\r
+      frame.setAttribute("sandbox", flag);\r
+      frame.setAttribute("src", "iframe_page_redirection.html");\r
+      document.querySelector("#description").textContent = frameInfo;\r
+   }\r
 &lt;/script&gt;\r
 </pre></li>\r
 \r
 \r
 <li>Include the image displayed on the page:\r
 <pre class="prettyprint">\r
-&lt;img id=&quot;img&quot; alt=&quot;Tizen Lockup on Dark&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src=&quot;http://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-dark.png&quot; \r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;alert(&#39;fake advertisement!&#39;);&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;240&quot; height=&quot;103&quot;/&gt;\r
+&lt;img id="img" alt="Tizen Lockup on Dark"\r
+     src="http://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-dark.png" \r
+     onclick="alert('fake advertisement!');"\r
+     width="240" height="103"/&gt;\r
 </pre></li>\r
 <li>If the page redirection is blocked, a message is displayed. If not, the user is redirected to the <code>warning.html</code> page:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;try\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location = &quot;warning.html&quot;;\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;catch (e)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;HTML5 Sandbox prevented top level navigation.&quot;);\r
-&nbsp;&nbsp;&nbsp;}\r
+   try\r
+   {\r
+      location = "warning.html";\r
+   }\r
+   catch (e)\r
+   {\r
+      alert("HTML5 Sandbox prevented top level navigation.");\r
+   }\r
 &lt;/script&gt;\r
 </pre></li>\r
 </ol>\r
@@ -283,76 +283,76 @@
 <ol>\r
 <li>Create an <code>&lt;input&gt;</code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow form submission, set the <code>sandbox</code> attribute value as <code>allow-forms</code>:\r
 <pre class="prettyprint">\r
-&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot;/&gt; Enable Sandbox\r
-&lt;div id=&quot;description&quot; style=&quot;padding: 10px; margin: 10px;&quot;&gt;&lt;/div&gt;\r
+&lt;input type="checkbox" id="chkSandbox" name="chkSandbox"\r
+       onclick="setSandbox()"/&gt; Enable Sandbox\r
+&lt;div id="description" style="padding: 10px; margin: 10px;"&gt;&lt;/div&gt;\r
 \r
-&lt;iframe src=&quot;iframe_form_submission.html&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin allow-forms&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;100%&quot; height=&quot;200px&quot;&gt;&lt;/iframe&gt;\r
+&lt;iframe src="iframe_form_submission.html"\r
+        sandbox="allow-scripts allow-same-origin allow-forms"\r
+        width="100%" height="200px"&gt;&lt;/iframe&gt;\r
 </pre></li>\r
 <li>If the <code>sandbox</code> attribute is activated, remove the <code>allow-forms</code> attribute from the <code>sandbox</code> attribute value:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;function setSandbox()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag = &quot;&quot;;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &quot;allow-scripts allow-same-origin allow-forms&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;iframe src sandbox=&#39;allow-scripts allow-same-origin allow-forms&#39;&gt;&lt;/iframe&gt;&quot;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_form_submission.html&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;\r
-&nbsp;&nbsp;&nbsp;}\r
+   function setSandbox()\r
+   {\r
+      var checkbox = document.querySelector('#chkSandbox');\r
+      var frame = document.querySelector('#iframe');\r
+      var frameInfo = "", flag = "";\r
+\r
+      if (checkbox.checked)\r
+      {\r
+         flag = "allow-scripts allow-same-origin";\r
+         frameInfo =\r
+            "&lt;iframe src sandbox="allow-scripts allow-same-origin"&gt;&lt;/iframe&gt;";\r
+      }\r
+      else\r
+      {\r
+         flag = "allow-scripts allow-same-origin allow-forms";\r
+         frameInfo =\r
+            "&lt;iframe src sandbox='allow-scripts allow-same-origin allow-forms'&gt;&lt;/iframe&gt;";\r
+      }\r
+\r
+      frame.setAttribute("sandbox", flag);\r
+      frame.setAttribute("src", "iframe_form_submission.html");\r
+      document.querySelector("#description").textContent = frameInfo;\r
+   }\r
 &lt;/script&gt;\r
 </pre></li>\r
 <li>Create a form for the login screen with <code>&lt;input&gt;</code> elements to enter an email and password, and submit them:\r
 <pre class="prettyprint">\r
-&lt;form method=&quot;get&quot; action=&quot;iframe_form_submission.html&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;Advertisement, SNS&lt;/h3&gt;\r
-\r
-&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;placeholder=&quot;e-mail address&quot; required /&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;placeholder=&quot;password&quot; required /&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;/&gt;\r
+&lt;form method="get" action="iframe_form_submission.html"&gt;\r
+   &lt;h3&gt;Advertisement, SNS&lt;/h3&gt;\r
+\r
+   &lt;fieldset&gt;\r
+      &lt;legend&gt;Login&lt;/legend&gt;\r
+      &lt;input type="text" id="email" name="email"\r
+             placeholder="e-mail address" required /&gt;\r
+      &lt;input type="password" id="password" name="password"\r
+             placeholder="password" required /&gt;\r
+   &lt;/fieldset&gt;\r
+   &lt;input type="submit" value="Login"/&gt;\r
 &lt;/form&gt;\r
 </pre></li>\r
 \r
 <li>If the <code>sandbox</code> attribute is deactivated, the imported login information is displayed:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;window.onload = function()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var html;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (location.href.indexOf(&quot;?&quot;) &gt;= 0)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&#39;&lt;div id=&quot;message&quot;&gt;&#39;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;h3&gt;Catches login qualification certifying information&lt;/h3&gt;&#39;,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(location.href.split(&quot;?&quot;)[1]).replace(&quot;&amp;&quot;, &quot;&lt;br /&gt;&quot;),\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;/div&gt;&#39;].join(&#39;&#39;);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.innerHTML = html;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;}\r
+   window.onload = function()\r
+   {\r
+      var html;\r
+\r
+      if (location.href.indexOf("?") &gt;= 0)\r
+      {\r
+         html =\r
+            ['&lt;div id="message"&gt;',\r
+            '&lt;h3&gt;Catches login qualification certifying information&lt;/h3&gt;',\r
+            (location.href.split("?")[1]).replace("&amp;", "&lt;br /&gt;"),\r
+            '&lt;/div&gt;'].join('');\r
+\r
+         document.body.innerHTML = html;\r
+      }\r
+   }\r
 &lt;/script&gt;\r
 </pre></li>\r
 </ol>\r
@@ -373,46 +373,46 @@
 <ol>\r
 <li>Create an <code>&lt;input&gt;</code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow pop-ups, set the <code>sandbox</code> attribute value as <code>allow-popups</code>:\r
 <pre class="prettyprint">\r
-&lt;input type=&quot;checkbox&quot; id=&quot;chkSandbox&quot; name=&quot;chkSandbox&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;setSandbox()&quot;/&gt; Enable Sandbox\r
-&lt;div id=&quot;description&quot; style=&quot;padding:10 px; margin:10 px;&quot;&gt;&lt;/div&gt;\r
-\r
-&lt;iframe src=&quot;iframe_popup.html&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sandbox=&quot;allow-scripts allow-same-origin allow-popups&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;iframe&quot; seamless\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;border: 1px solid #DCDCDC;&quot;&gt;&lt;/iframe&gt;\r
+&lt;input type="checkbox" id="chkSandbox" name="chkSandbox"\r
+       onclick="setSandbox()"/&gt; Enable Sandbox\r
+&lt;div id="description" style="padding:10 px; margin:10 px;"&gt;&lt;/div&gt;\r
+\r
+&lt;iframe src="iframe_popup.html"\r
+        sandbox="allow-scripts allow-same-origin allow-popups"\r
+        id="iframe" seamless\r
+        style="border: 1px solid #DCDCDC;"&gt;&lt;/iframe&gt;\r
 </pre></li>\r
 <li>If the <code>sandbox</code> attribute is activated, remove the <code>allow-popups</code> flag from the <code>sandbox</code> attribute value:\r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;function setSandbox()\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var checkbox = document.querySelector(&#39;#chkSandbox&#39;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frame = document.querySelector(&#39;#iframe&#39;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var frameInfo = &quot;&quot;, flag =&quot;&quot;;\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (checkbox.checked)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &#39;allow-scripts allow-same-origin&#39;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin&quot;&gt;&lt;/iframe&gt;&#39;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag = &#39;allow-scripts allow-same-origin allow-popups&#39;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameInfo =\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;&lt;iframe src sandbox=&quot;allow-scripts allow-same-origin allow-popups&quot;&gt;&lt;/iframe&gt;&#39;;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;sandbox&quot;, flag);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frame.setAttribute(&quot;src&quot;, &quot;iframe_popup.html&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&quot;#description&quot;).textContent = frameInfo;\r
-&nbsp;&nbsp;&nbsp;}\r
+   function setSandbox()\r
+   {\r
+      var checkbox = document.querySelector('#chkSandbox');\r
+      var frame = document.querySelector('#iframe');\r
+      var frameInfo = "", flag ="";\r
+\r
+      if (checkbox.checked)\r
+      {\r
+         flag = 'allow-scripts allow-same-origin';\r
+         frameInfo =\r
+            '&lt;iframe src sandbox="allow-scripts allow-same-origin"&gt;&lt;/iframe&gt;';\r
+      }\r
+      else\r
+      {\r
+         flag = 'allow-scripts allow-same-origin allow-popups'\r
+         frameInfo =\r
+            '&lt;iframe src sandbox="allow-scripts allow-same-origin allow-popups"&gt;&lt;/iframe&gt;';\r
+      }\r
+\r
+      frame.setAttribute("sandbox", flag);\r
+      frame.setAttribute("src", "iframe_popup.html");\r
+      document.querySelector("#description").textContent = frameInfo;\r
+   }\r
 &lt;/script&gt;\r
 </pre></li>\r
 <li>Create an external link in the <code>iframe</code> element:\r
 <pre class="prettyprint">\r
-&lt;p&gt;[&lt;a href=&quot;https://www.tizen.org/about&quot; target=&quot;_blank&quot;&gt;Click Link!&lt;/a&gt;]&lt;/p&gt;\r
+&lt;p&gt;[&lt;a href="https://www.tizen.org/about" target="_blank"&gt;Click Link!&lt;/a&gt;]&lt;/p&gt;\r
 </pre></li>\r
 </ol>\r
 \r
@@ -432,37 +432,37 @@
 <li>Create the needed HTML elements, including the CSS style of the parent document. Create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute setting, and another <code>iframe</code> element without the setting:\r
 <pre class="prettyprint">\r
 &lt;head&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;style&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body, html\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0; padding: 0;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h3\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: blue;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;\r
+   &lt;style&gt;\r
+      body, html\r
+      {\r
+         margin: 0; padding: 0;\r
+      }\r
+      body\r
+      {\r
+         font-size: 12px;\r
+      }\r
+      h3\r
+      {\r
+         color: blue;\r
+      }\r
+   &lt;/style&gt;\r
 &lt;/head&gt;\r
 &lt;body&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h2&gt;HTML5 iframe&lt;/h2&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;iframe seamless src=&quot;iframe.html&quot;&gt;&lt;/iframe&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;iframe src=&quot;iframe.html&quot;&gt;&lt;/iframe&gt;\r
+   &lt;h2&gt;HTML5 iframe&lt;/h2&gt;\r
+   &lt;iframe seamless src="iframe.html"&gt;&lt;/iframe&gt;\r
+   &lt;iframe src="iframe.html"&gt;&lt;/iframe&gt;\r
 &lt;/body&gt;\r
 </pre></li>\r
 <li>Create the <code>iframe</code> element content. The <code>iframe</code> element with the <code>seamless</code> attribute set displays the content with the inherited CSS style:\r
 <pre class="prettyprint">\r
 &lt;body&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;h3&gt;iframe! h3 Content&lt;/h3&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;ul&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;http://tizen.org&quot;&gt;tizen.org&lt;/a&gt;&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;http://tizen.org&quot; target=&quot;_self&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.org target=&quot;_self&quot;&lt;/a&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;\r
+   &lt;h3&gt;iframe! h3 Content&lt;/h3&gt;\r
+   &lt;ul&gt;\r
+      &lt;li&gt;&lt;a href="http://tizen.org"&gt;tizen.org&lt;/a&gt;&lt;/li&gt;\r
+      &lt;li&gt;&lt;a href="http://tizen.org" target="_self"&gt;\r
+         tizen.org target="_self"&lt;/a&gt;\r
+      &lt;/li&gt;\r
+   &lt;/ul&gt;\r
 &lt;/body&gt;\r
 </pre></li>\r
 </ol>\r
diff --git a/org.tizen.guides/html/web/w3c/storage/appcache_w.htm b/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
index 750bf3e..d2afb7e 100644 (file)
--- a/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
@@ -43,8 +43,8 @@
 
  <p>HTML5 application caches can be used to store and utilize resources needed in Web applications, such as HTML, CSS, and JavaScript files, and images. You can cache certain files in the browser to use them in an offline state, or define them to be always updated from the server.</p>
 
-   <p>This feature is supported in mobile applications only.</p>  
- 
+   <p>This feature is supported in mobile applications only.</p>
+
  <p>HTML5 application caches provide you with the following benefits:</p>
  <ul>
  <li>Offline support
@@ -72,8 +72,8 @@
 <p>The following example demonstrates cache enabling. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/storage/html5_application_caches" target="_blank">appcache_update.html</a>.</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
-&lt;html manifest=&quot;tizen.appcache&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Page content--&gt;
+&lt;html manifest="tizen.appcache"&gt;
+   &lt;!--Page content--&gt;
 &lt;/html&gt;
 </pre>
 
@@ -85,7 +85,7 @@
 <pre class="prettyprint">
 CACHE MANIFEST
 # 2013-03-18 v2.0.0
-images/sound-icon.png 
+images/sound-icon.png
 images/background.png
 /tizen_application_cache.html
 /main.js
@@ -114,7 +114,7 @@ NETWORK:
 comm.cgi
 login.asp
 </pre>
-<p>All requests to these resources bypass the cache, even if the user if offline.  Wild cards like &#39;*&#39; can be used.</p></li> 
+<p>All requests to these resources bypass the cache, even if the user if offline.  Wild cards like '*' can be used.</p></li>
 <li>
 <p>Define the fallback pages in the <code>FALLBACK</code> section:</p>
 <pre class="prettyprint">
@@ -140,7 +140,7 @@ FALLBACK:
 <p>Include the <code>manifest</code> property in  the <code>&lt;html&gt;</code> tag to enable loading the manifest file and caching content by the browser:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
-&lt;html manifest=&quot;clock.appcache&quot;&gt;
+&lt;html manifest="clock.appcache"&gt;
 </pre>
 </li>
 <li>
@@ -156,29 +156,29 @@ cache_test.js
 <p>Reconnect and check whether there are edited items in the manifest file using the <code>update()</code> method:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var update = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var appCache = window.applicationCache;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;updateready&#39;, handleCacheEvent, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appCache.update();
+   var update = function()
+   {
+      var appCache = window.applicationCache;
+      appCache.addEventListener('updateready', handleCacheEvent, false);
+      appCache.update();
 </pre>
 </li>
 <li>
 <p>If there are changes in the manifest file, use the <code>swapCache()</code> and <code>handleCacheEvent()</code> methods to update the cache:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function handleCacheEvent(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (appCache.status == appCache.UPDATEREADY)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.applicationCache.swapCache();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;log&#39;).innerHTML = &quot;Update is successful&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
-&lt;/script&gt; 
+      function handleCacheEvent(e)
+      {
+         if (appCache.status == appCache.UPDATEREADY)
+         {
+            try
+            {
+               window.applicationCache.swapCache();
+               document.getElementById('log').innerHTML = "Update is successful";
+            }
+         }
+      }
+   };
+&lt;/script&gt;
 </pre>
 </li>
 </ol>
@@ -195,7 +195,7 @@ cache_test.js
  </ul>
 
  <h2 id="manage" name="manage">Managing the Cache Events</h2>
- 
+
 
 <p>To check the current status of the cache:</p>
 <ol>
@@ -203,24 +203,24 @@ cache_test.js
 <p>Check the <code>window.applicationCache.status</code> value:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var appCache = window.applicationCache;
-
-&nbsp;&nbsp;&nbsp;switch (appCache.status)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 0: /* ApplicationCache.status is UNCACHED */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 1: /* ApplicationCache.status is IDLE */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 2: /* ApplicationCache.status is CHECKING */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 3: /* ApplicationCache.status is DOWNLOADING */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 4: /* ApplicationCache.status is UPDATEREADY */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 5: /* ApplicationCache.status is OBSOLETE */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: break;
-&nbsp;&nbsp;&nbsp;}
+   var appCache = window.applicationCache;
+
+   switch (appCache.status)
+   {
+      case 0: /* ApplicationCache.status is UNCACHED */
+         break;
+      case 1: /* ApplicationCache.status is IDLE */
+         break;
+      case 2: /* ApplicationCache.status is CHECKING */
+         break;
+      case 3: /* ApplicationCache.status is DOWNLOADING */
+         break;
+      case 4: /* ApplicationCache.status is UPDATEREADY */
+         break;
+      case 5: /* ApplicationCache.status is OBSOLETE */
+         break;
+      default: break;
+   }
 &lt;/script&gt;
 </pre>
 </li>
@@ -228,49 +228,49 @@ cache_test.js
 <p>Different events can occur based on the cache status. Use the <code>addEventListener()</code> method to add listeners in order to detect events:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var appCache = window.applicationCache;
-&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;cached&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Cached resource is downloaded */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;checking&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Manifest file is downloaded for the first time
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   or if there is an update in the manifest
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;downloading&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Content is being updated */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;error&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error occurred */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;noupdate&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* No update is available */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;obsolete&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Manifest file cannot be found */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;progress&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Cache file is being downloaded */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;appCache.addEventListener(&#39;updateready&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* All resources for update are downloaded */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+   var appCache = window.applicationCache;
+   appCache.addEventListener('cached', function()
+      {
+         /* Cached resource is downloaded */
+      }, false);
+
+   appCache.addEventListener('checking', function()
+      {
+         /*
+            Manifest file is downloaded for the first time
+            or if there is an update in the manifest
+         */
+      }, false);
+
+   appCache.addEventListener('downloading', function()
+      {
+         /* Content is being updated */
+      }, false);
+
+   appCache.addEventListener('error', function()
+      {
+         /* Error occurred */
+      }, false);
+
+   appCache.addEventListener('noupdate', function()
+      {
+         /* No update is available */
+      }, false);
+
+   appCache.addEventListener('obsolete', function()
+      {
+         /* Manifest file cannot be found */
+      }, false);
+
+   appCache.addEventListener('progress', function()
+      {
+         /* Cache file is being downloaded */
+      }, false);
+
+   appCache.addEventListener('updateready', function()
+      {
+         /* All resources for update are downloaded */
+      }, false);
 &lt;/script&gt;
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/w3c/storage/file_w.htm b/org.tizen.guides/html/web/w3c/storage/file_w.htm
index 187d2d7..8d90843 100644 (file)
--- a/org.tizen.guides/html/web/w3c/storage/file_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/file_w.htm
@@ -49,11 +49,11 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>File</h1>
- 
-  <p>Tizen enables you to access local storage to read file information. In mobile applications, you can also manipulate files by accessing sandboxed file systems.</p>  
-  
+
+  <p>Tizen enables you to access local storage to read file information. In mobile applications, you can also manipulate files by accessing sandboxed file systems.</p>
+
    <p>This feature is supported in mobile and wearable applications only.</p>
- 
+
 <p>The main features of the File API include:</p>
 <ul>
 <li>Local file management
@@ -93,10 +93,10 @@
 <p>Reading basic information, such as file name, size, MIME type, modification date, and path, of a local file is a useful file management skill:</p>
 
 <ol>
-<li>To display file information, create the <code>&lt;input type=&quot;file&quot;&gt;</code> element and other needed elements: 
+<li>To display file information, create the <code>&lt;input type="file"&gt;</code> element and other needed elements:
 <pre class="prettyprint">
-&lt;input type=&quot;file&quot; id=&quot;tizenFiles&quot; onchange=&quot;readSelectedFiles();&quot; multiple /&gt;
-&lt;div id=&quot;selectedFileInfoList&quot;&gt;&lt;/div&gt;
+&lt;input type="file" id="tizenFiles" onchange="readSelectedFiles();" multiple /&gt;
+&lt;div id="selectedFileInfoList"&gt;&lt;/div&gt;
 </pre>
 
 <div class="note">
@@ -105,41 +105,41 @@
 </div>
 </li>
 
-<li>Create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">FileList</a> instance: 
+<li>Create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">FileList</a> instance:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var files = document.getElementById(&quot;tizenFiles&quot;).files;
-&nbsp;&nbsp;&nbsp;if (files.length === 0) return;
+   var files = document.getElementById("tizenFiles").files;
+   if (files.length === 0) return;
 &lt;/script&gt;
 </pre>
 </li>
 
-<li>Use the <code>readSelectedFiles()</code> method of the <code>FileList</code> interface to retrieve and display file information, such as file name, size, MIME type, and modification date: 
+<li>Use the <code>readSelectedFiles()</code> method of the <code>FileList</code> interface to retrieve and display file information, such as file name, size, MIME type, and modification date:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function readSelectedFiles()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var displaySection = document.getElementById(&#39;selectedFileInfoList&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var html = [];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; files.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var file = files[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html.push(&quot;&lt;li&gt;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;strong&gt;&quot;, escape(file.name), &quot;&lt;/strong&gt;&lt;br /&gt;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;    type: &quot;, file.type, &quot;&lt;br /&gt;&quot;, /* MIME type */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;    size: &quot;, file.size, &quot;bytes&lt;br /&gt;&quot;, /* Size */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;    lastModifiedDate: &quot;, /* Last modification date */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(file.lastModifiedDate ?
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;file.lastModifiedDate.toLocaleDateString() : &quot;&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;   &lt;br /&gt;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;/li&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;displaySection.innerHTML = &quot;&lt;ul&gt;&quot; + html.join(&quot;&quot;) + &quot;&lt;/ul&gt;&quot;;
-&nbsp;&nbsp;&nbsp;}
+   function readSelectedFiles()
+   {
+      var displaySection = document.getElementById('selectedFileInfoList');
+      var html = [];
+      for (var i = 0; i &lt; files.length; i++)
+      {
+         var file = files[i];
+         html.push("&lt;li&gt;",
+                   "&lt;strong&gt;", escape(file.name), "&lt;/strong&gt;&lt;br /&gt;",
+                   "    type: ", file.type, "&lt;br /&gt;", /* MIME type */
+                   "    size: ", file.size, "bytes&lt;br /&gt;", /* Size */
+                   "    lastModifiedDate: ", /* Last modification date */
+                   (file.lastModifiedDate ?
+                    file.lastModifiedDate.toLocaleDateString() : ""),
+                   "   &lt;br /&gt;",
+                   "&lt;/li&gt;");
+      }
+      displaySection.innerHTML = "&lt;ul&gt;" + html.join("") + "&lt;/ul&gt;";
+   }
 &lt;/script&gt;
 </pre>
-<p align="center"><strong>Figure: Displaying file information (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Displaying file information (in mobile applications only)" src="../../../images/file1.png" /></p> 
+<p align="center"><strong>Figure: Displaying file information (in mobile applications only)</strong></p>
+<p align="center"><img alt="Displaying file information (in mobile applications only)" src="../../../images/file1.png" /></p>
 </li>
 </ol>
  <h3>Source Code</h3>
@@ -147,17 +147,17 @@
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_reading_local_files_info.html</a></li>
  </ul>
- 
+
  <h2 id="read_content" name="read_content">Reading Local File Content</h2>
- 
+
 
 <p>Reading a local image file in a Web application is a useful file management skill:</p>
 
 <ol>
-<li>To read a local image file and display its information, create the <code>&lt;input type=&quot;file&quot;&gt;</code> element and other needed elements:
+<li>To read a local image file and display its information, create the <code>&lt;input type="file"&gt;</code> element and other needed elements:
 <pre class="prettyprint">
-&lt;input type=&quot;file&quot; id=&quot;tizenFiles&quot; onchange=&quot;readSelectedFiles();&quot; multiple/&gt;
-&lt;div id=&quot;selectedFileInfoList&quot;&gt;&lt;/div&gt;
+&lt;input type="file" id="tizenFiles" onchange="readSelectedFiles();" multiple/&gt;
+&lt;div id="selectedFileInfoList"&gt;&lt;/div&gt;
 </pre>
 </li>
 
@@ -165,46 +165,46 @@
 <p>If the data is loaded, an <code>onload</code> event is fired. Create an <code>img</code> element to allocate the event result property value for rendering:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function readSelectedFiles()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var files = document.getElementById(&quot;tizenFiles&quot;).files;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (files.length === 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var html = [];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; files.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var file = files[i];
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var reader = new FileReader();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Check whether the file is an image */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!file.type.match(&quot;image.*&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.onload = (function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var img = document.createElement(&quot;img&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.src = e.target.result;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the selected image&#39;s dataURL */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.title = escape(file.name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.className = &quot;img&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;selectedFileInfoList&quot;).appendChild(img);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.readAsDataURL(file);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-&lt;/script&gt; 
+   function readSelectedFiles()
+   {
+      var files = document.getElementById("tizenFiles").files;
+      if (files.length === 0)
+      {
+         return;
+      }
+
+      var html = [];
+      for (var i = 0; i &lt; files.length; i++)
+      {
+         var file = files[i];
+
+         var reader = new FileReader();
+
+         /* Check whether the file is an image */
+         if (!file.type.match("image.*"))
+         {
+            continue;
+         }
+
+         reader.onload = (function(e)
+         {
+            var img = document.createElement("img");
+            img.src = e.target.result;
+
+            /* Set the selected image's dataURL */
+            img.title = escape(file.name);
+            img.className = "img";
+
+            document.getElementById("selectedFileInfoList").appendChild(img);
+         };
+         reader.readAsDataURL(file);
+      }
+   }
+&lt;/script&gt;
 </pre>
 
-<p align="center"><strong>Figure: Displaying an image file (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Displaying an image file (in mobile applications only)" src="../../../images/file2.png" /></p> 
+<p align="center"><strong>Figure: Displaying an image file (in mobile applications only)</strong></p>
+<p align="center"><img alt="Displaying an image file (in mobile applications only)" src="../../../images/file2.png" /></p>
 </li>
 </ol>
  <h3>Source Code</h3>
@@ -218,23 +218,23 @@
 <p>Slicing a local file using the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">Blob</a> interface is a useful file management skill:</p>
 
 <ol>
-<li>Create the <code>&lt;input type=&quot;file&quot;&gt;</code> element, the element for inputting the start byte and the end byte for slice, and the element for displaying the slicing result:
+<li>Create the <code>&lt;input type="file"&gt;</code> element, the element for inputting the start byte and the end byte for slice, and the element for displaying the slicing result:
 <pre class="prettyprint">
-&lt;input type=&quot;file&quot; id=&quot;tizenFile&quot; name=&quot;tizenFile&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onchange=&quot;setFileSize();&quot;/&gt; &lt;br /&gt;
-start byte: &lt;input type=&quot;text&quot; id=&quot;startByte&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name=&quot;startByte&quot; style=&quot;width: 100px;&quot;/&gt;~
-end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endByte&quot; style=&quot;width: 100px;&quot;/&gt;
-&lt;input type=&quot;button&quot; value=&quot;Slice File&quot; onclick=&quot;readBinaryString();&quot;/&gt;
-
-&lt;div id=&quot;result&quot; style=&quot;padding: 25px 10px 0 20px;&quot;&gt;&lt;/div&gt;
+&lt;input type="file" id="tizenFile" name="tizenFile"
+       onchange="setFileSize();"/&gt; &lt;br /&gt;
+start byte: &lt;input type="text" id="startByte"
+                   name="startByte" style="width: 100px;"/&gt;~
+end byte: &lt;input type="text" id="endByte" name="endByte" style="width: 100px;"/&gt;
+&lt;input type="button" value="Slice File" onclick="readBinaryString();"/&gt;
+
+&lt;div id="result" style="padding: 25px 10px 0 20px;"&gt;&lt;/div&gt;
 </pre>
 </li>
 
 <li>To read the local file, create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> instance:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var reader = new FileReader();
+   var reader = new FileReader();
 &lt;/script&gt;
 </pre>
 </li>
@@ -243,46 +243,46 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
 
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function readBinaryString()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.getElementById(&quot;tizenFile&quot;).files.length === 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;Upload File&quot;);
+   function readBinaryString()
+   {
+      if (document.getElementById("tizenFile").files.length === 0)
+      {
+         alert("Upload File");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+         return;
+      }
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var file = document.getElementById(&quot;tizenFile&quot;).files[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var startByte = document.getElementById(&quot;startByte&quot;).value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var endByte = document.getElementById(&quot;endByte&quot;).value;
+      var file = document.getElementById("tizenFile").files[0];
+      var startByte = document.getElementById("startByte").value;
+      var endByte = document.getElementById("endByte").value;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var blob = file.slice(startByte, endByte);
+      var blob = file.slice(startByte, endByte);
 </pre>
-<p>A new <code>Blob</code> object is created. </p> 
+<p>A new <code>Blob</code> object is created. </p>
 </li>
 <li>
 <p>Read the data as a binary string using the <code>readAsBinaryString()</code> method:</p>
 <pre class="prettyprint lang-html">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.readAsBinaryString(blob);
-&nbsp;&nbsp;&nbsp;}
+      reader.readAsBinaryString(blob);
+   }
 &lt;/script&gt;
 </pre>
 </li>
 <li>If the data loading is complete, the read data is displayed. Check the status using the <code>onloadend</code> event:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;reader.onloadend = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.target.readyState == FileReader.DONE) /* DONE == 2 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;result&#39;).textContent = e.target.result;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
+   reader.onloadend = function(e)
+   {
+      if (e.target.readyState == FileReader.DONE) /* DONE == 2 */
+      {
+         document.getElementById('result').textContent = e.target.result;
+      }
+   };
 &lt;/script&gt;
 </pre>
 
-<p align="center"><strong>Figure: Slicing a file (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Slicing a file (in mobile applications only)" src="../../../images/file3.png" /></p> 
+<p align="center"><strong>Figure: Slicing a file (in mobile applications only)</strong></p>
+<p align="center"><img alt="Slicing a file (in mobile applications only)" src="../../../images/file3.png" /></p>
 </li>
 </ol>
 <h3>Source Code</h3>
@@ -290,7 +290,7 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_slicing_blob.htm</a></li>
  </ul>
- 
+
  <h2 id="access" name="access">Accessing a Sandboxed File System</h2>
 
 <p>Requesting access to sandboxed sections of a local file system is a useful file management skill:</p>
@@ -299,26 +299,26 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
 <li>Use the <code>requestFileSystem()</code> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#using-localfilesystem" target="_blank">LocalFileSystem</a> interface to request access to sandboxed sections of a local file system:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* Tizen uses the webkit prefix */
-&nbsp;&nbsp;&nbsp;window.requestFileSystem = window.webkitRequestFileSystem;
-
-&nbsp;&nbsp;&nbsp;var fs = null;
-
-&nbsp;&nbsp;&nbsp;/* Initialize the file system when loading a page */
-&nbsp;&nbsp;&nbsp;if (window.requestFileSystem)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initFS();
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function initFS()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Request for access to the sandboxed file system */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* and define PERSISTENT or TEMPORARY storage */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.requestFileSystem(window.TEMPORARY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1024 * 1024, /* Storage space (bytes) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(filesystem) {fs = filesystem;},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorHandler);
-&nbsp;&nbsp;&nbsp;}
+   /* Tizen uses the webkit prefix */
+   window.requestFileSystem = window.webkitRequestFileSystem;
+
+   var fs = null;
+
+   /* Initialize the file system when loading a page */
+   if (window.requestFileSystem)
+   {
+      initFS();
+   }
+
+   function initFS()
+   {
+      /* Request for access to the sandboxed file system */
+      /* and define PERSISTENT or TEMPORARY storage */
+      window.requestFileSystem(window.TEMPORARY,
+                               1024 * 1024, /* Storage space (bytes) */
+                               function(filesystem) {fs = filesystem;},
+                               errorHandler);
+   }
 &lt;/script&gt;
 </pre>
 
@@ -327,7 +327,7 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
        The <code>requestFileSystem()</code> method is created in the Web application program when it is initially called.
 </div>
 
-<p>The directory file in the file system root can be searched, created and deleted by accessing local file system. 
+<p>The directory file in the file system root can be searched, created and deleted by accessing local file system.
 </p>
 </li>
 
@@ -343,62 +343,62 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
 <p>Reading a file or directory in a sandboxed section of a local file system is a useful file management skill:</p>
 
 <ol>
-<li>Create the <code>&lt;input type=&quot;button&quot;&gt;</code> element for displaying the entries (directories or files) stored in the root directory within the file system, and the list element for displaying the result:
+<li>Create the <code>&lt;input type="button"&gt;</code> element for displaying the entries (directories or files) stored in the root directory within the file system, and the list element for displaying the result:
 <pre class="prettyprint">
-&lt;input type=&quot;button&quot; value=&quot;Show FileList&quot; onclick=&quot;ShowFileList();&quot;/&gt;
-&lt;ul id=&quot;resultSection&quot;&gt;&lt;/ul&gt;
+&lt;input type="button" value="Show FileList" onclick="ShowFileList();"/&gt;
+&lt;ul id="resultSection"&gt;&lt;/ul&gt;
 </pre>
 </li>
 
 <li>To read the entry within the file system, use the <code>createReader()</code> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-directoryentry-interface" target="_blank">DirectoryEntry</a> interface:
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function ShowFileList()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!fs) return;
+   function ShowFileList()
+   {
+      if (!fs) return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var objResultSection = document.querySelector(&#39;#resultSection&#39;);
+      var objResultSection = document.querySelector('#resultSection');
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var root = fs.root;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var dirReader = root.createReader();
+      var root = fs.root;
+      var dirReader = root.createReader();
 </pre>
 </li>
 <li>Use the <code>readEntries()</code> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-directoryreader-interface" target="_blank">DirectoryReader</a> interface to read all entries:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dirReader.readEntries(function(entries)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+      dirReader.readEntries(function(entries)
+      {
 </pre>
 </li>
 <li>Display the list of the relevant entries using the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-entry-interface" target="_blank">Entry</a> interface:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!entries.length)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objResultSection.innerHTML = &#39;Filesystem is empty.&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fragment = document.createDocumentFragment();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var entry, i;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; entries.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry = entries[i];
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var img =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.isDirectory ? &#39;&lt;img class=&quot;icon-img&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src=&quot;img/icon_folder.png&quot; alt=&quot;folder&quot;&gt;&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: &#39;&lt;img class=&quot;icon-img&quot; src=&quot;img/icon_file.png&quot; alt=&quot;file&quot;&gt;&#39;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var li = document.createElement(&#39;li&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display entry name */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li.innerHTML = [img, &#39;&lt;span&gt;&#39;, entry.name, &#39;&lt;/span&gt;&#39;].join(&#39;&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objResultSection.innerHTML = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fragment.appendChild(li);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objResultSection.appendChild(fragment);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, errorHandler);
-&nbsp;&nbsp;&nbsp;}
+         if (!entries.length)
+         {
+            objResultSection.innerHTML = 'Filesystem is empty.';
+         }
+         else
+         {
+            var fragment = document.createDocumentFragment();
+            var entry, i;
+
+            for (i = 0; i &lt; entries.length; i++)
+            {
+               entry = entries[i];
+
+               var img =
+                  entry.isDirectory ? '&lt;img class="icon-img"
+                                            src="img/icon_folder.png" alt="folder"&gt;'
+                  : '&lt;img class="icon-img" src="img/icon_file.png" alt="file"&gt;';
+
+               var li = document.createElement('li');
+               /* Display entry name */
+               li.innerHTML = [img, '&lt;span&gt;', entry.name, '&lt;/span&gt;'].join('');
+               objResultSection.innerHTML = '';
+               fragment.appendChild(li);
+            }
+            objResultSection.appendChild(fragment);
+         }
+      }, errorHandler);
+   }
 &lt;/script&gt;
 </pre>
 </li></ol>
@@ -408,8 +408,8 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
        For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.
 </div>
 
-<p align="center"><strong>Figure: Displaying files</strong></p> 
-<p align="center"><img alt="Displaying files" src="../../../images/file4.png" /></p> 
+<p align="center"><strong>Figure: Displaying files</strong></p>
+<p align="center"><img alt="Displaying files" src="../../../images/file4.png" /></p>
 
 
 <h3>Source Code</h3>
@@ -425,46 +425,46 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
 <p>Creating a directory or file in a sandboxed section of a local file system is a useful file management skill:</p>
 
 <ol>
-<li>Create the <code>select</code> element for selecting the type of entry to be added, <code>&lt;input type=&quot;text&quot;&gt;</code> element for entering the entry name, and <code>&lt;input type=&quot;button&gt;&quot;</code> element for creating the entry:
+<li>Create the <code>select</code> element for selecting the type of entry to be added, <code>&lt;input type="text"&gt;</code> element for entering the entry name, and <code>&lt;input type="button&gt;"</code> element for creating the entry:
 <pre class="prettyprint">
-&lt;select id=&quot;selType&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;dir&quot;&gt;Directory&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;file&quot;&gt;File&lt;/option&gt;
+&lt;select id="selType"&gt;
+   &lt;option value="dir"&gt;Directory&lt;/option&gt;
+   &lt;option value="file"&gt;File&lt;/option&gt;
 &lt;/select&gt;
-&lt;input type=&quot;text&quot; id=&quot;txtName&quot; name=&quot;txtName&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;width: 200px;&quot; maxlength=&quot;20&quot;/&gt;
-&lt;input type=&quot;button&quot; value=&quot;Add File or Directory&quot; onclick=&quot;AddFile();&quot;/&gt;
+&lt;input type="text" id="txtName" name="txtName"
+       style="width: 200px;" maxlength="20"/&gt;
+&lt;input type="button" value="Add File or Directory" onclick="AddFile();"/&gt;
 </pre>
 </li>
 
 <li>To create a directory, use the <code>getDirectory()</code> method. To create a file, use the <code>getFile()</code> method:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function AddFile()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!fs) return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var type = document.querySelector(&#39;#selType&#39;).value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var name = document.querySelector(&#39;#txtName&#39;).value;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (name == &quot;&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return alert(&quot;Enter File or Directory Name.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (type == &quot;file&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create file */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getFile(name, {create: true}, null, errorHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (type == &quot;dir&quot;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create directory */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fs.root.getDirectory(name, {create: true}, null, errorHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#resultSection&#39;).innerHTML = &#39;Files created.&#39;;
-&nbsp;&nbsp;&nbsp;}
+   function AddFile()
+   {
+      if (!fs) return;
+
+      var type = document.querySelector('#selType').value;
+      var name = document.querySelector('#txtName').value;
+
+      if (name == "")
+      {
+         return alert("Enter File or Directory Name.");
+      }
+
+      if (type == "file")
+      {
+         /* Create file */
+         fs.root.getFile(name, {create: true}, null, errorHandler);
+      }
+      else if (type == "dir")
+      {
+         /* Create directory */
+         fs.root.getDirectory(name, {create: true}, null, errorHandler);
+      }
+
+      document.querySelector('#resultSection').innerHTML = 'Files created.';
+   }
 &lt;/script&gt;
 </pre>
 
@@ -473,8 +473,8 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
        For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.
 </div>
 
-<p align="center"><strong>Figure: Adding a file</strong></p> 
-<p align="center"><img alt="Adding a file" src="../../../images/file5.png" /></p> 
+<p align="center"><strong>Figure: Adding a file</strong></p>
+<p align="center"><img alt="Adding a file" src="../../../images/file5.png" /></p>
 </li>
 </ol>
 <h3>Source Code</h3>
@@ -488,40 +488,40 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
 <p>Deleting a directory or file in a sandboxed section of a local file system is a useful file management skill:</p>
 
 <ol>
-<li>Create the <code>&lt;input type=&quot;button&quot;&gt;</code> element for deleting the entry (directory or file):
+<li>Create the <code>&lt;input type="button"&gt;</code> element for deleting the entry (directory or file):
 <pre class="prettyprint">
-&lt;input type=&quot;button&quot; value=&quot;Remove all files&quot; onclick=&quot;RemoveFile();&quot;/&gt;
+&lt;input type="button" value="Remove all files" onclick="RemoveFile();"/&gt;
 </pre>
 </li>
 
 <li>To delete a directory and all the files in it, use the <code>removeRecursively()</code> method. To delete an individual file, use the <code>remove()</code> method:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function RemoveFile()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!fs) return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var dirReader = fs.root.createReader();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var entry, i;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dirReader.readEntries(function(entries)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; entries.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry = entries[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (entry.isDirectory)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.removeRecursively(function() {}, errorHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.remove(function() {}, errorHandler);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector(&#39;#resultSection&#39;).innerHTML =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;Directory emptied.&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, errorHandler);
-&nbsp;&nbsp;&nbsp;}
+   function RemoveFile()
+   {
+      if (!fs) return;
+
+      var dirReader = fs.root.createReader();
+      var entry, i;
+
+      dirReader.readEntries(function(entries)
+         {
+            for (i = 0; i &lt; entries.length; i++)
+            {
+               entry = entries[i];
+               if (entry.isDirectory)
+               {
+                  entry.removeRecursively(function() {}, errorHandler);
+               }
+               else
+               {
+                  entry.remove(function() {}, errorHandler);
+               }
+            }
+            document.querySelector('#resultSection').innerHTML =
+               'Directory emptied.';
+         }, errorHandler);
+   }
 &lt;/script&gt;
 </pre>
 
@@ -530,8 +530,8 @@ end byte: &lt;input type=&quot;text&quot; id=&quot;endByte&quot; name=&quot;endB
        For error handling, see <a href="#access">Accessing a Sandboxed File System</a>.
 </div>
 
-<p align="center"><strong>Figure: Deleting files</strong></p> 
-<p align="center"><img alt="Deleting files" src="../../../images/file6.png" /></p> 
+<p align="center"><strong>Figure: Deleting files</strong></p>
+<p align="center"><img alt="Deleting files" src="../../../images/file6.png" /></p>
 </li>
 </ol>
 <h3>Source Code</h3>
diff --git a/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm b/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
index 332d8dc..f84c92e 100644 (file)
--- a/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
@@ -43,7 +43,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Indexed Database</h1>
- 
+
  <p>In HTML5, an indexed database is a local storage used to store and manipulate data in a client. You can implement effective searches using an index as a simple storage structure in the key-value format.
 </p>
 
@@ -88,18 +88,18 @@ index</a>. You can search and retrieve records stored in the
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;if (!window.webkitIndexedDB)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.alert(&quot;Does not support IndexedDB&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var tizenDB = {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var request = window.webkitIndexedDB.open(&quot;TizenIndexedDB&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.onsuccess = function(e) {}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.onerror = function(e) {/* Error handling */}
-&nbsp;&nbsp;&nbsp;}
+   if (!window.webkitIndexedDB)
+   {
+      window.alert("Does not support IndexedDB");
+   }
+   else
+   {
+      var tizenDB = {}
+      var request = window.webkitIndexedDB.open("TizenIndexedDB");
+
+      request.onsuccess = function(e) {}
+      request.onerror = function(e) {/* Error handling */}
+   }
 &lt;/script&gt;
 </pre>
 
@@ -114,7 +114,7 @@ index</a>. You can search and retrieve records stored in the
 <p>Delete the generated database using the <code>window.webkitIndexedDB.deleteDatabase()</code> method:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;window.webkitIndexedDB.deleteDatabase(&#39;TizenIndexedDB&#39;);
+   window.webkitIndexedDB.deleteDatabase('TizenIndexedDB');
 &lt;/script&gt;
 </pre>
 </li>
@@ -126,7 +126,7 @@ index</a>. You can search and retrieve records stored in the
  </ul>
 
  <h2 id="store" name="store">Creating an Object Store</h2>
- 
+
 <p>An object store can derive keys from the following sources:
 </p>
 <ul>
@@ -145,26 +145,26 @@ index</a>. You can search and retrieve records stored in the
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var tizenDB = {}
-&nbsp;&nbsp;&nbsp;var request = window.webkitIndexedDB.open(&quot;TizenIndexedDB&quot;);
-&nbsp;&nbsp;&nbsp;request.onupgradeneeded = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenDB.db = event.target.result;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var objStore = tizenDB.db.createObjectStore(&quot;tizenStore&quot;, {keyPath: &quot;key&quot;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
+   var tizenDB = {}
+   var request = window.webkitIndexedDB.open("TizenIndexedDB");
+   request.onupgradeneeded = function(e)
+   {
+      tizenDB.db = event.target.result;
+      try
+      {
+         var objStore = tizenDB.db.createObjectStore("tizenStore", {keyPath: "key"});
+      }
+   };
 &lt;/script&gt;
 </pre>
-<p>The name and key path of an independent object are defined in the object store.  
+<p>The name and key path of an independent object are defined in the object store.
 The <code>keyPath</code> property makes the object store unique and must contain the <code>key</code> attribute to store data in the object store.</p>
 </li>
 <li>
 <p>To delete the object store, use the <code>deleteObjectStore()</code> method:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;window.webkitIndexedDB.deleteObjectStore(&#39;tizenStore&#39;);
+   window.webkitIndexedDB.deleteObjectStore('tizenStore');
 &lt;/script&gt;
 </pre>
 </li>
@@ -174,7 +174,7 @@ The <code>keyPath</code> property makes the object store unique and must contain
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/indexed_database_api" target="_blank">indexedDB_creating_objectStore.html</a></li>
  </ul>
- 
+
  <h2 id="manage" name="manage">Managing Data</h2>
 
 <p>Saving, accessing, and deleting data in an object store is a useful data management skill:</p>
@@ -185,23 +185,23 @@ The <code>keyPath</code> property makes the object store unique and must contain
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;objStore.transaction.oncomplete = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var trans = tizenDB.db.transaction(&quot;tizenStore&quot;, &quot;readwrite&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var tizenStore = trans.objectStore(&quot;tizenStore&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var data =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;key&quot;: new Date().getTime(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;text&quot;: &quot;Tizen-&quot; + Math.random()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var request = tizenStore.put(data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;request.onsuccess = function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenDB.db.objectStoreId = request.result;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(request.result);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;}
+   objStore.transaction.oncomplete = function(e)
+   {
+      var trans = tizenDB.db.transaction("tizenStore", "readwrite");
+      var tizenStore = trans.objectStore("tizenStore");
+      var data =
+      {
+         "key": new Date().getTime(),
+         "text": "Tizen-" + Math.random()
+      };
+
+      var request = tizenStore.put(data);
+      request.onsuccess = function(e)
+      {
+         tizenDB.db.objectStoreId = request.result;
+         console.log(request.result);
+      };
+   }
 &lt;/script&gt;
 </pre>
 
@@ -211,12 +211,12 @@ The <code>keyPath</code> property makes the object store unique and must contain
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var request = tizenStore.put(data);
-&nbsp;&nbsp;&nbsp;request.onsuccess = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenDB.db.objectStoreId = request.result;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var data = tizenStore.get(tizenDB.db.objectStoreId);
-&nbsp;&nbsp;&nbsp;};
+   var request = tizenStore.put(data);
+   request.onsuccess = function(e)
+   {
+      tizenDB.db.objectStoreId = request.result;
+      var data = tizenStore.get(tizenDB.db.objectStoreId);
+   };
 &lt;/script&gt;
 </pre>
 </li><li>
@@ -225,16 +225,16 @@ The <code>keyPath</code> property makes the object store unique and must contain
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var request = tizenStore.put(data);
-&nbsp;&nbsp;&nbsp;request.onsuccess = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizenDB.db.objectStoreId = request.result;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var data = tizenStore.delete(tizenDB.db.objectStoreId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data.onsuccess = function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;};
+   var request = tizenStore.put(data);
+   request.onsuccess = function(e)
+   {
+      tizenDB.db.objectStoreId = request.result;
+      var data = tizenStore.delete(tizenDB.db.objectStoreId);
+      data.onsuccess = function(e)
+      {
+         console.log(data);
+      }
+   };
 &lt;/script&gt;
 </pre>
 
@@ -245,7 +245,7 @@ The <code>keyPath</code> property makes the object store unique and must contain
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/indexed_database_api" target="_blank">indexedDB_saving_data.html</a></li>
  </ul>
- 
+
  <h2 id="index" name="index">Creating an Index</h2>
 
 <p>Creating, accessing, and deleting an index is a useful data management skill:</p>
@@ -256,21 +256,21 @@ The <code>keyPath</code> property makes the object store unique and must contain
 
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var objStore = tizenDB.db.createObjectStore(&quot;tizenStore&quot;, {keyPath: &quot;key&quot;});
-&nbsp;&nbsp;&nbsp;tizenDB.index = objStore.createIndex(&quot;tizen01&quot;, &quot;text&quot;);
+   var objStore = tizenDB.db.createObjectStore("tizenStore", {keyPath: "key"});
+   tizenDB.index = objStore.createIndex("tizen01", "text");
 </pre>
 </li>
 <li>
 <p>Access the index using the <code>objStore.index()</code> method:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;var dbIndex = objStore.index(&quot;tizen01&quot;);
+   var dbIndex = objStore.index("tizen01");
 </pre>
 </li>
 <li>
 <p>Delete the index using the <code>objStore.deleteIndex()</code> method:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;tizenDB.index = objStore.deleteIndex(&quot;tizen01&quot;);
+   tizenDB.index = objStore.deleteIndex("tizen01");
 &lt;/script&gt;
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm b/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
index da0822a..1b475f3 100644 (file)
--- a/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
@@ -49,7 +49,7 @@
    <li><a href="websql_w.htm">Web SQL Database</a> <strong>in mobile applications only</strong>
    <p>Enables you to create databases and access them using SQL statements.</p></li>
   </ul>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm b/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
index a805ec6..c46eb16 100644 (file)
--- a/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
@@ -64,14 +64,14 @@ is copied to the new window. However, if the data in the new window is edited, i
 <p>You can <a href="#save">save and read data in the local and session storages</a>. You can also <a href="#use">use the local storage</a> to delete the data.</p>
 
 <h2 id="use" name="use">Using a Local Storage</h2>
- 
+
 <p>Saving, reading, and deleting data in a local Web storage is a useful data management skill:</p>
 <ol>
 <li>
 <p>To save data in the storage, use the <code>setItem()</code> method that saves data in the key-value format:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;localStorage.setItem(key.value, data.value);
+   localStorage.setItem(key.value, data.value);
 &lt;/script&gt;
 </pre>
 
@@ -85,12 +85,12 @@ is copied to the new window. However, if the data in the new window is edited, i
 <p>To get the saved data, use the <code>getItem()</code> method with the data key:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; localStorage.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localhtml +=
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;li&gt;&quot; + localStorage.key(i) + &quot; : &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ localStorage.getItem(localStorage.key(i)) + &quot;&lt;/li&gt;&quot;;
-&nbsp;&nbsp;&nbsp;}
+   for (var i = 0; i &lt; localStorage.length; i++)
+   {
+      localhtml +=
+         "&lt;li&gt;" + localStorage.key(i) + " : "
+         + localStorage.getItem(localStorage.key(i)) + "&lt;/li&gt;";
+   }
 &lt;/script&gt;
 </pre>
 </li>
@@ -101,7 +101,7 @@ is copied to the new window. However, if the data in the new window is edited, i
 <li>To delete a specific item, use the <code>removeItem()</code> method with the data key:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;localStorage.removeItem(key.value);
+   localStorage.removeItem(key.value);
 &lt;/script&gt;
 </pre>
 </li>
@@ -109,7 +109,7 @@ is copied to the new window. However, if the data in the new window is edited, i
 <p>To delete all the data stored in the local storage, use the <code>clear()</code> method:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;localStorage.clear();
+   localStorage.clear();
 &lt;/script&gt;
 </pre>
 
@@ -126,9 +126,9 @@ is copied to the new window. However, if the data in the new window is edited, i
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_storage" target="_blank">local_storage_session_storage.htm</a></li>
  </ul>
- 
+
  <h2 id="save" name="save">Managing Data in Local and Session Storage</h2>
- 
+
 <p>With the <code>setItem()</code> method, you can store searches on certain conditions used in the browser by the user. When the user reconnects, the <code>getItem()</code> method is called to retrieve the stored data.</p>
 
 <p>Knowing how the same data is saved in local storage and session storage, and checking whether data exists when the browser is closed and reopened is a useful data management skill: </p>
@@ -137,12 +137,12 @@ is copied to the new window. However, if the data in the new window is edited, i
 <li><p>Create the storage key and define a <code>button</code> element for saving the data:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;Storage key:
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;text&quot; id=&quot;storageKey&quot; style=&quot;width: 50px&quot;/&gt;
-&nbsp;&nbsp;&nbsp;value:
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;text&quot; id=&quot;storageData&quot; style=&quot;width: 50px&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;button&quot; id=&quot;save&quot; value=&quot;SAVE&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=&quot;addStorage(); return false;&quot; &#47;&gt;
+   Storage key:
+   &lt;input type="text" id="storageKey" style="width: 50px"/&gt;
+   value:
+   &lt;input type="text" id="storageData" style="width: 50px"/&gt;
+   &lt;input type="button" id="save" value="SAVE"
+          onclick="addStorage(); return false;" &#47;&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -151,33 +151,33 @@ is copied to the new window. However, if the data in the new window is edited, i
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function addStorage()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var key = document.getElementById(&quot;storageKey&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var data = document.getElementById(&quot;storageData&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the local storage item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (&quot;localStorage&quot; in window)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localStorage.setItem(key.value, data.value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location.reload();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;no localStorage in window&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the session storage item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (&quot;sessionStorage&quot; in window)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sessionStorage.setItem(key.value, data.value);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location.reload();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;no sessionStorage in window&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   function addStorage()
+   {
+      var key = document.getElementById("storageKey");
+      var data = document.getElementById("storageData");
+
+      /* Set the local storage item */
+      if ("localStorage" in window)
+      {
+         localStorage.setItem(key.value, data.value);
+         location.reload();
+      }
+      else
+      {
+         alert("no localStorage in window");
+      }
+
+      /* Set the session storage item */
+      if ("sessionStorage" in window)
+      {
+         sessionStorage.setItem(key.value, data.value);
+         location.reload();
+      }
+      else
+      {
+         alert("no sessionStorage in window");
+      }
+   }
 &lt;/script&gt;
 </pre>
 </li>
@@ -186,39 +186,39 @@ is copied to the new window. However, if the data in the new window is edited, i
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;window.onload = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var localhtml = &quot;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sessionhtml = &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the local storage item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; localStorage.length; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localhtml +=
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;li&gt;&quot; + localStorage.key(i) + &quot; : &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ localStorage.getItem(localStorage.key(i)) + &quot;&lt;/li&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;localStorageData&quot;).innerHTML = localhtml;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Get the session storage item */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var j = 0; j &lt; sessionStorage.length; j++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sessionhtml +=
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;li&gt;&quot; + sessionStorage.key(j) + &quot; : &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ sessionStorage.getItem(sessionStorage.key(j)) + &quot;&lt;/li&gt;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;sessionStorageData&quot;).innerHTML = sessionhtml;
-&nbsp;&nbsp;&nbsp;}
+   window.onload = function()
+   {
+      var localhtml = "";
+      var sessionhtml = "";
+
+      /* Get the local storage item */
+      for (var i = 0; i &lt; localStorage.length; i++)
+      {
+         localhtml +=
+            "&lt;li&gt;" + localStorage.key(i) + " : "
+            + localStorage.getItem(localStorage.key(i)) + "&lt;/li&gt;";
+      }
+      document.getElementById("localStorageData").innerHTML = localhtml;
+
+      /* Get the session storage item */
+      for (var j = 0; j &lt; sessionStorage.length; j++)
+      {
+         sessionhtml +=
+            "&lt;li&gt;" + sessionStorage.key(j) + " : "
+            + sessionStorage.getItem(sessionStorage.key(j)) + "&lt;/li&gt;";
+      }
+      document.getElementById("sessionStorageData").innerHTML = sessionhtml;
+   }
 &lt;/script&gt;
 </pre>
 
-<p align="center"><strong>Figure: Displaying local and session storage data (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Displaying local and session storage data (in mobile applications only)" src="../../../images/web_storage1.png" /></p> 
- 
+<p align="center"><strong>Figure: Displaying local and session storage data (in mobile applications only)</strong></p>
+<p align="center"><img alt="Displaying local and session storage data (in mobile applications only)" src="../../../images/web_storage1.png" /></p>
+
  <p>If the browser is closed and reopened, only the local storage data can be displayed, as illustrated in the following figure.</p>
- 
-<p align="center"><strong>Figure: Displaying data after reopening the browser (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Displaying data after reopening the browser (in mobile applications only)" src="../../../images/web_storage2.png" /></p> 
+
+<p align="center"><strong>Figure: Displaying data after reopening the browser (in mobile applications only)</strong></p>
+<p align="center"><img alt="Displaying data after reopening the browser (in mobile applications only)" src="../../../images/web_storage2.png" /></p>
  </li>
 </ol>
 <h3>Source Code</h3>
diff --git a/org.tizen.guides/html/web/w3c/storage/websql_w.htm b/org.tizen.guides/html/web/w3c/storage/websql_w.htm
index b8c9fb8..a4fbb24 100644 (file)
--- a/org.tizen.guides/html/web/w3c/storage/websql_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/websql_w.htm
@@ -41,7 +41,7 @@
                        <li><a href="#access">Accessing SQL Results Synchronously</a></li>
                        <li><a href="#handle">Handling a Syntax Error Synchronously</a></li>
                        </ul>
-               </li>   
+               </li>
                </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -54,11 +54,11 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Web SQL Database</h1>
-  
+
  <p>The Web SQL database provides a way to store databases that can be queried using various SQL statements. Each Tizen application can store multiple databases and each one of them can store multiple tables. Databases can be accessed using the SQL language, which is a common standard for these kinds of applications.</p>
- 
-  <p>This feature is supported in mobile applications only.</p> 
- 
+
+  <p>This feature is supported in mobile applications only.</p>
+
  <p>When working with the SQL database, you can use the following approaches:</p>
 <ul>
 <li>Asynchronous database API
@@ -96,15 +96,15 @@
 <pre class="prettyprint">
 var db;
 var version = 1.0;
-var dbName = &quot;tizendb&quot;;
-var dbDisplayName = &quot;tizen_test_db&quot;;
+var dbName = "tizendb";
+var dbDisplayName = "tizen_test_db";
 var dbSize = 2 * 1024 * 1024;
 try
 {
-&nbsp;&nbsp;&nbsp;db = openDatabase(dbName, version, dbDisplayName, dbSize, function(database)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;database creation callback&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   db = openDatabase(dbName, version, dbDisplayName, dbSize, function(database)
+      {
+         alert("database creation callback");
+      });
 }
 </pre>
 <p>The method takes the following arguments: unique name of the database, expected version of the database to be opened (if an empty string is given any version can be loaded), display name, the estimated size of database (number of bytes), and, optionally, the database creation event handler.</p>
@@ -131,7 +131,7 @@ try
 
 <pre class="prettyprint">
 db.transaction(function(t) {/* Place SQL statements here */},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function() {alert(&quot;SQL statements were executed successfully.&quot;);});
+               function() {alert("SQL statements were executed successfully.");});
 </pre>
 
 <p>The difference between the <code>transaction()</code> and <code>readTransaction()</code> methods is that the latter cannot be used with SQL statements that change the database (such as <code>INSERT</code>, <code>UPDATE</code>, <code>DELETE</code>,  or <code>CREATE</code>).</p>
@@ -144,21 +144,21 @@ db.transaction(function(t) {/* Place SQL statements here */},
 <li>
 <p>To execute a SQL statement, use the <code>executeSql()</code> method. The SQL statement is the first parameter of the method and cannot contain SQL transaction statements (such as <code>BEGIN</code>, <code>END</code>, or <code>ROLLBACK</code>):</p>
 <pre class="prettyprint">
-t.executeSql(&quot;CREATE TABLE tizenTable (id INTEGER PRIMARY KEY, title TEXT,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content TEXT, insertDay DATETIME)&quot;, [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(sqlTransaction, sqlResultSet)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;Table has been created.&quot;);
-&nbsp;&nbsp;&nbsp;}, function(sqlTransaction, sqlError)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;});
+t.executeSql("CREATE TABLE tizenTable (id INTEGER PRIMARY KEY, title TEXT,
+              content TEXT, insertDay DATETIME)", [],
+             function(sqlTransaction, sqlResultSet)
+   {
+      alert("Table has been created.");
+   }, function(sqlTransaction, sqlError)
+   {
+      /* Error handling */
+   });
 </pre>
 </li>
 <li>
 <p>Pass arguments to the SQL statement:</p>
 <pre class="prettyprint">
-sqlTransaction.executeSql(&quot;SELECT * FROM tizenTable WHERE id=?&quot;, [value]);
+sqlTransaction.executeSql("SELECT * FROM tizenTable WHERE id=?", [value]);
 </pre>
 
 <div class="note">
@@ -173,7 +173,7 @@ sqlTransaction.executeSql(&quot;SELECT * FROM tizenTable WHERE id=?&quot;, [valu
  <ul>
     <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_sql_database" target="_blank">websqldatabase_example.html</a></li>
  </ul>
- 
+
  <h2 id="access_a" name="access_a">Accessing SQL Results Asynchronously</h2>
 
 <p>To provide users with SQL database features, you must learn to access SQL statement results asynchronously:</p>
@@ -183,12 +183,12 @@ sqlTransaction.executeSql(&quot;SELECT * FROM tizenTable WHERE id=?&quot;, [valu
 <ul>
 <li>The result object of the INSERT statement contains the insert ID, which stores the identifier of the added record. If multiple records were inserted, the insert ID contains the ID of the last inserted record:
 <pre class="prettyprint">
-sqlTransaction.executeSql(&quot;INSERT INTO tizenTable(title, content, insertDay)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VALUES (?, ?, ?)&quot;, [title, context, day],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(sqlTransaction, sqlResultSet)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;The &#39;id&#39; of the new record  is &quot; + sqlResultSet.insertId);
-&nbsp;&nbsp;&nbsp;});
+sqlTransaction.executeSql("INSERT INTO tizenTable(title, content, insertDay)
+                           VALUES (?, ?, ?)", [title, context, day],
+                          function(sqlTransaction, sqlResultSet)
+   {
+      alert("The 'id' of the new record  is " + sqlResultSet.insertId);
+   });
 </pre>
 
 </li>
@@ -196,17 +196,17 @@ sqlTransaction.executeSql(&quot;INSERT INTO tizenTable(title, content, insertDay
 It contains the number of selected rows (length field) and the <code>item()</code> method. Use the method with the index argument (integer value from 0 to <code>rows.length</code> - 1) to get individual records:
 
 <pre class="prettyprint">
-sqlTransaction.executeSql(&quot;SELECT id, title, author FROM books&quot;, [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(sqlTransaction, sqlResultSet)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var book, i, booksNumber = sqllResultSet.rows.length;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; booksNumber; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;book = sqlResultSet.rows.item(i);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;id: &quot; + book.id + &quot;, title: &quot; + book.title
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot;, author: &quot; + book.author);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+sqlTransaction.executeSql("SELECT id, title, author FROM books", [],
+                          function(sqlTransaction, sqlResultSet)
+   {
+      var book, i, booksNumber = sqllResultSet.rows.length;
+      for (i = 0; i &lt; booksNumber; i++)
+      {
+         book = sqlResultSet.rows.item(i);
+         alert("id: " + book.id + ", title: " + book.title
+               + ", author: " + book.author);
+      }
+   });
 </pre>
 </li>
 </ul>
@@ -218,7 +218,7 @@ sqlTransaction.executeSql(&quot;SELECT id, title, author FROM books&quot;, [],
  <ul>
     <li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_sql_database" target="_blank">websqldatabase_example.html</a></li>
  </ul>
- 
+
  <h2 id="handle_a" name="handle_a">Handling a Syntax Error Asynchronously</h2>
 
 <p>To provide users with SQL database features, you must learn to handle SQL database-related errors asynchronously:</p>
@@ -227,19 +227,19 @@ sqlTransaction.executeSql(&quot;SELECT id, title, author FROM books&quot;, [],
 
 <p>Handle a syntax error in the <code>sqlError</code> object:</p>
 <pre class="prettyprint">
-sqlTransaction.executeSql(&quot;SELECT * FROM notExistingTable&quot;, [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(sqlTransaction, sqlResultSet) {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(sqlTransaction, sqlError)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (sqlError.code)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case sqlError.SYNTAX_ERR:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;Syntax error has occurred. &quot; + sqlError.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(&quot;Other error&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+sqlTransaction.executeSql("SELECT * FROM notExistingTable", [],
+                          function(sqlTransaction, sqlResultSet) {},
+                          function(sqlTransaction, sqlError)
+   {
+      switch (sqlError.code)
+      {
+         case sqlError.SYNTAX_ERR:
+            alert("Syntax error has occurred. " + sqlError.message);
+            break;
+         default:
+             alert("Other error");
+      }
+   });
 </pre>
 <p>Other types of errors that can occur are exceptions. The <code>sqlException</code> object has the same fields as the <code>sqlError</code> object but it must be handled in the <code>try - catch</code> block.</p>
 </li>
@@ -256,11 +256,11 @@ sqlTransaction.executeSql(&quot;SELECT * FROM notExistingTable&quot;, [],
 var databaseSync = null;
 try
 {
-&nbsp;&nbsp;&nbsp;databaseSync = openDatabaseSync(&quot;dbName&quot;, &quot;1.0&quot;, &quot;display database name&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1024 * 1024, function(databaseSync)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;database creation callback&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   databaseSync = openDatabaseSync("dbName", "1.0", "display database name",
+                                   1024 * 1024, function(databaseSync)
+      {
+         alert("database creation callback");
+      });
 }
 </pre>
 
@@ -274,7 +274,7 @@ try
 </ol>
 
  <h2 id="execute" name="execute">Executing SQL Statements Synchronously</h2>
- 
+
 
 <p>To provide users with SQL database features, you must learn to execute SQL statements synchronously:</p>
 <ol>
@@ -283,7 +283,7 @@ try
 
 <pre class="prettyprint">
 database.transaction(function(sqlTransactionSync) {/* Place SQL statements here */},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function() {alert(&quot;SQL statements were executed successfully.&quot;);});
+                     function() {alert("SQL statements were executed successfully.");});
 </pre>
 
 <p>The difference between the <code>transaction()</code> and <code>readTransaction()</code> methods is that the latter cannot be used with SQL statements that change the database (such as <code>INSERT</code>, <code>UPDATE</code>, <code>DELETE</code>,  or <code>CREATE</code>).</p>
@@ -297,16 +297,16 @@ database.transaction(function(sqlTransactionSync) {/* Place SQL statements here
 <p>To execute a SQL statement, use the <code>executeSql()</code> method. The SQL statement is the first parameter of the method and cannot contain SQL transaction statements (such as <code>BEGIN</code>, <code>END</code>, or <code>ROLLBACK</code>):</p>
 <pre class="prettyprint">
 var sqlResultSet =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlTransactionSync.executeSql(&quot;CREATE TABLE IF NOT EXISTS books(id INTEGER
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PRIMARY KEY, title TEXT, author TEXT)&quot;, []);
+      sqlTransactionSync.executeSql("CREATE TABLE IF NOT EXISTS books(id INTEGER
+                                     PRIMARY KEY, title TEXT, author TEXT)", []);
 </pre>
 </li>
 <li>
 <p>Pass arguments to the SQL statement:</p>
 <pre class="prettyprint">
 var sqlResultSet =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlTransactionSync.executeSql(&quot;SELECT id FROM books WHERE title=? AND author=?&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;Ulysses&quot;, &quot;James Joyce&quot;]);
+      sqlTransactionSync.executeSql("SELECT id FROM books WHERE title=? AND author=?",
+                                    ["Ulysses", "James Joyce"]);
 </pre>
 
 <div class="note">
@@ -326,10 +326,10 @@ var sqlResultSet =
 <li>The result object of the INSERT statement contains the insert ID, which stores the identifier of the added record. If multiple records were inserted, the insert ID contains the ID of the last inserted record:
 <pre class="prettyprint">
 var sqlResultSet =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlTransactionSync.executeSql(&quot;INSERT INTO books (id, title, author)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VALUES(NULL, ?, ?)&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;Ulysses&quot;, &quot;James Joyce&quot;]);
-alert(&quot;The &#39;id&#39; of the new record  is &quot; + sqlResultSet.insertId);
+      sqlTransactionSync.executeSql("INSERT INTO books (id, title, author)
+                                     VALUES(NULL, ?, ?)",
+                                    ["Ulysses", "James Joyce"]);
+alert("The 'id' of the new record  is " + sqlResultSet.insertId);
 </pre>
 
 </li>
@@ -338,13 +338,13 @@ It contains the number of selected rows (length field) and the <code>item()</cod
 
 <pre class="prettyprint">
 var sqlResultSet =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlTransactionSync.executeSql(&quot;SELECT id, title, author FROM books&quot;);
+      sqlTransactionSync.executeSql("SELECT id, title, author FROM books");
 var book, i, booksNumber = sqlResultSet.rows.length;
 for (i = 0; i &lt; booksNumber; i++)
 {
-&nbsp;&nbsp;&nbsp;book = sqlResultSet.rows.item(i);
-&nbsp;&nbsp;&nbsp;alert(&quot;id: &quot; + book.id + &quot;, title: &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ book.title + &quot;, author: &quot; + book.author);
+   book = sqlResultSet.rows.item(i);
+   alert("id: " + book.id + ", title: "
+         + book.title + ", author: " + book.author);
 }
 </pre>
 </li>
@@ -361,18 +361,18 @@ for (i = 0; i &lt; booksNumber; i++)
 <pre class="prettyprint">
 try
 {
-&nbsp;&nbsp;&nbsp;databaseSync.transaction(function(sqlTransactionSync)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sqlResultSet =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sqlTransactionSync.executeSql(&quot;DELETE FROM books WHERE id=?&quot;, [id]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;/* Instructions if the above SQL statement is executed successfully */
+   databaseSync.transaction(function(sqlTransactionSync)
+      {
+         var sqlResultSet =
+            sqlTransactionSync.executeSql("DELETE FROM books WHERE id=?", [id]);
+      });
+   /* Instructions if the above SQL statement is executed successfully */
 }
 catch (sqlException)
 {
-&nbsp;&nbsp;&nbsp;postMessage(&quot;An error has occurred during deleting the book from the table!
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Error code: &quot; + sqlException.code
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ &quot; (&quot; + sqlException.message + &quot;).&quot;);
+   postMessage("An error has occurred during deleting the book from the table!
+                Error code: " + sqlException.code
+               + " (" + sqlException.message + ").");
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/w3c/supplement/camera_w.htm b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
index 7550b59..c810b2d 100644 (file)
--- a/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
@@ -72,10 +72,10 @@
 <pre class="prettyprint">\r
 var stream;\r
 navigator.webkitGetUserMedia({video: true, audio: false}, gotStreamCallback,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;noStreamCallback);\r
+                             noStreamCallback);\r
 function gotStream(rStream)\r
 {\r
-&nbsp;&nbsp;&nbsp;stream = rStream;\r
+   stream = rStream;\r
 }\r
 </pre>\r
 </li>\r
@@ -111,11 +111,11 @@ cameraControl.image.takePicture(takePictureSuccess, takePictureError);
 <pre class="prettyprint">\r
 var recordingSetting =\r
 {\r
-&nbsp;&nbsp;&nbsp;fileName: &quot;sample.3gp&quot;;\r
+   fileName: "sample.3gp";\r
 }\r
 cameraControl.recorder.applySettings(recordingSetting,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recorderSettingSuccessCallback,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recorderSettingErrorCallback);\r
+                                     recorderSettingSuccessCallback,\r
+                                     recorderSettingErrorCallback);\r
 </pre>\r
 \r
 <div class="note">\r
@@ -135,14 +135,14 @@ cameraControl.recorder.applySettings(recordingSetting,
 <pre class="prettyprint">\r
 function initCameraPreview()\r
 {\r
-&nbsp;&nbsp;&nbsp;navigator.webkitGetUserMedia({video: true, audio: false},\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPreviewStream,\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPreviewStreamError);\r
+   navigator.webkitGetUserMedia({video: true, audio: false},\r
+                                onPreviewStream,\r
+                                onPreviewStreamError);\r
 }\r
 \r
 function onPreviewStream(stream)\r
 {\r
-&nbsp;&nbsp;&nbsp;cameraStream = stream;\r
+   cameraStream = stream;\r
 }\r
 </pre>\r
 </li>\r
@@ -150,14 +150,14 @@ function onPreviewStream(stream)
 <pre class="prettyprint">\r
 function onVisibilityChange()\r
 {\r
-&nbsp;&nbsp;&nbsp;if (document.visibilityState !== &#39;visible&#39;)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraStream.stop();\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initCameraPreview();\r
-&nbsp;&nbsp;&nbsp;}\r
+   if (document.visibilityState !== 'visible')\r
+   {\r
+      cameraStream.stop();\r
+   }\r
+   else\r
+   {\r
+      initCameraPreview();\r
+   }\r
 }\r
 </pre>\r
 </li>\r
diff --git a/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
index 0c3f22c..bfa2fb5 100644 (file)
--- a/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
@@ -60,20 +60,20 @@
    <p>In the following example, the screen contains an image, a video playback area, and 2 buttons. For the fullscreen mode, the image and 1 button are defined as an element (<code>fs-image</code>). The video playback area (<code>video</code>) is another element.</p>\r
 <pre class="prettyprint">\r
 &lt;h1&gt;FullScreen&lt;/h1&gt;\r
-&lt;div class=&quot;example_body&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div id=&#39;fs-image&#39;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/tizen_logo_light.png&quot; alt=&quot;&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;log&quot;&gt;&lt;/p&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;button id=&quot;toggleImage&quot;&gt;Toggle Image fullscreen&lt;/button&gt;&lt;/p&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;div&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;video id=&quot;video&quot; controls preload=&quot;none&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;poster=&quot;http://media.w3.org/2010/05/sintel/poster.png&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;source id=&quot;mp4&quot; src=&quot;http://media.w3.org/2010/05/sintel/trailer.mp4&quot;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&quot;video/mp4&quot;&gt;\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/video&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;\r
-&nbsp;&nbsp;&nbsp;&lt;button id=&quot;toggleVideo&quot;&gt;Toggle Video fullscreen&lt;/button&gt;\r
+&lt;div class="example_body"&gt;\r
+   &lt;div id='fs-image'&gt;\r
+      &lt;img src="images/tizen_logo_light.png" alt=""&gt;\r
+      &lt;p id="log"&gt;&lt;/p&gt;\r
+      &lt;p&gt;&lt;button id="toggleImage"&gt;Toggle Image fullscreen&lt;/button&gt;&lt;/p&gt;\r
+   &lt;/div&gt;\r
+   &lt;div&gt;\r
+      &lt;video id="video" controls preload="none"\r
+             poster="http://media.w3.org/2010/05/sintel/poster.png"&gt;\r
+         &lt;source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"\r
+                 type="video/mp4"&gt;\r
+      &lt;/video&gt;\r
+   &lt;/div&gt;\r
+   &lt;button id="toggleVideo"&gt;Toggle Video fullscreen&lt;/button&gt;\r
 &lt;/div&gt;\r
 </pre>\r
 </li> \r
@@ -81,14 +81,14 @@
    <li><p>Define the fullscreen mode style by expressing the fullscreen status of the element with the <a href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI#full-screen_pseudo-class" target="_blank">:full-screen</a> CSS pseudo-class (<code>-webkit-full-screen</code>):</p>\r
 <pre class="prettyprint">\r
 &lt;style&gt;\r
-&nbsp;&nbsp;&nbsp;#fs-image: -webkit-full-screen\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: #39c;\r
-&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;#fs-image: full-screen\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: #39c;\r
-&nbsp;&nbsp;&nbsp;}\r
+   #fs-image: -webkit-full-screen\r
+   {\r
+      background: #39c;\r
+   }\r
+   #fs-image: full-screen\r
+   {\r
+      background: #39c;\r
+   }\r
 &lt;/style&gt;\r
 </pre></li>\r
 \r
@@ -96,36 +96,36 @@
 \r
 <pre class="prettyprint">\r
 &lt;script&gt;\r
-&nbsp;&nbsp;&nbsp;function toggleFullScreenHandler(e, target)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var target = document.getElementById(target);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Check whether in fullscreen mode */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.webkitIsFullScreen)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Cancel the fullscreen mode */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.webkitCancelFullScreen();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Switch on the fullscreen mode */\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.webkitRequestFullScreen();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;toggleImage&#39;).addEventListener(&#39;click&#39;, function(e)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleFullScreenHandler(e, &#39;fs-image&#39;)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;document.getElementById(&#39;toggleVideo&#39;).addEventListener(&#39;click&#39;, function(e)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleFullScreenHandler(e, &#39;video&#39;)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
-\r
-&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;click&#39;, function(e)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleFullScreenHandler(e)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);\r
+   function toggleFullScreenHandler(e, target)\r
+   {\r
+      var target = document.getElementById(target);\r
+      /* Check whether in fullscreen mode */\r
+      if (document.webkitIsFullScreen)\r
+      {\r
+         /* Cancel the fullscreen mode */\r
+         document.webkitCancelFullScreen();\r
+      }\r
+      else\r
+      {\r
+         /* Switch on the fullscreen mode */\r
+         target.webkitRequestFullScreen();\r
+      }\r
+   }\r
+\r
+   document.getElementById('toggleImage').addEventListener('click', function(e)\r
+      {\r
+         toggleFullScreenHandler(e, 'fs-image')\r
+      }, false);\r
+\r
+   document.getElementById('toggleVideo').addEventListener('click', function(e)\r
+      {\r
+         toggleFullScreenHandler(e, 'video')\r
+      }, false);\r
+\r
+   document.addEventListener('click', function(e)\r
+      {\r
+         toggleFullScreenHandler(e)\r
+      }, false);\r
 &lt;/script&gt;\r
 </pre>\r
 </li>\r
diff --git a/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm b/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
index 7594f59..5832987 100644 (file)
--- a/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Supplementary Features</title> 
- </head> 
+  <title>Supplementary Features</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,7 +31,7 @@
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#Supplementary">Supplementary API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
    <h1>Supplementary Features</h1>
@@ -43,11 +43,11 @@
        <li><a href="webgl_w.htm">WebGL - Khronos</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to use the WebGL graphics library to create 3D visual elements.</p></li>
        <li><a href="fullscreen_w.htm">FullScreen API - Mozilla</a> <strong>in mobile applications only</strong>
-       <p>Enables you to display an element on fullscreen.</p></li> 
+       <p>Enables you to display an element on fullscreen.</p></li>
     <li><a href="camera_w.htm">Camera API (Tizen Extension)</a> <strong>in wearable applications only</strong>
-       <p>Enables you to control the camera options, capture images, and record video.</p></li>  
+       <p>Enables you to control the camera options, capture images, and record video.</p></li>
    </ul>
-  
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/supplement/task_camera_w.htm b/org.tizen.guides/html/web/w3c/supplement/task_camera_w.htm
index 8eca5fb..cafaf3f 100644 (file)
--- a/org.tizen.guides/html/web/w3c/supplement/task_camera_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/task_camera_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Task: Camera</title>  
+       <title>Task: Camera</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -40,7 +40,7 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Multimedia/Camera" target="_blank">Camera Sample Description</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -61,59 +61,59 @@
  <p>The Camera sample application layout contains 3 screens: the main screen that shows the camera view port and the mode control, the preview screen that shows the camera preview, and the settings screen that allows you to define the camera settings.</p>
 <p>The application uses a simple MV (Model View) architecture. The <code>js/core</code> directory contains files that implement a simple AMD (Asynchronous Module Definition) and specify module defining.</p>
 
- 
 
-  <h3 id="main" name="main">Defining the Main Screen</h3> 
-  <ol> 
+
+  <h3 id="main" name="main">Defining the Main Screen</h3>
+  <ol>
 
    <li><strong>index.html Source File</strong>
 <p>The main screen displays the camera view port and buttons for camera modes and settings. In addition, it contains a progress area for displaying the progress of a recording.</p>
 <p>The screen is styled with the <code>css/style.css</code> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <code>js/views/main.js</code> file.</p>
 
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;video id=&quot;camera-preview&quot;&gt;&lt;/video&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn hidden navigation&quot; id=&quot;mode-btn&quot;&gt;&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;button&quot; class=&quot;ui-btn hidden navigation&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;settings-btn&quot;&gt;&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;record-progress&quot; class=&quot;hidden&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;record-progress-label&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;record-progress-label-val&quot;&gt;&lt;/span&gt;/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;record-progress-label-max&quot;&gt;&lt;/span&gt; secs
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;record-progress-val&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;focus-container&quot; class=&quot;hidden&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;focus-frame&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="main"&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;video id="camera-preview"&gt;&lt;/video&gt;
+      &lt;button type="button" class="ui-btn hidden navigation" id="mode-btn"&gt;&lt;/button&gt;
+      &lt;button type="button" class="ui-btn hidden navigation"
+              id="settings-btn"&gt;&lt;/button&gt;
+      &lt;div id="record-progress" class="hidden"&gt;
+         &lt;div id="record-progress-label"&gt;
+            &lt;span id="record-progress-label-val"&gt;&lt;/span&gt;/
+            &lt;span id="record-progress-label-max"&gt;&lt;/span&gt; secs
+         &lt;/div&gt;
+         &lt;div id="record-progress-val"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div id="focus-container" class="hidden"&gt;
+         &lt;div id="focus-frame"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
 </ol>
 
   <h3 id="preview_screen" name="preview_screen">Defining the Preview Screen</h3>
-  <ol> 
+  <ol>
 
    <li><strong>index.html Source File</strong>
 <p>The preview screen displays the image and video preview. </p>
 <p>The screen is styled with the <code>css/style.css</code> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <code>js/views/preview.js</code> file.</p>
 
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot; id=&quot;preview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content paused&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img id=&quot;preview-picture&quot; class=&quot;hidden&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;video id=&quot;preview-video&quot; class=&quot;hidden&quot;&gt;&lt;/video&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;preview-foreground&quot; class=&quot;paused hidden&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="preview"&gt;
+   &lt;div class="ui-content paused"&gt;
+      &lt;img id="preview-picture" class="hidden"/&gt;
+      &lt;video id="preview-video" class="hidden"&gt;&lt;/video&gt;
+      &lt;div id="preview-foreground" class="paused hidden"&gt;&lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
 </ol>
 
-  <h3 id="settings_screen" name="settings_screen">Defining the Settings Screen</h3> 
-  <ol> 
+  <h3 id="settings_screen" name="settings_screen">Defining the Settings Screen</h3>
+  <ol>
 
    <li><strong>index.html Source File</strong>
 <p>The Settings screen displays the picture and video size and format settings.</p>
@@ -122,28 +122,28 @@
 <p>The screen is styled with the <code>css/style.css</code> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <code>js/views/settings.js</code> file.</p>
 
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot; id=&quot;settings&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Settings&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;picture-size-btn&quot;&gt;Picture size&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;picture-format-btn&quot;&gt;Picture format&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a id=&quot;recording-format-btn&quot;&gt;Recording format&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="settings"&gt;
+   &lt;div class="ui-header" data-position="fixed"&gt;
+      &lt;h2 class="ui-title"&gt;Settings&lt;/h2&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;ul class="ui-listview"&gt;
+         &lt;li&gt;&lt;a id="picture-size-btn"&gt;Picture size&lt;/a&gt;&lt;/li&gt;
+         &lt;li&gt;&lt;a id="picture-format-btn"&gt;Picture format&lt;/a&gt;&lt;/li&gt;
+         &lt;li&gt;&lt;a id="recording-format-btn"&gt;Recording format&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 
-&lt;div class=&quot;ui-page&quot; id=&quot;picture-size&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Picture size&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;listbox&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot; id=&quot;picture-size-list&quot;&gt;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="picture-size"&gt;
+   &lt;div class="ui-header" data-position="fixed"&gt;
+      &lt;h2 class="ui-title"&gt;Picture size&lt;/h2&gt;
+   &lt;/div&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;div class="listbox"&gt;
+         &lt;ul class="ui-listview" id="picture-size-list"&gt;&lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 &lt;!--Picture and recording format have similar screens--&gt;
 </pre>
@@ -152,12 +152,12 @@
 
 
 <h2 id="preview" name="preview">Defining the Preview</h2>
- 
+
     <p>This section builds upon the elements described in <a href="camera_w.htm#access">Accessing the Camera Device</a>.</p>
 
 
-   <h3 id="initialize" name="initialize">Initializing the Preview</h3> 
-<ol> 
+   <h3 id="initialize" name="initialize">Initializing the Preview</h3>
+<ol>
 
 
 <li><strong>js/views/main.js Source File</strong>
@@ -165,58 +165,58 @@
 <p>After launching the application, set the variables for the camera preview, call the <code>initCameraPreview()</code> method to initialize the preview, and register the event handler for when the camera is ready to display the preview.</p>
 <pre class="prettyprint">
 var e = req.core.event,
-&nbsp;&nbsp;&nbsp;&nbsp;page = null,
-&nbsp;&nbsp;&nbsp;&nbsp;camera = req.models.camera,
-&nbsp;&nbsp;&nbsp;&nbsp;cameraPreview = null;
+    page = null,
+    camera = req.models.camera,
+    cameraPreview = null;
 /* Initialize module */
 function init()
 {
-&nbsp;&nbsp;&nbsp;page = document.getElementById(&#39;main&#39;);
-&nbsp;&nbsp;&nbsp;cameraPreview = document.getElementById(&#39;camera-preview&#39;);
-&nbsp;&nbsp;&nbsp;bindEvents();
-&nbsp;&nbsp;&nbsp;initCameraPreview();
+   page = document.getElementById('main');
+   cameraPreview = document.getElementById('camera-preview');
+   bindEvents();
+   initCameraPreview();
 }
-e.listeners({&#39;camera.ready&#39;: onCameraReady});
+e.listeners({'camera.ready': onCameraReady});
 </pre>
 </li>
 <li><p>In the <code>initCameraPreview()</code> method, call the <code>requestForCameraStream()</code> method to retrieve the media stream from the camera.</p>
 <pre class="prettyprint">
 function requestForCameraStream()
 {
-&nbsp;&nbsp;&nbsp;previewInitAttemtps += 1;
-&nbsp;&nbsp;&nbsp;navigator.webkitGetUserMedia({video: true, audio: true},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPreviewStream, onPreviewStreamError);
+   previewInitAttemtps += 1;
+   navigator.webkitGetUserMedia({video: true, audio: true},
+                                onPreviewStream, onPreviewStreamError);
 }
 </pre>
 </li>
 </ol></li></ol>
 
    <h3 id="callback" name="callback">Displaying the Preview</h3>
-<ol> 
-   <li><strong>js/views/main.js Source File</strong> 
+<ol>
+   <li><strong>js/views/main.js Source File</strong>
    <p>If you successfully retrieve the media stream from the camera, use the <code>onPreviewStream()</code> event handler to first call the <code>registerStream()</code> method and then play the preview with the <code>play()</code> method.</p>
 <pre class="prettyprint">
 function onPreviewStream(stream)
 {
-&nbsp;&nbsp;&nbsp;previewInitAttemtps = 0;
-&nbsp;&nbsp;&nbsp;cameraStream = stream;
-&nbsp;&nbsp;&nbsp;cameraPreview.src = streamUrl;
-&nbsp;&nbsp;&nbsp;camera.registerStream(cameraStream);
-&nbsp;&nbsp;&nbsp;if (pageHelper.isPageActive(page))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraPreview.play();
-&nbsp;&nbsp;&nbsp;}
+   previewInitAttemtps = 0;
+   cameraStream = stream;
+   cameraPreview.src = streamUrl;
+   camera.registerStream(cameraStream);
+   if (pageHelper.isPageActive(page))
+   {
+      cameraPreview.play();
+   }
 }
 </pre>
 </li>
-   <li><strong>js/models/camera.js Source File</strong> 
+   <li><strong>js/models/camera.js Source File</strong>
 <ol type="a"><li><p>In the <code>registerStream()</code> method, create the camera control for the media stream.</p>
 <pre class="prettyprint">
 function registerStream(mediaStream)
 {
-&nbsp;&nbsp;&nbsp;navigator.tizCamera.createCameraControl(mediaStream,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onCameraControlCreated,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onCameraControlError);
+   navigator.tizCamera.createCameraControl(mediaStream,
+                                           onCameraControlCreated,
+                                           onCameraControlError);
 }
 </pre>
 </li>
@@ -227,9 +227,9 @@ function registerStream(mediaStream)
 <pre class="prettyprint">
 function onCameraControlCreated(control)
 {
-&nbsp;&nbsp;&nbsp;cameraControl = control;
-&nbsp;&nbsp;&nbsp;initCameraSettings();
-&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.ready&#39;);
+   cameraControl = control;
+   initCameraSettings();
+   e.fire('camera.ready');
 }
 </pre>
 </li>
@@ -237,18 +237,18 @@ function onCameraControlCreated(control)
 <pre class="prettyprint">
 function initCameraSettings()
 {
-&nbsp;&nbsp;&nbsp;var pictureFormats = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pictureSizes = null;
-&nbsp;&nbsp;&nbsp;cameraSettings = storage.get(STORAGE_SETTINGS_KEY);
-&nbsp;&nbsp;&nbsp;if (!cameraSettings)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraSettings = {};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pictureFormats = getAvailablePictureFormats();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraSettings.pictureFormat = pictureFormats[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pictureSizes = getAvailablePictureSizes();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraSettings.pictureSize = pictureSizes[0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;saveCameraSettings();
-&nbsp;&nbsp;&nbsp;}
+   var pictureFormats = null,
+       pictureSizes = null;
+   cameraSettings = storage.get(STORAGE_SETTINGS_KEY);
+   if (!cameraSettings)
+   {
+      cameraSettings = {};
+      pictureFormats = getAvailablePictureFormats();
+      cameraSettings.pictureFormat = pictureFormats[0];
+      pictureSizes = getAvailablePictureSizes();
+      cameraSettings.pictureSize = pictureSizes[0];
+      saveCameraSettings();
+   }
 }
 </pre></li></ol></li>
 
@@ -257,11 +257,11 @@ function initCameraSettings()
 <pre class="prettyprint">
 function onCameraReady()
 {
-&nbsp;&nbsp;&nbsp;previewInitInProgress = false;
-&nbsp;&nbsp;&nbsp;if (pageHelper.isPageActive(page))
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cameraPreview.play();
-&nbsp;&nbsp;&nbsp;}
+   previewInitInProgress = false;
+   if (pageHelper.isPageActive(page))
+   {
+      cameraPreview.play();
+   }
 }
 </pre>
 </li>
@@ -269,39 +269,39 @@ function onCameraReady()
 
 
  <h2 id="photo" name="photo">Capturing Images</h2>
- 
+
   <p>This section builds upon the elements described in <a href="camera_w.htm#manage">Managing the Camera</a>.</p>
 
-  
+
    <h3 id="initialize2" name="initialize2">Initializing the Image Capture</h3>
-<ol> 
+<ol>
   <li><strong>js/views/main.js Source File</strong>
 <p>Set the needed variables and events for the image capture.</p>
 <pre class="prettyprint">
 var e = req.core.event,
-&nbsp;&nbsp;&nbsp;&nbsp;camera = req.models.camera,
-&nbsp;&nbsp;&nbsp;&nbsp;page = null,
-&nbsp;&nbsp;&nbsp;&nbsp;cameraPreview = null,
-&nbsp;&nbsp;&nbsp;&nbsp;focusContainer = null,
-&nbsp;&nbsp;&nbsp;&nbsp;focusFrame = null,
-&nbsp;&nbsp;&nbsp;&nbsp;photoMode = true,
+    camera = req.models.camera,
+    page = null,
+    cameraPreview = null,
+    focusContainer = null,
+    focusFrame = null,
+    photoMode = true,
 
 /* Initialize the module */
 function init()
 {
-&nbsp;&nbsp;&nbsp;cameraPreview = document.getElementById(&#39;camera-preview&#39;);
-&nbsp;&nbsp;&nbsp;focusContainer = document.getElementById(&#39;focus-container&#39;);
-&nbsp;&nbsp;&nbsp;focusFrame = document.getElementById(&#39;focus-frame&#39;);
-&nbsp;&nbsp;&nbsp;bindEvents();
+   cameraPreview = document.getElementById('camera-preview');
+   focusContainer = document.getElementById('focus-container');
+   focusFrame = document.getElementById('focus-frame');
+   bindEvents();
 }
 
 e.listeners(
 {
-&nbsp;&nbsp;&nbsp;&#39;camera.shutter&#39;: onCameraShutter,
-&nbsp;&nbsp;&nbsp;&#39;camera.picture.done&#39;: onPictureDone,
-&nbsp;&nbsp;&nbsp;&#39;camera.autofocus.start&#39;: onAutoFocusStart,
-&nbsp;&nbsp;&nbsp;&#39;camera.autofocus.success&#39;: onAutoFocusSuccess,
-&nbsp;&nbsp;&nbsp;&#39;camera.autofocus.failure&#39;: onAutoFocusFailure
+   'camera.shutter': onCameraShutter,
+   'camera.picture.done': onPictureDone,
+   'camera.autofocus.start': onAutoFocusStart,
+   'camera.autofocus.success': onAutoFocusSuccess,
+   'camera.autofocus.failure': onAutoFocusFailure
 });
 </pre>
 </li>
@@ -311,52 +311,52 @@ e.listeners(
 <pre class="prettyprint">
 function onCameraPreviewClick()
 {
-&nbsp;&nbsp;&nbsp;if (photoMode)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;takePhoto();
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Record video */
-&nbsp;&nbsp;&nbsp;}
+   if (photoMode)
+   {
+      takePhoto();
+   }
+   else
+   {
+      /* Record video */
+   }
 }
 
 function takePhoto()
 {
-&nbsp;&nbsp;&nbsp;camera.takePicture();
+   camera.takePicture();
 }
 </pre>
 </li></ol>
-   <h3 id="focus" name="focus">Auto-focusing an Image</h3> 
-<ol> 
+   <h3 id="focus" name="focus">Auto-focusing an Image</h3>
+<ol>
 <li><strong>js/models/camera.js Source File</strong>
 <p>To capture an image, first set the needed variables and activate the auto-focus.</p>
 <pre class="prettyprint">
 var e = req.core.event,
-&nbsp;&nbsp;&nbsp;&nbsp;storage = req.core.storage.localstorage,
-&nbsp;&nbsp;&nbsp;&nbsp;dateHelper = req.helpers.date,
-&nbsp;&nbsp;&nbsp;&nbsp;PICTURE_DESTINATION_DIRECTORY = &#39;/opt/usr/media/Images&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;cameraControl = null,
-&nbsp;&nbsp;&nbsp;&nbsp;picturePath = &#39;&#39;;
+    storage = req.core.storage.localstorage,
+    dateHelper = req.helpers.date,
+    PICTURE_DESTINATION_DIRECTORY = '/opt/usr/media/Images',
+    cameraControl = null,
+    picturePath = '';
 
 function takePicture()
 {
-&nbsp;&nbsp;&nbsp;if (busy)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;busy = true;
-&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.autofocus.start&#39;);
-&nbsp;&nbsp;&nbsp;if (cameraControl.autoFocus())
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(onAutoFocusSuccess, AUTOFOCUS_DELAY);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return true;
+   if (busy)
+   {
+      return false;
+   }
+   busy = true;
+   e.fire('camera.autofocus.start');
+   if (cameraControl.autoFocus())
+   {
+      setTimeout(onAutoFocusSuccess, AUTOFOCUS_DELAY);
+   }
+   else
+   {
+      /* Error handling */
+   }
+
+   return true;
 }
 </pre>
 </li>
@@ -365,13 +365,13 @@ function takePicture()
 <pre class="prettyprint">
 function onAutoFocusStart()
 {
-&nbsp;&nbsp;&nbsp;showAutoFocus();
+   showAutoFocus();
 }
 
 function showAutoFocus()
 {
-&nbsp;&nbsp;&nbsp;focusContainer.classList.remove(&#39;hidden&#39;);
-&nbsp;&nbsp;&nbsp;focusFrame.classList.add(&#39;autofocus-animation&#39;);
+   focusContainer.classList.remove('hidden');
+   focusFrame.classList.add('autofocus-animation');
 }
 </pre>
 </li>
@@ -380,8 +380,8 @@ function showAutoFocus()
 <pre class="prettyprint">
 function onAutoFocusSuccess()
 {
-&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.autofocus.success&#39;);
-&nbsp;&nbsp;&nbsp;setTimeout(startTakingPicture, TAKE_PICTURE_DELAY);
+   e.fire('camera.autofocus.success');
+   setTimeout(startTakingPicture, TAKE_PICTURE_DELAY);
 }
 </pre>
 </li>
@@ -391,28 +391,28 @@ function onAutoFocusSuccess()
 <pre class="prettyprint">
 function onAutoFocusSuccess()
 {
-&nbsp;&nbsp;&nbsp;focusFrame.classList.add(&#39;autofocus-success&#39;);
+   focusFrame.classList.add('autofocus-success');
 }
 </pre>
 </li></ol>
    <h3 id="capture" name="capture">Capturing an Image</h3>
-<ol> 
+<ol>
 <li><strong>js/models/camera.js Source File</strong>
-<p>In the <code>startTakingPicture()</code> method, set name and path of the captured image file, and the format and size of the file. 
+<p>In the <code>startTakingPicture()</code> method, set name and path of the captured image file, and the format and size of the file.
 </p>
 <pre class="prettyprint">
 function startTakingPicture()
 {
-&nbsp;&nbsp;&nbsp;var settings = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileName = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileName = createPictureFileName();
-&nbsp;&nbsp;&nbsp;picturePath = PICTURE_DESTINATION_DIRECTORY + &#39;/&#39; + fileName;
-&nbsp;&nbsp;&nbsp;settings.fileName = fileName;
-&nbsp;&nbsp;&nbsp;settings.pictureFormat = getPictureFormat();
-&nbsp;&nbsp;&nbsp;settings.pictureSize = getPictureSize();
+   var settings = {},
+       fileName = '';
+       fileName = createPictureFileName();
+   picturePath = PICTURE_DESTINATION_DIRECTORY + '/' + fileName;
+   settings.fileName = fileName;
+   settings.pictureFormat = getPictureFormat();
+   settings.pictureSize = getPictureSize();
 
-&nbsp;&nbsp;&nbsp;cameraControl.image.applySettings(settings, onImageSettingsApplied,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onImageSettingsError);
+   cameraControl.image.applySettings(settings, onImageSettingsApplied,
+                                     onImageSettingsError);
 }
 </pre>
 </li>
@@ -422,12 +422,12 @@ function startTakingPicture()
 <pre class="prettyprint">
 function onImageSettingsApplied()
 {
-&nbsp;&nbsp;&nbsp;cameraControl.image.takePicture(onPictureDone, onPictureError);
+   cameraControl.image.takePicture(onPictureDone, onPictureError);
 }
 
 function onPictureDone()
 {
-&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.picture.done&#39;, {path: picturePath});
+   e.fire('camera.picture.done', {path: picturePath});
 }
 </pre>
 </li>
@@ -438,18 +438,18 @@ function onPictureDone()
 /* Called when the camera.picture.done event is fired */
 function onPictureDone(ev)
 {
-&nbsp;&nbsp;&nbsp;var path = ev.detail.path;
-&nbsp;&nbsp;&nbsp;hideAutoFocus();
-&nbsp;&nbsp;&nbsp;e.fire(&#39;views.preview.show&#39;, {picture: path});
+   var path = ev.detail.path;
+   hideAutoFocus();
+   e.fire('views.preview.show', {picture: path});
 }
 
 function hideAutoFocus()
 {
-&nbsp;&nbsp;&nbsp;var classList = focusFrame.classList;
-&nbsp;&nbsp;&nbsp;focusContainer.classList.add(&#39;hidden&#39;);
-&nbsp;&nbsp;&nbsp;classList.remove(&#39;autofocus-animation&#39;);
-&nbsp;&nbsp;&nbsp;classList.remove(&#39;autofocus-success&#39;);
-&nbsp;&nbsp;&nbsp;classList.remove(&#39;autofocus-failure&#39;);
+   var classList = focusFrame.classList;
+   focusContainer.classList.add('hidden');
+   classList.remove('autofocus-animation');
+   classList.remove('autofocus-success');
+   classList.remove('autofocus-failure');
 }
 </pre>
 </li>
@@ -458,20 +458,20 @@ function hideAutoFocus()
 <pre class="prettyprint">
 function show(ev)
 {
-&nbsp;&nbsp;&nbsp;var detail = ev.detail;
-&nbsp;&nbsp;&nbsp;if (detail.picture)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;picture.src = detail.picture;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;picture.classList.remove(&#39;hidden&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.classList.add(&#39;hidden&#39;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (detail.video)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show recorded video preview */
-&nbsp;&nbsp;&nbsp;}
+   var detail = ev.detail;
+   if (detail.picture)
+   {
+      picture.src = detail.picture;
+      picture.classList.remove('hidden');
+      video.classList.add('hidden');
+   }
+   else if (detail.video)
+   {
+      /* Show recorded video preview */
+   }
 }
 
-e.listeners({&#39;views.preview.show&#39;: show});
+e.listeners({'views.preview.show': show});
 </pre>
 </li>
 </ol>
@@ -479,12 +479,12 @@ e.listeners({&#39;views.preview.show&#39;: show});
 
 
 <h2 id="video" name="video">Recording Videos</h2>
- 
+
   <p>This section builds upon the elements described in <a href="camera_w.htm#manage">Managing the Camera</a>.</p>
- 
-  
-   <h3 id="initialize3" name="initialize3">Initializing Video Recording</h3> 
-<ol> 
+
+
+   <h3 id="initialize3" name="initialize3">Initializing Video Recording</h3>
+<ol>
   <li><strong>js/views/main.js Source File</strong>
  <ol type="a">
 <li>
@@ -493,30 +493,30 @@ e.listeners({&#39;views.preview.show&#39;: show});
 
 <pre class="prettyprint">
 var e = req.core.event,
-&nbsp;&nbsp;&nbsp;&nbsp;camera = req.models.camera,
-&nbsp;&nbsp;&nbsp;&nbsp;page = null,
-&nbsp;&nbsp;&nbsp;&nbsp;cameraPreview = null,
-&nbsp;&nbsp;&nbsp;&nbsp;recordProgress = null,
-&nbsp;&nbsp;&nbsp;&nbsp;recordProgressVal = null,
-&nbsp;&nbsp;&nbsp;&nbsp;recordProgressLabelVal = null,
-&nbsp;&nbsp;&nbsp;&nbsp;recordProgressLabelMax = null,
-&nbsp;&nbsp;&nbsp;&nbsp;recording = false,
-&nbsp;&nbsp;&nbsp;&nbsp;RECORDING_INTERVAL_STEP = 100,
-&nbsp;&nbsp;&nbsp;&nbsp;recordingInterval = null,
-&nbsp;&nbsp;&nbsp;&nbsp;maxRecordingTimeSeconds = Math.floor(camera.MAX_RECORDING_TIME / 1000);
+    camera = req.models.camera,
+    page = null,
+    cameraPreview = null,
+    recordProgress = null,
+    recordProgressVal = null,
+    recordProgressLabelVal = null,
+    recordProgressLabelMax = null,
+    recording = false,
+    RECORDING_INTERVAL_STEP = 100,
+    recordingInterval = null,
+    maxRecordingTimeSeconds = Math.floor(camera.MAX_RECORDING_TIME / 1000);
 
 function init()
 {
-&nbsp;&nbsp;&nbsp;page = document.getElementById(&#39;main&#39;);
-&nbsp;&nbsp;&nbsp;cameraPreview = document.getElementById(&#39;camera-preview&#39;);
-&nbsp;&nbsp;&nbsp;recordProgress = document.getElementById(&#39;record-progress&#39;);
-&nbsp;&nbsp;&nbsp;recordProgressVal = document.getElementById(&#39;record-progress-val&#39;);
-&nbsp;&nbsp;&nbsp;recordProgressLabelVal =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;record-progress-label-val&#39;);
-&nbsp;&nbsp;&nbsp;recordProgressLabelMax =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;record-progress-label-max&#39;);
-&nbsp;&nbsp;&nbsp;bindEvents();
-&nbsp;&nbsp;&nbsp;initCameraPreview();
+   page = document.getElementById('main');
+   cameraPreview = document.getElementById('camera-preview');
+   recordProgress = document.getElementById('record-progress');
+   recordProgressVal = document.getElementById('record-progress-val');
+   recordProgressLabelVal =
+      document.getElementById('record-progress-label-val');
+   recordProgressLabelMax =
+      document.getElementById('record-progress-label-max');
+   bindEvents();
+   initCameraPreview();
 }
 </pre></li>
 <li>
@@ -524,15 +524,15 @@ function init()
 <pre class="prettyprint">
 function onCameraPreviewClick()
 {
-&nbsp;&nbsp;&nbsp;if (photoMode)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Capture an image */
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toggleRecording();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setRecording();
-&nbsp;&nbsp;&nbsp;}
+   if (photoMode)
+   {
+      /* Capture an image */
+   }
+   else
+   {
+      toggleRecording();
+      setRecording();
+   }
 }
 </pre>
 </li>
@@ -541,47 +541,47 @@ function onCameraPreviewClick()
 <pre class="prettyprint">
 function toggleRecording(forceValue)
 {
-&nbsp;&nbsp;&nbsp;if (forceValue !== undefined)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recording = !!forceValue;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recording = !recording;
-&nbsp;&nbsp;&nbsp;}
+   if (forceValue !== undefined)
+   {
+      recording = !!forceValue;
+   }
+   else
+   {
+      recording = !recording;
+   }
 }
 </pre></li>
 <li>The <code>setRecording()</code> method starts or stops recording, based on the recording state.
 <pre class="prettyprint">
 function setRecording()
 {
-&nbsp;&nbsp;&nbsp;if (recording)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startRecording();
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stopRecording();
-&nbsp;&nbsp;&nbsp;}
+   if (recording)
+   {
+      startRecording();
+   }
+   else
+   {
+      stopRecording();
+   }
 }
 </pre></li></ol></li></ol>
 
-   <h3 id="record" name="record">Starting Video Recording</h3> 
-<ol> 
+   <h3 id="record" name="record">Starting Video Recording</h3>
+<ol>
   <li><strong>js/views/main.js Source File</strong>
   <ol type="a"><li>
 <p>The <code>startRecording()</code> method starts the recording process, and the <code>stopRecording()</code> method stops it.</p>
 <pre class="prettyprint">
 function startRecording()
 {
-&nbsp;&nbsp;&nbsp;camera.startRecording();
-&nbsp;&nbsp;&nbsp;resetRecordingProgress();
-&nbsp;&nbsp;&nbsp;showRecordingView();
+   camera.startRecording();
+   resetRecordingProgress();
+   showRecordingView();
 }
 
 function stopRecording()
 {
-&nbsp;&nbsp;&nbsp;camera.stopRecording();
+   camera.stopRecording();
 }
 </pre>
 </li>
@@ -591,28 +591,28 @@ function stopRecording()
 <pre class="prettyprint">
 function resetRecordingProgress()
 {
-&nbsp;&nbsp;&nbsp;recordingTime = 0;
-&nbsp;&nbsp;&nbsp;renderRecordingProgressBar();
+   recordingTime = 0;
+   renderRecordingProgressBar();
 }
 
 function renderRecordingProgressBarValue(value)
 {
-&nbsp;&nbsp;&nbsp;recordProgressVal.style.width = value + &#39;px&#39;;
+   recordProgressVal.style.width = value + 'px';
 }
 
 function renderRecordingProgressBarLabel()
 {
-&nbsp;&nbsp;&nbsp;recordProgressLabelVal.innerHTML = dateHelper.formatTime(time);
-&nbsp;&nbsp;&nbsp;recordProgressLabelMax.innerHTML =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dateHelper.formatTime(maxRecordingTimeSeconds);
+   recordProgressLabelVal.innerHTML = dateHelper.formatTime(time);
+   recordProgressLabelMax.innerHTML =
+      dateHelper.formatTime(maxRecordingTimeSeconds);
 }
 
 function renderRecordingProgressBar()
 {
-&nbsp;&nbsp;&nbsp;var parentWidth = recordProgress.clientWidth,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width = recordingTime / camera.MAX_RECORDING_TIME * parentWidth;
-&nbsp;&nbsp;&nbsp;renderRecordingProgressBarValue(width);
-&nbsp;&nbsp;&nbsp;renderRecordingProgressBarLabel();
+   var parentWidth = recordProgress.clientWidth,
+       width = recordingTime / camera.MAX_RECORDING_TIME * parentWidth;
+   renderRecordingProgressBarValue(width);
+   renderRecordingProgressBarLabel();
 }
 </pre>
 </li>
@@ -622,19 +622,19 @@ function renderRecordingProgressBar()
 <pre class="prettyprint">
 function showRecordingView()
 {
-&nbsp;&nbsp;&nbsp;hideNavigationBtns();
-&nbsp;&nbsp;&nbsp;showRecordProgress();
+   hideNavigationBtns();
+   showRecordProgress();
 }
 
 function hideNavigationBtns()
 {
-&nbsp;&nbsp;&nbsp;modeBtn.classList.add(&#39;hidden&#39;);
-&nbsp;&nbsp;&nbsp;settingsBtn.classList.add(&#39;hidden&#39;);
+   modeBtn.classList.add('hidden');
+   settingsBtn.classList.add('hidden');
 }
 
 function showRecordProgress()
 {
-&nbsp;&nbsp;&nbsp;recordProgress.classList.remove(&#39;hidden&#39;);
+   recordProgress.classList.remove('hidden');
 }
 </pre>
 </li></ol></li>
@@ -645,40 +645,40 @@ function showRecordProgress()
 <pre class="prettyprint">
 function startRecording()
 {
-&nbsp;&nbsp;&nbsp;var settings = {},
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileName = &#39;&#39;;
-&nbsp;&nbsp;&nbsp;if (busy)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;busy = true;
-&nbsp;&nbsp;&nbsp;fileName = createVideoFileName();
-&nbsp;&nbsp;&nbsp;videoPath = VIDEO_DESTINATION_DIRECTORY + &#39;/&#39; + fileName;
-&nbsp;&nbsp;&nbsp;settings.fileName = fileName;
-&nbsp;&nbsp;&nbsp;settings.recordingFormat = getRecordingFormat();
-&nbsp;&nbsp;&nbsp;cameraControl.recorder.applySettings(settings, onVideoSettingsApplied,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onVideoSettingsError);
+   var settings = {},
+       fileName = '';
+   if (busy)
+   {
+      return false;
+   }
+   busy = true;
+   fileName = createVideoFileName();
+   videoPath = VIDEO_DESTINATION_DIRECTORY + '/' + fileName;
+   settings.fileName = fileName;
+   settings.recordingFormat = getRecordingFormat();
+   cameraControl.recorder.applySettings(settings, onVideoSettingsApplied,
+                                        onVideoSettingsError);
 
-&nbsp;&nbsp;&nbsp;return true;
+   return true;
 }
 
 function createVideoFileName()
 {
-&nbsp;&nbsp;&nbsp;var currentDate = new Date(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;extension = getRecordingFormat(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileName = &#39;&#39;;
+   var currentDate = new Date(),
+       extension = getRecordingFormat(),
+       fileName = '';
 
-&nbsp;&nbsp;&nbsp;fileName =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dateHelper.format(currentDate, &#39;yyyymmdd_HHMMSS&#39;) + &#39;.&#39; + extension;
+   fileName =
+      dateHelper.format(currentDate, 'yyyymmdd_HHMMSS') + '.' + extension;
 
-&nbsp;&nbsp;&nbsp;return fileName;
+   return fileName;
 }
 </pre></li>
 <li>When the video file parameters have been applied successfully, the <code>onVideoSettingsApplied()</code> event handler starts the actual recording.
 <pre class="prettyprint">
 function onVideoSettingsApplied()
 {
-&nbsp;&nbsp;&nbsp;cameraControl.recorder.start(onRecordingStartSuccess, onRecordingStartError);
+   cameraControl.recorder.start(onRecordingStartSuccess, onRecordingStartError);
 }
 </pre>
 </li>
@@ -689,26 +689,26 @@ function onVideoSettingsApplied()
 <pre class="prettyprint">
 function onRecordingStartSuccess()
 {
-&nbsp;&nbsp;&nbsp;startTracingVideoLength();
-&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.recording.start&#39;);
+   startTracingVideoLength();
+   e.fire('camera.recording.start');
 }
 
 function startTracingVideoLength()
 {
-&nbsp;&nbsp;&nbsp;videoRecordingStartTime = new Date();
-&nbsp;&nbsp;&nbsp;videoLengthCheckInterval = window.setInterval(checkVideoLength,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VIDEO_LENGTH_CHECK_INTERVAL);
+   videoRecordingStartTime = new Date();
+   videoLengthCheckInterval = window.setInterval(checkVideoLength,
+                                                 VIDEO_LENGTH_CHECK_INTERVAL);
 }
 
 function checkVideoLength()
 {
-&nbsp;&nbsp;&nbsp;var currentTime = new Date();
+   var currentTime = new Date();
 
-&nbsp;&nbsp;&nbsp;videoRecordingTime = currentTime - videoRecordingStartTime;
-&nbsp;&nbsp;&nbsp;if (videoRecordingTime &gt; MAX_RECORDING_TIME)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stopRecording();
-&nbsp;&nbsp;&nbsp;}
+   videoRecordingTime = currentTime - videoRecordingStartTime;
+   if (videoRecordingTime &gt; MAX_RECORDING_TIME)
+   {
+      stopRecording();
+   }
 }
 </pre></li></ol></li>
 <li><strong>js/views/main.js Source File</strong>
@@ -716,57 +716,57 @@ function checkVideoLength()
 <pre class="prettyprint">
 function onRecordingStart()
 {
-&nbsp;&nbsp;&nbsp;setRecordingInterval();
+   setRecordingInterval();
 }
 
 function setRecordingInterval()
 {
-&nbsp;&nbsp;&nbsp;recordingInterval = setInterval(updateRecordingProgress,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RECORDING_INTERVAL_STEP);
+   recordingInterval = setInterval(updateRecordingProgress,
+                                   RECORDING_INTERVAL_STEP);
 }
 
 function updateRecordingProgress()
 {
-&nbsp;&nbsp;&nbsp;recordingTime = camera.getRecordingTime();
+   recordingTime = camera.getRecordingTime();
 
-&nbsp;&nbsp;&nbsp;renderRecordingProgressBar();
+   renderRecordingProgressBar();
 }
 
 function renderRecordingProgressBar()
 {
-&nbsp;&nbsp;&nbsp;var parentWidth = recordProgress.clientWidth,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width = recordingTime / camera.MAX_RECORDING_TIME * parentWidth;
-&nbsp;&nbsp;&nbsp;renderRecordingProgressBarValue(width);
-&nbsp;&nbsp;&nbsp;renderRecordingProgressBarLabel();
+   var parentWidth = recordProgress.clientWidth,
+       width = recordingTime / camera.MAX_RECORDING_TIME * parentWidth;
+   renderRecordingProgressBarValue(width);
+   renderRecordingProgressBarLabel();
 }
 
 function renderRecordingProgressBarValue(value)
 {
-&nbsp;&nbsp;&nbsp;recordProgressVal.style.width = value + &#39;px&#39;;
+   recordProgressVal.style.width = value + 'px';
 }
 
 function renderRecordingProgressBarLabel()
 {
-&nbsp;&nbsp;&nbsp;var time = Math.ceil(recordingTime / 1000);
+   var time = Math.ceil(recordingTime / 1000);
 
-&nbsp;&nbsp;&nbsp;if (time &gt; maxRecordingTimeSeconds)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time = maxRecordingTimeSeconds;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;recordProgressLabelVal.innerHTML = dateHelper.formatTime(time);
-&nbsp;&nbsp;&nbsp;recordProgressLabelMax.innerHTML = dateHelper.formatTime(maxRecordingTimeSeconds);
+   if (time &gt; maxRecordingTimeSeconds)
+   {
+      time = maxRecordingTimeSeconds;
+   }
+   recordProgressLabelVal.innerHTML = dateHelper.formatTime(time);
+   recordProgressLabelMax.innerHTML = dateHelper.formatTime(maxRecordingTimeSeconds);
 }
 </pre>
 </li></ol>
 
-   <h3 id="stop" name="stop">Stopping Video Recording</h3> 
-<ol> 
+   <h3 id="stop" name="stop">Stopping Video Recording</h3>
+<ol>
   <li><strong>js/views/main.js Source File</strong>
 <p>When the user taps the screen to stop the recording, the <code>stopRecording()</code> method calls the <code>stopRecording()</code> method.</p>
 <pre class="prettyprint">
 function stopRecording()
 {
-&nbsp;&nbsp;&nbsp;camera.stopRecording();
+   camera.stopRecording();
 }
 </pre>
 </li>
@@ -775,8 +775,8 @@ function stopRecording()
 <pre class="prettyprint">
 function onVideoRecordingStopSuccess()
 {
-&nbsp;&nbsp;&nbsp;busy = false;
-&nbsp;&nbsp;&nbsp;e.fire(&#39;camera.recording.done&#39;, {path: videoPath});
+   busy = false;
+   e.fire('camera.recording.done', {path: videoPath});
 }
 </pre></li>
 <li><strong>js/views/main.js Source File</strong>
@@ -784,15 +784,15 @@ function onVideoRecordingStopSuccess()
 <pre class="prettyprint">
 function onRecordingDone(ev)
 {
-&nbsp;&nbsp;&nbsp;var path = ev.detail.path;
+   var path = ev.detail.path;
 
-&nbsp;&nbsp;&nbsp;removeRecordingInterval();
-&nbsp;&nbsp;&nbsp;toggleRecording(false);
-&nbsp;&nbsp;&nbsp;updateRecordingProgress();
-&nbsp;&nbsp;&nbsp;if (!exitInProgress)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.fire(&#39;views.preview.show&#39;, {video: path});
-&nbsp;&nbsp;&nbsp;}
+   removeRecordingInterval();
+   toggleRecording(false);
+   updateRecordingProgress();
+   if (!exitInProgress)
+   {
+      e.fire('views.preview.show', {video: path});
+   }
 }
 </pre></li>
 <li><strong>js/views/preview.js Source File</strong>
@@ -800,20 +800,20 @@ function onRecordingDone(ev)
 <pre class="prettyprint">
 function show(ev)
 {
-&nbsp;&nbsp;&nbsp;var detail = ev.detail;
-
-&nbsp;&nbsp;&nbsp;if (detail.picture)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show captured image preview */
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (detail.video)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foreground.classList.remove(&#39;hidden&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.classList.remove(&#39;hidden&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;picture.classList.add(&#39;hidden&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.src = detail.video;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video.addEventListener(&#39;loadeddata&#39;, showPreviewPage);
-&nbsp;&nbsp;&nbsp;}
+   var detail = ev.detail;
+
+   if (detail.picture)
+   {
+      /* Show captured image preview */
+   }
+   else if (detail.video)
+   {
+      foreground.classList.remove('hidden');
+      video.classList.remove('hidden');
+      picture.classList.add('hidden');
+      video.src = detail.video;
+      video.addEventListener('loadeddata', showPreviewPage);
+   }
 }
 </pre>
  </li>
@@ -821,18 +821,18 @@ function show(ev)
 
 
 <h2 id="settings" name="settings">Changing Settings</h2>
- 
+
  <p>This section builds upon the elements described in <a href="camera_w.htm#manage">Managing the Camera</a>.</p>
 
-  
-   <h3 id="initialize4" name="initialize4">Initializing the Settings</h3> 
-<ol> 
+
+   <h3 id="initialize4" name="initialize4">Initializing the Settings</h3>
+<ol>
   <li><strong>js/views/main.js Source File</strong>
 <p>When the user clicks the icon in the right top corner of the main screen, the click event opens the Settings screen.</p>
 <pre class="prettyprint">
 function onSettingsBtnClick()
 {
-&nbsp;&nbsp;&nbsp;e.fire(&#39;views.settings.show&#39;, {photoMode: photoMode});
+   e.fire('views.settings.show', {photoMode: photoMode});
 }
 </pre>
 </li>
@@ -841,38 +841,38 @@ function onSettingsBtnClick()
 <pre class="prettyprint">
 function saveCameraSettings()
 {
-&nbsp;&nbsp;&nbsp;storage.add(STORAGE_SETTINGS_KEY, cameraSettings);
+   storage.add(STORAGE_SETTINGS_KEY, cameraSettings);
 }
 </pre>
 </li></ol>
 
-   <h3 id="imageformat" name="imageformat">Setting the Image Format</h3> 
-<ol> 
+   <h3 id="imageformat" name="imageformat">Setting the Image Format</h3>
+<ol>
   <li><strong>js/views/pictureFormat.js Source File</strong>
 <p>The <code>renderView()</code> method creates the content for the subscreen for setting the image file format.</p>
 <pre class="prettyprint">
 function renderView()
 {
-&nbsp;&nbsp;&nbsp;var formats = camera.getAvailablePictureFormats(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentFormat = camera.getPictureFormat(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = formats.length,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content = [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checked = false;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format = formats[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checked = currentFormat === format;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content.push(t.get(&#39;pictureFormatRow&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format: format,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checked: checked
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;formatList.innerHTML = content.join(&#39;&#39;);
+   var formats = camera.getAvailablePictureFormats(),
+       currentFormat = camera.getPictureFormat(),
+       i = 0,
+       len = formats.length,
+       content = [],
+       format = null,
+       checked = false;
+
+   for (i = 0; i &lt; len; i += 1)
+   {
+      format = formats[i];
+      checked = currentFormat === format;
+      content.push(t.get('pictureFormatRow',
+      {
+         format: format,
+         checked: checked
+      }));
+   }
+
+   formatList.innerHTML = content.join('');
 }
 </pre>
 </li>
@@ -881,7 +881,7 @@ function renderView()
 <pre class="prettyprint">
 function getAvailablePictureFormats()
 {
-&nbsp;&nbsp;&nbsp;return cameraControl.capabilities.pictureFormats;
+   return cameraControl.capabilities.pictureFormats;
 }
 </pre>
 </li>
@@ -890,15 +890,15 @@ function getAvailablePictureFormats()
 <pre class="prettyprint">
 function bindEvents()
 {
-&nbsp;&nbsp;&nbsp;page.addEventListener(&#39;pagebeforeshow&#39;, onPageBeforeShow);
-&nbsp;&nbsp;&nbsp;formatList.addEventListener(&#39;click&#39;, onFormatListClick);
+   page.addEventListener('pagebeforeshow', onPageBeforeShow);
+   formatList.addEventListener('click', onFormatListClick);
 }
 
 function onFormatListClick()
 {
-&nbsp;&nbsp;&nbsp;var input = formatList.querySelectorAll(&#39;input:checked&#39;)[0];
+   var input = formatList.querySelectorAll('input:checked')[0];
 
-&nbsp;&nbsp;&nbsp;camera.setPictureFormat(input.getAttribute(&#39;data-format&#39;));
+   camera.setPictureFormat(input.getAttribute('data-format'));
 }
 </pre>
 </li>
@@ -907,42 +907,42 @@ function onFormatListClick()
 <pre class="prettyprint">
 function setPictureFormat(format)
 {
-&nbsp;&nbsp;&nbsp;cameraSettings.pictureFormat = format;
-&nbsp;&nbsp;&nbsp;saveCameraSettings();
+   cameraSettings.pictureFormat = format;
+   saveCameraSettings();
 }
 </pre>
 </li>
 </ol>
 
-   <h3 id="size" name="size">Setting the Image File Size</h3> 
-<ol> 
+   <h3 id="size" name="size">Setting the Image File Size</h3>
+<ol>
   <li><strong>js/views/pictureSize.js Source File</strong>
 <p>The <code>renderView()</code> method creates the content for the subscreen for setting the image file size.</p>
 <pre class="prettyprint">
 function renderView()
 {
-&nbsp;&nbsp;&nbsp;var sizes = camera.getAvailablePictureSizes(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentSize = camera.getPictureSize(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = sizes.length,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content = [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checked = false;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size = sizes[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checked = currentSize.height === size.height &amp;&amp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentSize.width === size.width;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content.push(t.get(&#39;pictureSizeRow&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: size.width,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: size.height,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checked: checked
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;pictureSizeList.innerHTML = content.join(&#39;&#39;);
+   var sizes = camera.getAvailablePictureSizes(),
+       currentSize = camera.getPictureSize(),
+       i = 0,
+       len = sizes.length,
+       content = [],
+       size = null,
+       checked = false;
+
+   for (i = 0; i &lt; len; i += 1)
+   {
+      size = sizes[i];
+      checked = currentSize.height === size.height &amp;&amp;
+                currentSize.width === size.width;
+      content.push(t.get('pictureSizeRow',
+      {
+         width: size.width,
+         height: size.height,
+         checked: checked
+      }));
+   }
+
+   pictureSizeList.innerHTML = content.join('');
 }
 </pre>
 </li>
@@ -951,7 +951,7 @@ function renderView()
 <pre class="prettyprint">
 function getAvailablePictureSizes()
 {
-&nbsp;&nbsp;&nbsp;return cameraControl.capabilities.pictureSizes;
+   return cameraControl.capabilities.pictureSizes;
 }
 </pre>
 </li>
@@ -960,15 +960,15 @@ function getAvailablePictureSizes()
 <pre class="prettyprint">
 function onSizeListClick()
 {
-&nbsp;&nbsp;&nbsp;var input = pictureSizeList.querySelectorAll(&#39;input:checked&#39;)[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width = parseInt(input.getAttribute(&#39;data-width&#39;), 10),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height = parseInt(input.getAttribute(&#39;data-height&#39;), 10);
+   var input = pictureSizeList.querySelectorAll('input:checked')[0],
+       width = parseInt(input.getAttribute('data-width'), 10),
+       height = parseInt(input.getAttribute('data-height'), 10);
 
-&nbsp;&nbsp;&nbsp;camera.setPictureSize(
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: width,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: height
-&nbsp;&nbsp;&nbsp;});
+   camera.setPictureSize(
+   {
+      width: width,
+      height: height
+   });
 }
 </pre>
 </li>
@@ -977,44 +977,44 @@ function onSizeListClick()
 <pre class="prettyprint">
 function setPictureSize(size)
 {
-&nbsp;&nbsp;&nbsp;cameraSettings.pictureSize =
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: size.width,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: size.height
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;saveCameraSettings();
+   cameraSettings.pictureSize =
+   {
+      width: size.width,
+      height: size.height
+   };
+   saveCameraSettings();
 }
 </pre>
 </li>
 </ol>
 
- <h3 id="videoformat" name="videoformat">Setting the Video Format</h3> 
-<ol> 
+ <h3 id="videoformat" name="videoformat">Setting the Video Format</h3>
+<ol>
   <li><strong>js/views/recordingFormat.js Source File</strong>
 <p>The <code>renderView()</code> method creates the content for the subscreen for setting the video file format.</p>
 <pre class="prettyprint">
 function renderView()
 {
-&nbsp;&nbsp;&nbsp;var formats = camera.getAvailableRecordingFormats(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentFormat = camera.getRecordingFormat(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;len = formats.length,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content = [],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checked = false;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; len; i += 1)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format = formats[i];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checked = currentFormat === format;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content.push(t.get(&#39;recordingFormatRow&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format: format,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checked: checked
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;formatList.innerHTML = content.join(&#39;&#39;);
+   var formats = camera.getAvailableRecordingFormats(),
+       currentFormat = camera.getRecordingFormat(),
+       i = 0,
+       len = formats.length,
+       content = [],
+       format = null,
+       checked = false;
+
+   for (i = 0; i &lt; len; i += 1)
+   {
+      format = formats[i];
+      checked = currentFormat === format;
+      content.push(t.get('recordingFormatRow',
+      {
+         format: format,
+         checked: checked
+      }));
+   }
+
+   formatList.innerHTML = content.join('');
 }
 </pre>
 </li>
@@ -1023,7 +1023,7 @@ function renderView()
 <pre class="prettyprint">
 function getAvailableRecordingFormats()
 {
-&nbsp;&nbsp;&nbsp;return cameraControl.capabilities.recordingFormats;
+   return cameraControl.capabilities.recordingFormats;
 }
 </pre>
 </li>
@@ -1032,9 +1032,9 @@ function getAvailableRecordingFormats()
 <pre class="prettyprint">
 function onFormatListClick()
 {
-&nbsp;&nbsp;&nbsp;var input = formatList.querySelectorAll(&#39;input:checked&#39;)[0];
+   var input = formatList.querySelectorAll('input:checked')[0];
 
-&nbsp;&nbsp;&nbsp;camera.setRecordingFormat(input.getAttribute(&#39;data-format&#39;));
+   camera.setRecordingFormat(input.getAttribute('data-format'));
 }
 </pre>
 </li>
@@ -1043,8 +1043,8 @@ function onFormatListClick()
 <pre class="prettyprint">
 function setRecordingFormat(format)
 {
-&nbsp;&nbsp;&nbsp;cameraSettings.recordingFormat = format;
-&nbsp;&nbsp;&nbsp;saveCameraSettings();
+   cameraSettings.recordingFormat = format;
+   saveCameraSettings();
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm b/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
index 387a1fc..1fc3260 100644 (file)
--- a/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
@@ -84,29 +84,29 @@
 <li>Create a new <a href="http://www.khronos.org/registry/typedarray/specs/latest/#5" target="_blank">ArrayBuffer</a> with a specific length:
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var log = document.getElementById(&quot;log&quot;);
+   var log = document.getElementById("log");
 
-&nbsp;&nbsp;&nbsp;/* Create a 12-byte buffer */
-&nbsp;&nbsp;&nbsp;var buffer = new ArrayBuffer(12);
-&nbsp;&nbsp;&nbsp;var x = new Int32Array(buffer);
+   /* Create a 12-byte buffer */
+   var buffer = new ArrayBuffer(12);
+   var x = new Int32Array(buffer);
 
-&nbsp;&nbsp;&nbsp;/* Check the buffer length */
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;&lt;div&gt;&quot; + buffer.byteLength + &quot;&lt;div&gt;&quot;;
+   /* Check the buffer length */
+   log.innerHTML = "&lt;div&gt;" + buffer.byteLength + "&lt;div&gt;";
 </pre>
 <p>The content of the array buffer is initialized to 0. If the requested number of bytes are not allocated, an exception is raised.</p></li>
 <li>Slice the array buffer to copy the buffer bytes and return a new array buffer:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* Get slice: &quot;1234&quot; */
-&nbsp;&nbsp;&nbsp;x[1] = 1234;
-&nbsp;&nbsp;&nbsp;var slice = buffer.slice(4);
-&nbsp;&nbsp;&nbsp;var y = new Int32Array(slice);
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x[1] + &quot;&lt;div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + y[0] + &quot;&lt;div&gt;&quot;;
-
-&nbsp;&nbsp;&nbsp;/* Get slice: &quot;6789&quot; */
-&nbsp;&nbsp;&nbsp;x[1] = 6789;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x[1] + &quot;&lt;div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + y[0] + &quot;&lt;div&gt;&quot;;
+   /* Get slice: "1234" */
+   x[1] = 1234;
+   var slice = buffer.slice(4);
+   var y = new Int32Array(slice);
+   log.innerHTML += "&lt;div&gt;" + x[1] + "&lt;div&gt;";
+   log.innerHTML += "&lt;div&gt;" + y[0] + "&lt;div&gt;";
+
+   /* Get slice: "6789" */
+   x[1] = 6789;
+   log.innerHTML += "&lt;div&gt;" + x[1] + "&lt;div&gt;";
+   log.innerHTML += "&lt;div&gt;" + y[0] + "&lt;div&gt;";
 &lt;/script&gt;
 </pre></li>
 </ol>
@@ -116,8 +116,8 @@
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_1.html</a></li>     
- </ul>  
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_1.html</a></li>
+ </ul>
 
  <h2 id="view" name="view">Creating Typed Array Views</h2>
 
@@ -145,7 +145,7 @@
     <tr>
      <td><code>Int8Array</code></td>
      <td>1</td>
-     <td>8-bit 2&#39;s complement signed integer</td>
+     <td>8-bit 2's complement signed integer</td>
      <td>signed char</td>
     </tr>
     <tr>
@@ -163,7 +163,7 @@
     <tr>
      <td><code>Int16Array</code></td>
      <td>2</td>
-     <td>16-bit 2&#39;s complement signed integer</td>
+     <td>16-bit 2's complement signed integer</td>
      <td>short</td>
     </tr>
     <tr>
@@ -175,7 +175,7 @@
     <tr>
      <td><code>Int32Array</code></td>
      <td>4</td>
-     <td>32-bit 2&#39;s complement signed integer</td>
+     <td>32-bit 2's complement signed integer</td>
      <td>int</td>
     </tr>
     <tr>
@@ -216,24 +216,24 @@
 <li>Create new instances of the typed array view types with a general fixed-length binary buffer:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* 8-bit 2&#39;s complement signed integer */
-&nbsp;&nbsp;&nbsp;var int8 = new Int8Array(8);
-&nbsp;&nbsp;&nbsp;/* 8-bit unsigned integer */
-&nbsp;&nbsp;&nbsp;var uint8 = new Uint8Array(16);
-&nbsp;&nbsp;&nbsp;/* 8-bit unsigned integer (clamped) */
-&nbsp;&nbsp;&nbsp;var uint8Cl = new Uint8ClampedArray(32);
-&nbsp;&nbsp;&nbsp;/* 16-bit 2&#39;s complement signed integer */
-&nbsp;&nbsp;&nbsp;var int16 = new Int16Array(64);
-&nbsp;&nbsp;&nbsp;/* 16-bit unsigned integer */
-&nbsp;&nbsp;&nbsp;var uint16 = new Uint16Array(8);
-&nbsp;&nbsp;&nbsp;/* 32-bit 2&#39;s complement signed integer */
-&nbsp;&nbsp;&nbsp;var int32 = new Int32Array(16);
-&nbsp;&nbsp;&nbsp;/* 32-bit unsigned integer */
-&nbsp;&nbsp;&nbsp;var uint32 = new Uint32Array(32);
-&nbsp;&nbsp;&nbsp;/* 32-bit IEEE floating point */
-&nbsp;&nbsp;&nbsp;var float32 = new Float32Array(64);
-&nbsp;&nbsp;&nbsp;/* 64-bit IEEE floating point */
-&nbsp;&nbsp;&nbsp;var float64 = new Float64Array(8);
+   /* 8-bit 2's complement signed integer */
+   var int8 = new Int8Array(8);
+   /* 8-bit unsigned integer */
+   var uint8 = new Uint8Array(16);
+   /* 8-bit unsigned integer (clamped) */
+   var uint8Cl = new Uint8ClampedArray(32);
+   /* 16-bit 2's complement signed integer */
+   var int16 = new Int16Array(64);
+   /* 16-bit unsigned integer */
+   var uint16 = new Uint16Array(8);
+   /* 32-bit 2's complement signed integer */
+   var int32 = new Int32Array(16);
+   /* 32-bit unsigned integer */
+   var uint32 = new Uint32Array(32);
+   /* 32-bit IEEE floating point */
+   var float32 = new Float32Array(64);
+   /* 64-bit IEEE floating point */
+   var float64 = new Float64Array(8);
 &lt;/script&gt;
 </pre>
 
@@ -245,24 +245,24 @@
 <li>Create a typed array view:
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var log = document.getElementById(&quot;log&quot;);
-&nbsp;&nbsp;&nbsp;/* Create an array buffer */
-&nbsp;&nbsp;&nbsp;var buffer = new ArrayBuffer(12);
+   var log = document.getElementById("log");
+   /* Create an array buffer */
+   var buffer = new ArrayBuffer(12);
 
-&nbsp;&nbsp;&nbsp;/* Create a typed array view that points to the array buffer */
-&nbsp;&nbsp;&nbsp;var x = new Int32Array(buffer, 0, 2);
+   /* Create a typed array view that points to the array buffer */
+   var x = new Int32Array(buffer, 0, 2);
 </pre>
 <p>You can use the view to establish a detailed data structure by creating the value of 32-bit signed integers in a byte-type composition element.</p>
 </li>
 <li>Use the typed array view buffer:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;var y = new Int32Array(x.buffer, 4, 2);
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + (x.buffer === y.buffer) + &quot;&lt;div&gt;&quot;;
+   var y = new Int32Array(x.buffer, 4, 2);
+   log.innerHTML += "&lt;div&gt;" + (x.buffer === y.buffer) + "&lt;div&gt;";
 
-&nbsp;&nbsp;&nbsp;/* Use the byteLength, length, and byteOffset properties */
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x.byteLength + &quot;&lt;div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + (x.length * Int32Array.BYTES_PER_ELEMENT) + &quot;&lt;div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x.byteOffset + &quot;&lt;div&gt;&quot;;
+   /* Use the byteLength, length, and byteOffset properties */
+   log.innerHTML += "&lt;div&gt;" + x.byteLength + "&lt;div&gt;";
+   log.innerHTML += "&lt;div&gt;" + (x.length * Int32Array.BYTES_PER_ELEMENT) + "&lt;div&gt;";
+   log.innerHTML += "&lt;div&gt;" + x.byteOffset + "&lt;div&gt;";
 &lt;/script&gt;
 </pre>
 
@@ -271,24 +271,24 @@
 <li>Replace the <code>CanvasPixelArray</code> instance with the <code>Uint8ClampedArray</code> instance:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var buffer = new ArrayBuffer(12);
-&nbsp;&nbsp;&nbsp;var x = new Uint8ClampedArray(buffer, 4, 2);
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;[Result1]&lt;/div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x.byteLength + &quot;&lt;div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x.length + &quot;&lt;div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + Uint8ClampedArray.BYTES_PER_ELEMENT + &quot;&lt;div&gt;&quot;;
-
-&nbsp;&nbsp;&nbsp;var x = new Uint8ClampedArray(10);
-&nbsp;&nbsp;&nbsp;x.set([18, 93, 42], 3);
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;br/&gt;&lt;div&gt;[Result2]&lt;/div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x[3] + &quot;&lt;div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x[4] + &quot;&lt;div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x[5] + &quot;&lt;div&gt;&quot;;
-
-&nbsp;&nbsp;&nbsp;var x = new Uint8ClampedArray([0, 1, 2, 3, 4, 5]);
-&nbsp;&nbsp;&nbsp;var y = x.subarray(2, 5);
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;br/&gt;&lt;div&gt;[Result3]&lt;/div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + y.length + &quot;&lt;div&gt;&quot;;
+   var buffer = new ArrayBuffer(12);
+   var x = new Uint8ClampedArray(buffer, 4, 2);
+   log.innerHTML += "&lt;div&gt;[Result1]&lt;/div&gt;";
+   log.innerHTML += "&lt;div&gt;" + x.byteLength + "&lt;div&gt;";
+   log.innerHTML += "&lt;div&gt;" + x.length + "&lt;div&gt;";
+   log.innerHTML += "&lt;div&gt;" + Uint8ClampedArray.BYTES_PER_ELEMENT + "&lt;div&gt;";
+
+   var x = new Uint8ClampedArray(10);
+   x.set([18, 93, 42], 3);
+   log.innerHTML += "&lt;br/&gt;&lt;div&gt;[Result2]&lt;/div&gt;";
+   log.innerHTML += "&lt;div&gt;" + x[3] + "&lt;div&gt;";
+   log.innerHTML += "&lt;div&gt;" + x[4] + "&lt;div&gt;";
+   log.innerHTML += "&lt;div&gt;" + x[5] + "&lt;div&gt;";
+
+   var x = new Uint8ClampedArray([0, 1, 2, 3, 4, 5]);
+   var y = x.subarray(2, 5);
+   log.innerHTML += "&lt;br/&gt;&lt;div&gt;[Result3]&lt;/div&gt;";
+   log.innerHTML += "&lt;div&gt;" + y.length + "&lt;div&gt;";
 &lt;/script&gt;
 </pre>
 
@@ -300,17 +300,17 @@
 <li>When an <code>ArrayBuffer</code> with heterogeneous type of data is used, you can take advantage of the <code>DataView</code> of the buffer:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var log = document.getElementById(&quot;log&quot;);
+   var log = document.getElementById("log");
 
-&nbsp;&nbsp;&nbsp;/* Create DataView */
-&nbsp;&nbsp;&nbsp;var x = new DataView(new ArrayBuffer(12), 0);
+   /* Create DataView */
+   var x = new DataView(new ArrayBuffer(12), 0);
 
-&nbsp;&nbsp;&nbsp;/* Store the variable */
-&nbsp;&nbsp;&nbsp;x.setFloat32(1, Math.PI);
+   /* Store the variable */
+   x.setFloat32(1, Math.PI);
 
-&nbsp;&nbsp;&nbsp;/* Get the variable */
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + x.getFloat32(1) + &quot;&lt;div&gt;&quot;;
-&nbsp;&nbsp;&nbsp;log.innerHTML += &quot;&lt;div&gt;&quot; + Math.PI + &quot;&lt;div&gt;&quot;;
+   /* Get the variable */
+   log.innerHTML += "&lt;div&gt;" + x.getFloat32(1) + "&lt;div&gt;";
+   log.innerHTML += "&lt;div&gt;" + Math.PI + "&lt;div&gt;";
 &lt;/script&gt;
 </pre>
 <p>The <code>DataView</code> stores the values of the given type at the specified byte offset from the start of the view. Moreover, alignment is not a constraint, and it can store the multi-byte values at any offset. For multi-byte values, the optional <code>littleEndian</code> argument indicates that the value can be stored in a big-endian or little-endian byte order. If the argument is set to <code>false</code> or is undefined, the value gets stored in the big-endian byte order.</p>
@@ -321,9 +321,9 @@
  <p>For the complete source code related to this use case, see the following files:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_2.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_3.html</a></li>     
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_4.html</a></li>     
- </ul> 
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_3.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_4.html</a></li>
+ </ul>
 
  <h2 id="use" name="use">Using Typed Arrays</h2>
 
@@ -334,19 +334,19 @@
 <li>For the WebGL - Khronos API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webgl">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webgl">wearable</a> applications), import the <code>gl.bufferData()</code> method to set the buffer object to deliver texture data:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var textureCoords =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[0.0,  0.5, 0.25, 0.5, 0.25, 1.0, 0.0,  1.0, /* Front */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.5,  0.5, 0.75, 0.5, 0.75, 1.0, 0.5,  1.0, /* Back */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0,  0.5, 0.25, 0.5, 0.25, 0.0, 0.0,  0.0, /* Top */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.25, 0.5, 0.5,  0.5, 0.5,  0.0, 0.25, 0.0, /* Bottom */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.25, 0.5, 0.5,  0.5, 0.5,  1.0, 0.25, 1.0, /* Right */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.75, 0.5, 1.0,  0.5, 1.0,  1.0, 0.75, 1.0]; /* Left */
-
-&nbsp;&nbsp;&nbsp;cubeVertexTextureCoordBuffer = gl.createBuffer();
-&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
-&nbsp;&nbsp;&nbsp;gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
-&nbsp;&nbsp;&nbsp;cubeVertexTextureCoordBuffer.itemSize = 2;
-&nbsp;&nbsp;&nbsp;cubeVertexTextureCoordBuffer.numItems = 24;
+   var textureCoords =
+      [0.0,  0.5, 0.25, 0.5, 0.25, 1.0, 0.0,  1.0, /* Front */
+       0.5,  0.5, 0.75, 0.5, 0.75, 1.0, 0.5,  1.0, /* Back */
+       0.0,  0.5, 0.25, 0.5, 0.25, 0.0, 0.0,  0.0, /* Top */
+       0.25, 0.5, 0.5,  0.5, 0.5,  0.0, 0.25, 0.0, /* Bottom */
+       0.25, 0.5, 0.5,  0.5, 0.5,  1.0, 0.25, 1.0, /* Right */
+       0.75, 0.5, 1.0,  0.5, 1.0,  1.0, 0.75, 1.0]; /* Left */
+
+   cubeVertexTextureCoordBuffer = gl.createBuffer();
+   gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
+   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
+   cubeVertexTextureCoordBuffer.itemSize = 2;
+   cubeVertexTextureCoordBuffer.numItems = 24;
 &lt;/script&gt;
 </pre></li>
 
@@ -356,12 +356,12 @@
 <li>Deliver the pixel expression of the canvas element:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var tempContext = canvas.getContext(&quot;2d&quot;);
-&nbsp;&nbsp;&nbsp;tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);
-&nbsp;&nbsp;&nbsp;var pixels = canvas.width * canvas.height * 4;
-&nbsp;&nbsp;&nbsp;var canvasData =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempContext.getImageData(0, 0, canvas.width, canvas.height);
-&nbsp;&nbsp;&nbsp;var binaryData = canvasData.data;
+   var tempContext = canvas.getContext("2d");
+   tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);
+   var pixels = canvas.width * canvas.height * 4;
+   var canvasData =
+      tempContext.getImageData(0, 0, canvas.width, canvas.height);
+   var binaryData = canvasData.data;
 &lt;/script&gt;
 </pre></li></ol>
 
@@ -375,15 +375,15 @@
 <pre class="prettyprint">
 this.setSound = function()
 {
-&nbsp;&nbsp;&nbsp;var request = new XMLHttpRequest();
-&nbsp;&nbsp;&nbsp;request.open(&quot;GET&quot;, url, true);
-&nbsp;&nbsp;&nbsp;request.responseType = &quot;arraybuffer&quot;;
-
-&nbsp;&nbsp;&nbsp;request.onload = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var data = request.response;
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;request.send();
+   var request = new XMLHttpRequest();
+   request.open("GET", url, true);
+   request.responseType = "arraybuffer";
+
+   request.onload = function()
+   {
+      var data = request.response;
+   };
+   request.send();
 }
 </pre></li>
 </ol>
diff --git a/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm b/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
index 40d7f75..2c0fcf6 100644 (file)
--- a/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>WebGL - Khronos</title> 
- </head> 
+  <title>WebGL - Khronos</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -48,28 +48,28 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/Multimedia/WebGL" target="_blank">WebGL Sample Description</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
    <h1>WebGL - Khronos</h1>
- 
+
   <p>WebGL - Khronos is a graphics library for creating 3D visual elements in Web applications without separate plug-ins.</p>
-  
+
   <p>This feature is supported in mobile and wearable applications only.</p>
-  
+
   <p>WebGL is designed as a rendering context of the <a href="../graphics/canvas_w.htm">HTML5 &lt;canvas&gt; element</a>. The WebGL context is still being developed and has not been standardized. WebGL uses 3D rendering APIs derived from <a href="http://www.opengl.org/documentation/specs/version2.0/glspec20.pdf" target="_blank">OpenGL&reg; ES 2.0</a>, and is realized by binding shaders and <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL&reg; ES Shading Language</a> (GLSL ES) as JavaScript.
 </p>
-  
-  <p>The main features of the WebGL include:</p> 
-  <ul> 
+
+  <p>The main features of the WebGL include:</p>
+  <ul>
    <li>Importing the WebGL context
    <p>You can use the <code>getContext()</code> method of the <code>Canvas</code> object to <a href="#import">import the WebGL context</a>.</p>
-   </li> 
+   </li>
    <li>Using programs and shaders
    <p>You can use shaders, such as the vertex shader and fragment shader, to convert shape data to display it on the screen as pixels. <a href="#shader">Shaders must be initialized</a> and attached to programs.
 The vertex shader sets the final position of a vertex, and the fragment shader sets the final colors of each pixel.</p>
 
-   </li> 
+   </li>
    <li>Using buffers
    <p>A buffer is a memory block for storing temporary data. In WebGL, you must <a href="#buffer">create a vertex buffer object (VBO) to store vertex attributes</a>, such as location, color, and texture coordinates.</p>
 
@@ -78,7 +78,7 @@ The vertex shader sets the final position of a vertex, and the fragment shader s
        The <code>deleteBuffer()</code> method can be used to delete the buffer.
 </div>
    </li>
-   
+
    <li>Drawing on the screen
    <p>You can use shader attributes to define which buffer to pass to the application, and then record the buffer in the drawing buffer to <a href="#draw">display the content on the screen</a>.</p>
    </li>
@@ -95,7 +95,7 @@ The vertex shader sets the final position of a vertex, and the fragment shader s
   <p>You can use Z-index and matrix to <a href="#threed">create a 3D perspective</a>.</p>
   </li></ul>
   <p>You can also <a href="#touch">use touch effects</a> with textures and 3D perspectives.</p></li>
-  
+
   <li>WebGL frameworks
 <p>Numerous <a href="http://www.khronos.org/webgl/wiki/User_Contributions#Frameworks" target="_blank">frameworks</a> exist to easily import low-level methods to WebGL and to develop WebGL more productively.</p>
 <p>The <a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a> is one of the most widely used WebGL frameworks. It is a lightweight JavapScript library, in which many settings that need to be performed when developing WebGL are already set as basis. Consequently, three.js reduces the overlapping code due to repetitive setting works.</p>
@@ -104,12 +104,12 @@ The vertex shader sets the final position of a vertex, and the fragment shader s
 
 <h2 id="import" name="import">Importing the WebGL Context</h2>
 
-<p>To enhance the user experience of your application with WebGL features, you must learn to import the WebGL context from the HTML5 <code>&lt;canvas&gt;</code> element:</p> 
-  <ol> 
+<p>To enhance the user experience of your application with WebGL features, you must learn to import the WebGL context from the HTML5 <code>&lt;canvas&gt;</code> element:</p>
+  <ol>
    <li><p>Define the <code>&lt;canvas&gt;</code> element ID and set its width and height:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;canvas id=&quot;canvas&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;
+   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
 </pre>
 
@@ -117,94 +117,94 @@ The vertex shader sets the final position of a vertex, and the fragment shader s
        <strong>Note</strong>
        If the width and height are not set, the default size, 300 x 150 px, is used.
 </div>
-</li> 
+</li>
 
 <li><p>Use the <code>getContext()</code> method of the <code>Canvas</code> object to import the WebGL context:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function startWegGL()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl = getWebGLContext();
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function getWebGLContext()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var webGLContext;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(&quot;canvas&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Context name can differ according to the browser used */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Store the context name in an array and check its validity */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var names = [&quot;webgl&quot;, &quot;experimental-webgl&quot;, &quot;webkit-3d&quot;, &quot;moz-webgl&quot;];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; names.length; ++i)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;webGLContext = canvas.getContext(names[i]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (webGLContext) break;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return webGLContext;
-&nbsp;&nbsp;&nbsp;}
+   function startWegGL()
+   {
+      gl = getWebGLContext();
+   }
+
+   function getWebGLContext()
+   {
+      var webGLContext;
+      var canvas = document.getElementById("canvas");
+
+      /* Context name can differ according to the browser used */
+      /* Store the context name in an array and check its validity */
+      var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
+      for (var i = 0; i &lt; names.length; ++i)
+      {
+         try
+         {
+            webGLContext = canvas.getContext(names[i]);
+         }
+         if (webGLContext) break;
+      }
+
+      return webGLContext;
+   }
 &lt;/script&gt;
 </pre>
 </li>
-  </ol> 
+  </ol>
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_camera_effect.html</a></li>        
- </ul>  
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_camera_effect.html</a></li>
+ </ul>
 
  <h2 id="shader" name="shader" >Initializing Programs and Shaders</h2>
 
 <p>To enhance the user experience of your application with WebGL features, you must learn to bind the shaders and GLSL ES in WebGL by using shaders and programs:
-</p> 
-  <ol> 
+</p>
+  <ol>
    <li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL&reg; ES Shading Language</a> (GLSL ES):</p>
 <pre class="prettyprint">
-&lt;script id=&quot;vshader&quot; type=&quot;x-shader/x-vertex&quot;&gt;
-&nbsp;&nbsp;&nbsp;attribute vec2 attVertexPos;
+&lt;script id="vshader" type="x-shader/x-vertex"&gt;
+   attribute vec2 attVertexPos;
 
-&nbsp;&nbsp;&nbsp;void main()
-&nbsp;&nbsp;&nbsp;{
+   void main()
+   {
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* vec4(2D coordinates, depth, perspective) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = vec4(attVertexPos, 0, 2);
-&nbsp;&nbsp;&nbsp;}
+      /* vec4(2D coordinates, depth, perspective) */
+      gl_Position = vec4(attVertexPos, 0, 2);
+   }
 &lt;/script&gt;
 
-&lt;script id=&quot;fshader&quot; type=&quot;x-shader/x-fragment&quot;&gt;
-&nbsp;&nbsp;&nbsp;void main()
-&nbsp;&nbsp;&nbsp;{
+&lt;script id="fshader" type="x-shader/x-fragment"&gt;
+   void main()
+   {
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Color stored in the gl_FragColor variable becomes the pixel color */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* vec4(R, G, B, A) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = vec4(1, 0.5, 0.5, 1);
-&nbsp;&nbsp;&nbsp;}
+      /* Color stored in the gl_FragColor variable becomes the pixel color */
+      /* vec4(R, G, B, A) */
+      gl_FragColor = vec4(1, 0.5, 0.5, 1);
+   }
 &lt;/script&gt;
 </pre>
-</li> 
+</li>
 
 <li><p>Import the <code>createShader()</code> method to create the shaders:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var vshader = gl.createShader(gl.VERTEX_SHADER);
-&nbsp;&nbsp;&nbsp;var fshader = gl.createShader(gl.FRAGMENT_SHADER);
+   var vshader = gl.createShader(gl.VERTEX_SHADER);
+   var fshader = gl.createShader(gl.FRAGMENT_SHADER);
 </pre>
 </li>
 
 <li><p>Import the <code>shaderSource()</code> method to attach the source elements to the shaders:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;gl.shaderSource(vshader, document.getElementById(&#39;vshader&#39;).text);
-&nbsp;&nbsp;&nbsp;gl.shaderSource(fshader, document.getElementById(&#39;fshader&#39;).text);
+   gl.shaderSource(vshader, document.getElementById('vshader').text);
+   gl.shaderSource(fshader, document.getElementById('fshader').text);
 </pre>
 </li>
 
 <li><p>Import the <code>compileShader()</code> method and compile the shaders:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;gl.compileShader(vshader);
-&nbsp;&nbsp;&nbsp;gl.compileShader(fshader);
+   gl.compileShader(vshader);
+   gl.compileShader(fshader);
 </pre>
 
 <div class="note">
@@ -215,28 +215,28 @@ The vertex shader sets the final position of a vertex, and the fragment shader s
 
 <li><p>Import the <code>createProgram()</code> method to create a new instance of the <a href="https://www.khronos.org/registry/webgl/specs/1.0/#5.6" target="_blank">WebGLProgram</a> object, in which the shaders are then attached:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;var program = null;
-&nbsp;&nbsp;&nbsp;program = gl.createProgram();
+   var program = null;
+   program = gl.createProgram();
 </pre>
 </li>
 
 <li><p>Import the <code>attachShader()</code> method to attach the shaders to the program:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;gl.attachShader(program, vshader);
-&nbsp;&nbsp;&nbsp;gl.attachShader(program, fshader);
+   gl.attachShader(program, vshader);
+   gl.attachShader(program, fshader);
 </pre>
 </li>
 
 <li><p>Import the <code>linkProgram()</code> method to connect to the program:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;gl.linkProgram(program);
+   gl.linkProgram(program);
 </pre>
 </li>
 
 <li><p>Import the <code>useProgram()</code> method to enable WebGL to use the program:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* Shaders are loaded and used */
-&nbsp;&nbsp;&nbsp;gl.useProgram(program);
+   /* Shaders are loaded and used */
+   gl.useProgram(program);
 &lt;/script&gt;
 </pre>
 
@@ -245,82 +245,82 @@ The vertex shader sets the final position of a vertex, and the fragment shader s
        After a  WebGL program has been used, you can use the <code>deleteProgram()</code> method to delete it.
 </div>
 </li>
-  </ol> 
+  </ol>
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_circle.html</a></li>       
- </ul>  
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_circle.html</a></li>
+ </ul>
 
  <h2 id="buffer" name="buffer">Initializing Buffers</h2>
 
 <p>To enhance the user experience of your application with WebGL features, you must learn to create buffers, bind them, and store data in them:
-</p> 
+</p>
 
-  <ol> 
+  <ol>
    <li><p>To create a triangle (shown on the left in the figure), define the coordinates of a triangle according to the WebGL coordinate system (shown on the right):</p>
-   
-<p align="center"><img alt="WebGL native coordinate system" src="../../../images/initializing_buffers_coordsystem.png" /></p> 
+
+<p align="center"><img alt="WebGL native coordinate system" src="../../../images/initializing_buffers_coordsystem.png" /></p>
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var vertices =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[1.0,  1.0, /* p2 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, 1.0, /* p1 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,  -1.0]; /* p4 */
+   var vertices =
+      [1.0,  1.0, /* p2 */
+       -1.0, 1.0, /* p1 */
+       1.0,  -1.0]; /* p4 */
 &lt;/script&gt;
 </pre>
-</li> 
+</li>
 
 <li><p>Import the <code>createBuffer()</code> method to create the vertex buffer object (VBO):</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;triangleVerticesBuffer = gl.createBuffer();
+   triangleVerticesBuffer = gl.createBuffer();
 </pre>
 </li>
 
 <li><p>Import the <code>bindBuffer()</code> method to bind the VBO:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+   gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
 </pre>
 </li>
 
 <li><p>Import the <code>bufferData()</code> method to store data to the VBO:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* Convert to Float32Array format that allows the array to be used in WebGL */
-&nbsp;&nbsp;&nbsp;gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+   /* Convert to Float32Array format that allows the array to be used in WebGL */
+   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
 &lt;/script&gt;
 </pre>
 </li>
-  </ol> 
+  </ol>
 
 <p>The following figure shows the final triangle as it is displayed on the screen.</p>
-<p align="center"><strong>Figure: Triangle on the screen</strong></p> 
-<p align="center"><img alt="Triangle on the screen" src="../../../images/initializing_buffers.png" /></p>   
-  
+<p align="center"><strong>Figure: Triangle on the screen</strong></p>
+<p align="center"><img alt="Triangle on the screen" src="../../../images/initializing_buffers.png" /></p>
+
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_triangle.html</a></li>     
- </ul>  
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_triangle.html</a></li>
+ </ul>
 
  <h2 id="draw" name="draw">Drawing Shapes on the Screen</h2>
 
 <p>To enhance the user experience of your application with WebGL features, you must learn to display shapes on the screen using attribute array data and a drawing buffer:
-</p> 
+</p>
 
-  <ol> 
+  <ol>
    <li><p>Import the <code>getAttribLocation()</code> method to bring the attribute location from the WebGL program:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var vertexPositionAttribute = gl.getAttribLocation(program, &quot;attVertexPos&quot;);
+   var vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
 </pre>
 <p>The shader is an external program that is compiled. To enable the attribute to be searched and referenced in the program, allocate it to the <code>vertexPositionAttribute</code> variable.</p>
 </li>
 
 <li><p>Activate the attribute data array:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;gl.enableVertexAttribArray(vertexPositionAttribute);
+   gl.enableVertexAttribArray(vertexPositionAttribute);
 </pre>
 </li>
 
@@ -328,13 +328,13 @@ The vertex shader sets the final position of a vertex, and the fragment shader s
 <p>The second argument value is the number of components per vertex. It can be 2, 3, or,  in case of RGBA, 4.</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
+   gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
 </pre>
 </li>
 
 <li><p>Use the <code>drawArrays()</code> method to send the shape to the drawing buffer:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;gl.drawArrays(gl.TRIANGLES, 0, 3);
+   gl.drawArrays(gl.TRIANGLES, 0, 3);
 &lt;/script&gt;
 </pre>
 
@@ -342,160 +342,160 @@ The vertex shader sets the final position of a vertex, and the fragment shader s
 
 <p align="center" class="Table"><strong>Table: Arguments for drawing shapes</strong></p>
 <table>
-   <colgroup> 
-    <col width="25%" /> 
-    <col width="75%" /> 
-   </colgroup> 
+   <colgroup>
+    <col width="25%" />
+    <col width="75%" />
+   </colgroup>
 <tbody>
-    <tr> 
-     <th>Type</th> 
-     <th>Description</th> 
-    </tr> 
-        <tr> 
-     <td rowspan="1" colspan="1"> <p><code>POINTS</code></p> </td> 
+    <tr>
+     <th>Type</th>
+     <th>Description</th>
+    </tr>
+        <tr>
+     <td rowspan="1" colspan="1"> <p><code>POINTS</code></p> </td>
      <td rowspan="1" colspan="1"><p>The point type renders 1 point at a time.</p>
 <p align="center"><img alt="Points" src="../../../images/drawing_points.png" /></p>
 
 <pre class="prettyprint">
 var vertices =
-&nbsp;&nbsp;&nbsp;[1.0,  1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;-1.0, 1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  -1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0];
+   [1.0,  1.0,
+    -1.0, 1.0,
+    1.0,  -1.0,
+    -1.0, -1.0];
 
 gl.vertexAttribPointer(vertexPositionAttribute, 2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.FLOAT, false, 0, 0);
+                       gl.FLOAT, false, 0, 0);
 gl.drawArrays(gl.POINTS, 0, 4);
 </pre>
-</td> 
+</td>
        </tr>
-        <tr> 
-     <td rowspan="1" colspan="1"> <p><code>LINES</code></p> </td> 
+        <tr>
+     <td rowspan="1" colspan="1"> <p><code>LINES</code></p> </td>
      <td rowspan="1" colspan="1"><p>In the lines type, 2 lines share the same vertex, but each is defined separately. In the example, 6 vertices are needed.</p>
 <p align="center"><img alt="Lines" src="../../../images/drawing_lines.png" /></p>
 
 <pre class="prettyprint">
 var vertices =
-&nbsp;&nbsp;&nbsp;[-1.0, 1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  1.0,
+   [-1.0, 1.0,
+    1.0,  1.0,
 
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  0.0,
+    1.0,  1.0,
+    1.0,  0.0,
 
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  -1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0];
+    1.0,  -1.0,
+    -1.0, -1.0];
 
 gl.vertexAttribPointer(vertexPositionAttribute, 2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.FLOAT, false, 0, 0);
+                       gl.FLOAT, false, 0, 0);
 gl.drawArrays(gl.LINES, 0, 6);
 </pre>
-</td> 
+</td>
        </tr>
-       
-        <tr> 
-     <td rowspan="1" colspan="1"> <p><code>LINE_STRIP</code></p> </td> 
+
+        <tr>
+     <td rowspan="1" colspan="1"> <p><code>LINE_STRIP</code></p> </td>
      <td rowspan="1" colspan="1"> <p>In the line strip type, a part of the vertex is shared. In the example, 4 vertices are needed.</p>
 <p align="center"><img alt="Lines strip" src="../../../images/drawing_line_strip.png" /></p>
 
 <pre class="prettyprint">
 var vertices =
-&nbsp;&nbsp;&nbsp;[-1.0, 1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  -1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0];
+   [-1.0, 1.0,
+    1.0,  1.0,
+    1.0,  -1.0,
+    -1.0, -1.0];
 
 gl.vertexAttribPointer(vertexPositionAttribute, 2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.FLOAT, false, 0, 0);
+                       gl.FLOAT, false, 0, 0);
 gl.drawArrays(gl. LINE_STRIP, 0, 4);
 </pre>
-</td> 
+</td>
        </tr>
-       
-        <tr> 
-     <td rowspan="1" colspan="1"> <p><code>LINE_LOOP</code></p> </td> 
+
+        <tr>
+     <td rowspan="1" colspan="1"> <p><code>LINE_LOOP</code></p> </td>
      <td rowspan="1" colspan="1">
         <p>In the line loop type, the first vertex and the last vertex are connected, otherwise this type is similar to the line strip type. In the example, 4 vertices are needed. </p>
 <p align="center"><img alt="Line loop" src="../../../images/drawing_line_loop.png" /></p>
 
 <pre class="prettyprint">
 var vertices =
-&nbsp;&nbsp;&nbsp;[-1.0, 1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  -1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0];
+   [-1.0, 1.0,
+    1.0,  1.0,
+    1.0,  -1.0,
+    -1.0, -1.0];
 
 gl.vertexAttribPointer(vertexPositionAttribute, 2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.FLOAT, false, 0, 0);
+                       gl.FLOAT, false, 0, 0);
 gl.drawArrays(gl. LINE_LOOP, 0, 4);
 </pre>
-</td> 
+</td>
        </tr>
-       
-        <tr> 
-     <td rowspan="1" colspan="1"> <p><code>TRIANGLES</code></p> </td> 
-     <td rowspan="1" colspan="1"><p>In the triangles type, 2 triangles are comprised of 3 vertices. In the example, 6 vertices are needed.  
+
+        <tr>
+     <td rowspan="1" colspan="1"> <p><code>TRIANGLES</code></p> </td>
+     <td rowspan="1" colspan="1"><p>In the triangles type, 2 triangles are comprised of 3 vertices. In the example, 6 vertices are needed.
 </p>
 <p align="center"><img alt="Triangles" src="../../../images/drawing_triangles.png" /></p>
 
 <pre class="prettyprint">
 var vertices =
-&nbsp;&nbsp;&nbsp;[-1.0, 1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;0.0,  0.0,
+   [-1.0, 1.0,
+    1.0,  1.0,
+    0.0,  0.0,
 
-&nbsp;&nbsp;&nbsp;&nbsp;0.0,  0.0,
-&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;-1.0, 0.0];
+    0.0,  0.0,
+    -1.0, -1.0,
+    -1.0, 0.0];
 
 gl.vertexAttribPointer(vertexPositionAttribute, 2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.FLOAT, false, 0, 0);
+                       gl.FLOAT, false, 0, 0);
 gl.drawArrays(gl. TRIANGLES, 0, 6);
 </pre>
-</td> 
+</td>
        </tr>
-       
-        <tr> 
-     <td rowspan="1" colspan="1"> <p><code>TRIANGLE_STRIP</code></p> </td> 
-     <td rowspan="1" colspan="1"><p>In the triangle strip type, a triangle is created using the last 2 vertices and the next vertex. In the example, 6 vertices are needed.  
+
+        <tr>
+     <td rowspan="1" colspan="1"> <p><code>TRIANGLE_STRIP</code></p> </td>
+     <td rowspan="1" colspan="1"><p>In the triangle strip type, a triangle is created using the last 2 vertices and the next vertex. In the example, 6 vertices are needed.
 </p>
 <p align="center"><img alt="Triangle strip" src="../../../images/drawing_triangle_strip.png" /></p>
 
 <pre class="prettyprint">
 var vertices =
-&nbsp;&nbsp;&nbsp;[1.0, 1.0, /* p1 */
-&nbsp;&nbsp;&nbsp;&nbsp;0.0, 1.0, /* p2 */
-&nbsp;&nbsp;&nbsp;&nbsp;1.0, 0.0, /* p3 */
-&nbsp;&nbsp;&nbsp;&nbsp;0.0, 0.0, /* p4 */
-&nbsp;&nbsp;&nbsp;&nbsp;1.0, -1.0, /* p5 */
-&nbsp;&nbsp;&nbsp;&nbsp;0.0, -1.0]; /* p6 */
+   [1.0, 1.0, /* p1 */
+    0.0, 1.0, /* p2 */
+    1.0, 0.0, /* p3 */
+    0.0, 0.0, /* p4 */
+    1.0, -1.0, /* p5 */
+    0.0, -1.0]; /* p6 */
 
 gl.vertexAttribPointer(vertexPositionAttribute, 2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.FLOAT, false, 0, 0);
+                       gl.FLOAT, false, 0, 0);
 gl.drawArrays(gl. TRIANGLE_STRIP, 0, 6);
 </pre>
-</td> 
+</td>
        </tr>
-       
-        <tr> 
-     <td rowspan="1" colspan="1"> <p><code>TRIANGLE_FAN</code></p> </td> 
+
+        <tr>
+     <td rowspan="1" colspan="1"> <p><code>TRIANGLE_FAN</code></p> </td>
      <td rowspan="1" colspan="1"> <p>In the triangle fan type, the first IBO index is shared in all elements. In the example, the <code>p0</code> vertex is shared by all triangles, so 4 triangles are created with 6 vertices.
 </p>
 <p align="center"><img alt="Triangle fan" src="../../../images/drawing_triangle_fan.png" /></p>
 
 <pre class="prettyprint">
 var vertices =
-&nbsp;&nbsp;&nbsp;[0.0,  0.0, /* p0 */
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  0.8, /* p1 */
-&nbsp;&nbsp;&nbsp;&nbsp;-0.5, 1.0, /* p2 */
-&nbsp;&nbsp;&nbsp;&nbsp;-0.8, 0.2, /* p3 */
-&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0, /* p4 */
-&nbsp;&nbsp;&nbsp;&nbsp;1.0,  -1.0]; /* p5 */
+   [0.0,  0.0, /* p0 */
+    1.0,  0.8, /* p1 */
+    -0.5, 1.0, /* p2 */
+    -0.8, 0.2, /* p3 */
+    -1.0, -1.0, /* p4 */
+    1.0,  -1.0]; /* p5 */
 
 gl.vertexAttribPointer(vertexPositionAttribute, 2,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.FLOAT, false, 0, 0);
+                       gl.FLOAT, false, 0, 0);
 gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 </pre>
-</td> 
+</td>
        </tr>
 </tbody>
 </table>
@@ -505,40 +505,40 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following files:</p>
  <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_circle.html</a></li>       
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_circle.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_rectangle.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_triangle.html</a></li>     
- </ul> 
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_triangle.html</a></li>
+ </ul>
 
  <h2 id="color" name="color">Setting Colors</h2>
 
 <p>To enhance the user experience of your application with WebGL features, you must learn to set colors using attributes and a buffer:</p>
 
-  <ol> 
+  <ol>
 <li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL&reg; ES Shading Language</a> (GLSL ES):</p>
 <pre class="prettyprint">
-&lt;script id=&quot;vshader&quot; type=&quot;x-shader/x-vertex&quot;&gt;
-&nbsp;&nbsp;&nbsp;attribute vec2 attVertexPos;
-&nbsp;&nbsp;&nbsp;attribute vec4 attVertexColor;
+&lt;script id="vshader" type="x-shader/x-vertex"&gt;
+   attribute vec2 attVertexPos;
+   attribute vec4 attVertexColor;
 
-&nbsp;&nbsp;&nbsp;varying vec4 vColor;
+   varying vec4 vColor;
 
-&nbsp;&nbsp;&nbsp;void main()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = vec4(attVertexPos, 0, 2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vColor = attVertexColor;
-&nbsp;&nbsp;&nbsp;}
+   void main()
+   {
+      gl_Position = vec4(attVertexPos, 0, 2);
+      vColor = attVertexColor;
+   }
 &lt;/script&gt;
 
-&lt;script id=&quot;fshader&quot; type=&quot;x-shader/x-fragment&quot;&gt;
-&nbsp;&nbsp;&nbsp;precision mediump float;
+&lt;script id="fshader" type="x-shader/x-fragment"&gt;
+   precision mediump float;
 
-&nbsp;&nbsp;&nbsp;varying vec4 vColor;
+   varying vec4 vColor;
 
-&nbsp;&nbsp;&nbsp;void main()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = vColor;
-&nbsp;&nbsp;&nbsp;}
+   void main()
+   {
+      gl_FragColor = vColor;
+   }
 &lt;/script&gt;
 </pre>
 </li>
@@ -546,60 +546,60 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Define a rectangular vertex comprised of 2 triangles:</p>
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var vertices =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[1.0,  1.0, /* p1 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, 1.0, /* p2 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0,  -1.0, /* p3 */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0]; /* p4 */
+   var vertices =
+      [1.0,  1.0, /* p1 */
+       -1.0, 1.0, /* p2 */
+       1.0,  -1.0, /* p3 */
+       -1.0, -1.0]; /* p4 */
 </pre>
 
-<p align="center"><img alt="Result of the coordinates on the left" src="../../../images/color_vertex.png" /></p> 
+<p align="center"><img alt="Result of the coordinates on the left" src="../../../images/color_vertex.png" /></p>
 
 </li>
 
 <li><p>Create the color buffer and render the 2 triangles using the <code>gl.TRIANGLE_STRIP</code> attribute:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* Define the color of each vertex as an array */
-&nbsp;&nbsp;&nbsp;var colors =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[1.0, 0.0, 0.0, 1.0, /* Red */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0, 1.0, 0.0, 1.0, /* Green */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0, 0.0, 1.0, 1.0, /* Blue */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, 0.0, 0.0, 1.0]; /* Red */
-
-&nbsp;&nbsp;&nbsp;/* Create a buffer for storing the color value */
-&nbsp;&nbsp;&nbsp;var triangleVerticesColorBuffer = gl.createBuffer();
-&nbsp;&nbsp;&nbsp;/* Bind the buffer */
-&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
-&nbsp;&nbsp;&nbsp;/* Store data in the buffer */
-&nbsp;&nbsp;&nbsp;gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-
-&nbsp;&nbsp;&nbsp;/* Bring the color attribute position from the WebGlProgram instance */
-&nbsp;&nbsp;&nbsp;var vertexColorAttribute = gl.getAttribLocation(program, &quot;attVertexColor&quot;);
-&nbsp;&nbsp;&nbsp;/* Activate the attribute data array */
-&nbsp;&nbsp;&nbsp;gl.enableVertexAttribArray(vertexColorAttribute);
-&nbsp;&nbsp;&nbsp;gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
-
-&nbsp;&nbsp;&nbsp;gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+   /* Define the color of each vertex as an array */
+   var colors =
+      [1.0, 0.0, 0.0, 1.0, /* Red */
+       0.0, 1.0, 0.0, 1.0, /* Green */
+       0.0, 0.0, 1.0, 1.0, /* Blue */
+       1.0, 0.0, 0.0, 1.0]; /* Red */
+
+   /* Create a buffer for storing the color value */
+   var triangleVerticesColorBuffer = gl.createBuffer();
+   /* Bind the buffer */
+   gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
+   /* Store data in the buffer */
+   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+   /* Bring the color attribute position from the WebGlProgram instance */
+   var vertexColorAttribute = gl.getAttribLocation(program, "attVertexColor");
+   /* Activate the attribute data array */
+   gl.enableVertexAttribArray(vertexColorAttribute);
+   gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+
+   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 &lt;/script&gt;
 </pre>
 
 </li>
-  </ol> 
+  </ol>
 <p>The following figure shows the result as it is displayed on the screen.</p>
-<p align="center"><strong>Figure: Color on the screen</strong></p> 
-<p align="center"><img alt="Color on the screen" src="../../../images/color_final.png" /></p> 
+<p align="center"><strong>Figure: Color on the screen</strong></p>
+<p align="center"><img alt="Color on the screen" src="../../../images/color_final.png" /></p>
 
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_color.html</a></li>        
- </ul>    
- 
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_color.html</a></li>
+ </ul>
+
 <h2 id="texture" name="texture">Setting Textures</h2>
 
 <p>To enhance the user experience of your application with WebGL features, you must learn to use a texture, which is an image applied to the surface:</p>
 
-  <ol> 
+  <ol>
 <li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL&reg; ES Shading Language</a> (GLSL ES). In this example, the texture coordinate attribute is used instead of the vertex coordinate attribute.</p>
 <p>Set the variable to pass the texture coordinate over to the fragment shader. Define the formula for calculating the texture coordinates.</p>
 
@@ -609,27 +609,27 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 </div>
 
 <pre class="prettyprint">
-&lt;script id=&quot;vshader&quot; type=&quot;x-shader/x-vertex&quot;&gt;
-&nbsp;&nbsp;&nbsp;attribute vec2 attVertexPos;
-&nbsp;&nbsp;&nbsp;varying highp vec2 varTextureCoord;
-
-&nbsp;&nbsp;&nbsp;void main(void)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = vec4(attVertexPos, 0, 2.0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;varTextureCoord = 0.5 * attVertexPos.xy + 0.5;
-&nbsp;&nbsp;&nbsp;}
+&lt;script id="vshader" type="x-shader/x-vertex"&gt;
+   attribute vec2 attVertexPos;
+   varying highp vec2 varTextureCoord;
+
+   void main(void)
+   {
+      gl_Position = vec4(attVertexPos, 0, 2.0);
+      varTextureCoord = 0.5 * attVertexPos.xy + 0.5;
+   }
 &lt;/script&gt;
 
-&lt;script id=&quot;fshader&quot; type=&quot;x-shader/x-fragment&quot;&gt;
-&nbsp;&nbsp;&nbsp;varying highp vec2 varTextureCoord;
-&nbsp;&nbsp;&nbsp;uniform sampler2D unfSampler; /* Used to access the texture */
+&lt;script id="fshader" type="x-shader/x-fragment"&gt;
+   varying highp vec2 varTextureCoord;
+   uniform sampler2D unfSampler; /* Used to access the texture */
 
-&nbsp;&nbsp;&nbsp;void main(void)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* texture2D(texture sampler, texture coordinate) */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;texture2D(unfSampler, vec2(varTextureCoord.s, varTextureCoord.t));
-&nbsp;&nbsp;&nbsp;}
+   void main(void)
+   {
+      /* texture2D(texture sampler, texture coordinate) */
+      gl_FragColor =
+         texture2D(unfSampler, vec2(varTextureCoord.s, varTextureCoord.t));
+   }
 &lt;/script&gt;
 </pre>
 
@@ -642,7 +642,7 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Create a new <code>texture</code> instance using the <code>createTexture()</code> method:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var texture = gl.createTexture();
+   var texture = gl.createTexture();
 </pre>
 
 <div class="note">
@@ -654,68 +654,68 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Load the image file to be used as texture data, and bind the texture using the <code>bindTexture()</code> method:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;var textureImage = new Image();
-&nbsp;&nbsp;&nbsp;textureImage.onload = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loadedTextureHandler(texture);
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;textureImage.src = &quot;images/carp.jpg&quot;
-
-&nbsp;&nbsp;&nbsp;function loadedTextureHandler(texture)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize texture */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindTexture(gl.TEXTURE_2D, texture);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+   var textureImage = new Image();
+   textureImage.onload = function()
+   {
+      loadedTextureHandler(texture);
+   };
+   textureImage.src = "images/carp.jpg"
+
+   function loadedTextureHandler(texture)
+   {
+      /* Initialize texture */
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 </pre>
 <p>The image data loaded in HTML has the opposite y-axis as the webGL direction. Use the <code>gl.UNPACK_FLIP_Y_WEBGL</code> attribute to reverse the data and store it.</p>
 </li>
 
   <li><p>Use the loaded image file to fill the texture data. The <code>texImage2D()</code> method assigns the image to be used as a texture, and the <code>textParameteri()</code> method assigns a filter.</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.UNSIGNED_BYTE, textureImage);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
+                    gl.UNSIGNED_BYTE, textureImage);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Filter texture */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      /* Filter texture */
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Wrap texture */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      /* Wrap texture */
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 </pre>
 </li>
 
 <li>Import the <code>unfSampler</code> uniform location to use in the program:
-               
+
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var unfSampler = gl.getUniformLocation(program, &quot;uSampler&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.uniform1i(unfSampler, 0);
+      var unfSampler = gl.getUniformLocation(program, "uSampler");
+      gl.uniform1i(unfSampler, 0);
 </pre>
        </li>
 <li>Draw the image using the <code>drawArrays()</code> method:
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var vertexPositionAttribute = gl.getAttribLocation(program, &quot;attVertexPos&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.enableVertexAttribArray(vertexPositionAttribute);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
+      var vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
+      gl.enableVertexAttribArray(vertexPositionAttribute);
+      gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+      gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-&nbsp;&nbsp;&nbsp;}
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+   }
 &lt;/script&gt;
 </pre>
 </li>
-  </ol> 
+  </ol>
 <p>The following figure shows the result as it is displayed on the screen.</p>
-<p align="center"><strong>Figure: Texture on the screen</strong></p> 
-<p align="center"><img alt="Texture on the screen" src="../../../images/texture.png" /></p> 
+<p align="center"><strong>Figure: Texture on the screen</strong></p>
+<p align="center"><img alt="Texture on the screen" src="../../../images/texture.png" /></p>
 
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following files:</p>
  <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_texture.html</a></li>      
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_texture.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/images" target="_blank">carp.jpg</a></li>
- </ul>  
+ </ul>
 
  <h2 id="animation" name="animation">Creating an Animation</h2>
 
@@ -725,62 +725,62 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li>Calculate the central point:
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var r = 0.1; /* Radius */
-&nbsp;&nbsp;&nbsp;var n = 50; /* Number of vertices */
-&nbsp;&nbsp;&nbsp;var cx = 0; /* x axis central point */
-&nbsp;&nbsp;&nbsp;var cy = 0; /* y axis central point */
-
-&nbsp;&nbsp;&nbsp;/* Common coordinates for all triangles (the central point of a circle) */
-&nbsp;&nbsp;&nbsp;var centerVertices = [cx, cy]; 
-&nbsp;&nbsp;&nbsp;var circumVertices = [];
-&nbsp;&nbsp;&nbsp;var lastVertices = [];
-&nbsp;&nbsp;&nbsp;var vertices = [];
-&nbsp;&nbsp;&nbsp;var angle = 0.0;
-&nbsp;&nbsp;&nbsp;draw();
-
-&nbsp;&nbsp;&nbsp;function draw()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Calculate the coordinate of central point to be moved to */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cy = cx = Math.sin(angle) * 0.9; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;centerVertices = [cx, cy];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circumVertices = [];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastVertices = [];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertices = [];
+   var r = 0.1; /* Radius */
+   var n = 50; /* Number of vertices */
+   var cx = 0; /* x axis central point */
+   var cy = 0; /* y axis central point */
+
+   /* Common coordinates for all triangles (the central point of a circle) */
+   var centerVertices = [cx, cy];
+   var circumVertices = [];
+   var lastVertices = [];
+   var vertices = [];
+   var angle = 0.0;
+   draw();
+
+   function draw()
+   {
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
+      /* Calculate the coordinate of central point to be moved to */
+      cy = cx = Math.sin(angle) * 0.9;
+      centerVertices = [cx, cy];
+      circumVertices = [];
+      lastVertices = [];
+      vertices = [];
 </pre></li>
 <li>Use a trigonometric function to calculate the vertex location of a regular N polygon with the central point as the center. Store the n(50) vertex coordinates using the changed central point as the center of the array.
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; n; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circumVertices.push(cx+r * Math.cos(i/n*2 * Math.PI - Math.PI/2));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circumVertices.push(cy+r * Math.sin(i/n*2 * Math.PI - Math.PI/2));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastVertices = [circumVertices[0], circumVertices[1]];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;circumVertices = circumVertices.concat(lastVertices);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertices = vertices.concat(centerVertices);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertices = vertices.concat(circumVertices);
+      for (var i = 0; i &lt; n; i++)
+      {
+         circumVertices.push(cx+r * Math.cos(i/n*2 * Math.PI - Math.PI/2));
+         circumVertices.push(cy+r * Math.sin(i/n*2 * Math.PI - Math.PI/2));
+      }
+
+      lastVertices = [circumVertices[0], circumVertices[1]];
+      circumVertices = circumVertices.concat(lastVertices);
+      vertices = vertices.concat(centerVertices);
+      vertices = vertices.concat(circumVertices);
 </pre>
  </li>
  <li>Change the value of the variable in order to calculate the central point. Render the circle with the central point and vertex location, using the <code>TRIANGLE_FAN</code> argument that allows all triangles to share a central point to make a circle.
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Change the angle value to change the central point coordinates */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angle += 0.01;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var triangleVerticesBuffer = gl.createBuffer();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var vertexPositionAttribute = gl.getAttribLocation(program, &quot;attVertexPos&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.enableVertexAttribArray(vertexPositionAttribute);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.drawArrays(gl.TRIANGLE_FAN, 0, n + 2);
-&nbsp;&nbsp;&nbsp;}
+      /* Change the angle value to change the central point coordinates */
+      angle += 0.01;
+
+      var triangleVerticesBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+
+      var vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
+      gl.enableVertexAttribArray(vertexPositionAttribute);
+      gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
+      gl.drawArrays(gl.TRIANGLE_FAN, 0, n + 2);
+   }
 </pre>
 </li>
 <li>Use the <code>setInterval()</code> method to set the rendering interval of the circle:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;window.setInterval(function() {draw();}, 10);
+   window.setInterval(function() {draw();}, 10);
 &lt;/script&gt;
 </pre>
 
@@ -792,14 +792,14 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 
 </ol>
 <p>The following figure shows the animation as it is displayed on the screen.</p>
-<p align="center"><strong>Figure: Animation on the screen</strong></p> 
-<p align="center"><img alt="Animation on the screen" src="../../../images/animation_up_down.png" /></p>  
+<p align="center"><strong>Figure: Animation on the screen</strong></p>
+<p align="center"><img alt="Animation on the screen" src="../../../images/animation_up_down.png" /></p>
 
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_animation.html</a></li>    
- </ul>   
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_animation.html</a></li>
+ </ul>
 
  <h2 id="threed" name="threed">Creating a 3D Perspective</h2>
 
@@ -809,90 +809,90 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Set the vertex coordinate and color buffer values to draw 2 triangles:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function setupBuffers()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var colors =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[1.0, 0.5, 0.5,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, 0.5, 0.5,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, 0.5, 0.5,
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, 0.8, 0.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, 0.8, 0.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, 0.8, 0.0];
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;triangleVerticesColorBuffer = gl.createBuffer();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function setupVerticesBuffer()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var vertices =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[-0.5, 0.5,  0.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.5,  -0.5, 0.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.5, -0.5, 0.0,
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.5,  0.5,  0.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.5, 0.5,  0.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.5,  -0.5, 0.0];
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;triangleVerticesBuffer = gl.createBuffer();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function drawScene()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertexColorAttribute = gl.getAttribLocation(program, &quot;attVertexColor&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.enableVertexAttribArray(vertexColorAttribute);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 0,0);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertexPositionAttribute = gl.getAttribLocation(program, &quot;attVertexPos&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.enableVertexAttribArray(vertexPositionAttribute);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0,0);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.drawArrays(gl.TRIANGLES, 0, 6);
-&nbsp;&nbsp;&nbsp;}
+   function setupBuffers()
+   {
+      var colors =
+         [1.0, 0.5, 0.5,
+          1.0, 0.5, 0.5,
+          1.0, 0.5, 0.5,
+
+          1.0, 0.8, 0.0,
+          1.0, 0.8, 0.0,
+          1.0, 0.8, 0.0];
+
+      triangleVerticesColorBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+   }
+
+   function setupVerticesBuffer()
+   {
+      var vertices =
+         [-0.5, 0.5,  0.0,
+          0.5,  -0.5, 0.0,
+          -0.5, -0.5, 0.0,
+
+          0.5,  0.5,  0.0,
+          -0.5, 0.5,  0.0,
+          0.5,  -0.5, 0.0];
+
+      triangleVerticesBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+   }
+
+   function drawScene()
+   {
+      vertexColorAttribute = gl.getAttribLocation(program, "attVertexColor");
+      gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
+      gl.enableVertexAttribArray(vertexColorAttribute);
+      gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 0,0);
+
+      vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
+
+      gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+      gl.enableVertexAttribArray(vertexPositionAttribute);
+      gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0,0);
+
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+   }
 &lt;/script&gt;
 </pre>
-<p align="center"><img alt="2 triangles" src="../../../images/3d.png" /></p> 
+<p align="center"><img alt="2 triangles" src="../../../images/3d.png" /></p>
 </li>
 
 <li><p>Define the vertex shader and fragment shader with using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL&reg; ES Shading Language</a> (GLSL ES), and modify the GLSL ES variables:</p>
 <pre class="prettyprint">
-&lt;script id=&quot;vshader&quot; type=&quot;x-shader/x-vertex&quot;&gt;
-&nbsp;&nbsp;&nbsp;attribute vec3 attVertexPos;
-&nbsp;&nbsp;&nbsp;attribute vec3 attVertexColor;
+&lt;script id="vshader" type="x-shader/x-vertex"&gt;
+   attribute vec3 attVertexPos;
+   attribute vec3 attVertexColor;
 
-&nbsp;&nbsp;&nbsp;uniform mat4 uMVMatrix; /* Uniform variable delivered with the model view matrix */
-&nbsp;&nbsp;&nbsp;uniform mat4 uPMatrix; /* Uniform variable delivered with the projection matrix */
+   uniform mat4 uMVMatrix; /* Uniform variable delivered with the model view matrix */
+   uniform mat4 uPMatrix; /* Uniform variable delivered with the projection matrix */
 
-&nbsp;&nbsp;&nbsp;varying vec4 vColor;
+   varying vec4 vColor;
 
-&nbsp;&nbsp;&nbsp;void main()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Multiply the model view matrix and projection matrix
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   to the original coordinates
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = uPMatrix * uMVMatrix *  vec4(attVertexPos, 1.0);
+   void main()
+   {
+      /*
+         Multiply the model view matrix and projection matrix
+         to the original coordinates
+      */
+      gl_Position = uPMatrix * uMVMatrix *  vec4(attVertexPos, 1.0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vColor = vec4(attVertexColor, 1.0);
-&nbsp;&nbsp;&nbsp;}
+      vColor = vec4(attVertexColor, 1.0);
+   }
 &lt;/script&gt;
 
-&lt;script id=&quot;fshader&quot; type=&quot;x-shader/x-fragment&quot;&gt;
-&nbsp;&nbsp;&nbsp;precision mediump float;
+&lt;script id="fshader" type="x-shader/x-fragment"&gt;
+   precision mediump float;
 
-&nbsp;&nbsp;&nbsp;varying vec4 vColor;
+   varying vec4 vColor;
 
-&nbsp;&nbsp;&nbsp;void main()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = vColor;
-&nbsp;&nbsp;&nbsp;}
+   void main()
+   {
+      gl_FragColor = vColor;
+   }
 &lt;/script&gt;
 </pre>
 
@@ -902,25 +902,25 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Edit the z coordinate of the right triangle to apply perspective:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;gl.viewport(0, 0, canvas.width, canvas.height);
-&nbsp;&nbsp;&nbsp;mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
-&nbsp;&nbsp;&nbsp;mat4.identity(mvMatrix);
-&nbsp;&nbsp;&nbsp;mat4.translate(mvMatrix, [0, 0, -2.0]);
+   gl.viewport(0, 0, canvas.width, canvas.height);
+   mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
+   mat4.identity(mvMatrix);
+   mat4.translate(mvMatrix, [0, 0, -2.0]);
 &lt;/script&gt;
 </pre>
 </li>
 
 <li><p>Download the glMatrix library (<code>gl-matrix-min.js</code>) and include it in the HTML:</p>
 <pre class="prettyprint">
-&lt;script src=&quot;js/lib/gl-matrix-min.js&quot;&gt;&lt;/script&gt;
+&lt;script src="js/lib/gl-matrix-min.js"&gt;&lt;/script&gt;
 </pre>
 </li>
 
 <li><p>Declare the variable to store the model view matrix and projection matrix:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var mvMatrix = mat4.create();
-&nbsp;&nbsp;&nbsp;var pMatrix = mat4.create();
+   var mvMatrix = mat4.create();
+   var pMatrix = mat4.create();
 &lt;/script&gt;
 </pre>
 </li>
@@ -928,32 +928,32 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Check that the location of the <code>uPMatrix</code> and <code>uMVMatrix</code> uniforms can be used in program:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function getMatrixUniforms()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pMatrixUniform = gl.getUniformLocation(program, &quot;uPMatrix&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mvMatrixUniform = gl.getUniformLocation(program, &quot;uMVMatrix&quot;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function setMatrixUniforms()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
-&nbsp;&nbsp;&nbsp;}
+   function getMatrixUniforms()
+   {
+      pMatrixUniform = gl.getUniformLocation(program, "uPMatrix");
+      mvMatrixUniform = gl.getUniformLocation(program, "uMVMatrix");
+   }
+
+   function setMatrixUniforms()
+   {
+      gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);
+      gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
+   }
 &lt;/script&gt;
 </pre>
 </li>
 </ol>
 <p>The following figure shows the 3D perspective as it is displayed on the screen.</p>
-<p align="center"><strong>Figure: 3D perspective on the screen</strong></p> 
-<p align="center"><img alt="3D perspective on the screen" src="../../../images/3d_final.png" /></p> 
+<p align="center"><strong>Figure: 3D perspective on the screen</strong></p>
+<p align="center"><img alt="3D perspective on the screen" src="../../../images/3d_final.png" /></p>
 
 
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following files:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_camera_effect.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/js/lib" target="_blank">gl-matrix-min.js</a></li>            
- </ul>  
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/js/lib" target="_blank">gl-matrix-min.js</a></li>
+ </ul>
 
  <h2 id="touch" name="touch">Using Touch Events</h2>
 
@@ -962,44 +962,44 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <ol>
 <li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL&reg; ES Shading Language</a> (GLSL ES):</p>
 <pre class="prettyprint">
-&lt;script id=&quot;vshader&quot; type=&quot;x-shader/x-vertex&quot;&gt;
-&nbsp;&nbsp;&nbsp;attribute vec3 attVertexPos; /* Vertex coordinate attribute */
-&nbsp;&nbsp;&nbsp;attribute vec2 attTextureCoord; /* Texture coordinate attribute */
-
-&nbsp;&nbsp;&nbsp;uniform mat4 unifMVMatrix; /* Model–view uniform */
-&nbsp;&nbsp;&nbsp;uniform mat4 unifPMatrix; /* Projection matrix uniform */
-
-&nbsp;&nbsp;&nbsp;/* Texture coordinate storing variable used in the fragment shader */
-&nbsp;&nbsp;&nbsp;varying vec2 vTextureCoord;
-
-&nbsp;&nbsp;&nbsp;void main(void)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Multiply the model-view matrix and projection matrix
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   to the original coordinates to apply the 3D perspective
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = unifPMatrix * unifMVMatrix * vec4(attVertexPos, 1.0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Store the texture coordinates */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vTextureCoord = attTextureCoord;
-&nbsp;&nbsp;&nbsp;}
+&lt;script id="vshader" type="x-shader/x-vertex"&gt;
+   attribute vec3 attVertexPos; /* Vertex coordinate attribute */
+   attribute vec2 attTextureCoord; /* Texture coordinate attribute */
+
+   uniform mat4 unifMVMatrix; /* Model–view uniform */
+   uniform mat4 unifPMatrix; /* Projection matrix uniform */
+
+   /* Texture coordinate storing variable used in the fragment shader */
+   varying vec2 vTextureCoord;
+
+   void main(void)
+   {
+      /*
+         Multiply the model-view matrix and projection matrix
+         to the original coordinates to apply the 3D perspective
+      */
+      gl_Position = unifPMatrix * unifMVMatrix * vec4(attVertexPos, 1.0);
+      /* Store the texture coordinates */
+      vTextureCoord = attTextureCoord;
+   }
 &lt;/script&gt;
 
-&lt;script id=&quot;fshader&quot; type=&quot;x-shader/x-fragment&quot;&gt;
+&lt;script id="fshader" type="x-shader/x-fragment"&gt;
 
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   Use a floating point arithmetic value to define
-&nbsp;&nbsp;&nbsp;   the display precision (highp, mediump, or lowp)
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;precision mediump float;
+   /*
+      Use a floating point arithmetic value to define
+      the display precision (highp, mediump, or lowp)
+   */
+   precision mediump float;
 
-&nbsp;&nbsp;&nbsp;varying vec2 vTextureCoord;
+   varying vec2 vTextureCoord;
 
-&nbsp;&nbsp;&nbsp;uniform sampler2D unifSampler; /* Handle the cube mapped texture */
+   uniform sampler2D unifSampler; /* Handle the cube mapped texture */
 
-&nbsp;&nbsp;&nbsp;void main(void)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = texture2D(unifSampler, vec2(vTextureCoord.s, vTextureCoord.t));
-&nbsp;&nbsp;&nbsp;}
+   void main(void)
+   {
+      gl_FragColor = texture2D(unifSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+   }
 &lt;/script&gt;
 </pre>
 </li>
@@ -1007,34 +1007,34 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Define the variables to be used and the methods to be executed when the window is loaded:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var gl = null;
-&nbsp;&nbsp;&nbsp;var program = null;
+   var gl = null;
+   var program = null;
 
-&nbsp;&nbsp;&nbsp;var diceTexture;
-&nbsp;&nbsp;&nbsp;var mvMatrix = mat4.create();
-&nbsp;&nbsp;&nbsp;var pMatrix = mat4.create();
+   var diceTexture;
+   var mvMatrix = mat4.create();
+   var pMatrix = mat4.create();
 
-&nbsp;&nbsp;&nbsp;var cubeVertexPositionBuffer; /* Buffer for vertex coordinate information */
-&nbsp;&nbsp;&nbsp;var cubeVertexTextureCoordBuffe; /* Buffer for texture coordinate information */
-&nbsp;&nbsp;&nbsp;var cubeVertexIndexBuffer; /* Buffer for index information */
+   var cubeVertexPositionBuffer; /* Buffer for vertex coordinate information */
+   var cubeVertexTextureCoordBuffe; /* Buffer for texture coordinate information */
+   var cubeVertexIndexBuffer; /* Buffer for index information */
 
-&nbsp;&nbsp;&nbsp;var xRot = 30;
-&nbsp;&nbsp;&nbsp;var yRot = 30;
+   var xRot = 30;
+   var yRot = 30;
 
-&nbsp;&nbsp;&nbsp;window.onload = startWegGL;
+   window.onload = startWegGL;
 
-&nbsp;&nbsp;&nbsp;function startWegGL()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl = getWebGLContext();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initShaders();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initBuffers();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initTexture(drawScene);
+   function startWegGL()
+   {
+      gl = getWebGLContext();
+      initShaders();
+      initBuffers();
+      initTexture(drawScene);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.clearColor(0.5,0.5,0.4,1.0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.enable(gl.DEPTH_TEST);
+      gl.clearColor(0.5,0.5,0.4,1.0);
+      gl.enable(gl.DEPTH_TEST);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initEvent();
-&nbsp;&nbsp;&nbsp;}
+      initEvent();
+   }
 &lt;/script&gt;
 </pre>
 </li>
@@ -1042,17 +1042,17 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Use the <code>getContext()</code> method of the <code>canvas</code> object to import the WebGL context:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function getWebGLContext()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas = document.getElementById(&quot;canvas&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var webGLContext = canvas.getContext(&quot;experimental-webgl&quot;);
+   function getWebGLContext()
+   {
+      canvas = document.getElementById("canvas");
+      var webGLContext = canvas.getContext("experimental-webgl");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return webGLContext;
-&nbsp;&nbsp;&nbsp;}
+      return webGLContext;
+   }
 &lt;/script&gt;
 
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;canvas id=&quot;canvas&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;
+   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -1060,135 +1060,135 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Create the shaders and programs using the <code>createShader()</code> and <code>createProgram()</code> methods:</p>
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;function initShaders()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var vshader = gl.createShader(gl.VERTEX_SHADER);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fshader = gl.createShader(gl.FRAGMENT_SHADER);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.shaderSource(vshader, document.getElementById(&#39;vshader&#39;).text);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.shaderSource(fshader, document.getElementById(&#39;fshader&#39;).text);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.compileShader(vshader);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.compileShader(fshader);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program = gl.createProgram();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.attachShader(program, vshader);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.attachShader(program, fshader);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.linkProgram(program); /* Link to program */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.useProgram(program); /* Shaders are loaded and used */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program.vertexPositionAttribute = gl.getAttribLocation(program, &quot;attVertexPos&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.enableVertexAttribArray(program.vertexPositionAttribute);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program.textureCoordAttribute =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.getAttribLocation(program, &quot;attTextureCoord&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.enableVertexAttribArray(program.textureCoordAttribute);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program.pMatrixUniform = gl.getUniformLocation(program, &quot;unifPMatrix&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program.mvMatrixUniform = gl.getUniformLocation(program, &quot;unifMVMatrix&quot;);
+   function initShaders()
+   {
+      var vshader = gl.createShader(gl.VERTEX_SHADER);
+      var fshader = gl.createShader(gl.FRAGMENT_SHADER);
+      gl.shaderSource(vshader, document.getElementById('vshader').text);
+      gl.shaderSource(fshader, document.getElementById('fshader').text);
+      gl.compileShader(vshader);
+      gl.compileShader(fshader);
+
+      program = gl.createProgram();
+      gl.attachShader(program, vshader);
+      gl.attachShader(program, fshader);
+      gl.linkProgram(program); /* Link to program */
+      gl.useProgram(program); /* Shaders are loaded and used */
+
+      program.vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
+      gl.enableVertexAttribArray(program.vertexPositionAttribute);
+
+      program.textureCoordAttribute =
+         gl.getAttribLocation(program, "attTextureCoord");
+      gl.enableVertexAttribArray(program.textureCoordAttribute);
+
+      program.pMatrixUniform = gl.getUniformLocation(program, "unifPMatrix");
+      program.mvMatrixUniform = gl.getUniformLocation(program, "unifMVMatrix");
 </pre>
 </li>
-<li>To send the loaded texture image to the shader program, and add a reference to the shader program <code>unifSampler</code> location: 
+<li>To send the loaded texture image to the shader program, and add a reference to the shader program <code>unifSampler</code> location:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;program.samplerUniform = gl.getUniformLocation(program, &quot;unifSampler&quot;);
-&nbsp;&nbsp;&nbsp;}
+      program.samplerUniform = gl.getUniformLocation(program, "unifSampler");
+   }
 </pre>
 </li>
 
 <li><p>Initialize the buffer:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function initBuffers()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertices =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Front */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[-1.0, -1.0, 1.0,   1.0, -1.0, 1.0,   1.0, 1.0, 1.0,   -1.0, 1.0, 1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Back */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0, -1.0,  -1.0, 1.0, -1.0,  1.0, 1.0, -1.0,  1.0, -1.0, -1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Top */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, 1.0, -1.0,   -1.0, 1.0, 1.0,   1.0, 1.0, 1.0,   1.0, 1.0, -1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Bottom */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0, -1.0,  1.0, -1.0, -1.0,  1.0, -1.0, 1.0,  -1.0, -1.0, 1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Right */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.0, -1.0, -1.0,   1.0, 1.0, -1.0,   1.0, 1.0, 1.0,   1.0, -1.0, 1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Left */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-1.0, -1.0, -1.0,  -1.0, -1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0, 1.0, -1.0];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexPositionBuffer = gl.createBuffer();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Convert to Float32Array */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexPositionBuffer.itemSize = 3;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexPositionBuffer.numItems = 24;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var textureCoords =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[0.0, 0.5,   0.25, 0.5,  0.25, 1.0,  0.0, 1.0, /* Front */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.5, 0.5,   0.75, 0.5,  0.75, 1.0,  0.5, 1.0, /* Back */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0, 0.5,   0.25, 0.5,  0.25, 0.0,  0.0, 0.0, /* Top */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.25, 0.5,  0.5, 0.5,   0.5, 0.0,   0.25, 0.0, /* Bottom */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.25, 0.5,  0.5, 0.5,   0.5, 1.0,   0.25, 1.0, /* Right */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.75, 0.5,  1.0, 0.5,   1.0, 1.0,   0.75, 1.0]; /* Left */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexTextureCoordBuffer = gl.createBuffer();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.STATIC_DRAW);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexTextureCoordBuffer.itemSize = 2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexTextureCoordBuffer.numItems = 24;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexIndexBuffer = gl.createBuffer();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var cubeVertexIndices =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[0,  1,  2,    0,  2,  3, /* Front */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4,  5,  6,    4,  6,  7, /* Back */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8,  9,  10,   8,  10, 11, /* Top */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12, 13, 14,   12, 14, 15, /* Bottom */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;16, 17, 18,   16, 18, 19, /* Right */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20, 21, 22,   20, 22, 23]; /* Left */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.STATIC_DRAW);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexIndexBuffer.itemSize = 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexIndexBuffer.numItems = 36;
-&nbsp;&nbsp;&nbsp;}
+   function initBuffers()
+   {
+      vertices =
+         /* Front */
+         [-1.0, -1.0, 1.0,   1.0, -1.0, 1.0,   1.0, 1.0, 1.0,   -1.0, 1.0, 1.0,
+          /* Back */
+          -1.0, -1.0, -1.0,  -1.0, 1.0, -1.0,  1.0, 1.0, -1.0,  1.0, -1.0, -1.0,
+          /* Top */
+          -1.0, 1.0, -1.0,   -1.0, 1.0, 1.0,   1.0, 1.0, 1.0,   1.0, 1.0, -1.0,
+          /* Bottom */
+          -1.0, -1.0, -1.0,  1.0, -1.0, -1.0,  1.0, -1.0, 1.0,  -1.0, -1.0, 1.0,
+          /* Right */
+          1.0, -1.0, -1.0,   1.0, 1.0, -1.0,   1.0, 1.0, 1.0,   1.0, -1.0, 1.0,
+          /* Left */
+          -1.0, -1.0, -1.0,  -1.0, -1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0, 1.0, -1.0];
+      cubeVertexPositionBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+      /* Convert to Float32Array */
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+      cubeVertexPositionBuffer.itemSize = 3;
+      cubeVertexPositionBuffer.numItems = 24;
+
+      var textureCoords =
+         [0.0, 0.5,   0.25, 0.5,  0.25, 1.0,  0.0, 1.0, /* Front */
+          0.5, 0.5,   0.75, 0.5,  0.75, 1.0,  0.5, 1.0, /* Back */
+          0.0, 0.5,   0.25, 0.5,  0.25, 0.0,  0.0, 0.0, /* Top */
+          0.25, 0.5,  0.5, 0.5,   0.5, 0.0,   0.25, 0.0, /* Bottom */
+          0.25, 0.5,  0.5, 0.5,   0.5, 1.0,   0.25, 1.0, /* Right */
+          0.75, 0.5,  1.0, 0.5,   1.0, 1.0,   0.75, 1.0]; /* Left */
+      cubeVertexTextureCoordBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords),
+                    gl.STATIC_DRAW);
+      cubeVertexTextureCoordBuffer.itemSize = 2;
+      cubeVertexTextureCoordBuffer.numItems = 24;
+
+      cubeVertexIndexBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+      var cubeVertexIndices =
+         [0,  1,  2,    0,  2,  3, /* Front */
+          4,  5,  6,    4,  6,  7, /* Back */
+          8,  9,  10,   8,  10, 11, /* Top */
+          12, 13, 14,   12, 14, 15, /* Bottom */
+          16, 17, 18,   16, 18, 19, /* Right */
+          20, 21, 22,   20, 22, 23]; /* Left */
+
+      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices),
+                    gl.STATIC_DRAW);
+      cubeVertexIndexBuffer.itemSize = 1;
+      cubeVertexIndexBuffer.numItems = 36;
+   }
 </pre>
 </li>
 
 <li><p>Initialize the WebGL texture and load the image to be used as the texture (the figure shows the coordinates of the image to be loaded):</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function initTexture(callback)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textureImage = new Image();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textureImage.onload = function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleLoadedTexture(textureImage)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (callback) callback();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textureImage.src = &quot;images/dice.gif&quot;;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function handleLoadedTexture(textureImage)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;diceTexture = gl.createTexture();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindTexture(gl.TEXTURE_2D, diceTexture);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.UNSIGNED_BYTE, textureImage);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-&nbsp;&nbsp;&nbsp;}
+   function initTexture(callback)
+   {
+      textureImage = new Image();
+      textureImage.onload = function()
+      {
+         handleLoadedTexture(textureImage)
+         if (callback) callback();
+      }
+      textureImage.src = "images/dice.gif";
+   }
+
+   function handleLoadedTexture(textureImage)
+   {
+      diceTexture = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, diceTexture);
+
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
+                    gl.UNSIGNED_BYTE, textureImage);
+
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+   }
 </pre>
-<p align="center"><img alt="Image and coordinate of image to be loaded" src="../../../images/dice.png" /></p> 
+<p align="center"><img alt="Image and coordinate of image to be loaded" src="../../../images/dice.png" /></p>
 </li>
 
 <li><p>Define the rendering location and canvas width and height:</p>
 <pre class="prettyprint lang-js">
-&nbsp;&nbsp;&nbsp;function drawScene()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.viewport(0, 0, canvas.width, canvas.height);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
+   function drawScene()
+   {
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
 </pre>
 </li>
 
-<li>Import the <code>mat4()</code> method module and define it using the utility methods: 
+<li>Import the <code>mat4()</code> method module and define it using the utility methods:
 
 <div class="note">
        <strong>Note</strong>
@@ -1196,102 +1196,102 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 </div>
 
 <pre class="prettyprint lang-js">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mat4.identity(mvMatrix);
+      mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
+      mat4.identity(mvMatrix);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);
+      mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mat4.rotate(mvMatrix, xRot * Math.PI / 180, [1, 0, 0]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mat4.rotate(mvMatrix, yRot * Math.PI / 180, [0, 1, 0]);
+      mat4.rotate(mvMatrix, xRot * Math.PI / 180, [1, 0, 0]);
+      mat4.rotate(mvMatrix, yRot * Math.PI / 180, [0, 1, 0]);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.vertexAttribPointer(program.vertexPositionAttribute,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexPositionBuffer.itemSize,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.FLOAT, false, 0, 0);
+      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+      gl.vertexAttribPointer(program.vertexPositionAttribute,
+                             cubeVertexPositionBuffer.itemSize,
+                             gl.FLOAT, false, 0, 0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.vertexAttribPointer(program.textureCoordAttribute,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cubeVertexTextureCoordBuffer.itemSize,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.FLOAT, false, 0, 0);
+      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
+      gl.vertexAttribPointer(program.textureCoordAttribute,
+                             cubeVertexTextureCoordBuffer.itemSize,
+                             gl.FLOAT, false, 0, 0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.activeTexture(gl.TEXTURE0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindTexture(gl.TEXTURE_2D, diceTexture);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.uniform1i(program.samplerUniform, 0);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, diceTexture);
+      gl.uniform1i(program.samplerUniform, 0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
+      gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
+      gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gl.UNSIGNED_SHORT, 0);
-&nbsp;&nbsp;&nbsp;}
+      gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems,
+                      gl.UNSIGNED_SHORT, 0);
+   }
 </pre>
 </li>
 
 <li><p>Add touch events:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;var touches;
-&nbsp;&nbsp;&nbsp;function initEvent()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var startPosX;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var startPosY;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var movedPosX;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var movedPosY;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function mouseMoveHandler(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;movedPosX = e.touches[0].pageX - startPosX;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;movedPosY = e.touches[0].pageY - startPosY;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xRot += movedPosY * 0.05;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;yRot += movedPosX * 0.05;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawScene();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener(&#39;touchstart&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touches = e.touches.item(0);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startPosX = touches.pageX;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startPosY = touches.pageY;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener(&#39;touchmove&#39;, mouseMoveHandler)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener(&#39;touchend&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.removeEventListener(&#39;touchmove&#39;, mouseMoveHandler)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener(&#39;touchend&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.removeEventListener(&#39;touchmove&#39;, mouseMoveHandler)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   var touches;
+   function initEvent()
+   {
+      var startPosX;
+      var startPosY;
+      var movedPosX;
+      var movedPosY;
+
+      function mouseMoveHandler(e)
+      {
+         movedPosX = e.touches[0].pageX - startPosX;
+         movedPosY = e.touches[0].pageY - startPosY;
+         xRot += movedPosY * 0.05;
+         yRot += movedPosX * 0.05;
+
+         drawScene();
+      }
+
+      canvas.addEventListener('touchstart', function(e)
+         {
+            touches = e.touches.item(0);
+
+            startPosX = touches.pageX;
+            startPosY = touches.pageY;
+
+            canvas.addEventListener('touchmove', mouseMoveHandler)
+         });
+
+      canvas.addEventListener('touchend', function(e)
+         {
+            canvas.removeEventListener('touchmove', mouseMoveHandler)
+         })
+
+      canvas.addEventListener('touchend', function()
+         {
+            canvas.removeEventListener('touchmove', mouseMoveHandler)
+         });
+   }
 &lt;/script&gt;
 </pre>
 </li></ol>
 <p>The following figure shows the dice as it is displayed on the screen.</p>
-<p align="center"><strong>Figure: Dice on the screen</strong></p> 
-<p align="center"><img alt="Dice on the screen" src="../../../images/dice_3d.png" /></p> 
+<p align="center"><strong>Figure: Dice on the screen</strong></p>
+<p align="center"><img alt="Dice on the screen" src="../../../images/dice_3d.png" /></p>
 
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following files:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_dice.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/images" target="_blank">dice.gif</a></li>            
- </ul>  
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/images" target="_blank">dice.gif</a></li>
+ </ul>
 
  <h2 id="framework" name="framework">Using WebGL Frameworks</h2>
 
-<p>To enhance the user experience of your application with WebGL features, you must learn to use the three.js framework:</p> 
+<p>To enhance the user experience of your application with WebGL features, you must learn to use the three.js framework:</p>
 
 <ol>
 <li><p>Download the <a href="http://threejs.org/" target="_blank">three.js library</a> and included it in HTML file:</p>
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/lib/three.js&quot;&gt;&lt;/script&gt;
+   &lt;script src="js/lib/three.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 </pre>
 </li>
@@ -1299,62 +1299,62 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Set the area to allocate the <code>&lt;canvas&gt;</code> element in HTML, and to adjust the camera and light settings:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&#39;webGLContainer&#39;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;table style=&#39;padding: 0px; background: black&#39; border=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cellspacing=&quot;0&quot; cellpadding=&quot;5&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td colspan=&quot;2&quot; class=&quot;hd&quot;&gt;&lt;b&gt;directionalLight&lt;/b&gt;&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td align=&#39;right&#39;&gt;X:&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width=&#39;150px&#39;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;slider-lx&quot; type=&quot;range&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;-1&quot; max=&quot;1&quot; step=&quot;0.01&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td align=&#39;right&#39;&gt;Y:&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width=&#39;150px&#39;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;slider-ly&quot; type=&quot;range&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;-1&quot; max=&quot;1&quot; step=&quot;0.01&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td align=&#39;right&#39;&gt;Z:&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width=&#39;150px&#39;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;slider-lz&quot; type=&quot;range&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;-1&quot; max=&quot;1&quot; step=&quot;0.01&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td colspan=&quot;2&quot; class=&quot;hd&quot;&gt;&lt;b&gt;Camera&lt;/b&gt;&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td align=&#39;right&#39;&gt;Z:&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width=&#39;150px&#39;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;slider-cz&quot; type=&quot;range&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;300&quot; max=&quot;800&quot; step=&quot;10&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td align=&#39;right&#39;&gt;rotate-X:&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width=&#39;150px&#39;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;slider-cax&quot; type=&quot;range&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;-0.5&quot; max=&quot;0.5&quot; step=&quot;0.01&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td align=&#39;right&#39;&gt;rotate-Y:&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width=&#39;150px&#39;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;slider-cay&quot; type=&quot;range&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;-0.5&quot; max=&quot;0.5&quot; step=&quot;0.01&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/table&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div&gt;
+      &lt;span id='webGLContainer'&gt;&lt;/span&gt;
+      &lt;span&gt;
+         &lt;table style='padding: 0px; background: black' border="1"
+                cellspacing="0" cellpadding="5"&gt;
+            &lt;tr&gt;
+               &lt;td colspan="2" class="hd"&gt;&lt;b&gt;directionalLight&lt;/b&gt;&lt;/td&gt;
+            &lt;/tr&gt;
+            &lt;tr&gt;
+               &lt;td align='right'&gt;X:&lt;/td&gt;
+               &lt;td width='150px'&gt;
+                  &lt;input id="slider-lx" type="range"
+                         min="-1" max="1" step="0.01"/&gt;
+               &lt;/td&gt;
+            &lt;/tr&gt;
+            &lt;tr&gt;
+               &lt;td align='right'&gt;Y:&lt;/td&gt;
+               &lt;td width='150px'&gt;
+                  &lt;input id="slider-ly" type="range"
+                         min="-1" max="1" step="0.01"/&gt;
+               &lt;/td&gt;
+            &lt;/tr&gt;
+            &lt;tr&gt;
+               &lt;td align='right'&gt;Z:&lt;/td&gt;
+               &lt;td width='150px'&gt;
+                  &lt;input id="slider-lz" type="range"
+                         min="-1" max="1" step="0.01"/&gt;
+               &lt;/td&gt;
+            &lt;/tr&gt;
+            &lt;tr&gt;
+               &lt;td colspan="2" class="hd"&gt;&lt;b&gt;Camera&lt;/b&gt;&lt;/td&gt;
+            &lt;/tr&gt;
+            &lt;tr&gt;
+               &lt;td align='right'&gt;Z:&lt;/td&gt;
+               &lt;td width='150px'&gt;
+                  &lt;input id="slider-cz" type="range"
+                         min="300" max="800" step="10"/&gt;
+               &lt;/td&gt;
+            &lt;/tr&gt;
+            &lt;tr&gt;
+               &lt;td align='right'&gt;rotate-X:&lt;/td&gt;
+               &lt;td width='150px'&gt;
+                  &lt;input id="slider-cax" type="range"
+                         min="-0.5" max="0.5" step="0.01"/&gt;
+               &lt;/td&gt;
+            &lt;/tr&gt;
+            &lt;tr&gt;
+               &lt;td align='right'&gt;rotate-Y:&lt;/td&gt;
+               &lt;td width='150px'&gt;
+                  &lt;input id="slider-cay" type="range"
+                         min="-0.5" max="0.5" step="0.01"/&gt;
+               &lt;/td&gt;
+            &lt;/tr&gt;
+         &lt;/table&gt;
+      &lt;/span&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -1362,53 +1362,53 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 <li><p>Define the variables to be used and the methods to be executed when the window is loaded. Once the window load is complete, import the <code>startWebGl()</code> method.</p>
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var canvasWidth = 250; /* Canvas width */
-&nbsp;&nbsp;&nbsp;var canvasHeight = 250; /* Canvas height */
-
-&nbsp;&nbsp;&nbsp;var renderer = null; /* Variable containing the WebGLRenderer object */
-&nbsp;&nbsp;&nbsp;var camera = null; /* Variable containing the PerspectiveCamera object */
-&nbsp;&nbsp;&nbsp;var scene = null; /* Variable containing the Scene object */
-
-&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;   Object type variable containing, for example,
-&nbsp;&nbsp;&nbsp;   light and mesh information
-&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;var components = {};
-
-&nbsp;&nbsp;&nbsp;window.onload = startWegGL;
-
-&nbsp;&nbsp;&nbsp;function startWegGL()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setupWebGLRenderer();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setupCamera();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setupScene();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animate();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;manipulate();
-&nbsp;&nbsp;&nbsp;}
+   var canvasWidth = 250; /* Canvas width */
+   var canvasHeight = 250; /* Canvas height */
+
+   var renderer = null; /* Variable containing the WebGLRenderer object */
+   var camera = null; /* Variable containing the PerspectiveCamera object */
+   var scene = null; /* Variable containing the Scene object */
+
+   /*
+      Object type variable containing, for example,
+      light and mesh information
+   */
+   var components = {};
+
+   window.onload = startWegGL;
+
+   function startWegGL()
+   {
+      setupWebGLRenderer();
+      setupCamera();
+      setupScene();
+
+      animate();
+      manipulate();
+   }
 </pre>
 </li>
 
 <li><p>Create a new <code>WebGLRenderer</code> instance and, after setting the canvas size, add the <code>domElement</code> to the designated HTML location:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function setupWebGLRenderer()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;renderer = new THREE.WebGLRenderer();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;renderer.setSize(canvasWidth, canvasHeight);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add the canvas element to HTML */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;webGLContainer&#39;).appendChild(renderer.domElement);
-&nbsp;&nbsp;&nbsp;}
+   function setupWebGLRenderer()
+   {
+      renderer = new THREE.WebGLRenderer();
+      renderer.setSize(canvasWidth, canvasHeight);
+
+      /* Add the canvas element to HTML */
+      document.getElementById('webGLContainer').appendChild(renderer.domElement);
+   }
 </pre>
 </li>
 
 <li><p>Create a new <code>PerspectiveCamera</code> instance:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function setupCamera()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;camera.position.z = 500;
-&nbsp;&nbsp;&nbsp;}
+   function setupCamera()
+   {
+      camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);
+      camera.position.z = 500;
+   }
 </pre>
 
 <div class="note">
@@ -1419,184 +1419,184 @@ gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
 
 <li><p>Create a new <code>Scene</code> instance and create the mesh and light elements using the <code>createMeshs()</code> and <code>setupLight()</code> methods:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function setupScene()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scene = new THREE.Scene();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;createMeshs();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setupLight();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Circulate components and add the mesh
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   and light elements to the scene object
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (n in components)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scene.add(components[n]);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function createMeshs()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the cube mesh */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.cubeMesh = (function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var cube =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new THREE.MeshLambertMaterial({color: new THREE.Color(0xff8080)}));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cube.overdraw = true;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cube.rotation.x = Math.PI * 0.1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cube.position.x = -50;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return cube;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the sphere mesh */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.sphereMesh = (function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sphere =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new THREE.Mesh(new THREE.SphereGeometry(50, 40, 40),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new THREE.MeshLambertMaterial({color: new THREE.Color(0xff8080)}));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sphere.overdraw = true;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sphere.position.x = 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sphere.position.z = 50;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return sphere;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create the plane mesh */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.planeMesh = (function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var plane =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 10,0),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new THREE.MeshLambertMaterial({color:&#39;red&#39;}));
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plane.overdraw = true;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plane.position.y = -100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plane.rotation.x = Math.PI * -0.4;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return plane;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})();
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;function setupLight()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create a new DirectionalLight instance */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var directionalLight = new THREE.DirectionalLight(0xffffff);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the DirectionalLight location */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;directionalLight.position.set(0, 0, 1).normalize();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set directionalLight as a component element */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.directionalLight = directionalLight;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create a new AmbientLight instance and set it as a component element */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.ambientLight = new THREE.AmbientLight(0x915656);
-&nbsp;&nbsp;&nbsp;}
+   function setupScene()
+   {
+      scene = new THREE.Scene();
+      createMeshs();
+      setupLight();
+
+      /*
+         Circulate components and add the mesh
+         and light elements to the scene object
+      */
+      for (n in components)
+      {
+         scene.add(components[n]);
+      }
+   }
+
+   function createMeshs()
+   {
+      /* Create the cube mesh */
+      components.cubeMesh = (function()
+      {
+         var cube =
+            new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100),
+                           new THREE.MeshLambertMaterial({color: new THREE.Color(0xff8080)}));
+         cube.overdraw = true;
+         cube.rotation.x = Math.PI * 0.1;
+         cube.position.x = -50;
+
+         return cube;
+      })();
+
+      /* Create the sphere mesh */
+      components.sphereMesh = (function()
+      {
+         var sphere =
+            new THREE.Mesh(new THREE.SphereGeometry(50, 40, 40),
+                           new THREE.MeshLambertMaterial({color: new THREE.Color(0xff8080)}));
+         sphere.overdraw = true;
+         sphere.position.x = 50;
+         sphere.position.z = 50;
+
+         return sphere;
+      })();
+
+      /* Create the plane mesh */
+      components.planeMesh = (function()
+      {
+         var plane =
+            new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 10,0),
+                           new THREE.MeshLambertMaterial({color:'red'}));
+         plane.overdraw = true;
+         plane.position.y = -100;
+         plane.rotation.x = Math.PI * -0.4;
+
+         return plane;
+      })();
+   }
+
+   function setupLight()
+   {
+      /* Create a new DirectionalLight instance */
+      var directionalLight = new THREE.DirectionalLight(0xffffff);
+      /* Set the DirectionalLight location */
+      directionalLight.position.set(0, 0, 1).normalize();
+      /* Set directionalLight as a component element */
+      components.directionalLight = directionalLight;
+
+      /* Create a new AmbientLight instance and set it as a component element */
+      components.ambientLight = new THREE.AmbientLight(0x915656);
+   }
 </pre>
 </li>
 
 <li><p>Add an animation:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function animate()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var speed= 0.2;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lastTime = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var angle = 0.0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function moveWebGLObject()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Update */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var time = (new Date()).getTime();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var timeDiff = time - lastTime;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var angleChange = speed * timeDiff * 2 * Math.PI / 1000;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.cubeMesh.rotation.x =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.cubeMesh.rotation.z =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.cubeMesh.rotation.y += angleChange;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = Math.sin(angle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (range &lt; 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range *=-1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.sphereMesh.position.y = range * 200 - 50;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastTime = time;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Render */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;renderer.render(scene, camera);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Request a new frame */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestAnimationFrame(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;moveWebGLObject();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angle += 0.03;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})();
-&nbsp;&nbsp;&nbsp;}
+   function animate()
+   {
+      var speed= 0.2;
+      var lastTime = 0;
+      var angle = 0.0;
+
+      (function moveWebGLObject()
+      {
+         /* Update */
+         var time = (new Date()).getTime();
+         var timeDiff = time - lastTime;
+         var angleChange = speed * timeDiff * 2 * Math.PI / 1000;
+         components.cubeMesh.rotation.x =
+            components.cubeMesh.rotation.z =
+            components.cubeMesh.rotation.y += angleChange;
+
+         var range = Math.sin(angle);
+         if (range &lt; 0)
+         {
+            range *=-1;
+         }
+         components.sphereMesh.position.y = range * 200 - 50;
+
+         lastTime = time;
+
+         /* Render */
+         renderer.render(scene, camera);
+
+         /* Request a new frame */
+         requestAnimationFrame(function()
+         {
+            moveWebGLObject();
+         });
+
+         angle += 0.03;
+      })();
+   }
 </pre>
 </li>
 
 <li><p>Adjust the camera and light location using events in the <code>manipulate()</code> method:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function manipulate()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Search for the HTML &lt;input type=&#39;range&#39;&gt; element
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   as the ID value and store it in the variable
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sliderLx = document.getElementById(&#39;slider-lx&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sliderLy = document.getElementById(&#39;slider-ly&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sliderLz = document.getElementById(&#39;slider-lz&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sliderCz = document.getElementById(&#39;slider-cz&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sliderCax = document.getElementById(&#39;slider-cax&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var sliderCay = document.getElementById(&#39;slider-cay&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add an event listener to each &lt;input type=&#39;range&#39;&gt; element */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderLx.addEventListener(&#39;change&#39;, function(){changeLightDirection(this,&quot;x&quot;)});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderLy.addEventListener(&#39;change&#39;, function(){changeLightDirection(this,&quot;y&quot;)});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderLz.addEventListener(&#39;change&#39;, function(){changeLightDirection(this,&quot;z&quot;)});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderCz.addEventListener(&#39;change&#39;, function(){changeCameraDirection(this,&quot;z&quot;)});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderCax.addEventListener(&#39;change&#39;, function(){changeCameraAngle(this,&quot;x&quot;)});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderCay.addEventListener(&#39;change&#39;, function(){changeCameraAngle(this,&quot;y&quot;)});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   When a change occurs, a related event is fired,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   and the axis parameter is handled
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function changeLightDirection(target, axis)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.directionalLight.position[axis] = target.value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.directionalLight.position.set(components.directionalLight.position.x,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.directionalLight.position.y,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components.directionalLight.position.z).normalize();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function changeCameraDirection(target, axis)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;camera.position[axis] = target.value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function changeCameraAngle(target, axis)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;camera.rotation[axis] = target.value;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   function manipulate()
+   {
+      /*
+         Search for the HTML &lt;input type='range'&gt; element
+         as the ID value and store it in the variable
+      */
+      var sliderLx = document.getElementById('slider-lx');
+      var sliderLy = document.getElementById('slider-ly');
+      var sliderLz = document.getElementById('slider-lz');
+
+      var sliderCz = document.getElementById('slider-cz');
+
+      var sliderCax = document.getElementById('slider-cax');
+      var sliderCay = document.getElementById('slider-cay');
+
+      /* Add an event listener to each &lt;input type='range'&gt; element */
+      sliderLx.addEventListener('change', function(){changeLightDirection(this,"x")});
+      sliderLy.addEventListener('change', function(){changeLightDirection(this,"y")});
+      sliderLz.addEventListener('change', function(){changeLightDirection(this,"z")});
+
+      sliderCz.addEventListener('change', function(){changeCameraDirection(this,"z")});
+
+      sliderCax.addEventListener('change', function(){changeCameraAngle(this,"x")});
+      sliderCay.addEventListener('change', function(){changeCameraAngle(this,"y")});
+
+      /*
+         When a change occurs, a related event is fired,
+         and the axis parameter is handled
+      */
+
+      function changeLightDirection(target, axis)
+      {
+         components.directionalLight.position[axis] = target.value;
+         components.directionalLight.position.set(components.directionalLight.position.x,
+                                                  components.directionalLight.position.y,
+                                                  components.directionalLight.position.z).normalize();
+      }
+
+      function changeCameraDirection(target, axis)
+      {
+         camera.position[axis] = target.value;
+      }
+
+      function changeCameraAngle(target, axis)
+      {
+         camera.rotation[axis] = target.value;
+      }
+   }
 &lt;/script&gt;
 </pre>
 </li></ol>
 <p>The following figure shows the final result as it is displayed on the screen.</p>
-<p align="center"><strong>Figure: Final result</strong></p> 
+<p align="center"><strong>Figure: Final result</strong></p>
 <p align="center"><img alt="Final result" src="../../../images/threejs.png" /></p>
 
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following files:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_using_three_js.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/js/lib" target="_blank">three.js</a></li>            
- </ul> 
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/js/lib" target="_blank">three.js</a></li>
+ </ul>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/ui/animation_w.htm b/org.tizen.guides/html/web/w3c/ui/animation_w.htm
index 6acda33..443a5f1 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/animation_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/animation_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -14,12 +14,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,14 +33,14 @@
                        <li><a href="#create">Creating a Logo Animation</a>
                        </li>
                </ul>
-               
+
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#animations">CSS Animations Module Level 3 API for Mobile Web</a></li>
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#animations">CSS Animations Module Level 3 API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>CSS Animations Module (Level 3)</h1>
@@ -48,7 +48,7 @@
 <p>Animations (like <a href="transition_w.htm">transitions</a>) change the presentational value of the CSS properties over time. The principal difference between animations and transitions is that while transitions are triggered implicitly when property values change, animations are explicitly executed when the animation properties are applied. This means that for animations, you must <a href="#create">use animation keyframes to define explicit values for the properties</a> being animated.</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
- 
+
 <p>The main features of the CSS Animations Module Level 3 API include:</p>
 
 <ul>
@@ -65,21 +65,21 @@
 <p>If the animation only has one set of changes over its whole iteration, the rule values can be assigned with a <code>from {} to {}</code> rule, where <code>from</code> is the beginning of the animation at 0% and <code>to</code> is the end at 100%. If there are multiple changes required, you can define their exact time periods using multiple <code>&lt;number&gt;% {}</code> rules that together cover the entire animation iteration from 0% to 100%.</p>
 <p>The following code snippet demonstrates how to use keyframes:</p>
 <pre class="prettyprint">
-&lt;style type=&quot;text/css&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {left: 0; top: 0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {left: 100px; top: 100px;}
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;@-webkit-keyframes boxani_case01
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0% {left: 0; top: 0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25% {left: 100px; top: 0;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50% {left: 100px; top: 100px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75% {left: 0; top: 100px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100% {left: 0; top: 0;}
-&nbsp;&nbsp;&nbsp;}
+&lt;style type="text/css"&gt;
+
+   @-webkit-keyframes boxani
+   {
+      from {left: 0; top: 0;}
+      to {left: 100px; top: 100px;}
+   }
+   @-webkit-keyframes boxani_case01
+   {
+      0% {left: 0; top: 0;}
+      25% {left: 100px; top: 0;}
+      50% {left: 100px; top: 100px;}
+      75% {left: 0; top: 100px;}
+      100% {left: 0; top: 0;}
+   }
 
 &lt;/style&gt;
 </pre>
@@ -123,40 +123,40 @@
 
 <pre class="prettyprint lang-html">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-name: boxani;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 5s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-direction: normal;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-delay: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: none;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01: hover
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-play-state: paused;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-fill-mode: forwards;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style type="text/css"&gt;
+      .box
+      {
+         -webkit-animation-name: boxani;
+         -webkit-animation-duration: 5s;
+         -webkit-animation-iteration-count: infinite;
+         -webkit-animation-timing-function: linear;
+         -webkit-animation-direction: normal;
+         -webkit-animation-delay: 1s;
+         -webkit-animation-fill-mode: none;
+      }
+
+      .box.case01: hover
+      {
+         -webkit-animation-play-state: paused;
+         -webkit-animation-fill-mode: forwards;
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;animation-name&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animate&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;animation-name: boxani_case01;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;h1&gt;animation-name&lt;/h1&gt;
+   &lt;div class="boxarea"&gt;
+      &lt;div class="box"&gt;
+         &lt;p&gt;animate&lt;/p&gt;
+         &lt;p&gt;animation-name: boxani;&lt;/p&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div class="boxarea"&gt;
+      &lt;div class="box case01"&gt;
+         &lt;p&gt;animate&lt;/p&gt;
+         &lt;p&gt;animation-name: boxani_case01;&lt;/p&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -164,16 +164,16 @@
        <strong>Note</strong>
        The <code>hover</code> pseudo class in Tizen maintains a <code>mouseover</code> state when an element is tapped, and becomes a <code>mouseout</code> state when another element is tapped.
 </div>
-       
+
 <p>The <code>animation</code> property allows you to define all the animation properties in a shorthand mode in the order of <code>animation-name</code> | <code>animation-duration</code> | <code>animation-timing-function</code> | <code>animation-delay</code> | <code>animation-iteration-count</code> | <code>animation-direction</code> | <code>animation-fill-mode</code>. If you omit a property value, a default value is used instead.</p>
 
 <pre class="prettyprint">
-&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;.box
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 150px; height: 100px; background: Coral; position: relative;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: boxani 3s ease 1s infinite alternate backwards;
-&nbsp;&nbsp;&nbsp;}
+&lt;style type="text/css"&gt;
+   .box
+   {
+      width: 150px; height: 100px; background: Coral; position: relative;
+      -webkit-animation: boxani 3s ease 1s infinite alternate backwards;
+   }
 &lt;/style&gt;
 </pre>
 
@@ -190,40 +190,40 @@
 </ul>
 
 <h2 id="create" name="create">Creating a Logo Animation</h2>
-                               
+
 <p>To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or the emulator) is switched on:</p>
 
-<ol>  
+<ol>
 <li>No elements are initially shown on the screen.  </li>
 <li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller.</li>
-<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location.</li>
+<li>Each letter in the word "TIZEN" consecutively comes in from the left of the screen and moves to the right to its correct location.</li>
 </ol>
-<p align="center"><strong>Figure: Logo animation (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Logo animation" src="../../../images/animation1.png" /></p> 
+<p align="center"><strong>Figure: Logo animation (in mobile applications only)</strong></p>
+<p align="center"><img alt="Logo animation" src="../../../images/animation1.png" /></p>
 <p>To create a logo animation:</p>
 <ol>
 <li>Create the HTML layout for the animation. To be able to manage the movement of each animation part separately, you must define individual elements for each part.
 <pre class="prettyprint">
-&lt;div class=&quot;animation-holder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;
+&lt;div class="animation-holder"&gt;
+   &lt;span class="tizen-txt t"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt i"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt z"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt e"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt n"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt tm"&gt;&lt;/span&gt;
+   &lt;span class="tizen-logo"&gt;&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 </li>
 <li>Define the basic style for the animation:
 <pre class="prettyprint">
 .example-body {width: 320px; height: 480px; background: #000; margin: 0 auto;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative; border: 2px solid #fff; overflow: hidden;}
+               position: relative; border: 2px solid #fff; overflow: hidden;}
 .animation-holder {width: 280px; height: 88px; position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 50%; top: 50%; margin: -54px 0 0 -140px;}
+                   left: 50%; top: 50%; margin: -54px 0 0 -140px;}
 
 .tizen-txt, .tizen-logo {position: absolute; display: block;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-repeat: no-repeat; background-position: 50% 50%}
+                         background-repeat: no-repeat; background-position: 50% 50%}
 .tizen-txt.t {width: 48px; height: 56px; background-image: url(images/txt_t.png);}
 .tizen-txt.i {width: 15px; height: 56px; background-image: url(images/txt_i.png);}
 .tizen-txt.z {width: 46px; height: 56px; background-image: url(images/txt_z.png);}
@@ -231,7 +231,7 @@
 .tizen-txt.n {width: 54px; height: 58px; background-image: url(images/txt_n.png);}
 .tizen-txt.tm {width: 11px; height: 6px; background-image: url(images/txt_tm.png);}
 .tizen-logo {width: 220px; height: 211px; left: 30px; top: -61px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(images/logo_tizen.png); background-size: 100% 100%;}
+             background-image: url(images/logo_tizen.png); background-size: 100% 100%;}
 </pre>
 </li>
 <li>Create the animation:
@@ -241,9 +241,9 @@
 <pre class="prettyprint">
 .tizen-txt, .tizen-logo
 {
-&nbsp;&nbsp;&nbsp;-webkit-animation-duration: 7s;
-&nbsp;&nbsp;&nbsp;-webkit-animation-iteration-count: infinite;
-&nbsp;&nbsp;&nbsp;-webkit-animation-direction: alternate;
+   -webkit-animation-duration: 7s;
+   -webkit-animation-iteration-count: infinite;
+   -webkit-animation-direction: alternate;
 }
 </pre>
 </li>
@@ -251,15 +251,15 @@
 <ul>
 <li>During the first 25% of the animation total playing time (7 seconds), the transparency disappears and the Tizen logo appears.</li>
 <li>During the 25 - 50% of the playing time, the logo size becomes smaller as the width and height values are reduced, and due to the left and top value, the logo is positioned to the top right corner of the screen.</li>
-<li>During the 50 - 100% of the playing time, the values do not change, and the logo remains in its new position.</li> 
-</ul> 
+<li>During the 50 - 100% of the playing time, the values do not change, and the logo remains in its new position.</li>
+</ul>
 <pre class="prettyprint">
 @-webkit-keyframes tizen-logo
 {
-&nbsp;&nbsp;&nbsp;0% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 0;}
-&nbsp;&nbsp;&nbsp;25% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 1;}
-&nbsp;&nbsp;&nbsp;50% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
-&nbsp;&nbsp;&nbsp;100% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
+   0% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 0;}
+   25% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 1;}
+   50% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
+   100% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
 }
 </pre>
 
@@ -268,7 +268,7 @@
        If the 100% keyframe is not defined, the animation is executed based on the original properties, and the logo size increases to its original size at the end.
 </div>
        </li>
-<li>Create the keyframes to implement the flow for each letter in the word &quot;TIZEN&quot;:
+<li>Create the keyframes to implement the flow for each letter in the word "TIZEN":
 <ul>
 <li>To hide the letter initially, the property has been assigned outside the screen at the 0% keyframe. To allow the Tizen logo to appear first, the first letter is introduced at the 30% keyframe.</li>
 <li>To create a slight collision animation, the letter element moves to -10 px of the final value at the 40% keyframe before reaching its final 0 px value at the 45% keyframe.</li>
@@ -280,21 +280,21 @@
 &lt;!--Letter T--&gt;
 @-webkit-keyframes tizen-txt-t
 {
-&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}
-&nbsp;&nbsp;&nbsp;30% {left: 340px; top: 31px; animation-timing-function: ease-in;}
-&nbsp;&nbsp;&nbsp;40% {left: -10px; top: 31px; animation-timing-function: ease-out;}
-&nbsp;&nbsp;&nbsp;45% {left: 0; top: 31px;}
-&nbsp;&nbsp;&nbsp;100% {left: 0; top: 31px;}
+   0% {left: 340px; top: 31px;}
+   30% {left: 340px; top: 31px; animation-timing-function: ease-in;}
+   40% {left: -10px; top: 31px; animation-timing-function: ease-out;}
+   45% {left: 0; top: 31px;}
+   100% {left: 0; top: 31px;}
 }
 
 &lt;!--Letter I--&gt;
 @-webkit-keyframes tizen-txt-i
 {
-&nbsp;&nbsp;&nbsp;0% {left: 340px; top: 31px;}
-&nbsp;&nbsp;&nbsp;40% {left: 340px; top: 31px; animation-timing-function: ease-in;}
-&nbsp;&nbsp;&nbsp;50% {left: 47px; top: 31px; animation-timing-function: ease-out;}
-&nbsp;&nbsp;&nbsp;55% {left: 57px; top: 31px;}
-&nbsp;&nbsp;&nbsp;100% {left: 57px; top: 31px;}
+   0% {left: 340px; top: 31px;}
+   40% {left: 340px; top: 31px; animation-timing-function: ease-in;}
+   50% {left: 47px; top: 31px; animation-timing-function: ease-out;}
+   55% {left: 57px; top: 31px;}
+   100% {left: 57px; top: 31px;}
 }
 
 &lt;!--Remaining letters--&gt;
@@ -304,11 +304,11 @@
 <pre class="prettyprint">
 .tizen-txt.t
 {
-&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-t;
+   -webkit-animation-name: tizen-txt-t;
 }
 .tizen-txt.i
 {
-&nbsp;&nbsp;&nbsp;-webkit-animation-name: tizen-txt-i;
+   -webkit-animation-name: tizen-txt-i;
 }
 </pre></li>
 
diff --git a/org.tizen.guides/html/web/w3c/ui/background_w.htm b/org.tizen.guides/html/web/w3c/ui/background_w.htm
index ab4612f..c99e8f3 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/background_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/background_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -14,12 +14,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -37,7 +37,7 @@
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#border">CSS Backgrounds and Borders Module Level 3 API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>CSS Backgrounds and Borders Module (Level 3)</h1>
@@ -54,9 +54,9 @@
        <li>Creating backgrounds
        <p>To enhance the application further, you can <a href="#create">create a multilayer background with the parallax effect</a>.</p></li>
 </ul>
- 
-<h2 id="define" name="define">Defining Background Properties</h2> 
- 
+
+<h2 id="define" name="define">Defining Background Properties</h2>
+
 <p>When creating a background for an element, you can use the following properties:</p>
 <ul>
 <li><code>background-color</code>
@@ -81,7 +81,7 @@
 
 <p>The following image shows a simple background color (top left), a background image (top right), multiple images with a solid black border (bottom left), and an element with shading and a solid black border with rounded corners (bottom right). The background image at top right is automatically repeated to cover the entire background, while the images at bottom left are not repeated due to the <code>background-repeat</code> property value.</p>
 
-  <p align="center"><strong>Figure: Background examples</strong></p> 
+  <p align="center"><strong>Figure: Background examples</strong></p>
   <p align="center"><img alt="Background examples" src="../../../images/css_bg1.png" /></p>
 <p>The following code snippet demonstrates how to set the background color, images, borders, and shadings.</p>
 
@@ -89,41 +89,41 @@
 &lt;!--Background color--&gt;
 #one
 {
-&nbsp;&nbsp;&nbsp;width: 180px;
-&nbsp;&nbsp;&nbsp;height: 40px;
-&nbsp;&nbsp;&nbsp;background-color: lightblue;
+   width: 180px;
+   height: 40px;
+   background-color: lightblue;
 }
 
 &lt;!--Background image--&gt;
 #one
 {
-&nbsp;&nbsp;&nbsp;width: 200px;
-&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;background-color: #00F;
-&nbsp;&nbsp;&nbsp;background-image: url(t3.png);
+   width: 200px;
+   height: 100px;
+   background-color: #00F;
+   background-image: url(t3.png);
 }
 
 &lt;!--Multiple images--&gt;
 #multi
 {
-&nbsp;&nbsp;&nbsp;width: 155px;
-&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;border: 1px solid #000;
-&nbsp;&nbsp;&nbsp;background-color: #87CEFA;
-&nbsp;&nbsp;&nbsp;background-image: url(t1.png), url(t2.png), url(t3.png);
-&nbsp;&nbsp;&nbsp;background-position: center center, 20% 100%, top left;
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
+   width: 155px;
+   height: 100px;
+   border: 1px solid #000;
+   background-color: #87CEFA;
+   background-image: url(t1.png), url(t2.png), url(t3.png);
+   background-position: center center, 20% 100%, top left;
+   background-repeat: no-repeat;
 }
 
 &lt;!--Shading and border with rounded corners--&gt;
 #shading
 {
-&nbsp;&nbsp;&nbsp;width: 160px;
-&nbsp;&nbsp;&nbsp;height: 40px;
-&nbsp;&nbsp;&nbsp;border: 1px solid #000;
-&nbsp;&nbsp;&nbsp;border-radius: 20px;
-&nbsp;&nbsp;&nbsp;background-color: #88f;
-&nbsp;&nbsp;&nbsp;box-shadow: #888 10px 10px;
+   width: 160px;
+   height: 40px;
+   border: 1px solid #000;
+   border-radius: 20px;
+   background-color: #88f;
+   box-shadow: #888 10px 10px;
 }
 </pre>
 
@@ -131,17 +131,17 @@
 
 <p>To enhance the user experience of your application, you must learn to create a multilayer background with the parallax effect using the <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">CSS box model</a>. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.</p>
 
-<p align="center"><strong>Figure: Background with the parallax effect</strong></p> 
-<p align="center"><img alt="Background with the parallax effect" src="../../../images/css_bg_tutorial1.png" /></p> 
+<p align="center"><strong>Figure: Background with the parallax effect</strong></p>
+<p align="center"><img alt="Background with the parallax effect" src="../../../images/css_bg_tutorial1.png" /></p>
 
 <ol><li>Prepare 3 images (<code>tizen.png</code>, <code>tizen2.png</code>, and <code>dot.png</code>), each with a transparent background.
 
 <p align="center"><img alt="tizen.png, tizen2.png, and dot.png images" src="../../../images/css_bg_tutorial2.png" /></p> </li>
 
-<li>Create a <code>div</code> element with <code>id=&quot;parallelexample&quot;</code> and a slider input element with the minimum, maximum, and initial value:
+<li>Create a <code>div</code> element with <code>id="parallelexample"</code> and a slider input element with the minimum, maximum, and initial value:
 <pre class="prettyprint">
-&lt;div id=&quot;parallelexample&quot;&gt;&lt;/div&gt;
-&lt;input id=&quot;position&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;200&quot; value=&quot;50&quot;&gt;
+&lt;div id="parallelexample"&gt;&lt;/div&gt;
+&lt;input id="position" type="range" min="1" max="200" value="50"&gt;
 </pre></li>
 
 <li>Define the needed styles for the  <code>div</code> element in the <code>&lt;head&gt;</code> section using the <code>parallelexample</code> ID.
@@ -149,30 +149,30 @@
 <pre class="prettyprint">
 #parallelexample
 {
-&nbsp;&nbsp;&nbsp;width: 300px;
-&nbsp;&nbsp;&nbsp;height: 300px;
-&nbsp;&nbsp;&nbsp;background-image: url(tizen2_32.png), url(tizen3_32.png), url(dot.png);
-&nbsp;&nbsp;&nbsp;background-position: 6.25em 8em, 3.125em 4em, center top;
-&nbsp;&nbsp;&nbsp;background-repeat: repeat, repeat, repeat;
-&nbsp;&nbsp;&nbsp;border: 1px solid black;
-&nbsp;&nbsp;&nbsp;margin: 0px auto;
+   width: 300px;
+   height: 300px;
+   background-image: url(tizen2_32.png), url(tizen3_32.png), url(dot.png);
+   background-position: 6.25em 8em, 3.125em 4em, center top;
+   background-repeat: repeat, repeat, repeat;
+   border: 1px solid black;
+   margin: 0px auto;
 }
 </pre></li>
 <li>To create the parallax effect, create a method that moves the background layers by changing the horizontal position values of the images in the <code>div</code> element. To determine the position value change, add an <code>onchange</code> event handler for the slider to determine the change based on the slider handle movement.
 <pre class="prettyprint">
 function moveLayers()
 {
-&nbsp;&nbsp;&nbsp;/* Get slider value */
-&nbsp;&nbsp;&nbsp;var poz = document.getElementById(&#39;position&#39;);
-&nbsp;&nbsp;&nbsp;/* Get the div element */
-&nbsp;&nbsp;&nbsp;var example = document.getElementById(&#39;ParallaxExamle&#39;);
-&nbsp;&nbsp;&nbsp;/* Add the event handler */
-&nbsp;&nbsp;&nbsp;poz.onchange = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var layer1 = this.value/8, layer2 = this.value/16;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;example.style.backgroundPosition =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layer1 +&#39;em 8em, &#39; + layer2 + &#39;em 4em, center top&#39;;
-&nbsp;&nbsp;&nbsp;}
+   /* Get slider value */
+   var poz = document.getElementById('position');
+   /* Get the div element */
+   var example = document.getElementById('ParallaxExamle');
+   /* Add the event handler */
+   poz.onchange = function()
+   {
+      var layer1 = this.value/8, layer2 = this.value/16;
+      example.style.backgroundPosition =
+         layer1 +'em 8em, ' + layer2 + 'em 4em, center top';
+   }
 }
 </pre></li></ol>
 <h3>Source Code</h3>
@@ -183,8 +183,8 @@ function moveLayers()
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen2_32_s.png</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen3_32.png</a></li>
  </ul>
-               
- 
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/ui/basic_ui_w.htm b/org.tizen.guides/html/web/w3c/ui/basic_ui_w.htm
index 64e59a2..8c830e8 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/basic_ui_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/basic_ui_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -14,12 +14,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -38,7 +38,7 @@
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">CSS Basic User Interface Module Level 3 (CSS3 UI) API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>CSS Basic User Interface Module (Level 3)</h1>
@@ -72,7 +72,7 @@
 </ul>
 
 <h2 id="selector" name="selector">Using Pseudo-element Selectors</h2>
-                               
+
 <p>To enhance the user experience of your application, you must learn how to use pseudo-element selectors:</p>
 <ol>
 <li><p>Use the pseudo-classes, such as <code>:enabled</code> and <code>:disabled</code>, to add different styles based on the state of the DOM elements:</p>
@@ -86,30 +86,30 @@ input: disabled {border: 1px solid red}
        In the versions prior to CSS3, pseudo-elements, such as <code>:hover</code>, <code>:active</code>, and <code>:focus</code>, were used, and required an attribute selector. Since the <code>:enabled</code> and <code>:disabled</code> classes are not influenced by the <code>display</code> and <code>visibility</code> attributes, they improve the accessibility.
 </div>
    </li>
-<li>To control the state of the HTML5 Web Forms (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">wearable</a> applications), use the <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes. 
+<li>To control the state of the HTML5 Web Forms (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">wearable</a> applications), use the <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes.
 <p>They check for any values that have exceeded the inserted range. (The following figure applies to mobile applications only.)</p>
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;input type=&quot;number&quot; step=&quot;10&quot; min=&quot;10&quot; max=&quot;100&quot;/&gt;
+&lt;input type="number" step="10" min="10" max="100"/&gt;
 </pre>
 <pre class="prettyprint">
 &lt;!--CSS--&gt;
-input[type=&quot;number&quot;]: in-range {border: 3px solid blue; width: 90%}
-input[type=&quot;number&quot;]: out-of-range {border: 3px solid red; width: 90%}
+input[type="number"]: in-range {border: 3px solid blue; width: 90%}
+input[type="number"]: out-of-range {border: 3px solid red; width: 90%}
 </pre>
 <p align="center"><img alt="Element ranges (in mobile applications only)" src="../../../images/pseudo_elements_selector_range.png"/></p></li>
 <li>To apply different styles to required input items and option items, use the <code>:required</code> and <code>:optional</code> pseudo-classes. (The following figure applies to mobile applications only.)
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
 &lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&lt;legend&gt;required and optional&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;email: &lt;input type=&quot;email&quot; required &gt;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;password:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;Password&quot; placeholder=&quot;required area&quot; required &gt;
-&nbsp;&nbsp;&nbsp;&lt;/label&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;label&gt;date: &lt;input type=&quot;date&quot; placeholder=&quot;You know what to do, huh?&quot;&gt;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;textarea placeholder=&quot;Comment&quot;&gt;&lt;/textarea&gt;
+   &lt;legend&gt;required and optional&lt;/legend&gt;
+   &lt;label&gt;email: &lt;input type="email" required &gt;&lt;/label&gt;
+   &lt;label&gt;password:
+      &lt;input type="Password" placeholder="required area" required &gt;
+   &lt;/label&gt;
+
+   &lt;label&gt;date: &lt;input type="date" placeholder="You know what to do, huh?"&gt;&lt;/label&gt;
+   &lt;textarea placeholder="Comment"&gt;&lt;/textarea&gt;
 &lt;/fieldset&gt;
 </pre>
 <pre class="prettyprint">
@@ -125,10 +125,10 @@ input: optional, textarea: optional {border: 1px solid #777}
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">range.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">required_and_optional.html</a></li>
  </ul>
-                       
+
 <h2 id="boxmodel" name="boxmodel">Using Box Model Properties</h2>
-                               
-<p>To enhance the user experience of your application, you must learn how to use box model properties:</p> 
+
+<p>To enhance the user experience of your application, you must learn how to use box model properties:</p>
 
 <div class="note">
        <strong>Note</strong>
@@ -151,19 +151,19 @@ div.border-box: before {height: 40px}
 .outline-offset: before {outline-offset: 35px}
 </pre></li>
 
-<li>To handle text that exceeds the area of the box model, use the <code>text-overflow</code> property. The <code>text-overflow: ellipsis</code> property is used to indicate the text exceeded the padding area as &#39;...&#39;.
+<li>To handle text that exceeds the area of the box model, use the <code>text-overflow</code> property. The <code>text-overflow: ellipsis</code> property is used to indicate the text exceeded the padding area as '...'.
 <pre class="prettyprint">
 div
 {
-&nbsp;&nbsp;&nbsp;width: 250px;
-&nbsp;&nbsp;&nbsp;margin: 20px auto;
-&nbsp;&nbsp;&nbsp;padding: 20px 30px;
-&nbsp;&nbsp;&nbsp;background-color: #eee;
-&nbsp;&nbsp;&nbsp;color: #333;
-&nbsp;&nbsp;&nbsp;border: 5px solid #333;
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
-&nbsp;&nbsp;&nbsp;white-space: nowrap;
+   width: 250px;
+   margin: 20px auto;
+   padding: 20px 30px;
+   background-color: #eee;
+   color: #333;
+   border: 5px solid #333;
+   font-weight: bold;
+   overflow: hidden;
+   white-space: nowrap;
 }
 
 .clip {text-overflow: clip}
@@ -182,7 +182,7 @@ div
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">outline_property.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">text_overflow_property.html</a></li>
  </ul>
-               
+
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/ui/clipboard_mw.htm b/org.tizen.guides/html/web/w3c/ui/clipboard_mw.htm
index ca77116..cdb36c8 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/clipboard_mw.htm
+++ b/org.tizen.guides/html/web/w3c/ui/clipboard_mw.htm
@@ -40,8 +40,8 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Clipboard API and events</h1>
-  
-  
+
+
 <p>The clipboard and events feature is used for cutting, copying, and pasting content to easily transfer it between Web applications.</p>
 
 <p>This feature is supported in mobile applications only.</p>
@@ -56,30 +56,30 @@
 <p>You can fire the <code>paste</code> event to <a href="#paste">retrieve data from the clipboard and insert it into a document</a>. The data is retrieved in the format most appropriate to the assigned context.</p>
 </li>
   </ul>
-  
+
 <p>The most common way of providing clipboard features in an application is to create an editable element, and allow the user to <a href="#target">copy content and then paste it into the editable element</a>.</p>
-  
+
   <h2 id="copy" name="copy">Copying Content</h2>
 
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>copy</code> event:</p> 
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>copy</code> event:</p>
 <ol>
 <li> Add an event listener to detect the <code>copy</code> event:
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+   document.addEventListener("copy", function(e)
+      {
+         copyHandler(e);
+      }, false);
 </pre>
     </li>
        <li><p>When you start copying, the <code>copy</code> event is fired and the <code>copyHandler()</code> method is called.</p>
        <p>Stop the system clipboard basic operation and set the range you want to copy:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function copyHandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+   function copyHandler(e)
+   {
+      e.preventDefault();
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();
+      var range = window.getSelection();
 </pre>
 
 <div class="note">
@@ -87,10 +87,10 @@
        If the current selection is not influenced and there is no selected range, the clipboard imports the <code>setData()</code> method. The copied content cannot be edited apart from adding a <a href="http://www.w3.org/TR/2014/WD-html51-20140617/editing.html#the-datatransferitemlist-interface" target="_blank">DataTransferItemList</a> item.
 </div>
 </li>
-<li>Store the data of the selected range: 
+<li>Store the data of the selected range:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
-&nbsp;&nbsp;&nbsp;};
+      e.clipboardData.setData("text/plain", range);
+   };
 &lt;/script&gt;
 </pre>
 </li>
@@ -99,37 +99,37 @@
        <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul>  
+ </ul>
 
  <h2 id="cut" name="cut">Cutting Content</h2>
 
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>cut</code> event:</p> 
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>cut</code> event:</p>
 <ol>
 <li> Add an event listener to detect the <code>cut</code> event:
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;cut&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cutHandler(e);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+   document.addEventListener("cut", function(e)
+      {
+         cutHandler(e);
+      }, false);
 </pre>
 
     </li>
        <li><p>When you start cutting, the <code>cut</code> event is fired and the <code>cutHandler()</code> method is called.</p>
        <p>Stop the system clipboard basic operation and set the range you want to cut:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function cutHandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+   function cutHandler(e)
+   {
+      e.preventDefault();
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();
+      var range = window.getSelection();
 </pre>
 
 </li>
-<li>Store the data of the selected range: 
+<li>Store the data of the selected range:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
-&nbsp;&nbsp;&nbsp;};
+      e.clipboardData.setData("text/plain", range);
+   };
 &lt;/script&gt;
 </pre>
 
@@ -144,33 +144,33 @@
        <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul> 
+ </ul>
 
  <h2 id="paste" name="paste">Pasting Content</h2>
 
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>paste</code> event:</p> 
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>paste</code> event:</p>
 <ol>
 <li> Add an event listener to detect the <code>paste</code> event:
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+   document.addEventListener("paste", function(e)
+      {
+         pasteHandler(e);
+      }, false);
 </pre>
 </li>
        <li><p>When you start pasting, the <code>paste</code> event is fired and the <code>pasteHandler()</code> method is called.</p>
        <p>Stop the system clipboard basic operation:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function pasteHandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+   function pasteHandler(e)
+   {
+      e.preventDefault();
 </pre>
 </li>
        <li>Paste the clipboard data to the target using the <code>getData()</code> method:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
-&nbsp;&nbsp;&nbsp;};
+      pasteTarget.innerHTML = e.clipboardData.getData("text/plain");
+   };
 &lt;/script&gt;
 </pre>
 </li>
@@ -180,40 +180,40 @@
        <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul>  
+ </ul>
 
  <h2 id="target" name="target">Copying and Pasting Content into an Editable Element</h2>
 
-<p>To enhance the user experience of your application with clipboard operations, you must learn to copy content and paste it in an editable HTML element:</p> 
+<p>To enhance the user experience of your application with clipboard operations, you must learn to copy content and paste it in an editable HTML element:</p>
 
 <ol>
 <li><p>Define the editable element into which copied data is to be pasted:</p>
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.log {border: 1px solid #d9d9d9; margin: 10px; padding: 5px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.target {border: 1px solid #36c; margin: 10px; padding: 5px;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      .log {border: 1px solid #d9d9d9; margin: 10px; padding: 5px;}
+      .target {border: 1px solid #36c; margin: 10px; padding: 5px;}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Clipboard API&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div style=&quot;width: 300px; height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #d9d9d9&quot; contenteditable &gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edit Section
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div  class=&quot;target&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;Target Element&lt;/h4&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target contenteditable&quot;&gt;Paste content&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;ev-log&quot; class=&quot;log&quot;&gt;Event log&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div contenteditable&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This section is informative
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This specification defines the common clipboard operations of cutting,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copying and pasting, in such a way that they are exposed to Web Applications
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and can be adapted to provide advanced functionalities.
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Its goal is to provide for compatibility where possible
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;with existing implementations.
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;h1&gt;Clipboard API&lt;/h1&gt;
+   &lt;div style="width: 300px; height: 100px;
+               border: 1px solid #d9d9d9" contenteditable &gt;
+      Edit Section
+   &lt;/div&gt;
+   &lt;div  class="target"&gt;
+      &lt;h4&gt;Target Element&lt;/h4&gt;
+      &lt;p id="target contenteditable"&gt;Paste content&lt;/p&gt;
+   &lt;/div&gt;
+   &lt;div id="ev-log" class="log"&gt;Event log&lt;/div&gt;
+   &lt;div contenteditable&gt;
+      This section is informative
+      This specification defines the common clipboard operations of cutting,
+      copying and pasting, in such a way that they are exposed to Web Applications
+      and can be adapted to provide advanced functionalities.
+      Its goal is to provide for compatibility where possible
+      with existing implementations.
+   &lt;/div&gt;
 &lt;body&gt;
 </pre>
 </li>
@@ -221,46 +221,46 @@
 <li><p>Add event listeners to detect the <code>copy</code> and <code>paste</code> events:</p>
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var pasteTarget = document.getElementById(&quot;target&quot;);
-&nbsp;&nbsp;&nbsp;var evLogBox = document.getElementById(&quot;ev-log&quot;);
-
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;copy&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;copyHandler(e);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;paste&quot;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteHandler(e);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
+   var pasteTarget = document.getElementById("target");
+   var evLogBox = document.getElementById("ev-log");
+
+   document.addEventListener("copy", function(e)
+      {
+         copyHandler(e);
+      }, false);
+
+   document.addEventListener("paste", function(e)
+      {
+         pasteHandler(e);
+      }, false);
 </pre>
 </li>
 
 <li>When the <code>copy</code> event occurs, stop the system clipboard basic operation and set the range you want to copy:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function copyHandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+   function copyHandler(e)
+   {
+      e.preventDefault();
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var range = window.getSelection();
+      var range = window.getSelection();
 </pre>
 </li>
-<li>Store the data of the selected range: 
+<li>Store the data of the selected range:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.clipboardData.setData(&quot;text/plain&quot;, range);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log: copy&quot;;
-&nbsp;&nbsp;&nbsp;};
+      e.clipboardData.setData("text/plain", range);
+      evLogBox.innerHTML = "Event log: copy";
+   };
 </pre>
 </li>
 <li>When the <code>paste</code> event occurs, stop the system clipboard basic operation and paste the clipboard data to the target using the <code>getData()</code> method:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;function pasteHandler(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();
+   function pasteHandler(e)
+   {
+      e.preventDefault();
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pasteTarget.innerHTML = e.clipboardData.getData(&quot;text/plain&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evLogBox.innerHTML = &quot;Event log: paste&quot;;
-&nbsp;&nbsp;&nbsp;};
+      pasteTarget.innerHTML = e.clipboardData.getData("text/plain");
+      evLogBox.innerHTML = "Event log: paste";
+   };
 &lt;/script&gt;
 </pre>
 </li>
@@ -273,7 +273,7 @@
        <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
- </ul>  
+ </ul>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/ui/color_w.htm b/org.tizen.guides/html/web/w3c/ui/color_w.htm
index 78fe55b..8124f84 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/color_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/color_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -14,12 +14,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -32,12 +32,12 @@
                        <li><a href="#create">Creating a Color Generator</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc">        
+               <ul class="toc">
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#color">CSS Color Module Level 3 API for Mobile Web</a></li>
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#color">CSS Color Module Level 3 API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>CSS Color Module (Level 3)</h1>
@@ -57,27 +57,27 @@
 <li>RGB values
 <ul>
 <li>In hexadecimal notation
-<p>The format is &#39;#&#39; followed by either 3 or 6 hexadecimal characters. The 3-digit RGB notation (#rgb) is converted into a 6-digit form (#rrggbb) by replicating digits. For example, <code>#fc0</code> expands to <code>#ffcc00</code>.</p></li>
+<p>The format is '#' followed by either 3 or 6 hexadecimal characters. The 3-digit RGB notation (#rgb) is converted into a 6-digit form (#rrggbb) by replicating digits. For example, <code>#fc0</code> expands to <code>#ffcc00</code>.</p></li>
 <li>In functional notation
-<p>The format is &#39;rgb(&#39; followed by a comma-separated list of 3 numerical values (integer or percentage) followed by &#39;)&#39;. The integer value 255 corresponds to 100%, and to F or FF in a hexadecimal notation: <code>rgb(255, 255, 255)</code> = <code>rgb(100%, 100%, 100%)</code> = <code>#FFF</code>. White space characters are allowed around the numerical values.
+<p>The format is 'rgb(' followed by a comma-separated list of 3 numerical values (integer or percentage) followed by ')'. The integer value 255 corresponds to 100%, and to F or FF in a hexadecimal notation: <code>rgb(255, 255, 255)</code> = <code>rgb(100%, 100%, 100%)</code> = <code>#FFF</code>. White space characters are allowed around the numerical values.
 </p></li>
 </ul>
 </li>
 <li>RGBA values
-<p>The RGB color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The RGBA values are defined using functional notation where the final value is the alpha (range from 0.1 to 1). For example: <code>rgba(255, 0, 0, 0.7)</code>.</p>
+<p>The RGB color model is extended to include "alpha" to allow the color opacity to be specified. The RGBA values are defined using functional notation where the final value is the alpha (range from 0.1 to 1). For example: <code>rgba(255, 0, 0, 0.7)</code>.</p>
 </li>
-<li>HSL value 
-<p>You can use numerical hue-saturation-lightness (HSL) colors as an alternative to numerical RGB colors. The HSL colors are encoded as a triple (hue, saturation, lightness). The hue is represented as the angle of the color circle, where by definition red=0°=360° and other colors are spread around the circle. The saturation and lightness are represented as percentages, where 100% is full saturation or black lightness, and 0% is a shade of gray or white lightness. 50% lightness is &quot;normal&quot;. For example: <code>hsl(0, 100%, 50%)</code>. 
+<li>HSL value
+<p>You can use numerical hue-saturation-lightness (HSL) colors as an alternative to numerical RGB colors. The HSL colors are encoded as a triple (hue, saturation, lightness). The hue is represented as the angle of the color circle, where by definition red=0°=360° and other colors are spread around the circle. The saturation and lightness are represented as percentages, where 100% is full saturation or black lightness, and 0% is a shade of gray or white lightness. 50% lightness is "normal". For example: <code>hsl(0, 100%, 50%)</code>.
 </p></li>
 <li>HSLA value
-<p>The HSL color model is extended to include &quot;alpha&quot; to allow the color opacity to be specified. The HSLA values are defined using the HSL notation where a final alpha value is added (range from 0.1 to 1). For example: <code>hsla(120, 100%, 50%, 0.8)</code>.</p></li>
+<p>The HSL color model is extended to include "alpha" to allow the color opacity to be specified. The HSLA values are defined using the HSL notation where a final alpha value is added (range from 0.1 to 1). For example: <code>hsla(120, 100%, 50%, 0.8)</code>.</p></li>
 </ul>
 
 <div class="note">
        <strong>Note</strong>
-       The CSS2 System Color values have been deprecated in favor of the CSS3 UI &#39;appearance&#39; property.
+       The CSS2 System Color values have been deprecated in favor of the CSS3 UI 'appearance' property.
 </div>
-       
+
 <h2 id="specify">Specifying a Color for an Element</h2>
 
 <p>To define a color for an element, you can use various color formats in the CSS properties:</p>
@@ -86,41 +86,41 @@
 &lt;!--Keywords--&gt;
 #one
 {
-&nbsp;&nbsp;&nbsp;color: blue;
-&nbsp;&nbsp;&nbsp;background: white;
-&nbsp;&nbsp;&nbsp;border: 1px solid springgreen;
+   color: blue;
+   background: white;
+   border: 1px solid springgreen;
 }
 #one span
 {
-&nbsp;&nbsp;&nbsp;background: currentColor;
+   background: currentColor;
 }
 #one span.hide
 {
-&nbsp;&nbsp;&nbsp;color: transparent;
+   color: transparent;
 }
 
 &lt;!--RGB--&gt;
 #two
 {
-&nbsp;&nbsp;&nbsp; color: #ff0000;
+    color: #ff0000;
 }
 
 &lt;!--RGBA--&gt;
 #three
 {
-&nbsp;&nbsp;&nbsp;color: rgba(100%, 0, 0, 0.5);
+   color: rgba(100%, 0, 0, 0.5);
 }
 
 &lt;!--HSL--&gt;
 #four
 {
-&nbsp;&nbsp;&nbsp;color: hsl(0, 100%, 50%);
+   color: hsl(0, 100%, 50%);
 }
 
 &lt;!--HSLA--&gt;
 #five
 {
-&nbsp;&nbsp;&nbsp;color: hsla(0, 100%, 50%, 0.5);
+   color: hsla(0, 100%, 50%, 0.5);
 }
 </pre>
 
@@ -134,7 +134,7 @@
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">hsla_color.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgb_color.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">rgba_color.html</a></li>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">transparent.html</a></li> 
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">transparent.html</a></li>
  </ul>
  </ul>
 
@@ -142,7 +142,7 @@
 
 <p>To enhance the user experience of your application, you must learn to create a HSLA color generator to set the color value for an element in the HSLA format.</p>
 
-<p align="center"><strong>Figure: HSLA color generator</strong></p> 
+<p align="center"><strong>Figure: HSLA color generator</strong></p>
 <p align="center"><img alt="HSLA color generator" src="../../../images/css_color_tutorial1.png" /></p>
 
 
@@ -155,60 +155,60 @@
 <p>The range should be 0.1 - 1, but the minimum value of the <code>min</code> attribute is 0 so the value can be divided by 10.</p></li></ul>
 
 <pre class="prettyprint lang-html">
-&lt;div id=&quot;color-generator&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;text-box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;color-box&quot;&gt;&lt;/div&gt;
+&lt;div id="color-generator"&gt;
+   &lt;div id="text-box"&gt;&lt;/div&gt;
+   &lt;div id="color-box"&gt;&lt;/div&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Hue&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;hue&quot; value=&quot;0&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;360&quot;&gt;
+   &lt;label&gt;Hue&lt;/label&gt;
+   &lt;input id="hue" value="0" type="range" min="0" max="360"&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Saturation&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;saturation&quot; value=&quot;100&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
+   &lt;label&gt;Saturation&lt;/label&gt;
+   &lt;input id="saturation" value="100" type="range" min="0" max="100"&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Lightness&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;lightness&quot; value=&quot;50&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;
+   &lt;label&gt;Lightness&lt;/label&gt;
+   &lt;input id="lightness" value="50" type="range" min="0" max="100"&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;label&gt;Alpha&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;input id=&quot;alpha&quot; value=&quot;10&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;10&quot;&gt;
+   &lt;label&gt;Alpha&lt;/label&gt;
+   &lt;input id="alpha" value="10" type="range" min="0" max="10"&gt;
 &lt;/div&gt;
 </pre></li>
 <li>Obtain the values from the slider inputs with the <code>getElementById()</code> method. Remember to divide the alpha value by 10 to reach the correct range of 0.1 - 1.
 <pre class="prettyprint">
-var h = document.getElementById(&#39;hue&#39;).value,
-&nbsp;&nbsp;&nbsp;&nbsp;s = document.getElementById(&#39;saturation&#39;).value,
-&nbsp;&nbsp;&nbsp;&nbsp;l = document.getElementById(&#39;lightness&#39;).value,
-&nbsp;&nbsp;&nbsp;&nbsp;a = document.getElementById(&#39;alpha&#39;).value / 10;
+var h = document.getElementById('hue').value,
+    s = document.getElementById('saturation').value,
+    l = document.getElementById('lightness').value,
+    a = document.getElementById('alpha').value / 10;
 </pre></li>
 <li>Set the HSLA text and the color of the color box by defining the color from the inputs in the HSL and HSLA formats.
 <p>If the alpha is 1, the HSL format is displayed. Otherwise, the HSLA format is used.</p>
 <pre class="prettyprint">
 /* Define formats */
-hsl = &#39;hsl(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%)&#39;;
-hsla = &#39;hsla(&#39; + h + &#39;, &#39; + s + &#39;%, &#39; + l + &#39;%, &#39; + a + &#39;)&#39;;
+hsl = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
+hsla = 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + a + ')';
 
 /* Set the color of the box */
-cBox = document.querySelector(&#39;#color-box&#39;),
+cBox = document.querySelector('#color-box'),
 
 /* Set the text */
-tBox = document.querySelector(&#39;#text-box&#39;);
+tBox = document.querySelector('#text-box');
 </pre></li>
 
 <li>Add an event handler to the input sliders to change the displayed text and color box color when the slider values change.
 <pre class="prettyprint">
-var inputs = document.querySelectorAll(&#39;#color-generator input[type=range]&#39;);
+var inputs = document.querySelectorAll('#color-generator input[type=range]');
 
 for (i = 0; i &lt; inputs.length; i++)
 {
-&nbsp;&nbsp;&nbsp;inputs[i].onchange = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show color */
-&nbsp;&nbsp;&nbsp;}
+   inputs[i].onchange = function()
+   {
+      /* Show color */
+   }
 }
 </pre></li></ol>
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
-       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">css_color.html</a></li>   
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">css_color.html</a></li>
  </ul>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/ui/drag_drop_mw.htm b/org.tizen.guides/html/web/w3c/ui/drag_drop_mw.htm
index f4947aa..ea16184 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/drag_drop_mw.htm
+++ b/org.tizen.guides/html/web/w3c/ui/drag_drop_mw.htm
@@ -38,7 +38,7 @@
 
 <div id="container"><div id="contents"><div class="content">
 <h1>HTML5 Drag and Drop</h1>
- 
+
 <p>HTML5 drag and drop activates through event-based JavaScript and added attributes.
 </p>
 
@@ -48,7 +48,7 @@ The main features of the HTML5 Drag and drop API include:
 </p>
 <ul>
 <li>Using drag and drop
-<p>To make an element draggable, add the <code>draggable=&quot;true&quot;</code> attribute to it. Only elements thus defined as draggable can <a href="#handle">generate drag and drop events</a>.</p>
+<p>To make an element draggable, add the <code>draggable="true"</code> attribute to it. Only elements thus defined as draggable can <a href="#handle">generate drag and drop events</a>.</p>
 <p>A drag and drop requires a source, target, and data. It is used through the following events:</p>
 <ul><li><code>dragstart</code></li>
 <li><code>drag</code></li>
@@ -74,15 +74,15 @@ The main features of the HTML5 Drag and drop API include:
 
 
 <ol>
-<li><p>Define the draggable elements by adding the <code>draggable=&quot;true&quot;</code> attribute to them:</p>
+<li><p>Define the draggable elements by adding the <code>draggable="true"</code> attribute to them:</p>
 <pre class="prettyprint lang-html">
 &lt;h1&gt;Drag and drop tutorial&lt;/h1&gt;
-&lt;div class=&quot;example_body&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;drag-list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;drag-row&quot; draggable=&quot;true&quot;&gt;1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;drag-row&quot; draggable=&quot;true&quot;&gt;2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Drag state: &lt;span id=&quot;log&quot;&gt;&lt;/span&gt;&lt;/div&gt;
+&lt;div class="example_body"&gt;
+   &lt;div id="drag-list"&gt;
+      &lt;div class="drag-row" draggable="true"&gt;1&lt;/div&gt;
+      &lt;div class="drag-row" draggable="true"&gt;2&lt;/div&gt;
+   &lt;/div&gt;
+   &lt;div&gt;Drag state: &lt;span id="log"&gt;&lt;/span&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -90,19 +90,19 @@ The main features of the HTML5 Drag and drop API include:
 <li>Add event listeners for the various drag and drop events:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var cols = document.querySelectorAll(&#39;#drag-list_.drag-row&#39;);
-&nbsp;&nbsp;&nbsp;var colsLength = cols.length;
-
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragstart&#39;, dragStart, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;drag&#39;, dragIng, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragenter&#39;, dragEnter, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragover&#39;, dragOver, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragleave&#39;, dragLeave, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;drop&#39;, dragDrop, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragend&#39;, dragEnd, false);
-&nbsp;&nbsp;&nbsp;};
+   var cols = document.querySelectorAll('#drag-list_.drag-row');
+   var colsLength = cols.length;
+
+   for (var i = 0; i &lt; colsLength; i++)
+   {
+      cols[i].addEventListener('dragstart', dragStart, false);
+      cols[i].addEventListener('drag', dragIng, false);
+      cols[i].addEventListener('dragenter', dragEnter, false);
+      cols[i].addEventListener('dragover', dragOver, false);
+      cols[i].addEventListener('dragleave', dragLeave, false);
+      cols[i].addEventListener('drop', dragDrop, false);
+      cols[i].addEventListener('dragend', dragEnd, false);
+   };
 &lt;/script&gt;
 </pre>
 </li>
@@ -111,39 +111,39 @@ The main features of the HTML5 Drag and drop API include:
 <pre class="prettyprint">
 function dragStart(e)
 {
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragStart&quot;;
+   log.innerHTML = "dragStart";
 };
 
 function dragIng(e)
 {
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;drag&quot;;
+   log.innerHTML = "drag";
 };
 
 function dragOver(e)
 {
-&nbsp;&nbsp;&nbsp;e.preventDefault();
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragOver&quot;;
+   e.preventDefault();
+   log.innerHTML = "dragOver";
 };
 
 function dragEnter(e)
 {
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragEnter&quot;;
+   log.innerHTML = "dragEnter";
 };
 
 function dragLeave(e)
 {
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragLeave&quot;;
+   log.innerHTML = "dragLeave";
 };
 
 function dragDrop(e)
 {
-&nbsp;&nbsp;&nbsp;e.stopPropagation();
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragDrop&quot;;
+   e.stopPropagation();
+   log.innerHTML = "dragDrop";
 };
 
 function dragEnd(e)
 {
-&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragEnd&quot;;
+   log.innerHTML = "dragEnd";
 };
 </pre>
 </li>
@@ -160,38 +160,38 @@ function dragEnd(e)
 <p>Learning how to transfer data in a simple drag and drop puzzle is a basic user interaction skill:</p>
 
 <ol>
-<li>Define the draggable elements by adding the <code>draggable=&quot;true&quot;</code> attribute to them.
+<li>Define the draggable elements by adding the <code>draggable="true"</code> attribute to them.
 <p>In this example, the Tizen logo image has been divided and allocated randomly. Each imager part is defined as draggable, so that the user can rearrange the image parts in the correct order.</p>
 <pre class="prettyprint lang-html">
 &lt;h1&gt;Drag and drop tutorial&lt;/h1&gt;
-&lt;div class=&quot;example_body&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div&gt;Drag state: &lt;span id=&quot;log&quot;&gt;&lt;/span&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;holder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/logo.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;txt&quot;&gt;Complete the puzzle to see a picture&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;puzzle&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_06.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_02.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_04.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_05.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_01.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_03.png&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="example_body"&gt;
+   &lt;div&gt;Drag state: &lt;span id="log"&gt;&lt;/span&gt;&lt;/div&gt;
+   &lt;div class="holder"&gt;
+      &lt;div&gt;
+         &lt;img src="images/logo.png"&gt;
+         &lt;p class="txt"&gt;Complete the puzzle to see a picture&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;ul id="puzzle"&gt;
+         &lt;li class="puzzle-piece" draggable="true"&gt;
+            &lt;img src="images/puzz_06.png"&gt;
+         &lt;/li&gt;
+         &lt;li class="puzzle-piece" draggable="true"&gt;
+            &lt;img src="images/puzz_02.png"&gt;
+         &lt;/li&gt;
+         &lt;li class="puzzle-piece" draggable="true"&gt;
+            &lt;img src="images/puzz_04.png"&gt;
+         &lt;/li&gt;
+         &lt;li class="puzzle-piece" draggable="true"&gt;
+            &lt;img src="images/puzz_05.png"&gt;
+         &lt;/li&gt;
+         &lt;li class="puzzle-piece" draggable="true"&gt;
+            &lt;img src="images/puzz_01.png"&gt;
+         &lt;/li&gt;
+         &lt;li class="puzzle-piece" draggable="true"&gt;
+            &lt;img src="images/puzz_03.png"&gt;
+         &lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -199,15 +199,15 @@ function dragEnd(e)
 <li>Add event listeners for the <code>dragover</code>, <code>dragleave</code>, <code>dragstart</code>, and <code>drop</code> events:
 <pre class="prettyprint lang-js">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var cols = document.querySelectorAll(&#39;#puzzle_.puzzle-piece&#39;);
-&nbsp;&nbsp;&nbsp;var colsLength = cols.length;
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragstart&#39;, dragStartHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragover&#39;, dragOverHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragleave&#39;, dragLeaveHandler, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;drop&#39;, dragDropHandler, false);
-&nbsp;&nbsp;&nbsp;};
+   var cols = document.querySelectorAll('#puzzle_.puzzle-piece');
+   var colsLength = cols.length;
+   for (var i = 0; i &lt; colsLength; i++)
+   {
+      cols[i].addEventListener('dragstart', dragStartHandler, false);
+      cols[i].addEventListener('dragover', dragOverHandler, false);
+      cols[i].addEventListener('dragleave', dragLeaveHandler, false);
+      cols[i].addEventListener('drop', dragDropHandler, false);
+   };
 &lt;/script&gt;
 </pre>
 </li>
@@ -224,59 +224,59 @@ var dragElem = null;
 <pre class="prettyprint">
 function dragStartHandler(e)
 {
-&nbsp;&nbsp;&nbsp;/* Set data */
-&nbsp;&nbsp;&nbsp;dragElem = this;
-&nbsp;&nbsp;&nbsp;e.dataTransfer.effectAllowed = &#39;move&#39;;
-&nbsp;&nbsp;&nbsp;e.dataTransfer.setData(&#39;text/html&#39;, this.innerHTML);
-&nbsp;&nbsp;&nbsp;this.classList.add(&#39;over&#39;);
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].classList.add(&#39;start&#39;);
-&nbsp;&nbsp;&nbsp;};
+   /* Set data */
+   dragElem = this;
+   e.dataTransfer.effectAllowed = 'move';
+   e.dataTransfer.setData('text/html', this.innerHTML);
+   this.classList.add('over');
+   for (var i = 0; i &lt; colsLength; i++)
+   {
+      cols[i].classList.add('start');
+   };
 };
 function dragDropHandler(e)
 {
-&nbsp;&nbsp;&nbsp;/* Get data */
-&nbsp;&nbsp;&nbsp;dragElem.innerHTML = this.innerHTML;
-&nbsp;&nbsp;&nbsp;this.innerHTML = e.dataTransfer.getData(&#39;text/html&#39;);
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].className = &quot;puzzle-piece&quot;;
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;/* Check key */
-&nbsp;&nbsp;&nbsp;puzzleCheck();
+   /* Get data */
+   dragElem.innerHTML = this.innerHTML;
+   this.innerHTML = e.dataTransfer.getData('text/html');
+   for (var i = 0; i &lt; colsLength; i++)
+   {
+      cols[i].className = "puzzle-piece";
+   };
+   /* Check key */
+   puzzleCheck();
 };
 </pre>
 </li>
 
 <li>Check the completion of the puzzle by making a user key using a simple array, and comparing the user key against the puzzle key (correct answer):
 <pre class="prettyprint">
-var puzzleKey = [&quot;01&quot;, &quot;02&quot;, &quot;03&quot;, &quot;04&quot;, &quot;05&quot;, &quot;06&quot;];
+var puzzleKey = ["01", "02", "03", "04", "05", "06"];
 var puzzleArray = [];
 
 function puzzleCheck()
 {
-&nbsp;&nbsp;&nbsp;/* Initialize the user key */
-&nbsp;&nbsp;&nbsp;puzzleArray = [];
-&nbsp;&nbsp;&nbsp;/* Insert the keys in the array */
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;puzzleArray.push(cols[i].children[0].getAttribute(&#39;src&#39;).substring(12, 14));
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;originKey = puzzleKey.join();
-&nbsp;&nbsp;&nbsp;userKey = puzzleArray.join();
-
-&nbsp;&nbsp;&nbsp;if (originKey === userKey)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;Success !&quot;);
-&nbsp;&nbsp;&nbsp;};
+   /* Initialize the user key */
+   puzzleArray = [];
+   /* Insert the keys in the array */
+   for (var i = 0; i &lt; colsLength; i++)
+   {
+      puzzleArray.push(cols[i].children[0].getAttribute('src').substring(12, 14));
+   };
+   originKey = puzzleKey.join();
+   userKey = puzzleArray.join();
+
+   if (originKey === userKey)
+   {
+      alert("Success !");
+   };
 };
 </pre>
 </li>
 </ol>
 </li>
 </ol>
-<p align="center"><strong>Figure: Drag and drop puzzle</strong></p> 
+<p align="center"><strong>Figure: Drag and drop puzzle</strong></p>
 <p align="center"><img alt="Drag and drop puzzle" src="../../../images/dragdrop.png" /></p>
 <p align="center"><img alt="Drag and drop puzzle" src="../../../images/dragdrop2.png" /></p>
 <h3>Source Code</h3>
diff --git a/org.tizen.guides/html/web/w3c/ui/flexible_w.htm b/org.tizen.guides/html/web/w3c/ui/flexible_w.htm
index fc97f70..4375e7c 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/flexible_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/flexible_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Flexible Box Layout Module</title> 
- </head> 
+  <title>CSS Flexible Box Layout Module</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,12 +33,12 @@
                        </li>
                </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc">        
+               <ul class="toc">
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">CSS Flexible Box Layout Module API for Mobile Web</a></li>
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">CSS Flexible Box Layout Module API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
  <h1>CSS Flexible Box Layout Module</h1>
@@ -64,14 +64,14 @@
 <li>Assign the area (flex container) where the flexible box layout is applied by using the <code>display: flex</code> property:
 <pre class="prettyprint">
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}
+   .flex_container {display: -webkit-flex}
 &lt;/style&gt;
 
-&lt;div class=&quot;flex_container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>D&lt;/div&gt;
+&lt;div class="flex_container"&gt;
+   &lt;div class="flex_item">A&lt;/div&gt;
+   &lt;div class="flex_item">B&lt;/div&gt;
+   &lt;div class="flex_item">C&lt;/div&gt;
+   &lt;div class="flex_item">D&lt;/div&gt;
 &lt;div&gt;
 </pre>
 
@@ -128,7 +128,7 @@
 </div>
 </li></ul></li></ol>
 <p>The following figure shows examples of flex containers and how their flex items have been aligned.</p>
-<p align="center"><strong>Figure: Flex container properties (in mobile applications only)</strong></p> 
+<p align="center"><strong>Figure: Flex container properties (in mobile applications only)</strong></p>
 <p align="center"><img alt="Flex container properties (in mobile applications only)" src="../../../images/flexcontainer_properties.png"/></p>
 
 <h3>Source Code</h3>
@@ -138,24 +138,24 @@
     <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_3.html</a></li>
 <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_4.html</a></li>
 <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_5.html</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_6.html</a></li>  
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_6.html</a></li>
  </ul>
-               
+
                                <h2 id="item" name="item">Using the Flex Items</h2>
-                               
+
                        <p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex items:</p>
 
 <ol>
 <li>Assign the area (flex container) where the flexible box layout is applied, and define the flex items for it:
 <pre class="prettyprint">
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;.flex_container {display: -webkit-flex}
+   .flex_container {display: -webkit-flex}
 &lt;/style&gt;
 
-&lt;div class=&quot;flex_container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>A&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>B&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;flex_item&quot;>C&lt;/div&gt;
+&lt;div class="flex_container"&gt;
+   &lt;div class="flex_item">A&lt;/div&gt;
+   &lt;div class="flex_item">B&lt;/div&gt;
+   &lt;div class="flex_item">C&lt;/div&gt;
 &lt;div&gt;
 </pre>
 </li>
@@ -172,7 +172,7 @@
 
 <li><code>flex</code> property is a shorthand expression defining the flex item size handling:
 <ul>
-<li><code>flex-grow</code>: Sets whether the spaces between flex items are filled.</li> 
+<li><code>flex-grow</code>: Sets whether the spaces between flex items are filled.</li>
 <li><code>flex-shrink</code>: Sets whether the width of the flex items is reduced according to the size of the flex container.</li>
 <li><code>flex-basis</code>: Sets the default width of the relevant flex items.</li>
 </ul></li></ul></li></ol>
@@ -184,37 +184,37 @@
  <p>For the complete source code related to this use case, see the following files:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_2.html</a></li>
-    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_3.html</a></li>           
+    <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_3.html</a></li>
  </ul>
-                       
+
 <h2 id="create" name="create">Creating a Flexible Layout with CSS3</h2>
 
 <p>To enhance the user experience of your application, you must learn how to create flexible box layout:</p>
 <ol>
 <li>Define the HTML content for the flexible layout. In this example, create 2 articles areas, 1 for a text list and 1 for an icon list:
 <pre class="prettyprint">
-&lt;div class=&quot;container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;article class=&quot;events&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;UPCOMING EVENTS&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;date&quot;&gt;&lt;span&gt;APR&lt;/span&gt;&lt;br/&gt; 15&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;title&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Linux Foundation Collaboration Summit
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&quot;local&quot;>San Francisco, CA&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other text items--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&nbsp;&nbsp;&nbsp;&lt;article class=&quot;schedule&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;SCHEDULE&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;img_list&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;folder.png&quot; alt=&quot;folder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;alert.png&quot; alt=&quot;alert&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Other icons--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
+&lt;div class="container"&gt;
+   &lt;article class="events"&gt;
+      &lt;h2&gt;UPCOMING EVENTS&lt;/h2&gt;
+      &lt;ul&gt;
+         &lt;li&gt;
+            &lt;div class="date"&gt;&lt;span&gt;APR&lt;/span&gt;&lt;br/&gt; 15&lt;/div&gt;
+            &lt;p class="title"&gt;
+               Linux Foundation Collaboration Summit
+               &lt;span class="local">San Francisco, CA&lt;/span&gt;
+            &lt;/p&gt;
+         &lt;/li&gt;
+         &lt;!--Other text items--&gt;
+      &lt;/ul&gt;
+   &lt;/article&gt;
+   &lt;article class="schedule"&gt;
+      &lt;h2&gt;SCHEDULE&lt;/h2&gt;
+      &lt;div class="img_list"&gt;
+         &lt;img src="folder.png" alt="folder"&gt;
+         &lt;img src="alert.png" alt="alert"&gt;
+         &lt;!--Other icons--&gt;
+      &lt;/div&gt;
+   &lt;/article&gt;
 &lt;/div&gt;
 </pre></li>
 
@@ -226,46 +226,46 @@
 &lt;!--Font style for the article area titles--&gt;
 .container .events &gt; h2, .container .schedule &gt; h2
 {
-&nbsp;&nbsp;&nbsp;padding: 10px 20px;
-&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;
+   padding: 10px 20px;
+   text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;
 }
 
 &lt;!--List styles--&gt;
 .container .events &gt; ul, .container .schedule .img_list
 {
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;padding: 10px;
+   height: 100%;
+   padding: 10px;
 }
 
 &lt;!--Text style for the text list item title--&gt;
 .container .events &gt; ul &gt; li .title
 {
-&nbsp;&nbsp;&nbsp;color: #51809e;
-&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px 2px #000;
+   color: #51809e;
+   text-shadow: 1px 1px 2px #000;
 }
 
 &lt;!--Text style for the text list item location info--&gt;
 .container .events &gt; ul &gt; li .title .local
 {
-&nbsp;&nbsp;&nbsp;text-indent: 10px;
-&nbsp;&nbsp;&nbsp;text-shadow: 0 0 0 #fff;
+   text-indent: 10px;
+   text-shadow: 0 0 0 #fff;
 }
 
 &lt;!--Styles for the text list item date box--&gt;
 .container .events &gt; ul &gt; li .date
 {
-&nbsp;&nbsp;&nbsp;text-align: center;
+   text-align: center;
 }
 .container .events &gt; ul &gt; li .date
 {
-&nbsp;&nbsp;&nbsp;background-color: #ddd;
-&nbsp;&nbsp;&nbsp;border-radius: 10px;
-&nbsp;&nbsp;&nbsp;box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .5);
+   background-color: #ddd;
+   border-radius: 10px;
+   box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .5);
 }
 .container .events &gt; ul &gt; li .date &gt; span
 {
-&nbsp;&nbsp;&nbsp;background-color: #fff;
-&nbsp;&nbsp;&nbsp;border-radius: 5px;
+   background-color: #fff;
+   border-radius: 5px;
 }
 </pre>
 <p align="center"><img alt="Article areas with styles defined (in mobile applications only)" src="../../../images/flexible_default_structure.png"/></p></li>
@@ -282,25 +282,25 @@
 &lt;!--Flexible alignment of text list--&gt;
 .container .events &gt; ul &gt; li
 {
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;-webkit-align-items: center;
+   display: -webkit-flex;
+   -webkit-align-items: center;
 }
 .container .events &gt; ul &gt; li: first-child
 {
-&nbsp;&nbsp;&nbsp;margin-top: 0;
+   margin-top: 0;
 }
 
 .container .events &gt; ul &gt; li .date
 {
-&nbsp;&nbsp;&nbsp;-webkit-flex: 0 0 20%;
-&nbsp;&nbsp;&nbsp;text-align: center;
+   -webkit-flex: 0 0 20%;
+   text-align: center;
 }
 
 &lt;!--Flexible alignment of icon list--&gt;
 .container .schedule .img_list
 {
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;
+   display: -webkit-flex;
+   -webkit-justify-content: space-between;
 }
 </pre>
 <p align="center"><img alt="Article areas with a flexible box layout defined (in mobile applications only)" src="../../../images/flexible_box_alignment.png"/></p></li>
@@ -310,17 +310,17 @@
 <pre class="prettyprint">
 @media screen and (min-width: 390px)
 {
-&nbsp;&nbsp;&nbsp;.container .schedule .img_list
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-flex-wrap: wrap;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-between;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-align-content: space-around;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}
-&nbsp;&nbsp;&nbsp;.container &gt; * {-webkit-align-content: center;}
-&nbsp;&nbsp;&nbsp;.container article {height: 250px;}
+   .container .schedule .img_list
+   {
+      display: -webkit-flex;
+      -webkit-flex-wrap: wrap;
+      -webkit-justify-content: space-between;
+      -webkit-align-content: space-around;
+   }
+
+   .container {display: -webkit-flex;}
+   .container &gt; * {-webkit-align-content: center;}
+   .container article {height: 250px;}
 }
 </pre>
 <p align="center"><img alt="Article areas with a flexible box layout for small screens (in mobile applications only)" src="../../../images/flexible_screen_size.png"/></p>
@@ -333,9 +333,9 @@
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_1.html</a></li>
     <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_2.html</a></li>
 <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">alert.png</a></li>
-<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">folder.png</a></li>        
+<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">folder.png</a></li>
  </ul>
-                       
+
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/ui/font_w.htm b/org.tizen.guides/html/web/w3c/ui/font_w.htm
index a4ce433..9d56306 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/font_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/font_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -14,12 +14,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -36,7 +36,7 @@
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">CSS Fonts Module Level 3 API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>CSS Fonts Module (Level 3)</h1>
@@ -47,13 +47,13 @@
 
 <p>The new text features in CSS Fonts Module Level 3 API include:</p>
 <ul>
-<li>Font properties 
+<li>Font properties
 <p>You can <a href="#font">use CSS font properties</a>, such as <code>font-style</code>, <code>font-weight</code>, <code>font-variant</code>, <code>font-size</code>, and <code>font-family</code>, to modify the appearance of text.</p></li>
-</ul> 
+</ul>
 
 
 <h2 id="font" name="font">Manipulating Fonts</h2>
-                               
+
 <p>To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:</p>
 
 <ol>
@@ -61,16 +61,16 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) em{font-style: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) em{font-style: italic}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) em{font-style: oblique}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) em{font-style: normal}
+      p:nth-child(2) em{font-style: italic}
+      p:nth-child(3) em{font-style: oblique}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-style: &lt;em&gt;oblique&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-style: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-style: &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-style: &lt;em&gt;oblique&lt;/em&gt;&lt;/p&gt;
 &lt;/body&gt;
 </pre>
 
@@ -81,20 +81,20 @@ which controls the weight of the text:</p>
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-weight: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-weight: bold}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-weight: 300}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-weight: 500}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-weight: 700}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {font-weight: normal}
+      p:nth-child(2) {font-weight: bold}
+      p:nth-child(3) {font-weight: 300}
+      p:nth-child(4) {font-weight: 500}
+      p:nth-child(5) {font-weight: 700}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;bold&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;300&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;500&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-weight: &lt;em&gt;700&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-weight: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-weight: &lt;em&gt;bold&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-weight: &lt;em&gt;300&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-weight: &lt;em&gt;500&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-weight: &lt;em&gt;700&lt;/em&gt;&lt;/p&gt;
 &lt;/body&gt;
 </pre>
 
@@ -104,14 +104,14 @@ which controls the weight of the text:</p>
 change the font to, for example, use small capital letters:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-variant: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-variant: small-caps}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {font-variant: normal}
+      p:nth-child(2) {font-variant: small-caps}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-variant: &lt;em&gt;small-caps&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-variant: &lt;em&gt;normal&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-variant: &lt;em&gt;small-caps&lt;/em&gt;&lt;/p&gt;
 &lt;/body&gt;
 </pre>
 
@@ -120,14 +120,14 @@ change the font to, for example, use small capital letters:
 <li>Define the <code>font-size</code> property, which controls the size of the font:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-size: 150%}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-size: 1.2em}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {font-size: 150%}
+      p:nth-child(2) {font-size: 1.2em}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;150%&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-size: &lt;em&gt;1.2em&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-size: &lt;em&gt;150%&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-size: &lt;em&gt;1.2em&lt;/em&gt;&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
@@ -136,16 +136,16 @@ change the font to, for example, use small capital letters:
 <li>Define the <code>line-height</code> property, which controls the height of a text line:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {line-height: 1}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {line-height: 1.5}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {line-height: 5}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {line-height: 1}
+      p:nth-child(2) {line-height: 1.5}
+      p:nth-child(3) {line-height: 5}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;1.5&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;line-height: &lt;em&gt;5&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;line-height: &lt;em&gt;1&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;line-height: &lt;em&gt;1.5&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;line-height: &lt;em&gt;5&lt;/em&gt;&lt;/p&gt;
 &lt;/body&gt;
 </pre>
 
@@ -155,28 +155,28 @@ change the font to, for example, use small capital letters:
 <p>If the assigned font is not installed on the target, a different font is obtained based on the user system.</p>
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {font-family: serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: monospace}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: cursive}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {font-family: fantasy}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {font-family: &#39;Arial Black&#39;, sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(7) {font-family: Tahoma, sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(8) {font-family: Verdana, sans-serif}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(9) {font-family: Arial, sans-serif}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {font-family: serif}
+      p:nth-child(2) {font-family: sans-serif}
+      p:nth-child(3) {font-family: monospace}
+      p:nth-child(4) {font-family: cursive}
+      p:nth-child(5) {font-family: fantasy}
+      p:nth-child(6) {font-family: 'Arial Black', sans-serif}
+      p:nth-child(7) {font-family: Tahoma, sans-serif}
+      p:nth-child(8) {font-family: Verdana, sans-serif}
+      p:nth-child(9) {font-family: Arial, sans-serif}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;monospace&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;cursive&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;fantasy&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;&#39;Arial Black&#39;, sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Tahoma, sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Verdana, sans-serif&lt;/em&gt;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;font-family: &lt;em&gt;Arial, sans-serif&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-family: &lt;em&gt;serif&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-family: &lt;em&gt;sans-serif&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-family: &lt;em&gt;monospace&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-family: &lt;em&gt;cursive&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-family: &lt;em&gt;fantasy&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-family: &lt;em&gt;'Arial Black', sans-serif&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-family: &lt;em&gt;Tahoma, sans-serif&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-family: &lt;em&gt;Verdana, sans-serif&lt;/em&gt;&lt;/p&gt;
+   &lt;p&gt;font-family: &lt;em&gt;Arial, sans-serif&lt;/em&gt;&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
@@ -191,7 +191,7 @@ change the font to, for example, use small capital letters:
 <div class="note">
        <strong>Note</strong>
        For a complete list of CSS Fonts Module Level 3 font properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#property-index" target="_blank">Property index</a>.
-</div>           
+</div>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/ui/frame_flattening_mw.htm b/org.tizen.guides/html/web/w3c/ui/frame_flattening_mw.htm
index d7b1a62..ec4d2f5 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/frame_flattening_mw.htm
+++ b/org.tizen.guides/html/web/w3c/ui/frame_flattening_mw.htm
@@ -5,14 +5,14 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Frame Flattening</title>  
-       
+       <title>Frame Flattening</title>
+
 </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -26,19 +26,19 @@
                        <li>Tizen 2.4 and Higher for Mobile</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
 <h1>Frame Flattening</h1>
 
-  <p>In the Tizen WebKit, content placed within the <code>&lt;frame&gt;</code> and <code>&lt;iframe&gt;</code> tags is expanded automatically according to the content size. This enables users to view the whole content at once without scrolling.</p> 
-  
+  <p>In the Tizen WebKit, content placed within the <code>&lt;frame&gt;</code> and <code>&lt;iframe&gt;</code> tags is expanded automatically according to the content size. This enables users to view the whole content at once without scrolling.</p>
+
 <p>This feature is supported in mobile applications only.</p>
-  
-  <p>The Tizen WebKit supports this feature since scrolling through small subframes on small screen devices is a tedious task and, occasionally, causes confusion between scrolling subframes and scrolling the Web page itself.</p> 
-  <p>To implement scrollable content in the Tizen WebKit, use the CSS <code>overflow: scroll</code> or <code>webkit-overflow-scrolling: touch</code> property instead of <code>iframe</code>.</p>   
-       
+
+  <p>The Tizen WebKit supports this feature since scrolling through small subframes on small screen devices is a tedious task and, occasionally, causes confusion between scrolling subframes and scrolling the Web page itself.</p>
+  <p>To implement scrollable content in the Tizen WebKit, use the CSS <code>overflow: scroll</code> or <code>webkit-overflow-scrolling: touch</code> property instead of <code>iframe</code>.</p>
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/ui/html5forms_w.htm b/org.tizen.guides/html/web/w3c/ui/html5forms_w.htm
index 2e8894d..b330253 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/html5forms_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/html5forms_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML5 Forms</title> 
- </head> 
+  <title>HTML5 Forms</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,19 +31,19 @@
                        <li><a href="#advanced">Creating an Advanced Login Form</a></li>
                        <li><a href="#element">New HTML5 Elements</a></li>
                        <li><a href="#input">New Input Element Types</a></li>
-                       <li><a href="#attribute">New Input Element Attributes</a></li>                  
-               </ul>           
+                       <li><a href="#attribute">New Input Element Attributes</a></li>
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">HTML5 Forms API for Mobile Web</a></li>
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">HTML5 Forms API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>HTML5 Forms</h1> 
+  <h1>HTML5 Forms</h1>
 
 <p>The HTML5 forms provide a convenient way to create consistent screens in your application for accepting user input.</p>
 
@@ -54,43 +54,43 @@
 <p>With HTML5 forms, you can use new <a href="#element">elements</a>, <a href="#input">input element types</a>, and <a href="#attribute">input element attributes</a>.</p>
 
 <h2 id="basic" name="basic">Creating a Basic Login Form</h2>
-                               
-<p>To create simple user input forms, you must learn to use the HTML5 features in Web forms:</p>  
+
+<p>To create simple user input forms, you must learn to use the HTML5 features in Web forms:</p>
 
 <ol>
 <li><p>Create a simple form where the user can enter their login details (email address and password):</p>
 <pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;email: &lt;input type=&quot;text&quot;/&gt;&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;password: &lt;input type=&quot;password&quot;/&gt;&lt;/label&gt;
+&lt;form action="" method=""&gt;
+   &lt;label&gt;email: &lt;input type="text"/&gt;&lt;/label&gt;
+   &lt;label&gt;password: &lt;input type="password"/&gt;&lt;/label&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;/&gt;
+   &lt;input type="submit" value="Login"/&gt;
 &lt;/form&gt;
 </pre></li>
 <li><p>To check the validity of the entered email address automatically, add the <code>required</code> attribute to the <code>input</code> element with the <code>email</code> type:</p>
 <pre class="prettyprint">
-&lt;label&gt;email: &lt;input type=&quot;email&quot; required /&gt;&lt;/label&gt;
+&lt;label&gt;email: &lt;input type="email" required /&gt;&lt;/label&gt;
 </pre></li>
 <li><p>Define the password field as mandatory by using the <code>required</code> attribute in that <code>input</code> element too:</p>
 <pre class="prettyprint">
-&lt;label&gt;password: &lt;input type=&quot;password&quot; required /&gt;&lt;/label&gt;
+&lt;label&gt;password: &lt;input type="password" required /&gt;&lt;/label&gt;
 </pre></li>
 <li><p>Because a device has limited space on the screen, remove the field labels and replace them with hint texts using the <code>placeholder</code> attribute:</p>
 <pre class="prettyprint">
-&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required /&gt;
-&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required /&gt;
+&lt;input type="email" placeholder="e-mail address" required /&gt;
+&lt;input type="password" placeholder="password" required /&gt;
 </pre></li></ol>
 
 <p>The final form that checks the email validity and requires the mandatory password input is complete:</p>
 <pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required /&gt;
-&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;/&gt;
+&lt;form action="" method=""&gt;
+   &lt;fieldset&gt;
+      &lt;legend&gt;Login&lt;/legend&gt;
+      &lt;input type="email" placeholder="e-mail address" required /&gt;
+      &lt;input type="password" placeholder="password" required /&gt;
+   &lt;/fieldset&gt;
+
+   &lt;input type="submit" value="Login"/&gt;
 &lt;/form&gt;
 </pre>
 
@@ -99,28 +99,28 @@
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">basicLogin.html</a></li>
  </ul>
-                       
+
 <h2 id="advanced" name="advanced">Creating an Advanced Login Form</h2>
-                               
-<p>To create advanced user input forms, you must learn to use the HTML5 features in Web forms:</p> 
- 
+
+<p>To create advanced user input forms, you must learn to use the HTML5 features in Web forms:</p>
+
 <ol>
 <li><p><a href="#basic">Create a login form</a> that checks the email validity and requires the mandatory password input:</p>
 <pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required /&gt;
-&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;/&gt;
+&lt;form action="" method=""&gt;
+   &lt;fieldset&gt;
+      &lt;legend&gt;Login&lt;/legend&gt;
+      &lt;input type="email" placeholder="e-mail address" required /&gt;
+      &lt;input type="password" placeholder="password" required /&gt;
+   &lt;/fieldset&gt;
+
+   &lt;input type="submit" value="Login"/&gt;
 &lt;/form&gt;
 </pre></li>
 
 <li><p>When the form page is loaded on the screen, put the focus automatically to the email field by using the <code>autofocus</code> attribute:</p>
 <pre class="prettyprint">
-&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required autofocus /&gt;
+&lt;input type="email" placeholder="e-mail address" required autofocus /&gt;
 </pre></li>
 
 <li>
@@ -128,58 +128,58 @@
 <p>You can apply the <code>autocomplete</code> attribute to  a specific field by adding it to the appropriate <code>input</code> element. If you add it to the <code>form</code> element, it applies to all child elements within the form.</p>
 
 <pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot; autocomplete=&quot;on&quot;&gt;
+&lt;form action="" method="" autocomplete="on"&gt;
 </pre>
 </li>
 <li><p>In general, apply the <code>autocomplete</code> attribute to the <code>form</code> element, and then separately set it to <code>off</code> for those fields that must not use it. </p>
 <p>In the following example, the password field must not use autocomplete, to prevent unauthorized access by any user.</p>
 <pre class="prettyprint">
-&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required autocomplete=&quot;off&quot;/&gt;
+&lt;input type="password" placeholder="password" required autocomplete="off"/&gt;
 </pre>
 </li>
 <li><p>Protect the password with private and public key pair using the <code>keygen</code> element.</p>
-<p>The element is used to transform the data sent from the connected form to a pair of encrypted keys using the RSA (Rivest Shamir Adleman) method. When the input data is sent from the form, the private key is saved in the local computer, and the public key is delivered to the server. Only if the keys match, the login process proceeds forwards.</p> 
+<p>The element is used to transform the data sent from the connected form to a pair of encrypted keys using the RSA (Rivest Shamir Adleman) method. When the input data is sent from the form, the private key is saved in the local computer, and the public key is delivered to the server. Only if the keys match, the login process proceeds forwards.</p>
 
 <pre class="prettyprint">
-&lt;keygen name=&quot;keyvalue&quot;&gt;
+&lt;keygen name="keyvalue"&gt;
 </pre></li>
 
 <li><p>Use the <code>pattern</code> attribute to perform a validity check that ensures that the password field value matches the given regular expression. The <code>required</code> attribute is used to ensure that the field value must be entered and then the validity check can be performed.</p>
-<p>In the following example, the password only accepts numbers and letters of the alphabet. If an invalid value is entered, the login cannot proceed.</p> 
+<p>In the following example, the password only accepts numbers and letters of the alphabet. If an invalid value is entered, the login cannot proceed.</p>
 
 <pre class="prettyprint">
-&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pattern=&quot;[a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autocomplete=&quot;off&quot;/&gt;
+&lt;input type="password" placeholder="password" required
+       pattern="[a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*"
+       autocomplete="off"/&gt;
 </pre></li>
 <li><p>Define the required length of the password within the <code>pattern</code> attribute. </p>
-<p>In the following example, the password must be 6 to 12 characters long.</p> 
+<p>In the following example, the password must be 6 to 12 characters long.</p>
 
 <pre class="prettyprint">
-&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pattern=&quot;(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autocomplete=&quot;off&quot;/&gt;
+&lt;input type="password" placeholder="password" required
+       pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}"
+       autocomplete="off"/&gt;
 </pre></li>
 </ol>
 
 <p>The final form with autofocus and autocomplete features, strengthened security, and password value requirements is complete:</p>
 
 <pre class="prettyprint">
-&lt;form action=&quot;&quot; method=&quot;&quot; autocomplete=&quot;on&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required autofocus /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pattern=&quot;(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autocomplete=&quot;off&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;keygen name=&quot;keyvalue&quot;&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;/&gt;
+&lt;form action="" method="" autocomplete="on"&gt;
+   &lt;fieldset&gt;
+      &lt;legend&gt;Login&lt;/legend&gt;
+      &lt;input type="email" placeholder="e-mail address" required autofocus /&gt;
+      &lt;input type="password" placeholder="password" required
+             pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}"
+             autocomplete="off"/&gt;
+   &lt;/fieldset&gt;
+
+   &lt;keygen name="keyvalue"&gt;
+
+   &lt;input type="submit" value="Login"/&gt;
 &lt;/form&gt;
 </pre>
-                       
+
 
 <h2 id="element" name="element">New HTML5 Elements</h2>
 <p>The following table lists the new elements available for your forms in HTML5. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">elements.html</a>.</p>
@@ -198,22 +198,22 @@
 <p>In Tizen, the value selected in the <code>datalist</code> element can be edited.</p></td>
 <td>
 <pre class="prettyprint">
-&lt;input type=&quot;text&quot; list=&quot;search&quot;/&gt;
-&lt;datalist id=&quot;search&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;Tomato&quot;&gt;Tomato&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;banana&quot;&gt;banana&lt;/option&gt;
-&nbsp;&nbsp;&nbsp;&lt;option value=&quot;Watermelon&quot;&gt;Watermelon&lt;/option&gt;
+&lt;input type="text" list="search"/&gt;
+&lt;datalist id="search"&gt;
+   &lt;option value="Tomato"&gt;Tomato&lt;/option&gt;
+   &lt;option value="banana"&gt;banana&lt;/option&gt;
+   &lt;option value="Watermelon"&gt;Watermelon&lt;/option&gt;
 &lt;/datalist&gt;
 </pre>
      </td>
     </tr>
      <tr>
      <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-keygen-element" target="_blank">keygen</a></td>
-     <td>Defines a control for generating a public-private key pair and for submitting the public key from that key pair. The element creates an encrypted key with the value of the <code>name</code> attribute, saves it in the user&#39;s computer and Web server, and activates the next procedure when the 2 values match.</td>
+     <td>Defines a control for generating a public-private key pair and for submitting the public key from that key pair. The element creates an encrypted key with the value of the <code>name</code> attribute, saves it in the user's computer and Web server, and activates the next procedure when the 2 values match.</td>
 <td rowspan="1" colspan="1">
 <pre class="prettyprint">
-&lt;label&gt;user:&lt;input type=&quot;text&quot; name=&quot;user_name&quot;/&gt;&lt;/label&gt;
-&lt;label&gt;keygen:&lt;keygen name=&quot;keygen&quot;/&gt;&lt;/label&gt;
+&lt;label&gt;user:&lt;input type="text" name="user_name"/&gt;&lt;/label&gt;
+&lt;label&gt;keygen:&lt;keygen name="keygen"/&gt;&lt;/label&gt;
 </pre>
      </td>
     </tr>
@@ -223,8 +223,8 @@
      <td>Represents a scalar measurement within a known range (the distribution of the assigned range), or a fractional value.</td>
 <td>
 <pre class="prettyprint">
-&lt;meter value=&quot;75&quot; min=&quot;0&quot; max=&quot;100&quot; low=&quot;60&quot; high=&quot;80&quot; optimum=&quot;81&quot;&gt;
-&nbsp;&nbsp;&nbsp;75/100
+&lt;meter value="75" min="0" max="100" low="60" high="80" optimum="81"&gt;
+   75/100
 &lt;/meter&gt;
 </pre>
      </td>
@@ -235,11 +235,11 @@
      <td>Represents the result of a calculation. The element generally shows the calculated result of the value that the user has entered, and is used within the <code>form</code> element.</td>
       <td rowspan="1" colspan="1">
 <pre class="prettyprint">
-&lt;fieldset onsubmit=&quot;return false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oninput=&quot;foobar.value = parseInt(foo.value) * parseInt(bar.value)&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;foo&quot; name=&quot;foo&quot;/&gt; *
-&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;bar&quot; name=&quot;bar&quot;/&gt; =
-&nbsp;&nbsp;&nbsp;&lt;output for=&quot;foo bar&quot; name=&quot;foobar&quot;&gt;&lt;/output&gt;
+&lt;fieldset onsubmit="return false"
+          oninput="foobar.value = parseInt(foo.value) * parseInt(bar.value)"&gt;
+   &lt;input type="number" id="foo" name="foo"/&gt; *
+   &lt;input type="number" id="bar" name="bar"/&gt; =
+   &lt;output for="foo bar" name="foobar"&gt;&lt;/output&gt;
 &lt;/fieldset&gt;
 </pre>
      </td>
@@ -250,8 +250,8 @@
      </td>
      <td>
 <pre class="prettyprint">
-&lt;progress value=&quot;75&quot; max=&quot;100&quot;&gt;
-&nbsp;&nbsp;&nbsp;75/100
+&lt;progress value="75" max="100"&gt;
+   75/100
 &lt;/progress&gt;
 </pre></td>
     </tr>
@@ -275,18 +275,18 @@
     </td>
         <td rowspan="13">
 <pre class="prettyprint">
-&lt;input type=&quot;color&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;#ff0000&quot;/&gt;
-&lt;input type=&quot;datetime&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;2012-12-12T03:30Z&quot;/&gt;
-&lt;input type=&quot;email&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required /&gt;
-&lt;input type=&quot;number&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;step=&quot;3&quot;/&gt;
-&lt;input type=&quot;range&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;1&quot; max=&quot;10&quot;/&gt;
-&lt;input type=&quot;tel&quot;/&gt;
-&lt;input type=&quot;url&quot;/&gt;
+&lt;input type="color"
+       value="#ff0000"/&gt;
+&lt;input type="datetime"
+       value="2012-12-12T03:30Z"/&gt;
+&lt;input type="email"
+       required /&gt;
+&lt;input type="number"
+       step="3"/&gt;
+&lt;input type="range"
+       min="1" max="10"/&gt;
+&lt;input type="tel"/&gt;
+&lt;input type="url"/&gt;
 </pre>
     </td>
     </tr>
@@ -312,7 +312,7 @@
      <tr>
      <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#e-mail-state" target="_blank">email</a></td>
      <td>Enter an email address with the email keyboard.
-     <p>If the <code>required</code> attribute is used, the system checks whether the input format is in line with the ABNF regular expression (<code>1*(atext / &quot;.&quot;) &quot;@&quot; ldh-str 1*(&quot;.&quot; ldh-str)</code>).</p>
+     <p>If the <code>required</code> attribute is used, the system checks whether the input format is in line with the ABNF regular expression (<code>1*(atext / ".") "@" ldh-str 1*("." ldh-str)</code>).</p>
     </td>
     </tr>
      <tr>
@@ -372,15 +372,15 @@
     </tr>
      <tr>
      <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-autocomplete" target="_blank">autocomplete</a></td>
-     <td>Prefilling feature, which helps the users by, for example, prefilling the user&#39;s address based on earlier user input.
-     <p>The text used by the user before (such as an <code>input</code> element) is listed in a <code>datalist</code> form. The attribute can be used in all form elements, and is activated if the value is &quot;on&quot; and deactivated if the value is &quot;off&quot;.</p>
+     <td>Prefilling feature, which helps the users by, for example, prefilling the user's address based on earlier user input.
+     <p>The text used by the user before (such as an <code>input</code> element) is listed in a <code>datalist</code> form. The attribute can be used in all form elements, and is activated if the value is "on" and deactivated if the value is "off".</p>
     </td>
     <td rowspan="6">
 <pre class="prettyprint">
-&lt;input type=&quot;range&quot; min=&quot;1&quot; max=&quot;10&quot;/&gt;
-&lt;input type=&quot;tel&quot; pattern=&quot;[0-9]+&quot; required /&gt;
-&lt;input placeholder=&quot;You know what to do, huh?&quot;/&gt;
-&lt;input type=&quot;number&quot; step=&quot;3&quot;/&gt;
+&lt;input type="range" min="1" max="10"/&gt;
+&lt;input type="tel" pattern="[0-9]+" required /&gt;
+&lt;input placeholder="You know what to do, huh?"/&gt;
+&lt;input type="number" step="3"/&gt;
 </pre>
     </td>
     </tr>
@@ -391,7 +391,7 @@
     </tr>
      <tr>
      <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-pattern" target="_blank">pattern</a></td>
-     <td>Regular expression against which the control&#39;s value is checked.
+     <td>Regular expression against which the control's value is checked.
      <p>The attribute can be used to check the validity of the form data. During service, a guide requiring the input format from the user is necessary.</p>
     </td>
     </tr>
diff --git a/org.tizen.guides/html/web/w3c/ui/html_priority_w.htm b/org.tizen.guides/html/web/w3c/ui/html_priority_w.htm
index 4a27ead..51e3eef 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/html_priority_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/html_priority_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>HTML Priorities</title> 
- </head> 
+  <title>HTML Priorities</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -30,15 +30,15 @@
                        <li><a href="#doctype">&lt;!DOCTYPE&gt; Element</a></li>
                        <li><a href="#dom">HTML DOM Tree</a></li>
                        <li><a href="#css">CSS Rule Priorities</a></li>
-                       <li><a href="#js">JavaScript Behavior</a></li>  
+                       <li><a href="#js">JavaScript Behavior</a></li>
                        <li><a href="#use">Using JavaScript Code within HTML</a></li>
-               </ul>                   
+               </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>HTML Priorities</h1> 
+  <h1>HTML Priorities</h1>
 
 <p>The HTML markup is not as important as before, because JavaScript APIs can be used to create various functionalities. For example, graphics APIs (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">wearable</a> applications) can be used for making games, media APIs (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">wearable</a> applications) for creating video chats, and communication APIs (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">wearable</a> applications) for various types of messaging. However, HTML remains the basis of Web applications, and it is useful to be familiar with its behavior.</p>
 
@@ -63,8 +63,8 @@
 &lt;!DOCTYPE html&gt;
 
 &lt;!--Prior to HTML5--&gt;
-&lt;!DOCTYPE html PUBLIC &quot;{HTML Version Information}&quot;
-&nbsp;&quot;{DTD (Document Type Definition) file link defined by Rule in HTML DOM}&quot;&gt;
+&lt;!DOCTYPE html PUBLIC "{HTML Version Information}"
+ "{DTD (Document Type Definition) file link defined by Rule in HTML DOM}"&gt;
 </pre>
 
 <h2 id="dom">HTML DOM Tree</h2>
@@ -76,12 +76,12 @@
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;!--Content--&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--Content--&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -92,17 +92,17 @@
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tizen (in mobile applications) or Tizen Wearable (in wearable applications)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;/common/js/ui.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta charset="utf-8"/&gt;
+      &lt;title&gt;
+         Tizen (in mobile applications) or Tizen Wearable (in wearable applications)
+      &lt;/title&gt;
+      &lt;link rel="stylesheet" href="css/style.css"/&gt;
+      &lt;script src="/common/js/ui.js"&gt;&lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--Content--&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -128,33 +128,33 @@
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;tizen_wrap&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tizen Web App (in mobile applications)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;or Tizen Wearable Web App (in wearable applications)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section id=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&amp;copy; All rights reserved.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/footer&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;!--Content--&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;section id="tizen_wrap"&gt;
+         &lt;header&gt;
+            &lt;h1&gt;
+               Tizen Web App (in mobile applications)
+               or Tizen Wearable Web App (in wearable applications)
+            &lt;/h1&gt;
+         &lt;/header&gt;
+         &lt;section id="contents"&gt;
+            &lt;!--Content--&gt;
+         &lt;/section&gt;
+         &lt;footer&gt;
+            &lt;p&gt;&amp;copy; All rights reserved.&lt;/p&gt;
+         &lt;/footer&gt;
+      &lt;/section&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-  
+
    <h2 id="css" name="css">CSS Rule Priorities</h2>
 <p>The basic rule of HTML, CSS, and JavaScript is that the code is applied from the top to the bottom of the document. Sometimes the lack of understanding of the CSS rule priorities can cause a result you do not expect.</p>
 <p>The following figure illustrates this problem in mobile applications by applying a font color to a black background.</p>
 
-<p align="center"><strong>Figure: Expected and actual result of applying a font color (in mobile applications only)</strong></p> 
+<p align="center"><strong>Figure: Expected and actual result of applying a font color (in mobile applications only)</strong></p>
 <p align="center"><img alt="Expected and actual result of applying a font color (in mobile applications only)" src="../../../images/css_result.png" /></p>
 
 <h3>Basic CSS Rules</h3>
@@ -180,14 +180,14 @@ p {color: blue}
 
 <pre class="prettyprint lang-html">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
+   &lt;p id="target" class="target"&gt;Hello World&lt;/p&gt;
 &lt;/body&gt;
 
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;p#target {color: black} /* Specificity: 101 */
-&nbsp;&nbsp;&nbsp;p#target {color: red} /* Specificity: 101 */
-&nbsp;&nbsp;&nbsp;p.target {color: blue} /* Specificity: 11 */
-&nbsp;&nbsp;&nbsp;p {color: tomato} /* Specificity: 1 */
+   p#target {color: black} /* Specificity: 101 */
+   p#target {color: red} /* Specificity: 101 */
+   p.target {color: blue} /* Specificity: 11 */
+   p {color: tomato} /* Specificity: 1 */
 &lt;/style&gt;
 &lt;!--Red color is applied--&gt;
 </pre>
@@ -195,14 +195,14 @@ p {color: blue}
 <li>When the <code>!important</code> attribute is used, it has the highest priority:
 <pre class="prettyprint lang-html">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p id=&quot;target&quot; class=&quot;target&quot;&gt;Hello World&lt;/p&gt;
+   &lt;p id="target" class="target"&gt;Hello World&lt;/p&gt;
 &lt;/body&gt;
 
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;p#target {color: black !important}
-&nbsp;&nbsp;&nbsp;p#target {color: red}
-&nbsp;&nbsp;&nbsp;p.target {color: blue}
-&nbsp;&nbsp;&nbsp;p {color: tomato}
+   p#target {color: black !important}
+   p#target {color: red}
+   p.target {color: blue}
+   p {color: tomato}
 &lt;/style&gt;
 &lt;!--Black color is applied--&gt;
 </pre>
@@ -235,25 +235,25 @@ body .contents {color: #999;}
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Link in head--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style tag in head--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p {color: tomato}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--@import in CSS area--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@import url(&quot;css/style.css&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Style attribute in HTML element--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style=&quot;color: red&quot;&gt;Hello World&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;!--Link in head--&gt;
+      &lt;link rel="stylesheet" href="css/style.css"/&gt;
+
+      &lt;!--Style tag in head--&gt;
+      &lt;style&gt;
+         p {color: tomato}
+      &lt;/style&gt;
+
+      &lt;!--@import in CSS area--&gt;
+      &lt;style&gt;
+         @import url("css/style.css");
+      &lt;/style&gt;
+   &lt;/head&gt;
+
+   &lt;body&gt;
+      &lt;!--Style attribute in HTML element--&gt;
+      &lt;p style="color: red"&gt;Hello World&lt;/p&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 <p>However, the priority order of the elements is as follows:</p>
@@ -275,7 +275,7 @@ body .contents {color: #999;}
        Using the <code>@import</code> attribute gives the same result as connecting an external file, but it does not function correctly in older browsers (IE 5.5 and below).
 </div>
 
-<p align="center"><strong>Figure: Using the <code>@import</code> attribute</strong></p> 
+<p align="center"><strong>Figure: Using the <code>@import</code> attribute</strong></p>
 <p align="center"><img alt="Using the @import attribute" src="../../../images/using_import_attribute.png" /></p>
 
 <p>The markup in the corresponding files is as follows:</p>
@@ -283,22 +283,22 @@ body .contents {color: #999;}
 <li>In the HTML code:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
+   &lt;link rel="stylesheet" href="css/style.css"/&gt;
 &lt;/head&gt;
 </pre></li>
 <li>In the <code>style.css</code> file:
 <pre class="prettyprint">
-@import url(&quot;priorities1.css&quot;);
+@import url("priorities1.css");
 
-p: after {content: &quot; : linked in head&quot;}
+p: after {content: " : linked in head"}
 </pre>
-<p align="center"><strong>Figure: Result of linking the <code>@import</code> attribute</strong></p> 
+<p align="center"><strong>Figure: Result of linking the <code>@import</code> attribute</strong></p>
 <p align="center"><img alt="Result of linking the @import attribute" src="../../../images/import_linked_in_head.png" /></p></li>
 <li>In the <code>priorities1.css</code> file:
 <pre class="prettyprint">
-p: after {content: &quot; : Using @import in CSS area&quot;}
+p: after {content: " : Using @import in CSS area"}
 </pre>
-<p align="center"><strong>Figure: Result of using the <code>@import</code> attribute in the CSS area</strong></p> 
+<p align="center"><strong>Figure: Result of using the <code>@import</code> attribute in the CSS area</strong></p>
 <p align="center"><img alt="Result of using the @import attribute in the CSS area" src="../../../images/import_css_area.png" /></p></li>
 </ul>
 
@@ -319,19 +319,19 @@ p: after {content: &quot; : Using @import in CSS area&quot;}
 <p>The following example shows how you can use JavaScript with HTML either by linking to a JavaScript file, or embedding it directly in the HTML code:</p>
 <pre class="prettyprint">
 /* Linking from HTML */
-&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
+&lt;script src="js/main.js"&gt;&lt;/script&gt;
 
 /* Direct use in HTML */
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated&quot;);
+   var obj = document.querySelector(".animated");
 
-&nbsp;&nbsp;&nbsp;function animate()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Execute */
-&nbsp;&nbsp;&nbsp;};
+   function animate()
+   {
+      /* Execute */
+   };
 
-&nbsp;&nbsp;&nbsp;/* Call the animation function when the event is fired */
-&nbsp;&nbsp;&nbsp;webkitRequestAnimationFrame(animate);
+   /* Call the animation function when the event is fired */
+   webkitRequestAnimationFrame(animate);
 &lt;/script&gt;
 </pre>
 <p>Both ways described above give the same result in behavior. However, the position of the JavaScript code affects the order in which the methods are called.</p>
@@ -340,7 +340,7 @@ p: after {content: &quot; : Using @import in CSS area&quot;}
        <strong>Note</strong>
        Previously, adding JavaScript code within head tag was recommended because it is easy to maintain. Currently, adding it to the end of the body and executing it after parsing the HTML document is common.
 </div>
-       
+
 <h3>JavaScript Events</h3>
 
 <p>JavaScript generally calls a method when a specific <a href="http://www.w3schools.com/jsref/dom_obj_event.asp" target="_blank">event</a> is fired. More than 70 types of events, such as onload and onclick are available.</p>
@@ -349,15 +349,15 @@ p: after {content: &quot; : Using @import in CSS area&quot;}
 
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;body onload=&quot;touchEventHandler()&quot;&gt;
+&lt;body onload="touchEventHandler()"&gt;
 
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;/* JavaScript */
-&nbsp;&nbsp;&nbsp;/* Directly assigning */
-&nbsp;&nbsp;&nbsp;window.onload = touchEventHandler; /* Assigns the name of the subject method */
+   /* JavaScript */
+   /* Directly assigning */
+   window.onload = touchEventHandler; /* Assigns the name of the subject method */
 
-&nbsp;&nbsp;&nbsp;/* Event listener (W3C standard) */
-&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;touchstart&quot;, touchEventHandler, false);
+   /* Event listener (W3C standard) */
+   document.addEventListener("touchstart", touchEventHandler, false);
 &lt;/script&gt;
 </pre>
 <p>Prefer using W3C standard event listener methods. The inline JavaScript code applied directly to an HTML tag is difficult to maintain. Assigning a method directly to an event is also difficult when passing parameters, as the method needs to be assigned for every event.</p>
@@ -380,18 +380,18 @@ p: after {content: &quot; : Using @import in CSS area&quot;}
 <li>To use JavaScript code in the <code>&lt;head&gt;</code> element, place the relevant JavaScript content in a <code>&lt;script&gt;</code> tag:
 <pre class="prettyprint lang-html">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head onload&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;head ready&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+   &lt;script src="js/jquery_1.9.0_min.js"&gt;&lt;/script&gt;
+   &lt;script&gt;
+      window.onload = function()
+      {
+         testLog('head onload');
+      };
+
+      $(document).ready(function()
+      {
+         testLog('head ready');
+      });
+   &lt;/script&gt;
 &lt;/head&gt;
 </pre>
 
@@ -400,31 +400,31 @@ p: after {content: &quot; : Using @import in CSS area&quot;}
 <li>To use JavaScript code in the <code>&lt;body&gt;</code> element, place the relevant JavaScript content in a <code>&lt;script&gt;</code> tag:
 <pre class="prettyprint lang-html">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/jquery_1.9.0_min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function testLog(txt)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var logText = document.querySelector(&#39;.log&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logText.innerHTML += &#39;&lt;li&gt;JavaScript in HTML &#39; + txt + &#39;&lt;/li&gt;&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body onload&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body ready&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;testLog(&#39;body anonymous function&#39;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}();
-&nbsp;&nbsp;&nbsp;&lt;/script&gt;
+   &lt;script src="js/jquery_1.9.0_min.js"&gt;&lt;/script&gt;
+   &lt;script&gt;
+      function testLog(txt)
+      {
+         var logText = document.querySelector('.log');
+         logText.innerHTML += '&lt;li&gt;JavaScript in HTML ' + txt + '&lt;/li&gt;';
+      };
+
+      window.onload = function()
+      {
+         testLog('body onload');
+      };
+
+      $(document).ready(function()
+      {
+         testLog('body ready');
+      });
+
+      testLog('body');
+
+      (function()
+      {
+         testLog('body anonymous function');
+      }();
+   &lt;/script&gt;
 &lt;/body&gt;
 </pre>
 <p>The JavaScript code within the <code>&lt;body&gt;</code> element is sent to Interpreter. The anonymous method is immediately executed, and the HTML DOM structure is set up. The methods in the <code>$(document).ready()</code> method and in the <code>onload</code> event are executed in the stored order.</p>
@@ -434,7 +434,7 @@ p: after {content: &quot; : Using @import in CSS area&quot;}
        <strong>Note</strong>
        jQuery has to be called from both the <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> elements. The <code>logText</code> variable has to be called from the <code>&lt;body&gt;</code> element. The method connected to the <code>onload</code> event in the <code>&lt;head&gt;</code> element is not executed.
 </div>
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/ui/media_query_w.htm b/org.tizen.guides/html/web/w3c/ui/media_query_w.htm
index 7038fb0..9a6746d 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/media_query_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/media_query_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Media Queries</title> 
- </head> 
+  <title>Media Queries</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -31,19 +31,19 @@
                        <li><a href="#priorities">Media Query Priorities</a></li>
                        <li><a href="#create">Creating a Liquid Layout</a>
                        </li>
-               </ul>           
+               </ul>
                <p class="toc-title">Related Info</p>
-               <ul class="toc">        
+               <ul class="toc">
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediaquery">Media Queries API for Mobile Web</a></li>
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#mediaquery">Media Queries API for Wearable Web</a></li>
                        <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Media_Query" target="_blank">Media Query Sample Description</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
  <h1>Media Queries</h1>
- 
+
 <p>Media queries allow you to <a href="#rule">apply the CSS differently according to conditions</a> based on the media type (type of device) and media features (viewport status). Previously, you were able to use the media type only and create Web services with fixed layouts. However, smart phones, tablets, and other devices with various resolutions require a liquid layout. HTML5 now makes various characteristics and conditional defining possible, and can be used to implement responsive Web design (RWD), which is a <a href="#create">liquid layout</a> that mainly reacts according to the device resolution. </p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
@@ -71,7 +71,7 @@
 <li>In HTML
 <p>You can directly import the CSS file that matches the condition:</p>
 <pre class="prettyprint">
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 480px)&quot; href=&quot;example.css&quot;&gt;
+&lt;link rel="stylesheet" media="all and (max-width: 480px)" href="example.css"&gt;
 </pre>
 
 <div class="note">
@@ -93,7 +93,7 @@
 <pre class="prettyprint">
 @media not screen and (min-width: 320px), screen and (max-width: 480px)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}
+   .example: after {content: "width: 320px ~ 480px"}
 }
 </pre>
 </li>
@@ -102,33 +102,33 @@
 <pre class="prettyprint">
 @media all and (min-width: 320px) and (max-width: 480px)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;width: 320px ~ 480px&quot;}
+   .example: after {content: "width: 320px ~ 480px"}
 }
 </pre>
 </li>
 <li>Device and viewport height
-<p>The <code>height</code> attribute refers to restoring the viewport&#39;s height, and the <code>device-height</code> attribute refers to restoring the resolution set in the device.</p>
-<p>The same difference applies to the <code>width</code> and <code>aspect-ratio</code> attributes, which can assign &#39;device-&#39;.</p>
+<p>The <code>height</code> attribute refers to restoring the viewport's height, and the <code>device-height</code> attribute refers to restoring the resolution set in the device.</p>
+<p>The same difference applies to the <code>width</code> and <code>aspect-ratio</code> attributes, which can assign 'device-'.</p>
 <pre class="prettyprint">
 @media screen and (min-device-height: 700px)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-device-height&quot;}
+   .example: after {content: "min-device-height"}
 }
 @media screen and (min-height: 550px)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;min-height&quot;}
+   .example: after {content: "min-height"}
 }
 </pre>
-<p>In the above example, a device with the width-height resolution of 480/720 has the <code>{content: &quot;min-height&quot;}</code> rule applied as a priority in a portrait screen, but the <code>{content &quot;min-device-height&quot;}</code> rule applied in a landscape screen.</p> 
+<p>In the above example, a device with the width-height resolution of 480/720 has the <code>{content: "min-height"}</code> rule applied as a priority in a portrait screen, but the <code>{content "min-device-height"}</code> rule applied in a landscape screen.</p>
 
 </li>
 <li>Device aspect ratio
 <p>You can use the <code>device-aspect-ratio</code> attribute to check the width-length ratio (aspect ratio) of the printing device.</p>
 <pre class="prettyprint">
 @media all and (device-aspect-ratio: 9/16) and (orientation: portrait),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;all and (device-aspect-ratio: 2/3) and (orientation: portrait)
+       all and (device-aspect-ratio: 2/3) and (orientation: portrait)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;aspect-ratio, portrait&quot;}
+   .example: after {content: "aspect-ratio, portrait"}
 }
 </pre>
 
@@ -157,14 +157,14 @@
 <p>To apply media query, consider an example with the following files:</p>
 <pre class="prettyprint">
 &lt;!--example.html--&gt;
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;c.css&quot;&gt;
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (max-width: 768px)&quot; href=&quot;a.css&quot;&gt;
-&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (min-width: 768px)&quot; href=&quot;b.css&quot;&gt;
+&lt;link rel="stylesheet" media="all and (max-width: 768px)" href="c.css"&gt;
+&lt;link rel="stylesheet" media="all and (max-width: 768px)" href="a.css"&gt;
+&lt;link rel="stylesheet" media="all and (min-width: 768px)" href="b.css"&gt;
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;@media all and (max-width: 400px)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.example: after {content: &quot;In HTML head&quot;}
-&nbsp;&nbsp;&nbsp;}
+   @media all and (max-width: 400px)
+   {
+      .example: after {content: "In HTML head"}
+   }
 &lt;/style&gt;
 
 &lt;!--a.css--&gt;
@@ -172,21 +172,21 @@ body {background-color: #ccc}
 
 @media screen and (max-width: 480px)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content:&quot;a.css : width: ~ 480px&quot;}
+   .example: after {content:"a.css : width: ~ 480px"}
 }
 @media screen and (min-width: 480px) and (max-width: 768px)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;a.css : width: 480px ~ 768px&quot;}
+   .example: after {content: "a.css : width: 480px ~ 768px"}
 }
 
 &lt;!--b.css--&gt;
-@import url(&quot;c.css&quot;);
+@import url("c.css");
 
 body {background-color: #333; color: #fff}
 
 @media screen and (min-width: 768px) and (max-width: 1024px)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;b.css : width: 768px ~ 1024px&quot;}
+   .example: after {content: "b.css : width: 768px ~ 1024px"}
 }
 
 &lt;!--c.css--&gt;
@@ -194,11 +194,11 @@ body {background-color: tomato}
 
 @media screen and (min-width: 768px) and (max-width: 1024px)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 768px ~ 1024px&quot;}
+   .example: after {content: "c.css : width: 768px ~ 1024px"}
 }
 @media screen and (min-width: 1024px) and (max-width: 1280px)
 {
-&nbsp;&nbsp;&nbsp;.example: after {content: &quot;c.css : width: 1024px ~ 1280px&quot;}
+   .example: after {content: "c.css : width: 1024px ~ 1280px"}
 }
 </pre>
 
@@ -206,23 +206,23 @@ body {background-color: tomato}
 <ul>
 <li>If the viewport is 320 px:
 <ul>
-<li>The <code>a.css</code> file is applied (based on <code>content: &quot;a.css : width: ~ 480px&quot;</code>).</li>
+<li>The <code>a.css</code> file is applied (based on <code>content: "a.css : width: ~ 480px"</code>).</li>
 <li>The <code>c.css</code> and <code>b.css</code> files are not imported.</li>
-<li>CSS is applied instead of the HTML <code>&lt;head&gt;</code> (the <code>a.css</code> file has higher priority than <code>content: &quot;In HTML head&quot;</code>).</li>
+<li>CSS is applied instead of the HTML <code>&lt;head&gt;</code> (the <code>a.css</code> file has higher priority than <code>content: "In HTML head"</code>).</li>
 </ul></li>
 <li>If the viewport is 700 px:
-<ul><li><p>The <code>a.css</code> file is applied (based on <code>content: &quot;a.css : width: 480px ~ 768px&quot;</code>).</p> </li>
+<ul><li><p>The <code>a.css</code> file is applied (based on <code>content: "a.css : width: 480px ~ 768px"</code>).</p> </li>
 <li>The <code>c.css</code> and <code>b.css</code> files are not imported.</li></ul></li>
 <li>If the viewport is 900 px:
 <ul>
 <li>The <code>b.css</code> file is imported.</li>
-<li>c.css is applied (based on <code>content: &quot;c.css : width: 768px ~ 1024px&quot;</code>). </li>
+<li>c.css is applied (based on <code>content: "c.css : width: 768px ~ 1024px"</code>). </li>
 <li>The <code>a.css</code> file is not imported.</li>
-<li>The <code>b.css</code> file is applied (based on <code>content: &quot;b.css : width: 768px ~ 1024px&quot;</code>).</li>
+<li>The <code>b.css</code> file is applied (based on <code>content: "b.css : width: 768px ~ 1024px"</code>).</li>
 </ul></li>
 </ul>
- 
- 
+
+
        <h2 id="create" name="create">Creating a Liquid Layout</h2>
                        <p>To enhance the user experience of your application, you must learn to define media queries to determine the styles to be used in the Web document. This example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show the optimized layout on both portrait and landscape modes.</p>
 
@@ -231,41 +231,41 @@ body {background-color: tomato}
 <li>Define a page with title and content elements:
 <pre class="prettyprint">
 &lt;header&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;Media queries tutorial&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;&lt;img src=&quot;logo.png&quot; alt=&quot;Tizen&quot;&gt;&lt;/h1&gt;
+   &lt;h1&gt;Media queries tutorial&lt;/h1&gt;
+   &lt;h1&gt;&lt;img src="logo.png" alt="Tizen"&gt;&lt;/h1&gt;
 &lt;/header&gt;
-&lt;div class=&quot;container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;section class=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Section Title&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;desc&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The quick brown fox jumps over a lazy dog.  The quick brown...
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;aside&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aside
-&nbsp;&nbsp;&nbsp;&lt;/aside&gt;
+&lt;div class="container"&gt;
+   &lt;section class="contents"&gt;
+      &lt;h2&gt;Section Title&lt;/h2&gt;
+      &lt;p class="desc"&gt;
+         The quick brown fox jumps over a lazy dog.  The quick brown...
+      &lt;/p&gt;
+   &lt;/section&gt;
+   &lt;aside&gt;
+      Aside
+   &lt;/aside&gt;
 &lt;/div&gt;
 </pre></li>
 <li>Define basic styles for the page, using a flexible box (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">wearable</a> applications) and <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">multi-column</a> (in mobile applications only) layout with 2 columns. (The following figure applies to mobile applications only.)
 <pre class="prettyprint">
 .container
 {
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
+   display: -webkit-flex;
 }
 .container aside
 {
-&nbsp;&nbsp;&nbsp;-webkit-flex: 1 0 20%;
+   -webkit-flex: 1 0 20%;
 }
 .contents
 {
-&nbsp;&nbsp;&nbsp;-webkit-columns: 5em 3;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule: 1px solid #999;
-&nbsp;&nbsp;&nbsp;-webkit-column-gap: 2em;
-&nbsp;&nbsp;&nbsp;-webkit-flex: 1 1 auto;
+   -webkit-columns: 5em 3;
+   -webkit-column-rule: 1px solid #999;
+   -webkit-column-gap: 2em;
+   -webkit-flex: 1 1 auto;
 }
 .contents h2
 {
-&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
+   -webkit-column-span: all;
 }
 </pre>
 
@@ -279,16 +279,16 @@ body {background-color: tomato}
 <pre class="prettyprint">
 @media all and (max-width: 480px) and (orientation: portrait)
 {
-&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 1;}
+   .contents {-webkit-columns: 1;}
 }
 @media all and (min-width: 480px) and (max-width: 768px)
 {
-&nbsp;&nbsp;&nbsp;.contents {-webkit-columns: 2;}
-&nbsp;&nbsp;&nbsp;.container {display: -webkit-flex;}
+   .contents {-webkit-columns: 2;}
+   .container {display: -webkit-flex;}
 }
 </pre>
 <p>With the above media query, the normal resolution has 2 columns (shown on the right in the figure), while in a smaller resolution in a portrait mode only 1 column is used (shown on the left). (The following figure applies to mobile applications only.)</p>
-<p align="center"><img alt="Liquid layout example (in mobile applications only)" src="../../../images/media_queries3.png" /></p> 
+<p align="center"><img alt="Liquid layout example (in mobile applications only)" src="../../../images/media_queries3.png" /></p>
 
 </li>
 <li><p>If you need to define specific styles for a certain resolution range, simply add more media queries. However, too many conditions make the maintenance harder, so carefully consider what kind of resolution ranges you need.
@@ -298,7 +298,7 @@ body {background-color: tomato}
 <pre class="prettyprint">
 &lt;!--Portrait mode of a smart phone--&gt;
 @media screen and (max-width: 480px)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and (orientation: portrait) {&lt;!--Specific layout--&gt;}
+              and (orientation: portrait) {&lt;!--Specific layout--&gt;}
 
 &lt;!--Landscape mode of a smart phone and a small tablet--&gt;
 @media screen and (min-width: 480px) and (max-width: 768px) {&lt;!--Specific layout--&gt;}
@@ -318,7 +318,7 @@ body {background-color: tomato}
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">liquid_layout_2.html</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">logo.png</a></li>
  </ul>
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/ui/multi_mw.htm b/org.tizen.guides/html/web/w3c/ui/multi_mw.htm
index 8a2d3cd..25c68f2 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/multi_mw.htm
+++ b/org.tizen.guides/html/web/w3c/ui/multi_mw.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>CSS Multi-column Layout Module</title> 
- </head> 
+  <title>CSS Multi-column Layout Module</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,22 +33,22 @@
                        <li><a href="#break">Setting the Column Break</a></li>
                        <li><a href="#basic">Creating a Basic Layout</a></li>
                        <li><a href="#dynamic">Creating a Layout with Dynamic Content</a></li>
-               </ul>   
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">CSS Multi-column Layout Module API for Mobile Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
  <h1>CSS Multi-column Layout Module</h1>
- 
+
 
  <p>You can arrange the screen content into columns. Using the CSS <code>column-</code> properties, the content elements can flow between columns when the column height or number changes. You can use the properties alone to <a href="#basic">create a basic layout</a>, or add JavaScript code to <a href="#dynamic">make the layout dynamic</a>.</p>
 
 <p>This feature is supported in mobile applications only.</p>
- 
+
  <p>You can manage the following column-related features:</p>
 <ul>
 <li><a href="#size">Setting the column number and width</a></li>
@@ -62,7 +62,7 @@
        <strong>Note</strong>
        Up to Tizen 2.2, most CSS properties and values used in Tizen required the <code>-webkit-</code> prefix. To ensure future compatibility, these properties can now be used with or without the prefix.
 </div>
-       
+
 <h2 id="size" name="size">Setting the Column Number and Width</h2>
 
 <p> When the layout is set to a constant number of columns using the <code>column-count</code> (or <code>-webkit-column-count)</code> property, the column width is set to fill the available horizontal space.</p>
@@ -71,14 +71,14 @@
 <pre class="prettyprint">
 article
 {
-&nbsp;&nbsp;&nbsp;column-count: 4;
-&nbsp;&nbsp;&nbsp;-webkit-column-count: 4;
-&nbsp;&nbsp;&nbsp;margin: 10px;
+   column-count: 4;
+   -webkit-column-count: 4;
+   margin: 10px;
 }
 </pre>
 
-<p align="center"><strong>Figure: 4 columns on different resolution displays</strong></p> 
-<p align="center"><img alt="4 columns on different resolution displays" src="../../../images/4_columns.png" /></p> 
+<p align="center"><strong>Figure: 4 columns on different resolution displays</strong></p>
+<p align="center"><img alt="4 columns on different resolution displays" src="../../../images/4_columns.png" /></p>
 
 <p>The <code>column-width</code> (or <code>-webkit-column-width)</code> property sets the base column width.</p>
  <p>In the following code snippet and figure, the column width is set to 153 px, but the effective column width is 288 px for a 480 x 800 display (shown on the left) and 154 px for a 720 x 1280 display (shown on the right). The parameter sets the column to at least the defined width, but not wider than the available display space or twice the defined width. The actual column width is calculated using a <a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412/#pseudo-algorithm" target="_blank">pseudo-algorithm</a>.</p>
@@ -87,18 +87,18 @@ article
 <pre class="prettyprint">
 article
 {
-&nbsp;&nbsp;&nbsp;width: 90vw;
-&nbsp;&nbsp;&nbsp;height: 90vh;
-&nbsp;&nbsp;&nbsp;column-width: 153px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;
-&nbsp;&nbsp;&nbsp;margin: 5vw;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
-&nbsp;&nbsp;&nbsp;overflow: scroll;
+   width: 90vw;
+   height: 90vh;
+   column-width: 153px;
+   -webkit-column-width: 153px;
+   margin: 5vw;
+   background: #c3c8ca;
+   overflow: scroll;
 }
 </pre>
 
-<p align="center"><strong>Figure: Column width 153 px on different resolution displays</strong></p> 
-<p align="center"><img alt="Column width 153 px on different resolution displays" src="../../../images/column_width.png" /></p> 
+<p align="center"><strong>Figure: Column width 153 px on different resolution displays</strong></p>
+<p align="center"><img alt="Column width 153 px on different resolution displays" src="../../../images/column_width.png" /></p>
 
 <h2 id="gap" name="gap">Setting the Column Gap</h2>
 <p>The <code>column-gap</code> (or <code>-webkit-column-gap</code>) property sets the distance between columns. The property affects the column width, as the column width, gap, and margins all take available space. In the following code snippet and figure, the column gap is set to 17 px.</p>
@@ -106,18 +106,18 @@ article
 <pre class="prettyprint">
 article
 {
-&nbsp;&nbsp;&nbsp;height: 303px;
-&nbsp;&nbsp;&nbsp;column-width: 153px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 153px;
-&nbsp;&nbsp;&nbsp;column-gap: 17px;
-&nbsp;&nbsp;&nbsp;-webkit-column-gap: 17px;
-&nbsp;&nbsp;&nbsp;margin: 7px;
-&nbsp;&nbsp;&nbsp;padding: 3px;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
+   height: 303px;
+   column-width: 153px;
+   -webkit-column-width: 153px;
+   column-gap: 17px;
+   -webkit-column-gap: 17px;
+   margin: 7px;
+   padding: 3px;
+   background: #c3c8ca;
 }
 </pre>
 
-<p align="center"><strong>Figure: Column gap</strong></p> 
+<p align="center"><strong>Figure: Column gap</strong></p>
 <p align="center"><img alt="Column gap" src="../../../images/column_gap.png" /></p>
 
 <h2 id="rule" name="rule">Setting the Column Rule</h2>
@@ -129,13 +129,13 @@ article
 <pre class="prettyprint">
 article
 {
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 5px;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: rgb(92, 203, 246);
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;
+   -webkit-column-rule-width: 5px;
+   -webkit-column-rule-color: rgb(92, 203, 246);
+   -webkit-column-rule-style: solid;
 }
 </pre>
 
-<p align="center"><strong>Figure: Column rule</strong></p> 
+<p align="center"><strong>Figure: Column rule</strong></p>
 <p align="center"><img alt="Column rule" src="../../../images/column_rule.png" /></p>
 
 <div class="note">
@@ -156,12 +156,12 @@ article
 <pre class="prettyprint">
 article.left header
 {
-&nbsp;&nbsp;&nbsp;column-span: all;
-&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
+   column-span: all;
+   -webkit-column-span: all;
 }
 </pre>
 
-<p align="center"><strong>Figure: Column span</strong></p> 
+<p align="center"><strong>Figure: Column span</strong></p>
 <p align="center"><img alt="Column span" src="../../../images/column_span.png" /></p>
 
 <h2 id="break" name="break">Setting the Column Break</h2>
@@ -172,12 +172,12 @@ article.left header
 <pre class="prettyprint">
 article.lower section
 {
-&nbsp;&nbsp;&nbsp;break-before: always;
-&nbsp;&nbsp;&nbsp;-webkit-column-break-before: always;
+   break-before: always;
+   -webkit-column-break-before: always;
 }
 </pre>
 
-<p align="center"><strong>Figure: Column break</strong></p> 
+<p align="center"><strong>Figure: Column break</strong></p>
 <p align="center"><img alt="Column break" src="../../../images/column_break.png" /></p>
 
 <h2 id="basic" name="basic">Creating a Basic Layout</h2>
@@ -189,32 +189,32 @@ article.lower section
 <p>Create the HTML layout, defining separate sections for the column content and including an image file:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 1&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Lorem ipsum dolor (...), id.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/pinwheel_green.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Maecenas at (...)tortor.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 2&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Nullam bibendum (...) Curabitur.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/Tizen_WhiteFold_4.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Section 3&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Sed sagittis, (...) Vivamus sed est sit amet.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img id=&quot;figure&quot; src=&quot;images/pinwheel_yellow.png&quot; alt=&quot;&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Pellentesque habitant (...). Duis lobortis, nibh.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
+   &lt;article id="article"&gt;
+      &lt;section&gt;
+         &lt;header&gt;
+            &lt;h1&gt;Section 1&lt;/h1&gt;
+         &lt;/header&gt;
+         &lt;p&gt;Lorem ipsum dolor (...), id.&lt;/p&gt;
+         &lt;img src="images/pinwheel_green.png" alt=""&gt;
+         &lt;p&gt;Maecenas at (...)tortor.&lt;/p&gt;
+      &lt;/section&gt;
+      &lt;section&gt;
+         &lt;header&gt;
+            &lt;h1&gt;Section 2&lt;/h1&gt;
+         &lt;/header&gt;
+         &lt;img src="images/Tizen_Pinwheel_Secondary_Confetti.png" alt=""&gt;
+         &lt;p&gt;Nullam bibendum (...) Curabitur.&lt;/p&gt;
+         &lt;img src="images/Tizen_WhiteFold_4.png" alt=""&gt;
+      &lt;/section&gt;
+      &lt;section&gt;
+         &lt;header&gt;
+            &lt;h1&gt;Section 3&lt;/h1&gt;
+         &lt;/header&gt;
+         &lt;p&gt;Sed sagittis, (...) Vivamus sed est sit amet.&lt;/p&gt;
+         &lt;img id="figure" src="images/pinwheel_yellow.png" alt=""&gt;
+         &lt;p&gt;Pellentesque habitant (...). Duis lobortis, nibh.&lt;/p&gt;
+      &lt;/section&gt;
+   &lt;/article&gt;
 &lt;/body&gt;
 </pre></li>
 
@@ -226,13 +226,13 @@ article.lower section
 <pre class="prettyprint">
 article
 {
-&nbsp;&nbsp;&nbsp;width: 80vw;
-&nbsp;&nbsp;&nbsp;column-width: 119px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 119px;
+   width: 80vw;
+   column-width: 119px;
+   -webkit-column-width: 119px;
 
-&nbsp;&nbsp;&nbsp;margin: 2vh 5vw;
-&nbsp;&nbsp;&nbsp;padding: 2vh 5vw;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
+   margin: 2vh 5vw;
+   padding: 2vh 5vw;
+   background: #c3c8ca;
 </pre>
 
 <p>The <code>column-width</code> property defines the default column width but the visible width is not always similar. An algorithm calculates the width according to available space. Normally, a column has a different display width from the one set in the property because as the columns are sized to fill all available space.</p>
@@ -241,8 +241,8 @@ article
 <li>
 <p>Use the <code>column-gap</code> (or <code>-webkit-column-gap</code>) property to set the distance between columns:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;column-gap: 10px;
-&nbsp;&nbsp;&nbsp;-webkit-column-gap: 10px;
+   column-gap: 10px;
+   -webkit-column-gap: 10px;
 </pre>
 </li>
 <li>
@@ -250,12 +250,12 @@ article
 <p>Use the <code>column-rule</code> (or <code>-webkit-column-rule</code>) property to draw a vertical line between columns. Define the width, color, and style of the rule:</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-width: 1px;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-color: #677784;
-&nbsp;&nbsp;&nbsp;-webkit-column-rule-style: solid;
-&nbsp;&nbsp;&nbsp;column-rule-width: 1px;
-&nbsp;&nbsp;&nbsp;column-rule-color: #677784;
-&nbsp;&nbsp;&nbsp;column-rule-style: solid;
+   -webkit-column-rule-width: 1px;
+   -webkit-column-rule-color: #677784;
+   -webkit-column-rule-style: solid;
+   column-rule-width: 1px;
+   column-rule-color: #677784;
+   column-rule-style: solid;
 }
 </pre>
 
@@ -265,18 +265,18 @@ article
 
  <p>The following figure shows the layout with the <code>column-rule</code> <code>width</code> set to 40 px and the <code>column-gap</code> set to 10 px.</p>
 
-<p align="center"><strong>Figure: Column settings</strong></p> 
+<p align="center"><strong>Figure: Column settings</strong></p>
 <p align="center"><img alt="Column settings" src="../../../images/column_settings.png" /></p>
 </li>
 <li>
-<p>Define the <code>footer</code> element with the display height set to 5/100 and padding set to 2 * 2vh:</p> 
+<p>Define the <code>footer</code> element with the display height set to 5/100 and padding set to 2 * 2vh:</p>
 
 <pre class="prettyprint">
 footer
 {
-&nbsp;&nbsp;&nbsp;padding: 2vh;
-&nbsp;&nbsp;&nbsp;height: 5vh;
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
+   padding: 2vh;
+   height: 5vh;
+   background: rgba(103, 119, 132, 0.2);
 }
 </pre>
 </li>
@@ -286,9 +286,9 @@ footer
 <pre class="prettyprint">
 article&gt;section
 {
-&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;
-&nbsp;&nbsp;&nbsp;padding: 4px 0;
-&nbsp;&nbsp;&nbsp;text-align: center;
+   border-bottom: 1px solid #d8d9d4;
+   padding: 4px 0;
+   text-align: center;
 }
 </pre>
 </li>
@@ -299,24 +299,24 @@ article&gt;section
 <pre class="prettyprint">
 img
 {
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;margin: 4px auto;
+   display: block;
+   margin: 4px auto;
 }
 
 #figure
 {
-&nbsp;&nbsp;&nbsp;float: right;        
-&nbsp;&nbsp;&nbsp;margin: 4px;
+   float: right;
+   margin: 4px;
 }
 </pre>
 </li></ol>
 
 <p>The following figures illustrate the created layout in different display sizes and orientations.</p>
 
-<p align="center"><strong>Figure: Basic layout on a 480 x 800 display</strong></p> 
+<p align="center"><strong>Figure: Basic layout on a 480 x 800 display</strong></p>
 <p align="center"><img alt="Basic layout on a 480 x 800 display" src="../../../images/basic_layout_480x800.png" /></p>
 
-<p align="center"><strong>Figure: Basic layout on a 720 x 1280 display</strong></p> 
+<p align="center"><strong>Figure: Basic layout on a 720 x 1280 display</strong></p>
 <p align="center"><img alt="Basic layout on a 720 x 1280 display" src="../../../images/basic_layout_720x1280.png" /></p>
 
 <h3>Source Code</h3>
@@ -329,23 +329,23 @@ img
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
  </ul>
-                       
+
                                <h2 id="dynamic" name="dynamic">Creating a Layout with Dynamic Content</h2>
-                               
+
                        <p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a layout displaying a varying amount of content using CSS:</p>
 <ol>
 <li>
 <p>Create the HTML layout. The <code>article</code> element displays the columns, and the <code>nav</code> element contains buttons to add and remove content in the columns.</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;article id=&quot;article&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&nbsp;&nbsp;&nbsp;&lt;nav&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;addSections&quot; href=&quot;#&quot;&gt;Add images&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;howMany&quot; value=&quot;3&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a id=&quot;removeGroup&quot; href=&quot;#&quot;&gt;Remove last Group&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;/nav&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer&gt; Multicolumn Layout Tutorial 02&lt;/footer&gt;
+   &lt;article id="article"&gt;
+   &lt;/article&gt;
+   &lt;nav&gt;
+      &lt;a id="addSections" href="#"&gt;Add images&lt;/a&gt;
+      &lt;input type="number" id="howMany" value="3"/&gt;
+      &lt;a id="removeGroup" href="#"&gt;Remove last Group&lt;/a&gt;
+   &lt;/nav&gt;
+   &lt;footer&gt; Multicolumn Layout Tutorial 02&lt;/footer&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -356,11 +356,11 @@ img
 <pre class="prettyprint">
 body
 {
-&nbsp;&nbsp;&nbsp;display: flex;
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;flex-direction: column;
-&nbsp;&nbsp;&nbsp;-webkit-flex-direction: column;
-&nbsp;&nbsp;&nbsp;background: #fefffa;
+   display: flex;
+   display: -webkit-flex;
+   flex-direction: column;
+   -webkit-flex-direction: column;
+   background: #fefffa;
 }
 </pre>
 </li>
@@ -370,22 +370,22 @@ body
 <pre class="prettyprint">
 nav
 {
-&nbsp;&nbsp;&nbsp;height: 20vh;
-&nbsp;&nbsp;&nbsp;padding-left: 20%;
-&nbsp;&nbsp;&nbsp;padding-top: 10px;
-&nbsp;&nbsp;&nbsp;display: flex;
-&nbsp;&nbsp;&nbsp;display: -webkit-flex;
-&nbsp;&nbsp;&nbsp;flex-flow: row wrap;
-&nbsp;&nbsp;&nbsp;-webkit-flex-flow: row wrap;
-&nbsp;&nbsp;&nbsp;flex: none;
-&nbsp;&nbsp;&nbsp;-webkit-flex: none;
-&nbsp;&nbsp;&nbsp;justify-content: space-around;
-&nbsp;&nbsp;&nbsp;-webkit-justify-content: space-around;
-&nbsp;&nbsp;&nbsp;align-items: center;
-&nbsp;&nbsp;&nbsp;-webkit-align-items: center;
-&nbsp;&nbsp;&nbsp;background: url(../images/white_logo.png) no-repeat;
-&nbsp;&nbsp;&nbsp;background-position: 2%;
-&nbsp;&nbsp;&nbsp;background-size: auto 70%;
+   height: 20vh;
+   padding-left: 20%;
+   padding-top: 10px;
+   display: flex;
+   display: -webkit-flex;
+   flex-flow: row wrap;
+   -webkit-flex-flow: row wrap;
+   flex: none;
+   -webkit-flex: none;
+   justify-content: space-around;
+   -webkit-justify-content: space-around;
+   align-items: center;
+   -webkit-align-items: center;
+   background: url(../images/white_logo.png) no-repeat;
+   background-position: 2%;
+   background-size: auto 70%;
 }
 </pre>
 </li>
@@ -394,12 +394,12 @@ nav
 <pre class="prettyprint">
 nav a
 {
-&nbsp;&nbsp;&nbsp;margin: 3px;
-&nbsp;&nbsp;&nbsp;border-radius: 5px;
-&nbsp;&nbsp;&nbsp;padding: 5px 15px;
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;font-weight: bold;
+   margin: 3px;
+   border-radius: 5px;
+   padding: 5px 15px;
+   background: rgba(103, 119, 132, 0.2);
+   text-align: center;
+   font-weight: bold;
 }
 </pre>
 <p>When the user taps the <strong>Add images</strong> button, the images and their descriptions are displayed.</p>
@@ -409,8 +409,8 @@ nav a
 <pre class="prettyprint">
 nav input
 {
-&nbsp;&nbsp;&nbsp;width: 50px;
-&nbsp;&nbsp;&nbsp;height: 2em;
+   width: 50px;
+   height: 2em;
 }
 </pre>
 </li>
@@ -419,12 +419,12 @@ nav input
 <pre class="prettyprint">
 article
 {
-&nbsp;&nbsp;&nbsp;width: 90vw;
-&nbsp;&nbsp;&nbsp;column-width: 136px;
-&nbsp;&nbsp;&nbsp;-webkit-column-width: 136px;
-&nbsp;&nbsp;&nbsp;margin: 1vh 2vh;
-&nbsp;&nbsp;&nbsp;padding: 1vh;
-&nbsp;&nbsp;&nbsp;background: #c3c8ca;
+   width: 90vw;
+   column-width: 136px;
+   -webkit-column-width: 136px;
+   margin: 1vh 2vh;
+   padding: 1vh;
+   background: #c3c8ca;
 }
 </pre>
 </li>
@@ -433,8 +433,8 @@ article
 <pre class="prettyprint">
 article img
 {
-&nbsp;&nbsp;&nbsp;margin: 0 auto;
-&nbsp;&nbsp;&nbsp;display: block;
+   margin: 0 auto;
+   display: block;
 }
 </pre>
 </li>
@@ -443,12 +443,12 @@ article img
 <pre class="prettyprint">
 article&gt;h1
 {
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.5);
-&nbsp;&nbsp;&nbsp;padding: 4px;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;color: #eed484;
-&nbsp;&nbsp;&nbsp;column-span: all;
-&nbsp;&nbsp;&nbsp;-webkit-column-span: all;
+   background: rgba(103, 119, 132, 0.5);
+   padding: 4px;
+   text-align: center;
+   color: #eed484;
+   column-span: all;
+   -webkit-column-span: all;
 }
 </pre>
 <p> As a result, the <code>h1</code> elements are spread across the columns. When the <code>column-span</code> property is used, you cannot have more columns than can fit in the available horizontal space.</p>
@@ -458,11 +458,11 @@ article&gt;h1
 <pre class="prettyprint">
 article&gt;section
 {
-&nbsp;&nbsp;&nbsp;break-inside: avoid;
-&nbsp;&nbsp;&nbsp;-webkit-column-break-inside: avoid;
-&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #d8d9d4;
-&nbsp;&nbsp;&nbsp;padding: 4px 0;
-&nbsp;&nbsp;&nbsp;text-align: center;
+   break-inside: avoid;
+   -webkit-column-break-inside: avoid;
+   border-bottom: 1px solid #d8d9d4;
+   padding: 4px 0;
+   text-align: center;
 }
 </pre>
 </li>
@@ -471,9 +471,9 @@ article&gt;section
 <pre class="prettyprint">
 footer
 {
-&nbsp;&nbsp;&nbsp;padding: 2vh;
-&nbsp;&nbsp;&nbsp;height: 5vh;
-&nbsp;&nbsp;&nbsp;background: rgba(103, 119, 132, 0.2);
+   padding: 2vh;
+   height: 5vh;
+   background: rgba(103, 119, 132, 0.2);
 }
 </pre>
 </li>
@@ -485,10 +485,10 @@ footer
 <p>Declare a variable for the images. Elements included in the variable amount to data displayed in a column layout, such as a newsfeed:</p>
 <pre class="prettyprint">
 var images =
-&nbsp;&nbsp;&nbsp;[&quot;images/pinwheel_green.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_Pinwheel_Secondary_Confetti.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/Tizen_WhiteFold_4.png&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&quot;images/pinwheel_yellow.png&quot;];
+   ["images/pinwheel_green.png",
+    "images/Tizen_Pinwheel_Secondary_Confetti.png",
+    "images/Tizen_WhiteFold_4.png",
+    "images/pinwheel_yellow.png"];
 </pre>
 </li>
 <li>
@@ -503,22 +503,22 @@ var howManyInput;
 <pre class="prettyprint">
 window.onload = function()
 {
-&nbsp;&nbsp;&nbsp;addGroup(4);
-&nbsp;&nbsp;&nbsp;howManyInput = document.getElementById(&#39;howMany&#39;);
-&nbsp;&nbsp;&nbsp;var addBtn = document.getElementById(&#39;addSections&#39;);
-&nbsp;&nbsp;&nbsp;addBtn.onclick = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addGroup(howManyInput.value);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;var removeBtn = document.getElementById(&#39;removeGroup&#39;);
-&nbsp;&nbsp;&nbsp;removeBtn.onclick = function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;removeGroup();
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;};
+   addGroup(4);
+   howManyInput = document.getElementById('howMany');
+   var addBtn = document.getElementById('addSections');
+   addBtn.onclick = function()
+   {
+      addGroup(howManyInput.value);
+
+      return false;
+   };
+   var removeBtn = document.getElementById('removeGroup');
+   removeBtn.onclick = function()
+   {
+      removeGroup();
+
+      return false;
+   };
 };
 </pre>
 </li>
@@ -529,18 +529,18 @@ window.onload = function()
 <pre class="prettyprint">
 function addGroup(howMany)
 {
-&nbsp;&nbsp;&nbsp;var h1No = document.querySelectorAll(&#39;article&gt;h1&#39;).length + 1;
-&nbsp;&nbsp;&nbsp;var newHTML = &quot;&lt;h1&gt;Group &quot; + h1No + &quot;&lt;/h1&gt;&quot;;
-&nbsp;&nbsp;&nbsp;var i;
-
-&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; howMany; ++i)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&lt;section&gt;&lt;img alt=&#39;&#39; src=&#39;&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += images[Math.floor(Math.random() * 4)];
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newHTML += &quot;&#39;&gt;Lorem ipsum dolor sit amet diam sodales rutrum.&lt;/section&gt;&quot;;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;var art = document.getElementById(&quot;article&quot;);
-&nbsp;&nbsp;&nbsp;art.innerHTML += newHTML;
+   var h1No = document.querySelectorAll('article&gt;h1').length + 1;
+   var newHTML = "&lt;h1&gt;Group " + h1No + "&lt;/h1&gt;";
+   var i;
+
+   for (i = 0; i &lt; howMany; ++i)
+   {
+      newHTML += "&lt;section&gt;&lt;img alt='' src='";
+      newHTML += images[Math.floor(Math.random() * 4)];
+      newHTML += "'&gt;Lorem ipsum dolor sit amet diam sodales rutrum.&lt;/section&gt;";
+   }
+   var art = document.getElementById("article");
+   art.innerHTML += newHTML;
 }
 </pre>
 </li>
@@ -549,14 +549,14 @@ function addGroup(howMany)
 <pre class="prettyprint">
 function removeGroup()
 {
-&nbsp;&nbsp;&nbsp;var all = document.querySelectorAll(&#39;article&gt;h1&#39;);
-&nbsp;&nbsp;&nbsp;var last = all.length - 1;
-&nbsp;&nbsp;&nbsp;if (last &lt; 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;removeNextSibling(all[last].nextSibling);
-&nbsp;&nbsp;&nbsp;all[last].parentElement.removeChild(all[last]);
+   var all = document.querySelectorAll('article&gt;h1');
+   var last = all.length - 1;
+   if (last &lt; 0)
+   {
+      return;
+   }
+   removeNextSibling(all[last].nextSibling);
+   all[last].parentElement.removeChild(all[last]);
 }
 </pre>
 </li>
@@ -564,10 +564,10 @@ function removeGroup()
 </li></ol>
 <p>The following figures illustrate the created layout in different display sizes and orientations.</p>
 
-<p align="center"><strong>Figure: Dynamic layout on a 480 x 800 display</strong></p> 
+<p align="center"><strong>Figure: Dynamic layout on a 480 x 800 display</strong></p>
 <p align="center"><img alt="Dynamic layout on a 480 x 800 display" src="../../../images/dynamic_layout_480x800.png" /></p>
 
-<p align="center"><strong>Figure: Dynamic layout on a 720 x 1280 display</strong></p> 
+<p align="center"><strong>Figure: Dynamic layout on a 720 x 1280 display</strong></p>
 <p align="center"><img alt="Dynamic layout on a 720 x 1280 display" src="../../../images/dynamic_layout_720x1280.png" /></p>
 <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following files:</p>
@@ -581,8 +581,8 @@ function removeGroup()
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">white_logo.png</a></li>
  </ul>
-                       
- 
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/ui/multiple_screens_mw.htm b/org.tizen.guides/html/web/w3c/ui/multiple_screens_mw.htm
index 9488da1..4a1f5b4 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/multiple_screens_mw.htm
+++ b/org.tizen.guides/html/web/w3c/ui/multiple_screens_mw.htm
@@ -36,7 +36,7 @@
 
 <div id="container"><div id="contents"><div class="content">
   <h1>Multiple Screen Support</h1>
-  
+
   <p>Tizen is available in various devices which support different screen sizes and resolutions. When developing Tizen Web applications, you must take this into account if you want your application to function well in various device models.</p>
 
 <p>This feature is supported in mobile applications only.</p>
@@ -66,17 +66,17 @@
    <li>Determine the CSS layout to be used based on the screen width.</li>
   </ul>
   <h2 id="ui" name="ui">UI Scalability</h2>
-  <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application&#39;s logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <code>rem</code> unit to determine the size of the Tizen Web UI components.</p>
+  <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application's logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <code>rem</code> unit to determine the size of the Tizen Web UI components.</p>
   <h3 id="set" name="set">Setting the Viewport</h3>
   <p>Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions.</p>
   <p>In the following example, the viewport width is set to <code>device-width</code>, which is determined by the width of the Tizen device. The <code>device-width</code> value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)</p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;
+&lt;meta name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
 </pre>
   <p>If the viewport width is set to <code>device-width</code>, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (<code>http://tizen.org</code>) on different devices with the viewport width set to <code>device-width</code>.</p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no&quot;&gt;
+&lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt;
 </pre>
 
 <p align="center" class="Table"><strong>Table: Layout size and scale factor</strong></p>
@@ -121,49 +121,49 @@
   <h3 id="configure" name="configure">Configuring the Viewport</h3>
   <p>To use UI scalability in your application, set the <code>viewport</code> meta tag while <a href="../../../../../org.tizen.training/html/web/process/app_dev_process_w.htm">creating a Web application project</a> in the Tizen Studio. To configure the viewport in the Tizen Web applications, add the <code>viewport</code> meta tag in the <code>&lt;head&gt;</code> section of the <code>index.html</code> file:</p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content=&quot;width=device-width, initial-scale=1.0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt;
+&lt;meta name="viewport"
+      content="width=device-width, initial-scale=1.0,
+               minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
 </pre>
   <h3 id="optimize" name="optimize">Optimizing Resources</h3>
   <p>By default, the Tizen Advanced UI (TAU) consists of the HD Web winsets. The winset scale is lowered for lower screen resolution devices. To optimize resources for different screen resolutions and devices, use the <a href="#css">CSS media query</a> for different resolutions available in Tizen. You can use CSS media queries in the HTML or CSS files.</p>
   <p>In the HTML file:</p>
 <pre class="prettyprint">
-&lt;link media=&quot;only screen and (min-resolution: 320dpi)&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href=&quot;high-quality-images.css&quot; type= &quot;text/css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;link media="only screen and (min-resolution: 320dpi)"
+      href="high-quality-images.css" type= "text/css" rel="stylesheet"&gt;
 </pre>
   <p>In the CSS file:</p>
 <pre class="prettyprint lang-html">
 @media screen and (max-resolution: 159dpi)
 {
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+   &lt;!--Set styles--&gt;
 }
 
 @media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
 {
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+   &lt;!--Set styles--&gt;
 }
 
 @media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
 {
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+   &lt;!--Set styles--&gt;
 }
 
 @media screen and (min-resolution: 320dpi)
 {
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+   &lt;!--Set styles--&gt;
 }
 </pre>
   <p>You can also set different layout and resources for the portrait and landscape views in the CSS file:</p>
 <pre class="prettyprint lang-html">
 @media screen and (orientation: portrait)
 {
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+   &lt;!--Set styles--&gt;
 }
 
 @media screen and (orientation: landscape)
 {
-&nbsp;&nbsp;&nbsp;&lt;!--Set styles--&gt;
+   &lt;!--Set styles--&gt;
 }
 </pre>
   <h3 id="independent" name="independent">Creating Screen Resolution-independent UI</h3>
@@ -190,15 +190,15 @@
     <p>An image can be added to an application using the HTML <code>img</code> tag, or CSS <code>background</code> property as shown in the following example:</p>
 <pre class="prettyprint">
 &lt;!--HTML--&gt;
-&lt;img src=&quot;images/sample.jpg&quot; alt=&quot;sample image&quot;/&gt;
+&lt;img src="images/sample.jpg" alt="sample image"/&gt;
 
 &lt;!--CSS--&gt;
 .photo
 {
-&nbsp;&nbsp;&nbsp;background: url(../images/sample.jpg) 0 0 no-repeat;
-&nbsp;&nbsp;&nbsp;background-size: 100%;
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 200px;
+   background: url(../images/sample.jpg) 0 0 no-repeat;
+   background-size: 100%;
+   width: 100%;
+   height: 200px;
 }
 </pre>
 <p>In terms of performance, there is no difference between the options.</p>
@@ -209,7 +209,7 @@
 <pre class="prettyprint">
 img
 {
-&nbsp;&nbsp;&nbsp;max-width: 100%;
+   max-width: 100%;
 }
 </pre>
 
@@ -220,18 +220,18 @@ img
 <pre class="prettyprint">
 .prev_icon, .next_icon
 {
-&nbsp;&nbsp;&nbsp;padding-left: 30px;
-&nbsp;&nbsp;&nbsp;height: 30px;
-&nbsp;&nbsp;&nbsp;line-height: 30px;
-&nbsp;&nbsp;&nbsp;font-size: 1.2em;
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
-&nbsp;&nbsp;&nbsp;background-position: 0 50%;
-&nbsp;&nbsp;&nbsp;background-size: auto 20px;
+   padding-left: 30px;
+   height: 30px;
+   line-height: 30px;
+   font-size: 1.2em;
+   background-repeat: no-repeat;
+   background-position: 0 50%;
+   background-size: auto 20px;
 }
 
 .prev_icon.icon1
 {
-&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow_left_01.png);
+   background-image: url(../images/page_navi_arrow_left_01.png);
 }
 </pre>
 
@@ -245,18 +245,18 @@ img
 <pre class="prettyprint lang-html">
 .prev_icon, .next_icon
 {
-&nbsp;&nbsp;&nbsp;background-size: 20px auto; &lt;!--Full HD Display--&gt;
-&nbsp;&nbsp;&nbsp;background-image: url(../images/page_navi_arrow.png);
+   background-size: 20px auto; &lt;!--Full HD Display--&gt;
+   background-image: url(../images/page_navi_arrow.png);
 }
 
 .prev_icon.icon1
 {
-&nbsp;&nbsp;&nbsp;background-position: 0 0;
+   background-position: 0 0;
 }
 
 .prev_icon.icon2
 {
-&nbsp;&nbsp;&nbsp;background-position: 0 -50px;
+   background-position: 0 -50px;
 }
 </pre>
 <p align="center"><strong>Figure: Network speed when using sprite images</strong></p>
@@ -308,12 +308,12 @@ Network: Used until the animation is stopped.</li></ul>
 <p>The following example shows how JavaScript animation can be implemented:</p>
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0;
-&nbsp;&nbsp;&nbsp;function animate()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;setInterval(animate, 100);
+   var obj = document.querySelector(".animated img"), flag = 0;
+   function animate()
+   {
+      obj.src = './images/sprite_' + ((flag++) % 10) + '.png';
+   };
+   setInterval(animate, 100);
 &lt;/script&gt;
 </pre>
 
@@ -321,14 +321,14 @@ Network: Used until the animation is stopped.</li></ul>
 
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;var obj = document.querySelector(&quot;.animated img&quot;), flag = 0, i = 0;
-&nbsp;&nbsp;&nbsp;function animate()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!(i % 6)) obj.src = &#39;./images/sprite_&#39; + ((flag++) % 10) + &#39;.png&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i++;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
-&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;-webkit-RequestAnimationFrame(animate);
+   var obj = document.querySelector(".animated img"), flag = 0, i = 0;
+   function animate()
+   {
+      if (!(i % 6)) obj.src = './images/sprite_' + ((flag++) % 10) + '.png';
+         i++;
+      -webkit-RequestAnimationFrame(animate);
+   };
+   -webkit-RequestAnimationFrame(animate);
 &lt;/script&gt;
 </pre>
 
@@ -350,19 +350,19 @@ Network: 9 ~ 21 ms</li></ul>
     <p>The following example shows how CSS3 animation can be implemented:</p>
 <pre class="prettyprint">
 &lt;style&gt;
-&nbsp;&nbsp;&nbsp;.css_animation
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 70px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(../images/sprite.png);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: cssAni .8s steps(10) infinite;
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@-webkit-keyframes cssAni
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;from {background-position: 0px;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to {background-position: -500px;}
-&nbsp;&nbsp;&nbsp;}
+   .css_animation
+   {
+      width: 50px;
+      height: 70px;
+      background-image: url(../images/sprite.png);
+      -webkit-animation: cssAni .8s steps(10) infinite;
+   }
+
+   @-webkit-keyframes cssAni
+   {
+      from {background-position: 0px;}
+      to {background-position: -500px;}
+   }
 &lt;/style&gt;
 </pre>
 
diff --git a/org.tizen.guides/html/web/w3c/ui/selector_w.htm b/org.tizen.guides/html/web/w3c/ui/selector_w.htm
index c3f8d51..7ab9165 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/selector_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/selector_w.htm
@@ -66,90 +66,90 @@
   <li>To select the first matching element found in the child nodes, use the <code>querySelector()</code> method with <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS selectors</a>. You get the same result as when using the <code>getElementById()</code>, <code>getElementsByTagName()</code>, and <code>getElementsByClassName()</code> methods.
 <pre class="prettyprint">
 /* First &lt;td&gt; element in the document */
-var obj1 = document.getElementsByTagName(&#39;td&#39;)[0];
+var obj1 = document.getElementsByTagName('td')[0];
 /* Element with the ID #foo */
-var obj2 = document.getElementById(&#39;foo&#39;);
+var obj2 = document.getElementById('foo');
 /* First element in the bar class */
-var obj3 = document.getElementsByClassName(&#39;bar&#39;)[0];
+var obj3 = document.getElementsByClassName('bar')[0];
 
-var obj4 = document.querySelector(&#39;td&#39;); /* Same as obj1 */
-var obj5 = document.querySelector(&#39;#foo&#39;); /* Same as obj2 */ 
-var obj6 = document.querySelector(&#39;.bar&#39;); /* Same as obj3 */
+var obj4 = document.querySelector('td'); /* Same as obj1 */
+var obj5 = document.querySelector('#foo'); /* Same as obj2 */
+var obj6 = document.querySelector('.bar'); /* Same as obj3 */
 </pre>
 <p>The <code>querySelector()</code> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <code>null</code>.</p></li>
   <li>You can use the CSS selectors to ensure that elements with complex structures can be easily selected.
   <p>For example, the following example selects the last element among the child nodes of the second <code>&lt;tr&gt;</code> element, which is a child of the <code>&lt;tbody&gt;</code> element in the second <code>&lt;table&gt;</code> element of the document.</p>
 <pre class="prettyprint">
 var obj =
-&nbsp;&nbsp;&nbsp;document.querySelector(&#39;table:nth-child(2) tbody &gt; tr:nth-child(2) :last-child&#39;);
+   document.querySelector('table:nth-child(2) tbody &gt; tr:nth-child(2) :last-child');
 </pre></li>
   <li>You can use method chaining to select an element:
 <pre class="prettyprint">
-var obj = document.querySelector(&#39;table:nth-child(2)&#39;);
-var targetObj = obj.querySelector(&#39;tbody &gt; tr:nth-child(2) :last-child&#39;);
+var obj = document.querySelector('table:nth-child(2)');
+var targetObj = obj.querySelector('tbody &gt; tr:nth-child(2) :last-child');
 </pre></li>
 </ol>
 
-<p align="center"><strong>Figure: Single node selection (in mobile applications only)</strong></p> 
-<p align="center"><img alt="Single node selection (in mobile applications only)" src="../../../images/single_node_selection.png" /></p> 
+<p align="center"><strong>Figure: Single node selection (in mobile applications only)</strong></p>
+<p align="center"><img alt="Single node selection (in mobile applications only)" src="../../../images/single_node_selection.png" /></p>
   <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
  </ul>
-               
+
                                <h2 id="multi" name="multi">Selecting Multiple Nodes</h2>
                        <p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select multiple nodes in a node list:</p>
   <ol>
   <li>Select an element in the node list using the <code>querySelector()</code> method:
 <pre class="prettyprint">
-var obj = document.querySelector(&#39;table:nth-child(2)&#39;);
+var obj = document.querySelector('table:nth-child(2)');
 </pre>
 <p>The <code>querySelector()</code> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <code>null</code>. The query above selects the second <code>&lt;table&gt;</code> element in the document as a single element.</p>
 </li>
 
 <li>Select multiple elements in the node list using the <code>querySelectorAll()</code> method, and define a variable to represent the length of the <code>targetObj</code> node list:
 <pre class="prettyprint">
-var targetObj = obj.querySelectorAll(&#39;thead th, tbody td&#39;);
+var targetObj = obj.querySelectorAll('thead th, tbody td');
 var i = targetObj.length;
 </pre>
 <p> The <code>querySelectorAll()</code> method returns an array containing all of the matching element nodes within the subtrees of the context node, in the document order, and saves the elements in a node list. If there are no matching nodes, the method returns an empty array. The query above selects the <code>&lt;th&gt;</code> elements in the table head and the <code>&lt;td&gt;</code> elements in the table body.</p>
- </li> 
+ </li>
 <li>Apply a defined style to all elements stored in the <code>targetObj</code> node list:
 <pre class="prettyprint">
 while (0 &lt; i)
 {
-&nbsp;&nbsp;&nbsp;i--;
-&nbsp;&nbsp;&nbsp;targetObj[i].style.backgroundColor = &#39;orange&#39;;
-&nbsp;&nbsp;&nbsp;targetObj[i].textContent = &#39;Exam 3&#39; + i;
+   i--;
+   targetObj[i].style.backgroundColor = 'orange';
+   targetObj[i].textContent = 'Exam 3' + i;
 }
 </pre></li></ol>
 
-  <p align="center"><strong>Figure: Multiple node selection (in mobile applications only)</strong></p> 
+  <p align="center"><strong>Figure: Multiple node selection (in mobile applications only)</strong></p>
   <p align="center"><img alt="Multiple node selection (in mobile applications only)" src="../../../images/multi_node_selection.png" /></p>
    <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
  </ul>
-               
+
                                <h2 id="create" name="create">Creating an Accordion Menu</h2>
-                               
+
                        <p>To enhance the user experience of your application, you must learn to retrieve element nodes from the DOM tree to create a simple accordion menu.</p>
   <p>The accordion menu is created using the CSS3 Basic User Interface Module Level 3 API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">wearable</a> applications). When a title is touched, the relevant content is shown, and other content is hidden.</p>
   <ol>
-  <li>Create the HTML layout: 
+  <li>Create the HTML layout:
 <pre class="prettyprint">
-&lt;ul class=&quot;accordion&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;title current&quot;&gt;Title 1&lt;p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;contents 1&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class="title"&gt;Title 2&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;contents 2&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Other list elements--&gt;
+&lt;ul class="accordion"&gt;
+   &lt;li&gt;
+      &lt;p class="title current"&gt;Title 1&lt;p&gt;
+      &lt;div&gt;contents 1&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li&gt;
+      &lt;p class="title"&gt;Title 2&lt;/p&gt;
+      &lt;div&gt;contents 2&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;!--Other list elements--&gt;
 &lt;/ul&gt;
 </pre></li>
 
@@ -157,66 +157,66 @@ while (0 &lt; i)
 <pre class="prettyprint lang-html">
 .accordion  &gt; li  &gt; div
 {
-&nbsp;&nbsp;&nbsp;padding: 0 15px;
-
-&nbsp;&nbsp;&nbsp;&lt;!--Assign time for CSS transformation--&gt;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all .5s;
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;height: 0;
-&nbsp;&nbsp;&nbsp;box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .5);
-&nbsp;&nbsp;&nbsp;line-height: 2;
+   padding: 0 15px;
+
+   &lt;!--Assign time for CSS transformation--&gt;
+   -webkit-transition: all .5s;
+   opacity: 0;
+   height: 0;
+   box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .5);
+   line-height: 2;
 }
 &lt;!--Assign styles to be applied in case the current class is added to p.title--&gt;
 .accordion  &gt; li  &gt; p.current
 {
-&nbsp;&nbsp;&nbsp;background: -webkit-linear-gradient(top, #666, #000);
-&nbsp;&nbsp;&nbsp;color: #fff;
+   background: -webkit-linear-gradient(top, #666, #000);
+   color: #fff;
 }
 .accordion &gt; li &gt; p.current + div
 {
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;height: 200px;
+   opacity: 1;
+   height: 200px;
 }
 </pre></li>
 <li>Use the <code>querySelector()</code> and <code>querySelectorAll()</code> methods to change the class of the subject in the elements where the event is fired:
 <pre class="prettyprint">
 var testAccordion = function(obj)
 {
-&nbsp;&nbsp;&nbsp;var targetObj = document.querySelector(obj);
-&nbsp;&nbsp;&nbsp;var targetLength = document.querySelectorAll(obj + &#39;li&#39;).length;
-
-&nbsp;&nbsp;&nbsp;/* In case the elements are not selected */
-&nbsp;&nbsp;&nbsp;if (targetLength &lt;= 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;targetObj.onclick = function(e)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var that = e.target;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* In case the e.target class is not title */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((that.className !== &#39;title&#39;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; targetLength; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Change all classes of the &#39;li p&#39; elements
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   at the bottom of .accordion to title
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;targetObj.querySelectorAll(&#39;li p&#39;)[i].className = &#39;title&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Define the e.target class as current */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;that.className += &#39;current&#39;;
-&nbsp;&nbsp;&nbsp;}
+   var targetObj = document.querySelector(obj);
+   var targetLength = document.querySelectorAll(obj + 'li').length;
+
+   /* In case the elements are not selected */
+   if (targetLength &lt;= 0)
+      return false;
+
+   targetObj.onclick = function(e)
+   {
+      var that = e.target;
+
+      /* In case the e.target class is not title */
+      if ((that.className !== 'title'))
+         return false;
+
+      for (var i = 0; i &lt; targetLength; i++)
+      {
+         /*
+            Change all classes of the 'li p' elements
+            at the bottom of .accordion to title
+         */
+         targetObj.querySelectorAll('li p')[i].className = 'title';
+      }
+      /* Define the e.target class as current */
+      that.className += 'current';
+   }
 }
 </pre>
 </li>
 <li>Define the elements that use the accordion menu:
 <pre class="prettyprint">
-testAccordion(&#39;.accordion&#39;);
+testAccordion('.accordion');
 </pre></li></ol>
 
- <p align="center"><strong>Figure: Accordion menu (in mobile applications only)</strong></p> 
+ <p align="center"><strong>Figure: Accordion menu (in mobile applications only)</strong></p>
  <p align="center"><img alt="Accordion menu (in mobile applications only)" src="../../../images/accordion_menu.png" /></p>
    <h3>Source Code</h3>
  <p>For the complete source code related to this use case, see the following file:</p>
diff --git a/org.tizen.guides/html/web/w3c/ui/session_history_w.htm b/org.tizen.guides/html/web/w3c/ui/session_history_w.htm
index ce978c5..1068c75 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/session_history_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/session_history_w.htm
@@ -42,11 +42,11 @@
 
 
   <h1>HTML5 Session History</h1>
- 
- <p>You can manage the session history of browsing contexts. The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface is used to save in the session history the page information that has been read by the user. You can also use the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object to directly store the page information which has already been analyzed in the URL, or general information which is not stored in the URL (such as location, or the scroll state of the page or a certain DOM element).</p> 
- 
+
+ <p>You can manage the session history of browsing contexts. The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface is used to save in the session history the page information that has been read by the user. You can also use the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object to directly store the page information which has already been analyzed in the URL, or general information which is not stored in the URL (such as location, or the scroll state of the page or a certain DOM element).</p>
+
   <p>This feature is supported in mobile and wearable applications only.</p>
-  
+
 <p>The main features of the HTML5 session history of browsing contexts API include:</p>
 <ul>
 <li>Adding entries to the session history
@@ -59,14 +59,14 @@ references the information stored with the <code>pushState()</code> or <code>rep
 </ul>
 
  <h2 id="Managing_Session_History" name="Managing_Session_History">Managing Session History Entries</h2>
-                       
-<p>Learning how to manage the session history enhances the user browsing experience in your application:</p> 
+
+<p>Learning how to manage the session history enhances the user browsing experience in your application:</p>
 
 <ol>
 <li>To add an entry to the session history, use the <code>pushState()</code> method of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;history.pushState({index: currentIndex}, document.title);
+   history.pushState({index: currentIndex}, document.title);
 &lt;/script&gt;
 </pre>
 
@@ -79,8 +79,8 @@ references the information stored with the <code>pushState()</code> or <code>rep
 <li>To update the entry details, use the <code>replaceState()</code> method:
 <pre class="prettyprint">
 &lt;script&gt;
-&nbsp;&nbsp;&nbsp;history.replaceState({index: currentIndex}, document.title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;#page&#39; + currentIndex);
+   history.replaceState({index: currentIndex}, document.title,
+                        '#page' + currentIndex);
 &lt;/script&gt;
 </pre>
 <p>The <code>replaceState()</code> method uses the same parameters as the <code>pushState()</code> method. The <code>history_sample.html</code> is the <code>url</code> parameter, which refers to the address of the page that is to be changed.</p>
@@ -90,37 +90,37 @@ references the information stored with the <code>pushState()</code> or <code>rep
 <ol type="a">
 <li>Implement a page with the <strong>Prev</strong> and <strong>Next</strong> buttons:
 <pre class="prettyprint">
-&lt;nav class=&quot;paging&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;Prev&lt;/a&gt;
-&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;Next&lt;/a&gt;
+&lt;nav class="paging"&gt;
+   &lt;a href="#"&gt;Prev&lt;/a&gt;
+   &lt;a href="#"&gt;Next&lt;/a&gt;
 &lt;/nav&gt;
 &lt;p&gt;Current Index: &lt;output&gt; &lt;/output&gt;&lt;/p&gt;
 
-&lt;a href=&quot;http://tizen.org/&quot;&gt;Tizen.org&lt;/a&gt;
+&lt;a href="http://tizen.org/"&gt;Tizen.org&lt;/a&gt;
 </pre>
 </li>
 <li>When the user clicks the buttons, the current index value (representing page numbers) is changed and stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object of the <code>history</code> interface:
 <pre class="prettyprint">
 var currentIndex = 0;
-var prev = document.querySelector(&#39;.paging &gt; a:nth-child(1)&#39;);
-var next = document.querySelector(&#39;.paging &gt; a:nth-child(2)&#39;);
+var prev = document.querySelector('.paging &gt; a:nth-child(1)');
+var next = document.querySelector('.paging &gt; a:nth-child(2)');
 
 /* Prev button click event */
 prev.onclick = function()
 {
-&nbsp;&nbsp;&nbsp;currentIndex -= 1;
-&nbsp;&nbsp;&nbsp;setState(currentIndex);
+   currentIndex -= 1;
+   setState(currentIndex);
 
-&nbsp;&nbsp;&nbsp;return false;
+   return false;
 };
 
 /* Next button click event */
 next.onclick = function()
 {
-&nbsp;&nbsp;&nbsp;currentIndex += 1;
-&nbsp;&nbsp;&nbsp;setState(currentIndex);
+   currentIndex += 1;
+   setState(currentIndex);
 
-&nbsp;&nbsp;&nbsp;return false;
+   return false;
 };
 </pre>
 </li>
@@ -129,16 +129,16 @@ next.onclick = function()
 <pre class="prettyprint">
 function setState(currentIndex)
 {
-&nbsp;&nbsp;&nbsp;if (history.state)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;history.replaceState({index: currentIndex}, document.title,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;#page&#39; + currentIndex);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;history.pushState({index: currentIndex}, document.title);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;output.textContent = currentIndex;
+   if (history.state)
+   {
+      history.replaceState({index: currentIndex}, document.title,
+                           '#page' + currentIndex);
+   }
+   else
+   {
+      history.pushState({index: currentIndex}, document.title);
+   }
+   output.textContent = currentIndex;
 }
 </pre>
 </li>
@@ -152,24 +152,24 @@ function setState(currentIndex)
  </ul>
 
 <h2 id="Detecting_Session_History" name="Detecting_Session_History">Detecting Session History Changes</h2>
- 
-<p>Learning how to track session history changes enhances the user browsing experience in your application: </p> 
- 
+
+<p>Learning how to track session history changes enhances the user browsing experience in your application: </p>
+
 <ol><li>A page with data stored in the session history fires a <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event when the page is loaded (for example, because it is refreshed or moved to from the previous page).
 <p>Register the event listener:</p>
 
 <pre class="prettyprint">
-window.addEventListener(&quot;popstate&quot;, foo, false);
+window.addEventListener("popstate", foo, false);
 </pre></li>
 
 <li>Define the event handler for the event. You can use the data stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object to retrieve the correct location on the page to be loaded.
 <pre class="prettyprint">
-var output = document.querySelector(&#39;output&#39;);
+var output = document.querySelector('output');
 
 window.onpopstate = function()
 {
-&nbsp;&nbsp;&nbsp;currentIndex = history.state.index;
-&nbsp;&nbsp;&nbsp;output.textContent = currentIndex;
+   currentIndex = history.state.index;
+   output.textContent = currentIndex;
 }
 </pre>
 <p>In the snippet above, when a <code>popstate</code> event is fired, it saves the index value stored in the <code>state</code> object to the <code>currentIndex</code> variable, and outputs the <code>&lt;output&gt;</code> element from the correct index location.
@@ -180,7 +180,7 @@ window.onpopstate = function()
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_the_session_history_of_browsing_contexts" target="_blank">history_state.html</a></li>
- </ul> 
+ </ul>
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/ui/text_module_w.htm b/org.tizen.guides/html/web/w3c/ui/text_module_w.htm
index ffae5be..3acd94a 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/text_module_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/text_module_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -14,12 +14,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -36,7 +36,7 @@
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">CSS Text Module Level 3 API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>CSS Text Module (Level 3)</h1>
@@ -50,10 +50,10 @@
 
 <li>Text properties
 <p>You can use CSS text properties, such as <code>text-transform</code>, <code>text-align</code>, <code>text-indent</code>, <code>letter-spacing</code>, and <code>word-spacing</code>, to <a href="#text">manipulate and transform text</a>.</p></li>
-</ul> 
+</ul>
 
 <h2 id="text" name="text">Manipulating Text</h2>
-                               
+
 <p>To enhance the user experience of your application, you must learn to handle line breaking, justification, alignment, white space handling, and text transformations using CSS text properties:</p>
 
 <ol>
@@ -61,20 +61,20 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-transform: none;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-transform: capitalize;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-transform: uppercase;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-transform: lowercase;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-transform: full-width;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {text-transform: none;}
+      p:nth-child(2) {text-transform: capitalize;}
+      p:nth-child(3) {text-transform: uppercase;}
+      p:nth-child(4) {text-transform: lowercase;}
+      p:nth-child(5) {text-transform: full-width;}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
 &lt;/body&gt;
 </pre>
 
@@ -84,14 +84,14 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-align: start;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-align: end;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-align: left;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-align: right;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-align: center;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(6) {text-align: justify;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {text-align: start;}
+      p:nth-child(2) {text-align: end;}
+      p:nth-child(3) {text-align: left;}
+      p:nth-child(4) {text-align: right;}
+      p:nth-child(5) {text-align: center;}
+      p:nth-child(6) {text-align: justify;}
+   &lt;/style&gt;
 &lt;/head&gt;
 </pre>
 
@@ -101,13 +101,13 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-indent: 0}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-indent: 1em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {text-indent: -1em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {text-indent: 5%}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {text-indent: -5%}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {text-indent: 0}
+      p:nth-child(2) {text-indent: 1em}
+      p:nth-child(3) {text-indent: -1em}
+      p:nth-child(4) {text-indent: 5%}
+      p:nth-child(5) {text-indent: -5%}
+   &lt;/style&gt;
 &lt;/head&gt;
 </pre>
 
@@ -116,10 +116,10 @@
 <li>Define the <code>letter-spacing</code> property, which controls the letter spacing:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {letter-spacing: .5em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {letter-spacing: -.1em}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {letter-spacing: .5em}
+      p:nth-child(2) {letter-spacing: -.1em}
+   &lt;/style&gt;
 &lt;/head&gt;
 </pre>
 
@@ -128,10 +128,10 @@
 <li>Define the <code>word-spacing</code> property, which controls the space between words:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-spacing: 1em}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-spacing: -.1em}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {word-spacing: 1em}
+      p:nth-child(2) {word-spacing: -.1em}
+   &lt;/style&gt;
 &lt;/head&gt;
 </pre>
 
@@ -140,11 +140,11 @@
 <li>Define the <code>word-break</code> property, which determines the line breaking rules for non-CJK (Chinese, Japanese, and Korean) scripts:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-break: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-break: keep-all}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {word-break: break-all}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {word-break: normal}
+      p:nth-child(2) {word-break: keep-all}
+      p:nth-child(3) {word-break: break-all}
+   &lt;/style&gt;
 &lt;/head&gt;
 </pre>
 
@@ -153,25 +153,25 @@
 <li>Define the <code>white-space</code> property, which determines the handling of empty space within an element:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {white-space: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {white-space: pre}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {white-space: nowrap}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {white-space: pre-wrap}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(5) {white-space: pre-line}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {white-space: normal}
+      p:nth-child(2) {white-space: pre}
+      p:nth-child(3) {white-space: nowrap}
+      p:nth-child(4) {white-space: pre-wrap}
+      p:nth-child(5) {white-space: pre-line}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps
-&nbsp;&nbsp;&nbsp;over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps
+   over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps
+   over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps
+   over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps
+   over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps
+   over a lazy dog.&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
@@ -181,12 +181,12 @@
 <li>Define the <code>text-shadow</code> property, which adds a shadow effect to text:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, .7)}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {text-shadow: -0.2em 0.2em 0.2em #000, 0.2em -0.2em 0.2em #f00}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {color: #fff; text-shadow: 0 0 .7em #000;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {color: #fff; text-shadow: 0 0 1px #f00;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, .7)}
+      p:nth-child(2) {text-shadow: -0.2em 0.2em 0.2em #000, 0.2em -0.2em 0.2em #f00}
+      p:nth-child(3) {color: #fff; text-shadow: 0 0 .7em #000;}
+      p:nth-child(4) {color: #fff; text-shadow: 0 0 1px #f00;}
+   &lt;/style&gt;
 &lt;/head&gt;
 </pre>
 
@@ -195,18 +195,18 @@
 <li>Define the <code>word-wrap</code> and  <code>overflow-wrap</code> properties, which control forced line breaks when the length of a word is longer than the area where it is displayed:
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(1) {word-wrap: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(2) {word-wrap: break-word}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(3) {overflow-wrap: normal}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p:nth-child(4) {overflow-wrap: break-word}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+      p:nth-child(1) {word-wrap: normal}
+      p:nth-child(2) {word-wrap: break-word}
+      p:nth-child(3) {overflow-wrap: normal}
+      p:nth-child(4) {overflow-wrap: break-word}
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown foxxxxxxxxxxxxxxxxxxxxxxxx jumps over a lazy dog.&lt;/p&gt;
 &lt;/body&gt;
 </pre>
 
diff --git a/org.tizen.guides/html/web/w3c/ui/transform_w.htm b/org.tizen.guides/html/web/w3c/ui/transform_w.htm
index 479c468..951ff09 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/transform_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/transform_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -14,12 +14,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -34,7 +34,7 @@
                        <li><a href="#effect">Creating Fade Animation Effects</a></li>
                        <li><a href="#hw">Using Hardware Acceleration</a></li>
                </ul>
-               
+
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#transforms">CSS Transforms API for Mobile Web</a></li>
@@ -43,7 +43,7 @@
                        <li><a href="https://developer.tizen.org/development/sample/web/General/Spinning_Arrow" target="_blank">Spinning Arrow Sample Description</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>CSS Transforms</h1>
@@ -51,7 +51,7 @@
 <p>Transforms allow you to modify the coordinate space where each element is positioned. The elements can be translated, rotated, and scaled in 2- or 3-dimensional space. According to the API, the coordinate system is a visual formatting model, and positions and sizes in the coordinate space are expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.</p>
 
  <p>This feature is supported in mobile and wearable applications only.</p>
- 
+
   <p>The main features of the CSS Transforms API include:</p>
 
 <ul>
@@ -92,44 +92,44 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(30deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 30% 30%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective: 220;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animation: trans-ani 10s infinite linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backface-visibility: visible;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(30deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 30% 30%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective: 220;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation: trans-ani 10s infinite linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-backface-visibility: visible;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box.case01
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-style: preserve-3d;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;perspective-origin: 30% 30%;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Chrome and Safari browsers */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-style: preserve-3d;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-perspective-origin: 30% 30%;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style type="text/css"&gt;
+      .box
+      {
+         transform: rotate(30deg);
+         transform-origin: 30% 30%;
+         perspective: 220;
+         animation: trans-ani 10s infinite linear;
+         backface-visibility: visible;
+
+         /* Chrome and Safari browsers */
+         -webkit-transform: rotate(30deg);
+         -webkit-transform-origin: 30% 30%;
+         -webkit-perspective: 220;
+         -webkit-animation: trans-ani 10s infinite linear;
+         -webkit-backface-visibility: visible;
+      }
+      .box.case01
+      {
+         transform-style: preserve-3d;
+         perspective-origin: 30% 30%;
+
+         /* Chrome and Safari browsers */
+         -webkit-transform-style: preserve-3d;
+         -webkit-perspective-origin: 30% 30%;
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;transform-origin&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform-origin: 30% 30%;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box case01&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;box&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;h1&gt;transform-origin&lt;/h1&gt;
+   &lt;div class="boxarea"&gt;
+      &lt;div class="box"&gt;
+         &lt;p&gt;transform&lt;/p&gt;
+         &lt;p&gt;transform-origin: 30% 30%;&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;div class="box case01"&gt;
+         &lt;p&gt;box&lt;/p&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -143,50 +143,50 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate(30px, 30px);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate(30px, 30px);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale(1.2, 1.2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale(1.2, 1.2);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(45deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(45deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-skew
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: skew(20deg, 20deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: skew(20deg, 20deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style type="text/css"&gt;
+      .box-translate
+      {
+         transform: translate(30px, 30px);
+         -webkit-transform: translate(30px, 30px);
+      }
+
+      .box-scale
+      {
+         transform: scale(1.2, 1.2);
+         -webkit-transform: scale(1.2, 1.2);
+      }
+
+      .box-rotate
+      {
+         transform: rotate(45deg);
+         -webkit-transform: rotate(45deg);
+      }
+
+      .box-skew
+      {
+         transform: skew(20deg, 20deg);
+         -webkit-transform: skew(20deg, 20deg);
+      }
+
+      .box-matrix
+      {
+         transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
+         -webkit-transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;2d transform&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;h2&gt;translate&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box no-transform&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Original&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed box-translate&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transform: translate(30px, 30px);&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;h1&gt;2d transform&lt;/h1&gt;
+   &lt;h2&gt;translate&lt;/h2&gt;
+   &lt;div class="boxarea"&gt;
+      &lt;div class="box no-transform"&gt;
+         &lt;p&gt;Original&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;div class="box transformed box-translate"&gt;
+         &lt;p&gt;transform&lt;/p&gt;
+         &lt;p&gt;transform: translate(30px, 30px);&lt;/p&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -195,81 +195,81 @@
 <li>If a transform method is used together with the <code>perspective</code> property, the z axis is emphasized.</li>
 <li>The X, Y, and Z values of the <code>translate3d()</code>, <code>scale3d()</code>, and <code>rotate3d()</code> methods can be expressed in individual methods.</li>
 <li>In the <code>rotate3d(number, number, number, angle)</code> method, the element rotates according to the assigned parameter (angle) with the X, Y, and Z directional vectors as the center. Each vector can be expressed as an individual method: for example, the <code>rotateX(&lt;angle&gt;)</code> and <code>rotate3d(1, 0, 0, &lt;angle&gt;)</code> methods perform the same task.</li>
-</ul> 
+</ul>
 <p>The following code snippet demonstrates how to implement a 3D transform. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">3d_transform.html</a>.</p>
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.first-transform {opacity: .5; background: #3399cc;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.transformed {opacity: .8;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* translate3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .first-transform
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-translate3d: hover .transformed
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(15px, 15px, 60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(15px, 15px, 60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* scale3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .first-transform
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(1, 1, 1) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(1, 1, 1) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-scale3d: hover .transformed
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* rotate3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .first-transform
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(-1, -1, -1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(-1, -1, -1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-rotate3d: hover .transformed
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate3d(1, 1, 1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate3d(1, 1, 1, 110deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* matrix3d */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .first-transform
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box-matrix3d: hover .transformed
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, 0.4, 0, 0, 0, 0, 1);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style type="text/css"&gt;
+      .first-transform {opacity: .5; background: #3399cc;}
+      .transformed {opacity: .8;}
+      /* translate3d */
+      .box-translate3d: hover .first-transform
+      {
+         transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
+         -webkit-transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
+      }
+      .box-translate3d: hover .transformed
+      {
+         transform: translate3d(15px, 15px, 60px) rotateY(70deg);
+         -webkit-transform: translate3d(15px, 15px, 60px) rotateY(70deg);
+      }
+      /* scale3d */
+      .box-scale3d: hover .first-transform
+      {
+         transform: scale3d(1, 1, 1) rotateY(70deg);
+         -webkit-transform: scale3d(1, 1, 1) rotateY(70deg);
+      }
+      .box-scale3d: hover .transformed
+      {
+         transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
+         -webkit-transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
+      }
+      /* rotate3d */
+      .box-rotate3d: hover .first-transform
+      {
+         transform: rotate3d(-1, -1, -1, 110deg);
+         -webkit-transform: rotate3d(-1, -1, -1, 110deg);
+      }
+      .box-rotate3d: hover .transformed
+      {
+         transform: rotate3d(1, 1, 1, 110deg);
+         -webkit-transform: rotate3d(1, 1, 1, 110deg);
+      }
+      /* matrix3d */
+      .box-matrix3d: hover .first-transform
+      {
+         transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0,
+                             0.4, 0, 0, 0, 0, 1);
+         -webkit-transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6,
+                                     0, 0.4, 0, 0, 0, 0, 1);
+      }
+      .box-matrix3d: hover .transformed
+      {
+         transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4,
+                             0, 0, 0, 0, 1);
+         -webkit-transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6,
+                                     0, 0.4, 0, 0, 0, 0, 1);
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;3D transform&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;h2&gt;&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;First box value:&lt;/strong&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;strong&gt;Second box value:&lt;/strong&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: translate3d(15px, 15px, 60px) rotateY(70deg);
-&nbsp;&nbsp;&nbsp;&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;boxarea box-translate3d&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box first-transform&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;First box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box transformed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Second Box&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mouse over or tab here to animate
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;h1&gt;3D transform&lt;/h1&gt;
+   &lt;h2&gt;&lt;/h2&gt;
+   &lt;p&gt;&lt;strong&gt;First box value:&lt;/strong&gt;
+      transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
+   &lt;/p&gt;
+   &lt;p&gt;&lt;strong&gt;Second box value:&lt;/strong&gt;
+      transform: translate3d(15px, 15px, 60px) rotateY(70deg);
+   &lt;/p&gt;
+   &lt;div class="boxarea box-translate3d"&gt;
+      &lt;div class="box first-transform"&gt;
+         First box
+      &lt;/div&gt;
+      &lt;div class="box transformed"&gt;
+         &lt;p&gt;Second Box&lt;/p&gt;
+         Mouse over or tab here to animate
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -280,25 +280,25 @@
 
 <ul>
 <li>As in the original animation, no elements are initially shown on the screen.</li>
-<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller. With the <code>transform</code> property, the logo is made to rotate.</li> 
-<li>Each letter in the word &quot;TIZEN&quot; consecutively comes in from the left of the screen and moves to the right to its correct location. With the <code>transform</code> property, the letters are translated in the 3D space and rotated around the Y axis.</li>
+<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller. With the <code>transform</code> property, the logo is made to rotate.</li>
+<li>Each letter in the word "TIZEN" consecutively comes in from the left of the screen and moves to the right to its correct location. With the <code>transform</code> property, the letters are translated in the 3D space and rotated around the Y axis.</li>
 </ul>
 
-<p align="center"><strong>Figure: Tizen logo to be transformed</strong></p> 
+<p align="center"><strong>Figure: Tizen logo to be transformed</strong></p>
 <p align="center"><img alt="Tizen logo to be transformed" src="../../../images/css_transforms1.png" /></p>
 
 
 <ol>
 <li>Create the HTML layout to control the movement of each individual animation element:
 <pre class="prettyprint">
-&lt;div class=&quot;animation-holder&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt t&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt i&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt z&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt e&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt n&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-txt tm&quot;&gt;&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&lt;span class=&quot;tizen-logo&quot;&gt;&lt;/span&gt;
+&lt;div class="animation-holder"&gt;
+   &lt;span class="tizen-txt t"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt i"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt z"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt e"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt n"&gt;&lt;/span&gt;
+   &lt;span class="tizen-txt tm"&gt;&lt;/span&gt;
+   &lt;span class="tizen-logo"&gt;&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 </li>
@@ -306,78 +306,78 @@
 <pre class="prettyprint">
 .animation-holder
 {
-&nbsp;&nbsp;&nbsp;-webkit-perspective: 1000px;
-&nbsp;&nbsp;&nbsp;height: 88px;
-&nbsp;&nbsp;&nbsp;left: 50%;
-&nbsp;&nbsp;&nbsp;margin: -54px 0px 0px -140px;
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;width: 280px;
+   -webkit-perspective: 1000px;
+   height: 88px;
+   left: 50%;
+   margin: -54px 0px 0px -140px;
+   position: absolute;
+   top: 50%;
+   width: 280px;
 }
 .tizen-txt,
 .tizen-logo
 {
-&nbsp;&nbsp;&nbsp;background-position: 50% 50%;
-&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;position: absolute;
+   background-position: 50% 50%;
+   background-repeat: no-repeat;
+   display: block;
+   position: absolute;
 }
 .tizen-txt.t
 {
-&nbsp;&nbsp;&nbsp;background-image: url(&quot;images/txt_t.png&quot;);
-&nbsp;&nbsp;&nbsp;height: 56px;
-&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;top: 31px;
-&nbsp;&nbsp;&nbsp;width: 48px;
+   background-image: url("images/txt_t.png");
+   height: 56px;
+   left: 0px;
+   top: 31px;
+   width: 48px;
 }
 </pre>
 </li>
 <li>Create the animation:
 <ol type="a">
 <li>
-<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <code>-webkit-transform: rotate()</code> method, which defines the angle of the rotation.  
+<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <code>-webkit-transform: rotate()</code> method, which defines the angle of the rotation.
 </p>
 <pre class="prettyprint">
 @-webkit-keyframes tizen-logo
 {
-&nbsp;&nbsp;&nbsp;0%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-in;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(0deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;30%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-animation-timing-function: ease-out;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 211px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 30px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -61px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(720deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 220px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;50%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;100%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 247px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: rotate(1440deg);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 33px;
-&nbsp;&nbsp;&nbsp;}
+   0%
+   {
+      -webkit-animation-timing-function: ease-in;
+      height: 211px;
+      left: 30px;
+      opacity: 0;
+      top: -61px;
+      -webkit-transform: rotate(0deg);
+      width: 220px;
+   }
+   30%
+   {
+      -webkit-animation-timing-function: ease-out;
+      height: 211px;
+      left: 30px;
+      opacity: 1;
+      top: -61px;
+      -webkit-transform: rotate(720deg);
+      width: 220px;
+   }
+   50%
+   {
+      height: 32px;
+      left: 247px;
+      opacity: 1;
+      top: 0;
+      -webkit-transform: rotate(1440deg);
+      width: 33px;
+   }
+   100%
+   {
+      height: 32px;
+      left: 247px;
+      opacity: 1;
+      top: 0;
+      -webkit-transform: rotate(1440deg);
+      width: 33px;
+   }
 }
 </pre>
 
@@ -386,36 +386,36 @@
        For a rotation, the image has to be carefully created to ensure the correct end result. The rotation occurs with the center of the element as the center. If the rotation center must be moved because the image center is not aligned, use the <code>transform-origin</code> property to adjust the rotation location.
 </div>
 </li>
-<li>Create the keyframes for the first letter in the word &quot;TIZEN&quot;. In the animation, due to the <code>translate3d()</code> and <code>rotateY()</code> methods, each letter transforms slightly from the right to the left as it comes in.
+<li>Create the keyframes for the first letter in the word "TIZEN". In the animation, due to the <code>translate3d()</code> and <code>rotateY()</code> methods, each letter transforms slightly from the right to the left as it comes in.
 
 <p align="center"><img alt="Animation" src="../../../images/css_transforms2.png" /></p>
 
 <pre class="prettyprint">
 @-webkit-keyframes tizen-txt-t
 {
-&nbsp;&nbsp;&nbsp;0%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;30%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;35%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;100% {}
+   0%
+   {
+      opacity: 0;
+      -webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
+   }
+   30%
+   {
+      opacity: 0;
+      -webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
+   }
+   35%
+   {
+      opacity: 1;
+      -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
+   }
+   100% {}
 }
 </pre></li>
 <li>To emphasize the fact that the letters are being created on the right, change the location of the transform. If the <code>transform-origin</code> property is declared for the entire animation element, the logo rotation changes. Consequently, you must only declared it for the letters.
 <pre class="prettyprint">
 .tizen-txt
 {
-&nbsp;&nbsp;&nbsp;-webkit-transform-origin: 100% 50%;
+   -webkit-transform-origin: 100% 50%;
 }
 </pre></li>
 
@@ -423,22 +423,22 @@
 <pre class="prettyprint">
 @-webkit-keyframes tizen-txt-i
 {
-&nbsp;&nbsp;&nbsp;0%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;32%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;37%
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translateX(0) rotateY(0deg);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp; 100% {}
+   0%
+   {
+      opacity: 0;
+      -webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
+   }
+   32%
+   {
+      opacity: 0;
+      -webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
+   }
+   37%
+   {
+      opacity: 1;
+      -webkit-transform: translateX(0) rotateY(0deg);
+   }
+    100% {}
 }
 </pre></li></ol>
 
@@ -446,7 +446,7 @@
 </ol>
 
 <p>The following figure shows the full Tizen logo animation with the <code>transform</code> properties.</p>
-<p align="center"><strong>Figure: Full Tizen logo animation</strong></p> 
+<p align="center"><strong>Figure: Full Tizen logo animation</strong></p>
 <p align="center"><img alt="Full Tizen logo animation" src="../../../images/css_transforms5.png" /></p>
 
 <h3>Source Code</h3>
@@ -461,25 +461,25 @@
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_tm.png</a></li>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_z.png</a></li>
  </ul>
-                       
+
                                <h2 id="effect" name="effect">Creating Fade Animation Effects</h2>
-                               
-                               
+
+
                        <p>To enhance the user experience of your application, you must learn to use fade animation effects.</p>
 <p>The modal layer pop-up can be used to, for example, show enlarged thumbnail images or notice messages. The modal layer pop-up has the following basic properties:</p>
 <ul>
 <li>If an event is fired, it gradually becomes visible. This is known as the Fade In effect.</li>
-<li>The existing background is covered with a translucent layer to make the user focus on the pop-up.</li> 
+<li>The existing background is covered with a translucent layer to make the user focus on the pop-up.</li>
 <li>When the pop-up is closed, it gradually becomes transparent. This is known as the Fade Out effect.</li>
 </ul>
 
-<p align="center"><strong>Figure: Fade effect</strong></p> 
+<p align="center"><strong>Figure: Fade effect</strong></p>
 <p align="center"><img alt="Fade effect" src="../../../images/fade_affect_animation.png" /></p>
 
 <p>You can control UI events and change the DOM elements in the following ways:</p>
 <ul>
 <li>Events can be controlled with JavaScript, and DOM elements can be devised with CSS.</li>
-<li>You can use JavaScript frameworks, such as jQuery, Prototype, and Dojo.</li> 
+<li>You can use JavaScript frameworks, such as jQuery, Prototype, and Dojo.</li>
 </ul>
 
 <p>To create fade effects:</p>
@@ -490,47 +490,47 @@
 <pre class="prettyprint">
 (function($)
 {
-&nbsp;&nbsp;&nbsp;function showModalPopup(url)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).append(&#39;&lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;&#39;); /* Mask in body appended */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).css({&#39;height&#39;: $(window).height()}); /* Mask area set */
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Target layer position set */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).css(
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;top&#39;: ($(window).height()/2 + $(document).scrollTop()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- $(url).height()/2) + &#39;px&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;left&#39;: ($(window).width()/2 + $(document).scrollLeft()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- $(url).width()/2) + &#39;px&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Fade effect */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeTo(&#39;slow&#39;, 0.7);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(url).fadeTo(&#39;slow&#39;, 1);
-&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;$(&#39;.layerpopupActive a&#39;).on(&#39;click&#39;, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var targetUrl = $(this).attr(&#39;href&#39;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showModalPopup(targetUrl);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;/* End processing - Fade Out effect */
-
-&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).on(&#39;click&#39;, function(e)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.target.className === &#39;mask&#39;)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.layerpop&#39;).fadeOut();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).fadeOut(400, function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.mask&#39;).remove();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+   function showModalPopup(url)
+   {
+      $('body').append('&lt;div class="mask"&gt;&lt;/div&gt;'); /* Mask in body appended */
+      $('.mask').css({'height': $(window).height()}); /* Mask area set */
+
+      /* Target layer position set */
+      $(url).css(
+      {
+         'top': ($(window).height()/2 + $(document).scrollTop()
+                 - $(url).height()/2) + 'px',
+         'left': ($(window).width()/2 + $(document).scrollLeft()
+                  - $(url).width()/2) + 'px'
+      });
+
+      /* Fade effect */
+      $('.mask').fadeTo('slow', 0.7);
+      $(url).fadeTo('slow', 1);
+   };
+
+   $('.layerpopupActive a').on('click', function()
+      {
+         var targetUrl = $(this).attr('href');
+
+         showModalPopup(targetUrl);
+
+         return false;
+      });
+
+   /* End processing - Fade Out effect */
+
+   $('body').on('click', function(e)
+      {
+         if (e.target.className === 'mask')
+         {
+            $('.layerpop').fadeOut();
+            $('.mask').fadeOut(400, function()
+               {
+                  $('.mask').remove();
+               });
+         };
+      });
 })(jQuery);
 </pre>
 
@@ -541,8 +541,8 @@
        <li>The layer is painted once again according to the change of value. This is a CPU operation.</li>
 </ol>
 
-<p>Steps a and c incur CPU tasks, which affect performance the most.</p>  
-<p>In case of step a, only 2 layers are created, but as the number of layers created increases, the efficiency of page rendering work drops. In case of step c as well, the more steps it undergoes, the slower the rendering becomes.</p>  
+<p>Steps a and c incur CPU tasks, which affect performance the most.</p>
+<p>In case of step a, only 2 layers are created, but as the number of layers created increases, the efficiency of page rendering work drops. In case of step c as well, the more steps it undergoes, the slower the rendering becomes.</p>
 <p>In certain browsers, even if the style of just 1 layer is changed, the entire document is repainted. As the repainting takes only a moment, any animation effects that are supposed to happen cannot be executed in such a short time. This issue occurs frequently in Android&trade; with severe fragmentation.</p>
 
 <div class="note">
@@ -562,34 +562,34 @@
 &lt;!--CSS--&gt;
 .mask
 {
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;z-index: -1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 400ms ease-in-out;
+   opacity: 0;
+   z-index: -1;
+   -webkit-transition: all 400ms ease-in-out;
 }
 
 .mask.active
 {
-&nbsp;&nbsp;&nbsp;opacity: .7;
-&nbsp;&nbsp;&nbsp;z-index: 498;
+   opacity: .7;
+   z-index: 498;
 }
 
 &lt;!--Layer pop-up public styles--&gt;
 .layerpop
 {
-&nbsp;&nbsp;&nbsp;opacity: 0;
-&nbsp;&nbsp;&nbsp;z-index: -1;
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 300ms ease-in-out;
+   opacity: 0;
+   z-index: -1;
+   -webkit-transition: all 300ms ease-in-out;
 }
 
 .layerpop.active
 {
-&nbsp;&nbsp;&nbsp;opacity: 1;
-&nbsp;&nbsp;&nbsp;z-index: 499;
+   opacity: 1;
+   z-index: 499;
 }
 /* JavaScript */
 function showModalPopup(url)
 {
-&nbsp;&nbsp;&nbsp;url.className += &#39;active&#39;;
+   url.className += 'active';
 }
 </pre>
 </li>
@@ -598,17 +598,17 @@ function showModalPopup(url)
 
 <p>There can be a difference in performance depending on how the modal layer pop-up is used.</p>
 <p>The following figures illustrate the difference in event performance, when using JavaScript and CSS3.</p>
-<p align="center"><strong>Figure: Event performance using JavaScript</strong></p> 
+<p align="center"><strong>Figure: Event performance using JavaScript</strong></p>
 <p align="center"><img alt="Events using JavaScript" src="../../../images/events_using_javascript.png" /></p>
 
-<p align="center"><strong>Figure: Event performance using CSS3</strong></p> 
+<p align="center"><strong>Figure: Event performance using CSS3</strong></p>
 <p align="center"><img alt="Events using CSS3" src="../../../images/events_using_css3.png" /></p>
 
 <p>The following figures illustrate the difference in memory performance, when using JavaScript and CSS3.</p>
-<p align="center"><strong>Figure: Memory performance using JavaScript</strong></p> 
+<p align="center"><strong>Figure: Memory performance using JavaScript</strong></p>
 <p align="center"><img alt="Memory when using JavaScript" src="../../../images/memory_using_javascript.png" /></p>
 
-<p align="center"><strong>Figure: Memory performance using CSS3</strong></p> 
+<p align="center"><strong>Figure: Memory performance using CSS3</strong></p>
 <p align="center"><img alt="Memory when using CSS3" src="../../../images/memory_using_css3.png" /></p>
 
 <p>When the styles are applied using JavaScript, the UI thread is used to create the pop-up. The UI thread increases the usage of CPU memory in proportion to the number of pop-ups used.</p>
@@ -624,15 +624,15 @@ function showModalPopup(url)
 </div>
 
 <h2 id="hw" name="hw">Using Hardware Acceleration</h2>
-       
+
 <p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
  <p>In hardware acceleration, GPU is used to perform a method faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
- 
+
  <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
  <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <code>-webkit-transition</code> CSS attribute, or 3D transform with the <code>-webkit-transform</code> attribute. For the best performance, set the <code>-webkit-transform</code> attribute to the 3D type.</p>
 <p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
- <p align="center"><strong>Figure: Blue box</strong></p> 
- <p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p> 
+ <p align="center"><strong>Figure: Blue box</strong></p>
+ <p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
 
  <ul>
  <li>Use CPU painting:
@@ -641,79 +641,79 @@ function showModalPopup(url)
        <li>Construct the blue box and set its position on the screen:
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+   &lt;head&gt;
+      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
+      &lt;title&gt;JavaScript transition sample&lt;/title&gt;
+      &lt;style&gt;
+         #box
+         {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            background-color: blue;
+            left: 0px;
+            top: 50px;
+         }
+      &lt;/style&gt;
 </pre>
 </li>
 <li>
 <p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <code>setTimeout()</code> method:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+      &lt;script&gt;
+         var delta = 0;
+         function startTransition()
+         {
+            process();
+         }
+         function process()
+         {
+            document.getElementById('box').style.left = delta + "px";
+            document.getElementById('box').style.top = delta + 50 + "px";
+            delta += 4;
+            if (delta &lt;= 200)
+               setTimeout(function() {process();}, 16);
+         }
+      &lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div id='box' onclick='startTransition()'&gt;click me!&lt;/div&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre></li></ol></li>
        <li>Use CSS transition:
        <p>Separate a moving element to an independent layer with the <code>-webkit-transition</code> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;translate(200px, 200px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+   &lt;head&gt;
+      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
+      &lt;title&gt;-webkit-transition sample&lt;/title&gt;
+      &lt;style&gt;
+         #box
+         {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            left: 0px;
+            top: 50px;
+            background-color: blue;
+            -webkit-transition-duration: 1s;
+            -webkit-transition-timing-function: linear;
+         }
+      &lt;/style&gt;
+      &lt;script&gt;
+         function startTransition()
+         {
+            document.getElementById('box').style.webkitTransform =
+               "translate(200px, 200px)";
+         }
+      &lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div id='box' onclick='startTransition()'&gt;click me!&lt;/div&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 </li>
@@ -721,35 +721,35 @@ function showModalPopup(url)
                <p>Use the <code>-webkit-transform: translate3d</code> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;translate3d(200px, 200px, 0px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+   &lt;head&gt;
+      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
+      &lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
+      &lt;style&gt;
+         #box
+         {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            left: 0px;
+            top: 50px;
+            background-color: blue;
+            -webkit-transform: translate3d(0, 0, 0);
+            -webkit-transition-duration: 1s;
+            -webkit-transition-timing-function: linear;
+         }
+      &lt;/style&gt;
+      &lt;script&gt;
+         function startTransition()
+         {
+            document.getElementById('box').style.webkitTransform =
+               "translate3d(200px, 200px, 0px)";
+         }
+      &lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div id='box' onclick='startTransition()'&gt;click me!&lt;p&gt;&lt;/div&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 </li>
@@ -759,11 +759,11 @@ function showModalPopup(url)
 <pre class="prettyprint">
 #scroll_area
 {
-&nbsp;&nbsp;&nbsp;overflow: scroll;
-&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
+   overflow: scroll;
+   -webkit-overflow-scrolling: touch;
 }
 </pre>
-                       
+
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/ui/transition_w.htm b/org.tizen.guides/html/web/w3c/ui/transition_w.htm
index 2a57d5a..730ba65 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/transition_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/transition_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -14,12 +14,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -38,7 +38,7 @@
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transitions">CSS Transitions Module Level 3 API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>CSS Transitions Module (Level 3)</h1>
@@ -57,11 +57,11 @@
        <li>Using hardware acceleration
        <p>You can improve the rendering performance of the application by <a href="#hw">enabling hardware acceleration</a>.</p></li>
 </ul>
- 
+
 <p>When using the CSS transition properties, the Tizen browser requires the <code>-webkit-</code> prefix.</p>
 
-<h2 name="prop" id="prop">Defining Transition Properties</h2> 
- 
+<h2 name="prop" id="prop">Defining Transition Properties</h2>
+
 <p>You can define various properties to control the element transitions:</p>
 
 <ul>
@@ -83,31 +83,31 @@
 
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body{font-size: 12px}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-property: width;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 2s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: ease;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-delay: 0.5s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box: hover
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 300px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: CornflowerBlue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style type="text/css"&gt;
+      body{font-size: 12px}
+
+      .box
+      {
+         -webkit-transition-property: width;
+         -webkit-transition-duration: 2s;
+         -webkit-transition-timing-function: ease;
+         -webkit-transition-delay: 0.5s;
+      }
+
+      .box: hover
+      {
+         width: 300px;
+         height: 200px;
+         background: CornflowerBlue;
+      }
+   &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;h1&gt;CSS transitions tutorial&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Mouse over or tap here to animate&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;transition-property: width, height, background&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;h1&gt;CSS transitions tutorial&lt;/h1&gt;
+   &lt;div class="box"&gt;
+      &lt;p&gt;Mouse over or tap here to animate&lt;/p&gt;
+      &lt;p&gt;transition-property: width, height, background&lt;/p&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -119,11 +119,11 @@
 <p>The <code>transition</code> property allows you to define all the transition properties in a shorthand mode in the order of <code>transition-property</code> | <code>transition-duration</code> | <code>transition-timing-function</code> | <code>transition-delay</code>. If you omit a property value, a default value is used instead.</p>
 
 <pre class="prettyprint">
-&lt;style type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;.box
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition: width 1s ease 1s;
-&nbsp;&nbsp;&nbsp;}
+&lt;style type="text/css"&gt;
+   .box
+   {
+      -webkit-transition: width 1s ease 1s;
+   }
 &lt;/style&gt;
 </pre>
 
@@ -131,20 +131,20 @@
 
 
 <h2 id="modify" name="modify">Modifying Element Properties</h2>
-                               
-<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <code>http://tizen.org</code> Web site, where the current &quot;UPCOMING EVENTS&quot; area only has the <code>text-decoration: underline</code> property in a <code>mouseover</code> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <code>transitions</code> properties in this area.</p>
 
+<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <code>http://tizen.org</code> Web site, where the current "UPCOMING EVENTS" area only has the <code>text-decoration: underline</code> property in a <code>mouseover</code> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <code>transitions</code> properties in this area.</p>
 
-<p align="center"><strong>Figure: Tizen site section to be transitioned</strong></p> 
+
+<p align="center"><strong>Figure: Tizen site section to be transitioned</strong></p>
 <p align="center"><img alt="Tizen site section to be transitioned" src="../../../images/transitions1.png" /></p>
 
-  
-<ol><li><p>Add a background color change to the &quot;UPCOMING EVENTS&quot; area during a <code>mouseover</code> state:</p>
+
+<ol><li><p>Add a background color change to the "UPCOMING EVENTS" area during a <code>mouseover</code> state:</p>
 
 <ol type="a"><li><p>Originally, the area on the site is defined as follows:</p>
 
 <pre class="prettyprint">
-&lt;h2 class=&quot;block-title&quot;&gt;Upcoming Events&lt;/h2&gt;
+&lt;h2 class="block-title"&gt;Upcoming Events&lt;/h2&gt;
 </pre>
 
 
@@ -153,7 +153,7 @@
 <pre class="prettyprint">
 .block-title
 {
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 2s ease;
+   -webkit-transition: all 2s ease;
 }
 </pre>
 <p>The <code>all</code> value in the transition property means that the transition effect applies to all CSS properties of the element.</p>
@@ -167,7 +167,7 @@
 
 <p>Due to the CSS characteristics, adding a class through an event allows immediate rendering in the screen.</p></li></ol>
 
-<p>When the mouse is moved over the &quot;UPCOMING EVENTS&quot; area, the background color changes.</p>
+<p>When the mouse is moved over the "UPCOMING EVENTS" area, the background color changes.</p>
 
 <p align="center"><img alt="Background color change" src="../../../images/transitions2.png" /></p> </li>
 
@@ -180,7 +180,7 @@
 <pre class="prettyprint">
 .location, .date, .location .anibg, h3 &gt; a, .day &gt; span
 {
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
+   -webkit-transition: all 1s ease;
 }
 </pre></li>
 
@@ -201,19 +201,19 @@
 <li><p>Add the empty element:</p>
 
 <pre class="prettyprint">
-&lt;div class=&quot;location&quot;&gt;San Francisco, CA&lt;span class=&quot;anibg&quot;&gt;&lt;/span&gt;&lt;/div&gt;
+&lt;div class="location"&gt;San Francisco, CA&lt;span class="anibg"&gt;&lt;/span&gt;&lt;/div&gt;
 </pre></li>
 <li><p>Create the effect using the width value of the added element:</p>
 <pre class="prettyprint">
 .location {position: relative; z-index: 3; margin-top: 3px;}
 .location .anibg
 {
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;left: -3px; top: 0;
-&nbsp;&nbsp;&nbsp;display: block;
-&nbsp;&nbsp;&nbsp;width: 0; height: 100%;
-&nbsp;&nbsp;&nbsp;background: #000;
-&nbsp;&nbsp;&nbsp;z-index: -1;
+   position: absolute;
+   left: -3px; top: 0;
+   display: block;
+   width: 0; height: 100%;
+   background: #000;
+   z-index: -1;
 }
 </pre>
 
@@ -222,7 +222,7 @@
 <pre class="prettyprint">
 .location, .date, .location .anibg, h3 &gt; a, .day &gt; span
 {
-&nbsp;&nbsp;&nbsp;-webkit-transition: all 1s ease;
+   -webkit-transition: all 1s ease;
 }
 
 .event-info: hover .location {color: #fff;}
@@ -238,18 +238,18 @@
  <p>For the complete source code related to this use case, see the following file:</p>
  <ul>
        <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_practical.html</a></li>
- </ul>  
-               
+ </ul>
+
                                <h2 id="hw" name="hw">Using Hardware Acceleration</h2>
-                               
+
                        <p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
  <p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
- 
+
  <h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
  <p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <code>-webkit-transition</code> CSS attribute, or 3D transform with the <code>-webkit-transform</code> attribute. For the best performance, set the <code>-webkit-transform</code> attribute to the 3D type.</p>
 <p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
- <p align="center"><strong>Figure: Blue box</strong></p> 
- <p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p> 
+ <p align="center"><strong>Figure: Blue box</strong></p>
+ <p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
 
  <ul>
  <li>Use CPU painting:
@@ -258,79 +258,79 @@
        <li>Construct the blue box and set its position on the screen:
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+   &lt;head&gt;
+      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
+      &lt;title&gt;JavaScript transition sample&lt;/title&gt;
+      &lt;style&gt;
+         #box
+         {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            background-color: blue;
+            left: 0px;
+            top: 50px;
+         }
+      &lt;/style&gt;
 </pre>
 </li>
 <li>
 <p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <code>setTimeout()</code> method:</p>
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var delta = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function process()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.left = delta + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.top = delta + 50 + &quot;px&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta += 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (delta &lt;= 200)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function() {process();}, 16);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+      &lt;script&gt;
+         var delta = 0;
+         function startTransition()
+         {
+            process();
+         }
+         function process()
+         {
+            document.getElementById('box').style.left = delta + "px";
+            document.getElementById('box').style.top = delta + 50 + "px";
+            delta += 4;
+            if (delta &lt;= 200)
+               setTimeout(function() {process();}, 16);
+         }
+      &lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div id='box' onclick='startTransition()'&gt;click me!&lt;/div&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre></li></ol></li>
        <li>Use CSS transition:
        <p>Separate a moving element to an independent layer with the <code>-webkit-transition</code> CSS attribute. This approach uses hardware acceleration, and can enhance performance while an element is moving.</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;translate(200px, 200px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+   &lt;head&gt;
+      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
+      &lt;title&gt;-webkit-transition sample&lt;/title&gt;
+      &lt;style&gt;
+         #box
+         {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            left: 0px;
+            top: 50px;
+            background-color: blue;
+            -webkit-transition-duration: 1s;
+            -webkit-transition-timing-function: linear;
+         }
+      &lt;/style&gt;
+      &lt;script&gt;
+         function startTransition()
+         {
+            document.getElementById('box').style.webkitTransform =
+               "translate(200px, 200px)";
+         }
+      &lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div id='box' onclick='startTransition()'&gt;click me!&lt;/div&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 </li>
@@ -338,35 +338,35 @@
                <p>Use the <code>-webkit-transform: translate3d</code> 3D transform attribute. The element is separated to an independent layer and uses hardware acceleration irrespective of its movement:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
-&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 0px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform: translate3d(0, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-duration: 1s;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition-timing-function: linear;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function startTransition()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&#39;box&#39;).style.webkitTransform =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;translate3d(200px, 200px, 0px)&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&#39;box&#39; onclick=&#39;startTransition()&#39;&gt;click me!&lt;p&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+   &lt;head&gt;
+      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
+      &lt;title&gt;-webkit-transition with translate3d sample&lt;/title&gt;
+      &lt;style&gt;
+         #box
+         {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            left: 0px;
+            top: 50px;
+            background-color: blue;
+            -webkit-transform: translate3d(0, 0, 0);
+            -webkit-transition-duration: 1s;
+            -webkit-transition-timing-function: linear;
+         }
+      &lt;/style&gt;
+      &lt;script&gt;
+         function startTransition()
+         {
+            document.getElementById('box').style.webkitTransform =
+               "translate3d(200px, 200px, 0px)";
+         }
+      &lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div id='box' onclick='startTransition()'&gt;click me!&lt;p&gt;&lt;/div&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 </li>
@@ -376,8 +376,8 @@
 <pre class="prettyprint">
 #scroll_area
 {
-&nbsp;&nbsp;&nbsp;overflow: scroll;
-&nbsp;&nbsp;&nbsp;-webkit-overflow-scrolling: touch;
+   overflow: scroll;
+   -webkit-overflow-scrolling: touch;
 }
 </pre>
 
diff --git a/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm b/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm
index fd24d7c..c2d62d8 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm
@@ -5,15 +5,15 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>User Interface</title> 
- </head> 
+  <title>User Interface</title>
+ </head>
 <body onload="prettyPrint()" style="overflow: auto;">
- 
+
 <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
@@ -30,12 +30,12 @@
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">W3C/HTML5 and Supplementaries API Reference for Wearable Web</a></li>
                </ul>
        </div></div>
-</div> 
-               
+</div>
+
 
 <div id="container"><div id="contents"><div class="content">
 
-  <h1>User Interface</h1> 
+  <h1>User Interface</h1>
 
 <p>The W3C specifications provide HTML and CSS, which are the core technologies for building Web pages and Web applications. With HTML, you can define the structure of the application screens, while CSS allows you to define the look and feel of the screens.</p>
 
@@ -43,19 +43,19 @@
 
 <ul>
 <li>
-<strong>HTML features</strong> 
+<strong>HTML features</strong>
 <p>HTML is the language for describing the structure of the Web pages.</p>
 
 <ul>
 
        <li><a href="html_priority_w.htm">HTML Priorities</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to use CSS and JavaScript code effectively with HTML elements.</p></li>
-       
+
        <li><a href="html5forms_w.htm">HTML5 Forms</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to easily implement Web forms for user input using HTML5 elements.</p></li>
-       
+
        <li><a href="selector_w.htm">Selectors API (Level 1 and 2)</a> <strong>in mobile and wearable applications only</strong>
-       <p>Enables you to select element nodes in the DOM tree by matching them against a group of selectors.</p></li>  
+       <p>Enables you to select element nodes in the DOM tree by matching them against a group of selectors.</p></li>
 
        <li><a href="media_query_w.htm">Media Queries</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to define media features for specific output devices using the CSS media queries.</p></li>
@@ -68,13 +68,13 @@
 
        <li><a href="frame_flattening_mw.htm">Frame Flattening</a> <strong>in mobile applications only</strong>
        <p>Allows you to improve the scrollability of small screens.</p></li>
-       
+
        <li><a href="session_history_w.htm">HTML5 Session History</a> <strong>in mobile and wearable applications only</strong>
-       <p>Enables you to manage the browsing history of a device.</p></li>     
+       <p>Enables you to manage the browsing history of a device.</p></li>
 
        <li><a href="clipboard_mw.htm">Clipboard API and events</a> <strong>in mobile applications only</strong>
        <p>Enables you to copy content and paste it in an editable area.</p></li>
-       
+
        <li><a href="drag_drop_mw.htm">HTML5 Drag and Drop</a> <strong>in mobile applications only</strong>
        <p>Enables you to create and manage draggable elements and implement drag events.</p></li>
 </ul>
@@ -82,61 +82,61 @@
 
 
 <li>
-<strong>CSS features</strong> 
+<strong>CSS features</strong>
 <p>CSS is the language for describing the presentation of the Web pages, including colors, layout, and fonts.</p>
 <ul>
        <li><a href="transform_w.htm">CSS Transforms</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to move, rotate, stretch, and scale elements using the CSS3 <code>transform</code> property.</p></li>
-       
+
        <li><a href="animation_w.htm">CSS Animations Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to create animations using the CSS3 <code>animation</code> property.</p></li>
-       
+
        <li><a href="transition_w.htm">CSS Transitions Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to add effects when changing the style of an element using the CSS3 <code>transition</code> property.</p></li>
-       
+
        <li><a href="color_w.htm">CSS Color Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to specify the color and opacity of HTML elements using CSS properties.</p></li>
-       
+
        <li><a href="background_w.htm">CSS Backgrounds and Borders Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to specify the border and background styles of HTML elements using CSS properties.</p></li>
-       
+
        <li><a href="flexible_w.htm">CSS Flexible Box Layout Module</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to create flexible layouts for Web applications.</p></li>
-               
+
        <li><a href="multi_mw.htm">CSS Multi-column Layout Module</a> <strong>in mobile applications only</strong>
        <p>Enables you to create multi-column layouts for Web applications.</p></li>
-       
+
        <li><a href="text_module_w.htm">CSS Text Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
-       <p>Enables you to apply various text effects.</p></li>  
-       
+       <p>Enables you to apply various text effects.</p></li>
+
        <li><a href="basic_ui_w.htm">CSS Basic User Interface Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to apply styles to HTML documents.</p></li>
-       
+
        <li><a href="font_w.htm">CSS Fonts Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
-       <p>Enables you to change the text fonts.</p></li>       
-       
+       <p>Enables you to change the text fonts.</p></li>
+
        <li><a href="woff_w.htm">WOFF File Format (1.0)</a> <strong>in mobile and wearable applications only</strong>
-       <p>Enables you to encode and decode font data easily.</p></li>  
+       <p>Enables you to encode and decode font data easily.</p></li>
 </ul>
 </li>
 <li>
-<strong>Designing for multiple screens</strong> 
+<strong>Designing for multiple screens</strong>
 <p>Tizen supports various device types with several different screen sizes.</p>
 <p>To provide optimal user experiences, it is important to design your application to support different screen sizes. In addition to different devices, you must also consider system configuration changes, such as the default home screen layout and system fonts after OS upgrades, since they can change the size of the viewable content screen. Such changes affect the application layout, and can lead to an undesirable UI design layout. Use the following topics to design your application to be highly flexible and adaptive against these possibilities.</p>
 <ul>
        <li><a href="ui_layout_ww.htm">Multiple UI Layouts</a> <strong>in wearable applications only</strong>
        <p>Allows you to design your application layout so that your application can run on multiple Tizen devices.</p></li>
-       
+
        <li><a href="multiple_screens_mw.htm">Multiple Screen Support</a> <strong>in mobile applications only</strong>
        <p>Allows you to create an application that is both scalable and adaptive to multiple screen resolutions.</p></li>
 
        <li><a href="font_w.htm">CSS Fonts Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
        <p>Enables you to define the font-face and font-family, to avoid layout incompatibility due to the default system font changes after OS upgrades.</p></li>
-</ul>  
+</ul>
 </li>
 </ul>
 
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/ui/ui_layout_ww.htm b/org.tizen.guides/html/web/w3c/ui/ui_layout_ww.htm
index 7764d0f..906a1fb 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/ui_layout_ww.htm
+++ b/org.tizen.guides/html/web/w3c/ui/ui_layout_ww.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Multiple UI Layouts</title> 
- </head> 
+  <title>Multiple UI Layouts</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -30,16 +30,16 @@
                        <li><a href="#multiple">Multiple Layouts for Multiple Devices</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
  <h1>Multiple UI Layouts</h1>
- 
+
   <p>To ensure the largest possible market for your application, you have to design your application layout so that your application can run on multiple Tizen devices.</p>
 
 <p>This feature is supported in wearable applications only.</p>
-  
-<p>Although the Web was originally designed to structure documents for large-scaled Internet world, with CSS (Cascading Style Sheet), JavaScript, and various device APIs, it is quickly evolving to a complete runtime environment for applications. In addition, its W3C open development model and the flexibility of its CSS-based presentation make it every developer&#39;s choice as the next development platform. CSS is the key technology for flexible presentation, and it is used to describe the look and formatting of HTML documents. The role of CSS is to determine how the logical structure of the document is displayed to the user.</p>
+
+<p>Although the Web was originally designed to structure documents for large-scaled Internet world, with CSS (Cascading Style Sheet), JavaScript, and various device APIs, it is quickly evolving to a complete runtime environment for applications. In addition, its W3C open development model and the flexibility of its CSS-based presentation make it every developer's choice as the next development platform. CSS is the key technology for flexible presentation, and it is used to describe the look and formatting of HTML documents. The role of CSS is to determine how the logical structure of the document is displayed to the user.</p>
 
 <p>The Tizen Web engine provides the basic mechanisms for fitting the application content to the target screen. However, to ensure that the application runs well on multiple devices, you must understand those mechanisms in detail. In general, select a relative layout rather than a fixed layout, because a relative layout helps to maintain usability even when the application runs on unexpected devices. To enhance usability even further, use different layouts for each device category.</p>
 
@@ -47,37 +47,37 @@
 <ul><li>You can use a <a href="#single">single layout</a> and take advantage of the auto-fitting mechanism of the Tizen Web engine to ensure that a single layout covers multiple devices.</li>
 <li>You can use <a href="#multiple">multiple layouts</a> to define a separate optimal layout for each device category.</li></ul>
 
- <h2 id="single" name="single">Single Layout for Multiple Devices</h2> 
+ <h2 id="single" name="single">Single Layout for Multiple Devices</h2>
   <p>A typical application developer designs an optimized UI for a target device with a fixed layout and high-quality resources. This approach usually results in a nice look for the end user, but can sometimes result in an ugly layout, which makes the application unusable. And this unfortunate result can occur merely due to a change in the device form factor.</p>
 <p>Since the presentation and business logic are strictly separated in a Web application, it handles the device form factor change better than native applications. One single layout, taking advantage of Web technology, can ensure usability even on multiple devices with different form factors.</p>
 
-<p>To design applications with a single layout, you must consider the following issues:</p> 
+<p>To design applications with a single layout, you must consider the following issues:</p>
 
-  <ul> 
-   <li><a href="#viewport">Viewport and other meta tags</a></li> 
-   <li><a href="#relative">Relative layout</a></li> 
-   <li><a href="#header_footer">Header and footer position</a></li> 
+  <ul>
+   <li><a href="#viewport">Viewport and other meta tags</a></li>
+   <li><a href="#relative">Relative layout</a></li>
+   <li><a href="#header_footer">Header and footer position</a></li>
    <li><a href="#flexible">Flexible media</a></li> </ul>
-   
+
    <p>For a complete application layout that considers all the above issues, see <a href="#single_example">Single Layout Example</a>.</p>
-   
-  <h3 id="viewport" name="viewport">Viewport and Other Meta Tags</h3>   
-   
+
+  <h3 id="viewport" name="viewport">Viewport and Other Meta Tags</h3>
+
 <p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <code>viewport</code> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <code>viewport</code> meta tag was introduced by Apple to fill the screen resolution gap between initial Smartphone (for example, 320 px) and PC (for example, 980 px). Basically, the <code>viewport</code> meta tag helps the Web engine to determine the scale factor for the content on the current device.</p>
 
 <p>To use the tag in an HTML file, set its name and content:</p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;XXX&quot;&gt;
-</pre> 
+&lt;meta name="viewport" content="XXX"&gt;
+</pre>
 
 <p>As shown in the following code snippet, use the <code>viewport</code> meta tag to tell the Web engine which device width is targeted by the application. The Web engine can estimate the scale factor based on the target content size and the real screen width. For example, usually almost all wearable applications have the following <code>viewport</code> meta tag, which sets the viewport width to the appropriate size based on each device:</p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
-</pre> 
+&lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
+</pre>
 
 <p>If you want to set your content layout to the target width of 320 px on every wearable device, use the following meta tag:</p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=320&quot;&gt;
+&lt;meta name="viewport" content="width=320"&gt;
 </pre>
 
 <p>The <code>viewport</code> meta tag has other properties, such as <code>height</code>, <code>initial-scale</code>, <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>. However, do not use those properties unless you understand their exact meaning. Wrong values can cause the Web engine to incorrectly fit the application content to the current device.</p>
@@ -87,97 +87,97 @@
 <p>The relative layout concept means that the element size of all content is set as a relative unit (such as percentage), and not as absolute values (such as pixels or points). In responsive Web design, this concept is also known as <strong>fluid grid</strong> (for more information, search for <strong>responsive web design</strong> in your Web browser). To achieve a layout that works on multiple devices, you only need to know about relative layout, not all the other concepts of responsive Web design.</p>
 <p>To implementing a relative layout, you only have to set the width and height of each element as a percentage, as shown in the following example and figure. In the example, the width and height of the <code>number_pad</code> element is set to 100% and 70%, not 320 px and 224 px. </p>
 
-<p align="center"><strong>Figure: 320x320 calculator</strong></p> 
+<p align="center"><strong>Figure: 320x320 calculator</strong></p>
 <p><code>number_pad {width: 100%; height: 70%;}</code></p>
-<p align="center"><img alt="320x320 calculator" src="../../../images/layout_calculator.png"/></p> 
+<p align="center"><img alt="320x320 calculator" src="../../../images/layout_calculator.png"/></p>
 
 <p>An application with this relative layout is auto-fitted when it runs on an unexpected device, such as the device with a 360x480 resolution shown in the following figure. Even though this adjusted layout may not be as good as the original, it is good enough, since it shows a usable application UI.</p>
- 
 
-<p align="center"><strong>Figure: 360x480 calculator with a relative layout</strong></p>  
-       <p align="center"><img alt="360x480 calculator with a relative layout" src="../../../images/layout_calculator_relative.png"/></p> 
+
+<p align="center"><strong>Figure: 360x480 calculator with a relative layout</strong></p>
+       <p align="center"><img alt="360x480 calculator with a relative layout" src="../../../images/layout_calculator_relative.png"/></p>
 
 <p>The following figure shows what happens if you use an absolute 320x320 layout. The presentation is definitely ugly (with an empty white space at the bottom) and usability reduced, although the calculation logic itself still works.</p>
 <p align="center"><strong>Figure: 360x480 calculator with an absolute 320x320 layout</strong></p>
-<p><code>number_pad {width: 320px; height: 224px;}</code></p> 
- 
-  
-       <p align="center"><img alt="360x480 calculator with an absolute 320x320 layout" src="../../../images/layout_calculator_absolute.png"/></p> 
+<p><code>number_pad {width: 320px; height: 224px;}</code></p>
+
+
+       <p align="center"><img alt="360x480 calculator with an absolute 320x320 layout" src="../../../images/layout_calculator_absolute.png"/></p>
 
 <h3 id="header_footer" name="header_footer">Header and Footer Position</h3>
 
 <p>While the content layout itself becomes the application UI layout on a Web page, a typical wearable application layout consists of a header area, content area, and footer area. With this trend, many wearable Web applications are designed by separating the 3 areas explicitly.</p>
-<p align="center"><strong>Figure: Typical wearable Web application layout</strong></p>  
-<p align="center"><img alt="Typical wearable Web application layout" src="../../../images/layout_app.png"/></p> 
+<p align="center"><strong>Figure: Typical wearable Web application layout</strong></p>
+<p align="center"><img alt="Typical wearable Web application layout" src="../../../images/layout_app.png"/></p>
 
 <p>Not setting the place of the header and footer areas clearly can easily cause problems for your layout. In case of the header, the side-effect is relatively small. However, a wrongly defined footer area can be quite visible and lead to poor usability. The following figure shows the original layout of a pedometer application that consists of a header, content, and footer, with a Stop button set in the footer area. </p>
-<p align="center"><strong>Figure: 320x320 sample Web application</strong></p>  
-<p align="center"><img alt="320x320 sample Web application" src="../../../images/layout_sample.png"/></p> 
+<p align="center"><strong>Figure: 320x320 sample Web application</strong></p>
+<p align="center"><img alt="320x320 sample Web application" src="../../../images/layout_sample.png"/></p>
 
-<p>In this case, if the position of the footer is not defined explicitly or if the position and bottom properties do not have proper values, an ugly layout can be displayed on an unexpected device, such as the 360x480 screen shown in the following figure. </p> 
-<p align="center"><strong>Figure: Layout on 360x480</strong></p>  
-<p align="center"><img alt="Layout on 360x480" src="../../../images/layout_sample_ugly.png"/></p> 
+<p>In this case, if the position of the footer is not defined explicitly or if the position and bottom properties do not have proper values, an ugly layout can be displayed on an unexpected device, such as the 360x480 screen shown in the following figure. </p>
+<p align="center"><strong>Figure: Layout on 360x480</strong></p>
+<p align="center"><img alt="Layout on 360x480" src="../../../images/layout_sample_ugly.png"/></p>
 
-<p>To make the layout correct, define the position property as fixed and set the bottom property explicitly as 0 px:</p> 
+<p>To make the layout correct, define the position property as fixed and set the bottom property explicitly as 0 px:</p>
 
 <pre class="prettyprint">
 .footer {position: fixed; bottom: 0px;}
 </pre>
- 
+
 <p>The following figure shows the same Web application running on the unexpected device after the footer properties are defined properly. With the correct values, the Web application is usable even on a new target, not planned during the development phase. Note that if a <a href="#relative">relative layout</a> is also applied to the content area, the result is an even better layout and further improved usability.</p>
-<p align="center"><strong>Figure: Usable layout on 360x480</strong></p>  
-<p align="center"><img alt="Usable layout on 360x480" src="../../../images/layout_sample_ok.png"/></p> 
+<p align="center"><strong>Figure: Usable layout on 360x480</strong></p>
+<p align="center"><img alt="Usable layout on 360x480" src="../../../images/layout_sample_ok.png"/></p>
 
 <h3 id="flexible" name="flexible">Flexible Media</h3>
-       
+
 <p>One of key elements used in the content area is a media element, including image and video. As all other elements, the media elements also must be placed within a relative layout to allow the application flexibly handle resolution changes. When such relative sizing is applied to a media element, it is called <strong>flexible media</strong> in responsive Web design. </p>
 <p>The main issue when making a media element size relative is to ensure that the usable ratio does not change. The following figure shows a video element that works on both 320x320 and 360x480 resolutions, even though the aspect ratio of the screen is changed and scaled up. Basically, when handling media elements, you want to keep the size or ratio of the element the same as in the initially targeted device, even when displayed using a different resolution and aspect ratio. To achieve this, set the width and height properties of the media element with percentage and the auto keyword.</p>
 
-<p align="center"><strong>Figure: Flexible media on 320x320 and 360x480</strong></p> 
+<p align="center"><strong>Figure: Flexible media on 320x320 and 360x480</strong></p>
 <p><code>.video iframe {width: 100%; height: auto;}</code></p>
-<p align="center"><img alt="Flexible media on 320x320 and 360x480" src="../../../images/layout_flexible_media.png"/></p> 
+<p align="center"><img alt="Flexible media on 320x320 and 360x480" src="../../../images/layout_flexible_media.png"/></p>
+
 
- 
  <p>The following figure shows an example of wrong usage, where usability decreases as the video element is simply scaled up based on the aspect ratio change. If you set the video element size using a fixed size like this, you get no benefit from the increased resolution, and the layout on the whole screen becomes inharmonious, decreasing usability.</p>
 
 
-<p align="center"><strong>Figure: Fixed size media element</strong></p> 
+<p align="center"><strong>Figure: Fixed size media element</strong></p>
 <p><code> .video iframe {width: 320px; height: 240px;}</code></p>
-<p align="center"><img alt="Fixed size media element" src="../../../images/layout_fixed_media.png"/></p> 
+<p align="center"><img alt="Fixed size media element" src="../../../images/layout_fixed_media.png"/></p>
 
 <h3 id="single_example" name="single_example">Single Layout Example</h3>
-       
+
        <p>This section illustrates a complete application layout that takes advantage of the issues discussed in previous sections. In particular, it shows how to set the viewport properly to help the Web engine scaling mechanism and how to create a CSS-based layout.</p>
-       
-       
+
+
 <p>First of all, set the targeted size of the content area as 320 px in the <code>viewport</code> meta tag, and disable the <code>user-scalable</code> property, as shown in the following code snippet.</p>
 
 <pre class="prettyprint">
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=320px, user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box1&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box2&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile left&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box3&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;tile right&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box4&quot; class=&quot;box&quot;&gt;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/main&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt;
+      &lt;meta name="viewport" content="width=320px, user-scalable=no"/&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;main&gt;
+         &lt;div class="tile left"&gt;
+            &lt;div id="box1" class="box"&gt;&lt;/div&gt;
+         &lt;/div&gt;
+         &lt;div class="tile right"&gt;
+            &lt;div id="box2" class="box"&gt;&lt;/div&gt;
+         &lt;/div&gt;
+         &lt;div class="tile left"&gt;
+            &lt;div id="box3" class="box"&gt;&lt;/div&gt;
+         &lt;/div&gt;
+         &lt;div class="tile right"&gt;
+            &lt;div id="box4" class="box"&gt;&lt;/div&gt;
+         &lt;/div&gt;
+      &lt;/main&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
-<p>In the above HTML code, the content area consists of 4 <code>&lt;div&gt;</code> box elements, and their UI layout is described in the <code>style.css</code> file. The following CSS code programs the layout and the specific box element styles that were defined in the HTML file.</p> 
+<p>In the above HTML code, the content area consists of 4 <code>&lt;div&gt;</code> box elements, and their UI layout is described in the <code>style.css</code> file. The following CSS code programs the layout and the specific box element styles that were defined in the HTML file.</p>
 <p>The code snippet shows that the content size is set to be same as the viewport size. Each box is filled with a different color and placed so that it fills a quarter of the content area. Because each box size is defined with the width and height of 100%, the relative size of each box element remains the same even if the viewport size changes.</p>
 
 <pre class="prettyprint">
@@ -192,27 +192,27 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
 #box4 {background-color: rgb(192, 161, 246);}
 .tile
 {
-&nbsp;&nbsp;&nbsp;width: 50%;
-&nbsp;&nbsp;&nbsp;height: 50%;
-&nbsp;&nbsp;&nbsp;float: left;
+   width: 50%;
+   height: 50%;
+   float: left;
 }
 .left {padding: 10px 5px 5px 10px;}
 .right {padding: 10px 10px 5px 5px;}
 
 .box
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
+   width: 100%;
+   height: 100%;
 }
 </pre>
 
 
-<p>The following figure shows a final view when the 320 px is set as a target device in the HTML file. As defined in the CSS file, the content area fills the whole screen, 320x320 pixels, and the 4 box elements equally divide the area.</p> 
- 
- <p align="center"><strong>Figure: Original layout on a target device</strong></p>  
+<p>The following figure shows a final view when the 320 px is set as a target device in the HTML file. As defined in the CSS file, the content area fills the whole screen, 320x320 pixels, and the 4 box elements equally divide the area.</p>
+
+ <p align="center"><strong>Figure: Original layout on a target device</strong></p>
  <p align="center"><img alt="Original layout on a target device" src="../../../images/layout_original.png"/></p>
  <p>The following figure shows that the relative layout and scaling are correctly applied even when the same application is run on a mobile device with the aspect ratio of 16:9.</p>
-  <p align="center"><strong>Figure: Scaled layout on a 16:9 mobile device</strong></p>  
+  <p align="center"><strong>Figure: Scaled layout on a 16:9 mobile device</strong></p>
   <p align="center"><img alt="Scaled layout on a 16:9 mobile device" src="../../../images/layout_original_scaled.png"/></p>
 <p>The following code snippet shows an example where the background color is replaced with an image while the layout is exactly same as in the 4 box example. The following figures show how the layout including media elements (such as images) functions exactly like the basic box layout.</p>
 
@@ -228,68 +228,68 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
 #box4 {background-color: rgb(192, 161, 246);}
 .tile
 {
-&nbsp;&nbsp;&nbsp;width: 50%;
-&nbsp;&nbsp;&nbsp;height: 50%;
-&nbsp;&nbsp;&nbsp;float: left;
+   width: 50%;
+   height: 50%;
+   float: left;
 }
 .left {padding: 10px 5px 5px 10px;}
 .right {padding: 10px 10px 5px 5px;}
 
 .box
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;padding: 20px;
-&nbsp;&nbsp;&nbsp;background: no-repeat center;
-&nbsp;&nbsp;&nbsp;background-size: 100% 100%;
+   width: 100%;
+   height: 100%;
+   padding: 20px;
+   background: no-repeat center;
+   background-size: 100% 100%;
 }
 
-#box1 {background-image: url(&#39;../a.png&#39;);}
-#box2 {background-image: url(&#39;../b.png&#39;);}
-#box3 {background-image: url(&#39;../c.png&#39;);}
-#box4 {background-image: url(&#39;../d.png&#39;);}
+#box1 {background-image: url('../a.png');}
+#box2 {background-image: url('../b.png');}
+#box3 {background-image: url('../c.png');}
+#box4 {background-image: url('../d.png');}
 </pre>
 
 
- 
+
  <p align="center"><strong>Figure: Image-based layout on a target device</strong></p>
  <p align="center"><img alt="Image-based layout on a target device" src="../../../images/layout_image.png"/></p>
 
 <p align="center"><strong>Figure: Image-based scaled layout on a 16:9 mobile device</strong></p>
-<p align="center"><img alt="Image-based scaled layout on a 16:9 mobile device" src="../../../images/layout_image_scaled.png"/></p>     
+<p align="center"><img alt="Image-based scaled layout on a 16:9 mobile device" src="../../../images/layout_image_scaled.png"/></p>
+
 
+ <h2 id="multiple" name="multiple">Multiple Layouts for Multiple Devices</h2>
 
- <h2 id="multiple" name="multiple">Multiple Layouts for Multiple Devices</h2> 
-  
   <p>In many cases, the desired end result for your application can be achieved using scaling and a relative layout within a <a href="#single">single layout</a>. However, this approach does not always provide the best quality for the end user. </p>
 <p>You can support the best possible layout and usability with some additional development efforts. For instance, you can create an application which, on a tablet, shows the main information (watch face) and also delivers more meaningful information (calendar), while on a watch device the same application only displays the main information (watch face). This kind of end result, as shown in the following figure, cannot be achieved by only scaling up the whole layout of the watch device.</p>
-<p align="center"><strong>Figure: Application for a watch and tablet</strong></p>  
-<p align="center"><img alt="Application for a watch and tablet" src="../../../images/multiple_layout_example.png"/></p>  
+<p align="center"><strong>Figure: Application for a watch and tablet</strong></p>
+<p align="center"><img alt="Application for a watch and tablet" src="../../../images/multiple_layout_example.png"/></p>
 
-<p>W3C CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues:</p> 
+<p>W3C CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues:</p>
 
-  <ul> 
+  <ul>
   <li><a href="#viewport2">Viewport setting</a></li>
-   <li><a href="#category">Category classification</a></li> 
-   <li><a href="#display">Classification for display modes</a></li>  
+   <li><a href="#category">Category classification</a></li>
+   <li><a href="#display">Classification for display modes</a></li>
  </ul>
 
- 
-<p>Since the <strong>2.3.1</strong> version, Tizen also supports a special media query feature to provide device shape-based layouts. If you want to create an application for both square-shaped and circular-shaped devices, you can easily <a href="#migration">migrate your application to support both shapes</a>.</p> 
- <p align="center"><strong>Figure: Application for a square and circular device</strong></p>  
- <p align="center"><img alt="Application for a square and circular device" src="../../../images/circular_support.png"/></p>  
-     
 
-  <h3 id="viewport2" name="viewport2">Viewport Setting for Multiple Layouts</h3>   
-<p>The difference between multiple and single layouts is that, in the multiple layouts, the content width of the <code>viewport</code> meta tag is set to <code>&quot;device-width&quot;</code>. This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the <code>&quot;device-width&quot;</code> setting is needed to create an adaptive and responsive Web application. </p>
+<p>Since the <strong>2.3.1</strong> version, Tizen also supports a special media query feature to provide device shape-based layouts. If you want to create an application for both square-shaped and circular-shaped devices, you can easily <a href="#migration">migrate your application to support both shapes</a>.</p>
+ <p align="center"><strong>Figure: Application for a square and circular device</strong></p>
+ <p align="center"><img alt="Application for a square and circular device" src="../../../images/circular_support.png"/></p>
+
+
+  <h3 id="viewport2" name="viewport2">Viewport Setting for Multiple Layouts</h3>
+<p>The difference between multiple and single layouts is that, in the multiple layouts, the content width of the <code>viewport</code> meta tag is set to <code>"device-width"</code>. This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the <code>"device-width"</code> setting is needed to create an adaptive and responsive Web application. </p>
 
 <p>To use the meta tag in an HTML file, set its name and content: </p>
 <pre class="prettyprint">
-&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt;
+&lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
 </pre>
 
 <h3 id="category" name="category">Category Classification</h3>
-       
+
 <p>When creating multiple layouts, you must first configure the layout categories. In other words, a classifying category is needed to fit the layout on the current executable environment. Media queries are supported in CSS3 to give Web application information to the executable environment.</p>
 
 <h4>W3C Media Queries</h4>
@@ -318,78 +318,78 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
 @media screen and (min-width: 500px) {...}
 </pre>
 
-<p>The following table lists the CSS media features, which you can use to specify the layout utilizing the media queries.</p> 
- 
+<p>The following table lists the CSS media features, which you can use to specify the layout utilizing the media queries.</p>
+
 <p align="center" class="Table"><strong>Table: Media features</strong></p>
 <table>
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
+   <tbody>
+    <tr>
+     <th>Feature</th>
         <th>Value</th>
         <th>Min/Max</th>
-        <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td>color</td> 
+        <th>Description</th>
+    </tr>
+    <tr>
+     <td>color</td>
      <td rowspan="2">integer</td>
         <td rowspan="5">yes</td>
-        <td>Number of bits per a color component</td>   
-    </tr> 
+        <td>Number of bits per a color component</td>
+    </tr>
   <tr>
     <td>color-index</td>
         <td>Number of entries in the color lookup table</td>
   </tr>
-    <tr> 
-     <td>device-aspect-ratio</td> 
+    <tr>
+     <td>device-aspect-ratio</td>
      <td>integer/integer</td>
-        <td>Aspect ratio</td>   
-    </tr>  
-    <tr> 
-     <td>device-height</td> 
+        <td>Aspect ratio</td>
+    </tr>
+    <tr>
+     <td>device-height</td>
      <td rowspan="2">length</td>
-        <td>Output device height</td>   
+        <td>Output device height</td>
     </tr>
-    <tr> 
-     <td>device-width</td> 
-        <td>Output device width</td>    
+    <tr>
+     <td>device-width</td>
+        <td>Output device width</td>
     </tr>
-    <tr> 
-     <td>grid</td> 
+    <tr>
+     <td>grid</td>
      <td>integer</td>
         <td>no</td>
-        <td>Set to true for a grid-based device</td>    
+        <td>Set to true for a grid-based device</td>
     </tr>
-    <tr> 
-     <td>height</td> 
+    <tr>
+     <td>height</td>
      <td>length</td>
         <td rowspan="3">yes</td>
-        <td>Rendering surface height</td>       
+        <td>Rendering surface height</td>
     </tr>
-    <tr> 
-     <td>monochrome</td> 
+    <tr>
+     <td>monochrome</td>
      <td>integer</td>
-        <td>Number of bits per pixel in a monochrome frame buffer</td>  
+        <td>Number of bits per pixel in a monochrome frame buffer</td>
     </tr>
-    <tr> 
-     <td>resolution</td> 
+    <tr>
+     <td>resolution</td>
      <td>resolution (<code>dpi</code> or <code>dpcm</code>)</td>
-        <td>Resolution</td>     
+        <td>Resolution</td>
     </tr>
-    <tr> 
-     <td>scan</td> 
+    <tr>
+     <td>scan</td>
      <td><code>progressive</code> or <code>interlaced</code></td>
         <td>no</td>
-        <td>Scanning process of the <code>tv</code> media types</td>    
+        <td>Scanning process of the <code>tv</code> media types</td>
     </tr>
-    <tr> 
-     <td>width</td> 
+    <tr>
+     <td>width</td>
      <td>length</td>
         <td>yes</td>
-        <td>Rendering surface width</td>        
-    </tr>      
-   </tbody> 
+        <td>Rendering surface width</td>
+    </tr>
+   </tbody>
   </table>
- 
+
 <h4>Tizen Specialized Media Query</h4>
 <p>Tizen supports a special media query feature for a circular device shape. The following table lists the supported media features.</p>
 
@@ -397,49 +397,49 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
        <strong>Note</strong>
        This feature is supported since <strong>2.3.1</strong>.
 </div>
- 
+
 <p align="center" class="Table"><strong>Table: Tizen specialized media feature</strong></p>
 <table>
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
+   <tbody>
+    <tr>
+     <th>Feature</th>
         <th>Value</th>
         <th>Min/Max</th>
-        <th>Description</th> 
-    </tr> 
-    
-    <tr> 
-     <td><code>-tizen-geometric-shape</code></td> 
-     <td><code>&quot;rectangle&quot;</code> | <code>&quot;circle&quot;</code></td>
+        <th>Description</th>
+    </tr>
+
+    <tr>
+     <td><code>-tizen-geometric-shape</code></td>
+     <td><code>"rectangle"</code> | <code>"circle"</code></td>
         <td>No</td>
-        <td>Device shape</td>   
+        <td>Device shape</td>
     </tr>
-    
-   </tbody> 
+
+   </tbody>
   </table>
 
 <p>You can combine this media query feature with the W3C type in your code. The final view shows the layout inside <code>{...}</code> to the end user:</p>
 <pre class="prettyprint">
 @media all and (-tizen-geometric-shape: circle) {...}
 </pre>
- 
-       
+
+
 <h3 id="display" name="display">Classification for Display Modes</h3>
 
 <p>The display mode can be classified as portrait or landscape for a rectangle-shaped device, or circular for a circular device.</p>
 
 <h4>Portrait and Landscape</h4>
 
-<p>You can configure the device landscape and portrait mode using the <code>device-aspect-ratio</code> attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <code>max-device-aspect-ratio</code> feature is used.</p> 
-<p>If you use the <code>orientation: portrait/landscape</code> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <code>device-aspect-ratio</code> to configure the portrait and landscape mode.</p> 
+<p>You can configure the device landscape and portrait mode using the <code>device-aspect-ratio</code> attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <code>max-device-aspect-ratio</code> feature is used.</p>
+<p>If you use the <code>orientation: portrait/landscape</code> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <code>device-aspect-ratio</code> to configure the portrait and landscape mode.</p>
 <pre class="prettyprint lang-html">
 @media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1)
 {
-&nbsp;&nbsp;&nbsp;&lt;!--For portrait mode--&gt;
+   &lt;!--For portrait mode--&gt;
 }
 @media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10)
 {
-&nbsp;&nbsp;&nbsp;&lt;!--For landscape mode--&gt;
+   &lt;!--For landscape mode--&gt;
 }
 </pre>
 
@@ -455,11 +455,11 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
 <pre class="prettyprint lang-html">
 @media all and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;&lt;!--For a circular device--&gt;
+   &lt;!--For a circular device--&gt;
 }
 </pre>
 
-<h3 id="migration" name="migration">Application Migration to a Circular Device</h3>    
+<h3 id="migration" name="migration">Application Migration to a Circular Device</h3>
 
 <p>This section illustrates an example for how you can migrate a basic application from a rectangular device (such as Gear 2 or Gear S) to a circular device. Use this example as the best practice to improve your layout.</p>
 
@@ -467,95 +467,95 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
 
 <pre class="prettyprint">
 &lt;!--HTML code--&gt;
-&lt;section id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header&gt;HEADER&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;article id=&quot;content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 4&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 5&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 6&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 7&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 8&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 9&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;List Item 10&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&lt;/article&gt;
-&nbsp;&nbsp;&nbsp;&lt;footer&gt;FOOTER&lt;/footer&gt;
+&lt;section id="main"&gt;
+   &lt;header&gt;HEADER&lt;/header&gt;
+   &lt;article id="content"&gt;
+      &lt;ul&gt;
+         &lt;li&gt;List Item 1&lt;/li&gt;
+         &lt;li&gt;List Item 2&lt;/li&gt;
+         &lt;li&gt;List Item 3&lt;/li&gt;
+         &lt;li&gt;List Item 4&lt;/li&gt;
+         &lt;li&gt;List Item 5&lt;/li&gt;
+         &lt;li&gt;List Item 6&lt;/li&gt;
+         &lt;li&gt;List Item 7&lt;/li&gt;
+         &lt;li&gt;List Item 8&lt;/li&gt;
+         &lt;li&gt;List Item 9&lt;/li&gt;
+         &lt;li&gt;List Item 10&lt;/li&gt;
+      &lt;/ul&gt;
+   &lt;/article&gt;
+   &lt;footer&gt;FOOTER&lt;/footer&gt;
 &lt;/section&gt;
 
 &lt;!--CSS code--&gt;
 html, body
 {
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;padding: 0;
-&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;font-size: 24px;
-&nbsp;&nbsp;&nbsp;overflow: hidden;
+   height: 100%;
+   width: 100%;
+   padding: 0;
+   margin: 0;
+   font-size: 24px;
+   overflow: hidden;
 }
 
 section
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;overflow: auto;
-&nbsp;&nbsp;&nbsp;padding: 70px 0;
+   width: 100%;
+   height: 100%;
+   overflow: auto;
+   padding: 70px 0;
 }
 
 header, footer
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 70px;
-&nbsp;&nbsp;&nbsp;min-height: 70px;
-&nbsp;&nbsp;&nbsp;line-height: 70px;
-&nbsp;&nbsp;&nbsp;font-size: 30px;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;position: fixed;
+   width: 100%;
+   height: 70px;
+   min-height: 70px;
+   line-height: 70px;
+   font-size: 30px;
+   text-align: center;
+   position: fixed;
 }
 
 header
 {
-&nbsp;&nbsp;&nbsp;top: 0;
+   top: 0;
 }
 
 footer
 {
-&nbsp;&nbsp;&nbsp;bottom: 0;
+   bottom: 0;
 }
 
 article ul li
 {
-&nbsp;&nbsp;&nbsp;border-top: 1px solid rgba(52, 52, 52, 1);
-&nbsp;&nbsp;&nbsp;padding: 15px 20px;
-&nbsp;&nbsp;&nbsp;color: rgba(209, 209, 209, 1);
-&nbsp;&nbsp;&nbsp;font-size: 40px;
+   border-top: 1px solid rgba(52, 52, 52, 1);
+   padding: 15px 20px;
+   color: rgba(209, 209, 209, 1);
+   font-size: 40px;
 }
 
 article ul li:first
 {
-&nbsp;&nbsp;&nbsp;border-top: 0 none;
+   border-top: 0 none;
 }
 </pre>
 
 <p>To migrate the application, use the following steps:</p>
 
- <ol> 
+ <ol>
   <li>Use a relative layout.
 
  <p>To achieve a responsive layout for different devices, implement a relative layout. Simply set the <code>width: 100%</code> attribute to the layout elements in the CSS code:</p>
 <pre class="prettyprint">
 section
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
+   width: 100%;
+   height: 100%;
 }
 
 header, footer
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
+   width: 100%;
 }
 </pre>
 
@@ -566,26 +566,26 @@ header, footer
 </li>
    <li>Set extra spaces both at the top and bottom.
 
- <p>During the migration, you can see how a certain portion of the rectangle view is covered over by the circular view, especially the header and the footer. To make them fully and consistently visible in the circular view, provide a &quot;padding&quot; space at the top and bottom of the page. In the following example migrating to a circular gear device from a rectangular Gear S, extra 77 px padding is used:</p>
+ <p>During the migration, you can see how a certain portion of the rectangle view is covered over by the circular view, especially the header and the footer. To make them fully and consistently visible in the circular view, provide a "padding" space at the top and bottom of the page. In the following example migrating to a circular gear device from a rectangular Gear S, extra 77 px padding is used:</p>
 <pre class="prettyprint">
 @media all and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;section {padding: 77px 0;}
+   section {padding: 77px 0;}
 }
 </pre>
 
- <p align="center"><strong>Figure: Top and bottom padding</strong></p>  
- <p align="center"><img alt="Top and bottom padding" src="../../../images/migrate_padding.png"/></p>  
+ <p align="center"><strong>Figure: Top and bottom padding</strong></p>
+ <p align="center"><img alt="Top and bottom padding" src="../../../images/migrate_padding.png"/></p>
 </li>
    <li>Set the header and footer position.
 
 <p>After setting the top and bottom padding, set the header and footer position for scrolling in the circular view.</p>
 <p>For a rectangular device with a lengthwise screen, especially Gear S, the best option is to make only the content area scrollable.</p>
 
-<p align="center"><strong>Figure: Scrolling with a rectangular screen</strong></p>  
+<p align="center"><strong>Figure: Scrolling with a rectangular screen</strong></p>
 <p align="center"><img alt="Scrolling with a rectangular screen" src="../../../images/migrate_scrollable_rect.png"/></p>
 <p>In a circular screen, it is better to make the whole page scrollable, including the top and bottom space.</p>
-<p align="center"><strong>Figure: Scrolling with a circular screen</strong></p>  
+<p align="center"><strong>Figure: Scrolling with a circular screen</strong></p>
 <p align="center"><img alt="Scrolling with a circular screen" src="../../../images/migrate_scrollable_circle.png"/></p>
 
 <p>To implement the header and footer position, use the CSS <code>position</code> attribute:</p>
@@ -593,52 +593,52 @@ header, footer
 &lt;!--Rectangular device--&gt;
 header, footer
 {
-&nbsp;&nbsp;&nbsp;position: fixed;
+   position: fixed;
 }
 
 &lt;!--Circular device--&gt;
 @media all and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;header, footer
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: static;
-&nbsp;&nbsp;&nbsp;}
+   header, footer
+   {
+      position: static;
+   }
 }
 </pre>
 
 </li>
    <li>Move the display to the initial position.
 
-<p>To provide a better user experience, show the entire display at the beginning, including the &quot;top padding&quot; space. A few seconds after the application launch, move the display back to its initial position, where the header is placed on the top without any space between itself and the edge of the screen. When the display moves like this, the users can perceive the existence of the top space.</p>
+<p>To provide a better user experience, show the entire display at the beginning, including the "top padding" space. A few seconds after the application launch, move the display back to its initial position, where the header is placed on the top without any space between itself and the edge of the screen. When the display moves like this, the users can perceive the existence of the top space.</p>
 
-<p align="center"><strong>Figure: Moving to the initial position</strong></p>  
+<p align="center"><strong>Figure: Moving to the initial position</strong></p>
 <p align="center"><img alt="Moving to the initial position" src="../../../images/migrate_move_to_top.png"/></p>
 
 <p>The scroll move requires several lines of JavaScript code. In the following sample, the few (N) seconds is set to 1500 ms, but you can change the value as needed.</p>
 <pre class="prettyprint">
 (function initScrollPosition()
 {
-&nbsp;&nbsp;&nbsp;var SCROLL_DELAY_TIME = 1500,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = document.getElementById(&quot;main&quot;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollPosition =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.parseInt(window.getComputedStyle(page)[&quot;padding-top&quot;]),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mql = window.matchMedia(&quot;(-tizen-geometric-shape: circle)&quot;);
-
-&nbsp;&nbsp;&nbsp;/* Effect is applied to a circular device only, so use a media query */
-&nbsp;&nbsp;&nbsp;if (mql.matches)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;scroll&quot;, function clearInitScrollCallback()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.clearTimeout(initScrollTimeoutId);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.removeEventListener(&quot;scroll&quot;, clearInitScrollCallback, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, false);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initScrollTimeoutId = window.setTimeout(function()
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page.scrollTop = scrollPosition;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, SCROLL_DELAY_TIME);
-&nbsp;&nbsp;&nbsp;}
+   var SCROLL_DELAY_TIME = 1500,
+       page = document.getElementById("main"),
+       scrollPosition =
+          window.parseInt(window.getComputedStyle(page)["padding-top"]),
+       initScrollTimeoutId = null,
+       mql = window.matchMedia("(-tizen-geometric-shape: circle)");
+
+   /* Effect is applied to a circular device only, so use a media query */
+   if (mql.matches)
+   {
+      page.addEventListener("scroll", function clearInitScrollCallback()
+         {
+            window.clearTimeout(initScrollTimeoutId);
+            page.removeEventListener("scroll", clearInitScrollCallback, false);
+         }, false);
+
+      initScrollTimeoutId = window.setTimeout(function()
+         {
+            page.scrollTop = scrollPosition;
+         }, SCROLL_DELAY_TIME);
+   }
 }());
 </pre>
 
@@ -646,23 +646,23 @@ header, footer
    <li>Set extra attributes for a better view.
 
 <p>Extra attributes are not mandatory in the migration process, but they can be helpful for a better application view.</p>
-<p>Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements&#39; layout are needed too. For example, consider setting the <code>text-align: center</code> attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.</p>
+<p>Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements' layout are needed too. For example, consider setting the <code>text-align: center</code> attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.</p>
 
 <pre class="prettyprint">
 &lt;!--Common style for header and footer text--&gt;
 header, footer
 {
-&nbsp;&nbsp;&nbsp;text-align: center;
+   text-align: center;
 }
 
 &lt;!--In a circular screen, list item has a center position--&gt;
 @media all and (-tizen-geometric-shape: circle)
 {
-&nbsp;&nbsp;&nbsp;article ul li
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 60px;
-&nbsp;&nbsp;&nbsp;}
+   article ul li
+   {
+      text-align: center;
+      line-height: 60px;
+   }
 }
 </pre>
 </li>
diff --git a/org.tizen.guides/html/web/w3c/ui/woff_w.htm b/org.tizen.guides/html/web/w3c/ui/woff_w.htm
index 781b967..27220a6 100644 (file)
--- a/org.tizen.guides/html/web/w3c/ui/woff_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/woff_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
@@ -14,12 +14,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -36,7 +36,7 @@
                        <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#woff">WOFF File Format 1.0 API for Wearable Web</a></li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>WOFF File Format (1.0)</h1>
@@ -48,12 +48,12 @@
 <p>The new text features in WOFF File Format 1.0 include:</p>
 <ul>
 
-<li>WOFF file format 1.0 
+<li>WOFF file format 1.0
 <p>WOFF (Web Open Font Format) is a packaging format used to decode and restore font data according to the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><code>@font-face</code> rule</a> to display it identically with the input font. The <code>@font-face</code> rule is a CSS rule that allows linking to fonts and finding a suitable font to display if the original font is not available. You can <a href="#woff">use WOFF</a> within a Web page. </p></li>
-</ul> 
+</ul>
 
 <h2 id="woff" name="woff">Using the WOFF File Format</h2>
-                               
+
 <p>To enhance the user experience of your application, you must learn to use the WOFF (Web Open Font Format) file format 1.0, which is a W3C standard font packaging format used in Web pages:</p>
 
 <ol>
@@ -73,44 +73,44 @@
 <p>Define the rules with in a <code>&lt;style&gt;</code> element in the <code>&lt;head&gt;</code> section of a Web page:</p>
 <pre class="prettyprint">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;style&gt;
-&nbsp;&nbsp;&nbsp;@font-face
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_1_0.woff&#39;) format(&#39;woff&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@font-face
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_0_0.woff&#39;) format(&#39;woff&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;@font-face
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: MuseoSans;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: 900;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src: local(&#39;MuseoSans&#39;),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(&#39;https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_2_0.woff&#39;) format(&#39;woff&#39;);
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;p:nth-child(2) {font-family: MuseoSans}
-&nbsp;&nbsp;&nbsp;p:nth-child(3) {font-family: MuseoSans; font-weight: bold;}
-&nbsp;&nbsp;&nbsp;p:nth-child(4) {font-family: MuseoSans; font-weight: 900;}
-&nbsp;&nbsp;&nbsp;&lt;/style&gt;
+   &lt;style&gt;
+   @font-face
+   {
+      font-family: MuseoSans;
+      src: local('MuseoSans'),
+           url('https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_1_0.woff') format('woff');
+   }
+
+   @font-face
+   {
+      font-family: MuseoSans;
+      font-weight: bold;
+      src: local('MuseoSans'),
+           url('https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_0_0.woff') format('woff');
+   }
+
+   @font-face
+   {
+      font-family: MuseoSans;
+      font-weight: 900;
+      src: local('MuseoSans'),
+           url('https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_2_0.woff') format('woff');
+   }
+
+   p:nth-child(2) {font-family: MuseoSans}
+   p:nth-child(3) {font-family: MuseoSans; font-weight: bold;}
+   p:nth-child(4) {font-family: MuseoSans; font-weight: 900;}
+   &lt;/style&gt;
 &lt;/head&gt;
 </pre>
 </li>
 <li>In the <code>&lt;body&gt;</code> section, create <code>&lt;p&gt;</code> elements containing text in which the font rules are implemented:
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
+   &lt;p&gt;The quick brown fox jumps over a lazy dog.&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
@@ -118,7 +118,7 @@
 </ol>
 <p align="center"><strong>Figure: Implementing the @font-face rules (in mobile applications only)</strong></p>
 <p align="center"><img alt="Implementing the @font-face rules (in mobile applications only)" src="../../../images/font_face.png" /></p>
-         
+
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
diff --git a/org.tizen.guides/html/web/w3c/useful/performance_w.htm b/org.tizen.guides/html/web/w3c/useful/performance_w.htm
index 2172a5b..841f856 100644 (file)
--- a/org.tizen.guides/html/web/w3c/useful/performance_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/performance_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Performance Improvement</title> 
- </head> 
+  <title>Performance Improvement</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,12 +33,12 @@
                        <li><a href="#launch">Improving the Application Launch Time</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-   
+
   <h1>Performance Improvement</h1>
-               
+
 <p>With the following instructions, you can improve the performance of your wearable Web applications. The instructions summarize some representative tips that are frequently used in the Web community.</p>
 <ul>
 <li><a href="#reduce">Reducing the access time for variables</a></li>
@@ -48,7 +48,7 @@
 <li><a href="#launch">Improving the application launch time</a></li>
 </ul>
 
-<p>This feature is supported in wearable applications only.</p> 
+<p>This feature is supported in wearable applications only.</p>
 
 <p>For more detailed and comprehensive information, study the following documentation:</p>
        <ul>
@@ -75,13 +75,13 @@
 var globalVar;
 test: function()
 {
-&nbsp;&nbsp;&nbsp;var one = globalVar + 1;  (X)
-&nbsp;&nbsp;&nbsp;var two = globalVar + 2;  (X)
-&nbsp;&nbsp;&nbsp;var ratio =
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.innerWidth / (window.innerHeight + window.innerWidth);  (X)
+   var one = globalVar + 1;  (X)
+   var two = globalVar + 2;  (X)
+   var ratio =
+      window.innerWidth / (window.innerHeight + window.innerWidth);  (X)
 }
 </pre></td>
-                               
+
                        </tr>
                        <tr>
                                <th>After</th>
@@ -89,11 +89,11 @@ test: function()
 <pre class="prettyprint">
 test: function()
 {
-&nbsp;&nbsp;&nbsp;var global = globalVar;  (O)
-&nbsp;&nbsp;&nbsp;var one = global + 1;
-&nbsp;&nbsp;&nbsp;screenHeight = window.innerHeight; (O)
-&nbsp;&nbsp;&nbsp;screenWidth= window.innerWidth; (O)
-&nbsp;&nbsp;&nbsp;var ratio = screenWidth / (screenHeight + screenWidth);
+   var global = globalVar;  (O)
+   var one = global + 1;
+   screenHeight = window.innerHeight; (O)
+   screenWidth= window.innerWidth; (O)
+   var ratio = screenWidth / (screenHeight + screenWidth);
 }
 </pre></td>
                        </tr>
@@ -104,7 +104,7 @@ test: function()
        <strong>Tip</strong>
        To minimize the property access time:
 <ul><li>Property depth: the deeper the property hierarchy is, the more search time is requires (object.name &lt; object.name.name).</li>
-<li>Property notation: dot notation is faster than associate notation in Webkit (object.name &lt; object [&quot;name&quot;]).</li></ul>
+<li>Property notation: dot notation is faster than associate notation in Webkit (object.name &lt; object ["name"]).</li></ul>
 </div>
 
 <h2 id="event" name="event">Improving the Event Handler Response Time</h2>
@@ -120,14 +120,14 @@ test: function()
                                <th>Before</th>
        <td>
 <pre class="prettyprint">
-document.getElementById(&#39;a&#39;).onclick = function()
+document.getElementById('a').onclick = function()
 {
-&nbsp;&nbsp;&nbsp;alert(&#39;&lt;a&gt; clicked!!&#39;);
+   alert('&lt;a&gt; clicked!!');
 }
 
-document.getElementById(&#39;div&#39;).onclick = function()
+document.getElementById('div').onclick = function()
 {
-&nbsp;&nbsp;&nbsp;alert(&#39;&lt;div&gt; clicked!!&#39;);
+   alert('&lt;div&gt; clicked!!');
 }
 
 </pre></td>
@@ -139,15 +139,15 @@ document.getElementById(&#39;div&#39;).onclick = function()
 <pre class="prettyprint">
 document.getElementById('ul').onclick = function()
 {
-&nbsp;&nbsp;&nbsp;var target = e.target;
-&nbsp;&nbsp;&nbsp;if (target.nodeName == &#39;a&#39;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&#39;&lt;a&gt; clicked!!&#39;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (target.nodeName == &#39;div&#39;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&#39;&lt;div&gt; clicked!&#39;);
-&nbsp;&nbsp;&nbsp;}
+   var target = e.target;
+   if (target.nodeName == 'a')
+   {
+      alert('&lt;a&gt; clicked!!');
+   }
+   else if (target.nodeName == 'div')
+   {
+      alert('&lt;div&gt; clicked!');
+   }
 }
 </pre></td>
                        </tr>
@@ -165,7 +165,7 @@ document.getElementById('ul').onclick = function()
                        <th>Removing an unused property</th>
                        <td>
 <pre class="prettyprint">
-var myApp = {prop: &quot;myprop&quot;};
+var myApp = {prop: "myprop"};
 delete myApp.prop;
 </pre></td>
                        </tr>
@@ -173,20 +173,20 @@ delete myApp.prop;
                        <th>Removing an unused DOM element</th>
                        <td>
 <pre class="prettyprint">
-var el= $(&#39;#myelem&#39;);
+var el= $('#myelem');
 el.parentNode.removeChild(el);
 </pre></td>
                        </tr>
        </tbody>
-</table>       
+</table>
   <h2 id="minimise" name="minimise">Minimizing the Document Flow</h2>
 
 <p>The layout of the Web application is maintained in Webkit as a DOM tree. The CSS style is applied to the DOM tree and produces the render tree that contains the rendering information for the real screen. The user sees the result of painting the render tree. The following figure shows the overall rendering flow that happens in the Webkit layout engine.</p>
 
-<p align="center"><strong>Figure: Webkit rendering flow</strong></p> 
+<p align="center"><strong>Figure: Webkit rendering flow</strong></p>
 <p align="center"><img alt="Webkit rendering flow" src="../../../images/minimize_doc_flow.png" /></p>
 
-<p>You can improve performance by designing your application to avoid unnecessary rendering. Minimizing the chances of DOM tree changes is a key to optimizing Web application performance, because usually the rendering needs to be done whenever the DOM tree is changed (this situation is called &quot;document reflow&quot; - Webkit needs to recalculate the position of elements in the document after a DOM change).</p>
+<p>You can improve performance by designing your application to avoid unnecessary rendering. Minimizing the chances of DOM tree changes is a key to optimizing Web application performance, because usually the rendering needs to be done whenever the DOM tree is changed (this situation is called "document reflow" - Webkit needs to recalculate the position of elements in the document after a DOM change).</p>
 
 <p>The document reflow happens:</p>
        <ul>
@@ -202,7 +202,7 @@ el.parentNode.removeChild(el);
 <ul>
 <li>Manipulate tables separately from the DOM tree.
 <p>The intuitive way to manipulate table values is to directly access and modify each value. However, this approach results in very poor performance, since every change of every value leads to a DOM change (often causing a document reflow). To avoid this problem, separate the table from the DOM tree and make changes on the detached table only. After the changes, attach the changed table to the original DOM tree. The end result is the same, but the performance difference is significant.</p>
-<p>The following example illustrates the issue.</p> 
+<p>The following example illustrates the issue.</p>
 
 <p align="center" class="Table"><strong>Table: Example of manipulating tables</strong></p>
 <table border="1">
@@ -215,10 +215,10 @@ table.addLotsAndLotsOfRows();
 </pre></td>
                        </tr>
                        <tr><th>Manipulating table nodes without document reflow</th>
-                               
+
                                <td>
 <pre class="prettyprint">
-var table = $(&#39;#some-table&#39;);
+var table = $('#some-table');
 var parent = table.parent();
 table.remove();
 table.addLotsAndLotsOfRows();
@@ -248,9 +248,9 @@ parent.append(table);
                                <td>
 <pre class="prettyprint">
 var newWidth = aDiv.offsetWidth + 10; /* Read */
-aDiv.style.width = newWidth + &#39;px&#39;; /* Write */
+aDiv.style.width = newWidth + 'px'; /* Write */
 var newHeight = aDiv.offsetHeight + 10; /* Read */
-aDiv.style.height = newHeight + &#39;px&#39;; /* Write */
+aDiv.style.height = newHeight + 'px'; /* Write */
 </pre></td>
                        </tr>
                        <tr>
@@ -259,20 +259,20 @@ aDiv.style.height = newHeight + &#39;px&#39;; /* Write */
 <pre class="prettyprint">
 var newWidth = aDiv.offsetWidth + 10; /* Read */
 var newHeight = aDiv.offsetHeight + 10; /* Read */
-aDiv.style.width = newWidth + &#39;px&#39;; /* Write */
-aDiv.style.height = newHeight + &#39;px&#39;; /* Write */
+aDiv.style.width = newWidth + 'px'; /* Write */
+aDiv.style.height = newHeight + 'px'; /* Write */
 </pre></td>
                        </tr>
                </tbody>
-</table></li></ul>     
+</table></li></ul>
   <h2 id="launch" name="launch">Improving the Application Launch Time</h2>
 
 
-<p>The basic principle of improving the launch time of a Web application is simply to &quot;show first page as fast as possible and do nothing but UI rendering&quot;. To apply this principle:</p>
+<p>The basic principle of improving the launch time of a Web application is simply to "show first page as fast as possible and do nothing but UI rendering". To apply this principle:</p>
 
        <ul>
                <li>Reduce the number of files.
-               <p>The intuition behind the rule to reducing the number of files can be expressed as &quot;less files &gt; less file operations &gt; faster load&quot;. As shown in the following table, you can reduce 3 JavaScript files to just 1 while keeping the same content.</p>
+               <p>The intuition behind the rule to reducing the number of files can be expressed as "less files &gt; less file operations &gt; faster load". As shown in the following table, you can reduce 3 JavaScript files to just 1 while keeping the same content.</p>
 <p>In case of large-scale Web applications, 1 application can contain 20-30 or even more JavaScript files, and concatenating the JavaScript can make the initial file operations significantly faster, eventually leading to a faster launch time.</p>
 
 <p align="center" class="Table"><strong>Table: Example of reducing the number of files</strong></p>
@@ -282,16 +282,16 @@ aDiv.style.height = newHeight + &#39;px&#39;; /* Write */
                                <th>Separating JavaScript files</th>
                                <td>
 <pre class="prettyprint">
-&lt;script src=&quot;foo1.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;foo2.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;foo3.js&quot;&gt;&lt;/script&gt;
+&lt;script src="foo1.js"&gt;&lt;/script&gt;
+&lt;script src="foo2.js"&gt;&lt;/script&gt;
+&lt;script src="foo3.js"&gt;&lt;/script&gt;
 </pre></td>
                        </tr>
                        <tr>
                                <th>Concatenating JavaScript files</th>
                                <td>
 <pre class="prettyprint">
-&lt;script src=&quot;foo.js&quot;&gt;&lt;/script&gt;
+&lt;script src="foo.js"&gt;&lt;/script&gt;
 &lt;!--foo.js contains foo1.js, foo2.js, and foo3.js--&gt;
 </pre></td>
                        </tr>
@@ -311,7 +311,7 @@ aDiv.style.height = newHeight + &#39;px&#39;; /* Write */
                <p>Take advantage of a useful technique called deferring loading. The UI component creation starts at the DOMContentLoad time, and at this time all the DOM elements in the first page (<code>index.html</code>) are constructed. Of course, images and other resources are not yet loaded at this stage.</p>
 <p>Often the first page can contain unnecessary elements, and consequently slow down the DOM construction. To avoid the problem, construct the first page to contain only the necessary elements to show the first scene, and put the rest of the pages in another HTML file. Similarly, if you do not need some JavaScript functionality on the first page, load the related JavaScript files only after the first page is loaded.</p></li>
        </ul>
- 
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm b/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
index cfa6cf4..e2ef5c1 100644 (file)
--- a/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
@@ -5,38 +5,38 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Tizen WebKit Tap Sound Policy</title>  
+       <title>Tizen WebKit Tap Sound Policy</title>
 
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
                        <li>Tizen 2.4 and Higher for Mobile</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
 <h1>Tizen WebKit Tap Sound Policy</h1>
-                               
+
 <p>To provide responsiveness on user interaction, Tizen WebKit plays sounds when a user taps an element and specific conditions are fulfilled.</p>
 
-<p>This feature is supported in mobile applications only.</p> 
+<p>This feature is supported in mobile applications only.</p>
 
   <p>Sound is not played in case of a tap event for:</p>
        <ul>
@@ -60,7 +60,7 @@
                </ul></li>
                <li>HTML <code>&lt;textarea&gt;</code> elements</li>
        </ul>
-       
+
        <p>Sound is played in case of a tap event for:</p>
        <ul>
                <li>HTML <code>&lt;a&gt;</code> elements with the <code>href</code> attribute</li>
diff --git a/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm b/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
index 27e770a..f871d73 100644 (file)
--- a/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
-       <script type="text/javascript" src="../../../scripts/snippet.js"></script>      
+       <script type="text/javascript" src="../../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
-  <title>Useful Guides for W3C/HTML5 Features</title> 
- </head> 
+  <title>Useful Guides for W3C/HTML5 Features</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -26,21 +26,21 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-       
-<h1>Useful Guides for W3C/HTML5 Features</h1> 
-    
+
+<h1>Useful Guides for W3C/HTML5 Features</h1>
+
 <p>Useful guides for W3C/HTML5 features include information on W3C features related to various APIs:</p>
 
-   <ul> 
+   <ul>
        <li><a href="sound_policy_w.htm">Tizen WebKit Tap Sound Policy</a> <strong>in mobile applications only</strong>
-       <p>Allows you to play sounds to provide responsiveness on user interaction.</p></li>            
+       <p>Allows you to play sounds to provide responsiveness on user interaction.</p></li>
        <li><a href="performance_w.htm">Performance Improvement</a> <strong>in wearable applications only</strong>
        <p>Allows you to improve the performance of Tizen Web applications.</p></li>
-  </ul> 
-  
+  </ul>
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.guides/html/web/w3c/w3c_cover_w.htm b/org.tizen.guides/html/web/w3c/w3c_cover_w.htm
index 1605cc0..126e151 100644 (file)
--- a/org.tizen.guides/html/web/w3c/w3c_cover_w.htm
+++ b/org.tizen.guides/html/web/w3c/w3c_cover_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>W3C/HTML5/Supplementary Features</title>  
+       <title>W3C/HTML5/Supplementary Features</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,7 +27,7 @@
                        <li>Tizen 2.3.1 and Higher for Wearable</li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>W3C/HTML5/Supplementary Features</h1>
@@ -52,7 +52,7 @@
        <li><a href="perf_opt/performance_guide_w.htm">Performance and Optimization</a>
        <p>You can use Web workers to run scripts in the background. To manage application performance further, you can control the animation rate and page visibility.</p></li>
        <li><a href="location/location_guide_w.htm">Location</a>
-       <p>You can determine the geographical position of the device using various positioning methods, such as the Global Positioning System (GPS) and network positioning system. You can retrieve the user position only once, or continue to receive updates to see how the position changes.</p></li>      
+       <p>You can determine the geographical position of the device using various positioning methods, such as the Global Positioning System (GPS) and network positioning system. You can retrieve the user position only once, or continue to receive updates to see how the position changes.</p></li>
        <li><a href="useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a>
        <p>You can use common W3C features to play sounds to provide responsiveness on user interaction, and to improve the performance of wearable Web applications.</p></li>
        <li><a href="supplement/supplement_guide_w.htm">Supplementary Features</a>
@@ -61,7 +61,7 @@
        <p>You can create a visual outlook for the UI application to ensure the best possible user experience. The Tizen platform provides the W3C/HTML5 UI toolkit framework for developing a Web application.</p></li>
 </ul>
 
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/common_tools/certificate_registration.htm b/org.tizen.studio/html/common_tools/certificate_registration.htm
index b387983..26118f4 100644 (file)
--- a/org.tizen.studio/html/common_tools/certificate_registration.htm
+++ b/org.tizen.studio/html/common_tools/certificate_registration.htm
@@ -51,14 +51,14 @@
 <h2 id="creating_certificate">Creating the Certificate Profile</h2>
 <p>You can create a new certificate profile with the Certificate Manager. To run the Certificate Manager, in the Tizen Studio menu, select <strong>Tools &gt; Certificate Manager</strong>.</p>
 
-<p align="center"><strong>Figure: Certificate Manager</strong></p> 
+<p align="center"><strong>Figure: Certificate Manager</strong></p>
 <p align="center"> <img alt="Certificate Manager" src="../images/cert_reg_cert_manager.png" /> </p>
 
 <p>In the Certificate Manager, click the plus icon (<img alt="Plus icon" src="../images/cert_reg_plus.png" />) to create a new profile.</p>
-<p align="center"><strong>Figure: Creating a new certificate profile</strong></p> 
+<p align="center"><strong>Figure: Creating a new certificate profile</strong></p>
 <p align="center"> <img alt="Creating a new certificate profile" src="../images/cert_reg_create_new.png" /> </p>
 <p>You can create a new certificate profile with the creation wizard.</p>
-<p align="center"><strong>Figure: Creation wizard</strong></p> 
+<p align="center"><strong>Figure: Creation wizard</strong></p>
 <p align="center"> <img alt="Creation wizard" src="../images/cert_reg_creation_wizard.png" /> </p>
 
 <h2 id="adding_author">Adding the Author and Distributor Certificates</h2>
@@ -78,20 +78,20 @@
 
 <h2 id="managing_certificate">Managing the Certificate Profile</h2>
 <p>You can also view, edit, and remove the certificate profiles you have created.</p>
-<p align="center"><strong>Figure: Managing certificate profiles</strong></p> 
+<p align="center"><strong>Figure: Managing certificate profiles</strong></p>
 <p align="center"> <img alt="Managing certificate profiles" src="../images/cert_reg_manage_cert.png" /> </p>
 <p>To manage a certificate profile:</p>
        <ul>
                <li>Click the info icon (<img alt="Info" src="../images/cert_reg_info.png" />) to see detailed information of the certificate.
-               <p align="center"><strong>Figure: Certificate information</strong></p> 
+               <p align="center"><strong>Figure: Certificate information</strong></p>
                <p align="center"> <img alt="Certificate information" src="../images/cert_reg_cert_info.png" /> </p>
                </li>
                <li>Click the pencil icon (<img alt="Pencil" src="../images/cert_reg_pencil.png" />) to change the author or distributor certificate of the selected certificate profile.
-               <p align="center"><strong>Figure: Changing the certificate</strong></p> 
+               <p align="center"><strong>Figure: Changing the certificate</strong></p>
                <p align="center"> <img alt="Changing the certificate" src="../images/cert_reg_change_cert.png" /> </p>
                </li>
                <li>Click the trash icon (<img alt="Trash" src="../images/cert_reg_trash.png" />) to remove the selected certificate profile.
-               <p align="center"><strong>Figure: Removing the certificate profile</strong></p> 
+               <p align="center"><strong>Figure: Removing the certificate profile</strong></p>
                <p align="center"> <img alt="Removing the certificate profile" src="../images/cert_reg_remove_cert.png" /> </p>
                </li>
                <li>The active profile is used when you package your application. Click the check icon to set the selected certificate profile as active.
diff --git a/org.tizen.studio/html/common_tools/command_line_interface.htm b/org.tizen.studio/html/common_tools/command_line_interface.htm
index 0e35c96..7740608 100644 (file)
--- a/org.tizen.studio/html/common_tools/command_line_interface.htm
+++ b/org.tizen.studio/html/common_tools/command_line_interface.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -58,7 +58,7 @@ export PATH=$PATH:$&lt;TIZEN_STUDIO&gt;/tools/ide/bin/
 
 <h2 id="Setting_config">Setting Configuration Options</h2>
 <p>The command displays, sets, replaces, and removes CLI configuration options. The CLI configuration keys are:</p>
-       
+
        <ul>
                <li><code>default.build.architecture=&lt;x86|arm&gt;</code>: Sets the default executable architecture type.</li>
                <li><code>default.build.compiler=&lt;llvm|gcc&gt;</code>: Sets the default compiler.</li>
@@ -101,7 +101,7 @@ tizen cli-config [options]
 <ul>
 <li>Display a list of all configurations for which values are set.
        <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
-       
+
 <pre class="prettyprint">
 &gt; tizen cli-config -l
 default.build.architecture=x86
@@ -113,9 +113,9 @@ default.sdb.timeout=60000
 <li>Set a <code>profiles.xml</code> path globally.
        <p>Windows&reg;:</p>
 <pre class="prettyprint">
-&gt; tizen cli-config –g &quot;default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml&quot;
+&gt; tizen cli-config –g "default.profiles.path=C:\Users\workspace\.metadata\.plugins\org.tizen.common.sign\profiles.xml"
 </pre>
-       
+
        <p>Ubuntu and Mac OS&reg; X:</p>
 <pre class="prettyprint">
 $ tizen cli-config –g default.profiles.path=~/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
@@ -155,10 +155,10 @@ tizen list &lt;option&gt;
  </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>List all native application templates.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
-   
+
 <pre class="prettyprint">
 &gt; tizen list native-project
 
@@ -173,7 +173,7 @@ wearable-2.3                shared_library
    </li>
    <li>List rootstraps.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
-   
+
 <pre class="prettyprint">
 &gt; tizen list rootstrap
 [ROOTSTRAP]                    [INFORMATION]
@@ -205,7 +205,7 @@ tizen create &lt;sub-command&gt; [options]
  <td><code>native-project [options]</code> or <code>web-project [options]</code></td>
  <td>Create the Tizen native or Web project.<br /><br />
        Options are:
-       <ul> 
+       <ul>
                <li><code>-p</code>, <code>--profile</code>: Specifies the profile name.</li>
                <li><code>-t</code>, <code>--template</code>: Specifies the template name.</li>
                <li><code>-n</code>, <code>--name</code>: Specifies the project name.</li>
@@ -216,7 +216,7 @@ tizen create &lt;sub-command&gt; [options]
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Create the template project based on the basic Tizen mobile UI project.
    <p>Windows&reg;:</p>
 
@@ -254,7 +254,7 @@ tizen &lt;sub-command&gt; [options]
  <td><code>build-native [options]</code></td>
  <td>Build the Tizen native project.<br /><br />
        Options are:
-       <ul> 
+       <ul>
                <li><code>-a</code>, <code>--arch</code>: Specifies the architecture type: <code>x86</code> (default) or <code>arm</code></li>
                <li><code>-c</code>, <code>--compiler</code>: Specifies the compiler to build: <code>llvm</code> (default) or <code>gcc</code></li>
                <li><code>-C</code>, <code>--configuration</code>: Specifies the build configuration: <code>Debug</code> (default) or <code>Release</code></li>
@@ -268,7 +268,7 @@ tizen &lt;sub-command&gt; [options]
  <td><code>build-web [options]</code></td>
  <td>Build the Tizen Web project.<br /><br />
        Options are:
-       <ul> 
+       <ul>
                <li><code>-e</code>, <code>--exclude</code>: Specifies a list of exclude files by patterns. By default, the following resources are excluded: <code>.build/*</code>, <code>.build</code>, <code>.sign/*</code>, <code>.sign</code>, <code>webUnitTest/*</code>, <code>webUnitTest</code>, <code>.externalToolBuilders/*</code>, <code>.externalToolBuilders</code>, <code>.buildResult/*</code>, <code>.buildResult</code>, <code>.settings/*</code>, <code>.settings</code>, <code>.package/*</code>, <code>.package</code>, <code>.tproject</code>, <code>.project</code>, <code>.sdk_delta.info</code>, <code>.rds_delta</code>, <code>*.wgt</code>, <code>.tizen-ui-builder-tool.xml</code></li>
                <li><code>-euf</code>, <code>--exclude-uifw</code>: Specifies whether to exclude the Tizen Web UI framework, and use the Tizen UI framework in the target. This option is only used for applications using the Tizen UI framework.</li>
                <li><code>-out</code>, <code>--output</code>: Sets the output directory name. If you omit this option, the <code>.buildResult</code> directory is created under the project directory by default.</li>
@@ -280,7 +280,7 @@ tizen &lt;sub-command&gt; [options]
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Build the native project with the <code>x86</code>, <code>llvm</code>, and <code>Debug</code> options.
    <p>Windows&reg;:</p>
 
@@ -351,7 +351,7 @@ tizen clean [-- &lt;project directory&gt;]
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Clean the project.
    <p>Windows&reg;:</p>
 
@@ -393,15 +393,15 @@ tizen certificate [options]
 </tr>
 <tr>
  <td><code>-c</code>, <code>--country &lt;country code&gt;</code></td>
- <td>Specifies the user&#39;s country code, which consists of 2 letters.</td>
+ <td>Specifies the user's country code, which consists of 2 letters.</td>
 </tr>
 <tr>
  <td><code>-s</code>, <code>--state &lt;state&gt;</code></td>
- <td>Specifies the user&#39;s state.</td>
+ <td>Specifies the user's state.</td>
 </tr>
 <tr>
  <td><code>-ct</code>, <code>--city &lt;city&gt;</code></td>
- <td>Specifies the user&#39;s city.</td>
+ <td>Specifies the user's city.</td>
 </tr>
 <tr>
  <td><code>-o</code>, <code>--organization &lt;organization&gt;</code></td>
@@ -409,7 +409,7 @@ tizen certificate [options]
 </tr>
 <tr>
  <td><code>-u</code>, <code>--unit &lt;unit&gt;</code></td>
- <td>Specifies the user&#39;s organization unit.</td>
+ <td>Specifies the user's organization unit.</td>
 </tr>
 <tr>
  <td><code>-n</code>, <code>--name &lt;name&gt;</code></td>
@@ -433,45 +433,45 @@ tizen certificate [options]
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Generate a certificate.
    <p>Windows&reg;:</p>
 
 <pre class="prettyprint">
-&gt; tizen certificate -a MyTizen -p 1234 -c KR -s Seoul -ct Gangnamgu -o Tizen –u Development -n &quot;Gildong Hong&quot; -e gildonghong@example.org -f mycert
+&gt; tizen certificate -a MyTizen -p 1234 -c KR -s Seoul -ct Gangnamgu -o Tizen –u Development -n "Gildong Hong" -e gildonghong@example.org -f mycert
 Generating a certificate with
-&nbsp;&nbsp;&nbsp;&nbsp;File name = mycert
-&nbsp;&nbsp;&nbsp;&nbsp;Container Password = ****
-&nbsp;&nbsp;&nbsp;&nbsp;Alias = MyTizen
-&nbsp;&nbsp;&nbsp;&nbsp;Key Password = ****
-&nbsp;&nbsp;&nbsp;&nbsp;Country = KR
-&nbsp;&nbsp;&nbsp;&nbsp;State = Seoul
-&nbsp;&nbsp;&nbsp;&nbsp;City = Gangnamgu
-&nbsp;&nbsp;&nbsp;&nbsp;Name = Gildong Hong
-&nbsp;&nbsp;&nbsp;&nbsp;Organization = Tizen
-&nbsp;&nbsp;&nbsp;&nbsp;Organization Unit = Develop
-&nbsp;&nbsp;&nbsp;&nbsp;E-mail = gildonghong@example.org
-&#39;mycert&#39; has been generated in &#39;C:\tizen-sdk-data\keystore\author&#39;.
+    File name = mycert
+    Container Password = ****
+    Alias = MyTizen
+    Key Password = ****
+    Country = KR
+    State = Seoul
+    City = Gangnamgu
+    Name = Gildong Hong
+    Organization = Tizen
+    Organization Unit = Develop
+    E-mail = gildonghong@example.org
+'mycert' has been generated in 'C:\tizen-sdk-data\keystore\author'.
 </pre>
 
        <p>Ubuntu and Mac OS&reg; X:</p>
 
 <pre class="prettyprint">
 $ tizen certificate -a MyTizen -p 1234 -c KR -s Seoul -ct Gangnamgu -o Tizen –u
-Development -n &quot;Gildong Hong&quot; -e gildonghong@example.org -f mycert
+Development -n "Gildong Hong" -e gildonghong@example.org -f mycert
 Generating a certificate with
-&nbsp;&nbsp;&nbsp;&nbsp;File name = mycert
-&nbsp;&nbsp;&nbsp;&nbsp;Container Password = ****
-&nbsp;&nbsp;&nbsp;&nbsp;Alias = MyTizen
-&nbsp;&nbsp;&nbsp;&nbsp;Key Password = ****
-&nbsp;&nbsp;&nbsp;&nbsp;Country = KR
-&nbsp;&nbsp;&nbsp;&nbsp;State = Seoul
-&nbsp;&nbsp;&nbsp;&nbsp;City = Gangnamgu
-&nbsp;&nbsp;&nbsp;&nbsp;Name = Gildong Hong
-&nbsp;&nbsp;&nbsp;&nbsp;Organization = Tizen
-&nbsp;&nbsp;&nbsp;&nbsp;Organization Unit = Develop
-&nbsp;&nbsp;&nbsp;&nbsp;E-mail = gildonghong@example.org
-&#39;mycert&#39; has been generated in &#39;~/tizen-sdk-data/keystore/author&#39;.
+    File name = mycert
+    Container Password = ****
+    Alias = MyTizen
+    Key Password = ****
+    Country = KR
+    State = Seoul
+    City = Gangnamgu
+    Name = Gildong Hong
+    Organization = Tizen
+    Organization Unit = Develop
+    E-mail = gildonghong@example.org
+'mycert' has been generated in '~/tizen-sdk-data/keystore/author'.
 </pre>
    </li>
 </ul>
@@ -496,7 +496,7 @@ tizen security-profiles &lt;sub-command&gt; [options]
  <td><code>add [options]</code></td>
  <td>Adds the specified security profile, which can contain several certificates.<br /><br />
        Options are:
-       <ul> 
+       <ul>
                <li><code>-n</code>, <code>--name</code>: Specifies the name of the security profile to add.</li>
                <li><code>-a</code>, <code>--path</code>: Specifies the directory path where the author certificate file is located. The format of the certificate is PKCS#12, and the file extension is <code>.p12</code>.</li>
                <li><code>-p</code>, <code>--password</code>: Specifies the password used to access the author certificate.</li>
@@ -514,7 +514,7 @@ tizen security-profiles &lt;sub-command&gt; [options]
  <td><code>list [options]</code></td>
  <td>Displays security profiles. If you specify the name of the security profile, the detailed information of the specified security profile is displayed.<br /><br />
        Options are:
-       <ul> 
+       <ul>
                <li><code>-n</code>, <code>--name</code>: Specifies the name of the security profile to list. If you skip this option, a set of the security profile names in the <code>profiles.xml</code> file is displayed.</li>
                <li><code>--</code>: Specifies the directory path where the <code>profiles.xml</code> file is located.</li>
        </ul>
@@ -524,7 +524,7 @@ tizen security-profiles &lt;sub-command&gt; [options]
  <td><code>remove [options]</code></td>
  <td>Removes the specified security profile.<br /><br />
        Options are:
-       <ul> 
+       <ul>
                <li><code>-n</code>, <code>--name</code>: Specifies the name of the security profile to remove.</li>
                <li><code>--</code>: Specifies the directory path where the <code>profiles.xml</code> file is located.</li>
        </ul>
@@ -533,7 +533,7 @@ tizen security-profiles &lt;sub-command&gt; [options]
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Add a new security profile.
    <p>Windows&reg;:</p>
 
@@ -546,10 +546,10 @@ distributor1 path: C:\tizen-sdk\tools\certificate-generator\certificates\distrib
 distributor1 password: *************************
 distributor1 CA path: C:\tizen-sdk\tools\certificate-generator\certificates\distributor\tizen-distributor-ca.cer
 
-In Configuration, Set a default profile path to &#39;C:\tizen-sdk-data\ide\keystore\profiles.xml&#39;.
-Wrote to &#39;C:\tizen-sdk-data\ide\keystore\profiles.xml&#39;.
-Succeed to add &#39;MyProfile&#39; profile.
-If want to sign by this, add the file of security profiles in CLI configuration like &#39;tizen cli-config &quot;default.profiles.path=C:\tizen-sdk-data\ide\keystore\profiles.xml&quot;&#39;.
+In Configuration, Set a default profile path to 'C:\tizen-sdk-data\ide\keystore\profiles.xml'.
+Wrote to 'C:\tizen-sdk-data\ide\keystore\profiles.xml'.
+Succeed to add 'MyProfile' profile.
+If want to sign by this, add the file of security profiles in CLI configuration like 'tizen cli-config "default.profiles.path=C:\tizen-sdk-data\ide\keystore\profiles.xml"'.
 </pre>
 
        <p>Ubuntu and Mac OS&reg; X:</p>
@@ -563,10 +563,10 @@ distributor1 path: ~/tizen-sdk/tools/certificate-generator/certificates/distribu
 distributor1 password: *************************
 distributor1 CA path: ~/tizen-sdk/tools/certificate-generator/certificates/distributor/tizen-distributor-ca.cer
 
-In Configuration, Set a default profile path to &#39;~/tizen-sdk-data/ide/keystore/profiles.xml&#39;.
-Wrote to &#39;~/tizen-sdk-data/ide/keystore/profiles.xml&#39;.
-Succeed to add &#39;MyProfile&#39; profile.
-If want to sign by this, add the file of security profiles in CLI configuration like &#39;tizen cli-config &quot;default.profiles.path=~/tizen-sdk-data/ide/keystore/profiles.xml&quot;&#39;.
+In Configuration, Set a default profile path to '~/tizen-sdk-data/ide/keystore/profiles.xml'.
+Wrote to '~/tizen-sdk-data/ide/keystore/profiles.xml'.
+Succeed to add 'MyProfile' profile.
+If want to sign by this, add the file of security profiles in CLI configuration like 'tizen cli-config "default.profiles.path=~/tizen-sdk-data/ide/keystore/profiles.xml"'.
 </pre>
    </li>
    <li>Display the security profile list.
@@ -574,7 +574,7 @@ If want to sign by this, add the file of security profiles in CLI configuration
 
 <pre class="prettyprint">
 &gt; tizen security-profiles list
-Loaded in &#39;C:\tizen-sdk-data\ide\keystore\profiles.xml&#39;.
+Loaded in 'C:\tizen-sdk-data\ide\keystore\profiles.xml'.
 ========================================
 Name
 ========================================
@@ -585,7 +585,7 @@ MyProfile
 
 <pre class="prettyprint">
 $ tizen security-profiles list
-Loaded in &#39;~/tizen-sdk-data/ide/keystore/profiles.xml&#39;.
+Loaded in '~/tizen-sdk-data/ide/keystore/profiles.xml'.
 ========================================
 Name
 ========================================
@@ -597,9 +597,9 @@ MyProfile
 
 <pre class="prettyprint">
 &gt; tizen security-profiles list –n MyProfile
-Loaded in &#39;C:\tizen-sdk-data\ide\keystore\profiles.xml&#39;.
+Loaded in 'C:\tizen-sdk-data\ide\keystore\profiles.xml'.
 ========================================
-&#39;MyProfile&#39; profile information
+'MyProfile' profile information
 ========================================
 author path: C:\tizen-sdk-data\keystore\author\mycert.p12
 author password: ****
@@ -612,9 +612,9 @@ distributor1 CA path: C:\tizen-sdk\tools\certificate-generator\certificates\dist
 
 <pre class="prettyprint">
 $ tizen security-profiles list –n MyProfile
-Loaded in &#39;~/tizen-sdk-data/ide/keystore/profiles.xml&#39;.
+Loaded in '~/tizen-sdk-data/ide/keystore/profiles.xml'.
 ========================================
-&#39;MyProfile&#39; profile information
+'MyProfile' profile information
 ========================================
 author path: ~/tizen-sdk-data/keystore/author/mycert.p12
 author password: ****
@@ -628,18 +628,18 @@ distributor1 CA path: ~/tizen-sdk/tools/certificate-generator/certificates/distr
 
 <pre class="prettyprint">
 &gt; tizen security-profiles remove
-Loaded in &#39;C:\tizen-sdk-data\ide\keystore\profiles.xml&#39;.
-Wrote to &#39;C:\tizen-sdk-data\ide\keystore\profiles.xml&#39;.
-Succeed to remove &#39;MyProfile&#39; profile
+Loaded in 'C:\tizen-sdk-data\ide\keystore\profiles.xml'.
+Wrote to 'C:\tizen-sdk-data\ide\keystore\profiles.xml'.
+Succeed to remove 'MyProfile' profile
 </pre>
 
        <p>Ubuntu and Mac OS&reg; X:</p>
 
 <pre class="prettyprint">
 $ tizen security-profiles remove
-Loaded in &#39;~/tizen-sdk-data/ide/keystore/profiles.xml&#39;.
-Wrote to &#39;~/tizen-sdk-data/ide/keystore/profiles.xml&#39;.
-Succeed to remove &#39;MyProfile&#39; profile
+Loaded in '~/tizen-sdk-data/ide/keystore/profiles.xml'.
+Wrote to '~/tizen-sdk-data/ide/keystore/profiles.xml'.
+Succeed to remove 'MyProfile' profile
 </pre>
    </li>
 </ul>
@@ -679,7 +679,7 @@ tizen package [options]
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Package the project.
    <p>Windows&reg;:</p>
 
@@ -689,18 +689,18 @@ Initialize... OK
 Copying files... OK
 Signing... OK
 Zip path: C:\Users\workspace\basic\Debug\org.tizen.basic-1.0.0-i386.tpk
-&nbsp;&nbsp;&nbsp;&nbsp;adding: bin/  (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: bin/basic       (in=11422) (out=4939) (deflated 57%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: tizen-manifest.xml    (in=428) (out=247) (deflated 42%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: lib/  (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: signature1.xml        (in=4254) (out=1971) (deflated 54%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/       (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/data/  (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/trusted/       (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/res/   (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/res/basic.png    (in=57662) (out=18633) (deflated 68%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: author-signature.xml  (in=4132) (out=2174) (deflated 47%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: res/  (in=0) (out=0) (stored 0%)
+    adding: bin/  (in=0) (out=0) (stored 0%)
+    adding: bin/basic       (in=11422) (out=4939) (deflated 57%)
+    adding: tizen-manifest.xml    (in=428) (out=247) (deflated 42%)
+    adding: lib/  (in=0) (out=0) (stored 0%)
+    adding: signature1.xml        (in=4254) (out=1971) (deflated 54%)
+    adding: shared/       (in=0) (out=0) (stored 0%)
+    adding: shared/data/  (in=0) (out=0) (stored 0%)
+    adding: shared/trusted/       (in=0) (out=0) (stored 0%)
+    adding: shared/res/   (in=0) (out=0) (stored 0%)
+    adding: shared/res/basic.png    (in=57662) (out=18633) (deflated 68%)
+    adding: author-signature.xml  (in=4132) (out=2174) (deflated 47%)
+    adding: res/  (in=0) (out=0) (stored 0%)
 total bytes=77898, compressed=27964 -&gt; 64% savings
 Zipping... OK
 Package File Location: C:\Users\workspace\basic\Debug\org.tizen.basic-1.0.0-i386.tpk
@@ -714,25 +714,25 @@ Initialize... OK
 Copying files... OK
 Signing... OK
 Zip path: ~/workspace/basic/Debug/org.tizen.basic-1.0.0-i386.tpk
-&nbsp;&nbsp;&nbsp;&nbsp;adding: bin/  (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: bin/basic       (in=11422) (out=4939) (deflated 57%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: tizen-manifest.xml    (in=428) (out=247) (deflated 42%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: lib/  (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: signature1.xml        (in=4254) (out=1971) (deflated 54%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/       (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/data/  (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/trusted/       (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/res/   (in=0) (out=0) (stored 0%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: shared/res/basic.png    (in=57662) (out=18633) (deflated 68%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: author-signature.xml  (in=4132) (out=2174) (deflated 47%)
-&nbsp;&nbsp;&nbsp;&nbsp;adding: res/  (in=0) (out=0) (stored 0%)
+    adding: bin/  (in=0) (out=0) (stored 0%)
+    adding: bin/basic       (in=11422) (out=4939) (deflated 57%)
+    adding: tizen-manifest.xml    (in=428) (out=247) (deflated 42%)
+    adding: lib/  (in=0) (out=0) (stored 0%)
+    adding: signature1.xml        (in=4254) (out=1971) (deflated 54%)
+    adding: shared/       (in=0) (out=0) (stored 0%)
+    adding: shared/data/  (in=0) (out=0) (stored 0%)
+    adding: shared/trusted/       (in=0) (out=0) (stored 0%)
+    adding: shared/res/   (in=0) (out=0) (stored 0%)
+    adding: shared/res/basic.png    (in=57662) (out=18633) (deflated 68%)
+    adding: author-signature.xml  (in=4132) (out=2174) (deflated 47%)
+    adding: res/  (in=0) (out=0) (stored 0%)
 total bytes=77898, compressed=27964 -&gt; 64% savings
 Zipping... OK
 Package File Location: ~/workspace/basic/Debug/org.tizen.basic-1.0.0-i386.tpk
 </pre>
    </li>
 </ul>
-<ul> 
+<ul>
    <li>Re-sign the package.
    <p>Windows&reg;:</p>
 
@@ -825,13 +825,13 @@ tizen build-app [options] [args specified with JSON-like format]
  <td>
   <pre class="prettyprint">
 build: [
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &lt;build alias&gt;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;targets: [&lt;project directories in workspace separated by commas&gt;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;methods: [&lt;build methods separated by commas&gt;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output: &lt;build output path&gt;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multitask: &lt;cout of processes&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    {
+        name: &lt;build alias&gt;,
+        targets: [&lt;project directories in workspace separated by commas&gt;],
+        methods: [&lt;build methods separated by commas&gt;],
+        output: &lt;build output path&gt;,
+        multitask: &lt;cout of processes&gt;
+    }
 ]
 </pre>
  </td>
@@ -841,15 +841,15 @@ build: [
  <td>
   <pre class="prettyprint">
 method: [
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &lt;method name&gt;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;compiler: &lt;compiler name, such as GCC, LLVM&gt;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rootstraps: [
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{name: &lt;ID of a dependent project&gt;, platform: &lt;platform name&gt;, arch: &lt;architecture&gt;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;predefines: [&lt;predefined build macros separated by commas&gt;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;configs: [&lt;build config&gt;]
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    {
+        name: &lt;method name&gt;,
+        compiler: &lt;compiler name, such as GCC, LLVM&gt;,
+        rootstraps: [
+            {name: &lt;ID of a dependent project&gt;, platform: &lt;platform name&gt;, arch: &lt;architecture&gt;}
+        ],
+        predefines: [&lt;predefined build macros separated by commas&gt;],
+        configs: [&lt;build config&gt;]
+    }
 ]
 </pre>
  </td>
@@ -859,12 +859,12 @@ method: [
  <td>
   <pre class="prettyprint">
 package: [
-&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &lt;package name&gt;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: &lt;package type, such as .tpk, .wgt&gt;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;targets: [&lt; build file or project directories in workspace separated by commas&gt;],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output: &lt;package file path&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    {
+        name: &lt;package name&gt;,
+        type: &lt;package type, such as .tpk, .wgt&gt;,
+        targets: [&lt; build file or project directories in workspace separated by commas&gt;],
+        output: &lt;package file path&gt;
+    }
 ]
 </pre>
  </td>
@@ -872,7 +872,7 @@ package: [
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Package the Web multi application.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
 
@@ -881,7 +881,7 @@ package: [
 </pre>
    </li>
 </ul>
-<ul> 
+<ul>
    <li>Package the native multi package with the debug and release build configurations.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
 
@@ -927,7 +927,7 @@ tizen install [options]
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Install the basic application, whose package name is <code>org.tizen.basic-1.0.0-i386.tpk</code>, on the emulator-26101.
    <p>Windows&reg;:</p>
 
@@ -974,7 +974,7 @@ tizen run [options]
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Run the basic application, whose package ID is <code>org.tizen.basic</code>, on the emulator-26101.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
 
@@ -1016,7 +1016,7 @@ tizen uninstall [options]
 </tbody></table>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Uninstall the basic application, whose package ID is <code>org.tizen.basic</code>, from the emulator-26101.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
 
@@ -1041,7 +1041,7 @@ cli-config, list, create, build-native, build-web, clean, certificate, security-
 </pre>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Display the manual for the create command.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
 
@@ -1053,28 +1053,28 @@ tizen create
 Creates a Tizen native project.
 
 Syntax:
-&nbsp;&nbsp;&nbsp;&nbsp;tizen create native-project [options]
+    tizen create native-project [options]
 
 Options:
-&nbsp;&nbsp;&nbsp;&nbsp;-p, --profile &lt;profile name&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Specifies the profile name.
-&nbsp;&nbsp;&nbsp;&nbsp;-t, --template &lt;template name&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Specifies the template name.
-&nbsp;&nbsp;&nbsp;&nbsp;-n, --name &lt;project name&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Specifies the project name.
-&nbsp;&nbsp;&nbsp;&nbsp;-- &lt;destination directory&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Specifies the destination directory where the project is created.
+    -p, --profile &lt;profile name&gt;
+        Specifies the profile name.
+    -t, --template &lt;template name&gt;
+        Specifies the template name.
+    -n, --name &lt;project name&gt;
+        Specifies the project name.
+    -- &lt;destination directory&gt;
+        Specifies the destination directory where the project is created.
 
 Examples:
-&nbsp;&nbsp;&nbsp;&nbsp;Creates the template project based on the basic Tizen mobile UI project:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Windows&reg;:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt; tizen.bat create native-project -p mobile-2.4 -t basic-ui -n basic --
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C:\Users\workspace
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;cd C:\Users\workspace\basic
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ubuntu and Mac OS&reg; X:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ tizen create native-project -p mobile-2.4 -t basic-ui -n basic -- /ho
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me/workspace
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ cd /home/workspace/basic
+    Creates the template project based on the basic Tizen mobile UI project:
+        Windows&reg;:
+            &gt; tizen.bat create native-project -p mobile-2.4 -t basic-ui -n basic --
+                C:\Users\workspace
+                &gt;cd C:\Users\workspace\basic
+        Ubuntu and Mac OS&reg; X:
+                $ tizen create native-project -p mobile-2.4 -t basic-ui -n basic -- /ho
+                me/workspace
+                $ cd /home/workspace/basic
 </pre>
    </li>
 </ul>
@@ -1089,7 +1089,7 @@ tizen version
 </pre>
 
 <p><strong>Examples:</strong></p>
-<ul> 
+<ul>
    <li>Display the CLI version number.
    <p>Windows&reg;, Ubuntu, and Mac OS&reg; X:</p>
 
diff --git a/org.tizen.studio/html/common_tools/connection_explorer_view.htm b/org.tizen.studio/html/common_tools/connection_explorer_view.htm
index 4dcf753..ac1fc0d 100644 (file)
--- a/org.tizen.studio/html/common_tools/connection_explorer_view.htm
+++ b/org.tizen.studio/html/common_tools/connection_explorer_view.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Managing and Connecting Devices for Testing</title>  
+       <title>Managing and Connecting Devices for Testing</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,8 +29,8 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#running">Running and Debugging the Application with Devices</a></li>
-                       <li><a href="#transferring">Transferring Files to Devices</a></li>      
-                       <li><a href="#configuring">Configuring Preferences</a></li>     
+                       <li><a href="#transferring">Transferring Files to Devices</a></li>
+                       <li><a href="#configuring">Configuring Preferences</a></li>
                </ul>
        </div></div>
 </div>
@@ -39,8 +39,8 @@
  <h1>Managing and Connecting Devices for Testing</h1>
 
 <p>The <strong>Connection Explorer</strong> view shows the devices connected to the system. A list of connected devices is available after connecting a device or launching a Tizen emulator with a tree view. The <strong>Connection Explorer</strong> view provides the following actions for the connected devices: </p>
- 
-<ul> 
+
+<ul>
    <li>Show a list of connected devices and connects devices for running and debugging the application</li>
    <li>Provide file operations on connected devices</li>
    <li>Send or receive files between the <strong>Project Explorer</strong> and <strong>Connection Explorer</strong> views by dragging and dropping</li>
@@ -48,15 +48,15 @@
    <li>Launch the Emulator Manager to handle the multiple instances of the emulator</li>
 </ul>
 
-<p align="center"><strong>Figure: Connection Explorer view</strong></p> 
-<p align="center"><img alt="Connection Explorer view" src="../images/conn_explorer_connection.png" /></p> 
- 
+<p align="center"><strong>Figure: Connection Explorer view</strong></p>
+<p align="center"><img alt="Connection Explorer view" src="../images/conn_explorer_connection.png" /></p>
+
  <h2 id="running">Running and Debugging the Application with Devices</h2>
  <p>You can test Tizen applications with connected devices using the following ways:</p>
- 
- <ul> 
+
+ <ul>
    <li>Testing applications on a physical device connected to the host system:
-  <ol>  
+  <ol>
    <li>Connect your device to the host system by using a USB connector. The device icon (<img alt="Device icon" src="../images/conn_explorer_icon1.png"/>) is displayed in the <strong>Connection Explorer</strong> view.</li>
    <li>Select the device in the <strong>Connection Explorer</strong> view. It is ready to be run and used to test your project.</li>
   </ol></li>
@@ -70,16 +70,16 @@
    <li>Testing applications on a remote device
    <p>To connect to the remote device:</p>
 
-<ol>  
+<ol>
 <li>In the <strong>Connection Explorer</strong> view toolbar, click the Remote Device Manager icon <img alt="Remote Device Manager icon" src="../images/conn_explorer_icon3.png"/>.
 <p>When the Remote Device Manager is launched, it automatically starts to scan nearby remote devices</p>
-<ul> 
-<li>If a remote device exists on the host system&#39;s subnet, the remote device information is registered to the Remote Device Manager automatically.</li>
+<ul>
+<li>If a remote device exists on the host system's subnet, the remote device information is registered to the Remote Device Manager automatically.</li>
 <li>To add remote device information, click <strong>New</strong>.
 <p>In a dialog box, enter the <strong>Name</strong>, <strong>IP</strong>, and <strong>Port</strong> of the remote device.</p>
 
 <p>To modify the remote device information later on, select the device in the Remote Device Manager, click <strong>Edit</strong>, and modify the <strong>Name</strong>, <strong>IP</strong>, and <strong>Port</strong> in a dialog box.</p></li>
-</ul> 
+</ul>
 </li>
 <li>In the Remote Device Manager, select a remote device.</li>
 <li>Click <strong>Connect</strong>.</li>
@@ -87,20 +87,20 @@
 </ol>
 <p>When testing is finished, disconnect the remote device by selecting the device in the Remote Device Manager and clicking <strong>Disconnect</strong>. To remove the remote device from the Remote Device Manager, select the device in the Remote Device Manager and click <strong>Delete</strong>.</p></li>
 </ul>
-  
+
 <h2 id="transferring">Transferring Files to Devices</h2>
 <p>You can transfer files between the connected devices and the host system:</p>
-<ul> 
+<ul>
 <li>To transfer a file from a connected device to the host file system, pull the selected file to the desired host system path.</li>
 <li>To transfer a file from the host file system to a connected device, push the selected file to the desired connected device path.</li>
-</ul> 
+</ul>
 
 <h2 id="configuring">Configuring Preferences</h2>
 <p>You can set the following preferences for the <strong>Connection Explorer</strong> view:</p>
-<ul> 
+<ul>
 <li>Change the Emulator Manager path</li>
 <li>Set the file transfer timeout value</li>
-</ul> 
+</ul>
 <p>To see the preferences, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Tools &gt; Connection Explorer</strong>.</p>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.studio/html/common_tools/da_advanced.htm b/org.tizen.studio/html/common_tools/da_advanced.htm
index 7b843a5..9cb1503 100644 (file)
--- a/org.tizen.studio/html/common_tools/da_advanced.htm
+++ b/org.tizen.studio/html/common_tools/da_advanced.htm
@@ -49,8 +49,8 @@
 <p>You can create markers at specific times and analyze the time between the markers:</p>
 <ol>
   <li>Create the markers by double-clicking a chart or detail table view that has a timestamp.</li>
-  <li>Right-click between the markers, and select <strong>Range Analysis</strong>. 
-  <p>The table data is updated based on the range inspection results.</p></li> 
+  <li>Right-click between the markers, and select <strong>Range Analysis</strong>.
+  <p>The table data is updated based on the range inspection results.</p></li>
 </ol>
 <p align="center"><strong>Figure: Range inspection with markers</strong></p>
 <p align="center"><img alt="Range inspection with markers" src="../images/da_advanced_range_inspection.png" /></p>
@@ -81,7 +81,7 @@
                <li><strong>RAM</strong></li>
                <li><strong>Binary Information</strong></li>
                </ul>
-<p align="center"><strong>Figure: Target dialog</strong></p> 
+<p align="center"><strong>Figure: Target dialog</strong></p>
 <p align="center"><img alt="Target dialog" src="../images/da_advanced_target_dialog.png" /></p>
 </li>
 </ul>
@@ -91,7 +91,7 @@
    <li>You can save the analysis result to a zip file.
 <p align="center"><strong>Figure: Saving data</strong></p>
 <p align="center"><img alt="Saving data" src="../images/da_advanced_saving_data.png" /></p>
-   </li> 
+   </li>
    <li>You can load the analysis result from the zip file. After loading, the chart and table data are updated from the loaded data.
 <p align="center"><strong>Figure: Loading data</strong></p>
 <p align="center"><img alt="Loading data" src="../images/da_advanced_loading_data.png" /></p>
@@ -242,37 +242,37 @@
 <pre class="prettyprint">
 Usage: dacli.jar &lt;command&gt; [options ...]
 List of commands:
-&nbsp;&nbsp;&nbsp;&nbsp;devices : show list of connected devices and emulators
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-u                           show list of devices where tracing is running
-&nbsp;&nbsp;&nbsp;&nbsp;apps &lt;ip:port|serial&gt; : show list of applications of specified target
-&nbsp;&nbsp;&nbsp;&nbsp;start &lt;ip:port|serial&gt; : start tracing on specified target for specified 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;application using selected tracing features
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-a &lt;application&gt;             application to trace
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o &lt;output filename&gt;         redirect tracing output to file
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-C,--cpu-usage &lt;arg&gt;         select cpu usage tracing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Possible arguments: usage, core, frequency, all
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If no arguments provided - &#39;all&#39; is selected
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-M,--memory &lt;arg&gt;            select memory tracing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Possible arguments: system, process, heap, all
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If no arguments provided - &#39;process,system&#39; is selected
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-F,--file &lt;arg&gt;              select file tracing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Possible arguments: io, analysis, all
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If no arguments provided - &#39;all&#39; is selected
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-G,--graphics &lt;arg&gt;          select graphics tracing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Possible arguments: opengl, all
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If no arguments provided - &#39;all&#39; is selected
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-N,--network &lt;arg&gt;           select network tracing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Possible arguments: io, analysis, all
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If no arguments provided - &#39;all&#39; is selected
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-T,--thread-analysis         Select thread analysis tracing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-U,--ui-event                Select ui event tracing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-P,--peripheral-status       Select peripheral status tracing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-E,--power-estimation        Select power estimation tracing
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-S &lt;period&gt;                  Enable screenshots capturing periodically
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-s,                          Enable screenshots capturing on scene transition
-&nbsp;&nbsp;&nbsp;&nbsp;stop &lt;ip:port|serial&gt; : stop currently running tracing process on specified 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;device
-&nbsp;&nbsp;&nbsp;&nbsp;version : print information about version
+    devices : show list of connected devices and emulators
+        -u                           show list of devices where tracing is running
+    apps &lt;ip:port|serial&gt; : show list of applications of specified target
+    start &lt;ip:port|serial&gt; : start tracing on specified target for specified
+                             application using selected tracing features
+        -a &lt;application&gt;             application to trace
+        -o &lt;output filename&gt;         redirect tracing output to file
+        -C,--cpu-usage &lt;arg&gt;         select cpu usage tracing
+                                     Possible arguments: usage, core, frequency, all
+                                     If no arguments provided - 'all' is selected
+        -M,--memory &lt;arg&gt;            select memory tracing
+                                     Possible arguments: system, process, heap, all
+                                     If no arguments provided - 'process,system' is selected
+        -F,--file &lt;arg&gt;              select file tracing
+                                     Possible arguments: io, analysis, all
+                                     If no arguments provided - 'all' is selected
+        -G,--graphics &lt;arg&gt;          select graphics tracing
+                                     Possible arguments: opengl, all
+                                     If no arguments provided - 'all' is selected
+        -N,--network &lt;arg&gt;           select network tracing
+                                     Possible arguments: io, analysis, all
+                                     If no arguments provided - 'all' is selected
+        -T,--thread-analysis         Select thread analysis tracing
+        -U,--ui-event                Select ui event tracing
+        -P,--peripheral-status       Select peripheral status tracing
+        -E,--power-estimation        Select power estimation tracing
+        -S &lt;period&gt;                  Enable screenshots capturing periodically
+        -s,                          Enable screenshots capturing on scene transition
+    stop &lt;ip:port|serial&gt; : stop currently running tracing process on specified
+        device
+    version : print information about version
 </pre>
 
 <h3>Environment Setup</h3>
@@ -308,12 +308,12 @@ export PATH=$PATH:&lt;path-to-tizen-studio&gt;/tools/dynamic-analyzer/
 <pre class="prettyprint">
 $ ./dacli.jar devices
 List of connected devices:
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;Device Name&gt; &lt;Serial Number&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;m-0818-1      emulator-26101
+    &lt;Device Name&gt; &lt;Serial Number&gt;
+    m-0818-1      emulator-26101
 </pre>
 
 <p>Take note of the device serial number. It is used to specify the device in other Dynamic Analyzer CLI commands.</p>
-   </li> 
+   </li>
 <li><code>apps</code>
 <p>The command shows a list of installed applications on a specified device.</p>
 <p>Command syntax:</p>
@@ -327,12 +327,12 @@ apps &lt;ip:port|serial&gt;
 <pre class="prettyprint">
 $ ./dacli.jar apps emulator-26101
 List of installed applications:
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;Package Name&gt;                 : &lt;Application Name&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;org.tizen.camera-app           : Camera
-&nbsp;&nbsp;&nbsp;&nbsp;org.tizen.calendar             : Calendar
-&nbsp;&nbsp;&nbsp;&nbsp;org.tizen.contacts             : Contacts
-&nbsp;&nbsp;&nbsp;&nbsp;org.tizen.gallery              : Gallery
-&nbsp;&nbsp;&nbsp;&nbsp;org.tizen.browser              : Internet
+    &lt;Package Name&gt;                 : &lt;Application Name&gt;
+    org.tizen.camera-app           : Camera
+    org.tizen.calendar             : Calendar
+    org.tizen.contacts             : Contacts
+    org.tizen.gallery              : Gallery
+    org.tizen.browser              : Internet
 </pre>
 
 <p>Take note of your application name. It is used to specify the application in other Dynamic Analyzer CLI commands. If you cannot find your application, make sure it has been installed (for example, from the Tizen Studio).</p>
@@ -351,7 +351,7 @@ start &lt;ip:port|serial&gt; -a &lt;application&gt; &lt;features&gt; [options…
 <pre class="prettyprint">
 $ ./dacli.jar start emulator-26101 -a Camera -C
 DA tracing started.
-Run &quot;dacli stop emulator-26101&quot; to finish it.
+Run "dacli stop emulator-26101" to finish it.
 </pre>
 <p>You can specify the <code>-o</code> option to customize the tracing result location.</p>
 </li>
@@ -431,4 +431,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/org.tizen.studio/html/common_tools/da_common.htm b/org.tizen.studio/html/common_tools/da_common.htm
index 3827b73..220cc44 100644 (file)
--- a/org.tizen.studio/html/common_tools/da_common.htm
+++ b/org.tizen.studio/html/common_tools/da_common.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Handling Common Dynamic Analyzer Tasks</title>  
+       <title>Handling Common Dynamic Analyzer Tasks</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,9 +29,9 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#dynamic">Dynamic Analyzer Launch</a></li>
-                       <li><a href="#main_ui">Main UI</a></li> 
+                       <li><a href="#main_ui">Main UI</a></li>
                </ul>
-               
+
        </div></div>
 </div>
 
@@ -119,7 +119,7 @@
 <p align="center"><strong>Figure: Toolbar</strong></p>
 <p align="center"> <img alt="Toolbar" src="../images/da_common_toolbar.png" /></p>
        <ol>
-               
+
                <li>Target combo: Select the target device.</li>
                <li>Application combo: Select the target application.</li>
                <li>Start/Stop trace button: Start or stop the trace.</li>
@@ -131,7 +131,7 @@
        </ol>
 
 <h3>Page Tabs</h3>
-<p>The Dynamic Analyzer separates the detailed features into various page tags. Most traces are done with the <strong>Timeline</strong> tab. However, there are separate tabs, for example, for the memory allocation, OpenGL, and thread synchronization analysis.</p>        
+<p>The Dynamic Analyzer separates the detailed features into various page tags. Most traces are done with the <strong>Timeline</strong> tab. However, there are separate tabs, for example, for the memory allocation, OpenGL, and thread synchronization analysis.</p>
 
 <h3>Chart View</h3>
 <p>Each feature has a chart that displays the analysis results. The charts are represented in various forms, such as areas, lines, bars, and points.</p>
@@ -219,14 +219,14 @@
 <h4 id="function_profiling">Function Profiling Table</h4>
 <p>The Function Profiling table shows the method usage information of an application. The information is divided into 2 units:</p>
 
-<ul> 
+<ul>
    <li>Application directory contains the methods that are created in the application code.</li>
    <li>Dependent library directory contains the methods that are used in the application code.</li>
 </ul>
 
 <p>The table contains the following columns:</p>
 
-<ul> 
+<ul>
    <li><strong>Library or function name</strong>: Library unit (application or dependent), the binary/library name, and the method name in a tree format</li>
    <li><strong>Exclusive CPU time</strong>: Exclusive CPU time in seconds</li>
    <li><strong>Exclusive CPU rate</strong>: Exclusive CPU rate in percentages</li>
@@ -245,7 +245,7 @@
 
 <h4>Failed API Table</h4>
 <p>The Failed API table contains the following columns:</p>
-<ul> 
+<ul>
    <li><strong>Time</strong>: Timestamp</li>
    <li><strong>API</strong>: Name of the failed API or function</li>
    <li><strong>Parameter</strong>: Parameter</li>
@@ -261,7 +261,7 @@
 <h4>Warning Table</h4>
 <p>The Warning table contains the following columns:</p>
 
-<ul> 
+<ul>
    <li><strong>Category</strong>: Warning category</li>
    <li><strong>PID</strong>: PID</li>
    <li><strong>Warning</strong>: Warning message</li>
diff --git a/org.tizen.studio/html/common_tools/da_file.htm b/org.tizen.studio/html/common_tools/da_file.htm
index aff808c..3e01918 100644 (file)
--- a/org.tizen.studio/html/common_tools/da_file.htm
+++ b/org.tizen.studio/html/common_tools/da_file.htm
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -49,8 +49,8 @@
 
 <p align="center"><strong>Figure: File analysis</strong></p>
 <p align="center"><img alt="File analysis" src="../images/da_file_analysis.png" /></p>
- 
- 
+
+
 <p>Together, the views show the following information:</p>
 <ul>
 <li>Name and location of the file</li>
@@ -67,12 +67,12 @@
 <li>A non-target file is the opposite of the target file. For example, if you are only interested in internal calls, files that include direct calls are non-target files.</li>
 </ul>
 
- 
+
 <h2 id="chart">File Chart</h2>
 <p>The file chart has a separated child and parent chart. There can be only 1 parent chart of each file, whereas multiple child charts are supported. Multiple child charts are separated by PID and TID. The parent chart records all the operations performed by the child charts.</p>
 
 <p align="center"><strong>Figure: File chart</strong></p>
-<p align="center"><img alt="File chart" src="../images/da_file_chart.png" /></p> 
+<p align="center"><img alt="File chart" src="../images/da_file_chart.png" /></p>
 
 <p>The file chart shows the following information:</p>
 <ul>
@@ -82,13 +82,13 @@
        <li>Aqua area indicates the open area of the file. (B)</li>
        </ul>
 </li>
-<li>The upper side lines displayed on the child chart indicate the time of locking the file: 
+<li>The upper side lines displayed on the child chart indicate the time of locking the file:
        <ul>
        <li>Violet area indicates the lock area of the file. (D)</li>
        <li>Purple area indicates the lock waiting of the file. (E)</li>
        </ul>
 </li>
-<li>The lower side lines displayed on the child chart indicate the time of reading and writing the file: 
+<li>The lower side lines displayed on the child chart indicate the time of reading and writing the file:
        <ul>
        <li>Sky blue area or line indicates the write or read area of the file. (C)</li>
        <li>Blue area or line indicates the concurrent writing or reading of the file without the lock.</li>
diff --git a/org.tizen.studio/html/common_tools/da_memory.htm b/org.tizen.studio/html/common_tools/da_memory.htm
index 377a029..51957fd 100644 (file)
--- a/org.tizen.studio/html/common_tools/da_memory.htm
+++ b/org.tizen.studio/html/common_tools/da_memory.htm
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -61,7 +61,7 @@
 <ul>
 <li><strong>System Memory</strong> chart
 <p>You can check the memory size of the system and process.</p>
- 
+
 <p align="center"><strong>Figure: System Memory chart</strong></p>
 <p align="center"><img alt="System Memory chart" src="../images/da_memory_system.png" /></p>
 </li>
@@ -75,7 +75,7 @@
 <p align="center"><img alt="Process Memory chart" src="../images/da_memory_process.png" /></p>
 </li>
 <li id="heap"><strong>Heap Allocation</strong> chart
-<p>You can check the allocated heap memory size of the process. It is calculated by &quot;total allocation – total free&quot;:</p>
+<p>You can check the allocated heap memory size of the process. It is calculated by "total allocation – total free":</p>
        <ul>
        <li><strong>Total</strong>: Allocated heap memory size of the process</li>
        <li><strong>Main Executable</strong>: Allocated heap memory size of the main executable</li></ul>
@@ -123,8 +123,8 @@
        <li><strong>GEM</strong>: Sum of the unique GEM (Graphics Execution Manager) memory in the system</li>
 </ul></li>
 <li><strong>Heap (Total)</strong>: Main executable heap size + each library heap size</li>
-<li><strong>Main Executable</strong>: &quot;Allocated memory – free memory&quot; of the main executable</li>
-<li><strong>Each library</strong>: &quot;Allocated memory – free memory&quot; of each library</li>
+<li><strong>Main Executable</strong>: "Allocated memory – free memory" of the main executable</li>
+<li><strong>Each library</strong>: "Allocated memory – free memory" of each library</li>
 </ul>
 
 <h2 id="range">Range Analysis</h2>
@@ -188,7 +188,7 @@
 </ul>
 
 <h2 id="callstack">CallStack</h2>
-<p>You can see a call stack for each allocation from the <strong>Persistent Allocations</strong> table in the <strong>CallStack</strong> table. The allocation&#39;s call stack is shown when you select an allocation in the <strong>Persistent Allocations</strong> table.</p>
+<p>You can see a call stack for each allocation from the <strong>Persistent Allocations</strong> table in the <strong>CallStack</strong> table. The allocation's call stack is shown when you select an allocation in the <strong>Persistent Allocations</strong> table.</p>
 
 <p align="center"><strong>Figure: CallStack table</strong></p>
 <p align="center"><img alt="CallStack table" src="../images/da_memory_callstack.png" /></p>
@@ -212,7 +212,7 @@
 <li><strong>Name</strong>: Library file name including a full path</li>
 <li><strong>Low- and High-address</strong>: Address range of a library inside the process</li>
 </ul>
- 
+
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
diff --git a/org.tizen.studio/html/common_tools/da_network.htm b/org.tizen.studio/html/common_tools/da_network.htm
index 27f84c5..a7f13c6 100644 (file)
--- a/org.tizen.studio/html/common_tools/da_network.htm
+++ b/org.tizen.studio/html/common_tools/da_network.htm
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -49,12 +49,12 @@
 
 <p align="center"><strong>Figure: Network analysis</strong></p>
 <p align="center"><img alt="Network analysis" src="../images/da_network_analysis.png" /></p>
- 
+
 <h2 id="chart">Network Chart</h2>
 <p>The network chart displays the socket object in a tree format using a graph.</p>
 
 <p align="center"><strong>Figure: Network chart</strong></p>
-<p align="center"><img alt="Network chart" src="../images/da_network_chart.png" /></p> 
+<p align="center"><img alt="Network chart" src="../images/da_network_chart.png" /></p>
 
 <p>The color of the horizontal bar in the chart indicates the state of the socket:</p>
 <ul>
@@ -69,7 +69,7 @@
        <li>Red line indicates that the API has failed.</li>
        </ul>
 </li>
-<li>The lower line: 
+<li>The lower line:
        <ul>
        <li>Purple area or line indicates the read area of the socket.</li>
        <li>Lime green area or line indicates the write area of the socket.</li>
diff --git a/org.tizen.studio/html/common_tools/da_opengl.htm b/org.tizen.studio/html/common_tools/da_opengl.htm
index 0cfdc5f..35241e5 100644 (file)
--- a/org.tizen.studio/html/common_tools/da_opengl.htm
+++ b/org.tizen.studio/html/common_tools/da_opengl.htm
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -32,7 +32,7 @@
                        <li><a href="#statistics">Statistics</a></li>
                        <li><a href="#api_list">API Lists</a></li>
                        <li><a href="#redundant">Redundant</a></li>
-                       <li><a href="#context">Context</a></li> 
+                       <li><a href="#context">Context</a></li>
                        <li><a href="#program">Program</a></li>
                        <li><a href="#texture">Texture</a></li>
                </ul>
@@ -55,7 +55,7 @@
 </ul>
 
 <p align="center"><strong>Figure: OpenGL analysis</strong></p>
-<p align="center"><img alt="OpenGL analysis" src="../images/da_opengl_analysis.png" /></p> 
+<p align="center"><img alt="OpenGL analysis" src="../images/da_opengl_analysis.png" /></p>
 
 <h2 id="chart">OpenGL&reg; Chart</h2>
 <p>The OpenGL&reg; chart displays the elapsed frame time with 2 charts:</p>
@@ -63,7 +63,7 @@
 <li>The Frame time chart shows the elapsed frame time. The X axis value of the frame time chart means the frame index number. A small chart value means a good status frame. Only the frames smaller than the value specified by the user and changed to yellow are visible.
 
 <p align="center"><strong>Figure: Frame time chart</strong></p>
-<p align="center"><img alt="Frame time chart" src="../images/da_opengl_frame.png" /></p> 
+<p align="center"><img alt="Frame time chart" src="../images/da_opengl_frame.png" /></p>
 </li>
 <li>The Frame rate chart shows the FPS. The X axis value of the frame rate chart means the analysis time. A larger chart value means a good status frame.
 
@@ -76,7 +76,7 @@
 <p>The Statistics table displays the API statistics related to EvasGL and OpenGL&reg; 2.0.</p>
 
 <p align="center"><strong>Figure: Statistics table</strong></p>
-<p align="center"><img alt="Statistics table" src="../images/da_opengl_statistics.png" /></p> 
+<p align="center"><img alt="Statistics table" src="../images/da_opengl_statistics.png" /></p>
 
 <p>The table contains the following columns:</p>
 <ul>
@@ -90,7 +90,7 @@
 <p>The API List table displays the APIs associated with the values selected in the chart.</p>
 
 <p align="center"><strong>Figure: API List table</strong></p>
-<p align="center"><img alt="API List table" src="../images/da_opengl_apilist.png" /></p> 
+<p align="center"><img alt="API List table" src="../images/da_opengl_apilist.png" /></p>
 
 <p>The table contains the following columns:</p>
 <ul>
@@ -110,7 +110,7 @@
 <p>The Redundant table displays the APIs that are called repeatedly with the same parameters.</p>
 
 <p align="center"><strong>Figure: Redundant table</strong></p>
-<p align="center"><img alt="Redundant table" src="../images/da_opengl_redundant.png" /></p> 
+<p align="center"><img alt="Redundant table" src="../images/da_opengl_redundant.png" /></p>
 
 <p>The table contains the following columns:</p>
 <ul>
@@ -124,7 +124,7 @@
 <p>The Context table displays the context rendering state associated with the item selected in the API List table. The title of the table refers to the context number of the selected API.</p>
 
 <p align="center"><strong>Figure: Context table</strong></p>
-<p align="center"><img alt="Context table" src="../images/da_opengl_context.png" /></p> 
+<p align="center"><img alt="Context table" src="../images/da_opengl_context.png" /></p>
 
 <p>The table contains the following columns:</p>
 <ul>
@@ -138,7 +138,7 @@
 <p>The Program table displays the program information associated with the items selected in the API List table.</p>
 
 <p align="center"><strong>Figure: Program table</strong></p>
-<p align="center"><img alt="Program table" src="../images/da_opengl_program.png" /></p> 
+<p align="center"><img alt="Program table" src="../images/da_opengl_program.png" /></p>
 
 <p>The table contains the following columns:</p>
 <ul>
diff --git a/org.tizen.studio/html/common_tools/da_overview.htm b/org.tizen.studio/html/common_tools/da_overview.htm
index af8854e..7cae771 100644 (file)
--- a/org.tizen.studio/html/common_tools/da_overview.htm
+++ b/org.tizen.studio/html/common_tools/da_overview.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Monitoring Performance with Dynamic Analyzer</title>  
+       <title>Monitoring Performance with Dynamic Analyzer</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -28,7 +28,7 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../org.tizen.training/html/native/process/performance_n.htm">Optimizing Application Performance</a></li> 
+                       <li><a href="../../../org.tizen.training/html/native/process/performance_n.htm">Optimizing Application Performance</a></li>
                </ul>
        </div></div>
 </div>
@@ -46,7 +46,7 @@
 <li>Study the tracing result and fix performance issues again.</li>
 </ol>
 
-<p align="center"><strong>Figure: Basic workflow using Dynamic Analyzer</strong></p> 
+<p align="center"><strong>Figure: Basic workflow using Dynamic Analyzer</strong></p>
 <p align="center"><img alt="Basic workflow using Dynamic Analyzer" src="../images/dynamic_analyzer_basic_workflow.png"/></p>
 
 <p>With several of profiling features on the Dynamic Analyzer, you can get a hint about how to highly optimize the application.</p>
@@ -55,7 +55,7 @@
 
 <p>When the Dynamic Analyzer is launched, a feature selection dialog opens. You can select the available features for your profiling based on the selected target profile.</p>
 
-<p align="center"><strong>Figure: Feature selection dialog</strong></p> 
+<p align="center"><strong>Figure: Feature selection dialog</strong></p>
 <p align="center"><img alt="Feature selection dialog" src="../images/dynamic_analyzer_feature_selection.png"/></p>
 
 <p>The following table lists the supported features on the Dynamic Analyzer. Every feature is placed onto a specific group (CPU, Memory, File System, Graphics, Network, UI, Synchronization, or Energy) to help you understand the profiling category.</p>
diff --git a/org.tizen.studio/html/common_tools/da_thread.htm b/org.tizen.studio/html/common_tools/da_thread.htm
index 7607261..d0ee26c 100644 (file)
--- a/org.tizen.studio/html/common_tools/da_thread.htm
+++ b/org.tizen.studio/html/common_tools/da_thread.htm
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -49,12 +49,12 @@
 
 <p align="center"><strong>Figure: Thread analysis</strong></p>
 <p align="center"><img alt="Thread analysis" src="../images/da_thread_analysis.png" /></p>
- 
+
 <h2 id="chart">Thread Chart</h2>
 <p>The thread chart displays the thread and the related synchronization object in a tree format using a graph.</p>
 
 <p align="center"><strong>Figure: Thread chart</strong></p>
-<p align="center"><img alt="Thread chart" src="../images/da_thread_chart.png" /></p> 
+<p align="center"><img alt="Thread chart" src="../images/da_thread_chart.png" /></p>
 
 <p>The chart classifies thread and synchronization object states by color and shape:</p>
 <ul>
diff --git a/org.tizen.studio/html/common_tools/da_ui_hierarchy_n.htm b/org.tizen.studio/html/common_tools/da_ui_hierarchy_n.htm
index a36faf3..7ac07e4 100644 (file)
--- a/org.tizen.studio/html/common_tools/da_ui_hierarchy_n.htm
+++ b/org.tizen.studio/html/common_tools/da_ui_hierarchy_n.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Performing UI Hierarchy Analysis</title>  
+       <title>Performing UI Hierarchy Analysis</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -50,7 +50,7 @@
 <li><a href="#layout">Layout</a> view shows a block representation of your application.</li>
 </ol>
 
-<p align="center"><strong>Figure: UI hierarchy analysis</strong></p> 
+<p align="center"><strong>Figure: UI hierarchy analysis</strong></p>
 <p align="center"><img alt="UI hierarchy analysis" src="../images/da_ui_analysis.png"/></p>
 
 <h2 id="hierarchy">Hierarchy Tree</h2>
@@ -81,8 +81,8 @@
  </li>
  <li>You can export the hierarchy tree to an image file.
  <p>To save a screenshot of the tree view to an image file (PNG), click the export button (<img alt="Export button" src="../images/da_ui_export_button.png"/>) at the top right corner. In a dialog box, click <strong>Save As</strong> and define a location for the file.</p>
- 
- <p align="center"><strong>Figure: Hierarchy tree</strong></p> 
+
+ <p align="center"><strong>Figure: Hierarchy tree</strong></p>
  <p align="center"><img alt="Hierarchy tree" src="../images/da_ui_hierarchy_tree.png"/></p>
  </li>
 </ul>
@@ -92,14 +92,14 @@
 <p>The Overview area represents the entire tree in the map style. The Hierarchy Tree view displays an enlarged tree, which indicates a particular part of the whole tree in the Overview area.</p>
 <p>Through the Overview area, you can move around the whole hierarchy tree. Select and move the shaded rectangle, and the tree in the rectangle is displayed as an enlarged tree in the Hierarchy Tree view.</p>
 
-<p align="center"><strong>Figure: Overview</strong></p> 
+<p align="center"><strong>Figure: Overview</strong></p>
 <p align="center"><img alt="Overview" src="../images/da_ui_overview.png"/></p>
 
 <h2 id="UI_object">UI Object</h2>
 
 <p>When you select a node in the Hierarchy Tree view, basic information about the selected UI object appears in a small balloon (UI Object view) above the node.</p>
 
-<p align="center"><strong>Figure: UI Object view</strong></p> 
+<p align="center"><strong>Figure: UI Object view</strong></p>
 <p align="center"><img alt="UI Object view" src="../images/da_ui_object.png"/></p>
 
 <p>In the view, you can see:</p>
@@ -125,16 +125,16 @@
 
 <p>The Properties table shows a list of the properties for the selected UI object from the Hierarchy Tree view. To find an individual property, expand a category name by clicking the arrow on its left.</p>
 <p>The properties are categorized by the type of the EFL UI object (Evas, Elementary, or Edje). The Properties table always shows the Evas category, because all of the EFL UI objects are subtypes of Evas.</p>
-<p>If the UI object is of the Elementary or Edje type, the view shows those categories too. Each type&#39;s own properties are also categorized (such as <code>elm_label</code>).</p>
+<p>If the UI object is of the Elementary or Edje type, the view shows those categories too. Each type's own properties are also categorized (such as <code>elm_label</code>).</p>
 
-<p align="center"><strong>Figure: Properties table</strong></p> 
+<p align="center"><strong>Figure: Properties table</strong></p>
 <p align="center"><img alt="Properties table" src="../images/da_ui_properties.png"/></p>
 
 <h2 id="layout">Layout</h2>
 
 <p>The Layout view shows a block representation of the application. When you select a node in the Hierarchy Tree view, the corresponding image is displayed and highlighted.</p>
 
-<p align="center"><strong>Figure: Layout view</strong></p> 
+<p align="center"><strong>Figure: Layout view</strong></p>
 <p align="center"><img alt="Layout view" src="../images/da_ui_layout.png"/></p>
 
 
diff --git a/org.tizen.studio/html/common_tools/emulator.htm b/org.tizen.studio/html/common_tools/emulator.htm
index 47c6691..1fec25f 100644 (file)
--- a/org.tizen.studio/html/common_tools/emulator.htm
+++ b/org.tizen.studio/html/common_tools/emulator.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Running Applications on the Emulator</title>  
+       <title>Running Applications on the Emulator</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,12 +29,12 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#run">Running an Application in the Emulator</a></li>
-                       <li><a href="#speed">Increasing the Application Execution Speed</a></li>        
-                       <li><a href="#supported">Supported Features</a></li>    
+                       <li><a href="#speed">Increasing the Application Execution Speed</a></li>
+                       <li><a href="#supported">Supported Features</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="emulator_manager.htm">Managing Emulator Instances</a></li>   
+                       <li><a href="emulator_manager.htm">Managing Emulator Instances</a></li>
                        <li><a href="emulator_control_panel.htm">Using Emulator Control Keys, Menu, and Panel</a></li>
                        <li><a href="emulator_features.htm">Using Extended Emulator Features</a></li>
                </ul>
@@ -90,10 +90,10 @@
 <ol>
 <li>Prerequisites for using HW virtualization:
 <ul>
-<li>In Ubuntu: 
+<li>In Ubuntu:
 <p>To use KVM, you need a processor that supports HW virtualization. Both Intel and AMD have developed those extensions for their processors (Intel VT-x/AMD-V). Check whether the CPU supports HW virtualization with the following command:</p>
 <pre class="prettyprint">
-$egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
+$egrep -c '(vmx|svm)' /proc/cpuinfo
 </pre>
 <p>If the output of the command is 0, the CPU does not support HW virtualization. Otherwise, it does.</p>
 <p>The HW virtualization feature can also be disabled on the BIOS setting. Check the setting and enable it if you need the feature.</p>
@@ -163,7 +163,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
                        <p>Portrait (default), landscape, reverse portrait, and reverse landscape</p>
                </td>
                <td>Supported</td>
-               <td>2 skin layout types are supported: 
+               <td>2 skin layout types are supported:
                        <ul>
                                <li>Profile-specific skin</li>
                                <li>General purpose skin</li>
@@ -196,7 +196,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
        </tr>
        <tr>
                <td>OpenGL&reg; ES</td>
-               <td>Compatible with OpenGL&reg; ES 1.1 and 2.0 
+               <td>Compatible with OpenGL&reg; ES 1.1 and 2.0
                <p>OpenGL&reg; ES API pass-through through PCI</p>
                </td>
                <td>Supported</td>
@@ -225,7 +225,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
        </tr>
        <tr>
                <td>Emulator Control Panel</td>
-               <td>The Emulator Control Panel (ECP) supports different features depending on the device profile: 
+               <td>The Emulator Control Panel (ECP) supports different features depending on the device profile:
                <p>Mobile:</p>
                <ul>
                <li>Device Manager: Device Tree, Network, Host Directory Sharing</li>
@@ -243,7 +243,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
        </tr>
        <tr>
                <td>Camera</td>
-               <td>Virtual camera device connecting a host machine&#39;s Webcam:
+               <td>Virtual camera device connecting a host machine's Webcam:
                <ul>
                <li>Support: preview, capture, and record</li>
                <li>Image format: YUYV, I420, and YV12</li>
@@ -306,7 +306,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
   <tbody>
     <tr>
                <th>Category</th>
-               <th>Subject</th>       
+               <th>Subject</th>
                <th>Physical target</th>
                <th>Emulator</th>
     </tr>
@@ -316,80 +316,80 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
                  <td>Buy a target device or reference board (by model)</td>
                  <td>Download the Tizen Studio (multi-profile and multi-model support)</td>
         </tr>
-       
+
                <tr>
                  <td>Network</td>
                  <td>Need Bluetooth</td>
                  <td>Only the network environment</td>
                </tr>
-               
+
                <tr>
                  <td>Target connection</td>
                  <td>USB</td>
                  <td>IPC (TCP/UDP)</td>
                </tr>
-               
+
                <tr>
                  <td>Source and package management</td>
                  <td>Source and package for target</td>
                  <td>Source and package for the emulator</td>
                </tr>
-               
+
                <tr>
                  <td>Host Directory Sharing</td>
                  <td>Not supported</td>
                  <td>Supported</td>
                </tr>
-        
+
         <tr>
                  <td rowspan="10">Portability</td>
                  <td>Screen resolution</td>
                  <td>Fixed</td>
                  <td>Configurable</td>
            </tr>
-       
+
                <tr>
                  <td>RAM, storage size</td>
                  <td>Fixed</td>
                  <td>Configurable</td>
                </tr>
-               
+
                <tr>
                  <td>2D and 3D acceleration API</td>
                  <td>GPU-dependent</td>
                  <td>GPU-independent (common set)</td>
                </tr>
-               
+
                <tr>
                  <td>CP, telephony</td>
                  <td>Fully supported</td>
                  <td>Partially supported (only SMS and voice call)</td>
                </tr>
-               
+
                <tr>
                  <td>Wi-Fi</td>
                  <td>Fully supported</td>
                  <td>Partially supported (using ethernet)</td>
                </tr>
-                               
+
                <tr>
                  <td>Sensor</td>
                  <td>Fully supported</td>
                  <td>Partially supported (using the Emulator Control Panel)</td>
                </tr>
-               
+
                <tr>
                  <td>PnP, external connection</td>
                  <td>Fully supported</td>
                  <td>Partially supported (using the Emulator Control Panel)</td>
                </tr>
-               
+
                <tr>
                  <td>Camera</td>
                  <td>Fully supported</td>
                  <td>Partially supported (preview, capture, recording, contrast, and brightness)</td>
                </tr>
-               
+
                <tr>
                  <td>Vibration, haptic</td>
                  <td>Fully supported</td>
@@ -400,21 +400,21 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
                  <td>Bluetooth</td>
                  <td>Fully supported</td>
                  <td>Not supported</td>
-               </tr>  
-  
+               </tr>
+
                <tr>
-                 <td rowspan="3">Performance</td>  
+                 <td rowspan="3">Performance</td>
                  <td>CPU performance</td>
                  <td>Mobile CPU</td>
                  <td>Desktop CPU (with hardware virtualization)</td>
           </tr>
-       
+
                <tr>
                  <td>GPU performance</td>
                  <td>Real GPU</td>
                  <td>Desktop GPU (relatively slow)</td>
                </tr>
-               
+
                <tr>
                  <td>I/O performance</td>
                  <td>Real HW I/O</td>
@@ -431,7 +431,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 
    <tr>
                <th>Category</th>
-               <th>Physical target</th>       
+               <th>Physical target</th>
                <th>Emulator</th>
    </tr>
 
@@ -441,58 +441,58 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
                  <td>Real device and driver</td>
                  <td>Virtual (VirtIO) device and driver</td>
                </tr>
-   
-   
+
+
         <tr>
                  <td>Host keyboard and hardware key</td>
                  <td>Real device and driver</td>
                  <td>Virtual (VirtIO) device and driver</td>
                </tr>
-   </tbody>  
+   </tbody>
 </table>
 
 <h4 id="graphics" name="graphics">Graphics and Display</h4>
 
- 
+
   <p align="center" class="Table"><strong>Table: Graphics and display differences</strong></p>
  <table>
   <tbody>
 
    <tr>
                <th>Category</th>
-               <th>Physical target</th>       
+               <th>Physical target</th>
                <th>Emulator</th>
    </tr>
 
-  
+
         <tr>
                  <td>Framebuffer device</td>
                  <td>Display controller in the processor</td>
                  <td>Virtual VGA card</td>
                </tr>
-               
+
                <tr>
                  <td>Backlight control</td>
                  <td>LDI (LCD Driver IC) command</td>
                  <td>Additional virtual device and driver</td>
                </tr>
-               
-   </tbody>  
+
+   </tbody>
 </table>
-   
+
  <h4 id="sensor" name="sensor">Virtual Sensor (Emulator Control Panel)</h4>
-   
-  
+
+
   <p align="center" class="Table"><strong>Table: Virtual sensor differences</strong></p>
 <table>
-  <tbody>  
+  <tbody>
 
   <tr>
   <th colspan="2">Category</th>
      <th>Physical target</th>
         <th>Emulator</th>
   </tr>
- 
+
         <tr>
      <td rowspan="8">Sensor</td>
         <td>Acceleration</td>
@@ -500,22 +500,22 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
   <td>Receives the virtual acceleration value through the Emulator Control Panel.
   <p>If the emulator orientation is portrait, the acceleration values are approximately 0, -9.81, and 0 degrees.</p></td>
 </tr>
-  
-   
+
+
    <tr>
         <td>Gyro</td>
      <td>Receives the actual gyroscope value of the device.</td>
      <td>Receives the virtual gyroscope value through the Emulator Control Panel.</td>
    </tr>
-   
+
    <tr>
         <td>Geomagnetic</td>
      <td>Receives the actual geomagnetic value of the device.</td>
      <td>Receives the virtual geomagnetic value through the Emulator Control Panel.
 <p>If the emulator orientation is portrait, the Y axis points to true north and the magnetic tesla values are 1, 0, and -10 degrees.</p></td>
    </tr>
-   
-   
+
+
    <tr>
         <td>Proximity</td>
      <td>Receives the actual proximity value of the device.</td>
@@ -523,8 +523,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
         <p>You can register an event handler for the proximity sensor and test it with the Emulator Control Panel. However, the screen does not power off during the event because the emulator does not connect to the power manager.</p>
     </td>
    </tr>
-   
-   
+
+
    <tr>
         <td>Light</td>
      <td>Receives the actual ambient light value of the device.</td>
@@ -532,58 +532,58 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
         <p>You can register an event handler for the light sensor and test it with the Emulator Control Panel. However, in order to test the screen brightness change, the brightness setting must be automatic in the setting application. </p>
     </td>
    </tr>
-   
+
    <tr>
         <td>Pressure</td>
      <td>Receives the actual pressure value of the device.</td>
      <td>Receives the virtual actual pressure value through the Emulator Control Panel.
     </td>
    </tr>
-   
+
    <tr>
         <td>Ultraviolet</td>
      <td>Receives the actual ultraviolet value of the device.</td>
      <td>Receives the virtual actual ultraviolet value through the Emulator Control Panel.
     </td>
    </tr>
-   
+
    <tr>
         <td>Heart Rate Monitor</td>
      <td>Receives the actual heart rate and peak-to-peak values of the device.</td>
      <td>Receives the virtual actual heart rate and peak-to-peak values through the Emulator Control Panel.
     </td>
    </tr>
- 
+
         <tr>
     <td rowspan="4">Device</td>
          <td>Battery</td>
      <td>Receives the actual battery value of the device.</td>
      <td>Receives the virtual battery value through the Emulator Control Panel.
-        <p>You can change the battery level and the charger connection status.</p> 
+        <p>You can change the battery level and the charger connection status.</p>
     </td>
        </tr>
-   
+
    <tr>
          <td>Earjack</td>
      <td>Receives the actual earjack connection event of the device.</td>
      <td>Receives the earjack connection event through the Emulator Control Panel.
-        <p>You can select a 3-wire or 4-wire connection, or set the earjack as disconnected.</p> 
+        <p>You can select a 3-wire or 4-wire connection, or set the earjack as disconnected.</p>
     </td>
        </tr>
-   
-   
+
+
    <tr>
          <td>USB</td>
      <td>Receives the actual USB connection event of the device.</td>
      <td>Receives the USB connection event through the Emulator Control Panel.</td>
        </tr>
-   
+
    <tr>
          <td>RSSI</td>
      <td>Receives the actual RSSI value of the device.</td>
      <td>Receives the virtual RSSI value through the Emulator Control Panel.</td>
        </tr>
- 
+
         <tr>
     <td rowspan="4">Location</td>
          <td>Log</td>
@@ -592,26 +592,26 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
         <p>You can use a log file of the NMEA format.</p>
     </td>
        </tr>
-   
+
    <tr>
          <td>Manual</td>
      <td>Not supported.</td>
      <td>Receives the virtual longitude and latitude values through the Emulator Control Panel.</td>
        </tr>
-   
-   
+
+
    <tr>
          <td>Map</td>
      <td>Not supported.</td>
      <td>Receives the virtual longitude, latitude, altitude, and horizontal accuracy values through the Emulator Control Panel map.</td>
        </tr>
-   
+
    <tr>
          <td>Auto</td>
      <td>Receives the actual GPS coordinates of the device.</td>
      <td>Not supported.</td>
        </tr>
-   
+
    </tbody>
  </table>
 
@@ -620,8 +620,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 
   <p align="center" class="Table"><strong>Table: Telephony differences</strong></p>
  <table>
-  <tbody>  
- 
+  <tbody>
+
  <tr>
     <th colspan="2">Category</th>
        <th>Physical target</th>
@@ -634,7 +634,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
         <td>Call waiting, outgoing call barring, and voice calls with the Emulator Control Panel are supported.
         <p>Video calls, call forwarding, incoming call barring, and emulator-to-emulator calls are not supported.</p></td>
         </tr>
-        
+
         <tr>
      <td>SMS</td>
         <td>SMS messaging is supported.</td>
@@ -642,34 +642,34 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
         <p>Sending emulator-to-emulator SMS messages is not supported.</p></td>
         </tr>
  </tbody>
- </table> 
-   
-   
+ </table>
+
+
 <h4 id="power" name="power">Power Management</h4>
- 
+
   <p align="center" class="Table"><strong>Table: Power management differences</strong></p>
  <table>
-  <tbody>  
- 
+  <tbody>
+
  <tr>
     <th>Mode</th>
        <th>Physical target</th>
     <th>Emulator</th>
 </tr>
- 
- 
+
+
  <tr>
     <td>Display on/off</td>
     <td>Display controller in the processor</td>
     <td>Internal emulation</td>
  </tr>
- 
+
  <tr>
     <td>Power off</td>
     <td>Power management in the processor</td>
     <td>ACPI (Advanced Configuration and Power Interface)</td>
  </tr>
-</tbody> 
+</tbody>
 </table>
 
 
@@ -677,8 +677,8 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 
   <p align="center" class="Table"><strong>Table: Media format and codec differences</strong></p>
  <table>
-  <tbody>  
- 
+  <tbody>
+
  <tr>
        <th colspan="2">Category</th>
        <th>Physical target</th>
@@ -686,14 +686,14 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo
 </tr>
    <tr>
  <td rowspan="1">Decoder</td>
-     
+
      <td>FLAC</td>
         <td>Supported</td>
         <td>Not supported</td>
-        </tr> 
+        </tr>
  </tbody>
- </table> 
- 
+ </table>
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/common_tools/emulator_control_panel.htm b/org.tizen.studio/html/common_tools/emulator_control_panel.htm
index faca2a3..3c25545 100644 (file)
--- a/org.tizen.studio/html/common_tools/emulator_control_panel.htm
+++ b/org.tizen.studio/html/common_tools/emulator_control_panel.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-  <title>Using Emulator Control Keys, Menu, and Panel</title>  
+  <title>Using Emulator Control Keys, Menu, and Panel</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -50,10 +50,10 @@
 
 <h2 id="controls">Using the Control Keys and Menu</h2>
 
-<p>The control keys are visible on the emulator when you start it. To access the context menu, right-click the emulator.</p> 
+<p>The control keys are visible on the emulator when you start it. To access the context menu, right-click the emulator.</p>
 
 <p align="center"><strong>Figure: Emulator control keys</strong></p>
-<p align="center"><img alt="Emulator control keys" src="../images/emulator_control_keys.png" /></p>     
+<p align="center"><img alt="Emulator control keys" src="../images/emulator_control_keys.png" /></p>
 
 <p>The emulator can use a general purpose or profile-specific skin. While the profile-specific skin provides a realistic skin and hardware keys, the general purpose skin shows a consistent frame on every state of resolution, scale, or rotation, and enables you to change the emulator display resolution to custom values. You can also see the key window.</p>
 
@@ -91,14 +91,14 @@
                </li>
   <li><strong>Home</strong> (mobile only)
        <p>When long-pressed, the Task switcher application opens as in a real device.</p>
-       </li>   
+       </li>
   <li><strong>Back</strong>
        <p>When tapped, the emulator returns to the previous screen.</p>
-       </li>   
+       </li>
   <li><strong>Power</strong>
-       <p>You can power off the display by tapping the <strong>Power</strong> key in most general situations. 
-               Sometimes, the display does not power off though you tap the <strong>Power</strong> key. 
-               This is to guarantee the operation of a current application, such as the Stopwatch in the Clock application. 
+       <p>You can power off the display by tapping the <strong>Power</strong> key in most general situations.
+               Sometimes, the display does not power off though you tap the <strong>Power</strong> key.
+               This is to guarantee the operation of a current application, such as the Stopwatch in the Clock application.
                If you tap the <strong>Power</strong> or <strong>Home</strong> key again, the display is powered on.</p>
        </li>
   <li><strong>Volume Up</strong> and <strong>Volume Down</strong> (mobile only)
@@ -121,7 +121,7 @@
        <tbody>
                        <tr>
                                <th style="text-align:center;margin-left:auto;margin-right:auto;">Feature</th>
-                               <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>       
+                               <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
                        </tr>
 
                        <tr>
@@ -133,7 +133,7 @@
                          <td><strong>Skin Name</strong></td>
                          <td>Skin name</td>
                        </tr>
-                                               
+
                        <tr>
                          <td><strong>CPU Arch</strong></td>
                          <td>CPU architecture</td>
@@ -153,7 +153,7 @@
                          <td><strong>Network connection</strong></td>
                          <td>NAT (Network Address Translation) or Bridged</td>
                        </tr>
-                       
+
                        <tr>
                          <td><strong>CPU Virtualization</strong></td>
                          <td>Whether hardware virtualization is supported</td>
@@ -178,7 +178,7 @@
                          <td><strong>Directory Sharing</strong></td>
                          <td>Whether host directory sharing is used</td>
                        </tr>
-                       
+
                        <tr>
                                <td><strong>File Shared Path</strong></td>
                                <td>Path to the shared host directory</td>
@@ -261,7 +261,7 @@
 </ul>
 <p align="center"><strong>Figure: Emulator Control Panel</strong></p>
 <p align="center"><img alt="Emulator Control Panel" src="../images/emulator_control_panel.png" /></p>
- 
+
 
 <p>To open the control panel:</p>
 <ol>
@@ -271,7 +271,7 @@
 
 <p align="center"><strong>Figure: Opening the control panel</strong></p>
 <p align="center"><img alt="Opening the control panel" src="../images/emulator_control_panel_open.png" /></p>
- 
+
 <p>The main features of the Emulator Control Panel are described in the following sections.</p>
 
 <h3>Controlling the Network Setting</h3>
@@ -399,10 +399,10 @@ timestamp, x, y, z
        <li>Enter the phone number you want to imitate the call from.</li>
        <li>Click <strong>Connect</strong>.</li>
        <li>To hide the phone number on the emulator, select the <strong>Hidden</strong> option.
-       <p>The caller ID on the emulator is set to &quot;Unknown&quot;.</p></li>
+       <p>The caller ID on the emulator is set to "Unknown".</p></li>
        </ol>
-       
-       <p>To make an MO call, use the emulator&#39;s phone application:</p>
+
+       <p>To make an MO call, use the emulator's phone application:</p>
        <ol>
        <li>To ready the emulator for the connection, click <strong>Alert</strong>.</li>
        <li>To ready the emulator for the call, click <strong>Connect</strong>.</li>
@@ -576,7 +576,7 @@ timestamp, x, y, z
 <p>You can access this mode by running the binary without any parameters. The mode keeps a session until it is exited. You can exit by entering the <code>exit</code> command.</p></li>
 <li>Shell mode
 <p>This mode is used for one-time message handling.</p></li></ul>
-<p align="center"><strong>Figure: Session and shell modes</strong></p> 
+<p align="center"><strong>Figure: Session and shell modes</strong></p>
 <p align="center"><img alt="Session and shell modes" src="../images/emulator_control_cli_modes.png" /></p>
 
 <p>In Ubuntu, the bash-based auto-completion is used with the <strong>TAB</strong> key.</p>
@@ -614,13 +614,13 @@ timestamp, x, y, z
  <tr>
  <td><code>qmp</code></td>
  <td><code>qmp &lt;qmp command&gt;</code></td>
- <td>Access the QEMU monitoring protocol. The commands are handled in the JSON format, and do not require <code>{&quot;execute&quot;: &quot;qmp_capabilities&quot;}</code> to be in the control mode.
- <p>In the shell mode, the shell does not support the double quotation mark (&quot;) as an argument. For the JSON arguments, use  \&quot; (back space + double quotation mark) instead.</p></td>
+ <td>Access the QEMU monitoring protocol. The commands are handled in the JSON format, and do not require <code>{"execute": "qmp_capabilities"}</code> to be in the control mode.
+ <p>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.</p></td>
  </tr>
  <tr>
  <td rowspan="3"><code>hds</code></td>
  <td><code>hds mount &lt;host path&gt; &lt;guest path&gt;</code></td>
- <td>Enable the host directory sharing feature between the specified <code>&lt;host path&gt;</code> and the emulator&#39;s <code>&lt;guest path&gt;</code>. The specified path must be a folder, not a file.</td>
+ <td>Enable the host directory sharing feature between the specified <code>&lt;host path&gt;</code> and the emulator's <code>&lt;guest path&gt;</code>. The specified path must be a folder, not a file.</td>
  </tr>
  <tr>
  <td><code>hds unmount &lt;id&gt;</code></td>
@@ -630,7 +630,7 @@ timestamp, x, y, z
  <td><code>hds status</code></td>
  <td>Show the current host directory sharing status.</td>
  </tr>
- </tbody></table> 
+ </tbody></table>
 
 <p align="center" class="Table"><strong>Table: CLI profile commands</strong></p>
 <table>
@@ -640,14 +640,14 @@ timestamp, x, y, z
  <th>Sub-command</th>
  <th>Mobile</th>
  <th>Wearable</th>
- <th>Syntax</th> 
+ <th>Syntax</th>
 </tr>
 
  <tr>
- <td rowspan="8"><code>telephony</code></td> 
+ <td rowspan="8"><code>telephony</code></td>
  <td><code>call dial</code></td>
  <td rowspan="8">Yes</td>
- <td rowspan="8">No</td> 
+ <td rowspan="8">No</td>
  <td><code>telephony call dial &lt;number&gt;</code></td>
  </tr>
  <tr>
@@ -661,7 +661,7 @@ timestamp, x, y, z
  <tr>
  <td><code>call disconnect</code></td>
  <td><code>telephony call disconnect &lt;call id&gt;</code></td>
- </tr>                        
+ </tr>
  <tr>
  <td><code>sms send</code></td>
  <td><code>telephony sms send &lt;number&gt; &lt;text&gt;</code></td>
@@ -677,12 +677,12 @@ timestamp, x, y, z
  <tr>
  <td><code>sms mms_status</code></td>
  <td><code>telephony sms mms_status</code></td>
- </tr> 
+ </tr>
  <tr>
- <td rowspan="4"><code>location</code></td> 
+ <td rowspan="4"><code>location</code></td>
  <td><code>set</code></td>
  <td rowspan="4">Yes</td>
- <td rowspan="4">Yes</td> 
+ <td rowspan="4">Yes</td>
  <td><code>location set &lt;longitude> &lt;latitude&gt;</code></td>
  </tr>
   <tr>
@@ -698,10 +698,10 @@ timestamp, x, y, z
  <td><code>location file &lt;file-path&gt;</code></td>
  </tr>
  <tr>
- <td rowspan="3"><code>battery</code></td> 
+ <td rowspan="3"><code>battery</code></td>
  <td><code>level</code></td>
  <td rowspan="3">Yes</td>
- <td rowspan="3">Yes</td> 
+ <td rowspan="3">Yes</td>
  <td><code>battery level &lt;percent&gt;</code></td>
  </tr>
   <tr>
@@ -713,10 +713,10 @@ timestamp, x, y, z
  <td><code>battery status</code></td>
  </tr>
  <tr>
- <td rowspan="2"><code>earjack</code></td> 
+ <td rowspan="2"><code>earjack</code></td>
  <td><code>set</code></td>
  <td rowspan="2">Yes</td>
- <td rowspan="2">No</td> 
+ <td rowspan="2">No</td>
  <td><code>earjack set &lt;3wire | 4wire | off&gt;</code></td>
  </tr>
   <tr>
@@ -724,10 +724,10 @@ timestamp, x, y, z
  <td><code>earjack status</code></td>
  </tr>
  <tr>
- <td rowspan="2"><code>usb</code></td> 
+ <td rowspan="2"><code>usb</code></td>
  <td><code>set</code></td>
  <td rowspan="2">Yes</td>
- <td rowspan="2">Yes</td> 
+ <td rowspan="2">Yes</td>
  <td><code>usb set &lt;on | off&gt;</code></td>
  </tr>
   <tr>
@@ -735,10 +735,10 @@ timestamp, x, y, z
  <td><code>usb status</code></td>
  </tr>
  <tr>
- <td rowspan="2"><code>rssi</code></td> 
+ <td rowspan="2"><code>rssi</code></td>
  <td><code>set</code></td>
  <td rowspan="2">Yes</td>
- <td rowspan="2">No</td> 
+ <td rowspan="2">No</td>
  <td><code>rssi set &lt;0~4&gt;</code></td>
  </tr>
   <tr>
@@ -746,7 +746,7 @@ timestamp, x, y, z
  <td><code>rssi status</code></td>
  </tr>
  <tr>
- <td rowspan="3"><code>sdcard</code></td> 
+ <td rowspan="3"><code>sdcard</code></td>
  <td><code>attach</code></td>
  <td rowspan="3">Yes</td>
  <td rowspan="3">No</td>
@@ -761,7 +761,7 @@ timestamp, x, y, z
  <td><code>sdcard status</code></td>
  </tr>
  <tr>
-  <td rowspan="6"><code>nfc</code></td> 
+  <td rowspan="6"><code>nfc</code></td>
  <td><code>tag attach</code></td>
  <td rowspan="6">Yes</td>
  <td rowspan="6">No</td>
@@ -788,12 +788,12 @@ timestamp, x, y, z
  <td><code>nfc status</code></td>
  </tr>
  <tr>
- <td rowspan="10"><code>sensor</code></td> 
+ <td rowspan="10"><code>sensor</code></td>
  <td><code>accelerometer</code></td>
  <td rowspan="10">Yes</td>
- <td rowspan="10">Yes</td> 
+ <td rowspan="10">Yes</td>
  <td><code>sensor accelerometer &lt;x&gt; &lt;y&gt; &lt;z&gt;</code></td>
- </tr> 
+ </tr>
   <tr>
  <td><code>gyroscope</code></td>
  <td><code>sensor gyroscope &lt;x&gt; &lt;y&gt; &lt;z&gt;</code></td>
@@ -846,7 +846,7 @@ timestamp, x, y, z
  </tbody></table>
 
 
- 
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 
diff --git a/org.tizen.studio/html/common_tools/emulator_features.htm b/org.tizen.studio/html/common_tools/emulator_features.htm
index db54c74..86917c8 100644 (file)
--- a/org.tizen.studio/html/common_tools/emulator_features.htm
+++ b/org.tizen.studio/html/common_tools/emulator_features.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
@@ -102,7 +102,7 @@
 <li>Run the Emulator Manager and click <strong>Create</strong> or <strong>Edit</strong>.</li>
 <li>In the <strong>File Sharing</strong> section of the VM property, enable the <strong>Sharing</strong> button and select a directory to share.</li>
 <li>Start the emulator.
-<p>The host computer&#39;s directory is shown as <code>/mnt/host</code> in the emulator.</p></li>
+<p>The host computer's directory is shown as <code>/mnt/host</code> in the emulator.</p></li>
 </ol>
 
 <p>You can also add a shared directory in the Emulator Control Panel (ECP):</p>
@@ -139,7 +139,7 @@
 <p>The following table lists the host Webcam features.</p>
 
 <p align="center" class="Table"><strong>Table: Webcam features</strong></p>
-<table style="width: 100%" border="1">  
+<table style="width: 100%" border="1">
   <col width="25%"/>
   <col width="25%"/>
   <col width="50%"/>
@@ -147,14 +147,14 @@
   <tr>
   <th style="text-align:center;margin-left:auto;margin-right:auto;">
         Feature</th>
-               
-               
+
+
   <th style="text-align:center;margin-left:auto;margin-right:auto;">
         Detail</th>
                <th style="text-align:center;margin-left:auto;margin-right:auto;">
         Notes</th>
                </tr>
-       
+
 <tr>
 <td>FPS</td>
 <td>30 fps</td>
@@ -164,7 +164,7 @@
 <td>Preview image format</td>
 <td>YUYV<br/>
 I420<br/>
-YV12<br/> 
+YV12<br/>
 </td>
 <td>-</td>
 </tr>
@@ -174,7 +174,7 @@ YV12<br/>
 <td>YUYV<br/>
 I420<br/>
 YV12<br/>
-JPEG<br/> 
+JPEG<br/>
 </td>
 <td>-</td>
 </tr>
@@ -261,19 +261,19 @@ The following preallocated addresses are not supported as a manual proxy:
 <p>You can add port forwarding by using the ECP. In the <strong>ECP &gt; Network</strong> card, under <strong>Add port-forwarding</strong>, enter the ports to forward.</p></li>
 <li>SDB (Smart Development Bridge)
 <p>The SDB provides port forwarding as a command. For more <code>user,id=net0</code> information in the SDB commands, see <a href="smart_development_bridge.htm#command">sdb forward</a>.</p></li>
-<li>Launch configuration on boot 
+<li>Launch configuration on boot
 <p>You can forward the port on booting the emulator by modifying the QEMU redirection option. The QEMU redirection option can be appended in the existing <code>-netdev user,id=net0</code> option in the <code>&lt;TIZEN_STUDIO_DATA&gt;/emulator/vms/&lt;image name&gt;/vm_launch.conf</code> file with the following appending command:</p>
 <pre class="prettyprint">-netdev user,id=net0,hostfwd=[tcp|udp]:[&lt;hostaddr&gt;]:&lt;hostport&gt;-[&lt;guestaddr&gt;]:&lt;guestport&gt;</pre>
 
 <p>Redirect incoming TCP or UDP connections to the &lt;hostport&gt; host port to the &lt;guestaddr&gt; guest IP address on the &lt;guestport&gt; guest port. If the &lt;guestaddr&gt; is not specified, its value is 10.0.2.15 (default first address given by the built-in DHCP server).</p>
 
-<p>You can also connect one emulator instance with another by using redirection. To set up redirection (where A and B are emulator instances):</p> 
+<p>You can also connect one emulator instance with another by using redirection. To set up redirection (where A and B are emulator instances):</p>
 
 <ol><li>Set up the server on A, listening to <code>10.0.2.15:&lt;ServerPort&gt;</code>.</li>
 
-<li>On A, append the <code>,hostfwd tcp:127.0.0.1:&lt;B&#39;s localPort&gt;-:&lt;A&#39;s serverPort&gt;</code> redirection option in the <code>vm_launch.conf</code> file.</li> 
+<li>On A, append the <code>,hostfwd tcp:127.0.0.1:&lt;B's localPort&gt;-:&lt;A's serverPort&gt;</code> redirection option in the <code>vm_launch.conf</code> file.</li>
 
-<li>On B, let the client connect to <code>10.0.2.2:&lt;B&#39;s localPort&gt;</code>.
+<li>On B, let the client connect to <code>10.0.2.2:&lt;B's localPort&gt;</code>.
 </li>
 </ol>
 
@@ -295,7 +295,7 @@ The appending value of the configuration file is removed when the user changes t
 </ul>
 
 <p align="center"><strong>Figure: Emulator bridged network architecture</strong></p>
- 
+
 <p align="center"><img alt="Emulator bridged network architecture" src="../images/emulator_feature_bridge_architecture.png"/></p>
 
 <div class="note">
@@ -323,7 +323,7 @@ The appending value of the configuration file is removed when the user changes t
 <li id="Bridge_on_WIN8">Bridge configuration on Windows 8 and above:
 
 <ol>
-       <li>Click the <strong>Windows Start (<img alt="Start" src="../images/emulator_feature_windows-8-1-start-button.png"/>) &gt; Control Panel</strong>. In the search box, enter &quot;adapter&quot;, and click <strong>Network and Sharing Center &gt; View network connections</strong>.</li>
+       <li>Click the <strong>Windows Start (<img alt="Start" src="../images/emulator_feature_windows-8-1-start-button.png"/>) &gt; Control Panel</strong>. In the search box, enter "adapter", and click <strong>Network and Sharing Center &gt; View network connections</strong>.</li>
        <li>Right-click the physical network connection used for bridging, and click <strong>Properties</strong>.</li>
        <li>On the <strong>General</strong> tab (for a local area connection), click <strong>Internet Protocol (TCP/IP) &gt; Properties</strong>.</li>
        <li>Click <strong>Obtain an IP address automatically</strong> to delete IP configuration, and click <strong>OK</strong>. The IP configuration (IP address, Subnet mask, and Default gateway) are used for the configuration of the bridged network.</li>
@@ -339,39 +339,39 @@ The appending value of the configuration file is removed when the user changes t
 
 <p>The following example shows the content of the <code>layout.xml</code> layout file:</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
-&lt;EmulatorUI xmlns=&quot;http://www.tizen.org/emulator/ui/layout&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;layoutVersion&gt;2.4&lt;/layoutVersion&gt;
-&nbsp;&nbsp;&nbsp;&lt;formList&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Skin mode definition--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;form name=&quot;Portrait&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;display&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Display screen size and position--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;region left=&quot;30&quot; top=&quot;81&quot; width=&quot;480&quot; height=&quot;800&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Rotate display screen by degree--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;angle&gt;0&lt;/angle&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/display&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Resource file name of the usual skin image--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;normalImage&gt;default_0.png&lt;/normalImage&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Resource file name of the skin image when hardware key events occur--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;pressedImage&gt;default_0_p.png&lt;/pressedImage&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;keyList&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;key name=&quot;Home&quot;&gt; &lt;!--Optional--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Hardware key region size and position--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;region left=&quot;233&quot; top=&quot;882&quot; width=&quot;74&quot; height=&quot;74&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;keycode&gt;139&lt;/keycode&gt; &lt;!--Keycode value--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--This line to be displayed when mouse hovers over the hardware key region--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tooltip&gt;Home&lt;/tooltip&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Defined keyboard shortcut--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;shortcut&gt;F1&lt;/shortcut&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/key&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/keyList&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;hover&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--RGB line color of the hardware key hover--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;color R=&quot;255&quot; G=&quot;255&quot; B=&quot;255&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/hover&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;
-&nbsp;&nbsp;&nbsp;&lt;/formList&gt;
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;EmulatorUI xmlns="http://www.tizen.org/emulator/ui/layout"&gt;
+   &lt;layoutVersion&gt;2.4&lt;/layoutVersion&gt;
+   &lt;formList&gt;
+      &lt;!--Skin mode definition--&gt;
+      &lt;form name="Portrait"&gt;
+         &lt;display&gt;
+            &lt;!--Display screen size and position--&gt;
+            &lt;region left="30" top="81" width="480" height="800"/&gt;
+            &lt;!--Rotate display screen by degree--&gt;
+            &lt;angle&gt;0&lt;/angle&gt;
+         &lt;/display&gt;
+         &lt;!--Resource file name of the usual skin image--&gt;
+         &lt;normalImage&gt;default_0.png&lt;/normalImage&gt;
+         &lt;!--Resource file name of the skin image when hardware key events occur--&gt;
+         &lt;pressedImage&gt;default_0_p.png&lt;/pressedImage&gt;
+         &lt;keyList&gt;
+            &lt;key name="Home"&gt; &lt;!--Optional--&gt;
+               &lt;!--Hardware key region size and position--&gt;
+               &lt;region left="233" top="882" width="74" height="74"/&gt;
+               &lt;keycode&gt;139&lt;/keycode&gt; &lt;!--Keycode value--&gt;
+               &lt;!--This line to be displayed when mouse hovers over the hardware key region--&gt;
+               &lt;tooltip&gt;Home&lt;/tooltip&gt;
+               &lt;!--Defined keyboard shortcut--&gt;
+               &lt;shortcut&gt;F1&lt;/shortcut&gt;
+            &lt;/key&gt;
+         &lt;/keyList&gt;
+         &lt;hover&gt;
+            &lt;!--RGB line color of the hardware key hover--&gt;
+            &lt;color R="255" G="255" B="255"/&gt;
+         &lt;/hover&gt;
+      &lt;/form&gt;
+   &lt;/formList&gt;
 &lt;/EmulatorUI&gt;</pre>
 
 <p>The emulator skin also contains a <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-resources/skins/&lt;SKIN_NAME&gt;/info.ini</code> property file. The file defines skin-related information, such as skin name and supported resolutions.</p>
@@ -402,7 +402,7 @@ resolution.height=800
 <p>The emulator supports event injection using ECP (Emulator Control Panel). However, injecting sensor events using ECP is less intuitive and convenient. When you are injecting events, touching the emulator screen simultaneously is impossible. EventCast enables you to inject sensor and touch events more intuitively using a real target device.</p>
 <p>The following figure illustrates how the EventCast application in the target device gathers events and passes them to the emulator controller, which converts and hands them over to the Tizen platform. This is convenient in case you do not have a Tizen mobile device.</p>
 
-<p align="center"><strong>Figure: EventCast architecture</strong></p> 
+<p align="center"><strong>Figure: EventCast architecture</strong></p>
 <p align="center"><img alt="eventcast_architecture" src="../images/emulator_feature_eventcast_architecture.png" /></p>
 
 <p>EventCast provides the following features:</p>
@@ -420,13 +420,13 @@ resolution.height=800
        <p>For more information, see <a href="http://code.google.com/p/adb-fastboot-install/" target="_blank">ADB Fastboot Install</a>.</p></li>
        <li><p>Windows&reg;: Download ADB and install it in the <code>C:\ADB</code> folder.</p>
        <p>For more information, see <a href="http://rubenalamina.mx/custom-installers/android-adb-fastboot/" target="_blank">ADB Fastboot for Windows</a>.</p></li></ol>
-       
+
 <p>When connecting through Wi-Fi, make sure that your Android device and computer are within the same AP.</p>
 
-       
+
 <h3 id="eventinst" name="eventinst">Installing EventCaster</h3>
 
-<p>EventCaster is the application on the target device. It communicates with the Tizen emulator through the TCP/IP protocol. It can connect to the emulator using USB or Wi-Fi.</p> 
+<p>EventCaster is the application on the target device. It communicates with the Tizen emulator through the TCP/IP protocol. It can connect to the emulator using USB or Wi-Fi.</p>
 
 <p>You can download the EventCaster from Google Play (<a href="https://github.com/eventcaster/eventcaster.git" target="_blank">https://github.com/eventcaster/eventcaster.git</a>) and install it manually.</p>
 
@@ -498,7 +498,7 @@ resolution.height=800
 <pre class="prettyprint">
 [[VARIABLE]]
 ram=512     # define variable ram
-    
+
 [[QEMU_OPTIONS]]
 -m ${ram}   # use variable ram
 </pre>
@@ -509,19 +509,19 @@ ram=512     # define variable ram
 </pre>
 </li>
 </ol>
- 
+
 <p>For more information about the start-up options, see <a href="http://wiki.qemu.org/download/qemu-doc.html#sec_005finvocation" target="_blank">QEMU Emulator User Documentation</a> and the <code>vm_launch.conf</code> file.</p>
 
 <p>The following example shows the configuration file:</p>
-                
+
 <pre class="prettyprint">
 [[VARIABLES]]
 vm_name=mobile-vm
-vms_path=&quot;/home/user/tizen-studio-data/emulator/vms&quot;
+vms_path="/home/user/tizen-studio-data/emulator/vms"
 image_arch=i386
-drive=&quot;file=${vms_path}/${vm_name}/emulimg-${vm_name}.${image_arch},if=none,index=0,cache.no-flush=on&quot;
-swap=&quot;file=${vms_path}/${vm_name}/swap-${vm_name}.img,if=none,index=1&quot;
-skin_path=&quot;/home/user/tizen-studio/platforms/tizen-2.4/mobile/emulator-resources/skins/mobile-general-3btn&quot;
+drive="file=${vms_path}/${vm_name}/emulimg-${vm_name}.${image_arch},if=none,index=0,cache.no-flush=on"
+swap="file=${vms_path}/${vm_name}/swap-${vm_name}.img,if=none,index=1"
+skin_path="/home/user/tizen-studio/platforms/tizen-2.4/mobile/emulator-resources/skins/mobile-general-3btn"
 display_resolution=480x800
 display_pixel_density=233
 process_num=4
@@ -529,17 +529,17 @@ ram=512
 max_point=10
 sensors=accel&amp;geo&amp;gyro&amp;light&amp;proxi&amp;haptic&amp;uv&amp;press&amp;hrm
 jacks=earjack&amp;charger&amp;usb
-network_proxy=&quot;http_proxy=1.2.3.4:123 https_proxy=1.2.3.4:123 ftp_proxy=1.2.3.4:123 socks_proxy=1.2.3.4:123&quot;
-bios_path=&quot;/home/user/tizen-studio/platforms/tizen-2.4/common/emulator/data/bios&quot;
-kernel=&quot;/home/user/tizen-studio/platforms/tizen-2.4/common/emulator/data/kernel/bzImage.${image_arch}&quot;
-kernel_log=&quot;${vms_path}/${vm_name}/logs/emulator.klog&quot;
-virt_cam_img_path0=&quot;/home/user/tizen-studio/tools/emulator/images/default-image2.gif&quot;
+network_proxy="http_proxy=1.2.3.4:123 https_proxy=1.2.3.4:123 ftp_proxy=1.2.3.4:123 socks_proxy=1.2.3.4:123"
+bios_path="/home/user/tizen-studio/platforms/tizen-2.4/common/emulator/data/bios"
+kernel="/home/user/tizen-studio/platforms/tizen-2.4/common/emulator/data/kernel/bzImage.${image_arch}"
+kernel_log="${vms_path}/${vm_name}/logs/emulator.klog"
+virt_cam_img_path0="/home/user/tizen-studio/tools/emulator/images/default-image2.gif"
 wsi=vigs_wsi
 host_ip=10.0.2.2
 image_ver=1.0.4
 profile=mobile
 platform_version=tizen-2.4
-append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${display_pixel_density} ${network_proxy} host_ip=${host_ip} console=ttyS0&quot;
+append="vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${display_pixel_density} ${network_proxy} host_ip=${host_ip} console=ttyS0"
 
 [[QEMU_OPTIONS]]
 -drive ${drive},id=drive
@@ -588,7 +588,7 @@ append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${d
 </pre>
 
 <h2 id="dir" name="dir">Emulator Directory Structure</h2>
-    
+
 <p>The following table describes the content of the emulator directory, located in the <code>&lt;TIZEN_STUDIO&gt;/tools/emulator</code> folder.</p>
 
 
@@ -627,7 +627,7 @@ append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${d
                        <tr>
                                <td><code>bin/emulator-control-panel-cli.jar</code></td>
                                <td>ECP CLI (Command Line Interface)</td>
-                       </tr>                   
+                       </tr>
                        <tr>
                                <td><code>bin/libecp.jar</code></td>
                                <td>Profile-independent library for ECP</td>
@@ -648,8 +648,8 @@ append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${d
        </table>
 
        <p>The following table describes the platform image directories that are located in the <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/&lt;PROFILE&gt;/emulator-images</code> folder.</p>
-   
-  
+
+
 <p align="center" class="Table"><strong>Table: Platform image directory content</strong></p>
 <table border="1">
   <tbody>
@@ -657,21 +657,21 @@ append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${d
            <th>Name</th>
                <th>Description</th>
        </tr>
-        
+
 <tr>
-       <td><code>&lt;IMAGE_DIR&gt;</code></td> 
+       <td><code>&lt;IMAGE_DIR&gt;</code></td>
        <td>Platform image directory</td>
-       </tr>  
+       </tr>
          <tr>
-       <td><code>&lt;IMAGE_DIR&gt;/emulimg-&lt;VERSION&gt;.&lt;ARCHITECTURE&gt;</code></td>    
+       <td><code>&lt;IMAGE_DIR&gt;/emulimg-&lt;VERSION&gt;.&lt;ARCHITECTURE&gt;</code></td>
        <td>Platform image, which represents an emulator root file system for x86 in the guest OS view</td>
-       </tr>  
+       </tr>
   <tr>
-       <td><code>&lt;IMAGE_DIR&gt;/info.ini</code></td>        
+       <td><code>&lt;IMAGE_DIR&gt;/info.ini</code></td>
        <td>File for specifying information of the platform image</td>
-       </tr> 
+       </tr>
  </tbody>
-</table>       
+</table>
 
 <p>The following table describes the platform common directories that are located in the <code>&lt;TIZEN_STUDIO&gt;/platforms/&lt;PLATFORM_VERSION&gt;/common/emulator</code> folder.</p>
 
@@ -715,23 +715,23 @@ append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${d
                <th>Description</th>
        </tr>
     <tr>
-       <td><code>plugins/</code></td>  
+       <td><code>plugins/</code></td>
        <td>Plugins for profile</td>
        </tr>
        <tr>
-       <td><code>plugins/ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.jar</code></td>    
+       <td><code>plugins/ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.jar</code></td>
        <td>Plugin for the ECP</td>
        </tr>
        <tr>
-       <td><code>plugins/ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.xml</code></td>    
+       <td><code>plugins/ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.xml</code></td>
        <td>XML file for the <code>ecp-plugin-&lt;PROFILE&gt;-&lt;VERSION&gt;.jar</code> file configuration</td>
        </tr>
        <tr>
-       <td><code>plugins/em-plugin-&lt;PROFILE&gt;.jar</code></td>     
+       <td><code>plugins/em-plugin-&lt;PROFILE&gt;.jar</code></td>
        <td>Plugin for the Emulator Manager</td>
        </tr>
        <tr>
-       <td><code>skins/</code></td>    
+       <td><code>skins/</code></td>
        <td>Emulator skin images specific to the emulator resolution, and icons for the emulator option button and shortcut</td>
        </tr>
        <tr>
@@ -753,10 +753,10 @@ append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${d
 </tbody>
 </table>
 
-    
+
 <p>The following table describes the directory structure of the user-specific files that are located in the <code>&lt;TIZEN_STUDIO_DATA&gt;/emulator/vms</code> folder.</p>
-   
-  
+
+
 <p align="center" class="Table"><strong>Table: User directory content</strong></p>
 <table border="1">
   <tbody>
@@ -765,58 +765,58 @@ append=&quot;vm_name=${vm_name} video=LVDS-1:${display_resolution}-32@60 dpi=${d
                <th>Description</th>
        </tr>
        <tr>
-       <td><code>.em.lock</code></td>  
+       <td><code>.em.lock</code></td>
        <td>Lock file used for synchronization between VM operations, such as modify, delete, and launch</td>
        </tr>
        <tr>
-       <td><code>.tizen-em-info</code></td>    
+       <td><code>.tizen-em-info</code></td>
        <td>Configuration file for the Emulator Manager</td>
-       </tr>   
+       </tr>
     <tr>
-       <td><code>emulator-manager.log</code></td>      
+       <td><code>emulator-manager.log</code></td>
        <td>Emulator Manager log file</td>
-       </tr>   
+       </tr>
        <tr>
-       <td><code>last-created_&lt;PROFILE&gt;.xml</code></td>  
+       <td><code>last-created_&lt;PROFILE&gt;.xml</code></td>
        <td>File for saving the VM properties that the user created last. When user creates a new VM next time, properties in this file are displayed as default.</td>
        </tr>
  <tr>
-       <td><code>&lt;VM_NAME&gt;/</code></td>  
+       <td><code>&lt;VM_NAME&gt;/</code></td>
        <td>Target-specific images</td>
        </tr>
   <tr>
-       <td><code>&lt;VM_NAME&gt;/emulimg-&lt;VM_NAME&gt;.&lt;ARCHITECTURE&gt;</code></td>      
+       <td><code>&lt;VM_NAME&gt;/emulimg-&lt;VM_NAME&gt;.&lt;ARCHITECTURE&gt;</code></td>
        <td>Writable <code>&lt;VM_NAME&gt;</code> image file</td>
        </tr>
  <tr>
-       <td><code>&lt;VM_NAME&gt;/gui.property</code></td>      
+       <td><code>&lt;VM_NAME&gt;/gui.property</code></td>
        <td>Hidden data for the emulator GUI</td>
        </tr>
     <tr>
-       <td><code>&lt;VM_NAME&gt;/logs/</code></td>     
+       <td><code>&lt;VM_NAME&gt;/logs/</code></td>
        <td>Log files (emulator and kernel logs)</td>
        </tr>
          <tr>
-       <td><code>&lt;VM_NAME&gt;/swap-&lt;VM_NAME&gt;.img</code></td>  
+       <td><code>&lt;VM_NAME&gt;/swap-&lt;VM_NAME&gt;.img</code></td>
        <td>Swap image file</td>
        </tr>
     <tr>
-       <td><code>&lt;VM_NAME&gt;/vm_config.xml</code></td>     
+       <td><code>&lt;VM_NAME&gt;/vm_config.xml</code></td>
        <td>Hardware configuration file</td>
        </tr>
        <tr>
-       <td><code>&lt;VM_NAME&gt;/vm_launch.conf</code></td>    
-       <td>Emulator start-up options file (for more information, see <a href="#startup">Starting an Emulator with a Configuration File</a>) 
+       <td><code>&lt;VM_NAME&gt;/vm_launch.conf</code></td>
+       <td>Emulator start-up options file (for more information, see <a href="#startup">Starting an Emulator with a Configuration File</a>)
 </td>
-       </tr> 
+       </tr>
        <tr>
-       <td><code>&lt;VM_NAME&gt;/${USER}.lock</code></td>      
+       <td><code>&lt;VM_NAME&gt;/${USER}.lock</code></td>
        <td>Lock file used for synchronization between VM and ECP for set/get operations</td>
        </tr>
  </tbody>
-</table> 
+</table>
+
 
- 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 
diff --git a/org.tizen.studio/html/common_tools/emulator_manager.htm b/org.tizen.studio/html/common_tools/emulator_manager.htm
index 23b60c9..5a711e3 100644 (file)
--- a/org.tizen.studio/html/common_tools/emulator_manager.htm
+++ b/org.tizen.studio/html/common_tools/emulator_manager.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Managing Emulator Instances</title>  
+       <title>Managing Emulator Instances</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,24 +29,24 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#access">Accessing the Emulator Manager</a></li>
-                       <li><a href="#create">Creating an Emulator Instance</a></li>    
-                       <li><a href="#manage">Managing the Emulator</a></li>    
-                       <li><a href="#platform">Managing Platforms and Templates</a></li>       
-                       <li><a href="#control">Controlling the Emulator Manager from the Command Line</a></li>  
+                       <li><a href="#create">Creating an Emulator Instance</a></li>
+                       <li><a href="#manage">Managing the Emulator</a></li>
+                       <li><a href="#platform">Managing Platforms and Templates</a></li>
+                       <li><a href="#control">Controlling the Emulator Manager from the Command Line</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="emulator.htm">Running Applications on the Emulator</a></li>   
+                       <li><a href="emulator.htm">Running Applications on the Emulator</a></li>
                        <li><a href="emulator_control_panel.htm">Using Emulator Control Keys, Menu, and Panel</a></li>
-                       <li><a href="emulator_features.htm">Using Extended Emulator Features</a></li>                   
+                       <li><a href="emulator_features.htm">Using Extended Emulator Features</a></li>
                </ul>
        </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
  <h1>Managing Emulator Instances</h1>
- 
- 
+
+
 <p>The Tizen Studio provides emulators to run your application in a virtual environment.</p>
 
 <p>In order to test the application in a variety of environments, you need a variety of emulators. The Tizen Studio provides the Emulator Manager to help you easily create and manage the emulator instances.</p>
@@ -60,15 +60,15 @@
 <li>Deleting an emulator instance or hardware profile</li>
 <li>Starting and stopping the emulator</li>
 </ul>
- 
+
        <h2 id="access">Accessing the Emulator Manager</h2>
-       
+
 <p>If you do not have the Emulator Manager installed, you can install it using the Tizen Studio Package Manager.</p>
 
 <p>There are 2 different ways to access the Emulator Manager:</p>
 
 <ul>
-<li>Click the Emulator Manager icon on the desktop or in the Start menu. 
+<li>Click the Emulator Manager icon on the desktop or in the Start menu.
 <p align="center" class="Table"><strong>Table: Starting the Emulator Manager</strong></p>
 <table>
                <tbody>
@@ -132,7 +132,7 @@
 <li>Click the create icon (<img src="../images/emulator_manager_create.png" alt="Create icon" />).</li>
 <li>In the dialog box, select a base platform and platform image file.
 <p>You can create a custom platform using a qcow2 or raw format image.</p>
-<p>Qcow2 is a platform image format that is released with the Tizen Studio. Using the Emulator Manager&#39;s &quot;Export as&quot; feature, you can also create a qcow2 image.</p>
+<p>Qcow2 is a platform image format that is released with the Tizen Studio. Using the Emulator Manager's "Export as" feature, you can also create a qcow2 image.</p>
 <p>A platform image of the development stage is in the raw format. If you try launching an emulator with a raw image, you can see the current state of this image. This can be useful for platform developers.</p></li>
 <li>Click <strong>OK</strong> to save your configuration and click <strong>Next</strong>.
 <p>The newly created platform is added to the list with a settings icon.</p>
@@ -159,9 +159,9 @@
 <p>After configuring the template, click <strong>Next</strong>. The new device template is added to the list with a settings icon.</p>
 
 <p align="center"><strong>Figure: Template configuration</strong></p>
-<p align="center"><img src="../images/emulator_manager_template_config.png" alt="Template configuration" /></p>        
-       
-       
+<p align="center"><img src="../images/emulator_manager_template_config.png" alt="Template configuration" /></p>
+
+
        <h2 id="manage">Managing the Emulator</h2>
 
 <p>In the Emulator Manager, you can edit, delete, reset, and export emulator instances:</p>
@@ -175,7 +175,7 @@
 </ul>
 
        <h2 id="platform">Managing Platforms and Templates</h2>
-       
+
 <p>To manage the template:</p>
 <ul>
 <li>To modify a template, click the modify icon (<img src="../images/emulator_manager_modify.png" alt="Modify icon" />), make the appropriate changes, and click <strong>Confirm</strong>. You can only modify the custom device templates you have created.</li>
@@ -211,9 +211,9 @@
 <p>The following figure shows an example how to create and launch an emulator using the CLI.</p>
 <p align="center"><strong>Figure: Launching the emulator using the command line</strong></p>
 <p align="center"><img src="../images/emulator_manager_cli_create.png" alt="Launching the emulator using the command line" /></p>
- 
+
 <p>In the <code>create</code> command, the <code>–p</code> option is the platform name. You can see the available platforms using the <code>list -vm</code> command.</p>
- 
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/common_tools/keyboard_shortcuts.htm b/org.tizen.studio/html/common_tools/keyboard_shortcuts.htm
index 9057596..23714a0 100644 (file)
--- a/org.tizen.studio/html/common_tools/keyboard_shortcuts.htm
+++ b/org.tizen.studio/html/common_tools/keyboard_shortcuts.htm
@@ -609,7 +609,7 @@
                <td><strong>Ctrl + 5</strong></td>
                <td><strong>Ctrl + 5</strong></td>
                <td><strong>Command + 5</strong></td>
-       </tr>   
+       </tr>
        <tr>
                <td>Select the Range tab</td>
                <td><strong>Ctrl + 6</strong></td>
@@ -860,25 +860,25 @@
                <td><strong>Enter</strong></td>
                <td><strong>Enter</strong></td>
                <td><strong>Enter</strong></td>
-               </tr>   
+               </tr>
                <tr>
                        <td>Close pop-up dialog</td>
                <td><strong>ESC</strong></td>
                <td><strong>ESC</strong></td>
                <td><strong>ESC</strong></td>
-               </tr>   
+               </tr>
                <tr>
                        <td>Move to previous page</td>
                <td><strong>Page Up</strong></td>
                <td><strong>Page Up</strong></td>
                <td><strong>Page Up</strong></td>
-               </tr>   
+               </tr>
                <tr>
                        <td>Move to next page</td>
                <td><strong>Page Down</strong></td>
                <td><strong>Page Down</strong></td>
                <td><strong>Page Down</strong></td>
-               </tr>           
+               </tr>
        <tr>
                 <td rowspan="17">Mobile</td>
                                <td>Battery</td>
@@ -975,13 +975,13 @@
                <td><strong>Alt + H</strong></td>
                <td><strong>Alt + H</strong></td>
                <td><strong>Option + H</strong></td>
-        </tr>                       
+        </tr>
        <tr>
                 <td>Memory</td>
                <td><strong>Alt + O</strong></td>
                <td><strong>Alt + O</strong></td>
                <td><strong>Option + O</strong></td>
-        </tr>  
+        </tr>
        <tr>
                 <td rowspan="15">Wearable</td>
                                <td>Battery</td>
@@ -1066,13 +1066,13 @@
                <td><strong>Alt + H</strong></td>
                <td><strong>Alt + H</strong></td>
                <td><strong>Option + H</strong></td>
-        </tr>      
+        </tr>
        <tr>
                 <td>App Manager</td>
                <td><strong>Alt + U</strong></td>
                <td><strong>Alt + U</strong></td>
                <td><strong>Option + U</strong></td>
-        </tr>                          
+        </tr>
 </tbody>
 </table>
 
@@ -1087,188 +1087,188 @@
                <th>Windows&reg;</th>
                <th>Mac OS&reg; X</th>
         </tr>
-<tr> 
-<td>Close the menu</td> 
+<tr>
+<td>Close the menu</td>
                <td><strong>Esc</strong></td>
                <td><strong>Esc</strong></td>
                <td><strong>Esc</strong></td>
 </tr>
-<tr> 
-<td>Show shortcut keys</td> 
+<tr>
+<td>Show shortcut keys</td>
                <td><strong>F1</strong></td>
                <td><strong>F1</strong></td>
                <td><strong>F1</strong></td>
 </tr>
-<tr> 
+<tr>
 <td>Show or hide the line numbers</td>
                <td><strong>F5</strong></td>
                <td><strong>F5</strong></td>
                <td><strong>F5</strong></td>
 </tr>
-<tr> 
-<td>Show or hide the toolbar</td> 
+<tr>
+<td>Show or hide the toolbar</td>
                <td><strong>F9</strong></td>
                <td><strong>F9</strong></td>
                <td><strong>F9</strong></td>
 </tr>
-<tr> 
-<td>Show or hide the EDC navigator</td> 
+<tr>
+<td>Show or hide the EDC navigator</td>
                <td><strong>F10</strong></td>
                <td><strong>F10</strong></td>
                <td><strong>F10</strong></td>
 </tr>
-<tr> 
-<td>Show or hide the status bar</td> 
+<tr>
+<td>Show or hide the status bar</td>
                <td><strong>F11</strong></td>
                <td><strong>F11</strong></td>
                <td><strong>F11</strong></td>
 </tr>
-<tr> 
+<tr>
 <td>Show the configuration setting window</td>
                <td><strong>F12</strong></td>
                <td><strong>F12</strong></td>
                <td><strong>F12</strong></td>
 </tr>
-<tr> 
-<td>Quick save and compile EDC</td> 
+<tr>
+<td>Quick save and compile EDC</td>
                <td><strong>Ctrl + S</strong></td>
                <td><strong>Ctrl + S</strong></td>
                <td><strong>Command + S</strong></td>
 </tr>
-<tr> 
-<td>Enable or disable auto indentation</td> 
+<tr>
+<td>Enable or disable auto indentation</td>
                <td><strong>Ctrl + I</strong></td>
                <td><strong>Ctrl + I</strong></td>
                <td><strong>Command + I</strong></td>
 </tr>
-<tr> 
-<td>Enable or disable auto completion</td> 
+<tr>
+<td>Enable or disable auto completion</td>
                <td><strong>Ctrl + O</strong></td>
                <td><strong>Ctrl + O</strong></td>
                <td><strong>Command + O</strong></td>
 </tr>
-<tr> 
-<td>Show or hide virtual images to visualize SWALLOW part objects</td> 
+<tr>
+<td>Show or hide virtual images to visualize SWALLOW part objects</td>
                <td><strong>Ctrl + W</strong></td>
                <td><strong>Ctrl + W</strong></td>
                <td><strong>Command + W</strong></td>
 </tr>
-<tr> 
-<td>Enable or disable part object highlighting</td> 
+<tr>
+<td>Enable or disable part object highlighting</td>
                <td><strong>Ctrl + H</strong></td>
                <td><strong>Ctrl + H</strong></td>
                <td><strong>Command + H</strong></td>
 </tr>
-<tr> 
-<td>Enable or disable full text view</td> 
+<tr>
+<td>Enable or disable full text view</td>
                <td><strong>Alt + Left</strong></td>
                <td><strong>Alt + Left</strong></td>
                <td><strong>Option + Left</strong></td>
 </tr>
-<tr> 
-<td>Enable or disable full live view</td> 
+<tr>
+<td>Enable or disable full live view</td>
                <td><strong>Alt + Right</strong></td>
                <td><strong>Alt + Right</strong></td>
                <td><strong>Option + Right</strong></td>
 </tr>
-<tr> 
-<td>Enable or disable full console view</td> 
+<tr>
+<td>Enable or disable full console view</td>
                <td><strong>Alt + Up</strong></td>
                <td><strong>Alt + Up</strong></td>
                <td><strong>Option + Up</strong></td>
 </tr>
-<tr> 
-<td>Enable or disable full live/text view</td> 
+<tr>
+<td>Enable or disable full live/text view</td>
                <td><strong>Alt + Down</strong></td>
                <td><strong>Alt + Down</strong></td>
                <td><strong>Option + Down</strong></td>
 </tr>
-<tr> 
-<td>Insert default template code</td> 
+<tr>
+<td>Insert default template code</td>
                <td><strong>Ctrl + T</strong></td>
                <td><strong>Ctrl + T</strong></td>
                <td><strong>Command + T</strong></td>
 </tr>
-<tr> 
-<td>View scale up/bigger font size</td> 
+<tr>
+<td>View scale up/bigger font size</td>
                <td><strong>Ctrl + Mouse wheel up</strong></td>
                <td><strong>Ctrl + Mouse wheel up</strong></td>
                <td><strong>Command + Mouse wheel up</strong></td>
 </tr>
-<tr> 
-<td>View scale down/smaller font size</td> 
+<tr>
+<td>View scale down/smaller font size</td>
                <td><strong>Ctrl + Mouse wheel down</strong></td>
                <td><strong>Ctrl + Mouse wheel down</strong></td>
                <td><strong>Command + Mouse wheel down</strong></td>
 </tr>
-<tr> 
-<td>Select all the text</td> 
+<tr>
+<td>Select all the text</td>
                <td><strong>Ctrl + A</strong></td>
                <td><strong>Ctrl + A</strong></td>
                <td><strong>Command + A</strong></td>
 </tr>
-<tr> 
-<td>Select the word</td> 
+<tr>
+<td>Select the word</td>
                <td><strong>Ctrl + Double-click</strong></td>
                <td><strong>Ctrl + Double-click</strong></td>
                <td><strong>Command + Double-click</strong></td>
 </tr>
-<tr> 
-<td>Undo text changes</td> 
+<tr>
+<td>Undo text changes</td>
                <td><strong>Ctrl + Z</strong></td>
                <td><strong>Ctrl + Z</strong></td>
                <td><strong>Command + Z</strong></td>
 </tr>
-<tr> 
-<td>Redo text changes</td> 
+<tr>
+<td>Redo text changes</td>
                <td><strong>Ctrl + R</strong></td>
                <td><strong>Ctrl + R</strong></td>
                <td><strong>Command + R</strong></td>
 </tr>
-<tr> 
-<td>Copy selected text</td> 
+<tr>
+<td>Copy selected text</td>
                <td><strong>Ctrl + C</strong></td>
                <td><strong>Ctrl + C</strong></td>
                <td><strong>Command + C</strong></td>
 </tr>
-<tr> 
-<td>Paste copied text</td> 
+<tr>
+<td>Paste copied text</td>
                <td><strong>Ctrl + V</strong></td>
                <td><strong>Ctrl + V</strong></td>
                <td><strong>Command + V</strong></td>
 </tr>
-<tr> 
-<td>Cut selected text</td> 
+<tr>
+<td>Cut selected text</td>
                <td><strong>Ctrl + X</strong></td>
                <td><strong>Ctrl + X</strong></td>
                <td><strong>Command + X</strong></td>
 </tr>
-<tr> 
-<td>Delete the current line</td> 
+<tr>
+<td>Delete the current line</td>
                <td><strong>Ctrl + D</strong></td>
                <td><strong>Ctrl + D</strong></td>
                <td><strong>Command + D</strong></td>
 </tr>
-<tr> 
+<tr>
 <td>Find and replace the given word</td>
                <td><strong>Ctrl + F</strong></td>
                <td><strong>Ctrl + F</strong></td>
                <td><strong>Command + F</strong></td>
 </tr>
-<tr> 
-<td>Go to the given line</td> 
+<tr>
+<td>Go to the given line</td>
                <td><strong>Ctrl + L</strong></td>
                <td><strong>Ctrl + L</strong></td>
                <td><strong>Command + L</strong></td>
 </tr>
-<tr> 
+<tr>
 <td>Go to the top line</td>
                <td><strong>Ctrl + Home</strong></td>
                <td><strong>Ctrl + Home</strong></td>
                <td><strong>Command + Home</strong></td>
 </tr>
-<tr> 
-<td>Go to the bottom line</td> 
+<tr>
+<td>Go to the bottom line</td>
                <td><strong>Ctrl + End</strong></td>
                <td><strong>Ctrl + End</strong></td>
                <td><strong>Command + End</strong></td>
diff --git a/org.tizen.studio/html/common_tools/log_view.htm b/org.tizen.studio/html/common_tools/log_view.htm
index c0a4d66..e29fb49 100644 (file)
--- a/org.tizen.studio/html/common_tools/log_view.htm
+++ b/org.tizen.studio/html/common_tools/log_view.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Checking Logs with Log View</title>  
+       <title>Checking Logs with Log View</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -36,7 +36,7 @@
 
 <div id="container"><div id="contents"><div class="content">
  <h1>Checking Logs with Log View</h1>
- 
+
 <p>This topic explains how to insert logging methods to your code and check the logs of your application in the <strong>Log</strong> view.</p>
 
 <h2 id="view">Viewing Logs in Log Tabs</h2>
@@ -44,9 +44,9 @@
 <p>By default, the <strong>Log</strong> view is located at the bottom of the <strong>Native</strong> perspective. If you want to open the <strong>Log</strong> view manually, go to <strong>Window &gt; Show View &gt; Other &gt; Log</strong> in the Tizen Studio menu.</p>
 <p>The <strong>Log</strong> view helps you debug your application by capturing all the events logged by the platform and your application. The <strong>Log</strong> view shows the logs through the <a href="../../../org.tizen.guides/html/native/error/system_logs_n.htm">dlog logging service</a>. The service consists of the dlogutil and dlog library. You can also see logs with the <code>dlogutil</code> command in the CLI environment, and create log entries with the dlog library.</p>
 
-<p align="center"><strong>Figure: Log view</strong></p> 
-<p align="center"><img alt="Log view" src="../images/log_view.png" /></p> 
- 
+<p align="center"><strong>Figure: Log view</strong></p>
+<p align="center"><img alt="Log view" src="../images/log_view.png" /></p>
+
 <h3>Creating a Log Message</h3>
 <p>You can create a log message in your application with the dlog library. Before using the dlog library, make sure you know which priorities and tags to use and how to send the message to the log device. With appropriate properties and tags, it is easy to filter and check the messages.</p>
 <p>For more information, see the <a href="../../../org.tizen.guides/html/native/error/system_logs_n.htm">System Logs</a> guide.</p>
@@ -77,11 +77,11 @@
 <li><strong>Message</strong>: log message</li>
 </ul>
 
-<p align="center"><strong>Figure: Log table fields</strong></p> 
-<p align="center"><img alt="Log view" src="../images/log_view_fields.png" /></p> 
- 
+<p align="center"><strong>Figure: Log table fields</strong></p>
+<p align="center"><img alt="Log view" src="../images/log_view_fields.png" /></p>
+
 <p>In the log table, you have the following options and functions:</p>
- 
+
 <ul>
 <li>Log level filtering option
 <p>In the <strong>Log</strong> view, you can filter the log messages using the <strong>V</strong> (verbose), <strong>D</strong> (debug), <strong>I</strong> (info), <strong>W</strong> (warning), <strong>E</strong> (error), and <strong>F</strong> (fatal) buttons to show specific log messages suitable to the selected type.</p></li>
@@ -95,7 +95,7 @@
 <p>You can export the  current log messages in the log tab and save them as a log file by clicking the export the log icon (<img alt="Export icon" src="../images/log_view_icon_export.png" />).</p>
 </li></ul>
 
- 
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/common_tools/smart_development_bridge.htm b/org.tizen.studio/html/common_tools/smart_development_bridge.htm
index 65235a2..9027060 100644 (file)
--- a/org.tizen.studio/html/common_tools/smart_development_bridge.htm
+++ b/org.tizen.studio/html/common_tools/smart_development_bridge.htm
@@ -48,7 +48,7 @@
                </li>
                <li>The SDB supplies basic commands for application development, such as file transfer, remote shell command, port forwarding for a debugger, viewing, filtering, and controlling target log output.
                </li>
-               
+
        </ul>
 <p>The SDB is a client-server program that consists of a client, daemon, and server:</p>
        <ul>
@@ -122,7 +122,7 @@
 </tr>
 <tr>
        <td><code>forward &lt;local&gt; &lt;remote&gt;</code></td>
-       <td>Sets up requests&#39; arbitrary port forwarding from the host&#39;s local port to the target&#39;s remote port.</td>
+       <td>Sets up requests' arbitrary port forwarding from the host's local port to the target's remote port.</td>
 </tr>
 <tr>
        <td><code>dlog [option] [&lt;filter&gt;]</code></td>
@@ -173,7 +173,7 @@
 <p>The following snippet shows an example of the command output:</p>
 <pre class="prettyprint">
 &gt; sdb devices
-List of devices attached 
+List of devices attached
 emulator-26100    device    myemulator1
 emulator-26200    device    myemulator2
 </pre>
@@ -242,7 +242,7 @@ ls, rm, mv, cd, cp, mkdir, touch, echo, tar, grep, cat, chmod, rpm, find, uname,
 <p>GDB in a host connects to localhost:26102:</p>
 <pre class="prettyprint">
 &gt; gdb hellotizen
-... 
+...
 (gdb) target remote localhost:26102
 </pre>
 <h2 id="controlling_device">Controlling Device Log Output</h2>
diff --git a/org.tizen.studio/html/cover_page.htm b/org.tizen.studio/html/cover_page.htm
index db4dd07..0dae565 100644 (file)
--- a/org.tizen.studio/html/cover_page.htm
+++ b/org.tizen.studio/html/cover_page.htm
@@ -16,12 +16,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="images/mobile_s_wn.png"/> <img alt="Wearable" src="images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
diff --git a/org.tizen.studio/html/download/1_0_1_release_notes.htm b/org.tizen.studio/html/download/1_0_1_release_notes.htm
index aef4458..1f5e9e5 100644 (file)
--- a/org.tizen.studio/html/download/1_0_1_release_notes.htm
+++ b/org.tizen.studio/html/download/1_0_1_release_notes.htm
@@ -30,7 +30,7 @@
 
 <ul><li>Release Date: Oct 28, 2016</li></ul>
 
-<h2>IDE and Tools</h2> 
+<h2>IDE and Tools</h2>
 
 <h3>New Features</h3>
 
@@ -82,7 +82,7 @@
 </li>
 <li>Emulator
        <ul>
-       <li>Support has been added for Google Maps&#39; search box in the location card.</li>
+       <li>Support has been added for Google Maps' search box in the location card.</li>
        </ul>
 </li>
 <li>Dynamic Analyzer
@@ -101,7 +101,7 @@
 <li>Installer, Package Manager, and Uninstaller
        <ul>
        <li>Some texts in the Package Manager info dialog were displayed in a different font setting on Windows&reg;. This issue has been fixed.</li>
-       <li>Texts were cut when the font size was set to &quot;Large&quot; on Windows&reg;. This issue has been fixed.</li>
+       <li>Texts were cut when the font size was set to "Large" on Windows&reg;. This issue has been fixed.</li>
        </ul>
 </li>
 <li>Native UI Builder
@@ -117,7 +117,7 @@
 </li>
 <li>CLI and SDB
        <ul>
-       <li>When the Remote Device Manager displayed the Gear device connected over Wi-Fi, the device name was shown as &quot;unknown&quot; due to the SDB internal error. This issue has been fixed.</li>
+       <li>When the Remote Device Manager displayed the Gear device connected over Wi-Fi, the device name was shown as "unknown" due to the SDB internal error. This issue has been fixed.</li>
        <li>The bug, which caused the Unity 5.4.x and 5.5.x project to fail to be packaged, has been fixed.</li>
        </ul>
 </li>
@@ -155,7 +155,7 @@
 </li>
 <li>Native UI Builder
        <ul>
-       <li>If the WYSIWYG editor of the Native UI Builder for Windows&reg; runs over 12 hours, your computer slows down because of the editor&#39;s high memory usage. To solve the problem, restart the Tizen Studio.</li>
+       <li>If the WYSIWYG editor of the Native UI Builder for Windows&reg; runs over 12 hours, your computer slows down because of the editor's high memory usage. To solve the problem, restart the Tizen Studio.</li>
        </ul>
 </li>
 <li>Emulator
@@ -163,13 +163,13 @@
        <li>Ubuntu sometimes stops responding for a few seconds after closing the Emulator Manager. This issue is related to an IBus (Intelligent Input Bus) bug. When the issue occurs, restart the ibus-daemon by entering the <code>ibus-daemon –drx</code> command at the command prompt, and use another framework, such as uim and fcitx, for multilingual input.</li>
        <li>To use the Tizen emulator, install an Intel VTx supported by the CPU, and the latest version of the graphic card driver provided by the vendor. Check the prerequisites for the Tizen emulator from <a href="https://developer.tizen.org/development/tizen-studio/download/installing-tizen-studio/prerequisites" target="_blank">Prerequisites for the Tizen Studio</a>.
                <ul>
-               <li>If the host machine is using Nvidia Optimus&trade; technology on either Ubuntu or Windows&reg;, you must set the Tizen emulator to run with your Nvidia&reg; graphics card. In case of Ubuntu, check the bumblebee project (<a href="https://wiki.ubuntu.com/Bumblebee" target="_blank">https://wiki.ubuntu.com/Bumblebee</a>). In case of Windows&reg;, select &quot;High Speed NVIDIA Processor&quot; as &quot;Preferred Graphics processor&quot; in the Nvidia&reg; control panel.</li>
+               <li>If the host machine is using Nvidia Optimus&trade; technology on either Ubuntu or Windows&reg;, you must set the Tizen emulator to run with your Nvidia&reg; graphics card. In case of Ubuntu, check the bumblebee project (<a href="https://wiki.ubuntu.com/Bumblebee" target="_blank">https://wiki.ubuntu.com/Bumblebee</a>). In case of Windows&reg;, select "High Speed NVIDIA Processor" as "Preferred Graphics processor" in the Nvidia&reg; control panel.</li>
                <li>On Ubuntu, if the graphics driver is out-of-date, your Ubuntu desktop session can be occasionally logged out when launching the Emulator Manager, or the emulator skin can be drawn improperly. Check the prerequisites and upgrade to the latest graphics driver.</li>
                </ul>
        </li>
        <li>On Ubuntu 14.04, a shortcut menu can sometimes appear transparent.</li>
        <li>On Windows&reg;, depending on your OS theme (such as Non-Aero themes and Windows XP themes), a display surface can be erased for a while if the emulator window is covered with another window. If you click the emulator window, the display surface runs correctly again.</li>
-       <li>On Windows&reg;, if a &#39;failed to allocate memory&#39; error occurs while executing the emulator, try the following:
+       <li>On Windows&reg;, if a 'failed to allocate memory' error occurs while executing the emulator, try the following:
                <ul>
                <li>Close some other programs and try to launch the emulator again.</li>
                <li>If the RAM size is set to 768 or 1024 MB for the VM in the Emulator Manager, change it to 512 MB.</li>
diff --git a/org.tizen.studio/html/download/1_0_release_notes.htm b/org.tizen.studio/html/download/1_0_release_notes.htm
index e82f65e..5d976df 100644 (file)
--- a/org.tizen.studio/html/download/1_0_release_notes.htm
+++ b/org.tizen.studio/html/download/1_0_release_notes.htm
@@ -30,7 +30,7 @@
 
 <ul><li>Release Date: Sep 1, 2016</li></ul>
 
-<h2>IDE and Tools</h2> 
+<h2>IDE and Tools</h2>
 
 <h3>New Features</h3>
 
@@ -53,7 +53,7 @@
        <li>The project wizard has been changed and improved.</li>
        <li>The Configuration (for Web) and Manifest (for native) Editors have been changed and improved.</li>
        <li>The Certificate Manager has been introduced to easily create and manage a certificate profile.  The IDE provides a default certificate profile to develop faster without creating an additional certificate.</li>
-       <li>The default font in the editing views is changed to &quot;Eco Sans Mono&quot;, which shows characters more lucidly in the same screen size.</li>
+       <li>The default font in the editing views is changed to "Eco Sans Mono", which shows characters more lucidly in the same screen size.</li>
        <li>Support to develop a Web widget application has been added for the wearable profile.</li>
        <li>The Dropdown Target Combo has been inserted into the top trim bar of the workbench windows. With this, you can easily launch your projects on a device.</li>
        <li>Support to develop Tizen 2.3.2-based applications has been added.</li>
@@ -118,7 +118,7 @@
        <ul>
        <li>Unnecessary Eclipse plugins, such as JDT, PDE, mylin, birt, and egit, have been removed. Consequently, the required disk space for installing the IDE has been decreased about 100 MiB.</li>
        <li>The new UX has been applied to the <strong>Preference</strong> and <strong>Properties</strong> dialogs. Various abundant items have been removed for simplicity.</li>
-       <li>The <code>/home/developer/sdk_tools/lib</code> directory has been excluded in the linking reference of the native project&#39;s <code>-rpath</code> option.</li>
+       <li>The <code>/home/developer/sdk_tools/lib</code> directory has been excluded in the linking reference of the native project's <code>-rpath</code> option.</li>
        </ul>
 </li>
 <li>Native UI Builder
@@ -172,7 +172,7 @@
        </li>
        <li>The event injection scenario has been changed. The UX of the Emulator Control Panel (ECP) has been renewed and improved:
                <ul>
-               <li>To improve the user&#39;s concentration on the values of an event injection device, the UX has been designed with a card selection style.</li>
+               <li>To improve the user's concentration on the values of an event injection device, the UX has been designed with a card selection style.</li>
                </ul>
        </li>
        </ul>
@@ -194,7 +194,7 @@
 <ul>
 <li>Web IDE and Native IDE
        <ul>
-       <li>If JRE 1.8 was installed on your computer and you selected <strong>IDE &gt; Help &gt; Help Contents</strong>, the &quot;HTTP ERROR:500&quot; message sometimes appeared in the Help page due to the Eclipse Kepler bug. This issue has been fixed.</li>
+       <li>If JRE 1.8 was installed on your computer and you selected <strong>IDE &gt; Help &gt; Help Contents</strong>, the "HTTP ERROR:500" message sometimes appeared in the Help page due to the Eclipse Kepler bug. This issue has been fixed.</li>
        <li>Only on Windows&reg;, if the project had a file with its name containing a non-ASCII character, the project packaging sometimes failed. This issue has been fixed.</li>
        </ul>
 </li>
@@ -235,7 +235,7 @@
 <li>Installer, Package Manager, and Uninstaller
        <ul>
        <li>If the SDK Update Notification appears when you start the Tizen IDE or emulator on Mac OS&reg; X, a terminal (<code>shell.exec</code>) icon can appear on the dock for a few seconds.</li>
-       <li>If there is a multibyte character in the Tizen SDK installation path, some development packages have a difficulty in finding the installed SDK&#39;s location when they are working.</li>
+       <li>If there is a multibyte character in the Tizen SDK installation path, some development packages have a difficulty in finding the installed SDK's location when they are working.</li>
        </ul>
 </li>
 <li>Web IDE
@@ -252,7 +252,7 @@
 <li>Native UI Builder
        <ul>
        <li>When the WYSIWYG editor of the Native UI Builder for Windows&reg; is running, a project deletion does not work properly. To solve the problem, close the editor.</li>
-       <li>If the WYSIWYG editor of the Native UI Builder for Windows&reg; runs over 12 hours, your computer slows down because of the editor&#39;s high memory usage. To solve the problem, restart the Tizen IDE.</li>
+       <li>If the WYSIWYG editor of the Native UI Builder for Windows&reg; runs over 12 hours, your computer slows down because of the editor's high memory usage. To solve the problem, restart the Tizen IDE.</li>
        </ul>
 </li>
 <li>EDC Editor
@@ -266,13 +266,13 @@
        <li>Ubuntu sometimes stops responding for a few seconds after closing the Emulator Manager. This issue is related to an IBus (Intelligent Input Bus) bug. When the issue occurs, restart the ibus-daemon by entering the <code>ibus-daemon –drx</code> command at the command prompt, and use another framework, such as uim and fcitx, for multilingual input.</li>
        <li>To use the Tizen emulator, install an Intel VTx supported by the CPU, and the latest version of the graphic card driver provided by the vendor. Check the prerequisites for the Tizen emulator from <a href="https://developer.tizen.org/development/tools/download/installing-sdk/prerequisites" target="_blank">Prerequisites for the Tizen SDK</a>.
                <ul>
-               <li>If the host machine is using Nvidia Optimus&trade; technology on either Ubuntu or Windows&reg;, you must set the Tizen emulator to run with your Nvidia&reg; graphics card. In case of Ubuntu, check the bumblebee project (<a href="https://wiki.ubuntu.com/Bumblebee" target="_blank">https://wiki.ubuntu.com/Bumblebee</a>). In case of Windows&reg;, select &quot;High Speed NVIDIA Processor&quot; as &quot;Preferred Graphics processor&quot; in the Nvidia&reg; control panel.</li>
+               <li>If the host machine is using Nvidia Optimus&trade; technology on either Ubuntu or Windows&reg;, you must set the Tizen emulator to run with your Nvidia&reg; graphics card. In case of Ubuntu, check the bumblebee project (<a href="https://wiki.ubuntu.com/Bumblebee" target="_blank">https://wiki.ubuntu.com/Bumblebee</a>). In case of Windows&reg;, select "High Speed NVIDIA Processor" as "Preferred Graphics processor" in the Nvidia&reg; control panel.</li>
                <li>On Ubuntu, if the graphics driver is out-of-date, your Ubuntu desktop session can be occasionally logged out when launching the Emulator Manager, or the emulator skin can be drawn improperly. Check the prerequisites and upgrade to the latest graphics driver.</li>
                </ul>
        </li>
        <li>On Ubuntu 14.04, a shortcut menu can sometimes appear transparent.</li>
        <li>On Windows&reg;, depending on your OS theme (such as Non-Aero themes and Windows XP themes), a display surface can be erased for a while if the emulator window is covered with another window. If you click the emulator window, the display surface runs correctly again.</li>
-       <li>On Windows&reg;, if a &#39;failed to allocate memory&#39; error occurs while executing the emulator, try the following:
+       <li>On Windows&reg;, if a 'failed to allocate memory' error occurs while executing the emulator, try the following:
                <ul>
                <li>Close some other programs and try to launch the emulator again.</li>
                <li>If the RAM size is set to 768 or 1024 MB for the VM in the Emulator Manager, change it to 512 MB.</li>
diff --git a/org.tizen.studio/html/download/1_1_0_release_notes.htm b/org.tizen.studio/html/download/1_1_0_release_notes.htm
index 7138294..fc156ab 100644 (file)
--- a/org.tizen.studio/html/download/1_1_0_release_notes.htm
+++ b/org.tizen.studio/html/download/1_1_0_release_notes.htm
@@ -30,7 +30,7 @@
 
 <ul><li>Release Date: Jan 18, 2017</li></ul>
 
-<h2>IDE and Tools</h2> 
+<h2>IDE and Tools</h2>
 
 <h3>New Features</h3>
 
@@ -136,7 +136,7 @@
     <li><strong>Persistent Allocations</strong> table is hidden by default.</li>
     <li>Filter and search functionality is available for all plain tables.</li>
     <li>Table column resize behavior has been improved.</li>
-    <li>New &quot;Preparing for trace&quot; life-cycle state has been added.</li>
+    <li>New "Preparing for trace" life-cycle state has been added.</li>
     <li>New <code>version</code> command has been added for the CLI.</li>
     <li>UI for empty tables has been unified.</li>
        </ul>
@@ -156,7 +156,7 @@
 
 <li>Native UI Builder
        <ul>
-    <li>When the WYSIWYG editor of the Native UI Builder for Windows&reg; ran over 12 hours, your computer slowed down because of the editor&#39;s high memory usage. This issue has been fixed.</li>
+    <li>When the WYSIWYG editor of the Native UI Builder for Windows&reg; ran over 12 hours, your computer slowed down because of the editor's high memory usage. This issue has been fixed.</li>
        </ul>
 </li>
 
@@ -200,7 +200,7 @@
 
 <li>Native Component Designer
        <ul>
-    <li>The vector-type &quot;part&quot; is not supported. You cannot see the vector image and change the SVG file.</li>
+    <li>The vector-type "part" is not supported. You cannot see the vector image and change the SVG file.</li>
        <li>Playing sound is not supported on Windows&reg; or Mac OS&reg; X.</li>
        </ul>
 </li>
@@ -209,13 +209,13 @@
        <li>Ubuntu sometimes stops responding for a few seconds after closing the Emulator Manager. This issue is related to an IBus (Intelligent Input Bus) bug. When the issue occurs, restart the ibus-daemon by entering the <code>ibus-daemon -drx</code> command at the command prompt, and use another framework, such as uim and fcitx, for multilingual input.</li>
        <li>To use the Tizen emulator, install an Intel VTx supported by the CPU, and the latest version of the graphic card driver provided by the vendor. Check the prerequisites for the Tizen emulator from <a href="https://developer.tizen.org/development/tizen-studio/download/installing-tizen-studio/prerequisites#emulator" target="_blank">Prerequisites for the Tizen Studio</a>.
                <ul>
-               <li>If the host machine is using Nvidia Optimus&trade; technology on either Ubuntu or Windows&reg;, you must set the Tizen emulator to run with your Nvidia&reg; graphics card. In case of Ubuntu, check the bumblebee project (<a href="https://wiki.ubuntu.com/Bumblebee" target="_blank">https://wiki.ubuntu.com/Bumblebee</a>). In case of Windows&reg;, select &quot;High Speed NVIDIA Processor&quot; as &quot;Preferred Graphics processor&quot; in the Nvidia&reg; control panel.</li>
+               <li>If the host machine is using Nvidia Optimus&trade; technology on either Ubuntu or Windows&reg;, you must set the Tizen emulator to run with your Nvidia&reg; graphics card. In case of Ubuntu, check the bumblebee project (<a href="https://wiki.ubuntu.com/Bumblebee" target="_blank">https://wiki.ubuntu.com/Bumblebee</a>). In case of Windows&reg;, select "High Speed NVIDIA Processor" as "Preferred Graphics processor" in the Nvidia&reg; control panel.</li>
                <li>On Ubuntu, if the graphics driver is out-of-date, your Ubuntu desktop session can be occasionally logged out when launching the Emulator Manager, or the emulator skin can be drawn improperly. Check the prerequisites and upgrade to the latest graphics driver.</li>
                </ul>
        </li>
        <li>On Ubuntu 14.04, a shortcut menu can sometimes appear transparent.</li>
        <li>On Windows&reg;, depending on your OS theme (such as Non-Aero themes and Windows XP themes), a display surface can be erased for a while if the emulator window is covered with another window. If you click the emulator window, the display surface runs correctly again.</li>
-       <li>On Windows&reg;, if a &#39;failed to allocate memory&#39; error occurs while executing the emulator, try the following:
+       <li>On Windows&reg;, if a 'failed to allocate memory' error occurs while executing the emulator, try the following:
                <ul>
                <li>Close some other programs and try to launch the emulator again.</li>
                <li>If the RAM size is set to 768 or 1024 MB for the VM in the Emulator Manager, change it to 512 MB.</li>
diff --git a/org.tizen.studio/html/download/advanced_configuration.htm b/org.tizen.studio/html/download/advanced_configuration.htm
index 6ced1e1..baa1a29 100644 (file)
--- a/org.tizen.studio/html/download/advanced_configuration.htm
+++ b/org.tizen.studio/html/download/advanced_configuration.htm
@@ -75,13 +75,13 @@
 \r
 <ol>\r
 <li>Type the full path of the SDK image file in the <strong>Package Repository</strong> box, or click <img alt="Browse" src="../images/advanced_conf_browse.png" /> next to the combo box to open the file browser.\r
-<p>In the file browser, select the SDK image file, and click <strong>OK</strong>. When you select the image file, the repository&#39;s origin information of the image is displayed below the combo box.</p></li>\r
+<p>In the file browser, select the SDK image file, and click <strong>OK</strong>. When you select the image file, the repository's origin information of the image is displayed below the combo box.</p></li>\r
 <li>Click <strong>OK</strong> to confirm your setting.</li>\r
 </ol>\r
 \r
 <div class="note">\r
     <strong>Note</strong>\r
-    If the SDK image&#39;s origin repository URL or distribution ID is different compared to the current packages&#39; URL or distribution ID, entire packages are removed to guarantee system integrity. Pay attention to that before installing or updating packages with an image file.\r
+    If the SDK image's origin repository URL or distribution ID is different compared to the current packages' URL or distribution ID, entire packages are removed to guarantee system integrity. Pay attention to that before installing or updating packages with an image file.\r
 </div>\r
   \r
 <h2 id="extension">Configuring the Extension SDK Repository</h2>\r
diff --git a/org.tizen.studio/html/download/download.htm b/org.tizen.studio/html/download/download.htm
index 7c5e3f6..b4a1f76 100644 (file)
--- a/org.tizen.studio/html/download/download.htm
+++ b/org.tizen.studio/html/download/download.htm
@@ -16,12 +16,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
diff --git a/org.tizen.studio/html/download/hardware_accelerated_execution_manager.htm b/org.tizen.studio/html/download/hardware_accelerated_execution_manager.htm
index 85aaa7d..6c84313 100644 (file)
--- a/org.tizen.studio/html/download/hardware_accelerated_execution_manager.htm
+++ b/org.tizen.studio/html/download/hardware_accelerated_execution_manager.htm
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -41,9 +41,9 @@
 <p>This topic describes how to install the HAXM on your <a href="#on_Windows">Windows&reg;</a> or <a href="#on_MacOS">Mac OS&reg;</a> development system.</p>
 
 <p>Hardware requirements:</p>
-<ul> 
-   <li>Intel processor with support for VT-x, EM64T, and Execute Disable Bit</li> 
-   <li>At least 1 GB of available memory (2 GB or more is preferred)</li> 
+<ul>
+   <li>Intel processor with support for VT-x, EM64T, and Execute Disable Bit</li>
+   <li>At least 1 GB of available memory (2 GB or more is preferred)</li>
 </ul>
 
 <div class="note">
@@ -75,22 +75,22 @@
  </tbody></table>
 
 <p>To install Intel&reg; HAXM:</p>
-<ol> 
+<ol>
    <li>Run the downloaded installer and accept the UAC prompt.
-   
+
    <p align="center"> <img alt="UAC prompt" src="../images/hardware_uac_prompt.png" /> </p>
-   
-   </li> 
+
+   </li>
    <li>Click <strong>Next</strong> to start the installation.
-   
+
    <p align="center"> <img alt="Start installation" src="../images/hardware_start_instal.png" /> </p>
    <p>You can access the documentation at any time by clicking <strong>Intel&reg; HAXM Documentation</strong>.</p>
    </li>
    <li>Adjust the amount of RAM to be allocated to Intel&reg; HAXM.
    <p align="center"> <img alt="Adjust RAM" src="../images/hardware_ram.png" /> </p>
-   
+
    <p>The installer also functions as a configuration tool for Intel&reg; HAXM. To change the memory settings later on, run the installer again.</p>
-   
+
 <div class="note">
     <strong>Note</strong>
     If you change the Intel&reg; HAXM memory settings for the emulator, you must restart the Intel&reg; HAXM and the emulator. Currently running emulator continues to use the previous memory setting.
@@ -109,13 +109,13 @@
 <pre class="prettyprint">
 sc query intelhaxm
 </pre>
-<p>If Intel&reg; HAXM is working, the command displays a status message indicating that the state is &quot;4 RUNNING&quot;.</p>
+<p>If Intel&reg; HAXM is working, the command displays a status message indicating that the state is "4 RUNNING".</p>
 <p align="center"> <img alt="4 RUNNING status" src="../images/hardware_4_running.png" /> </p>
 
 <h3>Starting and Stopping Intel&reg; HAXM</h3>
 <p>To start or stop Intel&reg; HAXM, open the Command Prompt window with administrator privileges and execute one of the following commands:</p>
 
-<ul> 
+<ul>
    <li>Start HAXM: <code>sc start intelhaxm</code></li>
    <li>Stop HAXM: <code>sc stop intelhaxm</code></li>
 </ul>
@@ -137,7 +137,7 @@ sc query intelhaxm
 <h3>Troubleshooting</h3>
 <p>If you meet an installation failure because of hardware requirements, check the BIOS/OS settings:</p>
 
-<ul> 
+<ul>
    <li>Make sure <strong>VT</strong> is enabled in BIOS.</li>
    <li>Make sure <strong>Execute Disable Bit</strong> is enabled in BIOS.</li>
    <li>Make sure <strong>Data Execution Prevention</strong> is enabled in Windows&reg;. On the Windows&reg; platform, click <strong>Control Panel &gt; System &gt; Advanced system settings &gt; Advanced tab &gt; Performance section</strong>, <strong>Options</strong> (or <strong>Settings</strong>), and <strong>Data Execution Prevention</strong>. Make sure that <strong>DEP</strong> is enabled.</li>
@@ -174,7 +174,7 @@ sc query intelhaxm
  </tbody></table>
 
 <p>To install Intel&reg; HAXM:</p>
-<ol> 
+<ol>
    <li>Open the downloaded DMG file and run the installer inside it.</li>
    <li>Click <strong>Continue</strong> to start the installation.
    <p align="center"> <img alt="Start installation" src="../images/hardware_os_start_instal.png" /> </p>
diff --git a/org.tizen.studio/html/download/installing_sdk.htm b/org.tizen.studio/html/download/installing_sdk.htm
index 1f6d592..50f1c6e 100644 (file)
--- a/org.tizen.studio/html/download/installing_sdk.htm
+++ b/org.tizen.studio/html/download/installing_sdk.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Installing Tizen Studio</title>  
+       <title>Installing Tizen Studio</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -54,7 +54,7 @@
 <p>Accepting the Tizen Studio software license is the first step in installing the Tizen Studio. Since the license contains important legal notifications for using the Tizen Studio, it is recommended to read it line by line, and click <strong>Accept</strong> only when you agree with the license statement.
 </p>
 
-<p align="center"><strong>Figure: Tizen Studio License Agreement</strong></p> 
+<p align="center"><strong>Figure: Tizen Studio License Agreement</strong></p>
 <p align="center"><img alt="Tizen Studio License Agreement" src="../images/install_sdk_license.png" /></p>
 
 <h2 id="Configuring">Configuring the Installation Directory</h2>
@@ -62,7 +62,7 @@
 <p>Basically, the installer is installed in the location specified in the installation settings step. You can install the Tizen Studio and its data directory where you want. To change the directory, click <strong>Browse</strong> and specify a new directory. If the new directory is valid, click <strong>Install</strong> at the bottom of the installer.</p>
 
 
-<p align="center"><strong>Figure: Configuring the installation directory</strong></p> 
+<p align="center"><strong>Figure: Configuring the installation directory</strong></p>
 <p align="center"><img alt="Configuring the installation directory" src="../images/install_sdk_directory.png" /></p>
 
 <h2 id="Installing">Installing the Tizen Studio</h2>
@@ -139,7 +139,7 @@ web-cli_Tizen_Studio_&lt;version&gt; [options] [&lt;directory path&gt;]
     If you want to develop a native application on the CLI, you must install the Native App Development platform and tools using the CLI Package Manager.
 </div>
 
-<h2 id="cliadd">Installing Additional Packages with the CLI Package Manager</h2>  
+<h2 id="cliadd">Installing Additional Packages with the CLI Package Manager</h2>
 
 <p>Run the CLI Package Manager with the install command using the following syntax:</p>
 
@@ -183,7 +183,7 @@ package-manager-cli show-pkgs
 </pre></td>
  </tr>
  </tbody></table>
- 
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/download/prerequisites.htm b/org.tizen.studio/html/download/prerequisites.htm
index d8fe088..1b87a05 100644 (file)
--- a/org.tizen.studio/html/download/prerequisites.htm
+++ b/org.tizen.studio/html/download/prerequisites.htm
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -39,9 +39,9 @@
 
 <div id="container"><div id="contents"><div class="content">
  <h1>Prerequisites for the Tizen Studio</h1>
- 
+
 <p>Check the following prerequisites before attempting to install the Tizen Studio.</p>
- 
+
 <h2 id="system">OS and System Requirements</h2>
 <p>The following table lists the supported operating systems and hardware requirements for the Tizen Studio.</p>
 
@@ -157,7 +157,7 @@
     <strong>Note</strong>
 <ul>
        <li>If the host machine is using the Nvidia Optimus&trade; technology, the emulator works with the on-board graphics card. To prevent this, either disable the Nvidia Optimus&trade; technology, or set the emulator to run with the external Nvidia graphics card.</li>
-       <li>Integrated graphic cards inside Intel&#39;s Q33/Q35/Q43/Q45 motherboards are not supported.</li>
+       <li>Integrated graphic cards inside Intel's Q33/Q35/Q43/Q45 motherboards are not supported.</li>
        <li>First generation Intel HD Graphics is not supported.</li>
 </ul>
 </div>
@@ -167,7 +167,7 @@
             <td rowspan="2">Driver</td>
             <td colspan="3">You must update to the latest vendor-provided version of the graphic card driver for OpenGL ES acceleration.</td>
                </tr>
-        <tr>   
+        <tr>
                        <td>Check and install the necessary drivers in the <strong>Control Panel &gt; System and Security &gt; Windows Update</strong>.
                        </td>
                        <td>-</td>
@@ -177,9 +177,9 @@
         </tr>
         <tr>
             <td rowspan="2">Webcam</td>
-            <td colspan="3">To use the emulator with your computer&#39;s webcam, the webcam must support the USB Video Class (UVC) driver. The following image format requirements apply to each OS:</td>
+            <td colspan="3">To use the emulator with your computer's webcam, the webcam must support the USB Video Class (UVC) driver. The following image format requirements apply to each OS:</td>
                </tr>
-        <tr>   
+        <tr>
                        <td>YUYV or MJPEG</td>
                        <td>RGB24 or YUY2</td>
                        <td>UYYY, YYU420, YUY420, or YUYY</td>
diff --git a/org.tizen.studio/html/download/tizen_studio_migration_guide.htm b/org.tizen.studio/html/download/tizen_studio_migration_guide.htm
index e29a977..1ca31b3 100644 (file)
--- a/org.tizen.studio/html/download/tizen_studio_migration_guide.htm
+++ b/org.tizen.studio/html/download/tizen_studio_migration_guide.htm
@@ -16,12 +16,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -45,7 +45,7 @@
 
 <div class="note">
     <strong>Note</strong>
-<ul> 
+<ul>
 <li>If the Tizen certificates (author and distributor) are removed during the uninstallation, you cannot issue the same ones again to update your existing applications. Back up your certificates!</li>
 <li>Your projects used in the Tizen SDK can be imported to the Tizen Studio. Do not uninstall the Tizen SDK before you have imported them to the Tizen Studio after a successful installation.</li>
 <li>Emulator images made in the Tizen SDK cannot be migrated to the Tizen Studio. After installing the Tizen Studio, you can make a new emulator for each platform.</li>
@@ -54,7 +54,7 @@
 
 <p>To migrate from the Tizen SDK to the Tizen Studio:</p>
 
-<ol> 
+<ol>
    <li>Back up your author and distributor certificates in the old Tizen SDK.</li>
    <li>Install the Tizen Studio, which includes development environments for the 2.3.0, 2.3.1, 2.3.2, and 2.4 platforms.</li>
    <li>Restore your certificates in the Tizen Studio.</li>
@@ -75,7 +75,7 @@
                <li><code>/home/&lt;user&gt;/&lt;TIZEN-SDK-DATA&gt;/keystore/distributor.p12</code></li>
        </ul>
 </li>
-<li>Windows&reg;: 
+<li>Windows&reg;:
        <ul>
                <li><code>C:\&lt;TIZEN-SDK-DATA&gt;\keystore\author.p12</code></li>
                <li><code>C:\&lt;TIZEN-SDK-DATA&gt;\keystore\distributor.p12</code></li>
@@ -91,7 +91,7 @@
 </div>
 
 <p>To install Tizen Studio:</p>
-<ol> 
+<ol>
    <li>Launch the Tizen Studio installer.
    <p align="center"> <img alt="Launch Tizen Studio installer" src="../images/migration_launch_installer.png" /> </p>
    </li>
@@ -102,7 +102,7 @@
    <p>If your default location is already in use, click the <strong>…</strong> button in the <strong>SDK location</strong> field, and select an empty location.</p>
    <p align="center"> <img alt="Set SDK and data location" src="../images/migration_sdk_datalocation.png" /> </p>
    </li>
-   <li>Launch the Package Manager to install additional development environment packages. 
+   <li>Launch the Package Manager to install additional development environment packages.
    <p>Select the checkbox and click <strong>Finish</strong> to launch the Tizen Studio Package Manager.</p>
    <p align="center"> <img alt="Installation complete" src="../images/migration_finish_instal.png" /> </p>
    </li>
@@ -115,7 +115,7 @@
 <h2 id="Restoring_Certificates">Restoring Certificates</h2>
 <p>If you already have both certificate files, you can import and use them to sign your application:</p>
 
-<ol> 
+<ol>
    <li>In the Tizen Studio menu, go to <strong>Tools &gt; Certificate Manager</strong>.
    </li>
    <li>Click the <strong>+</strong> button.
@@ -153,7 +153,7 @@
     These instructions assume that you want to import wearable 2.3.1 projects (created by the Tizen SDK) to the Tizen Studio.
 </div>
 
-<ol> 
+<ol>
    <li>Launch the Tizen Studio from <strong>Start &gt; Tizen Studio &gt; Tizen Studio</strong>.
    <p align="center"> <img alt="Launch Tizen Studio" src="../images/migration_launch_tizen.png" /> </p>
    </li>
@@ -195,7 +195,7 @@
                <li><code>/home/&lt;user&gt;/&lt;TIZEN_SDK_DATA&gt;</code></li>
        </ul>
 </li>
-<li>Windows&reg;: 
+<li>Windows&reg;:
        <ul>
                <li><code>C:\&lt;TIZEN_SDK&gt;</code></li>
                <li><code>C:\&lt;TIZEN_SDK_DATA&gt;</code></li>
diff --git a/org.tizen.studio/html/download/uninstalling_sdk.htm b/org.tizen.studio/html/download/uninstalling_sdk.htm
index a6dbf39..bb90ba4 100644 (file)
--- a/org.tizen.studio/html/download/uninstalling_sdk.htm
+++ b/org.tizen.studio/html/download/uninstalling_sdk.htm
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -47,7 +47,7 @@
 <h2 id="Selecting_the_Directories_to_Keep">Selecting the Directories to Keep</h2>
 <p>The first step is to select the components to uninstall. By unchecking the <strong>SDK data</strong> or <strong>Keystore</strong> components, you can keep the SDK data or keystore files in each directory for future re-use.</p>
 
-<p align="center"><strong>Figure: Uninstaller selections</strong></p> 
+<p align="center"><strong>Figure: Uninstaller selections</strong></p>
 <p align="center"> <img alt="Uninstaller selections" src="../images/uninstall_sdk_selection.png" /> </p>
 
 <h3>SDK Data Directory</h3>
@@ -59,7 +59,7 @@
 <h2 id="Uninstalling_the_Tizen_Studio">Uninstalling the Tizen Studio</h2>
 <p>Once you click <strong>Uninstall</strong>, the uninstaller removes all the platforms and tools that you have installed, as well as data and files you have created. Note that you cannot cancel the uninstallation or restore the files after the uninstallation. Thus, make sure to back up data and files before clicking <strong>Uninstall</strong>.</p>
 
-<p align="center"><strong>Figure: Uninstallation</strong></p> 
+<p align="center"><strong>Figure: Uninstallation</strong></p>
 <p align="center"> <img alt="Uninstallation" src="../images/uninstall_sdk_progress.png" /> </p>
 
 
diff --git a/org.tizen.studio/html/download/updating_sdk.htm b/org.tizen.studio/html/download/updating_sdk.htm
index b107d70..9707de5 100644 (file)
--- a/org.tizen.studio/html/download/updating_sdk.htm
+++ b/org.tizen.studio/html/download/updating_sdk.htm
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_wn.png"/> <img alt="Wearable" src="../images/wearable_s_wn.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -55,7 +55,7 @@
 <h3>Package Manager Structure</h3>
 <p>The Package Manager is composed of 3 main tabs: <strong>Main SDK</strong>, <strong>Extension SDK</strong>, and <strong>Progress</strong>.</p>
 
-<ul> 
+<ul>
    <li>In the <strong>Main SDK</strong> tab, you can manage platforms, emulators, and other advanced tools.</li>
    <li>In the <strong>Extension SDK</strong> tab, you can install and remove extension SDKs, such as the Certification Extension and other extra packages for platforms.</li>
    <li>In the <strong>Progress</strong> tab, you can monitor the progress of installing, removing, and updating packages. You can also cancel the process while the packages are installing or updating.</li>
@@ -74,7 +74,7 @@
    <li>On Ubuntu, select <strong>Dashboard Home &gt; Package Manager</strong>.</li>
 </ul>
 
-<p align="center"><strong>Figure: Package Manager main window</strong></p> 
+<p align="center"><strong>Figure: Package Manager main window</strong></p>
 <p align="center"><img alt="Package Manager main window" src="../images/updating_sdk_main.png" /></p>
 
 <h3>Looking Around the Package Manager</h3>
@@ -193,7 +193,7 @@ package-manager-cli update [--accept-license] [--no-java-check] [--proxy &lt;val
  <td>This option is only useful to update the Tizen Studio to the latest version after you downgraded it manually to an earlier version. Otherwise, the Package Manager updates it to the latest version with or without this option.</td>
  </tr>
  </tbody></table>
- 
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/index.htm b/org.tizen.studio/html/index.htm
index ebae3fd..b8f7edb 100644 (file)
--- a/org.tizen.studio/html/index.htm
+++ b/org.tizen.studio/html/index.htm
@@ -31,7 +31,7 @@
                                        <li><a href="download/prerequisites.htm">Prerequisites</a></li>
                                        <li><a href="download/updating_sdk.htm">Updating Tizen Studio</a></li>
                                        <li><a href="download/hardware_accelerated_execution_manager.htm">Hardware Accelerated Execution Manager</a></li>
-                               </ul>                   
+                               </ul>
                        </li>
                        <li><a href="download/tizen_studio_migration_guide.htm">Tizen Studio Migration Guide</a></li>
                        <li><a href="download/advanced_configuration.htm">Configuring the Package Manager</a></li>
@@ -67,13 +67,13 @@
                                                                <ul>
                                                                        <li><a href="native_tools/ui_project_migration_combi_n.htm">Combining Screens from Multiple Applications</a></li>
                                                                </ul>
-                                                       </li>   
+                                                       </li>
                                                </ul>
                                        </li>
                                        <li><a href="native_tools/edc_editor_n.htm">EDC Editor</a></li>
                                        <li><a href="native_tools/component_designer_n.htm">Component Designer</a></li>
                                </ul>
-                       </li>                   
+                       </li>
                        <li><a href="native_tools/cover_configure_n.htm">Configuring Your App</a>
                                <ul>
                                        <li><a href="native_tools/manifest_text_editor_n.htm">Manifest Text Editor</a>
@@ -84,10 +84,10 @@
                                        <li><a href="native_tools/resource_manager_n.htm">Resource Manager</a></li>
                                        <li><a href="native_tools/po_file_editor_n.htm">PO File Localization Editor</a></li>
                                </ul>
-                       </li>                   
+                       </li>
                        <li><a href="native_tools/cover_debug_n.htm">Debugging Your App</a>
                                <ul>
-                                       <li><a href="common_tools/log_view.htm">Log View</a></li>  
+                                       <li><a href="common_tools/log_view.htm">Log View</a></li>
                                        <li><a href="common_tools/da_overview.htm">Dynamic Analyzer</a>
                                                <ul>
                                                <li><a href="common_tools/da_common.htm">Common Tasks</a></li>
@@ -103,9 +103,9 @@
                                        <li><a href="native_tools/call_stack_view_n.htm">Call Stack View</a></li>
                                        <li><a href="native_tools/static_analyzer_n.htm">Static Analyzer</a></li>
                                        <li><a href="native_tools/valgrind_n.htm">Valgrind</a></li>
-                                       <li><a href="native_tools/t_trace_n.htm">T-trace</a></li>                       
+                                       <li><a href="native_tools/t_trace_n.htm">T-trace</a></li>
                                </ul>
-                       </li>                           
+                       </li>
                        <li><a href="native_tools/cover_run_test_n.htm">Running and Testing Your App</a>
                                <ul>
                                        <li><a href="common_tools/connection_explorer_view.htm">Connection Explorer View</a></li>
@@ -117,7 +117,7 @@
                                                        <li><a href="common_tools/emulator_features.htm">Extended Emulator Features</a></li>
                                                </ul>
                                        </li>
-                                       <li><a href="native_tools/unit_test_n.htm">Unit Test</a></li>                   
+                                       <li><a href="native_tools/unit_test_n.htm">Unit Test</a></li>
                                </ul>
                        </li>
                        <li><a href="common_tools/command_line_interface.htm">CLI</a>
@@ -140,7 +140,7 @@
                        <li><a href="web_tools/cover_code_w.htm">Writing and Editing Codes</a>
                                <ul>
                                        <li><a href="web_tools/web_editor_w.htm">Web Editor</a></li>
-                                       <li><a href="web_tools/live_editing_w.htm">Live Editing</a></li>                
+                                       <li><a href="web_tools/live_editing_w.htm">Live Editing</a></li>
                                        <li><a href="web_tools/content_assist_w.htm">Content Assist</a></li>
                                        <li><a href="web_tools/code_productivity_w.htm">Code Productivity</a></li>
                                        <li><a href="web_tools/rest_viewer_w.htm">REST Viewer</a></li>
@@ -148,16 +148,16 @@
                                        <li><a href="web_tools/privilege_checker_w.htm">Privilege Checker</a></li>
                                        <li><a href="web_tools/IDE_preferences_w.htm">Tizen Studio Web Preferences</a></li>
                                </ul>
-                       </li>                   
+                       </li>
                        <li><a href="web_tools/cover_configure_w.htm">Configuring Your App</a>
                                <ul>
                                        <li><a href="web_tools/config_editor_w.htm">Configuration Editor</a></li>
                                        <li><a href="web_tools/web_localization_w.htm">Web Localization</a></li>
                                </ul>
-                       </li>                   
+                       </li>
                        <li><a href="web_tools/cover_debug_w.htm">Debugging Your App</a>
                                <ul>
-                                       <li><a href="common_tools/log_view.htm">Log View</a></li>  
+                                       <li><a href="common_tools/log_view.htm">Log View</a></li>
                                        <li><a href="common_tools/da_overview.htm">Dynamic Analyzer</a>
                                                <ul>
                                                <li><a href="common_tools/da_common.htm">Common Tasks</a></li>
@@ -172,7 +172,7 @@
                                        <li><a href="web_tools/web_inspector_w.htm">Web Inspector</a></li>
                                        <li><a href="web_tools/js_analyzer_w.htm">JavaScript Analyzer</a></li>
                                </ul>
-                       </li>                           
+                       </li>
                        <li><a href="web_tools/cover_run_test_w.htm">Running and Testing Your App</a>
                                <ul>
                                        <li><a href="common_tools/connection_explorer_view.htm">Connection Explorer View</a></li>
@@ -184,7 +184,7 @@
                                                        <li><a href="common_tools/emulator_features.htm">Extended Emulator Features</a></li>
                                                </ul>
                                        </li>
-                                       <li><a href="web_tools/web_unit_test_tool_w.htm">Web Unit Test Tool</a></li>                    
+                                       <li><a href="web_tools/web_unit_test_tool_w.htm">Web Unit Test Tool</a></li>
                                </ul>
                        </li>
                        <li><a href="web_tools/web_simulator_w.htm">Using the Web Simulator</a>
diff --git a/org.tizen.studio/html/native_tools/call_stack_view_n.htm b/org.tizen.studio/html/native_tools/call_stack_view_n.htm
index f97af64..9413bfd 100644 (file)
--- a/org.tizen.studio/html/native_tools/call_stack_view_n.htm
+++ b/org.tizen.studio/html/native_tools/call_stack_view_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-  <title>Getting Crash Data from Call Stack View</title> 
- </head> 
+  <title>Getting Crash Data from Call Stack View</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
  <div id="toc-navigation">
@@ -28,23 +28,23 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Getting Crash Data from Call Stack View</h1> 
-  <p>The <strong>Call Stack</strong> view provides information about a crashed API, call stack, or debug message, when the application crashes while running. Though debugging tools give more detailed information in the debugging state, the <strong>Call Stack</strong> view is a useful tool in the running state.</p> 
-  <p>When the application crashes during running, the Tizen Studio creates a <code>*.cs</code> file in the <code>crash-info</code> folder under the current project and shows the <strong>Call Stack</strong> view automatically. The view can also be opened from the Tizen Studio menu by selecting <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Call Stack</strong>.</p> 
-  <p>The <strong>Call Stack</strong> view has 3 tabs:</p> 
-  <ul> 
+  <h1>Getting Crash Data from Call Stack View</h1>
+  <p>The <strong>Call Stack</strong> view provides information about a crashed API, call stack, or debug message, when the application crashes while running. Though debugging tools give more detailed information in the debugging state, the <strong>Call Stack</strong> view is a useful tool in the running state.</p>
+  <p>When the application crashes during running, the Tizen Studio creates a <code>*.cs</code> file in the <code>crash-info</code> folder under the current project and shows the <strong>Call Stack</strong> view automatically. The view can also be opened from the Tizen Studio menu by selecting <strong>Window &gt; Show View &gt; Other &gt; Tizen &gt; Call Stack</strong>.</p>
+  <p>The <strong>Call Stack</strong> view has 3 tabs:</p>
+  <ul>
    <li><strong>Header</strong>: Provides basic information about the crashed application. Select a specific information type from the left pane.
    <p align="center"><strong>Figure: Header tab</strong></p>
-   <p align="center"><img alt="Header tab" src="../images/callstack_header.png" /></p></li> 
+   <p align="center"><img alt="Header tab" src="../images/callstack_header.png" /></p></li>
    <li><strong>Call Stack Information</strong>: Traces call stack steps to find where the memory block has crashed. If you select a call stack item in the left pane, search result is shown in the right pane.
    <p align="center"><strong>Figure: Call Stack Information tab</strong></p>
-   <p align="center"><img alt="Call Stack Information tab" src="../images/callstack_info.png" /></p></li> 
+   <p align="center"><img alt="Call Stack Information tab" src="../images/callstack_info.png" /></p></li>
    <li><strong>Debug Message</strong>: Provides the latest debug messages and the filtering function similar to the <strong>Log</strong> view. You can search with keywords filtered by tag, pid, and message.
    <p align="center"><strong>Figure: Debug Message tab</strong></p>
-   <p align="center"><img alt="Debug Message tab" src="../images/callstack_debug.png" /></p></li> 
-  </ul> 
-  <p>The <strong>Call Stack</strong> view shows information only when the application crashes.</p>  
-  
+   <p align="center"><img alt="Debug Message tab" src="../images/callstack_debug.png" /></p></li>
+  </ul>
+  <p>The <strong>Call Stack</strong> view shows information only when the application crashes.</p>
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/native_tools/component_attributes_n.htm b/org.tizen.studio/html/native_tools/component_attributes_n.htm
index 597f9ed..55e6f83 100644 (file)
--- a/org.tizen.studio/html/native_tools/component_attributes_n.htm
+++ b/org.tizen.studio/html/native_tools/component_attributes_n.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Managing UI Component Attributes in layout.xml</title>  
+       <title>Managing UI Component Attributes in layout.xml</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -37,8 +37,8 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="ui_builder_n.htm">Building UIs with Components</a></li> 
-                       <li><a href="multiple_screen_n.htm">Supporting a UI for Multiple Screens</a></li> 
+                       <li><a href="ui_builder_n.htm">Building UIs with Components</a></li>
+                       <li><a href="multiple_screen_n.htm">Supporting a UI for Multiple Screens</a></li>
                </ul>
        </div>
 </div></div>
@@ -52,33 +52,33 @@
 
 <p>The <code>layout.xml</code> file has a hierarchical organization, which consists of XML elements. The tree structure in the following figure shows the relationship between the elements of the <code>layout.xml</code> file.</p>
 
-<p align="center"><strong>Figure: Elements in the layout.xml file</strong></p> 
+<p align="center"><strong>Figure: Elements in the layout.xml file</strong></p>
 <p align="center"><img alt="Elements in the layout.xml file" src="../images/component_attributes_layout_xml_elements.png"/></p>
 
 <p>The following example illustrates the content and structure of the <code>layout.xml</code> file. The usage format is <code>&lt;attribute_name=value&gt;</code>.</p>
 
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
+&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
 &lt;document&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;mscreen&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;configuration device=&quot;HD&quot; id=&quot;config1&quot; name=&quot;common&quot; orientation=&quot;portrait&quot; type=&quot;common&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;configuration orientation=&quot;landscape&quot; name=&quot;sd&quot; id=&quot;configuration1&quot; type=&quot;specific&quot; device=&quot;HD&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mscreen&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;views startup=&quot;view1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view id=&quot;view1&quot; indicator=&quot;true&quot; screen_orientation=&quot;full_sensor&quot; type=&quot;view&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;grid align_h=&quot;fill&quot; vsize_w=&quot;1000&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;grid1&quot; weight_h=&quot;1&quot; vsize_h=&quot;1000&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;49&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_w=&quot;210&quot; disable=&quot;false&quot; pack_x=&quot;406&quot; pack_y=&quot;219&quot; style=&quot;default&quot; id=&quot;button1&quot; text=&quot;Button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;event connection_wrapper=&quot;connection_view1_button1_onclicked&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function_name=&quot;view1_button1_onclicked&quot; signal=&quot;clicked&quot; target=&quot;view2&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;variation config_ref=&quot;configuration1&quot; visible=&quot;true&quot; pack_w=&quot;210&quot; pack_x=&quot;515&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_h=&quot;49&quot; pack_y=&quot;753&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/grid&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/view&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view indicator=&quot;true&quot; screen_orientation=&quot;full_sensor&quot; id=&quot;view2&quot; type=&quot;view&quot;&gt;&lt;/view&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;/views&gt;
+    &lt;mscreen&gt;
+        &lt;configuration device="HD" id="config1" name="common" orientation="portrait" type="common" /&gt;
+        &lt;configuration orientation="landscape" name="sd" id="configuration1" type="specific" device="HD" /&gt;
+    &lt;/mscreen&gt;
+    &lt;views startup="view1"&gt;
+        &lt;view id="view1" indicator="true" screen_orientation="full_sensor" type="view"&gt;
+            &lt;grid align_h="fill" vsize_w="1000" align_v="fill" visible="true" weight_v="1"
+                  id="grid1" weight_h="1" vsize_h="1000"&gt;
+                &lt;button align_v="fill" visible="true" weight_v="1" pack_h="49" weight_h="1" align_h="fill"
+                        pack_w="210" disable="false" pack_x="406" pack_y="219" style="default" id="button1" text="Button"&gt;
+                    &lt;event connection_wrapper="connection_view1_button1_onclicked"
+                           function_name="view1_button1_onclicked" signal="clicked" target="view2" /&gt;
+                    &lt;variation config_ref="configuration1" visible="true" pack_w="210" pack_x="515"
+                               pack_h="49" pack_y="753" /&gt;
+                &lt;/button&gt;
+            &lt;/grid&gt;
+        &lt;/view&gt;
+        &lt;view indicator="true" screen_orientation="full_sensor" id="view2" type="view"&gt;&lt;/view&gt;
+    &lt;/views&gt;
 &lt;/document&gt;
 </pre>
 
@@ -92,7 +92,7 @@
 
 <pre class="prettyprint">
 &lt;mscreen&gt;
-&nbsp;&nbsp;&nbsp;&lt;configuration device=&quot;HD&quot; id=&quot;config1&quot; name=&quot;common&quot; orientation=&quot;portrait&quot; type=&quot;common&quot; /&gt;
+   &lt;configuration device="HD" id="config1" name="common" orientation="portrait" type="common" /&gt;
 &lt;/mscreen&gt;
 </pre>
 
@@ -139,10 +139,10 @@
 <p>The <code>&lt;variation&gt;</code> element represents a set of the variation properties. The following is an example:</p>
 
 <pre class="prettyprint">
-&lt;button align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;49&quot; weight_h=&quot;1&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align_h=&quot;fill&quot; pack_w=&quot;210&quot; disable=&quot;false&quot; pack_x=&quot;406&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_y=&quot;219&quot; style=&quot;default&quot; id=&quot;button1&quot; text=&quot;Button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;variation config_ref=&quot;configuration1&quot; visible=&quot;true&quot; pack_w=&quot;210&quot; pack_x=&quot;515&quot; pack_h=&quot;49&quot; pack_y=&quot;753&quot; /&gt;
+&lt;button align_v="fill" visible="true" weight_v="1" pack_h="49" weight_h="1"
+        align_h="fill" pack_w="210" disable="false" pack_x="406"
+        pack_y="219" style="default" id="button1" text="Button"&gt;
+    &lt;variation config_ref="configuration1" visible="true" pack_w="210" pack_x="515" pack_h="49" pack_y="753" /&gt;
 &lt;/button&gt;
 </pre>
 
@@ -171,7 +171,7 @@
  <tr>
        <td><code>pack_col, pack_row, row_span, col_span</code></td>
        <td>Position when the parent container is a table.
-       <p><code>pack_col/pack_row</code>: 0 ~</p> 
+       <p><code>pack_col/pack_row</code>: 0 ~</p>
        <p><code>row_span/col_span</code>: 1 ~</p></td>
  </tr>
  <tr>
@@ -186,8 +186,8 @@
 
 <p>By using various UI containers and components in the <strong>Palette</strong> of the native UI Builder, you can create your application UI layout. Each component can be set in various styles. For a detailed list of component styles, see the related guides (<a href="../../../org.tizen.guides/html/native/ui/efl/ui_components_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/ui_components_wn.htm">wearable</a>).</p>
 
-<p align="center"><strong>Figure: Native UI Builder Palette</strong></p> 
-<p align="center"><img alt="Native UI Builder Palette" src="../images/component_attributes_native_palette.png" /></p> 
+<p align="center"><strong>Figure: Native UI Builder Palette</strong></p>
+<p align="center"><img alt="Native UI Builder Palette" src="../images/component_attributes_native_palette.png" /></p>
 
 <h2 id="common_attributes">Component Attributes – Common</h2>
 
@@ -252,11 +252,11 @@
 <p>An <code>&lt;event&gt;</code> element represents a set of the event attributes. The following is an example:</p>
 
 <pre class="prettyprint">
-&lt;button align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;49&quot; weight_h=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align_h=&quot;fill&quot; pack_w=&quot;210&quot; disable=&quot;false&quot; pack_x=&quot;406&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_y=&quot;219&quot; style=&quot;default&quot; id=&quot;button1&quot; text=&quot;Button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;event connection_wrapper=&quot;connection_view1_button1_onclicked&quot; function_name=&quot;view1_button1_onclicked&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;signal=&quot;clicked&quot; target=&quot;view2&quot; /&gt;
+&lt;button align_v="fill" visible="true" weight_v="1" pack_h="49" weight_h="1"
+        align_h="fill" pack_w="210" disable="false" pack_x="406"
+        pack_y="219" style="default" id="button1" text="Button"&gt;
+    &lt;event connection_wrapper="connection_view1_button1_onclicked" function_name="view1_button1_onclicked"
+           signal="clicked" target="view2" /&gt;
 &lt;/button&gt;
 </pre>
 
@@ -280,7 +280,7 @@
  </tr>
   <tr>
  <td><code>connection_wrapper</code></td>
- <td>Connection wrapper function&#39;s name</td>
+ <td>Connection wrapper function's name</td>
  </tr>
   <tr>
   <td><code>target</code></td>
@@ -328,8 +328,8 @@
 
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/container_box_n.htm">box</a> is a basic and simple EFL container.</p>
 <pre class="prettyprint">
-&lt;box homogeneous=&quot;false&quot; align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; padding_v=&quot;0&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;box2&quot; padding_h=&quot;0&quot; weight_h=&quot;1&quot; direction=&quot;vertical&quot;&gt;
+&lt;box homogeneous="false" align_h="fill" align_v="fill" visible="true" weight_v="1" padding_v="0"
+     id="box2" padding_h="0" weight_h="1" direction="vertical"&gt;
 &lt;/box&gt;
 </pre>
 
@@ -375,11 +375,11 @@
 
 <p>In a <a href="../../../org.tizen.guides/html/native/ui/efl/container_grid_n.htm">grid</a> container, objects are placed at specific positions along a fixed grid.</p>
 <pre class="prettyprint">
-&lt;grid align_h=&quot;fill&quot; vsize_w=&quot;1000&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;grid1&quot; weight_h=&quot;1&quot; vsize_h=&quot;1000&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;button align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;48&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_w=&quot;210&quot; disable=&quot;false&quot; pack_x=&quot;365&quot; pack_y=&quot;197&quot; style=&quot;default&quot; id=&quot;button1&quot; text=&quot;Button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
+&lt;grid align_h="fill" vsize_w="1000" align_v="fill" visible="true" weight_v="1"
+      id="grid1" weight_h="1" vsize_h="1000"&gt;
+    &lt;button align_v="fill" visible="true" weight_v="1" pack_h="48" weight_h="1" align_h="fill"
+            pack_w="210" disable="false" pack_x="365" pack_y="197" style="default" id="button1" text="Button"&gt;
+    &lt;/button&gt;
 &lt;/grid&gt;
 </pre>
 
@@ -420,8 +420,8 @@
 
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/component_panel_mn.htm">panel</a> container is an animated object that contains child objects. It can be expanded or contracted by clicking the button on its edge.</p>
 <pre class="prettyprint">
-&lt;panel align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; orient=&quot;top&quot; hidden=&quot;false&quot; weight_v=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;panel1&quot; weight_h=&quot;1&quot;&gt;
+&lt;panel align_h="fill" align_v="fill" visible="true" orient="top" hidden="false" weight_v="1"
+       id="panel1" weight_h="1"&gt;
 &lt;/panel&gt;
 </pre>
 
@@ -463,14 +463,14 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/container_panes_mn.htm">panes</a> container adds a draggable bar between 2 sections of content. The sections are resized when the bar is dragged.</p>
 
 <pre class="prettyprint">
-&lt;panes align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; fixed=&quot;false&quot; id=&quot;panes1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;weight_h=&quot;1&quot; right_size=&quot;0.5&quot; direction=&quot;vertical&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;button align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; disable=&quot;false&quot; style=&quot;default&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;button1&quot; text=&quot;Button&quot; weight_h=&quot;1&quot; pack=&quot;left&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;button align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; disable=&quot;false&quot; style=&quot;default&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;button2&quot; text=&quot;Button&quot; weight_h=&quot;1&quot; pack=&quot;right&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
+&lt;panes align_h="fill" align_v="fill" visible="true" weight_v="1" fixed="false" id="panes1"
+       weight_h="1" right_size="0.5" direction="vertical"&gt;
+    &lt;button align_h="fill" align_v="fill" visible="true" weight_v="1" disable="false" style="default"
+            id="button1" text="Button" weight_h="1" pack="left"&gt;
+    &lt;/button&gt;
+    &lt;button align_h="fill" align_v="fill" visible="true" weight_v="1" disable="false" style="default"
+            id="button2" text="Button" weight_h="1" pack="right"&gt;
+    &lt;/button&gt;
 &lt;/panes&gt;
 </pre>
 
@@ -517,9 +517,9 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/container_scroller_n.htm">scroller</a> container holds (and clips) a single object and allows you to scroll across it.</p>
 
 <pre class="prettyprint">
-&lt;scroller scrollbar_v=&quot;auto&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;123&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content_min_h=&quot;false&quot; weight_h=&quot;1&quot; scrollbar_h=&quot;auto&quot; align_h=&quot;fill&quot; propagate_events=&quot;true&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_w=&quot;276&quot; pack_x=v433&quot; pack_y=&quot;173&quot; style=&quot;default&quot; id=&quot;scroller1&quot; content_min_w=&quot;false&quot;&gt;
+&lt;scroller scrollbar_v="auto" align_v="fill" visible="true" weight_v="1" pack_h="123"
+          content_min_h="false" weight_h="1" scrollbar_h="auto" align_h="fill" propagate_events="true"
+          pack_w="276" pack_x=v433" pack_y="173" style="default" id="scroller1" content_min_w="false"&gt;
 &lt;/scroller&gt;
 </pre>
 
@@ -577,11 +577,11 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/container_table_n.htm">table</a> container is like the box but with 2 dimensions.</p>
 
 <pre class="prettyprint">
-&lt;table align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;244&quot; padding_h=&quot;0&quot; weight_h=&quot;1&quot; rows=&quot;2&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;homogeneous=&quot;false&quot; align_h=&quot;fill&quot; pack_w=&quot;417&quot; pack_x=&quot;164&quot; pack_y=&quot;166&quot; padding_v=&quot;0&quot; id=&quot;table1&quot; cols=&quot;2&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;button align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; weight_h=&quot;1&quot; col_span=&quot;1&quot; align_h=&quot;fill&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_row=&quot;0&quot; row_span=&quot;1&quot; disable=&quot;false&quot; style=&quot;default&quot; pack_col=&quot;1&quot; id=&quot;button2&quot; text=&quot;Button&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
+&lt;table align_v="fill" visible="true" weight_v="1" pack_h="244" padding_h="0" weight_h="1" rows="2"
+       homogeneous="false" align_h="fill" pack_w="417" pack_x="164" pack_y="166" padding_v="0" id="table1" cols="2"&gt;
+    &lt;button align_v="fill" visible="true" weight_v="1" weight_h="1" col_span="1" align_h="fill"
+            pack_row="0" row_span="1" disable="false" style="default" pack_col="1" id="button2" text="Button"&gt;
+    &lt;/button&gt;
 &lt;/table&gt;
 </pre>
 
@@ -630,8 +630,8 @@
 <p>A background component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_background_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_background_wn.htm">wearable</a> applications) is used to set a solid background decoration to a window or a container object. It works like an image, but has some background-specific properties, such as setting it to a tiled, centered, scaled, or stretched mode.</p>
 
 <pre class="prettyprint">
-&lt;bg align_v=&quot;fill&quot; visible=&quot;true&quot; color=&quot;&quot; src=&quot;&quot; weight_v=&quot;1&quot; pack_h=&quot;162&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;pack_w=&quot;278&quot; pack_x=&quot;338&quot; pack_y=&quot;244&quot; id=&quot;bg1&quot; option=&quot;scale&quot;&gt;
+&lt;bg align_v="fill" visible="true" color="" src="" weight_v="1" pack_h="162" weight_h="1" align_h="fill"
+    pack_w="278" pack_x="338" pack_y="244" id="bg1" option="scale"&gt;
 &lt;/bg&gt;
 </pre>
 
@@ -678,8 +678,8 @@
 <p>A button component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_button_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_button_wn.htm">wearable</a> applications) is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</p>
 
 <pre class="prettyprint">
-&lt;button align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;49&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot; pack_w=&quot;210&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disable=&quot;false&quot; pack_x=&quot;290&quot; pack_y=&quot;364&quot; style=&quot;default&quot; id=&quot;button1&quot; text=&quot;Button&quot;&gt;
+&lt;button align_v="fill" visible="true" weight_v="1" pack_h="49" weight_h="1" align_h="fill" pack_w="210"
+        disable="false" pack_x="290" pack_y="364" style="default" id="button1" text="Button"&gt;
 &lt;/button&gt;
 </pre>
 
@@ -732,9 +732,9 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/component_calendar_mn.htm">calendar</a> component displays and manipulates month views. <strong>(Since 2.4, this component is supported in mobile applications only.)</strong></p>
 
 <pre class="prettyprint">
-&lt;calendar align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;365&quot; weight_h=&quot;1&quot; max_year=&quot;-1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align_h=&quot;fill&quot; select_mode=&quot;default&quot; pack_w=&quot;668&quot; disable=&quot;false&quot; pack_x=&quot;207&quot; pack_y=&quot;247&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interval=&quot;0.85&quot; id=&quot;calendar1&quot; min_year=&quot;1902&quot;&gt;
+&lt;calendar align_v="fill" visible="true" weight_v="1" pack_h="365" weight_h="1" max_year="-1"
+          align_h="fill" select_mode="default" pack_w="668" disable="false" pack_x="207" pack_y="247"
+          interval="0.85" id="calendar1" min_year="1902"&gt;
 &lt;/calendar&gt;
 </pre>
 
@@ -786,8 +786,8 @@
 <p>A check component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_check_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_check_wn.htm">wearable</a> applications) toggles the Boolean value between <code>true</code> and <code>false</code>.</p>
 
 <pre class="prettyprint">
-&lt;check align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;48&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot; pack_w=&quot;208&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disable=&quot;false&quot; pack_x=&quot;429&quot; pack_y=&quot;356&quot; style=&quot;default&quot; id=&quot;check1&quot; text=&quot;Check&quot; state=&quot;false&quot;&gt;
+&lt;check align_v="fill" visible="true" weight_v="1" pack_h="48" weight_h="1" align_h="fill" pack_w="208"
+       disable="false" pack_x="429" pack_y="356" style="default" id="check1" text="Check" state="false"&gt;
 &lt;/check&gt;
 </pre>
 
@@ -840,8 +840,8 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/component_colorselector_mn.htm">colorselector</a> component provides a color selection solution to the user. It has different modes, each of them showing a different configuration of selectable colors.</p>
 
 <pre class="prettyprint">
-&lt;colorselector align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_w=&quot;667&quot; pack_x=&quot;386&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_h=&quot;131&quot; pack_y=&quot;565&quot; id=&quot;colorselector1&quot; weight_h=&quot;1&quot;&gt;
+&lt;colorselector align_h="fill" align_v="fill" visible="true" weight_v="1" pack_w="667" pack_x="386"
+               pack_h="131" pack_y="565" id="colorselector1" weight_h="1"&gt;
 &lt;/colorselector&gt;
 </pre>
 
@@ -873,12 +873,12 @@
 <p>A ctxpopup component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_ctxpopup_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_ctxpopup_wn.htm">wearable</a> applications) is a contextual popup that shows a small list of items.</p>
 
 <pre class="prettyprint">
-&lt;view indicator=&quot;true&quot; screen_orientation=&quot;full_sensor&quot; id=&quot;view2&quot; type=&quot;popup&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;ctxpopup align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; disable=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;ctxpopup1&quot; weight_h=&quot;1&quot; direction=&quot;vertical&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ctxpopupitem id=&quot;ctxpopupitem1&quot; text=&quot;CtxPopupItem&quot;&gt;&lt;/ctxpopupitem&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;ctxpopupitem id=&quot;ctxpopupitem2&quot; text=&quot;CtxPopupItem&quot;&gt;&lt;/ctxpopupitem&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ctxpopup&gt;
+&lt;view indicator="true" screen_orientation="full_sensor" id="view2" type="popup"&gt;
+    &lt;ctxpopup align_h="fill" align_v="fill" visible="true" weight_v="1" disable="false"
+              id="ctxpopup1" weight_h="1" direction="vertical"&gt;
+        &lt;ctxpopupitem id="ctxpopupitem1" text="CtxPopupItem"&gt;&lt;/ctxpopupitem&gt;
+    &lt;ctxpopupitem id="ctxpopupitem2" text="CtxPopupItem"&gt;&lt;/ctxpopupitem&gt;
+    &lt;/ctxpopup&gt;
 &lt;/view&gt;
 </pre>
 
@@ -950,8 +950,8 @@
 <p>A datetime component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_datetime_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_datetime_wn.htm">wearable</a> applications) can display and accept input for date and time values.</p>
 
 <pre class="prettyprint">
-&lt;datetime align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_w=&quot;528&quot; disable=&quot;false&quot; pack_x=&quot;232&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_h=&quot;171&quot; pack_y=&quot;433&quot; style=&quot;default&quot; id=&quot;datetime1&quot; weight_h=&quot;1&quot;&gt;
+&lt;datetime align_h="fill" align_v="fill" visible="true" weight_v="1" pack_w="528" disable="false" pack_x="232"
+          pack_h="171" pack_y="433" style="default" id="datetime1" weight_h="1"&gt;
 &lt;/datetime&gt;
 </pre>
 
@@ -999,10 +999,10 @@
 <p>An entry component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_entry_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_entry_wn.htm">wearable</a> applications) is a box to which the user can enter text.</p>
 
 <pre class="prettyprint">
-&lt;entry context_menu=&quot;true&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; src=&quot;&quot; weight_v=&quot;1&quot; editable=&quot;true&quot; pack_h=&quot;82&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroll=&quot;false&quot; weight_h=&quot;1&quot; single_line=&quot;false&quot; align_h=&quot;fill&quot; password=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;file_text_format=&quot;plain_utf8&quot; pack_w=&quot;208&quot; disable=&quot;false&quot; pack_x=&quot;289&quot; pack_y=&quot;268&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;entry1&quot; text=&quot;Entry&quot;&gt;
+&lt;entry context_menu="true" align_v="fill" visible="true" src="" weight_v="1" editable="true" pack_h="82"
+       scroll="false" weight_h="1" single_line="false" align_h="fill" password="false"
+       file_text_format="plain_utf8" pack_w="208" disable="false" pack_x="289" pack_y="268"
+       id="entry1" text="Entry"&gt;
 &lt;/entry&gt;
 </pre>
 
@@ -1079,9 +1079,9 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/component_flipselector_mn.htm">flipselector</a> 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. It can contain a small number of items. <strong>(Since 2.4, this component is supported in mobile applications only.)</strong></p>
 
 <pre class="prettyprint">
-&lt;flipselector align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_w=&quot;196&quot; disable=&quot;false&quot; pack_x=&quot;210&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_h=&quot;146&quot; pack_y=&quot;312&quot; id=&quot;flipselector1&quot; weight_h=&quot;1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;flipselectoritem id=&quot;flipselectoritem1&quot; text=&quot;item&quot;&gt;&lt;/flipselectoritem&gt;
+&lt;flipselector align_h="fill" align_v="fill" visible="true" weight_v="1" pack_w="196" disable="false" pack_x="210"
+              pack_h="146" pack_y="312" id="flipselector1" weight_h="1"&gt;
+    &lt;flipselectoritem id="flipselectoritem1" text="item"&gt;&lt;/flipselectoritem&gt;
 &lt;/flipselector&gt;
 </pre>
 
@@ -1134,7 +1134,7 @@
  <td><code>text</code></td>
  <td><code>#string</code></td>
  <td><code>elm_flipselector_item_append()</code></td>
- </tr> 
+ </tr>
 </tbody>
 </table>
 
@@ -1143,14 +1143,14 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/component_gengrid_mn.htm">gengrid</a> component displays objects on a grid layout and renders only the visible objects. The gengrid can contain a small number of items.</p>
 
 <pre class="prettyprint">
-&lt;gengrid scrollbar_v=&quot;auto&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;324&quot; item_size_w=&quot;200&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;weight_h=&quot;1&quot; scrollbar_h=&quot;auto&quot; align_h=&quot;fill&quot; select_mode=&quot;default&quot; multi_select=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item_size_h=&quot;200&quot; pack_w=&quot;554&quot; disable=&quot;false&quot; pack_x=&quot;206&quot; pack_y=&quot;316&quot; style=&quot;default&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;gengrid1&quot; direction=&quot;vertical&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;gengriditem src=&quot;&quot; style=&quot;default&quot; disabled=&quot;false&quot; id=&quot;gengriditem1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text=&quot;item&quot; selected=&quot;false&quot;&gt;&lt;/gengriditem&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;gengriditem src=&quot;&quot; style=&quot;default&quot; disabled=&quot;false&quot; id=&quot;gengriditem2&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text=&quot;item&quot; selected=&quot;false&quot;&gt;&lt;/gengriditem&gt;
+&lt;gengrid scrollbar_v="auto" align_v="fill" visible="true" weight_v="1" pack_h="324" item_size_w="200"
+         weight_h="1" scrollbar_h="auto" align_h="fill" select_mode="default" multi_select="false"
+         item_size_h="200" pack_w="554" disable="false" pack_x="206" pack_y="316" style="default"
+         id="gengrid1" direction="vertical"&gt;
+    &lt;gengriditem src="" style="default" disabled="false" id="gengriditem1"
+                 text="item" selected="false"&gt;&lt;/gengriditem&gt;
+    &lt;gengriditem src="" style="default" disabled="false" id="gengriditem2"
+                 text="item" selected="false"&gt;&lt;/gengriditem&gt;
 &lt;/gengrid&gt;
 </pre>
 
@@ -1244,7 +1244,7 @@
  <td><code>text</code></td>
  <td><code>#string</code></td>
  <td><code>elm_gengrid_item_append()</code></td>
- </tr> 
+ </tr>
  <tr>
  <td><code>src</code></td>
  <td><code>#string</code></td>
@@ -1268,15 +1268,15 @@
 <p>A genlist component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_genlist_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_genlist_wn.htm">wearable</a> applications) displays a scrollable list of items.</p>
 
 <pre class="prettyprint">
-&lt;genlist scrollbar_v=&quot;auto&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;244&quot; weight_h=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;homogeneous=&quot;false&quot; scrollbar_h=&quot;auto&quot; align_h=&quot;fill&quot; select_mode=&quot;default&quot; pack_w=&quot;668&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disable=&quot;false&quot; pack_x=&quot;134&quot; pack_y=&quot;204&quot; style=&quot;solid/default&quot; id=&quot;genlist1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;genlistitem sub_text=&quot;Sub Text&quot; end_image_path=&quot;&quot; item_type=&quot;none&quot; image_path=&quot;&quot; style=&quot;default&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;genlistitem1&quot; text=&quot;List item&quot; end_standard_icon=&quot;&quot; selected=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;standard_icon=&quot;&quot;&gt;&lt;/genlistitem&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;genlistitem sub_text=&quot;Sub Text&quot; end_image_path=&quot;&quot; item_type=&quot;none&quot; image_path=&quot;&quot; style=&quot;default&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;genlistitem2&quot; text=&quot;List item&quot; end_standard_icon=&quot;&quot; selected=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;standard_icon=&quot;&quot;&gt;&lt;/genlistitem&gt;
+&lt;genlist scrollbar_v="auto" align_v="fill" visible="true" weight_v="1" pack_h="244" weight_h="1"
+         homogeneous="false" scrollbar_h="auto" align_h="fill" select_mode="default" pack_w="668"
+         disable="false" pack_x="134" pack_y="204" style="solid/default" id="genlist1"&gt;
+    &lt;genlistitem sub_text="Sub Text" end_image_path="" item_type="none" image_path="" style="default"
+                 id="genlistitem1" text="List item" end_standard_icon="" selected="false"
+                 standard_icon=""&gt;&lt;/genlistitem&gt;
+    &lt;genlistitem sub_text="Sub Text" end_image_path="" item_type="none" image_path="" style="default"
+                 id="genlistitem2" text="List item" end_standard_icon="" selected="false"
+                 standard_icon=""&gt;&lt;/genlistitem&gt;
 &lt;/genlist&gt;
 </pre>
 
@@ -1403,11 +1403,11 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/component_hoversel_mn.htm">hoversel</a> component is a button that pops up a list of items.</p>
 
 <pre class="prettyprint">
-&lt;hoversel align_h=&quot;fill&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; disable=&quot;false&quot; weight_v=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_h=&quot;41&quot; weight_h=&quot;1&quot; pack_w=&quot;69&quot; pack_x=&quot;308&quot; pack_y=&quot;341&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;hoversel1&quot; text=&quot;Hoversel&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;hoverselitem id=&quot;hoverselitem1&quot; text=&quot;Hoverselitem&quot;&gt;&lt;/hoverselitem&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;hoverselitem id=&quot;hoverselitem2&quot; text=&quot;Hoverselitem&quot;&gt;&lt;/hoverselitem&gt;
+&lt;hoversel align_h="fill" align_v="fill" visible="true" disable="false" weight_v="1"
+          pack_h="41" weight_h="1" pack_w="69" pack_x="308" pack_y="341"
+          id="hoversel1" text="Hoversel"&gt;
+    &lt;hoverselitem id="hoverselitem1" text="Hoverselitem"&gt;&lt;/hoverselitem&gt;
+    &lt;hoverselitem id="hoverselitem2" text="Hoverselitem"&gt;&lt;/hoverselitem&gt;
 &lt;/hoversel&gt;
 </pre>
 
@@ -1475,9 +1475,9 @@
 <p>An image component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_image_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_image_wn.htm">wearable</a> applications) loads and displays an image from a file or memory.</p>
 
 <pre class="prettyprint">
-&lt;image resizable_up=&quot;true&quot; resizable_down=&quot;true&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; src=&quot;&quot; weight_v=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_h=&quot;41&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot; aspect_fixed=&quot;false&quot; pack_w=&quot;69&quot; pack_x=&quot;308&quot; pack_y=&quot;341&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;no_scale=&quot;false&quot; id=&quot;image1&quot; fill_outside=&quot;false&quot;&gt;
+&lt;image resizable_up="true" resizable_down="true" align_v="fill" visible="true" src="" weight_v="1"
+       pack_h="41" weight_h="1" align_h="fill" aspect_fixed="false" pack_w="69" pack_x="308" pack_y="341"
+       no_scale="false" id="image1" fill_outside="false"&gt;
 &lt;/image&gt;
 </pre>
 
@@ -1534,10 +1534,10 @@
 <p>An index component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_index_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_index_wn.htm">wearable</a> applications) provides an index for fast access to another group of UI items. The index can contain a small number of items.</p>
 
 <pre class="prettyprint">
-&lt;index indicator=&quot;true&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;122&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_w=&quot;276&quot; disable=&quot;false&quot; pack_x=&quot;368&quot; pack_y=&quot;385&quot; id=&quot;index1&quot; autohide=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;indexitem id=&quot;indexitem1&quot; text=&quot;item&quot;&gt;&lt;/indexitem&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;indexitem id=&quot;indexitem2&quot; text=&quot;item&quot;&gt;&lt;/indexitem&gt;
+&lt;index indicator="true" align_v="fill" visible="true" weight_v="1" pack_h="122" weight_h="1" align_h="fill"
+       pack_w="276" disable="false" pack_x="368" pack_y="385" id="index1" autohide="false"&gt;
+    &lt;indexitem id="indexitem1" text="item"&gt;&lt;/indexitem&gt;
+    &lt;indexitem id="indexitem2" text="item"&gt;&lt;/indexitem&gt;
 &lt;/index&gt;
 </pre>
 
@@ -1604,9 +1604,9 @@
 <p>A label component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_label_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_label_wn.htm">wearable</a> applications) displays text with a simple HTML-like markup.</p>
 
 <pre class="prettyprint">
-&lt;label align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; line_wrap=&quot;none&quot; pack_h=&quot;24&quot; weight_h=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ellipsis=&quot;false&quot; align_h=&quot;fill&quot; wrap_width=&quot;0&quot; pack_w=&quot;139&quot; disable=&quot;false&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_x=&quot;282&quot; pack_y=&quot;415&quot; id=&quot;label1&quot; text=&quot;Label&quot;&gt;
+&lt;label align_v="fill" visible="true" weight_v="1" line_wrap="none" pack_h="24" weight_h="1"
+       ellipsis="false" align_h="fill" wrap_width="0" pack_w="139" disable="false"
+       pack_x="282" pack_y="415" id="label1" text="Label"&gt;
 &lt;/label&gt;
 </pre>
 
@@ -1658,8 +1658,8 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/container_layout_n.htm">layout</a> is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.</p>
 
 <pre class="prettyprint">
-&lt;layout align_v=&quot;fill&quot; visible=&quot;true&quot; src=&quot;edc.edj&quot; weight_v=&quot;1&quot; pack_h=&quot;122&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_w=&quot;210&quot; disable=&quot;false&quot; pack_x=&quot;329&quot; pack_y=&quot;398&quot; id=&quot;layout1&quot; group=&quot;main&quot;&gt;
+&lt;layout align_v="fill" visible="true" src="edc.edj" weight_v="1" pack_h="122" weight_h="1" align_h="fill"
+        pack_w="210" disable="false" pack_x="329" pack_y="398" id="layout1" group="main"&gt;
 &lt;/layout&gt;
 </pre>
 
@@ -1701,11 +1701,11 @@
 <p>A list component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_list_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_list_wn.htm">wearable</a> applications) is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</p>
 
 <pre class="prettyprint">
-&lt;list scrollbar_v=&quot;auto&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;244&quot; weight_h=&quot;1&quot; mode=&quot;scroll&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollbar_h=&quot;auto&quot; align_h=&quot;fill&quot; select_mode=&quot;default&quot; multi_select=&quot;false&quot; pack_w=&quot;667&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disable=&quot;false&quot; pack_x=&quot;307&quot; pack_y=&quot;272&quot; id=&quot;list1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;listitem id=&quot;listitem1&quot; text=&quot;List item&quot; selected=&quot;false&quot;&gt;&lt;/listitem&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;listitem id=&quot;listitem2&quot; text=&quot;List item&quot; selected=&quot;false&quot;&gt;&lt;/listitem&gt;
+&lt;list scrollbar_v="auto" align_v="fill" visible="true" weight_v="1" pack_h="244" weight_h="1" mode="scroll"
+      scrollbar_h="auto" align_h="fill" select_mode="default" multi_select="false" pack_w="667"
+      disable="false" pack_x="307" pack_y="272" id="list1"&gt;
+    &lt;listitem id="listitem1" text="List item" selected="false"&gt;&lt;/listitem&gt;
+    &lt;listitem id="listitem2" text="List item" selected="false"&gt;&lt;/listitem&gt;
 &lt;/list&gt;
 </pre>
 
@@ -1797,8 +1797,8 @@
 <p>A map component can display a geographic map. The default map data is provided by the <strong>OpenStreetMap</strong> project.</p>
 
 <pre class="prettyprint">
-&lt;map align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;244&quot; latitude=&quot;0&quot; zoom_level=&quot;15&quot; weight_h=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align_h=&quot;fill&quot; pack_w=&quot;417&quot; pack_x=&quot;221&quot; pack_y=&quot;318&quot; id=&quot;map1&quot; longitude=&quot;0&quot;&gt;
+&lt;map align_v="fill" visible="true" weight_v="1" pack_h="244" latitude="0" zoom_level="15" weight_h="1"
+     align_h="fill" pack_w="417" pack_x="221" pack_y="318" id="map1" longitude="0"&gt;
 &lt;/map&gt;
 </pre>
 
@@ -1845,10 +1845,10 @@
 <p>A multibutton entry component allows the user to enter text so that the text is divided into chunks and managed as a set of buttons.</p>
 
 <pre class="prettyprint">
-&lt;multibuttonentry align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;0&quot; editable=&quot;true&quot; pack_h=&quot;40&quot; weight_h=&quot;0&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align_h=&quot;fill&quot; expanded=&quot;false&quot; pack_w=&quot;210&quot; disable=&quot;false&quot; pack_x=&quot;329&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_y=&quot;360&quot; id=&quot;multibuttonentry1&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;multibuttonentryitem id=&quot;multibuttonentryitem1&quot; text=&quot;item&quot; /&gt;
+&lt;multibuttonentry align_v="fill" visible="true" weight_v="0" editable="true" pack_h="40" weight_h="0"
+                  align_h="fill" expanded="false" pack_w="210" disable="false" pack_x="329"
+                  pack_y="360" id="multibuttonentry1"&gt;
+    &lt;multibuttonentryitem id="multibuttonentryitem1" text="item" /&gt;
 &lt;/multibuttonentry&gt;
 </pre>
 
@@ -1920,9 +1920,9 @@
 <p>A progressbar component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_progressbar_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_progressbar_wn.htm">wearable</a> applications) is used to display the progress status of a given job.</p>
 
 <pre class="prettyprint">
-&lt;progressbar align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;24&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot; span_size=&quot;0&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_w=&quot;210&quot; disable=&quot;false&quot; pack_x=&quot;579&quot; pack_y=&quot;432&quot; style=&quot;default&quot; id=&quot;progressbar1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inverted=&quot;false&quot; value=&quot;0&quot; direction=&quot;horizontal&quot;&gt;
+&lt;progressbar align_v="fill" visible="true" weight_v="1" pack_h="24" weight_h="1" align_h="fill" span_size="0"
+             pack_w="210" disable="false" pack_x="579" pack_y="432" style="default" id="progressbar1"
+             inverted="false" value="0" direction="horizontal"&gt;
 &lt;/progressbar&gt;
 </pre>
 
@@ -2047,8 +2047,8 @@
 <p>A radio component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_radio_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_radio_wn.htm">wearable</a> applications) can display 1 or more options, while the user can only select one of them. The UI 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 components, it can also be used alone.</p>
 
 <pre class="prettyprint">
-&lt;radio align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;1&quot; pack_h=&quot;49&quot; weight_h=&quot;1&quot; align_h=&quot;fill&quot; pack_w=&quot;208&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;disable=&quot;false&quot; pack_x=&quot;318&quot; pack_y=&quot;478&quot; id=&quot;radio1&quot; text=&quot;Radio&quot; state_value=&quot;0&quot; value=&quot;0&quot;&gt;
+&lt;radio align_v="fill" visible="true" weight_v="1" pack_h="49" weight_h="1" align_h="fill" pack_w="208"
+       disable="false" pack_x="318" pack_y="478" id="radio1" text="Radio" state_value="0" value="0"&gt;
 &lt;/radio&gt;
 </pre>
 
@@ -2101,9 +2101,9 @@
 <p>A slider component (in <a href="../../../org.tizen.guides/html/native/ui/efl/component_slider_mn.htm">mobile</a> and <a href="../../../org.tizen.guides/html/native/ui/efl/component_slider_wn.htm">wearable</a> applications) is a draggable bar that is used to select a value from a range of values.</p>
 
 <pre class="prettyprint">
-&lt;slider indicator=&quot;false&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; max=&quot;1.0&quot; weight_v=&quot;1&quot; pack_h=&quot;25&quot; indicator_format=&quot;&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;weight_h=&quot;1&quot; align_h=&quot;fill&quot; min=&quot;0.0&quot; pack_w=&quot;276&quot; disable=&quot;false&quot; pack_x=&quot;318&quot; pack_y=&quot;424&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;default&quot; step=&quot;0.05&quot; id=&quot;slider1&quot; inverted=&quot;false&quot; value=&quot;0.0&quot; direction=&quot;horizontal&quot;&gt;
+&lt;slider indicator="false" align_v="fill" visible="true" max="1.0" weight_v="1" pack_h="25" indicator_format=""
+        weight_h="1" align_h="fill" min="0.0" pack_w="276" disable="false" pack_x="318" pack_y="424"
+        style="default" step="0.05" id="slider1" inverted="false" value="0.0" direction="horizontal"&gt;
 &lt;/slider&gt;
 </pre>
 
@@ -2195,9 +2195,9 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/component_spinner_mn.htm">spinner</a> component enables the user to increase or decrease a numeric value by using arrow buttons. <strong>(This component is not supported in wearable circle applications.)</strong></p>
 
 <pre class="prettyprint">
-&lt;spinner align_v=&quot;fill&quot; visible=&quot;true&quot; max=&quot;100&quot; weight_v=&quot;1&quot; editable=&quot;true&quot; pack_h=&quot;123&quot; weight_h=&quot;1&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;align_h=&quot;fill&quot; min=&quot;0&quot; pack_w=&quot;210&quot; disable=&quot;false&quot; pack_x=&quot;279&quot; pack_y=&quot;377&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;horizontal&quot; step=&quot;1&quot; id=&quot;spinner1&quot;&gt;
+&lt;spinner align_v="fill" visible="true" max="100" weight_v="1" editable="true" pack_h="123" weight_h="1"
+         align_h="fill" min="0" pack_w="210" disable="false" pack_x="279" pack_y="377"
+         style="horizontal" step="1" id="spinner1"&gt;
 &lt;/spinner&gt;
 </pre>
 
@@ -2266,15 +2266,15 @@
 <p>A <a href="../../../org.tizen.guides/html/native/ui/efl/component_toolbar_mn.htm">toolbar</a> component is a small scrollable list of items. It can also show a menu when an item is selected. Only one item can be selected at a time.</p>
 
 <pre class="prettyprint">
-&lt;toolbar shrink_mode=&quot;none&quot; align_v=&quot;fill&quot; visible=&quot;true&quot; weight_v=&quot;0&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pack_h=&quot;41&quot; weight_h=&quot;0&quot; homogeneous=&quot;true&quot; align_h=&quot;fill&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;select_mode=&quot;default&quot; pack_w=&quot;668&quot; pack_x=&quot;113&quot; pack_y=&quot;190&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;icon_size=&quot;32&quot; style=&quot;default&quot; id=&quot;toolbar1&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transverse_expand=&quot;false&quot; direction=&quot;horizontal&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;toolbaritem src=&quot;&quot; disable=&quot;false&quot; id=&quot;toolbaritem1&quot; text=&quot;item&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selected=&quot;false&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&lt;toolbaritem src=&quot;&quot; disable=&quot;false&quot; id=&quot;toolbaritem2&quot; text=&quot;item&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selected=&quot;false&quot; /&gt;
+&lt;toolbar shrink_mode="none" align_v="fill" visible="true" weight_v="0"
+         pack_h="41" weight_h="0" homogeneous="true" align_h="fill"
+         select_mode="default" pack_w="668" pack_x="113" pack_y="190"
+         icon_size="32" style="default" id="toolbar1"
+         transverse_expand="false" direction="horizontal"&gt;
+    &lt;toolbaritem src="" disable="false" id="toolbaritem1" text="item"
+                 selected="false" /&gt;
+    &lt;toolbaritem src="" disable="false" id="toolbaritem2" text="item"
+                 selected="false" /&gt;
 &lt;/toolbar&gt;
 </pre>
 
diff --git a/org.tizen.studio/html/native_tools/component_designer_n.htm b/org.tizen.studio/html/native_tools/component_designer_n.htm
index e0b2ab4..f22070e 100644 (file)
--- a/org.tizen.studio/html/native_tools/component_designer_n.htm
+++ b/org.tizen.studio/html/native_tools/component_designer_n.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Designing UIs with the Component Designer</title>  
+       <title>Designing UIs with the Component Designer</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,8 +29,8 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#ui">UI Layout</a></li>
-                       <li><a href="#group">Group Navigation</a></li>  
-                       <li><a href="#part">Part/program Navigation</a></li>    
+                       <li><a href="#group">Group Navigation</a></li>
+                       <li><a href="#part">Part/program Navigation</a></li>
                        <li><a href="#workspace">Workspace</a></li>
                        <li><a href="#properties">Properties</a></li>
                        <li><a href="#managers">Managers</a></li>
@@ -45,15 +45,15 @@
 <p>The Component Designer is a rich graphical tool that provides a UI for the EDC markup. It is aimed to simplify the creation and editing of UI component styles, avoiding the need to learn the EDC syntax.</p>
 <p>The Component Designer was designed with the idea that target users are not just programmers, but also designers. Besides styles, the Component Designer is also able to create and edit custom layouts.</p>
 
-<p align="center"><strong>Figure: Component Designer</strong></p> 
-<p align="center"><img alt="Component Designer" src="../images/comp_des_com_des.png" /></p> 
+<p align="center"><strong>Figure: Component Designer</strong></p>
+<p align="center"><img alt="Component Designer" src="../images/comp_des_com_des.png" /></p>
 
 <h2 id="ui">UI Layout</h2>
 
 <p>The Component Designer contains a few different blocks, which interact with each other to show, for example, groups, parts, and EDJ collections.</p>
 <p>In the following figure:</p>
 
-<ul> 
+<ul>
    <li>Block in the middle (yellow rectangle) is a workspace. It is used to show group parts.</li>
    <li>Blocks on the left (green and blue) are navigation blocks.
    <p>The top one contains a list of groups, while the bottom one usually shows parts, programs, data, and other things related to the group (group usually consist of parts, programs working with and sometimes manipulating a part, and some simple data).</p>
@@ -62,45 +62,45 @@
    <li>Block on the right is <strong>Property</strong>. It shows the properties of the item currently selected in the navigation bottom block, and it can be a part, program, or data.</li>
    <li>Violet bar at the top contains tabs. Each tab has its own workspace.</li>
    <li>Red bar at the bottom of the window is a status bar.
-   <p align="center"><strong>Figure: Component Designer window blocks</strong></p> 
+   <p align="center"><strong>Figure: Component Designer window blocks</strong></p>
 <p align="center"><img alt="Component Designer window blocks" src="../images/comp_des_window_blocks.png" /></p>
 </li>
 </ul>
 
 <h2 id="group">Group Navigation</h2>
- 
+
 <p>The list of groups is located on the left side of the Component Designer, and holds all groups from the loaded project, with items sorted alphabetically.</p>
 
 <p align="center"><strong>Figure: Group navigation</strong></p>
-<p align="center"><img alt="Group navigation" src="../images/comp_des_group_navigation.png" /></p> 
+<p align="center"><img alt="Group navigation" src="../images/comp_des_group_navigation.png" /></p>
 <p>On the top of the navigation bar, 2 icons allow you to add a new group into the project or delete an existing group. If you add a new group, a simple dialog wizard opens, and sets a name for new group and selects a source group, if one is required to create a copy or alias.</p>
 
 <div class="note">
     <strong>Note</strong>
     Copy and alias are different entities. A copied group is an independent group with all parameters copied from the source group. An alias, on the other side, is just a link. The alias group has a specific icon (<img alt="Link" src="../images/comp_des_icon_link.png" />) and the opened alias group does not allow you to work with the part/program navigation or with parts on the workspace.
 </div>
-<p>The group list structure is based on splitting the group name by tokens that are separated from each other by the \ character. This creates a clear tree view. For example, the default Elementary theme contains a lot of groups with styles for elementary components. By splitting the root tokens from component styles (for example, <strong>elm</strong>/check/base/default), all groups related to Elementary can be organized below the <strong>elm</strong> entity. On the next level, the splitting happens based on the component names (for example, elm/<strong>check</strong>/base/default). And finally, the lowest level leafs of this tree are the styles names (for example, elm/check/base/<strong>default</strong>).</p> 
-<p>For comfortable visual navigation, the tree leafs have a &quot;document&quot; icon, and the nodes are represented by a &quot;folder&quot; icon.</p>
+<p>The group list structure is based on splitting the group name by tokens that are separated from each other by the \ character. This creates a clear tree view. For example, the default Elementary theme contains a lot of groups with styles for elementary components. By splitting the root tokens from component styles (for example, <strong>elm</strong>/check/base/default), all groups related to Elementary can be organized below the <strong>elm</strong> entity. On the next level, the splitting happens based on the component names (for example, elm/<strong>check</strong>/base/default). And finally, the lowest level leafs of this tree are the styles names (for example, elm/check/base/<strong>default</strong>).</p>
+<p>For comfortable visual navigation, the tree leafs have a "document" icon, and the nodes are represented by a "folder" icon.</p>
 <h2 id="part">Part/program Navigation</h2>
 
 <p>The Component Designer provides a navigation bar for primitives that are stored inside groups. The primitives are parts, programs, and data. They are placed on the right side of main work area as 2 root nodes.</p>
 <p align="center"><strong>Figure: Part/program navigation</strong></p>
-<p align="center"><img alt="Part/program navigation" src="../images/comp_des_part.png" /></p> 
+<p align="center"><img alt="Part/program navigation" src="../images/comp_des_part.png" /></p>
 
 <p>The controls placed at the top of the navigation bar make it possible to add new primitives or change the order of the parts inside the group. Click the <strong>+</strong> icon to see the names of the available primitive types. Depending on the selected context, some of the entities can be disabled.</p>
 <p align="center"><strong>Figure: Available primitive types</strong></p>
 <p align="center"><img alt="Available primitive types" src="../images/comp_des_part_2.png" /></p>
 <p>For example, to add a new state for an existing part:</p>
-  <ol>  
+  <ol>
    <li>Select the part name in the list and add a new state by clicking the <strong>+</strong> icon.</li>
    <li>A special wizard guides you through the adding of new primitives with necessary attributes, according to the type of the selected primitive.</li>
    <li>Select the primitive item in the list to update its attributes properties.
 By double-clicking the state name you can switch the part state. The state is updated in the workspace view.</li>
   </ol>
 <p>To manage primitives:</p>
-<ul> 
+<ul>
    <li>Parts<p>There is an eye icon (<img alt="Eye" src="../images/comp_des_icon_eye.png" />) on the left side of the part name. If the group has too many parts, and it is too complicated to work with them on the workspace, you can hide some parts by clicking the eye icon. To show the part again, click the empty check that replaces the eye icon.</p><p>To identify the part type in the tree, an icon representing the part type is shown on the right side of the part name. The following table shows the currently available part types.</p>
-   
+
 <p align="center" class="Table"><strong>Table: Part types</strong></p>
 <table>
 <tbody>
@@ -153,22 +153,22 @@ Some parts can contain items in addition to states, for example, a box or table.
 The parts/programs list only allows you to add or remove programs. By clicking a program name, the properties are updated to the program parameters available to be modified.</p></li>
 <li>Data items<p>
 Data items contain raw data information (data name and raw value) that is encased inside the current group. Sometimes, the data item information is really important (for example, genlist items contain data items important for setting the text and content). You can add and delete data items by using the controls on top of the navigation bar.</p></li>
-</ul> 
+</ul>
 <h2 id="workspace">Workspace</h2>
 
 <p>The workspace is placed in the middle of the Component Designer window. It shows a visual representation of the group being edited.</p>
 <p align="center"><strong>Figure: Workspace</strong></p>
-<p align="center"><img alt="Workspace" src="../images/comp_des_workspace.png" /></p> 
+<p align="center"><img alt="Workspace" src="../images/comp_des_workspace.png" /></p>
 <p>You can open multiple groups at the same time, and switch between them using the tab bar placed above the workspace.</p>
 <p>Each workspace has a history (for undo and redo actions).</p>
 <p>The workspace component can demonstrate 2 possible behaviors: normal and demo.</p>
 <h3>Group View</h3>
 <p>The workspace group view is a scrollable view where the background is preset by using certain tools. It contains a visual representation of the group, showing its parts and applied properties:</p>
-<ul> 
+<ul>
 <li>Parts stay within a specific container that can be resized.</li>
 <li>Parts can be manipulated by a mouse pointer.</li>
 <li>Parts can be selected and highlighted, and by using the highlight, resized.</li>
-</ul> 
+</ul>
 <div class="note">
     <strong>Note</strong>
     Clicking a part selects it and loads the part properties. Clicking an already selected part switches between the part state and the part (and switches their properties as well).
@@ -176,26 +176,26 @@ Data items contain raw data information (data name and raw value) that is encase
 <p>If you right-click the group view background, a context menu opens. You can select actions, such as undo, redo, and show/hide rulers and certain scales (or both). The group view also contains rulers to show the relative and absolute sizes.</p>
 <h3>Tools</h3>
 <p>Workspace has various tools to allow you to manipulate it:</p>
-<ul> 
+<ul>
 <li>The size of the previewed group can be changed through the container border. The container has a small rectangle in the right bottom corner: use it to change the size with the mouse.
 <p>Another way is to use the spinners placed at the beginning of the toolbar to set the container size. The chain between the spinners determines whether the width and height changes are made simultaneously. The toggle on the left blocks all size changes.</p>
 <p>In the following figure, the setting at the bottom blocks all size changes, and the width and height changes are not linked. At the top, the size changes are not blocked, and the width and height changes are linked.</p>
-<p align="center"><strong>Figure: Container size</strong></p> 
-<p align="center"><img alt="Container size" src="../images/comp_des_container_size.png" /></p> 
+<p align="center"><strong>Figure: Container size</strong></p>
+<p align="center"><img alt="Container size" src="../images/comp_des_container_size.png" /></p>
 <p align="center"><img alt="Container size" src="../images/comp_des_container_size_2.png" /></p>
 </li>
 <li>If the group is too small or too big, you can zoom in and out with a slider. To set an accurate zoom value, use the zoom spinner.
-<p align="center"><strong>Figure: Zooming</strong></p> 
-<p align="center"><img alt="Zooming" src="../images/comp_des_zooming.png" /></p> 
+<p align="center"><strong>Figure: Zooming</strong></p>
+<p align="center"><img alt="Zooming" src="../images/comp_des_zooming.png" /></p>
 </li>
 <li>To fit the group view with the currently opened group, use the <img alt="Size" src="../images/comp_des_icon_size.png" /> icon. It makes the group smaller or larger, as needed, to fit the size of the group view.
 <p>When the fit is selected, it blocks all size changes until the fit is unselected.</p></li>
 <li>You can undo and redo all changes that happen during group editing. The change history is cleared when you close the tab of the edited group in the workspace.
-<p align="center"><strong>Figure: Undo and redo</strong></p> 
+<p align="center"><strong>Figure: Undo and redo</strong></p>
 <p align="center"><img alt="Undo and redo" src="../images/comp_des_undo_redo.png" /></p>
 </li>
 <li>A combo box allows fast access to the resource libraries. All available libraries are shown in the drop-down list.
-<p align="center"><strong>Figure: Resource library access</strong></p> 
+<p align="center"><strong>Figure: Resource library access</strong></p>
 <p align="center"><img alt="Resource library access" src="../images/comp_des_resource_library.png" /></p>
 </li>
 </ul>
@@ -214,7 +214,7 @@ Data items contain raw data information (data name and raw value) that is encase
 <p>When the object area is selected to be shown, the part highlight has another handler in its middle. By dragging that handler, you can change the align of the selected part.</p>
 <h3>Modes</h3>
 <p>The workspace can demonstrate 2 possible behaviors:</p>
-<ul> 
+<ul>
 <li>Normal
 <p>This mode is used to manipulate the group primitives in the development stage. All parts are represented on the workspace, including containers and spacers. Each of the non-visible primitive types has their own pattern and color. This makes it possible to understand the markup of the group and the dependencies between primitives. Text parts are bordered to show the area from the left top to right bottom corners. In addition, text parts set the part name as content if there is no preset text in that part (it can be set in the text block in the properties).</p>
 <p>You can select primitives directly on the workspace in this mode. You can also select parts inside the part/program navigation panel, as usual. The selected part is covered by the resizing control element, which shows highlights that change the maximum size of the primitive.</p>
@@ -226,7 +226,7 @@ Data items contain raw data information (data name and raw value) that is encase
 <p>The demo mode can also emit signals to objects. When the programs inside a group are created, you want to check how the objects react to those signals. The list of signals that can be emitted in the demo mode exclude the programs that depend on mouse events, because it is easier to click (or mouse in/out, double-click) on a real object.</p>
 <p align="center"><strong>Figure: Demo mode</strong></p>
 <p align="center"><img alt="Demo mode" src="../images/comp_des_mode_demo.png" /></p></li>
-</ul> 
+</ul>
 
 <div class="note">
     <strong>Important</strong>
@@ -242,7 +242,7 @@ Data items contain raw data information (data name and raw value) that is encase
 <p>You can show 2 scales on rulers:</p>
 <p align="center"><strong>Figure: Ruler scales</strong></p>
 <p align="center"><img alt="Ruler scales" src="../images/comp_des_ruler.png" /></p>
-<ul> 
+<ul>
 <li>Absolute scale (gray text and dashes): rulers show the decent sizes in pixels of the entire group shown and loaded into the container.</li>
 <li>Relative scale (blue bubble with value inside): rulers show the relatives of the selected part (or the entire group if a part is not selected). The relative scale works well with the object area, showing all relatives of the current object on a group view.</li>
 </ul>
@@ -255,7 +255,7 @@ Data items contain raw data information (data name and raw value) that is encase
 <p>All general properties that can be modified are described in the following sections. There are different properties for an opened group, demo mode,  selected items, data, program, state, and part. Some user-friendly general behaviors, such as list filtering (hide other controls on certain values), popups, and highlights are covered as well.</p>
 <h3>Property Controls</h3>
 <p>Properties consist of different controls:</p>
-<ul> 
+<ul>
 <li>The properties are generally grouped into a tree structure containing the attributes (controls) and related values together. For example, the <strong>Color</strong> block contains the color classes and general color, while the <strong>Position</strong> block contains all controls to work with relatives (such as relative to and offsets).</li>
 <li>Most properties have a description (title) text, which is highlighted with bold when it has a non-default value. Every property has 1 or 2 controls (like min and max in the <strong>Picture</strong> property), and the property can show a subparam (subtitle) and measure (for example, px).
 <p align="center"><strong>Figure: Property title and value</strong></p>
@@ -305,16 +305,16 @@ Data items contain raw data information (data name and raw value) that is encase
 <p align="center"><img alt="Part block properties" src="../images/comp_des_part_block.png" /></p>
 <h3>State Block Properties</h3>
 <p>The <strong>State</strong> block is huge. It differs depending on the selected state of a certain part type. Generally all part types contain 4 blocks:</p>
-<ul> 
+<ul>
 <li><strong>Colors</strong> (selected color class for this state or general color)</li>
 <li><strong>Size</strong> (such as min, max, and aspects)</li>
 <li><strong>Position</strong> (relatives, offsets, and align)</li>
 <li><strong>Map</strong> (everything related to map, perspective, colors, and rotations)</li>
-</ul> 
+</ul>
 <p>Some types have specific blocks in their states. The image part has the <strong>Image</strong> block (properties, such as tweens, image, and borders) and the <strong>Fill</strong> block. The text and textblock parts have some text attributes inside every state. The container parts (box and table) have some container attributes (such as align and weight).</p>
 <h3>Program Block Properties</h3>
 
-<p>The program usually has 1 important block that contains some attributes, such as the program name, action type, signal, source, and filters. Usually, it also contain a list of after&#39;s - programs that are run together with the selected program in a certain queue.</p>
+<p>The program usually has 1 important block that contains some attributes, such as the program name, action type, signal, source, and filters. Usually, it also contain a list of after's - programs that are run together with the selected program in a certain queue.</p>
 <p align="center"><strong>Figure: Program block properties</strong></p>
 <p align="center"><img alt="Program block properties" src="../images/comp_des_program_block.png" /></p>
 <p>Based on the program action type, the block can contain more attributes. For example, the <strong>Action params</strong> can have a state name and value for the <strong>STATE_SET</strong> program type, or it can be a sample, channel, and duration for <strong>SOUND_SAMPLE</strong>.
@@ -331,12 +331,12 @@ For programs like <strong>STATE_SET</strong>, there is also a block used to set
 <p align="center"><img alt="Data item block properties" src="../images/comp_des_data_item.png" /></p>
 <h3>Demo Block Properties</h3>
 <p>The <strong>Demo</strong> block appears only when the workspace is in the demo mode, and the navigation list of parts contains only signals, text, textblock, and swallow parts. The demo properties differ depending on what kind of part or signal is selected:</p>
-<ul> 
+<ul>
 <li>For selected signals, information is shown about the signal, such as the emitter, signal, and type of program to be called.</li>
 <li>For selected text and textblock parts, simple property attributes are shown, such as uneditable part name and content. By typing text into content, the text is sent to the demo object, showing how the loaded demo object acts when certain text gets into the text parts.</li>
 <li>For selected swallows, more attributes are shown. If you use the swallow properties, you can set up different objects into the selected swallow, and see the resulting layout.
 <p>The demo mode shows how the end result looks like when a specific component or layout is used inside different programs or as a theme.</p></li>
-</ul> 
+</ul>
 <p>The <strong>Demo</strong> properties allows you to set a rectangle (and its color), image (with a path to the image file to load the picture from the system), or UI component (predefined list of components to put into the swallow, for example, check, button, and gengrid). In addition, you can set up a certain style for the selected component, from inside the group.</p>
 <p>For any kind of content (UI component, image, or rectangle), you can set up the min and max size, which also helps to determine the resulting behavior of the loaded group.</p>
 
@@ -382,7 +382,7 @@ For programs like <strong>STATE_SET</strong>, there is also a block used to set
 <p>The style manager shows all textblock styles in the project. You can expand the style to see all its elements.</p>
 <p align="center"><strong>Figure: Textblock styles</strong></p>
 <p align="center"><img alt="Textblock styles" src="../images/comp_des_textblock.png" /></p>
-<p><strong>DEFAULT</strong> is a virtual element that defines the properties of the text not enclosed in any element. The element&#39;s attributes can be edited after selecting it. In the left side, you can see how the selected element affects the text in the textblock.</p>
+<p><strong>DEFAULT</strong> is a virtual element that defines the properties of the text not enclosed in any element. The element's attributes can be edited after selecting it. In the left side, you can see how the selected element affects the text in the textblock.</p>
 <h3>Colorclasses</h3>
 
 <p>Color classes are designed to simplify color adjustment in your theme. Changing colors in the color class manager affects all parts in all styles that are using it.</p>
diff --git a/org.tizen.studio/html/native_tools/content_assist_n.htm b/org.tizen.studio/html/native_tools/content_assist_n.htm
index 36eb563..145ef9e 100644 (file)
--- a/org.tizen.studio/html/native_tools/content_assist_n.htm
+++ b/org.tizen.studio/html/native_tools/content_assist_n.htm
@@ -44,7 +44,7 @@
 <p>These features improve code productivity when you develop your applications.</p>
 
        <h2 id="assist">API Assist</h2>
-       
+
 <p>When you write code, the API assist feature provides API suggestions to complete the code faster.</p>
 <p>To receive the API suggestions manually, type at least one letter of content, and press <strong>Ctrl + Space</strong>. The suggestion list appears. Use the arrow keys to select a suggestion from the list, and press <strong>Enter</strong> to complete the code.</p>
 
@@ -57,7 +57,7 @@
 </div>
 
        <h2 id="hover">API Hover</h2>
-       
+
 <p>When you hover over a Tizen native API function in the source editor, a popup window appears below the function. In that window, you can get detailed information of the API function, such as a brief description, defined parameters, return value type, and exception information.</p>
 <p align="center"><strong>Figure: Using API hover</strong></p>
 <p align="center"><img src="../images/content_assist_api_hover.png" alt="API hover" /></p>
diff --git a/org.tizen.studio/html/native_tools/cover_code_n.htm b/org.tizen.studio/html/native_tools/cover_code_n.htm
index df9f7c4..22f3190 100644 (file)
--- a/org.tizen.studio/html/native_tools/cover_code_n.htm
+++ b/org.tizen.studio/html/native_tools/cover_code_n.htm
@@ -40,13 +40,13 @@
 
                <li><a href="api_checker_n.htm">API and Privilege Checker</a> <strong>(Verifying APIs and Privileges)</strong>
                <p>The API Checker tool checks for API and privilege usage violations in the application code. It helps you to identify and fix potential problems in the application code related to the API and privilege versions.</p></li>
-       
+
         <li><a href="ui_builder_n.htm">UI Builder</a> <strong>(Building UIs with Components)</strong>
                <p>The UI Builder tool is a WYSIWYG (What You See Is What You Get) design environment editor used to create user interfaces. It simplifies the creation of Tizen native application UIs by allowing you to arrange UI components using drag-and-drop operations. The UI Builder is a UI layout code generating tool, which also supports an easy-to-use programming model.</p></li>
 
            <li><a href="edc_editor_n.htm">EDC Editor</a> <strong>(Designing UIs with the EDC Editor)</strong>
                <p>The EDC Editor tool is an EDC (Edje Data Collections) script editor that supports text editing and previewing functions for the EDC source code. You can write simple and complex layout designs using the EDC script with the EDC Editor. The EDC Editor makes it easier to write the EDC script code and faster to finish your work.</p></li>
-               
+
                <li><a href="component_designer_n.htm">Component Designer</a> <strong>(Designing UIs with the Component Designer)</strong>
                <p>The Component Designer tool provides a UI for the EDC markup. It simplifies the creation and editing of UI component styles, avoiding the need to learn the EDC syntax. Besides the UI component styles, the Component Designer can also create and edit custom layouts.</p></li>
 </ul>
diff --git a/org.tizen.studio/html/native_tools/cover_debug_n.htm b/org.tizen.studio/html/native_tools/cover_debug_n.htm
index 51d8dc1..5de3add 100644 (file)
--- a/org.tizen.studio/html/native_tools/cover_debug_n.htm
+++ b/org.tizen.studio/html/native_tools/cover_debug_n.htm
@@ -38,21 +38,21 @@
 
                <li><a href="../common_tools/log_view.htm">Log View</a> <strong>(Checking Logs with Log View)</strong>
                <p>The <strong>Log</strong> view allows you to check the logs of your application based on the logging methods you have inserted to your code. It helps to debug your application by capturing all the events logged by the platform and your application.</p></li>
-               
+
                <li><a href="../common_tools/da_overview.htm">Dynamic Analyzer</a> <strong>(Monitoring Performance with Dynamic Analyzer)</strong>
-               <p>The Dynamic Analyzer tool monitors the performance of your application on a target device or emulator. It analyzes your application for potential performance issues, such as high usage of CPU, memory, file or network operations.</p></li>        
+               <p>The Dynamic Analyzer tool monitors the performance of your application on a target device or emulator. It analyzes your application for potential performance issues, such as high usage of CPU, memory, file or network operations.</p></li>
 
                <li><a href="call_stack_view_n.htm">Call Stack View</a> <strong>(Getting Crash Data from Call Stack View)</strong>
                <p>The <strong>Call Stack</strong> view provides useful information for debugging the application when the application crashes while running. It provides generic information about the crashed application, traces where the memory block has crashed, and shows the latest debug messages.</p></li>
-               
+
                <li><a href="static_analyzer_n.htm">Static Analyzer</a> <strong>(Analyzing the Source Code)</strong>
                <p>The Static Analyzer tool is used for source code analysis to finds issues in Tizen applications. It can be helpful in detecting a variety of issues in the code during compilation, well before the application deployment. The tool uses clang static analyzer to analyze C/C++ code.</p></li>
-               
+
                <li><a href="valgrind_n.htm">Valgrind</a> <strong>(Profiling Memory with Valgrind)</strong>
                <p>The Valgrind tools is used for performance profiling. It detects memory errors and memory leaks in an application.</p></li>
-               
+
                <li><a href="t_trace_n.htm">T-trace</a> <strong>(Optimizing Performance with T-trace)</strong>
-               <p>The T-trace tool allows you to detect and analyze performance issues by measuring and visualizing instrumented function calls in the Tizen platform. It helps you to understand what the system is doing while your application is running.</p></li> 
+               <p>The T-trace tool allows you to detect and analyze performance issues by measuring and visualizing instrumented function calls in the Tizen platform. It helps you to understand what the system is doing while your application is running.</p></li>
 </ul>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.studio/html/native_tools/cover_native_n.htm b/org.tizen.studio/html/native_tools/cover_native_n.htm
index 1a13fb3..7a74b4a 100644 (file)
--- a/org.tizen.studio/html/native_tools/cover_native_n.htm
+++ b/org.tizen.studio/html/native_tools/cover_native_n.htm
@@ -42,13 +42,13 @@
 
        <li><a href="cover_code_n.htm">Writing and Editing Codes</a>
        <p>You can use the content assist and API and privilege checker tools to speed up the code writing and verification task. In addition, you can design the application UI by arranging UI components with the visual UI Builder tool, or by defining the components and layout with the EDC script, using the EDC script editor or a graphical Component Designer.</p></li>
-       
+
        <li><a href="cover_configure_n.htm">Configuring Your Application</a>
        <p>You can manage various application functionalities and features through the application manifest file, which you can easily configure with the manifest text editor. In addition, you can localize your application to use various languages and locale-specific resources by using the PO file editor and <strong>Resource Manager</strong> view in the Tizen Studio.</p></li>
-       
+
        <li><a href="cover_debug_n.htm">Debugging Your Application</a>
-       <p>You can debug, profile, and optimize your application with various tools, such as the Dynamic Analyzer, Static Analyzer, Valgrind, and T-trace. The Tizen Studio provides various views designed to help you identify and fix runtime errors, such as the  <strong>Log</strong> and <strong>Call Stack</strong> views.</p></li>      
-       
+       <p>You can debug, profile, and optimize your application with various tools, such as the Dynamic Analyzer, Static Analyzer, Valgrind, and T-trace. The Tizen Studio provides various views designed to help you identify and fix runtime errors, such as the  <strong>Log</strong> and <strong>Call Stack</strong> views.</p></li>
+
        <li><a href="cover_run_test_n.htm">Running and Testing Your Application</a>
        <p>You can run and test your application using the Tizen emulator. In addition, you can use the <strong>Connection Explorer</strong> view to manage connections to the emulator and various other target devices. The Smart Development Bridge (SDB) tool allows you to communicate with a connected target device, and the unit test tool allows you to create test projects to verify the reliability of your code.</p></li>
 </ul>
diff --git a/org.tizen.studio/html/native_tools/cover_project_mgmt_n.htm b/org.tizen.studio/html/native_tools/cover_project_mgmt_n.htm
index a90c169..61d8fa3 100644 (file)
--- a/org.tizen.studio/html/native_tools/cover_project_mgmt_n.htm
+++ b/org.tizen.studio/html/native_tools/cover_project_mgmt_n.htm
@@ -37,10 +37,10 @@
 <ul>
                <li><a href="project_wizard_n.htm">Project Creation Wizard</a> <strong>(Creating Tizen Projects with Tizen Project Wizard)</strong>
                <p>The Project Wizard tool is used to create an application project. You can select from various project templates and samples that make it easier for you to start coding your application. When you create a new project with a specific template, the Project Wizard uses it to automatically create basic functionalities and default project files and folders for the application.</p></li>
-               
+
                <li><a href="project_explorer_view_n.htm">Project Explorer View</a> <strong>(Managing Tizen Projects with Project Explorer View)</strong>
                <p>The <strong>Project Explorer</strong> view shows a hierarchical view of all project resources in the workspace. It allows you to manage Tizen projects, change the project resources, and build, export, and convert projects.</p></li>
-               
+
                <li><a href="../common_tools/certificate_registration.htm">Certificate Registration</a> <strong>(Working with the Certificate Profile)</strong>
         <p>The Certificate Manager tool is used to create a certificate profile and register author and distributor certificates. Before installing your application on a device or submitting it to the Tizen Store, you must sign it with a certificate profile while packaging your application.</p></li>
 </ul>
diff --git a/org.tizen.studio/html/native_tools/cover_run_test_n.htm b/org.tizen.studio/html/native_tools/cover_run_test_n.htm
index 968e114..9818391 100644 (file)
--- a/org.tizen.studio/html/native_tools/cover_run_test_n.htm
+++ b/org.tizen.studio/html/native_tools/cover_run_test_n.htm
@@ -37,13 +37,13 @@
 <ul>
                <li><a href="../common_tools/connection_explorer_view.htm">Connection Explorer View</a> <strong>(Managing and Connecting Devices for Testing)</strong>
                <p>The <strong>Connection Explorer</strong> view shows the devices connected to the system, and allows you to manage multiple emulator instances. You can explore the file systems of the connected devices and perform file operations.</p></li>
-               
+
                <li><a href="../common_tools/smart_development_bridge.htm">SDB</a> <strong>(Connecting Devices over Smart Development Bridge)</strong>
                <p>The SDB tool uses a command line to communicate with an emulator instance or a connected target device. You can send commands to a specific device to advance application development, such as file transfer, remote shell command, port forwarding for a debugger, viewing, filtering, and controlling target log output.</p></li>
-               
+
                <li><a href="../common_tools/emulator.htm">Emulator</a> <strong>(Running Applications on the Emulator)</strong>
                <p>The Tizen emulator tool reduces the inconvenience of testing the application in a real device, by providing an environment similar to a real device. With the Emulator Manager, you can create multiple emulator instances, each representing a different  environment (device type).</p></li>
-               
+
                <li><a href="unit_test_n.htm">Unit Test</a> <strong>(Building Unit Test Projects)</strong>
                <p>The unit test tool is used to ensure that the application runs properly as intended in the source code. You can create, build, and edit unit tests, and check and analyze the test results.</p></li>
 </ul>
diff --git a/org.tizen.studio/html/native_tools/edc_editor_n.htm b/org.tizen.studio/html/native_tools/edc_editor_n.htm
index 448af87..b49170f 100644 (file)
--- a/org.tizen.studio/html/native_tools/edc_editor_n.htm
+++ b/org.tizen.studio/html/native_tools/edc_editor_n.htm
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile" src="../images/mobile_s_n.png"/> <img alt="Wearable" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -46,13 +46,13 @@
 
 <p>When your application requires real-time changeable layouts, for example, animations, you can write the layout designs using an EDC script, compile it into an EDJ format file, and import it into your application using a UI layout component. You can also write simple and complex design layouts using the EDC script with the EDC Editor. The EDC Editor makes it easier to write the EDC script code and faster to finish your work. If you are not familiar with EDC programming, see <a href="../../../org.tizen.guides/html/native/ui/efl/learn_edc_intro_n.htm">Layouting with EDC</a> for more information.</p>
 
-<p align="center"><strong>Figure: EDC Editor</strong></p> 
+<p align="center"><strong>Figure: EDC Editor</strong></p>
 <p align="center"><img alt="EDC Editor" src="../images/edceditor_edc_edit.png" /></p>
 <p>The EDC Editor also provides useful functions for you to develop your application UI. Before using the EDC Editor, familiarize yourself with the functionalities described in the following sections.</p>
 
 <h2 id="edit_views">Editor Views</h2>
 <p>The EDC Editor consists of the following views:</p>
-<ul> 
+<ul>
    <li>Directory view
    <p>The directory view shows the file list in the current workspace</p>
    </li>
@@ -79,7 +79,7 @@
 <p>If your EDC collection consists of multiple EDC files, set up a workspace. The default workspace directory is where you opened the EDC file in the Tizen Studio.</p>
 <p>The workspace is designed to be used with the file browser (toggle hotkey, <strong>F9</strong>) and the file tab (toggle hotkey, <strong>F11</strong>) so that you can navigate between multiple EDC files. The file browser (directory view) displays the current workspace directory.</p>
 <p>You can open EDC files in the directory view by double-clicking them. The EDC text file is opened in a new file tab.</p>
-<p>The EDC Editor allows only one main EDC file that can be activated in the live view. In the directory view, the main EDC file is displayed with the <strong>[main]</strong> tag. If the main EDC file contains multiple sub EDC files, you can open and navigate through them. You can open those files in the directory view, or by pressing the <strong>F3</strong> key if the text editor cursor is placed on the <strong>&quot;include&quot;</strong> line in the text view (such as <code>#include &quot;subfile.edc&quot;</code>). To go back to the previously edited file tab, use the <strong>F4</strong> shortcut key.</p>
+<p>The EDC Editor allows only one main EDC file that can be activated in the live view. In the directory view, the main EDC file is displayed with the <strong>[main]</strong> tag. If the main EDC file contains multiple sub EDC files, you can open and navigate through them. You can open those files in the directory view, or by pressing the <strong>F3</strong> key if the text editor cursor is placed on the <strong>"include"</strong> line in the text view (such as <code>#include "subfile.edc"</code>). To go back to the previously edited file tab, use the <strong>F4</strong> shortcut key.</p>
 <p>The EDC Editor tracks the currently focused EDC group to display it while you go through the groups in 1 EDC collection. But if you open a new EDC file which contains another collection, you need to manually set up that file to be a main. To let the EDC Editor know that EDC has a collection to be adoptable with its subordinate files, press the <strong>F2</strong> key after selecting the new main EDC file in the directory view. You can also change the main EDC file in <strong>Settings &gt; EDC Build &gt; Main EDC File</strong>.</p>
 
 <h3>Code View</h3>
@@ -87,7 +87,7 @@
 <p>The text editor applies syntax color and auto indentation for EDC with its own coding standard rules. If you open an EDC file which does not use the EDC Editor coding standard rules, the EDC Editor applies them to your source code automatically. To disable this functionality, go to <strong>Settings &gt; Preference &gt; Auto Indentation</strong>.</p>
 <p>The code view supports the following features:</p>
 
-<ul> 
+<ul>
    <li>Auto-complete
    <p>To help you write EDC source code, the code view supports an auto-complete function, which lists the reserved keywords in a contextual pop-up.</p>
    <p align="center"><strong>Figure: Auto-complete feature</strong></p>
@@ -103,7 +103,7 @@
    <p>The candidate list function also helps you to know the available range of numeric values based on the context. The numeric candidate function shows a range of available numbers. When you drag the sliders, the EDC Editor updates the preview instantly.</p>
    </li>
    <li>Color selector
-   <p>To change color values, use the color selector tool. Each time a &quot;color&quot; keyword is double-clicked, it displays the color selector.</p>
+   <p>To change color values, use the color selector tool. Each time a "color" keyword is double-clicked, it displays the color selector.</p>
    <p align="center"><strong>Figure: Color selector feature</strong></p>
    <p align="center"><img alt="Color selector feature" src="../images/edceditor_colorselect.png" /></p>
    </li>
@@ -122,7 +122,7 @@
 <h3>View Layer</h3>
 <p>For easy navigation inside the EDC blocks, the EDC Editor provides a tree-style visual tool called the <strong>view layer</strong>. You can expand and contract tree items and understand the structure of your EDC layout at a glance.</p>
 <p>The following blocks are supported in the view layer:</p>
-<ul> 
+<ul>
    <li>Group</li>
    <li>Part</li>
    <li>State</li>
@@ -268,7 +268,7 @@
 <h2 id="inter_feed">Using Interactive Feedback</h2>
 <p>The EDC Editor has the following ways of providing interactive feedback information when you edit the EDC source code:</p>
 
-<ul> 
+<ul>
    <li>Highlighting a part object
    <p>To easily identify the part object that you are modifying, the EDC Editor highlights the preview image corresponding to the part object. When you click a part section in the EDC source code, the image corresponding to that part object is highlighted in the preview. Alternatively, clicking a part object image in the preview moves the editor cursor to the corresponding EDC line in the code view.</p>
 <p align="center"><strong>Figure: Part object highlighting</strong></p>
@@ -278,20 +278,20 @@
    <p>To notify you about EDC grammar errors, the EDC Editor compiles the EDC source code in the background and detects errors whenever the EDC source code is saved.</p>
    <p>When errors are detected, the console view at the bottom of the EDC Editor is activated automatically, and the detected errors are listed there. The erroneous code is also underlined in the code view. The console view is deactivated when the errors are fixed.</p>
    <p>The console view behavior is only enabled if the auto hiding console mode is enabled in <strong>Settings &gt; Preference &gt; Auto Hiding Console</strong>. You can change the size of the console view by dragging the pane divider between the code view and the console view. You can also toggle the console view visibility with the <strong>Alt + Up</strong> and <strong>Alt + Down</strong> hotkeys.</p>
-   
+
 <p align="center"><strong>Figure: Error detection</strong></p>
 <p align="center"><img alt="Error detection" src="../images/edceditor_errordet.png" /></p>
-   
+
    </li>
    <li>Image preview
    <p>To easily check the image files you use, the code view allows you to preview image files. Write an image keyword and an image file name in the EDC source code and click the image keyword. The preview pop-up of the clicked image file opens. If other image files are written in a previous or next line of the previewed image line, you can view them using the up and down arrow keys or the mouse wheel.</p>
-   
+
 <p align="center"><strong>Figure: Image preview</strong></p>
 <p align="center"><img alt="Image preview" src="../images/edceditor_impreview.png" /></p>
 </li>
    <li>Reference popup
    <p>A reference popup is like a manual for the EDC keywords applicable to the current cursor position. It shows a description of an EDC keyword for the beginners, who are not familiar with the EDC programming script language, and helps them to understand the keyword syntax. To pop up the reference, press the <strong>F5</strong> key after positioning the editor cursor on an EDC keyword.</p>
-   
+
 <p align="center"><strong>Figure: Reference popup</strong></p>
 <p align="center"><img alt="Reference popup" src="../images/edceditor_refpop.png" /></p>
 </li>
@@ -315,10 +315,10 @@
    <p>The position and size of a part object in pixels are displayed in the center of the part object preview image. The relative position of the part object is displayed on the top left and bottom right boxes.</p>
    <p>Change the position and size of a part object by dragging the control points placed on each edge of the part object. To move the part object without changing the size, drag the object itself. To move the object position pixel by pixel, use the arrow keys.</p>
    <p>Each part in a layout can be constructed with a relative or fixed size:</p>
-   
+
                <ul>
                <li>If a part is constructed with a fixed size, its size does not scale with the other parts or the layout size. When the live edit mode is activated, you can find a fixed size tool at the bottom of the preview. Check the fixed size options for width and height to fix them. For more information about the scalability concept in EDC, see <a href="../../../org.tizen.guides/html/native/ui/efl/scalability_n.htm#edje">Scalability Using the EDC File</a>.</li>
-               <li>A part with a relative size expands or contracts its size to keep up with other parts&#39; position and size or a layout size. In contrast to the fixed size, you can set a new part&#39;s position and size relative to other parts. Drag a control point to the edge of other existing parts. Once you release the mouse button, a contextual pop-up opens and displays a list of candidate parts that you can select as a relative to the X and Y coordinates of the new part.</li>
+               <li>A part with a relative size expands or contracts its size to keep up with other parts' position and size or a layout size. In contrast to the fixed size, you can set a new part's position and size relative to other parts. Drag a control point to the edge of other existing parts. Once you release the mouse button, a contextual pop-up opens and displays a list of candidate parts that you can select as a relative to the X and Y coordinates of the new part.</li>
                </ul>
    </li>
    <li>Auto-align the part object
@@ -342,7 +342,7 @@
 
 <h3>Preferences</h3>
 <p>The preferences contain occasionally used options in the EDC Editor. In addition, it contains some unique function options, such as <strong>Auto Hiding Console</strong>, <strong>Smart Redo/Undo</strong>, and <strong>Error Message Red Alert</strong>:</p>
-<ul> 
+<ul>
    <li>When the <strong>Auto Hiding Console</strong> option is switched on, the EDC Editor hides the console box automatically when no messages exist after you have fixed all grammatical errors.</li>
    <li>When the <strong>Smart Undo/Redo</strong> option is switched on, the EDC Editor redoes and undoes text word by word. If disabled, redoing and undoing works character by character.</li>
    <li>When the <strong>Error Message Red Alert</strong> option is switched on, the EDC Editor enables the error message red alert effect. When the EDC compilation fails because of a grammatical error, the EDC Editor alerts you with a fading screen effect.
@@ -362,9 +362,9 @@
 
 <h2 id="run_edc">Running the EDC Editor</h2>
 <p>There are 3 ways to start the EDC editor:</p>
-<ul> 
+<ul>
    <li>Open an existing EDC file:
-               <ol> 
+               <ol>
                        <li>In Tizen Studio, open a Tizen application project.</li>
                        <li>In the <strong>Project Explorer</strong> view, select an EDC file in the resource folder.
                        <p align="center"><img alt="Select EDC" src="../images/edceditor_sel_edc.png" /></p>
@@ -375,7 +375,7 @@
                </ol>
    </li>
    <li>Create a new EDC file:
-               <ol> 
+               <ol>
                        <li>In Tizen Studio, open a Tizen application project.</li>
                        <li>In the <strong>Project Explorer</strong> view, select the project name.</li>
                        <li>Right-click the project, and select <strong>New &gt; EDC file</strong>.
@@ -385,7 +385,7 @@
                </ol>
    </li>
    <li>Create a new EDC file with a predefined template:
-               <ol> 
+               <ol>
                        <li>In Tizen Studio, open a Tizen application project.</li>
                        <li>In the <strong>Project Explorer</strong> view, select the project name.</li>
                        <li>Right-click the project, and select <strong>New &gt; EDC file</strong>.</li>
@@ -411,8 +411,8 @@ Evas_Object *layout;
 layout = elm_layout_add(parent);
 
 char buf[PATH_MAX];
-app_get_resource(&quot;edje/my_layout.edj&quot;, edj_path, (int)PATH_MAX);
-elm_layout_file_set(layout, buf, &quot;main&quot;);
+app_get_resource("edje/my_layout.edj", edj_path, (int)PATH_MAX);
+elm_layout_file_set(layout, buf, "main");
 </pre>
 
 <p>The <code>elm_layout_file_set()</code> function imports 1 group from an EDJ file. You can pass the EDJ file path to the second parameter and the group name to the third parameter. On success, this function returns <code>EINA_TRUE</code>.</p>
diff --git a/org.tizen.studio/html/native_tools/manifest_elements_n.htm b/org.tizen.studio/html/native_tools/manifest_elements_n.htm
index 360951d..15f33b6 100644 (file)
--- a/org.tizen.studio/html/native_tools/manifest_elements_n.htm
+++ b/org.tizen.studio/html/native_tools/manifest_elements_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Using Additional Manifest Elements</title>  
+       <title>Using Additional Manifest Elements</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -42,53 +42,53 @@
                        </li>
                        </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Using Additional Manifest Elements</h1> 
-       
+<h1>Using Additional Manifest Elements</h1>
+
 <p>The following sections summarize some of the common child elements used in the <code>tizen-manifest.xml</code> file of the native application.</p>
-       
-       <h2 name="appcontrol" id="appcontrol">&lt;app-control&gt; Element</h2> 
+
+       <h2 name="appcontrol" id="appcontrol">&lt;app-control&gt; Element</h2>
 <p>This element represents Tizen application control configuration information.</p>
 
 <p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p>
 
-<p><strong>Occurrences:</strong> </p> 
+<p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 or more (optional)</li>
       </ul>
-         <p><strong>Expected children:</strong> </p>      
+         <p><strong>Expected children:</strong> </p>
            <table border="1" id="feature"><tbody>
 <tr>
-<th width="50%">Child element</th> 
-     <th>Occurrences</th> 
+<th width="50%">Child element</th>
+     <th>Occurrences</th>
     </tr>
 <tr>
-<td><code><a href="#operation">&lt;operation&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="#operation">&lt;operation&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="#uri">&lt;uri&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="#uri">&lt;uri&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="#mime">&lt;mime&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="#mime">&lt;mime&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 </tbody></table>
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
 &lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/compose&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;testuristring&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/pdf&quot;/&gt;
+   &lt;operation name="http://tizen.org/appcontrol/operation/compose"/&gt;
+   &lt;uri name="testuristring"/&gt;
+   &lt;mime name="application/pdf"/&gt;
 &lt;/app-control&gt;
 </pre>
 
-<h3 id="operation">&lt;operation&gt; Element</h3> 
+<h3 id="operation">&lt;operation&gt; Element</h3>
 <p>This element represents the operation type of the application control.</p>
-         <p><strong>Attributes:</strong> </p>      
+         <p><strong>Attributes:</strong> </p>
          <ul>
        <li><code>name</code>
           <p>Name of the application control, for example, <code>http://tizen.org/appcontrol/operation/compose</code></p>
@@ -96,12 +96,12 @@
       </ul>
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;operation name=&quot;http://tizen.org/appcontrol/operation/compose&quot;/&gt;
+&lt;operation name="http://tizen.org/appcontrol/operation/compose"/&gt;
 </pre>
 
 <h3 id="uri">&lt;uri&gt; Element</h3>
 <p>This element represents the URI scheme of the application control.</p>
-         <p><strong>Attributes:</strong> </p>      
+         <p><strong>Attributes:</strong> </p>
          <ul>
          <li><code>name</code>
          <p>Name of the URI scheme (string)</p>
@@ -109,12 +109,12 @@
          </ul>
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;uri name=&quot;testuristring&quot;/&gt;
+&lt;uri name="testuristring"/&gt;
 </pre>
 
 <h3 id="mime">&lt;mime&gt; Element</h3>
 <p>This element represents the MIME type of the application control.</p>
-         <p><strong>Attributes:</strong> </p>      
+         <p><strong>Attributes:</strong> </p>
          <ul>
          <li><code>name</code>
          <p>Name of the MIME type (string)</p>
@@ -122,22 +122,22 @@
          </ul>
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;mime name=&quot;application/pdf&quot;/&gt;
+&lt;mime name="application/pdf"/&gt;
 </pre>
 
 <h2 name="bg-category" id="bg-category">&lt;background-category&gt; Element</h2>
 <p>This element represents the category of the application running on the background.</p>
 <div class="note">
     <strong>Note</strong>
-    The <code>&lt;background-category&gt;</code> element is not supported for API versions lower than 2.4. An application with a <code>&lt;background-category&gt;</code> element can fail to be installed on devices with a Tizen version lower than 2.4. In this case, the element can be replaced with <code>&lt;metadata key=&quot;http://tizen.org/metadata/bacgkround-category/&lt;value&gt;&quot;/&gt;</code>.
+    The <code>&lt;background-category&gt;</code> element is not supported for API versions lower than 2.4. An application with a <code>&lt;background-category&gt;</code> element can fail to be installed on devices with a Tizen version lower than 2.4. In this case, the element can be replaced with <code>&lt;metadata key="http://tizen.org/metadata/bacgkround-category/&lt;value&gt;"/&gt;</code>.
 </div>
 
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> 
-<p><strong>Occurrences:</strong> </p> 
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p>
+<p><strong>Occurrences:</strong> </p>
                <ul>
                <li>1 or more (optional)</li>
                </ul>
-                       <p><strong>Attributes:</strong> </p>      
+                       <p><strong>Attributes:</strong> </p>
                <ul>
                        <li><code>value</code>
                        <p>Value of the background category (string)</p>
@@ -145,17 +145,17 @@
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;background-category value=&quot;download&quot;/&gt; &lt;!--For the API version 2.4 or later--&gt;
-&lt;metadata key=&quot;http://tizen.org/metadata/background-category/download&quot;/&gt; &lt;!--For the API version lower than 2.4--&gt;
+&lt;background-category value="download"/&gt; &lt;!--For the API version 2.4 or later--&gt;
+&lt;metadata key="http://tizen.org/metadata/background-category/download"/&gt; &lt;!--For the API version lower than 2.4--&gt;
 </pre>
 
- <h2 name="datacontrol" id="datacontrol">&lt;datacontrol&gt; Element</h2> 
+ <h2 name="datacontrol" id="datacontrol">&lt;datacontrol&gt; Element</h2>
 <p>This element represents configuration information for the Tizen data controls.</p>
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 or more (optional)</li>
       </ul>
-         <p><strong>Attributes:</strong> </p>      
+         <p><strong>Attributes:</strong> </p>
          <ul>
        <li><code>access</code>
           <p>Access mode of the data control (string)</p></li>
@@ -167,20 +167,20 @@
           </ul>
 
 <p><strong>For example:</strong></p>
-<pre class="prettyprint">&lt;datacontrol access=&quot;WriteOnly&quot; providerid=&quot;http://uiapp.com/datacontrol/provider/uiapp&quot; type=&quot;Sql&quot;/&gt;
+<pre class="prettyprint">&lt;datacontrol access="WriteOnly" providerid="http://uiapp.com/datacontrol/provider/uiapp" type="Sql"/&gt;
 </pre>
 
-  <h2 name="icon" id="icon">&lt;icon&gt; Element</h2> 
+  <h2 name="icon" id="icon">&lt;icon&gt; Element</h2>
 <p>This element represents the icon relative or absolute file path for the Tizen application.</p>
 
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 (optional)</li> 
+<li>1 (optional)</li>
       </ul>
 
-<p><strong>Expected value:</strong> </p>      
+<p><strong>Expected value:</strong> </p>
          <ul>
-<li>Icon path</li> 
+<li>Icon path</li>
       </ul>
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
@@ -188,37 +188,37 @@
 </pre>
 
 
-  <h2  name="label" id="label">&lt;label&gt; Element</h2> 
+  <h2  name="label" id="label">&lt;label&gt; Element</h2>
 <p>This element represents the label value for the Tizen application. It is a set of human readable names for the Tizen application according to the language.</p>
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 or more (optional)</li>
       </ul>
-         <p><strong>Attributes:</strong> </p>      
+         <p><strong>Attributes:</strong> </p>
          <ul>
 <li><code>xml:lang</code>
-<p>Language of the label (available value: &quot;&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;&quot;)</p></li>
+<p>Language of the label (available value: "&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;")</p></li>
 </ul>
 
-<p><strong>Expected value:</strong> </p>      
+<p><strong>Expected value:</strong> </p>
          <ul>
-<li>Label value in string</li> 
+<li>Label value in string</li>
       </ul>
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
 &lt;label&gt;testlabel&lt;/label&gt;
-&lt;label xml:lang=&quot;en-gb&quot;&gt;testlabel&lt;/label&gt;
+&lt;label xml:lang="en-gb"&gt;testlabel&lt;/label&gt;
 </pre>
 
-<h2  name="metadata" id="metadata">&lt;metadata&gt; Element</h2> 
+<h2  name="metadata" id="metadata">&lt;metadata&gt; Element</h2>
 <p>This element represents user-defined key-value pairs for the application.</p>
 
-<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 or more (optional)</li>
       </ul>
-         <p><strong>Attributes:</strong> </p>      
+         <p><strong>Attributes:</strong> </p>
          <ul>
        <li><code>key</code>
           <p>Key of metadata (string)</p></li>
@@ -226,9 +226,9 @@
           <p>Value of metadata (string)</p></li></ul>
 
 <p><strong>For example:</strong></p>
-<pre class="prettyprint">&lt;metadata key=&quot;testkey&quot; value=&quot;testvalue&quot;/&gt;
+<pre class="prettyprint">&lt;metadata key="testkey" value="testvalue"/&gt;
 </pre>
-    
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/native_tools/manifest_text_editor_n.htm b/org.tizen.studio/html/native_tools/manifest_text_editor_n.htm
index 7bf34b2..fa9839b 100644 (file)
--- a/org.tizen.studio/html/native_tools/manifest_text_editor_n.htm
+++ b/org.tizen.studio/html/native_tools/manifest_text_editor_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-  <title>Configuring the Application Manifest</title> 
- </head> 
+  <title>Configuring the Application Manifest</title>
+ </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
 
@@ -19,7 +19,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -28,17 +28,17 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#editing">Editing the Manifest File</a></li>
-                       <li><a href="#hierarchy">Manifest Element Hierarchy</a></li>                    
+                       <li><a href="#hierarchy">Manifest Element Hierarchy</a></li>
                        <li><a href="#manifest">Manifest Elements</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 <div id="container"><div id="contents"><div class="content">
- 
-  <h1>Configuring the Application Manifest</h1> 
+
+  <h1>Configuring the Application Manifest</h1>
     <p>A Tizen native application package consists of exactly 1 manifest file, called <code>tizen-manifest.xml</code>, which is used to describe the application information. The manifest file is composed of XML elements, which include the root <a href="#manifest">&lt;manifest&gt;</a> element and its child elements representing application information, such as  <code>&lt;version&gt;</code>, and <code>&lt;privileges&gt;</code>. The <a href="#hierarchy">child elements are organized into a specific hierarchy</a>. The elements can have attributes associated with them, providing more information about the element.</p>
 
-<h2 name="editing" id="editing">Editing the Manifest File</h2> 
+<h2 name="editing" id="editing">Editing the Manifest File</h2>
 <p>There are 2 different ways to edit the <code>tizen-manifest.xml</code> file:</p>
 
 <ul>
@@ -50,7 +50,7 @@
 <p align="center"><img alt="Text Editor" src="../images/manifest_text.png" /></p>
 </li>
 <li>Use the manifest editor to modify the manifest in a form editor:
-<p>Double-click the <code>tizen-manifest.xml</code> file in the <strong>Project Explorer</strong> view.</p> 
+<p>Double-click the <code>tizen-manifest.xml</code> file in the <strong>Project Explorer</strong> view.</p>
 
 <p align="center"><strong>Figure: Manifest editor</strong></p>
 <p align="center"><img alt="Manifest editor" src="../images/manifest_editor.png" /></p>
@@ -62,9 +62,9 @@
     The <code>tizen-manifest.xml</code> file must conform to both the standard XML file format and the Tizen native application specification requirements. Editing the manifest file XML structure with the text editor is intended for advanced users only. If the file does not conform to the standard and requirements, errors can occur during installation.
 </div>
 
-<h2 name="hierarchy" id="hierarchy">Manifest Element Hierarchy</h2> 
-  <p>The Tizen native application manifest file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <code>tizen-manifest.xml</code> file.</p> 
-  
+<h2 name="hierarchy" id="hierarchy">Manifest Element Hierarchy</h2>
+  <p>The Tizen native application manifest file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <code>tizen-manifest.xml</code> file.</p>
+
   <table style="border:none;">
 <col width="10%"/>
 <col width="10%"/>
@@ -192,7 +192,7 @@
                <td colspan="6" style="border:none;">
                <code><a href="#watch_app">&lt;watch-application&gt;</a></code>
 </td>
-       </tr>   
+       </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
@@ -212,7 +212,7 @@
                <td colspan="6" style="border:none;">
                <code><a href="#widget_app">&lt;widget-application&gt;</a></code>
 </td>
-       </tr>   
+       </tr>
 <tr>
 <td style="border:none;">&nbsp;</td>
 <td style="border:none;">&nbsp;</td>
@@ -300,8 +300,8 @@
                <code><a href="#capability">&lt;capability&gt;</a></code>
 </td>
        </tr>
-       
-       
+
+
 <tr>
 <td style="border:none;">&nbsp;</td>
                <td colspan="6" style="border:none;">
@@ -324,49 +324,49 @@
 </tbody>
 </table>
 
-  <h2 name="manifest" id="manifest">Manifest Elements</h2> 
+  <h2 name="manifest" id="manifest">Manifest Elements</h2>
 <p>The following sections summarize the elements used in the <code>tizen-manifest.xml</code> file of the native application.</p>
-  
+
 <h3 id="manifest_element">&lt;manifest&gt; Element</h3>
   <p>This element contains the manifest information of the Tizen native application. The <code>&lt;manifest&gt;</code> element is an easily readable description of the Tizen package and serves as a container for the other elements of the configuration document.</p>
-<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> 
+<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p>
                <p><strong>Occurrences:</strong></p>
                  <ul>
-<li><p>1</p></li> 
+<li><p>1</p></li>
           </ul>
-<p><strong>Expected children (in the following order):</strong> </p> 
+<p><strong>Expected children (in the following order):</strong> </p>
                  <table border="1"><tbody>
 <tr>
-<th width="50%">Child element</th> 
-                                       <th>Occurrences</th> 
+<th width="50%">Child element</th>
+                                       <th>Occurrences</th>
                                </tr>
 <tr>
-<td><code><a href="#author">&lt;author&gt;</a></code></td> 
-                                       <td>1 (optional)</td> 
+<td><code><a href="#author">&lt;author&gt;</a></code></td>
+                                       <td>1 (optional)</td>
                                </tr>
 <tr>
-<td><code><a href="#description">&lt;description&gt;</a></code></td> 
-                                       <td>1 or more (optional)</td> 
+<td><code><a href="#description">&lt;description&gt;</a></code></td>
+                                       <td>1 or more (optional)</td>
                                </tr>
 <tr>
-<td><code><a href="#profile_element">&lt;profile&gt;</a></code></td> 
-                                       <td>1 or more (optional)</td> 
+<td><code><a href="#profile_element">&lt;profile&gt;</a></code></td>
+                                       <td>1 or more (optional)</td>
                                </tr>
 <tr>
-<td><code><a href="#ui">&lt;ui-application&gt;</a></code></td> 
-                                       <td>1 (optional)</td> 
+<td><code><a href="#ui">&lt;ui-application&gt;</a></code></td>
+                                       <td>1 (optional)</td>
                                </tr>
 <tr>
-<td><code><a href="#service">&lt;service-application&gt;</a></code></td> 
-                                       <td>1 (optional)</td> 
+<td><code><a href="#service">&lt;service-application&gt;</a></code></td>
+                                       <td>1 (optional)</td>
                                </tr>
 <tr>
-<td><code><a href="#watch_app">&lt;watch-application&gt;</a></code></td> 
-                                       <td>1 (optional)</td> 
+<td><code><a href="#watch_app">&lt;watch-application&gt;</a></code></td>
+                                       <td>1 (optional)</td>
                                </tr>
 <tr>
-<td><code><a href="#widget_app">&lt;widget-application&gt;</a></code></td> 
-                                       <td>1 (optional)</td> 
+<td><code><a href="#widget_app">&lt;widget-application&gt;</a></code></td>
+                                       <td>1 (optional)</td>
                                </tr>
 <tr>
 <td><code><a href="#shortcut-list">&lt;shortcut-list&gt;</a></code></td>
@@ -377,12 +377,12 @@
                                        <td>1 (optional)</td>
                                </tr>
                                        <tr>
-<td><code><a href="#privileges">&lt;privileges&gt;</a></code></td> 
-                                       <td>1 (optional)</td> 
+<td><code><a href="#privileges">&lt;privileges&gt;</a></code></td>
+                                       <td>1 (optional)</td>
                                        </tr>
 <tr>
-<td><code><a href="#feature">&lt;feature&gt;</a></code></td> 
-                                       <td>1 or more (optional)</td> 
+<td><code><a href="#feature">&lt;feature&gt;</a></code></td>
+                                       <td>1 or more (optional)</td>
                                </tr>
 </tbody></table>
 
@@ -392,52 +392,52 @@
 <p id="attributes"><strong>Attributes:</strong></p>
                <ul>
 <li><p><code>api-version</code></p>
-<p>API version number for the application (available value: number in the &quot;x.y.z&quot; format, where z is optional, for example, <code>2.3.1</code> or <code>2.4</code>)</p></li> 
+<p>API version number for the application (available value: number in the "x.y.z" format, where z is optional, for example, <code>2.3.1</code> or <code>2.4</code>)</p></li>
 <li><p><code>install-location</code></p>
-<p>Installation location for the application (available value: <code>&quot;auto&quot;</code>)</p>
+<p>Installation location for the application (available value: <code>"auto"</code>)</p>
 <div class="note">
        <strong>Note</strong>
        This attribute is read-only. Do not attempt to modify it.
 </div>
 </li>
 <li><p><code>package</code></p>
-<p>Package of the application (available value: <code>&quot;org.tizen.applicationName&quot;</code>)</p>
-</li> 
+<p>Package of the application (available value: <code>"org.tizen.applicationName"</code>)</p>
+</li>
 <li><p><code>type</code></p>
-<p>Package type of the application (available value: <code>&quot;tpk&quot;</code>)</p>
+<p>Package type of the application (available value: <code>"tpk"</code>)</p>
 <div class="note">
        <strong>Note</strong>
        This attribute is read-only. Do not attempt to modify it.
 </div>
-</li> 
+</li>
 <li><p><code>version</code></p>
-<p>Version number of the application (available value: number in the &quot;x.y.z&quot; format, where 0 &lt;= x &lt;= 255, 0 &lt;= y &lt;= 255, and 0 &lt;= z &lt;= 65535)</p>
-</li> 
+<p>Version number of the application (available value: number in the "x.y.z" format, where 0 &lt;= x &lt;= 255, 0 &lt;= y &lt;= 255, and 0 &lt;= z &lt;= 65535)</p>
+</li>
 
         </ul>
 
-<p><strong>For example:</strong> </p> 
+<p><strong>For example:</strong> </p>
    <pre class="prettyprint">
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3.1&quot; package=&quot;org.tizen.uiapp&quot; version=&quot;1.0.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;author&gt;.....&lt;/author&gt;
-&nbsp;&nbsp;&nbsp;&lt;description&gt;.....&lt;/description&gt;
-&nbsp;&nbsp;&nbsp;&lt;profile name=&quot;mobile&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;ui-application&gt;.....&lt;/ui-application&gt;
-&nbsp;&nbsp;&nbsp;&lt;shortcut-list&gt;.....&lt;/shortcut-list&gt;
-&nbsp;&nbsp;&nbsp;&lt;account&gt;.....&lt;/account&gt;
-&nbsp;&nbsp;&nbsp;&lt;privileges&gt;.....&lt;/privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;feature&gt;.....&lt;/feature&gt;
+&lt;manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1" package="org.tizen.uiapp" version="1.0.0"&gt;
+   &lt;author&gt;.....&lt;/author&gt;
+   &lt;description&gt;.....&lt;/description&gt;
+   &lt;profile name="mobile"/&gt;
+   &lt;ui-application&gt;.....&lt;/ui-application&gt;
+   &lt;shortcut-list&gt;.....&lt;/shortcut-list&gt;
+   &lt;account&gt;.....&lt;/account&gt;
+   &lt;privileges&gt;.....&lt;/privileges&gt;
+   &lt;feature&gt;.....&lt;/feature&gt;
 &lt;/manifest&gt;</pre>
 
 
 <h3 id="author">&lt;author&gt; Element</h3>
-<p>This element represents the creator of the Tizen package.</p> <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> 
+<p>This element represents the creator of the Tizen package.</p> <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p>
                <p><strong>Occurrences:</strong></p>
                  <ul>
-<li><p>1 (optional)</p></li> 
+<li><p>1 (optional)</p></li>
           </ul>
 
-    
+
 <p><strong>Attributes:</strong></p>
                <ul>
 <li><p><code>email</code></p>
@@ -446,34 +446,34 @@
 <p>Web site of the package creator, such as a homepage or a profile on a social network (available value: any valid Web site string value)</p></li>
 </ul>
 
-<p><strong>Expected value:</strong> </p>      
+<p><strong>Expected value:</strong> </p>
          <ul>
-<li>Package creator name in string</li> 
+<li>Package creator name in string</li>
       </ul>
 
 <p><strong>For example:</strong></p>
-               <pre class="prettyprint">&lt;author email=&quot;email@email.com&quot; href=&quot;http://test.com&quot;&gt;author&lt;/author&gt;</pre> 
+               <pre class="prettyprint">&lt;author email="email@email.com" href="http://test.com"&gt;author&lt;/author&gt;</pre>
 
 <h3 id="description">&lt;description&gt; Element</h3>
   <p>This element contains an easily readable description of the Tizen package.</p>
-<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
+<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 or more (optional)</li>
       </ul>
 
-         <p><strong>Attributes:</strong> </p>      
+         <p><strong>Attributes:</strong> </p>
          <ul>
 <li><code>xml:lang</code>
-<p>Language and country code (available value: &quot;&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;&quot;)</p></li>
+<p>Language and country code (available value: "&lt;2-letter lowercase language code (ISO 639-1)&gt;-&lt;2-letter lowercase country code (ISO 3166-1 alpha-2)&gt;")</p></li>
       </ul>
-<p><strong>Expected value:</strong> </p>      
+<p><strong>Expected value:</strong> </p>
          <ul>
-<li>Description value in string</li> 
+<li>Description value in string</li>
       </ul>
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;description xml:lang=&quot;en-us&quot;&gt;This is a sample&lt;/description&gt;
+&lt;description xml:lang="en-us"&gt;This is a sample&lt;/description&gt;
 </pre>
 
 
@@ -494,52 +494,52 @@
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;profile name=&quot;mobile&quot;/&gt;
+&lt;profile name="mobile"/&gt;
 </pre>
 
 <h3 id="ui">&lt;ui-application&gt; Element</h3>
   <p>This element contains the manifest information of a Tizen native UI application with a graphical user interface (GUI).</p>
-<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
+<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 or more (optional)</li>
       </ul>
-<p><strong>Expected children (in the following order):</strong> </p>      
+<p><strong>Expected children (in the following order):</strong> </p>
            <table border="1"><tbody>
 <tr>
-<th width="50%">Child element</th> 
-     <th>Occurrences</th> 
+<th width="50%">Child element</th>
+     <th>Occurrences</th>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-       <td><code><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></code></td> 
-       <td>1 or more (optional)</td> 
+       <td><code><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></code></td>
+       <td>1 or more (optional)</td>
        </tr>
 
 </tbody></table>
-<p><strong>Attributes:</strong> </p>      
+<p><strong>Attributes:</strong> </p>
          <ul>
 <li><code>appid</code>
 <p>Application unique ID (string)</p>
-<p>This can be used for launching or terminating the application explicitly.</p></li> 
+<p>This can be used for launching or terminating the application explicitly.</p></li>
        <li><code>exec</code>
           <p>Application executable file path (string)</p></li>
           <li><code>hw-acceleration</code>
@@ -556,7 +556,7 @@
 </div>
           </li>
           <li><code>nodisplay</code>
-          <p>Indicates whether the application is shown in the app-tray (available values: <code>true</code>, <code>false</code>)</p></li> 
+          <p>Indicates whether the application is shown in the app-tray (available values: <code>true</code>, <code>false</code>)</p></li>
        <li><code>taskmanage</code>
           <p>Indicates whether the application is shown in the task manager (available values: <code>true</code>, <code>false</code>)</p></li>
        <li><code>type</code>
@@ -570,69 +570,69 @@
 
 
 <p><strong>For example:</strong></p>
-<pre class="prettyprint">&lt;ui-application appid=&quot;org.tizen.uiapp&quot; exec=&quot;uiapp&quot; hw-acceleration=&quot;on&quot; launch_mode=&quot;single&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiple=&quot;false&quot; nodisplay=&quot;false&quot; taskmanage=&quot;true&quot; type=&quot;capp&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;uiapplication&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;testlang&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon&gt;uiapp.png&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/dial&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/vnd.ms-excel&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;testkey&quot; value=&quot;testvalue&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;datacontrol access=&quot;ReadOnly&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;providerid=&quot;http://uiapp.com/datacontrol/provider/uiapp&quot; type=&quot;Sql&quot;/&gt;
+<pre class="prettyprint">&lt;ui-application appid="org.tizen.uiapp" exec="uiapp" hw-acceleration="on" launch_mode="single"
+                multiple="false" nodisplay="false" taskmanage="true" type="capp"&gt;
+   &lt;label&gt;uiapplication&lt;/label&gt;
+   &lt;label xml:lang="en-gb"&gt;testlang&lt;/label&gt;
+   &lt;icon&gt;uiapp.png&lt;/icon&gt;
+   &lt;app-control&gt;
+      &lt;operation name="http://tizen.org/appcontrol/operation/dial"/&gt;
+      &lt;mime name="application/vnd.ms-excel"/&gt;
+   &lt;/app-control&gt;
+   &lt;metadata key="testkey" value="testvalue"/&gt;
+   &lt;datacontrol access="ReadOnly"
+                providerid="http://uiapp.com/datacontrol/provider/uiapp" type="Sql"/&gt;
 &lt;/ui-application&gt;
-</pre>  
+</pre>
 
 
-<h3 name="service" id="service">&lt;service-application&gt; Element</h3> 
+<h3 name="service" id="service">&lt;service-application&gt; Element</h3>
 
 <p>This element contains the manifest information of a Tizen native service application without a graphical user interface (GUI).</p>
 
 <p>Create a service application if you want to develop a program that is to be run continuously, for example, to get the sensor data. The service application can be packaged together with a native UI application or a Web application.</p>
 
-<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
+<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 or more (optional)</li>
       </ul>
-<p><strong>Expected children (in the following order):</strong> </p>      
+<p><strong>Expected children (in the following order):</strong> </p>
            <table border="1"><tbody>
 <tr>
-<th width="50%">Child element</th> 
-     <th>Occurrences</th> 
+<th width="50%">Child element</th>
+     <th>Occurrences</th>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#icon">&lt;icon&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#appcontrol">&lt;app-control&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#metadata">&lt;metadata&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 <tr>
-       <td><code><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+       <td><code><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 
 </tbody></table>
-<p><strong>Attributes:</strong> </p>      
+<p><strong>Attributes:</strong> </p>
          <ul>
        <li><code>appid</code>
                <p>Application unique ID (string)</p>
-               <p>This can be used for launching or terminating the application explicitly.</p></li> 
+               <p>This can be used for launching or terminating the application explicitly.</p></li>
           <li><code>auto-restart</code>
           <p>Indicates whether the application is relaunched automatically if it is terminated abnormally (available values: <code>true</code>, <code>false</code>)</p>
           <p>If the value is not defined, <code>false</code> is used.</p>
@@ -640,10 +640,10 @@
 <div class="note">
     <strong>Note</strong>
     This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices.
-</div>  
-          </li> 
+</div>
+          </li>
        <li><code>exec</code>
-          <p>Application executable file path (string)</p></li> 
+          <p>Application executable file path (string)</p></li>
           <li><code>multiple</code>
           <p>Indicates whether the application can be launched as a multiple (available values: <code>true</code>, <code>false</code>)</p>
 <div class="note">
@@ -670,22 +670,22 @@
 </div>
           </li>
   </ul>
-       
+
 <p><strong>For example:</strong></p>
-<pre class="prettyprint">&lt;service-application appid=&quot;org.tizen.servicenew&quot; auto-restart=&quot;false&quot; exec=&quot;servicenew&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;multiple=&quot;false&quot; on-boot=&quot;true&quot; taskmanage=&quot;false&quot; type=&quot;capp&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;servicenew&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-gb&quot;&gt;testlabel&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon&gt;servicenew.png&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;operation name=&quot;http://tizen.org/appcontrol/operation/compose&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;uri name=&quot;testuristring&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mime name=&quot;application/pdf&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;testkey1&quot; value=&quot;testvalue2&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;metadata key=&quot;testkey&quot; value=&quot;testvalue&quot;/&gt;
+<pre class="prettyprint">&lt;service-application appid="org.tizen.servicenew" auto-restart="false" exec="servicenew"
+                     multiple="false" on-boot="true" taskmanage="false" type="capp"&gt;
+   &lt;label&gt;servicenew&lt;/label&gt;
+   &lt;label xml:lang="en-gb"&gt;testlabel&lt;/label&gt;
+   &lt;icon&gt;servicenew.png&lt;/icon&gt;
+   &lt;app-control&gt;
+      &lt;operation name="http://tizen.org/appcontrol/operation/compose"/&gt;
+      &lt;uri name="testuristring"/&gt;
+      &lt;mime name="application/pdf"/&gt;
+   &lt;/app-control&gt;
+   &lt;metadata key="testkey1" value="testvalue2"/&gt;
+   &lt;metadata key="testkey" value="testvalue"/&gt;
 &lt;/service-application&gt;
-</pre>  
+</pre>
 
 <h3 id="watch_app">&lt;watch-application&gt; Element</h3>
   <p>This element contains the settings for the watch application.</p>
@@ -721,9 +721,9 @@
    </ul>
 
 <pre class="prettyprint">
-&lt;watch-application ambient-support=&quot;true&quot; appid=&quot;org.tizen.watchsample&quot; exec=&quot;watchsample&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;.....&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon&gt;.....&lt;/icon&gt;
+&lt;watch-application ambient-support="true" appid="org.tizen.watchsample" exec="watchsample"&gt;
+   &lt;label&gt;.....&lt;/label&gt;
+   &lt;icon&gt;.....&lt;/icon&gt;
 &lt;/watch-application&gt;
 </pre>
 
@@ -763,60 +763,60 @@
 <h3 id="widget_app">&lt;widget-application&gt; Element</h3>
   <p>This element contains the settings for the widget application.</p>
 <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p>
-<p><strong>Occurrences:</strong> </p> 
+<p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 (optional)</li> 
+<li>1 (optional)</li>
       </ul>
-<p><strong>Expected children:</strong> </p>      
+<p><strong>Expected children:</strong> </p>
            <table border="1"><tbody>
 <tr>
-<th width="50%">Child element</th> 
-     <th>Occurrences</th> 
+<th width="50%">Child element</th>
+     <th>Occurrences</th>
     </tr>
 <tr>
-<td><code><a href="#widget_label">&lt;label&gt;</a></code></td> 
-     <td>1 or more</td> 
+<td><code><a href="#widget_label">&lt;label&gt;</a></code></td>
+     <td>1 or more</td>
     </tr>
 <tr>
-<td><code><a href="#widget_icon">&lt;icon&gt;</a></code></td> 
-     <td>1 or more</td> 
+<td><code><a href="#widget_icon">&lt;icon&gt;</a></code></td>
+     <td>1 or more</td>
     </tr>
 <tr>
-<td><code><a href="#widget_supportsize">&lt;support-size&gt;</a></code></td> 
-     <td>1</td> 
+<td><code><a href="#widget_supportsize">&lt;support-size&gt;</a></code></td>
+     <td>1</td>
     </tr>
 </tbody></table>
-<p><strong>Attributes:</strong> </p>      
+<p><strong>Attributes:</strong> </p>
          <ul>
                <li><code>appid</code>
-               
-               <p>Widget application unique ID (string)</p></li> 
+
+               <p>Widget application unique ID (string)</p></li>
                <li><code>exec</code>
-               <p>Widget application executable file name (string)</p></li> 
+               <p>Widget application executable file name (string)</p></li>
                <li><code>main</code>
-               <p>Indicates which widget application is the main application (available values: <code>true</code>, <code>false</code>)</p></li> 
+               <p>Indicates which widget application is the main application (available values: <code>true</code>, <code>false</code>)</p></li>
                <li><code>update-period</code>
                <p>Indicates the update period in seconds (available values: time in seconds)</p>
-               <p>Multiples of 1800 only allowed</p></li> 
+               <p>Multiples of 1800 only allowed</p></li>
       </ul>
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;widget-application appid=&quot;org.tizen.test&quot; exec=&quot;test&quot; main=&quot;true&quot; update-period=&quot;0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;.....&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon&gt;.....&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;support-size&gt;.....&lt;/support-size&gt;
+&lt;widget-application appid="org.tizen.test" exec="test" main="true" update-period="0"&gt;
+   &lt;label&gt;.....&lt;/label&gt;
+   &lt;icon&gt;.....&lt;/icon&gt;
+   &lt;support-size&gt;.....&lt;/support-size&gt;
 &lt;/widget-application&gt;
 </pre>
 
 <h4 id="widget_label">&lt;label&gt; Element</h4>
-  <p>This element contains the widget application text.</p> 
-<p><strong>Occurrences:</strong> </p> 
+  <p>This element contains the widget application text.</p>
+<p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more</li> 
+<li>1 or more</li>
       </ul>
 
-<p><strong>Expected value:</strong> </p>     
+<p><strong>Expected value:</strong> </p>
          <ul>
          <li>Label value in string</li>
       </ul>
@@ -826,13 +826,13 @@
 </pre>
 
 <h4 id="widget_icon">&lt;icon&gt; Element</h4>
-  <p>This element contains the widget application icon image.</p> 
-<p><strong>Occurrences:</strong> </p> 
+  <p>This element contains the widget application icon image.</p>
+<p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more</li> 
+<li>1 or more</li>
       </ul>
 
-<p><strong>Expected value:</strong> </p>     
+<p><strong>Expected value:</strong> </p>
          <ul>
          <li>Icon file name</li>
       </ul>
@@ -842,19 +842,19 @@
 </pre>
 
 <h4 id="widget_supportsize">&lt;support-size&gt; Element</h4>
-  <p>This element contains the size supported by the widget application.</p> 
-<p><strong>Occurrences:</strong> </p> 
+  <p>This element contains the size supported by the widget application.</p>
+<p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1</li> 
+<li>1</li>
       </ul>
-<p><strong>Attributes:</strong> </p> 
+<p><strong>Attributes:</strong> </p>
                <ul>
          <li><code>preview</code>
          <p>Relative path to the preview image (available values: file name)</p>
          <p>The image is shown on the home screen when the user tries to select the widget.</p></li>
       </ul>
 
-<p><strong>Expected value:</strong> </p>     
+<p><strong>Expected value:</strong> </p>
          <ul>
          <li><code>2x2</code> (in mobile and wearable)</li>
          <li><code>4x1</code> (in mobile only)</li>
@@ -865,7 +865,7 @@
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;support-size preview=&quot;preview.png&quot;&gt;2x2&lt;/support-size&gt;
+&lt;support-size preview="preview.png"&gt;2x2&lt;/support-size&gt;
 </pre>
 
 <h3 id="shortcut-list">&lt;shortcut-list&gt; Element</h3>
@@ -890,7 +890,7 @@
 <p><strong>For example:</strong> </p>
 <pre class="prettyprint">
 &lt;shortcut-list&gt;
-&nbsp;&nbsp;&nbsp;&lt;shortcut&gt;.....&lt;/shortcut&gt;
+   &lt;shortcut&gt;.....&lt;/shortcut&gt;
 &lt;/shortcut-list&gt;
 </pre>
 
@@ -930,104 +930,104 @@
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;shortcut appid=&quot;org.example.shortcut&quot; extra_data=&quot;data&quot; extra_key=&quot;key&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon&gt;shortcut.png&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;shortcut&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;label xml:lang=&quot;en-us&quot;&gt;short&lt;/label&gt;
+&lt;shortcut appid="org.example.shortcut" extra_data="data" extra_key="key"&gt;
+   &lt;icon&gt;shortcut.png&lt;/icon&gt;
+   &lt;label&gt;shortcut&lt;/label&gt;
+   &lt;label xml:lang="en-us"&gt;short&lt;/label&gt;
 &lt;/shortcut&gt;
 </pre>
 
 <h3 id="account">&lt;account&gt; Element</h3>
   <p>This element contains a set of user accounts and account provider-related information in the Tizen application.</p>
 <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p>
-<p><strong>Occurrences:</strong> </p> 
+<p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 (optional)</li> 
+<li>1 (optional)</li>
       </ul>
-<p><strong>Expected children:</strong> </p>      
+<p><strong>Expected children:</strong> </p>
            <table border="1"><tbody>
 <tr>
-<th width="50%">Child element</th> 
-     <th>Occurrences</th> 
+<th width="50%">Child element</th>
+     <th>Occurrences</th>
     </tr>
 <tr>
-<td><code><a href="#accountprovider">&lt;account-provider&gt;</a></code></td> 
-     <td>1 or more</td> 
+<td><code><a href="#accountprovider">&lt;account-provider&gt;</a></code></td>
+     <td>1 or more</td>
     </tr>
 </tbody></table>
 
-<p><strong>For example:</strong> </p> 
+<p><strong>For example:</strong> </p>
 <pre class="prettyprint">
 &lt;account&gt;
-&nbsp;&nbsp;&nbsp;&lt;account-provider&gt;.....&lt;/account-provider&gt;
+   &lt;account-provider&gt;.....&lt;/account-provider&gt;
 &lt;/account&gt;
 </pre>
 
 <h4 id="accountprovider">&lt;account-provider&gt; Element</h4>
   <p>This element contains a specific service provider or user account protocol-related information.</p>
-  
-<p><strong>Expected children:</strong> </p>      
+
+<p><strong>Expected children:</strong> </p>
            <table border="1"><tbody>
 <tr>
-<th width="50%">Child element</th> 
-     <th>Occurrences</th> 
+<th width="50%">Child element</th>
+     <th>Occurrences</th>
     </tr>
 <tr>
-<td><code><a href="#icon">&lt;icon&gt;</a></code></td> 
-     <td>1 or more</td> 
+<td><code><a href="#icon">&lt;icon&gt;</a></code></td>
+     <td>1 or more</td>
     </tr>
 <tr>
-<td><code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code></td> 
-     <td>1 or more</td> 
+<td><code><a href="manifest_elements_n.htm#label">&lt;label&gt;</a></code></td>
+     <td>1 or more</td>
     </tr>
 <tr>
-<td><code><a href="#capability">&lt;capability&gt;</a></code></td> 
-     <td>1 or more (optional)</td> 
+<td><code><a href="#capability">&lt;capability&gt;</a></code></td>
+     <td>1 or more (optional)</td>
     </tr>
 </tbody></table>
-<p><strong>Attributes:</strong> </p>      
+<p><strong>Attributes:</strong> </p>
          <ul>
                <li><code>appid</code>
                <p>Application unique ID (string)</p>
-               <p>This can be used for launching or terminating the application explicitly. </p></li> 
+               <p>This can be used for launching or terminating the application explicitly. </p></li>
                <li><code>multiple-accounts-support</code>
-               <p>Indicates whether multiple accounts are supported (available values: <code>true</code>, <code>false</code>)</p></li> 
+               <p>Indicates whether multiple accounts are supported (available values: <code>true</code>, <code>false</code>)</p></li>
                <li><code>providerid</code>
-               <p>ID of the account provider (string)</p></li> 
+               <p>ID of the account provider (string)</p></li>
       </ul>
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;account-provider appid=&quot;org.tizen.uiapp&quot; multiple-accounts-support=&quot;false&quot; providerid=&quot;org.tizen.uiapp&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;icon&gt;.....&lt;/icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;label&gt;.....&lt;/label&gt;
-&nbsp;&nbsp;&nbsp;&lt;capability&gt;.....&lt;/capability&gt;
+&lt;account-provider appid="org.tizen.uiapp" multiple-accounts-support="false" providerid="org.tizen.uiapp"&gt;
+   &lt;icon&gt;.....&lt;/icon&gt;
+   &lt;label&gt;.....&lt;/label&gt;
+   &lt;capability&gt;.....&lt;/capability&gt;
 &lt;/account-provider&gt;
 </pre>
 
 <h4 id="icon">&lt;icon&gt; Element</h4>
   <p>This element contains the account provider icon image. Since the icons are used in the device under settings, the account icons are placed in a shared directory.</p>
-         <p><strong>Attributes:</strong> </p>      
+         <p><strong>Attributes:</strong> </p>
       <ul>
 <li><code>section</code>
-<p>Usage information of the icon image (available values: <code>account</code> (image size: 72 x 72 for density xhigh and 48 x 48 for density high), <code>account-small</code> (image size: 45 x 45 for density xhigh and 30 x 30 for density high))</p></li> 
+<p>Usage information of the icon image (available values: <code>account</code> (image size: 72 x 72 for density xhigh and 48 x 48 for density high), <code>account-small</code> (image size: 45 x 45 for density xhigh and 30 x 30 for density high))</p></li>
       </ul>
-<p><strong>Expected value:</strong> </p>      
+<p><strong>Expected value:</strong> </p>
       <ul>
-<li>Icon file name</li> 
+<li>Icon file name</li>
       </ul>
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;icon section=&quot;account&quot;&gt;uiapp.png&lt;/icon&gt;
-&lt;icon section=&quot;account-small&quot;&gt;uiapp.png&lt;/icon&gt;
+&lt;icon section="account"&gt;uiapp.png&lt;/icon&gt;
+&lt;icon section="account-small"&gt;uiapp.png&lt;/icon&gt;
 </pre>
 
 <h4 id="capability">&lt;capability&gt; Element</h4>
   <p>This element contains the account provider capability. The capabilities are defined as <code>http://&lt;VENDOR_INFORMATION&gt;/account/capability/&lt;NAME&gt;</code>.</p>
-         <p><strong>Expected value:</strong> </p>      
+         <p><strong>Expected value:</strong> </p>
       <ul>
-<li>IRI string</li> 
+<li>IRI string</li>
       </ul>
 
 <p><strong>For example:</strong></p>
@@ -1044,45 +1044,45 @@
 <p align="center"><strong>Figure: Editing the &lt;privileges&gt; element in the manifest editor</strong></p>
 <p align="center"><img alt="Editing the privileges element in the manifest editor" src="../images/manifest_privilege.png" /></p>
 
-<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p> 
+<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p> <p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 (optional)</li> 
+<li>1 (optional)</li>
       </ul>
-<p><strong>Expected children:</strong> </p> 
+<p><strong>Expected children:</strong> </p>
   <table border="1"><tbody>
 <tr>
-<th width="50%">Child element</th> 
-     <th>Occurrences</th> 
+<th width="50%">Child element</th>
+     <th>Occurrences</th>
     </tr>
 <tr>
-<td><a href="#privilege"><code>&lt;privilege&gt;</code></a></td> 
-     <td>1 or more (optional)</td> 
+<td><a href="#privilege"><code>&lt;privilege&gt;</code></a></td>
+     <td>1 or more (optional)</td>
     </tr>
 </tbody></table>
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;.....&lt;/privilege&gt;
+   &lt;privilege&gt;.....&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 
 <h4 id="privilege">&lt;privilege&gt; Element</h4>
-  <p>This element contains the required privileges for the Tizen application.</p> 
-<p><strong>Occurrences:</strong> </p> 
+  <p>This element contains the required privileges for the Tizen application.</p>
+<p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 or more (optional)</li>
       </ul>
-<p><strong>Expected value:</strong> </p> 
+<p><strong>Expected value:</strong> </p>
 <p>Name (mandatory, the URI of the Device API privilege)</p>
-<p>For example:</p>     
+<p>For example:</p>
          <ul>
          <li><code>http://tizen.org/privilege/application.admin</code></li>
       <li><code>http://tizen.org/privilege/appmanager.launch</code></li>
       <li><code>http://tizen.org/privilege/account.read</code></li>
 
       </ul>
-<p>For more information on the expected values, see <a href="../../../org.tizen.training/html/native/details/sec_privileges_n.htm">Security and API Privileges</a>.</p> 
+<p>For more information on the expected values, see <a href="../../../org.tizen.training/html/native/details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
@@ -1092,7 +1092,7 @@
 </pre>
 
 <h3 id="feature">&lt;feature&gt; Element</h3>
-  <p>This element contains a list of required features for feature-based filtering in the Tizen Store.</p> 
+  <p>This element contains a list of required features for feature-based filtering in the Tizen Store.</p>
 
 <p>The element is used to define the hardware and software components for the Tizen application. In order to use or access an API that is specialized for each vendor or platform, the feature must be declared. This element has no child elements.</p>
 <p align="center"><strong>Figure: Editing the &lt;feature&gt; element in the manifest editor</strong></p>
@@ -1100,26 +1100,26 @@
 
 <p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p>  <p><strong>Occurrences:</strong> </p>
       <ul>
-<li>1 or more (optional)</li> 
+<li>1 or more (optional)</li>
       </ul>
-<p><strong>Attributes:</strong> </p>      
+<p><strong>Attributes:</strong> </p>
          <ul>
 <li><code>name</code> (mandatory, a feature key URI)
-<p>Item name used in feature-based filtering in the Tizen Store, for example, <code>&quot;http://tizen.org/feature/camera&quot;</code>, <code>&quot;http://tizen.org/feature/fmradio&quot;</code></p>
-<p>For more information on the expected values and the application filtering mechanism, see <a href="../../../org.tizen.training/html/native/details/app_filtering_n.htm">Application Filtering</a>.</p></li> 
+<p>Item name used in feature-based filtering in the Tizen Store, for example, <code>"http://tizen.org/feature/camera"</code>, <code>"http://tizen.org/feature/fmradio"</code></p>
+<p>For more information on the expected values and the application filtering mechanism, see <a href="../../../org.tizen.training/html/native/details/app_filtering_n.htm">Application Filtering</a>.</p></li>
       </ul>
 
-<p><strong>Expected value:</strong> </p>      
+<p><strong>Expected value:</strong> </p>
       <ul>
-<li><code>true</code></li> 
+<li><code>true</code></li>
       </ul>
 
 <p><strong>For example:</strong></p>
 <pre class="prettyprint">
-&lt;feature name=&quot;http://tizen.org/feature/camera&quot;&gt;true&lt;/privilege&gt;
-&lt;feature name=&quot;http://tizen.org/feature/fmradio&quot;&gt;true&lt;/privilege&gt;
+&lt;feature name="http://tizen.org/feature/camera"&gt;true&lt;/privilege&gt;
+&lt;feature name="http://tizen.org/feature/fmradio"&gt;true&lt;/privilege&gt;
 </pre>
-               
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
@@ -1142,4 +1142,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/org.tizen.studio/html/native_tools/multiple_screen_n.htm b/org.tizen.studio/html/native_tools/multiple_screen_n.htm
index 2f24700..81f3b5b 100644 (file)
--- a/org.tizen.studio/html/native_tools/multiple_screen_n.htm
+++ b/org.tizen.studio/html/native_tools/multiple_screen_n.htm
@@ -160,7 +160,7 @@
 
 <p>The following table shows the components for multiple screens.</p>
 <p align="center" class="Table"><strong>Table: Components for multiple screens</strong></p>
-<table>        
+<table>
        <tbody>
        <tr>
                <th>Category</th>
@@ -203,7 +203,7 @@
 </table>
 
                        <h2 id="design">Designing Applications with Multiple Screens</h2>
-                       
+
 <p>With the default resources only, you can make an application without alternative resources. The default resource is displayed on the screen through automatic scaling of the EFL libraries at runtime.</p>
 <p>If you want to increase the quality of the resources or provide device-specific screens in the application, use the <strong>Resource Manager</strong> view, which supports alternative resources.</p>
 
@@ -229,7 +229,7 @@
 <li>Add a Background UI component by dragging and dropping a background from the <strong>Palette</strong> to the grid.</li>
 <li>Add a Button UI component by dragging and dropping a button from the <strong>Palette</strong> to the grid.</li>
 <li>Input a string key.
-<p>If you type &#39;@&#39; at the <strong>Text</strong> property of the <strong>Properties</strong> view, the auto-completion shows a list of available resource keys.</p>
+<p>If you type '@' at the <strong>Text</strong> property of the <strong>Properties</strong> view, the auto-completion shows a list of available resource keys.</p>
 </li>
 <li>Change a locale.
 <p>If you change a locale on the toolbar, the view shows a preview of the localized string.</p>
@@ -313,13 +313,13 @@ If there is no alternative resource corresponding to a specific locale, the defa
 <p align="center"><img src="../images/multiple_screen_alternative2.png" alt="Specifying alternative resources" /></p>
 
 <p>The naming rule for alternative resources in the <strong>Properties</strong> view is <code>@resource/key</code>, where <code>@resource</code> is the annotation symbol specifying the resource file for the alternative resource, and <code>key</code> is the resource key.</p>
-<p>When you enter &#39;@&#39; at the <strong>Image path</strong> in the <strong>Properties</strong> view, the auto-completion shows a list of resource keys.</p>
+<p>When you enter '@' at the <strong>Image path</strong> in the <strong>Properties</strong> view, the auto-completion shows a list of resource keys.</p>
 
                        <h2 id="alternative">Using Alternative UI Layouts</h2>
 
 <p>To use multiple UI layouts for each screen configuration:</p>
 <ol>
-<li>In the <strong>Screen Configurator</strong>, configure the specific screen. 
+<li>In the <strong>Screen Configurator</strong>, configure the specific screen.
 <p>Open the <strong>Screen Configurator</strong> window by clicking the applicable icon on the <strong>Layout Editor</strong> toolbar.</p>
 <p align="center"><img src="../images/multiple_screen_alternative_layout.png" alt="Configuring an alternative layout" /></p>
 
@@ -360,8 +360,8 @@ If there is no alternative resource corresponding to a specific locale, the defa
 
 <p>In the Tizen Studio, UI components are in the same memory space. If you delete a UI component in one configuration, the <strong>Variation</strong> properties of the component are removed from all other screen configurations too. Therefore, to design a UI for each screen configuration, the <strong>Variation</strong> properties of the UI components must be set differently for visibility.</p>
 
-                       
-                       
+
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/native_tools/po_file_editor_n.htm b/org.tizen.studio/html/native_tools/po_file_editor_n.htm
index 903be71..b362b99 100644 (file)
--- a/org.tizen.studio/html/native_tools/po_file_editor_n.htm
+++ b/org.tizen.studio/html/native_tools/po_file_editor_n.htm
@@ -60,9 +60,9 @@ Internationalization is the process of making your application able to adapt to
 <p align="center"><strong>Figure: PO file editor</strong></p>
 <p align="center"><img src="../images/po_file_editor.png" alt="PO file editor" /></p>
 
-       
+
        <h2 id="languages">Adding and Removing Languages</h2>
-       
+
 <p>To add a new language, click the Add Language icon (<img src="../images/po_file_editor_add_icon.png" alt="Add language" />) and select a language code item in the <strong>Add Languages</strong> dialog.</p>
 
 <p align="center"><strong>Figure: Adding a language</strong></p>
@@ -71,7 +71,7 @@ Internationalization is the process of making your application able to adapt to
 <p>If you select a base language when adding a new language, you can add and edit strings based on the base language. For example, you can select English (US) as base language when adding a new English (Canada) language, if the English (US) language already exists.</p>
 <p>To remove a language, click the Remove Language icon (<img src="../images/po_file_editor_remove_icon.png" alt="Remove language" />), and select a language code item in the <strong>Remove Languages</strong> dialog.</p>
 
-       
+
        <h2 id="strings">Adding, Editing, and Removing Strings</h2>
 
 <p>The string table in the PO file editor shows the string keys and translated strings of the supported languages. The string keys are in the first column, and the translated strings are listed from the second column forward.</p>
diff --git a/org.tizen.studio/html/native_tools/project_conversion_n.htm b/org.tizen.studio/html/native_tools/project_conversion_n.htm
index 3abe3b5..5568e55 100644 (file)
--- a/org.tizen.studio/html/native_tools/project_conversion_n.htm
+++ b/org.tizen.studio/html/native_tools/project_conversion_n.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Converting Projects for CLI</title>  
+       <title>Converting Projects for CLI</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -45,23 +45,23 @@
 <p>To build a Tizen Studio project on the CLI, you must convert the project to a CLI project:</p>
 <ol>
 <li>In the Tizen Studio, open the project you want to convert.</li>
-<li>Right-click the project and select <strong>Export to CLI Project</strong>. 
+<li>Right-click the project and select <strong>Export to CLI Project</strong>.
 <p>An info dialog appears, and the <code>project_def.prop</code> and <code>build_def.prop</code> files and the <code>Build</code> directory are created.</p>
 </li>
 </ol>
 <p>The Tizen Studio and CLI differ on how they describe the project properties and build configuration. The CLI uses the <code>project_def.prop</code> file for the project properties and the <code>build_def.prop</code> file for the build configurations. During the export, the <code>project_def.prop</code>, <code>build_def.prop</code>, and the makefiles are added to the converted CLI project automatically.</p>
 
-<p align="center"><strong>Figure: Project conversion</strong></p> 
+<p align="center"><strong>Figure: Project conversion</strong></p>
 <p align="center"><img alt="Project conversion" src="../images/project_conversion_export_to_CLI.png"/></p>
 
 <h2 id="about_project_def">About the project_def.prop file</h2>
- 
+
 <p>The <code>project_def.prop</code> file describes the project properties, such as project type and list of source files. When you edit the properties in the <code>project_def.prop</code> file to manipulate the build or packaging process, use the following characters:</p>
 <ul>
-<li>&quot;/&quot; is a path separator character (in Windows&reg;, Ubuntu, and Mac OS&reg; X).</li>
-<li>&quot;\&quot; is a multi-line character, which is used at the end of each line.</li>
-<li>&quot;\ &quot; is a space character, used in a path name that contains a space character.</li>
-<li>&quot;#&quot; is a comment character.</li>
+<li>"/" is a path separator character (in Windows&reg;, Ubuntu, and Mac OS&reg; X).</li>
+<li>"\" is a multi-line character, which is used at the end of each line.</li>
+<li>"\ " is a space character, used in a path name that contains a space character.</li>
+<li>"#" is a comment character.</li>
 </ul>
 
 <p align="center" class="Table"><strong>Table: Project properties</strong></p>
diff --git a/org.tizen.studio/html/native_tools/project_explorer_view_n.htm b/org.tizen.studio/html/native_tools/project_explorer_view_n.htm
index 357d88a..9898d54 100644 (file)
--- a/org.tizen.studio/html/native_tools/project_explorer_view_n.htm
+++ b/org.tizen.studio/html/native_tools/project_explorer_view_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,7 +29,7 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#opening">Opening the Project Explorer View</a></li>
-                       <li><a href="#view">Using the Project Explorer View</a></li>    
+                       <li><a href="#view">Using the Project Explorer View</a></li>
                </ul>
        </div></div>
 </div>
@@ -38,11 +38,11 @@
 <h1>Managing Tizen Projects with Project Explorer View</h1>
 <p>The <strong>Project Explorer</strong> view allows you to view and manage Tizen projects. You can view and change the resources of a project in the view, and build, export, and convert projects through the view.</p>
 
-<p align="center"><strong>Figure: Project Explorer</strong></p> 
+<p align="center"><strong>Figure: Project Explorer</strong></p>
 <p align="center"> <img alt="Project Explorer" src="../images/proj_explorer_n.png" /> </p>
 
 <p>In this view, you can:</p>
-<ul> 
+<ul>
    <li>Browse the file elements</li>
    <li>Open files in the editor view</li>
    <li>Open projects in a new window</li>
@@ -55,7 +55,7 @@
 <h2 id="opening">Opening the Project Explorer View</h2>
 <p>Usually, the <strong>Project Explorer</strong> view is located in the left-top side in the Tizen Studio. You can change the position by dragging and dropping it. If you close the view, you can show it again by selecting <strong>Project Explorer</strong> in <strong>Window &gt; Show View &gt; Other &gt; General</strong>.</p>
 
-<p align="center"><strong>Figure: Opening the view</strong></p> 
+<p align="center"><strong>Figure: Opening the view</strong></p>
 <p align="center"> <img alt="Opening the view" src="../images/proj_explorer_general.png" /> </p>
 
 <h2 id="view">Using the Project Explorer View</h2>
@@ -127,7 +127,7 @@
  <td><strong>New</strong></td>
  <td>Allows you to create a new resource in the workbench. Select the type of resource to create from the submenu.</td>
  </tr>
- 
+
  <tr>
  <td><strong>Delete</strong></td>
  <td>Deletes the selected resource from the workspace.</td>
@@ -146,7 +146,7 @@
  </tr>
  <tr>
  <td><strong>Build Signed Package</strong></td>
- <td>Makes a &#39;signed&#39; package. This option requires a certificate profile. You can create a certificate profile in <strong>Tools &gt; Certificate Manager</strong>.</td>
+ <td>Makes a 'signed' package. This option requires a certificate profile. You can create a certificate profile in <strong>Tools &gt; Certificate Manager</strong>.</td>
  </tr>
  <tr>
  <td><strong>Localization</strong></td>
@@ -171,7 +171,7 @@
  <tr>
  <td><strong>Properties</strong></td>
  <td>Displays the properties of the selected resource. The displayed properties depend on what type of resource is selected. Resource properties can include (but are not limited to):
- <ul> 
+ <ul>
    <li>Path relative to the project in which it is held</li>
    <li>Type of the resource</li>
    <li>Absolute file system path, or name of the path variable when using linked resources</li>
diff --git a/org.tizen.studio/html/native_tools/project_wizard_n.htm b/org.tizen.studio/html/native_tools/project_wizard_n.htm
index a71e587..c951b7c 100644 (file)
--- a/org.tizen.studio/html/native_tools/project_wizard_n.htm
+++ b/org.tizen.studio/html/native_tools/project_wizard_n.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Tizen Projects with Tizen Project Wizard</title>  
+       <title>Creating Tizen Projects with Tizen Project Wizard</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -54,9 +54,9 @@
 <h2 id="type">Project Type</h2>
 <p>When the Tizen Project Wizard opens, you must first select the project type.</p>
 
-<p align="center"><strong>Figure: Selecting the project type</strong></p> 
-<p align="center"><img alt="Selecting the project type" src="../images/project_wizard_type.png" /></p> 
- 
+<p align="center"><strong>Figure: Selecting the project type</strong></p>
+<p align="center"><img alt="Selecting the project type" src="../images/project_wizard_type.png" /></p>
+
 <p>The Tizen Studio provides various project templates and samples for the mobile and wearable devices according to the installed platform. The Tizen Project Wizard helps you select the template and sample for your project.</p>
 <p>The <strong>Template</strong> option provides a list of templates with a basic structure where you can start the native application project:</p>
 <ul>
@@ -80,7 +80,7 @@
        </li></ul>
 </li>
 </ul>
-       
+
 <p>The <strong>Sample</strong> option provides a list of sample applications demonstrating various API usage and UI design.</p>
 <p>To move to the next step, select the project type and click <strong>Next</strong>.</p>
 
@@ -88,34 +88,34 @@
 <p>You can select the profile and version supported by your project, such as a mobile or wearable device. In addition, the Tizen Studio shows you which platforms among the supported platforms have been installed.</p>
 <p>Based on the selected profile and version, a list of templates is shown in the template selection step.</p>
 
-<p align="center"><strong>Figure: Selecting the profile and version</strong></p> 
-<p align="center"><img alt="File analysis" src="../images/project_wizard_profile_n.png" /></p> 
- 
+<p align="center"><strong>Figure: Selecting the profile and version</strong></p>
+<p align="center"><img alt="File analysis" src="../images/project_wizard_profile_n.png" /></p>
+
 <p>To move to the next step, select the profile and version, and click <strong>Next</strong>.</p>
 
 <h2 id="app_type">Application Type</h2>
 <p>You can select the native or Web application type for your project. For more information, see <a href="../../../org.tizen.training/html/native/cover_page_n.htm">Native Application</a> and <a href="../../../org.tizen.training/html/web/cover_page_w.htm">Web Application</a>.</p>
 <p>Based on the selected application type, a list of templates is shown in the template selection step.</p>
 
-<p align="center"><strong>Figure: Selecting the application type</strong></p> 
-<p align="center"><img alt="Selecting the application type" src="../images/project_wizard_app_type_n.png" /></p> 
- 
+<p align="center"><strong>Figure: Selecting the application type</strong></p>
+<p align="center"><img alt="Selecting the application type" src="../images/project_wizard_app_type_n.png" /></p>
+
 <p>To move to the next step, select the application type and click <strong>Next</strong>.</p>
 
 <h2 id="template">Template</h2>
 <p>You can select the template for your project while viewing information about a variety of templates. The Tizen Project Wizard creates the project based on the selected template.</p>
 
-<p align="center"><strong>Figure: Selecting the template</strong></p> 
-<p align="center"><img alt="Selecting the template" src="../images/project_wizard_template.png" /></p> 
+<p align="center"><strong>Figure: Selecting the template</strong></p>
+<p align="center"><img alt="Selecting the template" src="../images/project_wizard_template.png" /></p>
 
 <p>To move to the next step, select the template and click <strong>Next</strong>.</p>
 
 <h2 id="properties">Project Properties</h2>
 <p>You can set basic project properties, such as the project name, location, and working sets.</p>
 
-<p align="center"><strong>Figure: Setting project properties</strong></p> 
-<p align="center"><img alt="Setting project properties" src="../images/project_wizard_properties.png" /></p> 
- 
+<p align="center"><strong>Figure: Setting project properties</strong></p>
+<p align="center"><img alt="Setting project properties" src="../images/project_wizard_properties.png" /></p>
+
 <p>The options you can set are listed in the following table.</p>
 
 <p align="center" class="Table"><strong>Table: Project properties</strong></p>
@@ -149,7 +149,7 @@
  </tbody></table>
 
 <p>After specifying the options, click <strong>Finish</strong> to create the new project.</p>
- 
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/native_tools/resource_manager_n.htm b/org.tizen.studio/html/native_tools/resource_manager_n.htm
index 6003e21..f400a80 100644 (file)
--- a/org.tizen.studio/html/native_tools/resource_manager_n.htm
+++ b/org.tizen.studio/html/native_tools/resource_manager_n.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Providing Resources for Multiple Device Types</title>  
+       <title>Providing Resources for Multiple Device Types</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -46,11 +46,11 @@
 </div>
 
 <h2 id="directory_hierarchy">Resource Directory Hierarchy</h2>
- 
+
 <p>An application must provide a different UI depending on a specific device configuration, such as the screen size and screen orientation. When developing the application, provide alternative resources for each device display state by grouping them in resource directories.</p>
-<p>The <code>res/contents</code> directory contains predefined directories for specific alternative resources, and the <code>res.xml</code> file that is referenced at application runtime. The following example of a Basic UI project shows how to group the resources in your project. Place resources, such as images and sounds, in a specific subdirectory of the project&#39;s <code>res/contents</code> directory or the root directory of the <code>contents</code> directory.</p>
+<p>The <code>res/contents</code> directory contains predefined directories for specific alternative resources, and the <code>res.xml</code> file that is referenced at application runtime. The following example of a Basic UI project shows how to group the resources in your project. Place resources, such as images and sounds, in a specific subdirectory of the project's <code>res/contents</code> directory or the root directory of the <code>contents</code> directory.</p>
 
-<p align="center"><strong>Figure: Resource directory hierarchy</strong></p> 
+<p align="center"><strong>Figure: Resource directory hierarchy</strong></p>
 <p align="center"><img alt="Resource directory hierarchy" src="../images/resource_manager_directory_hierarchy.png"/></p>
 
 <div class="note">
@@ -128,10 +128,10 @@
  </tr>
  </tbody>
  </table>
- 
+
  <p>The <code>res.xml</code> file is composed of XML elements, and describes where each alternative resource is grouped into a device configuration. The following example shows a <code>res.xml</code> file based on the BasicUI project.</p>
 
-<p align="center"><strong>Figure: res.xml file</strong></p> 
+<p align="center"><strong>Figure: res.xml file</strong></p>
 <p align="center"><img alt="res.xml file" src="../images/resource_manager_res_xml.png"/></p>
 
 <p>The <code>res.xml</code> file is automatically generated as part of the build packaging process by the Tizen Studio. Since editing the <code>res.xml</code> file manually is not easy, the Tizen Studio helps to minimize this difficulty by supporting the <strong>Resource Manager</strong> view.</p>
@@ -156,12 +156,12 @@
 <ol>
 <li>Open the <strong>Resource Configuration</strong> dialog by clicking <img alt="Setting icon" src="../images/resource_manager_cogwheel_icon.png"/> in the <strong>Resource Manager</strong> view toolbar.</li>
 <li>Add a configuration by selecting LDPI and MDPI in the DPI combo box.</li>
-<li>Drag the <code>edje</code> folder and drop it into the proper tab list view area in the <strong>Resource Manager</strong> view. 
+<li>Drag the <code>edje</code> folder and drop it into the proper tab list view area in the <strong>Resource Manager</strong> view.
 The following figure shows the Tab list view (on the left) and the Folding list view (on the right) of the <strong>Resource Manager</strong> view. You can switch between the views using the buttons in the <strong>Resource Manager</strong> view toolbar (<img alt="Folding list" src="../images/resource_manager_folding_lists_view_icon.png"/> to switch to folding lists and <img alt="Tab" src="../images/resource_manager_tab_lists_view_icon.png"/> to switch to tab lists).
 </li>
 </ol>
 
-<p id="tablist" align="center"><strong>Figure: Tab view and Folding list view</strong></p> 
+<p id="tablist" align="center"><strong>Figure: Tab view and Folding list view</strong></p>
 <p align="center"><img alt="Tab view and Folding list view" src="../images/resource_manager_configurations.png"/></p>
 <p align="center"><img alt="" src="../images/resource_manager_edge_res_folder.png"/></p>
 
diff --git a/org.tizen.studio/html/native_tools/static_analyzer_n.htm b/org.tizen.studio/html/native_tools/static_analyzer_n.htm
index 133dfda..8534be5 100644 (file)
--- a/org.tizen.studio/html/native_tools/static_analyzer_n.htm
+++ b/org.tizen.studio/html/native_tools/static_analyzer_n.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Analyzing the Source Code</title>  
+       <title>Analyzing the Source Code</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -42,11 +42,11 @@
 <p>Tizen Static Analyzer uses clang static analyzer to analyze C/C++ code, and reports static issues, such as Dereference of Null Pointers, Memory Leaks, Division by Zero, and Double Free.</p>
 
 <h2 id="run">Running the Static Analyzer</h2>
- 
+
 <p>In the <strong>Project Explorer</strong> view, right-click the project on which you want to run the static analyzer, and select <strong>Check Potential Bugs with Build</strong>.</p>
 <p>The project is automatically built and the static analyzer is run during the build process.</p>
 
-<p align="center"><strong>Figure: Running the Static Analyzer</strong></p> 
+<p align="center"><strong>Figure: Running the Static Analyzer</strong></p>
 <p align="center"><img alt="Running the Static Analyzer" src="../images/static_analyzer_running_analyzer.png"/></p>
 
 <h2 id="customize">Customizing the Static Analyzer</h2>
@@ -69,7 +69,7 @@
 
 <p>When the static analysis is completed, the issues found by the static analyzer are listed in the <strong>Potential Bugs</strong> view on the right pane of the Tizen Studio.</p>
 <p>The issues are categorized based on type. You can expand the categories and double-click the issues to navigate to the exact location of the problem along with the path which caused the issue.</p>
-<p align="center"><strong>Figure: Analysis results in the Potential Bugs view</strong></p> 
+<p align="center"><strong>Figure: Analysis results in the Potential Bugs view</strong></p>
 <p align="center"><img alt="Analysis results in the Potential Bugs view" src="../images/static_analyzer_analysis_results.png"/></p>
 
 
diff --git a/org.tizen.studio/html/native_tools/storyboard_n.htm b/org.tizen.studio/html/native_tools/storyboard_n.htm
index 8466274..6e6a300 100644 (file)
--- a/org.tizen.studio/html/native_tools/storyboard_n.htm
+++ b/org.tizen.studio/html/native_tools/storyboard_n.htm
@@ -42,14 +42,14 @@
 
 <p>The Tizen Storyboard is an additional tab in the UI Builder WYSIWYG editor. It provides an interactive view to help in the design of the page transitions.</p>
 
-<p>The Storyboard provides a bird&#39;s eye picture of all the views present in the application, along with a flowchart of event-based transitions between views. You can visualize page transition in the native application, and form a better understanding of the application functionality. You can also use the Storyboard as a control panel to manage the application views.</p>
+<p>The Storyboard provides a bird's eye picture of all the views present in the application, along with a flowchart of event-based transitions between views. You can visualize page transition in the native application, and form a better understanding of the application functionality. You can also use the Storyboard as a control panel to manage the application views.</p>
 
 <p>The Storyboard consists of a collection of the application views, inter-connected by arrows depicting the change of the view when an event is fired by a user action on a UI component. The Storyboard automatically generates the necessary logic to handle the view transformation, and also provides you auto-generated stubs for defining event handlers for various events of the existing UI components.</p>
 
 <p>The Storyboard is available for applications created with a UI Builder template.</p>
 
        <h2 id="create">Creating a Storyboard Application</h2>
-       
+
 <p>To use the Storyboard, you must create a Tizen native project using a UI Builder template:</p>
 <ol>
 <li>In the project wizard, select the application profile and version.
@@ -62,14 +62,14 @@
 <p align="center"><img src="../images/storyboard_template.png" alt="Select template" /></p>
 </li>
 </ol>
-       
+
        <h2 id="add_view">Adding Views</h2>
-       
+
 <p>When you select the <strong>Storyboard</strong> tab in the WYSIWYG editor, the Storyboard graphical viewer opens. If the <strong>UI Builder - Navigation View</strong> application template is used, the viewer contains 3 default views with some default connections between them. Otherwise, the viewer contains a single view.</p>
 
 <p align="center"><strong>Figure: Views shown in the Storyboard tab</strong></p>
 <p align="center"><img src="../images/storyboard_all_views.png" alt="Views shown in the Storyboard tab" /></p>
-       
+
 <p>To add a new view, right-click the editor, select <strong>Add View</strong>, and select the view type you want.
 Alternatively, you can add a new view in the <strong>Navigation</strong> view and drag and drop the view from the <strong>Navigation</strong> view to the <strong>Storyboard</strong> tab.</p>
 
@@ -78,9 +78,9 @@ Alternatively, you can add a new view in the <strong>Navigation</strong> view an
 
 <p>You can move the views in the viewer by selecting the black label containing the view name and dragging the view to a new position.</p>
 
-       
+
        <h2 id="connection">Creating Connections</h2>
-       
+
 <p>To create a connection between 2 views:</p>
 <ol>
 <li>Press the <strong>Ctrl</strong> key and click the UI component from which the page transition is to happen.</li>
@@ -109,7 +109,7 @@ Alternatively, you can add a new view in the <strong>Navigation</strong> view an
 </ol>
 
        <h2 id="properties">Changing Component and Connection Properties</h2>
-       
+
 <p>When you select a component or connection in the Storyboard, the editable properties related to it are displayed in the <strong>Properties</strong> view. You can view the transition properties and change the connection target view and title.</p>
 
 <p align="center"><strong>Figure: Component properties</strong></p>
@@ -119,14 +119,14 @@ Alternatively, you can add a new view in the <strong>Navigation</strong> view an
 <p align="center"><img src="../images/storyboard_conn_properties.png" alt="Connection properties" /></p>
 
        <h2 id="max_min_view">Maximizing and Minimizing Views</h2>
-       
+
 <p>You can maximize and minimize a set of views in the <strong>Storyboard</strong> tab by toggling the icon in the right top corner of the respective views.</p>
 <p>Use this feature to reduce the clutter of multiple views present in the application without compromising on losing the overall sight of the application project.</p>
 <p>The startup view can be identified by an arrow symbol in the left top corner of the view.</p>
 
 <p align="center"><strong>Figure: Maximizing and minimizing views</strong></p>
 <p align="center"><img src="../images/storyboard_max_min.png" alt="Maximizing and minimizing views" /></p>
-       
+
 
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.studio/html/native_tools/t_trace_n.htm b/org.tizen.studio/html/native_tools/t_trace_n.htm
index 24272be..750cc5d 100644 (file)
--- a/org.tizen.studio/html/native_tools/t_trace_n.htm
+++ b/org.tizen.studio/html/native_tools/t_trace_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
@@ -35,18 +35,18 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-       
+
 <h1>Optimizing Performance with T-trace</h1>
 
 <p>The T-trace is a profiling tool that allows you to optimize application performance by measuring and visualizing instrumented function calls in the Tizen platform. It helps you to understand what the system is doing while your application is running.</p>
 
- 
-<h2 id="dialog" name="dialog">T-trace Dialog</h2> 
+
+<h2 id="dialog" name="dialog">T-trace Dialog</h2>
 
 <p>The following figure illustrates the T-trace dialog elements.</p>
 
-<p align="center"><strong>Figure: T-trace dialog</strong></p> 
-<p style="text-align: center;"> <img alt="T-trace dialog" src="../images/ttrace_dialog.png" /> </p> 
+<p align="center"><strong>Figure: T-trace dialog</strong></p>
+<p style="text-align: center;"> <img alt="T-trace dialog" src="../images/ttrace_dialog.png" /> </p>
 
 <ol><li><strong>Tags</strong>
 <p>You can define which categories to trace. Currently, the T-trace provides several Tizen platform-specific categories, and a few low level system information categories. The Linux kernel and Tizen platform modules (such as EFL, xorg, and mmfw) support the categories.</p>
@@ -74,8 +74,8 @@
 
 <h2 id="run" name="run">Running the T-trace</h2>
 
-<p>When you run the T-trace, the tracing process gathers traces during a specified time period. After tracing is finished, the T-trace processes the traces and creates a trace report in the HTML format.</p> 
- 
+<p>When you run the T-trace, the tracing process gathers traces during a specified time period. After tracing is finished, the T-trace processes the traces and creates a trace report in the HTML format.</p>
+
 <div class="note">
     <strong>Note</strong>
        To operate the T-trace, you must first install Python (2.7.x) and Google Chrome&trade; on your computer.
@@ -117,9 +117,9 @@ $ python ttrace.py --help
 <p>The results are stored in the <code>&lt;TIZEN_STUDIO&gt;/tools/ttrace/trace</code> directory. Both a <code>.text</code> binary-format trace file and a <code>.html</code> result report file are generated. The files are named with a timestamp (YYYYMMDDHHMMSS).</p>
 
 <p>You can view the results using the Google Chrome&trade; browser as a viewer. The viewer is launched with the result report when you click <strong>Show result</strong> in the T-trace dialog. If you run the T-trace from the command line, open the result report manually in the viewer.</p>
- 
-<p align="center"><strong>Figure: T-trace viewer</strong></p> 
-<p style="text-align: center;"> <img alt="T-trace viewer" src="../images/ttrace_viewer.png" /> </p>  
+
+<p align="center"><strong>Figure: T-trace viewer</strong></p>
+<p style="text-align: center;"> <img alt="T-trace viewer" src="../images/ttrace_viewer.png" /> </p>
 
 <p>The following table lists the keyboard shortcuts available in the viewer.</p>
 
@@ -161,7 +161,7 @@ $ python ttrace.py --help
  <tr>
  <td>Right arrow</td>
  <td>Select the next event on the currently selected timeline.</td>
- </tr> 
+ </tr>
   <tr>
  <td>Left arrow</td>
  <td>Select the previous event on the currently selected timeline.</td>
@@ -175,9 +175,9 @@ $ python ttrace.py --help
  <td>Zoom out of the trace timeline.</td>
  </tr>
  </tbody></table>
- 
+
  <h3>Result Report</h3>
- 
+
 <p>The result report allows you to analyze various performance aspects of your application. The report shows how your application interacts with the Tizen framework, according to category tags you selected for tracing. The following table shows the kind of information each tag provides.</p>
 
 <p align="center" class="Table"><strong>Table: Tag-specific information</strong></p>
@@ -214,24 +214,24 @@ $ python ttrace.py --help
  <tr>
  <td>Image</td>
  <td>Shows information on image processing, such as rotation, resize, and encoding.</td>
- </tr> 
- </tbody></table> 
+ </tr>
+ </tbody></table>
 
  <p><strong>Application life-cycle analysis example:</strong></p>
 
 <p>You can analyze your application life-cycle using the T-trace in native <!--and Web--> applications. The following figure illustrates the various states of a Tizen application. The T-trace shows you the state changes as well as how much time is consumed at each state while the application is launching, running, and terminating.</p>
 
-<p align="center"><strong>Figure: Application life-cycle</strong></p> 
-<p style="text-align: center;"> <img alt="Application life-cycle" src="../images/ttrace_lifecycle.png" /> </p>  
+<p align="center"><strong>Figure: Application life-cycle</strong></p>
+<p style="text-align: center;"> <img alt="Application life-cycle" src="../images/ttrace_lifecycle.png" /> </p>
 
 <p>To analyze the application life-cycle, run the T-trace with the <strong>Application manager</strong> tag. <!--For Web applications, enable the  <strong>Web</strong> tag too.--> When the tracing process is finished, the T-trace generates a report, as shown in the following figure.</p>
- 
-<p align="center"><strong>Figure: Application life-cycle report</strong></p> 
-<p style="text-align: center;"> <img alt="Application life-cycle report" src="../images/ttrace_report.png" /> </p> 
+
+<p align="center"><strong>Figure: Application life-cycle report</strong></p>
+<p style="text-align: center;"> <img alt="Application life-cycle report" src="../images/ttrace_report.png" /> </p>
 
 <p>In the section for Kernel and application processes, you can see your application state changes and system information, such as the CPU frequency and kernel task scheduling on a common timeline. With this information, you can investigate in which state your application spends unnecessary time and then make changes to optimize the time usage.</p>
 
- 
+
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
diff --git a/org.tizen.studio/html/native_tools/ui_builder_conversion_n.htm b/org.tizen.studio/html/native_tools/ui_builder_conversion_n.htm
index dd3e508..a29e012 100644 (file)
--- a/org.tizen.studio/html/native_tools/ui_builder_conversion_n.htm
+++ b/org.tizen.studio/html/native_tools/ui_builder_conversion_n.htm
@@ -123,7 +123,7 @@
 
 <p align="center" id="relationship"><strong>Figure: Relationship between UI Builder view system and views</strong></p>
 <p align="center"><img src="../images/uib_convert_views.png" alt="Relationship between UI Builder view system and views" /></p>
- 
+
 <p>The main roles of the view context are:</p>
 <ul>
 <li><strong>Root container</strong>: A top-level UI component of each screen (in the case of the SettingsUI application, the genlist is the top-level UI component). The root container is referenced in the view system when the <strong>settingsui</strong> view is displayed.</li>
@@ -176,11 +176,11 @@
 <li>Select <strong>Sample</strong> and click <strong>Next</strong>.</li>
 <li>Select the <strong>Mobile v2.4</strong> application, <strong>Native Application</strong> type, and <strong>UI &gt; SettingsUI</strong> application sample.
 <p align="center"><img src="../images/uib_convert_sample.png" alt="Select the sample" /></p></li>
-<li>Click <strong>Finish</strong>. 
+<li>Click <strong>Finish</strong>.
 <p>The sample project is created.</p>
 <p align="center"><img src="../images/uib_convert_sample_created.png" alt="Created sample project" /></p></li>
 </ol>
-  
+
 <h3>Converting the SettingsUI Project to a UI Builder Project</h3>
 
 <p>To convert the project:</p>
@@ -212,7 +212,7 @@
 </ol>
 </li>
 <li>Add a user view:
-<p align="center"><img src="../images/uib_convert_user_view.png" alt="Add a user view" /></p> 
+<p align="center"><img src="../images/uib_convert_user_view.png" alt="Add a user view" /></p>
 <ol type="a">
 <li>Enter the name (<strong>settingsui</strong>) for the user view:
        <ul>
@@ -242,13 +242,13 @@
 <div class="note">
        <strong>Note</strong>
        The converted project follows specific naming conventions:
-       <ul><li>A suffix (&quot;withUIB&quot;) is added at the end of the original project name.</li>
+       <ul><li>A suffix ("withUIB") is added at the end of the original project name.</li>
        <li>If the same name with the same suffix already exists on the workspace, an empty serial number is appended at the end of the filename.</li></ul>
 </div>
 
 <h2 id="features">Using UI Builder Features</h2>
 
-<p>In the converted UI Builder project, you can naturally use the functions of the UI Builder&#39;s visual editing. The following examples show how to edit the views and define transitions among them visually.</p>
+<p>In the converted UI Builder project, you can naturally use the functions of the UI Builder's visual editing. The following examples show how to edit the views and define transitions among them visually.</p>
 
 <h3>Designing Views with Visual Editing</h3>
 
@@ -337,10 +337,10 @@
 <p>If you press the <code>item_type_none</code> (<code>ELM_GENLIST_ITEM_NONE</code>) of the genlist in the first view of the <strong>settingsui</strong>, the view in the screen is switched to the second view of the <strong>settingsui</strong>. You can also switch from the user view to the visually-edited view.</p>
 
 <p>The following example shows the transition from the genlist to the view1 when the <code>tree_item_type</code> (<code>ELM_GENLIST_ITEM_TREE</code>) is long-pressed in the genlist. In the <code>settingsui.c</code> file, modify the <code>gl_longpressed_cb()</code> function as shown in the following figure.</p>
- 
+
 <p align="center"><strong>Figure: View transition</strong></p>
 <p align="center"><img src="../images/uib_convert_transition.png" alt="View transition" /></p>
- 
+
 <p>The following figure shows the resulting event flow between the SettingsUI views.</p>
 
 <p align="center"><strong>Figure: Event flow of settingsui view</strong></p>
diff --git a/org.tizen.studio/html/native_tools/ui_builder_n.htm b/org.tizen.studio/html/native_tools/ui_builder_n.htm
index 27baec1..fd194c8 100644 (file)
--- a/org.tizen.studio/html/native_tools/ui_builder_n.htm
+++ b/org.tizen.studio/html/native_tools/ui_builder_n.htm
@@ -135,7 +135,7 @@
 <p>If you move a focus to another UI component in the <strong>Source</strong> tab, the selection in the preview pane is automatically synchronized. Similarly, if you change the selection in the preview pane, the focus in the <strong>Source</strong> tab moves accordingly.</p>
 
        <h2 id="handler">Binding an Event Handler</h2>
-       
+
 <p>An event handler is part of the application logic. It is called by the Tizen framework when any user interaction, such as a mouse click or touch, occurs. The event types differ between UI components, and the event information data depends on the UI component and event type.</p>
 <p>You can add event handlers for UI component events in the <strong>Properties</strong> view. To <a href="storyboard_n.htm">add view transition events between views</a>, use the <strong>Storyboard</strong> tab in the <strong>Layout Editor</strong> view.</p>
 
@@ -166,19 +166,19 @@ void view1_button1_onclicked(uib_view1_view_context *vc, Evas_Object *obj, void
 <li><code>vc</code>: View context related to the event. You can access the UI component in the view through this structure. The following code example shows a sample of the view context.
 <pre class="prettyprint">
 struct _uib_view1_view_context {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Parent evas_object which was a parameter of the create function */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *parent;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Root container UI component of this view */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object* root_container;
-&nbsp;&nbsp;&nbsp;&nbsp;/* View class name */
-&nbsp;&nbsp;&nbsp;&nbsp;const char *view_name;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Control context to control this view */
-&nbsp;&nbsp;&nbsp;&nbsp;struct _uib_view1_control_context *cc;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* UI components in this view */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *grid1;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *button1;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *check1;
+    /* Parent evas_object which was a parameter of the create function */
+    Evas_Object *parent;
+    /* Root container UI component of this view */
+    Evas_Object* root_container;
+    /* View class name */
+    const char *view_name;
+    /* Control context to control this view */
+    struct _uib_view1_control_context *cc;
+
+    /* UI components in this view */
+    Evas_Object *grid1;
+    Evas_Object *button1;
+    Evas_Object *check1;
 };
 typedef struct _uib_view1_view_context;
 </pre>
diff --git a/org.tizen.studio/html/native_tools/ui_project_migration_combi_n.htm b/org.tizen.studio/html/native_tools/ui_project_migration_combi_n.htm
index c8d5dca..d1ff604 100644 (file)
--- a/org.tizen.studio/html/native_tools/ui_project_migration_combi_n.htm
+++ b/org.tizen.studio/html/native_tools/ui_project_migration_combi_n.htm
@@ -24,7 +24,7 @@
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
-                       <li>Tizen Studio 1.1 and Higher</li>            
+                       <li>Tizen Studio 1.1 and Higher</li>
                </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -59,7 +59,7 @@
 <ol>
        <li>In the Tizen Studio, go to <strong>File &gt; New &gt; Tizen Project</strong>.</li>
        <li>Select the <strong>Sample</strong> project type, <strong>Mobile v2.4</strong> profile and version, and the <strong>Native Application</strong> application type.</li>
-       <li>In the list of samples, select <strong>Graphics &gt; GLView11Cube</strong>. 
+       <li>In the list of samples, select <strong>Graphics &gt; GLView11Cube</strong>.
        <p align="center"><img src="../images/prjm_combi_wizard_glview11cube.png" alt="Wizard Pages of the GLView11Cube" /></p>
        </li>
        <li>Click <strong>Next</strong>, give the project a name and ID, and click <strong>Finish</strong>.</li>
@@ -71,9 +71,9 @@
        <li>Copy the related files in the <code>inc</code>, <code>src</code>, and <code>res</code> subfolders.
        <p align="center"><img src="../images/prjm_combi_copyfiles.png" alt="Copying files from the GLView11Cube project" /></p>
        </li>
-       <li>Set hardware acceleration on in the SettingsUIwithUIB project&#39;s manifest file as it is in the GLView11Cube project.
+       <li>Set hardware acceleration on in the SettingsUIwithUIB project's manifest file as it is in the GLView11Cube project.
        <p align="center"><img src="../images/prjm_combi_apply_manifest_hw_accel.png" alt="Apply the hardware acceleration attribute" /></p>
-       </li>   
+       </li>
 </ol>
 </li>
 </ol>
@@ -116,7 +116,7 @@
        </li>
        <li>To use the UI Builder window object, remove the creation part of the core UI component in the <code>glview11cube_create()</code> function.
                <p align="center"><img src="../images/prjm_combi_remove_core_comps.png" alt="Removing Core UI Components" /></p>
-       </li>   
+       </li>
        <li>Add a conditional statement that prevents the <code>root_container</code> from being duplicated, which happens when you transition between the views in the UI Builder view system.</li>
        <li>Change the return value from the <code>bool</code> type <code>true</code> to the <code>Evas_Object*</code> type <code>table</code>.</li>
        <li>Remove the <code>main()</code> function from the <code>glview11cube.c</code> file, as it is not needed anymore.
@@ -132,9 +132,9 @@
        <li>Include the <code>glview11cube.h</code> file for referencing the UI component structure (<code>appdata_s</code>).</li>
        <li>Define the <code>appdata_s</code> structure as <code>ad</code> to be used in the <code>glview11cube_create()</code> function.</li>
        <li>Add a declaration for calling an external function.</li>
-       <li>Assign the UI Builder&#39;s window object to the <code>ad</code> structure.</li>
-       <li>Pass the UI Builder&#39;s window object as a parameter to the <code>glview11cube_create()</code> function and assign the created <code>glview</code> object to the view context&#39;s <code>root_container</code>. At runtime, the GLView11Cube screen is displayed through the <code>root_container</code>.</li>
-</ol>  
+       <li>Assign the UI Builder's window object to the <code>ad</code> structure.</li>
+       <li>Pass the UI Builder's window object as a parameter to the <code>glview11cube_create()</code> function and assign the created <code>glview</code> object to the view context's <code>root_container</code>. At runtime, the GLView11Cube screen is displayed through the <code>root_container</code>.</li>
+</ol>
 
 <p align="center"><strong>Figure: Designing the GLView11Cube view</strong></p>
 <p align="center"><img src="../images/prjm_combi_designing_glview11cube.png" alt="Designing the GLView11Cube view" /></p>
@@ -157,8 +157,8 @@
        <li>Modify the <code>_close_cb()</code> function by replacing the <code>ui_app_exit()</code> function with the <code>uib_util_push_view()</code> function.
        <p>The <code>uib_util_push_view()</code> function is a view transition function provided by the UI Builder view system.</p>
                <p align="center"><img src="../images/prjm_combi_modify_close_cb.png" alt="Modifing close_cb function" /></p>
-               
-       </li>   
+
+       </li>
 </ol>
 </li>
 <li>
@@ -170,14 +170,14 @@
        <li>In the UI Builder <strong>Outline</strong> view, select the <strong>button2</strong> item.
                <p align="center"><img src="../images/prjm_combi_click_button2_outline.png" alt="Outline view" /></p>
        </li>
-       
+
        <li>In the <strong>Properties</strong> view, click <img alt="Plus button" src="../images/prjm_combi_event_plus.png"/> and <img alt="Arrow button" src="../images/prjm_combi_event_arrow_btn.png"/> to add a new <code>clicked</code> event.
                <p align="center"><img src="../images/prjm_combi_add_clicked_event.png" alt="Add clicked event" /></p>
                <p>The <code>uib_view2_event_handler.c</code> file is opened.</p>
-       </li>   
+       </li>
        <li>In the <code>view2_button2_onclicked()</code> function, call the <code>uib_util_push_view()</code> function to switch to the GLView11Cube view.
                <p align="center"><img src="../images/prjm_combi_add_code_event_handler.png" alt="Add event handler code" /></p>
-       </li>   
+       </li>
 </ol>
 </li>
 </ul>
@@ -185,8 +185,8 @@
 <p align="center"><strong>Figure: SettingsUIwithUIB event flow</strong></p>
 <p align="center"><img src="../images/prjm_combi_behavior.png" alt="Behavior flow of SettingsUIwithUIB application" /></p>
 
-               
-                       
+
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/native_tools/unit_test_n.htm b/org.tizen.studio/html/native_tools/unit_test_n.htm
index 6ce2b4f..2918888 100644 (file)
--- a/org.tizen.studio/html/native_tools/unit_test_n.htm
+++ b/org.tizen.studio/html/native_tools/unit_test_n.htm
@@ -43,7 +43,7 @@
 
 <h2 id="create">Creating a Unit Test Project</h2>
 <p>You can create a test project for the Tizen native project through the Tizen Native Unit Test Project wizard. The wizard provides the test project for each Tizen native project type, such as UI application, service application, shared library, and static library.</p>
- 
+
 <p>To create a test project:</p>
 <ol>
 <li>In the Tizen Studio menu, select <strong>File &gt; New &gt; Other &gt; Tizen &gt; Tizen Native Unit Test Project</strong>.</li>
@@ -54,10 +54,10 @@
        <li>Specify a destination folder where to save the project.</li>
        <li>Click <strong>Finish</strong>.</li>
        </ol>
-<p align="center"><img alt="New Tizen Unit Test Project wizard" src="../images/unit_test_wizard.png" /></p> 
+<p align="center"><img alt="New Tizen Unit Test Project wizard" src="../images/unit_test_wizard.png" /></p>
 </li>
 </ol>
- 
+
 <p>To use the test project:</p>
 <ol>
 <li>In the <strong>Project Explorer</strong> view, open the <code>&lt;TEST_PROJECT_HOME&gt;/src/&lt;TEST_PROJECT_NAME&gt;TestCase.cpp</code> file.</li>
@@ -67,29 +67,29 @@
 <p>The unit test tool supports basic assertions, binary comparison, and string comparison in the gtest. For more information, see <a href="https://github.com/google/googletest/blob/master/googletest/docs/AdvancedGuide.md" target="_blank">Google Test Advanced Guide</a>.</p></li>
 </ol>
 
-<p>To test the project written in the C code, a unit test project for the C++ language is provided. In this case, the tested function must be qualified as an extern &quot;C&quot; to avoid the &#39;undefined reference&#39; error as demangled symbols in the error message.</p>
-<p>There are 2 forms of the extern &quot;C&quot; declaration:</p>
+<p>To test the project written in the C code, a unit test project for the C++ language is provided. In this case, the tested function must be qualified as an extern "C" to avoid the 'undefined reference' error as demangled symbols in the error message.</p>
+<p>There are 2 forms of the extern "C" declaration:</p>
 
 <ul>
-<li>Declare the extern &quot;C&quot; linkage specification in the C header file:
+<li>Declare the extern "C" linkage specification in the C header file:
 <pre class="prettyprint">
 #ifdef __cplusplus
-extern &quot;C&quot;
+extern "C"
 {
-&nbsp;&nbsp;&nbsp;&nbsp;#endif
-&nbsp;&nbsp;&nbsp;&nbsp;int foo;
-&nbsp;&nbsp;&nbsp;&nbsp;void bar();
+    #endif
+    int foo;
+    void bar();
 
-&nbsp;&nbsp;&nbsp;&nbsp;#ifdef __cplusplus
+    #ifdef __cplusplus
 }
 #endif
 </pre>
 </li>
 <li>Include the C headers in the C++ code:
 <pre class="prettyprint">
-extern &quot;C&quot;
+extern "C"
 {
-&nbsp;&nbsp;&nbsp;&nbsp;#include &quot;header.h&quot;
+    #include "header.h"
 }
 </pre>
 </li></ul>
@@ -110,13 +110,13 @@ TEST_F(TestSuite, utils_round)
 </li>
 <li>Change the line that includes the <code>utils/utils.h</code> file:
 <pre class="prettyprint">
-#include &quot;view/window.h&quot;
-#include &quot;view/main-view.h&quot;
-extern &quot;C&quot;
+#include "view/window.h"
+#include "view/main-view.h"
+extern "C"
 {
-&nbsp;&nbsp;&nbsp;&nbsp;#include &quot;utils/utils.h&quot;
+    #include "utils/utils.h"
 }
-#include &quot;utils/ui-utils.h&quot;
+#include "utils/ui-utils.h"
 </pre>
 </li></ol>
 
@@ -124,14 +124,14 @@ extern &quot;C&quot;
 <h2 id="run">Running the Unit Test Project on Devices</h2>
 <p>To launch the unit test project, click the <strong>Run</strong> icon in the toolbar.</p>
 
-<p align="center"><strong>Figure: Launching the test project</strong></p> 
-<p align="center"><img alt="Launching the test project" src="../images/unit_test_launch.png" /></p> 
- 
+<p align="center"><strong>Figure: Launching the test project</strong></p>
+<p align="center"><img alt="Launching the test project" src="../images/unit_test_launch.png" /></p>
+
 <p>After the test cases are executed, the results are displayed on both the <strong>Test Result</strong> and <strong>Test Explorer</strong> views.</p>
 
-<p align="center"><strong>Figure: Test results</strong></p> 
-<p align="center"><img alt="Test results" src="../images/unit_test_results.png" /></p> 
- 
+<p align="center"><strong>Figure: Test results</strong></p>
+<p align="center"><img alt="Test results" src="../images/unit_test_results.png" /></p>
+
 <h3>Customizing the Launch Configuration</h3>
 <p>The test case running can be customized with launch options. To set the launch options:</p>
 <ol>
@@ -179,7 +179,7 @@ extern &quot;C&quot;
 
 <p>The <strong>Test Explorer</strong> view provides the following options for testing and test cases:</p>
 <ul>
-<li><strong>Refresh Tree</strong>: refreshes the test case tree to reflect the linked unit test project&#39;s changes.</li>
+<li><strong>Refresh Tree</strong>: refreshes the test case tree to reflect the linked unit test project's changes.</li>
 <li><strong>Expand All</strong> and <strong>Collapse All</strong>: expands or collapses the test case tree.</li>
 <li><strong>Check All</strong> and <strong>Clear All</strong>: checks or unchecks all the check boxes in the tree.</li>
 <li><strong>Check Failed</strong>: checks failed test cases only.</li>
diff --git a/org.tizen.studio/html/platform_tools/cover_platform.htm b/org.tizen.studio/html/platform_tools/cover_platform.htm
index 3fc7b16..e2ed092 100644 (file)
--- a/org.tizen.studio/html/platform_tools/cover_platform.htm
+++ b/org.tizen.studio/html/platform_tools/cover_platform.htm
@@ -95,7 +95,7 @@
 <p align="center"><img alt="File analysis" src="../images/platform_project_wizard.png" /></p>
 </li>
 </ol>
- 
+
 <h3>Building the Platform Project</h3>
 
 <p>After building your Tizen platform project, you can run and debug the platform. To build and package your Tizen platform project:</p>
@@ -106,7 +106,7 @@
 <p>A dialog box appears and monitors the progress of building and packaging the project.</p>
 <p>After packaging is completed, the package file is located in the <code>$&lt;PROJECT_NAME&gt;\Debug</code> or <code>$&lt;PROJECT_NAME&gt;\Release</code> folder within the project folder.</p></li>
 </ol>
- 
+
 <p>If an error message appears in the <strong>Console</strong> view due to dependency problems, open the Package Manager and install the needed packages for building the project. After the installation is completed, rebuild the platform project to confirm that the dependency problems have been solved.</p>
 
 <h4>GBS Options</h4>
@@ -114,9 +114,9 @@
 <p>The Git Build System (GBS) builds a platform project internally. You can set the GBS options in the IDE.</p>
 <p>For more information about GBS, see <a href="https://source.tizen.org/documentation/reference/git-build-system" target="_blank">Git Build System</a>.</p>
 
-<p align="center"><strong>Figure: GBS options</strong></p> 
-<p align="center"><img alt="GBS options" src="../images/platform_gbs_options.png" /></p> 
-  
+<p align="center"><strong>Figure: GBS options</strong></p>
+<p align="center"><img alt="GBS options" src="../images/platform_gbs_options.png" /></p>
+
 <p>To set the GBS options:</p>
 
 <ol>
@@ -141,7 +141,7 @@
 
 <p>The Platform IDE provides 3 different solutions to debug a platform project: basic, attach, and coredump debug.</p>
 
-<h4>Basic Debug Process</h4> 
+<h4>Basic Debug Process</h4>
 
 <p>To debug the project:</p>
 <ol>
@@ -176,7 +176,7 @@
 <li>In the <strong>Connection Explorer</strong> view, select the device for which a coredump archive to debug exists (for example,  <code>/opt/usr/share/crash/</code>).</li>
 <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Platform Project – Coredump</strong>.</li>
 <li>In the <strong>Launch Configuration</strong> dialog, select a core dumped file (<code>*.coredump</code>) and CS file (<code>*.cs</code>) by clicking <strong>Remote Browse</strong> or <strong>Local Browse</strong>.
-<p align="center"><img alt="Selecting files" src="../images/platform_codedump_files.png" /></p> 
+<p align="center"><img alt="Selecting files" src="../images/platform_codedump_files.png" /></p>
 <p>If the coredump information is displayed, click <strong>Next</strong>, select a rootstrap, and click <strong>Next</strong> again. (It takes about 1~5 minutes when installing the required libraries.)</p>
 <p align="center"><img alt="Selecting rootstrap" src="../images/platform_rootstrap.png" /></p>
 </li>
@@ -186,7 +186,7 @@
        <li>If there is package problem, click <strong>Package Manager</strong> and install packages.
 <p align="center"><img alt="Checking packages" src="../images/platform_packages.png" /></p>
        </li>
- 
+
        <li>Click <strong>Finish</strong>, if it is enabled.</li>
 </ol></li></ol>
 
diff --git a/org.tizen.studio/html/platform_tools/platform_tools.htm b/org.tizen.studio/html/platform_tools/platform_tools.htm
index 971bb8e..bc9d81c 100644 (file)
--- a/org.tizen.studio/html/platform_tools/platform_tools.htm
+++ b/org.tizen.studio/html/platform_tools/platform_tools.htm
@@ -42,12 +42,12 @@
 
 <p>The Tizen Platform IDE provides several tools to help your platform development tasks: <strong>Rootstrap View</strong>, Package Manager, Specfile Editor, content assist features, and PO file editor.</p>
 
-<h2 id="rootstrapview">Rootstrap View</h2> 
- 
+<h2 id="rootstrapview">Rootstrap View</h2>
+
 <p>The <strong>Rootstrap View</strong> displays available rootstraps and the currently selected rootstrap. In the view, you can select, create, and remove a rootstrap, and also manage packages.</p>
- 
-<p align="center"><strong>Figure: Rootstrap View</strong></p> 
-<p align="center"><img alt="Rootstrap View" src="../images/platform_rootstrap_view.png" /></p> 
+
+<p align="center"><strong>Figure: Rootstrap View</strong></p>
+<p align="center"><img alt="Rootstrap View" src="../images/platform_rootstrap_view.png" /></p>
 
 <ul>
 <li>To set a rootstrap to the project, right-click the desired rootstrap and select <strong>Select</strong>.</li>
@@ -69,7 +69,7 @@
 
 <p>To run the Package Manager, right-click the desired rootstrap and select <strong>Manage Packages</strong>. By selecting the applicable tab in the Package Manager, you can install packages to the rootstrap or the device.</p>
 
-<p align="center"><strong>Figure: Package Manager</strong></p> 
+<p align="center"><strong>Figure: Package Manager</strong></p>
 <p align="center"><img alt="Package Manager" src="../images/platform_package_manager.png" /></p>
 
 <p>On both tabs:</p>
@@ -107,9 +107,9 @@
 
 <p>To set the Specfile Editor configuration, go to <strong>Window &gt; Preferences &gt; Others &gt; Specfile Editor</strong> in the IDE toolbar. For more information, see <strong>Help Contents &gt; Specfile Editor User Guide &gt; Configuring Specfile Editor Settings</strong>.</p>
 
-<p align="center"><strong>Figure: Specfile Editor</strong></p> 
+<p align="center"><strong>Figure: Specfile Editor</strong></p>
 <p align="center"><img alt="Specfile Editor" src="../images/platform_specfile_editor.png" /></p>
- 
+
 <h2 id="contentassist">Content Assist</h2>
 
 <p>The Tizen Platform IDE provides the API assist and API hover features to make writing content in the Platform editor quick and efficient:</p>
@@ -130,18 +130,18 @@
        There is no specific wizard to create the <code>.po</code> files. To create a <code>.po</code> file, go to <strong>New &gt; Other &gt; General &gt; File</strong> and save the file with the <code>.po</code> extension.
 </div>
 
-<p align="center"><strong>Figure: PO file editor</strong></p> 
+<p align="center"><strong>Figure: PO file editor</strong></p>
 <p align="center"><img alt="PO file editor" src="../images/platform_po_file_editor.png" /></p>
-  
+
 <ul>
 <li>To open the PO file editor, double-click the <code>.po</code> file in the <strong>Project Explorer</strong> view.</li>
 <li>To add a new string key, click the <strong>Add String Key</strong> icon.
 <p>An empty row is added to the string table. Fill in the details for the row.</p></li>
 <li>To remove a string key, right-click the key and select <strong>Remove</strong>.</li>
- 
+
 <li>To add a language, click the <strong>Add Language</strong> icon.
 <p>In the <strong>Add Languages</strong> dialog, select the language code item you want.</p>
-<p align="center"><strong>Figure: Adding a language</strong></p> 
+<p align="center"><strong>Figure: Adding a language</strong></p>
 <p align="center"><img alt="Adding a language" src="../images/platform_po_add.png" /></p>
 </li>
 <li>To remove a language, in the <strong>Supporting Languages</strong> pane, click the <strong>Remove Language</strong> icon and select the applicable language code item in the <strong>Remove Languages</strong> dialog.</li>
diff --git a/org.tizen.studio/html/web_tools/IDE_preferences_w.htm b/org.tizen.studio/html/web_tools/IDE_preferences_w.htm
index 8ccb4fa..b2ed10d 100644 (file)
--- a/org.tizen.studio/html/web_tools/IDE_preferences_w.htm
+++ b/org.tizen.studio/html/web_tools/IDE_preferences_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Setting Tizen Studio Web Preferences</title>  
+       <title>Setting Tizen Studio Web Preferences</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,7 +29,7 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#preferences">Setting Web Preferences</a></li>
-                       <li><a href="#widget">Widget ID</a></li>        
+                       <li><a href="#widget">Widget ID</a></li>
                        <li><a href="#chrome">Chrome&trade; Browser Path</a></li>
                        <li><a href="#editor">Editor</a></li>
                        <li><a href="#config">Configuration Editor</a></li>
@@ -44,7 +44,7 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="cover_web_w.htm">Web Tools</a></li>   
+                       <li><a href="cover_web_w.htm">Web Tools</a></li>
                </ul>
        </div></div>
 </div>
@@ -56,16 +56,16 @@
 <p>You can customize your Tizen Studio with the Web preferences introduced in the following sections.</p>
 
 <h2 id="preferences">Setting Web Preferences</h2>
- 
+
  <p>To set Web preferences, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web</strong> in the Tizen Studio menu.</p>
- 
+
 <div class="note">
     <strong>Note</strong>
        In Windows&reg; and Linux, <strong>Preferences</strong> is located in the <strong>Window</strong> menu. However, in Mac OS&reg; X, it is located in the <strong>Tizen Studio</strong> menu.
 </div>
 
-<p align="center"><strong>Figure: Tizen Studio preferences</strong></p> 
-<p align="center"><img alt="Tizen Studio preferences" src="../images/ide_pref_tizen_studio.png" /></p> 
+<p align="center"><strong>Figure: Tizen Studio preferences</strong></p>
+<p align="center"><img alt="Tizen Studio preferences" src="../images/ide_pref_tizen_studio.png" /></p>
 
 <p>The preferences are listed in the left pane, and you can search for items by using the search box on the top left.</p>
 
@@ -74,8 +74,8 @@
 <p>To set a customized prefix for the widget ID, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web</strong>, and enter the value in the <strong>Widget ID prefix</strong> field. The default value of this field is <strong>http://yourdomain/</strong>.</p>
 <p>The value is automatically used in all widget IDs when you create a new Web application in the Tizen Studio. You can view the widget ID in the <code>config.xml</code> file of the project.</p>
 
-<p align="center"><strong>Figure: Widget ID</strong></p> 
-<p align="center"><img alt="Widget ID" src="../images/ide_pref_widget_id.png" /></p> 
+<p align="center"><strong>Figure: Widget ID</strong></p>
+<p align="center"><img alt="Widget ID" src="../images/ide_pref_widget_id.png" /></p>
 
 <h2 id="chrome">Chrome&trade; Browser Path</h2>
 
@@ -99,9 +99,9 @@
 <p>Go to <strong>Tizen Studio &gt; Web &gt; Editor &gt; CSS Editor</strong>.</p>
 <p>In the CSS editor, you can modify several <a href="http://csslint.net/" target="_blank">CSSLint</a> options. CSSLint is a CSS code quality tool.</p>
 <p>You can set the following validation times:</p>
-<ul> 
-   <li>Build</li> 
-   <li>Reconcile</li> 
+<ul>
+   <li>Build</li>
+   <li>Reconcile</li>
   </ul>
 <p>You can set the following validation levels:</p>
 <ul>
@@ -212,7 +212,7 @@ ko
 </li>
 </ul>
 
-<p align="center"><strong>Figure: Live highlight</strong></p> 
+<p align="center"><strong>Figure: Live highlight</strong></p>
 <p align="center"><img alt="Live highlight" src="../images/ide_pref_live_highlight.png"/></p>
 
 
diff --git a/org.tizen.studio/html/web_tools/code_productivity_w.htm b/org.tizen.studio/html/web_tools/code_productivity_w.htm
index e8f3183..1365ef6 100644 (file)
--- a/org.tizen.studio/html/web_tools/code_productivity_w.htm
+++ b/org.tizen.studio/html/web_tools/code_productivity_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Improving Your Code Productivity</title>  
+       <title>Improving Your Code Productivity</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -40,7 +40,7 @@
 <p>The Tizen Studio provides various features for the productive development. This topic describes the <strong>Code Beautifier</strong> and <strong>Code Minifier</strong> features that you can use with the Tizen Web Editor.</p>
 
 <h2 id="beautifier">Using the Code Beautifier</h2>
- 
+
 <p>The Code Beautifier is a tool that can help you understand code and make it easier to read. For example, to match the indentation and alignment in the same style automatically, you can improve your coding performance.</p>
 <p>The Code Beautifier has the following features for beautifying HTML, CSS, and JavaScript:</p>
        <ul>
@@ -56,14 +56,14 @@
        <li>In the <strong>Source Editor</strong> view, right-click the code and select <strong>Code Beautifier</strong>.</li>
        <li>In the <strong>Source Editor</strong> or <strong>Project Explorer</strong> view, use the <strong>Ctrl + 6</strong> hotkey.</li>
        </ul>
-       
-<p>In case you use the Code Beautifier in the <strong>Source Editor</strong> view, no new file is generated. The original file is changed instead.</p> 
 
-<p align="center"><strong>Figure: Code Beautifier with CSS file - before beautifying</strong></p> 
+<p>In case you use the Code Beautifier in the <strong>Source Editor</strong> view, no new file is generated. The original file is changed instead.</p>
+
+<p align="center"><strong>Figure: Code Beautifier with CSS file - before beautifying</strong></p>
 <p align="center"><img alt="Code Beautifier with CSS file - before beautifying" src="../images/code_productivity_before_beautifying.png"/></p>
 
 
-<p align="center"><strong>Figure: Code Beautifier with CSS file - after beautifying</strong></p> 
+<p align="center"><strong>Figure: Code Beautifier with CSS file - after beautifying</strong></p>
 <p align="center"><img alt="Code Beautifier with CSS file - after beautifying" src="../images/code_productivity_after_beautifying.png"/></p>
 
 
@@ -108,14 +108,14 @@
        <li>In the <strong>Source Editor</strong> view, right-click the code and select <strong>Code Minifier</strong>.</li>
        <li>In the <strong>Source Editor</strong> or <strong>Project Explorer</strong> view, use the <strong>Ctrl + 5</strong> hotkey.</li>
        </ul>
-       
-<p>In case you use the Code Minifier in the <strong>Source Editor</strong> view, no new file is generated. The original file is changed instead.</p>   
 
-<p align="center"><strong>Figure: Code Minifier with CSS file - before minifying</strong></p> 
+<p>In case you use the Code Minifier in the <strong>Source Editor</strong> view, no new file is generated. The original file is changed instead.</p>
+
+<p align="center"><strong>Figure: Code Minifier with CSS file - before minifying</strong></p>
 <p align="center"><img alt="Code Minifier with CSS file - before minifying" src="../images/code_productivity_minifying_css.png"/></p>
 
 
-<p align="center"><strong>Figure: Code Minifier with CSS file - after minifying</strong></p> 
+<p align="center"><strong>Figure: Code Minifier with CSS file - after minifying</strong></p>
 <p align="center"><img alt="Code Minifier with CSS file - after minifying" src="../images/code_productivity_minifying_css_after.png"/></p>
 
 
diff --git a/org.tizen.studio/html/web_tools/config_editor_w.htm b/org.tizen.studio/html/web_tools/config_editor_w.htm
index 373ce8b..a952f64 100644 (file)
--- a/org.tizen.studio/html/web_tools/config_editor_w.htm
+++ b/org.tizen.studio/html/web_tools/config_editor_w.htm
@@ -43,12 +43,12 @@
   <p>This configuration information is used when you install or run the Tizen Web application on the Tizen platform. The Tizen Web application project must have the <code>config.xml</code> file in the project root directory.</p>
 
   <p>The configuration file can be easily edited with the <a href="#edit">Web application configuration editor</a> (form editor), or you can modify the XML structure directly using the configuration source editor. With the form editor, you can set the project configuration (manifest), even if you have no experience of developing a Tizen Web application project. If you are fluent with the configuration file XML structure, you can create the configuration file directly through the configuration source editor.</p>
-  
+
 <div class="note">
     <strong>Note</strong>
        The <code>config.xml</code> must conform to both the XML file format and the W3C specification requirements. Editing the file XML structure with the configuration source editor is intended for advanced users only.
 </div>
-  
+
   <h2 id="edit" name="edit">Editing the config.xml File</h2>
 
 <p>There are 2 different ways to edit the <code>config.xml</code> file:</p>
@@ -58,21 +58,21 @@
        <ol><li>Double-click the <code>config.xml</code> file in the <strong>Project Explorer</strong> view.</li>
        <li>Select the <strong>Source</strong> tab.</li>
        </ol>
- 
-<p align="center"><strong>Figure: Source tab</strong></p> 
+
+<p align="center"><strong>Figure: Source tab</strong></p>
 <p align="center"><img alt="Source tab" src="../images/config_text.png" /></p>
 </li>
 <li>Use the form tabs:
 <ol><li>Double-click the <code>config.xml</code> file in the <strong>Project Explorer</strong> view.</li>
 <li>Select one of the form tabs (<strong>Overview</strong>, <strong>Features</strong>, <strong>Privileges</strong>, <strong>Localization</strong>, <strong>Policy</strong>, <strong>Preferences</strong>, <strong>Tizen</strong>).</li>
 </ol>
- 
-<p align="center"><strong>Figure: Form tabs</strong></p> 
+
+<p align="center"><strong>Figure: Form tabs</strong></p>
 <p align="center"><img alt="Form tabs" src="../images/config_form.png" /></p>
 </li>
 </ul>
-  
-  
+
+
   <h2 id="hierarchy" name="hierarchy">Configuration Element Hierarchy</h2>
   <p>The Tizen Web application configuration file consists of XML elements organized in a hierarchy. The following tree structure shows the relationship between the elements of the <code>config.xml</code> file.</p>
     <table style="border:none;">
@@ -102,7 +102,7 @@
         <td style="border:none;">&nbsp;</td>
         <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><code>&lt;tizen:capability&gt;</code></td>
-    </tr>      
+    </tr>
        <tr>
         <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><code><a href="#mw_account">&lt;tizen:account&gt;</a></code> (in mobile only)</td>
@@ -135,7 +135,7 @@
         <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><code>&lt;tizen:mime&gt;</code></td>
     </tr>
-       
+
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><code>&lt;tizen:application&gt;</code> (in <a href="#mw_application">mobile</a> or <a href="#ww_application">wearable</a>)</td>
@@ -143,7 +143,7 @@
                <tr>
                <td style="border:none;">&nbsp;</td>
                <td colspan="3" style="border:none;"><code><a href="#ww_webwidget">&lt;tizen:app-widget&gt;</a></code> (in wearable only)</td>
-       </tr>   
+       </tr>
        <tr>
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
@@ -207,7 +207,7 @@
         <td style="border:none;">&nbsp;</td>
         <td colspan="2" style="border:none;"><code><a href="#span">&lt;span&gt;</a></code></td>
     </tr>
-   
+
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><code>&lt;feature&gt;</code> (in <a href="#mw_feature">mobile</a> or <a href="#ww_feature">wearable</a>)</td>
@@ -308,7 +308,7 @@
                <td style="border:none;">&nbsp;</td>
                <td style="border:none;">&nbsp;</td>
                <td colspan="2" style="border:none;"><code><a href="#ww_service-category">&lt;tizen:category&gt;</a></code></td>
-       </tr>   
+       </tr>
     <tr>
         <td style="border:none;">&nbsp;</td>
         <td colspan="3" style="border:none;"><code>&lt;tizen:setting&gt;</code> (in <a href="#mw_setting">mobile</a> or <a href="#ww_setting">wearable</a>)</td>
@@ -318,7 +318,7 @@
 
  <h2 id="elements" name="elements">Configuration Elements</h2>
   <p>The following tables summarize of the W3C configuration elements used in the <code>config.xml</code> file of the Web application. For more information on the W3C element details, see <a href="http://www.w3.org/TR/widgets/" target="_blank">Packaging and XML Configuration</a> (the details of the Tizen extending configuration elements are described in <a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a> and <a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a>). For a quick view of the element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
-  
+
 <table id="widget">
 <tbody>
 <tr>
@@ -327,7 +327,7 @@
  <tr>
  <td>Represents the root element of a configuration document. <p><strong>Expected children:</strong></p>
 <p><code>&lt;access&gt;</code>, <code>&lt;tizen:account&gt;</code>, <code>&lt;tizen:app-control&gt;</code>, <code>&lt;tizen:application&gt;</code>, <code>&lt;author&gt;</code>, <code>&lt;content&gt;</code>, <code>&lt;tizen:content&gt;</code>,  <code>&lt;description&gt;</code>, <code>&lt;feature&gt;</code>, <code>&lt;icon&gt;</code>, <code>&lt;license&gt;</code>, <code>&lt;name&gt;</code>, <code>&lt;preference&gt;</code>,  <code>&lt;tizen:privilege&gt;</code>, <code>&lt;tizen:profile&gt;</code>, and <code>&lt;tizen:setting&gt;</code></p>
-<p><strong>Attributes:</strong></p> 
+<p><strong>Attributes:</strong></p>
     <ul><li><code>xml:lang</code></li>
     <li><code>dir</code></li>
     <li><code>id</code></li>
@@ -340,7 +340,7 @@
  </td>
  </tr>
  </tbody></table>
- 
+
  <table id="access">
 <tbody>
 <tr>
@@ -353,7 +353,7 @@
  </td>
  </tr>
  </tbody></table>
- 
+
   <table id="author">
 <tbody>
 <tr>
@@ -369,7 +369,7 @@
  </td>
  </tr>
  </tbody></table>
- 
+
  <table id="content_element">
 <tbody>
 <tr>
@@ -385,7 +385,7 @@
  </td>
  </tr>
  </tbody></table>
- 
+
  <table id="description">
 <tbody>
 <tr>
@@ -399,7 +399,7 @@
  </td>
  </tr>
  </tbody></table>
- 
+
  <table id="icon">
 <tbody>
 <tr>
@@ -411,11 +411,11 @@
     <li><code>dir</code></li>
     <li><code>src</code></li>
     <li><code>width</code></li>
-    <li><code>height</code></li></ul> 
+    <li><code>height</code></li></ul>
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="license">
 <tbody>
 <tr>
@@ -430,7 +430,7 @@
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="name">
 <tbody>
 <tr>
@@ -445,8 +445,8 @@
  </td>
  </tr>
  </tbody></table>
- 
- 
+
+
 <table id="param">
 <tbody>
 <tr>
@@ -462,7 +462,7 @@
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="preference">
 <tbody>
 <tr>
@@ -478,7 +478,7 @@
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="span">
 <tbody>
 <tr>
@@ -493,13 +493,13 @@
  </tr>
  </tbody></table>
 
- 
+
 <h2 id="mw_extend" name="mw_extend">Extending Configuration Elements in Mobile Applications</h2>
  <p>The following sections show additional configuration elements used in the <code>config.xml</code> file of the Web application, but not included in the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
 
 <div class="note">
     <strong>Note</strong>
-       The extension elements are denoted as though the <code>xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</code> namespace declaration was in effect.
+       The extension elements are denoted as though the <code>xmlns:tizen="http://tizen.org/ns/widgets"</code> namespace declaration was in effect.
         <p>The maximum length of the attribute and the element (except <code>&lt;tizen:metadata&gt;</code>, W3C preference element) can be limited to 2048 bytes. In this case, leftover bytes are ignored.</p>
 </div>
 
@@ -529,16 +529,16 @@
       <ul>
        <li><code>multiple-account-support</code> <p>Mandatory; indicates whether multiple accounts are supported (available values: <code>true</code>, <code>false</code>)</p></li>
 
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:account multiple-account-support=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:icon section=&quot;Account&quot;&gt;account_provider_icon.png&lt;/tizen:icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:icon section=&quot;AccountSmall&quot;&gt;account_provider_small_icon.png&lt;/tizen:icon&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:display-name xml:lang=&quot;en&quot;&gt;AccountProviderExample&lt;/tizen:display-name&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:capability&gt;http://tizen.org/account/capability/contact&lt;/tizen:capability&gt;
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:account multiple-account-support="false"&gt;
+   &lt;tizen:icon section="Account"&gt;account_provider_icon.png&lt;/tizen:icon&gt;
+   &lt;tizen:icon section="AccountSmall"&gt;account_provider_small_icon.png&lt;/tizen:icon&gt;
+   &lt;tizen:display-name xml:lang="en"&gt;AccountProviderExample&lt;/tizen:display-name&gt;
+   &lt;tizen:capability&gt;http://tizen.org/account/capability/contact&lt;/tizen:capability&gt;
 &lt;/tizen:account&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
  <h3 id="mw_navigation" name="mw_navigation">Tizen Navigation Policy</h3>
 <table>
 <tbody>
@@ -556,7 +556,7 @@
  </td>
  </tr>
  </tbody></table>
- 
+
 <h3 id="mw_appcontrol" name="mw_appcontrol">Tizen Application Control</h3>
 <table>
 <tbody>
@@ -575,10 +575,10 @@
                        <p> Attributes:</p>
                        <ul>
                                <li><code>name</code> <p>Mandatory; page handling the requests </p></li>
-                               <li><code>reload</code> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <code>enable</code> (default), <code>disable</code>)</p><p><strong>Since: 2.4</strong></p> 
+                               <li><code>reload</code> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <code>enable</code> (default), <code>disable</code>)</p><p><strong>Since: 2.4</strong></p>
 <div class="note">
     <strong>Note</strong>
-       The <code>reload</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>reload</code> attribute is used, the application installation fails.
+       The <code>reload</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application's <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>reload</code> attribute is used, the application installation fails.
 </div>
                        </li>
                        </ul>
@@ -587,15 +587,15 @@
        <li><code>operation</code> <p>Mandatory; string that defines the action to be performed</p></li>
        <li><code>uri</code> and <code>mime</code><p>Optional; additional parameters used for resolving application control requests</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot; reload=&quot;disable&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;http&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:mime name=&quot;image/jpeg&quot;/&gt;
+   &lt;tizen:src name="view.html" reload="disable"/&gt;
+   &lt;tizen:operation name="http://tizen.org/appcontrol/operation/view"/&gt;
+   &lt;tizen:uri name="http"/&gt;
+   &lt;tizen:mime name="image/jpeg"/&gt;
 &lt;/tizen:app-control&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
     <h3 id="mw_application" name="mw_application">Tizen Application ID</h3>
 <table>
 <tbody>
@@ -620,17 +620,17 @@
                <p><strong>Since: 2.4</strong></p>
 <div class="note">
     <strong>Note</strong>
-       The <code>launch_mode</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>launch_mode</code> attribute is used, the application installation fails.
+       The <code>launch_mode</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application's <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>launch_mode</code> attribute is used, the application installation fails.
 </div>
                </li>
-      </ul><p><strong>Example:</strong></p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.4&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;launch_mode=&quot;caller&quot; /&gt;</pre>
+      </ul><p><strong>Example:</strong></p><pre class="prettyprint">&lt;tizen:application id="1234abcDEF.projectname"
+                   package="1234abcDEF"
+                   required_version="2.4"
+                   launch_mode="caller" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
   <h3 id="mw_bg_category" name="mw_bg_category">Tizen Background Category</h3>
 <table>
 <tbody>
@@ -652,11 +652,11 @@
       <ul>
        <li><code>value</code> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#allow_bg_table">background category</a></p></li>
       </ul><p><strong>Example:</strong> </p>
-         <pre class="prettyprint">&lt;tizen:background-category value=&quot;media&quot; /&gt;</pre>
+         <pre class="prettyprint">&lt;tizen:background-category value="media" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
     <h3 id="mw_webapp" name="mw_webapp">Tizen-hosted Web Application</h3>
 <table>
 <tbody>
@@ -676,11 +676,11 @@
        <li><code>src</code><p>Mandatory; URI of the external start page</p></li>
       </ul>
 
-      <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content src=&quot;https://www.tizen.org/&quot; /&gt;</pre>
+      <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content src="https://www.tizen.org/" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
  <h3 id="mw_sec" name="mw_sec">Tizen Content Security Policy</h3>
 <table>
 <tbody>
@@ -694,11 +694,11 @@
        <li>0 or more
        <p>If more than 1, the first occurrence is applied.</p></li>
     </ul>
-<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy&gt;script-src &#39;self&#39;&lt;/tizen:content-security-policy&gt;</pre>
+<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy&gt;script-src 'self'&lt;/tizen:content-security-policy&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
   <h3 id="mw_secreport" name="mw_secreport">Tizen Content Security Policy Report Only</h3>
 <table>
 <tbody>
@@ -713,12 +713,12 @@
        <p>If more than 1, the first occurrence is applied.</p></li>
     </ul>
 <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy-report-only&gt;
-&nbsp;&nbsp;&nbsp;script-src &#39;self&#39;; report-uri=&quot;http://example.com/report.cgi&quot;
+   script-src 'self'; report-uri="http://example.com/report.cgi"
 &lt;/tizen:content-security-policy-report-only&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
     <h3 id="mw_feature" name="mw_feature">Tizen Feature</h3>
 <table>
 <tbody>
@@ -740,11 +740,11 @@
      <p><strong>Attributes:</strong> </p>
       <ul>
        <li><code>name</code> <p>Mandatory; <a href="../../../org.tizen.training/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name=&quot;http://tizen.org/feature/network.bluetooth&quot; /&gt;</pre>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name="http://tizen.org/feature/network.bluetooth" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
  <h3 id="mw_metadata" name="mw_metadata">Tizen Metadata</h3>
 <table>
 <tbody>
@@ -768,12 +768,12 @@
            <p>The maximum length can be limited to 8192 bytes.  In this case, leftover bytes are ignored.</p>
        </li>
 
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:metadata key=&quot;key1&quot;/&gt;
-&lt;tizen:metadata key=&quot;key2&quot; value=&quot;value/&gt;</pre>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:metadata key="key1"/&gt;
+&lt;tizen:metadata key="key2" value="value/&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
     <h3 id="mw_privilege" name="mw_privilege">Tizen Privilege</h3>
 <table>
 <tbody>
@@ -789,12 +789,12 @@
      <p><strong>Attributes:</strong> </p>
       <ul>
        <li><code>name</code><p> Mandatory; URI of the Device API privilege</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;</pre>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name="http://tizen.org/privilege/application.launch" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
- <h3 id="mw_profile" name="mw_profile">Tizen Profile</h3> 
+
+ <h3 id="mw_profile" name="mw_profile">Tizen Profile</h3>
 <table>
 <tbody>
 <tr>
@@ -802,18 +802,18 @@
 </tr>
  <tr>
  <td>Used to define the application profile.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
        <li>1</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>name</code> <p>Mandatory; string</p></li> 
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;mobile&quot; /&gt;</pre>
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>name</code> <p>Mandatory; string</p></li>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name="mobile" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
     <h3 id="mw_setting" name="mw_setting">Tizen Settings</h3>
 <table>
 <tbody>
@@ -830,8 +830,8 @@
       <ul>
          <li><code>screen-orientation</code><p>Optional; viewport orientation lock (available values: <code>portrait</code> (default), <code>landscape</code>), auto-rotation</p>If the system auto rotation setting is on, the Web application viewport orientation is changed accordingly by default.</li>
          <li><code>context-menu</code> <p>Optional; context menu is displayed when the user clicks, for example, an image, text, or link (available values: <code>enable</code> (default), <code>disable</code>)</p></li>
-      <li><code>background-support</code> 
-         <p>Optional; application execution continues when it is moved to the background (available values: <code>enable</code> (execution continues on the background), <code>disable</code> (default; application is suspended))</p>    
+      <li><code>background-support</code>
+         <p>Optional; application execution continues when it is moved to the background (available values: <code>enable</code> (execution continues on the background), <code>disable</code> (default; application is suspended))</p>
 <div class="note">
     <strong>Note</strong>
        Since Tizen 2.4, the system manages background processes more tightly. Even if the <code>background-support</code> attribute is set to <code>enable</code>, the Web application process can be suspended on the background. To guarantee that the application runs on the background, <a href="#mw_bg_category">add at least one background category</a> for the application with the <code>&lt;tizen:background-category&gt;</code> element. Only the background categories declared in the system can be used.
@@ -841,32 +841,32 @@
        <li><code>install-location</code> <p>Optional; application installation location (available values: <code>auto</code> (default), <code>internal-only</code>, <code>prefer-external</code>)</p>
                <ul>
                <li><code>auto</code>: the system defines the installation location</li>
-               <li><code>internal-only</code>: the application is installed in the device&#39;s internal storage</li>
+               <li><code>internal-only</code>: the application is installed in the device's internal storage</li>
                <li><code>prefer-external</code>: the application is installed in the external storage (if available)</li>
-               </ul>  
+               </ul>
           </li>
       <li><code>hwkey-event</code> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <code>enable</code> (default), <code>  disable</code>)</p><p>If this option is enabled, the <code>tizenhwkey</code> custom event is sent to the Web application. The <code>tizenhwkey</code> event object has a <code>keyName</code> attribute (available values: <code>menu</code> and <code>back</code>).</p></li>
 
 
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">
-&lt;!--Viewport orientation is locked to &quot;landscape&quot;--&gt;
-&lt;tizen:setting screen-orientation=&quot;landscape&quot; /&gt;
+&lt;!--Viewport orientation is locked to "landscape"--&gt;
+&lt;tizen:setting screen-orientation="landscape" /&gt;
 
 &lt;!--Context menu is not displayed--&gt;
-&lt;tizen:setting context-menu=&quot;disable&quot; /&gt;
+&lt;tizen:setting context-menu="disable" /&gt;
 
 &lt;!--Web application execution is not suspended--&gt;
 &lt;!--when the application is sent to the background--&gt;
-&lt;tizen:setting background-support=&quot;enable&quot; /&gt;
+&lt;tizen:setting background-support="enable" /&gt;
 
 &lt;!--Web applications resources are stored encrypted by the WRT--&gt;
-&lt;tizen:setting encryption=&quot;enable&quot; /&gt;
+&lt;tizen:setting encryption="enable" /&gt;
 
-&lt;!--Installation location is set to &quot;internal-only&quot;--&gt;
-&lt;tizen:setting install-location=&quot;internal-only&quot; /&gt;
+&lt;!--Installation location is set to "internal-only"--&gt;
+&lt;tizen:setting install-location="internal-only" /&gt;
 
 &lt;!--Hardware key event is sent to the Web application when the hardware key is pressed--&gt;
-&lt;tizen:setting hwkey-event=&quot;enable&quot; /&gt;</pre>
+&lt;tizen:setting hwkey-event="enable" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
@@ -876,11 +876,11 @@
 
 <div class="note">
     <strong>Note</strong>
-       The extension elements are denoted as though the <code>xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot;</code> namespace declaration was in effect.
+       The extension elements are denoted as though the <code>xmlns:tizen="http://tizen.org/ns/widgets"</code> namespace declaration was in effect.
        <p>The maximum length of the attribute and the element (except <code>tizen:metadata</code>, W3C preference element) can be limited to 2048 bytes. In that case, leftover bytes are ignored.</p>
 </div>
 
- <h3 id="ww_allownavigation" name="ww_allownavigation">Tizen Navigation Policy</h3> 
+ <h3 id="ww_allownavigation" name="ww_allownavigation">Tizen Navigation Policy</h3>
   <table>
 <tbody>
 <tr>
@@ -888,16 +888,16 @@
 </tr>
  <tr>
  <td>Used to define a list of URL domains that are allowed to be navigated in using the Web application.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more 
-          <p>If more than 1, the first occurrence is applied.</p></li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or more
+          <p>If more than 1, the first occurrence is applied.</p></li>
        </ul>
 <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:allow-navigation&gt;tizen.org *.tizen.org&lt;tizen:allow-navigation/&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
   <h3 id="appcontrol" name="appcontrol">Tizen Application Control</h3>
 <table>
 <tbody>
@@ -916,11 +916,11 @@
                <p>Attributes:</p>
                <ul>
                        <li><code>name</code> <p>Mandatory; page handling the requests </p></li>
-                       <li><code>reload</code> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <code>enable</code> (default), <code>disable</code>)</p><p><strong>Since: 2.4</strong></p> 
+                       <li><code>reload</code> <p>Optional; sets whether the page is reloaded when it is already loaded (available values: <code>enable</code> (default), <code>disable</code>)</p><p><strong>Since: 2.4</strong></p>
 
 <div class="note">
     <strong>Note</strong>
-       The <code>reload</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>reload</code> attribute is used, the application installation fails.
+       The <code>reload</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application's <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>reload</code> attribute is used, the application installation fails.
 </div>
                </li>
                </ul>
@@ -929,15 +929,15 @@
        <li><code>operation</code> <p>Mandatory; string that defines the action to be performed</p></li>
        <li><code>uri</code> and <code>mime</code><p>Optional; additional parameters used for resolving application control requests</p></li>
       </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;view.html&quot; reload=&quot;disable&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;http&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:mime name=&quot;image/jpeg&quot;/&gt;
+   &lt;tizen:src name="view.html" reload="disable"/&gt;
+   &lt;tizen:operation name="http://tizen.org/appcontrol/operation/view"/&gt;
+   &lt;tizen:uri name="http"/&gt;
+   &lt;tizen:mime name="image/jpeg"/&gt;
 &lt;/tizen:app-control&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
      <h3 id="ww_webwidget" name="ww_webwidget">Tizen Web Widget</h3>
 <table>
 <tbody>
@@ -951,7 +951,7 @@
        <li>0 or more</li>
     </ul>
      <p><strong>Expected children:</strong> </p>
-      <ul> 
+      <ul>
        <li><a href="#ww_widget-label">&lt;tizen:widget-label /&gt;</a></li>
        <li><a href="#ww_widget-content">&lt;tizen:widget-content /&gt;</a></li>
           <li><a href="#ww_widget-metadata">&lt;tizen:widget-metadata /&gt;</a></li>
@@ -964,12 +964,12 @@
       </ul>
         <p><strong>Example:</strong> </p>
 <pre class="prettyprint">
-&lt;tizen:app-widget id=&quot;EHtuCWfzcr.Widget.Widget&quot; primary=&quot;true&quot; max-instance=&quot;0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:widget-label&gt;Hello Web Widget!&lt;/tizen:widget-label&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:widget-content src=&quot;index.html&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-size preview=&quot;preview.png&quot;>2x2&lt;/tizen:widget-size&gt;
-&nbsp;&nbsp;&nbsp;&lt;/tizen:widget-content&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:widget-metadata key=&quot;index&quot; value=&quot;2&quot;/&gt;
+&lt;tizen:app-widget id="EHtuCWfzcr.Widget.Widget" primary="true" max-instance="0"&gt;
+   &lt;tizen:widget-label&gt;Hello Web Widget!&lt;/tizen:widget-label&gt;
+   &lt;tizen:widget-content src="index.html"&gt;
+      &lt;tizen:widget-size preview="preview.png">2x2&lt;/tizen:widget-size&gt;
+   &lt;/tizen:widget-content&gt;
+   &lt;tizen:widget-metadata key="index" value="2"/&gt;
 &lt;/tizen:app-widget&gt;
 </pre>
  </td>
@@ -983,13 +983,13 @@
 </tr>
  <tr>
  <td>Used to define the name of Web widget.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>1 or more</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>xml:lang</code> <p>Optional; specifies the language of the box label (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>xml:lang</code> <p>Optional; specifies the language of the box label (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li>
       </ul>
  </td>
  </tr>
@@ -1002,22 +1002,22 @@
 </tr>
  <tr>
  <td>Used to define the starting page of the Web widget.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>1</li>
        </ul>
      <p><strong>Expected children:</strong> </p>
-      <ul> 
+      <ul>
        <li><a href="#ww_widget-size">&lt;tizen:widget-size /&gt;</a></li>
       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>src</code> <p>Mandatory; local file path, relative to the source Web application directory of the widget starting page</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>src</code> <p>Mandatory; local file path, relative to the source Web application directory of the widget starting page</p></li>
       </ul>
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="ww_widget-size">
 <tbody>
 <tr>
@@ -1025,13 +1025,13 @@
 </tr>
  <tr>
  <td>Used to define the size of the Web widget.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>1</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>preview</code> <p>Mandatory; image file path, relative to the source Web application directory of the box content displayed in the widget viewer</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>preview</code> <p>Mandatory; image file path, relative to the source Web application directory of the box content displayed in the widget viewer</p></li>
       </ul>
  </td>
  </tr>
@@ -1044,12 +1044,12 @@
 </tr>
  <tr>
  <td>Used to define a (key, value) pair that can be read by a Web widget through the WidgetService API. Its main use is to allow you to define a constant to be read by a Web widget.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>1 or more</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
        <li><code>key</code> <p>Mandatory; string.</p></li>
        <li><code>value</code> <p>Mandatory; string.</p></li>
       </ul>
@@ -1065,22 +1065,22 @@
 </tr>
  <tr>
  <td> Used to uniquely identify a Tizen wearable application.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>1</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-        <li><code>id</code> <p>Mandatory;  Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the Tizen Studio. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>                 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+        <li><code>id</code> <p>Mandatory;  Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the Tizen Studio. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
        <li><code>package</code> <p>Mandatory;  Tizen wearable package ID generated by the Tizen Studio, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.</p></li>
        <li><code>required_version</code> <p>Mandatory; Tizen API version required for running the Web application</p></li>
-               
+
        <li><code>ambient_support</code> <p>Optional; sets whether the Web application supports the ambient mode (available values: <code>enable</code>, <code>disable</code> (default))</p><p>If this option is enabled, the application can be shown in the ambient mode.</p><strong>Since: 2.3.1</strong>
 
 <div class="note">
     <strong>Note</strong>
        The <code>ambient_support</code> option is only used for watch applications, and ignored in all non-watch applications.
-        <p>The <code>ambient_support</code> attribute is supported from Tizen 2.3.1 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.3.1, and the <code>ambient_support</code> attribute is used, the application installation fails.</p>
+        <p>The <code>ambient_support</code> attribute is supported from Tizen 2.3.1 onwards. If the <code>required_version</code> in the application's <code>config.xml</code> file is set to a version older than Tizen 2.3.1, and the <code>ambient_support</code> attribute is used, the application installation fails.</p>
 </div>
 </li>
 <li><code>launch_mode</code> <p>Optional; sets which launch mode is supported (available values: <code>single</code> (default), <code>group</code>, <code>caller</code>)</p>
@@ -1090,17 +1090,17 @@
                <p><strong>Since: 2.4</strong></p>
 <div class="note">
     <strong>Note</strong>
-       The <code>launch_mode</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application&#39;s <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>launch_mode</code> attribute is used, the application installation fails.
+       The <code>launch_mode</code> attribute is supported from Tizen 2.4 onwards. If the <code>required_version</code> in the application's <code>config.xml</code> file is set to a version older than Tizen 2.4, and the <code>launch_mode</code> attribute is used, the application installation fails.
 </div>
        </li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:application id=&quot;1234abcDEF.projectname&quot;  
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;1234abcDEF&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required_version=&quot;2.4&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ambient_support=&quot;enable&quot; /&gt;</pre>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:application id="1234abcDEF.projectname"
+                   package="1234abcDEF"
+                   required_version="2.4"
+                   ambient_support="enable" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
    <h3 id="ww_bg_category" name="ww_bg_category">Tizen Background Category</h3>
 <table>
 <tbody>
@@ -1123,11 +1123,11 @@
       <ul>
        <li><code>value</code> <p>Mandatory; <a href="../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#allow_bg_table">background category</a></p></li>
       </ul><p><strong>Example:</strong> </p>
-         <pre class="prettyprint">&lt;tizen:background-category value=&quot;media&quot; /&gt;</pre> 
+         <pre class="prettyprint">&lt;tizen:background-category value="media" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
  <h3 id="ww_category" name="ww_category">Tizen Category</h3>
 <table>
 <tbody>
@@ -1143,12 +1143,12 @@
          <p><strong>Attributes:</strong> </p>
       <ul>
        <li><code>name</code> <p>Mandatory; string</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot; /&gt;</pre>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:category name="http://tizen.org/category/wearable_clock" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
- <h3 id="ww_tizencontent" name="ww_tizencontent">Tizen Content</h3> 
+
+ <h3 id="ww_tizencontent" name="ww_tizencontent">Tizen Content</h3>
 <table>
 <tbody>
 <tr>
@@ -1156,22 +1156,22 @@
 </tr>
  <tr>
  <td>Used to define the start page to be hosted on an external server.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
        <li>0 or more<p>If more than 1, the first occurrence is considered and all others ignored.</p></li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-     
-      <li><code>src</code> <p>Mandatory; URI of an external start page</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+
+      <li><code>src</code> <p>Mandatory; URI of an external start page</p></li>
 
          </ul><p><strong>Example:</strong> </p><pre class="prettyprint">
-&lt;tizen:content src=&quot;https://www.tizen.org&quot;/&gt;</pre>
+&lt;tizen:content src="https://www.tizen.org"/&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
-<h3 id="ww_contentsecpolicy" name="ww_contentsecpolicy">Tizen Content Security Policy</h3> 
+
+<h3 id="ww_contentsecpolicy" name="ww_contentsecpolicy">Tizen Content Security Policy</h3>
 <table>
 <tbody>
 <tr>
@@ -1179,17 +1179,17 @@
 </tr>
  <tr>
  <td>Used to define an additional content security policy for a packaged or hosted application.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
        <li>0 or more
-          <p>If more than 1, the first occurrence is applied.</p></li> 
+          <p>If more than 1, the first occurrence is applied.</p></li>
        </ul>
-<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy&gt;script-src &#39;self&#39;&lt;/tizen:content-security-policy&gt;</pre>
+<p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy&gt;script-src 'self'&lt;/tizen:content-security-policy&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
-    <h3 id="ww_contentsecpolicyreport" name="ww_contentsecpolicyreport">Tizen Content Security Policy Report Only</h3> 
+
+    <h3 id="ww_contentsecpolicyreport" name="ww_contentsecpolicyreport">Tizen Content Security Policy Report Only</h3>
 <table>
 <tbody>
 <tr>
@@ -1197,18 +1197,18 @@
 </tr>
  <tr>
  <td>Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more 
-          <p>If more than 1, the first occurrence is applied.</p></li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or more
+          <p>If more than 1, the first occurrence is applied.</p></li>
        </ul>
 <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:content-security-policy-report-only&gt;
-&nbsp;&nbsp;&nbsp;script-src &#39;self&#39;; report-uri=&quot;http://example.com/report.cgi&quot;
+   script-src 'self'; report-uri="http://example.com/report.cgi"
 &lt;/tizen:content-security-policy-report-only&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
   <h3 id="ww_feature" name="ww_feature">Tizen Feature</h3>
 <table>
 <tbody>
@@ -1230,12 +1230,12 @@
      <p><strong>Attributes:</strong> </p>
       <ul>
        <li><code>name</code> <p>Mandatory; <a href="../../../org.tizen.training/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name=&quot;http://tizen.org/feature/network.bluetooth&quot; /&gt;</pre>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;feature name="http://tizen.org/feature/network.bluetooth" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
- <h3 id="ww_ime" name="ww_ime">Tizen IME</h3> 
+
+ <h3 id="ww_ime" name="ww_ime">Tizen IME</h3>
  <table>
 <tbody>
 <tr>
@@ -1246,22 +1246,22 @@
 
 <div class="note">
     <strong>Note</strong>
-       <code>&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</code> must be defined to activate <code>&lt;tizen:ime&gt;</code>.
+       <code>&lt;tizen:category name="http://tizen.org/category/ime"/&gt;</code> must be defined to activate <code>&lt;tizen:ime&gt;</code>.
 </div>
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or 1</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or 1</li>
        </ul>
-        <p><strong>Expected children:</strong> </p> 
-    <ul> 
-       <li><code>uuid</code> <p>Mandatory; universally unique, an unique identifier that distinguishes an IME from each other, displayed in the form of standard UUID (8-4-4-4-12 for a total of 36 characters)</p></li> 
+        <p><strong>Expected children:</strong> </p>
+    <ul>
+       <li><code>uuid</code> <p>Mandatory; universally unique, an unique identifier that distinguishes an IME from each other, displayed in the form of standard UUID (8-4-4-4-12 for a total of 36 characters)</p></li>
        <li><code>languages</code> <p>Mandatory; list of input languages that the current IME supports</p>
 
 <div class="note">
     <strong>Note</strong>
        <code>&lt;tizen:language/&gt;</code> elements are provided as the child elements of this element.
 </div>
-    </li> 
+    </li>
     </ul>
          <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:ime&gt;
     &lt;tizen:uuid&gt;6135122a-a428-40d2-8feb-a75f462c202c&lt;/tizen:uuid&gt;
@@ -1271,11 +1271,11 @@
     &lt;/tizen:languages&gt;
 &lt;/tizen:ime&gt;
 
-&lt;tizen:category name=&quot;http://tizen.org/category/ime&quot;/&gt;</pre>
+&lt;tizen:category name="http://tizen.org/category/ime"/&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="ww_language">
 <tbody>
 <tr>
@@ -1283,9 +1283,9 @@
 </tr>
  <tr>
  <td>Used to define the supported input language of the current IME type application.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>1 or more</li>
        </ul>
          <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:languages&gt;
   &lt;tizen:language&gt;en-us&lt;/tizen:language&gt;
@@ -1294,8 +1294,8 @@
  </td>
  </tr>
  </tbody></table>
- 
-  <h3 id="ww_metadata" name="ww_metadata">Tizen Metadata</h3> 
+
+  <h3 id="ww_metadata" name="ww_metadata">Tizen Metadata</h3>
  <table>
 <tbody>
 <tr>
@@ -1303,12 +1303,12 @@
 </tr>
  <tr>
  <td>Used to define metadata information shared with other Web applications. The defined metadata can be accessed (read-only) through the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or more</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
        <li><code>key</code>
            <p>Mandatory; unique key string.</p>
            <p>The maximum length can be limited to 80 bytes. In that case, leftover bytes are ignored.</p>
@@ -1317,13 +1317,13 @@
            <p>Optional; string.</p>
            <p>The maximum length can be limited to 8192 bytes. In that case, leftover bytes are ignored.</p>
        </li>
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:metadata key=&quot;key1&quot;/&gt;
-&lt;tizen:metadata key=&quot;key2&quot; value=&quot;value/&gt;</pre>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:metadata key="key1"/&gt;
+&lt;tizen:metadata key="key2" value="value/&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
-    <h3 id="ww_privilege" name="ww_privilege">Tizen Privilege</h3> 
+
+    <h3 id="ww_privilege" name="ww_privilege">Tizen Privilege</h3>
 <table>
 <tbody>
 <tr>
@@ -1331,19 +1331,19 @@
 </tr>
  <tr>
  <td>Used to get the required API access privileges for the Web application.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or more</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>name</code><p> Mandatory; URI of the Device API privilege</p></li> 
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot; /&gt;</pre>
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>name</code><p> Mandatory; URI of the Device API privilege</p></li>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:privilege name="http://tizen.org/privilege/application.launch" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
-  <h3 id="ww_profile" name="ww_profile">Tizen Profile</h3> 
+
+  <h3 id="ww_profile" name="ww_profile">Tizen Profile</h3>
 <table>
 <tbody>
 <tr>
@@ -1351,19 +1351,19 @@
 </tr>
  <tr>
  <td>Used to define the application profile.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
        <li>1</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>name</code> <p>Mandatory; string</p></li> 
-      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name=&quot;wearable&quot; /&gt;</pre>
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>name</code> <p>Mandatory; string</p></li>
+      </ul><p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:profile name="wearable" /&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
-    <h3 id="ww_setting" name="ww_setting">Tizen Settings</h3> 
+
+    <h3 id="ww_setting" name="ww_setting">Tizen Settings</h3>
 <table>
 <tbody>
 <tr>
@@ -1371,20 +1371,20 @@
 </tr>
  <tr>
  <td>Used to define additional application settings.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or more</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-     
-      <li><code>background-support</code> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+
+      <li><code>background-support</code>
          <p>Optional; application execution continues when it is moved to the background (available values: <code>enable</code> (execution continues on the background), <code>disable</code> (default; application is suspended))</p>
 <div class="note">
     <strong>Note</strong>
        Since Tizen 2.4, the system manages background processes more tightly. Even if the <code>background-support</code> attribute is set to <code>enable</code>, the Web application process can be suspended on the background. To guarantee that the application runs on the background, <a href="#ww_bg_category">add at least one background category</a> for the application with the <code>&lt;tizen:background-category&gt;</code> element. Only the background categories declared in the system can be used.
 </div>
-         </li> 
+         </li>
       <li><code>context-menu</code> <p>Optional; sets whether the context menu is shown (available values: <code>enable</code> (default), <code>disable</code>)</p><p>If this option is enabled, the context menu is visible to the user.</p></li>
       <li><code>encryption</code> <p>Optional; sets whether Web Application resources are encrypted (available values: <code>enable</code>, <code>disable</code> (default))</p><p>If this option is enabled, the application resources(HTML, JS and CSS files) are encrypted.</p></li>
       <li><code>screen-orientation</code> <p>Optional; sets whether it locks the orientation of the Web Application (available values: <code>portrait</code> (default), <code>landscape</code>, <code>auto-rotation</code>)</p>
@@ -1394,26 +1394,26 @@
        <li><code>install-location</code> <p>Optional; application installation location (available values: <code>auto</code> (default), <code>internal-only</code>, <code>prefer-external</code>)</p>
                <ul>
                <li><code>auto</code>: the system defines the installation location</li>
-               <li><code>internal-only</code>: the application is installed in the device&#39;s internal storage</li>
+               <li><code>internal-only</code>: the application is installed in the device's internal storage</li>
                <li><code>prefer-external</code>: the application is installed in the external storage (if available)</li>
-               </ul>  
+               </ul>
           </li>
-         
+
       <li><code>hwkey-event</code> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <code>enable</code> (default), <code>disable</code>)</p><p>If this option is enabled, the <code>tizenhwkey</code> custom event is sent to the Web application. The <code>tizenhwkey</code> event object has a <code>keyName</code> attribute (available value: <code>back</code>).</p></li>
-         
+
          </ul><p><strong>Example:</strong> </p><pre class="prettyprint">
-&lt;tizen:setting background-support=&quot;enable&quot; /&gt;
-&lt;tizen:setting context-menu=&quot;disable&quot; /&gt;
-&lt;tizen:setting encryption=&quot;enable&quot; /&gt;
-&lt;tizen:setting screen-orientation=&quot;landscape&quot; /&gt;
-&lt;tizen:setting install-location=&quot;internal-only&quot; /&gt;
-&lt;tizen:setting hwkey-event=&quot;enable&quot; /&gt;
-</pre> 
+&lt;tizen:setting background-support="enable" /&gt;
+&lt;tizen:setting context-menu="disable" /&gt;
+&lt;tizen:setting encryption="enable" /&gt;
+&lt;tizen:setting screen-orientation="landscape" /&gt;
+&lt;tizen:setting install-location="internal-only" /&gt;
+&lt;tizen:setting hwkey-event="enable" /&gt;
+</pre>
  </td>
  </tr>
  </tbody></table>
 
-      <h3 id="ww_service" name="ww_service">Tizen Service</h3> 
+      <h3 id="ww_service" name="ww_service">Tizen Service</h3>
 <table>
 <tbody>
 <tr>
@@ -1422,12 +1422,12 @@
  <tr>
  <td>Used to define Web Service Application.
 
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or more</li>
        </ul>
      <p><strong>Expected children:</strong> </p>
-      <ul> 
+      <ul>
        <li><a href="#ww_service-content">&lt;tizen:content /&gt;</a></li>
           <li><a href="#ww_service-name">&lt;tizen:name /&gt;</a></li>
        <li><a href="#ww_service-icon">&lt;tizen:icon /&gt;</a></li>
@@ -1435,25 +1435,25 @@
        <li><a href="#ww_service-metadata">&lt;tizen:metadata /&gt;</a></li>
        <li><a href="#ww_service-category">&lt;tizen:category /&gt;</a></li>
       </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-               <li><code>id</code> <p>Mandatory; Tizen service ID, which is a combination of the Tizen wearable package ID and service name.</p><p>The service ID is a set of characters (0~9, a~z, A~Z) and unique in the device. The minimum value is 1 byte and maximum value is 52 bytes.</p></li> 
-               <li><code>on-boot</code> <p>Optional; sets whether the service application is launched automatically on device booting time (available values: <code>true</code>, <code>false</code> (default))</p></li> 
-               <li><code>auto-restart</code> <p>Optional; sets whether the service application is relaunched automatically when it is terminated (available values: <code>true</code>, <code>false</code> (default))</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+               <li><code>id</code> <p>Mandatory; Tizen service ID, which is a combination of the Tizen wearable package ID and service name.</p><p>The service ID is a set of characters (0~9, a~z, A~Z) and unique in the device. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
+               <li><code>on-boot</code> <p>Optional; sets whether the service application is launched automatically on device booting time (available values: <code>true</code>, <code>false</code> (default))</p></li>
+               <li><code>auto-restart</code> <p>Optional; sets whether the service application is relaunched automatically when it is terminated (available values: <code>true</code>, <code>false</code> (default))</p></li>
 
       </ul>
-      <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:service id=&quot;webService.application&quot; auto-restart=&quot;true&quot; on-boot=&quot;false&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:content src=&quot;service/service.js&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:name&gt;WebService&lt;/tizen:name&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:icon src=&quot;service-icon.png&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:description&gt;Web Service Application&lt;/tizen:description&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:metadata key=&quot;key1&quot; value=&quot;value1&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:category name=&quot;http://tizen.org/category/service&quot;/&gt;
+      <p><strong>Example:</strong> </p><pre class="prettyprint">&lt;tizen:service id="webService.application" auto-restart="true" on-boot="false"&gt;
+   &lt;tizen:content src="service/service.js"/&gt;
+   &lt;tizen:name&gt;WebService&lt;/tizen:name&gt;
+   &lt;tizen:icon src="service-icon.png"/&gt;
+   &lt;tizen:description&gt;Web Service Application&lt;/tizen:description&gt;
+   &lt;tizen:metadata key="key1" value="value1"/&gt;
+   &lt;tizen:category name="http://tizen.org/category/service"/&gt;
 &lt;tizen:service&gt;</pre>
  </td>
  </tr>
  </tbody></table>
- 
+
  <table id="ww_service-content">
 <tbody>
 <tr>
@@ -1461,18 +1461,18 @@
 </tr>
  <tr>
  <td>Used to define the start page of the Web Service Application.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>1</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>src</code> <p>Mandatory; start JavaScript file path of the Web Service Application. The path is relative to the source Web application directory.</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>src</code> <p>Mandatory; start JavaScript file path of the Web Service Application. The path is relative to the source Web application directory.</p></li>
       </ul>
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="ww_service-name">
 <tbody>
 <tr>
@@ -1480,18 +1480,18 @@
 </tr>
  <tr>
  <td>Used to define the name of Web Service Application.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>1 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>1 or more</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>xml:lang</code> <p>Optional; specifies the language of the service name (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>xml:lang</code> <p>Optional; specifies the language of the service name (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li>
       </ul>
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="ww_service-icon">
 <tbody>
 <tr>
@@ -1499,18 +1499,18 @@
 </tr>
  <tr>
  <td>Used to define the icon of Web Service Application.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or 1</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or 1</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>src</code> <p>Mandatory; file path of the Web Service Application icon. The path is relative to the source Web application directory.</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>src</code> <p>Mandatory; file path of the Web Service Application icon. The path is relative to the source Web application directory.</p></li>
       </ul>
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="ww_service-description">
 <tbody>
 <tr>
@@ -1518,14 +1518,14 @@
 </tr>
  <tr>
  <td>Used to define the description of the Web Service Application.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or 1</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or 1</li>
        </ul>
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="ww_service-metadata">
 <tbody>
 <tr>
@@ -1533,19 +1533,19 @@
 </tr>
  <tr>
  <td>Used to define metadata information shared with other Web Applications. The defined metadata can be accessed (read-only) through the Tizen Application API.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or more</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>key</code> <p>Mandatory; unique key string</p></li> 
-       <li><code>value</code> <p>Optional; string</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>key</code> <p>Mandatory; unique key string</p></li>
+       <li><code>value</code> <p>Optional; string</p></li>
       </ul>
  </td>
  </tr>
  </tbody></table>
- 
+
 <table id="ww_service-category">
 <tbody>
 <tr>
@@ -1553,20 +1553,20 @@
 </tr>
  <tr>
  <td>Used to define the categories that the service application belongs to.
-        <p><strong>Occurrences:</strong> </p> 
-       <ul> 
-       <li>0 or more</li> 
+        <p><strong>Occurrences:</strong> </p>
+       <ul>
+       <li>0 or more</li>
        </ul>
-        <p><strong>Attributes:</strong> </p> 
-      <ul> 
-       <li><code>name</code> <p>Mandatory; string</p></li> 
+        <p><strong>Attributes:</strong> </p>
+      <ul>
+       <li><code>name</code> <p>Mandatory; string</p></li>
       </ul>
  </td>
  </tr>
  </tbody></table>
- 
 
- 
+
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 
diff --git a/org.tizen.studio/html/web_tools/content_assist_w.htm b/org.tizen.studio/html/web_tools/content_assist_w.htm
index 2d5cf80..d7a675c 100644 (file)
--- a/org.tizen.studio/html/web_tools/content_assist_w.htm
+++ b/org.tizen.studio/html/web_tools/content_assist_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Speeding Up Typing with Content Assist</title>  
+       <title>Speeding Up Typing with Content Assist</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -40,14 +40,14 @@
 
 <div id="container"><div id="contents"><div class="content">
  <h1>Speeding Up Typing with Content Assist</h1>
- 
+
 <p>Content assist is a function provided in parts of the Tizen Studio to help you write code faster and more efficiently.</p>
 <p>Content assist allows you to quickly type names in the context of the code. It can be further improved to assist the you. For example, you can just type in the first letter as lowercase (uppercase letters from a type or variable name), and press <strong>Ctrl + Space</strong> to be offered all the choices that match the entered letters that are valid for the current context (class name, interface name, variable, or field names).</p>
 <p>The Tizen Studio supports Web API, W3C API, jQuery API, and jQuery Mobile API. User-defined and third party APIs can be supported by expanding the content assist functionality.</p>
 
-<p align="center"><strong>Figure: Content assist in the JavaScript editor</strong></p> 
+<p align="center"><strong>Figure: Content assist in the JavaScript editor</strong></p>
 <p align="center"><img alt="Content assist in the JavaScript editor" src="../images/content_assist.png"/></p>
-  
+
 <h2 id="assist">Using the Content Assist</h2>
 <p>To use the content assist in the source editor (JavaScript editor, CSS editor or HTML editor):</p>
 <ol>
diff --git a/org.tizen.studio/html/web_tools/cover_code_w.htm b/org.tizen.studio/html/web_tools/cover_code_w.htm
index da2f85c..a9e0e88 100644 (file)
--- a/org.tizen.studio/html/web_tools/cover_code_w.htm
+++ b/org.tizen.studio/html/web_tools/cover_code_w.htm
@@ -40,16 +40,16 @@
 
         <li><a href="live_editing_w.htm">Live Editing</a> <strong>(Live Editing of HTML, CSS, and JavaScript)</strong>
                <p>The Live Editing tool allows you to apply source changes to the running application immediately (without building, packaging, and relaunching). You can monitor how the changes you have made in a file are rendered in the target window without refreshing the page manually.</p></li>
-               
+
                <li><a href="content_assist_w.htm">Content Assist</a> <strong>(Speeding Up Typing with Content Assist)</strong>
-               <p>The Content Assist tool is a function provided in parts of the Tizen Studio to help you write code faster and more efficiently. It allows you to quickly type names in the context of the code.</p></li>     
-               
+               <p>The Content Assist tool is a function provided in parts of the Tizen Studio to help you write code faster and more efficiently. It allows you to quickly type names in the context of the code.</p></li>
+
         <li><a href="code_productivity_w.htm">Code Productivity</a> <strong>(Improving Your Code Productivity)</strong>
                <p>The Code Productivity tool provides various features for productive development. It includes the Code Beautifier and Code Minifier features that you can use with the Tizen Web Editor. The Code Beautifier can help you understand code and make it easier to read, while the Code Minifier removes or modifies some unnecessary characters from the code.</p></li>
-               
+
                <li><a href="rest_viewer_w.htm">REST Viewer</a> <strong>(Using the REST Viewer)</strong>
                <p>The REST Viewer tool allows you to view and edit WADL documents, and use RESTful Web services. The REST Viewer provides facilities to emulate interaction with a Web service by composing and running requests as if it was the application that actually calls the service.</p></li>
-               
+
                <li><a href="previewer_w.htm">Previewer</a> <strong>(Previewing Pages in a Browser)</strong>
                <p>The Previewer tools allows you to preview the source code you have developed. In addition, you can visually define the type and hierarchy of the selector to help development.</p></li>
 
diff --git a/org.tizen.studio/html/web_tools/cover_debug_w.htm b/org.tizen.studio/html/web_tools/cover_debug_w.htm
index 90c0742..3490f37 100644 (file)
--- a/org.tizen.studio/html/web_tools/cover_debug_w.htm
+++ b/org.tizen.studio/html/web_tools/cover_debug_w.htm
@@ -38,13 +38,13 @@
 
                <li><a href="../common_tools/log_view.htm">Log View</a> <strong>(Checking Logs with Log View)</strong>
                <p>The <strong>Log</strong> view allows you to check the logs of your application based on the logging methods you have inserted to your code. It helps to debug your application by capturing all the events logged by the platform and your application.</p></li>
-               
+
                <li><a href="../common_tools/da_overview.htm">Dynamic Analyzer</a> <strong>(Monitoring Performance with Dynamic Analyzer)</strong>
-               <p>The Dynamic Analyzer tool monitors the performance of your application on a target device or emulator. It analyzes your application for potential performance issues, such as high usage of CPU, memory, file or network operations.</p></li>        
+               <p>The Dynamic Analyzer tool monitors the performance of your application on a target device or emulator. It analyzes your application for potential performance issues, such as high usage of CPU, memory, file or network operations.</p></li>
 
                <li><a href="web_inspector_w.htm">Web Inspector</a> <strong>(Debugging with Web Inspector)</strong>
                <p>The Web Inspector tool allows you to debug your Web applications. It supports various features, such as viewing the Web page components, inspecting local and downloaded resources and the JavaScript source page, and performing advanced timing and speed analysis.</p></li>
-               
+
                <li><a href="js_analyzer_w.htm">JavaScript Analyzer</a> <strong>(Analyzing JavaScript Problems)</strong>
                <p>The JavaScript Analyzer tool makes it easy to find problems in JavaScript code. It supports 2 analyzer types: a static analyzer to check the coding rules and a dynamic analyzer to check stale objects.</p></li>
 </ul>
diff --git a/org.tizen.studio/html/web_tools/cover_project_mgmt_w.htm b/org.tizen.studio/html/web_tools/cover_project_mgmt_w.htm
index 6cc3c3a..2f5dc32 100644 (file)
--- a/org.tizen.studio/html/web_tools/cover_project_mgmt_w.htm
+++ b/org.tizen.studio/html/web_tools/cover_project_mgmt_w.htm
@@ -37,10 +37,10 @@
 <ul>
                <li><a href="project_wizard_w.htm">Project Creation Wizard</a> <strong>(Creating Tizen Projects with Tizen Project Wizard)</strong>
                <p>The Project Wizard tool is used to create an application project. You can select from various project templates and samples that make it easier for you to start coding your application. When you create a new project with a specific template, the Project Wizard uses it to automatically create basic functionalities and default project files and folders for the application.</p></li>
-               
+
                <li><a href="project_explorer_view_w.htm">Project Explorer View</a> <strong>(Managing Tizen Projects with Project Explorer View)</strong>
                <p>The <strong>Project Explorer</strong> view shows a hierarchical view of all project resources in the workspace. It allows you to manage Tizen projects, change the project resources, and build, export, and convert projects.</p></li>
-               
+
                <li><a href="../common_tools/certificate_registration.htm">Certificate Registration</a> <strong>(Working with the Certificate Profile)</strong>
         <p>The Certificate Manager tool is used to create a certificate profile and register author and distributor certificates. Before installing your application on a device or submitting it to the Tizen Store, you must sign it with a certificate profile while packaging your application.</p></li>
 </ul>
diff --git a/org.tizen.studio/html/web_tools/cover_run_test_w.htm b/org.tizen.studio/html/web_tools/cover_run_test_w.htm
index ce8a1cb..4e23a2c 100644 (file)
--- a/org.tizen.studio/html/web_tools/cover_run_test_w.htm
+++ b/org.tizen.studio/html/web_tools/cover_run_test_w.htm
@@ -37,13 +37,13 @@
 <ul>
                <li><a href="../common_tools/connection_explorer_view.htm">Connection Explorer View</a> <strong>(Managing and Connecting Devices for Testing)</strong>
                <p>The <strong>Connection Explorer</strong> view shows the devices connected to the system, and allows you to manage multiple emulator instances. You can explore the file systems of the connected devices and perform file operations.</p></li>
-               
+
                <li><a href="../common_tools/smart_development_bridge.htm">SDB</a> <strong>(Connecting Devices over Smart Development Bridge)</strong>
                <p>The SDB tool uses a command line to communicate with an emulator instance or a connected target device. You can send commands to a specific device to advance application development, such as file transfer, remote shell command, port forwarding for a debugger, viewing, filtering, and controlling target log output.</p></li>
-               
+
                <li><a href="../common_tools/emulator.htm">Emulator</a> <strong>(Running Applications on the Emulator)</strong>
                <p>The Tizen emulator tool reduces the inconvenience of testing the application in a real device, by providing an environment similar to a real device. With the Emulator Manager, you can create multiple emulator instances, each representing a different  environment (device type).</p></li>
-               
+
                <li><a href="web_unit_test_tool_w.htm">Web Unit Testing Tool</a> <strong>(Unit Testing Web Applications)</strong>
                <p>The unit test tool is used to ensure that the application runs properly as intended in the source code. You can create, edit, and run unit tests, and check and analyze the test results.</p></li>
 </ul>
diff --git a/org.tizen.studio/html/web_tools/cover_web_w.htm b/org.tizen.studio/html/web_tools/cover_web_w.htm
index 1b1e4ca..4a8ed1d 100644 (file)
--- a/org.tizen.studio/html/web_tools/cover_web_w.htm
+++ b/org.tizen.studio/html/web_tools/cover_web_w.htm
@@ -43,16 +43,16 @@
        <li><a href="cover_code_w.htm">Writing and Editing Codes</a>
        <p>You can edit HTML, JS, and CSS files in specific editors, and preview how the changing code affects the application screen. You can also use the live editing feature to modify the application while it is running.</p>
        <p>You can use the content assist, privilege checker, and code productivity tools to speed up the code writing and verification task. With the REST Viewer tool, you can emulate interaction with a Web service. In addition, you can modify various Tizen Studio preferences to ensure that the code editing environment suits your needs.</p></li>
-       
+
        <li><a href="cover_configure_w.htm">Configuring Your Application</a>
        <p>You can manage various application functionalities and features through the application configuration file, which you can easily configure with a test or form editor. In addition, you can localize your application to use various languages and locale-specific resources by using the <strong>Web Localization</strong> view in the Tizen Studio.</p></li>
-       
+
        <li><a href="cover_debug_w.htm">Debugging Your Application</a>
-       <p>You can debug, profile, and optimize your application with various tools, such as the Dynamic Analyzer, Web Inspector, and JavaScript Analyzer. The Tizen Studio provides various views designed to help you identify and fix runtime errors, such as the  <strong>Log</strong> view.</p></li>       
-       
+       <p>You can debug, profile, and optimize your application with various tools, such as the Dynamic Analyzer, Web Inspector, and JavaScript Analyzer. The Tizen Studio provides various views designed to help you identify and fix runtime errors, such as the  <strong>Log</strong> view.</p></li>
+
        <li><a href="cover_run_test_w.htm">Running and Testing Your Application</a>
        <p>You can run and test your application using the Tizen emulator. In addition, you can use the <strong>Connection Explorer</strong> view to manage connections to the emulator and various other target devices. The Smart Development Bridge (SDB) tool allows you to communicate with a connected target device, and the unit test tool allows you to create test projects to verify the reliability of your code.</p></li>
-       
+
        <li><a href="web_simulator_w.htm">Using the Web Simulator</a>
        <p>You can run your Web application in a Google Chrome&trade;-based simulator, which provides many settings and features for debugging your application. You can test how the application behaves, and even send in events and messages.</p></li>
 </ul>
diff --git a/org.tizen.studio/html/web_tools/js_analyzer_w.htm b/org.tizen.studio/html/web_tools/js_analyzer_w.htm
index d67398a..4171d32 100644 (file)
--- a/org.tizen.studio/html/web_tools/js_analyzer_w.htm
+++ b/org.tizen.studio/html/web_tools/js_analyzer_w.htm
@@ -44,8 +44,8 @@
 <p>JSA supports 2 analyzer types:</p>
 <ul>
     <li><strong>Static Analyzer</strong> (Coding Rule Checker)
-        <p>Contains checkers for a set of predefined coding rules. It supports 27 rules, including coding rules and Web API usage rules.</p> 
-<p>The Coding Rule Checker is a static analysis tool that evaluates an application by examining the JavaScript code without its execution. This type of checkers examine all possible execution paths and variable values, and then provide its their analysis result.</p>             
+        <p>Contains checkers for a set of predefined coding rules. It supports 27 rules, including coding rules and Web API usage rules.</p>
+<p>The Coding Rule Checker is a static analysis tool that evaluates an application by examining the JavaScript code without its execution. This type of checkers examine all possible execution paths and variable values, and then provide its their analysis result.</p>
       </li>
     <li><strong>Dynamic Analyzer</strong> (Stale Object Checker)
         <p>Contains a checker for stale objects that cause possible memory leaks.</p>
@@ -95,25 +95,25 @@
 
 <p>For example, if the functions that have a same name are defined as following example codes, the <code>foo</code> function is changed whenever the <code>func1</code> or <code>func2</code> function is called. The <code>foo</code> function can not be guaranteed.</p>
 
-<p>This rule is supported by the JSLint and the Google Closure Linter. They say that &quot;When you fail to specify <code>var</code>, the variable gets placed in the global context, potentially clobbering existing values. Also, if there is no declaration, it is hard to tell in what scope a variable lives.&quot;</p>
+<p>This rule is supported by the JSLint and the Google Closure Linter. They say that "When you fail to specify <code>var</code>, the variable gets placed in the global context, potentially clobbering existing values. Also, if there is no declaration, it is hard to tell in what scope a variable lives."</p>
 
 <pre class="prettyprint">function func1() {
-&nbsp;&nbsp;&nbsp;/* The foo function is defined without the var keyword */
-&nbsp;&nbsp;&nbsp;foo = function() {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&#39;func1&#39;);
-&nbsp;&nbsp;&nbsp;};
+   /* The foo function is defined without the var keyword */
+   foo = function() {
+      alert('func1');
+   };
 
-&nbsp;&nbsp;&nbsp;/* When the foo function is called, the foo function is not clear */
-&nbsp;&nbsp;&nbsp;foo();
+   /* When the foo function is called, the foo function is not clear */
+   foo();
 }
 function func2() {
-&nbsp;&nbsp;&nbsp;/* The other foo function is defined without var keyword */
-&nbsp;&nbsp;&nbsp;foo = function() {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&#39;func2&#39;);
-&nbsp;&nbsp;&nbsp;};
+   /* The other foo function is defined without var keyword */
+   foo = function() {
+      alert('func2');
+   };
 
-&nbsp;&nbsp;&nbsp;/* When the foo function is called, the foo function is not clear */
-&nbsp;&nbsp;&nbsp;foo();
+   /* When the foo function is called, the foo function is not clear */
+   foo();
 }</pre>
 
 <p>The JSA displays the following message:</p>
@@ -127,8 +127,8 @@ function func2() {
 <p>In the following example, the statement <code>var arguments = [];</code> in the function overwrites the reserved keyword <code>arguments</code>. As a result, the reserved keyword <code>arguments</code> in functions lose the feature to access the arguments of the function.</p>
 
 <pre class="prettyprint">function func() {
-&nbsp;&nbsp;&nbsp;/* &#39;arguments&#39; has been predefined as a reserved keyword */
-&nbsp;&nbsp;&nbsp;var arguments = [];
+   /* 'arguments' has been predefined as a reserved keyword */
+   var arguments = [];
 }</pre>
 
 <p>The JSA displays the following message:</p>
@@ -141,17 +141,17 @@ function func2() {
 
 <p>In the following example, you always expect 1 to be returned from calling the <code>test</code> function. However, the returned value is not always 1 because the variable <code>x</code> in the function <code>outer</code> is captured.</p>
 
-<p>This rule is introduced in the Google JavaScript Style Guide. They say that &quot;The ability to create closures is perhaps the most useful and often overlooked feature of JS.One thing to keep in mind, however, is that a closure keeps a pointer to its enclosing scope. As a result, attaching a closure to a DOM element can create a circular reference and thus, a memory leak.&quot;.</p>
+<p>This rule is introduced in the Google JavaScript Style Guide. They say that "The ability to create closures is perhaps the most useful and often overlooked feature of JS.One thing to keep in mind, however, is that a closure keeps a pointer to its enclosing scope. As a result, attaching a closure to a DOM element can create a circular reference and thus, a memory leak.".</p>
 
 <pre class="prettyprint">var outer = function() {
-&nbsp;&nbsp;&nbsp;/* Warning case, be careful */
-&nbsp;&nbsp;&nbsp;var x = 0;
+   /* Warning case, be careful */
+   var x = 0;
 
-&nbsp;&nbsp;&nbsp;return function() {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Variable x of the outer function is captured in the inner function */
+   return function() {
+      /* Variable x of the outer function is captured in the inner function */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return ++x;
-&nbsp;&nbsp;&nbsp;}
+      return ++x;
+   }
 }
 var x = -1;
 
@@ -177,16 +177,16 @@ test();</pre>
 
 <p>Extra semicolons make readability worse. In addition, it may cause wrong operation of the program. </p>
 
-<p>This rule is described in the Google JavaScript Coding Style Guide. They say that &quot;Extra comma and semicolon can make error.&quot;.</p>
+<p>This rule is described in the Google JavaScript Coding Style Guide. They say that "Extra comma and semicolon can make error.".</p>
 
 <pre class="prettyprint">function func() {
-&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; 10; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Extra semicolon */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x++;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Extra semicolon after the &#39;for&#39; statement */
-&nbsp;&nbsp;&nbsp;};
+   for (var i = 0; i &lt; 10; i++) {
+      /* Extra semicolon */
+      x++;;
+      /* Extra semicolon after the 'for' statement */
+   };
 
-&nbsp;&nbsp;&nbsp;return x;
+   return x;
 /* Extra semicolon after the function definition statement */
 };
 var result = func();</pre>
@@ -197,14 +197,14 @@ var result = func();</pre>
 
 <h4>Rule 5. Do Not Use the Delete Keyword</h4>
 
-<p>Deleting the property of the object needs time to operate removing the property. In addition, it changes the shape of object. The change of the object&#39;s shape may cause decrease of performance. </p>
+<p>Deleting the property of the object needs time to operate removing the property. In addition, it changes the shape of object. The change of the object's shape may cause decrease of performance. </p>
 
 <p>In the following example, the property <code>value</code> of the instance <code>obj</code> is deleted using the keyword <code>delete</code>. This leads the instance <code>obj</code> not to share the shape of the constructor <code>Obj</code> with other instances. For that reason, the performance can be slower.</p>
 
-<p>This rule is introduced by the Google JavaScript Style Guide. They say that &quot;In modern JavaScript engines, changing the number of properties on an object is much slower than reassigning the values. The delete keyword should be avoided except when it is necessary to remove a property from an object&#39;s iterated list of keys, or to change the result of if (key in obj).&quot;</p>
+<p>This rule is introduced by the Google JavaScript Style Guide. They say that "In modern JavaScript engines, changing the number of properties on an object is much slower than reassigning the values. The delete keyword should be avoided except when it is necessary to remove a property from an object's iterated list of keys, or to change the result of if (key in obj)."</p>
 
 <pre class="prettyprint">function Obj() {
-&nbsp;&nbsp;&nbsp;this.value = 10;
+   this.value = 10;
 };
 var obj = new Obj();
 
@@ -219,11 +219,11 @@ delete obj.value;</pre>
 
 <p>Using multi-line string literals can cause unexpected operation of the program because of the whitespace at the beginning of each line and after the backslash (\). </p>
 
-<p>This rule is introduced by the Google JavaScript Style Guide. They say that &quot;The whitespace at the beginning of each line can&#39;t be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript&quot;.</p>
+<p>This rule is introduced by the Google JavaScript Style Guide. They say that "The whitespace at the beginning of each line can't be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript".</p>
 
 <pre class="prettyprint">/* Multi-line string literals can create a problem */
-var str = &#39;The Test String \
-&nbsp;&nbsp;&nbsp;for Positive TC&#39;;</pre>
+var str = 'The Test String \
+   for Positive TC';</pre>
 
 <p>The JSA displays the following message:</p>
 
@@ -235,7 +235,7 @@ var str = &#39;The Test String \
 
 <p>In the following example, the array <code>arr2</code> that has 3 values (1, 2, and 3) can be created using an array constructor. In the same way, if  the array <code>arr1</code> that has a  single value (1) is created using  an array constructor,  it is the array with the length 1, not arr[0] is 1.</p>
 
-<p>This rule is introduced by the Google Javascript Style Guide. They say that &quot;Array constructors are error-prone due to their arguments&quot;.</p>
+<p>This rule is introduced by the Google Javascript Style Guide. They say that "Array constructors are error-prone due to their arguments".</p>
 
 <pre class="prettyprint">var x = 1
 
@@ -255,11 +255,11 @@ var arr2 = new Array(1, 2, 3);</pre>
 
 <p>For example, the functions in prototypes of built-in objects are shared by every instance of the built-in objects. If the function is modified, it affects every instances of the built-in objects.</p>
 
-<p>This rule is introduced by the Google Javascript Style Guide. They say that &quot;Modifying builtins like Object.prototype and Array.prototype are strictly forbidden. It leads to hard to debug issues in production and should be avoided.&quot;</p>
+<p>This rule is introduced by the Google Javascript Style Guide. They say that "Modifying builtins like Object.prototype and Array.prototype are strictly forbidden. It leads to hard to debug issues in production and should be avoided."</p>
 
 <pre class="prettyprint">/* Modifying the function in prototype of built-in object makes debugging difficult */
 Object.prototype.create = function() {
-&nbsp;&nbsp;&nbsp;alert(&#39;Warning!&#39;);
+   alert('Warning!');
 };</pre>
 
 <p>The JSA displays the following message:</p>
@@ -272,17 +272,17 @@ Object.prototype.create = function() {
 
 <p>If a boolean variable is created by the constructor <code>Boolean</code>, its value is a wrapper object, not <code>true</code> or <code>false</code>. In the following example, the program always prints <code>true</code> because the variable <code>bool</code> is a object that has a value, <code>false</code>.</p>
 
-<p>This rule is introduced by the Google Javascript Style Guide. They say that &quot;There&#39;s no reason to use wrapper objects for primitive types, plus they are dangerous&quot;. </p>
+<p>This rule is introduced by the Google Javascript Style Guide. They say that "There's no reason to use wrapper objects for primitive types, plus they are dangerous". </p>
 
 <pre class="prettyprint">/* The variable bool is not false. It is an object with the value false */
 var bool = new Boolean(false);
 
 /* bool is always true */
 if (bool) {
-&nbsp;&nbsp;&nbsp;alert(&#39;true&#39;);
+   alert('true');
 }
 else {
-&nbsp;&nbsp;&nbsp;alert(&#39;false&#39;);
+   alert('false');
 }</pre>
 
 <p>The JSA displays the following message:</p>
@@ -295,13 +295,13 @@ else {
 
 <p>In the following example, you expect to print <code>a</code>, <code>b</code>, and <code>c</code>, but the program prints <code>0</code>, <code>1</code>, and <code>2</code>.</p>
 
-<p>This rule is introduced both by the JSLint and the Google Javascript Style Guide. They say that &quot;for-in loops are often incorrectly used to loop over the elements in an Array. This is however very error prone because it does not loop from 0 to length - 1 but over all the present keys in the object and its prototype chain.&quot;</p>
+<p>This rule is introduced both by the JSLint and the Google Javascript Style Guide. They say that "for-in loops are often incorrectly used to loop over the elements in an Array. This is however very error prone because it does not loop from 0 to length - 1 but over all the present keys in the object and its prototype chain."</p>
 
-<pre class="prettyprint">var arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
+<pre class="prettyprint">var arr = ['a', 'b', 'c'];
 
-/* The variable key is not &#39;a&#39;, &#39;b&#39;, and &#39;c&#39;. It is 0, 1, and 2 */
+/* The variable key is not 'a', 'b', and 'c'. It is 0, 1, and 2 */
 for (var key in arr) {
-&nbsp;&nbsp;&nbsp;alert(key);
+   alert(key);
 }</pre>
 
 <p>The JSA displays the following message:</p>
@@ -316,7 +316,7 @@ for (var key in arr) {
 <pre class="prettyprint">
 /* The temp function needs the closing brace */
 function temp() {
-&nbsp;&nbsp;&nbsp;var a = &#39;ddd&#39;;</pre>
+   var a = 'ddd';</pre>
 
 <p>The JSA displays the following message:</p>
 <pre class="prettyprint">[Syntax Error]Missing closing brace } character.</pre>
@@ -332,12 +332,12 @@ function temp() {
 var a = 10;
 var b = 5;
 for (var i = 0; i &lt; b; i++) {
-&nbsp;&nbsp;&nbsp;a += i;
-&nbsp;&nbsp;&nbsp;/* init i;
+   a += i;
+   /* init i;
 }</pre>
 
 <p>The JSA displays the following message:</p>
-<pre class="prettyprint">[Syntax Error]Missing closing comment &quot;*/&quot;.</pre>
+<pre class="prettyprint">[Syntax Error]Missing closing comment "*/".</pre>
 
 <h4>Rule 13. Do Not Use Unclosed Strings</h4>
 
@@ -349,11 +349,11 @@ for (var i = 0; i &lt; b; i++) {
 /* Setting value for MAX is not correct, missing single quote */
 var MAX = 20;
 for (var i = 0; i &lt; 10; i++) {
-&nbsp;&nbsp;&nbsp;MAX = &#39;tt;
+   MAX = 'tt;
 }</pre>
 
 <p>The JSA displays the following message:</p>
-<pre class="prettyprint">[Syntax Error]Missing closing single-quote &#39; character.</pre>
+<pre class="prettyprint">[Syntax Error]Missing closing single-quote ' character.</pre>
 
 <h4>Rule 14. Do Not Omit Semicolons</h4>
 
@@ -364,7 +364,7 @@ for (var i = 0; i &lt; 10; i++) {
 <pre class="prettyprint">
 /* The declaration of a needed semicolon in the end */
 function tempx() {
-&nbsp;&nbsp;&nbsp;var a = &#39;ddd&#39;
+   var a = 'ddd'
 }</pre>
 
 <p>The JSA displays the following message:</p>
@@ -380,7 +380,7 @@ function tempx() {
 var variable_sum = 1;
 var b = 2;
 var abc
-&nbsp;&nbsp;&nbsp;= 10 + variable_sum + b;
+   = 10 + variable_sum + b;
 </pre>
 
 <p>The JSA displays the following message:</p>
@@ -390,11 +390,11 @@ var abc
 
 <p>Invoking a code block with double-quotes instead of single-quotes for a string is noticed, although the analysis proceeds without stopping.</p>
 
-<p>In the following example, &quot;aa&quot; must be &#39;aa&#39;. The JSA detects it and creates an alarm.</p>
+<p>In the following example, "aa" must be 'aa'. The JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">
 if (true) {
-&nbsp;&nbsp;&nbsp;var a = &quot;aa&quot;;
+   var a = "aa";
 }</pre>
 
 <p>The JSA displays the following message:</p>
@@ -404,7 +404,7 @@ if (true) {
 
 <p>Invoking a code block with an extra comma at the end of object/array literals is noticed, although the analysis proceeds without stopping.</p>
 
-<p>In the following example, the last &#39;,&#39; must be removed. The JSA detects it and creates an alarm.</p>
+<p>In the following example, the last ',' must be removed. The JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">
 var abc = [1, 2, 3,];</pre>
@@ -414,20 +414,20 @@ var abc = [1, 2, 3,];</pre>
 
 <h4>Rule 18. Do Not Use Wrong Opening Brace</h4>
 
-<p>Invoking a code block with an opening brace &#39;{&#39; which does not appear in the same line with the statement is noticed, although the analysis proceeds without stopping.</p>
+<p>Invoking a code block with an opening brace '{' which does not appear in the same line with the statement is noticed, although the analysis proceeds without stopping.</p>
 
-<p>In the following example, the opening brace &#39;{&#39; must appear in the same line with the statement. If not, the JSA detects it and creates an alarm. </p>
+<p>In the following example, the opening brace '{' must appear in the same line with the statement. If not, the JSA detects it and creates an alarm. </p>
 
 <pre class="prettyprint">
 /* Do Not Use Wrong Opening Brace */
-if (true) 
+if (true)
 {
-&nbsp;&nbsp;&nbsp;var test = &#39;test&#39;;
+   var test = 'test';
 }
 </pre>
 
 <p>The JSA displays the following message:</p>
-<pre class="prettyprint">[CodingRule] Opening brace &#39;{&#39; character should appear in the same line with the statement. </pre>
+<pre class="prettyprint">[CodingRule] Opening brace '{' character should appear in the same line with the statement. </pre>
 
 
 <h3 id="api" name="api">Web API Usage Rules</h3>
@@ -446,7 +446,7 @@ var alarm = tizen.alarm.gett(abs_alarm.id);</pre>
 <p>The JSA displays the following message:</p>
 
 <pre class="prettyprint">[Web API Rule] Name gett is not found in the API AlarmManager.
-[Web API Rule] Reading absent property &#39;gett&#39; of object &#39;tizen.alarm&#39;.</pre>
+[Web API Rule] Reading absent property 'gett' of object 'tizen.alarm'.</pre>
 
 <h4>Rule 2. Wrong Argument Number</h4>
 
@@ -455,8 +455,8 @@ var alarm = tizen.alarm.gett(abs_alarm.id);</pre>
 <p>In the following example, the <code>tizen.filesystem.resolve()</code> function needs  more than 1 argument. Since the number of arguments is 1, the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">/* The number of arguments is wrong (2 or more arguments required) */
-tizen.filesystem.resolve(&#39;images&#39;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Missing error callback arguments */);</pre>
+tizen.filesystem.resolve('images'
+                         /* Missing error callback arguments */);</pre>
 
 <p>The JSA displays the following message:</p>
 
@@ -468,11 +468,11 @@ tizen.filesystem.resolve(&#39;images&#39;
 
 <p>In the following example, the <code>tizen.filesystem.resolve()</code> function needs an error callback as its third argument. Because the error callback does not exist, the JSA detects it and creates an alarm.</p>
 
-<pre class="prettyprint">tizen.filesystem.resolve(&#39;images&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(dir) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;Mount point Name is &quot; +  dir.path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Error callback required as the third argument */
+<pre class="prettyprint">tizen.filesystem.resolve('images',
+                         function(dir) {
+                            console.log("Mount point Name is " +  dir.path);
+                         }
+                         /* Error callback required as the third argument */
 );</pre>
 
 <p>The JSA displays the following message:</p>
@@ -486,7 +486,7 @@ tizen.filesystem.resolve(&#39;images&#39;
 <p>In the following example, the <code>tizen.calendar.getCalendars()</code> is a function that can throw exceptions, so it must be wrapped by a <code>try-catch</code> statement. Because the <code>try-catch</code> statement does not exist, the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">/* tizen.calendar.getCalendars API can make exceptions, so it should be wrapped in a try-catch statement */
-tizen.calendar.getCalendars(&#39;EVENT&#39;, calendarListCallback, errorCallback);</pre>
+tizen.calendar.getCalendars('EVENT', calendarListCallback, errorCallback);</pre>
 
 <p>The JSA displays the following message:</p>
 
@@ -498,13 +498,13 @@ tizen.calendar.getCalendars(&#39;EVENT&#39;, calendarListCallback, errorCallback
 
 <p>In the following example, the <code>tizen.contact.getAddressBooks()</code> function needs arguments whose type is the <code>function</code> instead of the <code>string</code> and the <code>undefined</code>, so the JSA detects it and makes an alarm.</p>
 
-<pre class="prettyprint">var addressBooksCB = &#39;notFucntion&#39;;
+<pre class="prettyprint">var addressBooksCB = 'notFucntion';
 try {
-&nbsp;&nbsp;&nbsp;/* The arguments of tizen.contact.getAddressBooks API must be function types instead of strings and undefined */
-&nbsp;&nbsp;&nbsp;tizen.contact.getAddressBooks(addressBooksCB, undefined);
+   /* The arguments of tizen.contact.getAddressBooks API must be function types instead of strings and undefined */
+   tizen.contact.getAddressBooks(addressBooksCB, undefined);
 }
 catch (e) {
-&nbsp;&nbsp;&nbsp;/* Error handling */
+   /* Error handling */
 }</pre>
 
 <p>The JSA displays the following message:</p>
@@ -519,19 +519,19 @@ catch (e) {
 <p>In the following example, the constructor <code>tizen.Contact()</code> function needs a dictionary object as the first argument. If the keys of the dictionary object are different from the spec, the JSA detects it and creates an alarm.</p>
 
 <pre class="prettyprint">var validContactObj = new tizen.Contact({
-&nbsp;&nbsp;&nbsp;name: new tizen.ContactName({
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstName: &#39;Jeffrey&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastName: &#39;Hyman&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nicknames: [&#39;joey ramone&#39;]
-&nbsp;&nbsp;&nbsp;}),
-&nbsp;&nbsp;&nbsp;emails: [new tizen.ContactEmailAddress(&#39;user@domain.com&#39;)],
-&nbsp;&nbsp;&nbsp;phoneNumbers: [new tizen.ContactPhoneNumber(&#39;666666666&#39;)]
+   name: new tizen.ContactName({
+      firstName: 'Jeffrey',
+      lastName: 'Hyman',
+      nicknames: ['joey ramone']
+   }),
+   emails: [new tizen.ContactEmailAddress('user@domain.com')],
+   phoneNumbers: [new tizen.ContactPhoneNumber('666666666')]
 });
 
 var invalidContactObj = new tizen.Contact(
 {
-&nbsp;&nbsp;&nbsp;/* The first argument, whose type is dictionary, of tizen.Contact API does not have the property &#39;foo&#39; */
-&nbsp;&nbsp;&nbsp;foo: &#39;I&#39;m not an member of Contact&#39;</pre>
+   /* The first argument, whose type is dictionary, of tizen.Contact API does not have the property 'foo' */
+   foo: 'I'm not an member of Contact'</pre>
 
 <p>The JSA displays the following message:</p>
 
@@ -548,16 +548,16 @@ function onsuccess() { /* ... */ }
 function onerror() { /* ... */ }
 
 try {
-&nbsp;&nbsp;&nbsp;/* Source code in Web App for Tizen 2.3 wearable platform, but &#39;open()&#39; is defined in mobile-2.3 */
-&nbsp;&nbsp;&nbsp;tizen.archive.open(&#39;downloads/some_archive.zip&#39;, &#39;r&#39;, onsuccess, onerror);
+   /* Source code in Web App for Tizen 2.3 wearable platform, but 'open()' is defined in mobile-2.3 */
+   tizen.archive.open('downloads/some_archive.zip', 'r', onsuccess, onerror);
 } catch (e) {
-&nbsp;&nbsp;&nbsp;/* ... */
+   /* ... */
 }
 </pre>
 
 <p>The JSA displays the following message:</p>
 
-<pre class="prettyprint">[Web API Rule] Tizen Wearable-2.3 API not support &quot;open&quot; API. It is defined in Tizen mobile-2.3.</pre>
+<pre class="prettyprint">[Web API Rule] Tizen Wearable-2.3 API not support "open" API. It is defined in Tizen mobile-2.3.</pre>
 
 
 <h4>Rule 8. API Privilege Missing</h4>
@@ -570,15 +570,15 @@ try {
 <pre class="prettyprint">
 /* JavaScript File */
 function onsuccess() { /* ... */ }
-tizen.application.launch(&#39;targetApp0.main&#39;, onsuccess);
+tizen.application.launch('targetApp0.main', onsuccess);
 
 /* config.xml file (privilege commented) */
-&lt;!--tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/--&gt;
+&lt;!--tizen:privilege name="http://tizen.org/privilege/application.launch"/--&gt;
 </pre>
 
 <p>The JSA displays the following message:</p>
 
-<pre class="prettyprint">[Web API Rule] Tizen <code>tizen.application.launch</code> API need &quot;http://tizen.org/privilege/application.launch&quot; privilege in &#39;config.xml&#39;.</pre>
+<pre class="prettyprint">[Web API Rule] Tizen <code>tizen.application.launch</code> API need "http://tizen.org/privilege/application.launch" privilege in 'config.xml'.</pre>
 
 <h2 id="stalechecker" name="support">Using the Stale Object Checker</h2>
 
@@ -626,8 +626,8 @@ tizen.application.launch(&#39;targetApp0.main&#39;, onsuccess);
 
 <ul><li>The anonymous event handler function at the line 10 is identified as a stale object that can cause a memory leak.</li>
 <li>In the call tree view, a call hierarchy is shown for the function which contains the code that creates stale objects. The name of a node in the call tree view indicates the file name, line number, and column number.
-<p>The &quot;js/main_orig_.js:10:45&quot; root element indicates that the memory leak occurs at line 10, column 45 in the <code>js/main_orig_.js</code> file.</p>
-<p>Click the root element to move the source view to the location. Click the &quot;js/main_orig_.js:27:5&quot; child node to move the source view to line 27 where the function that contains the memory leak issue is called, and to highlight the function.</p></li>
+<p>The "js/main_orig_.js:10:45" root element indicates that the memory leak occurs at line 10, column 45 in the <code>js/main_orig_.js</code> file.</p>
+<p>Click the root element to move the source view to the location. Click the "js/main_orig_.js:27:5" child node to move the source view to line 27 where the function that contains the memory leak issue is called, and to highlight the function.</p></li>
 <li>In the timeline view, the x axis represents the time elapse and the y axis represents the number of created objects from this site. Move the mouse to a specific time to show the number of stale and allocated instances on the graph.</li>
 <li>In the access paths view, you can find out the scope of an object at runtime which leads to the location of the memory leak.</li></ul>
 
@@ -642,29 +642,29 @@ tizen.application.launch(&#39;targetApp0.main&#39;, onsuccess);
 <h3 id="samplecode" name="samplecode">Timer Sample Code</h3>
 
 <p>When you click <strong>start</strong>, the Timer starts to run. If you click again, the timer stops. The <code>exitApp()</code> function registers an event handler for the Tizen <strong>Back</strong> key to terminate the application when the <strong>Back</strong> key is pressed. </p>
-    
+
 <p>In the <code>runtime()</code> function, the <code>exitApp()</code> function is added by mistake. As a result, every time you click <strong>start</strong>, the <code>exitApp()</code> function is called, creates an anonymous function, and registers it to listen to the <strong>Back</strong> key events. When you test this application with the Stale Object Checker, multiple <strong>start</strong> button clicks are shown as a memory leak.</p>
 
 <pre class="prettyprint">
 /* JavaScript snippets */
 function exitApp() {
-&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;tizenhwkey&#39;, function(e) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.keyName == &#39;back&#39;) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} catch (error) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;getCurrentApplication(): &#39; + error.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+   document.addEventListener('tizenhwkey', function(e) {
+      if (e.keyName == 'back') {
+         try {
+            tizen.application.getCurrentApplication().exit();
+         } catch (error) {
+            console.error('getCurrentApplication(): ' + error.message);
+         }
+      }
+   });
 }
 
 function runtime() {
-&nbsp;&nbsp;&nbsp;exitApp(); /* Add the function call for memory leak */
+   exitApp(); /* Add the function call for memory leak */
 }
 </pre>
 
-<p>When testing the source code, the following figure shows the result. It indicates that a memory leak occurred at the &quot;js/main_orig_.js:39:42&quot; site. Clicking this site, the detailed information is retrieved.</p>
+<p>When testing the source code, the following figure shows the result. It indicates that a memory leak occurred at the "js/main_orig_.js:39:42" site. Clicking this site, the detailed information is retrieved.</p>
 
 
 <p align="center"><strong>Figure: Timer example issue table</strong></p>
@@ -673,11 +673,11 @@ function runtime() {
 <p align="center"><strong>Figure: Timer example detailed information</strong></p>
 <p align="center"><img alt="Timer example detailed information" src="../images/js_stale_example_1_02.png" /></p>
 
-<p>The detailed information shows that function object added to listen for &quot;tizenhwkey&quot; events caused a memory leak. If you click the &quot;Call Tree&quot; on the page, you can see that the <code>exitApp()</code> function with a memory leak issue is called in the <code>runtime()</code> function.</p>
+<p>The detailed information shows that function object added to listen for "tizenhwkey" events caused a memory leak. If you click the "Call Tree" on the page, you can see that the <code>exitApp()</code> function with a memory leak issue is called in the <code>runtime()</code> function.</p>
 
 <p>This code site is detected as a leak because the handler function objects created from the site have not been used before the application exits. The call tree says that when the <code>runtime()</code> function is executed, the <code>exitApp()</code> function is invoked, every time creates an anonymous function and registers it to a document object.</p>
 
-<p>In the &quot;Timeline&quot; graph, you can see how the number of stale instances increases steadily. This graph shows any objects created from this code site that have not been used before the application exists.</p>
+<p>In the "Timeline" graph, you can see how the number of stale instances increases steadily. This graph shows any objects created from this code site that have not been used before the application exists.</p>
 
 
 <h3 id="samplecode2" name="samplecode2">Calculator Sample Code</h3>
@@ -689,20 +689,20 @@ function runtime() {
 
 <pre class="prettyprint">
 /* JavaScript snippets */
-var init = function() { 
-&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;tizenhwkey&#39;, function(e) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.keyName == &#39;back&#39;) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} catch (error) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;getCurrentApplication(): &#39; + error.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+var init = function() {
+   document.addEventListener('tizenhwkey', function(e) {
+      if (e.keyName == 'back') {
+         try {
+            tizen.application.getCurrentApplication().exit();
+         } catch (error) {
+            console.error('getCurrentApplication(): ' + error.message);
+         }
+      }
+   });
 }
 
 function command(num) {
-&nbsp;&nbsp;&nbsp;init(); /* Add the function call for memory leak */  
+   init(); /* Add the function call for memory leak */
 }
 </pre>
 
@@ -729,4 +729,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/org.tizen.studio/html/web_tools/live_editing_w.htm b/org.tizen.studio/html/web_tools/live_editing_w.htm
index c54350f..5ab6a8d 100644 (file)
--- a/org.tizen.studio/html/web_tools/live_editing_w.htm
+++ b/org.tizen.studio/html/web_tools/live_editing_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Live Editing of HTML, CSS, and JavaScript</title>  
+       <title>Live Editing of HTML, CSS, and JavaScript</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,7 +33,7 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="previewer_w.htm">Previewing Pages in a Browser</a></li>   
+                       <li><a href="previewer_w.htm">Previewing Pages in a Browser</a></li>
                </ul>
 
        </div></div>
@@ -46,7 +46,7 @@
 <p>You can monitor how the changes you have made in a file are rendered in the target window without refreshing the page manually.</p>
 
 <h2 id="about">About Live Editing</h2>
- 
+
 <p>Live editing is a special feature, which applies source changes to the running application immediately without building, packaging, and relaunching the application. All changes made in the HTML, CSS, and JavaScript files are automatically and immediately reflected in the running application.</p>
 <p>This feature can be used in the <a href="previewer_w.htm">Previewer</a> view and when running the application in the emulator or the Web simulator.</p>
 
@@ -61,7 +61,7 @@
 <li>Select the <strong>Enable live editing</strong> check box in the run configuration.</li>
 </ol>
 <p>If you are running your application for the first time, you must create a new configuration first.</p>
- 
+
 <div class="note">
     <strong>Note</strong>
        The live editing feature has the following limitations:
diff --git a/org.tizen.studio/html/web_tools/previewer_w.htm b/org.tizen.studio/html/web_tools/previewer_w.htm
index e817fff..bf17cc5 100644 (file)
--- a/org.tizen.studio/html/web_tools/previewer_w.htm
+++ b/org.tizen.studio/html/web_tools/previewer_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Previewing Pages in a Browser</title>  
+       <title>Previewing Pages in a Browser</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -33,7 +33,7 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="IDE_preferences_w.htm#live">Live Editing</a></li>   
+                       <li><a href="IDE_preferences_w.htm#live">Live Editing</a></li>
                </ul>
 
        </div></div>
@@ -46,7 +46,7 @@
 <p>Not only can you preview the source code you have developed, you can also visually define the type and hierarchy of the selector to help development.</p>
 
 <h2 id="about">About the Previewer</h2>
- 
+
 <p>The Tizen Studio provides the previewer window for instantly previewing the entire look and feel of the application.</p>
 <p>The previewer for HTML and CSS is a tool that can check the content of a file on the browser. All the changes made in the HTML and CSS file editor are automatically reflected in the previewer.</p>
 
@@ -55,8 +55,8 @@
        <li>The Device API cannot be run in the emulator.</li>
        <li>Some network environments do not support live editing.</li>
        </ul>
-       
-       
+
+
 <h2 id="use">Using the HTML and CSS Previewer</h2>
 
 <p>To use the HTML and CSS previewer:</p>
@@ -65,7 +65,7 @@
 <li>In the context menu, select <strong>Preview</strong> (or use the hotkey <strong>Ctrl + 4</strong>).</li>
 </ol>
 
-<p align="center"><strong>Figure: HTML previewer (calendar application in mobile Web) and CSS previewer</strong></p> 
+<p align="center"><strong>Figure: HTML previewer (calendar application in mobile Web) and CSS previewer</strong></p>
 <p align="center"><img alt="HTML previewer (calendar application in mobile Web) and CSS previewer" src="../images/previewer_html_previewer.png"/> <img alt="HTML previewer (calendar application in mobile Web) and CSS previewer" src="../images/previewer_css_previewer.png"/></p>
 
 <p>You can configure the previewer to suit your own preferences.</p>
diff --git a/org.tizen.studio/html/web_tools/privilege_checker_w.htm b/org.tizen.studio/html/web_tools/privilege_checker_w.htm
index b0befe7..d403762 100644 (file)
--- a/org.tizen.studio/html/web_tools/privilege_checker_w.htm
+++ b/org.tizen.studio/html/web_tools/privilege_checker_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Verifying Privilege Usage</title>  
+       <title>Verifying Privilege Usage</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -36,10 +36,10 @@
 
 <div id="container"><div id="contents"><div class="content">
  <h1>Verifying Privilege Usage</h1>
- 
+
 <p>The Tizen Studio provides a checker to identify potential <a href="../../../org.tizen.training/html/web/details/sec_privileges_w.htm">privilege</a> violation problems in the application code. This check is performed automatically, and you can easily verify the source code in your project.</p>
 
-  
+
 <h2 id="use">Using the Privilege Checker</h2>
 <p>The Privilege Checker is enabled by default. It is automatically performed during the <a href="../../../org.tizen.training/html/web/process/app_dev_process_w.htm#build">build process</a> or code editing.</p>
 <p>To perform the check manually:</p>
@@ -48,7 +48,7 @@
 <li>Right-click the project folder, and select <strong>Check Privilege</strong>.</li>
 </ol>
 
-<p align="center"><strong>Figure: Privilege Checker</strong></p> 
+<p align="center"><strong>Figure: Privilege Checker</strong></p>
 <p align="center"><img alt="Privilege Checker" src="../images/privilege_checker.png"/></p>
 
 <h2 id="set">Setting the Options</h2>
@@ -66,13 +66,13 @@
 <li>Error (default)</li>
 </ul>
 <p>You can exclude JS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, tizen-web-ui-fw, dowhide, globalize, coderdeck, modernizr, tau</strong>. For instance, since parsing the <code>jquery.min.js</code> file generates many warnings, the default pattern string values exclude the parsing of this JS file.</p>
- 
+
 <p>The check results are displayed in the <strong>Problems</strong> view and vertical ruler. To resolve an alarm, click the annotation on the vertical ruler and select an entry from the proposal list. The required privilege is automatically added into the <code>config.xml</code> file (for a quick fix, use the <strong>Ctrl + 1</strong> keyboard shortcut).</p>
-               
-<p align="center"><strong>Figure: Check results displayed in the Problems view</strong></p> 
+
+<p align="center"><strong>Figure: Check results displayed in the Problems view</strong></p>
 <p align="center"><img alt="Check results displayed in the Problems view" src="../images/privilege_checker_result.png"/></p>
-<p align="center"><strong>Figure: Required privilege is automatically added</strong></p> 
-<p align="center"><img alt="Required privilege is automatically added" src="../images/privilege_checker_add.png"/></p>         
+<p align="center"><strong>Figure: Required privilege is automatically added</strong></p>
+<p align="center"><img alt="Required privilege is automatically added" src="../images/privilege_checker_add.png"/></p>
 
 <p align="center" class="Table"><strong>Table: Privilege check alarm example</strong></p>
 <table>
diff --git a/org.tizen.studio/html/web_tools/project_explorer_view_w.htm b/org.tizen.studio/html/web_tools/project_explorer_view_w.htm
index 336dcc2..cd190bc 100644 (file)
--- a/org.tizen.studio/html/web_tools/project_explorer_view_w.htm
+++ b/org.tizen.studio/html/web_tools/project_explorer_view_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
@@ -15,12 +15,12 @@
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,7 +29,7 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#opening">Opening the Project Explorer View</a></li>
-                       <li><a href="#view">Using the Project Explorer View</a></li>    
+                       <li><a href="#view">Using the Project Explorer View</a></li>
                </ul>
        </div></div>
 </div>
@@ -38,11 +38,11 @@
 <h1>Managing Tizen Projects with Project Explorer View</h1>
 <p>The <strong>Project Explorer</strong> view allows you to view and manage Tizen projects. You can view and change the resources of a project in the view, and build, export, and convert projects through the view.</p>
 
-<p align="center"><strong>Figure: Project Explorer</strong></p> 
+<p align="center"><strong>Figure: Project Explorer</strong></p>
 <p align="center"> <img alt="Project Explorer" src="../images/proj_explorer_w.png" /> </p>
 
 <p>In this view, you can:</p>
-<ul> 
+<ul>
    <li>Browse the file elements</li>
    <li>Open files in the editor view</li>
    <li>Open projects in a new window</li>
@@ -55,7 +55,7 @@
 <h2 id="opening">Opening the Project Explorer View</h2>
 <p>Usually, the <strong>Project Explorer</strong> view is located in the left-top side in the Tizen Studio. You can change the position by dragging and dropping it. If you close the view, you can show it again by selecting <strong>Project Explorer</strong> in <strong>Window &gt; Show View &gt; Other &gt; General</strong>.</p>
 
-<p align="center"><strong>Figure: Opening the view</strong></p> 
+<p align="center"><strong>Figure: Opening the view</strong></p>
 <p align="center"> <img alt="Opening the view" src="../images/proj_explorer_general.png" /> </p>
 
 <h2 id="view">Using the Project Explorer View</h2>
@@ -161,7 +161,7 @@
  </tr>
  <tr>
  <td><strong>Build Signed Package</strong></td>
- <td>Makes a &#39;signed&#39; package. This option requires a certificate profile. You can create a certificate profile in <strong>Tools &gt; Certificate Manager</strong>.</td>
+ <td>Makes a 'signed' package. This option requires a certificate profile. You can create a certificate profile in <strong>Tools &gt; Certificate Manager</strong>.</td>
  </tr>
  <tr>
  <td><strong>Localization</strong></td>
@@ -190,8 +190,8 @@
  <tr>
  <td><strong>Compare With</strong></td>
  <td>Allows you to do one of the following types of compares:
- 
- <ul> 
+
+ <ul>
    <li>Compare 2 or 3 selected resources with each other.</li>
    <li>Compare the selected resource with remote versions (if the project is associated with a version control management system).</li>
    <li>Compare the selected resource with a local history state.</li>
@@ -206,7 +206,7 @@
  <tr>
  <td><strong>Properties</strong></td>
  <td>Displays the properties of the selected resource. The displayed properties depend on what type of resource is selected. Resource properties can include (but are not limited to):
- <ul> 
+ <ul>
    <li>Path relative to the project in which it is held</li>
    <li>Type of the resource</li>
    <li>Absolute file system path, or name of the path variable when using linked resources</li>
diff --git a/org.tizen.studio/html/web_tools/project_wizard_w.htm b/org.tizen.studio/html/web_tools/project_wizard_w.htm
index 7c0a08d..af43027 100644 (file)
--- a/org.tizen.studio/html/web_tools/project_wizard_w.htm
+++ b/org.tizen.studio/html/web_tools/project_wizard_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Tizen Projects with Tizen Project Wizard</title>  
+       <title>Creating Tizen Projects with Tizen Project Wizard</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -54,9 +54,9 @@
 <h2 id="type">Project Type</h2>
 <p>When the Tizen Project Wizard opens, you must first select the project type.</p>
 
-<p align="center"><strong>Figure: Selecting the project type</strong></p> 
-<p align="center"><img alt="Selecting the project type" src="../images/project_wizard_type.png" /></p> 
- 
+<p align="center"><strong>Figure: Selecting the project type</strong></p>
+<p align="center"><img alt="Selecting the project type" src="../images/project_wizard_type.png" /></p>
+
 <p>The Tizen Studio provides various project templates and samples for the mobile and wearable devices according to the installed platform. The Tizen Project Wizard helps you select the template and sample for your project.</p>
 <p>The <strong>Template</strong> option provides a list of templates with a basic structure where you can start the Web application project:</p>
 <ul>
@@ -77,7 +77,7 @@
        </li></ul>
 </li>
 </ul>
-       
+
 <p>The <strong>Sample</strong> option provides a list of sample applications demonstrating various API usage and UI design.</p>
 <p>To move to the next step, select the project type and click <strong>Next</strong>.</p>
 
@@ -85,34 +85,34 @@
 <p>You can select the profile and version supported by your project, such as a mobile or wearable device. In addition, the Tizen Studio shows you which platforms among the supported platforms have been installed.</p>
 <p>Based on the selected profile and version, a list of templates is shown in the template selection step.</p>
 
-<p align="center"><strong>Figure: Selecting the profile and version</strong></p> 
-<p align="center"><img alt="File analysis" src="../images/project_wizard_profile.png" /></p> 
- 
+<p align="center"><strong>Figure: Selecting the profile and version</strong></p>
+<p align="center"><img alt="File analysis" src="../images/project_wizard_profile.png" /></p>
+
 <p>To move to the next step, select the profile and version, and click <strong>Next</strong>.</p>
 
 <h2 id="app_type">Application Type</h2>
 <p>You can select the Web or native application type for your project. For more information, see <a href="../../../org.tizen.training/html/web/cover_page_w.htm">Web Application</a> and <a href="../../../org.tizen.training/html/native/cover_page_n.htm">Native Application</a>.</p>
 <p>Based on the selected application type, a list of templates is shown in the template selection step.</p>
 
-<p align="center"><strong>Figure: Selecting the application type</strong></p> 
-<p align="center"><img alt="Selecting the application type" src="../images/project_wizard_app_type_w.png" /></p> 
- 
+<p align="center"><strong>Figure: Selecting the application type</strong></p>
+<p align="center"><img alt="Selecting the application type" src="../images/project_wizard_app_type_w.png" /></p>
+
 <p>To move to the next step, select the application type and click <strong>Next</strong>.</p>
 
 <h2 id="template">Template</h2>
 <p>You can select the template for your project while viewing information about a variety of templates. The Tizen Project Wizard creates the project based on the selected template.</p>
 
-<p align="center"><strong>Figure: Selecting the template</strong></p> 
-<p align="center"><img alt="Selecting the template" src="../images/project_wizard_template_w.png" /></p> 
+<p align="center"><strong>Figure: Selecting the template</strong></p>
+<p align="center"><img alt="Selecting the template" src="../images/project_wizard_template_w.png" /></p>
 
 <p>To move to the next step, select the template and click <strong>Next</strong>.</p>
 
 <h2 id="properties">Project Properties</h2>
 <p>You can set basic project properties, such as the project name, location, and working sets.</p>
 
-<p align="center"><strong>Figure: Setting project properties</strong></p> 
-<p align="center"><img alt="Setting project properties" src="../images/project_wizard_properties_w.png" /></p> 
- 
+<p align="center"><strong>Figure: Setting project properties</strong></p>
+<p align="center"><img alt="Setting project properties" src="../images/project_wizard_properties_w.png" /></p>
+
 <p>The options you can set are listed in the following table.</p>
 
 <p align="center" class="Table"><strong>Table: Project properties</strong></p>
diff --git a/org.tizen.studio/html/web_tools/rest_viewer_w.htm b/org.tizen.studio/html/web_tools/rest_viewer_w.htm
index 1de6e07..b0e29bd 100644 (file)
--- a/org.tizen.studio/html/web_tools/rest_viewer_w.htm
+++ b/org.tizen.studio/html/web_tools/rest_viewer_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Using the REST Viewer</title>  
+       <title>Using the REST Viewer</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -50,7 +50,7 @@
 <ul>
 <li>It solves the inconvenience of the existing development process.</li>
 <li>It is a basic test and test history management tool without the need for additional test tools.</li>
-<li>The automatic code generation features improve code productivity. 
+<li>The automatic code generation features improve code productivity.
 <p>You do not need to implement a REST API call unit code. Besides, it automatically updates whenever the specification of the REST API changes.</p></li>
 </ul>
 
@@ -64,9 +64,9 @@
 <p>The REST Viewer displays the components of the <a href="http://www.w3.org/Submission/wadl/" target="_blank">WADL</a> (Web Application Description Language)  document in a hierarchical structure.</p>
 <p>The viewer loads the documents from a specific location and classifies them as 4-typed WADL components.</p>
 
-<p align="center"><strong>Figure: REST Viewer</strong></p> 
-<p align="center"><img alt="REST Viewer" src="../images/rest_viewer.png"/></p> 
- 
+<p align="center"><strong>Figure: REST Viewer</strong></p>
+<p align="center"><img alt="REST Viewer" src="../images/rest_viewer.png"/></p>
+
 <p>The WADL document can contain 4 types of WADL components:</p>
 <ul>
 <li><img alt="Service icon" src="../images/rest_icon_service.png"/> Service (application): The application element forms the root of a WADL description.</li>
@@ -92,10 +92,10 @@
 <li><img alt="Import icon" src="../images/rest_icon_import.png"/>: Import a WADL file and show the WADL models from a local WADL file or URL.</li>
 <li><img alt="Export icon" src="../images/rest_icon_export.png"/>: Export the selected WADL models as a <code>.wadl</code> file.</li>
 </ul>
-<p>When you add a new WADL component, you must define its place in the WADL structure in the addition dialog. The WADL structure is &quot;Service &gt; Base URI &gt; Path [&gt; Path] &gt; API&quot;.</p>
+<p>When you add a new WADL component, you must define its place in the WADL structure in the addition dialog. The WADL structure is "Service &gt; Base URI &gt; Path [&gt; Path] &gt; API".</p>
 
-<p align="center"><strong>Figure: Adding a WADL component</strong></p> 
-<p align="center"><img alt="Adding a WADL component" src="../images/rest_add_wadl.png"/></p> 
+<p align="center"><strong>Figure: Adding a WADL component</strong></p>
+<p align="center"><img alt="Adding a WADL component" src="../images/rest_add_wadl.png"/></p>
 <p>Fill in the necessary details:</p>
 <ul>
 <li><strong>Service</strong>
@@ -138,10 +138,10 @@
 <li>API Key authentication with a header or parameter</li>
 <li>OAuth 2.0 authentication information for a RESTful API</li>
 </ul>
- 
-<p align="center"><strong>Figure: Authentication details</strong></p> 
+
+<p align="center"><strong>Figure: Authentication details</strong></p>
 <p align="center"><img alt="Authentication details" src="../images/rest_authenticate.png"/></p>
- 
+
 
 <h2 id="test">Testing the APIs</h2>
 <p>You can test the selected API on the REST Viewer and view the results.</p>
@@ -153,25 +153,25 @@
 </ul>
 <p>The API that works with variables needs specific values for the test. Each profile has its own user variables (key and value). You can manage the profiles and user variables in the Preferences window. After the user variables are set, you can use them with a placeholder to test the API (for example, <code>${email}</code>).</p>
 
-<p align="center"><strong>Figure: User variables</strong></p> 
+<p align="center"><strong>Figure: User variables</strong></p>
 <p align="center"><img alt="User variables" src="../images/rest_user_variable.png"/></p>
- 
+
 
 <p>You can select an active profile in the REST Viewer user variable toolbar menu. When you test the APIs in the REST Viewer, user variables of the selected profile are used.</p>
 
-<p align="center"><strong>Figure: Selecting a profile</strong></p> 
+<p align="center"><strong>Figure: Selecting a profile</strong></p>
 <p align="center"><img alt="Selecting a profile" src="../images/rest_profile.png"/></p>
 
 <p>The user variables of the active profile are shown when you set the values for an API.</p>
 
-<p align="center"><strong>Figure: Selecting a user variable</strong></p> 
+<p align="center"><strong>Figure: Selecting a user variable</strong></p>
 <p align="center"><img alt="Selecting a user variable" src="../images/rest_user.png"/></p>
 
 <p>After setting the variables and running the test, the result is displayed in the <strong>Console</strong> view. You can save the response structure.</p>
 
-<p align="center"><strong>Figure: Test result</strong></p> 
+<p align="center"><strong>Figure: Test result</strong></p>
 <p align="center"><img alt="Test result" src="../images/rest_test.png"/></p>
- 
+
 <h2 id="autogenerate">Automatic Code Generation</h2>
 <p>You can use the REST Viewer to send asynchronous requests with the REST APIs.</p>
 <p>There are 2 ways to use automatic code generation:</p>
@@ -186,7 +186,7 @@
 </li>
 </ul>
 
-<p align="center"><strong>Figure: Selecting functions for the REST API</strong></p> 
+<p align="center"><strong>Figure: Selecting functions for the REST API</strong></p>
 <p align="center"><img alt="Selecting functions for the REST API" src="../images/rest_functions.png"/></p>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.studio/html/web_tools/web_editor_w.htm b/org.tizen.studio/html/web_tools/web_editor_w.htm
index d03c505..8e2eb2f 100644 (file)
--- a/org.tizen.studio/html/web_tools/web_editor_w.htm
+++ b/org.tizen.studio/html/web_tools/web_editor_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Writing Your Code</title>  
+       <title>Writing Your Code</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -42,7 +42,7 @@
 
 <div id="container"><div id="contents"><div class="content">
  <h1>Writing Your Code</h1>
- 
+
 <p>Tizen Web Editor is a powerful tool for creating and modifying source code. It supports all basic coding features, such as syntax highlighting, content assist, and privilege checking.</p>
 <p>Tizen Web Editor provides support for JavaScript, HTML, and CSS file editing.</p>
 
@@ -60,29 +60,29 @@
        You can check JavaScript immediately, even without saving the file.
 </div>
 
-<p align="center"><strong>Figure: Checking JavaScript rules manually</strong></p> 
-<p align="center"><img alt="Checking JavaScript rules manually" src="../images/web_editor_manual.png" /></p> 
+<p align="center"><strong>Figure: Checking JavaScript rules manually</strong></p>
+<p align="center"><img alt="Checking JavaScript rules manually" src="../images/web_editor_manual.png" /></p>
 </li>
 <li>Automatic check
 <p>When writing code, if there are syntax errors, the automatic check displays the CSSLint or JSLint validator results on the left edge of the editor.</p>
        <ul><li>If you save a file, the project is built and syntax is checked automatically.
 
-<p align="center"><strong>Figure: Checking JavaScript automatically</strong></p> 
-<p align="center"><img alt="Checking JavaScript automatically" src="../images/web_editor_js_check.png" /></p> 
+<p align="center"><strong>Figure: Checking JavaScript automatically</strong></p>
+<p align="center"><img alt="Checking JavaScript automatically" src="../images/web_editor_js_check.png" /></p>
 
-<p align="center"><strong>Figure: JavaScript scan results in the Problems view</strong></p> 
-<p align="center"><img alt="JavaScript scan results in the Problems view" src="../images/web_editor_js_result.png" /></p> 
+<p align="center"><strong>Figure: JavaScript scan results in the Problems view</strong></p>
+<p align="center"><img alt="JavaScript scan results in the Problems view" src="../images/web_editor_js_result.png" /></p>
        </li>
-       <li>Using content assist. 
+       <li>Using content assist.
 <p>You can get suggestions for HTML, CSS, and JavaScript tag and attribute properties. Also, if you mistype, content assist displays an error. Press <strong>Ctrl + Space</strong> to open content assist.</p>
 
-<p align="center"><strong>Figure: Content assist in a CSS file</strong></p> 
-<p align="center"><img alt="Content assist in a CSS file" src="../images/web_editor_css.png" /></p> 
+<p align="center"><strong>Figure: Content assist in a CSS file</strong></p>
+<p align="center"><img alt="Content assist in a CSS file" src="../images/web_editor_css.png" /></p>
        </li>
        </ul>
 </li>
 </ul>
- 
+
 <h3>Syntax Check Settings</h3>
 <p>If you want to adjust the error level settings for the CSS or JavaScript Validator, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web &gt; Editor &gt; CSS Editor</strong> or <strong>JavaScript Editor</strong>.</p>
 <p>By default, the CSS or JavaScript syntax check is operated when a document is saved or the project built. However, you can set the detailed attributes in the preferences. To change the inspection point, adjust it in <strong>Preference &gt; Build or Reconcile</strong>:</p>
@@ -134,7 +134,7 @@
 </li>
 </ul>
 
-<p align="center"><strong>Figure: Content assist with the &lt;img&gt; element</strong></p> 
+<p align="center"><strong>Figure: Content assist with the &lt;img&gt; element</strong></p>
 <p align="center"><img alt="Content assist with the img element" src="../images/web_editor_img.png" /></p>
 
 <p>To use content assist in the HTML editor:</p>
@@ -161,8 +161,8 @@
 <li>Supports a preview of the image file at the <code>src</code> attribute value of the <code>&lt;img&gt;</code> element.</li>
 <li>Support a preview of the CSS rule at the <code>id</code> or <code>class</code> attribute value of all elements, if the selector (that is made by the <code>id</code> or <code>class</code> value) exists.</li>
 </ul>
-<p align="center"><strong>Figure: Content hover with the &lt;link&gt; element</strong></p> 
-<p align="center"><img alt="Content hover with the link element" src="../images/web_editor_hover.png" /></p>  
+<p align="center"><strong>Figure: Content hover with the &lt;link&gt; element</strong></p>
+<p align="center"><img alt="Content hover with the link element" src="../images/web_editor_hover.png" /></p>
 <p>To use the hover feature in the HTML editor, hover the mouse cursor at the above attributes.</p>
 
 <h3>Advanced File Refactoring in Mobile Applications</h3>
@@ -176,11 +176,11 @@
 <li>File delete refactoring
 <p>When a file is deleted, other files to which the deleted file is related, are commented out at the linked line of codes.</p></li>
 </ul>
-<p align="center"><strong>Figure: Before CSS file rename refactoring</strong></p> 
-<p align="center"><img alt="Before CSS file rename refactoring" src="../images/web_editor_before_refac.png" /></p> 
+<p align="center"><strong>Figure: Before CSS file rename refactoring</strong></p>
+<p align="center"><img alt="Before CSS file rename refactoring" src="../images/web_editor_before_refac.png" /></p>
 
-<p align="center"><strong>Figure: After CSS file rename refactoring</strong></p> 
-<p align="center"><img alt="After CSS file rename refactoring" src="../images/web_editor_after_refac.png" /></p> 
+<p align="center"><strong>Figure: After CSS file rename refactoring</strong></p>
+<p align="center"><img alt="After CSS file rename refactoring" src="../images/web_editor_after_refac.png" /></p>
 
 <h2 id="previewer">Previewer</h2>
 <p>If you want to test a Web application (or just a Web page) as a part of a client application, you can do it using the Previewer tool.</p>
@@ -200,29 +200,29 @@
 </tr>
  <tr>
  <td><code>console.log</code></td>
- <td><code>console.log(&quot;console.log&quot;);</code></td>
+ <td><code>console.log("console.log");</code></td>
  </tr>
  <tr>
  <td><code>console.info</code></td>
- <td><code>console.info(&quot;console.info&quot;);</code></td>
+ <td><code>console.info("console.info");</code></td>
  </tr>
   <tr>
  <td><code>console.warn</code></td>
- <td><code>console.warn(&quot;console.warn&quot;);</code></td>
+ <td><code>console.warn("console.warn");</code></td>
  </tr>
   <tr>
  <td><code>console.error</code></td>
- <td><code>console.error(&quot;console.error&quot;);</code></td>
+ <td><code>console.error("console.error");</code></td>
  </tr>
   <tr>
  <td><code>console.debug</code></td>
- <td><code>console.debug(&quot;console.debug&quot;);</code></td>
+ <td><code>console.debug("console.debug");</code></td>
  </tr>
  </tbody></table>
 
-<p align="center"><strong>Figure: JavaScript log method colors</strong></p> 
-<p align="center"><img alt="JavaScript log method colors" src="../images/web_editor_js_log.png" /></p> 
- 
+<p align="center"><strong>Figure: JavaScript log method colors</strong></p>
+<p align="center"><img alt="JavaScript log method colors" src="../images/web_editor_js_log.png" /></p>
+
 <h2 id="live_edit">Live Edit</h2>
 <p>When you change the source code in the Tizen Studio, the running application is updated instantly without any reloading process.</p>
 <p>For more details, see <a href="live_editing_w.htm">Live Editing of HTML, CSS, and JavaScript</a>.</p>
diff --git a/org.tizen.studio/html/web_tools/web_inspector_w.htm b/org.tizen.studio/html/web_tools/web_inspector_w.htm
index e57b21e..9c355d9 100644 (file)
--- a/org.tizen.studio/html/web_tools/web_inspector_w.htm
+++ b/org.tizen.studio/html/web_tools/web_inspector_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-  <title>Debugging with Web Inspector</title> 
- </head> 
+  <title>Debugging with Web Inspector</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -26,75 +26,75 @@
                </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-                       <li><a href="#element">Elements Panel</a></li>                  
+                       <li><a href="#element">Elements Panel</a></li>
                        <li><a href="#resource">Resources Panel</a></li>
                        <li><a href="#network">Network Panel</a></li>
-                       <li><a href="#source">Sources Panel</a></li>                    
+                       <li><a href="#source">Sources Panel</a></li>
                        <li><a href="#time">Timeline Panel</a></li>
                        <li><a href="#profile_panel">Profiles Panel</a></li>
-                       <li><a href="#console">Console Panel</a></li>                   
+                       <li><a href="#console">Console Panel</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../org.tizen.training/html/web/process/run_debug_app_w.htm">Running and Debugging Applications</a></li> 
+                       <li><a href="../../../org.tizen.training/html/web/process/run_debug_app_w.htm">Running and Debugging Applications</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Debugging with Web Inspector</h1> 
-  <p>You can <a href="../../../org.tizen.training/html/web/process/run_debug_app_w.htm">debug Web applications</a> using the JavaScript Debugger tool. The JavaScript Debugger is based on Webkit Web Inspector, and has been modified to support remote debugging. </p> 
-  <p>The JavaScript Debugger supports the following panels:</p> 
-  <ul> 
-   <li><a href="#element">Elements Panel</a></li> 
-   <li><a href="#resource">Resources Panel</a></li> 
-   <li><a href="#network">Network Panel</a></li> 
-   <li><a href="#source">Sources Panel</a></li> 
-   <li><a href="#time">Timeline Panel</a></li> 
-   <li><a href="#profile_panel">Profiles Panel</a></li> 
-   <li><a href="#console">Console Panel</a></li> 
-  </ul> 
-  <p align="center"><strong>Figure: JavaScript Debugger panels</strong></p> 
-  <p align="center"><img alt="JavaScript Debugger panels" src="../images/jsdebugger_panels.png" /></p> 
-  <p>When debugging with the <a href="../common_tools/emulator.htm">emulator</a>, the emulator communicates with the Google Chrome&trade; browser through the HTTP protocol.</p> 
-  <p>When the JavaScript Debugger is started, the <strong>Network</strong> panel is off. To enable the <strong>Network</strong> panel and start monitoring the resource loading status, press the F5 key. This reloads the current page and displays the load time on the <strong>Network</strong> panel.</p> 
-  
-<h2 id="element" name="element">Elements Panel</h2> 
-  <p>The <strong>Elements</strong> panel of the JavaScript Debugger allows you to see the Web page components (the DOM tree, CSS style, and Document Object Model).</p> 
-  <p align="center"><strong>Figure: Elements panel</strong></p> 
-  <p align="center"><img alt="Elements panel" src="../images/remote_inspector_elements.png" /></p>   
-  
-<h2 id="resource" name="resource">Resources Panel</h2> 
-  <p>The <strong>Resources</strong> panel of the JavaScript Debugger allows you to inspect resources. You can interact with frames containing resources, such as HTML, JavaScript, CSS, images, and fonts. You can also inspect HTML5 databases, local storage, cookies, and application cache.</p> 
-  <p align="center"><strong>Figure: Resources panel</strong></p> 
-  <p align="center"><img alt="Resources panel" src="../images/remote_inspector_resources.png" /></p>  
-
-<h2 id="network" name="network">Network Panel</h2> 
-  <p>The <strong>Network</strong> panel of the JavaScript Debugger allows you to inspect resources downloaded over the network. You can also inspect the HTTP header, response, cookies, and preview.</p> 
-  <p align="center"><strong>Figure: Network panel</strong></p> 
-  <p align="center"><img alt="Network panel" src="../images/remote_inspector_network.png" /></p> 
-  
- <h2 id="source" name="source">Sources Panel</h2> 
-  <p>The <strong>Sources</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript source page. You can debug your JavaScript code. This panel supports watch expressions, callstack, scope variables, and break point operation. In addition, it supports basic debugging operations: continue, step over, step into, and step out.</p> 
-  <p align="center"><strong>Figure: Sources panel</strong></p> 
-  <p align="center"><img alt="Sources panel" src="../images/remote_inspector_sources.png" /></p>   
-  
- <h2 id="time" name="time">Timeline Panel</h2> 
-  <p>The <strong>Timeline</strong> panel of the JavaScript Debugger allows you to perform advanced timing and speed analysis. You can see how long the browser takes to handle DOM events, and rendering and painting windows.</p> 
-  <p align="center"><strong>Figure: Timeline panel</strong></p> 
-  <p align="center"><img alt="Timeline panel" src="../images/remote_inspector_timeline.png" /></p>  
- 
-<h2 id="profile_panel" name="profile_panel">Profiles Panel</h2> 
-  <p>The <strong>Profiles</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript performance analyses. You can inspect CPU profiles or CSS Select profiles.</p> 
-  <p align="center"><strong>Figure: Profiles panel</strong></p> 
-  <p align="center"><img alt="Profiles panel" src="../images/remote_inspector_profiles.png" /></p>  
- 
- <h2 id="console" name="console">Console Panel</h2> 
-  <p>The <strong>Console</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript console operation. You can interact with your page programmatically. Any errors or warnings on your page are shown in the console.</p> 
-  <p align="center"><strong>Figure: Console panel</strong></p> 
-  <p align="center"><img alt="Console panel" src="../images/remote_inspector_console.png" /></p> 
-
-  
+  <h1>Debugging with Web Inspector</h1>
+  <p>You can <a href="../../../org.tizen.training/html/web/process/run_debug_app_w.htm">debug Web applications</a> using the JavaScript Debugger tool. The JavaScript Debugger is based on Webkit Web Inspector, and has been modified to support remote debugging. </p>
+  <p>The JavaScript Debugger supports the following panels:</p>
+  <ul>
+   <li><a href="#element">Elements Panel</a></li>
+   <li><a href="#resource">Resources Panel</a></li>
+   <li><a href="#network">Network Panel</a></li>
+   <li><a href="#source">Sources Panel</a></li>
+   <li><a href="#time">Timeline Panel</a></li>
+   <li><a href="#profile_panel">Profiles Panel</a></li>
+   <li><a href="#console">Console Panel</a></li>
+  </ul>
+  <p align="center"><strong>Figure: JavaScript Debugger panels</strong></p>
+  <p align="center"><img alt="JavaScript Debugger panels" src="../images/jsdebugger_panels.png" /></p>
+  <p>When debugging with the <a href="../common_tools/emulator.htm">emulator</a>, the emulator communicates with the Google Chrome&trade; browser through the HTTP protocol.</p>
+  <p>When the JavaScript Debugger is started, the <strong>Network</strong> panel is off. To enable the <strong>Network</strong> panel and start monitoring the resource loading status, press the F5 key. This reloads the current page and displays the load time on the <strong>Network</strong> panel.</p>
+
+<h2 id="element" name="element">Elements Panel</h2>
+  <p>The <strong>Elements</strong> panel of the JavaScript Debugger allows you to see the Web page components (the DOM tree, CSS style, and Document Object Model).</p>
+  <p align="center"><strong>Figure: Elements panel</strong></p>
+  <p align="center"><img alt="Elements panel" src="../images/remote_inspector_elements.png" /></p>
+
+<h2 id="resource" name="resource">Resources Panel</h2>
+  <p>The <strong>Resources</strong> panel of the JavaScript Debugger allows you to inspect resources. You can interact with frames containing resources, such as HTML, JavaScript, CSS, images, and fonts. You can also inspect HTML5 databases, local storage, cookies, and application cache.</p>
+  <p align="center"><strong>Figure: Resources panel</strong></p>
+  <p align="center"><img alt="Resources panel" src="../images/remote_inspector_resources.png" /></p>
+
+<h2 id="network" name="network">Network Panel</h2>
+  <p>The <strong>Network</strong> panel of the JavaScript Debugger allows you to inspect resources downloaded over the network. You can also inspect the HTTP header, response, cookies, and preview.</p>
+  <p align="center"><strong>Figure: Network panel</strong></p>
+  <p align="center"><img alt="Network panel" src="../images/remote_inspector_network.png" /></p>
+
+ <h2 id="source" name="source">Sources Panel</h2>
+  <p>The <strong>Sources</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript source page. You can debug your JavaScript code. This panel supports watch expressions, callstack, scope variables, and break point operation. In addition, it supports basic debugging operations: continue, step over, step into, and step out.</p>
+  <p align="center"><strong>Figure: Sources panel</strong></p>
+  <p align="center"><img alt="Sources panel" src="../images/remote_inspector_sources.png" /></p>
+
+ <h2 id="time" name="time">Timeline Panel</h2>
+  <p>The <strong>Timeline</strong> panel of the JavaScript Debugger allows you to perform advanced timing and speed analysis. You can see how long the browser takes to handle DOM events, and rendering and painting windows.</p>
+  <p align="center"><strong>Figure: Timeline panel</strong></p>
+  <p align="center"><img alt="Timeline panel" src="../images/remote_inspector_timeline.png" /></p>
+
+<h2 id="profile_panel" name="profile_panel">Profiles Panel</h2>
+  <p>The <strong>Profiles</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript performance analyses. You can inspect CPU profiles or CSS Select profiles.</p>
+  <p align="center"><strong>Figure: Profiles panel</strong></p>
+  <p align="center"><img alt="Profiles panel" src="../images/remote_inspector_profiles.png" /></p>
+
+ <h2 id="console" name="console">Console Panel</h2>
+  <p>The <strong>Console</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript console operation. You can interact with your page programmatically. Any errors or warnings on your page are shown in the console.</p>
+  <p align="center"><strong>Figure: Console panel</strong></p>
+  <p align="center"><img alt="Console panel" src="../images/remote_inspector_console.png" /></p>
+
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/web_tools/web_localization_w.htm b/org.tizen.studio/html/web_tools/web_localization_w.htm
index 006a065..edc8649 100644 (file)
--- a/org.tizen.studio/html/web_tools/web_localization_w.htm
+++ b/org.tizen.studio/html/web_tools/web_localization_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Localizing Web Applications</title>  
+       <title>Localizing Web Applications</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,13 +29,13 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#open">Opening the Web Localization View</a></li>
-                       <li><a href="#locales">Adding Locales</a></li>  
+                       <li><a href="#locales">Adding Locales</a></li>
                        <li><a href="#strings">Creating and Managing Localized Strings</a></li>
                        <li><a href="#folder">Folder-based Localization</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="cover_web_w.htm">Web Tools</a></li>   
+                       <li><a href="cover_web_w.htm">Web Tools</a></li>
                </ul>
 
        </div></div>
@@ -50,15 +50,15 @@
 <p>This topic describes how to localize your application.</p>
 
 <h2 id="open">Opening the Web Localization View</h2>
- 
+
 <p>To open the <strong>Web Localization</strong> view:</p>
 <ol>
 <li>Right-click the selected project in the <strong>Project Explorer</strong> view.</li>
 <li>Click <strong>Localization</strong>.</li>
 
 </ol>
-<p align="center"><strong>Figure: Opening the Web Localization view</strong></p> 
-<p align="center"><img alt="Opening the Web Localization view" src="../images/web_loc_open_view.png"/></p> 
+<p align="center"><strong>Figure: Opening the Web Localization view</strong></p>
+<p align="center"><img alt="Opening the Web Localization view" src="../images/web_loc_open_view.png"/></p>
 
 
 <h2 id="locales">Adding Locales</h2>
@@ -76,7 +76,7 @@
 <li>To confirm the selected locale information, click <strong>OK</strong>.</li>
 </ol>
 
-<p align="center"><strong>Figure: Added locales</strong></p> 
+<p align="center"><strong>Figure: Added locales</strong></p>
 <p align="center"><img alt="Added locales" src="../images/web_loc_locales_container.png"/></p>
 
 <p>A container named locales is created for the localized content. Under the container, a subfolder for a locale is added when you set a locale. For example, <code>/locales/en-us</code> and <code>/locales/zn-cn</code>.</p>
@@ -98,28 +98,28 @@
 </ol>
 <p>You can check the defined strings in the <strong>String</strong> tab.</p>
 
-<p align="center"><strong>Figure: Defined strings</strong></p> 
+<p align="center"><strong>Figure: Defined strings</strong></p>
 <p align="center"><img alt="Defined strings" src="../images/web_loc_string_tab.png"/></p>
 
 <p>You can add more items to the table or remove them, as needed.</p>
 <p>You can change the table tab configuration between ID and Locale by clicking the <strong>Change ViewMode</strong> button.</p>
 
-<p align="center"><strong>Figure: String-based viewmode</strong></p> 
+<p align="center"><strong>Figure: String-based viewmode</strong></p>
 <p align="center"><img alt="String-based viewmode" src="../images/web_loc_change_view_mode.png"/></p>
 <p>When the string localization is complete, the following modifications are made in the project:</p>
 <ul>
 <li><code>language.js</code> file is created in the application's top-level folder and in each locale folder under <code>locales</code>, containing the localized string content.
 
-<p align="center"><strong>Figure: language.js</strong></p> 
+<p align="center"><strong>Figure: language.js</strong></p>
 <p align="center"><img alt="language.js" src="../images/web_loc_language_js.png"/></p>
 </li>
 <li>The <code>&lt;script&gt;</code> element, whose <code>src</code> attribute is <code>language.js</code>, is added to the <code>index.html</code> file.
 
-<p align="center"><strong>Figure: src element in index.html</strong></p> 
+<p align="center"><strong>Figure: src element in index.html</strong></p>
 <p align="center"><img alt="src element in index.html" src="../images/web_loc_index_html.png"/></p>
 </li>
 </ul>
- 
+
 <div class="note">
     <strong>Note</strong>
        For more information about using localized string content, see <a href="../../../org.tizen.guides/html/web/localization/localization_w.htm">Localization</a>.
@@ -129,12 +129,12 @@
 
 <p>In the <strong>Resource</strong> tab, you can localize resource files, such as images, sound, video, HTML, and JavaScript more efficiently. The <strong>Resource</strong> tab displays the resources of the project in a tile form.</p>
 
-<p align="center"><strong>Figure: Resource tab</strong></p> 
+<p align="center"><strong>Figure: Resource tab</strong></p>
 <p align="center"><img alt="Resource tab" src="../images/web_loc_resource_tab.png"/></p>
 
 <p>If a resource is not localized, the <strong>+</strong> button appears on the resource tile.</p>
 
-<p align="center"><strong>Figure: Missing resource file</strong></p> 
+<p align="center"><strong>Figure: Missing resource file</strong></p>
 <p align="center"><img alt="Missing resource file" src="../images/web_loc_missing_resource.png"/></p>
 
 <p>To localize the missing resource:</p>
@@ -154,15 +154,15 @@
 
 <pre class="prettyprint">
 root/
-&nbsp;&nbsp;&nbsp;images/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a.png
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b.png
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.png
-&nbsp;&nbsp;&nbsp;locales/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ko-kr/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;images/
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a.png
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.png
+   images/
+      a.png
+      b.png
+      c.png
+   locales/
+      ko-kr/
+         images/
+            a.png
+            c.png
 </pre>
 
 
diff --git a/org.tizen.studio/html/web_tools/web_simulator_features_w.htm b/org.tizen.studio/html/web_tools/web_simulator_features_w.htm
index fb2c596..3ee3396 100644 (file)
--- a/org.tizen.studio/html/web_tools/web_simulator_features_w.htm
+++ b/org.tizen.studio/html/web_tools/web_simulator_features_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-  <title>Taking Advantage of Web Simulator Features</title> 
- </head> 
+  <title>Taking Advantage of Web Simulator Features</title>
+ </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
 
@@ -34,109 +34,109 @@
 <div id="container"><div id="contents"><div class="content">
 
 
-  <h1>Taking Advantage of Web Simulator Features</h1> 
-  
-  <p>The Web Simulator has several features for developing Web applications.</p> 
-  <h2 id="basic" name="basic">Basic Panel Operation</h2> 
-  <p>The Web Simulator provides the following panel operations:</p> 
-  <ul> 
-   <li>Expand/Collapse <p>Each panel can be opened or closed by clicking the small arrow on the left side of the panel bar.</p> </li> 
-   <li>Reorder <p>Each panel can be moved and reordered by dragging the items on the drag area on the right side of the panel bar.</p> </li> 
-   <li>Show/Hide <p>Each panel can be displayed or hidden by clicking the panel-setting button on the right side of the application address bar.</p> </li> 
-  </ul> 
-  <h2 id="panels" name="panels">Panels</h2> 
+  <h1>Taking Advantage of Web Simulator Features</h1>
+
+  <p>The Web Simulator has several features for developing Web applications.</p>
+  <h2 id="basic" name="basic">Basic Panel Operation</h2>
+  <p>The Web Simulator provides the following panel operations:</p>
+  <ul>
+   <li>Expand/Collapse <p>Each panel can be opened or closed by clicking the small arrow on the left side of the panel bar.</p> </li>
+   <li>Reorder <p>Each panel can be moved and reordered by dragging the items on the drag area on the right side of the panel bar.</p> </li>
+   <li>Show/Hide <p>Each panel can be displayed or hidden by clicking the panel-setting button on the right side of the application address bar.</p> </li>
+  </ul>
+  <h2 id="panels" name="panels">Panels</h2>
   <p>The Web Simulator has the following panels which allow you to control the simulation conditions of various device aspects:</p>
- 
+
                                <h3 id="orient" name="orient">Orientation and Zooming</h3>
 
-                 <p>In the <strong>Orientation and Zooming</strong> panel, you can switch the orientation between the portrait and landscape modes. If your application has subscribed to the orientation change event, it receives the event and the subscribed event handler is invoked. </p> 
-  <p>You can also set the zoom level of your application to view specific areas of the application. Zooming is a visual aid and does not trigger application notifications.</p> 
-  
-  <p align="center"><strong>Figure: Orientation and Zooming panel (mobile app on the left, wearable on the right)</strong></p> 
-   <p align="center"><img alt="Orientation and Zooming panel" src="../images/simulator_panel_resolution_orientation.png" /></p>  
-  
-                               <h3 id="system" name="system">System Summary</h3> 
-
-                       
-  <p>The <strong>System Summary</strong> panel displays generic information and settings about the application, system, device, and platform.</p> 
-  <p align="center"><strong>Figure: System Summary panel (mobile app on the left, wearable on the right)</strong></p> 
-  <p align="center"><img alt="System Summary panel" src="../images/simulator_panel_system_summary.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-
-                       
-                               <h3 id="geo" name="geo">Geolocation</h3> 
-
-                        
-  <p>The <strong>Geolocation</strong> panel contains location-related settings. You can set the local time zone to test whether your application reacts properly when the target device is located in different geographical areas.</p> 
-  <p align="center"><strong>Figure: Geolocation panel</strong></p> 
-  <p align="center"><img  alt="Geolocation panel" src="../images/simulator_panel_geolocation.png" /></p> 
-  <p>The panel also provides an input area to configure geographical data being sent from the device. Additionally, a map is displayed and updated in accordance to the changing of data.</p> 
-  <p>To simulate a custom, multi-point route:</p> 
-  <ol> 
-   <li>Click the red location marker button at the upper right corner of the map.</li> 
-   <li>Click the desired location points.</li> 
-   <li>Double-click the map to end route creation.</li> 
-   <li>To send the geolocation data to the application along the defined route, click the play button. You can also set the speed of playback.</li> 
-  </ol>                
-               
-                               <h3 id="config" name="config">Application Configuration</h3> 
-
-                         
-  <p>The <strong>Application Configuration</strong> panel displays a graphical representation of the <code>config.xml</code> file. You can use it to ensure the validity of your application configuration.</p> 
-  <p>For more information about the configuration details, see <a href="web_simulator_w.htm#spec">W3C/HTML5 Specifications</a>.</p> 
-  <p align="center"><strong>Figure: Application Configuration panel</strong></p> 
-  <p align="center"><img  alt="Application Configuration panel" src="../images/simulator_panel_feature_configuration.png" /></p> 
-                       
-                       
-                               <h3 id="sensor" name="sensor">Sensors</h3> 
-
-                        
-  <p>The <strong>Sensors</strong> panel provides slide bars to configure the ambient, accelerometer, and magnetic field sensors.</p> 
-  <p>To change the accelerometer value, either drag the simulator image, or enter a degree value along each axis.</p> 
-  <p>The following buttons can be used to simulate the accelerometer sensor:</p> 
-  <ul> 
-   <li><strong>FaceDown</strong> simulates placing the device with the screen facing down.</li> 
-   <li><strong>Shake</strong> simulates shaking the device along the X axis.</li> 
-   <li><strong>ResetAll</strong> simulates returning the device to its default position.</li> 
-  </ul> 
-  <p align="center"><strong>Figure: Accelerometer sensor (mobile app on the left, wearable on the right)</strong></p> 
-  <p align="center"><img  alt="Accelerometer sensor" src="../images/simulator_panel_accelerometer.png" /></p> 
-  <p>To set the magnetic field, enter the X, Y, and Z axis values.</p> 
-  <p align="center"><strong>Figure: Accelerometer and gyro sensors</strong></p> 
-  <p align="center"><img  alt="Accelerometer and gyro sensors" src="../images/simulator_panel_accelerometer_gyro.png" /></p> 
+                 <p>In the <strong>Orientation and Zooming</strong> panel, you can switch the orientation between the portrait and landscape modes. If your application has subscribed to the orientation change event, it receives the event and the subscribed event handler is invoked. </p>
+  <p>You can also set the zoom level of your application to view specific areas of the application. Zooming is a visual aid and does not trigger application notifications.</p>
+
+  <p align="center"><strong>Figure: Orientation and Zooming panel (mobile app on the left, wearable on the right)</strong></p>
+   <p align="center"><img alt="Orientation and Zooming panel" src="../images/simulator_panel_resolution_orientation.png" /></p>
+
+                               <h3 id="system" name="system">System Summary</h3>
+
+
+  <p>The <strong>System Summary</strong> panel displays generic information and settings about the application, system, device, and platform.</p>
+  <p align="center"><strong>Figure: System Summary panel (mobile app on the left, wearable on the right)</strong></p>
+  <p align="center"><img alt="System Summary panel" src="../images/simulator_panel_system_summary.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+
+
+                               <h3 id="geo" name="geo">Geolocation</h3>
+
+
+  <p>The <strong>Geolocation</strong> panel contains location-related settings. You can set the local time zone to test whether your application reacts properly when the target device is located in different geographical areas.</p>
+  <p align="center"><strong>Figure: Geolocation panel</strong></p>
+  <p align="center"><img  alt="Geolocation panel" src="../images/simulator_panel_geolocation.png" /></p>
+  <p>The panel also provides an input area to configure geographical data being sent from the device. Additionally, a map is displayed and updated in accordance to the changing of data.</p>
+  <p>To simulate a custom, multi-point route:</p>
+  <ol>
+   <li>Click the red location marker button at the upper right corner of the map.</li>
+   <li>Click the desired location points.</li>
+   <li>Double-click the map to end route creation.</li>
+   <li>To send the geolocation data to the application along the defined route, click the play button. You can also set the speed of playback.</li>
+  </ol>
+
+                               <h3 id="config" name="config">Application Configuration</h3>
+
+
+  <p>The <strong>Application Configuration</strong> panel displays a graphical representation of the <code>config.xml</code> file. You can use it to ensure the validity of your application configuration.</p>
+  <p>For more information about the configuration details, see <a href="web_simulator_w.htm#spec">W3C/HTML5 Specifications</a>.</p>
+  <p align="center"><strong>Figure: Application Configuration panel</strong></p>
+  <p align="center"><img  alt="Application Configuration panel" src="../images/simulator_panel_feature_configuration.png" /></p>
+
+
+                               <h3 id="sensor" name="sensor">Sensors</h3>
+
+
+  <p>The <strong>Sensors</strong> panel provides slide bars to configure the ambient, accelerometer, and magnetic field sensors.</p>
+  <p>To change the accelerometer value, either drag the simulator image, or enter a degree value along each axis.</p>
+  <p>The following buttons can be used to simulate the accelerometer sensor:</p>
+  <ul>
+   <li><strong>FaceDown</strong> simulates placing the device with the screen facing down.</li>
+   <li><strong>Shake</strong> simulates shaking the device along the X axis.</li>
+   <li><strong>ResetAll</strong> simulates returning the device to its default position.</li>
+  </ul>
+  <p align="center"><strong>Figure: Accelerometer sensor (mobile app on the left, wearable on the right)</strong></p>
+  <p align="center"><img  alt="Accelerometer sensor" src="../images/simulator_panel_accelerometer.png" /></p>
+  <p>To set the magnetic field, enter the X, Y, and Z axis values.</p>
+  <p align="center"><strong>Figure: Accelerometer and gyro sensors</strong></p>
+  <p align="center"><img  alt="Accelerometer and gyro sensors" src="../images/simulator_panel_accelerometer_gyro.png" /></p>
 
 <div class="note">
     <strong>Note</strong>
        If the computer does not fully support WebGL, the simulated device in the <strong>Sensors</strong> panel looks like in the following figure.
-    <p align="center"><strong>Figure: Sensor without WebGL</strong></p> 
+    <p align="center"><strong>Figure: Sensor without WebGL</strong></p>
   <p align="center"><img  alt="Sensor without WebGL" src="../images/simulator_sensor_webgl.png" /></p>
 </div>
 
-<h3 id="package" name="package">Packages and Applications</h3> 
+<h3 id="package" name="package">Packages and Applications</h3>
 
   <p>The <strong>Packages and Applications</strong> panel provides a simulated packages and applications management center on a device. It lists available and installed packages and applications on a device:</p>
   <ul>
-  <li>On the <strong>Packages</strong> tab, the available packages list provides INSTALL and UPDATE operations. The operations generate events, such as INSTALLED and UPDATED, and call the required callbacks.</li> 
-  <li>On the <strong>Applications</strong> tab, the installed packages list shows the installed packages and applications on the device. You can simulate the UNINSTALL operation, which generates an UNINSTALLED event and calls the required callback.</li> 
+  <li>On the <strong>Packages</strong> tab, the available packages list provides INSTALL and UPDATE operations. The operations generate events, such as INSTALLED and UPDATED, and call the required callbacks.</li>
+  <li>On the <strong>Applications</strong> tab, the installed packages list shows the installed packages and applications on the device. You can simulate the UNINSTALL operation, which generates an UNINSTALLED event and calls the required callback.</li>
   </ul>
   <p>You can use the <strong>Packages and Applications</strong> panel to verify created operations and operation details.</p>
 
-  <p align="center"><strong>Figure: Packages and Applications panel</strong></p> 
-  <p align="center"><img  alt="Packages and Applications panel" src="../images/simulator_panel_package.png" /></p>   
-  <p>The following sample code demonstrates how to receive the INSTALLED, UPDATED, and UNINSTALLED events for changes in the installed packages list. If you select <strong>Sample Package</strong> from the available packages list and click <strong>Install</strong>, the &quot;The package &quot;Sample Package&quot; is installed&quot; message is displayed in the console, and for each application in the package, the <code>oninstalled</code> event is generated. You can subscribe to these application events by registering the <code>tizen.application.addAppInfoEventListener</code> interface.</p>
+  <p align="center"><strong>Figure: Packages and Applications panel</strong></p>
+  <p align="center"><img  alt="Packages and Applications panel" src="../images/simulator_panel_package.png" /></p>
+  <p>The following sample code demonstrates how to receive the INSTALLED, UPDATED, and UNINSTALLED events for changes in the installed packages list. If you select <strong>Sample Package</strong> from the available packages list and click <strong>Install</strong>, the "The package "Sample Package" is installed" message is displayed in the console, and for each application in the package, the <code>oninstalled</code> event is generated. You can subscribe to these application events by registering the <code>tizen.application.addAppInfoEventListener</code> interface.</p>
   <pre class="prettyprint">var packageEventCallback =
 {
-&nbsp;&nbsp;&nbsp;oninstalled: function(packageInfo)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;The package &quot;&#39; + packageInfo.name + &#39;&quot; is installed&#39;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onupdated: function(packageInfo)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;The package &quot;&#39; + packageInfo.name + &#39;&quot; is updated&#39;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onuninstalled: function(packageId)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;The package &quot;&#39; + packageId + &#39;&quot; is uninstalled&#39;);
-&nbsp;&nbsp;&nbsp;}
+   oninstalled: function(packageInfo)
+   {
+      console.log('The package "' + packageInfo.name + '" is installed');
+   },
+   onupdated: function(packageInfo)
+   {
+      console.log('The package "' + packageInfo.name + '" is updated');
+   },
+   onuninstalled: function(packageId)
+   {
+      console.log('The package "' + packageId + '" is uninstalled');
+   }
 };
 
 tizen.package.setPackageInfoEventListener(packageEventCallback);</pre>
@@ -144,142 +144,142 @@ tizen.package.setPackageInfoEventListener(packageEventCallback);</pre>
 
  <h4>Preinstalled Packages and Applications In Mobile Applications</h4>
  <p>A <strong>Sample Package</strong> is preinstalled in the simulator and contains 2 sample applications: Tizen dialer for making phone calls, and Tizen sender for sending SMS messages. Many sample applications, such as CallLog, use the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API to invoke these service applications. Since the simulator allows you to run only 1 application at a time, the <strong>Application Module Message</strong> window is available, which can provide return data for success callback and simulate application launch failure.</p>
- 
+
  <p>The following sample code demonstrates how to define an application control and invoke the <code>http://tizen.org/appcontrol/operation/send_text</code> service provided by the Tizen sender application. You can use the <strong>Application Module Message</strong> window to simulate the success value for the success callback or an error message for the error callback.</p>
-  <pre class="prettyprint">var appControl = new tizen.ApplicationControl(&#39;http://tizen.org/appcontrol/operation/send_text&#39;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;sms:&#39; + phoneNumber);
+  <pre class="prettyprint">var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/send_text',
+                                              'sms:' + phoneNumber);
 
 tizen.application.launchAppControl(appControl, null, function()
 {
-&nbsp;&nbsp;&nbsp;console.log(&#39;launch app service ...&#39;);
+   console.log('launch app service ...');
 }, function(e) {/* Error handling */},
 {
-&nbsp;&nbsp;&nbsp;onsuccess: function()
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;Message service launch success&#39;);
-&nbsp;&nbsp;&nbsp;},
-&nbsp;&nbsp;&nbsp;onfailure: function(er) {/* Error handling */}
+   onsuccess: function()
+   {
+      console.log('Message service launch success');
+   },
+   onfailure: function(er) {/* Error handling */}
 });</pre>
 
-  <p align="center"><strong>Figure: Providing application callback data</strong></p> 
-  <p align="center"><img  alt="Providing application callback data" src="../images/simulator_panel_package_callback.png" /></p> 
-  <p>The Web Simulator does not have a home screen. Therefore, when the <code>application.exit()</code> method is called, you cannot navigate to another application or to the home screen. In this situation, a message is displayed stating that the application tried to exit and can be launched again.</p> 
-    
-       <p align="center"><strong>Figure: Launch an application again</strong></p> 
-  <p align="center"><img  alt="Launch an application again" src="../images/app_exit.png" /></p> 
-       
-                               <h3 id="communication" name="communication">Communications in Mobile Applications</h3> 
-                        
+  <p align="center"><strong>Figure: Providing application callback data</strong></p>
+  <p align="center"><img  alt="Providing application callback data" src="../images/simulator_panel_package_callback.png" /></p>
+  <p>The Web Simulator does not have a home screen. Therefore, when the <code>application.exit()</code> method is called, you cannot navigate to another application or to the home screen. In this situation, a message is displayed stating that the application tried to exit and can be launched again.</p>
+
+       <p align="center"><strong>Figure: Launch an application again</strong></p>
+  <p align="center"><img  alt="Launch an application again" src="../images/app_exit.png" /></p>
+
+                               <h3 id="communication" name="communication">Communications in Mobile Applications</h3>
+
   <p>In the <strong>Communications</strong> panel, you can handle calls, messages, and the push service.</p>
   <p><strong>Calls</strong></p>
-  <p>The <strong>Calls</strong> tab provides controls for simulating incoming calls made to the application. The calls can be tracked by call history-related methods using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API.</p> 
-  <p align="center"><strong>Figure: Calls tab</strong></p> 
-  <p align="center"><img  alt="Calls tab" src="../images/simulator_panel_call.png" /></p> 
-  <p>Click <strong>Call</strong> to display the calling screen. Click <strong>Answer</strong> to simulate a received call, and <strong>Ignore</strong> to simulate a rejected call.</p> 
-  <p align="center"><strong>Figure: Calling screen</strong></p> 
+  <p>The <strong>Calls</strong> tab provides controls for simulating incoming calls made to the application. The calls can be tracked by call history-related methods using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API.</p>
+  <p align="center"><strong>Figure: Calls tab</strong></p>
+  <p align="center"><img  alt="Calls tab" src="../images/simulator_panel_call.png" /></p>
+  <p>Click <strong>Call</strong> to display the calling screen. Click <strong>Answer</strong> to simulate a received call, and <strong>Ignore</strong> to simulate a rejected call.</p>
+  <p align="center"><strong>Figure: Calling screen</strong></p>
   <p align="center"><img  alt="Calling screen" src="../images/simulator_panel_callscreen.png" /></p>
       <p><strong>Messages</strong></p>
-  <p>The <strong>Messages</strong> tab provides controls for simulating SMS, MMS, and email message exchange between the panel and a target application. To send a message from the panel to the application:</p> 
-  <ol> 
-   <li>Enter the sender name and message body.</li> 
-   <li>Select the message type.</li> 
-   <li>Click <strong>Send</strong>. </li> 
-  </ol> 
-  <p>The application receives messages using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API.</p> 
-  <p>The <strong>Message Thread</strong> section shows the message history of the current session.</p> 
-  <p align="center"><strong>Figure: Messages tab</strong></p> 
-  <p align="center"><img  alt="Messages tab" src="../images/simulator_panel_messaging.png" /></p> 
+  <p>The <strong>Messages</strong> tab provides controls for simulating SMS, MMS, and email message exchange between the panel and a target application. To send a message from the panel to the application:</p>
+  <ol>
+   <li>Enter the sender name and message body.</li>
+   <li>Select the message type.</li>
+   <li>Click <strong>Send</strong>. </li>
+  </ol>
+  <p>The application receives messages using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API.</p>
+  <p>The <strong>Message Thread</strong> section shows the message history of the current session.</p>
+  <p align="center"><strong>Figure: Messages tab</strong></p>
+  <p align="center"><img  alt="Messages tab" src="../images/simulator_panel_messaging.png" /></p>
   <p><strong>Push Service</strong></p>
   <p>The <strong>Push</strong> tab provides controls for delivering push notifications to your application. The applications table (on the <strong>Packages and Applications</strong> panel) lists registered applications for receiving push notifications and connectivity status. If an application is connected, the push service sends the push notification data directly to the application. If an application is not connected, the push service posts a UI notification on the Notification panel.</p>
 
   <p>For the application to receive push messages, it has to register itself with the <code>tizen.push.registerService()</code> method. If the registration is successful, a red pause button is shown at the <strong>Application</strong> section under <strong>Status</strong>. During this status, notification messages pushed by the service server are posted on the Notification panel.</p>
-   <p align="center"><strong>Figure: Registered for the push service</strong></p> 
-  <p align="center"><img  alt="Registered for the push service" src="../images/simulator_panel_push_register.png" /></p>  
-  
-<p>After the registration, the application must connect to the push service with the <code>tizen.push.connectService()</code> method. When the application is connected, a callback provided by the application is called whenever a notification message arrives.</p> 
-
-   <p align="center"><strong>Figure: Connected to the push service</strong></p> 
-  <p align="center"><img  alt="Connected to the push service" src="../images/simulator_panel_push_connect.png" /></p>  
-  
-<p>To push a message from the panel to the application:</p> 
-  <ol> 
-   <li>Select the target application on the <strong>Packages and Applications</strong> panel.</li> 
-   <li>Enter the alert message and application data.</li> 
-   <li>Click <strong>Push</strong>. </li> 
-  </ol>   
-  <p>The application receives push notifications using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">Push</a> API.</p> 
-  <p align="center"><strong>Figure: Push tab</strong></p> 
-  <p align="center"><img  alt="Push tab" src="../images/simulator_panel_push.png" /></p> 
-                       
-                       
+   <p align="center"><strong>Figure: Registered for the push service</strong></p>
+  <p align="center"><img  alt="Registered for the push service" src="../images/simulator_panel_push_register.png" /></p>
+
+<p>After the registration, the application must connect to the push service with the <code>tizen.push.connectService()</code> method. When the application is connected, a callback provided by the application is called whenever a notification message arrives.</p>
+
+   <p align="center"><strong>Figure: Connected to the push service</strong></p>
+  <p align="center"><img  alt="Connected to the push service" src="../images/simulator_panel_push_connect.png" /></p>
+
+<p>To push a message from the panel to the application:</p>
+  <ol>
+   <li>Select the target application on the <strong>Packages and Applications</strong> panel.</li>
+   <li>Enter the alert message and application data.</li>
+   <li>Click <strong>Push</strong>. </li>
+  </ol>
+  <p>The application receives push notifications using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">Push</a> API.</p>
+  <p align="center"><strong>Figure: Push tab</strong></p>
+  <p align="center"><img  alt="Push tab" src="../images/simulator_panel_push.png" /></p>
+
+
                                <h3 id="network" name="network">Network Management in Mobile Applications</h3>
-                               
-                        
-  <p>The <strong>Network Management</strong> panel is used to manage network capabilities, such as Wi-Fi, cellular network (2G, 3G, and 4G), NFC, Bluetooth, and bearer selection. </p> 
-  <p align="center"><strong>Figure: Network Management panel</strong></p> 
-
-  <p align="center"><img  alt="Network Management panel" src="../images/simulator_panel_network.png" /></p> 
-  <p>You can also set additional parameters for the NFC and Bluetooth functionalities, such as NFC tag and target type, Bluetooth adapter information, and the simulated devices.</p> 
-  <p align="center"><strong>Figure: NFC parameters</strong></p> 
-  <p align="center"><img  alt="NFC parameters" src="../images/simulator_panel_nfc.png" /></p> 
-  
-    <p align="center"><strong>Figure: Bluetooth parameters</strong></p> 
-  <p align="center"><img  alt="Bluetooth parameters" src="../images/simulator_panel_bluetooth.png" /></p> 
-  
+
+
+  <p>The <strong>Network Management</strong> panel is used to manage network capabilities, such as Wi-Fi, cellular network (2G, 3G, and 4G), NFC, Bluetooth, and bearer selection. </p>
+  <p align="center"><strong>Figure: Network Management panel</strong></p>
+
+  <p align="center"><img  alt="Network Management panel" src="../images/simulator_panel_network.png" /></p>
+  <p>You can also set additional parameters for the NFC and Bluetooth functionalities, such as NFC tag and target type, Bluetooth adapter information, and the simulated devices.</p>
+  <p align="center"><strong>Figure: NFC parameters</strong></p>
+  <p align="center"><img  alt="NFC parameters" src="../images/simulator_panel_nfc.png" /></p>
+
+    <p align="center"><strong>Figure: Bluetooth parameters</strong></p>
+  <p align="center"><img  alt="Bluetooth parameters" src="../images/simulator_panel_bluetooth.png" /></p>
+
   <p>The <strong>Bearer Selection</strong> section provides network bearer selection management by listing supported network devices and their current availability status. You can request and release specific network connections from this section.</p>
-  <p align="center"><strong>Figure: Network bearer selection</strong></p> 
+  <p align="center"><strong>Figure: Network bearer selection</strong></p>
   <p align="center"><img  alt="Network bearer selection" src="../images/simulator_panel_bearer.png" /></p>
 
-<p>Your application can manage network devices and network status using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC</a>, <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth</a>, and <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html">Network Bearer Selection</a> APIs.</p> 
-
-                       
-                       
-                               <h3 id="power" name="power">Power Manager in Mobile Applications</h3> 
-                       
-  <p>The <strong>Power Manager</strong> panel provides controls for managing the state of the battery and power resources.</p> 
-  <p align="center"><strong>Figure: Power Manager panel</strong></p> 
-  <p align="center"><img alt="Power Manager panel" src="../images/power_manager_simulator.png" /></p> 
-
-  <p>The <strong>BATTERY</strong> section simulates the device battery level. Your application can retrieve the current battery status using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information</a> API.</p> 
-
-                       
-                               <h3 id="download" name="download">Download in Mobile Applications</h3> 
-                       
-  <p>The <strong>Download</strong> panel allows you to create a simulated download object with custom size, MIME type, and download speed. All simulated download objects support start, cancel, pause, and resume operations, and provide status feedback mechanism. You can use the simulated download object created by the panel to test various conditions for your application.</p> 
-  <p>The panel contains 2 predefined simulated download objects: <code>http://tizen.org/small_file.zip</code> and <code>http://tizen.org/big_file.zip</code>. When an object is selected from the drop-down list, its details are displayed at the bottom half of the panel. The panel also allows you to add, remove, and update download objects. Details, such as URL, MIME type, file size, and speed, are configurable.</p> 
-  <p>The following sample code demonstrates how to start the download process and set a listener callback to monitor the status of the download. By adjusting the parameter of the download object, you can verify that you application behaves correctly in different scenarios.</p> 
-  <pre class="prettyprint">request = tizen.DownloadRequest(&quot;http://tizen.org/small_file.zip&quot;)
+<p>Your application can manage network devices and network status using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC</a>, <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth</a>, and <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html">Network Bearer Selection</a> APIs.</p>
+
+
+
+                               <h3 id="power" name="power">Power Manager in Mobile Applications</h3>
+
+  <p>The <strong>Power Manager</strong> panel provides controls for managing the state of the battery and power resources.</p>
+  <p align="center"><strong>Figure: Power Manager panel</strong></p>
+  <p align="center"><img alt="Power Manager panel" src="../images/power_manager_simulator.png" /></p>
+
+  <p>The <strong>BATTERY</strong> section simulates the device battery level. Your application can retrieve the current battery status using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information</a> API.</p>
+
+
+                               <h3 id="download" name="download">Download in Mobile Applications</h3>
+
+  <p>The <strong>Download</strong> panel allows you to create a simulated download object with custom size, MIME type, and download speed. All simulated download objects support start, cancel, pause, and resume operations, and provide status feedback mechanism. You can use the simulated download object created by the panel to test various conditions for your application.</p>
+  <p>The panel contains 2 predefined simulated download objects: <code>http://tizen.org/small_file.zip</code> and <code>http://tizen.org/big_file.zip</code>. When an object is selected from the drop-down list, its details are displayed at the bottom half of the panel. The panel also allows you to add, remove, and update download objects. Details, such as URL, MIME type, file size, and speed, are configurable.</p>
+  <p>The following sample code demonstrates how to start the download process and set a listener callback to monitor the status of the download. By adjusting the parameter of the download object, you can verify that you application behaves correctly in different scenarios.</p>
+  <pre class="prettyprint">request = tizen.DownloadRequest("http://tizen.org/small_file.zip")
 downloadId = tizen.download.start(request)
 tizen.download.setListener(downloadId, listener)
-</pre> 
-  <p align="center"><strong>Figure: Download panel</strong></p> 
-  <p> </p> 
-  <p align="center"><img  alt="Download panel" src="../images/simulator_panel_download.png" /></p> 
-                       
-                       
-                               <h3 id="noti" name="noti">Notification in Mobile Applications</h3> 
-               
-  <p>The <strong>Notification</strong> panel provides a notification center administrating system notifications. As the Simulator has no real desktop UI components, such as status bar or notification tray, the panel serves as the final rendering place of all the notifications. You can easily verify that the notification details you created with the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification</a> API are correct.</p> 
-  <p align="center"><strong>Figure: Notification panel with empty notification</strong></p> 
-
-  <p align="center"><img  alt="Notification panel with empty notification" src="../images/simulator_panel_notification_none.png" /></p> 
-  <p>The following sample code demonstrates how to create a status notification. When it is posted with the <code>post()</code> method, the details of the notification are displayed on the panel, as shown in the figure below.</p> 
+</pre>
+  <p align="center"><strong>Figure: Download panel</strong></p>
+  <p> </p>
+  <p align="center"><img  alt="Download panel" src="../images/simulator_panel_download.png" /></p>
+
+
+                               <h3 id="noti" name="noti">Notification in Mobile Applications</h3>
+
+  <p>The <strong>Notification</strong> panel provides a notification center administrating system notifications. As the Simulator has no real desktop UI components, such as status bar or notification tray, the panel serves as the final rendering place of all the notifications. You can easily verify that the notification details you created with the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification</a> API are correct.</p>
+  <p align="center"><strong>Figure: Notification panel with empty notification</strong></p>
+
+  <p align="center"><img  alt="Notification panel with empty notification" src="../images/simulator_panel_notification_none.png" /></p>
+  <p>The following sample code demonstrates how to create a status notification. When it is posted with the <code>post()</code> method, the details of the notification are displayed on the panel, as shown in the figure below.</p>
   <pre class="prettyprint">
-notification = new tizen.StatusNotification(&quot;PROGRESS&quot;, &quot;Notification Sample&quot;, 
+notification = new tizen.StatusNotification("PROGRESS", "Notification Sample",
 {
-&nbsp;&nbsp;&nbsp;content: &quot;sample content&quot;, 
-&nbsp;&nbsp;&nbsp;iconPath: file:///images/icons/icon.png,
-&nbsp;&nbsp;&nbsp;soundPath: file:///sounds/alert.wav,
-&nbsp;&nbsp;&nbsp;vibration: true, 
-&nbsp;&nbsp;&nbsp;progressValue: 67
+   content: "sample content",
+   iconPath: file:///images/icons/icon.png,
+   soundPath: file:///sounds/alert.wav,
+   vibration: true,
+   progressValue: 67
 });
 
-</pre> 
-  <p align="center"><strong>Figure: Notification panel with a notification</strong></p> 
-  <p> </p> 
-  <p align="center"><img  alt="Notification panel with a notification" src="../images/simulator_panel_notification.png" /></p> 
-               
-               
+</pre>
+  <p align="center"><strong>Figure: Notification panel with a notification</strong></p>
+  <p> </p>
+  <p align="center"><img  alt="Notification panel with a notification" src="../images/simulator_panel_notification.png" /></p>
+
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/web_tools/web_simulator_w.htm b/org.tizen.studio/html/web_tools/web_simulator_w.htm
index eb22497..ad9b145 100644 (file)
--- a/org.tizen.studio/html/web_tools/web_simulator_w.htm
+++ b/org.tizen.studio/html/web_tools/web_simulator_w.htm
@@ -5,20 +5,20 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
-  <title>Using the Web Simulator</title> 
- </head> 
+  <title>Using the Web Simulator</title>
+ </head>
  <body onload="prettyPrint()" style="overflow: auto;">
 
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -26,231 +26,231 @@
                </ul>
                <p class="toc-title">Content</p>
                <ul class="toc">
-                       <li><a href="#setting">Web Simulator Settings</a></li>                  
+                       <li><a href="#setting">Web Simulator Settings</a></li>
                        <li><a href="#pref">Simulator Preferences</a></li>
                        <li><a href="#api">Tizen API Coverage</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Using the Web Simulator</h1> 
-  <p>The Tizen Web Simulator is a light-weight tool that provides many <a href="#setting">settings</a> and <a href="web_simulator_features_w.htm">features</a> to develop Web applications. You can use the simulator features to debug your applications.</p> 
+  <h1>Using the Web Simulator</h1>
+  <p>The Tizen Web Simulator is a light-weight tool that provides many <a href="#setting">settings</a> and <a href="web_simulator_features_w.htm">features</a> to develop Web applications. You can use the simulator features to debug your applications.</p>
+
+  <p>The Tizen Web Simulator:</p>
+  <ul>
+   <li>Supports running and debugging modern HTML5 Web applications.</li>
+   <li>Simulates Tizen Web APIs using a JavaScript backend. For more information about the Tizen Web APIs supported by the simulator, see <a href="#api">Tizen API Coverage</a>.</li>
+   <li>Includes configuration panels for sending in events and messages to debug features, such as Geolocation, Accelerometer, and Messaging.</li>
+   <li>Runs on Google Chrome&trade;.</li>
+   <li>Provides <a href="#pref">preferences</a> to allow you to customize how it works.</li>
+  </ul>
+  <p>The Tizen Web Simulator is based on the <a href="https://github.com/blackberry-webworks/Ripple-UI" target="_blank">Ripple-UI Framework</a> and is licensed under Apache Software License v.2.0. </p>
 
-  <p>The Tizen Web Simulator:</p> 
-  <ul> 
-   <li>Supports running and debugging modern HTML5 Web applications.</li> 
-   <li>Simulates Tizen Web APIs using a JavaScript backend. For more information about the Tizen Web APIs supported by the simulator, see <a href="#api">Tizen API Coverage</a>.</li> 
-   <li>Includes configuration panels for sending in events and messages to debug features, such as Geolocation, Accelerometer, and Messaging.</li> 
-   <li>Runs on Google Chrome&trade;.</li> 
-   <li>Provides <a href="#pref">preferences</a> to allow you to customize how it works.</li> 
-  </ul> 
-  <p>The Tizen Web Simulator is based on the <a href="https://github.com/blackberry-webworks/Ripple-UI" target="_blank">Ripple-UI Framework</a> and is licensed under Apache Software License v.2.0. </p> 
-  
 <div class="note">
     <strong>Note</strong>
        The Web Simulator does not support a wearable circular UI.
 </div>
-  <p align="center"><strong>Figure: Tizen Web Simulator</strong></p> 
-  <p align="center"><img alt="Tizen Web Simulator" src="../images/tizen_web_simulator.png" /></p>   
-  
-  <h2 id="setting" name="setting">Web Simulator Settings</h2> 
-  <p>The Web Simulator has several settings for developing Web applications.</p> 
-  <h3 id="bar">Application Navigation Bar</h3> 
-  <p>The application navigation bar is used to load an application, view the browsing history, and modify the Web Simulator configuration and visibility settings.</p> 
-  <p>The navigation bar has the following options:</p> 
-  <ul> 
-   <li>Address bar <p>When the Web Simulator is launched from the Tizen Studio, the file path of your application main file is displayed in the address bar. You can edit this field for changing the file or project to run.</p> 
-<p align="left"><img alt="Address bar" src="../images/simulator_address_bar.png" /></p></li> 
-   <li>Reload button <p>Reloads the current application.</p> 
-<p align="left"><img alt="Reload button" src="../images/simulator_reload_button.png" /></p></li> 
-   <li>Browsing history <p>Click the history button to view the previously launched applications.</p> 
-<p align="left"><img alt="Browsing history" src="../images/simulator_browsing_history.png" /></p></li> 
-   <li>Configuration button <p>Opens the Web Simulator configuration window.</p> 
-<p align="left"><img alt="Web Simulator configuration" src="../images/simulator_config_button.png" /></p></li> 
-   <li>Panel visibility button <p>Opens the panel visibility window.</p> 
-<p align="left"><img alt="Web Simulator panel visibility" src="../images/simulator_panel_button.png" /></p></li> 
-   <li>Information button <p>Opens the Web Simulator information window.</p> 
-<p align="left"><img alt="Web Simulator information" src="../images/simulator_info_button.png" /></p></li> 
-  </ul> 
-  <h3 id="simu">Simulator Configuration Settings</h3> 
-  <p>You can modify the following configuration settings in the Web Simulator configuration window:</p> 
-  <ul> 
-   <li>Configuration management <p>Save your configuration settings to the local storage and restore the settings at a later time.</p> 
-<p align="left"><img alt="Configuration settings save and load buttons" src="../images/simulator_save_button.png" /></p></li> 
-   <li>Device settings <p>Set the device API and device resolution to simulate the device resolution of the target device on the <strong>DEVICE</strong> tab.</p> 
+  <p align="center"><strong>Figure: Tizen Web Simulator</strong></p>
+  <p align="center"><img alt="Tizen Web Simulator" src="../images/tizen_web_simulator.png" /></p>
+
+  <h2 id="setting" name="setting">Web Simulator Settings</h2>
+  <p>The Web Simulator has several settings for developing Web applications.</p>
+  <h3 id="bar">Application Navigation Bar</h3>
+  <p>The application navigation bar is used to load an application, view the browsing history, and modify the Web Simulator configuration and visibility settings.</p>
+  <p>The navigation bar has the following options:</p>
+  <ul>
+   <li>Address bar <p>When the Web Simulator is launched from the Tizen Studio, the file path of your application main file is displayed in the address bar. You can edit this field for changing the file or project to run.</p>
+<p align="left"><img alt="Address bar" src="../images/simulator_address_bar.png" /></p></li>
+   <li>Reload button <p>Reloads the current application.</p>
+<p align="left"><img alt="Reload button" src="../images/simulator_reload_button.png" /></p></li>
+   <li>Browsing history <p>Click the history button to view the previously launched applications.</p>
+<p align="left"><img alt="Browsing history" src="../images/simulator_browsing_history.png" /></p></li>
+   <li>Configuration button <p>Opens the Web Simulator configuration window.</p>
+<p align="left"><img alt="Web Simulator configuration" src="../images/simulator_config_button.png" /></p></li>
+   <li>Panel visibility button <p>Opens the panel visibility window.</p>
+<p align="left"><img alt="Web Simulator panel visibility" src="../images/simulator_panel_button.png" /></p></li>
+   <li>Information button <p>Opens the Web Simulator information window.</p>
+<p align="left"><img alt="Web Simulator information" src="../images/simulator_info_button.png" /></p></li>
+  </ul>
+  <h3 id="simu">Simulator Configuration Settings</h3>
+  <p>You can modify the following configuration settings in the Web Simulator configuration window:</p>
+  <ul>
+   <li>Configuration management <p>Save your configuration settings to the local storage and restore the settings at a later time.</p>
+<p align="left"><img alt="Configuration settings save and load buttons" src="../images/simulator_save_button.png" /></p></li>
+   <li>Device settings <p>Set the device API and device resolution to simulate the device resolution of the target device on the <strong>DEVICE</strong> tab.</p>
 <div class="note">
     <strong>Note</strong>
-       To provide similar UI rendering on the emulator and the target device, set the emulator resolution to <strong>tizen WVGA (480x800)</strong> or <strong>tizen HD (720x1280)</strong>, as the viewport property of these resolutions is configured to be the same as the target device&#39;s.
+       To provide similar UI rendering on the emulator and the target device, set the emulator resolution to <strong>tizen WVGA (480x800)</strong> or <strong>tizen HD (720x1280)</strong>, as the viewport property of these resolutions is configured to be the same as the target device's.
 </div>
-   
-   </li> 
-   <li>System settings <p>The Tizen System Information API (for <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a> applications) is used to retrieve device and network-related information. Use the <strong>SYSTEM SETTINGS</strong> tab to set the device status and to test whether your application can retrieve the current device status. You can also test the application listener functions for status change notifications.</p> <p>You can modify the following system configuration settings on the <strong>SYSTEM SETTINGS</strong> tab:</p> 
-    <ul> 
-     <li><strong>CONFIG</strong> <p>Manage the device vibration and screen lock status.</p></li> 
-     <li><strong>CPU</strong> <p>Manually set the CPU load. If the value is set to 0, the CPU is idle. If the value is set to 1, the CPU usage is 100%.</p></li> 
+
+   </li>
+   <li>System settings <p>The Tizen System Information API (for <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a> applications) is used to retrieve device and network-related information. Use the <strong>SYSTEM SETTINGS</strong> tab to set the device status and to test whether your application can retrieve the current device status. You can also test the application listener functions for status change notifications.</p> <p>You can modify the following system configuration settings on the <strong>SYSTEM SETTINGS</strong> tab:</p>
+    <ul>
+     <li><strong>CONFIG</strong> <p>Manage the device vibration and screen lock status.</p></li>
+     <li><strong>CPU</strong> <p>Manually set the CPU load. If the value is set to 0, the CPU is idle. If the value is set to 1, the CPU usage is 100%.</p></li>
      <li><strong>BUILD</strong>, <strong>LOCALE</strong>, <strong>DEVICE ORIENTATION</strong>, <strong>STORAGE</strong>, and <strong>DISPLAY</strong><p>Display the build type, language, country, display orientation, dots per inch (DPI), and device width and height. You can also set the display brightness and storage attributes.</p></li>
-<li><strong>PERIPHERAL</strong> <p>Display and set the video output.</p></li>   
-    </ul></li> 
-   <li>Network settings <p>Set the network type, Wi-Fi network, cellular network, and SIM card-related configuration options on the <strong>NETWORK</strong> tab.</p></li> 
+<li><strong>PERIPHERAL</strong> <p>Display and set the video output.</p></li>
+    </ul></li>
+   <li>Network settings <p>Set the network type, Wi-Fi network, cellular network, and SIM card-related configuration options on the <strong>NETWORK</strong> tab.</p></li>
   </ul>
 
-<h2 id="pref" name="pref">Simulator Preferences</h2> 
-  <p>To view the Tizen Web Simulator preferences, select <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web &gt; Simulator</strong> in the Tizen Studio.</p> 
-  <h3 id="google" name="google">Google Chrome&trade; Settings</h3> 
-  <p>In this section, you can modify Google Chrome&trade;-related preferences.</p> 
-  <h4 id="chrome" name="chrome">Google Chrome&trade; Location</h4> 
-  <p>Enter the full path to the Google Chrome&trade; program. When first started, the Tizen Studio attempts to discover the location. However, it can be necessary to enter or modify this value manually.</p> 
-  <ul> 
-   <li>For Linux: <code>/opt/google/chrome/google-chrome</code>.</li> 
-   <li>For Windows&reg; 64-bit: <code> C:\Program Files (x86)\Google\Chrome\Application\chrome.exe</code></li> 
-   <li>For Windows&reg; 32-bit: <code> C:\Program Files\Google\Chrome\Application\chrome.exe</code></li> 
-  </ul> 
-  <h4 id="extra" name="extra">Extra Parameters</h4> 
-  <p>The simulator is started with default parameters, including the ones described in the following table.</p> 
-<p align="center" class="Table"><strong>Table: Default parameters</strong></p> 
+<h2 id="pref" name="pref">Simulator Preferences</h2>
+  <p>To view the Tizen Web Simulator preferences, select <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web &gt; Simulator</strong> in the Tizen Studio.</p>
+  <h3 id="google" name="google">Google Chrome&trade; Settings</h3>
+  <p>In this section, you can modify Google Chrome&trade;-related preferences.</p>
+  <h4 id="chrome" name="chrome">Google Chrome&trade; Location</h4>
+  <p>Enter the full path to the Google Chrome&trade; program. When first started, the Tizen Studio attempts to discover the location. However, it can be necessary to enter or modify this value manually.</p>
+  <ul>
+   <li>For Linux: <code>/opt/google/chrome/google-chrome</code>.</li>
+   <li>For Windows&reg; 64-bit: <code> C:\Program Files (x86)\Google\Chrome\Application\chrome.exe</code></li>
+   <li>For Windows&reg; 32-bit: <code> C:\Program Files\Google\Chrome\Application\chrome.exe</code></li>
+  </ul>
+  <h4 id="extra" name="extra">Extra Parameters</h4>
+  <p>The simulator is started with default parameters, including the ones described in the following table.</p>
+<p align="center" class="Table"><strong>Table: Default parameters</strong></p>
 <table style="width: 100%" border="1">
-<tbody> 
-    <tr> 
-     <th>Parameters</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>--allow-access-from-files</code> </td> 
-     <td>Allows the simulator JavaScript APIs to access files on the disk (such as <code>config.xml</code> and the application icon).</td> 
-    </tr> 
-    <tr> 
-     <td><code>--disable-web-security</code> </td> 
-     <td>Allows the simulator to do cross-domain requests (such as access the map location on another server).</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  <p>To add more start-up parameters, enter them in this field.</p> 
-  <h4 id="profile_data" name="profile">Profile Data Location</h4> 
-  <p>Enter the full directory path for the simulator to store user preferences and Web application data.</p> 
+<tbody>
+    <tr>
+     <th>Parameters</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>--allow-access-from-files</code> </td>
+     <td>Allows the simulator JavaScript APIs to access files on the disk (such as <code>config.xml</code> and the application icon).</td>
+    </tr>
+    <tr>
+     <td><code>--disable-web-security</code> </td>
+     <td>Allows the simulator to do cross-domain requests (such as access the map location on another server).</td>
+    </tr>
+   </tbody>
+  </table>
+  <p>To add more start-up parameters, enter them in this field.</p>
+  <h4 id="profile_data" name="profile">Profile Data Location</h4>
+  <p>Enter the full directory path for the simulator to store user preferences and Web application data.</p>
 <div class="note">
     <strong>Note</strong>
        Linux users must manually define this parameter instead of using the default value, since the total length of the directory path in Linux is very limited for this parameter. Using the default value can prevent you from launching more than 1 application concurrently. There is no such restriction in the Windows&reg; version.
 </div>
-  
-  <h3 id="simulator" name="simulator">Simulator Settings</h3> 
-  <p>In this section, you can modify simulator-related preferences:</p> 
-  <ul> 
-   <li><strong>Simulator location</strong> <p>Set whether to use the default version of the simulator, or a custom version.</p> 
-    <ul> 
-     <li>Internal: Use the simulator that is part of the Tizen Studio.</li> 
-     <li>External: Use a custom build or other simulator version. Enter the full path to the <code>index.html</code> file for the version you want to use.</li> 
-    </ul></li> 
-   <li> <p>Selecting <strong>Launch simulator in Google Chrome&trade; application mode</strong> launches the simulator without the Google URL bar or tabs at the top. The result is that the simulator appears as a standalone application. The setting has no effect on the simulator features.</p></li> 
+
+  <h3 id="simulator" name="simulator">Simulator Settings</h3>
+  <p>In this section, you can modify simulator-related preferences:</p>
+  <ul>
+   <li><strong>Simulator location</strong> <p>Set whether to use the default version of the simulator, or a custom version.</p>
+    <ul>
+     <li>Internal: Use the simulator that is part of the Tizen Studio.</li>
+     <li>External: Use a custom build or other simulator version. Enter the full path to the <code>index.html</code> file for the version you want to use.</li>
+    </ul></li>
+   <li> <p>Selecting <strong>Launch simulator in Google Chrome&trade; application mode</strong> launches the simulator without the Google URL bar or tabs at the top. The result is that the simulator appears as a standalone application. The setting has no effect on the simulator features.</p></li>
+  </ul>
+
+<h2 id="api" name="api">Tizen API Coverage</h2>
+  <p>Below is a summary of the Tizen APIs supported in this release. Some APIs are supported with a JavaScript backend and others are provided by Google Chrome&trade;. Tizen also supports <a href="#spec">W3C/HTML5 Specifications</a>.</p>
+  <h3 id="support" name="support">Supported Tizen Web Device API</h3>
+  <p>The following APIs are implemented by the simulator in JavaScript:</p>
+  <ul>
+   <li>Tizen (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">wearable</a> applications)</li>
+   <li>Alarm (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">wearable</a> applications)</li>
+   <li>Application (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications)</li>
+   <li>Bluetooth (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">mobile</a> applications)</li>
+   <li>Bookmark (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html">mobile</a> applications)</li>
+   <li>Calendar (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">mobile</a> applications)</li>
+   <li>Call History (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">mobile</a> applications)</li>
+   <li>Contact (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">mobile</a> applications)</li>
+   <li>Content (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">wearable</a> applications)</li>
+   <li>Data Control (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html">mobile</a> applications)</li>
+   <li>Data Synchronization (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html">mobile</a> applications)</li>
+   <li>Download (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a> applications)</li>
+   <li>Filesystem (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications)</li>
+   <li>Messaging (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">mobile</a> applications)</li>
+   <li>Network Bearer Selection (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html">mobile</a> applications)</li>
+   <li>NFC (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">mobile</a> applications)</li>
+   <li>Notification (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">mobile</a> applications)</li>
+   <li>Package (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html">wearable</a> applications)</li>
+   <li>Power (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">wearable</a> applications)</li>
+   <li>Push (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">mobile</a> applications)</li>
+   <li>System Information (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a> applications)</li>
+   <li>System Setting (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html">wearable</a> applications)</li>
+   <li>Time (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">wearable</a> applications)</li>
+  </ul>
+  <h3 id="non_support" name="non_support">Non-supported Tizen Web Device API</h3>
+  <p>The following APIs are not supported by the current version of the simulator. Support for these APIs is under development.</p>
+  <ul>
+   <li>Message Port</li>
+   <li>Secure Element</li>
   </ul>
 
-<h2 id="api" name="api">Tizen API Coverage</h2> 
-  <p>Below is a summary of the Tizen APIs supported in this release. Some APIs are supported with a JavaScript backend and others are provided by Google Chrome&trade;. Tizen also supports <a href="#spec">W3C/HTML5 Specifications</a>.</p> 
-  <h3 id="support" name="support">Supported Tizen Web Device API</h3> 
-  <p>The following APIs are implemented by the simulator in JavaScript:</p> 
-  <ul> 
-   <li>Tizen (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">wearable</a> applications)</li> 
-   <li>Alarm (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">wearable</a> applications)</li> 
-   <li>Application (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications)</li> 
-   <li>Bluetooth (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">mobile</a> applications)</li> 
-   <li>Bookmark (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html">mobile</a> applications)</li> 
-   <li>Calendar (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">mobile</a> applications)</li> 
-   <li>Call History (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">mobile</a> applications)</li> 
-   <li>Contact (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">mobile</a> applications)</li> 
-   <li>Content (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">wearable</a> applications)</li> 
-   <li>Data Control (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datacontrol.html">mobile</a> applications)</li> 
-   <li>Data Synchronization (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html">mobile</a> applications)</li> 
-   <li>Download (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a> applications)</li> 
-   <li>Filesystem (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications)</li> 
-   <li>Messaging (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">mobile</a> applications)</li> 
-   <li>Network Bearer Selection (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html">mobile</a> applications)</li> 
-   <li>NFC (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">mobile</a> applications)</li> 
-   <li>Notification (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">mobile</a> applications)</li> 
-   <li>Package (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html">wearable</a> applications)</li> 
-   <li>Power (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">wearable</a> applications)</li> 
-   <li>Push (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">mobile</a> applications)</li> 
-   <li>System Information (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a> applications)</li> 
-   <li>System Setting (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systemsetting.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systemsetting.html">wearable</a> applications)</li> 
-   <li>Time (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">wearable</a> applications)</li> 
-  </ul> 
-  <h3 id="non_support" name="non_support">Non-supported Tizen Web Device API</h3> 
-  <p>The following APIs are not supported by the current version of the simulator. Support for these APIs is under development.</p> 
-  <ul> 
-   <li>Message Port</li> 
-   <li>Secure Element</li> 
-  </ul> 
-  
-  <h3 id="issues" name="issues">Web Simulator Known Issues</h3> 
-  <p>The Tizen APIs have the following known issues on the Web simulator:</p> 
-  <ul> 
-   <li>Not all Tizen-specific properties are supported in the Web simulator <code>config.xml</code> configuration file. However, the syntax and values of all Tizen-specific properties are verified. The verification result is displayed in the <strong>Application Configuration</strong> panel of the widget configuration editor.</li> 
-   <li>You can run only 1 application at a time. If your application uses the Application API to invoke another service or application, use the Web simulator features to simulate results for the required callbacks.</li> 
-   <li>DST (Daylight Saving Time) -related methods of the Time API are not supported.</li> 
+  <h3 id="issues" name="issues">Web Simulator Known Issues</h3>
+  <p>The Tizen APIs have the following known issues on the Web simulator:</p>
+  <ul>
+   <li>Not all Tizen-specific properties are supported in the Web simulator <code>config.xml</code> configuration file. However, the syntax and values of all Tizen-specific properties are verified. The verification result is displayed in the <strong>Application Configuration</strong> panel of the widget configuration editor.</li>
+   <li>You can run only 1 application at a time. If your application uses the Application API to invoke another service or application, use the Web simulator features to simulate results for the required callbacks.</li>
+   <li>DST (Daylight Saving Time) -related methods of the Time API are not supported.</li>
    <li>For the Messaging module, the attachment is not supported, and the message body is always loaded.</li>
    <li>If you are using the jQuery Mobile swipe component, the swipe action is simulated by mouse click and unclick events. jQuery Mobile does not recognize swipe actions if they begin or end outside the component, and if the mouse pointer is dragged slowly or not in a straight line.</li>
-  </ul> 
+  </ul>
+
+<h3 id="spec" name="spec">W3C/HTML5 Specifications</h3>
+  <p>The following W3C/HTML5 specifications are supported:</p>
+  <ul>
+   <li><p>Widget:</p>
+    <ul>
+     <li> <p>The <code>config.xml</code> of a widget is parsed by the simulator and the information is shown in the <a class="openconnection" href="web_simulator_features_w.htm#config">Application Configuration</a> panel.</p> </li>
+    </ul></li>
+   <li>Content (documents, graphics, multimedia):
+    <ul>
+     <li>HTML5 audio </li>
+     <li>HTML5 video </li>
+     <li>HTML5 forms</li>
+     <li>Session History API </li>
+     <li>HTML5 2D canvas</li>
+     <li>Inline SVG</li>
+    </ul></li>
+   <li>CSS3:
+    <ul>
+     <li>CSS3 2D transforms</li>
+     <li>CSS3 3D transforms</li>
+     <li>CSS3 animations</li>
+     <li>CSS3 transitions</li>
+     <li>iframe sandbox attribute</li>
+     <li>HTML5 2D canvas</li>
+     <li>CSS3 colors</li>
+    </ul></li>
+   <li>Device/OS integration:
+    <ul>
+     <li>Geolocation API Specification</li>
+     <li>Orientation and acceleration</li>
+     <li>Browser onLine State</li>
+     <li>Vibration API</li>
+     <li>Web audio</li>
+     <li>Web notifications</li>
+    </ul></li>
+   <li>Network and communication:
+    <ul>
+     <li>WebSocket API</li>
+     <li>Web messaging</li>
+     <li>XMLHttpRequest Level 2</li>
+     <li>Cross-origin resource sharing (CORS)</li>
+     <li>Server-sent events</li>
+    </ul></li>
+   <li>Storage:
+    <ul>
+     <li>Web storage</li>
+     <li>File API</li>
+     <li>File API: directories and system </li>
+     <li>File API: writer</li>
+     <li>HTML5 application cache</li>
+     <li>Web SQL database</li>
+     <li>Indexed DB API</li>
+    </ul></li>
+   <li>Performance:
+    <ul>
+     <li>Web workers</li>
+     <li>Page Visibility API (via JavaScript backend)</li>
+     <li>Animation timing control</li>
+    </ul></li>
+  </ul>
 
-<h3 id="spec" name="spec">W3C/HTML5 Specifications</h3> 
-  <p>The following W3C/HTML5 specifications are supported:</p> 
-  <ul> 
-   <li><p>Widget:</p> 
-    <ul> 
-     <li> <p>The <code>config.xml</code> of a widget is parsed by the simulator and the information is shown in the <a class="openconnection" href="web_simulator_features_w.htm#config">Application Configuration</a> panel.</p> </li> 
-    </ul></li> 
-   <li>Content (documents, graphics, multimedia): 
-    <ul> 
-     <li>HTML5 audio </li> 
-     <li>HTML5 video </li> 
-     <li>HTML5 forms</li> 
-     <li>Session History API </li> 
-     <li>HTML5 2D canvas</li> 
-     <li>Inline SVG</li> 
-    </ul></li> 
-   <li>CSS3: 
-    <ul> 
-     <li>CSS3 2D transforms</li> 
-     <li>CSS3 3D transforms</li> 
-     <li>CSS3 animations</li> 
-     <li>CSS3 transitions</li> 
-     <li>iframe sandbox attribute</li> 
-     <li>HTML5 2D canvas</li> 
-     <li>CSS3 colors</li> 
-    </ul></li> 
-   <li>Device/OS integration: 
-    <ul> 
-     <li>Geolocation API Specification</li> 
-     <li>Orientation and acceleration</li> 
-     <li>Browser onLine State</li> 
-     <li>Vibration API</li> 
-     <li>Web audio</li> 
-     <li>Web notifications</li> 
-    </ul></li> 
-   <li>Network and communication: 
-    <ul> 
-     <li>WebSocket API</li> 
-     <li>Web messaging</li> 
-     <li>XMLHttpRequest Level 2</li> 
-     <li>Cross-origin resource sharing (CORS)</li> 
-     <li>Server-sent events</li> 
-    </ul></li> 
-   <li>Storage: 
-    <ul> 
-     <li>Web storage</li> 
-     <li>File API</li> 
-     <li>File API: directories and system </li> 
-     <li>File API: writer</li> 
-     <li>HTML5 application cache</li> 
-     <li>Web SQL database</li> 
-     <li>Indexed DB API</li> 
-    </ul></li> 
-   <li>Performance: 
-    <ul> 
-     <li>Web workers</li> 
-     <li>Page Visibility API (via JavaScript backend)</li> 
-     <li>Animation timing control</li> 
-    </ul></li> 
-  </ul> 
-   
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.studio/html/web_tools/web_unit_test_tool_w.htm b/org.tizen.studio/html/web_tools/web_unit_test_tool_w.htm
index ae853f8..488bb0d 100644 (file)
--- a/org.tizen.studio/html/web_tools/web_unit_test_tool_w.htm
+++ b/org.tizen.studio/html/web_tools/web_unit_test_tool_w.htm
@@ -5,22 +5,22 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Unit Testing Web Applications</title>  
+       <title>Unit Testing Web Applications</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Dependencies</p>
                <ul class="toc">
@@ -29,7 +29,7 @@
                <p class="toc-title">Content</p>
                <ul class="toc">
                        <li><a href="#create">Creating the Web Unit Test</a></li>
-                       <li><a href="#edit">Editing the Web Unit Test</a></li>  
+                       <li><a href="#edit">Editing the Web Unit Test</a></li>
                        <li><a href="#run">Running the Web Unit Test</a></li>
                </ul>
        </div></div>
@@ -41,7 +41,7 @@
 <p>If you are implementing a component in your application, you must test it to ensure that it does not behave in an unexpected way. Well-tested applications that perform as expected improve user satisfaction. Testing can also help you develop your applications faster and further, with less wasted effort.</p>
 
 <h2 id="create">Creating the Web Unit Test</h2>
- 
+
 <p>A unit of code is the smallest testable component of your project, such as a class or a method.</p>
 <p>You can create unit tests easily with the Web Unit Test wizard.</p>
 <p>To test your project:</p>
@@ -51,10 +51,10 @@
 <li>Select the methods to test from the method list on the right pane.</li>
 <li>Enter a name for the test file, and click <strong>Finish</strong>.</li>
 </ol>
-<p align="center"><strong>Figure: Creating a Web unit test</strong></p> 
-<p align="center"><img alt="Creating a Web unit test" src="../images/web_test_tool_test_stub.png"/></p> 
+<p align="center"><strong>Figure: Creating a Web unit test</strong></p>
+<p align="center"><img alt="Creating a Web unit test" src="../images/web_test_tool_test_stub.png"/></p>
 <p>The Web unit tests are generated in the <code>webUnitTest</code> folder.</p>
-<p align="center"><strong>Figure: Web unit test location</strong></p> 
+<p align="center"><strong>Figure: Web unit test location</strong></p>
 <p align="center"><img alt="Web unit test location" src="../images/web_test_tool_stub_location.png"/></p>
 
 <h2 id="edit">Editing the Web Unit Test</h2>
@@ -74,7 +74,7 @@ test(name, test2);
 <li>Edit the <code>test2</code> parameter using assertions.
 <p>An assertion is a Boolean expression that means pass or failure in the test. You can test a value generated by your code with the expected value using a number of assertions provided by the Web unit testing tool.</p></li>
 </ol>
- 
+
 <div class="note">
     <strong>Note</strong>
        For more information about assertions, see <a href="http://api.qunitjs.com/category/assert/" target="_blank">http://api.qunitjs.com/category/assert/</a>.
@@ -89,13 +89,13 @@ test(name, test2);
 </ol>
 <p>The <strong>Web Unit Test Result</strong> view shows the test results in a tree format. It shows the passed tests with a green icon and failed tests with a red icon. To only display the failed tests, you can use the <strong>Show failed only</strong> button (marked with a red rectangle in the following figure).</p>
 
-<p align="center"><strong>Figure: Web unit test application result</strong></p> 
-<p align="center"><img alt="Web unit test application result" src="../images/web_test_tool_result.png"/></p> 
+<p align="center"><strong>Figure: Web unit test application result</strong></p>
+<p align="center"><img alt="Web unit test application result" src="../images/web_test_tool_result.png"/></p>
 
 <p>To repeat the test, select its check box and click the <strong>Run checked</strong> button (marked with a red rectangle in the following figure).</p>
 
-<p align="center"><strong>Figure: Repeating a test</strong></p> 
-<p align="center"><img alt="Repeating a test" src="../images/web_test_tool_repeat.png"/></p> 
+<p align="center"><strong>Figure: Repeating a test</strong></p>
+<p align="center"><img alt="Repeating a test" src="../images/web_test_tool_repeat.png"/></p>
 
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
diff --git a/org.tizen.training/html/cover_page.htm b/org.tizen.training/html/cover_page.htm
index 5b6bcb6..e5d4382 100644 (file)
--- a/org.tizen.training/html/cover_page.htm
+++ b/org.tizen.training/html/cover_page.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <link rel="stylesheet" type="text/css" href="css/snippet.css" />
-       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/snippet.js"></script>
        <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
 
-       <title>Tizen Training</title>  
+       <title>Tizen Training</title>
 </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -19,7 +19,7 @@
        <div id="profile">
                <p><img alt="Mobile" src="images/mobile_s_wn.png"/> <img alt="Wearable" src="images/wearable_s_wn.png"/> <img alt="TV Web" src="images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -28,10 +28,10 @@
                        <li><a href="#doc">Tizen Documentation</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-       
+
 <h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
 <font size="11">Training</font></h1>
 
@@ -59,7 +59,7 @@
 <p>A program built using the Web API is laid out much like a standard Web site with an <code>index.html</code> file that serves as the root, and separate directories for resources, such as JavaScript, CSS, images, and sound resources. This approach makes Web application development in Tizen extremely intuitive for developers with a background in Web development, and makes it easy to quickly write simple applications using high-level languages.</p></li>
 </ul>
 <p>The following figure illustrates the Tizen architecture model supporting the 2 application types.</p>
-<p align="center"><strong>Figure: Tizen architecture</strong></p> 
+<p align="center"><strong>Figure: Tizen architecture</strong></p>
 <p align="center"><img src="images/what_is_tizen_architecture.png" alt="Tizen architecture" /></p>
 
 <p>The Tizen platform also allows you to develop a hybrid application package where native and Web applications are packaged together to make more powerful applications. The Tizen platform ensures that all Tizen applications have consistent look and feel, regardless of whether you use the native or Web framework to create them.</p>
@@ -72,9 +72,9 @@
 
 <p align="center"><strong>Figure: Applications using the mobile profile</strong></p>
 <p align="center"><img src="images/profile_mobile.png" alt="Applications using the mobile profile" /></p>
-  
+
 <p align="center"><strong>Figure: Applications using the wearable profile</strong></p>
-<p align="center"><img src="images/profile_wearable.png" alt="Applications using the wearable profile" /></p> 
+<p align="center"><img src="images/profile_wearable.png" alt="Applications using the wearable profile" /></p>
 
 
 <h2 id="doc" name="doc">Tizen Documentation</h2>
@@ -97,59 +97,59 @@
        <li><a href="../../org.tizen.studio/html/cover_page.htm">Tizen Studio</a>
        <p>The Tizen Studio introduces the Tizen development environment and related tools you can use when developing your Tizen application.</p>
        </li>
-</ul>  
-       
-
-<p>When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. &quot;N&quot; in the icon stands for the native application profiles and &quot;W&quot; for the Web application profiles.</p>
-
-<p align="center" class="Table"><strong>Table: Tizen profiles</strong></p> 
-<table border="1"> 
-  
-   <tbody> 
-    <tr> 
-     <th>Profile</th> 
-     <th>Icon</th> 
+</ul>
+
+
+<p>When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. "N" in the icon stands for the native application profiles and "W" for the Web application profiles.</p>
+
+<p align="center" class="Table"><strong>Table: Tizen profiles</strong></p>
+<table border="1">
+
+   <tbody>
+    <tr>
+     <th>Profile</th>
+     <th>Icon</th>
+    </tr>
+       <tr>
+     <td>Mobile native and Web</td>
+     <td><img alt="Mobile" src="images/mobile_s_wn.png"/></td>
+    </tr>
+       <tr>
+     <td>Wearable native and Web</td>
+     <td><img alt="Wearable" src="images/wearable_s_wn.png"/></td>
     </tr>
-       <tr> 
-     <td>Mobile native and Web</td> 
-     <td><img alt="Mobile" src="images/mobile_s_wn.png"/></td> 
+       <tr>
+     <td>Mobile native</td>
+     <td><img alt="Mobile Native" src="images/mobile_s_n.png"/> or <img alt="Optional mobile native" src="images/mobile_s_n_optional.png"/></td>
     </tr>
-       <tr> 
-     <td>Wearable native and Web</td> 
-     <td><img alt="Wearable" src="images/wearable_s_wn.png"/></td> 
-    </tr>      
-       <tr> 
-     <td>Mobile native</td> 
-     <td><img alt="Mobile Native" src="images/mobile_s_n.png"/> or <img alt="Optional mobile native" src="images/mobile_s_n_optional.png"/></td> 
+       <tr>
+     <td>Wearable native</td>
+     <td><img alt="Wearable Native" src="images/wearable_s_n.png"/> or <img alt="Optional wearable native" src="images/wearable_s_n_optional.png"/></td>
     </tr>
-       <tr> 
-     <td>Wearable native</td> 
-     <td><img alt="Wearable Native" src="images/wearable_s_n.png"/> or <img alt="Optional wearable native" src="images/wearable_s_n_optional.png"/></td> 
+       <tr>
+     <td>Mobile Web</td>
+     <td><img alt="Mobile Web" src="images/mobile_s_w.png"/> or <img alt="Optional mobile Web" src="images/mobile_s_w_optional.png"/></td>
     </tr>
-       <tr> 
-     <td>Mobile Web</td> 
-     <td><img alt="Mobile Web" src="images/mobile_s_w.png"/> or <img alt="Optional mobile Web" src="images/mobile_s_w_optional.png"/></td> 
+       <tr>
+     <td>Wearable Web</td>
+     <td><img alt="Wearable Web" src="images/wearable_s_w.png"/> or <img alt="Optional wearable Web" src="images/wearable_s_w_optional.png"/></td>
     </tr>
-       <tr> 
-     <td>Wearable Web</td> 
-     <td><img alt="Wearable Web" src="images/wearable_s_w.png"/> or <img alt="Optional wearable Web" src="images/wearable_s_w_optional.png"/></td> 
+       <tr>
+     <td>TV Web</td>
+     <td><img alt="TV Web" src="images/tv_s_w.png"/></td>
     </tr>
-       <tr> 
-     <td>TV Web</td> 
-     <td><img alt="TV Web" src="images/tv_s_w.png"/></td> 
-    </tr>      
-   </tbody> 
+   </tbody>
   </table>
-  
+
       <div class="note">
         <strong>Note</strong>
         In Tizen native APIs and Web Device mobile and wearable APIs, there are 2 types of APIs: mandatory and optional. The fully gray profile icon (as shown in the table above) refers to an optional API.
 <p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices.</p>
     </div>
-  
+
 
 <p>To become familiar with some terms that you encounter throughout this site, see <a href="https://developer.tizen.org/development/getting-started/glossary" target="_blank">Glossary</a>.</p>
-  
+
 <script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/index.htm b/org.tizen.training/html/index.htm
index 1620104..903363e 100644 (file)
--- a/org.tizen.training/html/index.htm
+++ b/org.tizen.training/html/index.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <link rel="stylesheet" type="text/css" href="css/snippet.css" />
-       <script type="text/javascript" src="scripts/snippet.js"></script>       
+       <script type="text/javascript" src="scripts/snippet.js"></script>
        <script type="text/javascript" src="scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="scripts/search.js" charset="utf-8"></script>
 
-       <title>Training</title>  
+       <title>Training</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
@@ -22,13 +22,13 @@
 <div id="container"><div id="contents"><div class="content">
 
 <h1><a href="cover_page.htm">Training</a></h1>
-       
+
        <h2><a href="native/cover_page_n.htm">Native Application</a></h2>
-       
+
        <ul>
                <li><a href="native/getting_started_n.htm">Getting Started</a>
                        <ul>
-                       
+
                                <li><a href="native/mobile/first_app_mn.htm">Creating Your First Tizen Mobile Native Application</a></li>
                                <li><a href="native/wearable/first_app_wn.htm">Creating Your First Tizen Wearable Native Application</a></li>
                                <li><a href="native/wearable_watch/first_app_watch_wn.htm">Creating Your First Tizen Wearable Native Watch Application</a></li>
@@ -47,7 +47,7 @@
                </li>
                <li><a href="native/app_model/application_model_n.htm">Tizen Application Model</a></li>
                <li><a href="native/feature/ui_builder_overview_mn.htm">Overview of Tizen UI Development</a></li>
-               <li><a href="native/feature/ui_builder_app_design_mn.htm">Designing Your Native Application</a></li>            
+               <li><a href="native/feature/ui_builder_app_design_mn.htm">Designing Your Native Application</a></li>
                <li><a href="native/details/details_n.htm">Understanding Tizen Programming</a>
                <ul>
                        <li><a href="native/details/tizen_apis_n.htm">Tizen APIs</a></li>
@@ -56,7 +56,7 @@
                        <li><a href="native/details/event_handling_n.htm">Event Handling</a></li>
                        <li><a href="native/details/error_handling_n.htm">Error Handling</a></li>
                        <li><a href="native/details/io_overview_n.htm">File System Directory Hierarchy</a></li>
-                       <li><a href="native/details/deprecation_policy_n.htm">API Versioning and Deprecation Policy of the Tizen Platform</a></li>                      
+                       <li><a href="native/details/deprecation_policy_n.htm">API Versioning and Deprecation Policy of the Tizen Platform</a></li>
                        <li><a href="native/details/sign_certificate_n.htm">Application Signing and Certificates</a></li>
                </ul>
                </li>
@@ -103,9 +103,9 @@
                </li>
                <li><a href="native/feature/best_practice_battery_n.htm">Best Practices for Location</a></li>
        </ul>
-       
+
        <h2><a href="web/cover_page_w.htm">Web Application</a></h2>
-       
+
        <ul>
                <li><a href="web/getting_started_w.htm">Getting Started</a>
                        <ul>
diff --git a/org.tizen.training/html/native/app_model/application_model_n.htm b/org.tizen.training/html/native/app_model/application_model_n.htm
index 5447516..07f621f 100644 (file)
--- a/org.tizen.training/html/native/app_model/application_model_n.htm
+++ b/org.tizen.training/html/native/app_model/application_model_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Tizen Native Application Model</title>  
+       <title>Tizen Native Application Model</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -35,10 +35,10 @@
                </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../details/details_n.htm">Understanding Tizen Programming</a></li>  
+                       <li><a href="../details/details_n.htm">Understanding Tizen Programming</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
  <h1>Tizen Native Application Model</h1>
@@ -48,18 +48,18 @@
 
 <p>The following figure shows the UI and service application life-cycle.</p>
 
-  <p align="center"><strong>Figure: UI and service application life-cycle</strong></p> 
-  <p align="center"><img src="../../images/multiple_apps.png" alt="UI and service application life-cycle" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p align="center"><strong>Figure: UI and service application life-cycle</strong></p>
+  <p align="center"><img src="../../images/multiple_apps.png" alt="UI and service application life-cycle" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
 
-<p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile and wearable devices. 
-These devices have constraints, such as relatively small screen sizes and lack of system resources compared to a larger system.</p> 
+<p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile and wearable devices.
+These devices have constraints, such as relatively small screen sizes and lack of system resources compared to a larger system.</p>
 <p>For example, for power management reasons, well-designed applications reduce resource usage when they detect that their display window is covered by another application window. State change events make the detection possible.</p>
 
-<h2 id="life" name="life">Native Application Life-cycle</h2>   
+<h2 id="life" name="life">Native Application Life-cycle</h2>
 
-<p>A Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. When the application is starting, the <code>app_create_cb()</code> function is executed and the main event loop starts. The application normally at the top window, with focus.</p> 
+<p>A Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. When the application is starting, the <code>app_create_cb()</code> function is executed and the main event loop starts. The application normally at the top window, with focus.</p>
 <p>When the application loses the focus status, the <code>app_pause_cb()</code> callback is invoked. The application can go into the pause state, which means that your application is not terminated but continues to run on the background, when:</p>
-       
+
   <ul>
     <li><p>A new application is launched based on a request from your application.</p></li>
     <li><p>The user requests to go to the home screen.</p></li>
@@ -67,12 +67,12 @@ These devices have constraints, such as relatively small screen sizes and lack o
     <li><p>An alarm is triggered for another application, which becomes the top-most window and hides your application.</p> </li>
   </ul>
 
-<p>Since Tizen 2.4, the application on the background goes into a suspended state. In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work on the background. In this case, the application can <a href="../../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#allow_bg">designate their background category as an allowed category</a> to avoid going into the suspended state.</p>  
-  
+<p>Since Tizen 2.4, the application on the background goes into a suspended state. In the suspended state, the application process is executed with limited CPU resources. In other words, the platform does not allow the running of the background applications, except for some exceptional applications (such as Media and Download) that necessarily work on the background. In this case, the application can <a href="../../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#allow_bg">designate their background category as an allowed category</a> to avoid going into the suspended state.</p>
+
 <p>When your application becomes visible again, the <code>app_resume_cb()</code> callback is invoked. The visibility returns, when:</p>
 
   <ul>
-    <li><p>Another application requests your application to run (for example, the Task Navigator, which shows all running applications and lets user select any application to run).</p></li> 
+    <li><p>Another application requests your application to run (for example, the Task Navigator, which shows all running applications and lets user select any application to run).</p></li>
     <li><p>All applications on top of your application in the window stack finish.</p></li>
     <li><p>An alarm is triggered for your application, bringing it to the front and hiding other applications.</p></li>
   </ul>
@@ -84,10 +84,10 @@ These devices have constraints, such as relatively small screen sizes and lack o
   </ul>
 
  <p>Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.</p>
-  
-<p>Application state changes are managed by the underlying framework. 
+
+<p>Application state changes are managed by the underlying framework.
        For more information about application state transitions, see <a href="../../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#state_trans">Application States and Transitions</a>.</p>
- 
+
 
 <h2 id="start" name="start">Starting the Tizen Native Application</h2>
 
@@ -113,9 +113,9 @@ These devices have constraints, such as relatively small screen sizes and lack o
 
 <p>The following figure shows how to use the package and application ID.</p>
 
-    <p align="center"><strong>Figure: Package ID and application ID</strong></p> 
-  <p align="center"><img src="../../images/package_id.png" alt="Package ID and application ID" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-  
+    <p align="center"><strong>Figure: Package ID and application ID</strong></p>
+  <p align="center"><img src="../../images/package_id.png" alt="Package ID and application ID" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+
 
   <h2 id="appdirectory" name="appdirectory">Application Directory Policy</h2>
 
@@ -124,10 +124,10 @@ These devices have constraints, such as relatively small screen sizes and lack o
 <li><code>bin</code>: Executable binary path</li>
 <li><code>lib</code>: Library path</li>
 <li><code>res</code>: Resource path</li>
-<li><code>data</code>: The application&#39;s own directory (read or write); no initial data</li>
+<li><code>data</code>: The application's own directory (read or write); no initial data</li>
 <li><code>shared/</code>: For sharing with other applications
 <p>Sandboxing refers to an application package which can access its own directories only. It is used to share resources in the <code>shared</code> directories.</p>
-<p>In sandboxing, <a href="#installer">SMACK</a> is used, and discretionary access control (DAC) is applied to application package directories and files. The 
+<p>In sandboxing, <a href="#installer">SMACK</a> is used, and discretionary access control (DAC) is applied to application package directories and files. The
 uid(root, app) is applied to directories and files.</p></li>
 </ul>
 
@@ -136,8 +136,8 @@ uid(root, app) is applied to directories and files.</p></li>
 <h3>Permissions</h3>
 <p>The installed packages have a user ID, a group ID, permissions, and a smack label.</p>
 
-  <p align="center"><strong>Figure: Permissions</strong></p> 
-  <p align="center"><img src="../../images/permissions.png" alt="Permissions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p align="center"><strong>Figure: Permissions</strong></p>
+  <p align="center"><img src="../../images/permissions.png" alt="Permissions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
 
 <p>The following table shows the details of files and directories.</p>
 
@@ -211,29 +211,29 @@ uid(root, app) is applied to directories and files.</p></li>
 
 <p><sup>1</sup> The {PackageId} is the package ID, such as <code>org.tizen.browser</code>.</p>
 <p><sup>2</sup> {Random} means that there is a 28-byte random string created by the smack module.</p>
-<p><sup>3</sup> {Cert Hash} refers to a 28-byte string where [Raw Hash] equals to Base64Encode (SHA1 author certificate in <code>author-signature.xml</code>) and {Cert Hash} replaces &quot;/&quot; with &quot;#&quot; in [Raw Hash].</p>
+<p><sup>3</sup> {Cert Hash} refers to a 28-byte string where [Raw Hash] equals to Base64Encode (SHA1 author certificate in <code>author-signature.xml</code>) and {Cert Hash} replaces "/" with "#" in [Raw Hash].</p>
 
 
 <h2  id="appmanifest" name="appmanifest">Application Manifest</h2>
 
 <p>The following example shows the beginning of the Tizen manifest schema:</p>
 <pre class="prettyprint">
-&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
-&lt;xs:schema xmlns:xs=&quot;http://www.w3.org/2001/XMLSchema&quot; elementFormDefault=&quot;qualified&quot; targetNamespace=&quot;http://tizen.org/ns/packages&quot; xmlns:packages=&quot;http://tizen.org/ns/packages&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;xs:import namespace=&quot;http://www.w3.org/XML/1998/namespace&quot; schemaLocation=&quot;xml.xsd&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;xs:element name=&quot;manifest&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;xs:complexType&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;xs:sequence&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;xs:choice maxOccurs=&quot;unbounded&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;xs:element ref=&quot;packages:label&quot;/&gt;
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" targetNamespace="http://tizen.org/ns/packages" xmlns:packages="http://tizen.org/ns/packages"&gt;
+   &lt;xs:import namespace="http://www.w3.org/XML/1998/namespace" schemaLocation="xml.xsd"/&gt;
+      &lt;xs:element name="manifest"&gt;
+         &lt;xs:complexType&gt;
+            &lt;xs:sequence&gt;
+               &lt;xs:choice maxOccurs="unbounded"&gt;
+                  &lt;xs:element ref="packages:label"/&gt;
 </pre>
 
 <p>The following example shows the syntax of the manifest reference. The <code>&lt;manifest&gt;</code> element serves as a container for the other configuration elements.</p>
 <pre class="prettyprint">
 &lt;manifest xmlns=http://tizen.org/ns/packages
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package=&quot;org.tizen.application&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;version=&quot;1.0.0&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;api-version=&quot;2.3&quot;&gt;</pre>
+          package="org.tizen.application"
+          version="1.0.0"
+          api-version="2.3"&gt;</pre>
 
 
 <h2 id="signature" name="signature">Signature</h2>
@@ -250,16 +250,16 @@ uid(root, app) is applied to directories and files.</p></li>
 <p>The following image describes the relationship between the signatures.</p>
 
 
-  <p align="center"><strong>Figure: Signature</strong></p> 
+  <p align="center"><strong>Figure: Signature</strong></p>
   <p align="center"><img src="../../images/signature.png" alt="Signature" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
 
-  
+
   <h2 id="installer" name="installer">Installer and SMACK</h2>
 
 <p>The following figure describes how the application installer works.</p>
 
-  <p align="center"><strong>Figure: Installer</strong></p> 
-  <p align="center"><img src="../../images/installer.png" alt="Installer" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
+  <p align="center"><strong>Figure: Installer</strong></p>
+  <p align="center"><img src="../../images/installer.png" alt="Installer" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
 
   <p>The installer applies smack according to the privileges that are specified in the <code>tizen-manifest.xml</code> file.</p>
 <p>An application can only access the resources that are allowed by the privileges. The privileges are used in Tizen Store to show the permissions and receive user consent.</p>
@@ -270,9 +270,9 @@ uid(root, app) is applied to directories and files.</p></li>
 
 <p>You can use shell commands to install, uninstall, update, and launch applications.</p>
 
-  <p align="center"><strong>Figure: Tizen Studio interactions</strong></p> 
-  <p align="center"><img src="../../images/ide_interactions.png" alt="Tizen Studio interactions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
- 
+  <p align="center"><strong>Figure: Tizen Studio interactions</strong></p>
+  <p align="center"><img src="../../images/ide_interactions.png" alt="Tizen Studio interactions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/cover_page_n.htm b/org.tizen.training/html/native/cover_page_n.htm
index 54fca9b..62babea 100644 (file)
--- a/org.tizen.training/html/native/cover_page_n.htm
+++ b/org.tizen.training/html/native/cover_page_n.htm
@@ -5,25 +5,25 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Introduction to Native Applications</title>  
+       <title>Introduction to Native Applications</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
 <h1>Introduction to Native Applications</h1>
 
 
@@ -44,7 +44,7 @@
 <p>Describes the basic characteristics and components of UI development with EFL.</p></li>
 
 <li><a href="feature/ui_builder_app_design_mn.htm">Designing Your Native Application</a>
-<p>Teaches you how to develop a native application using the native UI Builder tool.</p></li>  
+<p>Teaches you how to develop a native application using the native UI Builder tool.</p></li>
 
 <li><a href="details/details_n.htm">Understanding Tizen Programming</a>
 <p>Introduces the Tizen platform, its architecture, and some useful programming concepts you need to take into account when designing Tizen applications.</p>
@@ -56,7 +56,7 @@
 
 <li><a href="feature/app_contacts_n.htm">Creating Applications with Contacts</a>
 <p>Demonstrates how you can create applications that handle various people-related information, such as contacts, groups, accounts, and address books.</p></li>
-               
+
 <li><a href="feature/app_contentshare_n.htm">Creating Applications with Content Sharing</a>
 <p>Demonstrates how you can create applications with content sharing through application control features or simple NDEF message transfer.</p></li>
 
diff --git a/org.tizen.training/html/native/details/app_filtering_n.htm b/org.tizen.training/html/native/details/app_filtering_n.htm
index 84ed428..cebbcca 100644 (file)
--- a/org.tizen.training/html/native/details/app_filtering_n.htm
+++ b/org.tizen.training/html/native/details/app_filtering_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Application Filtering</title>  
+       <title>Application Filtering</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,35 +27,35 @@
                        <li><a href="#profile_n">Profile-based Filtering</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Application Filtering</h1>
-                               
+
 <p>The Tizen platform provides a wide range of features across a variety of hardware and software components. Among the features, there are some that can be selectively supported by the Tizen device manufacturer. For application stores to correctly select your application for installation on an appropriate device, the feature and profile information must be correctly declared in your application.</p>
-  
+
   <h2 id="filter_n" name="filter_n">Feature-based Filtering</h2>
   <p>Some features can be selectively supported by the Tizen device manufacturer. To prevent problems when the user is trying to run your application on a device that does not support all the features your application is using, do one of the following:</p>
 <ul>
 <li>When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround.
 <p>For example, if an application wants to use location information, it can check the device capability by using the <code>system_info_get_XXX()</code> function of the System Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">wearable</a> applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
 </li>
-<li>Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user&#39;s device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
+<li>Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user's device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
 <p>Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.</p></li>
 </ul>
- 
+
 <p>If the <code>tizen-manifest.xml</code> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
 
-  <p align="center"><strong>Figure: Feature-based filtering</strong></p> 
-  <p align="center"><img align="center" alt="Feature-based filtering" src="../../images/app_filtering_basic_flow.png" /></p> 
- 
-<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the &quot;AND&quot; operation. For example, if there are <code>http://tizen.org/feature/network.nfc</code> and <code>http://tizen.org/feature/network.bluetooth</code> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
+  <p align="center"><strong>Figure: Feature-based filtering</strong></p>
+  <p align="center"><img align="center" alt="Feature-based filtering" src="../../images/app_filtering_basic_flow.png" /></p>
+
+<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the "AND" operation. For example, if there are <code>http://tizen.org/feature/network.nfc</code> and <code>http://tizen.org/feature/network.bluetooth</code> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
 
 <h3 id="screen_size" name="screen_size">Screen Size Feature</h3>
-<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the &quot;OR&quot; operation. For example, if the <code>http://tizen.org/feature/screen.size.normal.480.800</code> and <code>http://tizen.org/feature/screen.size.normal.720.1280</code> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
+<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the "OR" operation. For example, if the <code>http://tizen.org/feature/screen.size.normal.480.800</code> and <code>http://tizen.org/feature/screen.size.normal.720.1280</code> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
  <p>If you do not specify a proper screen size in the <code>tizen-manifest.xml</code> file, your application can be rejected from the Tizen store.</p>
  <p>The following table lists the available screen size features. </p>
- 
+
  <p align="center" class="Table"><strong>Table: Available screen size features</strong></p>
  <table>
        <tbody>
@@ -72,19 +72,19 @@
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td> 
+                       <td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td>
                        <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
                        <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.2.1</td>
-               </tr>   
+               </tr>
                <tr>
                        <td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td>
                        <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
                        <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.3</td>
-               </tr>           
+               </tr>
                <tr>
                        <td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td>
                        <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
@@ -102,7 +102,7 @@
                        <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
                        <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.3</td>
-               </tr>           
+               </tr>
                <tr>
                        <td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td>
                        <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
@@ -142,8 +142,8 @@
        </tbody>
  </table>
 
-  
-<h3 id="hierarchy" name="hierarchy">Feature Hierarchy</h3>  
+
+<h3 id="hierarchy" name="hierarchy">Feature Hierarchy</h3>
 
 <p>The feature keys have a hierarchy. For example, consider the <code>http://tizen.org/feature/location</code>, <code>http://tizen.org/feature/location.gps</code>, and <code>http://tizen.org/feature/location.wps</code> features:</p>
 <ul>
@@ -151,88 +151,88 @@
 <li>If the feature list includes the <code>http://tizen.org/feature/location</code> feature, a device which has the <code>http://tizen.org/feature/location.gps</code>, <code>http://tizen.org/feature/location.wps</code>, or <code>http://tizen.org/feature/location</code> feature can show the application on the Tizen Store application list.
 <p>This means that the Tizen Store considers the <code>http://tizen.org/feature/location</code> feature as the <code>http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</code> feature. (If the feature list includes the <code>http://tizen.org/feature/location.gps</code> and <code>http://tizen.org/feature/location.wps</code> features together, only a device which supports both those features can show the application.)</p></li></ul>
 
-<h3 id="adding" name="adding">Adding the Feature List</h3> 
- 
-<p>To enable filtering for your native application, add the feature list for the application <code>tizen-manifest.xml</code> file:</p> 
+<h3 id="adding" name="adding">Adding the Feature List</h3>
+
+<p>To enable filtering for your native application, add the feature list for the application <code>tizen-manifest.xml</code> file:</p>
   <ol>
   <li>To open the manifest editor in the Tizen Studio, double-click the <code>tizen-manifest.xml</code> file in the <strong>Project Explorer</strong> view. </li>
 <li>In the <strong>Features</strong> tab, click <strong>Add</strong> and set the mandatory features for the application package. <p>The manifest file (<code>tizen-manifest.xml</code>) is updated automatically.</p>
-</li> 
-   <li>Upload and publish the application package on the Tizen Store.</li> 
-   <li>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user&#39;s device.</li> 
+</li>
+   <li>Upload and publish the application package on the Tizen Store.</li>
+   <li>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user's device.</li>
   </ol>
-<p>The following tables show the available requirements for an application package. If you want to check which features are necessary for using a specific API, see the related feature in the native <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p> 
+<p>The following tables show the available requirements for an application package. If you want to check which features are necessary for using a specific API, see the related feature in the native <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p>
   <p align="center" class="Table"><strong>Table: Available mobile native requirements</strong></p>
   <table border="1">
    <tbody>
 <tr>
-<th>Feature key</th> 
-     <th>Description</th> 
+<th>Feature key</th>
+     <th>Description</th>
         <th>Since</th>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera</code></td> 
-     <td>Specify this key, if the application requires any kind of a camera.</td> 
+<td><code>http://tizen.org/feature/camera</code></td>
+     <td>Specify this key, if the application requires any kind of a camera.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera.back</code></td> 
-     <td>Specify this key, if the application requires a back-facing camera.</td> 
+<td><code>http://tizen.org/feature/camera.back</code></td>
+     <td>Specify this key, if the application requires a back-facing camera.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera.back.flash</code></td> 
-     <td>Specify this key, if the application requires a back-facing camera with a flash.</td> 
+<td><code>http://tizen.org/feature/camera.back.flash</code></td>
+     <td>Specify this key, if the application requires a back-facing camera with a flash.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera.front</code></td> 
-     <td>Specify this key, if the application requires a front-facing camera.</td> 
+<td><code>http://tizen.org/feature/camera.front</code></td>
+     <td>Specify this key, if the application requires a front-facing camera.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera.front.flash</code></td> 
-     <td>Specify this key, if the application requires a front-facing camera with a flash.</td> 
+<td><code>http://tizen.org/feature/camera.front.flash</code></td>
+     <td>Specify this key, if the application requires a front-facing camera with a flash.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/consumer_ir</code></td> 
-     <td>Specify this key, if the application requires the Consumer Infrared (CIR) feature.</td> 
+<td><code>http://tizen.org/feature/consumer_ir</code></td>
+     <td>Specify this key, if the application requires the Consumer Infrared (CIR) feature.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/convergence.d2d</code></td> 
-     <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td> 
+<td><code>http://tizen.org/feature/convergence.d2d</code></td>
+     <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/database.encryption</code></td> 
-     <td>Specify this key, if the application requires the database encryption feature.</td> 
+<td><code>http://tizen.org/feature/database.encryption</code></td>
+     <td>Specify this key, if the application requires the database encryption feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/fido.uaf</code></td> 
-     <td>Specify this key, if the application requires the FIDO (Fast Identity Online) UAF (Universal Authentication Framework) client API.</td> 
+<td><code>http://tizen.org/feature/fido.uaf</code></td>
+     <td>Specify this key, if the application requires the FIDO (Fast Identity Online) UAF (Universal Authentication Framework) client API.</td>
         <td>3.0</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/fmradio</code></td> 
-     <td>Specify this key, if the application requires an FM radio.</td> 
+<td><code>http://tizen.org/feature/fmradio</code></td>
+     <td>Specify this key, if the application requires an FM radio.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/graphics.acceleration</code></td> 
-     <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td> 
+<td><code>http://tizen.org/feature/graphics.acceleration</code></td>
+     <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/input.keyboard</code></td> 
-     <td>Specify this key, if the application requires a built-in physical keyboard.</td> 
+<td><code>http://tizen.org/feature/input.keyboard</code></td>
+     <td>Specify this key, if the application requires a built-in physical keyboard.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/input.keyboard.layout</code></td> 
-     <td>Specify this key with a specific keyboard layout (<code>string</code> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td> 
+<td><code>http://tizen.org/feature/input.keyboard.layout</code></td>
+     <td>Specify this key with a specific keyboard layout (<code>string</code> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td>
         <td>2.2.1</td>
     </tr>
  <tr>
@@ -241,103 +241,103 @@
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/led</code></td> 
-     <td>Specify this key, if the application requires a LED.</td> 
+<td><code>http://tizen.org/feature/led</code></td>
+     <td>Specify this key, if the application requires a LED.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/location</code></td> 
-     <td>Specify this key, if the application requires any location positioning features.</td> 
+<td><code>http://tizen.org/feature/location</code></td>
+     <td>Specify this key, if the application requires any location positioning features.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/location.batch</code></td> 
+<td><code>http://tizen.org/feature/location.batch</code></td>
      <td>Specify this key, if the application requires the location tracking with a position batch information feature.</td>
-       <td>2.3</td>     
+       <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/location.geofence</code></td> 
-     <td>Specify this key, if the application requires the geofence feature.</td> 
+<td><code>http://tizen.org/feature/location.geofence</code></td>
+     <td>Specify this key, if the application requires the geofence feature.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/location.gps</code></td> 
-     <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td> 
+<td><code>http://tizen.org/feature/location.gps</code></td>
+     <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/location.wps</code></td> 
-     <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td> 
+<td><code>http://tizen.org/feature/location.wps</code></td>
+     <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/maps</code></td> 
-     <td>Specify this key, if the application requires the map service feature.</td> 
+<td><code>http://tizen.org/feature/maps</code></td>
+     <td>Specify this key, if the application requires the map service feature.</td>
         <td>2.3.2</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/microphone</code></td> 
-     <td>Specify this key, if the application requires a microphone.</td> 
+<td><code>http://tizen.org/feature/microphone</code></td>
+     <td>Specify this key, if the application requires a microphone.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/multimedia.transcoder</code></td> 
-     <td>Specify this key, if the application requires the multimedia transcoder feature.</td> 
+<td><code>http://tizen.org/feature/multimedia.transcoder</code></td>
+     <td>Specify this key, if the application requires the multimedia transcoder feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/multi_point_touch.pinch_zoom</code></td> 
-     <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td> 
+<td><code>http://tizen.org/feature/multi_point_touch.pinch_zoom</code></td>
+     <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td>
         <td>2.2.1</td>
     </tr>
        <tr>
-<td><code>http://tizen.org/feature/multi_point_touch.point_count</code></td> 
-     <td>Specify this key with a specific number (<code>int</code> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td> 
+<td><code>http://tizen.org/feature/multi_point_touch.point_count</code></td>
+     <td>Specify this key with a specific number (<code>int</code> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth feature.</td> 
+<td><code>http://tizen.org/feature/network.bluetooth</code></td>
+     <td>Specify this key, if the application requires the Bluetooth feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.audio.call</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.call</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.audio.controller</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Advanced Audio Distribution (A2DP) sink feature and the Bluetooth Audio Video Remote Control (AVRCP) controller feature.</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.controller</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Advanced Audio Distribution (A2DP) sink feature and the Bluetooth Audio Video Remote Control (AVRCP) controller feature.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.audio.media</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.media</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.health</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.health</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.hid</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.hid</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.le</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth LE feature.</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.le</code></td>
+     <td>Specify this key, if the application requires the Bluetooth LE feature.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.opp</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.opp</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.ethernet</code></td> 
-     <td>Specify this key, if the application requires the ethernet connection.</td> 
+<td><code>http://tizen.org/feature/network.ethernet</code></td>
+     <td>Specify this key, if the application requires the ethernet connection.</td>
         <td>2.4</td>
     </tr>
 <tr>
@@ -351,84 +351,84 @@
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc</code></td> 
-     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td> 
+<td><code>http://tizen.org/feature/network.nfc</code></td>
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc.card_emulation</code></td> 
-     <td>Specify this key, if the application requires the NFC card emulation feature.</td> 
+<td><code>http://tizen.org/feature/network.nfc.card_emulation</code></td>
+     <td>Specify this key, if the application requires the NFC card emulation feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
 <td><code>http://tizen.org/feature/network.nfc.card_emulation.hce</code></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
         <td>2.3.1</td>
-    </tr>              
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc.p2p</code></td> 
-     <td>Specify this key, if the application requires the NFC p2p feature.</td> 
+<td><code>http://tizen.org/feature/network.nfc.p2p</code></td>
+     <td>Specify this key, if the application requires the NFC p2p feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc.reserved_push</code></td> 
-     <td>Specify this key, if the application requires the NFC reserved push feature.</td><td>2.2.1</td>        
-    </tr>      
+<td><code>http://tizen.org/feature/network.nfc.reserved_push</code></td>
+     <td>Specify this key, if the application requires the NFC reserved push feature.</td><td>2.2.1</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc.tag</code></td> 
-     <td>Specify this key, if the application requires the NFC tag feature.</td> 
+<td><code>http://tizen.org/feature/network.nfc.tag</code></td>
+     <td>Specify this key, if the application requires the NFC tag feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.push</code></td> 
+<td><code>http://tizen.org/feature/network.push</code></td>
      <td>Specify this key, if the application requires the network-based push service.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.secure_element</code></td> 
-     <td>Specify this key, if the application requires the secure element feature.</td> 
+<td><code>http://tizen.org/feature/network.secure_element</code></td>
+     <td>Specify this key, if the application requires the secure element feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.secure_element.ese</code></td> 
-     <td>Specify this key, if the application requires the ESE secure element feature.</td> 
+<td><code>http://tizen.org/feature/network.secure_element.ese</code></td>
+     <td>Specify this key, if the application requires the ESE secure element feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.secure_element.uicc</code></td> 
-     <td>Specify this key, if the application requires the UICC secure element feature.</td> 
+<td><code>http://tizen.org/feature/network.secure_element.uicc</code></td>
+     <td>Specify this key, if the application requires the UICC secure element feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.service_discovery.dnssd</code></td> 
-     <td>Specify this key, if the application requires the DNS-based Service Discovery Feature (DNSSD).</td> 
+<td><code>http://tizen.org/feature/network.service_discovery.dnssd</code></td>
+     <td>Specify this key, if the application requires the DNS-based Service Discovery Feature (DNSSD).</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.service_discovery.ssdp</code></td> 
-     <td>Specify this key, if the application requires the Simple Service Discovery Protocol feature (SSDP).</td> 
+<td><code>http://tizen.org/feature/network.service_discovery.ssdp</code></td>
+     <td>Specify this key, if the application requires the Simple Service Discovery Protocol feature (SSDP).</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony</code></td> 
-     <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony</code></td>
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony.mms</code></td> 
-     <td>Specify this key, if the application requires the MMS feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony.mms</code></td>
+     <td>Specify this key, if the application requires the MMS feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony.sms</code></td> 
-     <td>Specify this key, if the application requires the SMS feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony.sms</code></td>
+     <td>Specify this key, if the application requires the SMS feature.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony.sms.cbs</code></td> 
-     <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony.sms.cbs</code></td>
+     <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td>
         <td>2.2.1</td>
-    </tr>      
+    </tr>
 <tr>
 <td><code>http://tizen.org/feature/network.tethering</code></td>
      <td>Specify this key, if the application requires any kind of tethering feature.</td>
@@ -450,77 +450,77 @@
         <td>2.3</td>
 </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.vpn</code></td> 
-     <td>Specify this key, if the application requires the Virtual Private Network feature (VPN).</td> 
+<td><code>http://tizen.org/feature/network.vpn</code></td>
+     <td>Specify this key, if the application requires the Virtual Private Network feature (VPN).</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.wifi</code></td> 
-     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td> 
+<td><code>http://tizen.org/feature/network.wifi</code></td>
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.wifi.direct</code></td> 
-     <td>Specify this key, if the application requires the Wi-Fi Direct&trade; feature.</td> 
+<td><code>http://tizen.org/feature/network.wifi.direct</code></td>
+     <td>Specify this key, if the application requires the Wi-Fi Direct&trade; feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.wifi.direct.display</code></td> 
-     <td>Specify this key, if the application requires the Wi-Fi Direct&trade; display feature.</td> 
+<td><code>http://tizen.org/feature/network.wifi.direct.display</code></td>
+     <td>Specify this key, if the application requires the Wi-Fi Direct&trade; display feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.wifi.direct.service_discovery</code></td> 
-     <td>Specify this key, if the application requires the Wi-Fi Direct&trade; service discovery feature.</td> 
+<td><code>http://tizen.org/feature/network.wifi.direct.service_discovery</code></td>
+     <td>Specify this key, if the application requires the Wi-Fi Direct&trade; service discovery feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.wifi.tdls</code></td> 
-     <td>Specify this key, if the application requires the Wi-Fi Tunneled Direct Link Setup (TDLS).</td> 
+<td><code>http://tizen.org/feature/network.wifi.tdls</code></td>
+     <td>Specify this key, if the application requires the Wi-Fi Tunneled Direct Link Setup (TDLS).</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.3dc</code></td> 
-     <td>Specify this key, if the application requires the 3DC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.3dc</code></td>
+     <td>Specify this key, if the application requires the 3DC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.atc</code></td> 
-     <td>Specify this key, if the application requires the ATC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.atc</code></td>
+     <td>Specify this key, if the application requires the ATC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.etc</code></td> 
-     <td>Specify this key, if the application requires the ETC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.etc</code></td>
+     <td>Specify this key, if the application requires the ETC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.ptc</code></td> 
-     <td>Specify this key, if the application requires the PTC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.ptc</code></td>
+     <td>Specify this key, if the application requires the PTC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.pvrtc</code></td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.pvrtc</code></td>
      <td>Specify this key, if the application requires the PVRTC texture format for OpenGL&reg; ES.</td>
-       <td>2.2.1</td>   
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.utc</code></td> 
-     <td>Specify this key, if the application requires the UTC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.utc</code></td>
+     <td>Specify this key, if the application requires the UTC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.version.1_1</code></td> 
+<td><code>http://tizen.org/feature/opengles.version.1_1</code></td>
      <td>Specify this key, if the application requires OpenGL&reg; ES version 1.1 at minimum.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
-       </td> 
+       </td>
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.version.2_0</code></td> 
+<td><code>http://tizen.org/feature/opengles.version.2_0</code></td>
      <td>Specify this key, if the application requires OpenGL&reg; ES version 2.0.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
-       </td> 
+       </td>
        <td>2.2.1</td>
     </tr>
 <tr>
@@ -531,68 +531,68 @@
        <td>2.4</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.cpu.arch.armv7</code></td> 
-     <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.cpu.arch.armv7</code></td>
+     <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.cpu.arch.x86</code></td> 
-     <td>Specify this key, if the application requires the x86 CPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.cpu.arch.x86</code></td>
+     <td>Specify this key, if the application requires the x86 CPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse2</code></td> 
-     <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse2</code></td>
+     <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse3</code></td> 
-     <td>Specify this key, if the application requires the SSE3 FPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse3</code></td>
+     <td>Specify this key, if the application requires the SSE3 FPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.fpu.arch.ssse3</code></td> 
-     <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.ssse3</code></td>
+     <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv3</code></td> 
-     <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv3</code></td>
+     <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.native.osp_compatible</code></td> 
-     <td>Specify this key, if the application requires OSP compatibility (the bada compatibility mode).</td> 
+<td><code>http://tizen.org/feature/platform.native.osp_compatible</code></td>
+     <td>Specify this key, if the application requires OSP compatibility (the bada compatibility mode).</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.auto_rotation</code></td> 
-     <td>Specify this key, if the application requires the automatic screen rotation feature.</td> 
+<td><code>http://tizen.org/feature/screen.auto_rotation</code></td>
+     <td>Specify this key, if the application requires the automatic screen rotation feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.all</code></td> 
-     <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.all</code></td>
+     <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td>
         <td>2.2.1</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal</code></td> 
-     <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal</code></td>
+     <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td> 
-     <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td>
+     <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td> 
-     <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td>
+     <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td> 
-     <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td>
+     <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
         <tr>
@@ -601,168 +601,168 @@
         <td>2.3.2</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td> 
-     <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td>
+     <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td> 
-     <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td>
+     <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td> 
-     <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td>
+     <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td> 
-     <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td>
+     <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td> 
-     <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td>
+     <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td> 
-     <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td>
+     <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.accelerometer</code></td> 
-     <td>Specify this key, if the application requires an acceleration sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.accelerometer</code></td>
+     <td>Specify this key, if the application requires an acceleration sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.accelerometer.wakeup</code></td> 
-     <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.accelerometer.wakeup</code></td>
+     <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.activity_recognition</code></td> 
+<td><code>http://tizen.org/feature/sensor.activity_recognition</code></td>
      <td>Specify this key, if the application requires an activity recognition sensor.</td>
-       <td>2.3</td>     
-    </tr>      
+       <td>2.3</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.barometer</code></td> 
+<td><code>http://tizen.org/feature/sensor.barometer</code></td>
      <td>Specify this key, if the application requires a barometer sensor.</td>
-       <td>2.2.1</td>   
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.barometer.wakeup</code></td> 
-     <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.barometer.wakeup</code></td>
+     <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.geomagnetic_rotation_vector</code></td> 
-     <td>Specify this key, if the application requires a geomagnetic-based rotation vector sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.geomagnetic_rotation_vector</code></td>
+     <td>Specify this key, if the application requires a geomagnetic-based rotation vector sensor.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gesture_recognition</code></td> 
+<td><code>http://tizen.org/feature/sensor.gesture_recognition</code></td>
      <td>Specify this key, if the application requires a gesture recognition sensor.</td>
-       <td>2.3</td>     
-    </tr>      
+       <td>2.3</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gravity</code></td> 
-     <td>Specify this key, if the application requires a gravity sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.gravity</code></td>
+     <td>Specify this key, if the application requires a gravity sensor.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gyroscope</code></td> 
-     <td>Specify this key, if the application requires a gyro sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope</code></td>
+     <td>Specify this key, if the application requires a gyro sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td> 
-     <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td>
+     <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td>
         <td>2.4</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gyroscope.uncalibrated</code></td> 
-     <td>Specify this key, if the application requires an uncalibrated gyroscope sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope.uncalibrated</code></td>
+     <td>Specify this key, if the application requires an uncalibrated gyroscope sensor.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gyroscope.wakeup</code></td> 
-     <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope.wakeup</code></td>
+     <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td> 
-     <td>Specify this key, if the application requires a heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td>
+     <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td> 
-     <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td>
+     <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td> 
-     <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td>
+     <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td>
         <td>2.3.1</td>
     </tr>
        <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td> 
-     <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td>
+     <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.humidity</code></td> 
-     <td>Specify this key, if the application requires a humidity sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.humidity</code></td>
+     <td>Specify this key, if the application requires a humidity sensor.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.linear_acceleration</code></td> 
+<td><code>http://tizen.org/feature/sensor.linear_acceleration</code></td>
      <td>Specify this key, if the application requires a linear acceleration sensor.</td>
-       <td>2.3</td>     
-    </tr>      
+       <td>2.3</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.magnetometer</code></td> 
-     <td>Specify this key, if the application requires a magnetic sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer</code></td>
+     <td>Specify this key, if the application requires a magnetic sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.magnetometer.uncalibrated</code></td> 
-     <td>Specify this key, if the application requires an uncalibrated geomagnetic sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer.uncalibrated</code></td>
+     <td>Specify this key, if the application requires an uncalibrated geomagnetic sensor.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.magnetometer.wakeup</code></td> 
-     <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer.wakeup</code></td>
+     <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.pedometer</code></td> 
-     <td>Specify this key, if the application requires a pedometer sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.pedometer</code></td>
+     <td>Specify this key, if the application requires a pedometer sensor.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.photometer</code></td> 
+<td><code>http://tizen.org/feature/sensor.photometer</code></td>
      <td>Specify this key, if the application requires a photometer sensor.</td>
-       <td>2.2.1</td>   
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.photometer.wakeup</code></td> 
-     <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.photometer.wakeup</code></td>
+     <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.proximity</code></td> 
-     <td>Specify this key, if the application requires a proximity sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.proximity</code></td>
+     <td>Specify this key, if the application requires a proximity sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.proximity.wakeup</code></td> 
-     <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.proximity.wakeup</code></td>
+     <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.rotation_vector</code></td> 
-     <td>Specify this key, if the application requires a rotation vector sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.rotation_vector</code></td>
+     <td>Specify this key, if the application requires a rotation vector sensor.</td>
         <td>2.3</td>
     </tr>
 <tr>
@@ -776,93 +776,93 @@
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.temperature</code></td> 
+<td><code>http://tizen.org/feature/sensor.temperature</code></td>
      <td>Specify this key, if the application requires a temperature sensor.</td>
-       <td>2.3</td>     
-    </tr>      
+       <td>2.3</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.tiltmeter</code></td> 
+<td><code>http://tizen.org/feature/sensor.tiltmeter</code></td>
      <td>Specify this key, if the application requires a tilt sensor.</td>
-       <td>2.2.1</td>   
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.tiltmeter.wakeup</code></td> 
-     <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.tiltmeter.wakeup</code></td>
+     <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.ultraviolet</code></td> 
-     <td>Specify this key, if the application requires a ultraviolet sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.ultraviolet</code></td>
+     <td>Specify this key, if the application requires a ultraviolet sensor.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.wrist_up</code></td> 
+<td><code>http://tizen.org/feature/sensor.wrist_up</code></td>
      <td>Specify this key, if the application requires a wrist up sensor.</td>
-        <td>2.3</td> 
+        <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/shell.appwidget</code></td> 
-     <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td> 
+<td><code>http://tizen.org/feature/shell.appwidget</code></td>
+     <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sip.voip</code></td> 
-     <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td> 
+<td><code>http://tizen.org/feature/sip.voip</code></td>
+     <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/speech.control</code></td> 
+<td><code>http://tizen.org/feature/speech.control</code></td>
      <td>Specify this key, if the application requires the voice control feature.</td>
-       <td>2.4</td>     
+       <td>2.4</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/speech.recognition</code></td> 
-     <td>Specify this key, if the application requires the speech recognition (STT) feature.</td> 
+<td><code>http://tizen.org/feature/speech.recognition</code></td>
+     <td>Specify this key, if the application requires the speech recognition (STT) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/speech.synthesis</code></td> 
-     <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td> 
+<td><code>http://tizen.org/feature/speech.synthesis</code></td>
+     <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/usb.accessory</code></td> 
-     <td>Specify this key, if the application requires the USB client (or accessory) feature.</td> 
+<td><code>http://tizen.org/feature/usb.accessory</code></td>
+     <td>Specify this key, if the application requires the USB client (or accessory) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/usb.host</code></td> 
-     <td>Specify this key, if the application requires the USB host feature.</td> 
+<td><code>http://tizen.org/feature/usb.host</code></td>
+     <td>Specify this key, if the application requires the USB host feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.barcode_detection</code></td> 
-     <td>Specify this key, if the application requires the barcode detection feature.</td> 
+<td><code>http://tizen.org/feature/vision.barcode_detection</code></td>
+     <td>Specify this key, if the application requires the barcode detection feature.</td>
         <td>2.4</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.barcode_generation</code></td> 
-     <td>Specify this key, if the application requires the barcode generation feature.</td> 
+<td><code>http://tizen.org/feature/vision.barcode_generation</code></td>
+     <td>Specify this key, if the application requires the barcode generation feature.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.face_recognition</code></td> 
+<td><code>http://tizen.org/feature/vision.face_recognition</code></td>
      <td>Specify this key, if the application requires the face recognition feature.</td>
-       <td>2.2.1</td>   
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.image_recognition</code></td> 
+<td><code>http://tizen.org/feature/vision.image_recognition</code></td>
      <td>Specify this key, if the application requires the image recognition feature.</td>
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.qrcode_generation</code></td> 
-     <td>Specify this key, if the application requires the QR code generation feature.</td> 
+<td><code>http://tizen.org/feature/vision.qrcode_generation</code></td>
+     <td>Specify this key, if the application requires the QR code generation feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.qrcode_recognition</code></td> 
-     <td>Specify this key, if the application requires the QR code recognition feature.</td> 
+<td><code>http://tizen.org/feature/vision.qrcode_recognition</code></td>
+     <td>Specify this key, if the application requires the QR code recognition feature.</td>
         <td>2.2.1</td>
     </tr>
 </tbody>
@@ -872,188 +872,188 @@
 <table border="1">
    <tbody>
 <tr>
-<th>Feature key</th> 
-     <th>Description</th> 
+<th>Feature key</th>
+     <th>Description</th>
         <th>Since</th>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera</code></td> 
-     <td>Specify this key, if the application requires any kind of a camera.</td> 
+<td><code>http://tizen.org/feature/camera</code></td>
+     <td>Specify this key, if the application requires any kind of a camera.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera.back</code></td> 
-     <td>Specify this key, if the application requires a back-facing camera.</td> 
+<td><code>http://tizen.org/feature/camera.back</code></td>
+     <td>Specify this key, if the application requires a back-facing camera.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera.back.flash</code></td> 
+<td><code>http://tizen.org/feature/camera.back.flash</code></td>
      <td>Specify this key, if the application requires a back-facing camera with a flash.</td>
-       <td>2.2.1</td>   
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera.front</code></td> 
-     <td>Specify this key, if the application requires a front-facing camera.</td> 
+<td><code>http://tizen.org/feature/camera.front</code></td>
+     <td>Specify this key, if the application requires a front-facing camera.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/camera.front.flash</code></td> 
-     <td>Specify this key, if the application requires a front-facing camera with a flash.</td> 
+<td><code>http://tizen.org/feature/camera.front.flash</code></td>
+     <td>Specify this key, if the application requires a front-facing camera with a flash.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/consumer_ir</code></td> 
-     <td>Specify this key, if the application requires the Consumer Infrared (CIR) feature.</td> 
+<td><code>http://tizen.org/feature/consumer_ir</code></td>
+     <td>Specify this key, if the application requires the Consumer Infrared (CIR) feature.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/convergence.d2d</code></td> 
-     <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td> 
+<td><code>http://tizen.org/feature/convergence.d2d</code></td>
+     <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/database.encryption</code></td> 
-     <td>Specify this key, if the application requires the database encryption feature.</td> 
+<td><code>http://tizen.org/feature/database.encryption</code></td>
+     <td>Specify this key, if the application requires the database encryption feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/fido.uaf</code></td> 
-     <td>Specify this key, if the application requires the FIDO (Fast Identity Online) UAF (Universal Authentication Framework) client API.</td> 
+<td><code>http://tizen.org/feature/fido.uaf</code></td>
+     <td>Specify this key, if the application requires the FIDO (Fast Identity Online) UAF (Universal Authentication Framework) client API.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/fmradio</code></td> 
-     <td>Specify this key, if the application requires an FM radio.</td> 
+<td><code>http://tizen.org/feature/fmradio</code></td>
+     <td>Specify this key, if the application requires an FM radio.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/graphics.acceleration</code></td> 
-     <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td> 
+<td><code>http://tizen.org/feature/graphics.acceleration</code></td>
+     <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/input.keyboard</code></td> 
-     <td>Specify this key, if the application requires a built-in physical keyboard.</td> 
+<td><code>http://tizen.org/feature/input.keyboard</code></td>
+     <td>Specify this key, if the application requires a built-in physical keyboard.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/input.keyboard.layout</code></td> 
-     <td>Specify this key with a specific keyboard layout (<code>string</code> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td> 
+<td><code>http://tizen.org/feature/input.keyboard.layout</code></td>
+     <td>Specify this key with a specific keyboard layout (<code>string</code> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
 <td><code>http://tizen.org/feature/input.rotating_bezel</code></td>
      <td>Specify this key, if the application requires rotating bezel input.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
  <tr>
 <td><code>http://tizen.org/feature/iot.ocf</code></td>
      <td>Specify this key, if the application requires the Open Connectivity Foundation (OCF) framework.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/led</code></td> 
-     <td>Specify this key, if the application requires a LED.</td> 
+<td><code>http://tizen.org/feature/led</code></td>
+     <td>Specify this key, if the application requires a LED.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/location</code></td> 
-     <td>Specify this key, if the application requires any location positioning features.</td> 
+<td><code>http://tizen.org/feature/location</code></td>
+     <td>Specify this key, if the application requires any location positioning features.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/location.batch</code></td> 
+<td><code>http://tizen.org/feature/location.batch</code></td>
      <td>Specify this key, if the application requires the location tracking with a position batch information feature.</td>
-       <td>2.3</td>     
+       <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/location.gps</code></td> 
+<td><code>http://tizen.org/feature/location.gps</code></td>
      <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td>
-       <td>2.2.1</td>   
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/location.wps</code></td> 
-     <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td> 
+<td><code>http://tizen.org/feature/location.wps</code></td>
+     <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/maps</code></td> 
-     <td>Specify this key, if the application requires the map service feature.</td> 
+<td><code>http://tizen.org/feature/maps</code></td>
+     <td>Specify this key, if the application requires the map service feature.</td>
         <td>2.3.2</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/microphone</code></td> 
-     <td>Specify this key, if the application requires a microphone.</td> 
+<td><code>http://tizen.org/feature/microphone</code></td>
+     <td>Specify this key, if the application requires a microphone.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/multimedia.transcoder</code></td> 
-     <td>Specify this key, if the application requires the multimedia transcoder feature.</td> 
+<td><code>http://tizen.org/feature/multimedia.transcoder</code></td>
+     <td>Specify this key, if the application requires the multimedia transcoder feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/multi_point_touch.pinch_zoom</code></td> 
-     <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td> 
+<td><code>http://tizen.org/feature/multi_point_touch.pinch_zoom</code></td>
+     <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td>
         <td>2.2.1</td>
     </tr>
        <tr>
-<td><code>http://tizen.org/feature/multi_point_touch.point_count</code></td> 
-     <td>Specify this key with a specific number (<code>int</code> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td> 
+<td><code>http://tizen.org/feature/multi_point_touch.point_count</code></td>
+     <td>Specify this key with a specific number (<code>int</code> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth feature.</td> 
+<td><code>http://tizen.org/feature/network.bluetooth</code></td>
+     <td>Specify this key, if the application requires the Bluetooth feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.audio.call</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.call</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.audio.controller</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Advanced Audio Distribution (A2DP) sink feature and the Bluetooth Audio Video Remote Control (AVRCP) controller feature.</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.controller</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Advanced Audio Distribution (A2DP) sink feature and the Bluetooth Audio Video Remote Control (AVRCP) controller feature.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.audio.media</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.audio.media</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.health</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.health</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.hid</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.hid</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.hid.device</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Human Interface Device (HID) device feature.</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.hid.device</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Human Interface Device (HID) device feature.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.le</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth LE feature.</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.le</code></td>
+     <td>Specify this key, if the application requires the Bluetooth LE feature.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.opp</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.opp</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.bluetooth.phonebook.client</code></td> 
-     <td>Specify this key, if the application requires the Bluetooth Phone Book Access (PBAP) client feature.</td> 
+<td><code>http://tizen.org/feature/network.bluetooth.phonebook.client</code></td>
+     <td>Specify this key, if the application requires the Bluetooth Phone Book Access (PBAP) client feature.</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.ethernet</code></td> 
-     <td>Specify this key, if the application requires the ethernet connection.</td> 
+<td><code>http://tizen.org/feature/network.ethernet</code></td>
+     <td>Specify this key, if the application requires the ethernet connection.</td>
         <td>2.4</td>
     </tr>
 <tr>
@@ -1065,143 +1065,143 @@
 <td><code>http://tizen.org/feature/network.net_proxy</code></td>
      <td>Specify this key, if the application requires the net-proxy feature for the Internet connection. A net-proxy feature for a device acts as an intermediary between client (network service customer) and server (network service provider).</td>
         <td>3.0</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc</code></td> 
-     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td> 
+<td><code>http://tizen.org/feature/network.nfc</code></td>
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc.card_emulation</code></td> 
-     <td>Specify this key, if the application requires the NFC card emulation feature.</td> 
+<td><code>http://tizen.org/feature/network.nfc.card_emulation</code></td>
+     <td>Specify this key, if the application requires the NFC card emulation feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
 <td><code>http://tizen.org/feature/network.nfc.card_emulation.hce</code></td>
      <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
         <td>2.3.1</td>
-    </tr>              
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc.p2p</code></td> 
-     <td>Specify this key, if the application requires the NFC p2p feature.</td> 
+<td><code>http://tizen.org/feature/network.nfc.p2p</code></td>
+     <td>Specify this key, if the application requires the NFC p2p feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc.reserved_push</code></td> 
-     <td>Specify this key, if the application requires the NFC reserved push feature.</td><td>2.2.1</td>        
-    </tr>      
+<td><code>http://tizen.org/feature/network.nfc.reserved_push</code></td>
+     <td>Specify this key, if the application requires the NFC reserved push feature.</td><td>2.2.1</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.nfc.tag</code></td> 
-     <td>Specify this key, if the application requires the NFC tag feature.</td> 
+<td><code>http://tizen.org/feature/network.nfc.tag</code></td>
+     <td>Specify this key, if the application requires the NFC tag feature.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.push</code></td> 
-     <td>Specify this key, if the application requires the network-based push service.</td> 
+<td><code>http://tizen.org/feature/network.push</code></td>
+     <td>Specify this key, if the application requires the network-based push service.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.secure_element</code></td> 
-     <td>Specify this key, if the application requires the secure element feature.</td> 
+<td><code>http://tizen.org/feature/network.secure_element</code></td>
+     <td>Specify this key, if the application requires the secure element feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.secure_element.ese</code></td> 
-     <td>Specify this key, if the application requires the ESE secure element feature.</td> 
+<td><code>http://tizen.org/feature/network.secure_element.ese</code></td>
+     <td>Specify this key, if the application requires the ESE secure element feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.secure_element.uicc</code></td> 
-     <td>Specify this key, if the application requires the UICC secure element feature.</td> 
+<td><code>http://tizen.org/feature/network.secure_element.uicc</code></td>
+     <td>Specify this key, if the application requires the UICC secure element feature.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.service_discovery.dnssd</code></td> 
-     <td>Specify this key, if the application requires the DNS-based Service Discovery Feature (DNSSD).</td> 
+<td><code>http://tizen.org/feature/network.service_discovery.dnssd</code></td>
+     <td>Specify this key, if the application requires the DNS-based Service Discovery Feature (DNSSD).</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.service_discovery.ssdp</code></td> 
-     <td>Specify this key, if the application requires the Simple Service Discovery Protocol feature (SSDP).</td> 
+<td><code>http://tizen.org/feature/network.service_discovery.ssdp</code></td>
+     <td>Specify this key, if the application requires the Simple Service Discovery Protocol feature (SSDP).</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony</code></td> 
-     <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony</code></td>
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony.mms</code></td> 
-     <td>Specify this key, if the application requires the MMS feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony.mms</code></td>
+     <td>Specify this key, if the application requires the MMS feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony.sms</code></td> 
-     <td>Specify this key, if the application requires the SMS feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony.sms</code></td>
+     <td>Specify this key, if the application requires the SMS feature.</td>
         <td>2.4</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony.sms.cbs</code></td> 
-     <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony.sms.cbs</code></td>
+     <td>Specify this key, if the application requires the SMS Cell Broadcast Service (CBS) feature.</td>
         <td>2.2.1</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.vpn</code></td> 
-     <td>Specify this key, if the application requires the Virtual Private Network feature (VPN).</td> 
+<td><code>http://tizen.org/feature/network.vpn</code></td>
+     <td>Specify this key, if the application requires the Virtual Private Network feature (VPN).</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.wifi</code></td> 
-     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td> 
+<td><code>http://tizen.org/feature/network.wifi</code></td>
+     <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.wifi.tdls</code></td> 
-     <td>Specify this key, if the application requires the Wi-Fi Tunneled Direct Link Setup (TDLS).</td> 
+<td><code>http://tizen.org/feature/network.wifi.tdls</code></td>
+     <td>Specify this key, if the application requires the Wi-Fi Tunneled Direct Link Setup (TDLS).</td>
         <td>3.0</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.3dc</code></td> 
-     <td>Specify this key, if the application requires the 3DC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.3dc</code></td>
+     <td>Specify this key, if the application requires the 3DC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.atc</code></td> 
-     <td>Specify this key, if the application requires the ATC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.atc</code></td>
+     <td>Specify this key, if the application requires the ATC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.etc</code></td> 
-     <td>Specify this key, if the application requires the ETC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.etc</code></td>
+     <td>Specify this key, if the application requires the ETC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.ptc</code></td> 
-     <td>Specify this key, if the application requires the PTC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.ptc</code></td>
+     <td>Specify this key, if the application requires the PTC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.pvrtc</code></td> 
-     <td>Specify this key, if the application requires the PVRTC texture format for OpenGL&reg; ES.</td> 
-       <td>2.2.1</td>   
+<td><code>http://tizen.org/feature/opengles.texture_format.pvrtc</code></td>
+     <td>Specify this key, if the application requires the PVRTC texture format for OpenGL&reg; ES.</td>
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.texture_format.utc</code></td> 
-     <td>Specify this key, if the application requires the UTC texture format for OpenGL&reg; ES.</td> 
+<td><code>http://tizen.org/feature/opengles.texture_format.utc</code></td>
+     <td>Specify this key, if the application requires the UTC texture format for OpenGL&reg; ES.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.version.1_1</code></td> 
+<td><code>http://tizen.org/feature/opengles.version.1_1</code></td>
      <td>Specify this key, if the application requires OpenGL&reg; ES version 1.1 at minimum.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
-</td> 
+</td>
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/opengles.version.2_0</code></td> 
+<td><code>http://tizen.org/feature/opengles.version.2_0</code></td>
      <td>Specify this key, if the application requires OpenGL&reg; ES version 2.0.
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
-</td> 
+</td>
        <td>2.2.1</td>
     </tr>
 <tr>
@@ -1210,80 +1210,80 @@
         <p>You can specify at most 1 openGL&reg; ES version. If you specify multiple versions, only the highest one is considered.</p>
        </td>
        <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.cpu.arch.armv7</code></td> 
-     <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.cpu.arch.armv7</code></td>
+     <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.cpu.arch.x86</code></td> 
-     <td>Specify this key, if the application requires the x86 CPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.cpu.arch.x86</code></td>
+     <td>Specify this key, if the application requires the x86 CPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse2</code></td> 
-     <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse2</code></td>
+     <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse3</code></td> 
-     <td>Specify this key, if the application requires the SSE3 FPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.sse3</code></td>
+     <td>Specify this key, if the application requires the SSE3 FPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.fpu.arch.ssse3</code></td> 
-     <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.ssse3</code></td>
+     <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv3</code></td> 
-     <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td> 
+<td><code>http://tizen.org/feature/platform.core.fpu.arch.vfpv3</code></td>
+     <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/platform.native.osp_compatible</code></td> 
-     <td>Specify this key, if the application requires OSP compatibility (the bada compatibility mode).</td> 
+<td><code>http://tizen.org/feature/platform.native.osp_compatible</code></td>
+     <td>Specify this key, if the application requires OSP compatibility (the bada compatibility mode).</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.auto_rotation</code></td> 
-     <td>Specify this key, if the application requires the automatic screen rotation feature.</td> 
+<td><code>http://tizen.org/feature/screen.auto_rotation</code></td>
+     <td>Specify this key, if the application requires the automatic screen rotation feature.</td>
         <td>2.2.1</td>
     </tr>
-<tr>   
+<tr>
 <td><code>http://tizen.org/feature/screen.shape.circle</code></td>
      <td>Specify this key, if the application requires a circle-shaped screen.</td>
         <td>2.3.1</td>
     </tr>
-<tr>   
+<tr>
 <td><code>http://tizen.org/feature/screen.shape.rectangle</code></td>
      <td>Specify this key, if the application requires a rectangle-shaped screen.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.all</code></td> 
-     <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.all</code></td>
+     <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td>
         <td>2.2.1</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal</code></td> 
-     <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal</code></td>
+     <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td> 
-     <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td>
+     <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td> 
-     <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td>
+     <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td> 
-     <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td>
+     <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
@@ -1292,258 +1292,258 @@
         <td>2.3.2</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td> 
-     <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.360.480</code></td>
+     <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td> 
-     <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td>
+     <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td>
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td> 
-     <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.540.960</code></td>
+     <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td> 
-     <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.600.1024</code></td>
+     <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td> 
-     <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.720.1280</code></td>
+     <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td> 
-     <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td> 
+<td><code>http://tizen.org/feature/screen.size.normal.1080.1920</code></td>
+     <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.accelerometer</code></td> 
-     <td>Specify this key, if the application requires an acceleration sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.accelerometer</code></td>
+     <td>Specify this key, if the application requires an acceleration sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.accelerometer.wakeup</code></td> 
-     <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.accelerometer.wakeup</code></td>
+     <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.activity_recognition</code></td> 
-     <td>Specify this key, if the application requires an activity recognition sensor.</td> 
-       <td>2.3</td>     
-    </tr>      
+<td><code>http://tizen.org/feature/sensor.activity_recognition</code></td>
+     <td>Specify this key, if the application requires an activity recognition sensor.</td>
+       <td>2.3</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.barometer</code></td> 
-     <td>Specify this key, if the application requires a barometer sensor.</td> 
-       <td>2.2.1</td>   
+<td><code>http://tizen.org/feature/sensor.barometer</code></td>
+     <td>Specify this key, if the application requires a barometer sensor.</td>
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.barometer.wakeup</code></td> 
-     <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.barometer.wakeup</code></td>
+     <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.geomagnetic_rotation_vector</code></td> 
-     <td>Specify this key, if the application requires a geomagnetic-based rotation vector sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.geomagnetic_rotation_vector</code></td>
+     <td>Specify this key, if the application requires a geomagnetic-based rotation vector sensor.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gesture_recognition</code></td> 
-     <td>Specify this key, if the application requires a gesture recognition sensor.</td> 
-       <td>2.3</td>     
-    </tr>      
+<td><code>http://tizen.org/feature/sensor.gesture_recognition</code></td>
+     <td>Specify this key, if the application requires a gesture recognition sensor.</td>
+       <td>2.3</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gravity</code></td> 
-     <td>Specify this key, if the application requires a gravity sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.gravity</code></td>
+     <td>Specify this key, if the application requires a gravity sensor.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gyroscope</code></td> 
-     <td>Specify this key, if the application requires a gyro sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope</code></td>
+     <td>Specify this key, if the application requires a gyro sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td> 
-     <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope_rotation_vector</code></td>
+     <td>Specify this key, if the application requires a gyroscope-based rotation vector sensor.</td>
         <td>2.4</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gyroscope.uncalibrated</code></td> 
-     <td>Specify this key, if the application requires an uncalibrated gyroscope sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope.uncalibrated</code></td>
+     <td>Specify this key, if the application requires an uncalibrated gyroscope sensor.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.gyroscope.wakeup</code></td> 
-     <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.gyroscope.wakeup</code></td>
+     <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td> 
-     <td>Specify this key, if the application requires a heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor</code></td>
+     <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td> 
-     <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td>
+     <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
        <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td> 
-     <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td>
+     <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
        <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td> 
-     <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td>
+     <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.humidity</code></td> 
-     <td>Specify this key, if the application requires a humidity sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.humidity</code></td>
+     <td>Specify this key, if the application requires a humidity sensor.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.linear_acceleration</code></td> 
-     <td>Specify this key, if the application requires a linear acceleration sensor.</td> 
-       <td>2.3</td>     
-    </tr>      
+<td><code>http://tizen.org/feature/sensor.linear_acceleration</code></td>
+     <td>Specify this key, if the application requires a linear acceleration sensor.</td>
+       <td>2.3</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.magnetometer</code></td> 
-     <td>Specify this key, if the application requires a magnetic sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer</code></td>
+     <td>Specify this key, if the application requires a magnetic sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.magnetometer.uncalibrated</code></td> 
-     <td>Specify this key, if the application requires an uncalibrated geomagnetic sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer.uncalibrated</code></td>
+     <td>Specify this key, if the application requires an uncalibrated geomagnetic sensor.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.magnetometer.wakeup</code></td> 
-     <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.magnetometer.wakeup</code></td>
+     <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.pedometer</code></td> 
-     <td>Specify this key, if the application requires a pedometer sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.pedometer</code></td>
+     <td>Specify this key, if the application requires a pedometer sensor.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.photometer</code></td> 
-     <td>Specify this key, if the application requires a photometer sensor.</td> 
-       <td>2.2.1</td>   
+<td><code>http://tizen.org/feature/sensor.photometer</code></td>
+     <td>Specify this key, if the application requires a photometer sensor.</td>
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.photometer.wakeup</code></td> 
-     <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.photometer.wakeup</code></td>
+     <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.proximity</code></td> 
-     <td>Specify this key, if the application requires a proximity sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.proximity</code></td>
+     <td>Specify this key, if the application requires a proximity sensor.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.proximity.wakeup</code></td> 
-     <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.proximity.wakeup</code></td>
+     <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.rotation_vector</code></td> 
-     <td>Specify this key, if the application requires a rotation vector sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.rotation_vector</code></td>
+     <td>Specify this key, if the application requires a rotation vector sensor.</td>
         <td>2.3</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.temperature</code></td> 
-     <td>Specify this key, if the application requires a temperature sensor.</td> 
-       <td>2.3</td>     
-    </tr>      
+<td><code>http://tizen.org/feature/sensor.temperature</code></td>
+     <td>Specify this key, if the application requires a temperature sensor.</td>
+       <td>2.3</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.tiltmeter</code></td> 
-     <td>Specify this key, if the application requires a tilt sensor.</td> 
-       <td>2.2.1</td>   
+<td><code>http://tizen.org/feature/sensor.tiltmeter</code></td>
+     <td>Specify this key, if the application requires a tilt sensor.</td>
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.tiltmeter.wakeup</code></td> 
-     <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td> 
+<td><code>http://tizen.org/feature/sensor.tiltmeter.wakeup</code></td>
+     <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.ultraviolet</code></td> 
-     <td>Specify this key, if the application requires a ultraviolet sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.ultraviolet</code></td>
+     <td>Specify this key, if the application requires a ultraviolet sensor.</td>
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.wrist_up</code></td> 
-     <td>Specify this key, if the application requires a wrist up sensor.</td> 
-        <td>2.3</td> 
+<td><code>http://tizen.org/feature/sensor.wrist_up</code></td>
+     <td>Specify this key, if the application requires a wrist up sensor.</td>
+        <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/shell.appwidget</code></td> 
-     <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td> 
+<td><code>http://tizen.org/feature/shell.appwidget</code></td>
+     <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sip.voip</code></td> 
-     <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td> 
+<td><code>http://tizen.org/feature/sip.voip</code></td>
+     <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/speech.control</code></td> 
-     <td>Specify this key, if the application requires the voice control feature.</td> 
-       <td>2.4</td>     
-    </tr>      
+<td><code>http://tizen.org/feature/speech.control</code></td>
+     <td>Specify this key, if the application requires the voice control feature.</td>
+       <td>2.4</td>
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/speech.recognition</code></td> 
-     <td>Specify this key, if the application requires the speech recognition (STT) feature.</td> 
+<td><code>http://tizen.org/feature/speech.recognition</code></td>
+     <td>Specify this key, if the application requires the speech recognition (STT) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/speech.synthesis</code></td> 
-     <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td> 
+<td><code>http://tizen.org/feature/speech.synthesis</code></td>
+     <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/usb.accessory</code></td> 
-     <td>Specify this key, if the application requires the USB client (or accessory) feature.</td> 
+<td><code>http://tizen.org/feature/usb.accessory</code></td>
+     <td>Specify this key, if the application requires the USB client (or accessory) feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/usb.host</code></td> 
-     <td>Specify this key, if the application requires the USB host feature.</td> 
+<td><code>http://tizen.org/feature/usb.host</code></td>
+     <td>Specify this key, if the application requires the USB host feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.barcode_detection</code></td> 
-     <td>Specify this key, if the application requires the barcode detection feature.</td> 
+<td><code>http://tizen.org/feature/vision.barcode_detection</code></td>
+     <td>Specify this key, if the application requires the barcode detection feature.</td>
         <td>2.4</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.barcode_generation</code></td> 
-     <td>Specify this key, if the application requires the barcode generation feature.</td> 
+<td><code>http://tizen.org/feature/vision.barcode_generation</code></td>
+     <td>Specify this key, if the application requires the barcode generation feature.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.face_recognition</code></td> 
-     <td>Specify this key, if the application requires the face recognition feature.</td> 
-       <td>2.2.1</td>   
+<td><code>http://tizen.org/feature/vision.face_recognition</code></td>
+     <td>Specify this key, if the application requires the face recognition feature.</td>
+       <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.image_recognition</code></td> 
-     <td>Specify this key, if the application requires the image recognition feature.</td> 
+<td><code>http://tizen.org/feature/vision.image_recognition</code></td>
+     <td>Specify this key, if the application requires the image recognition feature.</td>
        <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.qrcode_generation</code></td> 
-     <td>Specify this key, if the application requires the QR code generation feature.</td> 
+<td><code>http://tizen.org/feature/vision.qrcode_generation</code></td>
+     <td>Specify this key, if the application requires the QR code generation feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/vision.qrcode_recognition</code></td> 
-     <td>Specify this key, if the application requires the QR code recognition feature.</td> 
+<td><code>http://tizen.org/feature/vision.qrcode_recognition</code></td>
+     <td>Specify this key, if the application requires the QR code recognition feature.</td>
         <td>2.2.1</td>
     </tr>
 </tbody>
@@ -1561,27 +1561,27 @@
 
 <tbody>
 <tr>
-<th width="50%">Tizen profile</th> 
-     <th>Profile name attribute</th> 
+<th width="50%">Tizen profile</th>
+     <th>Profile name attribute</th>
     </tr>
 <tr>
-<td>Mobile</td> 
-     <td><code>mobile</code></td> 
+<td>Mobile</td>
+     <td><code>mobile</code></td>
     </tr>
 <tr>
-<td>Wearable</td> 
-     <td><code>wearable</code></td> 
+<td>Wearable</td>
+     <td><code>wearable</code></td>
     </tr>
 <tr>
-<td>TV</td> 
-     <td><code>TV</code></td> 
+<td>TV</td>
+     <td><code>TV</code></td>
     </tr>
 </tbody></table>
 
 <p>In a native application, the profile name element can be added to the <code>tizen-manifest.xml</code> file as follows:</p>
 <pre class="prettyprint">
-&lt;manifest xmlns=&quot;http://tizen.org/ns/packages&quot; api-version=&quot;2.3.1&quot; ... &gt;
-&lt;profile name=&quot;mobile&quot;/&gt;
+&lt;manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1" ... &gt;
+&lt;profile name="mobile"/&gt;
 </pre>
 
 <p>The Tizen Store compares the device profile and the <code>profile name</code> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
diff --git a/org.tizen.training/html/native/details/deprecation_policy_n.htm b/org.tizen.training/html/native/details/deprecation_policy_n.htm
index 4aa02ad..4eb2989 100644 (file)
--- a/org.tizen.training/html/native/details/deprecation_policy_n.htm
+++ b/org.tizen.training/html/native/details/deprecation_policy_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>API Versioning and Deprecation Policy of the Tizen Platform</title>  
+       <title>API Versioning and Deprecation Policy of the Tizen Platform</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,7 +32,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-       
+
 <h1>API Versioning and Deprecation Policy of the Tizen Platform</h1>
 
 <p>As much as the Tizen team wants to have a completely stable API, the evolution of both hardware technology and software capabilities is rapid. To be maximally useful, the API set must evolve to reflect those changes to enable the development of compelling applications that use those features. As an inevitable side effect, APIs may become obsolete and need to be replaced by more feature-rich versions.</p>
@@ -114,21 +114,21 @@
 Gets the package with the given application context.
 
 <strong>Deprecated:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;Deprecated since 2.3.1. Use app_context_get_app_id() instead.
+    Deprecated since 2.3.1. Use app_context_get_app_id() instead.
 <strong>Since:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;2.3
+    2.3
 </pre>
 </li>
 <li>Deprecated API in the Web API:
 <pre class="prettyprint">
 <strong>addAppInfoEventListener</strong>
-Adds a listener for receiving notifications for changes 
+Adds a listener for receiving notifications for changes
 in the list of installed applications on a device.
 <strong>Deprecated</strong>. It is deprecated since Tizen 2.4. Instead, set a listener for getting notified
 of the application changes (add/remove/update) on a device using tizen.package.setPackageInfoEventListener().
 
 <strong>long addAppInfoEventListener(ApplicationInformationEventCallback eventCallback);</strong>
-             
+
 <strong>Since</strong>: 2.0
 </pre>
 </li>
@@ -137,9 +137,9 @@ of the application changes (add/remove/update) on a device using tizen.package.s
 <strong>enum telephony_call_state_e</strong>
 Enumeration for the call state.
 <strong>Deprecated:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;Deprecated Since 2.4. Use telephony_call_status_e instead.
+    Deprecated Since 2.4. Use telephony_call_status_e instead.
 <strong>Since:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;2.3
+    2.3
 </pre>
 </li>
 <li>Deprecated type definition in the Native API:
@@ -148,9 +148,9 @@ Enumeration for the call state.
 <strong>typedef void* bt_gatt_attribute_h</strong>
 The attribute handle of GATT (Generic Attribute Profile)
 <strong>Deprecated:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;Deprecated since 2.3.1. Use bt_gatt_h instead.
+    Deprecated since 2.3.1. Use bt_gatt_h instead.
 <strong>Since:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;2.3
+    2.3
 </pre>
 </li>
 </ul>
@@ -167,8 +167,8 @@ will be removed from next release. Use app_context_get_app_id() instead.
 <li>In a build log message:
 <pre class="prettyprint">
 [2/3] Building src/basicuiwithedc.o
-../src/basicuiwithedc.c:26:19: warning: &#39;app_get_resource_path&#39; is deprecated [-Wdeprecated-declarations]
-&nbsp;&nbsp;&nbsp;&nbsp;char *res_path = app_get_resource_path();
+../src/basicuiwithedc.c:26:19: warning: 'app_get_resource_path' is deprecated [-Wdeprecated-declarations]
+    char *res_path = app_get_resource_path();
 </pre>
 </li>
 </ul>
diff --git a/org.tizen.training/html/native/details/details_n.htm b/org.tizen.training/html/native/details/details_n.htm
index f1a82ec..1c769fd 100644 (file)
--- a/org.tizen.training/html/native/details/details_n.htm
+++ b/org.tizen.training/html/native/details/details_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Understanding Tizen Programming</title>  
+       <title>Understanding Tizen Programming</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,14 +20,14 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../app_model/application_model_n.htm">Tizen Application Model</a></li>
-               </ul>           
+               </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Understanding Tizen Programming</h1>
@@ -40,8 +40,8 @@
        <li><a href="event_handling_n.htm">Event Handling</a></li>
        <li><a href="error_handling_n.htm">Error Handling</a></li>
        <li><a href="io_overview_n.htm">File System Directory Hierarchy</a></li>
-       <li><a href="deprecation_policy_n.htm">API Versioning and Deprecation Policy of the Tizen Platform</a></li>     
-       <li><a href="sign_certificate_n.htm">Application Signing and Certificates</a></li>      
+       <li><a href="deprecation_policy_n.htm">API Versioning and Deprecation Policy of the Tizen Platform</a></li>
+       <li><a href="sign_certificate_n.htm">Application Signing and Certificates</a></li>
 </ul>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.training/html/native/details/error_handling_n.htm b/org.tizen.training/html/native/details/error_handling_n.htm
index d65f04a..45f31f9 100644 (file)
--- a/org.tizen.training/html/native/details/error_handling_n.htm
+++ b/org.tizen.training/html/native/details/error_handling_n.htm
@@ -5,23 +5,23 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-  <title>Error Handling</title> 
- </head> 
+  <title>Error Handling</title>
+ </head>
  <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- 
+
  <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
   <h1>Error Handling</h1>
 
 <p>How to query error codes for a certain API function is determined by how the function returns error codes.
@@ -32,7 +32,7 @@ In this sense, there are 2 kinds of native APIs in Tizen:</p>
 <p>All API functions which return error codes have the following section in their description:</p>
 <pre class="prettyprint">
 Returns:
-&nbsp;&nbsp;&nbsp;&nbsp;0 on success, otherwise a negative error value
+    0 on success, otherwise a negative error value
 </pre>
 
 <p>To see all of the available error values, see the Return values section in each API function description.</p>
@@ -40,10 +40,10 @@ Returns:
 
 <pre class="prettyprint">
 Return values:
-&nbsp;&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_NONE /* Successful */
-&nbsp;&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_INVALID_PARAMETER /* Invalid parameter */
-&nbsp;&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_SERVER_NOT_READY /* Server is not ready */
-&nbsp;&nbsp;&nbsp;&nbsp;MESSAGES_ERROR_COMMUNICATION_WITH_SERVER_FAILED /* Communication with server failed */
+    MESSAGES_ERROR_NONE /* Successful */
+    MESSAGES_ERROR_INVALID_PARAMETER /* Invalid parameter */
+    MESSAGES_ERROR_SERVER_NOT_READY /* Server is not ready */
+    MESSAGES_ERROR_COMMUNICATION_WITH_SERVER_FAILED /* Communication with server failed */
 </pre>
 </li>
 <li>APIs returning values (indirectly returning error codes)
@@ -72,15 +72,15 @@ location_manager_h location_handle;
 int result = location_manager_create(LOCATION_METHOD_GPS, location_handle);
 
 if (LOCATIONS_ERROR_NONE != result) {
-&nbsp;&nbsp;&nbsp;&nbsp;errMsg = get_error_message(result);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;MyTag&quot;, &quot;%s&quot;, errMsg);
+    errMsg = get_error_message(result);
+    dlog_print(DLOG_INFO, "MyTag", "%s", errMsg);
 }
 </pre>
-<p>The <code>get_error_message()</code> function takes an error code as an input and returns its corresponding error messages, such as &quot;Location service is not available&quot;.</p>
+<p>The <code>get_error_message()</code> function takes an error code as an input and returns its corresponding error messages, such as "Location service is not available".</p>
 </li>
 </ul>
-<p>Every error code in the Tizen native API is represented as an integer value.</p>   
-   
+<p>Every error code in the Tizen native API is represented as an integer value.</p>
+
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.training/html/native/details/event_handling_n.htm b/org.tizen.training/html/native/details/event_handling_n.htm
index 36f48a5..26cae79 100644 (file)
--- a/org.tizen.training/html/native/details/event_handling_n.htm
+++ b/org.tizen.training/html/native/details/event_handling_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Event Handling</title>  
+       <title>Event Handling</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,10 +27,10 @@
                        <li><a href="#back">Back Key Events</a></li>
                        <li><a href="#rotary">Rotary Events</a></li>
                        <li><a href="#media">Media Key Events</a></li>
-                       <li><a href="#ambient">Ambient Events</a></li>                  
+                       <li><a href="#ambient">Ambient Events</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Event Handling</h1>
@@ -50,8 +50,8 @@
 <h2 id="menu" name="menu">Menu Key Events in Mobile Applications</h2>
 <p> All Tizen mobile devices provide a <strong>Menu</strong> key, which is used to present users a context-dependent set of options. Pressing the <strong>Menu</strong> key shows a hierarchical option menu. The following figure illustrates the <strong>Menu</strong> key position and the option menu.</p>
 
-<p align="center"><strong>Figure: Menu key</strong></p> 
- <p align="center"><img src="../../images/menu_key.png" alt="Menu key" /></p> 
+<p align="center"><strong>Figure: Menu key</strong></p>
+ <p align="center"><img src="../../images/menu_key.png" alt="Menu key" /></p>
 
 
 <h2 id="back" name="back">Back Key Events in Mobile Applications</h2>
@@ -66,12 +66,12 @@
 </ul>
 
 <h2 id="rotary" name="rotary">Rotary Events in Wearable Applications</h2>
-  
-<p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called <strong>detent</strong>. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p> 
+
+<p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called <strong>detent</strong>. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p>
 
 <p>You can use the rotary events to change your application state (for example, change the value of the scroller or slider, change selected items, or zoom the image).</p>
 
-<p align="center"><strong>Figure: Rotary device</strong></p> 
+<p align="center"><strong>Figure: Rotary device</strong></p>
 <p align="center"><img alt="Rotary device" src="../../images/rotary_event.png" /> </p>
 
 
diff --git a/org.tizen.training/html/native/details/io_overview_n.htm b/org.tizen.training/html/native/details/io_overview_n.htm
index bcddf87..33b6181 100644 (file)
--- a/org.tizen.training/html/native/details/io_overview_n.htm
+++ b/org.tizen.training/html/native/details/io_overview_n.htm
@@ -5,25 +5,25 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>File System Directory Hierarchy</title>  
+       <title>File System Directory Hierarchy</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
 <h1>File System Directory Hierarchy</h1>
 
 <p>The Tizen platform uses the underlying Linux file system.</p>
@@ -42,7 +42,7 @@
 </ul>
 <p>The following table shows the application directory hierarchy:</p>
 
-<p align="center" class="Table"><strong>Table: Application package directory hierarchy</strong></p> 
+<p align="center" class="Table"><strong>Table: Application package directory hierarchy</strong></p>
 <table>
 <tbody>
 <tr>
@@ -82,14 +82,14 @@
  <td><code>shared/data</code></td>
  <td>Used to share data with other applications.
      <p>To get this directory path of your own application, call the <code>app_get_shared_data_path()</code> function of the App common module.</p>
-     <p>Files stored in the shared/data directory can be read by other applications. Do not store application&#39;s private data in the shared/data directory.</p></td>
+     <p>Files stored in the shared/data directory can be read by other applications. Do not store application's private data in the shared/data directory.</p></td>
  <td>Owner: Read and Write<p>Others: Read</p></td>
 </tr>
 <tr>
  <td><code>shared/res</code></td>
  <td>Used to share resources with other applications. The resource files are delivered with the application package.
      <p>To get this directory path of your own application, call the <code>app_get_shared_resource_path()</code> function of the App common module.</p>
-     <p>Files stored in the shared/res directory can be read by other applications. Do not pack application&#39;s private resource files in the shared/res directory.</p>
+     <p>Files stored in the shared/res directory can be read by other applications. Do not pack application's private resource files in the shared/res directory.</p>
  </td>
  <td>Owner: Read<p> Others: Read</p></td>
 </tr>
@@ -149,7 +149,7 @@
 <tr>
  <td><code>Others</code></td>
  <td>Used for other types.</td>
- <td>Read and Write</td> 
+ <td>Read and Write</td>
 </tr>
 </tbody>
 </table>
@@ -202,7 +202,7 @@
 </tr>
 </tbody>
 </table>
-                       
+
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.training/html/native/details/sec_privileges_n.htm b/org.tizen.training/html/native/details/sec_privileges_n.htm
index e11cfb2..db9ec23 100644 (file)
--- a/org.tizen.training/html/native/details/sec_privileges_n.htm
+++ b/org.tizen.training/html/native/details/sec_privileges_n.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -15,19 +15,19 @@
 <style>
 td.key { font-family: Courier New,Courier,monospace }
 tr.partner-level, tr.platform-level { background-color: #cff }
-</style>       
+</style>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
 <h1>Security and API Privileges</h1>
 
 <p>To effectively protect the device system and user private data, the Tizen security architecture is based on privileges and application signing of the Linux basic security model, which includes process isolation and mandatory access control. Since Tizen, as an open mobile platform, provides a wide range of features and experiences for users with a variety of applications, the users must be able to grant privileges for security-sensitive operations.</p>
@@ -45,7 +45,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
         <strong>Note</strong>
         In applications with the platform version 3.0 or higher, if you use privacy-related privileged APIs, make sure that the user has switched the privilege on before making the function call. Otherwise, the application does not work as expected.
     </div>
- 
+
 <p>The Tizen Studio also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see <a href="../../../../org.tizen.studio/html/native_tools/api_checker_n.htm">Verifying APIs and Privileges</a>.</p>
 
 <p>The following tables list the API privileges, which you must to declare when using security-sensitive API modules.</p>
@@ -53,35 +53,35 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <p align="center" class="Table"><strong>Table: Mobile native API privileges</strong></p>
 <table>
 <tbody>
-<tr> 
-<th>Privilege</th> 
+<tr>
+<th>Privilege</th>
 <th>Level</th>
-<th>Privacy</th> 
+<th>Privacy</th>
 <th>Since</th>
-<th>Description</th> 
-</tr> 
-<tr> 
-<td><code>http://tizen.org/privilege/account.read</code></td> 
+<th>Description</th>
+</tr>
+<tr>
+<td><code>http://tizen.org/privilege/account.read</code></td>
 <td>public</td>
 <td>Account</td>
 <td>2.3</td>
-<td>The application can read accounts.</td> 
+<td>The application can read accounts.</td>
 </tr>
-<tr> 
-<td><code>http://tizen.org/privilege/account.write</code></td> 
+<tr>
+<td><code>http://tizen.org/privilege/account.write</code></td>
 <td>public</td>
 <td>Account</td>
 <td>2.3</td>
-<td>The application can create, edit, and delete accounts.</td> 
+<td>The application can create, edit, and delete accounts.</td>
 </tr>
-<tr> 
-<td><code>http://tizen.org/privilege/alarm.get</code></td> 
+<tr>
+<td><code>http://tizen.org/privilege/alarm.get</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can read information about the saved alarms.</td> 
+<td>The application can read information about the saved alarms.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/alarm.set</code></td>
 <td>public</td>
 <td></td>
@@ -107,7 +107,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>partner</td>
 <td></td>
 <td>3.0</td>
-<td>The application can check the reputation of a Web address and determine whether accessing it can put the user&#39;s device at risk.</td>
+<td>The application can check the reputation of a Web address and determine whether accessing it can put the user's device at risk.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/apphistory.read</code></td>
@@ -116,12 +116,12 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>2.4</td>
 <td>The application can read the statistics of application usage, such as which applications have been used frequently or recently.</td>
 </tr>
-<tr class="platform-level"> 
-<td><code>http://tizen.org/privilege/appmanager.kill</code></td> 
+<tr class="platform-level">
+<td><code>http://tizen.org/privilege/appmanager.kill</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
-<td>The application can close other applications.</td> 
+<td>The application can close other applications.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/appmanager.kill.bgapp</code></td>
@@ -130,96 +130,96 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>2.4</td>
 <td>The application can request to close applications running in the background.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/appmanager.launch</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can open other applications.</td> 
+<td>The application can open other applications.</td>
 </tr>
-<tr> 
-<td><code>http://tizen.org/privilege/bluetooth</code></td> 
+<tr>
+<td><code>http://tizen.org/privilege/bluetooth</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</td> 
+<td>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</td>
 </tr>
-<tr class="platform-level"> 
-<td><code>http://tizen.org/privilege/bluetooth.admin</code></td> 
+<tr class="platform-level">
+<td><code>http://tizen.org/privilege/bluetooth.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
-<td>The application can change Bluetooth settings, such as switching Bluetooth on or off, setting the device name, and enabling or disabling the AV remote control.</td> 
+<td>The application can change Bluetooth settings, such as switching Bluetooth on or off, setting the device name, and enabling or disabling the AV remote control.</td>
 </tr>
-<tr class="platform-level"> 
-<td><code>http://tizen.org/privilege/bookmark.admin</code></td> 
+<tr class="platform-level">
+<td><code>http://tizen.org/privilege/bookmark.admin</code></td>
 <td>platform</td>
 <td>Bookmark</td>
 <td>2.3</td>
-<td>The application can retrieve, create, edit, and delete Internet bookmarks.</td> 
+<td>The application can retrieve, create, edit, and delete Internet bookmarks.</td>
 </tr>
-<tr> 
-<td><code>http://tizen.org/privilege/calendar.read</code></td> 
+<tr>
+<td><code>http://tizen.org/privilege/calendar.read</code></td>
 <td>public</td>
 <td>Calendar</td>
 <td>2.3</td>
-<td>The application can read events and tasks.</td> 
+<td>The application can read events and tasks.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/calendar.write</code></td>
 <td>public</td>
 <td>Calendar</td>
 <td>2.3</td>
-<td>The application can create, update, and delete events and tasks.</td> 
+<td>The application can create, update, and delete events and tasks.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/call</code></td>
 <td>public</td>
 <td>Call</td>
 <td>2.3</td>
-<td>The application can make phone calls to numbers when they are tapped without further confirmation. This can result in additional charges depending on the user&#39;s payment plan.</td> 
+<td>The application can make phone calls to numbers when they are tapped without further confirmation. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/callhistory.read</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.3</td>
-<td>The application can read call log items.</td> 
+<td>The application can read call log items.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/callhistory.write</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.3</td>
-<td>The application can create, update, and delete call log items.</td> 
+<td>The application can create, update, and delete call log items.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/camera</code></td>
 <td>public</td>
 <td>Camera</td>
 <td>2.3</td>
-<td>The application can take pictures and switch the camera flash on and off while using the camera.</td> 
+<td>The application can take pictures and switch the camera flash on and off while using the camera.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/contact.read</code></td>
 <td>public</td>
 <td>Contacts</td>
  <td>2.3</td>
-<td>The application can read the user profile, contacts, and contact history. Contact history can include social network activity.</td> 
+<td>The application can read the user profile, contacts, and contact history. Contact history can include social network activity.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/contact.write</code></td>
 <td>public</td>
 <td>Contacts</td>
 <td>2.3</td>
-<td>The application can create, update, and delete the user profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.</td> 
+<td>The application can create, update, and delete the user profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/content.write</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can change media information. This information can be used by other applications.</td> 
+<td>The application can change media information. This information can be used by other applications.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/d2d.datasharing</code></td>
@@ -228,26 +228,26 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can share data with other devices.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/datasharing</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can share data with other applications.</td> 
+<td>The application can share data with other applications.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/display</code></td>
 <td>public</td>
 <td></td>
-<td>2.3</td> 
-<td>The application can manage display settings, such as the brightness. This can increase battery consumption.</td> 
+<td>2.3</td>
+<td>The application can manage display settings, such as the brightness. This can increase battery consumption.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/download</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can manage HTTP downloads. This can result in additional charges depending on the user&#39;s payment plan.</td> 
+<td>The application can manage HTTP downloads. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
 <tr class="partner-level">
 <td><code>http://tizen.org/privilege/dpm.bluetooth</code></td>
@@ -352,14 +352,14 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>partner</td>
 <td></td>
 <td>3.0</td>
-<td>The application can restrict the use of Wi-Fi networks and mobile hotspots. If the device cannot connect to a Wi-Fi network, it can connect to a mobile network. This can result in additional charges depending on the user&#39;s payment plan.<p><strong>Allowed to licensed partners.</strong></p></td>
+<td>The application can restrict the use of Wi-Fi networks and mobile hotspots. If the device cannot connect to a Wi-Fi network, it can connect to a mobile network. This can result in additional charges depending on the user's payment plan.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
 <td><code>http://tizen.org/privilege/dpm.wipe</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
-<td>The application can erase all data from the user&#39;s device and reset the user&#39;s device to its factory default settings.<p><strong>Allowed to licensed partners.</strong></p></td>
+<td>The application can erase all data from the user's device and reset the user's device to its factory default settings.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
 <td><code>http://tizen.org/privilege/dpm.zone</code></td>
@@ -368,35 +368,35 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can create and remove containers. Containers are private workspaces which provide separate application runtime environments and data storage.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
-<tr> 
-<td><code>http://tizen.org/privilege/email</code></td> 
+<tr>
+<td><code>http://tizen.org/privilege/email</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can manage the user&#39;s email accounts, including the user&#39;s folders and emails, POP3 and IMAP downloads, and SMTP uploads. This can result in additional charges depending on the user&#39;s payment plan.</td>
+<td>The application can manage the user's email accounts, including the user's folders and emails, POP3 and IMAP downloads, and SMTP uploads. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
-<tr class="platform-level"> 
-<td><code>http://tizen.org/privilege/email.admin</code></td> 
+<tr class="platform-level">
+<td><code>http://tizen.org/privilege/email.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
-<td>The application can manage the email application settings.</td> 
+<td>The application can manage the email application settings.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/fido.client</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
-<td>The application can trigger authenticators in the user&#39;s device and it can request to use the user&#39;s PIN or biometrics (fingerprints or irises) for authentication.</td>
+<td>The application can trigger authenticators in the user's device and it can request to use the user's PIN or biometrics (fingerprints or irises) for authentication.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/haptic</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can control vibration feedback.</td> 
+<td>The application can control vibration feedback.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/healthinfo</code></td>
 <td>public</td>
 <td>Sensor</td>
@@ -431,47 +431,47 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>2.4</td>
 <td>The application can read actions involving special keys, such as the volume keys on this or other devices (such as TV remote controls), even when it is running in the background.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/keymanager</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can save keys, certificates, and data to, and retrieve and delete them from, a password-protected storage. Checking the status of certificates while connected to a mobile network can result in additional charges depending on the user&#39;s payment plan. <p><strong>Deprecated since 3.0.</strong></p></td>
+<td>The application can save keys, certificates, and data to, and retrieve and delete them from, a password-protected storage. Checking the status of certificates while connected to a mobile network can result in additional charges depending on the user's payment plan. <p><strong>Deprecated since 3.0.</strong></p></td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/keymanager.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
 <td>The application can lock and unlock a password-protected storage, and manage password changes for it. <p><strong>Deprecated since 2.4.</strong></p></td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/led</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can switch LEDs on or off, such as the LED on the front of the device and the camera flash.</td> 
+<td>The application can switch LEDs on or off, such as the LED on the front of the device and the camera flash.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/location</code></td>
 <td>public</td>
 <td>Location</td>
 <td>2.3</td>
-<td>The application can read the user&#39;s location information.</td> 
+<td>The application can read the user's location information.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/location.coarse</code></td>
 <td>public</td>
 <td>Location</td>
 <td>3.0</td>
-<td>The application can determine the user&#39;s approximate location including the user device&#39;s Cell ID, LAC (Location Area Code), and TAC (Tracking Area Code).</td>
+<td>The application can determine the user's approximate location including the user device's Cell ID, LAC (Location Area Code), and TAC (Tracking Area Code).</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/location.enable</code></td>
 <td>platform</td>
 <td>Location</td>
 <td>2.3</td>
-<td>The application can control the user&#39;s location service settings.</td>
+<td>The application can control the user's location service settings.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/mapservice</code></td>
@@ -501,19 +501,19 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>2.4</td>
 <td>The application can read the statistics concerning the music and videos played on the device, such as the peak times for playing music or videos.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/message.read</code></td>
 <td>public</td>
 <td>Message</td>
 <td>2.3</td>
-<td>The application can read text and multimedia messages, and any information related to them.</td> 
+<td>The application can read text and multimedia messages, and any information related to them.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/message.write</code></td>
 <td>public</td>
 <td>Message</td>
 <td>2.3</td>
-<td>The application can write, send, delete, and move text and multimedia messages, and change the settings and status of the messages, such as read or unread.</td> 
+<td>The application can write, send, delete, and move text and multimedia messages, and change the settings and status of the messages, such as read or unread.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/minicontrol.provider</code></td>
@@ -522,124 +522,124 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>2.4</td>
 <td>The application can show a small toolbar on the notification panel or lock screen while it is open. <p><strong>Deprecated since 3.0.</strong></p></td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/network.get</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can retrieve network information, such as the status of each network, its type, and detailed network profile information.</td> 
+<td>The application can retrieve network information, such as the status of each network, its type, and detailed network profile information.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/network.profile</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can add, remove, and edit network profiles.</td> 
+<td>The application can add, remove, and edit network profiles.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/network.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can switch Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks. This can result in additional charges depending on the user&#39;s payment plan.</td>
+<td>The application can switch Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/nfc</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can read and write NFC tag information, and send NFC messages to other devices.</td> 
+<td>The application can read and write NFC tag information, and send NFC messages to other devices.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/nfc.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
-<td>The application can change NFC settings, such as switching NFC on or off.</td> 
+<td>The application can change NFC settings, such as switching NFC on or off.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/nfc.cardemulation</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
 <td>The application can access smart card details, such as credit card details, and allow users to make payments using NFC.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/notification</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can show and hide its own notifications and badges.</td> 
+<td>The application can show and hide its own notifications and badges.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/packagemanager.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
-<td>The application can install and uninstall application packages.</td> 
+<td>The application can install and uninstall application packages.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/packagemanager.clearcache</code></td>
 <td>public</td>
 <td></td>
 <td>2.4</td>
-<td>The application can clear other applications&#39; caches.</td>
+<td>The application can clear other applications' caches.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/packagemanager.info</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can retrieve detailed application package information.</td> 
+<td>The application can retrieve detailed application package information.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/power</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can control power-related settings, such as dimming the screen.</td> 
+<td>The application can control power-related settings, such as dimming the screen.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/push</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can receive notifications from the Internet. This can result in additional charges depending on the user&#39;s payment plan.</td>
+<td>The application can receive notifications from the Internet. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
-<tr class="platform-level"> 
-<td><code>http://tizen.org/privilege/reboot</code></td> 
+<tr class="platform-level">
+<td><code>http://tizen.org/privilege/reboot</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can restart the device.</td> 
+<td>The application can restart the device.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/recorder</code></td>
 <td>public</td>
 <td>Microphone</td>
 <td>2.3</td>
-<td>The application can record video and audio.</td> 
+<td>The application can record video and audio.</td>
 </tr>
-<tr class="platform-level"> 
-<td><code>http://tizen.org/privilege/screenshot</code></td> 
+<tr class="platform-level">
+<td><code>http://tizen.org/privilege/screenshot</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
-<td>The application can capture screenshots.</td> 
+<td>The application can capture screenshots.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/secureelement</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td> 
+<td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/shortcut</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can create and delete shortcuts.</td> 
+<td>The application can create and delete shortcuts.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/systemmonitor</code></td>
@@ -648,40 +648,40 @@ tr.partner-level, tr.platform-level { background-color: #cff }
  <td>2.4</td>
 <td>The application can read system information, including information from the CPU and RAM.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/systemsettings</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can read and write unrestricted system settings.<p><strong>Deprecated since 2.3.1.</strong></p></td> 
+<td>The application can read and write unrestricted system settings.<p><strong>Deprecated since 2.3.1.</strong></p></td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/systemsettings.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
-<td>The application can read and write all system settings.</td> 
+<td>The application can read and write all system settings.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/telephony</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the status of calls.</td> 
+<td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the status of calls.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/telephony.admin</code></td>
-<td>platform</td> 
+<td>platform</td>
 <td></td>
 <td>2.3</td>
-<td>The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.</td> 
+<td>The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/tethering.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3</td>
-<td>The application can enable and disable tethering services. This can result in additional charges depending on the user&#39;s payment plan.</td>
+<td>The application can enable and disable tethering services. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/use_ir</code></td>
@@ -690,12 +690,12 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can use the infrared transmitter.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/volume.set</code></td>
 <td>public</td>
 <td></td>
-<td>2.3</td> 
-<td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td> 
+<td>2.3</td>
+<td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/vpnservice</code></td>
@@ -704,33 +704,33 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can manage the VPN (virtual private network) and change its settings.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/web-history.admin</code></td>
 <td>platform</td>
 <td>User history</td>
 <td>2.3</td>
-<td>The application can manage the user&#39;s Internet history.</td>
+<td>The application can manage the user's Internet history.</td>
 </tr>
-<tr> 
-<td><code>http://tizen.org/privilege/widget.viewer</code></td> 
+<tr>
+<td><code>http://tizen.org/privilege/widget.viewer</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can show widgets, and information from their associated applications, on the home screen.</td> 
+<td>The application can show widgets, and information from their associated applications, on the home screen.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/wifidirect</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can enable and disable Wi-Fi Direct&trade;, manage Wi-Fi Direct&trade; connections, and change Wi-Fi Direct&trade; settings.</td> 
+<td>The application can enable and disable Wi-Fi Direct&trade;, manage Wi-Fi Direct&trade; connections, and change Wi-Fi Direct&trade; settings.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/window.priority.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3</td>
-<td>The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This can prevent the user from interacting with other applications or screens until the window for the application is closed.</td> 
+<td>The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This can prevent the user from interacting with other applications or screens until the window for the application is closed.</td>
 </tr>
 </tbody>
 </table>
@@ -738,12 +738,12 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <p align="center" class="Table"><strong>Table: Wearable native API privileges</strong></p>
 <table>
 <tbody>
-<tr> 
+<tr>
 <th>Privilege</th>
 <th>Level</th>
 <th>Privacy</th>
-<th>Since</th> 
-<th>Description</th> 
+<th>Since</th>
+<th>Description</th>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/account.read</code></td>
@@ -759,19 +759,19 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can create, edit, and delete accounts.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/alarm.get</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can read information about the saved alarms.</td> 
+<td>The application can read information about the saved alarms.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/alarm.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can set alarms and wake the device up at scheduled times.</td> 
+<td>The application can set alarms and wake the device up at scheduled times.</td>
 </tr>
 <tr class="platform-level">
 <td><code>http://tizen.org/privilege/antivirus.admin</code></td>
@@ -792,14 +792,14 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>partner</td>
 <td></td>
 <td>3.0</td>
-<td>The application can check the reputation of a Web address and determine whether accessing it can put the user&#39;s device at risk.</td>
+<td>The application can check the reputation of a Web address and determine whether accessing it can put the user's device at risk.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/appmanager.kill</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can close other applications.</td> 
+<td>The application can close other applications.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/appmanager.kill.bgapp</code></td>
@@ -808,49 +808,49 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can request to close applications running in the background.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/appmanager.launch</code></td>
 <td>public</td>
 <td></td>
-<td>2.3.1</td> 
-<td>The application can open other applications.</td> 
+<td>2.3.1</td>
+<td>The application can open other applications.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/bluetooth</code></td>
 <td>public</td>
 <td></td>
-<td>2.3.1</td> 
-<td>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</td> 
+<td>2.3.1</td>
+<td>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/bluetooth.admin</code></td>
 <td>platform</td>
 <td></td>
-<td>2.3.1</td> 
-<td>The application can change Bluetooth settings, such as switching Bluetooth on or off, setting the device name, and enabling or disabling the AV remote control.</td> 
+<td>2.3.1</td>
+<td>The application can change Bluetooth settings, such as switching Bluetooth on or off, setting the device name, and enabling or disabling the AV remote control.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/call</code></td>
 <td>public</td>
 <td>Call</td>
 <td>2.3.1</td>
-<td>The application can make phone calls to numbers when they are tapped without further confirmation. This can result in additional charges depending on the user&#39;s payment plan.</td>
+<td>The application can make phone calls to numbers when they are tapped without further confirmation. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/callhistory.read</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.3.1</td>
-<td>The application can read call log items.</td> 
+<td>The application can read call log items.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/callhistory.write</code></td>
 <td>public</td>
 <td>User history</td>
 <td>2.3.1</td>
-<td>The application can create, update, and delete call log items.</td> 
+<td>The application can create, update, and delete call log items.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/camera</code></td>
 <td>public</td>
 <td>Camera</td>
@@ -871,12 +871,12 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can create, update, and delete the user profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/content.write</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can change media information. This information can be used by other applications.</td> 
+<td>The application can change media information. This information can be used by other applications.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/d2d.datasharing</code></td>
@@ -885,26 +885,26 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can share data with other devices.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/datasharing</code></td>
 <td>public</td>
 <td></td>
-<td>2.3.1</td> 
-<td>The application can share data with other applications.</td> 
+<td>2.3.1</td>
+<td>The application can share data with other applications.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/display</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can manage display settings, such as the brightness. This can increase battery consumption.</td> 
+<td>The application can manage display settings, such as the brightness. This can increase battery consumption.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/download</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can manage HTTP downloads. This can result in additional charges depending on the user&#39;s payment plan.</td> 
+<td>The application can manage HTTP downloads. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
 <tr class="partner-level">
 <td><code>http://tizen.org/privilege/dpm.bluetooth</code></td>
@@ -1009,14 +1009,14 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>partner</td>
 <td></td>
 <td>3.0</td>
-<td>The application can restrict the use of Wi-Fi networks and mobile hotspots. If the device cannot connect to a Wi-Fi network, it can connect to a mobile network. This can result in additional charges depending on the user&#39;s payment plan.<p><strong>Allowed to licensed partners.</strong></p></td>
+<td>The application can restrict the use of Wi-Fi networks and mobile hotspots. If the device cannot connect to a Wi-Fi network, it can connect to a mobile network. This can result in additional charges depending on the user's payment plan.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
 <td><code>http://tizen.org/privilege/dpm.wipe</code></td>
 <td>partner</td>
 <td></td>
 <td>3.0</td>
-<td>The application can erase all data from the user&#39;s device and reset the user&#39;s device to its factory default settings.<p><strong>Allowed to licensed partners.</strong></p></td>
+<td>The application can erase all data from the user's device and reset the user's device to its factory default settings.<p><strong>Allowed to licensed partners.</strong></p></td>
 </tr>
 <tr class="partner-level">
 <td><code>http://tizen.org/privilege/dpm.zone</code></td>
@@ -1030,28 +1030,28 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>public</td>
 <td></td>
 <td>3.0</td>
-<td>The application can manage the user&#39;s email accounts, including the user&#39;s folders and emails, POP3 and IMAP downloads, and SMTP uploads. This can result in additional charges depending on the user&#39;s payment plan.</td>
+<td>The application can manage the user's email accounts, including the user's folders and emails, POP3 and IMAP downloads, and SMTP uploads. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/fido.client</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
-<td>The application can trigger authenticators in the user&#39;s device and it can request to use the user&#39;s PIN or biometrics (fingerprints or irises) for authentication.</td>
+<td>The application can trigger authenticators in the user's device and it can request to use the user's PIN or biometrics (fingerprints or irises) for authentication.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/haptic</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can control vibration feedback.</td> 
+<td>The application can control vibration feedback.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/healthinfo</code></td>
 <td>public</td>
 <td>Sensor</td>
 <td>2.3.1</td>
-<td>The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.</td> 
+<td>The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/ime</code></td>
@@ -1081,50 +1081,50 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can read actions involving special keys, such as the volume keys on this or other devices (such as TV remote controls), even when it is running in the background.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/keymanager</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can save keys, certificates, and data to, and retrieve and delete them from, a password-protected storage.</td> 
+<td>The application can save keys, certificates, and data to, and retrieve and delete them from, a password-protected storage.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/keymanager.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
 <td>The application can lock and unlock a password-protected storage, and manage password changes for it.
-<p><strong>Deprecated since 3.0.</strong></p></td> 
+<p><strong>Deprecated since 3.0.</strong></p></td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/led</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can switch LEDs on or off, such as the LED on the front of the device and the camera flash.</td> 
+<td>The application can switch LEDs on or off, such as the LED on the front of the device and the camera flash.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/location</code></td>
 <td>public</td>
 <td>Location</td>
 <td>2.3.1</td>
-<td>The application can read the user&#39;s location information.</td> 
+<td>The application can read the user's location information.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/location.coarse</code></td>
 <td>public</td>
 <td>Location</td>
 <td>3.0</td>
-<td>The application can determine the user&#39;s approximate location including the user device&#39;s Cell ID, LAC (Location Area Code), and TAC (Tracking Area Code).</td>
+<td>The application can determine the user's approximate location including the user device's Cell ID, LAC (Location Area Code), and TAC (Tracking Area Code).</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/location.enable</code></td>
 <td>platform</td>
 <td>Location</td>
 <td>2.3.1</td>
-<td>The application can control the user&#39;s location service settings.</td> 
+<td>The application can control the user's location service settings.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/mapservice</code></td>
 <td>public</td>
 <td></td>
@@ -1145,131 +1145,131 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/message.read</code></td>
 <td>public</td>
 <td>Message</td>
 <td>2.3.1</td>
-<td>The application can read text and multimedia messages, and any information related to them.</td> 
+<td>The application can read text and multimedia messages, and any information related to them.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/message.write</code></td>
 <td>public</td>
 <td>Message</td>
 <td>2.3.1</td>
-<td>The application can write, send, delete, and move text and multimedia messages, download multimedia messages, and change the settings and status of the messages, such as read or unread. This can result in additional charges depending on the user&#39;s payment plan.</td>
+<td>The application can write, send, delete, and move text and multimedia messages, download multimedia messages, and change the settings and status of the messages, such as read or unread. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/network.get</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can retrieve network information, such as the status of each network, its type, and detailed network profile information.</td> 
+<td>The application can retrieve network information, such as the status of each network, its type, and detailed network profile information.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/network.profile</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can add, remove, and edit network profiles.</td> 
+<td>The application can add, remove, and edit network profiles.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/network.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can switch Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks. This can result in additional charges depending on the user&#39;s payment plan.</td>
+<td>The application can switch Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/nfc</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can read and write NFC tag information, and send NFC messages to other devices.</td> 
+<td>The application can read and write NFC tag information, and send NFC messages to other devices.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/nfc.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can change NFC settings, such as switching NFC on or off.</td> 
+<td>The application can change NFC settings, such as switching NFC on or off.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/nfc.cardemulation</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can access smart card details, such as credit card details, and allow users to make payments using NFC.</td> 
+<td>The application can access smart card details, such as credit card details, and allow users to make payments using NFC.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/notification</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can show and hide its own notifications and badges.</td> 
+<td>The application can show and hide its own notifications and badges.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/packagemanager.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can install and uninstall application packages.</td> 
+<td>The application can install and uninstall application packages.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/packagemanager.clearcache</code></td>
 <td>public</td>
 <td></td>
 <td>3.0</td>
-<td>The application can clear other applications&#39; caches.</td>
+<td>The application can clear other applications' caches.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/packagemanager.info</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can retrieve detailed application package information.</td> 
+<td>The application can retrieve detailed application package information.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/power</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can control power-related settings, such as dimming the screen.</td> 
+<td>The application can control power-related settings, such as dimming the screen.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/push</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can receive notifications from the Internet. This can result in additional charges depending on the user&#39;s payment plan.</td>
+<td>The application can receive notifications from the Internet. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/reboot</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can restart the device. </td> 
+<td>The application can restart the device. </td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/recorder</code></td>
 <td>public</td>
 <td>Microphone</td>
 <td>2.3.1</td>
-<td>The application can record video and audio.</td> 
+<td>The application can record video and audio.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/screenshot</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can capture screenshots.</td> 
+<td>The application can capture screenshots.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/secureelement</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td> 
+<td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/systemmonitor</code></td>
@@ -1278,26 +1278,26 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can read system information, including information from the CPU and RAM.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/systemsettings.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can read and write all system settings.</td> 
+<td>The application can read and write all system settings.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/telephony</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the status of calls.</td> 
+<td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the status of calls.</td>
 </tr>
-<tr class="platform-level"> 
+<tr class="platform-level">
 <td><code>http://tizen.org/privilege/telephony.admin</code></td>
 <td>platform</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.</td> 
+<td>The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.</td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/use_ir</code></td>
@@ -1306,26 +1306,26 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <td>3.0</td>
 <td>The application can use the infrared transmitter.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/volume.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td> 
+<td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td>
 </tr>
 <tr>
-<td><code>http://tizen.org/privilege/widget.viewer</code></td> 
+<td><code>http://tizen.org/privilege/widget.viewer</code></td>
 <td>public</td>
 <td></td>
-<td>2.3.1</td> 
-<td>The application can show widgets, and information from their associated applications, on the home screen.</td> 
+<td>2.3.1</td>
+<td>The application can show widgets, and information from their associated applications, on the home screen.</td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/window.priority.set</code></td>
 <td>public</td>
 <td></td>
 <td>2.3.1</td>
-<td>The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This can prevent the user from interacting with other applications or screens until the window for the application is closed.</td> 
+<td>The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This can prevent the user from interacting with other applications or screens until the window for the application is closed.</td>
 </tr>
 </tbody>
 </table>
@@ -1339,40 +1339,40 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <p align="center" class="Table"><strong>Table: Non-API bound privileges</strong></p>
 <table>
 <tbody>
-<tr> 
+<tr>
 <th>Privilege</th>
 <th>Level</th>
 <th>Since<p>(mobile/wearable)</p></th>
-<th>Description</th> 
-</tr> 
-<tr> 
+<th>Description</th>
+</tr>
+<tr>
 <td><code>http://tizen.org/privilege/internet</code></td>
 <td>public</td>
 <td>2.3 / 2.3.1</td>
 <td>Most of the mobile and wearable devices use a cellular network for IP communication. However, the cellular network can cause data costs and an application that sends data through the Internet can be crucial for user privacy. Due to the importance of the functionality, a privilege for controlling application Internet access has been added.
 <p>The new privilege is coupled with IP addresses of the destination and source of the IP packets. If your socket is connecting to or listening for any IP address except 127.0.0.1, this privilege is required to communicate properly. If your application does not have this privilege, the connection is blocked in the kernel layer and returns an error in the <code>connect()</code> function as the permission is denied. If you are listening to a socket, you never receive any packets from the outside without errors on the socket functions.</p>
-<p>If you are using the <code>listen()</code> and <code>connect()</code> functions between the local loopback interface (127.0.0.1), you cannot connect to a random application (due to sandboxing) no matter how you add this privilege. However, you can connect between multiple processes of the same application binary.</p></td> 
+<p>If you are using the <code>listen()</code> and <code>connect()</code> functions between the local loopback interface (127.0.0.1), you cannot connect to a random application (due to sandboxing) no matter how you add this privilege. However, you can connect between multiple processes of the same application binary.</p></td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/mediastorage</code></td>
 <td>public</td>
 <td>2.3 / 2.3.1</td>
 <td>When you connect the device to a computer (Windows or Mac) through USB, you can access a dedicated media storage area shown as massive media storage. This region of the storage is called media storage and is usually used for multimedia files, such as photos, videos, and music files. Since this storage area is used for user private data, access to it must be protected with a privilege.
-<p>If your application does not have this privilege, no file operations into the media storage area succeed and you receive a permission denied error. If you have this privilege, you can read and write directories and files, create new files, and delete files in the storage area.</p></td> 
+<p>If your application does not have this privilege, no file operations into the media storage area succeed and you receive a permission denied error. If you have this privilege, you can read and write directories and files, create new files, and delete files in the storage area.</p></td>
 </tr>
-<tr> 
+<tr>
 <td><code>http://tizen.org/privilege/externalstorage</code></td>
 <td>public</td>
 <td>2.3 / 2.3.1</td>
 <td>Similar to the media storage, many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage must be protected with a privilege. You can find the absolute path of the external storage with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API functions, such as <code>storage_get_root_directory()</code>.
-<p>If your application does not have this privilege, all file operations fail with a permission denied error. If you have this privilege, you have full access to the external storage.</p></td> 
+<p>If your application does not have this privilege, all file operations fail with a permission denied error. If you have this privilege, you have full access to the external storage.</p></td>
 </tr>
-<tr> 
-<td><code>http://tizen.org/privilege/externalstorage.appdata</code></td> 
+<tr>
+<td><code>http://tizen.org/privilege/externalstorage.appdata</code></td>
 <td>public</td>
 <td>2.3 / 2.3.1</td>
 <td>Many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage must be protected with a privilege.
-<p>If your application does not have this privilege, no file operations with the application data stored in the external storage area succeed and you receive a permission denied error. If you have this privilege, you can store data in the application-specific directory of the external storage. You can find the path for storing data in the external storage with, for example, the <code>app_get_external_data_path()</code>, <code>app_get_external_cache_path()</code>, and <code>app_get_external_shared_data_path()</code> functions.</p></td> 
+<p>If your application does not have this privilege, no file operations with the application data stored in the external storage area succeed and you receive a permission denied error. If you have this privilege, you can store data in the application-specific directory of the external storage. You can find the path for storing data in the external storage with, for example, the <code>app_get_external_data_path()</code>, <code>app_get_external_cache_path()</code>, and <code>app_get_external_shared_data_path()</code> functions.</p></td>
 </tr>
 <tr>
 <td><code>http://tizen.org/privilege/appdir.shareddata</code></td>
@@ -1382,7 +1382,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <p>The <code>app_get_shared_data_path()</code> and <code>app_manager_get_shared_data_path()</code> functions return an error when the application does not have this privilege. Note that the <code>shared/data</code> directory is writable for the application itself and readable for all other applications. You must be careful when you use this privilege and share data through the <code>shared/data</code> directory. For a more secure way of sharing files with another application, try to pass the file path through an application control.</p></td>
  </tr>
 </tbody>
-</table> 
+</table>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.training/html/native/details/sign_certificate_n.htm b/org.tizen.training/html/native/details/sign_certificate_n.htm
index a0501f5..c3f53c3 100644 (file)
--- a/org.tizen.training/html/native/details/sign_certificate_n.htm
+++ b/org.tizen.training/html/native/details/sign_certificate_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Application Signing and Certificates</title>  
+       <title>Application Signing and Certificates</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -26,10 +26,10 @@
                        <li><a href="#type">Signature Type</a></li>
                        <li><a href="#sec_priv">Certificate and API Privileges</a></li>
                        <li><a href="#flow">Signing Flow and Getting Certificates</a></li>
-                       <li><a href="#specification">Signature Specification</a></li>                   
+                       <li><a href="#specification">Signature Specification</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Application Signing and Certificates</h1>
@@ -40,13 +40,13 @@
 <p>Through application signing, Tizen achieves the following goals:</p>
 <ul>
 <li>Ensuring application integrity: Users can download an application that has not been tampered with after development.</li>
-<li>Identifying the application developer: The applications with the same signing key are regarded as developed by the same developer. A set of applications with same developer&#39;s signing key can share secured resources as the developer intended.</li>
+<li>Identifying the application developer: The applications with the same signing key are regarded as developed by the same developer. A set of applications with same developer's signing key can share secured resources as the developer intended.</li>
 <li>Proof of store validation: An application store performs some validation checks before distributing an application. As the proof of store validation, the application store signs the application.</li>
 <li>Enforcing proper usage of privileged APIs: An application distributor, such as an application store, can restrict the API set used by the application by signing a key with a proper privilege.</li>
 </ul>
-       
+
        <h2 id="type">Signature Type</h2>
-       
+
 <p>All Tizen applications must have at least 2 signatures:</p>
 <ul>
 <li>Author signature:
@@ -54,7 +54,7 @@
 <li>You sign the author signature with your own author signing key in the Tizen Studio.</li>
 <li>Applications with the same author signing key are regarded as developed by the same developer.</li>
 <li>Application upgrade is allowed only when the author signature of the old version and the new version are signed with a same author signing key.</li>
-<li>A set of applications with a same author&#39;s signing key can share secured resources as the author (developer) intended.</li>
+<li>A set of applications with a same author's signing key can share secured resources as the author (developer) intended.</li>
 </ul>
 </li>
 <li>Distributor signature:
@@ -110,7 +110,7 @@
 
 
        <h2 id="flow">Signing Flow and Getting Certificates</h2>
-       
+
 <p>You can sign your application with your own author signing key and a testing distributor signing key in the Tizen Studio. With those, you can install and test the application on your test device and an emulator.</p>
 <p>When the application is submitted to a store after development, the store removes the testing distributor signature and adds the store distributor signature for the application release. Normal applications are signed with the public level distributor signing key in the store. Some applications granted from a device vendor are allowed to be signed with the partner level distributor signing key. Signing with the platform level distributor key is permitted only for the internal application of a device vendor or Tizen.</p>
 
@@ -122,7 +122,7 @@
 <p>The testing distributor certificate and its signing key with the public level are preloaded in the Tizen Studio. The author certificate and its signing key can also be created in the Tizen Studio. For more information, see <a href="../../../../org.tizen.studio/html/common_tools/certificate_registration.htm">Working with the Certificate Profile</a>.</p>
 <p>A device vendor can disallow unauthorized applications to be installed on its devices to protect its devices from viruses and malwares. Samsung also disallows unauthorized applications to be installed on its Tizen devices. In such cases, you must get an author certificate and a distributor certificate from the device vendor. For more information, see <a href="https://developer.tizen.org/community/tip-tech/issuing-tizen-certificate-certificate-extension-ver-1.2" target="_blank">Issuing a Tizen Certificate and Running Applications in Commercial Devices</a>.</p>
 
-       <h2 id="specification">Signature Specification</h2>     
+       <h2 id="specification">Signature Specification</h2>
 
 <p>The application signing scheme of Tizen follows the specification of the <a href="http://www.w3.org/TR/widgets-digsig/" target="_blank">XML Digital signature for widget specified by W3C</a>.</p>
 
diff --git a/org.tizen.training/html/native/details/tizen_apis_n.htm b/org.tizen.training/html/native/details/tizen_apis_n.htm
index 3e2ce4d..b5bb8c9 100644 (file)
--- a/org.tizen.training/html/native/details/tizen_apis_n.htm
+++ b/org.tizen.training/html/native/details/tizen_apis_n.htm
@@ -5,31 +5,31 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Tizen APIs</title>  
+       <title>Tizen APIs</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
 <h1>Tizen APIs</h1>
 
 <p>You can develop native applications using the native API modules. You can create diverse applications with a variety of features, and design versatile applications and intriguing user interfaces with text and graphics while taking advantage of many device functionalities, such as sensors and call operations. In addition, you can, for example, manage content and media files, use network and social services, and provide messaging and embedded Web browsing functionality.</p>
 
-<p>The Tizen platform also provides a special kind of native application model, which consists of 1 UI native application and 1 or more native service applications.</p>                       
-                       
+<p>The Tizen platform also provides a special kind of native application model, which consists of 1 UI native application and 1 or more native service applications.</p>
+
 <p>The native API specification consists of multiple API modules that represent the versatility and wide variety of features that you can implement in your native application. Each API module represents a set of logically similar submodule APIs which can be grouped into the same category. This structure was designed to make it easier for you to narrow down and find the specific methods that you require to implement a feature in your native application.</p>
 
 <p>There are 2 types of submodules - Tizen native modules and open source modules. The integration of open source modules in the native API structure allows you to add additional features by using well-known open source libraries. This is particularly advantageous for developers who are familiar with certain libraries because they can quickly add features and use previously written code in certain cases.</p>
@@ -42,14 +42,14 @@
     </div>
 
 <p align="center" class="Table"><strong>Table: Mobile native API modules</strong></p>
-<table border="1" style="width: 100%"> 
-       <tbody> 
-               <tr> 
-                       <th>API module</th>                                     
-                       <th>API submodule</th> 
+<table border="1" style="width: 100%">
+       <tbody>
+               <tr>
+                       <th>API module</th>
+                       <th>API submodule</th>
                        <th>Functionality</th>
                        <th>Description</th>
-               </tr>   
+               </tr>
        <tr>
                <td rowspan="5"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account</a></td>
                <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
@@ -63,7 +63,7 @@
        <tr>
                <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__FIDO__MODULE.html">FIDO Client</a>
                           <p><strong>(since 3.0)</strong></p></td>
-               <td>Allows you to utilize the device&#39;s available authenticators for online service integration.</td>
+               <td>Allows you to utilize the device's available authenticators for online service integration.</td>
         </tr>
        <tr>
                <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth 2.0</a>
@@ -82,9 +82,9 @@
                <tr>
                        <td rowspan="12"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application</a></td>
-                       <td>Manages the application&#39;s main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications.
+                       <td>Manages the application's main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications.
            </td>
-                       <td rowspan="12">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user&#39;s application preferences.
+                       <td rowspan="12">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user's application preferences.
                        <p>Guides:</p>
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/alarm/alarm_cover_n.htm">Alarms and Scheduling</a></li>
@@ -107,37 +107,37 @@
         </tr>
                 <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge</a></td>
-                       <td>Creates and removes <a href="../../../../org.tizen.guides/html/native/app_management/app_icons_n.htm">badges</a> on the application&#39;s home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.</td>
+                       <td>Creates and removes <a href="../../../../org.tizen.guides/html/native/app_management/app_icons_n.htm">badges</a> on the application's home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.</td>
         </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a></td>
                        <td>Provides a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.</td>
-        </tr>    
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control</a></td>
                        <td>Exchanges data between applications by allowing an application to query the public database of another application that has opted to be a data provider.</td>
-        </tr> 
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a></td>
                        <td>Sends and receives small messages between applications without interference from other applications and processes. Each message is a bundle.</td>
-        </tr>   
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification</a></td>
                        <td>Creates, inserts, and updates notifications so that applications can relay information to users. Visuals, sounds, or vibrations can be used as notifications. </td>
-        </tr>    
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a></td>
                        <td>Stores and receives information related to packages installed on the device. This is information can be, for example, the package name, path to the icon image, or the application version. It can also be used to check whether 2 package certificates match. If they match, they have been created by the same developer and can share resources securely. </td>
-        </tr>  
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a></td>
                        <td>Adds application shortcuts to the device home screen, the main landing screen of the device.
                        </td>
-        </tr> 
+        </tr>
         <tr>
             <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget</a><p><strong>(since 2.3.1)</strong></p></td>
             <td>Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.</td>
-        </tr>          
+        </tr>
                <tr>
                        <td rowspan="9"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
@@ -157,11 +157,11 @@
                <tr>
        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__GLIBC__FRAMEWORK.html">Glibc</a></td>
                        <td>Provides a standard C library.</td>
-        </tr>     
+        </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__GLIB__FRAMEWORK.html">Glib</a></td>
                        <td>Provides low-level libraries and advanced data structures, such as linked lists and hash tables, for use in application development.</td>
-        </tr> 
+        </tr>
                <tr>
                  <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a></td>
                        <td> Provides internationalization (i18n) support, such as flexibly generating date formats and numbers, depending on the locale setting of the device.</td>
@@ -169,19 +169,19 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBXML__FRAMEWORK.html">LibXML</a></td>
                        <td>Used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
-        </tr> 
+        </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
                        <td>Provides a library to process files in the <code>.zip</code> format. It can be used to zip, unzip and compress files.</td>
-        </tr> 
+        </tr>
                <tr>
        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENMP__FRAMEWORK.html">OpenMP</a></td>
                        <td>Supports shared memory multiprocessing. This can be used for complex tasks on multicore processors. </td>
-        </tr> 
+        </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite</a></td>
                        <td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
-        </tr> 
+        </tr>
                <tr>
                        <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a></td>
@@ -195,16 +195,16 @@
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a></td>
                        <td>Maps MIME types to file extensions and vice versa. For example, the <code>.jpeg</code> file extension is mapped to the <code>image/jpeg</code> MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.</td>
-        </tr>  
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
                        <td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
-        </tr>     
+        </tr>
                <tr>
                        <td rowspan="4"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition</a></td>
                        <td>Detects user activities, such as walking, running, and being in a moving vehicle with a device.</td>
-                       <td rowspan="4">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted. 
+                       <td rowspan="4">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted.
                        <p>Guides:</p>
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/alarm/alarm_cover_n.htm">Alarms and Scheduling</a></li>
@@ -253,12 +253,12 @@
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages</a></td>
          <td>Allows composing, sending, and receiving of SMS, MMS, and WAP push messages.</td>
-        </tr>            
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push</a></td>
          <td>Allows receiving of push notifications from a push server.</td>
         </tr>
-                               
+
                                <tr>
          <td rowspan="23"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O</a></td>
@@ -271,7 +271,7 @@
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera</a></td>
          <td>Accesses the camera preview to display photo previews, focuses images, and captures images.</td>
-        </tr>               
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util</a></td>
          <td>Encodes and decodes JPEG images. It also provides tools, such as crop, resize, and rotate, to transform images.</td>
@@ -279,7 +279,7 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBEXIF__FRAMEWORK.html">libEXIF</a></td>
                        <td>Supports an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use the EXIF format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
-        </tr> 
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a></td>
          <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
@@ -288,15 +288,15 @@
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__MODULE.html">Media Controller</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for communication between the media controller server and the media controller client.</td>
                </tr>
-               <tr>    
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIADEMUXER__MODULE.html">Media Demuxer</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Provides functions for demuxing media data.</td>
-               </tr>   
-               <tr>    
+               </tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIAMUXER__MODULE.html">Media Muxer</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Provides functions for muxing media data.</td>
                </tr>
-               <tr>    
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__STREAMER__MODULE.html">Media Streamer</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Provides functions for building custom pipeline for streaming media.</td>
                </tr>
@@ -308,18 +308,18 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a></td>
          <td>Extracts metadata information from an input media file.</td>
         </tr>
-               <tr>    
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for editing the metadata of several popular audio formats.</td>
                </tr>
-               <tr>    
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functionality for barcode detection and generation.</td>
-               </tr>   
-               <tr>            
+               </tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
          <td>Renders multichannel 3D audio.</td>
-        </tr> 
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a></td>
          <td>Provides functions for media playback and can be used to control media playback attributes.</td>
@@ -327,11 +327,11 @@
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio</a></td>
          <td>Supports radio usage. This submodule API can be used for tasks, such as starting and stopping the radio and scanning for radio channels.</td>
-        </tr>          
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a></td>
          <td>Controls the recording of multimedia content. Recording process attributes, such as setting the recording filename and file format, can also be configured with this API submodule.</td>
-        </tr>     
+        </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__MODULE.html">Screen Mirroring</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for screen mirroring as a sink.</td>
@@ -340,23 +340,23 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
          <td>Provides functions to get and set sound parameters, such as output sound volume. Session policy, such as the handling of sound session interrupts, can also be configured with this API submodule.</td>
         </tr>
-               <tr>    
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for creating the thumbnail from an input media file.</td>
-               </tr>  
+               </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a></td>
          <td>Plays and stops tones.</td>
-        </tr>          
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util</a></td>
          <td>Transcodes or converts media files from one encoding to another. This API supports certain video codecs, audio codecs, and file formats.</td>
         </tr>
-               <tr>            
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player</a></td>
          <td>Plays and stops Waveform Audio File (WAV) format files.</td>
         </tr>
-               
+
         <tr>
          <td rowspan="13"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network</a></td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a></td>
@@ -374,7 +374,7 @@
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">Curl</a></td>
          <td>Provides a client-side URL data transfer library supporting HTTP, HTTPS, FTP, and file URIs, among many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
-        </tr> 
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__DNSSD__MODULE.html">DNSSD</a><p><strong>(since 3.0)</strong></p></td>
          <td>Provides functions for network service discovery using DNSSD.</td>
@@ -382,7 +382,7 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__HTTP__MODULE.html">HTTP</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Allows you to connect to a Web server to fetch and transmit a Web resource.</td>
-               </tr>           
+               </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">Iotcon</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Provides functions for IoT connectivity.</td>
@@ -390,7 +390,7 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__MTP__MODULE.html">MTP</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Manages Media Transfer Protocol (MTP) file transfers between 2 devices.</td>
-               </tr>           
+               </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a></td>
          <td>Allows management, such as registering and deregistering event listeners, of short-range wireless near field communication (NFC). This submodule API must also be used to read, write, receive, and send NFC messages.</td>
@@ -399,23 +399,23 @@
                <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard</a>
                <p><strong>(since 2.3.1)</strong></p></td>
                <td>Provides application communication to the SE applet functions.</td>
-               </tr>           
+               </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SSDP__MODULE.html">SSDP</a><p><strong>(since 3.0)</strong></p></td>
          <td>Provides functions for network service discovery using SSDP.</td>
-        </tr>          
-               <tr>    
+        </tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__VPN__SERVICE__MODULE.html">VPN Service</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Manages Virtual Private Network (VPN) connections between 2 VPN devices.</td>
-        </tr> 
+        </tr>
          <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi</a></td>
          <td>Manages Wi-Fi connections and monitors the state of Wi-Fi connections.</td>
-        </tr>   
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct</a></td>
          <td>Manages the settings of Wi-Fi Direct&trade;. This submodule API also provides functions to connect and disconnect remote devices that use Wi-Fi Direct&trade;.</td>
-        </tr> 
+        </tr>
         <tr>
          <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security</a></td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager</a></td>
@@ -450,7 +450,7 @@
                <tr>
             <td><a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides common interfaces, such as using a local service for various service infra.</td>
-        </tr>          
+        </tr>
                                <tr>
          <td rowspan="10"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
@@ -473,32 +473,32 @@
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a></td>
          <td>Provides functions to handle media keys from external devices that are connected to the Tizen device, such as the volume control buttons on a headset.</td>
-        </tr>  
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information</a></td>
-         <td>Obtains runtime information of a mobile device. For example, this submodule API can obtain information about the device&#39;s GPS.</td>
+         <td>Obtains runtime information of a mobile device. For example, this submodule API can obtain information about the device's GPS.</td>
         </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a></td>
          <td>Starts and stops sensors and receives sensor data.</td>
-        </tr>   
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a></td>
          <td>Obtains storage information, such as root directory, storage type (internal or external), storage status, and total available space size.</td>
-        </tr> 
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a></td>
          <td>Obtains information about the device, such as the platform and API version, device model, supported device features, and screen dimensions.</td>
-        </tr>      
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a></td>
          <td>Manages system settings, such as the lock screen settings.</td>
-        </tr>         
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for writing trace messages to the system trace buffer.</td>
                </tr>
-               
+
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
          <td>Sends log output and filters log messages from the dlog logging service.</td>
@@ -513,7 +513,7 @@
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm">Connectivity and Wireless</a></li>
                        <li><a href="../../../../org.tizen.guides/html/native/internationalization/internationalization_cover_n.htm">Internationalization</a></li></ul></td>
-        </tr>   
+        </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber utils</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for parsing and formatting phone numbers.</td>
@@ -534,7 +534,7 @@
                <tr>
                <td><a href="../../../../org.tizen.native.mobile.apireference/group__dali.html">DALi</a></td>
          <td>Provides a cross-platform 3D UI Toolkit for embedded systems.</td>
-               </tr>           
+               </tr>
                <tr>
                <td><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL</a></td>
          <td>Provides a collection of libraries that are independent and can be built on top of each other to provide useful features that complement the existing environment.</td>
@@ -550,7 +550,7 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for external outputs.</td>
-               </tr>        
+               </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__FONTCONFIG__FRAMEWORK.html">Fontconfig</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__FREETYPE__FRAMEWORK.html">Freetype</a></td>
          <td>Provides a text rendering library and font-handling library to let applications find a font or closely matching font.</td>
@@ -558,7 +558,7 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for creating and displaying an EFL socket window.</td>
-               </tr>            
+               </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
          <td>Provides functions for the graphics buffer.</td>
@@ -584,7 +584,7 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for starting the IME application life-cycle, for interacting with the current UI state of the IME, and getting attributes and events.</td>
-               </tr>    
+               </tr>
         <tr>
             <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">Input Method Manager</a><p><strong>(since 2.4)</strong></p></td>
             <td>Provides functions for launching the input method editor (IME) list and selector settings.</td>
@@ -592,11 +592,11 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control</a><p><strong>(since 2.4)</strong></p></td>
                        <td>Provides functions for registering commands and getting notifications when a registered command is recognized.</td>
-               </tr> 
+               </tr>
         <tr>
             <td><a href="../../../../org.tizen.native.mobile.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">Voice control elementary</a><p><strong>(since 2.4)</strong></p></td>
             <td>Provides functions to control UI components through voice commands.</td>
-        </tr>           
+        </tr>
                <tr>
          <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__JSONGLIB__FRAMEWORK.html">Json-Glib</a></td>
@@ -610,7 +610,7 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">WebView</a></td>
          <td>Displays and controls Web pages. This submodule API contains interfaces for browsing, tracking browsing history, and downloading Web content.</td>
                </tr>
-                   </tbody> 
+                   </tbody>
                  </table>
 
 <p>The following table describes the API modules in the wearable profile and the functionality of all their submodule APIs within that module. The table also acts as reference sources for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
@@ -619,16 +619,16 @@
         <strong>Note</strong>
         Except as noted, the wearable native APIs are available since Tizen 2.3.1.
     </div>
-  
-<p align="center" class="Table"><strong>Table: Wearable native API modules</strong></p> 
+
+<p align="center" class="Table"><strong>Table: Wearable native API modules</strong></p>
 <table border="1" style="width: 100%">
        <tbody>
-               <tr> 
-                       <th>API module</th>                                     
-                       <th>API submodule</th> 
+               <tr>
+                       <th>API module</th>
+                       <th>API submodule</th>
                        <th>Functionality</th>
                        <th>Description</th>
-               </tr>   
+               </tr>
                <tr>
                <td rowspan="5"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account</a></td>
                <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
@@ -642,8 +642,8 @@
        <tr>
                <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__FIDO__MODULE.html">FIDO Client</a>
                           <p><strong>(since 3.0)</strong></p></td>
-               <td>Allows you to utilize the device&#39;s available authenticators for online service integration.</td>
-        </tr>          
+               <td>Allows you to utilize the device's available authenticators for online service integration.</td>
+        </tr>
        <tr>
                <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth 2.0</a>
                           <p><strong>(since 2.4)</strong></p></td>
@@ -657,13 +657,13 @@
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
          <td>Provides a library for using an open standard for secure authorization. This library enables users to securely log into an account on an application by using their logon credentials from another secondary account that they can have with another account provider or application. </td>
-        </tr>          
+        </tr>
                <tr>
                        <td rowspan="10"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application</a></td>
-                       <td>Manages the application&#39;s main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications.
+                       <td>Manages the application's main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications.
            </td>
-                       <td rowspan="10">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user&#39;s application preferences.
+                       <td rowspan="10">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user's application preferences.
 
                        <p>Guides:</p>
                        <ul>
@@ -681,24 +681,24 @@
         </tr>
                 <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">Badge</a></td>
-                       <td>Creates and removes <a href="../../../../org.tizen.guides/html/native/app_management/app_icons_n.htm">badges</a> on the application&#39;s home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.</td>
+                       <td>Creates and removes <a href="../../../../org.tizen.guides/html/native/app_management/app_icons_n.htm">badges</a> on the application's home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.</td>
         </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a></td>
                        <td>Provides a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.</td>
-        </tr>    
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control</a></td>
                        <td>Exchanges data between applications by allowing an application to query the public database of another application that has opted to be a data provider.</td>
-        </tr> 
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a></td>
                        <td>Sends and receives small messages between applications without interference from other applications and processes. Each message is a bundle.</td>
-        </tr>      
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a></td>
                        <td>Stores and receives information related to packages installed on the device. This is information can be, for example, the package name, path to the icon image, or the application version. It can also be used to check whether 2 package certificates match. If they match, they have been created by the same developer and can share resources securely. </td>
-        </tr> 
+        </tr>
                <tr>
           <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a></td>
           <td>Handles Tizen watch application state changes and system events. It is also used to start and exit the main event loop of watch applications.
@@ -707,7 +707,7 @@
         <tr>
             <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget</a></td>
             <td>Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.</td>
-        </tr>          
+        </tr>
                <tr>
                        <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
@@ -718,15 +718,15 @@
                        <li><a href="../../../../org.tizen.guides/html/native/data/data_cover_n.htm">Data Storage and Management</a></li>
                        <li><a href="../../../../org.tizen.guides/html/native/internationalization/internationalization_cover_n.htm">Internationalization</a></li>
                        </ul></td>
-        </tr>       
+        </tr>
                <tr>
        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">EGlibc</a></td>
                        <td>Provides a standard C library.</td>
-        </tr>     
+        </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__GLIB__FRAMEWORK.html">Glib</a></td>
                        <td>Provides low-level libraries and advanced data structures, such as linked lists and hash tables, for use in application development.</td>
-        </tr> 
+        </tr>
                <tr>
                  <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a></td>
                        <td> Provides internationalization (i18n) support, such as flexibly generating date formats and numbers, depending on the locale setting of the device.</td>
@@ -734,19 +734,19 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIBXML__FRAMEWORK.html">LibXML</a></td>
                        <td>Used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
-        </tr> 
+        </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
                        <td>Provides a library to process files in the <code>.zip</code> format. It can be used to zip, unzip and compress files.</td>
-        </tr> 
+        </tr>
                <tr>
        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENMP__FRAMEWORK.html">OpenMP</a></td>
                        <td>Supports shared memory multiprocessing. This can be used for complex tasks on multicore processors. </td>
-        </tr> 
+        </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite</a></td>
                        <td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
-        </tr> 
+        </tr>
                <tr>
                        <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a></td>
@@ -755,16 +755,16 @@
                        <p>Guides:</p>
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/media/media_cover_n.htm">Media and Camera</a></li></ul></td>
-        </tr>  
+        </tr>
         <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
                        <td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
-        </tr>      
+        </tr>
                <tr>
                        <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition</a></td>
                        <td>Detects user activities, such as walking, running, and being in a moving vehicle with a device.</td>
-                       <td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted. 
+                       <td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted.
                        <p>Guides:</p>
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/location_sensors/location_sensors_cover_n.htm">Location and Sensors</a></li>      </ul></td>
@@ -781,7 +781,7 @@
                        <p>Guides:</p>
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/location_sensors/location_sensors_cover_n.htm">Location and Sensors</a></li></ul></td>
-        </tr>      
+        </tr>
                <tr>
          <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages</a></td>
@@ -791,11 +791,11 @@
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/messaging/messaging_cover_n.htm">Messaging</a></li></ul>
                </td>
-        </tr>            
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push</a></td>
          <td>Allows receiving of push notifications from a push server.</td>
-        </tr>                                  
+        </tr>
                <tr>
          <td rowspan="17"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O</a></td>
@@ -808,7 +808,7 @@
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera</a></td>
          <td>Accesses the camera preview to display photo previews, focuses images, and captures images.</td>
-        </tr>               
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util</a></td>
          <td>Encodes and decodes JPEG images. It also provides tools, such as crop, resize, and rotate, to transform images.</td>
@@ -816,20 +816,20 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIBEXIF__FRAMEWORK.html">libEXIF</a></td>
                        <td>Supports an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use the EXIF format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
-        </tr> 
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a></td>
          <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
         </tr>
-               <tr>    
+               <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIADEMUXER__MODULE.html">Media Demuxer</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Provides functions for demuxing media data.</td>
-               </tr>           
-               <tr>    
+               </tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIAMUXER__MODULE.html">Media Muxer</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Provides functions for muxing media data.</td>
                </tr>
-               <tr>    
+               <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__STREAMER__MODULE.html">Media Streamer</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Provides functions for building custom pipeline for streaming media.</td>
         </tr>
@@ -840,11 +840,11 @@
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a></td>
          <td>Extracts metadata information from an input media file.</td>
-        </tr>      
-               <tr>            
+        </tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
          <td>Renders efficiently multichannel 3D audio.</td>
-        </tr> 
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a></td>
          <td>Provides functions for media playback and can be used to control media playback attributes.</td>
@@ -852,24 +852,24 @@
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio</a></td>
          <td>Supports radio usage. This submodule API can be used for tasks, such as starting and stopping the radio and scanning for radio channels.</td>
-        </tr>          
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a></td>
          <td>Controls the recording of multimedia content. Recording process attributes, such as setting the recording filename and file format, can also be configured with this API submodule.</td>
-        </tr>        
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
          <td>Provides functions to get and set sound parameters, such as output sound volume. Session policy, such as the handling of sound session interrupts, can also be configured with this API submodule.</td>
-        </tr>        
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a></td>
          <td>Plays and stops tones.</td>
-        </tr>          
-               <tr>            
+        </tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player</a></td>
          <td>Plays and stops Waveform Audio File (WAV) format files.</td>
         </tr>
-               
+
         <tr>
          <td rowspan="11"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network</a></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a></td>
@@ -887,7 +887,7 @@
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">Curl</a></td>
          <td>Provides a client-side URL data transfer library supporting HTTP, HTTPS, FTP, and file URIs, among many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
-        </tr> 
+        </tr>
                                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__DNSSD__MODULE.html">DNSSD</a><p><strong>(since 3.0)</strong></p></td>
          <td>Provides functions for network service discovery using DNSSD.</td>
@@ -895,7 +895,7 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__HTTP__MODULE.html">HTTP</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Allows you to connect to a Web server to fetch and transmit a Web resource.</td>
-               </tr>           
+               </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__IOT__CONNECTIVITY__MODULE.html">Iotcon</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Provides functions for IoT connectivity.</td>
@@ -903,7 +903,7 @@
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__MTP__MODULE.html">MTP</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Manages Media Transfer Protocol (MTP) file transfers between 2 devices.</td>
-               </tr>           
+               </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a></td>
          <td>Allows management, such as registering and deregistering event listeners, of short-range wireless near field communication (NFC). This submodule API must also be used to read, write, receive, and send NFC messages.</td>
@@ -912,15 +912,15 @@
                <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard</a>
                <p><strong>(since 2.3.1)</strong></p></td>
                <td>Provides application communication to the SE applet functions.</td>
-               </tr>           
+               </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SSDP__MODULE.html">SSDP</a><p><strong>(since 3.0)</strong></p></td>
          <td>Provides functions for network service discovery using SSDP.</td>
-        </tr>          
+        </tr>
          <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi</a></td>
          <td>Manages Wi-Fi connections and monitors the state of Wi-Fi connections.</td>
-        </tr>          
+        </tr>
         <tr>
          <td rowspan="3"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security</a></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager</a></td>
@@ -937,7 +937,7 @@
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a></td>
          <td>Retrieves and displays privilege information. This can be used to show a user the privileges that an application contains when they are downloading it onto their device. This is so that they are aware of the resources which the application may access. </td>
-        </tr>      
+        </tr>
                <tr>
          <td rowspan="1"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social</a></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a><p><strong>(since 3.0)</strong></p></td>
@@ -946,7 +946,7 @@
                 <p>Guides:</p>
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/personal/personal_cover_n.htm">Personal Data</a></li></ul></td>
-        </tr>          
+        </tr>
                <tr>
          <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
@@ -967,24 +967,24 @@
         </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information</a></td>
-         <td>Obtains runtime information of a wearable device. For example, this submodule API can obtain information about the device&#39;s GPS.</td>
+         <td>Obtains runtime information of a wearable device. For example, this submodule API can obtain information about the device's GPS.</td>
         </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a></td>
          <td>Starts and stops sensors and receives sensor data.</td>
-        </tr>   
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a></td>
          <td>Obtains storage information, such as root directory, storage type (internal or external), storage status, and total available space size.</td>
-        </tr> 
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a></td>
          <td>Obtains information about the device, such as the platform and API version, device model, supported device features, and screen dimensions.</td>
-        </tr>      
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a></td>
          <td>Manages system settings, such as the lock screen settings.</td>
-        </tr>                                 
+        </tr>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
          <td>Sends log output and filters log messages from the dlog logging service.</td>
@@ -999,11 +999,11 @@
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm">Connectivity and Wireless</a></li>
                        <li><a href="../../../../org.tizen.guides/html/native/internationalization/internationalization_cover_n.htm">Internationalization</a></li></ul></td>
-        </tr> 
+        </tr>
                <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber utils</a><p><strong>(since 3.0)</strong></p></td>
                        <td>Provides functions for parsing and formatting phone numbers.</td>
-               </tr>           
+               </tr>
                <tr>
          <td rowspan="7"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a></td>
@@ -1017,7 +1017,7 @@
                <tr>
                <td><a href="../../../../org.tizen.native.wearable.apireference/group__dali.html">DALi</a></td>
          <td>Provides a cross-platform 3D UI Toolkit for embedded systems.</td>
-               </tr>                   
+               </tr>
                <tr>
                <td><a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL</a></td>
          <td>Provides a collection of libraries that are independent and can be built on top of each other to provide useful features that complement the existing environment.</td>
@@ -1029,11 +1029,11 @@
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">EFL Extension</a></td>
          <td>Enhances the EFL libraries and includes device-specific features (such as support for rotary events).</td>
-        </tr>         
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__FONTCONFIG__FRAMEWORK.html">Fontconfig</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__FREETYPE__FRAMEWORK.html">Freetype</a></td>
          <td>Provides a text rendering library and font-handling library to let applications find a font or closely matching font.</td>
-        </tr> 
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
          <td>Provides functions for the graphics buffer.</td>
@@ -1060,14 +1060,14 @@
                 <p>Guides:</p>
                        <ul>
                        <li><a href="../../../../org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm">Connectivity and Wireless</a></li></ul></td>
-        </tr>  
+        </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__WEBVIEW.html">WebView</a></td>
          <td>Displays and controls Web pages. This submodule API contains interfaces for browsing, tracking browsing history, and downloading Web content.</td>
-        </tr>                  
-                   </tbody> 
-                 </table>                
-    
+        </tr>
+                   </tbody>
+                 </table>
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/feature/app_connectivity_n.htm b/org.tizen.training/html/native/feature/app_connectivity_n.htm
index d48f49b..ea0c519 100644 (file)
--- a/org.tizen.training/html/native/feature/app_connectivity_n.htm
+++ b/org.tizen.training/html/native/feature/app_connectivity_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Applications with Connectivity and Network</title>  
+       <title>Creating Applications with Connectivity and Network</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -26,10 +26,10 @@
             <li><a href="../../../../org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm">Connectivity and Wireless Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Creating Applications with Connectivity and Network</h1>
 
 <p>If you want to create applications that offer connectivity and network features to the user, Tizen provides various options for you.</p>
diff --git a/org.tizen.training/html/native/feature/app_connectivity_operation_n.htm b/org.tizen.training/html/native/feature/app_connectivity_operation_n.htm
index 8154884..c696b74 100644 (file)
--- a/org.tizen.training/html/native/feature/app_connectivity_operation_n.htm
+++ b/org.tizen.training/html/native/feature/app_connectivity_operation_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Network Operations</title>  
+       <title>Network Operations</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,10 +32,10 @@
             <li><a href="../../../../org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm">Connectivity and Wireless Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Network Operations</h1>
 
 <p>The basic tasks involved in network operations are connecting to the network, downloading HTTP content, and parsing data in the XML and JSON format. The following sections provide you with the fundamental building blocks for creating Tizen applications that download content and parse data efficiently.</p>
@@ -52,7 +52,7 @@
 
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 
@@ -77,7 +77,7 @@
 <pre class="prettyprint">
 #include &lt;tizen.h&gt;
 #include &lt;service_app.h&gt;
-#include &quot;service.h&quot; /* Auto-generated header file by the Tizen Studio */
+#include "service.h" /* Auto-generated header file by the Tizen Studio */
 #include &lt;net_connection.h&gt;
 
 static connection_h connection;
@@ -85,33 +85,33 @@ static connection_h connection;
 bool
 service_app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a connection handle */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = connection_create(&amp;connection);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Get the type of the current profile for data connection
-&nbsp;&nbsp;&nbsp;&nbsp;   net_state is the network type defined in the connection_type_e enumerator
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;connection_type_e net_state;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = <span class="highlight">connection_get_type(connection, &amp;net_state);</span>
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == CONNECTION_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Network connection type: %d&quot;, net_state);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    int error_code;
+
+    /* Create a connection handle */
+    error_code = connection_create(&amp;connection);
+    if (error_code != CONNECTION_ERROR_NONE)
+        return;
+
+    /*
+       Get the type of the current profile for data connection
+       net_state is the network type defined in the connection_type_e enumerator
+    */
+    connection_type_e net_state;
+    error_code = <span class="highlight">connection_get_type(connection, &amp;net_state);</span>
+    if (error_code == CONNECTION_ERROR_NONE) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Network connection type: %d", net_state);
+    }
+
+    return true;
 }
 
 void
 service_app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the created connection handle */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = connection_destroy(connection);
+    /* Destroy the created connection handle */
+    error_code = connection_destroy(connection);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 /* Assume that auto-generated functions from the Tizen Studio are here */
@@ -119,24 +119,24 @@ service_app_terminate(void *data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char ad[50] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_lifecycle_callback_s event_callback;
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
-
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = service_app_control;
-
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_low_battery, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_low_memory, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_lang_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_region_changed, &amp;ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, ad);
+    char ad[50] = {0,};
+    service_app_lifecycle_callback_s event_callback;
+    app_event_handler_h handlers[5] = {NULL,};
+
+    event_callback.create = service_app_create;
+    event_callback.terminate = service_app_terminate;
+    event_callback.app_control = service_app_control;
+
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
+                                  service_app_low_battery, &amp;ad);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
+                                  service_app_low_memory, &amp;ad);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
+                                  service_app_lang_changed, &amp;ad);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
+                                  service_app_region_changed, &amp;ad);
+
+    return service_app_main(argc, argv, &amp;event_callback, ad);
 }
 </pre>
 
@@ -157,8 +157,8 @@ main(int argc, char* argv[])
 
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/download&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/mediastorage&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/download&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/mediastorage&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 
@@ -171,7 +171,7 @@ main(int argc, char* argv[])
 <pre class="prettyprint">
 #include &lt;tizen.h&gt;
 #include &lt;service_app.h&gt;
-#include &quot;service.h&quot; /* Auto-generated header file by the Tizen Studio */
+#include "service.h" /* Auto-generated header file by the Tizen Studio */
 #include &lt;curl/curl.h&gt;
 
 /*
@@ -181,21 +181,21 @@ main(int argc, char* argv[])
 static void
 start_downloading(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Thread *thread;
+    appdata_s *ad = data;
+    Ecore_Thread *thread;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a thread that communicates with the main thread */
-&nbsp;&nbsp;&nbsp;&nbsp;thread = <span class="highlight">ecore_thread_feedback_run(download_thread_run_cb</span>, download_feedback_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;download_thread_end_cb, download_thread_cancel_cb,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad, EINA_FALSE);
+    /* Create a thread that communicates with the main thread */
+    thread = <span class="highlight">ecore_thread_feedback_run(download_thread_run_cb</span>, download_feedback_cb,
+                                       download_thread_end_cb, download_thread_cancel_cb,
+                                       ad, EINA_FALSE);
 }
 
 bool
 service_app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;start_downloading(data);
+    start_downloading(data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 /* Assume that auto-generated functions from the Tizen Studio are here */
@@ -203,24 +203,24 @@ service_app_create(void *data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char ad[50] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_lifecycle_callback_s event_callback;
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
-
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = service_app_control;
-
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_low_battery, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_low_memory, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_lang_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_region_changed, &amp;ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, ad);
+    char ad[50] = {0,};
+    service_app_lifecycle_callback_s event_callback;
+    app_event_handler_h handlers[5] = {NULL,};
+
+    event_callback.create = service_app_create;
+    event_callback.terminate = service_app_terminate;
+    event_callback.app_control = service_app_control;
+
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
+                                  service_app_low_battery, &amp;ad);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
+                                  service_app_low_memory, &amp;ad);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
+                                  service_app_lang_changed, &amp;ad);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
+                                  service_app_region_changed, &amp;ad);
+
+    return service_app_main(argc, argv, &amp;event_callback, ad);
 }</pre>
 
 <p>The <code>ecore_thread_feedback()</code> function allows the <code>download_thread_run_cb()</code> callback to call the <code>download_feedback_cb()</code> callback:</p>
@@ -229,79 +229,79 @@ main(int argc, char* argv[])
 static void
 download_thread_run_cb(void *data, Ecore_Thread *thread)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;download_contents(data);
+    download_contents(data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* ecore_thread_feedback() invokes download_feedback_cb() registered by ecore_thread_feedback_run () */
-&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">ecore_thread_feedback(thread, data);</span>
+    /* ecore_thread_feedback() invokes download_feedback_cb() registered by ecore_thread_feedback_run () */
+    <span class="highlight">ecore_thread_feedback(thread, data);</span>
 }
 
 static void
 download_contents(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (data == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;data is NULL&quot;);
+    if (data == NULL) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "data is NULL");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;CURL *curl;
+    appdata_s *ad = data;
+    CURL *curl;
 
-&nbsp;&nbsp;&nbsp;&nbsp;const char error_message[BUFFER_SIZE];
+    const char error_message[BUFFER_SIZE];
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Initialize the curl session */
-&nbsp;&nbsp;&nbsp;&nbsp;curl = curl_easy_init();
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;curl_easy_init()&quot;);
+    /* Initialize the curl session */
+    curl = curl_easy_init();
+    dlog_print(DLOG_DEBUG, LOG_TAG, "curl_easy_init()");
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Download the header */
-&nbsp;&nbsp;&nbsp;&nbsp;if (curl) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set URL to get */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CURLcode error_code = curl_easy_setopt(curl, CURLOPT_URL, &quot;http://developer.tizen.org&quot;);
+    /* Download the header */
+    if (curl) {
+        /* Set URL to get */
+        CURLcode error_code = curl_easy_setopt(curl, CURLOPT_URL, "http://developer.tizen.org");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Verify the SSL certificate */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_SSL_VERIFYPEER, 0L);
+        /* Verify the SSL certificate */
+        curl_easy_setopt(curl_handle, CURLOPT_SSL_VERIFYPEER, 0L);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Verify the host name in the SSL certificate */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_SSL_VERIFYHOST, 0L);
+        /* Verify the host name in the SSL certificate */
+        curl_easy_setopt(curl_handle, CURLOPT_SSL_VERIFYHOST, 0L);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Follow HTTP 3xx redirects */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_FOLLOWLOCATION, 1L);
+        /* Follow HTTP 3xx redirects */
+        curl_easy_setopt(curl_handle, CURLOPT_FOLLOWLOCATION, 1L);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Callback for writing data */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_WRITEFUNCTION, WriteMemoryCb);
+        /* Callback for writing data */
+        curl_easy_setopt(curl_handle, CURLOPT_WRITEFUNCTION, WriteMemoryCb);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Data pointer to pass to the write callback */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_WRITEDATA, (void *)&amp;chunk);
+        /* Data pointer to pass to the write callback */
+        curl_easy_setopt(curl_handle, CURLOPT_WRITEDATA, (void *)&amp;chunk);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* User-Agent: header */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_USERAGENT, &quot;TizenMaps/1.0&quot;);
+        /* User-Agent: header */
+        curl_easy_setopt(curl_handle, CURLOPT_USERAGENT, "TizenMaps/1.0");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Provide a buffer for storing errors */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_ERRORBUFFER, errbuf);
+        /* Provide a buffer for storing errors */
+        curl_easy_setopt(curl_handle, CURLOPT_ERRORBUFFER, errbuf);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Timeout for the entire request */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_TIMEOUT, TIZEN_CFG_CURL_TIMEOUT);
+        /* Timeout for the entire request */
+        curl_easy_setopt(curl_handle, CURLOPT_TIMEOUT, TIZEN_CFG_CURL_TIMEOUT);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Callback to progress meter function */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_XFERINFOFUNCTION, XferInfoCb);
+        /* Callback to progress meter function */
+        curl_easy_setopt(curl_handle, CURLOPT_XFERINFOFUNCTION, XferInfoCb);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Switch off the progress meter */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_setopt(curl_handle, CURLOPT_NOPROGRESS, 0L);
+        /* Switch off the progress meter */
+        curl_easy_setopt(curl_handle, CURLOPT_NOPROGRESS, 0L);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Perform a blocking file transfer */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = curl_easy_perform(curl);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;curl_easy_perform(curl): %s (%d)&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_strerror(error_code), error_code);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == CURLE_ABORTED_BY_CALLBACK)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Clean up and display cancel message */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (error_code != CURLE_OK)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display failure message */
+        /* Perform a blocking file transfer */
+        error_code = curl_easy_perform(curl);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "curl_easy_perform(curl): %s (%d)",
+                   curl_easy_strerror(error_code), error_code);
+        if (error_code == CURLE_ABORTED_BY_CALLBACK)
+            /* Clean up and display cancel message */
+        else if (error_code != CURLE_OK)
+            /* Display failure message */
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curl_easy_cleanup(curl);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;curl_easy_cleanup(ad-&gt;curl)&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display failure message */
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        curl_easy_cleanup(curl);
+        dlog_print(DLOG_DEBUG, LOG_TAG, "curl_easy_cleanup(ad-&gt;curl)");
+    } else {
+        /* Display failure message */
+    }
 }
 
 /*
@@ -311,24 +311,24 @@ download_contents(void *data)
 static void
 download_feedback_cb(void *data, Ecore_Thread *thread, void *msg_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* TODO: Something that you want here */
-&nbsp;&nbsp;&nbsp;&nbsp;if (msg_data == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;msg_data is NULL&quot;);
+    /* TODO: Something that you want here */
+    if (msg_data == NULL) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "msg_data is NULL");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 }
 
 static void
 download_thread_end_cb(void *data, Ecore_Thread *thread)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;thread end!&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "thread end!");
 }
 
 static void
 download_thread_cancel_cb(void *data, Ecore_Thread *thread)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;thread cancel!&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "thread cancel!");
 }
 </pre>
 
@@ -340,8 +340,8 @@ download_thread_cancel_cb(void *data, Ecore_Thread *thread)
 
 <p>The following figure illustrates the download states:</p>
 
-<p align="center"><strong>Figure: Download states</strong></p> 
-<p align="center"><img alt="Download states" src="../../images/connectivity_download_state.png" /></p> 
+<p align="center"><strong>Figure: Download states</strong></p>
+<p align="center"><img alt="Download states" src="../../images/connectivity_download_state.png" /></p>
 
 <p>The <strong>Start</strong> step begins to download content. If the queue is empty, the state is transited to downloading (<code>DOWNLOAD_STATE_COMPLETED</code>). Otherwise, the request is queued. The application can pause, cancel, or resume the download based on user interaction. Whenever the user makes a request, the state of the download is transited accordingly to paused, canceled, or downloading.</p>
 
@@ -350,7 +350,7 @@ download_thread_cancel_cb(void *data, Ecore_Thread *thread)
 <pre class="prettyprint">
 #include &lt;tizen.h&gt;
 #include &lt;service_app.h&gt;
-#include &quot;service.h&quot; /* Auto-generated header file by the Tizen Studio */
+#include "service.h" /* Auto-generated header file by the Tizen Studio */
 #include &lt;download.h&gt;
 
 download_error_e error;
@@ -359,85 +359,85 @@ int download_id;
 void
 state_changed_cb(int download_id, download_state_e state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Download state is completed, failed, or canceled, destroy the handle */
-&nbsp;&nbsp;&nbsp;&nbsp;if (state &gt;= DOWNLOAD_STATE_COMPLETED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Download completed!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (download_destroy(download_id) == DOWNLOAD_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Successfully released the memory of a download request!&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* Download state is completed, failed, or canceled, destroy the handle */
+    if (state &gt;= DOWNLOAD_STATE_COMPLETED) {
+        dlog_print(DLOG_INFO, LOG_TAG, "Download completed!");
+        if (download_destroy(download_id) == DOWNLOAD_ERROR_NONE) {
+            dlog_print(DLOG_INFO, LOG_TAG, "Successfully released the memory of a download request!");
+        }
+    }
 }
 
 /* Callback to be triggered by download_set_progress_cb() */
 static void
 progress_cb(int download_id, unsigned long long received, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;received: %llu of %llu&quot;, received, *((unsigned long long*)user_data));
+    dlog_print(DLOG_INFO, LOG_TAG, "received: %llu of %llu", received, *((unsigned long long*)user_data));
 }
 
 /* Download the file with notification to default file name and location */
 int
 start_downloading()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a download handle */
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_create(&amp;download_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set a callback to get the state */
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_set_state_changed_cb(download_id, state_changed_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_set_progress_cb(download_id, progress_cb, &amp;content_size);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the URL for downloading content */
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_set_url(download_id, &quot;http://developer.tizen.org&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Set the destination path and file name
-&nbsp;&nbsp;&nbsp;&nbsp;   If the values are not given, the default storage and an auto-generated file name are used
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;char *data_path = app_get_data_path();
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_set_destination(download_id, data_path);
-&nbsp;&nbsp;&nbsp;&nbsp;free(data_path);
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_set_file_name(download_id, &quot;downloaded_file.bin&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Set auto download
-&nbsp;&nbsp;&nbsp;&nbsp;   If you set the second parameter to true, the download manager continues downloading
-&nbsp;&nbsp;&nbsp;&nbsp;   even after the client process is terminated
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_set_auto_download(download_id, true);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Start content download */
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_start(download_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return error;
+    /* Create a download handle */
+    error = download_create(&amp;download_id);
+
+    /* Set a callback to get the state */
+    error = download_set_state_changed_cb(download_id, state_changed_cb, NULL);
+    error = download_set_progress_cb(download_id, progress_cb, &amp;content_size);
+
+    /* Set the URL for downloading content */
+    error = download_set_url(download_id, "http://developer.tizen.org");
+
+    /*
+       Set the destination path and file name
+       If the values are not given, the default storage and an auto-generated file name are used
+    */
+    char *data_path = app_get_data_path();
+    error = download_set_destination(download_id, data_path);
+    free(data_path);
+    error = download_set_file_name(download_id, "downloaded_file.bin");
+
+    /*
+       Set auto download
+       If you set the second parameter to true, the download manager continues downloading
+       even after the client process is terminated
+    */
+    error = download_set_auto_download(download_id, true);
+
+    /* Start content download */
+    error = download_start(download_id);
+
+    return error;
 }
 
 int
 end_downloading()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release callbacks */
-&nbsp;&nbsp;&nbsp;&nbsp;download_unset_progress_cb(download_id);
-&nbsp;&nbsp;&nbsp;&nbsp;download_unset_state_changed_cb(download_id);
+    /* Release callbacks */
+    download_unset_progress_cb(download_id);
+    download_unset_state_changed_cb(download_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the download handle */
-&nbsp;&nbsp;&nbsp;&nbsp;error = download_destroy(download_id);
+    /* Destroy the download handle */
+    error = download_destroy(download_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return error;
+    return error;
 }
 
 bool
 service_app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;start_downloading(data);
+    start_downloading(data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 service_app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;end_downloading();
+    end_downloading();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 /* Assume that auto-generated functions from the Tizen Studio are here */
@@ -445,24 +445,24 @@ service_app_terminate(void *data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char ad[50] = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_lifecycle_callback_s event_callback;
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
-
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = service_app_control;
-
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_low_battery, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_low_memory, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_lang_changed, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_region_changed, &amp;ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, ad);
+    char ad[50] = {0,};
+    service_app_lifecycle_callback_s event_callback;
+    app_event_handler_h handlers[5] = {NULL,};
+
+    event_callback.create = service_app_create;
+    event_callback.terminate = service_app_terminate;
+    event_callback.app_control = service_app_control;
+
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
+                                  service_app_low_battery, &amp;ad);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
+                                  service_app_low_memory, &amp;ad);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
+                                  service_app_lang_changed, &amp;ad);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
+                                  service_app_region_changed, &amp;ad);
+
+    return service_app_main(argc, argv, &amp;event_callback, ad);
 }
 </pre>
 
@@ -478,8 +478,8 @@ main(int argc, char* argv[])
 
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/filesystem.read&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/filesystem.write&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/filesystem.read&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/filesystem.write&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 
@@ -497,95 +497,95 @@ main(int argc, char* argv[])
 static void
 parse_downloaded(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char *file_name = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;download_get_downloaded_file_path((int)data, &amp;file_name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;got file %s&quot;, file_name);
+    char *file_name = NULL;
+    download_get_downloaded_file_path((int)data, &amp;file_name);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "got file %s", file_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Parse a file */
-&nbsp;&nbsp;&nbsp;&nbsp;call_parser(file_name);
+    /* Parse a file */
+    call_parser(file_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Remove the file when no longer used */
-&nbsp;&nbsp;&nbsp;&nbsp;remove(file_name);
+    /* Remove the file when no longer used */
+    remove(file_name);
 }
 
 static void
 call_parser(char *file_name)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int parse_reply = json_parse(file_name, ad_);
-&nbsp;&nbsp;&nbsp;&nbsp;if (parse_reply == -1) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad_-&gt;popup_label, &quot;&lt;align=center&gt;This file is not in JSON format&lt;/align&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else if (parse_reply == 1) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad_-&gt;popup_label, &quot;&lt;align=center&gt;File parsed, however some nodes &quot;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;weren&#39;t imported due to the limit of nesting level&lt;/align&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad_-&gt;popup_label, &quot;&lt;align=center&gt;File parsed&lt;/align&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int parse_reply = json_parse(file_name, ad_);
+    if (parse_reply == -1) {
+        elm_object_text_set(ad_-&gt;popup_label, "&lt;align=center&gt;This file is not in JSON format&lt;/align&gt;");
+    } else if (parse_reply == 1) {
+        elm_object_text_set(ad_-&gt;popup_label, "&lt;align=center&gt;File parsed, however some nodes "
+                            "weren't imported due to the limit of nesting level&lt;/align&gt;");
+    } else {
+        elm_object_text_set(ad_-&gt;popup_label, "&lt;align=center&gt;File parsed&lt;/align&gt;");
+    }
 }
 
 /* Parse a given JSON file */
 int
 json_parse(char *file_name, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;GError *error = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;JsonParser *parser = json_parser_new();
+    appdata_s *ad = (appdata_s *)data;
+    GError *error = NULL;
+    JsonParser *parser = json_parser_new();
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Load a file to parse */
-&nbsp;&nbsp;&nbsp;&nbsp;json_parser_load_from_file(parser, file_name, &amp;error);
+    /* Load a file to parse */
+    json_parser_load_from_file(parser, file_name, &amp;error);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;parsing %s&quot;, file_name);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "parsing %s", file_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (error) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;parsing failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_object_unref(parser);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_error_free(error);
+    if (error) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "parsing failed");
+        g_object_unref(parser);
+        g_error_free(error);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Iterate through root members */
-&nbsp;&nbsp;&nbsp;&nbsp;JsonNode *root = json_parser_get_root(parser);
+    /* Iterate through root members */
+    JsonNode *root = json_parser_get_root(parser);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (json_node_get_node_type(root) == JSON_NODE_NULL
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|| json_node_get_node_type(root) == JSON_NODE_VALUE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;not supported root&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_object_unref(parser);
+    if (json_node_get_node_type(root) == JSON_NODE_NULL
+        || json_node_get_node_type(root) == JSON_NODE_VALUE) {
+        dlog_print(DLOG_DEBUG, LOG_TAG, "not supported root");
+        g_object_unref(parser);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return -1;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;parsing_in_progress = true;
+    ad-&gt;parsing_in_progress = true;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show editor item */
-&nbsp;&nbsp;&nbsp;&nbsp;create_editor_view(data, NULL, NULL);
+    /* Show editor item */
+    create_editor_view(data, NULL, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;switch (json_node_get_node_type(root)) {
-&nbsp;&nbsp;&nbsp;&nbsp;case JSON_NODE_OBJECT:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JsonObject *object;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;object = json_node_get_object(root);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;json_object_foreach_member(object, object_member_cb, (gpointer)root_associated);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case JSON_NODE_ARRAY:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JsonArray *array;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;array = json_node_get_array(root);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;json_array_foreach_element(array, array_element_cb, (gpointer)root_associated);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    switch (json_node_get_node_type(root)) {
+    case JSON_NODE_OBJECT:
+        ;
+        JsonObject *object;
+        object = json_node_get_object(root);
+        json_object_foreach_member(object, object_member_cb, (gpointer)root_associated);
+        break;
+    case JSON_NODE_ARRAY:
+        ;
+        JsonArray *array;
+        array = json_node_get_array(root);
+        json_array_foreach_element(array, array_element_cb, (gpointer)root_associated);
+        break;
+    default:
+        ;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;root_associated-&gt;type = json_node_get_node_type(root);
+    root_associated-&gt;type = json_node_get_node_type(root);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;parsing_in_progress = false;
+    ad-&gt;parsing_in_progress = false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_object_unref(parser);
+    g_object_unref(parser);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (nodes_omitted)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
+    if (nodes_omitted)
+        return 1;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return 0;
+    return 0;
 }
 </pre>
 
@@ -626,53 +626,53 @@ json_parse(char *file_name, void *data)
 static void
 exampleFunc(const char *filename)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;xmlParserCtxtPtr ctxt; /* Parser context */
-&nbsp;&nbsp;&nbsp;&nbsp;xmlDocPtr doc; /* Resulting document tree */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a parser context */
-&nbsp;&nbsp;&nbsp;&nbsp;ctxt = xmlNewParserCtxt();
-&nbsp;&nbsp;&nbsp;&nbsp;if (ctxt == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fprintf(stderr, &quot;Failed to allocate parser context\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;/* Parse the file, activating the DTD validation option */
-&nbsp;&nbsp;&nbsp;&nbsp;doc = xmlCtxtReadFile(ctxt, filename, NULL, XML_PARSE_DTDVALID);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Check whether parsing succeeds */
-&nbsp;&nbsp;&nbsp;&nbsp;if (doc == NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fprintf(stderr, &quot;Failed to parse %s\n&quot;, filename);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Check whether validation succeeds */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ctxt-&gt;valid == 0)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fprintf(stderr, &quot;Failed to validate %s\n&quot;, filename);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Free up the resulting document */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xmlFreeDoc(doc);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;/* Free up the parser context */
-&nbsp;&nbsp;&nbsp;&nbsp;xmlFreeParserCtxt(ctxt);
+    xmlParserCtxtPtr ctxt; /* Parser context */
+    xmlDocPtr doc; /* Resulting document tree */
+
+    /* Create a parser context */
+    ctxt = xmlNewParserCtxt();
+    if (ctxt == NULL) {
+        fprintf(stderr, "Failed to allocate parser context\n");
+
+        return;
+    }
+    /* Parse the file, activating the DTD validation option */
+    doc = xmlCtxtReadFile(ctxt, filename, NULL, XML_PARSE_DTDVALID);
+    /* Check whether parsing succeeds */
+    if (doc == NULL) {
+        fprintf(stderr, "Failed to parse %s\n", filename);
+    } else {
+        /* Check whether validation succeeds */
+        if (ctxt-&gt;valid == 0)
+            fprintf(stderr, "Failed to validate %s\n", filename);
+        /* Free up the resulting document */
+        xmlFreeDoc(doc);
+    }
+    /* Free up the parser context */
+    xmlFreeParserCtxt(ctxt);
 }
 
 int
 main(int argc, char **argv)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (argc != 2)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(1);
+    if (argc != 2)
+        return(1);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Initialize the library and check potential ABI mismatches
-&nbsp;&nbsp;&nbsp;&nbsp;   between the version it was compiled for and the actual shared
-&nbsp;&nbsp;&nbsp;&nbsp;   library used
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;LIBXML_TEST_VERSION
+    /*
+       Initialize the library and check potential ABI mismatches
+       between the version it was compiled for and the actual shared
+       library used
+    */
+    LIBXML_TEST_VERSION
 
-&nbsp;&nbsp;&nbsp;&nbsp;exampleFunc(argv[1]);
+    exampleFunc(argv[1]);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Cleanup function for the XML library */
-&nbsp;&nbsp;&nbsp;&nbsp;xmlCleanupParser();
-&nbsp;&nbsp;&nbsp;&nbsp;/* This is to debug memory for regression tests */
-&nbsp;&nbsp;&nbsp;&nbsp;xmlMemoryDump();
+    /* Cleanup function for the XML library */
+    xmlCleanupParser();
+    /* This is to debug memory for regression tests */
+    xmlMemoryDump();
 
-&nbsp;&nbsp;&nbsp;&nbsp;return(0);
+    return(0);
 }
 </pre>
 
diff --git a/org.tizen.training/html/native/feature/app_connectivity_p2p_n.htm b/org.tizen.training/html/native/feature/app_connectivity_p2p_n.htm
index 4c1718d..9e99542 100644 (file)
--- a/org.tizen.training/html/native/feature/app_connectivity_p2p_n.htm
+++ b/org.tizen.training/html/native/feature/app_connectivity_p2p_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>P2P Connections with Wi-Fi Direct&trade;</title>  
+       <title>P2P Connections with Wi-Fi Direct&trade;</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,10 +32,10 @@
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/connectivity/connectivity_cover_n.htm">Connectivity and Wireless Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Mobile Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>P2P Connections with Wi-Fi Direct&trade;</h1>
 
 <p>Wi-Fi Direct&trade; (synonym for Wi-Fi P2P (Peer-to-Peer)) is a technology that allows you to find nearby Wi-Fi Direct&trade; devices and form a Wi-Fi Direct&trade; group to communicate over a peer-to-peer link without wireless access points (base stations) in the infrastructure mode.</p>
@@ -61,12 +61,12 @@
 
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/wifidirect&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/internet&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/wifidirect&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
-  
+
       <div class="note">
         <strong>Note</strong>
         Wi-Fi Direct&trade; does not require an Internet connection, but it needs the <code>http://tizen.org/privilege/internet</code> privilege because it uses standard sockets.
@@ -105,18 +105,18 @@ error_code = wifi_direct_initialize();
 
 <li>Activate Wi-Fi Direct&trade;.
 
-<p>Define the <code>device_state_changed_cb()</code> callback function, which is invoked whenever a Wi-Fi Direct&trade; local device activates or deactivates:</p> 
+<p>Define the <code>device_state_changed_cb()</code> callback function, which is invoked whenever a Wi-Fi Direct&trade; local device activates or deactivates:</p>
 
 <pre class="prettyprint">
 /* Get the Wi-Fi Direct&trade; activation and deactivation events in device_state_changed_cb() callback */
 static void
 device_state_changed_cb(wifi_direct_error_e error_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_discovery_state_e discovery_state, void *user_data)
+                        wifi_direct_discovery_state_e discovery_state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (device_state == WIFI_DIRECT_DEVICE_STATE_ACTIVATED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Activate Wi-Fi Direct&trade; device!\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else if (device_state == WIFI_DIRECT_DEVICE_STATE_DEACTIVATED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Deactivate Wi-Fi Direct&trade; device!\n&quot;);
+    if (device_state == WIFI_DIRECT_DEVICE_STATE_ACTIVATED)
+        printf("Activate Wi-Fi Direct&trade; device!\n");
+    else if (device_state == WIFI_DIRECT_DEVICE_STATE_DEACTIVATED)
+        printf("Deactivate Wi-Fi Direct&trade; device!\n");
 }
 
 error_code = wifi_direct_set_device_state_changed_cb(device_state_changed_cb, NULL);
@@ -124,11 +124,11 @@ error_code = wifi_direct_set_device_state_changed_cb(device_state_changed_cb, NU
 /* Activate Wi-Fi Direct&trade; */
 error_code = wifi_direct_activate();
 if (error_code != WIFI_DIRECT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[wifi_direct_activate] Failed.&quot;);
+    dlog_print(DLOG_ERROR, LOG_TAG, "[wifi_direct_activate] Failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[wifi_direct_activate] Succeeded.&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "[wifi_direct_activate] Succeeded.");
 }
 </pre>
 
@@ -139,7 +139,7 @@ if (error_code != WIFI_DIRECT_ERROR_NONE) {
 <pre class="prettyprint">
 void
 discovery_state_changed_cb(wifi_direct_error_e error_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_discovery_state_e discovery_state, void *user_data);
+                           wifi_direct_discovery_state_e discovery_state, void *user_data);
 
 error_code = wifi_direct_set_discovery_state_changed_cb(discovery_state_changed_cb, NULL);
 
@@ -160,32 +160,32 @@ char * mac_address = NULL;
 bool
 discovered_peer_cb(wifi_direct_discovered_peer_info_s *peer, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (NULL != peer) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;\nDevice Name: %s&quot;, peer-&gt;device_name);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;\nMac Address: %s&quot;, peer-&gt;mac_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mac_address = strdup(peer-&gt;mac_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = wifi_direct_connect(mac_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != WIFI_DIRECT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Fail to connect\n&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (NULL != peer) {
+        printf("\nDevice Name: %s", peer-&gt;device_name);
+        printf("\nMac Address: %s", peer-&gt;mac_address);
+        mac_address = strdup(peer-&gt;mac_address);
+        error_code = wifi_direct_connect(mac_address);
+        if (error_code != WIFI_DIRECT_ERROR_NONE) {
+            printf("Fail to connect\n");
+
+            return -1;
+        }
+
+        return 1;
+    }
 }
 
 int
 fetch_wifi_direct()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
+    int error_code;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = wifi_direct_foreach_discovered_peers(discovered_peer_cb, &amp;mac_address);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != WIFI_DIRECT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;[wifi_direct_foreach_discovered_peers] Failed.&quot;);
+    int ret = wifi_direct_foreach_discovered_peers(discovered_peer_cb, &amp;mac_address);
+    if (ret != WIFI_DIRECT_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "[wifi_direct_foreach_discovered_peers] Failed.");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 }
 </pre>
 </li>
@@ -194,58 +194,58 @@ fetch_wifi_direct()
 <pre class="prettyprint">
 static void
 connection_state_changed_cb(wifi_direct_error_e error_code,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_connection_state_e connection_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *mac_address, void *user_data)
+                            wifi_direct_connection_state_e connection_state,
+                            const char *mac_address, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Connection state changed to: [%d] [%s]\n&quot;, connection_state,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test_wfd_convert_connection_state_to_string(connection_state));
-
-&nbsp;&nbsp;&nbsp;&nbsp;bool accept_connection = false;
-&nbsp;&nbsp;&nbsp;&nbsp;int rv = 0;
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (connection_state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_WPS_REQ:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Outgoing requests */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_wps_type_e wps_mode;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_get_local_wps_type(&amp;wps_mode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_REQ:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Incoming requests */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_wps_type_e wps_mode;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_direct_get_local_wps_type(&amp;wps_mode);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_INVITATION_REQ:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Invitation request from peer */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISASSOCIATION_IND:
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCONNECTION_IND:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Peer: [%s] disconnected.\n&quot;, mac_address);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_IN_PROGRESS:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Connection in progress\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_CONNECTION_RSP:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == WIFI_DIRECT_ERROR_CONNECTION_FAILED) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(MAKE_RED&quot;Time Out or connection failed&quot;RESET_COLOR&quot;\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_GROUP_CREATED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_GROUP_DESTROYED:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case WIFI_DIRECT_DISCONNECTION_RSP:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Handle the event */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Unknown State Received\n&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    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;
+
+    switch (connection_state) {
+    case WIFI_DIRECT_CONNECTION_WPS_REQ:
+        /* Outgoing requests */
+        wifi_direct_wps_type_e wps_mode;
+        wifi_direct_get_local_wps_type(&amp;wps_mode);
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_CONNECTION_REQ:
+        /* Incoming requests */
+        wifi_direct_wps_type_e wps_mode;
+        wifi_direct_get_local_wps_type(&amp;wps_mode);
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_INVITATION_REQ:
+        /* Invitation request from peer */
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_DISASSOCIATION_IND:
+    case WIFI_DIRECT_DISCONNECTION_IND:
+        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 */
+    case WIFI_DIRECT_CONNECTION_RSP:
+        if (error_code == WIFI_DIRECT_ERROR_CONNECTION_FAILED) {
+            printf(MAKE_RED"Time Out or connection failed"RESET_COLOR"\n");
+            /* Handle the event */
+        }
+        break;
+    case WIFI_DIRECT_GROUP_CREATED:
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_GROUP_DESTROYED:
+        /* Handle the event */
+        break;
+    case WIFI_DIRECT_DISCONNECTION_RSP:
+        /* Handle the event */
+        break;
+    default:
+        printf("Unknown State Received\n");
+    }
 }
 
 error_code = wifi_direct_set_connection_state_changed_cb(connection_state_changed_cb, NULL);
@@ -256,9 +256,9 @@ error_code = wifi_direct_set_connection_state_changed_cb(connection_state_change
 <pre class="prettyprint">
 error_code = wifi_direct_disconnect(mac_address);
 if (error_code != WIFI_DIRECT_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;Fail to disconnect\n&quot;);
+    printf("Fail to disconnect\n");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return -1;
+    return -1;
 }
 </pre>
 </li>
@@ -308,7 +308,7 @@ wifi_direct_deinitialize();
 
 <p>Wi-Fi Direct&trade; is a new technology defined by the Wi-Fi Alliance aimed at enhancing direct device to device communications in Wi-Fi. Wi-Fi Direct&trade; can be used to directly connect mobile phones, tablets, and PCs to peripherals, such as cameras, printers, gaming devices, or a wireless mouse, without the need for an access point. Devices can make a one-to-one connection, or a group of several devices can connect.</p>
 
-<p align="center"><strong>Figure: Wi-Fi Direct&trade;</strong></p> 
+<p align="center"><strong>Figure: Wi-Fi Direct&trade;</strong></p>
 <p align="center"><img alt="Wi-Fi Direct" src="../../images/connectivity_wifidirect.png" /></p>
 
 <p>Direct device to device connectivity was already possible in the original IEEE 802.11 standard by means of the ad-hoc mode of operation. However, this never became widely deployed. Wi-Fi Direct&trade; takes a different approach: in it, one of the devices acts as an access point. This means that legacy Wi-Fi devices can seamlessly connect to Wi-Fi Direct&trade; devices.</p>
@@ -316,16 +316,16 @@ wifi_direct_deinitialize();
 <h3>TDLS (Tunneled Direct Link Setup)</h3>
 
 <p>The IEEE 802.11z amendment is a mechanism that makes it possible to directly transfer data between 2 Wi-Fi clients that are part of the same Wi-Fi network.</p>
-  
-<p align="center"><strong>Figure: TDLS</strong></p> 
-<p align="center"><img alt="TDLS" src="../../images/connectivity_tdls.png" /></p> 
+
+<p align="center"><strong>Figure: TDLS</strong></p>
+<p align="center"><img alt="TDLS" src="../../images/connectivity_tdls.png" /></p>
 
 <p>Usually, in a Wi-Fi network, data is transferred from one client to another through an access point (AP). The IEEE 802.11z amendment defines mechanisms that allow IEEE 802.11 to set up a direct link between client devices while also remaining associated with the AP. These mechanisms are referred to as Tunneled Direct Link Setup (TDLS). This reduces the amount of traffic that is transferred in the network and prevents congestion at the AP.</p>
 
 <p>A TDLS direct link is set up automatically between the devices, without intervention from the AP or the user. The connection with the AP is maintained.</p>
 
 <p>TDLS is not the same as, nor does it replace Wi-Fi Direct&trade;. TDLS is used to optimize the traffic flow in a network, while Wi-Fi Direct&trade; is used to quickly connect devices to one another while on the go, even when a Wi-Fi network is unavailable.</p>
- 
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/feature/app_connectivity_usage_n.htm b/org.tizen.training/html/native/feature/app_connectivity_usage_n.htm
index ebf15ae..d9c683e 100644 (file)
--- a/org.tizen.training/html/native/feature/app_connectivity_usage_n.htm
+++ b/org.tizen.training/html/native/feature/app_connectivity_usage_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Network Usage</title>  
+       <title>Network Usage</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -25,7 +25,7 @@
                <ul class="toc">
                        <li><a href="#privilege">Required Privileges and Features</a></li>
                        <li><a href="#type">Monitoring Connection Type Changes</a></li>
-                       <li><a href="#mobile_change">Monitoring Mobile (Cellular) Network Service Changes</a></li>                      
+                       <li><a href="#mobile_change">Monitoring Mobile (Cellular) Network Service Changes</a></li>
                        <li><a href="#info">Getting Connection Information</a></li>
                        <li><a href="#statistics">Collecting Connection Statistics</a></li>
                </ul>
@@ -36,11 +36,11 @@
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Wearable Native</a></li>
         </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Network Usage</h1>
 
-<p>The following sections describe how to create applications that have cost-efficient control over their usage of network resources. If your application performs a lot of network operations, you must provide user settings that allow the user to control your application&#39;s data behavior, such as how often the application syncs data, whether to perform uploads or downloads only when Wi-Fi is switched on, and whether to use data while roaming. With these controls available to them, users are much less likely to disable your application&#39;s access to background data when they approach their limits, because they can instead precisely control how much data your application uses.</p>
+<p>The following sections describe how to create applications that have cost-efficient control over their usage of network resources. If your application performs a lot of network operations, you must provide user settings that allow the user to control your application's data behavior, such as how often the application syncs data, whether to perform uploads or downloads only when Wi-Fi is switched on, and whether to use data while roaming. With these controls available to them, users are much less likely to disable your application's access to background data when they approach their limits, because they can instead precisely control how much data your application uses.</p>
 
 <h2 id="privilege">Required Privileges and Features</h2>
 
@@ -50,7 +50,7 @@
 
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/network.get&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 
@@ -95,27 +95,27 @@
 static void
 connection_changed_cb(connection_type_e type, void* user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Type changed callback, connection type: %d&quot;, type);
+    dlog_print(DLOG_INFO, LOG_TAG, "Type changed callback, connection type: %d", type);
 }
 
 int
 get_network_connection()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;static connection_h connection;
-&nbsp;&nbsp;&nbsp;&nbsp;void *user_data;
+    int error_code;
+    static connection_h connection;
+    void *user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = connection_create(&amp;connection);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    error_code = connection_create(&amp;connection);
+    if (error_code != CONNECTION_ERROR_NONE)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = connection_set_type_changed_cb(connection, connection_changed_cb, user_data);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    error_code = connection_set_type_changed_cb(connection, connection_changed_cb, user_data);
+    if (error_code != CONNECTION_ERROR_NONE)
+        return;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = connection_destroy(connection);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONNECTION_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+    error_code = connection_destroy(connection);
+    if (error_code != CONNECTION_ERROR_NONE)
+        return;
 }
 </pre>
 
@@ -160,47 +160,47 @@ get_network_connection()
 char*
 _telephony_network_state_to_string(telephony_network_service_state_e network_state)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;switch (network_state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Unknown&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    switch (network_state) {
+    case TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE:
+        return "TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE";
+    case TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE:
+        return "TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE";
+    case TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY:
+        return "TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY";
+    default:
+        return "Unknown";
+    }
 }
 
 void
 get_telephony_information(appdata_s *ad, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a telephony handle */
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_handle_list_s handle_list;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_init(&amp;handle_list); /* In case of a single SIM, you get only one handle */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Print */
-&nbsp;&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; app_data-&gt;handle_list.count; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, &quot;TEST&quot;, &quot;telephony handle[%p] for subscription[%d]&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_data-&gt;handle_list.handle[i], i);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Get the network service state */
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_network_service_state_e network_service_state;
-&nbsp;&nbsp;&nbsp;&nbsp;char *state = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = <span class="highlight">telephony_network_get_service_state(handle_list.handle[0], &amp;network_service_state);</span>
-&nbsp;&nbsp;&nbsp;&nbsp;state = _telephony_network_state_to_string(network_service_state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[telephony_network_get_service_state] failed&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Network Service State [%s]&quot;, state);
+    /* Create a telephony handle */
+    telephony_handle_list_s handle_list;
+    ret = telephony_init(&amp;handle_list); /* In case of a single SIM, you get only one handle */
+
+    /* Print */
+    for (i = 0; i &lt; app_data-&gt;handle_list.count; i++) {
+        dlog_print(DLOG_INFO, "TEST", "telephony handle[%p] for subscription[%d]",
+                   app_data-&gt;handle_list.handle[i], i);
+    }
+
+    /* Get the network service state */
+    telephony_network_service_state_e network_service_state;
+    char *state = NULL;
+    ret = <span class="highlight">telephony_network_get_service_state(handle_list.handle[0], &amp;network_service_state);</span>
+    state = _telephony_network_state_to_string(network_service_state);
+    if (ret != TELEPHONY_ERROR_NONE)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "[telephony_network_get_service_state] failed");
+    else
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Network Service State [%s]", state);
 }
 
 static void
 app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release and free the created telephony handle */
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_deinit(&amp;handle_list);
+    /* Release and free the created telephony handle */
+    telephony_deinit(&amp;handle_list);
 }
 
 /* Auto-generated functions (from the Tizen Studio) are not included */
@@ -208,25 +208,25 @@ app_terminate(void *data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;AppData app_data;  /* Store telephony handle here */
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_lifecycle_callback_s event_callback;
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
-
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = service_app_control;
-
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_low_battery, &amp;app_data);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_low_memory, &amp;app_data);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_lang_changed, &amp;app_data);
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;service_app_region_changed, &amp;app_data);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set AppData as a user_data */
-&nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, &amp;app_data);
+    AppData app_data;  /* Store telephony handle here */
+    service_app_lifecycle_callback_s event_callback;
+    app_event_handler_h handlers[5] = {NULL,};
+
+    event_callback.create = service_app_create;
+    event_callback.terminate = service_app_terminate;
+    event_callback.app_control = service_app_control;
+
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
+                                  service_app_low_battery, &amp;app_data);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
+                                  service_app_low_memory, &amp;app_data);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
+                                  service_app_lang_changed, &amp;app_data);
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
+                                  service_app_region_changed, &amp;app_data);
+
+    /* Set AppData as a user_data */
+    return service_app_main(argc, argv, &amp;event_callback, &amp;app_data);
 }
 </pre>
 
@@ -276,11 +276,11 @@ main(int argc, char* argv[])
   <tr>
  <td>Default subscription</td>
  <td><code>TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</code></td>
- </tr> 
+ </tr>
  </tbody></table>
-       
+
 <p>The <code>telephony_noti_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html#ga3f9d407deee8c7c7f1f7ed946bc60b4d">wearable</a> applications) defines the available notification IDs. The callback function registered by the <code>telephony_set_noti_cb()</code> function (<code>network_service_state_noti_cb()</code> in the following example) delivers change notifications for a network asynchronously.</p>
- 
+
 <p>The following example demonstrates how to register a notification for the mobile network state change:</p>
 
 <pre class="prettyprint">
@@ -288,48 +288,48 @@ main(int argc, char* argv[])
 char*
 _telephony_network_state_to_string(telephony_network_service_state_e network_state)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;switch (network_state) {
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;case TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;default:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &quot;Unknown&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    switch (network_state) {
+    case TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE:
+        return "TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE";
+    case TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE:
+        return "TELEPHONY_NETWORK_SERVICE_STATE_OUT_OF_SERVICE";
+    case TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY:
+        return "TELEPHONY_NETWORK_SERVICE_STATE_EMERGENCY_ONLY";
+    default:
+        return "Unknown";
+    }
 }
 
 /* This function is triggered, if the mobile network status is changed */
 void
 network_service_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_network_service_state_e network_state = *(int *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;char *network_state_string = _telephony_network_state_to_string(network_state);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Network service state: [%s]&quot;, network_state_string);
+    telephony_network_service_state_e network_state = *(int *)data;
+    char *network_state_string = _telephony_network_state_to_string(network_state);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Network service state: [%s]", network_state_string);
 }
 
 void
 monitor_telephony_information(appdata_s *ad, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*  Create a telephony handle */
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_handle_list_s handle_list;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_init(&amp;handle_list); /* In case of a single SIM, you get only one handle */
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Register the network_service_state_noti_cb() callback function
-&nbsp;&nbsp;&nbsp;&nbsp;   to be notified if the Network Service state is changed
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;ret = telephony_set_noti_cb(handle_list.handle[0], <span class="highlight">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span>, network_service_state_noti_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != TELEPHONY_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[telephony_set_noti_cb] failed&quot;);
+    /*  Create a telephony handle */
+    telephony_handle_list_s handle_list;
+    ret = telephony_init(&amp;handle_list); /* In case of a single SIM, you get only one handle */
+
+    /*
+       Register the network_service_state_noti_cb() callback function
+       to be notified if the Network Service state is changed
+    */
+    ret = telephony_set_noti_cb(handle_list.handle[0], <span class="highlight">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span>, network_service_state_noti_cb, NULL);
+    if (ret != TELEPHONY_ERROR_NONE)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "[telephony_set_noti_cb] failed");
 }
 
 static void
 app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release and free the created telephony handle */
-&nbsp;&nbsp;&nbsp;&nbsp;telephony_deinit(&amp;handle_list);
+    /* Release and free the created telephony handle */
+    telephony_deinit(&amp;handle_list);
 }
 </pre>
 
@@ -359,26 +359,26 @@ connection_cellular_state_e cellular_state;
 connection_get_cellular_state(connection, &amp;cellular_state);
 switch (cellular_state) {
 case CONNECTION_CELLULAR_STATE_OUT_OF_SERVICE:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Out of service&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Out of service");
+    break;
 case CONNECTION_CELLULAR_STATE_FLIGHT_MODE:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Flight mode&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Flight mode");
+    break;
 case CONNECTION_CELLULAR_STATE_ROAMING_OFF:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Roaming is switched off&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Roaming is switched off");
+    break;
 case CONNECTION_CELLULAR_STATE_CALL_ONLY_AVAILABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Call only&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Call only");
+    break;
 case CONNECTION_CELLULAR_STATE_AVAILABLE:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Available&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Available");
+    break;
 case CONNECTION_CELLULAR_STATE_CONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Connected&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Connected");
+    break;
 default:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "error");
+    break;
 }
 </pre>
 
@@ -401,17 +401,17 @@ connection_wifi_state_e wifi_state;
 connection_get_wifi_state(connection, &amp;wifi_state);
 switch (wifi_state) {
 case CONNECTION_WIFI_STATE_DEACTIVATED:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Deactivated state&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Deactivated state");
+    break;
 case CONNECTION_WIFI_STATE_DISCONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Disconnected state&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Disconnected state");
+    break;
 case CONNECTION_WIFI_STATE_CONNECTED:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Connected state&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "Connected state");
+    break;
 default:
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;error&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;break;
+    dlog_print(DLOG_INFO, LOG_TAG, "error");
+    break;
 }
 </pre>
 
@@ -433,15 +433,15 @@ long long total_received_size;
 
 /* Gets statistics of total received data through the mobile network connection */
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_CELLULAR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;total_received_size);
+                                       CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA,
+                                       &amp;total_received_size);
 
 long long total_sent_size;
 
 /* Gets statistics of total sent data through the mobile network connection */
 error_code = connection_get_statistics(connection, CONNECTION_TYPE_CELLULAR,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;total_sent_size);
+                                       CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA,
+                                       &amp;total_sent_size);
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.training/html/native/feature/app_contacts_basic_n.htm b/org.tizen.training/html/native/feature/app_contacts_basic_n.htm
index bfef44b..4ed6907 100644 (file)
--- a/org.tizen.training/html/native/feature/app_contacts_basic_n.htm
+++ b/org.tizen.training/html/native/feature/app_contacts_basic_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Basic Concepts</title>  
+       <title>Basic Concepts</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -31,10 +31,10 @@
             <li><a href="../../../../org.tizen.guides/html/native/personal/contacts_n.htm">Contacts Guide</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Basic Concepts</h1>
 
 <p>To be able to use contact features in your application, you must first understand how the basic concepts of <strong>contact</strong> and <strong>person</strong> are related, and how the contact information is stored in the Contacts database using records and views.</p>
@@ -50,8 +50,8 @@
 
 <p>The following figure illustrates the contact structure. The example shows 3 instances of the same contact stored in different address books. Person1 is an aggregation of all 3 instances (Contact1, Contact2, and Contact3).</p>
 
-<p align="center"><strong>Figure: Contact structure</strong></p> 
-<p align="center"><img alt="Contact structure" src="../../images/app_contacts_contact_structure.png" /></p> 
+<p align="center"><strong>Figure: Contact structure</strong></p>
+<p align="center"><img alt="Contact structure" src="../../images/app_contacts_contact_structure.png" /></p>
 
 <h2 id="records">Records and Views</h2>
 
@@ -60,9 +60,9 @@
 <p>Records contain properties of basic types:</p>
 <ul>
 <li><code>integer</code></li>
-<li><code>string</code></li> 
-<li><code>boolean</code></li> 
-<li><code>long integer</code></li> 
+<li><code>string</code></li>
+<li><code>boolean</code></li>
+<li><code>long integer</code></li>
 <li><code>long long integer</code> (<code>lli</code>)</li>
 <li><code>double</code></li>
 </ul>
@@ -142,7 +142,7 @@
  <tr>
  <td><code>company</code></td>
  <td>Record</td>
- <td><code>_contacts_company</code> child record containing the contact&#39;s company details</td>
+ <td><code>_contacts_company</code> child record containing the contact's company details</td>
  </tr>
  <tr>
  <td><code>address</code></td>
diff --git a/org.tizen.training/html/native/feature/app_contacts_group_n.htm b/org.tizen.training/html/native/feature/app_contacts_group_n.htm
index c86e135..333bb0e 100644 (file)
--- a/org.tizen.training/html/native/feature/app_contacts_group_n.htm
+++ b/org.tizen.training/html/native/feature/app_contacts_group_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Group Management</title>  
+       <title>Group Management</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,10 +34,10 @@
             <li><a href="../../../../org.tizen.guides/html/native/personal/contacts_n.htm">Contacts Guide</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Group Management</h1>
 
 <p>The basic tasks involved in group management operations are retrieving group information, creating, updating, and deleting groups, and managing group members. The following sections provide you with the fundamental building blocks for combining individual contacts to groups to manage them more efficiently.</p>
@@ -54,10 +54,10 @@ int error_code;
 error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);
 
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to get record: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to get record: error code = %d", error_code);
 </pre>
 
-<p>The following example retrieves a list of groups, whose name contains the strings &quot;neighbors&quot; or &quot;friend&quot;. You can search the groups meeting the condition using queries and filters:</p>
+<p>The following example retrieves a list of groups, whose name contains the strings "neighbors" or "friend". You can search the groups meeting the condition using queries and filters:</p>
 
 <ol>
 <li>Create a filter handle.</li>
@@ -77,9 +77,9 @@ int error_code;
 error_code = contacts_query_create(_contacts_group._uri, &amp;query);
 error_code = contacts_filter_create(_contacts_group._uri, &amp;filter);
 
-error_code = contacts_filter_add_str(filter, _contacts_group.name, CONTACTS_MATCH_CONTAINS, &quot;neighbors&quot;);
+error_code = contacts_filter_add_str(filter, _contacts_group.name, CONTACTS_MATCH_CONTAINS, "neighbors");
 error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
-error_code = contacts_filter_add_str(filter, _contacts_group.name, CONTACTS_MATCH_CONTAINS, &quot;friend&quot;);
+error_code = contacts_filter_add_str(filter, _contacts_group.name, CONTACTS_MATCH_CONTAINS, "friend");
 
 error_code = contacts_query_set_filter(query, filter);
 error_code = contacts_db_get_records_with_query(query, 0, 0, &amp;list);
@@ -111,11 +111,11 @@ error_code = contacts_db_get_record(_contacts_group._uri, group_id, &amp;group);
 <p>The following example changes the name and image of the group:</p>
 
 <pre class="prettyprint">
-error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Family&quot;);
+error_code = contacts_record_set_str(group, _contacts_group.name, "Family");
 
 char *resource_path = app_get_resource_path();
 char temp_path[1024];
-snprintf(temp_path, sizeof(temp_path), &quot;%s/group_image_new.jpg&quot;, resource_path);
+snprintf(temp_path, sizeof(temp_path), "%s/group_image_new.jpg", resource_path);
 free(resource_path);
 error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);
 </pre>
@@ -151,14 +151,14 @@ error_code = contacts_record_create(_contacts_group._uri, &amp;group);
 <li>If you set the group name, which is a <code>string</code> type, use the <code>contacts_record_set_str()</code> function with the <code>_contacts_group.name</code> property as the second parameter:
 
 <pre class="prettyprint">
-error_code = contacts_record_set_str(group, _contacts_group.name, &quot;Neighbors&quot;);
+error_code = contacts_record_set_str(group, _contacts_group.name, "Neighbors");
 </pre>
 </li>
 <li>If you set the group image property, first define the image file path and then set it to the property similarly as the group name above:
 <pre class="prettyprint">
 char *resource_path = app_get_resource_path();
 char temp_path[1024];
-snprintf(temp_path, sizeof(temp_path), &quot;%s/group_image.jpg&quot;, resource_path);
+snprintf(temp_path, sizeof(temp_path), "%s/group_image.jpg", resource_path);
 free(resource_path);
 error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);
 </pre>
@@ -235,17 +235,17 @@ contacts_record_h person = NULL;
 int error_code;
 
 while (contacts_list_get_current_record_p(list, &amp;person) == CONTACTS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;int person_id;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_int(person, _contacts_person_group_assigned.person_id, &amp;person_id);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Person id: %d&quot;, person_id);
+    int person_id;
+    contacts_record_get_int(person, _contacts_person_group_assigned.person_id, &amp;person_id);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Person id: %d", person_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;char *display_name;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_str_p(person, _contacts_person_group_assigned.display_name, &amp;display_name);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Display name: %s&quot;, display_name);
+    char *display_name;
+    contacts_record_get_str_p(person, _contacts_person_group_assigned.display_name, &amp;display_name);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Display name: %s", display_name);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_list_next(list);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+    error_code = contacts_list_next(list);
+    if (error_code != CONTACTS_ERROR_NONE)
+        break;
 }
 </pre>
 </li>
diff --git a/org.tizen.training/html/native/feature/app_contacts_management_n.htm b/org.tizen.training/html/native/feature/app_contacts_management_n.htm
index 181feab..2be21e1 100644 (file)
--- a/org.tizen.training/html/native/feature/app_contacts_management_n.htm
+++ b/org.tizen.training/html/native/feature/app_contacts_management_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Contact Management</title>  
+       <title>Contact Management</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -35,10 +35,10 @@
             <li><a href="../../../../org.tizen.guides/html/native/personal/contacts_n.htm">Contacts Guide</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Contact Management</h1>
 
 <p>The basic tasks involved in contact management operations are creating and updating contacts, retrieving and deleting persons, and linking contacts and persons. The following sections provide you with the fundamental building blocks for managing contact details in the Contacts database.</p>
@@ -54,19 +54,19 @@ int error_code;
 error_code = contacts_connect();
 
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to connect contacts: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to connect contacts: error code = %d", error_code);
 </pre>
 
 <p>When you no longer need it, disconnect from the contact service using the <code>contacts_disconnect()</code> function.</p>
-  
+
       <div class="note">
         <strong>Note</strong>
         To use the Contacts API, your application has to request permission by adding the following privileges to the <code>tizen-manifest.xml</code> file in the application package:
-        
+
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/contact.read&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/contact.write&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/contact.read&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/contact.write&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
     </div>
@@ -77,7 +77,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 
 <ul>
 <li>
-<p>If a person ID is known in your application, you can retrieve the person&#39;s details using the <code>contacts_db_get_record()</code> function, whose first parameter is the <code>_contacts_person._uri</code> view:</p>
+<p>If a person ID is known in your application, you can retrieve the person's details using the <code>contacts_db_get_record()</code> function, whose first parameter is the <code>_contacts_person._uri</code> view:</p>
 
 <pre class="prettyprint">
 contacts_record_h person = NULL;
@@ -87,21 +87,21 @@ int error_code;
 error_code = contacts_db_get_record(_contacts_person._uri, person_id, &amp;person);
 
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to get record: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to get record: error code = %d", error_code);
 </pre>
 </li>
 <li>
 <p>If you need to retrieve a list of persons matching a search keyword without knowing a specific person ID, you can use the <code>contacts_db_search_records()</code> function. The third parameter is the offset, meaning the record index from which to search, and the fourth parameter sets a limit to the number of results, where 0 means that all the matched records are retrieved.</p>
 
-<p>The following example shows how to find all person records that contain the keyword &quot;John&quot;.</p>
+<p>The following example shows how to find all person records that contain the keyword "John".</p>
 
 <pre class="prettyprint">
 contacts_list_h list = NULL;
 
-error_code = contacts_db_search_records(_contacts_person._uri, &quot;John&quot;, 0, 0, &amp;list);
+error_code = contacts_db_search_records(_contacts_person._uri, "John", 0, 0, &amp;list);
 
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to search records: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to search records: error code = %d", error_code);
 </pre>
 
 </li>
@@ -119,77 +119,77 @@ if (error_code != CONTACTS_ERROR_NONE)
 static bool
 _get_associated_contacts(contacts_record_h record, contacts_list_h *associated_contacts)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
-&nbsp;&nbsp;&nbsp;&nbsp;int person_id;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
+    int error_code;
+    int person_id;
+    contacts_query_h query = NULL;
+    contacts_filter_h filter = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the person ID from the person record */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = contacts_record_get_int(record, _contacts_person.id, &amp;person_id);
+    /* Retrieve the person ID from the person record */
+    error_code = contacts_record_get_int(record, _contacts_person.id, &amp;person_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a contact query with a filter for the person ID */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = CONTACTS_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_contact._uri, &amp;query);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_contact._uri, &amp;filter);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_int(filter, _contacts_contact.person_id, CONTACTS_MATCH_EQUAL, person_id);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);
+    /* Create a contact query with a filter for the person ID */
+    error_code = CONTACTS_ERROR_NONE;
+    error_code += contacts_query_create(_contacts_contact._uri, &amp;query);
+    error_code += contacts_filter_create(_contacts_contact._uri, &amp;filter);
+    error_code += contacts_filter_add_int(filter, _contacts_contact.person_id, CONTACTS_MATCH_EQUAL, person_id);
+    error_code += contacts_query_set_filter(query, filter);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Run the query to retrieve a list of all contacts associated with the person ID */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0, associated_contacts);
+    /* Run the query to retrieve a list of all contacts associated with the person ID */
+    error_code += contacts_db_get_records_with_query(query, 0, 0, associated_contacts);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the filter and query handles and release all their resources */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_query_destroy(query);
+    /* Destroy the filter and query handles and release all their resources */
+    error_code += contacts_filter_destroy(filter);
+    error_code += contacts_query_destroy(query);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    if (error_code != CONTACTS_ERROR_NONE)
+        return false;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 
-<p>The following example uses queries and filters to retrieve a person&#39;s default phone number. If a person is associated with multiple phone numbers, one of them is defined as the default phone number. To determine the default phone number, you can check the <code>is_primary_default</code> property of the <code>_contacts_person_number</code> view. For the default phone number, the property is set to <code>true</code>.</p>
+<p>The following example uses queries and filters to retrieve a person's default phone number. If a person is associated with multiple phone numbers, one of them is defined as the default phone number. To determine the default phone number, you can check the <code>is_primary_default</code> property of the <code>_contacts_person_number</code> view. For the default phone number, the property is set to <code>true</code>.</p>
 
 <pre class="prettyprint">
 static bool
 _get_default_phone_number(contacts_record_h record, char **default_phone_number)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_query_h query = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_h filter = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_h list = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h record_person_number = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;int person_id;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = CONTACTS_ERROR_NONE;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the person ID from the person record */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_int(record, _contacts_person.id, &amp;person_id);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a phone number query with filters for the person ID and default phone number */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_query_create(_contacts_person_number._uri, &amp;query);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_create(_contacts_person_number._uri, &amp;filter);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_int(filter, _contacts_person_number.person_id, CONTACTS_MATCH_EQUAL, person_id);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_filter_add_bool(filter, _contacts_person_number.is_primary_default, true);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_query_set_filter(query, filter);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Run the query to retrieve the phone number records containing the default phone number */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_db_get_records_with_query(query, 0, 0, &amp;list);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the current record from the query list */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_list_get_current_record_p(list, &amp;record_person_number);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Retrieve the phone number from the phone number record */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code += contacts_record_get_str(record_person_number, _contacts_person_number.number, default_phone_number);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the list, filter, and query handles and release all their resources */
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_list_destroy(list, true);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_filter_destroy(filter);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_query_destroy(query);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    contacts_query_h query = NULL;
+    contacts_filter_h filter = NULL;
+    contacts_list_h list = NULL;
+    contacts_record_h record_person_number = NULL;
+    int person_id;
+    int error_code = CONTACTS_ERROR_NONE;
+
+    /* Retrieve the person ID from the person record */
+    error_code += contacts_record_get_int(record, _contacts_person.id, &amp;person_id);
+
+    /* Create a phone number query with filters for the person ID and default phone number */
+    error_code += contacts_query_create(_contacts_person_number._uri, &amp;query);
+    error_code += contacts_filter_create(_contacts_person_number._uri, &amp;filter);
+    error_code += contacts_filter_add_int(filter, _contacts_person_number.person_id, CONTACTS_MATCH_EQUAL, person_id);
+    error_code += contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
+    error_code += contacts_filter_add_bool(filter, _contacts_person_number.is_primary_default, true);
+    error_code += contacts_query_set_filter(query, filter);
+
+    /* Run the query to retrieve the phone number records containing the default phone number */
+    error_code += contacts_db_get_records_with_query(query, 0, 0, &amp;list);
+
+    /* Retrieve the current record from the query list */
+    error_code += contacts_list_get_current_record_p(list, &amp;record_person_number);
+
+    /* Retrieve the phone number from the phone number record */
+    error_code += contacts_record_get_str(record_person_number, _contacts_person_number.number, default_phone_number);
+
+    /* Destroy the list, filter, and query handles and release all their resources */
+    contacts_list_destroy(list, true);
+    contacts_filter_destroy(filter);
+    contacts_query_destroy(query);
+
+    if (error_code != CONTACTS_ERROR_NONE)
+        return false;
+
+    return true;
 }
 </pre>
 </li>
@@ -213,18 +213,18 @@ error_code = contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;con
 <ul><li>The following example sets a new first name for the contact record by updating a child record:
 <pre class="prettyprint">
 contacts_record_h name = NULL;
-/* Retrieve the contact&#39;s name record */
-/* Record index is set to 0, since there is only 1 child record of type &quot;name&quot; */
+/* Retrieve the contact's name record */
+/* Record index is set to 0, since there is only 1 child record of type "name" */
 error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.name, 0, &amp;name);
 /* Change the first name in the name record */
-error_code = contacts_record_set_str(name, _contacts_name.first, &quot;Mark&quot;);
+error_code = contacts_record_set_str(name, _contacts_name.first, "Mark");
 </pre>
 </li>
 <li>The following example set a new birthday event for the contact by updating another child record.
 <p>The example assumes that the birthday is the only event for the contact, meaning that the event record can be retrieved using the <code>contacts_record_get_child_record_at_p()</code> function with index 0 as the second parameter. If the contact has multiple events, you must iterate through them.</p>
 <pre class="prettyprint">
 contacts_record_h event = NULL;
-/* Retrieve the contact&#39;s birthday event record */
+/* Retrieve the contact's birthday event record */
 error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, 0, &amp;event);
 /* Change the date in the event record */
 int new_date = 1990 * 10000 + 6 * 100 + 21;
@@ -236,15 +236,15 @@ error_code = contacts_record_set_int(event, _contacts_event.date, new_date);
 <pre class="prettyprint">
 int contact_id = ... /* Get the contact ID */
 int address_num = 0;
-int i = 0; 
+int i = 0;
 
 contacts_db_get_record(_contacts_contact._uri, contact_id, &amp;contact);
 contacts_record_get_child_record_count(count, _contacts_contact.address, &amp;address_num);
 
 for (i = 0; i &lt; address_num; i++) {
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_h address = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_get_child_record_at_p(contact, _contacts_contact.address, i, &amp;address);
-&nbsp;&nbsp;&nbsp;&nbsp;contacts_record_set_str(address, _contacts_address.country, &quot;Korea&quot;);
+    contacts_record_h address = NULL;
+    contacts_record_get_child_record_at_p(contact, _contacts_contact.address, i, &amp;address);
+    contacts_record_set_str(address, _contacts_address.country, "Korea");
 }
 </pre>
 </li>
@@ -256,14 +256,14 @@ for (i = 0; i &lt; address_num; i++) {
 error_code = contacts_db_update_record(contact);
 
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to update record: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to update record: error code = %d", error_code);
 </pre>
 
       <div class="note">
         <strong>Note</strong>
         The <code>contacts_record_set_XXX()</code> functions only change the data in the memory object, not in the Contacts database. Normally, to update the database, you must update each record separately using the <code>contacts_db_update_record()</code> function. However, if you retrieve a child record using the <code>contacts_record_get_child_record_at_p()</code> function, you only need to update the parent record to the database; the child record is updated automatically with the parent record.
     </div>
-  
+
 </li>
 <li>When no longer needed, destroy the contact handle and release all its resources using the <code>contacts_record_destroy()</code> function.
 <p>If you set the second parameter to <code>true</code>, the function destroys any child records automatically, irrespective of how the child records were added (individually or along with their parent record).</p>
@@ -272,7 +272,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 error_code = contacts_record_destroy(contact, true);
 
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to destroy record: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to destroy record: error code = %d", error_code);
 </pre>
 </li>
 </ol>
@@ -289,7 +289,7 @@ contacts_record_h contact;
 error_code = contacts_record_create(_contacts_contact._uri, &amp;contact);
 
 if (error_code != CONTACTS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to create record: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to create record: error code = %d", error_code);
 </pre>
 
 <p>Remember that records created with the <code>contacts_record_create()</code> function are memory objects, with <code>contacts_record_h</code> type variables as their handles. If you change these objects, the changes are not reflected in the Contacts database until you explicitly insert or update the objects to the database using the <code>contacts_db_insert_record()</code> or <code>contacts_db_update_record()</code> function.</p></li>
@@ -298,7 +298,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 <p>To simplify the example code, error handling has been omitted.</p>
 <ul>
 <li>Name
-<p>Create a name record, set the string values, &quot;John&quot; and &quot;Smith&quot;, to the name, and set the name record as a child record of the contact record.</p>
+<p>Create a name record, set the string values, "John" and "Smith", to the name, and set the name record as a child record of the contact record.</p>
 
 <p>When creating the name record, the first parameter of the <code>contacts_record_create()</code> function is the <code>_contacts_name._uri</code> property.</p>
 <pre class="prettyprint">
@@ -306,8 +306,8 @@ contacts_record_h name;
 
 error_code = contacts_record_create(_contacts_name._uri, &amp;name);
 
-error_code = contacts_record_set_str(name, _contacts_name.first, &quot;John&quot;);
-error_code = contacts_record_set_str(name, _contacts_name.last, &quot;Smith&quot;);
+error_code = contacts_record_set_str(name, _contacts_name.first, "John");
+error_code = contacts_record_set_str(name, _contacts_name.last, "Smith");
 
 error_code = contacts_record_add_child_record(contact, _contacts_contact.name, name);
 </pre>
@@ -326,7 +326,7 @@ error_code = contacts_record_create(_contacts_image._uri, &amp;image);
 char *resource_path = app_get_resource_path();
 char caller_id_path[1024];
 
-snprintf(caller_id_path, sizeof(caller_id_path), &quot;%s/caller_id.jpg&quot;, resource_path);
+snprintf(caller_id_path, sizeof(caller_id_path), "%s/caller_id.jpg", resource_path);
 free(resource_path);
 
 error_code = contacts_record_set_str(image, _contacts_image.path, caller_id_path);
@@ -343,13 +343,13 @@ contacts_record_h number;
 
 error_code = contacts_record_create(_contacts_number._uri, &amp;number);
 
-error_code = contacts_record_set_str(number, _contacts_number.number, &quot;+8210-1234-5678&quot;);
+error_code = contacts_record_set_str(number, _contacts_number.number, "+8210-1234-5678");
 
 error_code = contacts_record_add_child_record(contact, _contacts_contact.number, number);
 </pre>
 </li>
 <li>Event
-<p>An event consists of a type, date, and other properties. You can set various types of events, as defined in the <code>contacts_event_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">wearable</a> applications). If the event type is <code>CUSTOM</code>, you can set a custom label for the event using the <code>_contacts_event.label</code> property.</p> 
+<p>An event consists of a type, date, and other properties. You can set various types of events, as defined in the <code>contacts_event_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__RECORD__MODULE.html#ga434cc4b7cec62ccab70fa4825ce0801d">wearable</a> applications). If the event type is <code>CUSTOM</code>, you can set a custom label for the event using the <code>_contacts_event.label</code> property.</p>
 
 <p>The following example sets a birthday event:</p>
 <ul>
@@ -424,12 +424,12 @@ error_code += contacts_record_set_int(contact, _contacts_contact.link_mode, CONT
 
 contacts_record_h name = NULL;
 error_code += contacts_record_create(_contacts_name._uri, &amp;name);
-error_code += contacts_record_set_str(name, _contacts_name.first, &quot;John&quot;);
+error_code += contacts_record_set_str(name, _contacts_name.first, "John");
 error_code += contacts_record_add_child_record(contact, _contacts_contact.name, name);
 
 contacts_record_h number = NULL;
 error_code += contacts_record_create(_contacts_number._uri, &amp;number);
-error_code += contacts_record_set_str(number, _contacts_number.number, &quot;+8210-1234-5678&quot;);
+error_code += contacts_record_set_str(number, _contacts_number.number, "+8210-1234-5678");
 error_code += contacts_record_add_child_record(contact, _contacts_contact.number, number);
 
 /* Contact is linked automatically if an existing person has the same number in a different address book */
@@ -441,7 +441,7 @@ contacts_record_destroy(contact, true);
 <p>You can modify the contact and person linking, as needed:</p>
 
 <ul>
-<li>To merge existing contacts into 1 person, use the <code>contacts_person_link_person()</code> function to link the contacts of one person to another person. The first parameter of the function is the ID of the person to be merged, and the second parameter is the ID of the person who will have all the merged contacts. After the linking, the former is deleted from the Contacts database. The latter person is left with both their original contacts and the other person&#39;s contacts.
+<li>To merge existing contacts into 1 person, use the <code>contacts_person_link_person()</code> function to link the contacts of one person to another person. The first parameter of the function is the ID of the person to be merged, and the second parameter is the ID of the person who will have all the merged contacts. After the linking, the former is deleted from the Contacts database. The latter person is left with both their original contacts and the other person's contacts.
 
 <pre class="prettyprint">
 int person_id1 = ... /* Get the person ID whose contacts are merged elsewhere */
@@ -451,7 +451,7 @@ error_code = contacts_person_link_person(person_id1, person_id2);
 </pre>
 <p>The following figure illustrates the process of linking a person. Even though the contacts have different address books, they can be linked to the same person. After linking, the person2 record is destroyed automatically.</p>
 
-<p align="center"><strong>Figure: Linking a person</strong></p> 
+<p align="center"><strong>Figure: Linking a person</strong></p>
 <p align="center"><img alt="Linking a person" src="../../images/app_contacts_linking.png" /></p>
 </li>
 <li>To separate (unlink) a contact record from the person record, use the <code>contacts_person_unlink_contact()</code> function. The function removes the contact from the person, creates a new person, and links the contact to the new person.
@@ -466,7 +466,7 @@ error_code = contacts_person_unlink_contact(person_id, contact_id, &amp;unlinked
 
 <p>The following figure illustrates the process of unlinking a contact. After unlinking, the person3 record is newly created.</p>
 
-<p align="center"><strong>Figure: Unlinking a contact</strong></p> 
+<p align="center"><strong>Figure: Unlinking a contact</strong></p>
 <p align="center"><img alt="Unlinking a contact" src="../../images/app_contacts_unlinking.png" /></p>
 </li>
 </ul>
diff --git a/org.tizen.training/html/native/feature/app_contacts_n.htm b/org.tizen.training/html/native/feature/app_contacts_n.htm
index f48f33a..a7346ce 100644 (file)
--- a/org.tizen.training/html/native/feature/app_contacts_n.htm
+++ b/org.tizen.training/html/native/feature/app_contacts_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Applications with Contacts</title>  
+       <title>Creating Applications with Contacts</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -26,10 +26,10 @@
             <li><a href="../../../../org.tizen.guides/html/native/personal/contacts_n.htm">Contacts Guide</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Creating Applications with Contacts</h1>
 
 <p>If you want to create applications that offer contact management features to the user, Tizen provides various options for you.</p>
@@ -54,7 +54,7 @@
 </li>
 <li><a href="app_contacts_group_n.htm">Group management</a>
 <ul>
-<li>You can ease the contact management tasks by grouping related contacts to various groups.</li> 
+<li>You can ease the contact management tasks by grouping related contacts to various groups.</li>
 <li>You can create, update, and delete groups.</li>
 <li>You can retrieve group information from the database with various filtered queries.</li>
 <li>You can manage group members by adding and removing contacts within a group.</li>
diff --git a/org.tizen.training/html/native/feature/app_contentshare_n.htm b/org.tizen.training/html/native/feature/app_contentshare_n.htm
index 9d181ec..e3a5523 100644 (file)
--- a/org.tizen.training/html/native/feature/app_contentshare_n.htm
+++ b/org.tizen.training/html/native/feature/app_contentshare_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Applications with Content Sharing</title>  
+       <title>Creating Applications with Content Sharing</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -29,10 +29,10 @@
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Wearable Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Creating Applications with Content Sharing</h1>
 
 <p>If you want to create applications that offer content sharing features to the user, Tizen provides various options for you.</p>
@@ -64,7 +64,7 @@
 </li>
 </ul>
 
-<p>To share content through application controls, you must use the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications). Application controls are a way of sharing an application&#39;s functionality in Tizen. The App Control API provides functions for launching other applications with a specific operation, URI, MIME type, and extra data, and for settings and getting the details:</p>
+<p>To share content through application controls, you must use the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications). Application controls are a way of sharing an application's functionality in Tizen. The App Control API provides functions for launching other applications with a specific operation, URI, MIME type, and extra data, and for settings and getting the details:</p>
 <ul>
 <li>The mandatory operation information defines the action to be performed.</li>
 <li>The URI and MIME type contain information about the content to be handled.</li>
diff --git a/org.tizen.training/html/native/feature/app_contentshare_nfc_n.htm b/org.tizen.training/html/native/feature/app_contentshare_nfc_n.htm
index 49bd0ce..b6c2bf2 100644 (file)
--- a/org.tizen.training/html/native/feature/app_contentshare_nfc_n.htm
+++ b/org.tizen.training/html/native/feature/app_contentshare_nfc_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Sharing through NFC</title>  
+       <title>Sharing through NFC</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -31,10 +31,10 @@
                        <li><a href="../../../../org.tizen.guides/html/native/connectivity/nfc_n.htm">Near Field Communication (NFC) Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Sharing through NFC</h1>
 
 <p>The basic tasks involved in sharing content through Near Field Communication (NFC) are to ensure that the device supports NFC, initialize the NFC feature, and exchange NDEF messages through the NFC P2P connection. The following sections provide you with the fundamental building blocks for sharing data with other devices.</p>
@@ -61,10 +61,10 @@
 void
 Network_NFC_startup(void)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;gmainloop = g_main_loop_new(NULL, FALSE);
-&nbsp;&nbsp;&nbsp;&nbsp;bool is_nfc_supported = nfc_manager_is_supported();
-&nbsp;&nbsp;&nbsp;&nbsp;if (!is_nfc_supported)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;is_nfc_supported NOT SUPPORTED&quot;);
+    gmainloop = g_main_loop_new(NULL, FALSE);
+    bool is_nfc_supported = nfc_manager_is_supported();
+    if (!is_nfc_supported)
+        dlog_print(DLOG_INFO, LOG_TAG, "is_nfc_supported NOT SUPPORTED");
 }
 </pre>
 <p>The <code>gmainloop</code> created above is used to wait for the results of calling asynchronous functions.</p>
@@ -75,8 +75,8 @@ Network_NFC_startup(void)
 int error_code = NFC_ERROR_NONE;
 
 error_code = nfc_manager_initialize();
-if (error_code != NFC_ERROR_NONE) 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+if (error_code != NFC_ERROR_NONE)
+    /* Error handling */
 
 g_timeout_add(1000, timeout_func, gmainloop);
 g_main_loop_run(gmainloop);
@@ -101,13 +101,13 @@ nfc_ndef_record_h ndef_name_record = NULL;
 nfc_ndef_record_h ndef_phone_record = NULL;
 nfc_ndef_record_h ndef_email_record = NULL;
 
-const char *name = &quot;John Doe&quot;;
-const char *phone = &quot;+82556666888&quot;;
-const char *email = &quot;john.doe@tizen.org&quot;;
+const char *name = "John Doe";
+const char *phone = "+82556666888";
+const char *email = "john.doe@tizen.org";
 
-nfc_ndef_record_create_text(&amp;ndef_name_record, name, &quot;en-US&quot;, NFC_ENCODE_UTF_8);
-nfc_ndef_record_create_text(&amp;ndef_phone_record, phone, &quot;en-US&quot;, NFC_ENCODE_UTF_8);
-nfc_ndef_record_create_text(&amp;ndef_email_record, email, &quot;en-US&quot;, NFC_ENCODE_UTF_8);
+nfc_ndef_record_create_text(&amp;ndef_name_record, name, "en-US", NFC_ENCODE_UTF_8);
+nfc_ndef_record_create_text(&amp;ndef_phone_record, phone, "en-US", NFC_ENCODE_UTF_8);
+nfc_ndef_record_create_text(&amp;ndef_email_record, email, "en-US", NFC_ENCODE_UTF_8);
 </pre>
 </li>
 <li>
diff --git a/org.tizen.training/html/native/feature/app_contentshare_receive_n.htm b/org.tizen.training/html/native/feature/app_contentshare_receive_n.htm
index 5b4ab0a..f9c2191 100644 (file)
--- a/org.tizen.training/html/native/feature/app_contentshare_receive_n.htm
+++ b/org.tizen.training/html/native/feature/app_contentshare_receive_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Receiving Content from Other Applications</title>  
+       <title>Receiving Content from Other Applications</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,10 +32,10 @@
             <li><a href="../../../../org.tizen.guides/html/native/app_management/app_controls_n.htm">Application Controls Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Receiving Content from Other Applications</h1>
 
 <p>The basic tasks involved in receiving content from other applications are advertising the features available in your application, handling the incoming content, and managing any extra data sent with the content. The following sections provide you with the fundamental building blocks for receiving content that other applications want to share with you.</p>
@@ -48,13 +48,13 @@
 
 <pre class="prettyprint">
 &lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;mime name = &quot;application/xhtml+xml&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name = &quot;http://tizen.org/appcontrol/operation/view&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name = &quot;http&quot;/&gt;
+   &lt;mime name = "application/xhtml+xml"/&gt;
+   &lt;operation name = "http://tizen.org/appcontrol/operation/view"/&gt;
+   &lt;uri name = "http"/&gt;
 &lt;/app-control&gt;
 &lt;app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;operation name = &quot;http://tizen.org/appcontrol/operation/dial&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;uri name = &quot;tel&quot;/&gt;
+   &lt;operation name = "http://tizen.org/appcontrol/operation/dial"/&gt;
+   &lt;uri name = "tel"/&gt;
 &lt;/app-control&gt;
 </pre>
 
@@ -66,7 +66,7 @@
 
 <h2 id="incoming">Handling Incoming Content</h2>
 
-<p>When another application sends an application control request to your application, the application framework calls your application&#39;s <code>app_control_cb()</code> callback just after your application enters the main loop. This callback is passed to the handler, <code>app_control</code>, containing the reason why your application was launched. For example, your application can be launched to open a file that another application is sharing with you.</p>
+<p>When another application sends an application control request to your application, the application framework calls your application's <code>app_control_cb()</code> callback just after your application enters the main loop. This callback is passed to the handler, <code>app_control</code>, containing the reason why your application was launched. For example, your application can be launched to open a file that another application is sharing with you.</p>
 
 <p>When an application control request arrives, your application is responsible for checking and responding accordingly to the information of the <code>app_control</code> handler.</p>
 
@@ -76,44 +76,44 @@
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;struct appdata ad;
+    struct appdata ad;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback;
+    ui_app_lifecycle_callback_s event_callback;
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Register the app control callback */
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+    event_callback.create = app_create;
+    event_callback.terminate = app_terminate;
+    event_callback.pause = app_pause;
+    event_callback.resume = app_resume;
+    /* Register the app control callback */
+    event_callback.app_control = app_control;
 
-&nbsp;&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x0, sizeof(struct appdata));
+    memset(&amp;ad, 0x0, sizeof(struct appdata));
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
 }
 
 /* App control callback */
 static void
 app_control(app_control_h app_control, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;struct appdata *ad = (struct appdata *)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;char *operation;
-&nbsp;&nbsp;&nbsp;&nbsp;char *uri;
-&nbsp;&nbsp;&nbsp;&nbsp;char *mime_type;
+    struct appdata *ad = (struct appdata *)user_data;
+    char *operation;
+    char *uri;
+    char *mime_type;
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_operation(app_control, operation);
+    app_control_get_operation(app_control, operation);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_uri(app_control, &amp;uri);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_get_mime(app_control, &amp;mime_type);
+    if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW)) {
+        app_control_get_uri(app_control, &amp;uri);
+        app_control_get_mime(app_control, &amp;mime_type);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (uri &amp;&amp; !strcmp(mime_type, &quot;image/jpg&quot;))
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Display the image file the other application is sharing with you */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display_image_file(ad, uri); 
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        if (uri &amp;&amp; !strcmp(mime_type, "image/jpg"))
+                /* Display the image file the other application is sharing with you */
+                display_image_file(ad, uri);
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_activate(ad-&gt;win);
+    if (ad-&gt;win)
+        elm_win_activate(ad-&gt;win);
 }
 </pre>
 
@@ -125,21 +125,21 @@ app_control(app_control_h app_control, void *user_data)
 bool
 _app_control_extra_data_cb(app_control_h app, const char *key, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;char *value;
+    int ret;
+    char *value;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_get_extra_data(app, key, &amp;value);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[value] %s&quot;, value);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_get_extra_data() failed. err = %d&quot;, ret);
+    ret = app_control_get_extra_data(app, key, &amp;value);
+    if (ret == APP_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_DEBUG, LOG_TAG, "[value] %s", value);
+    else
+        dlog_print(DLOG_ERROR, LOG_TAG, "app_control_get_extra_data() failed. err = %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 ret = app_control_foreach_extra_data(app, _app_control_extra_data_cb, 0);
 if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_foreach_extra_data() failed. err = %d&quot;, ret);
+    dlog_print(DLOG_ERROR, LOG_TAG, "app_control_foreach_extra_data() failed. err = %d", ret);
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.training/html/native/feature/app_contentshare_send_n.htm b/org.tizen.training/html/native/feature/app_contentshare_send_n.htm
index f78f45d..f6362ed 100644 (file)
--- a/org.tizen.training/html/native/feature/app_contentshare_send_n.htm
+++ b/org.tizen.training/html/native/feature/app_contentshare_send_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Sending Content to Other Applications</title>  
+       <title>Sending Content to Other Applications</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,10 +32,10 @@
             <li><a href="../../../../org.tizen.guides/html/native/app_management/app_controls_n.htm">Application Controls Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Sending Content to Other Applications</h1>
 
 <p>You can send various types of content to other applications, including text, binaries, and files. The following sections provide you with the fundamental building blocks for sharing your application data with other applications.</p>
@@ -54,14 +54,14 @@ app_control_h app_control;
 app_control_create(&amp;app_control);
 
 app_control_set_operation(app_control, APP_CONTROL_OPERATION_SHARE);
-app_control_set_mime(app_control, &quot;text/plain&quot;);
-app_control_add_extra_data(app_control, APP_CONTROL_DATA_TEXT, &quot;Hello, World!&quot;);
+app_control_set_mime(app_control, "text/plain");
+app_control_add_extra_data(app_control, APP_CONTROL_DATA_TEXT, "Hello, World!");
 
 app_control_send_launch_request(app_control, NULL, NULL);
 </pre>
 
 <p>The above example has no explicit designation of the application to be called. When you request an implicit launch, the application launcher framework determines which application to launch by comparing the conditions: operation, URI (or scheme), and MIME type. If only one application is found to match the given conditions, that application is launched. If multiple matching applications are found, the application selector is shown and the user can select the application they want.</p>
-  
+
       <div class="note">
         <strong>Note</strong>
         When using application controls, pay attention to the following:
@@ -83,14 +83,14 @@ app_control_send_launch_request(app_control, NULL, NULL);
 
 char *shared_res_path = app_get_shared_resource_path();
 char img_path[PATH_MAX] = {0,};
-snprintf(img_path, PATH_MAX, &quot;%s/image.jpg&quot;, shared_res_path);
+snprintf(img_path, PATH_MAX, "%s/image.jpg", shared_res_path);
 free(shared_res_path);
 
 app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_SHARE);
-app_control_set_mime(service, &quot;image/*&quot;);
+app_control_set_mime(service, "image/*");
 app_control_add_extra_data(service, APP_CONTROL_DATA_PATH, img_path);
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
@@ -104,15 +104,15 @@ char *shared_res_path = app_get_shared_resource_path();
 char img1_path[PATH_MAX] = {0,};
 char img2_path[PATH_MAX] = {0,};
 const char *path_array[2] = {img1_path, img2_path};
-snprintf(img1_path, PATH_MAX, &quot;%s/image.jpg&quot;, shared_res_path);
-snprintf(img2_path, PATH_MAX, &quot;%s/image2.jpg&quot;, shared_res_path);
+snprintf(img1_path, PATH_MAX, "%s/image.jpg", shared_res_path);
+snprintf(img2_path, PATH_MAX, "%s/image2.jpg", shared_res_path);
 free(shared_res_path);
 
 app_control_h service;
 app_control_create(&amp;service);
 
 app_control_set_operation(service, APP_CONTROL_OPERATION_MULTI_SHARE);
-app_control_set_mime(service, &quot;image/*&quot;);
+app_control_set_mime(service, "image/*");
 app_control_add_extra_data_array(service, APP_CONTROL_DATA_PATH, path_array, 2);
 app_control_set_launch_mode(service, APP_CONTROL_LAUNCH_MODE_GROUP);
 
@@ -126,7 +126,7 @@ app_control_destroy(service);
 <h2 id="files">Sending Files</h2>
 
 <p>When sharing files, you can use the <code>app_control_set_uri()</code> function to set the file URI with the <code>file://</code> scheme.</p>
-<p>Since Tizen 2.4, if the second parameter of the  <code>app_control_set_uri()</code> function starts with <code>file://</code>, and it is a regular file in your application&#39;s data path which can be obtained by calling the <code>app_get_data_path()</code> function, the file is shared with the called application. The framework grants a temporary permission to the called application for this file, and revokes it when the called application is terminated. The called application can just read the file.</p>
+<p>Since Tizen 2.4, if the second parameter of the  <code>app_control_set_uri()</code> function starts with <code>file://</code>, and it is a regular file in your application's data path which can be obtained by calling the <code>app_get_data_path()</code> function, the file is shared with the called application. The framework grants a temporary permission to the called application for this file, and revokes it when the called application is terminated. The called application can just read the file.</p>
 
 <p>The following example launches a viewer application with the operation, URI, and MIME type:</p>
 
@@ -134,25 +134,25 @@ app_control_destroy(service);
 #include &lt;app.h&gt;
 #include &lt;dlog.h&gt;
 
-#define TAG &quot;MY_TAG&quot;
+#define TAG "MY_TAG"
 #define PATH_MAX 128
 
 app_control_h app_control;
-char* data_path = app_get_data_path(); 
+char* data_path = app_get_data_path();
 
 char file_path[PATH_MAX] = {0,};
-snprintf(file_path, PATH_MAX, &quot;%s/image.jpg&quot;, data_path);
+snprintf(file_path, PATH_MAX, "%s/image.jpg", data_path);
 free(data_path);
 
 app_control_create(&amp;app_control);
 app_control_set_operation(app_control, APP_CONTROL_OPERATION_VIEW);
 app_control_set_uri(app_control, file_path);
-app_control_set_mime(app_control, &quot;image/*&quot;);
+app_control_set_mime(app_control, "image/*");
 
 if (app_control_send_launch_request(app_control, NULL, NULL) == APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, TAG, &quot;Succeeded to launch a viewer app.&quot;);
+    dlog_print(DLOG_INFO, TAG, "Succeeded to launch a viewer app.");
 else
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, TAG, &quot;Failed to launch a viewer app.&quot;);
+    dlog_print(DLOG_ERROR, TAG, "Failed to launch a viewer app.");
 
 app_control_destroy(app_control);
 </pre>
diff --git a/org.tizen.training/html/native/feature/app_graphics_animation_n.htm b/org.tizen.training/html/native/feature/app_graphics_animation_n.htm
index 308f34d..df4dfaf 100644 (file)
--- a/org.tizen.training/html/native/feature/app_graphics_animation_n.htm
+++ b/org.tizen.training/html/native/feature/app_graphics_animation_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Animations</title>  
+       <title>Animations</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -21,18 +21,18 @@
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
        <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>          
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/ui/efl/graphical_objects_n.htm">Graphical Objects</a></li>
                        <li><a href="../../../../org.tizen.guides/html/native/ui/efl/ecore_animation_n.htm">Ecore Animations</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Animations</h1>
-       
+
 <p>You can change an object on the screen at certain intervals using an animation. To create an animation, you must first determine the duration of the animation, and then define a callback function that performs the actual animation with that duration.</p>
 
 <p>In the following example, 2 square rectangles are animated. One of them simply moves on the screen, while the other also changes its color and size while moving.</p>
@@ -52,14 +52,14 @@
 <p>The callback function can return <code>ECORE_CALLBACK_RENEW</code> to keep the animator running or <code>ECORE_CALLBACK_CANCEL</code> to stop it and automatically delete it at any time.</p></li>
 <li><code>ecore_animator_add()</code> creates an <code>Animator</code> object. The first parameter indicates the frame event callback function that actually defines the animation details, and the second parameter indicates the user data.
 <p>The <code>ecore_animator_timeline_add()</code> function is just like the <code>ecore_animator_add()</code> function, except that the animator only runs for a limited time.</p></li>
-<li><code>ecore_timer_add()</code> creates a timer to call the given function in the given period of time. The first parameter is the interval in seconds, and the second parameter is the given function. 
+<li><code>ecore_timer_add()</code> creates a timer to call the given function in the given period of time. The first parameter is the interval in seconds, and the second parameter is the given function.
 <p>If this function returns <code>ECORE_CALLBACK_RENEW</code>, the timer is rescheduled for the next interval given in the first parameter. If it returns <code>ECORE_CALLBACK_CANCEL</code>, the timer is deleted automatically. The third parameter indicates the user data to pass to the function when it is called.</p></li>
 </ul>
 
 <p>The label is not used in this example, so annotate it.</p>
 
 <pre class="prettyprint">
-/* 
+/*
    Conformant
    Create and initialize elm_conformant
    elm_conformant is mandatory for the base GUI to have a proper size
@@ -77,11 +77,11 @@ evas_object_show(ad-&gt;conform);
    Modify this part to change the view
 */
 #if 0 /* _NOT_USED */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;&lt;align=center&gt;Hello Tizen&lt;/align&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;label);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
+    ad-&gt;label = elm_label_add(ad-&gt;conform);
+    elm_object_text_set(ad-&gt;label, "&lt;align=center&gt;Hello Tizen&lt;/align&gt;");
+    evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_object_content_set(ad-&gt;conform, ad-&gt;label);
+    evas_object_show(ad-&gt;label);
 #endif
 
 /* Evas */
@@ -130,60 +130,60 @@ evas_object_show(ad-&gt;win);
 static Eina_Bool
 _advance_frame(void *data, double pos)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;double frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_LINEAR, 12, 15);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(data, 50 * (1 + frame), 50 * (1 + frame));
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, 100 * frame, 100 * frame);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(data, 255 * frame, 0, 255 * (1 - frame), 255);
+    double frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_LINEAR, 12, 15);
+    evas_object_resize(data, 50 * (1 + frame), 50 * (1 + frame));
+    evas_object_move(data, 100 * frame, 100 * frame);
+    evas_object_color_set(data, 255 * frame, 0, 255 * (1 - frame), 255);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    return ECORE_CALLBACK_RENEW;
 }
 
 static Eina_Bool
 _advance_frame2(void *data, double pos)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;double frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.2, 50);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(data, 100 - (50 * frame), 100 - (50 * frame));
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, 100 * (1 - frame), 100 * (1 - frame));
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(data, 255 * (1 - frame), 0, 255 * frame, 255);
+    double frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.2, 50);
+    evas_object_resize(data, 100 - (50 * frame), 100 - (50 * frame));
+    evas_object_move(data, 100 * (1 - frame), 100 * (1 - frame));
+    evas_object_color_set(data, 255 * (1 - frame), 0, 255 * frame, 255);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    return ECORE_CALLBACK_RENEW;
 }
 
 static Eina_Bool
 _advance_frame3(void * data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;static int x = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;if (x &gt;= 250)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(data, x += 2, 350);
+    static int x = 0;
+    if (x &gt;= 250)
+        x = 0;
+    evas_object_move(data, x += 2, 350);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+    return ECORE_CALLBACK_RENEW;
 }
 
 static Eina_Bool
 _start_second_anim(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_frametime_set(1./10);
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_timeline_add(20, _advance_frame2, data);
+    ecore_animator_frametime_set(1./10);
+    ecore_animator_timeline_add(20, _advance_frame2, data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+    return ECORE_CALLBACK_CANCEL;
 }
 
 static Eina_Bool
 _freeze_third_anim(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;ANIMATOR = %p&quot;, data);
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_freeze(data);
+    dlog_print(DLOG_ERROR, LOG_TAG, "ANIMATOR = %p", data);
+    ecore_animator_freeze(data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+    return ECORE_CALLBACK_CANCEL;
 }
 
 static Eina_Bool
 _thaw_third_anim(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_animator_thaw(data);
+    ecore_animator_thaw(data);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+    return ECORE_CALLBACK_CANCEL;
 }
 </pre>
 </li>
diff --git a/org.tizen.training/html/native/feature/app_graphics_n.htm b/org.tizen.training/html/native/feature/app_graphics_n.htm
index f924b75..b8e148e 100644 (file)
--- a/org.tizen.training/html/native/feature/app_graphics_n.htm
+++ b/org.tizen.training/html/native/feature/app_graphics_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Applications with Graphics and Animation</title>  
+       <title>Creating Applications with Graphics and Animation</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -21,18 +21,18 @@
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
        <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>  
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/ui/efl/graphical_objects_n.htm">Graphical Objects</a></li>
                        <li><a href="../../../../org.tizen.guides/html/native/ui/efl/ecore_animation_n.htm">Ecore Animations</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Creating Applications with Graphics and Animation</h1>
-       
+
 <p>If you want to create applications that offer graphics features to the user, Tizen provides various options for you.</p>
 
 <p>You can draw various shapes, such as squares and polygons, on the screen, and you can animate screen elements to change their size, position, and color.</p>
diff --git a/org.tizen.training/html/native/feature/app_graphics_polygon_n.htm b/org.tizen.training/html/native/feature/app_graphics_polygon_n.htm
index 332eb66..a6e3b32 100644 (file)
--- a/org.tizen.training/html/native/feature/app_graphics_polygon_n.htm
+++ b/org.tizen.training/html/native/feature/app_graphics_polygon_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Polygons on the Canvas</title>  
+       <title>Polygons on the Canvas</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -21,18 +21,18 @@
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
        <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>          
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/ui/efl/graphical_objects_n.htm">Graphical Objects</a></li>
                        <li><a href="../../../../org.tizen.guides/html/native/ui/efl/ecore_animation_n.htm">Ecore Animations</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Polygons on the Canvas</h1>
-       
+
 <p>You can draw various polygons, such as triangles and pentagons, on a canvas. </p>
 
 <p>The following example uses the same <strong>Basic UI</strong> template as the square drawing example. For more information on how to create the project with the template, see <a href="app_graphics_square_n.htm">Squares on the Canvas</a>.</p>
@@ -70,10 +70,10 @@ evas_object_show(ad-&gt;conform);
    Modify this part to change the view
 */
 #if 0 /* _NOT_USED */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;&lt;align=center&gt;Hello Tizen&lt;/align&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;label);
+    ad-&gt;label = elm_label_add(ad-&gt;conform);
+    elm_object_text_set(ad-&gt;label, "&lt;align=center&gt;Hello Tizen&lt;/align&gt;");
+    evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_object_content_set(ad-&gt;conform, ad-&gt;label);
 #endif
 
 /* Canvas */
diff --git a/org.tizen.training/html/native/feature/app_graphics_square_n.htm b/org.tizen.training/html/native/feature/app_graphics_square_n.htm
index 9e5af3d..c7d3eea 100644 (file)
--- a/org.tizen.training/html/native/feature/app_graphics_square_n.htm
+++ b/org.tizen.training/html/native/feature/app_graphics_square_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Squares on the Canvas</title>  
+       <title>Squares on the Canvas</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -21,18 +21,18 @@
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
        <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>          
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/ui/efl/graphical_objects_n.htm">Graphical Objects</a></li>
                        <li><a href="../../../../org.tizen.guides/html/native/ui/efl/ecore_animation_n.htm">Ecore Animations</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Squares on the Canvas</h1>
-       
+
 <p>To handle simple graphics elements in your application, start by learning how to draw a square on the screen. When you add multiple squares that overlap each other, you can see how their colors change due to the semi-transparent colors and overlays.</p>
 
 <p>To draw squares on the screen, you need to use a canvas. In EFL, the Evas library provides the canvas. All shapes drawn on Evas are created as Evas objects.</p>
@@ -64,7 +64,7 @@
 <p>The label is not used in this example, so annotate it.</p>
 
 <pre class="prettyprint">
-/* 
+/*
    Conformant
    Create and initialize elm_conformant
    elm_conformant is mandatory for the base GUI to have a proper size
@@ -82,10 +82,10 @@ evas_object_show(ad-&gt;conform);
    Modify this part to change the view
 */
 #if 0 /* _NOT_USED */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;&lt;align=center&gt;Hello Tizen&lt;/align&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;label);
+    ad-&gt;label = elm_label_add(ad-&gt;conform);
+    elm_object_text_set(ad-&gt;label, "&lt;align=center&gt;Hello Tizen&lt;/align&gt;");
+    evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_object_content_set(ad-&gt;conform, ad-&gt;label);
 #endif
 
 /* Evas */
diff --git a/org.tizen.training/html/native/feature/app_multimedia_audio_n.htm b/org.tizen.training/html/native/feature/app_multimedia_audio_n.htm
index 9fffccf..4893cfe 100644 (file)
--- a/org.tizen.training/html/native/feature/app_multimedia_audio_n.htm
+++ b/org.tizen.training/html/native/feature/app_multimedia_audio_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Audio Playback and Recording</title>  
+       <title>Audio Playback and Recording</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -26,17 +26,17 @@
                        <li><a href="#audio_play">Playing Audio</a></li>
                        <li><a href="#audio_record">Recording Audio</a></li>
                </ul>
-        <p class="toc-title">Related Info</p>          
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/media/media_cover_n.htm">Media and Camera Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Audio Playback and Recording</h1>
-       
+
 <p>Tizen enables your application to manage audio content. It also provides control functions for using audio resources. The resources can be media files stored on the device or streamed from a server through the network.</p>
 
 <p>Tizen supports various audio formats, including MP3, AAC, WMA, M4A, 3GA, WAV, and AMR. The available formats depend on the target device.</p>
@@ -65,22 +65,22 @@
 <li>Define a variable for the player handle, and create the handle:
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;player_h player;
+    player_h player;
 };
 typedef struct appdata appdata_s;
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_create(&amp;ad-&gt;player);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to create&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Perform more playback configuration, such as setting callbacks,
-&nbsp;&nbsp;&nbsp;&nbsp;   setting the source file URI, and preparing the player
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    int error_code = 0;
+    error_code = player_create(&amp;ad-&gt;player);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to create");
+
+    /*
+       Perform more playback configuration, such as setting callbacks,
+       setting the source file URI, and preparing the player
+    */
 }
 </pre>
 </li>
@@ -89,7 +89,7 @@ init_base_player(appdata_s *ad)
 <pre class="prettyprint">
 #include &lt;storage.h&gt;
 
-#define MP3_SAMPLE &quot;SampleAudio.mp3&quot;;
+#define MP3_SAMPLE "SampleAudio.mp3";
 
 int internal_storage_id;
 char *audio_storage_path = NULL;
@@ -98,53 +98,53 @@ char *audio_path = NULL;
 static bool
 storage_cb(int storage_id, storage_type_e type, storage_state_e state, const char *path, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+    if (type == STORAGE_TYPE_INTERNAL) {
+        internal_storage_id = storage_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 _get_storage_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *path = NULL;
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_foreach_device_supported(storage_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_MUSIC, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio_storage_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_VIDEOS, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_storage_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    int error_code = 0;
+    char *path = NULL;
+
+    error_code = storage_foreach_device_supported(storage_cb, NULL);
+    error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_MUSIC, &amp;path);
+    if (error_code != STORAGE_ERROR_NONE) {
+        audio_storage_path = strdup(path);
+        free(path);
+    }
+
+    error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_VIDEOS, &amp;path);
+    if (error_code != STORAGE_ERROR_NONE) {
+        video_storage_path = strdup(path);
+        free(path);
+    }
 }
 
 void
 _set_test_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int path_len = 0;
+    int path_len = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;path_len = strlen(audio_storage_path) + strlen(MP3_SAMPLE) + 1;
-&nbsp;&nbsp;&nbsp;&nbsp;audio_path = malloc(path_len);
-&nbsp;&nbsp;&nbsp;&nbsp;memset(audio_path, 0x0, path_len);
+    path_len = strlen(audio_storage_path) + strlen(MP3_SAMPLE) + 1;
+    audio_path = malloc(path_len);
+    memset(audio_path, 0x0, path_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(audio_path, audio_storage_path, strlen(audio_storage_path));
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(audio_path, MP3_SAMPLE, strlen(MP3_SAMPLE));
+    strncat(audio_path, audio_storage_path, strlen(audio_storage_path));
+    strncat(audio_path, MP3_SAMPLE, strlen(MP3_SAMPLE));
 }
 </pre>
 <p>Once the storage path is set, you can specify the audio file to play using the <code>player_set_uri()</code> function with the player handle:</p>
 <pre class="prettyprint">
 error_code = player_set_uri(ad-&gt;player, audio_path);
 if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set URI: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to set URI: error code = %d", error_code);
 </pre>
 </li>
 <li>Create UI buttons and add callback functions for your application to control the playback:
@@ -152,21 +152,21 @@ if (error_code != PLAYER_ERROR_NONE)
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a window */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a button */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add a callback to the button */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button_init, &quot;clicked&quot;, init_base_player, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button_end, &quot;clicked&quot;, release_base_player, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create an Evas image object for the video surface */
+    /* Create a window */
+    /* Create a button */
+    /* Add a callback to the button */
+    evas_object_smart_callback_add(button_init, "clicked", init_base_player, ad);
+    evas_object_smart_callback_add(button_end, "clicked", release_base_player, ad);
+    /* Create an Evas image object for the video surface */
 }
 
 static void
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+    appdata_s *ad = data;
+    create_base_gui(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -178,22 +178,22 @@ app_create(void *data)
 static void
 _player_interrupted_cb(player_interrupted_code_e code, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;player_state_e state;
+    appdata_s *ad = data;
+    player_state_e state;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* All the interrupted_code_e is deprecated from Tizen 3.0 except PLAYER_INTERRUPTED_BY_RESOURCE_CONFLICT */
-&nbsp;&nbsp;&nbsp;&nbsp;player_get_state(ad-&gt;player, &amp;state);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;current player state = %d&quot;, state);
-&nbsp;&nbsp;&nbsp;&nbsp;/* If the state is PLAYER_STATE_PAUSED, update the UI (for example, button) */
+    /* All the interrupted_code_e is deprecated from Tizen 3.0 except PLAYER_INTERRUPTED_BY_RESOURCE_CONFLICT */
+    player_get_state(ad-&gt;player, &amp;state);
+    dlog_print(DLOG_INFO, LOG_TAG, "current player state = %d", state);
+    /* If the state is PLAYER_STATE_PAUSED, update the UI (for example, button) */
 }
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set an interruption callback if the application wants to know the reason */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_interrupted_cb(ad-&gt;player, _player_interrupted_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set interrupt cb&quot;);
+    /* Set an interruption callback if the application wants to know the reason */
+    error_code = player_set_interrupted_cb(ad-&gt;player, _player_interrupted_cb, ad);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to set interrupt cb");
 }
 </pre>
 </li>
@@ -202,17 +202,17 @@ init_base_player(appdata_s *ad)
 static void
 _player_completed_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Playback End&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Playback End");
 }
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set a completed callback if the application wants to know when the playback ends */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_completed_cb(ad-&gt;player, _player_completed_cb, ad);
+    /* Set a completed callback if the application wants to know when the playback ends */
+    error_code = player_set_completed_cb(ad-&gt;player, _player_completed_cb, ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set completed cb&quot;);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to set completed cb");
 }
 </pre>
 </li>
@@ -221,15 +221,15 @@ init_base_player(appdata_s *ad)
 static void
 _player_error_cb(int error_code, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;playback failed, error = %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "playback failed, error = %x", error_code);
 }
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_error_cb(ad-&gt;player, _player_error_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set error cb&quot;);
+    error_code = player_set_error_cb(ad-&gt;player, _player_error_cb, NULL);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to set error cb");
 }
 </pre>
 </li>
@@ -237,7 +237,7 @@ init_base_player(appdata_s *ad)
 </li>
 </ol>
 
-<h3 id="playback">Managing Audio Playback</h3> 
+<h3 id="playback">Managing Audio Playback</h3>
 
 <p>When the player is created, it is in the <code>PLAYER_STATE_IDLE</code> state. To start playback, it must be in the <code>PLAYER_STATE_READY</code> state.</p>
 
@@ -249,7 +249,7 @@ init_base_player(appdata_s *ad)
 <pre class="prettyprint">
 error_code = player_prepare(ad-&gt;player);
 if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to prepare player: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to prepare player: error code = %d", error_code);
 </pre>
 </li>
 <li>
@@ -257,7 +257,7 @@ if (error_code != PLAYER_ERROR_NONE)
 <pre class="prettyprint">
 error_code = player_start(ad-&gt;player);
 if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to start player: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to start player: error code = %d", error_code);
 </pre>
 </li>
 <li>
@@ -280,7 +280,7 @@ error_code = player_unprepare(ad-&gt;player);
 error_code = player_destroy(ad-&gt;player);
 
 if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;fail to destroy player: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "fail to destroy player: error code = %d", error_code);
 </pre>
 
 <h2 id="audio_record">Recording Audio</h2>
@@ -316,7 +316,7 @@ static recorder_h g_recorder;
 /* Create the audio recorder handle */
 int error_code = recorder_create_audiorecorder(&amp;g_recorder);
 if (error_code != RECORDER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;fail to create an Audio Recorder: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "fail to create an Audio Recorder: error code = %d", error_code);
 </pre>
 </li>
 <li>
@@ -331,7 +331,7 @@ error_code = recorder_set_state_changed_cb(g_recorder, _state_changed_cb, NULL);
 static void
 _state_changed_cb(recorder_state_e previous, recorder_state_e current, bool by_policy, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;_recorder_state_changed_cb (prev: %d, curr: %d)\n&quot;, previous, current);
+    dlog_print(DLOG_INFO, LOG_TAG, "_recorder_state_changed_cb (prev: %d, curr: %d)\n", previous, current);
 }
 </pre>
 </li>
@@ -343,7 +343,7 @@ error_code = recorder_set_recording_limit_reached_cb(g_recorder, _recorder_recor
 static void
 _recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Recording limit reached: %d\n&quot;, type);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Recording limit reached: %d\n", type);
 }
 </pre>
 </li></ul>
@@ -353,10 +353,10 @@ _recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type, void
 <ul>
 <li>Set the audio codec for encoding the audio stream using the <code>recorder_set_audio_encoder()</code> function. The possible audio codec values are defined in the <code>recorder_audio_codec_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga431bd585d929f13a71ecefd58ed17d46">wearable</a> applications).
 <pre class="prettyprint">
-#define FILENAME_PREFIX &quot;AUDIO&quot;
+#define FILENAME_PREFIX "AUDIO"
 struct tm localtime = {0};
 time_t rawtime = time(NULL);
-char filename[256] = {&#39;\0&#39;};
+char filename[256] = {'\0'};
 size_t size;
 
 /* Set the audio encoder */
@@ -373,12 +373,12 @@ error_code = recorder_set_file_format(g_recorder, RECORDER_FILE_FORMAT_3GP);
 <pre class="prettyprint">
 /* Create the file name */
 if (localtime_r(&amp;rawtime, &amp;localtime) != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;size = snprintf(filename, sizeof(filename), &quot;%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.3gp&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_get_data_path(), FILENAME_PREFIX,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_year + 1900, localtime.tm_mon + 1, localtime.tm_mday,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
+    size = snprintf(filename, sizeof(filename), "%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.3gp",
+                    app_get_data_path(), FILENAME_PREFIX,
+                    localtime.tm_year + 1900, localtime.tm_mon + 1, localtime.tm_mday,
+                    localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 }
 
 /* Set the full path and file name */
@@ -440,31 +440,31 @@ error_code = recorder_pause(g_recorder);
 static bool
 _recorder_expect_state(recorder_h recorder, recorder_state_e expected_state)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;recorder_state_e state;
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = recorder_get_state(recorder, &amp;state);
+    recorder_state_e state;
+    int error_code = recorder_get_state(recorder, &amp;state);
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;recorder state = %d, expected recorder state = %d&quot;, state, expected_state);
-&nbsp;&nbsp;&nbsp;&nbsp;if (state == expected_state)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return TRUE;
+    dlog_print(DLOG_INFO, LOG_TAG, "recorder state = %d, expected recorder state = %d", state, expected_state);
+    if (state == expected_state)
+        return TRUE;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return FALSE;
+    return FALSE;
 }
 
 /* Stop the recorder and save the recorded data to a file */
 if (_recorder_expect_state(g_recorder, RECORDER_STATE_RECORDING) || _recorder_expect_state(g_recorder, RECORDER_STATE_PAUSED)) {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = recorder_commit(g_recorder);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != RECORDER_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    error_code = recorder_commit(g_recorder);
+    if (error_code != RECORDER_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return true;
+    }
 }
 </pre></li>
 </ul>
 </li>
 </ol>
 
-<h3 id="recorder_terminate">Terminating the Audio Recorder</h3> 
+<h3 id="recorder_terminate">Terminating the Audio Recorder</h3>
 
 <p>After you finish audio recording, release all the resources allocated to the audio recorder:</p>
 <ol>
@@ -476,7 +476,7 @@ error_code = recorder_unprepare(g_recorder);
 error_code = recorder_destroy(g_recorder);
 
 if (error_code != RECORDER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;fail to destroy recorder: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "fail to destroy recorder: error code = %d", error_code);
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.training/html/native/feature/app_multimedia_camera_n.htm b/org.tizen.training/html/native/feature/app_multimedia_camera_n.htm
index 517b037..c46653b 100644 (file)
--- a/org.tizen.training/html/native/feature/app_multimedia_camera_n.htm
+++ b/org.tizen.training/html/native/feature/app_multimedia_camera_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Image Capturing with the Camera</title>  
+       <title>Image Capturing with the Camera</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -27,18 +27,18 @@
                        <li><a href="#preview_capture">Previewing and Capturing Images</a></li>
                        <li><a href="#camera_stop">Stopping the Camera</a></li>
                </ul>
-        <p class="toc-title">Related Info</p>          
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/media/media_cover_n.htm">Media and Camera Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Image Capturing with the Camera</h1>
 
-<p>You can capture still images with the device&#39;s internal camera and keep images on your target device using the Camera API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">wearable</a> applications). The main features of the Camera API include:</p>
+<p>You can capture still images with the device's internal camera and keep images on your target device using the Camera API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">wearable</a> applications). The main features of the Camera API include:</p>
 <ul>
 <li>Previewing images in real time</li>
 <li>Capturing and saving images</li>
@@ -71,10 +71,10 @@
 <p>In the following example, create a <code>g_camera</code> camera handle, and define a <code>camdata</code> structure type, to store global data related to the camera handle:</p>
 <pre class="prettyprint">
 struct _camdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *rect;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas *evas;
-&nbsp;&nbsp;&nbsp;&nbsp;camera_h g_camera; /* Camera handle */
+    Evas_Object *win;
+    Evas_Object *rect;
+    Evas *evas;
+    camera_h g_camera; /* Camera handle */
 };
 typedef struct _camdata camdata;
 
@@ -85,7 +85,7 @@ int error_code = 0;
 /* Create the camera handle */
 error_code = camera_create(CAMERA_DEVICE_CAMERA0, &amp;cam_data.g_camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;fail to create camera: error code = %d&quot;, error_code);
+    dlog_print(DLOG_INFO, LOG_TAG, "fail to create camera: error code = %d", error_code);
 </pre>
 
 <p>The <code>CAMERA_DEVICE_CAMERA0</code> parameter means that the currently activated device camera is 0, which is the primary camera. You can select between the primary (0) and the secondary (1) camera, which are defined in the <code>camera_device_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">wearable</a> applications). Since devices can have multiple camera sensors with different capabilities, you must create a camera handle with a proper <code>camera_device_e</code> value, determining which camera sensor is used. Usually, the primary sensor is located on the back side and the secondary sensor is on the front side of the device.</p>
@@ -107,12 +107,12 @@ error_code = camera_attr_set_image_quality(cam_data.g_camera, 100);
 <p>Using the <code>camera_set_display()</code> function, you can set the display type for showing preview images. The display type is either <code>CAMERA_DISPLAY_TYPE_EVAS</code> or <code>CAMERA_DISPLAY_TYPE_OVERLAY</code>.</p>
 <p>The following example shows how to set the display according to the <code>display_type</code> parameter:</p>
 
-  
+
       <div class="note">
         <strong>Note</strong>
         The camera state must be <code>CAMERA_STATE_CREATED</code> and the <code>create_base_gui()</code> function must be called before previewing.
     </div>
-  
+
 <pre class="prettyprint">
 int error_code = CAMERA_ERROR_NONE;
 Evas_Object *g_eo = NULL;
@@ -120,50 +120,50 @@ Evas_Object *g_eo = NULL;
 static void
 create_base_gui(camdata *cam_data, camera_display_type_e display_type)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_config_accel_preference_set(&quot;opengl&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;/* PACKAGE contains the package name character info */
-&nbsp;&nbsp;&nbsp;&nbsp;cam_data-&gt;win = elm_win_add(NULL, PACKAGE, ELM_WIN_BASIC);
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(cam_data-&gt;win, 240, 320);
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(cam_data-&gt;win, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(cam_data-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;cam_data-&gt;evas = evas_object_evas_get(cam_data-&gt;win);
-
-&nbsp;&nbsp;&nbsp;&nbsp;switch (display_type) {
-&nbsp;&nbsp;&nbsp;&nbsp;case CAMERA_DISPLAY_TYPE_EVAS:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the Evas image object for drawing */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_eo = evas_object_image_add(cam_data-&gt;evas);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_size_set(g_eo, 240, 320);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(g_eo, 0, 0, 240, 320);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(g_eo, 240, 320);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(g_eo);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(cam_data.win);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case CAMERA_DISPLAY_TYPE_OVERLAY:
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cam_data-&gt;rect = evas_object_rectangle_add(cam_data-&gt;evas);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(cam_data-&gt;rect, 240, 320);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(cam_data-&gt;rect, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(cam_data-&gt;rect, 0, 0, 0, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_render_op_set(cam_data-&gt;rect, EVAS_RENDER_COPY);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(cam_data-&gt;rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(cam_data-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;case default:
-&nbsp;&nbsp;&nbsp;&nbsp;break;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* Window */
+    elm_config_accel_preference_set("opengl");
+    /* PACKAGE contains the package name character info */
+    cam_data-&gt;win = elm_win_add(NULL, PACKAGE, ELM_WIN_BASIC);
+
+    evas_object_resize(cam_data-&gt;win, 240, 320);
+
+    evas_object_move(cam_data-&gt;win, 0, 0);
+    elm_win_autodel_set(cam_data-&gt;win, EINA_TRUE);
+
+    cam_data-&gt;evas = evas_object_evas_get(cam_data-&gt;win);
+
+    switch (display_type) {
+    case CAMERA_DISPLAY_TYPE_EVAS:
+        /* Set the Evas image object for drawing */
+        g_eo = evas_object_image_add(cam_data-&gt;evas);
+        evas_object_image_size_set(g_eo, 240, 320);
+        evas_object_image_fill_set(g_eo, 0, 0, 240, 320);
+        evas_object_resize(g_eo, 240, 320);
+        evas_object_show(g_eo);
+        evas_object_show(cam_data.win);
+        break;
+    case CAMERA_DISPLAY_TYPE_OVERLAY:
+        cam_data-&gt;rect = evas_object_rectangle_add(cam_data-&gt;evas);
+        evas_object_resize(cam_data-&gt;rect, 240, 320);
+        evas_object_move(cam_data-&gt;rect, 0, 0);
+        evas_object_color_set(cam_data-&gt;rect, 0, 0, 0, 0);
+        evas_object_render_op_set(cam_data-&gt;rect, EVAS_RENDER_COPY);
+        evas_object_size_hint_weight_set(cam_data-&gt;rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+        /* Show the window after the base GUI is set up */
+        evas_object_show(cam_data-&gt;win);
+        break;
+    case default:
+    break;
+    }
 }
 
 error_code = camera_set_display(cam_data.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY, GET_DISPLAY(cam_data.win));
 if (error_code != CAMERA_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, &quot;camera_set_display failed [0x%x]&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;camera_destroy(cam_data.g_camera);
-&nbsp;&nbsp;&nbsp;&nbsp;cam_data.g_camera = 0;
+    dlog_print(DLOG_DEBUG, "camera_set_display failed [0x%x]", ret);
+    camera_destroy(cam_data.g_camera);
+    cam_data.g_camera = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 </pre>
 </li>
@@ -177,11 +177,11 @@ int resolution[2];
 static bool
 _preview_resolution_cb(int width, int height, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int *resolution = (int*)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;resolution[0] = width;
-&nbsp;&nbsp;&nbsp;&nbsp;resolution[1] = height;
+    int *resolution = (int*)user_data;
+    resolution[0] = width;
+    resolution[1] = height;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 
 /* Find a resolution that is supported by the device */
@@ -211,16 +211,16 @@ error_code = camera_set_preview_cb(cam_data.g_camera, _camera_preview_cb, NULL);
 static void
 _camera_preview_cb(camera_preview_data_s *frame, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
+    int error_code = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (g_enable_focus == true) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_focusing(cam_data.g_camera, true);
+    if (g_enable_focus == true) {
+        error_code = camera_start_focusing(cam_data.g_camera, true);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (error_code == CAMERA_ERROR_NOT_SUPPORTED)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_focusing(cam_data.g_camera, false);
+        if (error_code == CAMERA_ERROR_NOT_SUPPORTED)
+            error_code = camera_start_focusing(cam_data.g_camera, false);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_enable_focus = false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        g_enable_focus = false;
+    }
 }
 </pre>
 <p>The second parameter of the <code>camera_start_focusing()</code> function is a Boolean flag defining whether the camera must continuously maintain focus. The <code>g_enable_focus</code> flag is set to <code>true</code> at the application startup. For the first frame of the preview, the camera starts auto-focusing. Subsequent calls to the callback do not provoke any action, which prevents the auto-focusing process from starting after the first previewed frame.</p>
@@ -234,14 +234,14 @@ _camera_preview_cb(camera_preview_data_s *frame, void *user_data)
 static void
 _camera_focus_cb(camera_focus_state_e state, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code;
+    int error_code;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (state == CAMERA_FOCUS_STATE_FOCUSED &amp;&amp; g_enable_shot == true) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*  Start capturing */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_capture(cam_data.g_camera, _camera_capturing_cb, _camera_completed_cb, NULL);
+    if (state == CAMERA_FOCUS_STATE_FOCUSED &amp;&amp; g_enable_shot == true) {
+        /*  Start capturing */
+        error_code = camera_start_capture(cam_data.g_camera, _camera_capturing_cb, _camera_completed_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g_enable_shot = false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        g_enable_shot = false;
+    }
 }
 </pre>
 </li></ul>
@@ -249,7 +249,7 @@ _camera_focus_cb(camera_focus_state_e state, void *user_data)
 </ol>
 
 <h2 id="preview_capture">Previewing and Capturing Images</h2>
-                       
+
 <p>After initializing the camera, you can start the preview, auto-focus, and capturing processes to take a photo. The camera preview starts with the <code>camera_start_preview()</code> function call, and it draws frames on the screen and allows you to capture frames as still images:</p>
 <pre class="prettyprint">
 error_code = camera_start_preview(cam_data.g_camera);
@@ -267,13 +267,13 @@ error_code = camera_start_preview(cam_data.g_camera);
 static void
 _camera_capturing_cb(camera_image_data_s* image, camera_image_data_s* postview, camera_image_data_s* thumbnail, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Writing image to file&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;FILE *file = fopen(g_fname, &quot;w+&quot;);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "Writing image to file");
+    FILE *file = fopen(g_fname, "w+");
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (image-&gt;data != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fwrite(image-&gt;data, 1, image-&gt;size, file);
+    if (image-&gt;data != NULL)
+        fwrite(image-&gt;data, 1, image-&gt;size, file);
 
-&nbsp;&nbsp;&nbsp;&nbsp;fclose(file);
+    fclose(file);
 }
 </pre>
 
@@ -284,14 +284,14 @@ _camera_capturing_cb(camera_image_data_s* image, camera_image_data_s* postview,
 static void
 _camera_completed_cb(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
+    int error_code = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;usleep(25000);  /* Display the captured image for 0.025 seconds */
+    usleep(25000);  /* Display the captured image for 0.025 seconds */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Restart the camera preview */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = camera_start_preview(cam_data.g_camera);
+    /* Restart the camera preview */
+    error_code = camera_start_preview(cam_data.g_camera);
 
-&nbsp;&nbsp;&nbsp;&nbsp;g_enable_focus = true;
+    g_enable_focus = true;
 }
 </pre>
 
@@ -307,11 +307,11 @@ _camera_completed_cb(void *user_data)
 </ol>
 
 <pre class="prettyprint">
-error_code = camera_stop_preview(cam_data.g_camera); 
+error_code = camera_stop_preview(cam_data.g_camera);
 error_code = camera_destroy(cam_data.g_camera);
 
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;fail to destroy camera: error code = %d&quot;, error_code);
+    dlog_print(DLOG_INFO, LOG_TAG, "fail to destroy camera: error code = %d", error_code);
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.training/html/native/feature/app_multimedia_n.htm b/org.tizen.training/html/native/feature/app_multimedia_n.htm
index 34360a5..0fe669c 100644 (file)
--- a/org.tizen.training/html/native/feature/app_multimedia_n.htm
+++ b/org.tizen.training/html/native/feature/app_multimedia_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Applications with Multimedia</title>  
+       <title>Creating Applications with Multimedia</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -21,17 +21,17 @@
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
        <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>  
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/media/media_cover_n.htm">Media and Camera Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Creating Applications with Multimedia</h1>
-       
+
 <p>If you want to create applications that offer multimedia features to the user, Tizen provides various options for you.</p>
 
 <p>Multimedia in the application allows the user to play and record audio and video, and use the device camera to take photos.</p>
diff --git a/org.tizen.training/html/native/feature/app_multimedia_video_n.htm b/org.tizen.training/html/native/feature/app_multimedia_video_n.htm
index 9c69afd..fabd7d1 100644 (file)
--- a/org.tizen.training/html/native/feature/app_multimedia_video_n.htm
+++ b/org.tizen.training/html/native/feature/app_multimedia_video_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Video Playback and Recording</title>  
+       <title>Video Playback and Recording</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -26,21 +26,21 @@
                        <li><a href="#video_play">Playing Video</a></li>
                        <li><a href="#video_record">Recording Video</a></li>
                </ul>
-        <p class="toc-title">Related Info</p>          
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/media/media_cover_n.htm">Media and Camera Guides</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Video Playback and Recording</h1>
 
 <p>Tizen enables your application to manage video content and provides control functions for using video resources. To play and record video files, use the Player (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications) and Recorder (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">wearable</a> applications) APIs. Managing video files is very similar to managing audio content, but it requires more consideration to display the visual content.</p>
 
 <p>Tizen supports various video formats, including WMV, ASF, MP4, 3GP, AVI, MKV, and OGG. The available formats depend on the target device.</p>
-                       
+
 <h2 id="video_play">Playing Video</h2>
 
 <p>To play video files stored on the device, use the Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications). The Player API also provides interfaces for getting media content information and controlling media operations, such as play, pause, resume, and stop.</p>
@@ -71,22 +71,22 @@
 <li>Define a variable for the player handle, and create the handle:
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;player_h player;
+    player_h player;
 };
 typedef struct appdata appdata_s;
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_create(&amp;ad-&gt;player);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to create&quot;);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Perform more playback configuration, such as setting callbacks,
-&nbsp;&nbsp;&nbsp;&nbsp;   setting the source file URI, and preparing the player
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    int error_code = 0;
+    error_code = player_create(&amp;ad-&gt;player);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to create");
+
+    /*
+       Perform more playback configuration, such as setting callbacks,
+       setting the source file URI, and preparing the player
+    */
 }
 </pre>
 </li>
@@ -95,7 +95,7 @@ init_base_player(appdata_s *ad)
 <pre class="prettyprint">
 #include &lt;storage.h&gt;
 
-#define MP4_SAMPLE &quot;SampleVideo.mp4&quot;;
+#define MP4_SAMPLE "SampleVideo.mp4";
 
 int internal_storage_id;
 char *video_storage_path = NULL;
@@ -104,48 +104,48 @@ char *video_path = NULL;
 static bool
 storage_cb(int storage_id, storage_type_e type, storage_state_e state, const char *path, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (type == STORAGE_TYPE_INTERNAL) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;internal_storage_id = storage_id;
+    if (type == STORAGE_TYPE_INTERNAL) {
+        internal_storage_id = storage_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 _get_storage_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int error_code = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;char *path = NULL;
+    int error_code = 0;
+    char *path = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_foreach_device_supported(storage_cb, NULL);
+    error_code = storage_foreach_device_supported(storage_cb, NULL);
 
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_VIDEOS, &amp;path);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != STORAGE_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;video_storage_path = strdup(path);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(path);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_VIDEOS, &amp;path);
+    if (error_code != STORAGE_ERROR_NONE) {
+        video_storage_path = strdup(path);
+        free(path);
+    }
 }
 
 void
 _set_test_path()
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int path_len = 0;
+    int path_len = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;path_len = strlen(video_storage_path) + strlen(MP4_SAMPLE) + 1;
-&nbsp;&nbsp;&nbsp;&nbsp;video_path = malloc(path_len);
-&nbsp;&nbsp;&nbsp;&nbsp;memset(video_path, 0x0, path_len);
+    path_len = strlen(video_storage_path) + strlen(MP4_SAMPLE) + 1;
+    video_path = malloc(path_len);
+    memset(video_path, 0x0, path_len);
 
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(video_path, video_storage_path, strlen(video_storage_path));
-&nbsp;&nbsp;&nbsp;&nbsp;strncat(video_path, MP4_SAMPLE, strlen(MP4_SAMPLE));
+    strncat(video_path, video_storage_path, strlen(video_storage_path));
+    strncat(video_path, MP4_SAMPLE, strlen(MP4_SAMPLE));
 }
 </pre>
 <p>Once the storage path is set, you can specify the video file to play using the <code>player_set_uri()</code> function with the player handle:</p>
 <pre class="prettyprint">
 error_code = player_set_uri(ad-&gt;player, video_path);
 if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set URI: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to set URI: error code = %d", error_code);
 </pre>
 </li>
 <li>Create UI buttons and add callback functions for your application to control the playback:
@@ -153,21 +153,21 @@ if (error_code != PLAYER_ERROR_NONE)
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a window */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create a button */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add a callback to the button */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button_init, &quot;clicked&quot;, init_base_player, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(button_end, &quot;clicked&quot;, release_base_player, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create an Evas image object for the video surface */
+    /* Create a window */
+    /* Create a button */
+    /* Add a callback to the button */
+    evas_object_smart_callback_add(button_init, "clicked", init_base_player, ad);
+    evas_object_smart_callback_add(button_end, "clicked", release_base_player, ad);
+    /* Create an Evas image object for the video surface */
 }
 
 static void
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+    appdata_s *ad = data;
+    create_base_gui(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -179,39 +179,39 @@ app_create(void *data)
 static void
 _player_interrupted_cb(player_interrupted_code_e code, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;player_state_e state;
+    appdata_s *ad = data;
+    player_state_e state;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* All the interrupted_code_e is deprecated from Tizen 3.0 except PLAYER_INTERRUPTED_BY_RESOURCE_CONFLICT */
-&nbsp;&nbsp;&nbsp;&nbsp;player_get_state(ad-&gt;player, &amp;state);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;current player state = %d&quot;, state);
-&nbsp;&nbsp;&nbsp;&nbsp;/* If the state is PLAYER_STATE_PAUSED, update the UI (for example, button) */
+    /* All the interrupted_code_e is deprecated from Tizen 3.0 except PLAYER_INTERRUPTED_BY_RESOURCE_CONFLICT */
+    player_get_state(ad-&gt;player, &amp;state);
+    dlog_print(DLOG_INFO, LOG_TAG, "current player state = %d", state);
+    /* If the state is PLAYER_STATE_PAUSED, update the UI (for example, button) */
 }
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set an interruption callback if the application wants to know the reason */
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_interrupted_cb(ad-&gt;player, _player_interrupted_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set interrupt cb&quot;);
+    /* Set an interruption callback if the application wants to know the reason */
+    error_code = player_set_interrupted_cb(ad-&gt;player, _player_interrupted_cb, ad);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to set interrupt cb");
 }
 </pre>
 </li>
-<li>End notifications: 
+<li>End notifications:
 <pre class="prettyprint">
 static void
 _player_completed_cb(void *_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;Playback End&quot;);
+    dlog_print(DLOG_INFO, LOG_TAG, "Playback End");
 }
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_completed_cb(ad-&gt;player, _player_completed_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set completed cb&quot;);
+    error_code = player_set_completed_cb(ad-&gt;player, _player_completed_cb, ad);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to set completed cb");
 }
 </pre>
 </li>
@@ -220,15 +220,15 @@ init_base_player(appdata_s *ad)
 static void
 _player_error_cb(int error_code, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;playback failed, error = %x&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "playback failed, error = %x", error_code);
 }
 
 static void
 init_base_player(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_error_cb(ad-&gt;player, _player_error_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to set error cb&quot;);
+    error_code = player_set_error_cb(ad-&gt;player, _player_error_cb, NULL);
+    if (error_code != PLAYER_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to set error cb");
 }
 </pre>
 </li>
@@ -253,7 +253,7 @@ error_code = player_set_display(ad-&gt;player, PLAYER_DISPLAY_TYPE_OVERLAY, GET_
 <pre class="prettyprint">
 error_code = player_prepare(ad-&gt;player);
 if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to prepare player: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to prepare player: error code = %d", error_code);
 </pre>
 </li>
 <li>
@@ -261,7 +261,7 @@ if (error_code != PLAYER_ERROR_NONE)
 <pre class="prettyprint">
 error_code = player_start(ad-&gt;player);
 if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to start player: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "failed to start player: error code = %d", error_code);
 </pre>
 </li>
 <li>
@@ -270,7 +270,7 @@ if (error_code != PLAYER_ERROR_NONE)
 </li>
 </ol>
 
-<h3 id="video_configure">Configuring the Video Playback</h3> 
+<h3 id="video_configure">Configuring the Video Playback</h3>
 
 <p>During video playback, you can manage the display settings – display mode and display orientation – as needed. Before setting the parameters, make sure that the player handle has been created, the display set, and the player started.</p>
 
@@ -283,11 +283,11 @@ if (error_code != PLAYER_ERROR_NONE)
 bool is_visible;
 
 error_code = player_is_display_visible(ad-&gt;player, &amp;is_visible);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_is_display_visible = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_is_display_visible = %d", error_code);
 
 if (!is_visible) {
-&nbsp;&nbsp;&nbsp;&nbsp;error_code = player_set_display_visible(ad-&gt;player, true);
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_visible = %d&quot;, error_code);
+    error_code = player_set_display_visible(ad-&gt;player, true);
+    dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_visible = %d", error_code);
 }
 </pre>
 </li>
@@ -295,14 +295,14 @@ if (!is_visible) {
 <p>The available display modes are defined in the <code>player_display_mode_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">wearable</a> applications). Note that the DST ROI mode is deprecated from Tizen 3.0.</p>
 <pre class="prettyprint">
 error_code = player_set_display_mode(ad-&gt;player, PLAYER_DISPLAY_MODE_FULL_SCREEN);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_mode = %d", error_code);
 </pre>
 </li>
 <li>Set the display orientation.
 <p>The display orientations are defined in the <code>player_display_rotation_e</code> enumeration (in <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">wearable</a> applications).</p>
 <pre class="prettyprint">
 error_code = player_set_display_rotation(ad-&gt;player, PLAYER_DISPLAY_ROTATION_90);
-dlog_print(DLOG_ERROR, LOG_TAG, &quot;player_set_display_mode = %d&quot;, error_code);
+dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_mode = %d", error_code);
 </pre>
 </li>
 </ol>
@@ -322,7 +322,7 @@ error_code = player_unprepare(ad-&gt;player);
 error_code = player_destroy(ad-&gt;player);
 
 if (error_code != PLAYER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;fail to destroy player: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "fail to destroy player: error code = %d", error_code);
 </pre>
 
 
@@ -358,9 +358,9 @@ if (error_code != PLAYER_ERROR_NONE)
 #include &lt;camera.h&gt;
 
 struct recdata {
-&nbsp;&nbsp;&nbsp;&nbsp;bool shutdown;
-&nbsp;&nbsp;&nbsp;&nbsp;recorder_h recorder;
-&nbsp;&nbsp;&nbsp;&nbsp;camera_h camera;
+    bool shutdown;
+    recorder_h recorder;
+    camera_h camera;
 };
 </pre>
 </li>
@@ -369,7 +369,7 @@ struct recdata {
 <pre class="prettyprint">
 static const int RECORD_TIME=2;
 static const int RECORD_LIMIT=4;
-#define FILENAME_PREFIX &quot;VIDEO&quot;
+#define FILENAME_PREFIX "VIDEO"
 static int g_bitrate = 288000;
 static int duration;
 static int playing=0;
@@ -391,7 +391,7 @@ rec_data.recorder = NULL;
 /* Create the camera handle */
 error_code = camera_create(CAMERA_DEVICE_CAMERA0, &amp;rec_data.camera);
 if (error_code != CAMERA_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;fail to create camera: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "fail to create camera: error code = %d", error_code);
 </pre>
 </li>
 <li>Configure the video recorder.
@@ -400,7 +400,7 @@ if (error_code != CAMERA_ERROR_NONE)
 /* Create the video recorder handle */
 error_code = recorder_create_videorecorder(rec_data.camera, &amp;rec_data.recorder);
 if (error_code != RECORDER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;fail to create a Video Recorder: error code = %d&quot;, error_code);
+    dlog_print(DLOG_INFO, LOG_TAG, "fail to create a Video Recorder: error code = %d", error_code);
 </pre>
 </li>
 </ul>
@@ -411,13 +411,13 @@ if (error_code != RECORDER_ERROR_NONE)
 /* Set the state change callback for the video recorder */
 error_code = recorder_set_state_changed_cb(rec_data.recorder, on_state_changed_cb, NULL);
 if (error_code != RECORDER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
 
 /* Define the change callback for the video recorder */
 static void
 on_state_changed_cb(recorder_state_e previous, recorder_state_e current, bool by_asm, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;_recorder_state_changed_cb (prev: %d, curr: %d)\n&quot;, previous, current);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "_recorder_state_changed_cb (prev: %d, curr: %d)\n", previous, current);
 }
 </pre>
 </li>
@@ -431,10 +431,10 @@ recorder_video_codec_e supported_codec;
 static bool
 _video_encoder_cb(recorder_video_codec_e codec, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;recorder_video_codec_e * supported_codec = (recorder_video_codec_e*)user_data;
-&nbsp;&nbsp;&nbsp;&nbsp;*supported_codec = codec;
+    recorder_video_codec_e * supported_codec = (recorder_video_codec_e*)user_data;
+    *supported_codec = codec;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return false;
+    return false;
 }
 
 error_code = recorder_foreach_supported_video_encoder(rec_data.recorder, _video_encoder_cb, &amp;supported_codec);
@@ -459,17 +459,17 @@ error_code = recorder_set_file_format(rec_data.recorder, RECORDER_FILE_FORMAT_MP
 <pre class="prettyprint">
 struct tm localtime = {0};
 time_t rawtime = time(NULL);
-char filename[256] = {&#39;\0&#39;};
+char filename[256] = {'\0'};
 size_t size;
 
 /* Create the file name */
 if (localtime_r(&amp;rawtime, &amp;localtime) != NULL) {
-&nbsp;&nbsp;&nbsp;&nbsp;size = snprintf(filename, sizeof(filename), &quot;%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.mp4&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_get_data_path(), FILENAME_PREFIX,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_year + 1900, localtime.tm_mon + 1, localtime.tm_mday,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
+    size = snprintf(filename, sizeof(filename), "%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.mp4",
+                    app_get_data_path(), FILENAME_PREFIX,
+                    localtime.tm_year + 1900, localtime.tm_mon + 1, localtime.tm_mday,
+                    localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
 } else {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Error handling */
+    /* Error handling */
 }
 /* Set the full path and file name */
 error_code = recorder_set_filename(rec_data.recorder, filename);
@@ -530,7 +530,7 @@ error_code = recorder_unprepare(rec_data-&gt;recorder);
 error_code = recorder_destroy(rec_data.recorder);
 
 if (error_code != RECORDER_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;fail to destroy recorder: error code = %d&quot;, error_code);
+    dlog_print(DLOG_ERROR, LOG_TAG, "fail to destroy recorder: error code = %d", error_code);
 </pre>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
diff --git a/org.tizen.training/html/native/feature/app_sensor_accelerator_n.htm b/org.tizen.training/html/native/feature/app_sensor_accelerator_n.htm
index 583a5e3..e608c17 100644 (file)
--- a/org.tizen.training/html/native/feature/app_sensor_accelerator_n.htm
+++ b/org.tizen.training/html/native/feature/app_sensor_accelerator_n.htm
@@ -27,15 +27,15 @@
                        <li><a href="#event">Requesting Sensor Events</a></li>
                        <li><a href="#maxvalue">Requesting the Maximum Acceleration Value</a></li>
                </ul>
-        <p class="toc-title">Related Info</p>          
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/location_sensors/device_sensors_n.htm">Device Sensors Guide</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 
 <h1>Accelerator Sensor Usage</h1>
 <p>The accelerator sensor can measure acceleration in the directions of the X, Y, and Z axes. Before attempting to measure the acceleration values, you need to know whether the device supports the accelerator sensor.</p>
@@ -43,25 +43,25 @@
 <h2 id="support">Determining Whether the Sensor Is Supported</h2>
 <p>To determine whether the accelerator sensor is supported on the device:</p>
 
-<ol> 
+<ol>
    <li>Create a new project in the Tizen Studio with the <strong>Basic UI</strong> template, and specify the project name as <strong>SensorAccelerator</strong>.
-<p>For more information on how to create a project, see Creating a Project (in <a href="../mobile/first_app_mn.htm#create">mobile</a> and <a href="../wearable/first_app_wn.htm#create">wearable</a> applications).</p></li> 
+<p>For more information on how to create a project, see Creating a Project (in <a href="../mobile/first_app_mn.htm#create">mobile</a> and <a href="../wearable/first_app_wn.htm#create">wearable</a> applications).</p></li>
    <li>In the new project, open the <code>sensoraccelerator.c</code> source file in the <code>src</code> folder and add the required library header file and variables:
    <ul>
    <li>The <code>sensor.h</code> file is a header file for various sensor libraries.</li>
 <li>The purpose of the application is to display whether the accelerator sensor is supported, the current acceleration value, and the maximum value of acceleration. As a result, a variable is defined for each of these values.</li>
    </ul>
-   
+
 <pre class="prettyprint">
-#include &quot;sensoraccelerator.h&quot;
+#include "sensoraccelerator.h"
 #include &lt;sensor.h&gt;
 
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label0; /* Whether the accelerator sensor is supported */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label1; /* Current acceleration value */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label2; /* Maximum acceleration value */
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label0; /* Whether the accelerator sensor is supported */
+    Evas_Object *label1; /* Current acceleration value */
+    Evas_Object *label2; /* Maximum acceleration value */
 };
 typedef struct appdata appdata_s;
 </pre>
@@ -73,40 +73,40 @@ typedef struct appdata appdata_s;
        <p>The <code>sensor_is_supported()</code> function requests the support information. Passing <code>SENSOR_ACCELEROMETER</code> as the first parameter makes the second parameter return the accelerator support information.</p></li>
        <li>The <code>my_box_pack()</code> function adds a UI component to a box container.</li>
        </ul>
-       
+
 <pre class="prettyprint">
 static void
 show_is_supported(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
-&nbsp;&nbsp;&nbsp;&nbsp;bool is_supported = false;
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_is_supported(SENSOR_ACCELEROMETER, &amp;is_supported);
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Acceleration Sensor is %s&quot;, is_supported ? &quot;support&quot; : &quot;not support&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label0, buf);
+    char buf[PATH_MAX];
+    bool is_supported = false;
+    sensor_is_supported(SENSOR_ACCELEROMETER, &amp;is_supported);
+    sprintf(buf, "Acceleration Sensor is %s", is_supported ? "support" : "not support");
+    elm_object_text_set(ad-&gt;label0, buf);
 }
 
 static void
 my_box_pack(Evas_Object *box, Evas_Object *child,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double h_weight, double v_weight, double h_align, double v_align)
+            double h_weight, double v_weight, double h_align, double v_align)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Tell the child packed into the box to be able to expand */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(child, h_weight, v_weight);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Fill the expanded area (above) as opposed to centering in it */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(child, h_align, v_align);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the child as the box content and show it */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(child);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(box, child);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Put the child into the box */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, child);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the box */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(box);
+    /* Tell the child packed into the box to be able to expand */
+    evas_object_size_hint_weight_set(child, h_weight, v_weight);
+    /* Fill the expanded area (above) as opposed to centering in it */
+    evas_object_size_hint_align_set(child, h_align, v_align);
+    /* Set the child as the box content and show it */
+    evas_object_show(child);
+    elm_object_content_set(box, child);
+
+    /* Put the child into the box */
+    elm_box_pack_end(box, child);
+    /* Show the box */
+    evas_object_show(box);
 }
 </pre>
 </li>
 
        <li>To create the box, add the first and second label to the box, and call the <code>show_is_supported()</code> function to determine the sensor support, you must modify the source code at the bottom of the <code>create_base_gui()</code> function as follows:
-       
+
 <pre class="prettyprint">
 /* Conformant */
 /*
@@ -130,12 +130,12 @@ evas_object_show(box);
 
 /* First label (for the sensor support) */
 ad-&gt;label0 = elm_label_add(ad-&gt;conform);
-elm_object_text_set(ad-&gt;label0, &quot;Msg -&quot;);
+elm_object_text_set(ad-&gt;label0, "Msg -");
 my_box_pack(box, ad-&gt;label0, 1.0, 0.0, -1.0, -1.0);
 
 /* Second label (for the current acceleration value) */
 ad-&gt;label1 = elm_label_add(ad-&gt;conform);
-elm_object_text_set(ad-&gt;label1, &quot;Value -&quot;);
+elm_object_text_set(ad-&gt;label1, "Value -");
 my_box_pack(box, ad-&gt;label1, 1.0, 1.0, -1.0, -1.0);
 
 /* Show the window after the base GUI is set up */
@@ -145,7 +145,7 @@ evas_object_show(ad-&gt;win);
 show_is_supported(ad);
 </pre>
 </li>
-       
+
        <li>Build (in <a href="../mobile/first_app_mn.htm#build">mobile</a> and <a href="../wearable/first_app_wn.htm#build">wearable</a> applications) and run (in <a href="../mobile/first_app_mn.htm#run">mobile</a> and <a href="../wearable/first_app_wn.htm#run">wearable</a> applications) the application. If the accelerator sensor is supported, the <strong>Accelerator Sensor is support</strong> message is shown on the device screen.
 <p>All smartphones do not support this sensor. In that case, test the application on the emulator.</p>
 <p align="center"><img alt="Accelerator Sensor is supported" src="../../images/sensor_accelerator_supported.png" /></p>
@@ -155,26 +155,26 @@ show_is_supported(ad);
 <h2 id="event">Requesting Sensor Events</h2>
 <p>To implement a feature that requests the corresponding event as you shake the device, and displays the acceleration value on the screen:</p>
 
-<ol> 
+<ol>
    <li>Add a structure for the sensor and a global variable to the top of the <code>sensoraccelerator.c</code> source file:
    <ul>
    <li>The <code>sensorinfo_s</code> structure includes a sensor handle and an event listener variable.</li>
 <li>The <code>sensor_info</code> is a global variable of the <code>sensorinfo_s</code> structure.</li>
 </ul>
-   
+
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label0;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label1;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label2;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label0;
+    Evas_Object *label1;
+    Evas_Object *label2;
 };
 typedef struct appdata appdata_s;
 
 struct _sensor_info {
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_h sensor; /* Sensor handle */
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_listener_h sensor_listener; /* Sensor listener */
+    sensor_h sensor; /* Sensor handle */
+    sensor_listener_h sensor_listener; /* Sensor listener */
 };
 typedef struct _sensor_info sensorinfo_s;
 
@@ -196,35 +196,35 @@ static sensorinfo_s sensor_info;
        </ul>
        </li>
        </ul>
-       
+
 <pre class="prettyprint">
 static void
 _new_sensor_value(sensor_h sensor, sensor_event_s *sensor_data, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (sensor_data-&gt;value_count &lt; 3)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s*)user_data;
-
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Value -X : %0.1f / Y : %0.1f / Z : %0.1f&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sensor_data-&gt;values[0], sensor_data-&gt;values[1], sensor_data-&gt;values[2]);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label1, buf);
+    if (sensor_data-&gt;value_count &lt; 3)
+        return;
+    char buf[PATH_MAX];
+    appdata_s *ad = (appdata_s*)user_data;
+
+    sprintf(buf, "Value -X : %0.1f / Y : %0.1f / Z : %0.1f",
+            sensor_data-&gt;values[0], sensor_data-&gt;values[1], sensor_data-&gt;values[2]);
+    elm_object_text_set(ad-&gt;label1, buf);
 }
 
 static void
 start_accelerator_sensor(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_error_e err = SENSOR_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_get_default_sensor(SENSOR_ACCELEROMETER, &amp;sensor_info.sensor);
-&nbsp;&nbsp;&nbsp;&nbsp;err = sensor_create_listener(sensor_info.sensor, &amp;sensor_info.sensor_listener);
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_listener_set_event_cb(sensor_info.sensor_listener, 100, _new_sensor_value, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_listener_start(sensor_info.sensor_listener);
+    sensor_error_e err = SENSOR_ERROR_NONE;
+    sensor_get_default_sensor(SENSOR_ACCELEROMETER, &amp;sensor_info.sensor);
+    err = sensor_create_listener(sensor_info.sensor, &amp;sensor_info.sensor_listener);
+    sensor_listener_set_event_cb(sensor_info.sensor_listener, 100, _new_sensor_value, ad);
+    sensor_listener_start(sensor_info.sensor_listener);
 }
 </pre>
        </li>
-       
+
        <li>To operate the event listener automatically when the application starts running, invoke the above <code>start_accelerator_sensor()</code> function at the end of the <code>create_base_gui()</code> function:
-       
+
 <pre class="prettyprint">
 /* Show the window after the base GUI is set up */
 evas_object_show(ad-&gt;win);
@@ -240,10 +240,10 @@ start_accelerator_sensor(ad);
 <li>Right-click the emulator and select <strong>Control Panel</strong>.
 <p align="center"><img alt="Emulator Control Panel" src="../../images/sensor_accelerator_emulator.png" /></p>
        </li>
-       
+
        <li>In the control panel tree list on the left, select <strong>Event Injector &gt; 3-Axis Sensors</strong>.</li>
        <li>Select the <strong>Acceleration</strong> tab.</li>
-       
+
        <li>Drag the 3 sliders one at a time. If the X, Y, and Z values change on the application screen, it means you have correctly received the acceleration data in your application.
 <p align="center"><img alt="3-Axis Sensors" src="../../images/sensor_accelerator_axis.png" /></p>
        </li>
@@ -258,11 +258,11 @@ start_accelerator_sensor(ad);
 
 <ol>
        <li>Declare an array variable in a number format at the top of the <code>sensoraccelerator.c</code> source file and reset it to 0. This variable saves the maximum acceleration value.
-       
+
 <pre class="prettyprint">
 struct _sensor_info {
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_h sensor;
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_listener_h sensor_listener;
+    sensor_h sensor;
+    sensor_listener_h sensor_listener;
 };
 typedef struct _sensor_info sensorinfo_s;
 
@@ -271,31 +271,31 @@ static sensorinfo_s sensor_info;
 static float max_acc_value[3] = {0.f, 0.f, 0.f};
 </pre>
        </li>
-       
+
        <li>To create the third label and a button, add new code to the <code>create_base_gui()</code> function.
        <p>The button resets the maximum value to 0, when clicked.</p>
-       
+
 <pre class="prettyprint">
 /* Second label (for the current acceleration value) */
 ad-&gt;label1 = elm_label_add(ad-&gt;conform);
-elm_object_text_set(ad-&gt;label1, &quot;Value -&quot;);
+elm_object_text_set(ad-&gt;label1, "Value -");
 my_box_pack(box, ad-&gt;label1, 1.0, 1.0, -1.0, -1.0);
 
 /* Button */
 Evas_Object *btn = elm_button_add(ad-&gt;conform);
-elm_object_text_set(btn, &quot;Init Max Value&quot;);
-evas_object_smart_callback_add(btn, &quot;clicked&quot;, btn_clicked_init_max_acc_value, ad);
+elm_object_text_set(btn, "Init Max Value");
+evas_object_smart_callback_add(btn, "clicked", btn_clicked_init_max_acc_value, ad);
 my_box_pack(box, btn, 1.0, 0.0, -1.0, -1.0);
 
 /* Third label (for the maximum value) */
 ad-&gt;label2 = elm_label_add(ad-&gt;conform);
-elm_object_text_set(ad-&gt;label2, &quot;Max -&quot;);
+elm_object_text_set(ad-&gt;label2, "Max -");
 my_box_pack(box, ad-&gt;label2, 1.0, 1.0, 0.5, -1.0);
 </pre>
        </li>
-       
+
        <li>Create 2 new functions and add new code to the <code>_new_sensor_value()</code> function:
-       <ul>    
+       <ul>
        <li>The <code>get_absolute_max()</code> function compares 2 values and returns the higher one by changing 2 real numbers to absolute values.</li>
        <li>The new code in the <code>_new_sensor_value()</code> function saves the maximum values of the X, Y, and Z axis acceleration in the global variable and outputs them to the third label component.</li>
        <li>The <code>btn_clicked_init_max_acc_value()</code> function resets the maximum value saved in the global variable to 0 when you click the button.</li>
@@ -304,43 +304,43 @@ my_box_pack(box, ad-&gt;label2, 1.0, 1.0, 0.5, -1.0);
 static float
 get_absolute_max(float value1, float value2)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;float v1 = value1 &gt; 0.f ? value1 : -value1;
-&nbsp;&nbsp;&nbsp;&nbsp;float v2 = value2 &gt; 0.f ? value2 : -value2;
-&nbsp;&nbsp;&nbsp;&nbsp;float result = v1 &gt; v2 ? v1 : v2;
+    float v1 = value1 &gt; 0.f ? value1 : -value1;
+    float v2 = value2 &gt; 0.f ? value2 : -value2;
+    float result = v1 &gt; v2 ? v1 : v2;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return result;
+    return result;
 }
 
 static void
 _new_sensor_value(sensor_h sensor, sensor_event_s *sensor_data, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (sensor_data-&gt;value_count &lt; 3)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s*)user_data;
+    if (sensor_data-&gt;value_count &lt; 3)
+        return;
+    char buf[PATH_MAX];
+    appdata_s *ad = (appdata_s*)user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Value -X : %0.1f / Y : %0.1f / Z : %0.1f&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sensor_data-&gt;values[0], sensor_data-&gt;values[1], sensor_data-&gt;values[2]);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label1, buf);
+    sprintf(buf, "Value -X : %0.1f / Y : %0.1f / Z : %0.1f",
+            sensor_data-&gt;values[0], sensor_data-&gt;values[1], sensor_data-&gt;values[2]);
+    elm_object_text_set(ad-&gt;label1, buf);
 
-&nbsp;&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; 3; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max_acc_value[i] = get_absolute_max(max_acc_value[i], sensor_data-&gt;values[i]);
+    for (int i = 0; i &lt; 3; i++)
+        max_acc_value[i] = get_absolute_max(max_acc_value[i], sensor_data-&gt;values[i]);
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Max -X: %0.1f / Y: %0.1f / Z: %0.1f&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max_acc_value[0], max_acc_value[1], max_acc_value[2]);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label2, buf);
+    sprintf(buf, "Max -X: %0.1f / Y: %0.1f / Z: %0.1f",
+            max_acc_value[0], max_acc_value[1], max_acc_value[2]);
+    elm_object_text_set(ad-&gt;label2, buf);
 }
 
 /* Button click event function */
 static void
 btn_clicked_init_max_acc_value(void *data, Evas_Object *obj, void *event_info)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;for (int i = 0; i &lt; 3; i++)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max_acc_value[i] = 0.f;
+    for (int i = 0; i &lt; 3; i++)
+        max_acc_value[i] = 0.f;
 }
 </pre>
        </li>
-       
+
        <li>Run the application again and shake the phone. When you stop shaking, the value in the second label is reset, but the maximum value remains intact in the third label.<p>To measure a new value, click the button and shake again.</p>
 <p align="center"><img alt="Emulator Control Panel" src="../../images/sensor_accelerator_max_value.png" /></p>
        </li>
diff --git a/org.tizen.training/html/native/feature/app_sensor_n.htm b/org.tizen.training/html/native/feature/app_sensor_n.htm
index eae4dba..9bb9599 100644 (file)
--- a/org.tizen.training/html/native/feature/app_sensor_n.htm
+++ b/org.tizen.training/html/native/feature/app_sensor_n.htm
@@ -21,17 +21,17 @@
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
        <div id="toc_border"><div id="toc">
-        <p class="toc-title">Related Info</p>  
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/location_sensors/device_sensors_n.htm">Device Sensors Guide</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
+</div>
 <div id="container"><div id="contents"><div class="content">
 
-<h1>Creating Applications with Sensors</h1> 
+<h1>Creating Applications with Sensors</h1>
 
 <p>A sensor is a device that detects or senses various signals or stimuli, such as acceleration, distance, orientation, and magnetic field strength, and transmits the resulting measurement. If you want to create applications that offer sensor features to the user, Tizen provides various options for you.</p>
 
diff --git a/org.tizen.training/html/native/feature/app_sensor_proximity_n.htm b/org.tizen.training/html/native/feature/app_sensor_proximity_n.htm
index 952ac71..95ef37a 100644 (file)
--- a/org.tizen.training/html/native/feature/app_sensor_proximity_n.htm
+++ b/org.tizen.training/html/native/feature/app_sensor_proximity_n.htm
@@ -25,14 +25,14 @@
                        <li><a href="#support">Determining Whether the Sensor Is Supported</a></li>
                        <li><a href="#event">Requesting Sensor Events</a></li>
                </ul>
-        <p class="toc-title">Related Info</p>          
+        <p class="toc-title">Related Info</p>
         <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/location_sensors/device_sensors_n.htm">Device Sensors Guide</a></li>
                        <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API for Mobile Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
+</div>
 <div id="container"><div id="contents"><div class="content">
 
 <h1>Proximity Sensor Usage</h1>
@@ -41,9 +41,9 @@
 <h2 id="support">Determining Whether the Sensor Is Supported</h2>
 <p>To determine whether the proximity sensor is supported on the device:</p>
 
-<ol> 
+<ol>
    <li>Create a new project in the Tizen Studio with the <strong>Basic UI</strong> template, and specify the project name as <strong>SensorProximity</strong>.
-<p>For more information on how to create a project, see Creating a Project (in <a href="../mobile/first_app_mn.htm#create">mobile</a> and <a href="../wearable/first_app_wn.htm#create">wearable</a> applications).</p></li> 
+<p>For more information on how to create a project, see Creating a Project (in <a href="../mobile/first_app_mn.htm#create">mobile</a> and <a href="../wearable/first_app_wn.htm#create">wearable</a> applications).</p></li>
    <li>In the new project, open the <code>sensorproximity.c</code> source file in the <code>src</code> folder and add the required library header file and variables:
    <ul>
    <li>The <code>sensor.h</code> file is a header file for various sensor libraries.</li>
@@ -51,14 +51,14 @@
    </ul>
 
 <pre class="prettyprint">
-#include &quot;sensorproximity.h&quot;
+#include "sensorproximity.h"
 #include &lt;sensor.h&gt;
 
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label0; /* Whether the proximity sensor is supported */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label1; /* Distance value */
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label0; /* Whether the proximity sensor is supported */
+    Evas_Object *label1; /* Distance value */
 };
 typedef struct appdata appdata_s;
 </pre>
@@ -69,40 +69,40 @@ typedef struct appdata appdata_s;
        <p>The <code>sensor_is_supported()</code> function requests the support information. Passing <code>SENSOR_PROXIMITY</code> as the first parameter makes the second parameter return the proximity support information.</p></li>
        <li>The <code>my_box_pack()</code> function adds a UI component to a box container.</li>
        </ul>
-       
+
 <pre class="prettyprint">
 static void
 show_is_supported(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
-&nbsp;&nbsp;&nbsp;&nbsp;bool is_supported = false;
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_is_supported(SENSOR_PROXIMITY, &amp;is_supported);
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Proximity Sensor is %s&quot;, is_supported ? &quot;support&quot; : &quot;not support&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label0, buf);
+    char buf[PATH_MAX];
+    bool is_supported = false;
+    sensor_is_supported(SENSOR_PROXIMITY, &amp;is_supported);
+    sprintf(buf, "Proximity Sensor is %s", is_supported ? "support" : "not support");
+    elm_object_text_set(ad-&gt;label0, buf);
 }
 
 static void
 my_box_pack(Evas_Object *box, Evas_Object *child,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;double h_weight, double v_weight, double h_align, double v_align)
+            double h_weight, double v_weight, double h_align, double v_align)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Tell the child packed into the box to be able to expand */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(child, h_weight, v_weight);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Fill the expanded area (above) as opposed to centering in it */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(child, h_align, v_align);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the child as the box content and show it */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(child);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(box, child);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Put the child into the box */
-&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, child);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the box */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(box);
+    /* Tell the child packed into the box to be able to expand */
+    evas_object_size_hint_weight_set(child, h_weight, v_weight);
+    /* Fill the expanded area (above) as opposed to centering in it */
+    evas_object_size_hint_align_set(child, h_align, v_align);
+    /* Set the child as the box content and show it */
+    evas_object_show(child);
+    elm_object_content_set(box, child);
+
+    /* Put the child into the box */
+    elm_box_pack_end(box, child);
+    /* Show the box */
+    evas_object_show(box);
 }
 </pre>
        </li>
-       
+
        <li>To create the box, add the 2 labels to the box, and call the <code>show_is_supported()</code> function to determine the sensor support, you must modify the source code at the bottom of the <code>create_base_gui()</code> function as follows:
-       
+
 <pre class="prettyprint">
 /* Conformant */
 /*
@@ -126,12 +126,12 @@ evas_object_show(box);
 
 /* First label (for the sensor support) */
 ad-&gt;label0 = elm_label_add(ad-&gt;conform);
-elm_object_text_set(ad-&gt;label0, &quot;Msg -&quot;);
+elm_object_text_set(ad-&gt;label0, "Msg -");
 my_box_pack(box, ad-&gt;label0, 1.0, 0.0, -1.0, -1.0);
 
 /* Second label (for the current distance value) */
 ad-&gt;label1 = elm_label_add(ad-&gt;conform);
-elm_object_text_set(ad-&gt;label1, &quot;Value -&quot;);
+elm_object_text_set(ad-&gt;label1, "Value -");
 my_box_pack(box, ad-&gt;label1, 1.0, 1.0, -1.0, -1.0);
 
 /* Show the window after the base GUI is set up */
@@ -141,7 +141,7 @@ evas_object_show(ad-&gt;win);
 show_is_supported(ad);
 </pre>
        </li>
-       
+
        <li>Build (in <a href="../mobile/first_app_mn.htm#build">mobile</a> and <a href="../wearable/first_app_wn.htm#build">wearable</a> applications) and run (in <a href="../mobile/first_app_mn.htm#run">mobile</a> and <a href="../wearable/first_app_wn.htm#run">wearable</a> applications) the application. If the proximity sensor is supported, the <strong>Proximity Sensor is support</strong> message is shown on the device screen.
 <p>All smartphones do not support this sensor. In that case, test the application on the emulator.</p>
 
@@ -158,19 +158,19 @@ show_is_supported(ad);
    <li>The <code>sensorinfo_s</code> structure includes a sensor handle and an event listener variable.</li>
 <li>The <code>sensor_info</code> is a global variable of the <code>sensorinfo_s</code> structure.</li>
 </ul>
-       
+
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label0;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label1;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label0;
+    Evas_Object *label1;
 };
 typedef struct appdata appdata_s;
 
 struct _sensor_info {
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_h sensor; /* Sensor handle */
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_listener_h sensor_listener; /* Sensor listener */
+    sensor_h sensor; /* Sensor handle */
+    sensor_listener_h sensor_listener; /* Sensor listener */
 };
 typedef struct _sensor_info sensorinfo_s;
 
@@ -192,34 +192,34 @@ static sensorinfo_s sensor_info;
        </ul>
        </li>
        </ul>
-       
+
 <pre class="prettyprint">
 static void
 _new_sensor_value(sensor_h sensor, sensor_event_s *sensor_data, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (sensor_data-&gt;value_count &lt; 1)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;char buf[PATH_MAX];
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s*)user_data;
+    if (sensor_data-&gt;value_count &lt; 1)
+        return;
+    char buf[PATH_MAX];
+    appdata_s *ad = (appdata_s*)user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(buf, &quot;Distance: %0.1f&quot;, sensor_data-&gt;values[0]);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label1, buf);
+    sprintf(buf, "Distance: %0.1f", sensor_data-&gt;values[0]);
+    elm_object_text_set(ad-&gt;label1, buf);
 }
 
 static void
 start_proximity_sensor(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_error_e err = SENSOR_ERROR_NONE;
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_get_default_sensor(SENSOR_PROXIMITY, &amp;sensor_info.sensor);
-&nbsp;&nbsp;&nbsp;&nbsp;err = sensor_create_listener(sensor_info.sensor, &amp;sensor_info.sensor_listener);
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_listener_set_event_cb(sensor_info.sensor_listener, 100, _new_sensor_value, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;sensor_listener_start(sensor_info.sensor_listener);
+    sensor_error_e err = SENSOR_ERROR_NONE;
+    sensor_get_default_sensor(SENSOR_PROXIMITY, &amp;sensor_info.sensor);
+    err = sensor_create_listener(sensor_info.sensor, &amp;sensor_info.sensor_listener);
+    sensor_listener_set_event_cb(sensor_info.sensor_listener, 100, _new_sensor_value, ad);
+    sensor_listener_start(sensor_info.sensor_listener);
 }
 </pre>
        </li>
-       
+
        <li>To operate the event listener automatically when the application starts running, invoke the above <code>start_proximity_sensor()</code> function at the end of the <code>create_base_gui()</code> function:
-       
+
 <pre class="prettyprint">
 /* Show the window after the base GUI is set up */
 evas_object_show(ad-&gt;win);
@@ -233,7 +233,7 @@ start_proximity_sensor(ad);
 <p>To test on the emulator, use the <a href="../../../../org.tizen.studio/html/common_tools/emulator_control_panel.htm">control panel</a>:</p>
 <ol type="a">
 <li>Right-click the emulator and select <strong>Control Panel</strong>.</li>
-       
+
        <li>In the control panel tree list on the left, select <strong>Event Injector &gt; Proximity</strong>.</li>
 
        <li>Click <strong>ON</strong> on the right side of the screen in the control panel to display 0.0 in the second label component on the application screen. If you click <strong>OFF</strong>, the 5.0 value is displayed in the label component.
diff --git a/org.tizen.training/html/native/feature/best_practice_battery_n.htm b/org.tizen.training/html/native/feature/best_practice_battery_n.htm
index 36222c2..4354b06 100644 (file)
--- a/org.tizen.training/html/native/feature/best_practice_battery_n.htm
+++ b/org.tizen.training/html/native/feature/best_practice_battery_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Best Practices for Location</title>  
+       <title>Best Practices for Location</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -40,10 +40,10 @@
                        <li><a href="../../../..//org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Timer__Group.html">Ecore Timer API for Wearable Native</a></li>
                        <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager API for Wearable Native</a></li>
-        </ul>          
+        </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Best Practices for Location</h1>
 
 <p>If you want to create applications that offer reduced battery drain features to the user, Tizen provides various options for you.</p>
@@ -69,7 +69,7 @@
 
 <h2 id="app_battery_lifecycle">Managing Life-cycles</h2>
 
-<p>Using the location received from GPS is potentially one of your application&#39;s most significant causes of battery drain. To minimize the battery drain associated with location service activities, it is critical that you understand the life-cycles of your application and location service, and synchronize the states between the 2 processes: location server and location application.</p>
+<p>Using the location received from GPS is potentially one of your application's most significant causes of battery drain. To minimize the battery drain associated with location service activities, it is critical that you understand the life-cycles of your application and location service, and synchronize the states between the 2 processes: location server and location application.</p>
 
 <h3 id="app_lifecycle">Application Life-cycle</h3>
 
@@ -212,8 +212,8 @@
  <td>Location handle has been destroyed.</td>
  </tr>
  </tbody></table>
- 
- 
+
+
 <h2 id="app_battery_power">Optimizing Power Consumption</h2>
 
 <p>To reduce power consumption, you must select the optimal location method for the location service to determine the device location. You must also carefully synchronize the application and location service states to ensure that the location service is only running when the application is on the foreground.</p>
@@ -223,7 +223,7 @@
 <h3 id="select">Selecting the Location Method</h3>
 
 <li>The power consumption and location accuracy differ based on the location source. It is important for you to select the location method, as the location method decides which location sources are used to determine the device location.</li>
-<p>The location service provides different methods for determining the location, as illustrated in the following table.</p> 
+<p>The location service provides different methods for determining the location, as illustrated in the following table.</p>
 
 <p align="center" class="Table"><strong>Table: Location service methods</strong></p>
 <table>
@@ -249,7 +249,7 @@
  <td>This method receives location information from an external positioning server that computes the approximate location based on the Wi-Fi or mobile network cell tower. It provides the lowest power consumption, and the weakest location accuracy.</td>
  </tr>
  </tbody></table>
- 
+
 <p>The following table shows how much power is consumed approximately by GPS at a standalone mode in the condition of no assistant GPS, such as SUPL (Secure User Plane Location) server.</p>
 
 <p align="center" class="Table"><strong>Table: GPS power consumption</strong></p>
@@ -294,10 +294,10 @@
 
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/location&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/alarm.get&lt;/privilege&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/alarm.set&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/location&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/alarm.get&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/alarm.set&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 
@@ -314,155 +314,155 @@
 static Evas_Object*
 create_panel_basic_content(Evas_Object *parent, appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *table;
+    Evas_Object *table;
 
-&nbsp;&nbsp;&nbsp;&nbsp;table = elm_table_add(parent);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_table_padding_set(table, 10, 0);
+    table = elm_table_add(parent);
+    elm_table_padding_set(table, 10, 0);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Add button for starting location service */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;create_btn = elm_button_add(table);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;create_btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;create_btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;create_btn, &quot;&lt;font_size=30&gt;Start&lt;/font_size&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_disabled_set(ad-&gt;create_btn, EINA_FALSE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;create_btn, &quot;clicked&quot;, _clicked_start_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;create_btn);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_table_pack(table, ad-&gt;create_btn, 0, 0, 1, 1);
+    /* Add button for starting location service */
+    ad-&gt;create_btn = elm_button_add(table);
+    evas_object_size_hint_weight_set(ad-&gt;create_btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    evas_object_size_hint_align_set(ad-&gt;create_btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
+    elm_object_text_set(ad-&gt;create_btn, "&lt;font_size=30&gt;Start&lt;/font_size&gt;");
+    elm_object_disabled_set(ad-&gt;create_btn, EINA_FALSE);
+    evas_object_smart_callback_add(ad-&gt;create_btn, "clicked", _clicked_start_cb, ad);
+    evas_object_show(ad-&gt;create_btn);
+    elm_table_pack(table, ad-&gt;create_btn, 0, 0, 1, 1);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;destroy_btn = elm_button_add(table);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;destroy_btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;destroy_btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;destroy_btn, &quot;&lt;font_size=30&gt;Stop&lt;/font_size&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_disabled_set(ad-&gt;destroy_btn, EINA_TRUE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;destroy_btn, &quot;clicked&quot;, _clicked_stop_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;destroy_btn);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_table_pack(table, ad-&gt;destroy_btn, 1, 4, 1, 1);
+    ad-&gt;destroy_btn = elm_button_add(table);
+    evas_object_size_hint_weight_set(ad-&gt;destroy_btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    evas_object_size_hint_align_set(ad-&gt;destroy_btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
+    elm_object_text_set(ad-&gt;destroy_btn, "&lt;font_size=30&gt;Stop&lt;/font_size&gt;");
+    elm_object_disabled_set(ad-&gt;destroy_btn, EINA_TRUE);
+    evas_object_smart_callback_add(ad-&gt;destroy_btn, "clicked", _clicked_stop_cb, ad);
+    evas_object_show(ad-&gt;destroy_btn);
+    elm_table_pack(table, ad-&gt;destroy_btn, 1, 4, 1, 1);
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(table);
+    evas_object_show(table);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return table;
+    return table;
 }
 
 static Evas_Object*
 create_panel(Evas_Object *parent, appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *panel;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *grid;
+    Evas_Object *panel;
+    Evas_Object *grid;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Panel */
-&nbsp;&nbsp;&nbsp;&nbsp;panel = elm_panel_add(parent);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(panel);
+    /* Panel */
+    panel = elm_panel_add(parent);
+    evas_object_show(panel);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Grid */
-&nbsp;&nbsp;&nbsp;&nbsp;grid = elm_grid_add(panel);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(panel, grid);
+    /* Grid */
+    grid = elm_grid_add(panel);
+    evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
+    elm_object_content_set(panel, grid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Panel basic content */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;basic_content = create_panel_basic_content(grid, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;basic_content, EVAS_HINT_EXPAND,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(ad-&gt;basic_content, EVAS_HINT_FILL, EVAS_HINT_FILL);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, ad-&gt;basic_content, 3, 3, 94, 94);
+    /* Panel basic content */
+    ad-&gt;basic_content = create_panel_basic_content(grid, ad);
+    evas_object_size_hint_weight_set(ad-&gt;basic_content, EVAS_HINT_EXPAND,
+                                     EVAS_HINT_EXPAND);
+    evas_object_size_hint_align_set(ad-&gt;basic_content, EVAS_HINT_FILL, EVAS_HINT_FILL);
+    elm_grid_pack(grid, ad-&gt;basic_content, 3, 3, 94, 94);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return panel;
+    return panel;
 }
 
 /* Callback invoked by updating the position */
 void
 _position_updated_cb(double latitude, double longitude, double altitude,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time_t timestamp, void *data)
+                     time_t timestamp, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char message[128];
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
+    char message[128];
+    int ret = 0;
+    appdata_s *ad = (appdata_s *) data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(message, &quot;&lt;align=left&gt;[%ld] lat[%f] lon[%f] alt[%f] (ret=%d)\n&lt;/align&gt;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timestamp, latitude, longitude, altitude, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_entry_entry_set(ad-&gt;entry, message);
+    sprintf(message, "&lt;align=left&gt;[%ld] lat[%f] lon[%f] alt[%f] (ret=%d)\n&lt;/align&gt;",
+            timestamp, latitude, longitude, altitude, ret);
+    elm_entry_entry_set(ad-&gt;entry, message);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Stop the location service after updating the first position */
-&nbsp;&nbsp;&nbsp;&nbsp;stop_location_service(ad);
+    /* Stop the location service after updating the first position */
+    stop_location_service(ad);
 }
 
 /* Create the location service */
 static void
 create_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;location_h handle;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    appdata_s *ad = (appdata_s *)data;
+    location_h handle;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the location service to use all positioning sources */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_create(LOCATIONS_METHOD_HYBRID, &amp;manager);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;location_manager_create() failed.(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;location = manager;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_set_position_updated_cb(manager, _position_updated_cb, 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)manager);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    /* Create the location service to use all positioning sources */
+    ret = location_manager_create(LOCATIONS_METHOD_HYBRID, &amp;manager);
+    if (ret != LOCATIONS_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "location_manager_create() failed.(%d)", ret);
+    }
+    else {
+        ad-&gt;location = manager;
+        ret = location_manager_set_position_updated_cb(manager, _position_updated_cb, 0,
+                                                       (void *)manager);
+    }
 }
 
 /* Destroy the location service */
 static void
-destroy_location_service(void *data) 
+destroy_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    appdata_s *ad = (appdata_s *)data;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_destroy(ad-&gt;location);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;location_manager_destroy() failed.(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;location = NULL;
+    ret = location_manager_destroy(ad-&gt;location);
+    if (ret != LOCATIONS_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "location_manager_destroy() failed.(%d)", ret);
+    else
+        ad-&gt;location = NULL;
 }
 
 /* Callback invoked by creating an application */
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+    appdata_s *ad = (appdata_s *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;create_location_service(ad);
+    create_location_service(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Panel */
-&nbsp;&nbsp;&nbsp;&nbsp;panel = create_panel(grid, ad);
+    /* Panel */
+    panel = create_panel(grid, ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 /* Callback invoked by terminating an application */
 static void
 app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+    appdata_s *ad = (appdata_s *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Destroy the location handle */
-&nbsp;&nbsp;&nbsp;&nbsp;destroy_location_service(ad);
+    /* Destroy the location handle */
+    destroy_location_service(ad);
 }
 
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad;
-&nbsp;&nbsp;&nbsp;&nbsp;memset(&amp;ad, 0x00, sizeof(appdata_s));
+    appdata_s ad;
+    memset(&amp;ad, 0x00, sizeof(appdata_s));
 
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback;
-&nbsp;&nbsp;&nbsp;&nbsp;memset(&amp;event_callback, 0x00, sizeof(ui_app_lifecycle_callback_s));
+    ui_app_lifecycle_callback_s event_callback;
+    memset(&amp;event_callback, 0x00, sizeof(ui_app_lifecycle_callback_s));
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+    event_callback.create = app_create;
+    event_callback.terminate = app_terminate;
+    event_callback.pause = app_pause;
+    event_callback.resume = app_resume;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;ui_app_main() failed with error: %d&quot;, ret);
+    int ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    if (ret != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() failed with error: %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -475,62 +475,62 @@ main(int argc, char *argv[])
 static void
 start_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
+    appdata_s *ad = (appdata_s *) data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_start(ad-&gt;location);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;location_manager_start() failed. (%d)&quot;, ret);
+    ret = location_manager_start(ad-&gt;location);
+    if (ret != LOCATIONS_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "location_manager_start() failed. (%d)", ret);
 }
 
 /* Stop the location service */
 static void
 stop_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
+    appdata_s *ad = (appdata_s *) data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_stop(ad-&gt;location);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;location_manager_stop() failed. (%d)&quot;, ret);
+    ret = location_manager_stop(ad-&gt;location);
+    if (ret != LOCATIONS_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "location_manager_stop() failed. (%d)", ret);
 }
 
 /* Callback invoked by user gesture */
 static void
 _clicked_start_cb(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
-&nbsp;&nbsp;&nbsp;&nbsp;char message[128];
+    appdata_s *ad = (appdata_s *) data;
+    char message[128];
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_start(ad);
-&nbsp;&nbsp;&nbsp;&nbsp;sprintf(message, &quot;&lt;align=left&gt;location service was started. (ret=%d\n)&lt;/align&gt;&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_entry_entry_set(ad-&gt;entry, message);
+    ret = location_manager_start(ad);
+    sprintf(message, "&lt;align=left&gt;location service was started. (ret=%d\n)&lt;/align&gt;", ret);
+    elm_entry_entry_set(ad-&gt;entry, message);
 }
 
 /* Callback invoked by user gesture */
 static void
 _clicked_stop_cb(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
+    appdata_s *ad = (appdata_s *) data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_stop(ad);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_entry_entry_set(ad-&gt;entry, &quot;&lt;align=left&gt;location service was stopped.&lt;/align&gt;&quot;);
+    ret = location_manager_stop(ad);
+    elm_entry_entry_set(ad-&gt;entry, "&lt;align=left&gt;location service was stopped.&lt;/align&gt;");
 }
 
 /* Callback invoked by pausing an application */
 static void
 app_pause(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+    appdata_s *ad = (appdata_s *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;stop_location_service(ad);
+    stop_location_service(ad);
 }
 
 /* Callback invoked by resuming an application */
 static void
 app_resume(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+    appdata_s *ad = (appdata_s *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;start_location_service(ad);
+    start_location_service(ad);
 }
 </pre>
 
@@ -547,13 +547,13 @@ app_resume(void *data)
 <pre class="prettyprint">
 #include &lt;tizen.h&gt;
 #include &lt;service_app.h&gt;
-#include &quot;service.h&quot; /* Auto-generated header file by the Tizen Studio */
+#include "service.h" /* Auto-generated header file by the Tizen Studio */
 #include &lt;locations.h&gt;
 #include &lt;Ecore.h&gt;
 
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;location_manager_h location;
-&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Timer *timer;
+    location_manager_h location;
+    Ecore_Timer *timer;
 };
 typedef struct appdata appdata_s;
 
@@ -561,119 +561,119 @@ typedef struct appdata appdata_s;
 static void
 _position_updated_cb(double latitude, double longitude, double altitude, time_t timestamp, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;[%ld] lat[%f] lon[%f] alt[%f]\n&quot;, timestamp,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;latitude, longitude, altitude);
+    dlog_print(DLOG_DEBUG, LOG_TAG, "[%ld] lat[%f] lon[%f] alt[%f]\n", timestamp,
+               latitude, longitude, altitude);
 }
 
 /* Create the location service */
 static void
 create_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;location_manager_h manager;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    appdata_s *ad = (appdata_s *)data;
+    location_manager_h manager;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_create(LOCATIONS_METHOD_HYBRID, &amp;manager);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;location_manager_create() failed.(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;location = manager;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_set_position_updated_cb(manager, _position_updated_cb, 1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(void *)manager);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    ret = location_manager_create(LOCATIONS_METHOD_HYBRID, &amp;manager);
+    if (ret != LOCATIONS_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "location_manager_create() failed.(%d)", ret);
+    }
+    else {
+        ad-&gt;location = manager;
+        ret = location_manager_set_position_updated_cb(manager, _position_updated_cb, 1,
+                                                       (void *)manager);
+    }
 }
 
 /* Destroy the location service */
 static void
 destroy_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    appdata_s *ad = (appdata_s *)data;
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_destroy(ad-&gt;location);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;location_manager_destroy() failed.(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;location = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (ad-&gt;location) {
+        ret = location_manager_destroy(ad-&gt;location);
+        if (ret != LOCATIONS_ERROR_NONE)
+            dlog_print(DLOG_ERROR, LOG_TAG,
+                       "location_manager_destroy() failed.(%d)", ret);
+        else
+            ad-&gt;location = NULL;
+    }
 }
 
 /* Stop the location service after updating the first position */
 static void
 stop_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    appdata_s *ad = (appdata_s *) data;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_stop(ad-&gt;location);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;location_manager_stop() failed: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;location service was stopped.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (ad-&gt;location) {
+        ret = location_manager_stop(ad-&gt;location);
+        if (ret != LOCATIONS_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "location_manager_stop() failed: %d", ret);
+        else
+            dlog_print(DLOG_DEBUG, LOG_TAG, "location service was stopped.");
+    }
 }
 
 /* Callback invoked by the expired timer */
 static Eina_Bool
 _timeout_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
+    appdata_s *ad = (appdata_s *) data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Call stopping the location service when the specific time is expired */
-&nbsp;&nbsp;&nbsp;&nbsp;stop_location_service(ad);
+    /* Call stopping the location service when the specific time is expired */
+    stop_location_service(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+    return ECORE_CALLBACK_CANCEL;
 }
 
 /* Start the location service and create a timer */
 static void
 start_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    appdata_s *ad = (appdata_s *) data;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_start(ad-&gt;location);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;location_manager_start() failed: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;location service was started&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Set the timeout */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int TIMEOUT = 120;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create a timer and set a callback function called after TIMEOUT */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ecore_Timer *my_timer = ecore_timer_add(TIMEOUT, _timeout_cb, ad);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (my_timer != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;timer = my_timer;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    ret = location_manager_start(ad-&gt;location);
+    if (ad-&gt;location) {
+        if (ret != LOCATIONS_ERROR_NONE)
+            dlog_print(DLOG_ERROR, LOG_TAG, "location_manager_start() failed: %d", ret);
+        else
+            dlog_print(DLOG_DEBUG, LOG_TAG, "location service was started");
+        /* Set the timeout */
+        int TIMEOUT = 120;
+        /* Create a timer and set a callback function called after TIMEOUT */
+        Ecore_Timer *my_timer = ecore_timer_add(TIMEOUT, _timeout_cb, ad);
+        if (my_timer != NULL)
+            ad-&gt;timer = my_timer;
+    }
 }
 
 bool
 service_app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+    appdata_s *ad = (appdata_s *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;create_location_service(&amp;ad-&gt;location);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;start_location_service(ad);
+    create_location_service(&amp;ad-&gt;location);
+    if (ad-&gt;location)
+        start_location_service(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 void
 service_app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+    appdata_s *ad = (appdata_s *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;destroy_location_service(ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;timer)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_timer_del(ad-&gt;timer);
+    if (ad-&gt;location)
+        destroy_location_service(ad);
+    if (ad-&gt;timer)
+        ecore_timer_del(ad-&gt;timer);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return;
+    return;
 }
 
 
@@ -682,14 +682,14 @@ service_app_terminate(void *data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
+    appdata_s ad = {0,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_lifecycle_callback_s event_callback;
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+    service_app_lifecycle_callback_s event_callback;
+    app_event_handler_h handlers[5] = {NULL,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    event_callback.create = service_app_create;
+    event_callback.terminate = service_app_terminate;
+    return service_app_main(argc, argv, &amp;event_callback, &amp;ad);
 }
 </pre>
 
@@ -707,7 +707,7 @@ main(int argc, char* argv[])
 <pre class="prettyprint">
 #include &lt;tizen.h&gt;
 #include &lt;service_app.h&gt;
-#include &quot;service.h&quot; /* Auto-generated header file by the Tizen Studio */
+#include "service.h" /* Auto-generated header file by the Tizen Studio */
 #include &lt;locations.h&gt;
 #include &lt;app_alarm.h&gt;
 #include &lt;app_control.h&gt;
@@ -715,8 +715,8 @@ main(int argc, char* argv[])
 /* Same as above example except for the following code */
 
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;location_manager_h location;
-&nbsp;&nbsp;&nbsp;&nbsp;int alarm_id;
+    location_manager_h location;
+    int alarm_id;
 };
 typedef struct appdata appdata_s;
 
@@ -724,129 +724,129 @@ typedef struct appdata appdata_s;
 static void
 stop_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    appdata_s *ad = (appdata_s *) data;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_stop(ad-&gt;location);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;location_manager_stop() failed: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;location service was stopped.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;alarm_id) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alarm_cancel(ad-&gt;alarm_id);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;alarm_id = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    if (ad-&gt;location) {
+        ret = location_manager_stop(ad-&gt;location);
+        if (ret != LOCATIONS_ERROR_NONE)
+            dlog_print(DLOG_ERROR, LOG_TAG, "location_manager_stop() failed: %d", ret);
+        else
+            dlog_print(DLOG_DEBUG, LOG_TAG, "location service was stopped.");
+        if (ad-&gt;alarm_id) {
+            alarm_cancel(ad-&gt;alarm_id);
+            ad-&gt;alarm_id = 0;
+        }
+    }
 }
 
 /* Create an app control for the alarm */
 static bool
 _initialize_alarm(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
+    appdata_s *ad = (appdata_s *) data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the delay time */
-&nbsp;&nbsp;&nbsp;&nbsp;int DELAY = 120;
-&nbsp;&nbsp;&nbsp;&nbsp;int alarm_id;
+    int ret;
+    /* Set the delay time */
+    int DELAY = 120;
+    int alarm_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_create(&amp;app_control);
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
+    app_control_h app_control = NULL;
+    ret = app_control_create(&amp;app_control);
+    ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_DEFAULT);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set app_id as the name of the application */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_set_app_id(app_control, &quot;org.example.clockui&quot;);
+    /* Set app_id as the name of the application */
+    ret = app_control_set_app_id(app_control, "org.example.clockui");
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the key (&quot;location&quot;) and value (&quot;stop&quot;) of a bundle */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_add_extra_data(app_control, &quot;location&quot;, &quot;stop&quot;);
+    /* Set the key ("location") and value ("stop") of a bundle */
+    ret = app_control_add_extra_data(app_control, "location", "stop");
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* In order to be called after DELAY */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = alarm_schedule_once_after_delay(app_control, DELAY, &amp;alarm_id);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != ALARM_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char *err_msg = get_error_message(ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;alarm_schedule_once_after_delay() failed.(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_INFO, LOG_TAG, &quot;%s&quot;, err_msg);
+    /* In order to be called after DELAY */
+    ret = alarm_schedule_once_after_delay(app_control, DELAY, &amp;alarm_id);
+    if (ret != ALARM_ERROR_NONE) {
+        char *err_msg = get_error_message(ret);
+        dlog_print(DLOG_ERROR, LOG_TAG,
+                   "alarm_schedule_once_after_delay() failed.(%d)", ret);
+        dlog_print(DLOG_INFO, LOG_TAG, "%s", err_msg);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return false;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;alarm_id = alarm_id;
+    ad-&gt;alarm_id = alarm_id;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_destroy(app_control);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_control_destroy() failed.(%d)&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;Set the triggered time with alarm_id: %d&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;alarm_id);
+    ret = app_control_destroy(app_control);
+    if (ret != APP_CONTROL_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "app_control_destroy() failed.(%d)", ret);
+    else
+        dlog_print(DLOG_DEBUG, LOG_TAG, "Set the triggered time with alarm_id: %d",
+                   ad-&gt;alarm_id);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 /* Start the location service */
 void
 start_location_service(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    appdata_s *ad = (appdata_s *) data;
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = location_manager_start(ad-&gt;location);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != LOCATIONS_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;location_manager_start() failed: %d&quot;, ret);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;location service was started&quot;);
+    ret = location_manager_start(ad-&gt;location);
+    if (ad-&gt;location) {
+        if (ret != LOCATIONS_ERROR_NONE)
+            dlog_print(DLOG_ERROR, LOG_TAG, "location_manager_start() failed: %d", ret);
+        else
+            dlog_print(DLOG_DEBUG, LOG_TAG, "location service was started");
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create a app control for the alarm */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = _initialize_alarm(ad);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        /* Create a app control for the alarm */
+        ret = _initialize_alarm(ad);
+    }
 }
 
 /* Callback invoked by calling an app control */
 static void
 app_control(app_control_h app_control, void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) data;
-&nbsp;&nbsp;&nbsp;&nbsp;char *value = NULL;
+    appdata_s *ad = (appdata_s *) data;
+    char *value = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_DEBUG, LOG_TAG, &quot;app_control was called.&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;/* Check whether the key and value of the bundle are as expected */
-&nbsp;&nbsp;&nbsp;&nbsp;if (app_control_get_extra_data(app_control, &quot;location&quot;, 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;value) == APP_CONTROL_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!strcmp(value, &quot;stop&quot;)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stop_location_service(ad);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(value);
-&nbsp;&nbsp;&nbsp;&nbsp;}
+    dlog_print(DLOG_DEBUG, LOG_TAG, "app_control was called.");
+    /* Check whether the key and value of the bundle are as expected */
+    if (app_control_get_extra_data(app_control, "location",
+                                   &amp;value) == APP_CONTROL_ERROR_NONE) {
+        if (!strcmp(value, "stop")) {
+            if (ad-&gt;location)
+                stop_location_service(ad);
+        }
+        free(value);
+    }
 }
 
 /* Callback invoked by creating an application */
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+    appdata_s *ad = data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+    create_base_gui(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;create_location_service(ad);
+    create_location_service(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;start_location_service(ad);
+    if (ad-&gt;location)
+        start_location_service(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 
 /* Callback invoked by terminating an application */
 static void
 app_terminate(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release all resources */
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+    /* Release all resources */
+    appdata_s *ad = (appdata_s *)data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;destroy_location_service(ad);
+    if (ad-&gt;location)
+        destroy_location_service(ad);
 }
 
 /* Assume that auto-generated functions from the Tizen Studio are here */
@@ -854,23 +854,23 @@ app_terminate(void *data)
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    appdata_s ad = {0,};
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+    ui_app_lifecycle_callback_s event_callback = {0,};
+    app_event_handler_h handlers[5] = {NULL,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+    event_callback.create = app_create;
+    event_callback.terminate = app_terminate;
+    event_callback.pause = app_pause;
+    event_callback.resume = app_resume;
+    event_callback.app_control = app_control;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;ui_app_main() is failed. err = %d&quot;, ret);
+    ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    if (ret != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() is failed. err = %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -885,11 +885,11 @@ main(int argc, char *argv[])
 static void
 service_app_low_battery(app_event_info_h event_info, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/ *APP_EVENT_LOW_BATTERY */
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *) user_data;
+    / *APP_EVENT_LOW_BATTERY */
+    appdata_s *ad = (appdata_s *) user_data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;location)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stop_location_service(ad);
+    if (ad-&gt;location)
+        stop_location_service(ad);
 }
 
 /* Assume that auto-generated functions from the Tizen Studio are here */
@@ -897,19 +897,19 @@ service_app_low_battery(app_event_info_h event_info, void *user_data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
+    appdata_s ad = {0,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_lifecycle_callback_s event_callback;
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+    service_app_lifecycle_callback_s event_callback;
+    app_event_handler_h handlers[5] = {NULL,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = service_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = service_app_terminate;
+    event_callback.create = service_app_create;
+    event_callback.terminate = service_app_terminate;
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Set the callback for low battery event */
-&nbsp;&nbsp;&nbsp;&nbsp;service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;APP_EVENT_LOW_BATTERY, service_app_low_battery, &amp;ad);
+    /* Set the callback for low battery event */
+    service_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY],
+                                  APP_EVENT_LOW_BATTERY, service_app_low_battery, &amp;ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return service_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    return service_app_main(argc, argv, &amp;event_callback, &amp;ad);
 }
 </pre>
 
diff --git a/org.tizen.training/html/native/feature/ui_builder_app_design_mn.htm b/org.tizen.training/html/native/feature/ui_builder_app_design_mn.htm
index 35af738..8a1fd6c 100644 (file)
--- a/org.tizen.training/html/native/feature/ui_builder_app_design_mn.htm
+++ b/org.tizen.training/html/native/feature/ui_builder_app_design_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Designing Your Native Application</title>  
+       <title>Designing Your Native Application</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,10 +28,10 @@
                        <li><a href="#binding">Binding an Event Handler to the UI Component</a></li>
                        <li><a href="#storyboard">Adding an Event Handler from the Storyboard</a></li>
                        <li><a href="#emulator">Running the Application in the Emulator</a></li>
-               </ul>           
+               </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Designing Your Native Application</h1>
 
 <p>You can approach the task of designing a native application with several methods. On the one hand, you can edit the application in the Tizen Studio after creating it with a basic template. On the other hand, you can edit the application in another editor and build it with the CLI interface of the Tizen Studio. As a third option, you can use the native UI Builder in the Tizen Studio.</p>
@@ -55,7 +55,7 @@
        <li>In the Tizen Studio, select <strong>File &gt; New &gt; Tizen Project</strong>.</li>
        <li>In the Project Wizard, create a template-based mobile native application, and select a Tizen native UI Builder project template.
        <p>The <strong>UI Builder - Navigation View</strong> template creates an application with 3 default views, while the <strong>UI Builder - Single View</strong> template offers a single view. For more information on the Project Wizard and templates, see <a href="../../../../org.tizen.studio/html/native_tools/project_wizard_n.htm">Creating Tizen Projects with Tizen Project Wizard</a>.</p>
-       
+
        <p align="center"><img alt="Project templates" src="../../images/ui_builder_templates.png" /></p>
        </li>
        <li>Define the project details, and click <strong>Finish</strong>.
@@ -64,7 +64,7 @@
 
 <p>After you have created the project, the Tizen Studio changes to the <strong>UI Builder</strong> perspective with the applicable views, and the project structure is shown in the <strong>Project Explorer</strong> view.</p>
 
-<p align="center"><strong>Figure: UI Builder views and default project structure</strong></p> 
+<p align="center"><strong>Figure: UI Builder views and default project structure</strong></p>
 <p align="center"><img alt="UI Builder views and default project structure" src="../../images/ui_builder_views.png" /></p>
 
 <p>The following table describes the content of the default project folders and files.</p>
@@ -108,7 +108,7 @@
  <tr>
  <td><img alt="Layout" src="../../images/ui_builder_layout.png" /> <code>layout.xml</code></td>
  <td>Layout meta file</td>
- </tr> 
+ </tr>
  <tr>
  <td><img alt="Icon" src="../../images/ui_builder_icon.png" /> <code>icon.png</code></td>
  <td>Application icon file</td>
@@ -116,7 +116,7 @@
  <tr>
  <td><img alt="Manifest" src="../../images/ui_builder_manifest.png" /> <code>tizen-manifest.xml</code></td>
  <td>Tizen native application manifest XML file</td>
- </tr> 
+ </tr>
 </tbody></table>
 
 
@@ -127,12 +127,12 @@
 <p>To create a UI with the WYSIWYG Editor:</p>
 
 <ol>
-       <li>Each view must have a root container as a top-level UI component (see the <a href="ui_builder_overview_mn.htm#UI_figure">UI hierarchy structure</a> figure). To design a view, first place the top-level UI component, the root container, on the canvas. 
+       <li>Each view must have a root container as a top-level UI component (see the <a href="ui_builder_overview_mn.htm#UI_figure">UI hierarchy structure</a> figure). To design a view, first place the top-level UI component, the root container, on the canvas.
        <p>To place a top-level UI component, use the components in the <strong>UI container</strong> category of the <strong>Palette</strong>. You can drag and drop the component from the palette to the canvas, or select the component in the palette and click in the canvas. After you have added the component, you can see it in the <strong>Outline</strong> view.</p>
        <p align="center"><img alt="Drag a grid UI component from the Palette" src="../../images/ui_builder_drag.png" /></p>
        <p align="center"><img alt="Root container in the Outline view" src="../../images/ui_builder_root.png" /></p>
        </li>
-       
+
        <li>After placing the root container, you can place any other UI components you want.
        <p>The native UI Builder provides a useful visual feedback. When you drag a UI component on the canvas, a feedback shows whether you can place the component. If the component can be placed in the selected position, the cursor shows a + sign. If not, the canvas turns red and the cursor displays a rejection sign.</p>
        <p>The following figures show an example of positive and negative feedback.</p>
@@ -148,9 +148,9 @@
 
 <p>Using the above steps, you can create a layout for your UI. For example, you can create a Login view by adding a grid, label, entry, button, and check UI components, and setting their properties and events.</p>
 
-<p align="center"><strong>Figure: Login view</strong></p> 
+<p align="center"><strong>Figure: Login view</strong></p>
 <p align="center"><img alt="Login view" src="../../images/ui_builder_login.png" /></p>
- 
+
 <h3>Using the XML Editor</h3>
 
 <p>Another UI programming method of the native UI Builder is to use the XML editor. You can edit your layout file in the <strong>Source</strong> tab. This section describes some of the features that are available in the <strong>Source</strong> tab.</p>
@@ -161,29 +161,29 @@
 <ul>
        <li><strong>Source</strong> tab
        <p>You can switch to the XML editor by clicking the <strong>Source</strong> tab at the top of the <strong>WYSIWYG Editor</strong> view. In the <strong>Source</strong> tab, you can edit the layout XML file.</p>
-       <p align="center"><strong>Figure: Source tab</strong></p> 
+       <p align="center"><strong>Figure: Source tab</strong></p>
        <p align="center"><img alt="Source tab" src="../../images/ui_builder_source.png" /></p>
        </li>
 
        <li>Content assist
        <p>The native UI Builder provides content assist functionality, which helps you to write code faster and more efficiently. To use this functionality, type a few characters of the word and press <strong>Ctrl+Space</strong>. The proposals are shown in a popup as in the following figure.</p>
-       <p align="center"><strong>Figure: Content assist</strong></p> 
-       <p align="center"><img alt="Content assist" src="../../images/ui_builder_assist.png" /></p> 
+       <p align="center"><strong>Figure: Content assist</strong></p>
+       <p align="center"><img alt="Content assist" src="../../images/ui_builder_assist.png" /></p>
        </li>
-       
+
        <li>Auto complete
        <p>If you select a tag in the suggested list with content assist, the auto complete feature automatically adds the end tag.</p>
-       <p align="center"><strong>Figure: Auto complete</strong></p> 
+       <p align="center"><strong>Figure: Auto complete</strong></p>
        <p align="center"><img alt="Auto complete" src="../../images/ui_builder_autocomplete.png" /></p>
        </li>
-       
+
        <li>Selection synchronization
        <p>If you move a focus to another UI component in the <strong>Source</strong> tab, the selection in Preview pane is automatically synchronized. Similarly, if you change the selection in the preview pane, the focus in the <strong>Source</strong> tab moves accordingly.</p>
-       <p align="center"><strong>Figure: Selection synchronization</strong></p> 
+       <p align="center"><strong>Figure: Selection synchronization</strong></p>
        <p align="center"><img alt="Selection synchronization" src="../../images/ui_builder_selection.png" /></p>
        </li>
 </ul>
- 
+
 <h3>Adding Views</h3>
 <p>To add a new view:</p>
 
@@ -201,7 +201,7 @@
        </li>
 <li>To activate the view for editing, click it in the <strong>Outline</strong> view.</li>
 <li>After selecting the view, create a layout for it by adding UI components from the <strong>Palette</strong> and defining their properties in the <strong>Properties</strong> view.</li>
-</ol> 
+</ol>
 
 <h2 id="binding">Binding an Event Handler to the UI Component</h2>
 
@@ -217,11 +217,11 @@
        <p align="center"><img alt="Event tab" src="../../images/ui_builder_event_tab.png" /></p>
        <p>The <strong>Events</strong> panel shows all available event types for the selected UI component:</p>
        <ul>
-               <li>To add an event handler for an event type, click <img alt="Add" src="../../images/ui_builder_add.png" /> next to the event type. 
+               <li>To add an event handler for an event type, click <img alt="Add" src="../../images/ui_builder_add.png" /> next to the event type.
                <p>The <strong>Events</strong> panel expands and you can see the suggested event handler name in gray color. Change the function name of the event handler, if needed. You can see the added event element in the <strong>Source</strong> tab.</p></li>
                <li>To go to the event handler source, click <img alt="Go" src="../../images/ui_builder_go.png" />.</li>
                <li>To remove the event handler, click <img alt="Remove" src="../../images/ui_builder_remove.png" />.</li>
-       </ul> 
+       </ul>
        <p align="center"><img alt="Event in the layout" src="../../images/ui_builder_event_layout.png" /></p>
        </li>
 
@@ -240,23 +240,23 @@ void view1_button1_onclicked(uib_view1_view_context *vc, Evas_Object *obj, void
                <li><code>vc</code>: View context related to the event. You can access the UI component in the view through this structure. The following code example shows a sample of the view context.
 <pre class="prettyprint">
 struct _uib_view1_view_context {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Parent evas_object which was parameter of create function */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *parent;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Root container UI component of this view */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object* root_container;
-&nbsp;&nbsp;&nbsp;&nbsp;/* View class name */
-&nbsp;&nbsp;&nbsp;&nbsp;const char *view_name;
-&nbsp;&nbsp;&nbsp;&nbsp;/* Control context to control this view */
-&nbsp;&nbsp;&nbsp;&nbsp;struct _uib_view1_control_context *cc;
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* UI components in this view */
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *grid1;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *button1;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *check1;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label1;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label2;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *entry1;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *entry2;
+    /* Parent evas_object which was parameter of create function */
+    Evas_Object *parent;
+    /* Root container UI component of this view */
+    Evas_Object* root_container;
+    /* View class name */
+    const char *view_name;
+    /* Control context to control this view */
+    struct _uib_view1_control_context *cc;
+
+    /* UI components in this view */
+    Evas_Object *grid1;
+    Evas_Object *button1;
+    Evas_Object *check1;
+    Evas_Object *label1;
+    Evas_Object *label2;
+    Evas_Object *entry1;
+    Evas_Object *entry2;
 };
 typedef struct _uib_view1_view_context uib_view1_view_context;
 </pre>
@@ -278,7 +278,7 @@ typedef struct _uib_view1_view_context uib_view1_view_context;
 <h2 id="storyboard">Adding an Event Handler from the Storyboard</h2>
 
 <p>To transition between pages in your application, use the Storyboard feature of the UI Builder. In the <strong>Storyboard</strong> tab, you can see all the views of your application. In the Storyboard, transitioning between the application views based on some UI component event is called a connection from a UI component to the target view. The target view is the view to be opened when performing a specific event on the UI component.</p>
- 
+
 <p>To create a connection:</p>
 
 <ol>
@@ -323,10 +323,10 @@ typedef struct _uib_view1_view_context uib_view1_view_context;
 
 <p>The following figure shows the running application. If you click the <strong>Login</strong> button, the text changes to <strong>Click to login</strong>.</p>
 
-<p align="center"><strong>Figure: Running Login application</strong></p> 
+<p align="center"><strong>Figure: Running Login application</strong></p>
 <p align="center"><img alt="Running Login application" src="../../images/ui_builder_run.png" /></p>
-       
-   
+
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/feature/ui_builder_overview_mn.htm b/org.tizen.training/html/native/feature/ui_builder_overview_mn.htm
index d8e58ea..eff6ecb 100644 (file)
--- a/org.tizen.training/html/native/feature/ui_builder_overview_mn.htm
+++ b/org.tizen.training/html/native/feature/ui_builder_overview_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Overview of Tizen UI Development</title>  
+       <title>Overview of Tizen UI Development</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,17 +28,17 @@
                        <li><a href="#efl_structure">EFL Structure on Tizen</a></li>
                        <li><a href="#ui_hierarchy">UI Hierarchy Structure</a></li>
                        <li><a href="#library">Elementary UI Component Library</a></li>
-               </ul>           
+               </ul>
        </div></div>
-</div>         
-<div id="container"><div id="contents"><div class="content">   
+</div>
+<div id="container"><div id="contents"><div class="content">
 <h1>Overview of Tizen UI Development</h1>
-               
+
 <p>This guide gives a brief description of UI structures and demonstrates how you can develop and design native UI applications with tools.</p>
 
 <p>This documentation has been created based on the mobile profile.</p>
 
-<p>When talking about the development of Tizen native UI applications, you cannot avoid EFL. Tizen platform uses EFL as a UI framework that provides both a visual outlook for user applications and significant performance benefits.</p> 
+<p>When talking about the development of Tizen native UI applications, you cannot avoid EFL. Tizen platform uses EFL as a UI framework that provides both a visual outlook for user applications and significant performance benefits.</p>
 <p>EFL stands for Enlightenment Foundation Libraries. Enlightenment is a project consisting of Enlightenment window manager, EFL libraries, and various utilities and applications. Originally, Enlightenment was a project to build a Window Manager for X11. However, it has grown much since then. At the moment, it still produces the Window Manager, but it has evolved to cover mobile, wearable, and TV UI needs (for example, for Tizen projects) as well as the traditional desktop UI. Although Tizen adopts EFL as the UI framework, the UI framework and EFL are not the same thing. Since EFL is mainly a project for the Window Manager, in the Tizen UI framework, its features are defined for mobile, wearable, and TV characteristics.</p>
 
 <h2 id="benefit">Benefits of EFL</h2>
@@ -47,7 +47,7 @@
 <p>An important aspect of EFL is efficiency, both in speed and size:</p>
 
 <ul>
-       <li>The core EFL libraries, even with Elementary, are about half the size of the equivalent &quot;small stack&quot; of GTK+ (used, for example, by GNOME), and about one quarter the size of Qt. Of course, with these kinds of numbers, you can always argue over what exactly constitutes an equivalent measurement.</li>
+       <li>The core EFL libraries, even with Elementary, are about half the size of the equivalent "small stack" of GTK+ (used, for example, by GNOME), and about one quarter the size of Qt. Of course, with these kinds of numbers, you can always argue over what exactly constitutes an equivalent measurement.</li>
        <li>EFL is low on actual memory usage at runtime, with memory footprints a fraction the size of those in the GTK+ and Qt environments.</li>
        <li>EFL is fast, considering what it does. Some libraries claim to be very fast - but then, it is easy to be fast when you only handle simple and straightforward tasks. EFL is fast, while also tackling the more complex rendering problems involving, for example, alpha blending, interpolated scaling, and transforms with dithering.</li>
 </ul>
@@ -69,7 +69,7 @@
 <p>The main reason Tizen uses EFL is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering, resulting in EFL being fast even in software rendering.</p>
 <p>A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated. In other words, since EFL (Evas) works with the retained mode, there is no need to command any drawing.</p>
 
-<p align="center"><strong>Figure: Retained-mode rendering</strong></p> 
+<p align="center"><strong>Figure: Retained-mode rendering</strong></p>
 <p align="center"><img alt="Retained-mode rendering" src="../../images/ui_builder_retained_mode.png" /></p>
 
 <h3>Separation of UI and Logic with Edje</h3>
@@ -81,20 +81,20 @@
 </ul>
 <p>The following figure describes the behavior of the EDC files.</p>
 
-<p align="center"><strong>Figure: EDC file behavior</strong></p> 
+<p align="center"><strong>Figure: EDC file behavior</strong></p>
 <p align="center"><img alt="EDC file behavior" src="../../images/ui_builder_edc.png" /></p>
 
 <h2 id="efl_structure">EFL Structure on Tizen</h2>
 <p>EFL is a collection of libraries that cover a range of functionality from managing the application life-cycle to rendering graphical objects. EFL libraries build on top of each other in layers, steadily becoming higher-level, yet allowing access to lower levels. The higher up you go, the less you have to do yourself. Elementary is at the top, but you still access the layers below it for common tasks, as there is no need for Elementary to wrap things that work perfectly well as-is.</p>
 <p>To learn more about each library, go to <a href="../../../../org.tizen.guides/html/native/ui/efl/introduction_n.htm">Introduction</a>. This section only briefly describes the hierarchical structure of your application on Tizen.</p>
 
-<p align="center"><strong>Figure: EFL structure</strong></p> 
+<p align="center"><strong>Figure: EFL structure</strong></p>
 <p align="center"><img alt="EFL structure" src="../../images/ui_builder_efl_structure.png" /></p>
- 
+
 <p>When you create a basic EFL application, you use the following main libraries as a basis:</p>
 <ul>
        <li>Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life-cycle of a view, and add UI components (a full set with, for example, buttons, boxes, scrollers, and sliders).</li>
-       <li>EFL Core Library consists of several libraries that build on top of each other in layers, steadily becoming higher-level, yet allowing access to lower levels. 
+       <li>EFL Core Library consists of several libraries that build on top of each other in layers, steadily becoming higher-level, yet allowing access to lower levels.
        <p>EFL Core Library provides the following main libraries:</p>
        <ul>
                <li>Edje library provides a powerful theme. You can use it to create your own UI components and use them in your application. You can also extend the default theme.</li>
@@ -109,14 +109,14 @@
 <p>To manage multiple views with EFL on Tizen applications, create a naviframe object. The naviframe can contain multiple views, and is a top-layer object which can help your application to manage and switch views. If your application has only one view, you do not need the naviframe.</p>
 <p>The following figure illustrates the most popular view hierarchy for managing multiple views.</p>
 
-<p align="center"><strong>Figure: View hierarchy for multiple views</strong></p> 
+<p align="center"><strong>Figure: View hierarchy for multiple views</strong></p>
 <p align="center"><img alt="View hierarchy for multiple views" src="../../images/ui_builder_view_hierarchy.png" /></p>
 
 <ul>
        <li>Window, which is the bottom-most UI component holding a canvas object for drawing, to represent a block of memory that gets composited to the screen.</li>
-       <li>Conformant, which shows the virtual keyboard, indicator, softkey, and clipboard areas. 
+       <li>Conformant, which shows the virtual keyboard, indicator, softkey, and clipboard areas.
        <p>If you do not need those components, you do not need the conformant either.</p></li>
-       <li>Naviframe, which is used in applications that show multiple views through their lives with back and forth transitions between them. 
+       <li>Naviframe, which is used in applications that show multiple views through their lives with back and forth transitions between them.
        <p>If you want to manage just 1 view, there is no need to add the naviframe.</p></li>
        <li>UI Container (such as grid, table, or box), which helps to arrange UI components.</li>
        <li>UI Component (such as button, background, icon, or image), which presents the UI layout.</li>
@@ -124,7 +124,7 @@
 
 <p>If you want to make a structure for each situation (single and multiple views), the following figure illustrates a possible structure.</p>
 
-<p align="center" id="UI_figure"><strong>Figure: UI hierarchy structure</strong></p> 
+<p align="center" id="UI_figure"><strong>Figure: UI hierarchy structure</strong></p>
 <p align="center"><img alt="UI hierarchy structure" src="../../images/ui_builder_ui_hierarchy.png" /></p>
 
 <h2 id="library">Elementary UI Component Library</h2>
@@ -170,7 +170,7 @@
        <li>Radio: The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</li>
 
 </ul>
-   
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/getting_started_n.htm b/org.tizen.training/html/native/getting_started_n.htm
index 6a16389..da423f5 100644 (file)
--- a/org.tizen.training/html/native/getting_started_n.htm
+++ b/org.tizen.training/html/native/getting_started_n.htm
@@ -5,25 +5,25 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Getting Started with Native Applications</title>  
+       <title>Getting Started with Native Applications</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile native" src="../images/mobile_s_n.png"/> <img alt="Wearable native" src="../images/wearable_s_n.png"/></p>
        </div>
-       
+
 <h1>Getting Started with Native Applications</h1>
 
 
@@ -39,7 +39,7 @@
        <li><a href="wearable_widget/first_app_widget_wn.htm">Wearable native widget application</a>
        <p>The wearable widget application is a small application that can be shown by specific UI applications (such as the home screen).</p></li>
        </ul>
-       
+
 <p>The first application examples show a simple application with a basic UI and minimal functionality. Get familiar with the example first, and afterwards you can use it as a basis to build more complex applications with the help of the extensive native API.</p>
 
 
diff --git a/org.tizen.training/html/native/mobile/first_app_mn.htm b/org.tizen.training/html/native/mobile/first_app_mn.htm
index c276fb0..91936e9 100644 (file)
--- a/org.tizen.training/html/native/mobile/first_app_mn.htm
+++ b/org.tizen.training/html/native/mobile/first_app_mn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Your First Tizen Mobile Native Application</title>  
+       <title>Creating Your First Tizen Mobile Native Application</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -26,7 +26,7 @@
                        <li><a href="#create">Creating a Project</a></li>
                        <li><a href="#build">Building Your Application</a></li>
                        <li><a href="#run">Running Your Application</a></li>
-                       <li><a href="#build_ui">Building a Simple UI</a></li>           
+                       <li><a href="#build_ui">Building a Simple UI</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -37,7 +37,7 @@
            <li><a href="../process/running_app_n.htm">Running Applications</a></li>
         </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Creating Your First Tizen Mobile Native Application</h1>
@@ -250,7 +250,7 @@
 <ol type="a">
 <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>.
 
-<p align="center"><img src="../../images/app_run_mn.png" alt="Running the application" /></p> 
+<p align="center"><img src="../../images/app_run_mn.png" alt="Running the application" /></p>
 
 <p>Alternatively, you can also select the project in the <strong>Project Explorer</strong> view and do one of the following:</p>
 <ul><li>Press the <strong>Ctrl+F11</strong> key.</li>
@@ -258,7 +258,7 @@
 
 <p>If you have created multiple emulator instances, select the instance you want from the combo box in the toolbar before selecting to run the application. If you select an offline emulator, it is automatically launched when you select to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p>
 </li>
 
 <li>Confirm that the application launches on the emulator.
@@ -295,7 +295,7 @@
 <li>Run the application:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, select the device.</li>
-<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>. 
+<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>.
 
 <p align="center"><img src="../../images/app_run_mn.png" alt="Running the application on a target device" /></p>
 
@@ -305,12 +305,12 @@
 
 <p>If you have both a connected device and existing emulator instances, select the device from the combo box in the toolbar before selecting to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p>
 
 </li>
 <li>Confirm that the application launches in the target device.</li>
 </ol>
-  
+
       <div class="note">
         <strong>Note</strong>
         The application is launched using the default debug run configuration. To create and use another configuration:
@@ -320,19 +320,19 @@
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_n.png" /></p></li>
         </ol>
     </div>
-  
-<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>  
+
+<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
 </ol>
 
 <h2 id="build_ui">Building a Simple UI</h2>
 
 <p>The following steps demonstrate how to create a simple user interface for a mobile device using EFL.</p>
- 
+
 
 <p>This guide consists of the following:</p>
 <ol>
-<li>Defining the data structure</li> 
+<li>Defining the data structure</li>
 <li>Registering life-cycle callbacks</li>
 <li>Creating UI objects</li>
 </ol>
@@ -343,9 +343,9 @@
 
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label;
 };
 typedef struct appdata appdata_s;
 </pre>
@@ -354,11 +354,11 @@ typedef struct appdata appdata_s;
 <p>The <code>main()</code> function has callbacks that manage specific parts of the application life-cycle:</p>
 
 <ul>
-<li><code>app_create</code> 
+<li><code>app_create</code>
 <ul><li>Called when the application process starts.</li>
 <li>Used to create UI components.</li>
 </ul></li>
-<li><code>app_terminate</code> 
+<li><code>app_terminate</code>
 <ul><li>Called while the application process is terminating.</li>
 <li>Called after the main loop quits.</li>
 </ul></li>
@@ -368,7 +368,7 @@ typedef struct appdata appdata_s;
 <li><code>app_pause</code> (UI applications only)
 <ul><li>Called when the application window is totally hidden.</li>
 </ul></li>
-<li><code>app_control</code> 
+<li><code>app_control</code>
 <ul><li>Called after the <code>app_create</code> callback when the process starts or called when a launch request is received while the process is running.</li>
 <li>Can receive <code>app_control</code> data (parameters for launching the application).</li>
 <li>Used to implement parameter-specific actions of the application.</li>
@@ -378,23 +378,23 @@ typedef struct appdata appdata_s;
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
+    appdata_s ad = {0,};
+    int ret = 0;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
+    ui_app_lifecycle_callback_s event_callback = {0,};
+    app_event_handler_h handlers[5] = {NULL,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+    event_callback.create = app_create;
+    event_callback.terminate = app_terminate;
+    event_callback.pause = app_pause;
+    event_callback.resume = app_resume;
+    event_callback.app_control = app_control;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_main() failed. Err=%d&quot;, ret);
+    ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    if (ret != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "app_main() failed. Err=%d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -405,17 +405,17 @@ main(int argc, char *argv[])
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Hook to take necessary actions before the main event loop starts
-&nbsp;&nbsp;&nbsp;&nbsp;   Initialize UI resources and application data
-&nbsp;&nbsp;&nbsp;&nbsp;   If this function returns true, the application main loop starts
-&nbsp;&nbsp;&nbsp;&nbsp;   If this function returns false, the application is terminated
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+    /*
+       Hook to take necessary actions before the main event loop starts
+       Initialize UI resources and application data
+       If this function returns true, the application main loop starts
+       If this function returns false, the application is terminated
+    */
+    appdata_s *ad = data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+    create_base_gui(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 
@@ -425,34 +425,34 @@ app_create(void *data)
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Conformant */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Label */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;&lt;align=center&gt;Hello Tizen&lt;/align&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;label);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+    /* Window */
+    ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+    elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+    if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
+        int rots[4] = {0, 90, 180, 270};
+        elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+    }
+
+    evas_object_smart_callback_add(ad-&gt;win, "delete,request", win_delete_request_cb, NULL);
+    eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+    /* Conformant */
+    ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+    elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+    elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
+    evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+    evas_object_show(ad-&gt;conform);
+
+    /* Label */
+    ad-&gt;label = elm_label_add(ad-&gt;conform);
+    elm_object_text_set(ad-&gt;label, "&lt;align=center&gt;Hello Tizen&lt;/align&gt;");
+    evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_object_content_set(ad-&gt;conform, ad-&gt;label);
+
+    /* Show the window after the base GUI is set up */
+    evas_object_show(ad-&gt;win);
 }
 </pre>
 
@@ -471,17 +471,17 @@ ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
 elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
 
 if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
-&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+    int rots[4] = {0, 90, 180, 270};
+    elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
 }
-evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+evas_object_smart_callback_add(ad-&gt;win, "delete,request", win_delete_request_cb, NULL);
 eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
 </pre>
 </li>
 <li>
-<p>You can create a conformant object that is based on the window. The conformant goes inside the window first.</p> 
+<p>You can create a conformant object that is based on the window. The conformant goes inside the window first.</p>
 <p>The <code>elm_win_indicator_mode_set()</code> function decides whether the indicator is visible, and the <code>elm_win_indicator_opacity_set()</code> function sets the indicator opacity mode.</p>
-<p>You can set the conformant object as a resize object of the window by using the <code>elm_win_resize_object_add()</code> function. It means that the conformant size and position are controlled by the window object directly.</p> 
+<p>You can set the conformant object as a resize object of the window by using the <code>elm_win_resize_object_add()</code> function. It means that the conformant size and position are controlled by the window object directly.</p>
 <p>The <code>evas_object_show()</code> function makes the conformant object visible.</p>
 
 <pre class="prettyprint">
@@ -509,7 +509,7 @@ evas_object_show(ad-&gt;conform);
    Modify this part to change the view
 */
 ad-&gt;label = elm_label_add(ad-&gt;conform);
-elm_object_text_set(ad-&gt;label, &quot;&lt;align=center&gt;Hello Tizen&lt;/align&gt;&quot;);
+elm_object_text_set(ad-&gt;label, "&lt;align=center&gt;Hello Tizen&lt;/align&gt;");
 evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 elm_object_content_set(ad-&gt;conform, ad-&gt;label);
 </pre>
diff --git a/org.tizen.training/html/native/process/app_dev_process_n.htm b/org.tizen.training/html/native/process/app_dev_process_n.htm
index 826b493..4f648b1 100644 (file)
--- a/org.tizen.training/html/native/process/app_dev_process_n.htm
+++ b/org.tizen.training/html/native/process/app_dev_process_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Native Application Development Process</title>  
+       <title>Native Application Development Process</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -34,12 +34,12 @@
                        <li><a href="#cert">Certifying and Publishing the Application</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Native Application Development Process</h1>
 
-  <p>Tizen provides the tools required to manage your native application life-cycle from product conception, through development and release, to end-of-life application retirement:</p> 
+  <p>Tizen provides the tools required to manage your native application life-cycle from product conception, through development and release, to end-of-life application retirement:</p>
 
        <ol>
                        <li>Plan and design the application.</li>
@@ -51,195 +51,195 @@
                        <li>Package the application.</li>
                        <li>Develop multi-projects (multiple applications within the same package).</li>
                        <li>Certify and publish the application.</li>
-       </ol>   
+       </ol>
 
 <h2 id="planning" name="planning">Planning and Designing the Application</h2>
 
-  <p>The first step in creating a Tizen native application is planning and designing the application using the design tools of your choice.</p> 
+  <p>The first step in creating a Tizen native application is planning and designing the application using the design tools of your choice.</p>
 
-  <p>Once you have finished the application plan and design, you are ready to <a href="#creating">create the application project</a>.</p>  
+  <p>Once you have finished the application plan and design, you are ready to <a href="#creating">create the application project</a>.</p>
 
 <h2 id="creating" name="creating">Creating the Application Project</h2>
 
   <p>The Tizen Studio provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template or sample. Based on the selection, the Tizen native <a href="../../../../org.tizen.studio/html/native_tools/project_wizard_n.htm">Project Wizard</a> automatically creates basic functionalities that the application has to implement to be able to run. The default project files and folders are also created.</p>
-  
+
 <h2 id="setting" name="setting">Setting Project Properties</h2>
-       
+
        <p>After creating the application project, you can <a href="setting_properties_n.htm">configure the project properties and create the application manifest</a> to achieve the required functionality and features for your application.</p>
 
 <h2 id="designing" name="designing">Designing the Application UI and Implementing Code</h2>
 
-  <p>Implementing your application consists of:</p> 
-  <ul> 
-   <li><strong>Designing and creating the application UI (User Interface)</strong> 
-        <p>You can <a href="../feature/ui_builder_app_design_mn.htm">design and create the application UI (user interface) with UI Builder</a>.</p> 
+  <p>Implementing your application consists of:</p>
+  <ul>
+   <li><strong>Designing and creating the application UI (User Interface)</strong>
+        <p>You can <a href="../feature/ui_builder_app_design_mn.htm">design and create the application UI (user interface) with UI Builder</a>.</p>
         <p>UI Builder is included in the Tizen Studio, and functions as a WYSIWYG (What You See Is What You Get) design environment for creating UIs for native applications.</p>
 
        <div class="note">
         <strong>Note</strong>
         You can also design the application UI using the controls defined in the <a href="../../../../org.tizen.guides/html/native/ui/ui_cover_n.htm">User Interface</a> guides.
     </div>
-   
+
         </li>
-   <li><strong>Coding applications</strong> 
-        <p>Code your application in the Tizen Studio using the namespaces defined in the Native API Reference (in <a href="../../../../org.tizen.native.mobile.apireference/modules.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/modules.html">wearable</a> applications).</p> </li> 
-  </ul> 
-  <p>If needed, update the privileges of the application.</p> 
-  <p>Once you have finished implementing your application, you are ready to <a href="#build">build your application</a>.</p> 
+   <li><strong>Coding applications</strong>
+        <p>Code your application in the Tizen Studio using the namespaces defined in the Native API Reference (in <a href="../../../../org.tizen.native.mobile.apireference/modules.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/modules.html">wearable</a> applications).</p> </li>
+  </ul>
+  <p>If needed, update the privileges of the application.</p>
+  <p>Once you have finished implementing your application, you are ready to <a href="#build">build your application</a>.</p>
 
 <h2 id="build" name="build" >Building the Application</h2>
 
-  <p>You must <a href="building_app_n.htm">build your native application project</a> before you can <a href="#debugging">run and debug the application</a>. </p> 
-  <p>The build configuration is the <a href="building_app_n.htm#prop">set of properties</a> which are used in the build process. The build configuration includes the following properties:</p> 
-  <ul> 
-   <li>Build (compile and link) options</li> 
-   <li>Source files to build</li> 
+  <p>You must <a href="building_app_n.htm">build your native application project</a> before you can <a href="#debugging">run and debug the application</a>. </p>
+  <p>The build configuration is the <a href="building_app_n.htm#prop">set of properties</a> which are used in the build process. The build configuration includes the following properties:</p>
+  <ul>
+   <li>Build (compile and link) options</li>
+   <li>Source files to build</li>
    <li>Compiler toolchain, such as compiler, linker, and archiver</li> </ul>
 
 <h2 id="debugging" name="debugging">Running and Debugging the Application</h2>
 
   <p>You can <a href="running_app_n.htm">run your application in the emulator</a>. The device emulator, provided with the Tizen Studio, imitates the target environment running Tizen native applications. Using this replicated environment, you can test your application before deploying it to the real target device.</p>
-  
-   
-  <p>You can also <a href="debugging_app_n.htm#emulator">debug your application with the emulator</a>. The emulator represents the almost identical functionality of the corresponding device model.</p> <p>The emulator provides the following debugging capabilities:</p> 
-    <ul> 
-     <li>Injecting events with the Event Injector view</li> 
-     <li>Simulating peripheral devices</li> 
-     <li>Acting as a source-level debugger</li> 
-     <li>Producing console output</li> 
-    </ul> 
-
-  
-  <p>You can make running and testing your application faster using the <a href="running_app_n.htm#rapid">Rapid Development Support (RDS)</a>. For more information about the debugging methods and tools you can use, see <a href="debugging_app_n.htm">Debugging Applications</a>.</p> 
-  
+
+
+  <p>You can also <a href="debugging_app_n.htm#emulator">debug your application with the emulator</a>. The emulator represents the almost identical functionality of the corresponding device model.</p> <p>The emulator provides the following debugging capabilities:</p>
+    <ul>
+     <li>Injecting events with the Event Injector view</li>
+     <li>Simulating peripheral devices</li>
+     <li>Acting as a source-level debugger</li>
+     <li>Producing console output</li>
+    </ul>
+
+
+  <p>You can make running and testing your application faster using the <a href="running_app_n.htm#rapid">Rapid Development Support (RDS)</a>. For more information about the debugging methods and tools you can use, see <a href="debugging_app_n.htm">Debugging Applications</a>.</p>
+
   <p>You can also <a href="performance_n.htm">optimize your application</a> to achieve the best possible performance.</p>
-  
+
   <p>To debug your application with the emulator or the target device, you must first <a href="building_app_n.htm">build the application</a>.</p>
 
 <h2 id="packaging" name="packaging">Packaging the Application</h2>
 
-  <p>You can package your application using the Tizen Studio. If you want to register your application in the Tizen store, <a href="../../../../org.tizen.studio/html/common_tools/certificate_registration.htm">register the author certificate</a> before packaging your application.</p> 
-  
-  <ol> 
-   <li><p>If you have made changes to the application after testing it, <a href="building_app_n.htm">rebuild the application</a>.</p> </li> 
-   <li><p>Select the project in the <strong>Project Explorer</strong> view.</p></li> 
+  <p>You can package your application using the Tizen Studio. If you want to register your application in the Tizen store, <a href="../../../../org.tizen.studio/html/common_tools/certificate_registration.htm">register the author certificate</a> before packaging your application.</p>
+
+  <ol>
+   <li><p>If you have made changes to the application after testing it, <a href="building_app_n.htm">rebuild the application</a>.</p> </li>
+   <li><p>Select the project in the <strong>Project Explorer</strong> view.</p></li>
    <li><p>In the project context menu, select <strong>Project &gt; Build Signed Package</strong>.</p></li>
-   
-  </ol> 
 
-<p>After the packaging process is complete, check the package in the project folder to ensure that the packaging was successful.</p> 
+  </ol>
+
+<p>After the packaging process is complete, check the package in the project folder to ensure that the packaging was successful.</p>
 
 <h2 id="develop" name="develop">Developing Multiple Projects as a Combined Package</h2>
 
-  <p>Tizen supports multi-project applications that combine different types of application templates.</p> 
+  <p>Tizen supports multi-project applications that combine different types of application templates.</p>
 
-  <p>You can develop a UI project with service or widget projects as a package.</p> 
-  <p>To develop a multi-project native application:</p> 
-  <ol> 
-   <li><a href="#creating">Create a UI application</a>.</li> 
-   <li>Create a service or widget application.</li> 
-   <li>Package a multi-project application using Tizen Studio: 
+  <p>You can develop a UI project with service or widget projects as a package.</p>
+  <p>To develop a multi-project native application:</p>
+  <ol>
+   <li><a href="#creating">Create a UI application</a>.</li>
+   <li>Create a service or widget application.</li>
+   <li>Package a multi-project application using Tizen Studio:
      <ol type="a">
-      <li>In the Tizen Studio, make sure all the applications you want to include in the package are located in the <strong>Project Explorer</strong> view. <p>To make the projects appear in the <strong>Project Explorer</strong> view, you can create new applications, or import existing projects or sample applications into the Tizen Studio.</p> </li> 
-      <li><p>To establish a project reference between a UI application and a service or widget application:</p> 
-       <ul> 
-        <li>In the <strong>Project Explorer</strong> view, right-click the UI application.</li> 
-        <li>Select <strong> Properties &gt; Tizen Studio &gt; Package &gt; Multi</strong>.</li> 
-        <li>Select the check box for the service or widget application, and click <strong>OK</strong>. 
-               <p>In the <strong>Project Explorer</strong> view, a message (with the UI application) appears next to the referenced project name for all the applications you have added to the package.</p> </li> 
-      </ul> </li> 
-     </ol> 
+      <li>In the Tizen Studio, make sure all the applications you want to include in the package are located in the <strong>Project Explorer</strong> view. <p>To make the projects appear in the <strong>Project Explorer</strong> view, you can create new applications, or import existing projects or sample applications into the Tizen Studio.</p> </li>
+      <li><p>To establish a project reference between a UI application and a service or widget application:</p>
+       <ul>
+        <li>In the <strong>Project Explorer</strong> view, right-click the UI application.</li>
+        <li>Select <strong> Properties &gt; Tizen Studio &gt; Package &gt; Multi</strong>.</li>
+        <li>Select the check box for the service or widget application, and click <strong>OK</strong>.
+               <p>In the <strong>Project Explorer</strong> view, a message (with the UI application) appears next to the referenced project name for all the applications you have added to the package.</p> </li>
+      </ul> </li>
+     </ol>
         <p>After packaging the multi-project application, the package consists of the application binary, resource, and data files of the root and referenced applications. Their <code>tizen-manifest.xml</code> files are merged into one. <a href="../app_model/application_model_n.htm#packageID">The application ID in the <code>tizen-manifest.xml</code> must be assigned with the package ID as a prefix.</a></p>
-   </li> 
-   <li><a href="building_app_n.htm">Build</a> and <a href="running_app_n.htm">run</a> the UI application. <p>The service or widget application is built and run automatically while the UI application is built and run.</p></li> 
-  </ol> 
+   </li>
+   <li><a href="building_app_n.htm">Build</a> and <a href="running_app_n.htm">run</a> the UI application. <p>The service or widget application is built and run automatically while the UI application is built and run.</p></li>
+  </ol>
 
     <div class="note">
         <strong>Note</strong>
        Tizen has limited a multi-project application combination policy for device usability. If you do not follow the policy, the submission of your application to the Tizen Store can be rejected.
          <p>For your convenience, some policies can be allowed in the Tizen Studio only. For example, you can make a STANDALONE service application or STANDALONE widget application in the Tizen Studio, but these applications can be rejected in the Tizen Store.</p>
-    </div>   
-  
-<p>The following table shows the possible combinations for a native multi-project. <strong>1</strong> means that only one application can be packaged as a sub application, while <strong>M</strong> means that multiple applications can be packaged as sub applications. The <strong>STANDALONE</strong> column defines whether the application can be packaged alone as the main application.</p> 
+    </div>
+
+<p>The following table shows the possible combinations for a native multi-project. <strong>1</strong> means that only one application can be packaged as a sub application, while <strong>M</strong> means that multiple applications can be packaged as sub applications. The <strong>STANDALONE</strong> column defines whether the application can be packaged alone as the main application.</p>
 <p align="center" class="Table"><strong>Table: Combinations</strong></p>
 <table>
 <tbody>
 <tr>
-               <th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main project</th> 
-               <th colspan="6" style="text-align:center;margin-left:auto;margin-right:auto;">Sub project</th> 
+               <th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main project</th>
+               <th colspan="6" style="text-align:center;margin-left:auto;margin-right:auto;">Sub project</th>
 </tr>
 <tr>
-       <th style="text-align:center;margin-left:auto;margin-right:auto;">STANDALONE</th> 
-       <th style="text-align:center;margin-left:auto;margin-right:auto;">UI</th> 
-       <th style="text-align:center;margin-left:auto;margin-right:auto;">SERVICE</th> 
-       <th style="text-align:center;margin-left:auto;margin-right:auto;">WATCH</th> 
-       <th style="text-align:center;margin-left:auto;margin-right:auto;">WIDGET</th> 
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">STANDALONE</th>
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">UI</th>
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">SERVICE</th>
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">WATCH</th>
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">WIDGET</th>
           <th style="text-align:center;margin-left:auto;margin-right:auto;">IME</th>
       </tr>
 <tr>
-<td>UI</td> 
-       <td>Yes</td> 
-       <td>No</td> 
-       <td>M</td> 
-       <td>No</td> 
-       <td>M</td> 
+<td>UI</td>
+       <td>Yes</td>
+       <td>No</td>
+       <td>M</td>
+       <td>No</td>
+       <td>M</td>
           <td>No</td>
       </tr>
 <tr>
-<td>SERVICE</td> 
-       <td>No</td> 
-       <td>No</td> 
-       <td>No</td> 
-       <td>No</td> 
-       <td>No</td> 
+<td>SERVICE</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
           <td>No</td>
       </tr>
 <tr>
-<td>WATCH</td> 
-       <td>Yes</td> 
-       <td>No</td> 
-       <td>M</td> 
-       <td>No</td> 
-       <td>No</td> 
+<td>WATCH</td>
+       <td>Yes</td>
+       <td>No</td>
+       <td>M</td>
+       <td>No</td>
+       <td>No</td>
           <td>No</td>
       </tr>
 <tr>
-<td>WIDGET</td> 
-       <td>No</td> 
-       <td>No</td> 
-       <td>No</td> 
-       <td>No</td> 
-       <td>No</td> 
+<td>WIDGET</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
           <td>No</td>
       </tr>
 <tr>
-<td>IME</td> 
-       <td>Yes</td> 
-       <td>M</td> 
-       <td>M</td> 
-       <td>No</td> 
-       <td>No</td> 
+<td>IME</td>
+       <td>Yes</td>
+       <td>M</td>
+       <td>M</td>
+       <td>No</td>
+       <td>No</td>
           <td>No</td>
-      </tr>      
+      </tr>
 </tbody>
-</table>  
-  
+</table>
+
 <p>The following examples illustrate how to read the above table:</p>
 <ul>
  <li>Main UI project alone: Allowed</li>
  <li>Main UI project + 3 service projects packaged together: Allowed</li>
  <li>Main UI project + 1 widget project packaged together: Allowed</li>
  <li>Main service project alone: Not allowed</li>
- <li>Main widget project alone: Not allowed</li> 
+ <li>Main widget project alone: Not allowed</li>
 </ul>
 
-  
-   
+
+
 
 <h2 id="cert" name="cert">Certifying and Publishing the Application</h2>
 
-<p>After you have packaged your application, you are ready to certify and publish your application.</p> 
-  <p>To certify and publish your application:</p> 
+<p>After you have packaged your application, you are ready to certify and publish your application.</p>
+  <p>To certify and publish your application:</p>
   <ul>
        <li>Upload your mobile native application to the Tizen Store or your wearable native application to the Samsung Galaxy Apps Store for registration.
                <p>After the application is uploaded, the application is signed as a certified application installer package and the <code>&lt;Application_name&gt;.tpk</code> archive format, which contains the distributor signature, is added by the Tizen Store or Samsung Galaxy Apps Store.</p>
@@ -248,15 +248,15 @@
                <p>The Tizen Store or Samsung Galaxy Apps Store checks whether your application functions properly.</p>
        </li>
   </ul>
-  
-  <p>For detailed instructions on how to register your application and submit it for validation and publication in the Tizen Store, see <a href="https://developer.tizen.org/distribution/tizen-store-overview">Tizen Store Overview</a> and other subtopics within the <strong>Distribution</strong> section of the Tizen Developers site.</p>  
-  
-  <p>You can also upgrade your application after certification. If you want to withdraw your application from distribution and operation, you need to request for application retirement from the Tizen Store or Samsung Galaxy Apps Store.</p>  
 
-  <p>The following figure illustrates the process of developing a Tizen native application.</p> 
-  <p align="center"><strong>Figure: Native application development process</strong></p> 
+  <p>For detailed instructions on how to register your application and submit it for validation and publication in the Tizen Store, see <a href="https://developer.tizen.org/distribution/tizen-store-overview">Tizen Store Overview</a> and other subtopics within the <strong>Distribution</strong> section of the Tizen Developers site.</p>
+
+  <p>You can also upgrade your application after certification. If you want to withdraw your application from distribution and operation, you need to request for application retirement from the Tizen Store or Samsung Galaxy Apps Store.</p>
+
+  <p>The following figure illustrates the process of developing a Tizen native application.</p>
+  <p align="center"><strong>Figure: Native application development process</strong></p>
 <p align="center"><img alt="Native application development process" src="../../images/app_dev_process_mn.png" /></p>
-  
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 
diff --git a/org.tizen.training/html/native/process/building_app_n.htm b/org.tizen.training/html/native/process/building_app_n.htm
index afedf92..0897e3a 100644 (file)
--- a/org.tizen.training/html/native/process/building_app_n.htm
+++ b/org.tizen.training/html/native/process/building_app_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Building Applications</title>  
+       <title>Building Applications</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                        <p class="toc-title">Content</p>
                <ul class="toc">
@@ -28,71 +28,71 @@
                        <li><a href="#prop">Build Properties</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Building Applications</h1> 
-
-  <p>In the Tizen Studio, different build configurations are available for different development steps:</p> 
-  <ul> 
-   <li>The <strong>Debug</strong> build is used to debug and test the application. <p>The binary, data, and debug files are stored in a <code>Debug</code> folder under the project in the workspace.</p> <p>This is the default build configuration.</p><p>In the debug mode, the debug level is Maximum (-g3) and optimization level is None (-O0).</p></li> 
-   <li>The <strong>Release</strong> build is used for the tested, release-ready version of the application. 
-         <p>The compiled binary file is stored in a <code>Release</code> folder 
-               under the project in the workspace.</p> 
-               <p>In the release mode, the debug level is Default (-g) and optimization level is Optimize most (-O3).</p> 
-               <p>The release mode build itself does not strip the debug symbol. 
-                       Stripping is done only in the packaging step for the ARM architecture.</p> 
-
-       
+<h1>Building Applications</h1>
+
+  <p>In the Tizen Studio, different build configurations are available for different development steps:</p>
+  <ul>
+   <li>The <strong>Debug</strong> build is used to debug and test the application. <p>The binary, data, and debug files are stored in a <code>Debug</code> folder under the project in the workspace.</p> <p>This is the default build configuration.</p><p>In the debug mode, the debug level is Maximum (-g3) and optimization level is None (-O0).</p></li>
+   <li>The <strong>Release</strong> build is used for the tested, release-ready version of the application.
+         <p>The compiled binary file is stored in a <code>Release</code> folder
+               under the project in the workspace.</p>
+               <p>In the release mode, the debug level is Default (-g) and optimization level is Optimize most (-O3).</p>
+               <p>The release mode build itself does not strip the debug symbol.
+                       Stripping is done only in the packaging step for the ARM architecture.</p>
+
+
            <div class="note">
         <strong>Note</strong>
                The Tizen Studio automatically switches application logging off in the release mode. To enable logging in the release mode:
-        <ol> 
-         <li>In the Tizen Studio menu, select <code>Project &gt; Properties</code>.</li> 
-         <li>In the <code>Properties</code> window, go to <code>C/C++Build &gt; Settings &gt; C Complier &gt; Debugging</code>.</li> 
-         <li>Select the <code>Enable application logging</code> check box.</li> 
+        <ol>
+         <li>In the Tizen Studio menu, select <code>Project &gt; Properties</code>.</li>
+         <li>In the <code>Properties</code> window, go to <code>C/C++Build &gt; Settings &gt; C Complier &gt; Debugging</code>.</li>
+         <li>Select the <code>Enable application logging</code> check box.</li>
         </ol>
-    </div></li> 
+    </div></li>
   </ul>
 
 <p>To set the target architecture:</p>
-        <ol> 
-         <li>In the Tizen Studio menu, select <strong>Project &gt; Properties</strong>.</li> 
-         <li>In the <strong>Properties</strong> window, go to <strong>C/C++Build &gt; Tizen Settings &gt; Platform</strong>.</li> 
-         <li>From the <strong>Architecture</strong> drop-down list, select the appropriate architecture.</li> 
+        <ol>
+         <li>In the Tizen Studio menu, select <strong>Project &gt; Properties</strong>.</li>
+         <li>In the <strong>Properties</strong> window, go to <strong>C/C++Build &gt; Tizen Settings &gt; Platform</strong>.</li>
+         <li>From the <strong>Architecture</strong> drop-down list, select the appropriate architecture.</li>
         </ol>
-  
-  <h2 id="build" name="build">Building the Application in the Tizen Studio</h2> 
-  <p>To create an application project build:</p> 
-  <ol> 
-   <li><p>Select the build configuration: </p> 
-    <ol type="a"> 
-     <li><p>Right-click the project in the Tizen Studio <strong>Project Explorer</strong> view.</p></li> 
-     <li><p>Select <strong>Build Configurations &gt; Set Active</strong>, and select the build configuration you need.</p></li> 
-    </ol> </li> 
-   <li><p>Build the project:</p> 
-    <ul> 
-     <li>Automatic build <p>If you select <strong>Project &gt; Build Automatically</strong> in the Tizen Studio menu, whenever you make any change to a source or resource and save the project, the Tizen Studio automatically recognizes the change and rebuilds the changed source on your project.</p></li> 
-     <li>Manual build <p>Build the application binaries for executing the code:</p> 
-      <ol type="a"> 
-       <li><p>Select the project in the <strong>Project Explorer</strong> view.</p></li> 
-       <li><p>In the Tizen Studio menu, select <strong>Project &gt; Build Project</strong>. </p></li> 
-      </ol> </li> 
-    </ul> </li> 
-   <li><p>Check your application project source code for any 
-API or privilege violations, which are displayed in the <strong>Problems</strong> view.</p> </li> 
-  </ol> 
-
-
-
-  <h2 name="prop" id="prop">Build Properties</h2> 
-  <p>To build project, you can choose many options. For example, optimization level, debugging support, or include path and library link options.</p> 
-  <p>To set the build properties:</p> 
-  <ol> 
-   <li>In the Tizen Studio menu, select <strong>Project &gt; Properties</strong>.</li> 
-   <li>In the <strong>Properties</strong> window, go to <strong>C/C++ Build &gt; Tizen Settings</strong>.</li> 
+
+  <h2 id="build" name="build">Building the Application in the Tizen Studio</h2>
+  <p>To create an application project build:</p>
+  <ol>
+   <li><p>Select the build configuration: </p>
+    <ol type="a">
+     <li><p>Right-click the project in the Tizen Studio <strong>Project Explorer</strong> view.</p></li>
+     <li><p>Select <strong>Build Configurations &gt; Set Active</strong>, and select the build configuration you need.</p></li>
+    </ol> </li>
+   <li><p>Build the project:</p>
+    <ul>
+     <li>Automatic build <p>If you select <strong>Project &gt; Build Automatically</strong> in the Tizen Studio menu, whenever you make any change to a source or resource and save the project, the Tizen Studio automatically recognizes the change and rebuilds the changed source on your project.</p></li>
+     <li>Manual build <p>Build the application binaries for executing the code:</p>
+      <ol type="a">
+       <li><p>Select the project in the <strong>Project Explorer</strong> view.</p></li>
+       <li><p>In the Tizen Studio menu, select <strong>Project &gt; Build Project</strong>. </p></li>
+      </ol> </li>
+    </ul> </li>
+   <li><p>Check your application project source code for any
+API or privilege violations, which are displayed in the <strong>Problems</strong> view.</p> </li>
+  </ol>
+
+
+
+  <h2 name="prop" id="prop">Build Properties</h2>
+  <p>To build project, you can choose many options. For example, optimization level, debugging support, or include path and library link options.</p>
+  <p>To set the build properties:</p>
+  <ol>
+   <li>In the Tizen Studio menu, select <strong>Project &gt; Properties</strong>.</li>
+   <li>In the <strong>Properties</strong> window, go to <strong>C/C++ Build &gt; Tizen Settings</strong>.</li>
    <li>On the <strong>Platform</strong> tab, set the detailed target and tool information.
-    <ul> 
+    <ul>
      <li>Rootstrap Informations
         <p>Shows the rootstrap-related information:</p>
                <ul>
@@ -100,7 +100,7 @@ API or privilege violations, which are displayed in the <strong>Problems</strong
                <p>Set the platform version.</p></li>
                <li>Architecture
                <p>Set the target architecture.</p>
-               <p>To run the application on the x86 emulator, select <strong>X86</strong>. 
+               <p>To run the application on the x86 emulator, select <strong>X86</strong>.
 
                        </p></li>
                <li>Name
@@ -112,58 +112,58 @@ API or privilege violations, which are displayed in the <strong>Problems</strong
                <li>Platform
         <p>Set the compiler toolchain used to build the application.</p></li>
     </ul> </li> </ul></li>
-   <li>On the <strong>Framework</strong> tab, set the detailed customization of the Tizen framework: 
-    <ul> 
-     <li>Framework <p>Search a framework by name filtering and select the frameworks.</p></li> 
-     <li>Selected Framework <p>Shows the all selected frameworks.</p></li> 
-     <li>Description <p>Shows the description of the selected framework.</p></li> 
-    </ul> </li> 
-
-   <li>In the <strong>Properties</strong> window, go to <strong>C/C++ Build &gt; Settings &gt; Tool Settings</strong>.<p>This tab includes a build toolchain on left tree view. A toolchain has 3 main items:</p> 
-    <ul> 
-     <li>Compiler</li> 
-     <li>Linker</li> 
-     <li>Assembler</li> 
+   <li>On the <strong>Framework</strong> tab, set the detailed customization of the Tizen framework:
+    <ul>
+     <li>Framework <p>Search a framework by name filtering and select the frameworks.</p></li>
+     <li>Selected Framework <p>Shows the all selected frameworks.</p></li>
+     <li>Description <p>Shows the description of the selected framework.</p></li>
+    </ul> </li>
+
+   <li>In the <strong>Properties</strong> window, go to <strong>C/C++ Build &gt; Settings &gt; Tool Settings</strong>.<p>This tab includes a build toolchain on left tree view. A toolchain has 3 main items:</p>
+    <ul>
+     <li>Compiler</li>
+     <li>Linker</li>
+     <li>Assembler</li>
     </ul> <p>Each tool is configured by selecting its sub-items.</p>
-    <ul> 
-     <li>C++ Compiler <p>Shows the compiler binary name and summarizes compile options</p> 
-      <ul> 
-       <li>Preprocessor <p>Set the preprocessor option</p> </li> 
-       <li>Includes <p>Set the include path or files</p> </li> 
-       <li>Optimization <p>Set optimization options</p> </li> 
-       <li>Debugging <p>Set debugging options </p> 
-               
+    <ul>
+     <li>C++ Compiler <p>Shows the compiler binary name and summarizes compile options</p>
+      <ul>
+       <li>Preprocessor <p>Set the preprocessor option</p> </li>
+       <li>Includes <p>Set the include path or files</p> </li>
+       <li>Optimization <p>Set optimization options</p> </li>
+       <li>Debugging <p>Set debugging options </p>
+
                    <div class="note">
         <strong>Note</strong>
         The <strong>Enable Application logging</strong> option is enabled for the <strong>Debug</strong> build configuration. The option is disabled in the <strong>Release</strong> configuration.
     </div>
-               
-               </li> 
-       <li>Warnings <p>Set warning options</p> </li> 
-       <li>Miscellaneous <p>Set miscellaneous options</p> </li> 
-      </ul></li> 
-     <li>C Compiler <p>Shows the compiler binary name and summarizes compile options</p> 
-      <ul> 
-       <li>Preprocessor <p>Set the preprocessor option</p> </li> 
-       <li>Symbols <p>Define or undefine the symbols used in the compilation</p> </li> 
-       <li>Includes <p>Set the include path or files</p> </li> 
-       <li>Optimization <p>Set optimization options</p> </li> 
-       <li>Debugging <p>Set debugging options</p> </li> 
-       <li>Warnings <p>Set warning options</p> </li> 
-       <li>Miscellaneous <p>Set miscellaneous options</p> </li> 
-      </ul></li> 
-     <li>C++ Linker <p>Shows the linker binary name and summarizes link options</p> 
-      <ul> 
-       <li>General <p>Set general options</p> </li> 
-       <li>Libraries <p>Set the library and library paths</p> </li> 
-       <li>Miscellaneous <p>Set miscellaneous linker options</p> </li> 
-       <li>Shared Library Settings <p>Set options for shared library linking</p> </li> 
-      </ul></li> 
-     <li>Assembler <p>Shows the assembler binary name and summarizes assembling options</p> </li> 
-    </ul></li> 
-  </ol> 
-  <p>For more information about build configuration, see the CDT guide.</p> 
-    
+
+               </li>
+       <li>Warnings <p>Set warning options</p> </li>
+       <li>Miscellaneous <p>Set miscellaneous options</p> </li>
+      </ul></li>
+     <li>C Compiler <p>Shows the compiler binary name and summarizes compile options</p>
+      <ul>
+       <li>Preprocessor <p>Set the preprocessor option</p> </li>
+       <li>Symbols <p>Define or undefine the symbols used in the compilation</p> </li>
+       <li>Includes <p>Set the include path or files</p> </li>
+       <li>Optimization <p>Set optimization options</p> </li>
+       <li>Debugging <p>Set debugging options</p> </li>
+       <li>Warnings <p>Set warning options</p> </li>
+       <li>Miscellaneous <p>Set miscellaneous options</p> </li>
+      </ul></li>
+     <li>C++ Linker <p>Shows the linker binary name and summarizes link options</p>
+      <ul>
+       <li>General <p>Set general options</p> </li>
+       <li>Libraries <p>Set the library and library paths</p> </li>
+       <li>Miscellaneous <p>Set miscellaneous linker options</p> </li>
+       <li>Shared Library Settings <p>Set options for shared library linking</p> </li>
+      </ul></li>
+     <li>Assembler <p>Shows the assembler binary name and summarizes assembling options</p> </li>
+    </ul></li>
+  </ol>
+  <p>For more information about build configuration, see the CDT guide.</p>
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/process/creating_app_project_n.htm b/org.tizen.training/html/native/process/creating_app_project_n.htm
index e76ca29..66f31ad 100644 (file)
--- a/org.tizen.training/html/native/process/creating_app_project_n.htm
+++ b/org.tizen.training/html/native/process/creating_app_project_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating the Application Project</title>  
+       <title>Creating the Application Project</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
@@ -22,20 +22,20 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
 
 
-<h1>Creating the Application Project</h1> 
 
-  <p>You can create a native application project by selecting from a variety of templates and samples. The following instructions are specific for creating the project with a template.</p> 
-  <p>To create a native application project:</p> 
-  <ol> 
-   <li>In the Tizen Studio, select <strong>File &gt; New &gt; Tizen Project</strong>. 
+<h1>Creating the Application Project</h1>
+
+  <p>You can create a native application project by selecting from a variety of templates and samples. The following instructions are specific for creating the project with a template.</p>
+  <p>To create a native application project:</p>
+  <ol>
+   <li>In the Tizen Studio, select <strong>File &gt; New &gt; Tizen Project</strong>.
    <p align="center"><img alt="Creating a new project" src="../../images/create_project_1_n.png" /></p>
-   <p>The Project Wizard opens.</p></li> 
+   <p>The Project Wizard opens.</p></li>
    <li>In the Project Wizard, define the project details.
    <p>The Project Wizard is used to create the basic application skeleton with the required folder structure and mandatory files. You can easily create different applications by selecting an applicable template or sample for the Project Wizard to use.</p>
-    <ol type="a"> 
+    <ol type="a">
        <li><p>Select the <strong>Template</strong> project type and click <strong>Next</strong>.</p>
 <p align="center"><img alt="Selecting the project type" src="../../images/create_project_wizard_type.png" /></p>
 </li>
@@ -50,7 +50,7 @@
 </li>
 <li><p>Define the project properties and click <strong>Finish</strong>.</p>
 <p>You can fill the project name. You can also select the location and working sets by clicking <strong>More properties</strong>.</p>
-         
+
              <div class="note">
         <strong>Note</strong>
         The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-zA-Z][a-zA-Z0-9-]{2,49}.
@@ -59,10 +59,10 @@
 
 <p>The Project Wizard sets up the project, creates the application files using the default content from the template, and closes. For more information about the Project Wizard and the available templates, see <a href="../../../../org.tizen.studio/html/native_tools/project_wizard_n.htm">Creating Tizen Projects with Tizen Project Wizard</a>.</p></li>
   </ol> </li></ol>
-  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio, with default content in the <code>tizen-manifest.xml</code> file as well as in several project folders.</p> 
- 
-  <h2 id="import" name="import">Importing a Project</h2> 
-  <p>If you have an existing Tizen application project, you can import it into the Tizen Studio:</p> 
+  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio, with default content in the <code>tizen-manifest.xml</code> file as well as in several project folders.</p>
+
+  <h2 id="import" name="import">Importing a Project</h2>
+  <p>If you have an existing Tizen application project, you can import it into the Tizen Studio:</p>
   <ol>
     <li>In the Tizen Studio menu, go to <strong>File &gt; Import &gt; Tizen &gt; Tizen Project</strong>, and click <strong>Next</strong>.</li>
     <li>Select the location of the root directory or archive file of the Tizen project and click <strong>Next</strong>.</li>
@@ -70,7 +70,7 @@
     <li>Click <strong>Finish</strong>.</li>
   </ol>
   <p>The project appears in the <strong>Project Explorer</strong> view.</p>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/process/debugging_app_n.htm b/org.tizen.training/html/native/process/debugging_app_n.htm
index bd3419c..dff10a3 100644 (file)
--- a/org.tizen.training/html/native/process/debugging_app_n.htm
+++ b/org.tizen.training/html/native/process/debugging_app_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Debugging Applications</title>  
+       <title>Debugging Applications</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -33,88 +33,88 @@
                        <li><a href="#emulator">Debugging Applications on the Emulator</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Debugging Applications</h1> 
-  <p>Debugging your application enables you to understand its flow of control. With the Tizen Studio, you can use various <a href="#methods">application debugging methods</a>. However, remember that the best way to debug an application is to not make bugs in the first place, so learn how to <a href="#logs">prevent bugs by using logs</a>.</p> 
-  <p>The debugging environment uses <a href="http://www.gnu.org/software/gdb/gdb.html" target="_blank">GDB</a> (GNU Debugger) for debugging with the emulator and a target device. GDB can debug both locally and <a href="#remote">remotely</a>. To ease the debugging process, you can set <a href="#break">break points</a>, step in, step out, and step over break points, and watch variables to track the changes in their values in the <strong>Debug</strong> view.</p> 
-  <p>Debugging native applications with Tizen Studio is same as with Eclipse CDT. For more information, see <a href="http://help.eclipse.org/luna/index.jsp?topic=%2Forg.eclipse.cdt.doc.user%2Ftasks%2Fcdt_o_debug.htm" target="blank">Debugging in Eclipse</a>.</p> 
-  <h2 id="debug" name="debug">Debug View</h2> 
-  <p>The <strong>Debug</strong> view provides debug control buttons that help you to track source code easily.</p> 
-
-  <p>You can control debug execution in various ways. After a break point suspends the program execution, you can step through your program or suspend the program by force. To control the execution, use the following control buttons in the <strong>Debug</strong> view.</p> 
+  <h1>Debugging Applications</h1>
+  <p>Debugging your application enables you to understand its flow of control. With the Tizen Studio, you can use various <a href="#methods">application debugging methods</a>. However, remember that the best way to debug an application is to not make bugs in the first place, so learn how to <a href="#logs">prevent bugs by using logs</a>.</p>
+  <p>The debugging environment uses <a href="http://www.gnu.org/software/gdb/gdb.html" target="_blank">GDB</a> (GNU Debugger) for debugging with the emulator and a target device. GDB can debug both locally and <a href="#remote">remotely</a>. To ease the debugging process, you can set <a href="#break">break points</a>, step in, step out, and step over break points, and watch variables to track the changes in their values in the <strong>Debug</strong> view.</p>
+  <p>Debugging native applications with Tizen Studio is same as with Eclipse CDT. For more information, see <a href="http://help.eclipse.org/luna/index.jsp?topic=%2Forg.eclipse.cdt.doc.user%2Ftasks%2Fcdt_o_debug.htm" target="blank">Debugging in Eclipse</a>.</p>
+  <h2 id="debug" name="debug">Debug View</h2>
+  <p>The <strong>Debug</strong> view provides debug control buttons that help you to track source code easily.</p>
+
+  <p>You can control debug execution in various ways. After a break point suspends the program execution, you can step through your program or suspend the program by force. To control the execution, use the following control buttons in the <strong>Debug</strong> view.</p>
   <p align="center" class="Table"><strong>Table: Debug view control buttons</strong></p>
-   <table> 
-   <tbody> 
-    <tr> 
-     <th>Button</th> 
-     <th>Keyboard shortcut</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><img alt="Resume" src="../../images/debug_view_resume.png" /></td> 
-     <td>F8</td> 
-     <td>Resumes a suspended thread.</td> 
-    </tr> 
-    <tr> 
-     <td><img alt="Step Into" src="../../images/debug_view_stepinto.png" /></td> 
-     <td>F5</td> 
-     <td>Steps into the highlighted statement. <p>Executes the current line, and if the line contains a method, steps into the method.</p></td> 
-    </tr> 
-    <tr> 
-     <td><img alt="Step Over" src="../../images/debug_view_stepover.png" /></td> 
-     <td>F6</td> 
-     <td>Steps over the highlighted statement. <p>Executes the current line, and if the line contains a method, executes the method without entering it.</p></td> 
-    </tr> 
-    <tr> 
-     <td><img alt="Step Return" src="../../images/debug_view_stepreturn.png" /></td> 
-     <td>F7</td> 
-     <td>Step out of the current method.</td> 
-    </tr> 
-    <tr> 
-     <td><img alt="Suspend" src="../../images/debug_view_suspend.png" /></td> 
-     <td>-</td> 
-     <td>Suspends the selected thread.</td> 
-    </tr> 
-    <tr> 
-     <td><img alt="Terminate" src="../../images/debug_view_terminate.png" /></td> 
-     <td>Ctrl + F2</td> 
-     <td>Terminates the selected debug target.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-  
-  <h2 name="methods" id="methods">Application Debugging Methods</h2> 
-  <p>You can apply the normal or attached method for debugging a Tizen application.</p> 
-
-  <h3 id="basic" name="basic">Normal Debugging</h3> 
-  <p>The normal debugging method is used to debug from start to finish an executable Tizen application, which can be run as a standalone. To debug the application:</p> 
-  <ol> 
-   <li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Native Application</strong>.</p> <p>Debugging starts.</p> </li> 
-   <li><p>To stop the program execution, select <strong>Run &gt; Suspend</strong> in the Tizen Studio menu. The program can be stopped also by a break point you have set before debugging.</p> </li> 
-  </ol> 
-  <p>You can debug the source code by, for example, checking variables, registers, and memory. You can also use the <strong>Step Over</strong>, <strong>Step In</strong>, and <strong>Resume</strong> buttons in the <strong>Debug</strong> view for step-by-step debugging actions.</p> 
-  
-  <h3 id="attach" name="attach">Attached Debugging</h3> 
-  <p>The attached debugging method is effective for debugging Tizen applications that have no external interaction with the UI, such as middle-ware and libraries. This method attaches the &quot;GDB&quot; debugger to an application which is running in a target.</p> 
-  <p>If the Tizen Studio workspace has a project that contains the source code of the application currently running on the target, you can apply &quot;attach debugging&quot; at a source level.</p> 
+   <table>
+   <tbody>
+    <tr>
+     <th>Button</th>
+     <th>Keyboard shortcut</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><img alt="Resume" src="../../images/debug_view_resume.png" /></td>
+     <td>F8</td>
+     <td>Resumes a suspended thread.</td>
+    </tr>
+    <tr>
+     <td><img alt="Step Into" src="../../images/debug_view_stepinto.png" /></td>
+     <td>F5</td>
+     <td>Steps into the highlighted statement. <p>Executes the current line, and if the line contains a method, steps into the method.</p></td>
+    </tr>
+    <tr>
+     <td><img alt="Step Over" src="../../images/debug_view_stepover.png" /></td>
+     <td>F6</td>
+     <td>Steps over the highlighted statement. <p>Executes the current line, and if the line contains a method, executes the method without entering it.</p></td>
+    </tr>
+    <tr>
+     <td><img alt="Step Return" src="../../images/debug_view_stepreturn.png" /></td>
+     <td>F7</td>
+     <td>Step out of the current method.</td>
+    </tr>
+    <tr>
+     <td><img alt="Suspend" src="../../images/debug_view_suspend.png" /></td>
+     <td>-</td>
+     <td>Suspends the selected thread.</td>
+    </tr>
+    <tr>
+     <td><img alt="Terminate" src="../../images/debug_view_terminate.png" /></td>
+     <td>Ctrl + F2</td>
+     <td>Terminates the selected debug target.</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <h2 name="methods" id="methods">Application Debugging Methods</h2>
+  <p>You can apply the normal or attached method for debugging a Tizen application.</p>
+
+  <h3 id="basic" name="basic">Normal Debugging</h3>
+  <p>The normal debugging method is used to debug from start to finish an executable Tizen application, which can be run as a standalone. To debug the application:</p>
+  <ol>
+   <li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Native Application</strong>.</p> <p>Debugging starts.</p> </li>
+   <li><p>To stop the program execution, select <strong>Run &gt; Suspend</strong> in the Tizen Studio menu. The program can be stopped also by a break point you have set before debugging.</p> </li>
+  </ol>
+  <p>You can debug the source code by, for example, checking variables, registers, and memory. You can also use the <strong>Step Over</strong>, <strong>Step In</strong>, and <strong>Resume</strong> buttons in the <strong>Debug</strong> view for step-by-step debugging actions.</p>
+
+  <h3 id="attach" name="attach">Attached Debugging</h3>
+  <p>The attached debugging method is effective for debugging Tizen applications that have no external interaction with the UI, such as middle-ware and libraries. This method attaches the "GDB" debugger to an application which is running in a target.</p>
+  <p>If the Tizen Studio workspace has a project that contains the source code of the application currently running on the target, you can apply "attach debugging" at a source level.</p>
   <p>To debug an application that is already running on the emulator or a device:</p>
   <ul>
    <li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Native Application - Attach</strong>.</p>
    <p>Note that the source code of the project must be related to the application that is running on the target.</p> </li>
    </ul>
 
- <h2 name="remote" id="remote">Remote Debugging</h2> 
-  <p>The Tizen Studio supports remote debugging. Remote debugging is used to debug the OS Kernel or a system which cannot support local debugging. Remote debugging requires a &quot;GDB client&quot; on the host side and a &quot;GDB server&quot; on the target side. Both sides must be connected by serial or TCP/IP communication.</p> 
-  <p align="center"><strong>Figure: Remote debugging</strong></p> 
-  <p align="center"><img alt="Remote debugging" src="../../images/remote_debug.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-  <h3 id="debug_remote" name="debug_remote">Remote Debugging Process</h3> 
-  <p>A cross remote debugging environment is used to support the armel architecture of the Tizen devices. This means that the &quot;cross GDB&quot; and &quot;GDB server&quot; are used instead of native GDB and GDB server. Tizen also supports native (i386) remote debugging for the i386 emulator.</p> 
-  <p>The Eclipse CDT based Tizen Studio supports the UI and control of the debugging process. The following figure shows the control flow of the remote debugging process.</p> 
-  <p align="center"><strong>Figure: Remote debugging control flow</strong></p> 
-  <p align="center"><img alt="Remote debugging control flow" src="../../images/remote_debug_sdk.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-  
+ <h2 name="remote" id="remote">Remote Debugging</h2>
+  <p>The Tizen Studio supports remote debugging. Remote debugging is used to debug the OS Kernel or a system which cannot support local debugging. Remote debugging requires a "GDB client" on the host side and a "GDB server" on the target side. Both sides must be connected by serial or TCP/IP communication.</p>
+  <p align="center"><strong>Figure: Remote debugging</strong></p>
+  <p align="center"><img alt="Remote debugging" src="../../images/remote_debug.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+  <h3 id="debug_remote" name="debug_remote">Remote Debugging Process</h3>
+  <p>A cross remote debugging environment is used to support the armel architecture of the Tizen devices. This means that the "cross GDB" and "GDB server" are used instead of native GDB and GDB server. Tizen also supports native (i386) remote debugging for the i386 emulator.</p>
+  <p>The Eclipse CDT based Tizen Studio supports the UI and control of the debugging process. The following figure shows the control flow of the remote debugging process.</p>
+  <p align="center"><strong>Figure: Remote debugging control flow</strong></p>
+  <p align="center"><img alt="Remote debugging control flow" src="../../images/remote_debug_sdk.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+
   <h2 name="logs" id="logs">Debugging with Logs</h2>
 
 <p>EFL provides a tool (<code>EINA_LOG</code>) for logging information. It has the following levels:</p>
@@ -144,7 +144,7 @@ export EINA_LOG_LEVEL=1
 ERR&lt;4268&gt;:ecore ecore.c:558 _ecore_magic_fail()
 *** ECORE ERROR: Ecore Magic Check Failed!!!
 *** IN FUNCTION: ecore_idler_del()
-ERR&lt;4268&gt;:ecore ecore.c:562 _ecore_magic_fail()&nbsp;&nbsp;&nbsp;Input handle has already been freed!
+ERR&lt;4268&gt;:ecore ecore.c:562 _ecore_magic_fail()   Input handle has already been freed!
 ERR&lt;4268&gt;:ecore ecore.c:571 _ecore_magic_fail() *** NAUGHTY PROGRAMMER!!!
 *** SPANK SPANK SPANK!!!
 *** Now go fix your code. Tut tut tut!
@@ -163,16 +163,16 @@ Ecore_Idler *myidler = ecore_idler_add(_idler_cb, data);
 static Eina_Bool
 _idler_cb(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;myidler = NULL;
+    myidler = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_CANCEL;
+    return ECORE_CALLBACK_CANCEL;
 }
 </pre>
 <p>Similarly, if you use the <code>ecore_idler_del()</code> function, add <code>myidler = NULL</code>:</p>
 <pre class="prettyprint">
 if (myidler) {
-&nbsp;&nbsp;&nbsp;&nbsp;ecore_idler_del(myidler);
-&nbsp;&nbsp;&nbsp;&nbsp;myidler = NULL;
+    ecore_idler_del(myidler);
+    myidler = NULL;
 }
 </pre></li></ol>
 
@@ -182,9 +182,9 @@ if (myidler) {
 ERR&lt;4266&gt;:ecore ecore.c:558 _ecore_magic_fail()
 *** ECORE ERROR: Ecore Magic Check Failed!!!
 *** IN FUNCTION: ecore_idler_del()
-ERR&lt;4266&gt;:ecore ecore.c:568 _ecore_magic_fail()&nbsp;&nbsp;&nbsp;Input handle is wrong type
-&nbsp;&nbsp;&nbsp;Expected: f7c614f3 - Ecore_Idler (Idler)
-&nbsp;&nbsp;&nbsp;Supplied: 71737723 - &lt;UNKNOWN&gt;
+ERR&lt;4266&gt;:ecore ecore.c:568 _ecore_magic_fail()   Input handle is wrong type
+   Expected: f7c614f3 - Ecore_Idler (Idler)
+   Supplied: 71737723 - &lt;UNKNOWN&gt;
 ERR&lt;4266&gt;:ecore ecore.c:571 _ecore_magic_fail() *** NAUGHTY PROGRAMMER!!!
 *** SPANK SPANK SPANK!!!
 *** Now go fix your code. Tut tut tut!
@@ -196,7 +196,7 @@ ERR&lt;4266&gt;:ecore ecore.c:571 _ecore_magic_fail() *** NAUGHTY PROGRAMMER!!!
 <p>The <code>elm_object_part_content_set()</code> function is often used as follows:</p>
 <pre class="prettyprint">
 btn = elm_button_add(win)
-elm_object_part_content_set(btn, &quot;hahaha&quot;, tmp);
+elm_object_part_content_set(btn, "hahaha", tmp);
 </pre>
 <p>The following log is shown when the <code>hahaha</code> swallow part does not exist:</p>
 <pre class="prettyprint">
@@ -222,107 +222,107 @@ ERR&lt;4639&gt;:evas_main lib/evas/canvas/evas_object_main.c:1313 _evas_object_c
 <pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;group
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;circular_dependency&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;part1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 127 0 0 127;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* FIXME: Circular Dependency !! */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;part2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;part2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;part2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 127 127;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* FIXME: Circular Dependency !! */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;part1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;part1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group
+   {
+      name: "circular_dependency";
+      parts
+      {
+         part
+         {
+            name: "bg";
+            type: RECT;
+            description
+            {
+               state: "default" 0.0;
+               color: 255 255 255 255;
+            }
+         }
+         part
+         {
+            name: "part1";
+            type: RECT;
+            description
+            {
+               state: "default" 0.0;
+               color: 127 0 0 127;
+               min: 100 100;
+               /* FIXME: Circular Dependency !! */
+               rel1.to: "part2";
+               rel2.to: "part2";
+            }
+         }
+         part
+         {
+            name: "part2";
+            type: RECT;
+            description
+            {
+               state: "default" 0.0;
+               color: 0 0 127 127;
+               min: 100 100;
+               /* FIXME: Circular Dependency !! */
+               rel1.to: "part1";
+               rel2.to: "part1";
+            }
+         }
+      }
+   }
 }
 </pre>
 
 <p>If you write the EDC code like above, part1 is calculated by part2 and part2 is calculated by part1. The following log is shown because a recursive calculation has happened:</p>
 
 <pre class="prettyprint">
-ERR&lt;4365&gt;:edje lib/edje/edje_calc.c:3144 _edje_part_recalc() Circular dependency when calculating part &quot;part1&quot;. Already calculating XY [03] axes. Need to calculate Y [02] axes
+ERR&lt;4365&gt;:edje lib/edje/edje_calc.c:3144 _edje_part_recalc() Circular dependency when calculating part "part1". Already calculating XY [03] axes. Need to calculate Y [02] axes
 </pre></li>
 
 <li><pre class="prettyprint">
 collections
 {
-&nbsp;&nbsp;&nbsp;group
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;fixed&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parts
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;bg&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 255 255 255 255;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;part1&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 127 0 0 127;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 100 100;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* FIXME: Ambiguous Size Setting */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel1.to: &quot;part2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel2.to: &quot;part2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;part
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: &quot;part2&quot;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: RECT;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state: &quot;default&quot; 0.0;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: 0 0 127 127;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min: 50 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max: 50 50;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fixed: 1 1;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;}
+   group
+   {
+      name: "fixed";
+      parts
+      {
+         part
+         {
+            name: "bg";
+            type: RECT;
+            description
+            {
+               state: "default" 0.0;
+               color: 255 255 255 255;
+            }
+         }
+         part
+         {
+            name: "part1";
+            type: RECT;
+            description
+            {
+               state: "default" 0.0;
+               color: 127 0 0 127;
+               min: 100 100;
+               /* FIXME: Ambiguous Size Setting */
+               rel1.to: "part2";
+               rel2.to: "part2";
+            }
+         }
+         part
+         {
+            name: "part2";
+            type: RECT;
+            description
+            {
+               state: "default" 0.0;
+               color: 0 0 127 127;
+               min: 50 50;
+               max: 50 50;
+               fixed: 1 1;
+            }
+         }
+      }
+   }
 }
 </pre>
 
@@ -332,15 +332,15 @@ collections
 ERR&lt;4357&gt;:edje lib/edje/edje_util.c:3069 _edje_object_size_min_restricted_calc() file, group fixed has a non-fixed part 'part1'. Adding 'fixed: 1 1;' to source EDC may help. Continuing discarding faulty part.
 </pre></li></ul>
 
-<h2 name="break" id="break">Break Points</h2> 
-  <p>A break point suspends the execution of a program at the location where the break point is set.</p> 
-  <p>To set or unset a break point, right-click in the marker bar area on the left side of the editor, and select <strong>Toggle Breakpoint</strong>.</p> 
+<h2 name="break" id="break">Break Points</h2>
+  <p>A break point suspends the execution of a program at the location where the break point is set.</p>
+  <p>To set or unset a break point, right-click in the marker bar area on the left side of the editor, and select <strong>Toggle Breakpoint</strong>.</p>
 
-  <p>You can view and manage the existing break points in the <strong>Breakpoints</strong> view:</p> 
-  <ul> 
-   <li>To remove a break point, right-click it and select <strong>Remove</strong>. <p>When you remove a break point, the corresponding icon is removed from the marker bar are in the editor too.</p> </li> 
-   <li>To enable or disable a break point, toggle the check box of the break point, or right-click the break point and select <strong>Enable</strong> or <strong>Disable</strong>. <p>This allows you to temporarily disable a break point without losing the information it contains.</p> </li> 
-  </ul> 
+  <p>You can view and manage the existing break points in the <strong>Breakpoints</strong> view:</p>
+  <ul>
+   <li>To remove a break point, right-click it and select <strong>Remove</strong>. <p>When you remove a break point, the corresponding icon is removed from the marker bar are in the editor too.</p> </li>
+   <li>To enable or disable a break point, toggle the check box of the break point, or right-click the break point and select <strong>Enable</strong> or <strong>Disable</strong>. <p>This allows you to temporarily disable a break point without losing the information it contains.</p> </li>
+  </ul>
 
   <h3 id="properties" name="properties">Break Point Properties</h3>
   <p>You can set break point properties for actions that are executed along with the break point code.</p>
@@ -354,9 +354,9 @@ ERR&lt;4357&gt;:edje lib/edje/edje_util.c:3069 _edje_object_size_min_restricted_
      <li>Log Action <p>You can see log messages in the <strong>Console</strong> view.</p> </li>
      <li>Resume Action <p>The program execution continues after a specified time.</p> </li>
      <li>External Tool Action <p>You can make your own action.</p> </li>
-    </ul> 
+    </ul>
        Click <strong>Attach</strong> after setting the action attributes.</li>
-   <li>To define common properties where the break point stops, select <strong>Common</strong> in the left side menu. 
+   <li>To define common properties where the break point stops, select <strong>Common</strong> in the left side menu.
    <p>For example, you can specify a condition using an expression. The break point stops the execution only if the condition is matched. The <strong>Ignore count</strong> field defines the count where the break point stops.</p></li>
   </ol>
 
@@ -371,58 +371,58 @@ ERR&lt;4357&gt;:edje lib/edje/edje_util.c:3069 _edje_object_size_min_restricted_
   <p align="center"><img alt="Watch point details" src="../../images/watchpoint_setting.png" /></p>
   <p>The added watch points are displayed in the <strong>Breakpoints</strong> view.</p>
   <p>To execute watch points, set the read/write access of the expression you want to watch. When running the application, the program breaks when the address of the expression is valid.</p>
-       
-       <h3 name="expressions" id="expressions">Expressions View</h3> 
-  <p>The <strong>Expressions</strong> view allows you to evaluate the data related to expressions.</p> 
-  <p>The <strong>Expressions</strong> view can be used in the following ways:</p> 
-  <ul> 
-   <li>In the <strong>Expressions</strong> view: 
-    <ol> 
-     <li>Right-click and select <strong>Add Watch Expression</strong>.</li> 
-     <li>Type the expression that you want to evaluate.</li> 
-    </ol></li> 
-   <li>In the <strong>Variables</strong> view: 
-    <ol> 
-     <li>Select the variable to watch.</li> 
-     <li>Drag and drop it into the <strong>Expressions</strong> view.</li> 
-    </ol></li> 
-  </ul> 
-  <p align="center"><strong>Figure: Expressions view</strong></p> 
- <p align="center"><img alt="Expressions view" src="../../images/expressions.png" /></p> 
-  
-  <h2 name="emulator" id="emulator">Debugging Applications on the Emulator</h2> 
-  <p>You can debug Tizen native applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
-  <p>To debug your application on the emulator:</p> 
-  <ol> 
-   <li>Start the emulator in the <strong>Connections</strong> view.</li> 
-   <li><p>Start the debugging by doing one of the following:</p> 
-    <ul> 
-     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Native Application</strong>.</li> 
-     <li>In the Tizen Studio menu, go to <strong>Run &gt; Debug As &gt; Tizen Native Application</strong>.</li> 
-     <li>On the Tizen Studio toolbar, click <strong>Debug</strong>.</li> 
-    </ul> <p>If the application binary does not exist, it is built automatically for the emulator.</p> <p>If many active emulator instances are connected, select the emulator to run the application from the dialog box.</p></li> 
-   <li><p>The debug messages are displayed in the Tizen Studio <strong>Console</strong> view. To see the GDB console, in the <strong>Console</strong> view, click the <strong>Display Selected Console</strong> button and select the option containing <strong>gdb</strong>. With the GDB console, you can also execute GDB commands.</p> <p>To display verbose GDB output in the GDB console:</p> 
+
+       <h3 name="expressions" id="expressions">Expressions View</h3>
+  <p>The <strong>Expressions</strong> view allows you to evaluate the data related to expressions.</p>
+  <p>The <strong>Expressions</strong> view can be used in the following ways:</p>
+  <ul>
+   <li>In the <strong>Expressions</strong> view:
+    <ol>
+     <li>Right-click and select <strong>Add Watch Expression</strong>.</li>
+     <li>Type the expression that you want to evaluate.</li>
+    </ol></li>
+   <li>In the <strong>Variables</strong> view:
+    <ol>
+     <li>Select the variable to watch.</li>
+     <li>Drag and drop it into the <strong>Expressions</strong> view.</li>
+    </ol></li>
+  </ul>
+  <p align="center"><strong>Figure: Expressions view</strong></p>
+ <p align="center"><img alt="Expressions view" src="../../images/expressions.png" /></p>
+
+  <h2 name="emulator" id="emulator">Debugging Applications on the Emulator</h2>
+  <p>You can debug Tizen native applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p>
+  <p>To debug your application on the emulator:</p>
+  <ol>
+   <li>Start the emulator in the <strong>Connections</strong> view.</li>
+   <li><p>Start the debugging by doing one of the following:</p>
+    <ul>
+     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Native Application</strong>.</li>
+     <li>In the Tizen Studio menu, go to <strong>Run &gt; Debug As &gt; Tizen Native Application</strong>.</li>
+     <li>On the Tizen Studio toolbar, click <strong>Debug</strong>.</li>
+    </ul> <p>If the application binary does not exist, it is built automatically for the emulator.</p> <p>If many active emulator instances are connected, select the emulator to run the application from the dialog box.</p></li>
+   <li><p>The debug messages are displayed in the Tizen Studio <strong>Console</strong> view. To see the GDB console, in the <strong>Console</strong> view, click the <strong>Display Selected Console</strong> button and select the option containing <strong>gdb</strong>. With the GDB console, you can also execute GDB commands.</p> <p>To display verbose GDB output in the GDB console:</p>
     <ul>
      <li>Right-click the <strong>Project Explorer</strong> view and select <strong>Debug As &gt; Debug Configurations</strong>.</li>
     <li>On the <strong>Remote</strong> tab, select the <strong>Show verbose messages in console</strong> check box.</li>
     <li>Click <strong>Debug</strong>.</li>
     </ul> </li>
 
-   <li><p>Use the application in the emulator as you would in a target device.</p> 
+   <li><p>Use the application in the emulator as you would in a target device.</p>
        <p>While the application is running, the Tizen Studio <a href="../../../../org.tizen.studio/html/common_tools/log_view.htm">Log view</a> shows the log, debug, and exception messages from the methods defined in the log macros.</p> </li>
-       
-   <li><p>To stop debugging, do one of the following:</p> 
-    <ul> 
-     <li>In the Tizen Studio, in the <strong>Console</strong> or <strong>Debug</strong> view, click the <strong>Terminate</strong> button. If the application execution is not suspended before you click the <strong>Terminate</strong> button, touch an arbitrary control on the screen or press a hard key on the emulator after clicking <strong>Terminate</strong>.</li> 
-     <li>On the emulator, press the <strong>End</strong> key.</li> 
-    </ul></li> 
-  </ol> 
-  <p>After debugging, run your application again to check its functionality and to ensure that the bugs detected during the debugging process are fixed. </p> 
-  <p>In the emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the 
-       <a href="../../../../org.tizen.studio/html/common_tools/emulator_control_panel.htm">Emulator Control Panel</a> to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.</p> 
-  
-  
-       
+
+   <li><p>To stop debugging, do one of the following:</p>
+    <ul>
+     <li>In the Tizen Studio, in the <strong>Console</strong> or <strong>Debug</strong> view, click the <strong>Terminate</strong> button. If the application execution is not suspended before you click the <strong>Terminate</strong> button, touch an arbitrary control on the screen or press a hard key on the emulator after clicking <strong>Terminate</strong>.</li>
+     <li>On the emulator, press the <strong>End</strong> key.</li>
+    </ul></li>
+  </ol>
+  <p>After debugging, run your application again to check its functionality and to ensure that the bugs detected during the debugging process are fixed. </p>
+  <p>In the emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the
+       <a href="../../../../org.tizen.studio/html/common_tools/emulator_control_panel.htm">Emulator Control Panel</a> to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.</p>
+
+
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/process/performance_n.htm b/org.tizen.training/html/native/process/performance_n.htm
index 33b897b..de74bbe 100644 (file)
--- a/org.tizen.training/html/native/process/performance_n.htm
+++ b/org.tizen.training/html/native/process/performance_n.htm
@@ -11,7 +11,7 @@
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Optimizing Application Performance</title> 
+       <title>Optimizing Application Performance</title>
 </head>
 
  <body onload="prettyPrint()" style="overflow: auto;">
@@ -46,7 +46,7 @@
 <p>Most processors that are used today in mobile phones are based on multi-core technologies and so you must consider utilizing this hardware feature. To effectively utilize multi-core capabilities, you need to divide your code to run on several cores simultaneously. Traditionally, this is done by using <code>pthreads</code>, but this method has an overhead of initialization and termination of threads, and can generate potential runtime errors. Several solutions exist to exploit multi-core capabilities easily. These solutions abstract <code>pthreads</code>, allowing you to focus on the application development without worrying about thread level management.</p>
 <p>To improve the performance of an application:</p>
 
-<ol> 
+<ol>
    <li>Identify the bottlenecks which need to be optimized.</li>
    <li>Optimize the bottlenecks by code refactoring.</li>
    <li><a href="#measure_app_perf">Measure performance</a> to compare refactoring gains.</li>
@@ -70,7 +70,7 @@
 <p>A faster application can increase battery life. If your application is not as fast as expected, you can look at profiling data to identify bottlenecks. Fixing these bottlenecks increases the application speed with minimal effort.</p>
 <p>Some general tips to improve the performance of your application are:</p>
 
-<ul> 
+<ul>
    <li>Select the most appropriate algorithm and data structures.</li>
    <li>High-level optimization is important, because it can change the order of complexity. If your code includes <code>sort</code>, <code>search</code>, or <code>compare</code>, use optimal algorithms and data structures.</li>
    <li>Split a task, which contains both high and low priority jobs, to prevent low priority jobs delaying high priority jobs. Running high and low priority jobs in a single task causes delays.</li>
@@ -93,9 +93,9 @@
 <h3 id="running">Running Dynamic Analyzer</h3>
 <p>You can launch the Dynamic Analyzer in the Tizen Studio or as a standalone application from the Tizen Studio submenu.</p>
 
-<ul> 
+<ul>
    <li>To launch the Dynamic Analyzer in the Tizen Studio:
-               <ol> 
+               <ol>
                        <li>Right-click your project in the Tizen Studio <strong>Project Explorer</strong> view.</li>
                        <li>Select <strong>Profile As &gt; Profile with Dynamic Analyzer</strong>.
                        <p>The selected project is built, packaged, and installed on the target device. The Dynamic Analyzer is launched and the profiling starts automatically.</p>
@@ -103,7 +103,7 @@
                </ol>
    </li>
    <li>To run the Dynamic Analyzer as a standalone from the Tizen Studio submenu:
-               <ol> 
+               <ol>
                        <li>Launch the Dynamic Analyzer from the Tizen Studio <strong>Tools &gt; Dynamic Analyzer</strong> menu.</li>
                        <li>Select the target device and the application to be traced from the combo box in the Dynamic Analyzer toolbar.</li>
                        <li>Click the <strong>Start</strong> button.</li>
@@ -116,7 +116,7 @@
 <h4>Using the Command Line Interface to Access Dynamic Analyzer Features</h4>
 <p>The Dynamic Analyzer provides access to its features through the Command Line Interface (CLI) tool. This possibility can be useful, for example, in the following cases:</p>
 
-<ul> 
+<ul>
    <li>CLI tool can be used in testing and profiling automation scenarios.</li>
    <li>CLI tool can be used in GUI-less environments, and the collected profile data can be transferred into other environment where it can be further analyzed with the Dynamic Analyzer GUI.</li>
    <li>CLI tool can be used by people who do not like to use graphical user interfaces at all.</li>
@@ -145,7 +145,7 @@
 <p>You can use the Dynamic Analyzer to analyze application performance and identify bottlenecks. After identifying bottlenecks, you can modify the code to eliminate them. That increases application performance significantly, and extends the battery life of the device running the application.</p>
 <p>To analyze performance of the application with the Dynamic Analyzer, use the following features:</p>
 
-<ul> 
+<ul>
    <li>Function profiling
    <p>When analyzing application performance, execution time of each method is one of the most significant factors. You can improve the performance of an application by identifying unexpected bottleneck locations, and analyzing and optimizing the most commonly used methods in the Dynamic Analyzer.</p>
    <p>To detect and fix the methods consuming the most time:</p>
@@ -172,7 +172,7 @@
    <li>Thread load
    <p>If you use threads in your application code, you need to analyze the load of each thread during the application execution. The thread load feature helps to distribute the thread load. You can modify the code to optimize the thread load, while maintaining a single thread.</p>
    <p>The thread load is displayed in the <strong>Thread</strong> tab. The thread line displayed in blue indicates the thread load within a time frame. The darker the color, the higher the load.</p>
-   
+
        <p align="center"><strong>Figure: Thread load</strong></p>
        <p align="center"><img alt="Thread load" src="../../images/optimizingappper_threadload.png" /></p>
    </li>
@@ -185,215 +185,215 @@
 <p>Understanding the thread execution in multi-threaded applications can be challenging. The GDB (GNU Debugger) supports the process of debugging multi-threaded applications, but since it uses synchronization objects, the debugging can be quite difficult. The Dynamic Analyzer, on the other hand, provides effective thread analysis features. For more information, see <a href="../../../../org.tizen.studio/html/common_tools/da_thread.htm">Performing Thread Analysis</a>.</p>
 
 
-<h2 id="valgrind_analysis" name="valgrind_analysis">Valgrind Analysis</h2> 
-  <p>Valgrind helps you to detect memory errors or leaks in your application at runtime.</p> 
-  <p>The following instructions and examples help you to use Valgrind effectively:</p> 
-  <ul> 
-   <li><a href="#running_valgrind">Running Valgrind</a> <p>Describes how to launch Valgrind with your application.</p></li> 
-   <li><a href="#valgrind_result">Viewing Valgrind Result</a> <p>Describes the information of the result analyzed by Valgrind.</p></li> 
-  </ul> 
-
- <h3 id="running_valgrind" name="running_valgrind">Running Valgrind</h3> 
-   <p>To set the Valgrind options for your application:</p> 
-  <ol> 
-   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Profile As &gt; Profile Configurations</strong>.</li> 
-   <li>In the <strong>Profile Configurations</strong> window, right-click the <strong>Profile with Valgrind</strong> and select <strong>New</strong>.</li> 
-   <li>Select the created configuration.</li> 
-   <li>Go to the <strong>Memory Profile Options &gt; Collect data</strong> tab: <p>Select from 2 types of memory profiling settings:</p> 
-    <ul> 
-     <li>Memory error and memory leak checking <p>This option uses the <strong>Memcheck</strong> tool to profile your application.</p> </li> 
-     <li>Heap memory profiling <p>This option uses the <strong>Massif</strong> tool to profile your application. 
-       </p></li> 
-    </ul></li> 
+<h2 id="valgrind_analysis" name="valgrind_analysis">Valgrind Analysis</h2>
+  <p>Valgrind helps you to detect memory errors or leaks in your application at runtime.</p>
+  <p>The following instructions and examples help you to use Valgrind effectively:</p>
+  <ul>
+   <li><a href="#running_valgrind">Running Valgrind</a> <p>Describes how to launch Valgrind with your application.</p></li>
+   <li><a href="#valgrind_result">Viewing Valgrind Result</a> <p>Describes the information of the result analyzed by Valgrind.</p></li>
+  </ul>
+
+ <h3 id="running_valgrind" name="running_valgrind">Running Valgrind</h3>
+   <p>To set the Valgrind options for your application:</p>
+  <ol>
+   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Profile As &gt; Profile Configurations</strong>.</li>
+   <li>In the <strong>Profile Configurations</strong> window, right-click the <strong>Profile with Valgrind</strong> and select <strong>New</strong>.</li>
+   <li>Select the created configuration.</li>
+   <li>Go to the <strong>Memory Profile Options &gt; Collect data</strong> tab: <p>Select from 2 types of memory profiling settings:</p>
+    <ul>
+     <li>Memory error and memory leak checking <p>This option uses the <strong>Memcheck</strong> tool to profile your application.</p> </li>
+     <li>Heap memory profiling <p>This option uses the <strong>Massif</strong> tool to profile your application.
+       </p></li>
+    </ul></li>
    <li><p>On the <strong>General setting</strong> tab, set the general Valgrind options. These options are used for both <strong>Memcheck</strong> and <strong>Massif</strong> profiling.</p>
-   <p align="center"><strong>Figure: Memory error and memory leak data options</strong></p> 
-<p align="center"><img alt="Memory error and memory leak data options" src="../../images/optimizingapp_valgrind.png"/></p> 
-      <p align="center" class="Table"><strong>Table: General setting options</strong></p> 
-        <table style="width: 100%" border="1"> 
-     <tbody> 
-      <tr> 
-       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> 
-       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-      </tr> 
-      <tr> 
-       <td><strong>trace children on exec</strong></td> 
-       <td>When enabled, Valgrind traces into sub-processes initiated through the exec system call. This is necessary for multi-project applications. Valgrind does trace into the child of a fork (it would be difficult not to, since fork makes an identical copy of a process), so this option is arguably badly named. However, most children of fork calls immediately call exec anyway.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>run <code>__libc_freeres()</code> on exit</strong></td> 
+   <p align="center"><strong>Figure: Memory error and memory leak data options</strong></p>
+<p align="center"><img alt="Memory error and memory leak data options" src="../../images/optimizingapp_valgrind.png"/></p>
+      <p align="center" class="Table"><strong>Table: General setting options</strong></p>
+        <table style="width: 100%" border="1">
+     <tbody>
+      <tr>
+       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th>
+       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+      </tr>
+      <tr>
+       <td><strong>trace children on exec</strong></td>
+       <td>When enabled, Valgrind traces into sub-processes initiated through the exec system call. This is necessary for multi-project applications. Valgrind does trace into the child of a fork (it would be difficult not to, since fork makes an identical copy of a process), so this option is arguably badly named. However, most children of fork calls immediately call exec anyway.</td>
+      </tr>
+      <tr>
+       <td><strong>run <code>__libc_freeres()</code> on exit</strong></td>
        <td>This option is only relevant when running Valgrind on Linux.
-          <p>The GNU C library (<code>libc.so</code>), which is used by all applications, can allocate memory for its own uses. Usually it does not free that memory when the application ends, since the Linux kernel reclaims all process resources when a process exits anyway. The glibc authors realized that this behavior causes leak checkers, such as Valgrind, to falsely report leaks in glibc, when a leak check is done at exit. In order to avoid this, they provided a routine called <code>__libc_freeres()</code> specifically to make glibc release all memory it has allocated. <strong>Memcheck</strong> therefore tries to run <code>__libc_freeres()</code> at exit. Unfortunately, in some very old versions of glibc, <code>__libc_freeres()</code> is sufficiently buggy to cause segmentation faults. This was particularly noticeable on Red Hat 7.1. So this option is provided in order to inhibit the run of <code>__libc_freeres()</code>. If your application seems to run fine on Valgrind, but segfaults at exit, disabling this option can fix the problem, although at the cost of possibly falsely reporting space leaks in <code>libc.so</code>. </p></td> 
-      </tr> 
-      <tr> 
-       <td><strong>demangle C++ names</strong></td> 
-       <td>Automatic demangling (decoding) of C++ names is enabled by default. When enabled, Valgrind attempts to translate encoded C++ names back to something approaching the original. The demangler handles symbols mangled by g++ versions 2.X, 3.X, and 4.X. 
-          <p>An important fact about demangling is that method names mentioned in suppressions files must be in their mangled form. Valgrind does not demangle method names when searching for applicable suppressions, because to do otherwise would make suppression file contents dependent on the state of Valgrind&#39;s demangling machinery, and also slow down suppression matching.</p></td> 
-      </tr> 
-      <tr> 
-       <td><strong>num callers in stack trace</strong></td> 
+          <p>The GNU C library (<code>libc.so</code>), which is used by all applications, can allocate memory for its own uses. Usually it does not free that memory when the application ends, since the Linux kernel reclaims all process resources when a process exits anyway. The glibc authors realized that this behavior causes leak checkers, such as Valgrind, to falsely report leaks in glibc, when a leak check is done at exit. In order to avoid this, they provided a routine called <code>__libc_freeres()</code> specifically to make glibc release all memory it has allocated. <strong>Memcheck</strong> therefore tries to run <code>__libc_freeres()</code> at exit. Unfortunately, in some very old versions of glibc, <code>__libc_freeres()</code> is sufficiently buggy to cause segmentation faults. This was particularly noticeable on Red Hat 7.1. So this option is provided in order to inhibit the run of <code>__libc_freeres()</code>. If your application seems to run fine on Valgrind, but segfaults at exit, disabling this option can fix the problem, although at the cost of possibly falsely reporting space leaks in <code>libc.so</code>. </p></td>
+      </tr>
+      <tr>
+       <td><strong>demangle C++ names</strong></td>
+       <td>Automatic demangling (decoding) of C++ names is enabled by default. When enabled, Valgrind attempts to translate encoded C++ names back to something approaching the original. The demangler handles symbols mangled by g++ versions 2.X, 3.X, and 4.X.
+          <p>An important fact about demangling is that method names mentioned in suppressions files must be in their mangled form. Valgrind does not demangle method names when searching for applicable suppressions, because to do otherwise would make suppression file contents dependent on the state of Valgrind's demangling machinery, and also slow down suppression matching.</p></td>
+      </tr>
+      <tr>
+       <td><strong>num callers in stack trace</strong></td>
        <td>This option specifies the maximum number of entries shown in stack traces that identify application locations. Errors are commoned up using only the top 4 method locations (the place in the current method, and that of its 3 immediate callers). So this does not affect the total number of errors reported.
-          <p>The maximum value for this option is 50. Note that higher settings make Valgrind run more slowly and take more memory, but can be useful when working with applications with deeply-nested call chains.</p> </td> 
-      </tr> 
-      <tr> 
-       <td><strong>limit errors reported</strong></td> 
-       <td>When enabled, Valgrind stops reporting errors after 10,000,000 in total, or 1,000 different ones, have been seen. This is to stop the error tracking machinery from becoming a huge performance overhead in applications with many errors.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>show errors below main</strong></td> 
-       <td>By default, stack traces for errors do not show any methods that appear beneath <code>main()</code>. Alternatively, if <code>main()</code> is not present in the stack trace, it does not show any methods below <code>main()</code>-like methods, such as glibc&#39;s <code>__libc_start_main()</code>. Furthermore, if <code>main()</code>-like methods are present in the trace, they are normalized (below <code>main()</code>), in order to make the output more deterministic. If this option is enabled, all stack trace entries are shown and <code>main()</code>-like methods are not normalized.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>max size of stack frame</strong></td> 
+          <p>The maximum value for this option is 50. Note that higher settings make Valgrind run more slowly and take more memory, but can be useful when working with applications with deeply-nested call chains.</p> </td>
+      </tr>
+      <tr>
+       <td><strong>limit errors reported</strong></td>
+       <td>When enabled, Valgrind stops reporting errors after 10,000,000 in total, or 1,000 different ones, have been seen. This is to stop the error tracking machinery from becoming a huge performance overhead in applications with many errors.</td>
+      </tr>
+      <tr>
+       <td><strong>show errors below main</strong></td>
+       <td>By default, stack traces for errors do not show any methods that appear beneath <code>main()</code>. Alternatively, if <code>main()</code> is not present in the stack trace, it does not show any methods below <code>main()</code>-like methods, such as glibc's <code>__libc_start_main()</code>. Furthermore, if <code>main()</code>-like methods are present in the trace, they are normalized (below <code>main()</code>), in order to make the output more deterministic. If this option is enabled, all stack trace entries are shown and <code>main()</code>-like methods are not normalized.</td>
+      </tr>
+      <tr>
+       <td><strong>max size of stack frame</strong></td>
        <td>This option specifies the maximum size of a stack frame. If the stack pointer moves by more than this amount, Valgrind assumes that the application is switching to a different stack.
-          <p>You can to use this option if your application has large stack-allocated arrays. Valgrind keeps track of your application&#39;s stack pointer. If it changes by more than the threshold amount, Valgrind assumes your application is switching to a different stack, and <strong>Memcheck</strong> behaves differently than it would for a stack pointer change smaller than the threshold. Usually this heuristic works well. However, if your application allocates large structures on the stack, this heuristic is fooled, and <strong>Memcheck</strong> subsequently reports large numbers of invalid stack accesses. This option allows you to change the threshold to a different value.</p> 
-          <p>You must only consider the use of this option if Valgrind&#39;s debug output directs you to do so. In that case, it tells you the new threshold you must specify.</p>
-          <p>In general, allocating large structures on the stack is a bad idea, because you can easily run out of stack space, especially on systems with limited memory or which expect to support large numbers of threads each with a small stack, and also because the error checking performed by <strong>Memcheck</strong> is more effective for heap-allocated data than for stack-allocated data. If you have to use this option, consider rewriting your code to allocate on the heap rather than on the stack.</p> </td> 
-      </tr> 
-      <tr> 
-       <td><strong>suppressions file</strong></td> 
-       <td>This option specifies an extra file from which to read descriptions of errors to suppress. You can use up to 100 extra suppression files.</td> 
-      </tr> 
-     </tbody> 
-    </table></li> 
+          <p>You can to use this option if your application has large stack-allocated arrays. Valgrind keeps track of your application's stack pointer. If it changes by more than the threshold amount, Valgrind assumes your application is switching to a different stack, and <strong>Memcheck</strong> behaves differently than it would for a stack pointer change smaller than the threshold. Usually this heuristic works well. However, if your application allocates large structures on the stack, this heuristic is fooled, and <strong>Memcheck</strong> subsequently reports large numbers of invalid stack accesses. This option allows you to change the threshold to a different value.</p>
+          <p>You must only consider the use of this option if Valgrind's debug output directs you to do so. In that case, it tells you the new threshold you must specify.</p>
+          <p>In general, allocating large structures on the stack is a bad idea, because you can easily run out of stack space, especially on systems with limited memory or which expect to support large numbers of threads each with a small stack, and also because the error checking performed by <strong>Memcheck</strong> is more effective for heap-allocated data than for stack-allocated data. If you have to use this option, consider rewriting your code to allocate on the heap rather than on the stack.</p> </td>
+      </tr>
+      <tr>
+       <td><strong>suppressions file</strong></td>
+       <td>This option specifies an extra file from which to read descriptions of errors to suppress. You can use up to 100 extra suppression files.</td>
+      </tr>
+     </tbody>
+    </table></li>
    <li>On the <strong>Tool Advanced setting</strong> tab, set the advanced options.
-   <p>The tab content depends on the selection you have made on the <strong>Collect data</strong> tab.</p> 
+   <p>The tab content depends on the selection you have made on the <strong>Collect data</strong> tab.</p>
     <p align="center" class="Table"><strong>Table: Tool Advanced setting options for memory error and memory leak profiling</strong></p>
         <table style="width: 100%" border="1">
-     <tbody> 
-      <tr> 
-       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> 
-       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-      </tr> 
-      <tr> 
-       <td><strong>leak check</strong></td> 
-       <td>This option, when enabled, searches for memory leaks when the client application finishes. If set to <strong>summary</strong>, it lists out how many leaks occurred. If set to <strong>full</strong> or <strong>yes</strong>, it also gives details of each individual leak.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>leak resolution</strong></td> 
+     <tbody>
+      <tr>
+       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th>
+       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+      </tr>
+      <tr>
+       <td><strong>leak check</strong></td>
+       <td>This option, when enabled, searches for memory leaks when the client application finishes. If set to <strong>summary</strong>, it lists out how many leaks occurred. If set to <strong>full</strong> or <strong>yes</strong>, it also gives details of each individual leak.</td>
+      </tr>
+      <tr>
+       <td><strong>leak resolution</strong></td>
        <td>When performing leak checks, this option determines how willing <strong>Memcheck</strong> is to consider different backtraces to be the same for the purposes of merging multiple leaks into a single leak report. When set to <strong>low</strong>, only the first 2 entries need match. When set to <strong>med</strong>, 4 entries have to match. When <strong>high</strong>, all entries need to match.
-          <p>For hardcore leak debugging, you probably want to use <strong>--leak-resolution=high</strong> together with <strong>--num-callers=40</strong> or a similar large number. The <strong>--leak-resolution</strong> setting does not affect <strong>Memcheck</strong>&#39;s ability to find leaks. It only changes how the results are presented.</p> </td> 
-      </tr> 
-      <tr> 
-       <td><strong>freelist size (blocks)</strong></td> 
+          <p>For hardcore leak debugging, you probably want to use <strong>--leak-resolution=high</strong> together with <strong>--num-callers=40</strong> or a similar large number. The <strong>--leak-resolution</strong> setting does not affect <strong>Memcheck</strong>'s ability to find leaks. It only changes how the results are presented.</p> </td>
+      </tr>
+      <tr>
+       <td><strong>freelist size (blocks)</strong></td>
        <td>When the client application releases memory using free (in C) or delete (C++), that memory is not immediately made available for re-allocation. Instead, it is marked inaccessible and placed in a queue of freed blocks. The purpose is to defer as long as possible the point at which freed-up memory comes back into circulation. This increases the chance that <strong>Memcheck</strong> is able to detect invalid accesses to blocks for some significant period of time after they have been freed.
-          <p>This option specifies the maximum total size, in bytes, of the blocks in the queue. The default value is 20 million bytes. Increasing this increases the total amount of memory used by <strong>Memcheck</strong>, but can result in the detection of invalid uses of freed blocks which would otherwise go undetected.</p> </td> 
-      </tr> 
-      <tr> 
-       <td><strong>show reachable blocks</strong></td> 
-       <td>When disabled, the memory leak detector only shows &quot;definitely lost&quot; and &quot;possibly lost&quot; blocks. When enabled, the leak detector also shows &quot;reachable&quot; and &quot;indirectly lost&quot; blocks. It shows all blocks, except suppressed ones, so <strong>--show-all</strong> would be a better name for it. </td> 
-      </tr> 
-      <tr> 
-       <td><strong>allow partial loads</strong></td> 
+          <p>This option specifies the maximum total size, in bytes, of the blocks in the queue. The default value is 20 million bytes. Increasing this increases the total amount of memory used by <strong>Memcheck</strong>, but can result in the detection of invalid uses of freed blocks which would otherwise go undetected.</p> </td>
+      </tr>
+      <tr>
+       <td><strong>show reachable blocks</strong></td>
+       <td>When disabled, the memory leak detector only shows "definitely lost" and "possibly lost" blocks. When enabled, the leak detector also shows "reachable" and "indirectly lost" blocks. It shows all blocks, except suppressed ones, so <strong>--show-all</strong> would be a better name for it. </td>
+      </tr>
+      <tr>
+       <td><strong>allow partial loads</strong></td>
        <td>This option controls how <strong>Memcheck</strong> handles word-sized, word-aligned loads from addresses for which some bytes are addressable and others are not. When set to <strong>yes</strong>, such loads do not produce an address error. Instead, loaded bytes originating from illegal addresses are marked as uninitialized, and those corresponding to legal addresses are handled in the normal way.
-          <p>When set to <strong>no</strong>, loads from partially invalid addresses are treated the same as loads from completely invalid addresses, an illegal-address error is issued, and the resulting bytes are marked as initialized.</p> <p>The code that behaves in this way is in violation of the ISO C/C++ standards, and must be considered broken. If at all possible, such code must be fixed. This option must be used only as a last resort.</p> </td> 
-      </tr> 
-      <tr> 
-       <td><strong>undef value errors</strong></td> 
-       <td>This option controls whether <strong>Memcheck</strong> reports uses of undefined value errors. If you do not want to see undefined value errors, set this to <strong>no</strong>. It also has the side effect of slightly speeding up <strong>Memcheck</strong>.</td> 
-      </tr> 
-     </tbody> 
-    </table> 
+          <p>When set to <strong>no</strong>, loads from partially invalid addresses are treated the same as loads from completely invalid addresses, an illegal-address error is issued, and the resulting bytes are marked as initialized.</p> <p>The code that behaves in this way is in violation of the ISO C/C++ standards, and must be considered broken. If at all possible, such code must be fixed. This option must be used only as a last resort.</p> </td>
+      </tr>
+      <tr>
+       <td><strong>undef value errors</strong></td>
+       <td>This option controls whether <strong>Memcheck</strong> reports uses of undefined value errors. If you do not want to see undefined value errors, set this to <strong>no</strong>. It also has the side effect of slightly speeding up <strong>Memcheck</strong>.</td>
+      </tr>
+     </tbody>
+    </table>
      <p align="center" class="Table"><strong>Table: Tool Advanced setting options for heap memory profiling</strong></p>
-     <table style="width: 100%" border="1"> 
-     <tbody> 
-      <tr> 
-       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th> 
-       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th> 
-      </tr> 
-      <tr> 
-       <td><strong>profile heap</strong></td> 
-       <td>This option specifies whether heap profiling is done.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>administrative bytes per block</strong></td> 
-       <td>If heap profiling is enabled, this option gives the number of administrative bytes per block to use. This must be an estimate of the average, since it can vary. For example, the allocator used by glibc on Linux requires somewhere between 4 to 15 bytes per block, depending on various factors. That allocator also requires admin space for freed blocks, but <strong>Massif</strong> cannot account for this. </td> 
-      </tr> 
-      <tr> 
-       <td><strong>profile stack</strong></td> 
-       <td>This option specifies whether stack profiling must be done. This option slows <strong>Massif</strong> down greatly, and so is off by default. <strong>Massif</strong> assumes that the main stack has size zero at start-up. This is not true, but doing otherwise accurately is difficult. Furthermore, starting at zero better indicates the size of the part of the main stack that a user application actually has control over.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>allocation tree depth</strong></td> 
-        <td>The maximum depth of the allocation trees recorded for detailed snapshots. Increasing it makes <strong>Massif</strong> run somewhat more slowly, use more memory, and produce bigger output files.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>heap allocation threshold</strong></td> 
-       <td>The significance threshold for heap allocations is a percentage of the total memory size. The allocation tree entries that account for less than this are aggregated. This must be specified in tandem with ms_print&#39;s option of the same name.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>allocation peak inaccuracy</strong></td> 
-       <td><strong>Massif</strong> does not necessarily record the actual global memory allocation peak. By default, it records a peak only when the global memory allocation size exceeds the previous peak by at least 1.0%. This is because there can be many local allocation peaks along the way, and doing a detailed snapshot for each is expensive and wasteful, as all but one of them are later discarded. This inaccuracy can be changed (even to 0.0%) through this option, but <strong>Massif</strong> runs drastically slower as the number approaches zero.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>time unit</strong></td> 
-       <td>This option specifies the time unit used for the profiling. There are 3 possibilities: 
-        <ul> 
-         <li>Instructions executed (i) <p>Good for most cases</p> </li> 
-         <li>Real (wall clock) time (in milliseconds) <p>It is useful sometimes</p> </li> 
-         <li>Bytes allocated/deallocated on the heap or stack (B) <p>It is useful for very short-run programs, and for testing purposes, because it is the most reproducible across different machines.</p> </li> 
-        </ul></td> 
-      </tr> 
-      <tr> 
-       <td><strong>detailed snapshot frequency</strong></td> 
-       <td>This option specifies the frequency of detailed snapshots. With <strong>--detailed-freq=1</strong>, every snapshot is detailed.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>max snapshots</strong></td> 
-       <td>This option specifies the maximum number of snapshots recorded. If set to N, for all programs except very short-running ones, the final number of snapshots is between N/2 and N.</td> 
-      </tr> 
-      <tr> 
-       <td><strong>minimum heap block alignment</strong></td> 
-       <td>By default, Valgrind&#39;s malloc, realloc, and so on return a block whose starting address is 8-byte-aligned or 16-byte-aligned. The value depends on the platform and matches the platform default. This option allows you to specify a different alignment. The supplied value must be greater than or equal to the default, less than or equal to 4096, and must be a power of 2. </td> 
-      </tr> 
-      <tr> 
-       <td><strong>allocation functions</strong></td> 
-       <td>Methods specified with this option are treated as though they were a heap allocation method, such as malloc. This is useful for methods that are wrappers to malloc or new, which can fill up the allocation trees with uninteresting information. This option can be specified multiple times on the command line, to name multiple methods.<p>The named method is only treated this way if it is the top entry in a stack trace, or just below another method treated this way. For example, if you have a method malloc1 that wraps malloc, and malloc2 that wraps malloc1, just specifying <strong>--alloc-fn=malloc2</strong> has no effect. You need to specify <strong>--alloc-fn=malloc1</strong> as well. This is a little inconvenient, but the reason is that checking for allocation methods is slow, and it saves a lot of time if <strong>Massif</strong> can stop looking through the stack trace entries as soon as it finds one that does not match rather than having to continue through all the entries.</p> </td> 
-      </tr> 
-     </tbody> 
-    </table> </li> 
-   <li>To save the settings, click <strong>Apply</strong>.</li> 
-   <li>To run Valgrind, click <strong>Profile</strong>.</li> 
+     <table style="width: 100%" border="1">
+     <tbody>
+      <tr>
+       <th rowspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Option name</th>
+       <th colspan="1" style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+      </tr>
+      <tr>
+       <td><strong>profile heap</strong></td>
+       <td>This option specifies whether heap profiling is done.</td>
+      </tr>
+      <tr>
+       <td><strong>administrative bytes per block</strong></td>
+       <td>If heap profiling is enabled, this option gives the number of administrative bytes per block to use. This must be an estimate of the average, since it can vary. For example, the allocator used by glibc on Linux requires somewhere between 4 to 15 bytes per block, depending on various factors. That allocator also requires admin space for freed blocks, but <strong>Massif</strong> cannot account for this. </td>
+      </tr>
+      <tr>
+       <td><strong>profile stack</strong></td>
+       <td>This option specifies whether stack profiling must be done. This option slows <strong>Massif</strong> down greatly, and so is off by default. <strong>Massif</strong> assumes that the main stack has size zero at start-up. This is not true, but doing otherwise accurately is difficult. Furthermore, starting at zero better indicates the size of the part of the main stack that a user application actually has control over.</td>
+      </tr>
+      <tr>
+       <td><strong>allocation tree depth</strong></td>
+        <td>The maximum depth of the allocation trees recorded for detailed snapshots. Increasing it makes <strong>Massif</strong> run somewhat more slowly, use more memory, and produce bigger output files.</td>
+      </tr>
+      <tr>
+       <td><strong>heap allocation threshold</strong></td>
+       <td>The significance threshold for heap allocations is a percentage of the total memory size. The allocation tree entries that account for less than this are aggregated. This must be specified in tandem with ms_print's option of the same name.</td>
+      </tr>
+      <tr>
+       <td><strong>allocation peak inaccuracy</strong></td>
+       <td><strong>Massif</strong> does not necessarily record the actual global memory allocation peak. By default, it records a peak only when the global memory allocation size exceeds the previous peak by at least 1.0%. This is because there can be many local allocation peaks along the way, and doing a detailed snapshot for each is expensive and wasteful, as all but one of them are later discarded. This inaccuracy can be changed (even to 0.0%) through this option, but <strong>Massif</strong> runs drastically slower as the number approaches zero.</td>
+      </tr>
+      <tr>
+       <td><strong>time unit</strong></td>
+       <td>This option specifies the time unit used for the profiling. There are 3 possibilities:
+        <ul>
+         <li>Instructions executed (i) <p>Good for most cases</p> </li>
+         <li>Real (wall clock) time (in milliseconds) <p>It is useful sometimes</p> </li>
+         <li>Bytes allocated/deallocated on the heap or stack (B) <p>It is useful for very short-run programs, and for testing purposes, because it is the most reproducible across different machines.</p> </li>
+        </ul></td>
+      </tr>
+      <tr>
+       <td><strong>detailed snapshot frequency</strong></td>
+       <td>This option specifies the frequency of detailed snapshots. With <strong>--detailed-freq=1</strong>, every snapshot is detailed.</td>
+      </tr>
+      <tr>
+       <td><strong>max snapshots</strong></td>
+       <td>This option specifies the maximum number of snapshots recorded. If set to N, for all programs except very short-running ones, the final number of snapshots is between N/2 and N.</td>
+      </tr>
+      <tr>
+       <td><strong>minimum heap block alignment</strong></td>
+       <td>By default, Valgrind's malloc, realloc, and so on return a block whose starting address is 8-byte-aligned or 16-byte-aligned. The value depends on the platform and matches the platform default. This option allows you to specify a different alignment. The supplied value must be greater than or equal to the default, less than or equal to 4096, and must be a power of 2. </td>
+      </tr>
+      <tr>
+       <td><strong>allocation functions</strong></td>
+       <td>Methods specified with this option are treated as though they were a heap allocation method, such as malloc. This is useful for methods that are wrappers to malloc or new, which can fill up the allocation trees with uninteresting information. This option can be specified multiple times on the command line, to name multiple methods.<p>The named method is only treated this way if it is the top entry in a stack trace, or just below another method treated this way. For example, if you have a method malloc1 that wraps malloc, and malloc2 that wraps malloc1, just specifying <strong>--alloc-fn=malloc2</strong> has no effect. You need to specify <strong>--alloc-fn=malloc1</strong> as well. This is a little inconvenient, but the reason is that checking for allocation methods is slow, and it saves a lot of time if <strong>Massif</strong> can stop looking through the stack trace entries as soon as it finds one that does not match rather than having to continue through all the entries.</p> </td>
+      </tr>
+     </tbody>
+    </table> </li>
+   <li>To save the settings, click <strong>Apply</strong>.</li>
+   <li>To run Valgrind, click <strong>Profile</strong>.</li>
   </ol>
- 
-<h3 id="valgrind_result" name="valgrind_result">Viewing Valgrind Result</h3> 
-  <p>After the <a href="#running_valgrind">memory profiling</a> is terminated, you can view the profiling results.</p> 
-  <h4 id="memleak" name="memleak">Memory Error and Leak Results</h4> 
-  <p>The memory error table displays memory leaks that occurred during the profiling process:</p> 
-
-  <ul> 
-   <li><strong>Memory error</strong> or <strong>Memory leak</strong>: Error or leak type</li> 
-   <li><strong>Function name</strong>: Location where the error occurred</li> 
-   <li><strong>Sizes</strong>: Memory size of the error</li> 
-   <li><strong>Address</strong>: Code memory address</li> 
-   <li><strong>Location</strong>: Source or executable path, or library path, where the error occurred</li> 
+
+<h3 id="valgrind_result" name="valgrind_result">Viewing Valgrind Result</h3>
+  <p>After the <a href="#running_valgrind">memory profiling</a> is terminated, you can view the profiling results.</p>
+  <h4 id="memleak" name="memleak">Memory Error and Leak Results</h4>
+  <p>The memory error table displays memory leaks that occurred during the profiling process:</p>
+
+  <ul>
+   <li><strong>Memory error</strong> or <strong>Memory leak</strong>: Error or leak type</li>
+   <li><strong>Function name</strong>: Location where the error occurred</li>
+   <li><strong>Sizes</strong>: Memory size of the error</li>
+   <li><strong>Address</strong>: Code memory address</li>
+   <li><strong>Location</strong>: Source or executable path, or library path, where the error occurred</li>
    <li><strong>pid</strong>: Process ID</li>
-   <li><strong>tid</strong>: Thread ID<p></p> </li> 
-  </ul> 
-  <p>If you expand an error entry, you can see the callstack of the method.</p> 
-  <h4 id="heap" name="heap">Heap Memory Profiling Results</h4> 
-  <p>The heap memory profiling table displays the heap memory consumed and allocated during the profiling process:</p> 
-  <ul> 
-   <li><strong>Snapshot</strong>: Index number of the snapshot</li> 
-   <li><strong>Time (i)</strong>: Number of instructions being executed</li> 
-   <li><strong>Total (B)</strong>: Total heap memory consumption byte size</li> 
-   <li><strong>Useful Heap (B)</strong>: Size of the heap memory used by the program</li> 
-   <li><strong>Extra Heap (B)</strong>: Size of the heap memory allocated in excess of what the program is using. The source of the extra heap memory is: 
-    <ul> 
-     <li>Administrative bytes of the heap memory block</li> 
-     <li>Aligned bytes of the requested memory size</li> 
-    </ul> </li> 
-   <li><strong>Stack (B)</strong>: Size of the stacks. By default, stack profiling is disabled as it slows profiling. It is enabled using the <strong>profile stack</strong> option.</li> 
-  </ul> 
-<p align="center"><strong>Figure: Heap memory profiling results</strong></p> 
+   <li><strong>tid</strong>: Thread ID<p></p> </li>
+  </ul>
+  <p>If you expand an error entry, you can see the callstack of the method.</p>
+  <h4 id="heap" name="heap">Heap Memory Profiling Results</h4>
+  <p>The heap memory profiling table displays the heap memory consumed and allocated during the profiling process:</p>
+  <ul>
+   <li><strong>Snapshot</strong>: Index number of the snapshot</li>
+   <li><strong>Time (i)</strong>: Number of instructions being executed</li>
+   <li><strong>Total (B)</strong>: Total heap memory consumption byte size</li>
+   <li><strong>Useful Heap (B)</strong>: Size of the heap memory used by the program</li>
+   <li><strong>Extra Heap (B)</strong>: Size of the heap memory allocated in excess of what the program is using. The source of the extra heap memory is:
+    <ul>
+     <li>Administrative bytes of the heap memory block</li>
+     <li>Aligned bytes of the requested memory size</li>
+    </ul> </li>
+   <li><strong>Stack (B)</strong>: Size of the stacks. By default, stack profiling is disabled as it slows profiling. It is enabled using the <strong>profile stack</strong> option.</li>
+  </ul>
+<p align="center"><strong>Figure: Heap memory profiling results</strong></p>
   <p align="center"><img alt="Heap memory profiling results" src="../../images/optimizingapp_heapmemory.png" /></p>
-  
-  <p>A snapshot with a green icon in front has a heap tree with a callstack. Double-click the entry to see the callstack details.</p> 
+
+  <p>A snapshot with a green icon in front has a heap tree with a callstack. Double-click the entry to see the callstack details.</p>
   <p>For information on executing Valgrind on the command line interface, see the <a href="http://valgrind.org/docs/manual/manual.html" target="_blank">Valgrind User Manual</a>.</p>
 
   <h4 id="manage" name="manage">Managing Results</h4>
-  <p>To save a Valgrind profiling result, click <strong>Save file</strong> on the Valgrind result view toolbar.</p> 
+  <p>To save a Valgrind profiling result, click <strong>Save file</strong> on the Valgrind result view toolbar.</p>
 
-  <p>To load a saved Valgrind result file, select <strong>File &gt; Open File</strong> in the Tizen Studio menu.</p>  
+  <p>To load a saved Valgrind result file, select <strong>File &gt; Open File</strong> in the Tizen Studio menu.</p>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.training/html/native/process/running_app_n.htm b/org.tizen.training/html/native/process/running_app_n.htm
index 22ce19f..e561441 100644 (file)
--- a/org.tizen.training/html/native/process/running_app_n.htm
+++ b/org.tizen.training/html/native/process/running_app_n.htm
@@ -5,68 +5,68 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Running Applications</title>  
+       <title>Running Applications</title>
 </head>
 
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-<h1>Running Applications</h1> 
-  <p>You can run Tizen native applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
-  <p>To run your application on the emulator:</p> 
-  <ol> 
+<h1>Running Applications</h1>
+  <p>You can run Tizen native applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p>
+  <p>To run your application on the emulator:</p>
+  <ol>
         <li><p>Before you run the application, you must sign your application package by generating an author certificate and registering it in the Tizen Studio.</p>
         <p>If you have already registered your certificate in the Tizen Studio, the signature is generated automatically while running your application.</p></li>
-  <li>Start the emulator in the <strong>Connections</strong> view.</li> 
-   <li><p>Start the run by doing one of the following:</p> 
-    <ul> 
-     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>.</li> 
-     <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Native Application</strong>.</li> 
-     <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li> 
-    </ul> <p>If the application binary does not exist, it is built automatically for the emulator.</p> 
-       <p>If many active emulator instances are connected, select the emulator to run the application from the dialog box.</p></li> 
-   <li><p>Use the application in the emulator as you would in a target device.</p> 
-       <p>While the application is running, the Tizen Studio <strong>Log</strong> view shows the log, debug, and exception messages from the methods defined in the log macros.</p></li> 
-   <li><p>To terminate the run, exit the application on the emulator.</p></li> 
-  </ol> 
-  <p>In the emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the Event Injector view to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.</p> 
+  <li>Start the emulator in the <strong>Connections</strong> view.</li>
+   <li><p>Start the run by doing one of the following:</p>
+    <ul>
+     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>.</li>
+     <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Native Application</strong>.</li>
+     <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li>
+    </ul> <p>If the application binary does not exist, it is built automatically for the emulator.</p>
+       <p>If many active emulator instances are connected, select the emulator to run the application from the dialog box.</p></li>
+   <li><p>Use the application in the emulator as you would in a target device.</p>
+       <p>While the application is running, the Tizen Studio <strong>Log</strong> view shows the log, debug, and exception messages from the methods defined in the log macros.</p></li>
+   <li><p>To terminate the run, exit the application on the emulator.</p></li>
+  </ol>
+  <p>In the emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the Event Injector view to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.</p>
 
-  <h2 name="rapid" id="rapid">Rapid Development Support</h2> 
-  <p>Rapid Development Support (RDS) lets you develop a Tizen application rapidly by saving deployment time.</p> 
-  <p>When using RDS, the application is first launched normally. After the first launch, the packaging process is skipped and only modified, added, and deleted files are installed in the target. If an error occurs while launching, the normal mode is executed.</p> 
-  <p>To launch the application in the normal mode:</p> 
-  <ol> 
-   <li>Package the application.</li> 
-   <li>Transfer the packaged file to the target.</li> 
-   <li>Install the packaged file in the target. If the application is already installed, uninstall it before the installation.</li> 
-  </ol> 
-  <p>To launch the application in the RDS mode:</p> 
-  <ol> 
-   <li>Search for the delta files (changed, added, and deleted files).</li> 
-   <li>Transfer the delta files to the target.</li> 
-   <li>If the <code>tizen-manifest.xml</code> file has been modified, execute directory installation.</li> 
-  </ol> 
-  <p>The RDS option is enabled as default. To disable it, in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p> 
+  <h2 name="rapid" id="rapid">Rapid Development Support</h2>
+  <p>Rapid Development Support (RDS) lets you develop a Tizen application rapidly by saving deployment time.</p>
+  <p>When using RDS, the application is first launched normally. After the first launch, the packaging process is skipped and only modified, added, and deleted files are installed in the target. If an error occurs while launching, the normal mode is executed.</p>
+  <p>To launch the application in the normal mode:</p>
+  <ol>
+   <li>Package the application.</li>
+   <li>Transfer the packaged file to the target.</li>
+   <li>Install the packaged file in the target. If the application is already installed, uninstall it before the installation.</li>
+  </ol>
+  <p>To launch the application in the RDS mode:</p>
+  <ol>
+   <li>Search for the delta files (changed, added, and deleted files).</li>
+   <li>Transfer the delta files to the target.</li>
+   <li>If the <code>tizen-manifest.xml</code> file has been modified, execute directory installation.</li>
+  </ol>
+  <p>The RDS option is enabled as default. To disable it, in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p>
     <div class="note">
         <strong>Note</strong>
         Currently, this option is not supported in multi-app projects.
     </div>
-  
-  
-    
+
+
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/process/setting_properties_n.htm b/org.tizen.training/html/native/process/setting_properties_n.htm
index de398e1..edcb24d 100644 (file)
--- a/org.tizen.training/html/native/process/setting_properties_n.htm
+++ b/org.tizen.training/html/native/process/setting_properties_n.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Setting Project Properties</title>  
+       <title>Setting Project Properties</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile native" src="../../images/mobile_s_n.png"/> <img alt="Wearable native" src="../../images/wearable_s_n.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -32,17 +32,17 @@
                        <li><a href="../details/app_filtering_n.htm#filter_n">Feature-based Filtering</a></li>
                        <li><a href="../details/sec_privileges_n.htm">Security and API Privileges</a></li>
                        <li><a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm">Configuring the Application Manifest</a></li>
-               </ul>           
+               </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Setting Project Properties</h1> 
+<h1>Setting Project Properties</h1>
 
   <p>Before you implement the actual application functionality, define all the necessary properties for your application project:</p>
-  
+
   <ul>
-  <li>To set the <a href="#api">application project properties for API and privilege checks</a>, right-click the project in the Tizen Studio <strong>Project Explorer</strong> view and select <strong>Properties</strong>. After setting or changing a property, click <strong>OK</strong>.</li> 
+  <li>To set the <a href="#api">application project properties for API and privilege checks</a>, right-click the project in the Tizen Studio <strong>Project Explorer</strong> view and select <strong>Properties</strong>. After setting or changing a property, click <strong>OK</strong>.</li>
 <li>To define the <a href="#manifest">application manifest settings</a>, edit the <code>tizen-manifest.xml</code> file.
 
     <div class="note">
@@ -50,20 +50,20 @@
         Only modify the manifest file by using the manifest editor in the Tizen Studio. If you create or edit the <code>tizen-manifest.xml</code> file using any other text editor, your application may not work as expected.
     </div>
 </li></ul>
-  
+
 <p>After you have finished setting the project properties, you are ready to <a href="app_dev_process_n.htm#designing">design the UI and implement the application code</a>.</p>
- 
-  <h2 id="api" name="api">Checking API and Privilege Usage</h2> 
-  <p>You can <a href="../../../../org.tizen.studio/html/native_tools/api_checker_n.htm">check the source code in your project for any violation of API and privilege usage</a>. To enable the non-default checks (the default checks are always performed):</p> 
+
+  <h2 id="api" name="api">Checking API and Privilege Usage</h2>
+  <p>You can <a href="../../../../org.tizen.studio/html/native_tools/api_checker_n.htm">check the source code in your project for any violation of API and privilege usage</a>. To enable the non-default checks (the default checks are always performed):</p>
   <ol>
-<li><p>In the <strong>Properties</strong> window, select <strong>C/C++ Build &gt; Tizen Settings &gt; API and Privilege Checker Properties</strong>.</p></li> 
+<li><p>In the <strong>Properties</strong> window, select <strong>C/C++ Build &gt; Tizen Settings &gt; API and Privilege Checker Properties</strong>.</p></li>
    <li>
-<p>Select the required checks in the <strong>Privilege Check</strong> panel.</p> </li> 
+<p>Select the required checks in the <strong>Privilege Check</strong> panel.</p> </li>
   </ol>
-<p>To perform the usage checks automatically during specific tasks, select the required option in the <strong>Launching</strong> panel: </p> 
+<p>To perform the usage checks automatically during specific tasks, select the required option in the <strong>Launching</strong> panel: </p>
   <ul>
 <li>During the <a href="app_dev_process_n.htm#build">build process</a>, select the <strong>Run API and privilege checks with build</strong> option.</li>
-   <li>During code editing, select the <strong>Run API and privilege checks while editing</strong> option.</li> 
+   <li>During code editing, select the <strong>Run API and privilege checks while editing</strong> option.</li>
   </ul>
 <p>You can also perform the usage checks manually after building the application, by right-clicking the project in the <strong>Project Explorer</strong> view and selecting  <strong>Check API and Privilege Violations With Build</strong>. The results are displayed in the <strong>Problems</strong> view.</p>
 
@@ -73,7 +73,7 @@
         If the application has conflicting API versions, the build fails and the results are displayed in the <strong>Problems</strong> view.
     </div>
 
-<h2 id="manifest" name="manifest">Setting the Application Manifest</h2> 
+<h2 id="manifest" name="manifest">Setting the Application Manifest</h2>
 
        <p>The application manifest consists of application information, such as package, version, features, and privileges, which are available for the application. To configure the application information in the manifest editor, double-click the application <code>tizen-manifest.xml</code> file in the <strong>Project Explorer</strong> view.</p>
        <p align="center"><strong>Figure: Setting the application manifest</strong></p>
@@ -83,19 +83,19 @@
 
 <h3 id="overview" name="overview">Defining and Editing General Information in the Overview Tab</h3>
 
-       <p>You can set and edit general and project-related information about the application, such as application package, version, author, and description, in the <strong>Overview</strong> tab of the manifest editor.</p> 
-  <p>You can perform the following tasks using the <strong>Overview</strong> tab:</p> 
+       <p>You can set and edit general and project-related information about the application, such as application package, version, author, and description, in the <strong>Overview</strong> tab of the manifest editor.</p>
+  <p>You can perform the following tasks using the <strong>Overview</strong> tab:</p>
   <ul>
        <li>View the application ID. <p>The Tizen Studio creates automatically an application ID, which uniquely identifies the application within the package.</p></li>
        <li>Set the package name of the application. <p>The package name represents the package identifier of the application</p></li>
    <li>Set the application version (x.y.z). <p>The application version format has the following constraints: 0 ≤ {x, y} ≤ 255, 0 ≤ z ≤ 65535. You can change the application version in the <strong>Version</strong> field.</p> </li>
-       <li>Set the API version. <p>The API version format is &quot;x.y.z&quot;.</p> </li>
+       <li>Set the API version. <p>The API version format is "x.y.z".</p> </li>
        <li>Set the application label. <p>The application label represents the name of the application.</p> </li>
        <li>View the application executable file path.</li>
-       <li>Add an application icon. <p>You can add a launcher icon to your application by defining it in the <strong>Icon</strong> panel. If your application supports both HD and WVGA, it is best to provide an icon for HD for better image quality in both cases.</p> 
+       <li>Add an application icon. <p>You can add a launcher icon to your application by defining it in the <strong>Icon</strong> panel. If your application supports both HD and WVGA, it is best to provide an icon for HD for better image quality in both cases.</p>
        <p>The following table describes the available icons.</p>
-       
-<p align="center" class="Table"><strong>Table: Application icons</strong></p> 
+
+<p align="center" class="Table"><strong>Table: Application icons</strong></p>
     <table border="1">
      <colgroup>
 <col width="10%"/>
@@ -104,41 +104,41 @@
 <col width="10%"/>
 <col width="10%"/>
 <col width="35%"/>
-</colgroup>     
+</colgroup>
 <tbody>
 <tr>
                <th rowspan="2">Profile</th>
-       <th rowspan="2">Mandatory</th> 
-       <th rowspan="2">Format</th> 
-       <th colspan="2">Size</th> 
-       <th rowspan="2">Description</th> 
+       <th rowspan="2">Mandatory</th>
+       <th rowspan="2">Format</th>
+       <th colspan="2">Size</th>
+       <th rowspan="2">Description</th>
       </tr>
-<tr> 
-<th>Xhigh (HD)</th> 
-       <th>High (WVGA)</th> 
+<tr>
+<th>Xhigh (HD)</th>
+       <th>High (WVGA)</th>
       </tr>
 <tr>
 <td>Mobile</td>
-       <td>Yes</td> 
-       <td>32-bit PNG with alpha</td> 
-       <td>117 x 117 pixels</td> 
-       <td>78 x 78 pixels</td> 
-       <td>Image displayed in the main menu.</td> 
+       <td>Yes</td>
+       <td>32-bit PNG with alpha</td>
+       <td>117 x 117 pixels</td>
+       <td>78 x 78 pixels</td>
+       <td>Image displayed in the main menu.</td>
       </tr>
-<tr> 
-<td>Wearable</td>     
-       <td>Yes</td> 
-       <td>32-bit PNG with alpha</td>        
-       <td colspan="2">152 x 152 pixels</td> 
-       <td>Image displayed in the main menu.</td> 
+<tr>
+<td>Wearable</td>
+       <td>Yes</td>
+       <td>32-bit PNG with alpha</td>
+       <td colspan="2">152 x 152 pixels</td>
+       <td>Image displayed in the main menu.</td>
       </tr>
 </tbody>
 </table>
 
-</li> 
+</li>
 <li>Set the application author.
        <p>The application author represents the creator of the Tizen native application package. You can set the name, email ID, and Web site of the author.</p>
-       </li> 
+       </li>
 <li>Set the application description.
        <p>The application description represents the human-readable description of the Tizen native application package.</p>
        </li>
@@ -147,8 +147,8 @@
 <h3 id="features" name="features">Declaring Required Software or Hardware Features in the Features Tab</h3>
 
        <p>You can declare any device software or hardware features that your application requires to run properly. The declaration can be used for application filtering in the Tizen Store.</p>
-  
-  <p>To enable filtering for your native application:</p> 
+
+  <p>To enable filtering for your native application:</p>
   <ol>
 <li>In the <strong>Features</strong> tab, click <strong>+</strong>.</li>
 <li>Select a feature from the <a href="../details/app_filtering_n.htm">predefined list of features available for filtering</a>.
@@ -156,38 +156,38 @@
 <li>Click <strong>OK</strong>.</li>
 
    <li>Upload and publish the application package on the Tizen Store.
-   <p>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user&#39;s device.</p> 
-   </li> 
+   <p>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user's device.</p>
+   </li>
   </ol>
 
 <p>After setting the feature information with the manifest editor, you can see the added code in the <strong>Source</strong> tab:</p>
 <pre class="prettyprint">
-&lt;feature name=&quot;http://tizen.org/feature/network.nfc&quot;&gt;true&lt;/feature&gt;
+&lt;feature name="http://tizen.org/feature/network.nfc"&gt;true&lt;/feature&gt;
 </pre>
 
 
 
 <h3 id="privileges" name="privileges">Specifying Privileges in the Privileges Tab</h3>
 
-       <p>You can use features and services provided by privileged APIs, which handle platform and user-sensitive data. You can specify a privilege in the <strong>Privileges</strong> tab of the manifest editor.</p> 
-       <p>To add a privilege:</p> 
-  <ol> 
-   <li>In the <strong>Privileges</strong> tab, click <strong>+</strong>.</li> 
+       <p>You can use features and services provided by privileged APIs, which handle platform and user-sensitive data. You can specify a privilege in the <strong>Privileges</strong> tab of the manifest editor.</p>
+       <p>To add a privilege:</p>
+  <ol>
+   <li>In the <strong>Privileges</strong> tab, click <strong>+</strong>.</li>
    <li>Select a privilege from the <a href="../details/sec_privileges_n.htm">predefined list of available API privileges</a>.</li>
    <li>Click <strong>OK</strong>.</li>
    </ol>
-   
+
   <p>After setting the privilege information with the manifest editor, you can see the added code in the <strong>Source</strong> tab:</p>
 <pre class="prettyprint">
 &lt;privileges&gt;
-&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
+   &lt;privilege&gt;http://tizen.org/privilege/appmanager.launch&lt;/privilege&gt;
 &lt;/privileges&gt;
 </pre>
 
 
 <h3 id="localization" name="localization">Adding Localized Application Details in the Localization Tab</h3>
 
-       <p>You can provide localized versions of the application name (label) and description in the <strong>Localization</strong> tab of the manifest editor.</p> 
+       <p>You can provide localized versions of the application name (label) and description in the <strong>Localization</strong> tab of the manifest editor.</p>
 
        <p>To add a localized name or description:</p>
        <ul>
@@ -195,13 +195,13 @@
 
 <p>The following example shows the setting in the <code>tizen-manifest.xml</code> file code:</p>
 <pre class="prettyprint">
-&lt;label xml:lang=&quot;en-us&quot;&gt;This is a sample&lt;/label&gt;
+&lt;label xml:lang="en-us"&gt;This is a sample&lt;/label&gt;
 </pre>
 </li>
        <li>In the <strong>Description</strong> panel, click <strong>+</strong>. Select the language, define the application description text for that language, and click <strong>OK</strong>.
 <p>The following example shows the setting in the <code>tizen-manifest.xml</code> file code:</p>
 <pre class="prettyprint">
-&lt;description xml:lang=&quot;en-us&quot;&gt;This is a sample&lt;/description&gt;
+&lt;description xml:lang="en-us"&gt;This is a sample&lt;/description&gt;
 </pre>
 </li>
 </ul>
@@ -211,14 +211,14 @@
 <h3 id="advanced" name="advanced">Defining Advanced Features in the Advanced Tab</h3>
 
 
-       <p>You can define advanced application features, such as metadata and data and application control functionalities, account, and miscellaneous options, in the <strong>Advanced</strong> tab of the manifest editor.</p> 
-  <p>You can perform the following tasks using the <strong>Advanced</strong> tab:</p> 
+       <p>You can define advanced application features, such as metadata and data and application control functionalities, account, and miscellaneous options, in the <strong>Advanced</strong> tab of the manifest editor.</p>
+  <p>You can perform the following tasks using the <strong>Advanced</strong> tab:</p>
   <ul>
-       <li>Add metadata. <p>In the <strong>Meta Data</strong> section, you can add user-defined key-value pairs to the application to be used for filtering in the package manager.</p> </li> 
-   <li>Export <a href="../../../../org.tizen.guides/html/native/app_management/data_control_n.htm">data control</a> functionality. 
-   <p>A service application can act as a service provider and allow other applications to access specific data.</p> 
-   <p>To define the kind of access and data your service application provides to other applications, click <strong>+</strong> in the <strong>Data Control</strong> section, and define the data control details.</p> </li>     
-   <li>Set miscellaneous options. 
+       <li>Add metadata. <p>In the <strong>Meta Data</strong> section, you can add user-defined key-value pairs to the application to be used for filtering in the package manager.</p> </li>
+   <li>Export <a href="../../../../org.tizen.guides/html/native/app_management/data_control_n.htm">data control</a> functionality.
+   <p>A service application can act as a service provider and allow other applications to access specific data.</p>
+   <p>To define the kind of access and data your service application provides to other applications, click <strong>+</strong> in the <strong>Data Control</strong> section, and define the data control details.</p> </li>
+   <li>Set miscellaneous options.
    <p>In the <strong>Miscellaneous Options</strong> section, you can set various application options:</p>
    <ul>
    <li><strong>Manage task</strong>
@@ -229,55 +229,55 @@
    <p>Define whether hardware acceleration is enabled for the application.</p></li>
    <li><strong>Launch Mode</strong>
    <p>Define the launch mode of the application (whether the application is launched as a main or sub application, or whether a caller application defines the launch mode when the application is launched by an application control request).</p></li>
-       </ul>   
-</li> 
+       </ul>
+</li>
 <li>Define application controls.
 <p>You can <a href="../../../../org.tizen.guides/html/native/app_management/app_controls_n.htm#export_appcontrol">export the application control functionality</a> of your application.</p>
-<p>To define an application control used to access the functionality of your application, click <strong>+</strong> in the <strong>Application Control</strong> section.</p> 
-<p>Each application control can have multiple operation, MIME type, and URI attributes.</p> </li>  
+<p>To define an application control used to access the functionality of your application, click <strong>+</strong> in the <strong>Application Control</strong> section.</p>
+<p>Each application control can have multiple operation, MIME type, and URI attributes.</p> </li>
 
   <li>Add accounts (in mobile applications only).
    <p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p>
    <p>To register an account provider, click <strong>+</strong> in the <strong>Account</strong> section and define the account provider information, as described in the following table.</p>
-<p align="center" class="Table"><strong>Table: Account provider properties</strong></p> 
+<p align="center" class="Table"><strong>Table: Account provider properties</strong></p>
    <table border="1">
    <tbody>
 <tr>
-<th colspan="2">Account property</th> 
-     <th>Data type</th> 
-     <th>Property type</th> 
+<th colspan="2">Account property</th>
+     <th>Data type</th>
+     <th>Property type</th>
     </tr>
 <tr>
-<td colspan="2">Multiple account</td> 
+<td colspan="2">Multiple account</td>
      <td>
-<code>bool</code> </td> 
+<code>bool</code> </td>
      <td>
 <p>Indicates whether multiple accounts are supported.</p>
 <p>This is a mandatory property.</p>
-</td> 
+</td>
     </tr>
 <tr>
-<td colspan="2">Provider ID</td> 
+<td colspan="2">Provider ID</td>
      <td>
-<code>String</code> </td> 
+<code>String</code> </td>
      <td>
 <p>ID of the account provider.</p>
-</td> 
+</td>
     </tr>
 <tr>
-<td colspan="2">Default label</td> 
+<td colspan="2">Default label</td>
      <td>
-<code>String</code> </td> 
+<code>String</code> </td>
      <td>
 <p>Display name of the account provider.</p>
 <p>This is a mandatory property.</p>
-</td> 
+</td>
     </tr>
 <tr>
 <td rowspan="2">Icons</td>
-<td>Icon</td> 
+<td>Icon</td>
      <td>
-<code>String</code> </td> 
+<code>String</code> </td>
      <td>
 <p>File path of the account provider icon.</p> <p>The icon size is:</p>
         <ul>
@@ -286,12 +286,12 @@
         </ul>
 <p>Since the icon is used in <strong>Settings &gt; Accounts</strong>, place the icon in a shared directory.</p>
 <p>This is a mandatory property.</p>
-</td> 
+</td>
     </tr>
 <tr>
-<td>Icon small</td> 
+<td>Icon small</td>
      <td>
-<code>String</code> </td> 
+<code>String</code> </td>
      <td>
 <p>File path of the account provider icon.</p> <p>The icon size is:</p>
         <ul>
@@ -300,56 +300,56 @@
         </ul>
 <p>Since the small icon is used in other applications, place the icon in a shared directory.</p>
 <p>This is a mandatory property.</p>
-</td> 
+</td>
     </tr>
 
 <tr>
-<td colspan="2">Name</td> 
+<td colspan="2">Name</td>
      <td>
-<code>String</code> </td> 
+<code>String</code> </td>
      <td>
 <p>Localization support for the display name.</p>
 <p>To add a localized name, click <strong>+</strong> in the <strong>Name</strong> panel, select the language, define the display name for that language, and click <strong>OK</strong>.</p>
-</td> 
+</td>
     </tr>
-<tr>   
-<td colspan="2">Capabilities</td> 
-     <td><code>String</code></td> 
+<tr>
+<td colspan="2">Capabilities</td>
+     <td><code>String</code></td>
      <td> <p>Capability of the account provider.</p>
-<p>Capabilities are defined in the <code>http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</code> IRI format.</p> <p>The following predefined capabilities can be used in Tizen:</p> 
+<p>Capabilities are defined in the <code>http://&lt;VENDOR_INFORMATION&gt;/accounts/capability/&lt;NAME&gt;</code> IRI format.</p> <p>The following predefined capabilities can be used in Tizen:</p>
       <ul>
                <li>
                <code>http://tizen.org/account/capability/calendar</code> <p>Used when the account is related to a calendar.</p>
-               </li> 
+               </li>
                <li>
                <code>http://tizen.org/account/capability/contact</code> <p>Used when the account is related to contacts.</p>
-               </li> 
+               </li>
                <li>
                <code>http://tizen.org/account/capability/document</code> <p>Used when the account is related to a document.</p>
                </li>
                <li>
                <code>http://tizen.org/account/capability/email</code> <p>Used when the account is related to email.</p>
-               </li>  
+               </li>
                <li>
                <code>http://tizen.org/account/capability/game</code> <p>Used when the account is related to a game.</p>
-               </li>  
+               </li>
                <li>
                <code>http://tizen.org/account/capability/message</code> <p>Used when the account is related to a message.</p>
-               </li>  
+               </li>
                <li>
                <code>http://tizen.org/account/capability/music</code> <p>Used when the account is related to music.</p>
-               </li>  
+               </li>
                <li>
                <code>http://tizen.org/account/capability/photo</code> <p>Used when the account is related to a photo.</p>
-               </li>  
+               </li>
                <li>
                <code>http://tizen.org/account/capability/video</code> <p>Used when the account is related to a video.</p>
-               </li>    
+               </li>
 
       </ul>
 <p>To add a capability, click <strong>+</strong> in the <strong>Capabilities</strong> panel. A default capability is added to the table. Click the default capability and change it to the one you need.</p>
 <p>This is an optional property.</p>
-</td> 
+</td>
     </tr>
 </tbody>
 </table>
@@ -358,7 +358,7 @@
   <li>Add the background category type (since Tizen 2.4). <p>You can <a href="../../../../org.tizen.guides/html/native/app_management/efl_ui_app_n.htm#bg-category">describe the background category</a> of your Tizen native application.</p> <p>To add background category types to allow running on the background, click <strong>+</strong> in the <strong>Background Category</strong> panel, select the category type, and click <strong>OK</strong>.</p> </li>
 
   <li>Add shortcuts. <p>To add a shortcut for the application, click <strong>+</strong> in the <strong>Shortcut List</strong> panel and define the shortcut details, as described in the following table.</p>
-  
+
 <p align="center" class="Table"><strong>Table: Shortcut properties</strong></p>
 <table>
        <tbody>
@@ -399,10 +399,10 @@
                        <td><p>Localization support for the display name.</p>
 <p>To add a localized name, click <strong>+</strong> in the <strong>Name</strong> panel, select the language, define the display name for that language, and click <strong>OK</strong>.</p></td>
                </tr>
-               
+
        </tbody>
-</table>       
- 
+</table>
+
   </li>
   </ul>
 
@@ -410,7 +410,7 @@
 
        <p>The <strong>Source</strong> tab of the manifest editor shows the code of the <code>tizen-manifest.xml</code> file. You can <a href="../../../../org.tizen.studio/html/native_tools/manifest_text_editor_n.htm">edit the basic syntax of the XML document</a> and also see how changes made on the other tabs are reflected in the raw XML source content.</p>
 
-       
+
            <div class="note">
         <strong>Note</strong>
         If you edit application information manually in the <code>tizen-manifest.xml</code> file source code, you can introduce errors preventing the application from running normally.
@@ -418,7 +418,7 @@
 
 
 
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/native/wearable/first_app_wn.htm b/org.tizen.training/html/native/wearable/first_app_wn.htm
index b57a5d2..b3f91d7 100644 (file)
--- a/org.tizen.training/html/native/wearable/first_app_wn.htm
+++ b/org.tizen.training/html/native/wearable/first_app_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Your First Tizen Wearable Native Application</title>  
+       <title>Creating Your First Tizen Wearable Native Application</title>
 </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -25,7 +25,7 @@
                        <li><a href="#create">Creating a Project</a></li>
                        <li><a href="#build">Building Your Application</a></li>
                        <li><a href="#run">Running Your Application</a></li>
-                       <li><a href="#build_ui">Building a Simple UI</a></li>           
+                       <li><a href="#build_ui">Building a Simple UI</a></li>
                </ul>
                <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -36,7 +36,7 @@
            <li><a href="../process/running_app_n.htm">Running Applications</a></li>
         </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Creating Your First Tizen Wearable Native Application</h1>
@@ -173,7 +173,7 @@
 </ol>
 
 <p>For more information about configuring the application, see <a href="../process/setting_properties_n.htm#manifest">Setting the Application Manifest</a>.</p>
- 
+
 <h2 id="build">Building Your Application</h2>
 
 <p>After you have created the application project, you can implement the required features. In this example, only the default features from the project template are used, and no code changes are required.</p>
@@ -214,7 +214,7 @@
 
 
 <p>After you have built the application, run it.</p>
- 
+
  <h2 id="run">Running Your Application</h2>
 
 <p>You can run the application on the emulator or a real target device.</p>
@@ -252,12 +252,12 @@
 <li>Click the run icon in the toolbar.</li></ul>
 <p>If you have created multiple emulator instances, select the instance you want from the combo box in the toolbar before selecting to run the application. If you select an offline emulator, it is automatically launched when you select to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p>
 </li>
 
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_wn.png" alt="Application running in the emulator" /></p>
-  
+
      <div class="note">
         <strong>Note</strong>
         If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).
@@ -325,7 +325,7 @@
 <li>Run the application:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, select the device.</li>
-<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>. 
+<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>.
 
 <p align="center"><img src="../../images/app_run_wn.png" alt="Run the application on a target device" /></p>
 
@@ -335,13 +335,13 @@
 
 <p>If you have both a connected device and existing emulator instances, select the device from the combo box in the toolbar before selecting to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p>
 
 </li>
 <li>Confirm that the application launches in the target device.</li>
 </ol>
 
-  
+
      <div class="note">
         <strong>Note</strong>
         The application is launched using the default debug run configuration. To create and use another configuration:
@@ -351,21 +351,21 @@
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_n.png" /></p></li>
         </ol>
     </div>
-  
-<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p> 
+
+<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
 </ol>
 
 <h2 id="build_ui">Building a Simple UI</h2>
 
 <p>The following steps demonstrate how to create a simple user interface for a circular wearable device using EFL. The following figure shows the screen you can create with these instructions.</p>
- 
-<p align="center"><strong>Figure: Wearable native UI</strong></p> 
-<p align="center"><img alt="Wearable native UI" src="../../images/emulator_running_wn.png" /></p> 
+
+<p align="center"><strong>Figure: Wearable native UI</strong></p>
+<p align="center"><img alt="Wearable native UI" src="../../images/emulator_running_wn.png" /></p>
 
 <p>This guide consists of the following:</p>
 <ol>
-<li>Defining the data structure</li> 
+<li>Defining the data structure</li>
 <li>Registering life-cycle callbacks</li>
 <li>Creating UI objects</li>
 </ol>
@@ -376,9 +376,9 @@
 
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label;
 };
 typedef struct appdata appdata_s;
 </pre>
@@ -387,11 +387,11 @@ typedef struct appdata appdata_s;
 <p>The <code>main()</code> function has callbacks that manage specific parts of the application life-cycle:</p>
 
 <ul>
-<li><code>app_create</code> 
+<li><code>app_create</code>
 <ul><li>Called when the application process starts.</li>
 <li>Used to create UI components.</li>
 </ul></li>
-<li><code>app_terminate</code> 
+<li><code>app_terminate</code>
 <ul><li>Called while the application process is terminating.</li>
 <li>Called after the main loop quits.</li>
 </ul></li>
@@ -401,7 +401,7 @@ typedef struct appdata appdata_s;
 <li><code>app_pause</code> (UI applications only)
 <ul><li>Called when the application window is totally hidden.</li>
 </ul></li>
-<li><code>app_control</code> 
+<li><code>app_control</code>
 <ul><li>Called after the <code>app_create</code> callback when the process starts or called when a launch request is received while the process is running.</li>
 <li>Can receive <code>app_control</code> data (parameters for launching the application).</li>
 <li>Used to implement parameter-specific actions of the application.</li>
@@ -411,22 +411,22 @@ typedef struct appdata appdata_s;
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL,};
-
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
-
-&nbsp;&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;app_main() failed. Err=%d&quot;, ret);
-
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    appdata_s ad = {0,};
+    int ret = 0;
+    ui_app_lifecycle_callback_s event_callback = {0,};
+    app_event_handler_h handlers[5] = {NULL,};
+
+    event_callback.create = app_create;
+    event_callback.terminate = app_terminate;
+    event_callback.pause = app_pause;
+    event_callback.resume = app_resume;
+    event_callback.app_control = app_control;
+
+    ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    if (ret != APP_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "app_main() failed. Err=%d", ret);
+
+    return ret;
 }
 </pre>
 
@@ -437,17 +437,17 @@ main(int argc, char *argv[])
 static bool
 app_create(void *data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Hook to take necessary actions before the main event loop starts
-&nbsp;&nbsp;&nbsp;&nbsp;   Initialize UI resources and application data
-&nbsp;&nbsp;&nbsp;&nbsp;   If this function returns true, the application main loop starts
-&nbsp;&nbsp;&nbsp;&nbsp;   If this function returns false, the application is terminated
-&nbsp;&nbsp;&nbsp;&nbsp;*/
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+    /*
+       Hook to take necessary actions before the main event loop starts
+       Initialize UI resources and application data
+       If this function returns true, the application main loop starts
+       If this function returns false, the application is terminated
+    */
+    appdata_s *ad = data;
 
-&nbsp;&nbsp;&nbsp;&nbsp;create_base_gui(ad);
+    create_base_gui(ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 
@@ -457,34 +457,34 @@ app_create(void *data)
 static void
 create_base_gui(appdata_s *ad)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
-
-&nbsp;&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Conformant */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Label */
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, &quot;&lt;align=center&gt;Hello Tizen&lt;/align&gt;&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;label);
-
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+    /* Window */
+    ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+    elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+    if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
+        int rots[4] = {0, 90, 180, 270};
+        elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+    }
+
+    evas_object_smart_callback_add(ad-&gt;win, "delete,request", win_delete_request_cb, NULL);
+    eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+    /* Conformant */
+    ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+    elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+    elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
+    evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+    evas_object_show(ad-&gt;conform);
+
+    /* Label */
+    ad-&gt;label = elm_label_add(ad-&gt;conform);
+    elm_object_text_set(ad-&gt;label, "&lt;align=center&gt;Hello Tizen&lt;/align&gt;");
+    evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_object_content_set(ad-&gt;conform, ad-&gt;label);
+
+    /* Show the window after the base GUI is set up */
+    evas_object_show(ad-&gt;win);
 }
 </pre>
 
@@ -500,17 +500,17 @@ ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
 elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
 
 if (elm_win_wm_rotation_supported_get(ad-&gt;win)) {
-&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = {0, 90, 180, 270};
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+    int rots[4] = {0, 90, 180, 270};
+    elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
 }
-evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+evas_object_smart_callback_add(ad-&gt;win, "delete,request", win_delete_request_cb, NULL);
 eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
 </pre>
 </li>
 <li>
-<p>You can create a conformant object that is based on the window.</p> 
+<p>You can create a conformant object that is based on the window.</p>
 <p>The <code>elm_win_indicator_mode_set()</code> function decides whether the indicator is visible, and the <code>elm_win_indicator_opacity_set()</code> function sets the indicator opacity mode.</p>
-<p>You can set the conformant object as a resize object of the window by using the <code>elm_win_resize_object_add()</code> function. It means that the conformant size and position are controlled by the window object directly.</p> 
+<p>You can set the conformant object as a resize object of the window by using the <code>elm_win_resize_object_add()</code> function. It means that the conformant size and position are controlled by the window object directly.</p>
 <p>The <code>evas_object_show()</code> function makes the conformant object visible.</p>
 
 <pre class="prettyprint">
@@ -530,7 +530,7 @@ evas_object_show(ad-&gt;conform);
 <pre class="prettyprint">
 /* Label */
 ad-&gt;label = elm_label_add(ad-&gt;conform);
-elm_object_text_set(ad-&gt;label, &quot;&lt;align=center&gt;Hello Tizen&lt;/align&gt;&quot;);
+elm_object_text_set(ad-&gt;label, "&lt;align=center&gt;Hello Tizen&lt;/align&gt;");
 evas_object_size_hint_weight_set(ad-&gt;label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 elm_object_content_set(ad-&gt;conform, ad-&gt;label);
 </pre>
@@ -544,7 +544,7 @@ evas_object_show(ad-&gt;win);
 </pre>
 </li></ul>
 
- 
+
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.training/html/native/wearable_watch/first_app_watch_wn.htm b/org.tizen.training/html/native/wearable_watch/first_app_watch_wn.htm
index 70d102d..422ca91 100644 (file)
--- a/org.tizen.training/html/native/wearable_watch/first_app_watch_wn.htm
+++ b/org.tizen.training/html/native/wearable_watch/first_app_watch_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Your First Tizen Wearable Native Watch Application</title>  
+       <title>Creating Your First Tizen Wearable Native Watch Application</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -26,7 +26,7 @@
             <li><a href="#project">Creating a Project</a></li>
                        <li><a href="#build">Building Your Application</a></li>
                        <li><a href="#run">Running Your Application</a></li>
-                       <li><a href="#build_ui">Building a Simple UI</a></li>   
+                       <li><a href="#build_ui">Building a Simple UI</a></li>
         </ul>
                <p class="toc-title">Related Info</p>
         <ul class="toc">
@@ -35,7 +35,7 @@
                        <li><a href="../process/app_dev_process_n.htm#build">Building the Application</a></li>
                        <li><a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">Running Applications on the Emulator</a></li>
            <li><a href="../process/running_app_n.htm">Running Applications</a></li>
-               
+
         </ul>
     </div></div>
 </div>
@@ -257,15 +257,15 @@
 <li>Click the run icon in the toolbar.</li></ul>
 <p>If you have created multiple emulator instances, select the instance you want from the combo box in the toolbar before selecting to run the application. If you select an offline emulator, it is automatically launched when you select to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p>
 <p>In the <strong>Console</strong> view, you can see that the application is successfully installed. However, it does not run on the emulator screen until you change the watch face in the emulator <strong>Settings</strong> menu.</p>
-<p align="center"><img alt="Successful installation" src="../../images/watch_run_install_wn.png" /></p>  
+<p align="center"><img alt="Successful installation" src="../../images/watch_run_install_wn.png" /></p>
 </li>
 <li id="watchface">Change the watch face.
 <p>When a watch application is successfully installed on the emulator, the watch UI is visible in the emulator <strong>Clock</strong> menu.</p>
 <p>To change the watch face and make the watch application visible:</p>
 
-<p align="center"><img alt="Changing the watch face" src="../../images/watch_run_change_wn.png" /></p> 
+<p align="center"><img alt="Changing the watch face" src="../../images/watch_run_change_wn.png" /></p>
 
 <ol type="a">
 <li>If the emulator display has been switched off, activate it by pressing the <strong>Power</strong> key (in the bottom right corner of the emulator).</li>
@@ -335,7 +335,7 @@ cd tizen-sdk/tools
 <li>Run the application:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, select the device.</li>
-<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>. 
+<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>.
 
 <p align="center"><img src="../../images/app_run_wn_watch.png" alt="Run the application on a target device" /></p>
 
@@ -345,7 +345,7 @@ cd tizen-sdk/tools
 
 <p>If you have both a connected device and existing emulator instances, select the device from the combo box in the toolbar before selecting to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p>
 
 </li>
 <li>Confirm that the application launches in the target device.
@@ -362,7 +362,7 @@ cd tizen-sdk/tools
         </ol>
     </div>
 
-<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p> 
+<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
 </ol>
 
@@ -388,16 +388,16 @@ cd tizen-sdk/tools
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;watch_app_lifecycle_callback_s event_callback = {0,};
+    appdata_s ad = {0,};
+    int ret = 0;
+    watch_app_lifecycle_callback_s event_callback = {0,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.time_tick = app_time_tick;
+    event_callback.create = app_create;
+    event_callback.time_tick = app_time_tick;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = watch_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    ret = watch_app_main(argc, argv, &amp;event_callback, &amp;ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 
@@ -407,12 +407,12 @@ main(int argc, char* argv[])
 static bool
 app_create(int width, int height, void* data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/*
-&nbsp;&nbsp;&nbsp;&nbsp;   Hook to take necessary actions before the main event loop starts
-&nbsp;&nbsp;&nbsp;&nbsp;   This usually means initializing the UI and application data
-&nbsp;&nbsp;&nbsp;&nbsp;*/
+    /*
+       Hook to take necessary actions before the main event loop starts
+       This usually means initializing the UI and application data
+    */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -421,8 +421,8 @@ app_create(int width, int height, void* data)
 static void
 app_time_tick(watch_time_h watch_time, void* data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Called at least once per second */
-&nbsp;&nbsp;&nbsp;&nbsp;/* Draw a normal watch with the hour, minute, and second */
+    /* Called at least once per second */
+    /* Draw a normal watch with the hour, minute, and second */
 }
 </pre>
 </li></ul>
@@ -443,60 +443,60 @@ app_time_tick(watch_time_h watch_time, void* data)
 
 <pre class="prettyprint">
 struct appdata {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label;
 };
 typedef struct appdata appdata_s;
 
 static void
 create_base_gui(appdata_s *ad, int width, int height)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;watch_time_h watch_time = NULL;
+    int ret;
+    watch_time_h watch_time = NULL;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = watch_app_get_elm_win(&amp;ad-&gt;win);
+    ret = watch_app_get_elm_win(&amp;ad-&gt;win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to get window. err = %d&quot;, ret);
+    if (ret != APP_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to get window. err = %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;win, width, height);
+    evas_object_resize(ad-&gt;win, width, height);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
+    ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+    evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+    evas_object_show(ad-&gt;conform);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;label = elm_label_add(ad-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;label, width, height / 3);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;label, 0, height / 3);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;label);
+    ad-&gt;label = elm_label_add(ad-&gt;conform);
+    evas_object_resize(ad-&gt;label, width, height / 3);
+    evas_object_move(ad-&gt;label, 0, height / 3);
+    evas_object_show(ad-&gt;label);
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = watch_time_get_current_time(&amp;watch_time);
+    ret = watch_time_get_current_time(&amp;watch_time);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to get current time. err = %d&quot;, ret);
+    if (ret != APP_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to get current time. err = %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;update_watch(ad, watch_time, 0);
-&nbsp;&nbsp;&nbsp;&nbsp;watch_time_delete(watch_time);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+    update_watch(ad, watch_time, 0);
+    watch_time_delete(watch_time);
+    evas_object_show(ad-&gt;win);
 }
 
 static bool
 app_create(int width, int height, void *date)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Define system callbacks */
+    /* Define system callbacks */
 
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;create_base_gui(ad, width, height);
+    appdata_s *ad = data;
+    create_base_gui(ad, width, height);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return true;
+    return true;
 }
 </pre>
 </li>
@@ -505,34 +505,34 @@ app_create(int width, int height, void *date)
 static void
 update_watch(appdata_s *ad, watch_time_h watch_time, int ambient)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;char watch_text[TEXT_BUF_SIZE];
-&nbsp;&nbsp;&nbsp;&nbsp;int hour24;
-&nbsp;&nbsp;&nbsp;&nbsp;int minute;
-&nbsp;&nbsp;&nbsp;&nbsp;int second;
-&nbsp;&nbsp;&nbsp;&nbsp;if (watch_time == NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-
-&nbsp;&nbsp;&nbsp;&nbsp;watch_time_get_hour24(watch_time, &amp;hour24);
-&nbsp;&nbsp;&nbsp;&nbsp;watch_time_get_minute(watch_time, &amp;minute);
-&nbsp;&nbsp;&nbsp;&nbsp;watch_time_get_second(watch_time, &amp;second);
-&nbsp;&nbsp;&nbsp;&nbsp;if (!ambient) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(watch_text, TEXT_BUF_SIZE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;align=center&gt;Hello Watch&lt;br/&gt;%02d:%02d:%02d&lt;/align&gt;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hour24, minute, second);
-&nbsp;&nbsp;&nbsp;&nbsp;} else {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(watch_text, TEXT_BUF_SIZE,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;&lt;align=center&gt;Hello Watch&lt;br/&gt;%02d:%02d&lt;/align&gt;&quot;,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hour24, minute);
-&nbsp;&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(ad-&gt;label, watch_text);
+    char watch_text[TEXT_BUF_SIZE];
+    int hour24;
+    int minute;
+    int second;
+    if (watch_time == NULL)
+        return;
+
+    watch_time_get_hour24(watch_time, &amp;hour24);
+    watch_time_get_minute(watch_time, &amp;minute);
+    watch_time_get_second(watch_time, &amp;second);
+    if (!ambient) {
+        snprintf(watch_text, TEXT_BUF_SIZE,
+                 "&lt;align=center&gt;Hello Watch&lt;br/&gt;%02d:%02d:%02d&lt;/align&gt;",
+                 hour24, minute, second);
+    } else {
+        snprintf(watch_text, TEXT_BUF_SIZE,
+                 "&lt;align=center&gt;Hello Watch&lt;br/&gt;%02d:%02d&lt;/align&gt;",
+                 hour24, minute);
+    }
+
+    elm_object_text_set(ad-&gt;label, watch_text);
 }
 
 static void
 app_time_tick(watch_time_h watch_time, void* data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;update_watch(ad, watch_time, 0);
+    appdata_s *ad = data;
+    update_watch(ad, watch_time, 0);
 }
 </pre></li></ol>
 
@@ -545,7 +545,7 @@ app_time_tick(watch_time_h watch_time, void* data)
         <strong>Note</strong>
         To use the ambient mode, the user must enable it in the device settings. In addition, in the Gear S2 device, the ambient mode activates only when you are wearing the watch on the wrist.
     </div>
-  
+
 <p>To use the ambient mode:</p>
 
 <ol>
@@ -557,17 +557,17 @@ app_time_tick(watch_time_h watch_time, void* data)
 static void
 app_ambient_tick(watch_time_h watch_time, void* data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-&nbsp;&nbsp;&nbsp;&nbsp;update_watch(ad, watch_time, 1);
+    appdata_s *ad = data;
+    update_watch(ad, watch_time, 1);
 }
 
 static void
 app_ambient_changed(bool ambient_mode, void* data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (ambient_mode)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Prepare to enter the ambient mode */
-&nbsp;&nbsp;&nbsp;&nbsp;else
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Prepare to exit the ambient mode */
+    if (ambient_mode)
+        /* Prepare to enter the ambient mode */
+    else
+        /* Prepare to exit the ambient mode */
 }
 </pre>
 </li>
@@ -577,19 +577,19 @@ app_ambient_changed(bool ambient_mode, void* data)
 int
 main(int argc, char* argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;int ret = 0;
-&nbsp;&nbsp;&nbsp;&nbsp;watch_app_lifecycle_callback_s event_callback = {0,};
+    appdata_s ad = {0,};
+    int ret = 0;
+    watch_app_lifecycle_callback_s event_callback = {0,};
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.time_tick = app_time_tick;
+    event_callback.create = app_create;
+    event_callback.time_tick = app_time_tick;
 
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.ambient_tick = app_ambient_tick;
-&nbsp;&nbsp;&nbsp;&nbsp;event_callback.ambient_changed = app_ambient_changed;
+    event_callback.ambient_tick = app_ambient_tick;
+    event_callback.ambient_changed = app_ambient_changed;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = watch_app_main(argc, argv, &amp;event_callback, &amp;ad);
+    ret = watch_app_main(argc, argv, &amp;event_callback, &amp;ad);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre>
 </li>
diff --git a/org.tizen.training/html/native/wearable_widget/first_app_widget_wn.htm b/org.tizen.training/html/native/wearable_widget/first_app_widget_wn.htm
index ee98b0c..9472f88 100644 (file)
--- a/org.tizen.training/html/native/wearable_widget/first_app_widget_wn.htm
+++ b/org.tizen.training/html/native/wearable_widget/first_app_widget_wn.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Your First Tizen Wearable Native Widget Application</title>  
+       <title>Creating Your First Tizen Wearable Native Widget Application</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -40,7 +40,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-       
+
 <h1>Creating Your First Tizen Wearable Native Widget Application</h1>
 
 <p><strong>Welcome to Tizen wearable native widget application development!</strong></p>
@@ -48,10 +48,10 @@
 <p>A wearable native widget application is created using the C language, and can be run on Tizen wearable devices. The application uses the native API, which provides various interfaces to the device hardware allowing you to take advantage of numerous capabilities tailored to run with limited device resources.</p>
 
 <p>A widget application is one of the Tizen application types. It can be shown by specific UI applications (such as the home screen and lock screen) that can contain widget applications.</p>
- 
-<p align="center"><strong>Figure: Widget application in a wearable device</strong></p> 
-<p align="center"><img alt="Widget application in a wearable device" src="../../images/widget_app_wearable.png" /></p>  
- 
+
+<p align="center"><strong>Figure: Widget application in a wearable device</strong></p>
+<p align="center"><img alt="Widget application in a wearable device" src="../../images/widget_app_wearable.png" /></p>
+
 
 <p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic wearable native widget application, which displays some text on the screen with no user interaction:</p>
 
@@ -267,13 +267,13 @@
 <li>Click the run icon in the toolbar.</li></ul>
 <p>If you have created multiple emulator instances, select the instance you want from the combo box in the toolbar before selecting to run the application. If you select an offline emulator, it is automatically launched when you select to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p>
 </li>
 
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_wn_widget.png" alt="Application running in the emulator" /></p>
 
-  
+
      <div class="note">
         <strong>Note</strong>
         If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).
@@ -286,16 +286,16 @@
 <li>Swipe the home screen to the right and select <strong>+</strong>.</li>
 <li>Scroll down until you see your widget application, and select it.</li>
 </ol>
-<p align="center"><img alt="Adding to home screen" src="../../images/widget_run_add_home_wn.png" /></p> 
+<p align="center"><img alt="Adding to home screen" src="../../images/widget_run_add_home_wn.png" /></p>
 
 <p>You can see the added widget on the home screen. To access the widget from the home screen, swipe right.</p>
-<p align="center"><img alt="Home screen widget" src="../../images/widget_run_home_wn.png" /></p> 
+<p align="center"><img alt="Home screen widget" src="../../images/widget_run_home_wn.png" /></p>
 <p>While the application is running, the <strong>Log</strong> view in the Tizen Studio shows the log, debug, and exception messages from the methods defined in the log macros. To see the view, in the Tizen Studio menu, go to <strong>Window &gt; Show View &gt; Log</strong>.</p>
 </li>
 
 </ol>
 </li></ol>
- 
+
 <p>For more information on using the emulator features, see <a href="../../../../org.tizen.studio/html/common_tools/emulator_control_panel.htm">Using Emulator Control Keys, Menu, and Panel</a> and <a href="../../../../org.tizen.studio/html/common_tools/emulator_features.htm">Using Extended Emulator Features</a>.</p>
 
 <h3 id="target">Running on a Target Device</h3>
@@ -349,7 +349,7 @@ cd tizen-sdk/tools
 <li>Run the application:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, select the device.</li>
-<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>. 
+<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Native Application</strong>.
 
 <p align="center"><img src="../../images/app_run_wn_widget.png" alt="Run the application on a target device" /></p>
 
@@ -359,13 +359,13 @@ cd tizen-sdk/tools
 
 <p>If you have both a connected device and existing emulator instances, select the device from the combo box in the toolbar before selecting to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p>
 
 </li>
 <li>Confirm that the application launches in the target device.
 <p>Like with the <a href="#viewer">emulator</a>, you must add the widget to the home screen before you can see it.</p></li>
-</ol> 
-  
+</ol>
+
      <div class="note">
         <strong>Note</strong>
         The application is launched using the default debug run configuration. To create and use another configuration:
@@ -376,7 +376,7 @@ cd tizen-sdk/tools
         </ol>
     </div>
 
-<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p> 
+<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
 </ol>
 
@@ -413,17 +413,17 @@ cd tizen-sdk/tools
 int
 main(int argc, char *argv[])
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_lifecycle_callback_s ops = {0,};
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    widget_app_lifecycle_callback_s ops = {0,};
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ops.create = widget_app_create;
-&nbsp;&nbsp;&nbsp;&nbsp;ops.terminate = widget_app_terminate;
+    ops.create = widget_app_create;
+    ops.terminate = widget_app_terminate;
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = widget_app_main(argc, argv, &amp;ops, NULL);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != WIDGET_ERROR_NONE)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;widget_app_main() failed. Err = %d&quot;, ret);
+    ret = widget_app_main(argc, argv, &amp;ops, NULL);
+    if (ret != WIDGET_ERROR_NONE)
+        dlog_print(DLOG_ERROR, LOG_TAG, "widget_app_main() failed. Err = %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return ret;
+    return ret;
 }
 </pre></li>
 <li id="initial">Use the <code>widget_app_create()</code> life-cycle function of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__APP__MODULE.html">Widget Application</a> API to initialize any resources that can be shared among widget instances. This function is called before the main event loop starts.
@@ -432,8 +432,8 @@ main(int argc, char *argv[])
 static widget_class_h
 widget_app_create(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Hook to take necessary actions before the main event loop starts */
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s ops = {NULL,};
+    /* Hook to take necessary actions before the main event loop starts */
+    widget_instance_lifecycle_callback_s ops = {NULL,};
 </pre>
 </li>
 <li>Register the callback functions and make a class for widget instances.
@@ -441,7 +441,7 @@ widget_app_create(void *user_data)
 <p>At the end of the <code>widget_app_create()</code> function, remember to create a widget instance class and return a handle for it, so that the handle can be used for making widget instances.</p>
 
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;&nbsp;return widget_app_class_create(ops, user_data);
+    return widget_app_class_create(ops, user_data);
 }
 </pre></li>
 
@@ -451,7 +451,7 @@ widget_app_create(void *user_data)
 static void
 widget_app_terminate(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;/* Release all resources */
+    /* Release all resources */
 }
 </pre></li></ol>
 
@@ -471,18 +471,18 @@ widget_app_terminate(void *user_data)
 <pre class="prettyprint">
 static int
 widget_instance_create(widget_context_h context, bundle *content,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int w, int h, void *user_data)
+                       int w, int h, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = (widget_instance_data_s*)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;malloc(sizeof(widget_instance_data_s));
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
+    widget_instance_data_s *wid = (widget_instance_data_s*)
+                                  malloc(sizeof(widget_instance_data_s));
+    int ret;
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (content != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Recover the previous status with the bundle object */
+    if (content != NULL)
+        /* Recover the previous status with the bundle object */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Create the UI */
+    /* Create the UI */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre></li>
 <li>This callback is triggered when the widget instance is destroyed.
@@ -491,12 +491,12 @@ widget_instance_create(widget_context_h context, bundle *content,
 <pre class="prettyprint">
 static int
 widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle *content, void *user_data)
+                        bundle *content, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;if (reason != WIDGET_APP_DESTROY_TYPE_PERMANENT)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Save the current status at the bundle object */
+    if (reason != WIDGET_APP_DESTROY_TYPE_PERMANENT)
+        /* Save the current status at the bundle object */
 
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre></li>
 <li>This callback is triggered when the widget instance is paused.
@@ -506,7 +506,7 @@ widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reas
 static int
 widget_instance_pause(widget_context_h context, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre></li>
 <li>This callback is triggered when the widget instance is resumed.
@@ -516,7 +516,7 @@ widget_instance_pause(widget_context_h context, void *user_data)
 static int
 widget_instance_resume(widget_context_h context, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre></li>
 <li>This callback is triggered when a widget update event is received.
@@ -526,7 +526,7 @@ widget_instance_resume(widget_context_h context, void *user_data)
 static int
 widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre></li></ul>
 </li>
@@ -536,15 +536,15 @@ widget_instance_update(widget_context_h context, bundle *content, int force, voi
 static widget_class_h
 widget_app_create(void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_lifecycle_callback_s ops = {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.create = widget_instance_create,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.destroy = widget_instance_destroy,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.pause = widget_instance_pause,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.resume = widget_instance_resume,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.update = widget_instance_update,
-&nbsp;&nbsp;&nbsp;&nbsp;};
-
-&nbsp;&nbsp;&nbsp;&nbsp;return widget_app_class_create(ops, user_data);
+    widget_instance_lifecycle_callback_s ops = {
+        .create = widget_instance_create,
+        .destroy = widget_instance_destroy,
+        .pause = widget_instance_pause,
+        .resume = widget_instance_resume,
+        .update = widget_instance_update,
+    };
+
+    return widget_app_class_create(ops, user_data);
 }
 </pre></li>
 </ol>
@@ -557,52 +557,52 @@ widget_app_create(void *user_data)
 #include &lt;widget_app_efl.h&gt;
 
 struct widget_instance_data {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label;
 };
 typedef struct widget_instance_data widget_instance_data_s;
 
 static int
 widget_instance_create(widget_context_h context, bundle *content,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int w, int h, void *user_data)
+                       int w, int h, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = (widget_instance_data_s*)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;malloc(sizeof(widget_instance_data_s));
+    widget_instance_data_s *wid = (widget_instance_data_s*)
+                                  malloc(sizeof(widget_instance_data_s));
 
-&nbsp;&nbsp;&nbsp;&nbsp;int ret;
-&nbsp;&nbsp;&nbsp;&nbsp;if (content != NULL)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Recover the previous status with the bundle object */
+    int ret;
+    if (content != NULL)
+        /* Recover the previous status with the bundle object */
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Window */
-&nbsp;&nbsp;&nbsp;&nbsp;ret = widget_app_get_elm_win(context, &amp;wid-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;if (ret != WIDGET_ERROR_NONE) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dlog_print(DLOG_ERROR, LOG_TAG, &quot;failed to get window. err = %d&quot;, ret);
+    /* Window */
+    ret = widget_app_get_elm_win(context, &amp;wid-&gt;win);
+    if (ret != WIDGET_ERROR_NONE) {
+        dlog_print(DLOG_ERROR, LOG_TAG, "failed to get window. err = %d", ret);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_FAULT;
-&nbsp;&nbsp;&nbsp;&nbsp;}
+        return WIDGET_ERROR_FAULT;
+    }
 
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(wid-&gt;win, w, h);
+    evas_object_resize(wid-&gt;win, w, h);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Conformant */
-&nbsp;&nbsp;&nbsp;&nbsp;wid-&gt;conform = elm_conformant_add(wid-&gt;win);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(wid-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(wid-&gt;win, wid-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(wid-&gt;conform);
+    /* Conformant */
+    wid-&gt;conform = elm_conformant_add(wid-&gt;win);
+    evas_object_size_hint_weight_set(wid-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+    elm_win_resize_object_add(wid-&gt;win, wid-&gt;conform);
+    evas_object_show(wid-&gt;conform);
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Label */
-&nbsp;&nbsp;&nbsp;&nbsp;wid-&gt;label = elm_label_add(wid-&gt;conform);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(wid-&gt;label, w, h / 3);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(wid-&gt;label, w / 4, h / 3);
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(wid-&gt;label);
-&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(wid-&gt;label, &quot;Hello widget&quot;);
+    /* Label */
+    wid-&gt;label = elm_label_add(wid-&gt;conform);
+    evas_object_resize(wid-&gt;label, w, h / 3);
+    evas_object_move(wid-&gt;label, w / 4, h / 3);
+    evas_object_show(wid-&gt;label);
+    elm_object_text_set(wid-&gt;label, "Hello widget");
 
-&nbsp;&nbsp;&nbsp;&nbsp;/* Show the window after the base GUI is set up */
-&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(wid-&gt;win);
+    /* Show the window after the base GUI is set up */
+    evas_object_show(wid-&gt;win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_context_set_tag(context, wid);
+    widget_app_context_set_tag(context, wid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre>
 
@@ -615,24 +615,24 @@ widget_instance_create(widget_context_h context, bundle *content,
 
 <pre class="prettyprint">
 struct widget_instance_data {
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *win;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *conform;
-&nbsp;&nbsp;&nbsp;&nbsp;Evas_Object *label;
+    Evas_Object *win;
+    Evas_Object *conform;
+    Evas_Object *label;
 };
 typedef struct widget_instance_data widget_instance_data_s;
 
 static int
 widget_instance_create(widget_context_h context, bundle *content,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int w, int h, void *user_data)
+                       int w, int h, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = (widget_instance_data_s*)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;malloc(sizeof(widget_instance_data_s));
+    widget_instance_data_s *wid = (widget_instance_data_s*)
+                                  malloc(sizeof(widget_instance_data_s));
 
-&nbsp;&nbsp;&nbsp;&nbsp;ret = widget_app_get_elm_win(context, &amp;wid-&gt;win);
+    ret = widget_app_get_elm_win(context, &amp;wid-&gt;win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;wid-&gt;label = elm_label_add(wid-&gt;conform);
+    wid-&gt;label = elm_label_add(wid-&gt;conform);
 
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_context_set_tag(context, wid);
+    widget_app_context_set_tag(context, wid);
 }
 </pre>
 </li>
@@ -642,31 +642,31 @@ widget_instance_create(widget_context_h context, bundle *content,
 <pre class="prettyprint">
 static int
 widget_instance_update(widget_context_h context, bundle *content,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int force, void *user_data)
+                       int force, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;wid);
-&nbsp;&nbsp;&nbsp;&nbsp;if (wid-&gt;label)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_text_set(wid-&gt;label, &quot;Update Widget&quot;);
+    widget_instance_data_s *wid = NULL;
+    widget_app_context_get_tag(context, (void**)&amp;wid);
+    if (wid-&gt;label)
+        elm_object_text_set(wid-&gt;label, "Update Widget");
 
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre></li>
 <li>Make sure that all the resources that you allocate are freed in the callback function for the widget instance destructor:
 <pre class="prettyprint">
 static int
 widget_instance_destroy(widget_context_h context,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget_app_destroy_type_e reason, bundle *content, void *user_data)
+                        widget_app_destroy_type_e reason, bundle *content, void *user_data)
 {
-&nbsp;&nbsp;&nbsp;&nbsp;widget_instance_data_s *wid = NULL;
-&nbsp;&nbsp;&nbsp;&nbsp;widget_app_context_get_tag(context, (void**)&amp;wid);
+    widget_instance_data_s *wid = NULL;
+    widget_app_context_get_tag(context, (void**)&amp;wid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;if (wid-&gt;win)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(wid-&gt;win);
+    if (wid-&gt;win)
+        evas_object_del(wid-&gt;win);
 
-&nbsp;&nbsp;&nbsp;&nbsp;free(wid);
+    free(wid);
 
-&nbsp;&nbsp;&nbsp;&nbsp;return WIDGET_ERROR_NONE;
+    return WIDGET_ERROR_NONE;
 }
 </pre></li>
 </ul>
diff --git a/org.tizen.training/html/web/app_model/application_model_w.htm b/org.tizen.training/html/web/app_model/application_model_w.htm
index 04229aa..58098c9 100644 (file)
--- a/org.tizen.training/html/web/app_model/application_model_w.htm
+++ b/org.tizen.training/html/web/app_model/application_model_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Tizen Web Application Model</title>  
+       <title>Tizen Web Application Model</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,38 +20,38 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
 
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../details/details_w.htm">Understanding Tizen Programming</a></li>  
+                       <li><a href="../details/details_w.htm">Understanding Tizen Programming</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
- <h1>Tizen Web Application Model</h1> 
-  <p>The <a href="../../../../org.tizen.studio/html/cover_page.htm">Tizen Studio</a> enables you to create Web applications for mobile, wearable, and TV devices. A Web application comprises HTML, JavaScript, and CSS combined in a package, which can be installed on the Tizen device.</p> 
-  <p>A <a href="../process/app_dev_process_w.htm#package">Web application package</a> includes all the support files that are needed by the Web application. Therefore, a Web application can run without any additional external resources or network connectivity after installation.</p> 
-  <p>The application model supports a rich set of standard W3C/HTML5 features, which include various JavaScript APIs as well as additional HTML markups and CSS features. These features along with the Tizen Device APIs and UI framework support can be used to create rich Web applications in a variety of categories, such as contact, messaging, device information access, multimedia, graphics, and games.</p> 
+ <h1>Tizen Web Application Model</h1>
+  <p>The <a href="../../../../org.tizen.studio/html/cover_page.htm">Tizen Studio</a> enables you to create Web applications for mobile, wearable, and TV devices. A Web application comprises HTML, JavaScript, and CSS combined in a package, which can be installed on the Tizen device.</p>
+  <p>A <a href="../process/app_dev_process_w.htm#package">Web application package</a> includes all the support files that are needed by the Web application. Therefore, a Web application can run without any additional external resources or network connectivity after installation.</p>
+  <p>The application model supports a rich set of standard W3C/HTML5 features, which include various JavaScript APIs as well as additional HTML markups and CSS features. These features along with the Tizen Device APIs and UI framework support can be used to create rich Web applications in a variety of categories, such as contact, messaging, device information access, multimedia, graphics, and games.</p>
   <p>Tizen supports both <a href="#wap">Web application packages</a> and <a href="#hap">hybrid application packages</a>, which combine a Web application and 1 or more native service applications.</p>
   <p>Applications in the same package follow the same installation life-cycle, handled by the <a href="#package">application package manager</a>. </p>
-  
-   <h2 id="package" name="package">Application Package Manager</h2> 
-  <p>The application package manager is one of the core modules of the Tizen application framework, and responsible for installing, uninstalling, and updating packages, and storing their information. Using the package manager, you can also retrieve information related to the packages that are installed on the device.</p> 
+
+   <h2 id="package" name="package">Application Package Manager</h2>
+  <p>The application package manager is one of the core modules of the Tizen application framework, and responsible for installing, uninstalling, and updating packages, and storing their information. Using the package manager, you can also retrieve information related to the packages that are installed on the device.</p>
   <p>The application package manager module is expandable to support various types of applications, and designated installation modules can be added to it. </p>
 
- <p align="center"><strong>Figure: Application package manager</strong></p> 
- <p align="center"><img alt="Application package manager" src="../../images/application_package_manager.png" /></p> 
+ <p align="center"><strong>Figure: Application package manager</strong></p>
+ <p align="center"><img alt="Application package manager" src="../../images/application_package_manager.png" /></p>
 
-<h3 id="config" name="config">Web Package Configuration</h3> 
+<h3 id="config" name="config">Web Package Configuration</h3>
   <p>Each Web application package has a configuration file, <code>config.xml</code>, which indicates a packaging format and metadata for the application.</p>
   <p>The Tizen Web application must follow the guidelines of <a href="http://www.w3.org/TR/widgets/" target="_blank">W3C Widget Packaging</a> and Tizen extended configuration (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_extend">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">wearable</a> applications).</p>
   <p>For more information on the configuration elements, see <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#hierarchy">Configuration Element Hierarchy</a>.</p>
-  
-   <h3 id="wap" name="wap">Web Application Package</h3> 
-  <p>The Tizen platform supports Web applications based on HTML, JavaScript, and CSS, and packaged according to the W3C specification. The platform also provides device APIs to access the platform capabilities, enabling a rich Web application development environment.</p> 
+
+   <h3 id="wap" name="wap">Web Application Package</h3>
+  <p>The Tizen platform supports Web applications based on HTML, JavaScript, and CSS, and packaged according to the W3C specification. The platform also provides device APIs to access the platform capabilities, enabling a rich Web application development environment.</p>
   <p>A Web application package must conform to the following conventions:</p>
 <ul>
 <li>Package format and file extension
@@ -73,81 +73,81 @@
    <p align="center" class="Table"><strong>Table: Package content</strong></p>
    <table style="width: 100%" border="1">
    <tbody>
-    <tr> 
-     <th>Name</th> 
-     <th>Type</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-     <td><code>config.xml</code></td> 
-     <td rowspan="11">File</td> 
-     <td>Application configuration document</td> 
-    </tr> 
-    <tr> 
-     <td><code>icon.gif</code></td> 
-     <td rowspan="5">Application default icon</td> 
-    </tr> 
-    <tr> 
-     <td><code>icon.ico</code></td> 
+    <tr>
+     <th>Name</th>
+     <th>Type</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>config.xml</code></td>
+     <td rowspan="11">File</td>
+     <td>Application configuration document</td>
+    </tr>
+    <tr>
+     <td><code>icon.gif</code></td>
+     <td rowspan="5">Application default icon</td>
+    </tr>
+    <tr>
+     <td><code>icon.ico</code></td>
     </tr>
-    <tr> 
-     <td><code>icon.jpg</code></td> 
+    <tr>
+     <td><code>icon.jpg</code></td>
     </tr>
-    <tr> 
-     <td><code>icon.png</code></td> 
+    <tr>
+     <td><code>icon.png</code></td>
     </tr>
-    <tr> 
-     <td><code>icon.svg</code></td> 
+    <tr>
+     <td><code>icon.svg</code></td>
     </tr>
-    <tr> 
-     <td><code>index.html</code></td> 
-        <td rowspan="5">Application default start file</td> 
+    <tr>
+     <td><code>index.html</code></td>
+        <td rowspan="5">Application default start file</td>
     </tr>
-    <tr> 
-     <td><code>index.htm</code></td> 
+    <tr>
+     <td><code>index.htm</code></td>
     </tr>
-    <tr> 
-     <td><code>index.svg</code></td> 
+    <tr>
+     <td><code>index.svg</code></td>
     </tr>
-    <tr> 
-     <td><code>index.xhtml</code></td> 
+    <tr>
+     <td><code>index.xhtml</code></td>
     </tr>
-    <tr> 
-     <td><code>index.xht</code></td> 
+    <tr>
+     <td><code>index.xht</code></td>
     </tr>
-    <tr> 
-     <td><code>locales</code></td> 
-     <td>Folder</td> 
-     <td>Container for localized content</td> 
+    <tr>
+     <td><code>locales</code></td>
+     <td>Folder</td>
+     <td>Container for localized content</td>
     </tr>
-       </tbody> 
-  </table> 
+       </tbody>
+  </table>
        </li>
        </ul>
 </li>
 <li>Directory hierarchy (after installation on device)
 <p>The following figure and table illustrate the Web application package directory structure.</p>
   <p align="center"><img alt="Web application directory structure" src="../../images/web_app_directory_structure.png" /></p>
-       <p align="center" class="Table"><strong>Table: Web application package structure</strong></p> 
+       <p align="center" class="Table"><strong>Table: Web application package structure</strong></p>
        <table style="width: 100%" border="1">
-   <tbody> 
-    <tr> 
-     <th>Package</th> 
-     <th>Root directory</th> 
-     <th>Application ID</th> 
-     <th>Core XML file</th> 
-    </tr> 
-    <tr> 
-     <td><code>App</code></td> 
+   <tbody>
+    <tr>
+     <th>Package</th>
+     <th>Root directory</th>
+     <th>Application ID</th>
+     <th>Core XML file</th>
+    </tr>
+    <tr>
+     <td><code>App</code></td>
         <td><code>home/owner/apps_rw/&lt;Package ID&gt;</code><p>(For example: <code>home/owner/apps_rw/qik37po9ck</code>)</p></td>
-     <td><code>&lt;Package ID&gt;.&lt;Name&gt;</code><p>(For example: <code>qik37po9ck.Sample</code>)</p></td> 
-     <td><code>opt/share/packages/&lt;Package ID&gt;.xml</code><p>(For example: <code>opt/share/packages/qik37po9ck.xml</code>)</p></td> 
-    </tr> 
-       </tbody> 
+     <td><code>&lt;Package ID&gt;.&lt;Name&gt;</code><p>(For example: <code>qik37po9ck.Sample</code>)</p></td>
+     <td><code>opt/share/packages/&lt;Package ID&gt;.xml</code><p>(For example: <code>opt/share/packages/qik37po9ck.xml</code>)</p></td>
+    </tr>
+       </tbody>
   </table> </li>
-</ul>  
-  
-  <h3 id="hap" name="hap">Hybrid Application Package</h3> 
+</ul>
+
+  <h3 id="hap" name="hap">Hybrid Application Package</h3>
   <p>A hybrid application package must conform to the following conventions:</p>
   <ul>
 <li>Package format and file extension
@@ -159,94 +159,94 @@
 <li>Package content
        <ul>
        <li>File and folders: The root of the hybrid package is the path of the ZIP archive and contains reserved folders. The following table shows the content of a package.
-   <p align="center" class="Table"><strong>Table: Package content</strong></p> 
+   <p align="center" class="Table"><strong>Table: Package content</strong></p>
    <table border="1">
-   <tbody> 
-    <tr> 
-     <th>Name</th> 
-     <th>Type</th> 
-        <th>Description</th> 
-    </tr> 
+   <tbody>
+    <tr>
+     <th>Name</th>
+     <th>Type</th>
+        <th>Description</th>
+    </tr>
        <tr>
-               <td><code>bin</code></td> 
+               <td><code>bin</code></td>
                <td rowspan="6">Folder</td>
-               <td>Native application executable binary</td> 
+               <td>Native application executable binary</td>
        </tr>
        <tr>
-               <td><code>data</code></td> 
+               <td><code>data</code></td>
 
-               <td>Web or native application private data</td> 
+               <td>Web or native application private data</td>
        </tr>
        <tr>
-               <td><code>info</code></td> 
+               <td><code>info</code></td>
 
-               <td>Native application metadata</td> 
+               <td>Native application metadata</td>
        </tr>
        <tr>
-               <td><code>lib</code></td> 
+               <td><code>lib</code></td>
 
-               <td>Native application libraries</td> 
+               <td>Native application libraries</td>
        </tr>
        <tr>
-               <td><code>res</code></td> 
+               <td><code>res</code></td>
 
-               <td>Native application resources or Web application content</td> 
+               <td>Native application resources or Web application content</td>
        </tr>
        <tr>
-               <td><code>res/wgt</code></td> 
+               <td><code>res/wgt</code></td>
 
-               <td>Web application project root</td> 
+               <td>Web application project root</td>
        </tr>
        <tr>
-               <td><code>res/wgt/index.html</code></td> 
+               <td><code>res/wgt/index.html</code></td>
                <td>File</td>
-               <td>Default HTML file for the Web application</td> 
+               <td>Default HTML file for the Web application</td>
        </tr>
        <tr>
-               <td><code>setting</code></td> 
+               <td><code>setting</code></td>
                <td rowspan="2">Folder</td>
-               <td>Native application setting</td> 
+               <td>Native application setting</td>
        </tr>
        <tr>
-               <td><code>shared</code></td> 
-       
-               <td>Native application shared resources</td> 
+               <td><code>shared</code></td>
+
+               <td>Native application shared resources</td>
        </tr>
        </tbody>
   </table></li></ul></li>
- 
+
   <li>Directory hierarchy (after installation on device)
   <p>The following figure and table illustrate the hybrid application package directory structure.</p>
-   <p align="center"><strong>Figure: Hybrid application directory structure</strong></p> 
-  <p align="center"><img alt="Hybrid application directory structure" src="../../images/hybrid_app_package_manager.png" /></p> 
+   <p align="center"><strong>Figure: Hybrid application directory structure</strong></p>
+  <p align="center"><img alt="Hybrid application directory structure" src="../../images/hybrid_app_package_manager.png" /></p>
        <p align="center" class="Table"><strong>Table: Hybrid application package structure</strong></p>
-   <table style="width: 100%" border="1"> 
-   <tbody> 
-    <tr> 
-     <th>Package</th> 
-     <th>Root directory</th> 
-     <th>Application ID</th> 
-     <th>Core XML file</th> 
-    </tr> 
-    <tr> 
-     <td><code>App1</code> <p>(Web)</p></td> 
-     <td rowspan="3"><code>home/owner/apps_rw/&lt;Package ID&gt;</code><p>(For example: <code>home/owner/apps_rw/qik37po9ck</code>)</p></td> 
-     <td><code>&lt;Package ID&gt;.&lt;Name&gt;</code><p>(For example: <code>qik37po9ck.Sample</code>)</p></td> 
-     <td rowspan="3"><code>opt/share/packages/&lt;Package ID&gt;.xml</code><p>(For example: <code>opt/share/packages/qik37po9ck.xml</code>)</p></td> 
-    </tr> 
-       <tr> 
-     <td><code>App2</code> <p>(Native)</p></td> 
-     <td><code>&lt;Package ID&gt;.&lt;ExecutableName1&gt;</code><p>(For example: <code>qik37po9ck.Service</code>)</p></td> 
-    </tr> 
-       <tr> 
-     <td><code>App3</code> <p>(Native)</p></td> 
-     <td><code>&lt;Package ID&gt;.&lt;ExecutableName2&gt;</code><p>(For example: <code>qik37po9ck.Downloader</code>)</p></td> 
-    </tr> 
-       </tbody> 
+   <table style="width: 100%" border="1">
+   <tbody>
+    <tr>
+     <th>Package</th>
+     <th>Root directory</th>
+     <th>Application ID</th>
+     <th>Core XML file</th>
+    </tr>
+    <tr>
+     <td><code>App1</code> <p>(Web)</p></td>
+     <td rowspan="3"><code>home/owner/apps_rw/&lt;Package ID&gt;</code><p>(For example: <code>home/owner/apps_rw/qik37po9ck</code>)</p></td>
+     <td><code>&lt;Package ID&gt;.&lt;Name&gt;</code><p>(For example: <code>qik37po9ck.Sample</code>)</p></td>
+     <td rowspan="3"><code>opt/share/packages/&lt;Package ID&gt;.xml</code><p>(For example: <code>opt/share/packages/qik37po9ck.xml</code>)</p></td>
+    </tr>
+       <tr>
+     <td><code>App2</code> <p>(Native)</p></td>
+     <td><code>&lt;Package ID&gt;.&lt;ExecutableName1&gt;</code><p>(For example: <code>qik37po9ck.Service</code>)</p></td>
+    </tr>
+       <tr>
+     <td><code>App3</code> <p>(Native)</p></td>
+     <td><code>&lt;Package ID&gt;.&lt;ExecutableName2&gt;</code><p>(For example: <code>qik37po9ck.Downloader</code>)</p></td>
+    </tr>
+       </tbody>
   </table> </li>
-</ul>  
-  
- 
+</ul>
+
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/web/cover_page_w.htm b/org.tizen.training/html/web/cover_page_w.htm
index 810f99e..bb52443 100644 (file)
--- a/org.tizen.training/html/web/cover_page_w.htm
+++ b/org.tizen.training/html/web/cover_page_w.htm
@@ -5,25 +5,25 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Introduction to Web Applications</title>  
+       <title>Introduction to Web Applications</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/> <img alt="TV Web" src="../images/tv_s_w.png"/></p>
        </div>
-       
+
 <h1>Introduction to Web Applications</h1>
 
 
@@ -44,7 +44,7 @@
 </li>
 
 </ul>
-       
+
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/web/details/app_filtering_w.htm b/org.tizen.training/html/web/details/app_filtering_w.htm
index e2d38e1..40030be 100644 (file)
--- a/org.tizen.training/html/web/details/app_filtering_w.htm
+++ b/org.tizen.training/html/web/details/app_filtering_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Application Filtering</title>  
+       <title>Application Filtering</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -28,32 +28,32 @@
                        <li><a href="#multi_profile">Single Web Application for Multiple Profiles</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Application Filtering</h1>
 
 <p>The Tizen platform provides a wide range of features across a variety of hardware and software components. Among the features, there are some that can be selectively supported by the Tizen device manufacturer. For application stores to correctly select your application for installation on an appropriate device, the feature and profile information must be correctly declared in your application.</p>
-  
+
   <h2 id="filter_w" name="filter_w">Feature-based Filtering</h2>
   <p>Some features can be selectively supported by the Tizen device manufacturer. To prevent problems when the user is trying to run your application on a device that does not support all the features your application is using, do one of the following:</p>
 <ul>
 <li>When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround.
 <p>For example, if an application wants to use location information, it can check the device capability by using the <code>getCapability()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
 </li>
-<li>Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user&#39;s device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
+<li>Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user's device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
 <p>Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.</p></li>
 </ul>
- 
+
 <p>If the <code>config.xml</code> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
 
-  <p align="center"><strong>Figure: Feature-based filtering</strong></p> 
-  <p align="center"><img align="center" alt="Feature-based filtering" src="../../images/app_filtering_basic_flow.png" /></p> 
- 
-<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the &quot;AND&quot; operation. For example, if there are <code>http://tizen.org/feature/network.nfc</code> and <code>http://tizen.org/feature/network.bluetooth</code> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
+  <p align="center"><strong>Figure: Feature-based filtering</strong></p>
+  <p align="center"><img align="center" alt="Feature-based filtering" src="../../images/app_filtering_basic_flow.png" /></p>
+
+<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the "AND" operation. For example, if there are <code>http://tizen.org/feature/network.nfc</code> and <code>http://tizen.org/feature/network.bluetooth</code> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
 
 <h3 id="screen_size" name="screen_size">Screen Size Feature</h3>
-<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the &quot;OR&quot; operation. For example, if the <code>http://tizen.org/feature/screen.size.normal.480.800</code> and <code>http://tizen.org/feature/screen.size.normal.720.1280</code> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
+<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the "OR" operation. For example, if the <code>http://tizen.org/feature/screen.size.normal.480.800</code> and <code>http://tizen.org/feature/screen.size.normal.720.1280</code> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
  <p>If you do not specify a proper screen size in the <code>config.xml</code> file, your application can be rejected from the Tizen store.</p>
  <p>The following tables list the available screen size features. </p>
  <p align="center" class="Table"><strong>Table: Available screen size features for mobile applications</strong></p>
@@ -72,19 +72,19 @@
                        <td>2.2.1</td>
                </tr>
                <tr>
-                       <td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td> 
+                       <td><code>http://tizen.org/feature/screen.size.normal.240.400</code></td>
                        <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
                        <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.2.1</td>
-               </tr>   
+               </tr>
                <tr>
                        <td><code>http://tizen.org/feature/screen.size.normal.320.320</code></td>
                        <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
                        <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p>
                        </td>
                        <td>2.3</td>
-               </tr>           
+               </tr>
                <tr>
                        <td><code>http://tizen.org/feature/screen.size.normal.320.480</code></td>
                        <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
@@ -102,7 +102,7 @@
                        <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
                        <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.3</td>
-               </tr>           
+               </tr>
                <tr>
                        <td><code>http://tizen.org/feature/screen.size.normal.480.800</code></td>
                        <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
@@ -141,7 +141,7 @@
                </tr>
        </tbody>
  </table>
- 
+
 <p align="center" class="Table"><strong>Table: Available screen size features for wearable applications</strong></p>
  <table>
        <tbody>
@@ -175,8 +175,8 @@
                        <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
                        <p>You can specify multiple <code>http://tizen.org/feature/screen.size.normal.*</code> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <code>screen.size.*</code> and <code>screen.size.normal.*</code> levels simultaneously.</p><p>If no  screen size key is declared, it is assumed that the application supports only <code>screen.size.normal.720.1280</code>. To avoid this, specify at least 1 screen size key.</p></td>
                        <td>2.3</td>
-               </tr>           
-       
+               </tr>
+
                <tr>
                        <td><code>http://tizen.org/feature/screen.size.all</code></td>
                        <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
@@ -185,9 +185,9 @@
                </tr>
        </tbody>
  </table>
- 
-  
-<h3 id="hierarchy" name="hierarchy">Feature Hierarchy</h3>  
+
+
+<h3 id="hierarchy" name="hierarchy">Feature Hierarchy</h3>
 
 <p>The feature keys have a hierarchy. For example, consider the <code>http://tizen.org/feature/location</code>, <code>http://tizen.org/feature/location.gps</code>, and <code>http://tizen.org/feature/location.wps</code> features:</p>
 <ul>
@@ -195,9 +195,9 @@
 <li>If the feature list includes the <code>http://tizen.org/feature/location</code> feature, a device which has the <code>http://tizen.org/feature/location.gps</code>, <code>http://tizen.org/feature/location.wps</code>, or <code>http://tizen.org/feature/location</code> feature can show the application on the Tizen Store application list.
 <p>This means that the Tizen Store considers the <code>http://tizen.org/feature/location</code> feature as the <code>http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</code> feature. (If the feature list includes the <code>http://tizen.org/feature/location.gps</code> and <code>http://tizen.org/feature/location.wps</code> features together, only a device which supports both those features can show the application.)</p></li></ul>
 
-<h3 id="adding" name="adding">Adding the Feature List</h3> 
- 
- <p>To enable filtering for your Web application, add the feature list for the application <code>config.xml</code> file:</p> 
+<h3 id="adding" name="adding">Adding the Feature List</h3>
+
+ <p>To enable filtering for your Web application, add the feature list for the application <code>config.xml</code> file:</p>
   <ol>
     <li>To open the Web application configuration editor in the Tizen Studio, double-click the <code>config.xml</code> file in the <strong>Project Explorer</strong> view. </li>
    <li>In the <strong>Feature</strong> tab, click <strong>Add</strong>.</li>
@@ -209,7 +209,7 @@
 
   <p> The following example shows the setting in the <code>config.xml</code> file code:</p>
   <pre class="prettyprint">
-&lt;tizen:feature name=&quot;http://tizen.org/feature/network.nfc&quot;/&gt;
+&lt;tizen:feature name="http://tizen.org/feature/network.nfc"/&gt;
 </pre>
 
 <p>The following tables show the available requirements for Tizen Web application package.</p>
@@ -222,8 +222,8 @@
         <th>Since</th>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/convergence.d2d</code></td> 
-     <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td> 
+<td><code>http://tizen.org/feature/convergence.d2d</code></td>
+     <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td>
         <td>3.0</td>
     </tr>
 <tr>
@@ -256,7 +256,7 @@
      <td>Specify this key, if the application requires the LED feature.</td>
         <td>2.4</td>
     </tr>
-<tr>   
+<tr>
 <td><code>http://tizen.org/feature/location.batch</code></td>
      <td>Specify this key, if the application requires the location tracking with a position batch information feature for using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">Human Activity Monitor</a> (GPS Type) API.</td>
         <td>2.3</td>
@@ -285,7 +285,7 @@
 <td><code>http://tizen.org/feature/network.net_proxy</code></td>
      <td>Specify this key, if the application requires the net-proxy feature for the Internet connection. A net-proxy feature for a device acts as an intermediary between client (network service customer) and server (network service provider).</td>
         <td>3.0</td>
-    </tr>      
+    </tr>
 <tr>
 <td><code>http://tizen.org/feature/network.nfc</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
@@ -332,10 +332,10 @@
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony.sms</code></td> 
-     <td>Specify this key, if the application requires the SMS feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony.sms</code></td>
+     <td>Specify this key, if the application requires the SMS feature.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
 <td><code>http://tizen.org/feature/network.wifi</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td>
@@ -357,18 +357,18 @@
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td> 
-     <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td>
+     <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
        <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td> 
-     <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td>
+     <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
        <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td> 
-     <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td>
+     <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td>
         <td>2.3.1</td>
     </tr>
 <tr>
@@ -385,7 +385,7 @@
 <td><code>http://tizen.org/feature/sensor.photometer</code></td>
      <td>Specify this key, if the application requires a photometer sensor for using the Sensor (LIGHT Type) API.</td>
         <td>2.2.1</td>
-    </tr>      
+    </tr>
 <tr>
 <td><code>http://tizen.org/feature/sensor.proximity</code></td>
      <td>Specify this key, if the application requires a proximity sensor for using the Sensor (PROXIMITY Type) API.</td>
@@ -433,7 +433,7 @@
      <td>Specify this key, if the application requires a microphone for using the getUserMedia or HTML Media Capture API.</td>
         <td>2.2.1</td>
     </tr>
-<tr>   
+<tr>
 <td><code>http://tizen.org/feature/sensor.accelerometer</code></td>
      <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification</a> API.</td>
         <td>2.2.1</td>
@@ -465,8 +465,8 @@
         <th>Since</th>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/shell.appwidget</code></td> 
-     <td>Specify this key, if the application requires the Widget feature. Since 2.3.1, this key indicates only the native Widget.</td> 
+<td><code>http://tizen.org/feature/shell.appwidget</code></td>
+     <td>Specify this key, if the application requires the Widget feature. Since 2.3.1, this key indicates only the native Widget.</td>
         <td>2.2.1</td>
     </tr>
 </tbody>
@@ -481,8 +481,8 @@
         <th>Since</th>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/convergence.d2d</code></td> 
-     <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td> 
+<td><code>http://tizen.org/feature/convergence.d2d</code></td>
+     <td>Specify this key, if the application requires the Device-to-Device (D2D) Convergence feature, which provides the service to discover near-by devices and to communicate information and data to the remote devices.</td>
         <td>3.0</td>
     </tr>
 <tr>
@@ -547,7 +547,7 @@
 <td><code>http://tizen.org/feature/network.net_proxy</code></td>
      <td>Specify this key, if the application requires the net-proxy feature for the Internet connection. A net-proxy feature for a device acts as an intermediary between client (network service customer) and server (network service provider).</td>
         <td>3.0</td>
-    </tr>      
+    </tr>
 <tr>
 <td><code>http://tizen.org/feature/network.nfc</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
@@ -582,17 +582,17 @@
 <td><code>http://tizen.org/feature/network.secure_element</code></td>
      <td>Specify this key, if the application requires the secure element feature.</td>
         <td>2.2.1</td>
-        </tr>  
+        </tr>
 <tr>
 <td><code>http://tizen.org/feature/network.telephony</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/network.telephony.sms</code></td> 
-     <td>Specify this key, if the application requires the SMS feature.</td> 
+<td><code>http://tizen.org/feature/network.telephony.sms</code></td>
+     <td>Specify this key, if the application requires the SMS feature.</td>
         <td>2.4</td>
-    </tr>      
+    </tr>
 <tr>
 <td><code>http://tizen.org/feature/network.wifi</code></td>
      <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature (for example, the Download API).</td>
@@ -614,20 +614,20 @@
         <td>2.3</td>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td> 
-     <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_green</code></td>
+     <td>Specify this key, if the application requires the LED green heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td> 
-     <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</code></td>
+     <td>Specify this key, if the application requires the LED infrared heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
 <tr>
-<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td> 
-     <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td> 
+<td><code>http://tizen.org/feature/sensor.heart_rate_monitor.led_red</code></td>
+     <td>Specify this key, if the application requires the LED red heart rate monitor sensor.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
 <tr>
 <td><code>http://tizen.org/feature/sensor.magnetometer</code></td>
      <td>Specify this key, if the application requires a magnetic sensor.</td>
@@ -684,7 +684,7 @@
 <td><code>http://tizen.org/feature/input.rotating_bezel</code></td>
      <td>Specify this key, if the application requires rotating bezel input.</td>
         <td>2.3.1</td>
-    </tr>      
+    </tr>
 <tr>
 <td><code>http://tizen.org/feature/location.gps</code></td>
      <td>Specify this key, if the application requires the Global Positioning System (GPS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">GeoLocation</a> API.</td>
@@ -699,18 +699,18 @@
 <td><code>http://tizen.org/feature/network.internet</code></td>
      <td>Specify this key, if the application requires Internet access for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket API</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1</a>, or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> API.</td>
         <td>2.3.1</td>
-    </tr>      
-<tr>   
+    </tr>
+<tr>
 <td><code>http://tizen.org/feature/screen.shape.circle</code></td>
      <td>Specify this key, if the application requires a circle-shaped screen.</td>
         <td>2.3.1</td>
     </tr>
-<tr>   
+<tr>
 <td><code>http://tizen.org/feature/screen.shape.rectangle</code></td>
      <td>Specify this key, if the application requires a rectangle-shaped screen.</td>
         <td>2.3.1</td>
-    </tr>      
-<tr>   
+    </tr>
+<tr>
 <td><code>http://tizen.org/feature/sensor.accelerometer</code></td>
      <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#orientation">DeviceOrientation Event Specification</a> API.</td>
         <td>2.2.1</td>
@@ -740,7 +740,7 @@
 <td><code>http://tizen.org/feature/media.audio_recording</code></td>
      <td>Specify this key, if the application requires the audio recording functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Audio Recording) API.</td>
         <td>2.3</td>
-   </tr>  
+   </tr>
 <tr>
 <td><code>http://tizen.org/feature/media.image_capture</code></td>
      <td>Specify this key, if the application requires the image capture functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Image Recording) API.</td>
@@ -763,8 +763,8 @@
         <th>Since</th>
     </tr>
 <tr>
-<td><code>http://tizen.org/feature/shell.appwidget</code></td> 
-     <td>Specify this key, if the application requires the Widget feature. Since 2.3.1, this key indicates only the native Widget.</td> 
+<td><code>http://tizen.org/feature/shell.appwidget</code></td>
+     <td>Specify this key, if the application requires the Widget feature. Since 2.3.1, this key indicates only the native Widget.</td>
         <td>2.2.1</td>
     </tr>
 <tr>
@@ -785,36 +785,36 @@
  <table border="1" id="feature">
 <tbody>
 <tr>
-<th width="50%">Tizen profile</th> 
-     <th>Profile name attribute</th> 
+<th width="50%">Tizen profile</th>
+     <th>Profile name attribute</th>
     </tr>
 <tr>
-<td>Mobile</td> 
-     <td><code>mobile</code></td> 
+<td>Mobile</td>
+     <td><code>mobile</code></td>
     </tr>
 <tr>
-<td>Wearable</td> 
-     <td><code>wearable</code></td> 
+<td>Wearable</td>
+     <td><code>wearable</code></td>
     </tr>
 <tr>
-<td>TV</td> 
-     <td><code>TV</code></td> 
+<td>TV</td>
+     <td><code>TV</code></td>
     </tr>
 </tbody></table>
 
 <p>In a Web application, the profile name element can be added to the <code>config.xml</code> file as follows:</p>
 <pre class="prettyprint">
-&lt;widget xmlns=&quot;http://www.w3.org/ns/widgets&quot; xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot; ... &gt;
-&lt;tizen:profile name=&quot;mobile&quot;/&gt;
+&lt;widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" ... &gt;
+&lt;tizen:profile name="mobile"/&gt;
 &lt;!--OR--&gt;
-&lt;tizen:profile name=&quot;wearable&quot;/&gt;
+&lt;tizen:profile name="wearable"/&gt;
 </pre>
 
 <p>The Tizen Store compares the device profile and the <code>profile name</code> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
 
-<h2 id="multi_profile" name="multi_profile">Single Web Application for Multiple Profiles</h2> 
-<p>Applications are created for a single specific target profile and can only run on devices compliant to that profile. However, it is easily possible to develop a Web application on one profile and make it work on another profile if you use Web APIs that are common to both the profiles. You just modify the <code> &lt;tizen:profile&gt;</code> tag to switch profiles. You may also have to make other changes, like adapting your application to different screen sizes and input events. It is recommended that you test this modified application to ensure it performs as desired.</p> 
-               
+<h2 id="multi_profile" name="multi_profile">Single Web Application for Multiple Profiles</h2>
+<p>Applications are created for a single specific target profile and can only run on devices compliant to that profile. However, it is easily possible to develop a Web application on one profile and make it work on another profile if you use Web APIs that are common to both the profiles. You just modify the <code> &lt;tizen:profile&gt;</code> tag to switch profiles. You may also have to make other changes, like adapting your application to different screen sizes and input events. It is recommended that you test this modified application to ensure it performs as desired.</p>
+
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
diff --git a/org.tizen.training/html/web/details/deprecation_policy_w.htm b/org.tizen.training/html/web/details/deprecation_policy_w.htm
index 4aa02ad..4eb2989 100644 (file)
--- a/org.tizen.training/html/web/details/deprecation_policy_w.htm
+++ b/org.tizen.training/html/web/details/deprecation_policy_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>API Versioning and Deprecation Policy of the Tizen Platform</title>  
+       <title>API Versioning and Deprecation Policy of the Tizen Platform</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -32,7 +32,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-       
+
 <h1>API Versioning and Deprecation Policy of the Tizen Platform</h1>
 
 <p>As much as the Tizen team wants to have a completely stable API, the evolution of both hardware technology and software capabilities is rapid. To be maximally useful, the API set must evolve to reflect those changes to enable the development of compelling applications that use those features. As an inevitable side effect, APIs may become obsolete and need to be replaced by more feature-rich versions.</p>
@@ -114,21 +114,21 @@
 Gets the package with the given application context.
 
 <strong>Deprecated:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;Deprecated since 2.3.1. Use app_context_get_app_id() instead.
+    Deprecated since 2.3.1. Use app_context_get_app_id() instead.
 <strong>Since:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;2.3
+    2.3
 </pre>
 </li>
 <li>Deprecated API in the Web API:
 <pre class="prettyprint">
 <strong>addAppInfoEventListener</strong>
-Adds a listener for receiving notifications for changes 
+Adds a listener for receiving notifications for changes
 in the list of installed applications on a device.
 <strong>Deprecated</strong>. It is deprecated since Tizen 2.4. Instead, set a listener for getting notified
 of the application changes (add/remove/update) on a device using tizen.package.setPackageInfoEventListener().
 
 <strong>long addAppInfoEventListener(ApplicationInformationEventCallback eventCallback);</strong>
-             
+
 <strong>Since</strong>: 2.0
 </pre>
 </li>
@@ -137,9 +137,9 @@ of the application changes (add/remove/update) on a device using tizen.package.s
 <strong>enum telephony_call_state_e</strong>
 Enumeration for the call state.
 <strong>Deprecated:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;Deprecated Since 2.4. Use telephony_call_status_e instead.
+    Deprecated Since 2.4. Use telephony_call_status_e instead.
 <strong>Since:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;2.3
+    2.3
 </pre>
 </li>
 <li>Deprecated type definition in the Native API:
@@ -148,9 +148,9 @@ Enumeration for the call state.
 <strong>typedef void* bt_gatt_attribute_h</strong>
 The attribute handle of GATT (Generic Attribute Profile)
 <strong>Deprecated:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;Deprecated since 2.3.1. Use bt_gatt_h instead.
+    Deprecated since 2.3.1. Use bt_gatt_h instead.
 <strong>Since:</strong>
-&nbsp;&nbsp;&nbsp;&nbsp;2.3
+    2.3
 </pre>
 </li>
 </ul>
@@ -167,8 +167,8 @@ will be removed from next release. Use app_context_get_app_id() instead.
 <li>In a build log message:
 <pre class="prettyprint">
 [2/3] Building src/basicuiwithedc.o
-../src/basicuiwithedc.c:26:19: warning: &#39;app_get_resource_path&#39; is deprecated [-Wdeprecated-declarations]
-&nbsp;&nbsp;&nbsp;&nbsp;char *res_path = app_get_resource_path();
+../src/basicuiwithedc.c:26:19: warning: 'app_get_resource_path' is deprecated [-Wdeprecated-declarations]
+    char *res_path = app_get_resource_path();
 </pre>
 </li>
 </ul>
diff --git a/org.tizen.training/html/web/details/details_w.htm b/org.tizen.training/html/web/details/details_w.htm
index 992cc97..c1fe50d 100644 (file)
--- a/org.tizen.training/html/web/details/details_w.htm
+++ b/org.tizen.training/html/web/details/details_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Understanding Tizen Programming</title>  
+       <title>Understanding Tizen Programming</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,19 +20,19 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../app_model/application_model_w.htm">Tizen Application Model</a></li>
-               </ul>           
+               </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Understanding Tizen Programming</h1>
 
-<p>When designing Tizen Web applications, you need to take into account the following programming concepts:</p> 
+<p>When designing Tizen Web applications, you need to take into account the following programming concepts:</p>
 <ul>
        <li><a href="tizen_apis_w.htm">Tizen APIs</a></li>
        <li><a href="sec_privileges_w.htm">Security and API Privileges</a></li>
@@ -40,9 +40,9 @@
        <li><a href="web_runtime_w.htm">Web Runtime</a></li>
        <li><a href="event_handling_w.htm">Event Handling</a> (in <strong>wearable applications only</strong>)</li>
        <li><a href="deprecation_policy_w.htm">API Versioning and Deprecation Policy of the Tizen Platform</a></li>
-       <li><a href="sign_certificate_w.htm">Application Signing and Certificates</a></li>      
+       <li><a href="sign_certificate_w.htm">Application Signing and Certificates</a></li>
 </ul>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/web/details/event_handling_w.htm b/org.tizen.training/html/web/details/event_handling_w.htm
index cf580c2..9a93d35 100644 (file)
--- a/org.tizen.training/html/web/details/event_handling_w.htm
+++ b/org.tizen.training/html/web/details/event_handling_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Event Handling</title>  
+       <title>Event Handling</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -38,10 +38,10 @@
 <p>This feature is supported in wearable applications only.</p>
 
 <h2 id="rotary" name="rotary">Rotary Events</h2>
-  
-<p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called <strong>detent</strong>. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p> 
 
-<p align="center"><strong>Figure: Rotary device</strong></p> 
+<p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called <strong>detent</strong>. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p>
+
+<p align="center"><strong>Figure: Rotary device</strong></p>
 <p align="center"><img alt="Rotary device" src="../../images/rotary_event.png" /> </p>
 <p>Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.</p>
 
@@ -64,21 +64,21 @@
 
 <p>To bind an event callback on rotary events, use the following code:</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;rotarydetent&quot;, function(ev) 
+document.addEventListener("rotarydetent", function(ev)
 {
-&nbsp;&nbsp;&nbsp;/* Get the direction value from the event */
-&nbsp;&nbsp;&nbsp;var direction = ev.detail.direction;
-&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;if (direction == &quot;CW&quot;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add behavior for clockwise rotation */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;clockwise&quot;);
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;else if (direction == &quot;CCW&quot;)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Add behavior for counter-clockwise rotation */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;counter-clockwise&quot;);
-&nbsp;&nbsp;&nbsp;}
+   /* Get the direction value from the event */
+   var direction = ev.detail.direction;
+
+   if (direction == "CW")
+   {
+      /* Add behavior for clockwise rotation */
+      console.log("clockwise");
+   }
+   else if (direction == "CCW")
+   {
+      /* Add behavior for counter-clockwise rotation */
+      console.log("counter-clockwise");
+   }
 });
 </pre>
 
@@ -92,7 +92,7 @@ document.addEventListener(&quot;rotarydetent&quot;, function(ev)
 
 <pre class="prettyprint">
 /* Check whether high color mode is supported */
-var isHighColorMode = tizen.systeminfo.getCapability(&quot;http://tizen.org/feature/screen.always_on.high_color&quot;);
+var isHighColorMode = tizen.systeminfo.getCapability("http://tizen.org/feature/screen.always_on.high_color");
 </pre>
 
 <p>The following table describes the ambient mode events.</p>
@@ -128,22 +128,22 @@ var isHighColorMode = tizen.systeminfo.getCapability(&quot;http://tizen.org/feat
 
 <p>To bind an event callback on ambient events, use the following code:</p>
 <pre class="prettyprint">
-document.addEventListener(&quot;ambientmodechanged&quot;, function(ev) 
+document.addEventListener("ambientmodechanged", function(ev)
 {
-&nbsp;&nbsp;&nbsp;var mode = ev.detail.ambientMode; 
-&nbsp;&nbsp;&nbsp;if (mode == true) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Change the UI for ambient mode */
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Change the UI for normal mode */
-&nbsp;&nbsp;&nbsp;}
+   var mode = ev.detail.ambientMode;
+   if (mode == true)
+   {
+      /* Change the UI for ambient mode */
+   }
+   else
+   {
+      /* Change the UI for normal mode */
+   }
 });
 
-document.addEventListener(&quot;timetick&quot;, function(ev) 
+document.addEventListener("timetick", function(ev)
 {
-&nbsp;&nbsp;&nbsp;/* Update the UI */ 
+   /* Update the UI */
 });
 </pre>
 
diff --git a/org.tizen.training/html/web/details/sec_privileges_w.htm b/org.tizen.training/html/web/details/sec_privileges_w.htm
index 423b059..e00e4ff 100644 (file)
--- a/org.tizen.training/html/web/details/sec_privileges_w.htm
+++ b/org.tizen.training/html/web/details/sec_privileges_w.htm
@@ -5,7 +5,7 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
@@ -21,15 +21,15 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
 <h1>Security and API Privileges</h1>
-                               
+
 <p>To effectively protect the device system and user private data, the Tizen security architecture is based on privileges and application signing of the Linux basic security model, which includes process isolation and mandatory access control. Since Tizen, as an open platform, provides a wide range of features and experiences for users with a variety of applications, the users must be able to grant privileges for security-sensitive operations.</p>
 
 <p>Tizen provides API-level access control for security-sensitive operations which, if not used correctly, can harm user privacy and system stability. Therefore, applications that use such sensitive APIs must declare the required privileges in the <a href="../process/setting_properties_w.htm#privilege">config.xml</a> file. Privileges are categorized into public, partner, and platform levels according to their hierarchy:</p>
@@ -40,17 +40,17 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </ul>
 
 <p>Since Tizen platform 3.0, some privileges are categorized as privacy-related and give an option to the user to switch them on and off. If an application invokes a privacy-related privileged API, the Tizen system checks whether the privilege is <strong>allowed</strong> for the application. For the application to use the API, the privilege must be declared in the <code>config.xml</code> file and the user must have switched it on.</p>
-  
+
      <div class="note">
         <strong>Note</strong>
         In applications with the platform version 3.0 or higher, if you use privacy-related privileged APIs, make sure that the user has switched the privilege on before making the function call. Otherwise, the application does not work as expected.
     </div>
 
 <p>The Tizen Studio also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see <a href="../../../../org.tizen.studio/html/web_tools/privilege_checker_w.htm">Verifying Privilege Usage</a>.</p>
-                       
+
 <p>The following tables list the API privileges, which you must to declare when using security-sensitive API modules.</p>
 
-<p align="center" class="Table"><strong>Table: Mobile Web Device API privileges</strong></p> 
+<p align="center" class="Table"><strong>Table: Mobile Web Device API privileges</strong></p>
 <table id="privileges">
 <tbody>
 <tr>
@@ -188,7 +188,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
     <td>Call</td>
     <td>2.3</td>
-       <td>The application can make phone calls to numbers when they are tapped without further confirmation. This can result in additional charges depending on the user&#39;s payment plan.</td>
+       <td>The application can make phone calls to numbers when they are tapped without further confirmation. This can result in additional charges depending on the user's payment plan.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/callhistory.read</td>
@@ -279,7 +279,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
        <td>Sensor</td>
     <td>2.3</td>
-       <td>The application can read the user&#39;s health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
+       <td>The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/ime</td>
@@ -300,7 +300,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
        <td>Location</td>
     <td>2.2.1</td>
-       <td>The application can read the user&#39;s location information.</td>
+       <td>The application can read the user's location information.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/mediacontroller.client</td>
@@ -526,7 +526,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </tbody>
 </table>
 
-<p align="center" class="Table"><strong>Table: Mobile Web Supplementary API privileges</strong></p> 
+<p align="center" class="Table"><strong>Table: Mobile Web Supplementary API privileges</strong></p>
 <table id="privileges">
 <tbody>
 <tr>
@@ -546,7 +546,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </tbody>
 </table>
 
-<p align="center" class="Table"><strong>Table: Wearable Web Device API privileges</strong></p> 
+<p align="center" class="Table"><strong>Table: Wearable Web Device API privileges</strong></p>
 <table id="privileges">
 <tbody>
 <tr>
@@ -694,7 +694,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
        <td>Sensor</td>
     <td>2.2.1</td>
-       <td>The application can read the user&#39;s health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
+       <td>The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/ime</td>
@@ -715,7 +715,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>public</td>
        <td>Location</td>
     <td>2.2.1</td>
-       <td>The application can read the user&#39;s location information.</td>
+       <td>The application can read the user's location information.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/mediacontroller.client</td>
@@ -853,7 +853,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 </tbody>
 </table>
 
-<p align="center" class="Table"><strong>Table: Wearable Web W3C/HTML5 API privileges</strong></p> 
+<p align="center" class="Table"><strong>Table: Wearable Web W3C/HTML5 API privileges</strong></p>
 <table id="privileges">
 <tbody>
 <tr>
diff --git a/org.tizen.training/html/web/details/sign_certificate_w.htm b/org.tizen.training/html/web/details/sign_certificate_w.htm
index 38c5415..a293027 100644 (file)
--- a/org.tizen.training/html/web/details/sign_certificate_w.htm
+++ b/org.tizen.training/html/web/details/sign_certificate_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Application Signing and Certificates</title>  
+       <title>Application Signing and Certificates</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -26,10 +26,10 @@
                        <li><a href="#type">Signature Type</a></li>
                        <li><a href="#sec_priv">Certificate and API Privileges</a></li>
                        <li><a href="#flow">Signing Flow and Getting Certificates</a></li>
-                       <li><a href="#specification">Signature Specification</a></li>                   
+                       <li><a href="#specification">Signature Specification</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Application Signing and Certificates</h1>
@@ -40,13 +40,13 @@
 <p>Through application signing, Tizen achieves the following goals:</p>
 <ul>
 <li>Ensuring application integrity: Users can download an application that has not been tampered with after development.</li>
-<li>Identifying the application developer: The applications with the same signing key are regarded as developed by the same developer. A set of applications with same developer&#39;s signing key can share secured resources as the developer intended.</li>
+<li>Identifying the application developer: The applications with the same signing key are regarded as developed by the same developer. A set of applications with same developer's signing key can share secured resources as the developer intended.</li>
 <li>Proof of store validation: An application store performs some validation checks before distributing an application. As the proof of store validation, the application store signs the application.</li>
 <li>Enforcing proper usage of privileged APIs: An application distributor, such as an application store, can restrict the API set used by the application by signing a key with a proper privilege.</li>
 </ul>
-       
+
        <h2 id="type">Signature Type</h2>
-       
+
 <p>All Tizen applications must have at least 2 signatures:</p>
 <ul>
 <li>Author signature:
@@ -54,7 +54,7 @@
 <li>You sign the author signature with your own author signing key in the Tizen Studio.</li>
 <li>Applications with the same author signing key are regarded as developed by the same developer.</li>
 <li>Application upgrade is allowed only when the author signature of the old version and the new version are signed with a same author signing key.</li>
-<li>A set of applications with a same author&#39;s signing key can share secured resources as the author (developer) intended.</li>
+<li>A set of applications with a same author's signing key can share secured resources as the author (developer) intended.</li>
 </ul>
 </li>
 <li>Distributor signature:
@@ -110,7 +110,7 @@
 
 
        <h2 id="flow">Signing Flow and Getting Certificates</h2>
-       
+
 <p>You can sign your application with your own author signing key and a testing distributor signing key in the Tizen Studio. With those, you can install and test the application on your test device and an emulator.</p>
 <p>When the application is submitted to a store after development, the store removes the testing distributor signature and adds the store distributor signature for the application release. Normal applications are signed with the public level distributor signing key in the store. Some applications granted from a device vendor are allowed to be signed with the partner level distributor signing key. Signing with the platform level distributor key is permitted only for the internal application of a device vendor or Tizen.</p>
 
@@ -122,7 +122,7 @@
 <p>The testing distributor certificate and its signing key with the public level are preloaded in the Tizen Studio. The author certificate and its signing key can also be created in the Tizen Studio. For more information, see <a href="../../../../org.tizen.studio/html/common_tools/certificate_registration.htm">Working with the Certificate Profile</a>.</p>
 <p>A device vendor can disallow unauthorized applications to be installed on its devices to protect its devices from viruses and malwares. Samsung also disallows unauthorized applications to be installed on its Tizen devices. In such cases, you must get an author certificate and a distributor certificate from the device vendor. For more information, see <a href="https://developer.tizen.org/community/tip-tech/issuing-tizen-certificate-certificate-extension-ver-1.2" target="_blank">Issuing a Tizen Certificate and Running Applications in Commercial Devices</a>.</p>
 
-       <h2 id="specification">Signature Specification</h2>     
+       <h2 id="specification">Signature Specification</h2>
 
 <p>The application signing scheme of Tizen follows the specification of the <a href="http://www.w3.org/TR/widgets-digsig/" target="_blank">XML Digital signature for widget specified by W3C</a>.</p>
 
diff --git a/org.tizen.training/html/web/details/tizen_apis_w.htm b/org.tizen.training/html/web/details/tizen_apis_w.htm
index 1531c59..416ab5a 100644 (file)
--- a/org.tizen.training/html/web/details/tizen_apis_w.htm
+++ b/org.tizen.training/html/web/details/tizen_apis_w.htm
@@ -5,536 +5,536 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Tizen APIs</title>  
+       <title>Tizen APIs</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
 <h1>Tizen APIs</h1>
 
 <p>Using the Tizen Web API modules, you can develop rich Web applications and build great application experiences with well-known Web programming languages: HTML, CSS, and JavaScript. Just like every major browser in the market, the Tizen Web API modules support the latest HTML5 capabilities, such as animation, offline, audio, and video. By utilizing the standard HTML5 capabilities, your Web applications are ready to run across various devices and platforms with minimal customization. In addition to the JavaScript-based Tizen Device API, you can also enable advanced device access from your Web applications, such as Bluetooth and NFC.</p>
 
-<p>The Tizen platform supports hybrid applications (1 Web application and 1 or more native applications). A hybrid application package is very useful to Web applications that need background processing or monitoring. With a hybrid application package, you can register the included applications in the Tizen Store and install, upgrade, and uninstall them using a single hybrid package. For more information on developing hybrid Web applications with Tizen devices, see <a href="../process/app_dev_process_w.htm#hybrid">Packaging Hybrid Applications</a>.</p>                  
-                       
+<p>The Tizen platform supports hybrid applications (1 Web application and 1 or more native applications). A hybrid application package is very useful to Web applications that need background processing or monitoring. With a hybrid application package, you can register the included applications in the Tizen Store and install, upgrade, and uninstall them using a single hybrid package. For more information on developing hybrid Web applications with Tizen devices, see <a href="../process/app_dev_process_w.htm#hybrid">Packaging Hybrid Applications</a>.</p>
+
 <p>Tizen provides a wide range of Web API modules that allow you to take full advantage of various Tizen features.</p>
   <p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html">Mobile Web Device API Reference</a>.</p>
-   <p align="center" class="Table"><strong>Table: Device API features provided for mobile applications</strong></p> 
-   <table border="1"> 
+   <p align="center" class="Table"><strong>Table: Device API features provided for mobile applications</strong></p>
+   <table border="1">
 
-   <colgroup> 
-    <col width="20%" /> 
-    <col width="40%" /> 
-    <col width="40%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
-     <th>Purpose</th> 
-     <th>Documentation</th> 
-    </tr>
-       <tr> 
-     <td>Base</td> 
-     <td>These APIs contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API. 
-        <p>You can manage common files and zip archive files, and use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p></td> 
-     <td> 
-      <ul> 
-          <li>Guides: 
+   <colgroup>
+    <col width="20%" />
+    <col width="40%" />
+    <col width="40%" />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Feature</th>
+     <th>Purpose</th>
+     <th>Documentation</th>
+    </tr>
+       <tr>
+     <td>Base</td>
+     <td>These APIs contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API.
+        <p>You can manage common files and zip archive files, and use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p></td>
+     <td>
+      <ul>
+          <li>Guides:
           <p><a href="../../../../org.tizen.guides/html/web/data/data_cover_w.htm">Data Storage and Management</a></p>
           <p><a href="../../../../org.tizen.guides/html/web/error/error_w.htm">Error Handling</a></p></li>
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Base">Base</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Account</td> 
-     <td>This API contains classes and interfaces that enable you to manage account features. 
-        <p>You can use existing configured on-line accounts and providers, and create new accounts of known types.</p></td> 
-     <td> 
-      <ul> 
-          <li>Guides: <a href="../../../../org.tizen.guides/html/web/personal/personal_cover_w.htm">Personal Data</a></li> 
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Account">Account</a></li> 
-      </ul></td> 
-    </tr>      
-    <tr> 
-     <td>Application Framework</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage alarm, application, and package features. 
-        <p>You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.</p></td> 
-     <td> 
-      <ul> 
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Base">Base</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Account</td>
+     <td>This API contains classes and interfaces that enable you to manage account features.
+        <p>You can use existing configured on-line accounts and providers, and create new accounts of known types.</p></td>
+     <td>
+      <ul>
+          <li>Guides: <a href="../../../../org.tizen.guides/html/web/personal/personal_cover_w.htm">Personal Data</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Account">Account</a></li>
+      </ul></td>
+    </tr>
+    <tr>
+     <td>Application Framework</td>
+     <td>These APIs contain classes and interfaces that enable you to manage alarm, application, and package features.
+        <p>You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.</p></td>
+     <td>
+      <ul>
           <li>Guides:
           <p><a href="../../../../org.tizen.guides/html/web/alarm/alarms_w.htm">Alarms</a></p>
           <p><a href="../../../../org.tizen.guides/html/web/app_management/app_management_cover_w.htm">Application Management</a></p>
           <p><a href="../../../../org.tizen.guides/html/web/notification/notification_w.htm">Notifications</a></p>
-          <p><a href="../../../../org.tizen.guides/html/web/text_input/text_input_cover_w.htm">Text Input</a></p></li> 
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Application">Application Framework</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Content</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage content and download features. 
-        <p>You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.</p></td> 
-     <td> 
-      <ul> 
+          <p><a href="../../../../org.tizen.guides/html/web/text_input/text_input_cover_w.htm">Text Input</a></p></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Application">Application Framework</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Content</td>
+     <td>These APIs contain classes and interfaces that enable you to manage content and download features.
+        <p>You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.</p></td>
+     <td>
+      <ul>
           <li>Guides:
           <p><a href="../../../../org.tizen.guides/html/web/connectivity/connectivity_cover_w.htm">Connectivity and Wireless</a></p>
           <p><a href="../../../../org.tizen.guides/html/web/data/data_cover_w.htm">Data Storage and Management</a></p>
-          <p><a href="../../../../org.tizen.guides/html/web/media/media_cover_w.htm">Media and Camera</a></p></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Contents">Content</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Messaging</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage SMS, MMS, and email messages. 
-        <p>You can send and receive messages, and receive push notifications from a push server.</p></td> 
-     <td> 
-      <ul> 
-          <li>Guides: <a href="../../../../org.tizen.guides/html/web/messaging/messaging_cover_w.htm">Messaging</a></li>        
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Messaging">Messaging</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Multimedia</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage multimedia-related features. 
-        <p>You can change and monitor playback volume level, and listen to the FM radio.</p></td> 
-     <td> 
-      <ul> 
+          <p><a href="../../../../org.tizen.guides/html/web/media/media_cover_w.htm">Media and Camera</a></p></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Contents">Content</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Messaging</td>
+     <td>These APIs contain classes and interfaces that enable you to manage SMS, MMS, and email messages.
+        <p>You can send and receive messages, and receive push notifications from a push server.</p></td>
+     <td>
+      <ul>
+          <li>Guides: <a href="../../../../org.tizen.guides/html/web/messaging/messaging_cover_w.htm">Messaging</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Messaging">Messaging</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Multimedia</td>
+     <td>These APIs contain classes and interfaces that enable you to manage multimedia-related features.
+        <p>You can change and monitor playback volume level, and listen to the FM radio.</p></td>
+     <td>
+      <ul>
        <li>Guides: <a href="../../../../org.tizen.guides/html/web/media/media_cover_w.htm">Media and Camera</a></li>
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Multimedia">Multimedia</a></li>       
-      </ul></td> 
-    </tr>
-  <tr> 
-     <td>Network</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage Bluetooth, NFC (Near Field Communication), and secure element features. 
-   <p>You can transfer data over a Bluetooth connection, share contacts, photos, and videos using NFC, and access secure elements, such as SIM card and secure SD card, in a device.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/connectivity/connectivity_cover_w.htm">Connectivity and Wireless</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Network">Network</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Security</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage secure keys in your application. 
-        <p>You can use security functionalities, such as storing and recalling private data.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/security/security_cover_w.htm">Security</a></li> 
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Security">Security</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Social</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage bookmark, calendar, call history, contact, and data synchronization features. 
-        <p>You can manage the Tizen Web browser bookmark list, calendar events and tasks, call history, and address books and contacts on a device, and you can synchronize device data, such as contacts and calendar events, with the OMA DS server.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/personal/personal_cover_w.htm">Personal Data</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Social">Social</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>System</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage power, system information and setting, time, and Web setting features. 
-        <p>You can access the state of the device power resource, device system information, and device wallpaper settings, you can use locale-specific calendar features by retrieving date and time information, and set feedback patterns for specified actions. You can manage time features, and set Web view properties, such as setting Web view user agents and deleting Web view cookies.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: 
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Multimedia">Multimedia</a></li>
+      </ul></td>
+    </tr>
+  <tr>
+     <td>Network</td>
+     <td>These APIs contain classes and interfaces that enable you to manage Bluetooth, NFC (Near Field Communication), and secure element features.
+   <p>You can transfer data over a Bluetooth connection, share contacts, photos, and videos using NFC, and access secure elements, such as SIM card and secure SD card, in a device.</p></td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/connectivity/connectivity_cover_w.htm">Connectivity and Wireless</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Network">Network</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Security</td>
+     <td>These APIs contain classes and interfaces that enable you to manage secure keys in your application.
+        <p>You can use security functionalities, such as storing and recalling private data.</p></td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/security/security_cover_w.htm">Security</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Security">Security</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Social</td>
+     <td>These APIs contain classes and interfaces that enable you to manage bookmark, calendar, call history, contact, and data synchronization features.
+        <p>You can manage the Tizen Web browser bookmark list, calendar events and tasks, call history, and address books and contacts on a device, and you can synchronize device data, such as contacts and calendar events, with the OMA DS server.</p></td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/personal/personal_cover_w.htm">Personal Data</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Social">Social</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>System</td>
+     <td>These APIs contain classes and interfaces that enable you to manage power, system information and setting, time, and Web setting features.
+        <p>You can access the state of the device power resource, device system information, and device wallpaper settings, you can use locale-specific calendar features by retrieving date and time information, and set feedback patterns for specified actions. You can manage time features, and set Web view properties, such as setting Web view user agents and deleting Web view cookies.</p></td>
+     <td>
+      <ul>
+       <li>Guides:
           <p><a href="../../../../org.tizen.guides/html/web/device/device_cover_w.htm">Device Settings and Systems</a></p>
           <p><a href="../../../../org.tizen.guides/html/web/media/media_cover_w.htm">Media and Camera</a></p>
-          <p><a href="../../../../org.tizen.guides/html/web/sensors/sensors_cover_w.htm">Sensors</a></p></li>   
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#System">System</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Cordova</td> 
-     <td>These APIs contain classes and interfaces that enable you use common functionalities in creating Tizen Web applications. 
-        <p>You can manage the device filesystem, individual files, and various events, access device and network information and the device accelerometer, create dialog boxes and system log entries, and play audio files.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/cordova/cordova_cover_w.htm">Cordova</a></li>       
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Cordova">Cordova</a></li>     
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Web UI Framework</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features. 
-        <p>You can create and manage various kinds of UI components.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/ui/tau/tau_w.htm">Tizen Advanced UI</a></li> 
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Advanced UI Framework</a></li>      
-      </ul></td> 
-    </tr>      
-   </tbody> 
+          <p><a href="../../../../org.tizen.guides/html/web/sensors/sensors_cover_w.htm">Sensors</a></p></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#System">System</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Cordova</td>
+     <td>These APIs contain classes and interfaces that enable you use common functionalities in creating Tizen Web applications.
+        <p>You can manage the device filesystem, individual files, and various events, access device and network information and the device accelerometer, create dialog boxes and system log entries, and play audio files.</p></td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/cordova/cordova_cover_w.htm">Cordova</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Cordova">Cordova</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Web UI Framework</td>
+     <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features.
+        <p>You can create and manage various kinds of UI components.</p></td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/ui/tau/tau_w.htm">Tizen Advanced UI</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Advanced UI Framework</a></li>
+      </ul></td>
+    </tr>
+   </tbody>
   </table>
- 
+
 <p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html">Wearable Web Device API Reference</a>.</p>
-   <p align="center" class="Table"><strong>Table: Device API features provided for wearable applications</strong></p> 
-   <table border="1"> 
-   <colgroup> 
-    <col width="20%" /> 
-    <col width="40%" /> 
-    <col width="40%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
-     <th>Purpose</th> 
-     <th>Documentation</th> 
-    </tr>
-       <tr> 
-     <td>Base</td> 
-     <td>These APIs contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API. 
-        <p>You can manage common files and zip archive files, and use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p></td> 
-     <td> 
-      <ul> 
-          <li>Guides: 
+   <p align="center" class="Table"><strong>Table: Device API features provided for wearable applications</strong></p>
+   <table border="1">
+   <colgroup>
+    <col width="20%" />
+    <col width="40%" />
+    <col width="40%" />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Feature</th>
+     <th>Purpose</th>
+     <th>Documentation</th>
+    </tr>
+       <tr>
+     <td>Base</td>
+     <td>These APIs contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API.
+        <p>You can manage common files and zip archive files, and use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p></td>
+     <td>
+      <ul>
+          <li>Guides:
           <p><a href="../../../../org.tizen.guides/html/web/data/data_cover_w.htm">Data Storage and Management</a></p>
-          <p><a href="../../../../org.tizen.guides/html/web/error/error_w.htm">Error Handling</a></p></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Base">Base</a></li> 
-      </ul></td> 
-    </tr> 
-    <tr> 
-     <td>Application Framework</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage alarm, application, and package features. 
-        <p>You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.</p></td> 
-     <td> 
-      <ul> 
-          <li>Guides: 
+          <p><a href="../../../../org.tizen.guides/html/web/error/error_w.htm">Error Handling</a></p></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Base">Base</a></li>
+      </ul></td>
+    </tr>
+    <tr>
+     <td>Application Framework</td>
+     <td>These APIs contain classes and interfaces that enable you to manage alarm, application, and package features.
+        <p>You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.</p></td>
+     <td>
+      <ul>
+          <li>Guides:
           <p><a href="../../../../org.tizen.guides/html/web/alarm/alarms_w.htm">Alarms</a></p>
           <p><a href="../../../../org.tizen.guides/html/web/app_management/app_management_cover_w.htm">Application Management</a></p>
           <p><a href="../../../../org.tizen.guides/html/web/notification/notification_w.htm">Notifications</a></p>
-          <p><a href="../../../../org.tizen.guides/html/web/text_input/text_input_cover_w.htm">Text Input</a></p></li> 
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Application">Application Framework</a></li> 
-      </ul></td> 
+          <p><a href="../../../../org.tizen.guides/html/web/text_input/text_input_cover_w.htm">Text Input</a></p></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Application">Application Framework</a></li>
+      </ul></td>
     </tr>
 
-       <tr> 
-     <td>Content</td> 
-      <td>These APIs contain classes and interfaces that enable you to manage content and download features. 
-        <p>You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.</p></td> 
-     <td> 
-      <ul> 
-          <li>Guides: 
+       <tr>
+     <td>Content</td>
+      <td>These APIs contain classes and interfaces that enable you to manage content and download features.
+        <p>You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.</p></td>
+     <td>
+      <ul>
+          <li>Guides:
           <p><a href="../../../../org.tizen.guides/html/web/connectivity/connectivity_cover_w.htm">Connectivity and Wireless</a></p>
           <p><a href="../../../../org.tizen.guides/html/web/data/data_cover_w.htm">Data Storage and Management</a></p>
-          <p><a href="../../../../org.tizen.guides/html/web/media/media_cover_w.htm">Media and Camera</a></p></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Contents">Content</a></li> 
-      </ul></td> 
-    </tr>
-   <tr> 
-     <td>Messaging</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage push messaging.  
-        <p>You can receive push notifications from a push server.</p></td> 
-      <td> 
-       <ul> 
-     <li>Guides: <a href="../../../../org.tizen.guides/html/web/messaging/messaging_cover_w.htm">Messaging</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Messaging">Messaging</a></li> 
-       </ul></td> 
+          <p><a href="../../../../org.tizen.guides/html/web/media/media_cover_w.htm">Media and Camera</a></p></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Contents">Content</a></li>
+      </ul></td>
+    </tr>
+   <tr>
+     <td>Messaging</td>
+     <td>These APIs contain classes and interfaces that enable you to manage push messaging.
+        <p>You can receive push notifications from a push server.</p></td>
+      <td>
+       <ul>
+     <li>Guides: <a href="../../../../org.tizen.guides/html/web/messaging/messaging_cover_w.htm">Messaging</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Messaging">Messaging</a></li>
+       </ul></td>
      </tr>
-       <tr> 
-     <td>Multimedia</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage multimedia-related features. 
-        <p>You can change and monitor playback volume level, and listen to the FM radio.</p></td> 
-     <td> 
-      <ul> 
+       <tr>
+     <td>Multimedia</td>
+     <td>These APIs contain classes and interfaces that enable you to manage multimedia-related features.
+        <p>You can change and monitor playback volume level, and listen to the FM radio.</p></td>
+     <td>
+      <ul>
        <li>Guides: <a href="../../../../org.tizen.guides/html/web/media/media_cover_w.htm">Media and Camera</a></li>
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Multimedia">Multimedia</a></li>     
-      </ul></td> 
-    </tr>
-  <tr> 
-     <td>Network</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage Bluetooth, NFC (Near Field Communication), and secure element features. 
-   <p>You can transfer data over a Bluetooth connection, share contacts, photos, and videos using NFC, and access secure elements, such as SIM card and secure SD card, in a device.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/connectivity/connectivity_cover_w.htm">Connectivity and Wireless</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Network">Network</a></li> 
-      </ul></td> 
-    </tr>    
-       <tr> 
-     <td>Security</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage secure keys in your application. 
-        <p>You can use security functionalities, such as storing and recalling private data.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/security/security_cover_w.htm">Security</a></li> 
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Security">Security</a></li> 
-      </ul></td> 
-    </tr>      
-       <tr> 
-     <td>System</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage power, system information and setting, and time features. 
-        <p>You can access the state of the device power resource, device system information, and device wallpaper settings, you can use locale-specific calendar features by retrieving date and time information, and set feedback patterns for specified actions. You can also manage time features.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: 
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Multimedia">Multimedia</a></li>
+      </ul></td>
+    </tr>
+  <tr>
+     <td>Network</td>
+     <td>These APIs contain classes and interfaces that enable you to manage Bluetooth, NFC (Near Field Communication), and secure element features.
+   <p>You can transfer data over a Bluetooth connection, share contacts, photos, and videos using NFC, and access secure elements, such as SIM card and secure SD card, in a device.</p></td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/connectivity/connectivity_cover_w.htm">Connectivity and Wireless</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Network">Network</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Security</td>
+     <td>These APIs contain classes and interfaces that enable you to manage secure keys in your application.
+        <p>You can use security functionalities, such as storing and recalling private data.</p></td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/security/security_cover_w.htm">Security</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Security">Security</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>System</td>
+     <td>These APIs contain classes and interfaces that enable you to manage power, system information and setting, and time features.
+        <p>You can access the state of the device power resource, device system information, and device wallpaper settings, you can use locale-specific calendar features by retrieving date and time information, and set feedback patterns for specified actions. You can also manage time features.</p></td>
+     <td>
+      <ul>
+       <li>Guides:
           <p><a href="../../../../org.tizen.guides/html/web/device/device_cover_w.htm">Device Settings and Systems</a></p>
           <p><a href="../../../../org.tizen.guides/html/web/media/media_cover_w.htm">Media and Camera</a></p>
-          <p><a href="../../../../org.tizen.guides/html/web/sensors/sensors_cover_w.htm">Sensors</a></p></li>   
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#System">System</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Cordova</td> 
-     <td>These APIs contain classes and interfaces that enable you use common functionalities in creating Tizen Web applications. 
-        <p>You can manage the device filesystem, individual files, and various events, access device and network information and the device accelerometer, create dialog boxes and system log entries, and play audio files.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/cordova/cordova_cover_w.htm">Cordova</a></li>       
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Cordova">Cordova</a></li>           
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Web UI Framework</td> 
-     <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features. 
-        <p>You can create and manage various kinds of UI components.</p></td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/ui/tau/tau_w.htm">Tizen Advanced UI</a></li> 
-          <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Advanced UI Framework</a></li>           
-      </ul></td> 
-    </tr>      
-   </tbody> 
+          <p><a href="../../../../org.tizen.guides/html/web/sensors/sensors_cover_w.htm">Sensors</a></p></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#System">System</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Cordova</td>
+     <td>These APIs contain classes and interfaces that enable you use common functionalities in creating Tizen Web applications.
+        <p>You can manage the device filesystem, individual files, and various events, access device and network information and the device accelerometer, create dialog boxes and system log entries, and play audio files.</p></td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/cordova/cordova_cover_w.htm">Cordova</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Cordova">Cordova</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Web UI Framework</td>
+     <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features.
+        <p>You can create and manage various kinds of UI components.</p></td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/ui/tau/tau_w.htm">Tizen Advanced UI</a></li>
+          <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Advanced UI Framework</a></li>
+      </ul></td>
+    </tr>
+   </tbody>
   </table>
- 
+
 <p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html" shape="rect">Mobile Web W3C/HTML5 and Supplementaries API Reference</a>.</p>
-   <p align="center" class="Table"><strong>Table: W3C/HTML5 and some supplementary API features provided for mobile applications</strong></p> 
-   <table border="1"> 
-   <colgroup> 
-    <col width="20%" /> 
-    <col width="40%" /> 
-    <col width="40%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
-     <th>Purpose</th> 
-     <th>Documentation</th> 
-    </tr>
-       <tr> 
-     <td>DOM, Forms and Styles</td> 
-     <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible and multi-column layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">User Interface</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Device</td> 
-     <td>These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, manage screen orientation, implement and control various types of touch events, and implement different vibration patterns on a Tizen device.</td> 
-     <td> 
-      <ul> 
-          <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device</a></li>   
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#device">Device</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Graphics</td> 
-     <td>These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context, and create and modify SVG elements in your application.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li>       
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">Graphics</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Media</td> 
-     <td>These APIs enable you to access a local device to generate a multimedia stream, access the media capture capabilities based on their type, control multimedia playback and check supported media formats, and play audio content.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">Media</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Communication</td> 
-     <td>These APIs enable you to send and receive data between Web sites and through a message channel, exchange push data with the server, connect to the socket server to send and receive data, and use cross-origin resource sharing (CORS) to request and send data of various content types.</td> 
-     <td> 
-      <ul> 
+   <p align="center" class="Table"><strong>Table: W3C/HTML5 and some supplementary API features provided for mobile applications</strong></p>
+   <table border="1">
+   <colgroup>
+    <col width="20%" />
+    <col width="40%" />
+    <col width="40%" />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Feature</th>
+     <th>Purpose</th>
+     <th>Documentation</th>
+    </tr>
+       <tr>
+     <td>DOM, Forms and Styles</td>
+     <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible and multi-column layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">User Interface</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Device</td>
+     <td>These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, manage screen orientation, implement and control various types of touch events, and implement different vibration patterns on a Tizen device.</td>
+     <td>
+      <ul>
+          <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#device">Device</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Graphics</td>
+     <td>These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context, and create and modify SVG elements in your application.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">Graphics</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Media</td>
+     <td>These APIs enable you to access a local device to generate a multimedia stream, access the media capture capabilities based on their type, control multimedia playback and check supported media formats, and play audio content.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">Media</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Communication</td>
+     <td>These APIs enable you to send and receive data between Web sites and through a message channel, exchange push data with the server, connect to the socket server to send and receive data, and use cross-origin resource sharing (CORS) to request and send data of various content types.</td>
+     <td>
+      <ul>
           <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm">Communication</a></li>
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">Communication</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Storage</td> 
-     <td>These APIs enable you to retrieve file content and information, slice data objects, manage sandboxed file systems, activate project resource caching and manage the cached resources, create an object store and save data in it, create databases and access them using SQL statements, and use session storage and local storage.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage</a></li>        
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#storage">Storage</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Security</td> 
-     <td>These APIs enable you to allow or block specific HTML elements on a Web page, and make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.</td> 
-     <td> 
-      <ul>      
-               <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>UI</td> 
-     <td>These APIs enable you to copy content and paste it in an editable area, create and manage draggable elements, and implement drag events.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">User Interface</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Performance and Optimization</td> 
-     <td>These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#performance">Performance and Optimization</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Location</td> 
-     <td>These APIs enable you to retrieve and update position information.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li>   
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Location</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Supplementary</td> 
-     <td>These APIs enable you to manage some supplementary features, such as displaying an element on full screen, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li> 
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#Supplementary">Supplementary</a></li> 
-      </ul></td> 
-    </tr>
-   </tbody> 
-  </table> 
-  
- 
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">Communication</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Storage</td>
+     <td>These APIs enable you to retrieve file content and information, slice data objects, manage sandboxed file systems, activate project resource caching and manage the cached resources, create an object store and save data in it, create databases and access them using SQL statements, and use session storage and local storage.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#storage">Storage</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Security</td>
+     <td>These APIs enable you to allow or block specific HTML elements on a Web page, and make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.</td>
+     <td>
+      <ul>
+               <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>UI</td>
+     <td>These APIs enable you to copy content and paste it in an editable area, create and manage draggable elements, and implement drag events.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">User Interface</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Performance and Optimization</td>
+     <td>These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#performance">Performance and Optimization</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Location</td>
+     <td>These APIs enable you to retrieve and update position information.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Location</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Supplementary</td>
+     <td>These APIs enable you to manage some supplementary features, such as displaying an element on full screen, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#Supplementary">Supplementary</a></li>
+      </ul></td>
+    </tr>
+   </tbody>
+  </table>
+
+
 <p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">Wearable Web W3C/HTML5 and Supplementaries API Reference</a>.</p>
-   <p align="center" class="Table"><strong>Table: W3C/HTML5 and some supplementary API features provided for wearable applications</strong></p> 
-   <table border="1"> 
-   <colgroup> 
-    <col width="20%" /> 
-    <col width="40%" /> 
-    <col width="40%" /> 
-   </colgroup> 
-   <tbody> 
-    <tr> 
-     <th>Feature</th> 
-     <th>Purpose</th> 
-     <th>Documentation</th> 
-    </tr>
-       <tr> 
-     <td>DOM, Forms and Styles</td> 
-     <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">User Interface</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Device</td> 
-     <td>These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, implement and control various types of touch events, and implement different vibration patterns on a Tizen wearable device.</td> 
-     <td> 
-      <ul> 
+   <p align="center" class="Table"><strong>Table: W3C/HTML5 and some supplementary API features provided for wearable applications</strong></p>
+   <table border="1">
+   <colgroup>
+    <col width="20%" />
+    <col width="40%" />
+    <col width="40%" />
+   </colgroup>
+   <tbody>
+    <tr>
+     <th>Feature</th>
+     <th>Purpose</th>
+     <th>Documentation</th>
+    </tr>
+       <tr>
+     <td>DOM, Forms and Styles</td>
+     <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">User Interface</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Device</td>
+     <td>These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, implement and control various types of touch events, and implement different vibration patterns on a Tizen wearable device.</td>
+     <td>
+      <ul>
           <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device</a></li>
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#device">Device</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Graphics</td> 
-     <td>These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li> 
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">Graphics</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Media</td> 
-     <td>These APIs enable you to access a local device to generate a multimedia stream, control multimedia playback and check supported media formats, and play audio content.</td> 
-     <td> 
-      <ul> 
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#device">Device</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Graphics</td>
+     <td>These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">Graphics</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Media</td>
+     <td>These APIs enable you to access a local device to generate a multimedia stream, control multimedia playback and check supported media formats, and play audio content.</td>
+     <td>
+      <ul>
        <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media</a></li>
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">Media</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Communication</td> 
-     <td>These APIs enable you to send and receive data between Web sites and through a message channel, and connect to the socket server to send and receive data.</td> 
-     <td> 
-      <ul>       
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">Media</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Communication</td>
+     <td>These APIs enable you to send and receive data between Web sites and through a message channel, and connect to the socket server to send and receive data.</td>
+     <td>
+      <ul>
                <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm">Communication</a></li>
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">Communication</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Storage</td> 
-     <td>These APIs enable you to retrieve file content and information, create an object store and save data in it, and use session storage and local storage.</td> 
-     <td> 
-      <ul> 
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">Communication</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Storage</td>
+     <td>These APIs enable you to retrieve file content and information, create an object store and save data in it, and use session storage and local storage.</td>
+     <td>
+      <ul>
        <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage</a></li>
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#storage">Storage</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Security</td> 
-     <td>These APIs enable you to allow or block specific HTML elements on a Web page.</td> 
-     <td> 
-      <ul> 
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#storage">Storage</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Security</td>
+     <td>These APIs enable you to allow or block specific HTML elements on a Web page.</td>
+     <td>
+      <ul>
        <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security</a></li>
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Performance and Optimization</td> 
-     <td>These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#performance">Performance and Optimization</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Location</td> 
-     <td>These APIs enable you to retrieve and update position information.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li>  
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#location">Location</a></li> 
-      </ul></td> 
-    </tr>
-       <tr> 
-     <td>Supplementary</td> 
-     <td>These APIs enable you to manage some supplementary features, such as managing the device camera, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td> 
-     <td> 
-      <ul> 
-       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li> 
-       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#Supplementary">Supplementary</a></li> 
-      </ul></td> 
-    </tr>      
-   </tbody> 
-  </table>       
-    
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Performance and Optimization</td>
+     <td>These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#performance">Performance and Optimization</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Location</td>
+     <td>These APIs enable you to retrieve and update position information.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#location">Location</a></li>
+      </ul></td>
+    </tr>
+       <tr>
+     <td>Supplementary</td>
+     <td>These APIs enable you to manage some supplementary features, such as managing the device camera, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td>
+     <td>
+      <ul>
+       <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li>
+       <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#Supplementary">Supplementary</a></li>
+      </ul></td>
+    </tr>
+   </tbody>
+  </table>
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/web/details/web_runtime_w.htm b/org.tizen.training/html/web/details/web_runtime_w.htm
index 97f1203..ee20083 100644 (file)
--- a/org.tizen.training/html/web/details/web_runtime_w.htm
+++ b/org.tizen.training/html/web/details/web_runtime_w.htm
@@ -5,14 +5,14 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Web Runtime</title>  
-       
+       <title>Web Runtime</title>
+
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -21,7 +21,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -30,29 +30,29 @@
                        <li><a href="#security">Web Application Security and Privacy</a></li>
                </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 <h1>Web Runtime</h1>
 
-  <p>The Web Runtime (WRT) engine allows Web applications to run outside the browser. You can install Web applications and use them as standalone applications.</p> 
-  <p>The Web Runtime features include the following:</p> 
-  <ul> 
-   <li><a href="#manage">Managing Web Applications</a> <p>Provides information on supported Web application types and managing Web applications.</p></li> 
-   <li><a href="#runtime">Web Runtime API Support</a> <p>Provides information on APIs and features supported by the Web Runtime.</p></li> 
-   <li><a href="#security">Web Application Security and Privacy</a> <p>Provides information on the key security and privacy considerations for Web applications.</p></li> 
-  </ul>   
-
-<h2 id="manage" name="manage">Managing Web Applications</h2> 
-  <p>The Web Runtime supports the following Web application types:</p> 
-  <ul> 
-   <li><p>Packaged Web applications</p></li> 
-   <li><p>Hosted Web applications</p></li> 
-  </ul> 
-  <p>All Web applications must be packaged according to <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. However, unlike packaged Web applications, the hosted Web applications have an externally hosted document as their starting page. For more information, see Extending Configuration Elements (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_extend">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">wearable</a> applications).</p> 
-  <p>You can manage Web applications by:</p> 
-  <ul> 
-   <li>Installing Web applications <p>To install a Web application, see the <a href="http://www.w3.org/TR/widgets/#steps-for-processing-a-widget-package" target="_blank">guidelines for processing a Web application package</a>. After the installation is completed, the WRT sends a notification of the result.</p> <p>The Web Runtime also registers the Web application on the device&#39;s idle screen. It uses an icon and Web application name derived according to Web application packaging rules.</p>
+  <p>The Web Runtime (WRT) engine allows Web applications to run outside the browser. You can install Web applications and use them as standalone applications.</p>
+  <p>The Web Runtime features include the following:</p>
+  <ul>
+   <li><a href="#manage">Managing Web Applications</a> <p>Provides information on supported Web application types and managing Web applications.</p></li>
+   <li><a href="#runtime">Web Runtime API Support</a> <p>Provides information on APIs and features supported by the Web Runtime.</p></li>
+   <li><a href="#security">Web Application Security and Privacy</a> <p>Provides information on the key security and privacy considerations for Web applications.</p></li>
+  </ul>
+
+<h2 id="manage" name="manage">Managing Web Applications</h2>
+  <p>The Web Runtime supports the following Web application types:</p>
+  <ul>
+   <li><p>Packaged Web applications</p></li>
+   <li><p>Hosted Web applications</p></li>
+  </ul>
+  <p>All Web applications must be packaged according to <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. However, unlike packaged Web applications, the hosted Web applications have an externally hosted document as their starting page. For more information, see Extending Configuration Elements (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_extend">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">wearable</a> applications).</p>
+  <p>You can manage Web applications by:</p>
+  <ul>
+   <li>Installing Web applications <p>To install a Web application, see the <a href="http://www.w3.org/TR/widgets/#steps-for-processing-a-widget-package" target="_blank">guidelines for processing a Web application package</a>. After the installation is completed, the WRT sends a notification of the result.</p> <p>The Web Runtime also registers the Web application on the device's idle screen. It uses an icon and Web application name derived according to Web application packaging rules.</p>
 
 <p>If a Web application installation fails due to power failure, the Web Runtime reinstalls it during next booting. The Web Runtime aborts the installation in the following situations:</p>
 <ul>
@@ -60,14 +60,14 @@
 <li>Web application privilege level is Public, and 1 or more Partner or Platform level API privileges are declared in the configuration file.</li>
        </ul>
 
-  
+
      <div class="note">
         <strong>Note</strong>
         A Web application can be installed from the Tizen Store or can be side-loaded (for example, through a browser or Bluetooth).
                The <code>&lt;feature&gt;</code> element is ignored in the Tizen Web application installation process.
     </div>
-</li> 
-   <li>Updating Web applications 
+</li>
+   <li>Updating Web applications
    <p>The WRT supports updating Web applications when there is a new version available.</p>
 
 <p>The following rules apply during the Web application updating process:</p>
@@ -77,38 +77,38 @@
 <li>If the Web application that is being updated has no author signature, it is not updated if the new version has an author signature.</li>
 <li>The updating process is similar to the installation process.</li>
 <li>Web application data, such as Tizen settings, cookies, and local storage are preserved across updates. You must ensure that the old data in your application is still usable after the update.</li>
-</ul></li> 
-   <li>Uninstalling Web applications <p>The WRT supports the uninstallation of Web applications. During the uninstallation process, all Web application data, such as preferences, local storage data, cookies, and the local storage folder, are removed.</p></li> 
+</ul></li>
+   <li>Uninstalling Web applications <p>The WRT supports the uninstallation of Web applications. During the uninstallation process, all Web application data, such as preferences, local storage data, cookies, and the local storage folder, are removed.</p></li>
    <li>Managing Web application life-cycle <p>The WRT supports W3C DOM load and unload, and the <a href="http://www.w3.org/TR/page-visibility/" target="_blank">Page Visibility</a> events for all pages.</p> <p>When a Web application is sent to the background or hidden, the JavaScript execution and rendering, including CSS animations, is suspended, unless the application is specifically configured to be a background service.</p> <p>When a Web application returns to the foreground, the JavaScript execution and rendering is resumed.</p> <p>The Web Runtime supports the following URI schemes: <code>sms://</code>, <code>mmsto://</code>, and <code>mailto://</code>. </p>
    <p>For each supported URI scheme, the Web Runtime launches a registered platform scheme handler with appropriate parameters.</p><p>The content localization is supported according to the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and Configuration</a>.</p>
-</li> 
-  </ul> 
-
-<h2 id="runtime" name="runtime">Web Runtime API Support</h2> 
-  <p>The main functionality of the Web Runtime is to provide the following Tizen Web APIs to Web applications:</p> 
-  <ul> 
-   <li><p><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 APIs</a></p></li> 
-   <li><p><a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Device API</a></p></li> 
-  </ul> 
+</li>
+  </ul>
+
+<h2 id="runtime" name="runtime">Web Runtime API Support</h2>
+  <p>The main functionality of the Web Runtime is to provide the following Tizen Web APIs to Web applications:</p>
+  <ul>
+   <li><p><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 APIs</a></p></li>
+   <li><p><a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Device API</a></p></li>
+  </ul>
   <p>It also supports multiple browsing context creation within a single Web application using, for example, the <code>window.open()</code> method, or hyperlink navigation.</p>
   <p>Tizen Web APIs can be accessed in the top-level browsing context, such as main document window, and nested browsing contexts, such as iframes.</p>
 
-  
+
      <div class="note">
         <strong>Note</strong>
         Tizen Device API can only be used with a locally packaged page. Tizen Device APIs are not available in cross-origin pages.
     </div>
-       
+
  <p>To access the host page of your Web application, add the domain for access in the <code>config.xml</code> file. For more information, see <a href="#content_sec">Content Security Policy</a>.</p>
-  <p>The Web Runtime also supports the following features:</p> 
-  <ul> 
-   <li><p><a href="http://www.w3.org/TR/widgets-apis/" target="_blank">Widget Interface</a></p></li> 
-   <li><p><code>maximized</code> and <code>fullscreen</code> view modes of the <a href="http://www.w3.org/TR/view-mode/" target="_blank">&#39;view-mode&#39; Media Feature</a>.</p></li> 
+  <p>The Web Runtime also supports the following features:</p>
+  <ul>
+   <li><p><a href="http://www.w3.org/TR/widgets-apis/" target="_blank">Widget Interface</a></p></li>
+   <li><p><code>maximized</code> and <code>fullscreen</code> view modes of the <a href="http://www.w3.org/TR/view-mode/" target="_blank">'view-mode' Media Feature</a>.</p></li>
 
   </ul>
 
- <h2 id="security" name="security">Web Application Security and Privacy</h2> 
-  
+ <h2 id="security" name="security">Web Application Security and Privacy</h2>
+
   <p>The Web application security consists of the following elements:</p>
   <ul>
   <li><a href="#signature">Web Application Signature</a></li>
@@ -118,34 +118,34 @@
   <li><a href="#device">Tizen Device API Security Policy</a></li>
   <li><a href="#content_sec">Content Security Policy</a></li>
   </ul>
-  
+
   <h3 id="signature" name="signature">Web Application Signature</h3>
-  <p>The Web Runtime follows the <a href="http://www.w3.org/TR/widgets-digsig/" target="_blank">XML digital widget signature</a> process:</p> 
-  <ul> 
-   <li>Web application can be signed by the author and distributors.</li> 
+  <p>The Web Runtime follows the <a href="http://www.w3.org/TR/widgets-digsig/" target="_blank">XML digital widget signature</a> process:</p>
+  <ul>
+   <li>Web application can be signed by the author and distributors.</li>
    <li>The first valid Tizen distributor signature, <code>signature1.xml</code>, determines the privilege level of the Web application, which is Public, Partner, or Platform.</li>
    <li>Web application is installed as a trusted application when it is signed with valid signatures and its privilege level is Public, Partner, or Platform.</li>
    <li>Web application is installed as an untrusted application if it is:
 <ul>
        <li>Not signed by an author or distributor signature.</li>
        <li>Signed with a valid signature, but its privilege level is not Public, Partner, or Platform.</li>
-</ul>   </li> 
-   <li>If the signature of a Web application is invalid, it cannot be installed.</li> 
-  </ul> 
-  
+</ul>   </li>
+   <li>If the signature of a Web application is invalid, it cannot be installed.</li>
+  </ul>
+
   <h3 id="protect" name="protect">Web Application Protection</h3>
-  <p>For Web applications that explicitly turn on encryption (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications) using the <code>&lt;tizen:setting /&gt;</code> element in the configuration file, the Web Runtime provides the following protection features:</p> 
-  <ul> 
-   <li>HTML, JavaScript, and CSS files of the Web application stored by the device are encrypted.</li> 
-   <li>When the Web application is launched, the WRT decrypts all of its resources in a manner which is transparent to the Web application itself.</li> 
-  </ul> 
-  
+  <p>For Web applications that explicitly turn on encryption (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_setting">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_setting">wearable</a> applications) using the <code>&lt;tizen:setting /&gt;</code> element in the configuration file, the Web Runtime provides the following protection features:</p>
+  <ul>
+   <li>HTML, JavaScript, and CSS files of the Web application stored by the device are encrypted.</li>
+   <li>When the Web application is launched, the WRT decrypts all of its resources in a manner which is transparent to the Web application itself.</li>
+  </ul>
+
   <h3 id="storage" name="storage">Private Storage Support</h3>
   <p>Each Web application has its own private storage space that is not accessible to any other application.</p>
-  
+
   <h3 id="html5" name="html2">HTML5 API Security Policy</h3>
    <p>The Web applications can use HTML5 APIs, some of which need user permission to execute the API call. For such APIs, the Web Runtime supports specific privileges.</p>
-  
+
   <p>The following table summarizes distributor signature type to API privilege level behavior mapping.</p>
     <p align="center" class="Table"><strong>Table: HTML5 API privileges and behavior</strong></p>
                <table border="1">
@@ -187,12 +187,12 @@
                </tr>
                <tr>
                        <td>Video Recording (in <strong>wearable applications only</strong>)</td>
-                       <td><code>http://tizen.org/privilege/camera</code></td> 
+                       <td><code>http://tizen.org/privilege/camera</code></td>
                </tr>
        </tbody>
   </table>
 
-  
+
    <h3 id="device" name="device">Tizen Device API Security Policy</h3>
   <p>Web Runtime also provides access to sensitive Device API features after consulting the platform-defined security policy. A Web application or an individual user cannot elevate the permissions set by the platform-defined security policy. The mapping between each Tizen Device API and the corresponding privilege is defined in the API definitions in the <a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Device API Reference</a>.</p>
   <p>The following table summarizes distributor signature type to API privilege level behavior mapping:</p>
@@ -238,26 +238,26 @@
 
 <p>In the CSP-based security mode, the Web Runtime provides content security as per <strong>Content Security Policy 1.0</strong>. CSP policies can be delivered from the following sources:</p>
   <ul>
-       <li>Default policy (enforced by WRT, if required): <code>default-src *; script-src &#39;self&#39;; style-src &#39;self&#39;; object-src &#39;none&#39;;</code></li>
+       <li>Default policy (enforced by WRT, if required): <code>default-src *; script-src 'self'; style-src 'self'; object-src 'none';</code></li>
        <li><code>config.xml</code>: <code>&lt;tizen:content-security-policy&gt;</code> or <code>&lt;tizen:content-security-policy-report-only&gt;</code>
        <p>If the CSP is defined in the <code>config.xml</code> file, the configuration-based CSP policy is enforced and the default CSP is ignored.</p>
        <p>If the CSP policy is not defined in the <code>config.xml</code> file, the default CSP policy is enforced.</p></li>
        <li>HTTP header: <code>Content-Security-Policy</code> or <code>Content-Security-Policy-Report-Only</code>
        <p>If a CSP is present in the HTTP header, the most restrictive policy in the configuration-based CSP and HTTP-based CSP is applied.</p></li>
   </ul>
-<p> Otherwise, the Web application is set to the <strong>WARP-based security mode</strong>. In this mode, the Web application network and content security is enforced by the legacy <code>&lt;access&gt;</code> tag according to <a href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/" target="_blank">Widget Access Request Policy</a>.</p>  
- 
+<p> Otherwise, the Web application is set to the <strong>WARP-based security mode</strong>. In this mode, the Web application network and content security is enforced by the legacy <code>&lt;access&gt;</code> tag according to <a href="http://www.w3.org/TR/2012/REC-widgets-access-20120207/" target="_blank">Widget Access Request Policy</a>.</p>
+
   <div class="note">
         <strong>Note</strong>
         The default CSP enforcement is subject to change in the future.
     </div>
-  
+
      <div class="note">
         <strong>Note</strong>
         If a Web application declares the <code>&lt;tizen:allow-navigation&gt;</code> element in its configuration document, the main resource navigation (through the <code>window.open()</code> method or a hyperlink) to an external URL is allowed or restricted accordingly.
     </div>
 
-                       
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
diff --git a/org.tizen.training/html/web/getting_started_w.htm b/org.tizen.training/html/web/getting_started_w.htm
index 5b8d0ad..3b1f0d3 100644 (file)
--- a/org.tizen.training/html/web/getting_started_w.htm
+++ b/org.tizen.training/html/web/getting_started_w.htm
@@ -5,25 +5,25 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
-       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/snippet.js"></script>
        <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
 
-       <title>Getting Started with Web Applications</title>  
+       <title>Getting Started with Web Applications</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile Web" src="../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../images/wearable_s_w.png"/></p>
        </div>
-       
+
 <h1>Getting Started with Web Applications</h1>
 
 
diff --git a/org.tizen.training/html/web/mobile/first_app_mw.htm b/org.tizen.training/html/web/mobile/first_app_mw.htm
index 0e0e72c..88db5c1 100644 (file)
--- a/org.tizen.training/html/web/mobile/first_app_mw.htm
+++ b/org.tizen.training/html/web/mobile/first_app_mw.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Your First Tizen Mobile Web Application</title>  
+       <title>Creating Your First Tizen Mobile Web Application</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -265,13 +265,13 @@
 
 <p>If you have created multiple emulator instances, select the instance you want from the combo box in the toolbar before selecting to run the application. If you select an offline emulator, it is automatically launched when you select to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p>
 </li>
 
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_mw.png" alt="Application running in the emulator" /></p>
 
-  
+
      <div class="note">
         <strong>Note</strong>
         If the emulator display has switched off, you cannot see the application launch. To see the application on the emulator screen:
@@ -321,7 +321,7 @@
 <li>Run the application:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, select the device.</li>
-<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>. 
+<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>.
 
 <p align="center"><img src="../../images/app_run_mw.png" alt="Running the application on a target device" /></p>
 
@@ -331,7 +331,7 @@
 
 <p>If you have both a connected device and existing emulator instances, select the device from the combo box in the toolbar before selecting to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p>
 
 </li>
 <li>Confirm that the application launches in the target device.</li>
@@ -346,9 +346,9 @@
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_w.png" /></p></li>
         </ol>
     </div>
- 
-  
-<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p> 
+
+
+<p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
 </ol>
 
@@ -361,19 +361,19 @@
 
 <p>The W3C specifications provide HTML and CSS features for creating a user interface. With HTML, you can define the structure of the application screens, while CSS allows you to define the look and feel of the screens.</p>
 
-<h4 id="html" name="html">HTML</h4> 
+<h4 id="html" name="html">HTML</h4>
 
 <p>HTML DOM is a structured model to control Web elements. It is an official W3C standard to express the document regardless of platforms or languages, and the foundation of the HTML5 APIs.</p>
 <p>The <code>&lt;html&gt;</code> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> elements as child nodes:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;!--Content--&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--Content--&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -387,19 +387,19 @@
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Tizen Mobile Web Basic Template&quot;/&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Tizen Mobile Web Basic Application&lt;/title&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta charset="utf-8" /&gt;
+      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
+      &lt;meta name="description" content="Tizen Mobile Web Basic Template"/&gt;
+
+      &lt;title&gt;Tizen Mobile Web Basic Application&lt;/title&gt;
+
+      &lt;link rel="stylesheet" type="text/css" href="css/style.css"/&gt;
+      &lt;script src="js/main.js"&gt;&lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--Content--&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -407,17 +407,17 @@
 
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;main&quot; class=&quot;page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;content-text&quot;&gt;Basic&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="main" class="page"&gt;
+      &lt;div class="contents"&gt;
+         &lt;span id="content-text"&gt;Basic&lt;/span&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
 <p>The HTML code displays the <strong>Basic</strong> text on the screen.</p>
 
-<p align="center"><strong>Figure: Screen with Basic text</strong></p> 
+<p align="center"><strong>Figure: Screen with Basic text</strong></p>
 <p align="center"><img src="../../images/basic_app_running_1_mw.png" alt="Screen with Basic text" /></p>
 
 <h4 id="css" name="css">CSS</h4>
@@ -437,19 +437,19 @@
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Tizen Mobile Web Basic Template&quot;/&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Tizen Mobile Web Basic Application&lt;/title&gt; 
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta charset="utf-8" /&gt;
+      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
+      &lt;meta name="description" content="Tizen Mobile Web Basic Template"/&gt;
+
+      &lt;title&gt;Tizen Mobile Web Basic Application&lt;/title&gt;
+
+      <span class="highlight">&lt;link rel="stylesheet" type="text/css" href="css/style.css"/&gt;</span>
+      &lt;script src="js/main.js"&gt;&lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--Content--&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -461,41 +461,41 @@
 html,
 body
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;margin: 0 auto;
-&nbsp;&nbsp;&nbsp;padding: 0;
-&nbsp;&nbsp;&nbsp;background-color: #222222;
-&nbsp;&nbsp;&nbsp;color: #ffffff;
+   width: 100%;
+   height: 100%;
+   margin: 0 auto;
+   padding: 0;
+   background-color: #222222;
+   color: #ffffff;
 }
 .page
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;display: table;
+   width: 100%;
+   height: 100%;
+   display: table;
 }
 .contents
 {
-&nbsp;&nbsp;&nbsp;display: table-cell;
-&nbsp;&nbsp;&nbsp;vertical-align: middle;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;-webkit-tap-highlight-color: transparent;
+   display: table-cell;
+   vertical-align: middle;
+   text-align: center;
+   -webkit-tap-highlight-color: transparent;
 }
 #content-text
 {
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;font-size: 5em;
+   font-weight: bold;
+   font-size: 5em;
 }
 </pre>
 </li>
 <li><code>index.html</code>:
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;main&quot; class=&quot;page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;content-text&quot;&gt;Basic&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="main" class="page"&gt;
+      &lt;div class="contents"&gt;
+         &lt;span id="content-text"&gt;Basic&lt;/span&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -505,13 +505,13 @@ body
 <pre class="prettyprint">
 #content-text
 {
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;font-size: 5em;
-&nbsp;&nbsp;&nbsp;<span class="highlight">color: #ff0000;</span>
+   font-weight: bold;
+   font-size: 5em;
+   <span class="highlight">color: #ff0000;</span>
 }
 </pre>
 
-<p align="center"><strong>Figure: Screen with a new text color</strong></p> 
+<p align="center"><strong>Figure: Screen with a new text color</strong></p>
 <p align="center"><img src="../../images/build_ui_basic_textbox_mw.png" alt="Screen with a new text color" /></p>
 
 <h3 id="tau" name="tau">TAU (Tizen Advanced UI)</h3>
@@ -539,13 +539,13 @@ body
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--HTML BODY CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;link rel="stylesheet" href="lib/tau/mobile/theme/default/tau.css"/&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--HTML BODY CONTENT--&gt;
+      &lt;script type="text/javascript" src="lib/tau/mobile/js/tau.js"&gt;&lt;/script&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -559,22 +559,22 @@ body
 </li>
 </ul>
 
-<p>You can add an additional <code>&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</code> or <code>&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</code> element to include your own scripts and style sheets. However, place them after the default <code>&lt;script&gt;</code> elements, as you can use any TAU APIs provided by the default libraries.</p>
+<p>You can add an additional <code>&lt;script src="&lt;CUSTOM_LIBRARY&gt;"&gt;</code> or <code>&lt;link rel="stylesheet" src="&lt;CUSTOM_CSS&gt;"&gt;</code> element to include your own scripts and style sheets. However, place them after the default <code>&lt;script&gt;</code> elements, as you can use any TAU APIs provided by the default libraries.</p>
 <p>To load your JavaScript file, include the file in the <code>&lt;script&gt;</code> element in the HTML <code>&lt;body&gt;</code> element. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
 <p>The following example shows a basic TAU template. Overwrite the <code>index.html</code> file content with the following code:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;lib/tau/mobile/theme/default/tau.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello TAU&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--HTML BODY CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta name="viewport" content="width=device-width, user-scalable=no"/&gt;
+      &lt;link rel="stylesheet" href="lib/tau/mobile/theme/default/tau.css"/&gt;
+      &lt;link rel="stylesheet" href="css/style.css"/&gt;
+      &lt;title&gt;Hello TAU&lt;/title&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--HTML BODY CONTENT--&gt;
+      &lt;script type="text/javascript" src="lib/tau/mobile/js/tau.js"&gt;&lt;/script&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -602,27 +602,27 @@ body
 <li><p>To create a page in the <code>&lt;body&gt;</code> element, use the <code>ui-page</code> class with the <code>&lt;div&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Script import--&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt; ... &lt;/script&gt;
+   &lt;div class="ui-page" id="main"&gt;
+   &lt;/div&gt;
+   &lt;!--Script import--&gt;
+   &lt;script&gt; ... &lt;/script&gt;
 &lt;/body&gt;
 </pre></li>
 <li>
 <p>To layout the page, add a content area with the <code>ui-content</code> class, a header with the <code>ui-header</code> class, and a footer with the <code>ui-footer</code> class:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello World&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This is content area&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p>This is footer area&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="ui-page" id="main"&gt;
+      &lt;div class="ui-header" data-position="fixed"&gt;
+         &lt;h1&gt;Hello World&lt;/h1&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-content"&gt;
+         &lt;p&gt;This is content area&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-footer"&gt;
+         &lt;p>This is footer area&lt;/p&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -633,18 +633,18 @@ body
 <p>You can add your own style in the content and footer area with a defined <code>id</code> attribute:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello World&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot; id=&quot;contentArea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This is content area&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot; id=&quot;footerArea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This is footer area&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="ui-page" id="main"&gt;
+      &lt;div class="ui-header" data-position="fixed"&gt;
+         &lt;h1&gt;Hello World&lt;/h1&gt;
+      &lt;/div&gt;
+
+      &lt;div class="ui-content" id="contentArea"&gt;
+         &lt;p&gt;This is content area&lt;/p&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-footer" id="footerArea"&gt;
+         &lt;p&gt;This is footer area&lt;/p&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -653,11 +653,11 @@ body
 <pre class="prettyprint">
 #contentArea
 {
-&nbsp;&nbsp;&nbsp;background-color: white;
+   background-color: white;
 }
 #footerArea
 {
-&nbsp;&nbsp;&nbsp;background-color: blue;
+   background-color: blue;
 }
 </pre>
 <p>With your new styles, the screen looks like this.</p>
@@ -674,42 +674,42 @@ body
 <p>Create a simple and basic static list. Overwrite the <code>index.html</code> file content with the following code:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello TAU&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-static&quot;&gt;list item1&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-static&quot;&gt;list item2&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-static&quot;&gt;list item3&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-static&quot;&gt;list item4&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="ui-page" id="main"&gt;
+      &lt;div class="ui-header" data-position="fixed"&gt;
+         &lt;h1&gt;Hello TAU&lt;/h1&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-content"&gt;
+         &lt;ul class="ui-listview"&gt;
+            &lt;li class="ui-li-static"&gt;list item1&lt;/li&gt;
+            &lt;li class="ui-li-static"&gt;list item2&lt;/li&gt;
+            &lt;li class="ui-li-static"&gt;list item3&lt;/li&gt;
+            &lt;li class="ui-li-static"&gt;list item4&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 <p>The screen now shows a basic list.</p>
 <p align="center"><img src="../../images/simple_ui_tau_list_mw.png" alt="TAU list" /></p>
 </li>
 <li>
-<p>For a more advanced option, you can also create an anchor listview (whose items can be clicked to navigate to other pages or show a popup). Overwrite the <code>&lt;ul class=&quot;ui-listview&quot;&gt;</code> element content with the following code:</p>
+<p>For a more advanced option, you can also create an anchor listview (whose items can be clicked to navigate to other pages or show a popup). Overwrite the <code>&lt;ul class="ui-listview"&gt;</code> element content with the following code:</p>
 
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello TAU&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 4&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="ui-page" id="main"&gt;
+      &lt;div class="ui-header" data-position="fixed"&gt;
+         &lt;h1&gt;Hello TAU&lt;/h1&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-content"&gt;
+         &lt;ul class="ui-listview"&gt;
+            &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 1&lt;/a&gt;&lt;/li&gt;
+            &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 2&lt;/a&gt;&lt;/li&gt;
+            &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 3&lt;/a&gt;&lt;/li&gt;
+            &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 4&lt;/a&gt;&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
@@ -720,25 +720,25 @@ body
 
 <li>Add a button in the footer.
 <p>When implementing Tizen mobile Web applications, you can use the <code>ui-footer</code> class as a footer area. Organize the footer area with 1 or 2 buttons.</p>
-<p>Defining a button is very simple. Add the <code>&lt;div class=&quot;ui-footer&quot;&gt;...&lt;/div&gt;</code> element after the <code>&lt;div class=&quot;ui-content&quot;&gt;...&lt;/div&gt;</code> element:</p>
+<p>Defining a button is very simple. Add the <code>&lt;div class="ui-footer"&gt;...&lt;/div&gt;</code> element after the <code>&lt;div class="ui-content"&gt;...&lt;/div&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello TAU&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 4&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div class="ui-page" id="main"&gt;
+      &lt;div class="ui-header" data-position="fixed"&gt;
+         &lt;h1&gt;Hello TAU&lt;/h1&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-content"&gt;
+         &lt;ul class="ui-listview"&gt;
+            &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 1&lt;/a&gt;&lt;/li&gt;
+            &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 2&lt;/a&gt;&lt;/li&gt;
+            &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 3&lt;/a&gt;&lt;/li&gt;
+            &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 4&lt;/a&gt;&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-footer"&gt;
+         &lt;button&gt;OK&lt;/button&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 <p>When you run the application, the following screen is displayed.</p>
@@ -752,20 +752,20 @@ body
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;lib/tau/mobile/theme/default/tau.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;second&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Second Page&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot; id=&quot;secondPage&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Hello Tizen!&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot; data-build-remove=&quot;false&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;link rel="stylesheet" href="lib/tau/mobile/theme/default/tau.css"&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div class="ui-page" id="second"&gt;
+         &lt;div class="ui-header" data-position="fixed"&gt;
+            &lt;h1&gt;Second Page&lt;/h1&gt;
+         &lt;/div&gt;
+         &lt;div class="ui-content" id="secondPage"&gt;
+            &lt;p&gt;Hello Tizen!&lt;/p&gt;
+         &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;script type="text/javascript" src="lib/tau/mobile/js/tau.js" data-build-remove="false"&gt;&lt;/script&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 </li>
@@ -775,7 +775,7 @@ body
 <pre class="prettyprint">
 #secondPage
 {
-&nbsp;&nbsp;&nbsp;background-color: white;
+   background-color: white;
 }
 </pre>
 </li>
@@ -783,11 +783,11 @@ body
 <p>Create navigation between the <code>index.html</code> and <code>second.html</code> pages.</p>
 <p>Go back to the <code>index.html</code> file and add a file path in the listview <code>&lt;li&gt;&lt;a href&gt;</code> element:</p>
 <pre class="prettyprint">
-&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;second.html&quot;&gt;Go to Second Page&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li class=&quot;ui-li-anchor&quot;&gt;&lt;a href=&quot;#&quot;&gt;Anchor List 4&lt;/a&gt;&lt;/li&gt;
+&lt;ul class="ui-listview"&gt;
+   &lt;li class="ui-li-anchor"&gt;&lt;a href="second.html"&gt;Go to Second Page&lt;/a&gt;&lt;/li&gt;
+   &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 2&lt;/a&gt;&lt;/li&gt;
+   &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 3&lt;/a&gt;&lt;/li&gt;
+   &lt;li class="ui-li-anchor"&gt;&lt;a href="#"&gt;Anchor List 4&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre></li>
 <li>
@@ -799,28 +799,28 @@ body
 </li>
 
 <li>Go back with the back key.
-<p>You can navigate from page to page with the <code>&lt;a href=&quot;PAGE_FILE_NAME&quot;&gt;</code> elements, but you cannot go back. In this step, you learn to add some code in a JavaScript file to enable the user to return to the first page.</p>
+<p>You can navigate from page to page with the <code>&lt;a href="PAGE_FILE_NAME"&gt;</code> elements, but you cannot go back. In this step, you learn to add some code in a JavaScript file to enable the user to return to the first page.</p>
 <p>Create a new <code>app.js</code> JavaScript file:</p>
 
 <ol type="a">
 <li>
-<p>In the <code>index.html</code> file, add the <code>&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;</code> line before closing the <code>&lt;/body&gt;</code> element:</p>
+<p>In the <code>index.html</code> file, add the <code>&lt;script src="app.js"&gt;&lt;/script&gt;</code> line before closing the <code>&lt;/body&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-header&quot; data-position=&quot;fixed&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello TAU&lt;/h1&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-footer&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;OK&lt;/button&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/mobile/js/tau.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
-&lt;/body&gt;  
+   &lt;div class="ui-page" id="main"&gt;
+      &lt;div class="ui-header" data-position="fixed"&gt;
+         &lt;h1&gt;Hello TAU&lt;/h1&gt;
+      &lt;/div&gt;
+      &lt;div class="ui-content"&gt;
+         ...
+      &lt;/div&gt;
+      &lt;div class="ui-footer"&gt;
+         &lt;button&gt;OK&lt;/button&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
+   &lt;script type="text/javascript" src="lib/tau/mobile/js/tau.js"&gt;&lt;/script&gt;
+   &lt;script src="app.js"&gt;&lt;/script&gt;
+&lt;/body&gt;
 </pre></li>
 
 <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>New &gt; JavaScript Source File</strong>.
@@ -830,21 +830,21 @@ body
 <p>In the <code>app.js</code> file, all kinds of logic can be added to the application. In this case, add several lines for handling navigation:</p>
 
 <pre class="prettyprint">
-(function() 
+(function()
 {
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function(ev) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ev.keyName === &quot;back&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementsByClassName(&#39;ui-page-active&#39;)[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageid = page ? page.id : &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pageid !== &quot;main&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+   window.addEventListener('tizenhwkey', function(ev)
+   {
+      if (ev.keyName === "back")
+      {
+         var page = document.getElementsByClassName('ui-page-active')[0],
+             pageid = page ? page.id : "";
+
+         if (pageid !== "main")
+         {
+            window.history.back();
+         }
+      }
+   });
 }());
 </pre></li></ol>
 </li>
@@ -854,31 +854,31 @@ body
 <p>You have to consider the fact that when the user clicks the back key, the application can only exit if it is showing the main page. If the second page is showing, the application must return to the main page.</p>
 <p>The following example shows how to handle the back key input with page navigation and application exit. This code is included in the <strong>TAU Basic</strong> project template <code>main.js</code> file by default.</p>
 <pre class="prettyprint">
-(function() 
+(function()
 {
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function(ev) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ev.keyName === &quot;back&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementsByClassName(&#39;ui-page-active&#39;)[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageid = page ? page.id : &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pageid === &quot;main&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (ignore) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+   window.addEventListener('tizenhwkey', function(ev)
+   {
+      if (ev.keyName === "back")
+      {
+         var page = document.getElementsByClassName('ui-page-active')[0],
+             pageid = page ? page.id : "";
+
+         if (pageid === "main")
+         {
+            try
+            {
+               tizen.application.getCurrentApplication().exit();
+            }
+            catch (ignore)
+            {
+            }
+         }
+         else
+         {
+            window.history.back();
+         }
+      }
+   });
 }());
 </pre>
 
diff --git a/org.tizen.training/html/web/process/app_dev_process_w.htm b/org.tizen.training/html/web/process/app_dev_process_w.htm
index 6162b26..447557e 100644 (file)
--- a/org.tizen.training/html/web/process/app_dev_process_w.htm
+++ b/org.tizen.training/html/web/process/app_dev_process_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Web Application Development Process</title>  
+       <title>Web Application Development Process</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -37,7 +37,7 @@
                        <li><a href="#upgrade">Upgrading</a></li>
                </ul>
 </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -56,23 +56,23 @@
                        <li>Develop multi-projects (multiple applications within the same package).</li>
                        <li>Certify and publish the application.</li>
                        <li>Upgrade the application.</li>
-       </ol>           
-  
+       </ol>
+
 <h2 id="plan" name="plan">Planning and Designing the Application</h2>
 
-<p>The first step in creating a Tizen Web application is planning and designing it using the design tools of your choice.</p> 
-  <p>For information on planning and designing your applications, see <a href="../../../../org.tizen.guides/html/web/guides_w.htm">Tizen Web Guides</a> and <a href="../../../../org.tizen.web.apireference/html/web_api_reference.htm">Tizen Web API References</a>.</p> 
-  <p>Once you have finished the application plan and design, you are ready to create the application project.</p> 
+<p>The first step in creating a Tizen Web application is planning and designing it using the design tools of your choice.</p>
+  <p>For information on planning and designing your applications, see <a href="../../../../org.tizen.guides/html/web/guides_w.htm">Tizen Web Guides</a> and <a href="../../../../org.tizen.web.apireference/html/web_api_reference.htm">Tizen Web API References</a>.</p>
+  <p>Once you have finished the application plan and design, you are ready to create the application project.</p>
 
 <h2 id="create" name="create">Creating the Application Project</h2>
 
-<p>After you have planned and designed your application, you are ready to <a href="creating_app_project_w.htm">create the application project</a> in the Tizen Studio.</p> 
-  
+<p>After you have planned and designed your application, you are ready to <a href="creating_app_project_w.htm">create the application project</a> in the Tizen Studio.</p>
+
    <p>The Tizen Studio provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template or sample. Based on the selection, the Tizen Web <a href="../../../../org.tizen.studio/html/web_tools/project_wizard_w.htm">Project Wizard</a> automatically creates basic functionalities that the application has to implement to be able to run. The default project files and folders are also created.</p>
 
 <h2 id="set" name="set" >Setting Project Properties</h2>
 
- <p>After creating the application project, you can <a href="setting_properties_w.htm">configure the properties of the project and the Web application</a> to achieve the required functionality and features for your application.</p>  
+ <p>After creating the application project, you can <a href="setting_properties_w.htm">configure the properties of the project and the Web application</a> to achieve the required functionality and features for your application.</p>
 
 <h2 id="design" name="design" >Designing the Application UI</h2>
 
@@ -81,7 +81,7 @@
 <h2 id="code" name="code">Coding the Application</h2>
 
 <p><a href="coding_app_w.htm">Code your application</a> in the Tizen Studio using the APIs defined in the Web <a href="../../../../org.tizen.web.apireference/html/web_api_reference.htm">API References</a>.</p>
- <p>Once you have finished coding your application, you are ready to build your application.</p> 
+ <p>Once you have finished coding your application, you are ready to build your application.</p>
 
 <h2 id="build" name="build" >Building the Application</h2>
 
@@ -94,35 +94,35 @@
   <li>Compile for:
         <ul><li>Coffeescript</li>
                <li>Less</li></ul></li></ol>
-  
+
      <div class="note">
         <strong>Note</strong>
-        About the output files: 
-      <ul> 
-       <li>Compiled coffeescript output file name is <code>&lt;file name&gt;.js</code>. This file is used when the project is packed to the WGT package file, but the script tag&#39;s reference path must be changed manually.</li> 
-       <li>Compiled less output file name is <code>&lt;file name&gt;.css</code>. This file is used when the project is packed to the WGT package file, but the script tag&#39;s reference path must be changed manually.</li> 
+        About the output files:
+      <ul>
+       <li>Compiled coffeescript output file name is <code>&lt;file name&gt;.js</code>. This file is used when the project is packed to the WGT package file, but the script tag's reference path must be changed manually.</li>
+       <li>Compiled less output file name is <code>&lt;file name&gt;.css</code>. This file is used when the project is packed to the WGT package file, but the script tag's reference path must be changed manually.</li>
       </ul>
     </div>
-       
+
   <p>If the project has errors, they are shown in the <strong>Problems</strong> and <strong>Project Explorer</strong> views after the build.</p>
 
-  <p>You can build a Web application automatically or manually:</p> 
-  <ul> 
-   <li>Automatic build: <p>In the Tizen Studio menu, select <strong>Project &gt; Build Automatically</strong>.</p> <p>If you select this option, whenever the source or a resource is changed and saved, the Tizen Studio automatically recognizes any saved changes and rebuilds the project source.</p> </li> 
-   <li>Manual build: <p>In the Tizen Studio menu, select <strong>Project &gt; Build Project</strong>.</p> <p>You can build your project at your convenience. If you want to use the manual build, ensure that the <strong>Project &gt; Build Automatically</strong> option is not selected.</p> </li> 
-  </ul> 
+  <p>You can build a Web application automatically or manually:</p>
+  <ul>
+   <li>Automatic build: <p>In the Tizen Studio menu, select <strong>Project &gt; Build Automatically</strong>.</p> <p>If you select this option, whenever the source or a resource is changed and saved, the Tizen Studio automatically recognizes any saved changes and rebuilds the project source.</p> </li>
+   <li>Manual build: <p>In the Tizen Studio menu, select <strong>Project &gt; Build Project</strong>.</p> <p>You can build your project at your convenience. If you want to use the manual build, ensure that the <strong>Project &gt; Build Automatically</strong> option is not selected.</p> </li>
+  </ul>
 
       <div class="note">
         <strong>Note</strong>
-        In the manual build mode: 
-      <ul> 
-       <li>Ensure that you have the latest build output before you run or debug a project.</li> 
-       <li>To remove a project build output, select <code>Project &gt; Clean</code> in the Tizen Studio menu.</li> 
+        In the manual build mode:
+      <ul>
+       <li>Ensure that you have the latest build output before you run or debug a project.</li>
+       <li>To remove a project build output, select <code>Project &gt; Clean</code> in the Tizen Studio menu.</li>
       </ul>
     </div>
-  
 
-  <p>To customize the application, set the build properties:</p> 
+
+  <p>To customize the application, set the build properties:</p>
        <ul><li>JS validation
        <p>Set the options in the Tizen Studio menu: <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Web &gt; Editor &gt; JavaScript Editor</strong>.</p></li>
        <li>CSS validation
@@ -140,12 +140,12 @@
 <p>The optimization process is only executed when you execute the packaging process.</p></li>
   <li>Execute the application to the emulator or target device.</li></ol>
 
-  <p>You can run your application in one of the following environments:</p> 
-  <ul>  
-   <li><a href="run_debug_app_w.htm#emulator">Emulator</a> <p>The device emulator, provided with the Tizen Studio, imitates the target environment running Tizen Web applications. Using this replicated environment, you can test your application before deploying it to the real target device.</p></li> 
+  <p>You can run your application in one of the following environments:</p>
+  <ul>
+   <li><a href="run_debug_app_w.htm#emulator">Emulator</a> <p>The device emulator, provided with the Tizen Studio, imitates the target environment running Tizen Web applications. Using this replicated environment, you can test your application before deploying it to the real target device.</p></li>
    <li><a href="run_debug_app_w.htm#target">Target device</a> <p>Running your application on a target device allows you to debug and test your application in a real-time environment.</p></li>
-   <li><a href="run_debug_app_w.htm#simulator">Simulator</a> <p>The Tizen Web simulator allows you to run application that use the Tizen Web APIs.</p></li>  
-  </ul> 
+   <li><a href="run_debug_app_w.htm#simulator">Simulator</a> <p>The Tizen Web simulator allows you to run application that use the Tizen Web APIs.</p></li>
+  </ul>
 
   <p>You can run the application smartly:</p>
   <ul><li>You can use the <a href="run_debug_app_w.htm#rds">Rapid Development Support (RDS)</a> mode to run or test faster.</li>
@@ -172,36 +172,36 @@
   <ul>
   <li><strong>Set excluding optimization resources</strong>
   <p>You can minify your JavaScript, CSS, HTML, and PNG resources and put in an exclude file pattern that you do not want to optimize.</p></li>
-  <li><strong>Set hybrid application&#39;s main service application</strong></li></ul>
+  <li><strong>Set hybrid application's main service application</strong></li></ul>
+
+  <p>By default, the Web application package is created once. You can view the package content at any point of the application development process by double-clicking the project <code>.wgt</code> file in the <strong>Project Explorer</strong> view. All the files present in the application project are displayed in a list.</p>
 
-  <p>By default, the Web application package is created once. You can view the package content at any point of the application development process by double-clicking the project <code>.wgt</code> file in the <strong>Project Explorer</strong> view. All the files present in the application project are displayed in a list.</p> 
+  <p>Any changes made to the files in the package content list, such as deleting files or dragging and dropping files, are not reflected in the actual project files.</p>
+  <p align="center"><strong>Figure: Viewing the Web application package</strong></p>
+ <p align="center"><img alt="Viewing the Web application package" src="../../images/view_package_mw.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+
+
+   <p>Additionally, you can <a href="setting_properties_w.htm#localization">localize the Web application</a> to support different languages and environments.</p>
 
-  <p>Any changes made to the files in the package content list, such as deleting files or dragging and dropping files, are not reflected in the actual project files.</p> 
-  <p align="center"><strong>Figure: Viewing the Web application package</strong></p> 
- <p align="center"><img alt="Viewing the Web application package" src="../../images/view_package_mw.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p> 
-  
-  
-   <p>Additionally, you can <a href="setting_properties_w.htm#localization">localize the Web application</a> to support different languages and environments.</p>   
-  
 <h2 id="multi" name="multi" >Developing Multiple Projects as a Combined Package</h2>
 
 <p>Tizen supports multi-project applications that combine different types of application templates in hybrid and companion applications.</p>
 
-  <h3 id="hybrid">Packaging Hybrid Applications</h3> 
-  
+  <h3 id="hybrid">Packaging Hybrid Applications</h3>
+
   <p>A hybrid application package combines a Web application and 1 or more native service applications.</p>
-  <p>To create and run a hybrid application:</p> 
-  <ol> 
-   <li>Create a project for a <a href="creating_app_project_w.htm">Web UI application</a> and <a href="../../native/process/app_dev_process_n.htm#creating">native service application</a>.</li> 
+  <p>To create and run a hybrid application:</p>
+  <ol>
+   <li>Create a project for a <a href="creating_app_project_w.htm">Web UI application</a> and <a href="../../native/process/app_dev_process_n.htm#creating">native service application</a>.</li>
    <li>To establish a project reference between a UI and service application:
        <ul>
                <li>In the Web UI application project context menu, select <strong>Properties &gt; Tizen Studio &gt; Package &gt; Multi</strong>.</li>
                <li>Select the check box for the service application, and click <strong>OK</strong>.</li>
        </ul>
     In the <strong>Project Explorer</strong> view, a <strong>with &lt;Web UI application&gt;</strong> message appears next to the service application project name for each application you have added to the package.
-   </li> 
+   </li>
    <li><a href="#build">Build</a> and <a href="#run">run</a> the Web UI application. The service application is built and executed automatically at the same time, and you can find a WGT file (hybrid application package) under the Web UI application project in the <strong>Project Explorer</strong> view.
-   
+
    <p>To modify the build configuration of the service application, see <a href="../../native/process/app_dev_process_n.htm#build">Building the Application</a>.</p></li>
    </ol>
 
@@ -210,50 +210,50 @@
         <strong>Note</strong>
         Tizen has limited a multi-project application combination policy for device usability. If you do not follow the policy, the submission of your application to the Tizen Store can be rejected.
     </div>
-   
+
 <p>The following table shows the possible combinations for a hybrid multi-project. <strong>M</strong> means that multiple applications can be packaged as sub applications.</p>
 
 <p align="center" class="Table"><strong>Table: Combinations</strong></p>
 <table>
 <tbody>
 <tr>
-<th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main project</th> 
-       <th colspan="4" style="text-align:center;margin-left:auto;margin-right:auto;">Sub project</th> 
+<th rowspan="2" style="text-align:center;margin-left:auto;margin-right:auto;">Main project</th>
+       <th colspan="4" style="text-align:center;margin-left:auto;margin-right:auto;">Sub project</th>
       </tr>
 <tr>
-<th style="text-align:center;margin-left:auto;margin-right:auto;">UI</th> 
-       <th style="text-align:center;margin-left:auto;margin-right:auto;">SERVICE</th> 
-       <th style="text-align:center;margin-left:auto;margin-right:auto;">WATCH</th> 
-       <th style="text-align:center;margin-left:auto;margin-right:auto;">WIDGET</th> 
+<th style="text-align:center;margin-left:auto;margin-right:auto;">UI</th>
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">SERVICE</th>
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">WATCH</th>
+       <th style="text-align:center;margin-left:auto;margin-right:auto;">WIDGET</th>
       </tr>
 <tr>
-<td>WEB UI</td> 
-       <td>No</td> 
-       <td>M</td> 
-       <td>No</td> 
-       <td>M</td> 
+<td>WEB UI</td>
+       <td>No</td>
+       <td>M</td>
+       <td>No</td>
+       <td>M</td>
       </tr>
 <tr>
-<td>WEB SERVICE</td> 
-       <td>No</td> 
-       <td>No</td> 
-       <td>No</td> 
-       <td>No</td> 
+<td>WEB SERVICE</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
       </tr>
 </tbody>
 </table>
 
    <p>With a hybrid application package, you can register the included applications in the Tizen Store and install, upgrade, and uninstall them using the single hybrid package. When a hybrid application package is installed, the Web application is installed by the Web installer, followed by the native installer installing native service applications.</p>
   <p>A hybrid application package is very useful to Web applications that need background processing or monitoring. A native service application does not have a UI and can be run in the background.</p>
-  
+
   <p>The Web application and native service applications within a hybrid application package share the same package ID and data folder. Sharing application data between them is easy. Many useful inter-application APIs, such as Message Port (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/messageport.html">TV</a> applications) and AppControl (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html">TV</a> applications), can be used in a hybrid application package.</p>
-   <p>For more information on hybrid applications and their package structure, see Hybrid Web App sample (in <a href="https://developer.tizen.org/development/sample/web/Hybrid/Hybrid_Web_App" target="blank">mobile</a> and <a href="https://developer.tizen.org/development/sample/web/Hybrid/Hybrid_Web_App_1" target="blank">wearable</a> applications), <a href="https://developer.tizen.org/development/sample/native/AppFW/Hybrid_Service" target="blank">Hybrid Service sample</a>, and <a href="../app_model/application_model_w.htm#hap">Hybrid Application Package</a>.</p> 
+   <p>For more information on hybrid applications and their package structure, see Hybrid Web App sample (in <a href="https://developer.tizen.org/development/sample/web/Hybrid/Hybrid_Web_App" target="blank">mobile</a> and <a href="https://developer.tizen.org/development/sample/web/Hybrid/Hybrid_Web_App_1" target="blank">wearable</a> applications), <a href="https://developer.tizen.org/development/sample/native/AppFW/Hybrid_Service" target="blank">Hybrid Service sample</a>, and <a href="../app_model/application_model_w.htm#hap">Hybrid Application Package</a>.</p>
+
 
-  
 <h2 id="cert" name="cert">Certifying and Publishing the Application</h2>
 
-<p>After you have packaged your application, you are ready to certify and publish your application.</p> 
-  <p>To certify and publish your application:</p> 
+<p>After you have packaged your application, you are ready to certify and publish your application.</p>
+  <p>To certify and publish your application:</p>
   <ul>
        <li>Upload your mobile Web application to the Tizen Store or your wearable Web application to the Samsung Galaxy Apps Store for registration.
                <p>After the application is uploaded, the application is signed as a certified application installer package and the <code>&lt;Application_name&gt;.wgt</code> archive format, which contains the distributor signature, is added by the Tizen Store or Samsung Galaxy Apps Store.</p>
@@ -262,15 +262,15 @@
                <p>The Tizen Store or Samsung Galaxy Apps Store checks whether your application functions properly before publishing it.</p>
        </li>
   </ul>
-  
+
   <p>For detailed instructions on how to register your application and submit it for validation and publication in the Tizen Store, see <a href="https://developer.tizen.org/distribution/tizen-store-overview">Tizen Store Overview</a> and other subtopics within the <strong>Distribution</strong> section of the Tizen Developers site.</p>
-  
-  <p>You can also upgrade your application after certification. If you want to withdraw your application from distribution and operation, you need to request for application retirement from the Tizen Store or Samsung Galaxy Apps Store.</p> 
-  
+
+  <p>You can also upgrade your application after certification. If you want to withdraw your application from distribution and operation, you need to request for application retirement from the Tizen Store or Samsung Galaxy Apps Store.</p>
+
 <h2 id="upgrade" name="upgrade">Upgrading the Application</h2>
 
-<p>You can upgrade your application even after you have certified and made it available for sale at the Tizen Store or Samsung Galaxy Apps Store.</p> 
-  <p>To upgrade your application:</p> 
+<p>You can upgrade your application even after you have certified and made it available for sale at the Tizen Store or Samsung Galaxy Apps Store.</p>
+  <p>To upgrade your application:</p>
   <ol>
        <li>Update your application version, and if needed the privileges, in the <code>config.xml</code> configuration file in the Tizen Studio.</li>
        <li>Update the application code as needed.</li>
@@ -280,12 +280,12 @@
   </ol>
 
   <p>When a previously installed application is upgraded on a device, you can decide which data files from the old version are retained and which are deleted. The common Tizen upgrade policy is to overwrite all the application package files, while keeping the user-created files and directories unchanged.</p>
-  
-  <p>Once your application has reached the end of its life-cycle, you can remove it from the Tizen Store or Samsung Galaxy Apps Store.</p> 
 
-  <p>The following figure illustrates the process of developing a Tizen Web application.</p> 
-  <p align="center"><strong>Figure: Web application development process</strong></p> 
-  <p align="center"><img alt="Web application development process" src="../../images/app_dev_process_mw.png" /></p> 
+  <p>Once your application has reached the end of its life-cycle, you can remove it from the Tizen Store or Samsung Galaxy Apps Store.</p>
+
+  <p>The following figure illustrates the process of developing a Tizen Web application.</p>
+  <p align="center"><strong>Figure: Web application development process</strong></p>
+  <p align="center"><img alt="Web application development process" src="../../images/app_dev_process_mw.png" /></p>
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
@@ -297,7 +297,7 @@
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
-  <!--start--> 
+  <!--start-->
   <script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-25976949-1']);
@@ -307,7 +307,7 @@ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
-</script> 
-  <!--end-->  
+</script>
+  <!--end-->
  </body>
 </html>
\ No newline at end of file
diff --git a/org.tizen.training/html/web/process/coding_app_w.htm b/org.tizen.training/html/web/process/coding_app_w.htm
index aa78e3b..ce09dd9 100644 (file)
--- a/org.tizen.training/html/web/process/coding_app_w.htm
+++ b/org.tizen.training/html/web/process/coding_app_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Coding Applications</title>  
+       <title>Coding Applications</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -29,45 +29,45 @@
                </ul>
 
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Coding Applications</h1> 
-  <p>When coding your application, you must consider the following issues:</p> 
-  <ol> 
-   <li><p>Initialize the application resources.</p> <p>Typically, at least take care of creating the UI and restoring the latest application state.</p> </li> 
-   <li>Write code for application-specific features and functionalities, and handle events. <p>Define how the application behaves during the application&#39;s state transitions, such as switching between foreground and background. You must also define event handlers corresponding to system events, if necessary.</p></li> 
-   <li><p>Destroy allocated resources and save the current application state.</p></li> 
-  </ol> 
- 
-  <h2 name="hover" id="hover">Using Hover Help</h2> 
-   <p>The Tizen Studio supports hover help for Web API and W3C Widget APIs. The hover help provides input from the <a href="../../../../org.tizen.web.apireference/html/web_api_reference.htm">API Reference</a>.</p> 
-  <p align="center"><strong>Figure: Hover help</strong></p> 
-  <p align="center"><img alt="Hover help" src="../../images/hover_help.png" /></p> 
-   <h2 name="add" id="add">Adding External Source Code or Library</h2>  
-   <p>External source files are located in the project directory, and its <code>/js</code> and <code>/css</code> sub-directories. You can add a new folder or source file (such as CSS, HTML, JSON, XML, and JavaScript) to your existing project.</p> 
-  <p>You can add files in the following ways (as an example, the instructions illustrate the adding of a CSS file):</p> 
-  <ul> 
-   <li>Adding a new file: 
-    <ol> 
-     <li>In the <strong>Project Explorer</strong> view, right-click an existing project and select <strong>New &gt; CSS File</strong>.</li> 
-     <li>In the <strong>New CSS File</strong> view, select the location of the new CSS file and enter the file name. <p>Optionally, you can select a template as initial content in the CSS file.</p></li> 
-     <li>Click <strong>Finish</strong>.</li> 
-    </ol> </li> 
-   <li>Adding an existing file: 
-    <ol> 
-     <li>In the <strong>Project Explorer</strong> view, right-click the <code>/css</code> sub-directory and select <strong>Import &gt; General &gt; File System</strong>.</li> 
-     <li>In the <strong>Import</strong> view, click <strong>Browse</strong> and select the import location.</li> 
-     <li>Click <strong>Finish</strong>.</li> 
-    </ol> </li> 
-  </ul> 
+  <h1>Coding Applications</h1>
+  <p>When coding your application, you must consider the following issues:</p>
+  <ol>
+   <li><p>Initialize the application resources.</p> <p>Typically, at least take care of creating the UI and restoring the latest application state.</p> </li>
+   <li>Write code for application-specific features and functionalities, and handle events. <p>Define how the application behaves during the application's state transitions, such as switching between foreground and background. You must also define event handlers corresponding to system events, if necessary.</p></li>
+   <li><p>Destroy allocated resources and save the current application state.</p></li>
+  </ol>
+
+  <h2 name="hover" id="hover">Using Hover Help</h2>
+   <p>The Tizen Studio supports hover help for Web API and W3C Widget APIs. The hover help provides input from the <a href="../../../../org.tizen.web.apireference/html/web_api_reference.htm">API Reference</a>.</p>
+  <p align="center"><strong>Figure: Hover help</strong></p>
+  <p align="center"><img alt="Hover help" src="../../images/hover_help.png" /></p>
+   <h2 name="add" id="add">Adding External Source Code or Library</h2>
+   <p>External source files are located in the project directory, and its <code>/js</code> and <code>/css</code> sub-directories. You can add a new folder or source file (such as CSS, HTML, JSON, XML, and JavaScript) to your existing project.</p>
+  <p>You can add files in the following ways (as an example, the instructions illustrate the adding of a CSS file):</p>
+  <ul>
+   <li>Adding a new file:
+    <ol>
+     <li>In the <strong>Project Explorer</strong> view, right-click an existing project and select <strong>New &gt; CSS File</strong>.</li>
+     <li>In the <strong>New CSS File</strong> view, select the location of the new CSS file and enter the file name. <p>Optionally, you can select a template as initial content in the CSS file.</p></li>
+     <li>Click <strong>Finish</strong>.</li>
+    </ol> </li>
+   <li>Adding an existing file:
+    <ol>
+     <li>In the <strong>Project Explorer</strong> view, right-click the <code>/css</code> sub-directory and select <strong>Import &gt; General &gt; File System</strong>.</li>
+     <li>In the <strong>Import</strong> view, click <strong>Browse</strong> and select the import location.</li>
+     <li>Click <strong>Finish</strong>.</li>
+    </ol> </li>
+  </ul>
 
       <div class="note">
         <strong>Note</strong>
         You can also drag and drop external source files or libraries. If you drop a file to the <strong>Project Explorer</strong> view, the <strong>File Operation</strong> dialog appears, and allows you to either copy the file or create a link to it.
     </div>
-  
-  
+
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
@@ -77,7 +77,7 @@
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
-  <!--start--> 
+  <!--start-->
   <script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-25976949-1']);
@@ -87,7 +87,7 @@ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
-</script> 
-  <!--end-->  
+</script>
+  <!--end-->
  </body>
 </html>
\ No newline at end of file
diff --git a/org.tizen.training/html/web/process/creating_app_project_w.htm b/org.tizen.training/html/web/process/creating_app_project_w.htm
index c7bf9e8..557478e 100644 (file)
--- a/org.tizen.training/html/web/process/creating_app_project_w.htm
+++ b/org.tizen.training/html/web/process/creating_app_project_w.htm
@@ -5,34 +5,34 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating the Application Project</title>  
+       <title>Creating the Application Project</title>
 </head>
 
 <body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
 
 <div id="toc-navigation">
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-  <h1>Creating the Application Project</h1> 
-  <p>You can create a Web application project by selecting from a variety of templates and samples. The following instructions are specific for creating the project with a template.</p> 
-  <p>To create a Web application project:</p> 
-  <ol> 
-   <li>In the Tizen Studio, select <strong>File &gt; New &gt; Tizen Project</strong>. 
+  <h1>Creating the Application Project</h1>
+  <p>You can create a Web application project by selecting from a variety of templates and samples. The following instructions are specific for creating the project with a template.</p>
+  <p>To create a Web application project:</p>
+  <ol>
+   <li>In the Tizen Studio, select <strong>File &gt; New &gt; Tizen Project</strong>.
    <p align="center"><img alt="Creating a new project" src="../../images/create_project_1_w.png" /></p>
-   <p>The Project Wizard opens.</p></li> 
+   <p>The Project Wizard opens.</p></li>
    <li>In the Project Wizard, define the project details.
    <p>The Project Wizard is used to create the basic application skeleton with the required folder structure and mandatory files. You can easily create different applications by selecting an applicable template or sample for the Project Wizard to use.</p>
-    <ol type="a"> 
+    <ol type="a">
        <li><p>Select the <strong>Template</strong> project type and click <strong>Next</strong>.</p>
 <p align="center"><img alt="Selecting the project type" src="../../images/create_project_wizard_type.png" /></p>
 </li>
@@ -47,7 +47,7 @@
 </li>
 <li><p>Define the project properties and click <strong>Finish</strong>.</p>
 <p>You can fill the project name. You can also select the location and working sets by clicking <strong>More properties</strong>.</p>
-         
+
              <div class="note">
         <strong>Note</strong>
                The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-zA-Z][a-zA-Z0-9-]{2,49}.
@@ -56,10 +56,10 @@
 
 <p>The Project Wizard sets up the project, creates the application files using the default content from the template, and closes. For more information about the Project Wizard and the available templates, see <a href="../../../../org.tizen.studio/html/web_tools/project_wizard_w.htm">Creating Tizen Projects with Tizen Project Wizard</a>.</p></li>
   </ol> </li></ol>
-  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio, with default content in the <code>config.xml</code> file as well as in several project folders.</p> 
- 
-  <h2 id="import" name="import">Importing a Project</h2> 
-  <p>If you have an existing Tizen application project, you can import it into the Tizen Studio:</p> 
+  <p>The new application project is shown in the <strong>Project Explorer</strong> view of the Tizen Studio, with default content in the <code>config.xml</code> file as well as in several project folders.</p>
+
+  <h2 id="import" name="import">Importing a Project</h2>
+  <p>If you have an existing Tizen application project, you can import it into the Tizen Studio:</p>
   <ol>
     <li>In the Tizen Studio menu, go to <strong>File &gt; Import &gt; Tizen &gt; Tizen Project</strong>, and click <strong>Next</strong>.</li>
     <li>Select the location of the root directory or archive file of the Tizen project and click <strong>Next</strong>.</li>
@@ -67,7 +67,7 @@
     <li>Click <strong>Finish</strong>.</li>
   </ol>
   <p>The project appears in the <strong>Project Explorer</strong> view.</p>
-    
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
@@ -78,7 +78,7 @@
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
 
-  <!--start--> 
+  <!--start-->
   <script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-25976949-1']);
@@ -88,7 +88,7 @@ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
-</script> 
-  <!--end-->  
+</script>
+  <!--end-->
  </body>
 </html>
diff --git a/org.tizen.training/html/web/process/run_debug_app_w.htm b/org.tizen.training/html/web/process/run_debug_app_w.htm
index 1b99e0f..7041caa 100644 (file)
--- a/org.tizen.training/html/web/process/run_debug_app_w.htm
+++ b/org.tizen.training/html/web/process/run_debug_app_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Running and Debugging Applications</title>  
+       <title>Running and Debugging Applications</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -31,7 +31,7 @@
                        <li><a href="#rds">Rapid Development Support</a></li>
                </ul>
 </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
 
@@ -41,169 +41,169 @@
 
 
 
-   <h2 name="emulator" id="emulator">Running Web Applications on the Emulator</h2> 
-  <p>You can debug Tizen Web applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
- 
-  <p>To launch the emulator, do one of the following:</p> 
-  <ul> 
-   <li>Use the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>: 
-    <ol> 
-     <li>Start the Emulator Manager using the Desktop (in Ubuntu) or Start menu (in Windows&reg;), or using the command line.</li> 
-     <li>In the <strong>Emulator Manager</strong> window, select the emulator instance from the list. <p>If you are using the Emulator Manager for the first time, you must create an emulator instance: click <strong>Create</strong>, select the platform (system image) and template (device definition), and click <strong>Finish</strong>.</p></li> 
-     <li>Click <strong>Launch</strong>.</li> 
-    </ol> </li> 
-   <li>Use the <a href="../../../../org.tizen.studio/html/common_tools/emulator_features.htm#startup">command line</a>.</li> 
-  </ul> 
-  <p>To run the application on the emulator, do one of the following:</p> 
-  <ul> 
-   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>.</li> 
-   <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Web Application</strong>.</li> 
-   <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li> 
-  </ul> 
+   <h2 name="emulator" id="emulator">Running Web Applications on the Emulator</h2>
+  <p>You can debug Tizen Web applications on the <a href="../../../../org.tizen.studio/html/common_tools/emulator.htm">emulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p>
+
+  <p>To launch the emulator, do one of the following:</p>
+  <ul>
+   <li>Use the <a href="../../../../org.tizen.studio/html/common_tools/emulator_manager.htm">Emulator Manager</a>:
+    <ol>
+     <li>Start the Emulator Manager using the Desktop (in Ubuntu) or Start menu (in Windows&reg;), or using the command line.</li>
+     <li>In the <strong>Emulator Manager</strong> window, select the emulator instance from the list. <p>If you are using the Emulator Manager for the first time, you must create an emulator instance: click <strong>Create</strong>, select the platform (system image) and template (device definition), and click <strong>Finish</strong>.</p></li>
+     <li>Click <strong>Launch</strong>.</li>
+    </ol> </li>
+   <li>Use the <a href="../../../../org.tizen.studio/html/common_tools/emulator_features.htm#startup">command line</a>.</li>
+  </ul>
+  <p>To run the application on the emulator, do one of the following:</p>
+  <ul>
+   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>.</li>
+   <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Web Application</strong>.</li>
+   <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li>
+  </ul>
   <p>To stop the emulator, right-click the emulator and click <strong>Close</strong>.</p>
-  
-  
+
+
       <div class="note">
         <strong>Note</strong>
         Running an emulator instance requires a minimum free disk space of 20 MB. The emulator image can occupy up to 10 GB of disk space.
     </div>
-  
-   <h2 name="target" id="target">Running Web Applications on a Target Device</h2> 
-  <p>You can run Tizen Web applications on a target device using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
-  <p>To run your application on the target device:</p> 
-  <ol> 
-   <li>Connect the target device to your computer.</li> 
-   <li>Open the <strong>Run Configurations</strong> window by doing one of the following: 
-    <ul> 
-     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li> 
-     <li>In the Tizen Studio menu, go to <strong>Run &gt; Run Configurations</strong>.</li> 
-    </ul> </li> 
-   <li>In the <strong>Run Configurations</strong> window, click <strong>New Launch Configuration</strong>. <p>If you have not made any changes to the application source files since the last time the application was run, <a href="#rds">Rapid Development Support (RDS)</a> is used to skip the package upload and make running the application faster. RDS is enabled as default. To disable it, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p></li> 
-   <li>Set the timeout using the <strong>Timeout value</strong> slider. <p>The timeout value represents the waiting time for the application launch operation. If you are using a lower configuration computer, set a higher timeout value to avoid application launch failure errors.</p></li> 
-   <li>Start the run by clicking <strong>Run</strong>. </li> 
-  </ol> 
-  <p>If no changes are required in the run configuration, you can also run the application on the target device by doing one of the following:</p> 
-  <ul> 
-   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>.</li> 
-   <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Web Application</strong>.</li> 
-   <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li> 
-  </ul> 
+
+   <h2 name="target" id="target">Running Web Applications on a Target Device</h2>
+  <p>You can run Tizen Web applications on a target device using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p>
+  <p>To run your application on the target device:</p>
+  <ol>
+   <li>Connect the target device to your computer.</li>
+   <li>Open the <strong>Run Configurations</strong> window by doing one of the following:
+    <ul>
+     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Run Configurations</strong>.</li>
+     <li>In the Tizen Studio menu, go to <strong>Run &gt; Run Configurations</strong>.</li>
+    </ul> </li>
+   <li>In the <strong>Run Configurations</strong> window, click <strong>New Launch Configuration</strong>. <p>If you have not made any changes to the application source files since the last time the application was run, <a href="#rds">Rapid Development Support (RDS)</a> is used to skip the package upload and make running the application faster. RDS is enabled as default. To disable it, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p></li>
+   <li>Set the timeout using the <strong>Timeout value</strong> slider. <p>The timeout value represents the waiting time for the application launch operation. If you are using a lower configuration computer, set a higher timeout value to avoid application launch failure errors.</p></li>
+   <li>Start the run by clicking <strong>Run</strong>. </li>
+  </ol>
+  <p>If no changes are required in the run configuration, you can also run the application on the target device by doing one of the following:</p>
+  <ul>
+   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>.</li>
+   <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Web Application</strong>.</li>
+   <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li>
+  </ul>
   <p>If the Web application successfully launches on the target device, the <a href="../../../../org.tizen.studio/html/web_tools/web_editor_w.htm#js_log">JavaScript Log Console View</a> is automatically launched in the Tizen Studio. The JavaScript Log Console view displays Web application JavaScript logs.</p>
-  
-    <h2 name="simulator" id="simulator">Running Mobile Web Applications on the Simulator</h2> 
-  <p>You can run Tizen Web applications on the <a href="../../../../org.tizen.studio/html/web_tools/web_simulator_w.htm">Web Simulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p> 
+
+    <h2 name="simulator" id="simulator">Running Mobile Web Applications on the Simulator</h2>
+  <p>You can run Tizen Web applications on the <a href="../../../../org.tizen.studio/html/web_tools/web_simulator_w.htm">Web Simulator</a> using the <strong>Project Explorer</strong> view or the Tizen Studio menu.</p>
 
       <div class="note">
         <strong>Note</strong>
         The Tizen Web Simulator runs only on the Google Chrome&trade; browser. To use the Web Simulator, download and install <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a>. You can manually specify the installation location of the browser in the <a href="../../../../org.tizen.studio/html/web_tools/web_simulator_w.htm#pref">simulator preferences</a>.
     </div>
-  
-  <p>If you are running your Web application on the Web Simulator for the first time, create a running configuration by selecting <strong>Run &gt; Run Configurations &gt; Tizen Web Simulator Application</strong> in the Tizen Studio menu. The running configuration contains the application launch settings.</p> 
-  <p>To run your application on the Simulator, do one of the following:</p> 
-  <ul> 
-   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Simulator Application</strong>.</li> 
-   <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Web Simulator Application</strong>.</li> 
-   <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li> 
-  </ul> 
-  <p>When the application is launched, the Web Simulator loads the file specified in the <strong>Content</strong> field of the <code>config.xml</code> file. The mostly commonly specified file is <code>index.html</code>.</p> 
-  
-  <p>The simulator renders your application on the browser using the <a href="http://www.webkit.org/" target="_blank">WebKit</a> engine. All the Google Chrome&trade; browser development features are available (by pressing the <strong>F12</strong> keyboard key) in the simulator, as is the <a href="../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool. You can leverage the advantages of the Web Simulator tool by setting the device screen size and orientation, and by sending events and messages, such as geolocation data and sensor input events, to your application for debugging it.</p> 
-  
-  <h2 name="debug" id="debug">Debugging Web Applications</h2> 
-  <p>Debugging a Web application enables you to understand its flow of control. You can debug a Web application by running it on the target device and debugging its JavaScript code. JavaScript code debugging uses the <a href="../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool.</p> 
-  <p>To debug your application on the target device:</p> 
-  <ol> 
-   <li>Connect the target device to your computer.</li> 
-   <li>Open the <strong>Debug Configurations</strong> window by doing one of the following: 
-    <ul> 
-     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Debug Configurations</strong>.</li> 
-     <li>In the Tizen Studio menu, go to <strong>Run &gt; Debug Configurations</strong>.</li> 
-    </ul> </li> 
-   <li>In the <strong>Debug Configurations</strong> window, click <strong>New Launch Configuration</strong>. <p>If you have not made any changes to the application source files since the last time the application was run, <a href="#rds">Rapid Development Support (RDS)</a> is used to skip the package upload and make running the application faster. RDS is enabled as default. To disable it, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p></li> 
-   <li>Set the timeout using the <strong>Timeout value</strong> slider. <p>The timeout value represents the waiting time for the application launch operation. If you are using a lower configuration system, set a higher timeout value to avoid application launch failure errors.</p></li> 
+
+  <p>If you are running your Web application on the Web Simulator for the first time, create a running configuration by selecting <strong>Run &gt; Run Configurations &gt; Tizen Web Simulator Application</strong> in the Tizen Studio menu. The running configuration contains the application launch settings.</p>
+  <p>To run your application on the Simulator, do one of the following:</p>
+  <ul>
+   <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Simulator Application</strong>.</li>
+   <li>In the Tizen Studio menu, go to <strong>Run &gt; Run As &gt; Tizen Web Simulator Application</strong>.</li>
+   <li>On the Tizen Studio toolbar, click <strong>Run</strong>.</li>
+  </ul>
+  <p>When the application is launched, the Web Simulator loads the file specified in the <strong>Content</strong> field of the <code>config.xml</code> file. The mostly commonly specified file is <code>index.html</code>.</p>
+
+  <p>The simulator renders your application on the browser using the <a href="http://www.webkit.org/" target="_blank">WebKit</a> engine. All the Google Chrome&trade; browser development features are available (by pressing the <strong>F12</strong> keyboard key) in the simulator, as is the <a href="../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool. You can leverage the advantages of the Web Simulator tool by setting the device screen size and orientation, and by sending events and messages, such as geolocation data and sensor input events, to your application for debugging it.</p>
+
+  <h2 name="debug" id="debug">Debugging Web Applications</h2>
+  <p>Debugging a Web application enables you to understand its flow of control. You can debug a Web application by running it on the target device and debugging its JavaScript code. JavaScript code debugging uses the <a href="../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool.</p>
+  <p>To debug your application on the target device:</p>
+  <ol>
+   <li>Connect the target device to your computer.</li>
+   <li>Open the <strong>Debug Configurations</strong> window by doing one of the following:
+    <ul>
+     <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Debug Configurations</strong>.</li>
+     <li>In the Tizen Studio menu, go to <strong>Run &gt; Debug Configurations</strong>.</li>
+    </ul> </li>
+   <li>In the <strong>Debug Configurations</strong> window, click <strong>New Launch Configuration</strong>. <p>If you have not made any changes to the application source files since the last time the application was run, <a href="#rds">Rapid Development Support (RDS)</a> is used to skip the package upload and make running the application faster. RDS is enabled as default. To disable it, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p></li>
+   <li>Set the timeout using the <strong>Timeout value</strong> slider. <p>The timeout value represents the waiting time for the application launch operation. If you are using a lower configuration system, set a higher timeout value to avoid application launch failure errors.</p></li>
    <li>Start the debugging by clicking <strong>Debug</strong>.
-   <p>If no changes are required in the debug configuration, you can also debug the application on the target device by doing one of the following:</p> 
-   <ul> 
-    <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Web Application</strong>.</li> 
-    <li>In the Tizen Studio menu, go to <strong>Run &gt; Debug As &gt; Tizen Web Application</strong>.</li> 
-    <li>On the Tizen Studio toolbar, click <strong>Debug</strong>.</li> 
-   </ul> 
-   <p>The Web Inspector tool is displayed in a new Chrome browser window. You can perform the following debugging tasks using the Web Inspector:</p> 
-   <ul> 
-    <li>Inspect styles</li> 
-    <li>Inspect the DOM</li> 
-    <li>Inspect resources</li> 
-    <li>Debug JavaScript code</li> 
-   </ul> 
-   
+   <p>If no changes are required in the debug configuration, you can also debug the application on the target device by doing one of the following:</p>
+   <ul>
+    <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen Web Application</strong>.</li>
+    <li>In the Tizen Studio menu, go to <strong>Run &gt; Debug As &gt; Tizen Web Application</strong>.</li>
+    <li>On the Tizen Studio toolbar, click <strong>Debug</strong>.</li>
+   </ul>
+   <p>The Web Inspector tool is displayed in a new Chrome browser window. You can perform the following debugging tasks using the Web Inspector:</p>
+   <ul>
+    <li>Inspect styles</li>
+    <li>Inspect the DOM</li>
+    <li>Inspect resources</li>
+    <li>Debug JavaScript code</li>
+   </ul>
+
        <div class="note">
         <strong>Note</strong>
-        The Web Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Web Inspector browser is not supported. 
+        The Web Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Web Inspector browser is not supported.
                <p>Installing Google Chrome on the device is mandatory for the Web Inspector to work. When Google Chrome is installed on the device, the Tizen Studio automatically detects it. To select the browser path, go to <code>Window &gt; Preferences &gt; Tizen Studio &gt; Web &gt; Chrome</code>.</p>
     </div>
-       
+
 </li>
    <li>To debug the JavaScript code, click <strong>Sources</strong> in the Web Inspector menu.
-   <p>You must enable debugging before debugging JavaScript code.</p> </li> 
-   <li>You can also set a break point in the code by right-clicking in the marker bar area on the left side of the editor, and selecting <strong>Toggle Breakpoint</strong>. 
-   <p>Once the break points are set, you can watch variables, expressions, and the current call stack. You can also control the debugging by using the following control buttons.</p> 
-    <p align="center" class="Table"><strong>Table: Control buttons for debugging between break points</strong></p> 
-       <table> 
-    <tbody> 
-     <tr> 
-      <th>Button</th> 
-      <th>Description</th> 
-     </tr> 
-     <tr> 
-      <td><img alt="Resume" src="../../images/resume.png" /></td> 
-      <td>Resumes the current execution.</td> 
-     </tr> 
-     <tr> 
-      <td><img alt="Step over" src="../../images/stepover.png" /></td> 
-      <td>Steps over the highlighted statement. <p>Executes the current line, and if the line contains a method, executes the method without entering it.</p></td> 
-     </tr> 
-     <tr> 
-      <td><img alt="Step in" src="../../images/stepin.png" /></td> 
-      <td>Steps into the highlighted statement. <p>Executes the current line, and if the line contains a method, steps into the method.</p></td> 
-     </tr> 
-     <tr> 
-      <td><img alt="Step out" src="../../images/stepout.png" /></td> 
-      <td>Steps out of the current method.</td> 
-     </tr> 
-     <tr> 
-      <td><img alt="Deactivate all break points" src="../../images/deactivate.png" /></td> 
-      <td>Deactivates all break points.</td> 
-     </tr> 
-    </tbody> 
+   <p>You must enable debugging before debugging JavaScript code.</p> </li>
+   <li>You can also set a break point in the code by right-clicking in the marker bar area on the left side of the editor, and selecting <strong>Toggle Breakpoint</strong>.
+   <p>Once the break points are set, you can watch variables, expressions, and the current call stack. You can also control the debugging by using the following control buttons.</p>
+    <p align="center" class="Table"><strong>Table: Control buttons for debugging between break points</strong></p>
+       <table>
+    <tbody>
+     <tr>
+      <th>Button</th>
+      <th>Description</th>
+     </tr>
+     <tr>
+      <td><img alt="Resume" src="../../images/resume.png" /></td>
+      <td>Resumes the current execution.</td>
+     </tr>
+     <tr>
+      <td><img alt="Step over" src="../../images/stepover.png" /></td>
+      <td>Steps over the highlighted statement. <p>Executes the current line, and if the line contains a method, executes the method without entering it.</p></td>
+     </tr>
+     <tr>
+      <td><img alt="Step in" src="../../images/stepin.png" /></td>
+      <td>Steps into the highlighted statement. <p>Executes the current line, and if the line contains a method, steps into the method.</p></td>
+     </tr>
+     <tr>
+      <td><img alt="Step out" src="../../images/stepout.png" /></td>
+      <td>Steps out of the current method.</td>
+     </tr>
+     <tr>
+      <td><img alt="Deactivate all break points" src="../../images/deactivate.png" /></td>
+      <td>Deactivates all break points.</td>
+     </tr>
+    </tbody>
    </table> </li>
-  </ol> 
+  </ol>
   <p>If the Web application successfully launches on the target device, the <a href="../../../../org.tizen.studio/html/web_tools/web_editor_w.htm#js_log">JavaScript Log Console View</a> is automatically launched in the Tizen Studio. The JavaScript Log Console view displays Web application JavaScript logs.</p>
-  
-  <h2 name="rds" id="rds">Rapid Development Support</h2> 
-  <p>Rapid Development Support (RDS) lets you develop a Tizen application rapidly by saving deployment time.</p> 
-  <p>When using RDS, the application is first launched normally. After the first launch, the packaging process is skipped and only modified, added, and deleted files are installed in the target. If an error occurs while launching, the normal mode is executed.</p> 
-  <p>To launch the application in the normal mode:</p> 
-  <ol> 
-   <li>Package the application.</li> 
-   <li>Transfer the packaged file to the target.</li> 
-   <li>Install the packaged file in the target. If the application is already installed, uninstall it before the installation.</li> 
-  </ol> 
-  <p>To launch the application in the RDS mode:</p> 
-  <ol> 
-   <li>Search for the delta files (changed, added, and deleted files).</li> 
-   <li>Transfer the delta files to the target.</li> 
-   <li>If the <code>config.xml</code> file has been modified, execute directory installation.</li> 
-  </ol> 
-  <p>The RDS option is enabled as default. To disable it, in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p> 
-
-  
+
+  <h2 name="rds" id="rds">Rapid Development Support</h2>
+  <p>Rapid Development Support (RDS) lets you develop a Tizen application rapidly by saving deployment time.</p>
+  <p>When using RDS, the application is first launched normally. After the first launch, the packaging process is skipped and only modified, added, and deleted files are installed in the target. If an error occurs while launching, the normal mode is executed.</p>
+  <p>To launch the application in the normal mode:</p>
+  <ol>
+   <li>Package the application.</li>
+   <li>Transfer the packaged file to the target.</li>
+   <li>Install the packaged file in the target. If the application is already installed, uninstall it before the installation.</li>
+  </ol>
+  <p>To launch the application in the RDS mode:</p>
+  <ol>
+   <li>Search for the delta files (changed, added, and deleted files).</li>
+   <li>Transfer the delta files to the target.</li>
+   <li>If the <code>config.xml</code> file has been modified, execute directory installation.</li>
+  </ol>
+  <p>The RDS option is enabled as default. To disable it, in the Tizen Studio, go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; Rapid Development Support</strong>.</p>
+
+
       <div class="note">
         <strong>Note</strong>
         RDS is not supported in multi-app projects.
         <p>If you want to remove an application from your device, you must manually delete the installed application as the launch process does not have an uninstall process.</p>
     </div>
-  
-  
+
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
@@ -213,7 +213,7 @@
 <div id="footer">
 <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
 </div>
-  <!--start--> 
+  <!--start-->
   <script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-25976949-1']);
@@ -223,7 +223,7 @@ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
-</script> 
-  <!--end-->  
+</script>
+  <!--end-->
  </body>
 </html>
\ No newline at end of file
diff --git a/org.tizen.training/html/web/process/setting_properties_w.htm b/org.tizen.training/html/web/process/setting_properties_w.htm
index df3d23a..f668008 100644 (file)
--- a/org.tizen.training/html/web/process/setting_properties_w.htm
+++ b/org.tizen.training/html/web/process/setting_properties_w.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Setting Project Properties</title>  
+       <title>Setting Project Properties</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -20,7 +20,7 @@
        <div id="profile">
                <p><img alt="Mobile Web" src="../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../images/wearable_s_w.png"/> <img alt="TV Web" src="../../images/tv_s_w.png"/></p>
        </div>
-       
+
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Content</p>
                <ul class="toc">
@@ -32,76 +32,76 @@
                <ul class="toc">
                        <li><a href="../details/app_filtering_w.htm#filter_w">Feature-based Filtering</a></li>
                        <li><a href="../details/sec_privileges_w.htm">Security and API Privileges</a></li>
-               </ul>           
+               </ul>
        </div></div>
-</div> 
+</div>
 
 <div id="container"><div id="contents"><div class="content">
-  <h1>Setting Project Properties</h1> 
-  <p>Before you implement the actual application functionality, define all the necessary properties for your application project:</p>   
+  <h1>Setting Project Properties</h1>
+  <p>Before you implement the actual application functionality, define all the necessary properties for your application project:</p>
     <ul>
-  <li>To set the application project properties for <a href="#set">build</a> and <a href="#set_json">JSON properties</a>, right-click the project in the Tizen Studio <strong>Project Explorer</strong> view and select <strong>Properties</strong>. After setting or changing a property, click <strong>OK</strong>.</li> 
+  <li>To set the application project properties for <a href="#set">build</a> and <a href="#set_json">JSON properties</a>, right-click the project in the Tizen Studio <strong>Project Explorer</strong> view and select <strong>Properties</strong>. After setting or changing a property, click <strong>OK</strong>.</li>
 <li>To define the <a href="#set_widget">Web application configuration</a>, edit the <code>config.xml</code> file.
-  
+
       <div class="note">
         <strong>Note</strong>
         Only modify the Web application configuration by using the configuration editor in the Tizen Studio. If you create or edit the <code>config.xml</code> file using any other text editor, your application may not work as expected.
     </div>
- </li></ul> 
-  
-  <p>After you have finished setting the project properties, you are ready to <a href="app_dev_process_w.htm#design">design the UI</a>.</p> 
- 
-  <h2 id="set" name="set">Setting Build Properties</h2> 
+ </li></ul>
+
+  <p>After you have finished setting the project properties, you are ready to <a href="app_dev_process_w.htm#design">design the UI</a>.</p>
+
+  <h2 id="set" name="set">Setting Build Properties</h2>
   <p>You can set build properties for your project. To select the build properties:</p>
   <ol>
        <li>In the <strong>Properties</strong> window, select <strong>Tizen Studio &gt; Package &gt; Web</strong>.</li>
        <li>Check <strong>Optimize web resources</strong>, and add any files for excluding optimization in the <strong>Optimization</strong> panel.</li>
   </ol>
-  
-  <h2 id="set_json" name="set_json">Setting the JSON Property</h2> 
+
+  <h2 id="set_json" name="set_json">Setting the JSON Property</h2>
   <p>You can set a JSON property for your project. To select the JSON property:</p>
   <ol>
        <li>In the <strong>Properties</strong> window, select <strong>Tizen Studio &gt; Web &gt; JSON Properties</strong>.</li>
        <li>Check <strong>Enable JSON validation in project</strong>.</li>
   </ol>
-  
-  <h2 name="set_widget" id="set_widget">Setting the Web Application Configuration</h2> 
-  
+
+  <h2 name="set_widget" id="set_widget">Setting the Web Application Configuration</h2>
+
        <p>The Web application configuration consists of application information, such as version, features, and privileges, which are available for the application. To configure the application information in the Web application configuration editor, double-click the application <code>config.xml</code> file in the <strong>Project Explorer</strong> view.</p>
        <p align="center"><strong>Figure: Setting the application configuration</strong></p>
        <p align="center"><img alt="Setting the application configuration" src="../../images/tizen_project_explorer_w.png"/></p>
        <p>You can <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#edit">edit the application properties using the form tabs of the Web application configuration editor</a>.</p>
-  
+
 <h3 id="overview" name="overview" >Defining and Editing General Information in the Overview Tab</h3>
 
-  <p>You can define and edit general information of the application in the <strong>Overview</strong> tab of the Web application configuration editor.</p> 
+  <p>You can define and edit general information of the application in the <strong>Overview</strong> tab of the Web application configuration editor.</p>
 
   <p>You can perform the following tasks using the <strong>Overview</strong> tab:</p>
-  
+
   <ul>
   <li>View the application identifier.
-  <p>The Tizen Studio creates automatically an application ID, which uniquely identifies the application within the package.</p></li> 
+  <p>The Tizen Studio creates automatically an application ID, which uniquely identifies the application within the package.</p></li>
   <li>Set the content.
   <p>The content represents the start-up file of the Web application.</p></li>
-  <li>Set the application name. 
+  <li>Set the application name.
   <p>The application name is displayed in an application menu or in other contexts.</p></li>
   <li>Set the version.
-  <p>The format of the current application version is &quot;x.y.z&quot;.</p></li>
-  <li>Add an application icon. 
-  <p>You can add a launcher icon to your application by defining it in the <strong>Icon</strong> panel.</p> 
+  <p>The format of the current application version is "x.y.z".</p></li>
+  <li>Add an application icon.
+  <p>You can add a launcher icon to your application by defining it in the <strong>Icon</strong> panel.</p>
   <p>The following table describes the available icon format and size.</p>
         <p align="center" class="Table"><strong>Table: Icon format and size</strong></p>
-        <table border="1"> 
+        <table border="1">
         <tbody>
-               <tr> 
-               <th>Format</th> 
-               <th>Size [Xhigh (HD)]</th> 
+               <tr>
+               <th>Format</th>
+               <th>Size [Xhigh (HD)]</th>
                </tr>
-               <tr> 
-               <td>32-bit PNG with alpha</td> 
+               <tr>
+               <td>32-bit PNG with alpha</td>
                <td>117 x 117 pixels</td>
-               </tr>   
-        </tbody> 
+               </tr>
+        </tbody>
         </table>
   </li>
   <li>Define the application author, license, and description in the <strong>Managing the Application</strong> section:
@@ -125,232 +125,232 @@
 
        <p>You can declare any device software or hardware features that your application requires to run properly. The declaration can be used for application filtering in the Tizen Store.</p>
 
-  <p>To enable filtering for your Web application:</p> 
+  <p>To enable filtering for your Web application:</p>
   <ol>
-   <li>In the <strong>Features</strong> tab, click <strong>+</strong>.</li> 
-   <li>Select the needed features from the <a href="../details/app_filtering_w.htm">predefined list of features available for filtering</a>.</li> 
-   <li>Click <strong>Finish</strong>.</li> 
+   <li>In the <strong>Features</strong> tab, click <strong>+</strong>.</li>
+   <li>Select the needed features from the <a href="../details/app_filtering_w.htm">predefined list of features available for filtering</a>.</li>
+   <li>Click <strong>Finish</strong>.</li>
    <li>Upload and publish the application package on the Tizen Store.
-       <p>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user&#39;s device.</p>
+       <p>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user's device.</p>
        </li>
-  </ol> 
-  
-    <p>After saving the feature information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab:</p> 
+  </ol>
+
+    <p>After saving the feature information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab:</p>
   <pre class="prettyprint">
-&lt;feature name=&quot;http://tizen.org/feature/network.nfc&quot;/&gt;
-</pre> 
+&lt;feature name="http://tizen.org/feature/network.nfc"/&gt;
+</pre>
 
 
 <h3 id="privilege" name="privilege">Specifying Privileges in the Privileges Tab</h3>
 
-       <p>You can use features and services provided by privileged APIs, which handle platform and user-sensitive data. You can specify an API, or API groups, accessed and used by the Web application in the <strong>Privileges</strong> tab of the Web application configuration editor. The tab serves as a standardized tool to request the binding of an IRI-identifiable runtime component for a Web application to use at runtime.</p> 
-
-  <p>To add a privilege:</p> 
-  <ol> 
-   <li>In the <strong>Privileges</strong> tab, click <strong>+</strong>.</li> 
-   <li>In the <strong>Add privilege</strong> window, select an option: 
-    <ul> 
-     <li><strong>Internal</strong>: Select the needed privileges from the <a href="../details/sec_privileges_w.htm">predefined list of API privileges</a>.</li> 
-     <li><strong>Privilege name</strong>: Manually enter the URL containing a privilege definition.</li> 
-     <li><strong>File</strong>: Click <strong>Browse</strong> and select a privilege file (with the <code>.xml</code> or <code>.widlprocxml</code> extension).</li> 
-    </ul> </li> 
-   <li>Click <strong>Finish</strong>.</li> 
-  </ol> 
-     <p>After saving the privilege information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab:</p> 
-  <pre class="prettyprint">&lt;tizen:privilege name=&quot;http://tizen.org/privilege/application.launch&quot;/&gt;</pre> 
+       <p>You can use features and services provided by privileged APIs, which handle platform and user-sensitive data. You can specify an API, or API groups, accessed and used by the Web application in the <strong>Privileges</strong> tab of the Web application configuration editor. The tab serves as a standardized tool to request the binding of an IRI-identifiable runtime component for a Web application to use at runtime.</p>
+
+  <p>To add a privilege:</p>
+  <ol>
+   <li>In the <strong>Privileges</strong> tab, click <strong>+</strong>.</li>
+   <li>In the <strong>Add privilege</strong> window, select an option:
+    <ul>
+     <li><strong>Internal</strong>: Select the needed privileges from the <a href="../details/sec_privileges_w.htm">predefined list of API privileges</a>.</li>
+     <li><strong>Privilege name</strong>: Manually enter the URL containing a privilege definition.</li>
+     <li><strong>File</strong>: Click <strong>Browse</strong> and select a privilege file (with the <code>.xml</code> or <code>.widlprocxml</code> extension).</li>
+    </ul> </li>
+   <li>Click <strong>Finish</strong>.</li>
+  </ol>
+     <p>After saving the privilege information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab:</p>
+  <pre class="prettyprint">&lt;tizen:privilege name="http://tizen.org/privilege/application.launch"/&gt;</pre>
 
 <h3 id="policy" name="policy">Defining External Access Policies in the Policy Tab</h3>
 
-  <p>According to the W3C Access Requests Policy (WARP), you cannot access external network resources by default. If you require access to an external network resource, you must request network resource permissions for the Web application using the <strong>Policy</strong> tab of the Web application configuration editor.</p> 
+  <p>According to the W3C Access Requests Policy (WARP), you cannot access external network resources by default. If you require access to an external network resource, you must request network resource permissions for the Web application using the <strong>Policy</strong> tab of the Web application configuration editor.</p>
+
 
 
-    
-  <p>The following table lists the policy properties you can edit in the <strong>Policy</strong> tab.</p> 
-   <p align="center" class="Table"><strong>Table: Policy information</strong></p> 
-     <table border="1"> 
-       <tbody> 
-    <tr> 
-     <th>Property</th> 
-     <th>Description</th> 
-    </tr>  
-    <tr> 
-     <td><strong>content-security-policy</strong></td> 
+  <p>The following table lists the policy properties you can edit in the <strong>Policy</strong> tab.</p>
+   <p align="center" class="Table"><strong>Table: Policy information</strong></p>
+     <table border="1">
+       <tbody>
+    <tr>
+     <th>Property</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><strong>content-security-policy</strong></td>
      <td>Used to define an additional content security policy for a packaged or hosted application. The policy string is defined according to <a href="http://www.w3.org/TR/CSP/" target="_blank">http://www.w3.org/TR/CSP/ (v1.0)</a>.
-</td> 
-    </tr> 
-    <tr> 
-     <td><strong>content-security-policy-report-only</strong></td> 
-     <td>Used to define an additional content security policy for a packaged or hosted application  (for monitoring purposes only). 
-</td> 
-    </tr> 
-    <tr> 
-     <td><strong>allow-navigation</strong></td> 
-     <td>Used to define a list of URL domains allowed for the Web application. 
+</td>
+    </tr>
+    <tr>
+     <td><strong>content-security-policy-report-only</strong></td>
+     <td>Used to define an additional content security policy for a packaged or hosted application  (for monitoring purposes only).
+</td>
+    </tr>
+    <tr>
+     <td><strong>allow-navigation</strong></td>
+     <td>Used to define a list of URL domains allowed for the Web application.
 <p>This attribute is optional.</p>
-</td> 
-    </tr> 
-    <tr> 
-     <td><strong>Access</strong></td> 
+</td>
+    </tr>
+    <tr>
+     <td><strong>Access</strong></td>
      <td>Used to define network resource permissions.
-        <p>To request network resource permissions, click <strong>+</strong> and enter the resource URLs in the <strong>Network URL</strong> column. You can allow the Web application to access the URL sub-domains by setting the <strong>Allow subdomain</strong> column value as <strong>true</strong>.</p> 
- </td> 
-    </tr> 
-    
-   </tbody> 
-  </table> 
-  
+        <p>To request network resource permissions, click <strong>+</strong> and enter the resource URLs in the <strong>Network URL</strong> column. You can allow the Web application to access the URL sub-domains by setting the <strong>Allow subdomain</strong> column value as <strong>true</strong>.</p>
+ </td>
+    </tr>
+
+   </tbody>
+  </table>
+
   <p>After setting the policy information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab:</p>
   <pre class="prettyprint">
-&lt;access origin=&quot;http://www.tizen.org&quot; subdomains=&quot;true&quot;/&gt;
+&lt;access origin="http://www.tizen.org" subdomains="true"/&gt;
 &lt;tizen:allow-navigation&gt;tizen.org *.tizen.org&lt;tizen:allow-navigation/&gt;
-&lt;tizen:content-security-policy&gt;script-src &#39;self&#39;&lt;/tizen:content-security-policy&gt;
-&lt;tizen:content-security-policy-report-only&gt;script-src &#39;self&#39;;&lt;/tizen:content-security-policy-report-only&gt;</pre>
+&lt;tizen:content-security-policy&gt;script-src 'self'&lt;/tizen:content-security-policy&gt;
+&lt;tizen:content-security-policy-report-only&gt;script-src 'self';&lt;/tizen:content-security-policy-report-only&gt;</pre>
 
 <h3 id="localization" name="localization">Adding Localized Application Details in the Localization Tab</h3>
 
-  <p>You can provide localized versions of the application name, description, and license in the <strong>Localization</strong> tab of the Web application configuration editor.</p> 
-  
-<p>To add a localized name, description, or license:</p> 
+  <p>You can provide localized versions of the application name, description, and license in the <strong>Localization</strong> tab of the Web application configuration editor.</p>
+
+<p>To add a localized name, description, or license:</p>
 <ul><li>In the <strong>Name</strong> panel, click <strong>+</strong>. Select the language, define the application name for that language, and click <strong>OK</strong>.
 <p>The following example shows the setting in the <code>config.xml</code> file:</p>
   <pre class="prettyprint">
-&lt;name xml:lang=&quot;en-gb&quot;&gt;Lee&lt;/name&gt;
+&lt;name xml:lang="en-gb"&gt;Lee&lt;/name&gt;
 </pre></li>
 <li>In the <strong>Description</strong> panel, click <strong>+</strong>. Select the language, define the application description for that language, and click <strong>OK</strong>.
 <p>The following example shows the setting in the <code>config.xml</code> file:</p>
   <pre class="prettyprint">
-&lt;description xml:lang=&quot;en-gb&quot;&gt;Widget&lt;/description&gt;
+&lt;description xml:lang="en-gb"&gt;Widget&lt;/description&gt;
 </pre></li>
 <li>In the <strong>License</strong> panel, click <strong>+</strong>. Select a language, define the license and license URI for that language, and click <strong>OK</strong>.
-  <p>The following example shows the setting in the <code>config.xml</code> file code:</p> 
+  <p>The following example shows the setting in the <code>config.xml</code> file code:</p>
   <pre class="prettyprint">
-&lt;license xml:lang=&quot;en-gb&quot; href=&quot; http://www.apache.org/licenses/LICENSE-2.0.html&quot;&gt;
-&nbsp;&nbsp;&nbsp;Apache License, Version 2.0
+&lt;license xml:lang="en-gb" href=" http://www.apache.org/licenses/LICENSE-2.0.html"&gt;
+   Apache License, Version 2.0
 &lt;/license&gt;
 </pre> </li>
 </ul>
 
-<p>You can localize a Web application to adapt to various languages and cultural environments by creating different Web application versions for different languages. For more information see <a href="../../../../org.tizen.studio/html/web_tools/web_localization_w.htm">Localizing Web Applications</a>.</p> 
+<p>You can localize a Web application to adapt to various languages and cultural environments by creating different Web application versions for different languages. For more information see <a href="../../../../org.tizen.studio/html/web_tools/web_localization_w.htm">Localizing Web Applications</a>.</p>
 
 <h3 id="preferences" name="preferences">Declaring Name-value Pairs in the Preferences Tab</h3>
 
-  <p>You can declare name-value pairs which can be set and retrieved using the Widget Interface API (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#widget">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#widget">wearable</a> applications) in the <strong>Preferences</strong> tab of the Web application configuration editor. These name-value pairs, or preferences, are used by the Web application during execution.</p> 
+  <p>You can declare name-value pairs which can be set and retrieved using the Widget Interface API (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#widget">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#widget">wearable</a> applications) in the <strong>Preferences</strong> tab of the Web application configuration editor. These name-value pairs, or preferences, are used by the Web application during execution.</p>
 
-  <p>To add preferences, click <strong>+</strong>. A new row appears in the table. Enter values in the <strong>Name</strong> and <strong>Value</strong> columns. You can set a preference as read-only by setting the <strong>Read-only</strong> column value as <strong>true</strong>.</p> 
-   <p>After saving the preference information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab:</p> 
+  <p>To add preferences, click <strong>+</strong>. A new row appears in the table. Enter values in the <strong>Name</strong> and <strong>Value</strong> columns. You can set a preference as read-only by setting the <strong>Read-only</strong> column value as <strong>true</strong>.</p>
+   <p>After saving the preference information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab:</p>
   <pre class="prettyprint">
-&lt;preference name=&quot;key&quot; value=&quot;value&quot; readonly=&quot;false&quot;/&gt;    
+&lt;preference name="key" value="value" readonly="false"/&gt;
 </pre>
 
 <h3 id="tizen" name="tizen">Configuring the Tizen Schema Extension in the Tizen Tab</h3>
 
-  <p> The <strong>Tizen</strong> tab of the Web application configuration editor shows the Tizen schema extension. Some of the attributes specified on this tab are mandatory and must be defined, whereas others are optional.</p> 
-
-  <p>The following table describes the schema extension properties that you can edit.</p> 
-   <p align="center" class="Table"><strong>Table: Tizen-specific information</strong></p> 
-   <table border="1"> 
-   <tbody> 
-    <tr> 
-     <th colspan="2">Property</th> 
-     <th>Description</th> 
-    </tr> 
-    <tr> 
-        <td rowspan="4"><strong>Application</strong></td> 
-     <td><strong>ID</strong></td> 
+  <p> The <strong>Tizen</strong> tab of the Web application configuration editor shows the Tizen schema extension. Some of the attributes specified on this tab are mandatory and must be defined, whereas others are optional.</p>
+
+  <p>The following table describes the schema extension properties that you can edit.</p>
+   <p align="center" class="Table"><strong>Table: Tizen-specific information</strong></p>
+   <table border="1">
+   <tbody>
+    <tr>
+     <th colspan="2">Property</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+        <td rowspan="4"><strong>Application</strong></td>
+     <td><strong>ID</strong></td>
      <td>Tizen application ID, which is randomly created from the Tizen package ID and project name.
-        <p>This attribute is mandatory.</p></td> 
+        <p>This attribute is mandatory.</p></td>
     </tr>
-    <tr> 
-     <td><strong>Required Version</strong></td> 
+    <tr>
+     <td><strong>Required Version</strong></td>
      <td>Indicates the minimum API version that the Web application supports.
-        <p>This attribute is mandatory and must be a float value, such as 1.0 or 2.0.</p></td> 
-    </tr> 
-       <tr> 
-     <td><strong>Launch Mode</strong></td> 
+        <p>This attribute is mandatory and must be a float value, such as 1.0 or 2.0.</p></td>
+    </tr>
+       <tr>
+     <td><strong>Launch Mode</strong></td>
      <td>Indicates whether the application is launched as a main (single) or sub application, or whether a caller application defines the launch mode when the application is launched by an application control request.
-        <p>This attribute is optional. The default value is <strong>single</strong>.</p></td> 
+        <p>This attribute is optional. The default value is <strong>single</strong>.</p></td>
     </tr>
-       <tr> 
-     <td><strong>Ambient Support</strong></td> 
+       <tr>
+     <td><strong>Ambient Support</strong></td>
      <td>Indicates whether the Web application supports the ambient mode.
-        <p>This attribute is optional and used <strong>in wearable applications only</strong>. The default value is <strong>disable</strong>.</p></td> 
-    </tr> 
-    <tr> 
+        <p>This attribute is optional and used <strong>in wearable applications only</strong>. The default value is <strong>disable</strong>.</p></td>
+    </tr>
+    <tr>
        <td><strong>Content</strong></td>
-     <td><strong>Src</strong></td> 
+     <td><strong>Src</strong></td>
      <td>In Widget Packaging and XML Configuration, the Web application start page is a document within the Web application package. The Tizen WRT allows the start page to be hosted on an external server.
-        <p>If the start page is on an external server, this attribute points to it.</p></td> 
-    </tr> 
-    <tr> 
-       <td rowspan="6"><strong>Setting</strong></td> 
-     <td><strong>Screen Orientation</strong></td> 
+        <p>If the start page is on an external server, this attribute points to it.</p></td>
+    </tr>
+    <tr>
+       <td rowspan="6"><strong>Setting</strong></td>
+     <td><strong>Screen Orientation</strong></td>
      <td>Sets the application screen orientation to landscape or portrait mode, or auto-rotation.
-        <p>This attribute is optional. The default value is <strong>portrait</strong>.</p> </td> 
-    </tr> 
-    <tr> 
-     <td><strong>Context Menu</strong></td> 
+        <p>This attribute is optional. The default value is <strong>portrait</strong>.</p> </td>
+    </tr>
+    <tr>
+     <td><strong>Context Menu</strong></td>
      <td>Sets the Web application support for context menus.
-        <p>This attribute is optional. The default value is <strong>enable</strong>.</p> </td> 
-    </tr> 
-    <tr> 
-     <td><strong>Background Support</strong></td> 
+        <p>This attribute is optional. The default value is <strong>enable</strong>.</p> </td>
+    </tr>
+    <tr>
+     <td><strong>Background Support</strong></td>
      <td>Defines whether the execution of the Web application continues when the application is sent to the background.
-        <p>This attribute is optional. The default value is <strong>disable</strong>.</p> </td> 
-    </tr> 
-    <tr> 
-     <td><strong>Encryption</strong></td> 
+        <p>This attribute is optional. The default value is <strong>disable</strong>.</p> </td>
+    </tr>
+    <tr>
+     <td><strong>Encryption</strong></td>
      <td>Sets the encryption of application resources (JS, CSS, and HTML files).
-        <p>This attribute is optional. The default mode is <strong>disable</strong>.</p> </td> 
-    </tr> 
-    <tr> 
-     <td><strong>Install Location</strong></td> 
+        <p>This attribute is optional. The default mode is <strong>disable</strong>.</p> </td>
+    </tr>
+    <tr>
+     <td><strong>Install Location</strong></td>
      <td>Sets the installation location, for example, the SD card.
-        <p>This attribute is optional. The default mode is <strong>auto</strong>.</p> </td> 
-    </tr> 
-    <tr> 
-     <td><strong>HW Key Event</strong></td> 
+        <p>This attribute is optional. The default mode is <strong>auto</strong>.</p> </td>
+    </tr>
+    <tr>
+     <td><strong>HW Key Event</strong></td>
      <td>Sets the support for the hardware key.
-        <p>This attribute is optional. The default mode is <strong>enable</strong>.</p> </td> 
-    </tr>      
-    <tr> 
-     <td colspan="2"><strong>Application Control</strong></td> 
+        <p>This attribute is optional. The default mode is <strong>enable</strong>.</p> </td>
+    </tr>
+    <tr>
+     <td colspan="2"><strong>Application Control</strong></td>
      <td>Describes the <a href="../../../../org.tizen.guides/html/web/app_management/app_controls_w.htm">application control functionalities</a> provided by the application. To define an application control used to access the functionality of your application, click <strong>+</strong> in the <strong>Application Control</strong> panel and define the details.
         <p>The <strong>operation</strong>, <strong>uri</strong>, and <strong>mime</strong> fields describe the functionalities that other applications can request and the <strong>src</strong> field describes the application page that handles the request.</p> <p>The following example shows the setting in the <code>config.xml</code> file code:</p> <pre class="prettyprint">
 &lt;tizen:app-control&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:src name=&quot;edit.html&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:operation name=&quot;http://tizen.org/appcontrol/operation/edit&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:uri name=&quot;file&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:mime name=&quot;image/jpeg&quot;/&gt;
-&lt;/tizen:app-control&gt;</pre> </td> 
-    </tr> 
-       <tr> 
-       <td rowspan="6"><strong>Account</strong></td> 
+   &lt;tizen:src name="edit.html"/&gt;
+   &lt;tizen:operation name="http://tizen.org/appcontrol/operation/edit"/&gt;
+   &lt;tizen:uri name="file"/&gt;
+   &lt;tizen:mime name="image/jpeg"/&gt;
+&lt;/tizen:app-control&gt;</pre> </td>
+    </tr>
+       <tr>
+       <td rowspan="6"><strong>Account</strong></td>
        <td></td>
-     <td>To register an account provider, click <strong>+</strong> in the <strong>Account</strong> section and define the account provider information.</td> 
-    </tr>              
-       <tr> 
-     <td><strong>Display name</strong></td> 
+     <td>To register an account provider, click <strong>+</strong> in the <strong>Account</strong> section and define the account provider information.</td>
+    </tr>
+       <tr>
+     <td><strong>Display name</strong></td>
      <td>Used to define the localized display name of the account provider.
         <p>To add a localized name, click <strong>Add</strong> in the <strong>Display name</strong> panel, select the language, define the display name for that language, and click <strong>OK</strong>.</p>
-        <p>This attribute is mandatory.</p></td> 
-    </tr>      
-        <tr> 
-     <td><strong>Multiple account</strong></td> 
+        <p>This attribute is mandatory.</p></td>
+    </tr>
+        <tr>
+     <td><strong>Multiple account</strong></td>
      <td>Indicates whether multiple accounts are supported.
-        <p>This attribute is mandatory.</p></td> 
+        <p>This attribute is mandatory.</p></td>
     </tr>
-       <tr> 
-     <td><strong>Icon</strong></td> 
+       <tr>
+     <td><strong>Icon</strong></td>
      <td>Used to define the path of the icon representing the account provider. The icon image is used by account settings and must be placed in a shared directory. The size is 72 x 72.
-        <p>This attribute is mandatory.</p></td> 
+        <p>This attribute is mandatory.</p></td>
     </tr>
-       <tr> 
-     <td><strong>Small icon</strong></td> 
+       <tr>
+     <td><strong>Small icon</strong></td>
      <td>Used to define the path of the small icon representing the account provider. The icon image is used by account settings and must be placed in a shared directory. The size is 45 x 45.
-        <p>This attribute is mandatory.</p></td> 
+        <p>This attribute is mandatory.</p></td>
     </tr>
-       <tr> 
-     <td><strong>Capabilities</strong></td> 
+       <tr>
+     <td><strong>Capabilities</strong></td>
      <td>The capabilities of the account provider defined in the IRI format:
         <p><code>http://&lt;vendor information&gt;/accounts/capability/&lt;name&gt;</code></p>
         <p>The following predefined capabilities can be used:</p>
@@ -361,43 +361,43 @@
         <p>Used when the account is related to calendar.</p></li>
         </ul>
         <p>To add a capability, click an empty row in the <strong>Capabilities</strong> panel table and select a capability you need.</p>
-<p>This attribute is optional.</p></td> 
+<p>This attribute is optional.</p></td>
     </tr>
-       <tr> 
+       <tr>
      <td colspan="2"><strong>Background Category</strong></td>
         <td>Defines the background category type (since Tizen 2.4). <p>To add background category types to allow running on the background, click <strong>+</strong> in the <strong>Background Category</strong> section, select the category type, and click <strong>OK</strong>.</p></td>
-       </tr>                   
-               <tr> 
+       </tr>
+               <tr>
        <td colspan="2"><strong>Meta Data</strong></td>
      <td>Defines key-value pairs that can be accessed (read-only) through the Application API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications).
         <p>To add a key-value pair, click <strong>+</strong> in the <strong>Meta Data</strong> section, define a key (unique string) and value (string), and click <strong>OK</strong>. This attribute is optional.</p>
         <p>The following example shows the setting in the <code>config.xml</code> file code:</p>
         <pre class="prettyprint">
-&lt;tizen:metadata key=&quot;key1&quot;/&gt;
-&lt;tizen:metadata key=&quot;key2&quot; value=&quot;value&quot;/&gt;
-</pre> 
-        </td> 
+&lt;tizen:metadata key="key1"/&gt;
+&lt;tizen:metadata key="key2" value="value"/&gt;
+</pre>
+        </td>
     </tr>
-               <tr> 
+               <tr>
        <td colspan="2"><strong>Category</strong></td>
-     <td>Defines the categories to which a service application belongs.  
-        <p>To add a category, click <strong>+</strong> in the <strong>Category</strong> section, select the category, and click <strong>OK</strong>. This attribute is optional and used <strong>in wearable applications only</strong>.</p> 
-        </td> 
+     <td>Defines the categories to which a service application belongs.
+        <p>To add a category, click <strong>+</strong> in the <strong>Category</strong> section, select the category, and click <strong>OK</strong>. This attribute is optional and used <strong>in wearable applications only</strong>.</p>
+        </td>
     </tr>
-               <tr> 
+               <tr>
        <td colspan="2"><strong>Service</strong></td>
      <td>Defines service application-specific settings.
         <p>To define the setting values, click <strong>+</strong> in the <strong>Service</strong> section, and define the values. For more information on the values, see <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_service">Tizen Service</a>.</p>
-        </td> 
+        </td>
     </tr>
-               <tr> 
+               <tr>
        <td colspan="2"><strong>Web Widget</strong></td>
      <td>Defines widget application-specific settings.
-        <p>To edit the setting values, select the row in the <strong>Web Widget</strong> section table, click the <strong>Edit</strong> icon (shaped like a pen), and define the values. For more information on the values, see <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_webwidget">Tizen Web Widget</a>.</p> 
-        </td> 
+        <p>To edit the setting values, select the row in the <strong>Web Widget</strong> section table, click the <strong>Edit</strong> icon (shaped like a pen), and define the values. For more information on the values, see <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_webwidget">Tizen Web Widget</a>.</p>
+        </td>
     </tr>
-   </tbody> 
-  </table> 
+   </tbody>
+  </table>
 
 <h3 id="source" name="source">Editing the config.xml File in the Source Tab</h3>
 
@@ -408,7 +408,7 @@
         The <code>config.xml</code> must conform not only to the XML file format but also to the W3C specification requirements. If you edit application information manually in the <code>config.xml</code> file source code, you can introduce errors preventing the application from running normally.
     </div>
 
- 
+
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>
 </div></div></div>
@@ -427,7 +427,7 @@ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
-</script> 
-  <!--end-->  
+</script>
+  <!--end-->
  </body>
 </html>
\ No newline at end of file
diff --git a/org.tizen.training/html/web/wearable/first_app_ww.htm b/org.tizen.training/html/web/wearable/first_app_ww.htm
index b65d72c..5663566 100644 (file)
--- a/org.tizen.training/html/web/wearable/first_app_ww.htm
+++ b/org.tizen.training/html/web/wearable/first_app_ww.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Your First Tizen Wearable Web Application</title>  
+       <title>Creating Your First Tizen Wearable Web Application</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -224,7 +224,7 @@
 
 <p>You can run the Web application on the <a href="../process/run_debug_app_w.htm#emulator">emulator</a> or a <a href="../process/run_debug_app_w.htm#target">real target device</a>.</p>
 
-  
+
       <div class="note">
         <strong>Note</strong>
         Since the Web Simulator does not support a circular UI, this topic does not cover the instructions for running the application on the Web Simulator.
@@ -263,7 +263,7 @@
 
 <p>If you have created multiple emulator instances, select the instance you want from the combo box in the toolbar before selecting to run the application. If you select an offline emulator, it is automatically launched when you select to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p>
 </li>
 
 <li>Confirm that the application launches on the emulator.
@@ -333,7 +333,7 @@
 <li>Run the application:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, select the device.</li>
-<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>. 
+<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>.
 
 <p align="center"><img src="../../images/app_run_ww.png" alt="Running the application on a target device" /></p>
 
@@ -343,12 +343,12 @@
 
 <p>If you have both a connected device and existing emulator instances, select the device from the combo box in the toolbar before selecting to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p>
 
 </li>
 <li>Confirm that the application launches in the target device.</li>
 </ol>
-  
+
       <div class="note">
         <strong>Note</strong>
         The application is launched using the default debug run configuration. To create and use another configuration:
@@ -358,7 +358,7 @@
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_w.png" /></p></li>
         </ol>
     </div>
-  
+
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
 </ol>
@@ -371,19 +371,19 @@
 
 <p>The W3C specifications provide HTML and CSS features for creating a user interface. With HTML, you can define the structure of the application screens, while CSS allows you to define the look and feel of the screens.</p>
 
-<h4 id="html" name="html">HTML</h4> 
+<h4 id="html" name="html">HTML</h4>
 
 <p>HTML DOM is a structured model to control Web elements. It is an official W3C standard to express the document regardless of platforms or languages, and the foundation of the HTML5 APIs.</p>
 <p>The <code>&lt;html&gt;</code> element is the top-level element of the HTML DOM tree that wraps the entire document, and it has the <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> elements as child nodes:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;!--Content--&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--Content--&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -397,19 +397,19 @@
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Tizen Wearable Web Basic Template&quot;/&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Tizen Wearable Web Basic Application&lt;/title&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Content--&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta charset="utf-8" /&gt;
+      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
+      &lt;meta name="description" content="Tizen Wearable Web Basic Template"/&gt;
+
+      &lt;title&gt;Tizen Wearable Web Basic Application&lt;/title&gt;
+
+      &lt;link rel="stylesheet" type="text/css" href="css/style.css"/&gt;
+      &lt;script src="js/main.js"&gt;&lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--Content--&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -417,17 +417,17 @@
 
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;main&quot; class=&quot;page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;content-text&quot;&gt;Basic&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="main" class="page"&gt;
+      &lt;div class="contents"&gt;
+         &lt;span id="content-text"&gt;Basic&lt;/span&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 
 <p>The HTML code displays the <strong>Basic</strong> text on the screen.</p>
 
-<p align="center"><strong>Figure: Screen with Basic text</strong></p> 
+<p align="center"><strong>Figure: Screen with Basic text</strong></p>
 <p align="center"><img src="../../images/build_ui_basic_ww.png" alt="Screen with Basic text" /></p>
 
 <h4 id="css" name="css">CSS</h4>
@@ -446,23 +446,23 @@
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Tizen Wearable Web Basic Template&quot;/&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Tizen Wearable Web Basic Application&lt;/title&gt;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;/&gt;</span>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;main&quot; class=&quot;page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;contents&quot; <span class="highlight">style=&#39;margin:auto;&#39;</span>&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;content-text&quot;&gt;Basic&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta charset="utf-8" /&gt;
+      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
+      &lt;meta name="description" content="Tizen Wearable Web Basic Template"/&gt;
+
+      &lt;title&gt;Tizen Wearable Web Basic Application&lt;/title&gt;
+
+      <span class="highlight">&lt;link rel="stylesheet" type="text/css" href="css/style.css"/&gt;</span>
+      &lt;script src="js/main.js"&gt;&lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div id="main" class="page"&gt;
+         &lt;div class="contents" <span class="highlight">style='margin:auto;'</span>&gt;
+            &lt;span id="content-text"&gt;Basic&lt;/span&gt;
+         &lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -474,41 +474,41 @@
 html,
 body
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;margin: 0 auto;
-&nbsp;&nbsp;&nbsp;padding: 0;
-&nbsp;&nbsp;&nbsp;background-color: #222222;
-&nbsp;&nbsp;&nbsp;color: #ffffff;
+   width: 100%;
+   height: 100%;
+   margin: 0 auto;
+   padding: 0;
+   background-color: #222222;
+   color: #ffffff;
 }
 .page
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;display: table;
+   width: 100%;
+   height: 100%;
+   display: table;
 }
 .contents
 {
-&nbsp;&nbsp;&nbsp;display: table-cell;
-&nbsp;&nbsp;&nbsp;vertical-align: middle;
-&nbsp;&nbsp;&nbsp;text-align: center;
-&nbsp;&nbsp;&nbsp;-webkit-tap-highlight-color: transparent;
+   display: table-cell;
+   vertical-align: middle;
+   text-align: center;
+   -webkit-tap-highlight-color: transparent;
 }
 #content-text
 {
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;font-size: 5em;
+   font-weight: bold;
+   font-size: 5em;
 }
 </pre>
 </li>
 <li><code>index.html</code>:
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;main&quot; class=&quot;page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;contents&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;content-text&quot;&gt;Basic&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+   &lt;div id="main" class="page"&gt;
+      &lt;div class="contents"&gt;
+         &lt;span id="content-text"&gt;Basic&lt;/span&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
 &lt;/body&gt;
 </pre>
 </li>
@@ -518,12 +518,12 @@ body
 <pre class="prettyprint">
 #content-text
 {
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;font-size: 5em;
-&nbsp;&nbsp;&nbsp;<span class="highlight">color: #ff0000;</span>
+   font-weight: bold;
+   font-size: 5em;
+   <span class="highlight">color: #ff0000;</span>
 }
 </pre>
-<p align="center"><strong>Figure: Screen with a new text color</strong></p> 
+<p align="center"><strong>Figure: Screen with a new text color</strong></p>
 <p align="center"><img src="../../images/build_ui_basic_textbox_ww.png" alt="Screen with a new text color" /></p>
 
 <h3 id="tau" name="tau">TAU (Tizen Advanced UI)</h3>
@@ -563,16 +563,16 @@ body
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;lib/tau/wearable/theme/default/tau.min.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--For a circular device, import tau.circle.min.css--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (-tizen-geometric-shape: circle)&quot; href=&quot;lib/tau/wearable/theme/default/tau.circle.min.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--HTML BODY CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/wearable/js/tau.min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;js/circle-helper.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css"/&gt;
+      &lt;!--For a circular device, import tau.circle.min.css--&gt;
+      &lt;link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css"&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--HTML BODY CONTENT--&gt;
+      &lt;script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"&gt;&lt;/script&gt;
+      &lt;script type="text/javascript" src="js/circle-helper.js"&gt;&lt;/script&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
@@ -592,26 +592,26 @@ body
 </li>
 </ul>
 
-<p>You can add an additional <code>&lt;script src=&quot;&lt;CUSTOM_LIBRARY&gt;&quot;&gt;</code> or <code>&lt;link rel=&quot;stylesheet&quot; src=&quot;&lt;CUSTOM_CSS&gt;&quot;&gt;</code> element to include your own scripts and style sheets. However, place them after the default <code>&lt;script&gt;</code> elements, as you can use any TAU APIs provided by the default libraries.</p>
+<p>You can add an additional <code>&lt;script src="&lt;CUSTOM_LIBRARY&gt;"&gt;</code> or <code>&lt;link rel="stylesheet" src="&lt;CUSTOM_CSS&gt;"&gt;</code> element to include your own scripts and style sheets. However, place them after the default <code>&lt;script&gt;</code> elements, as you can use any TAU APIs provided by the default libraries.</p>
 <p>To load your JavaScript file, include the file in the <code>&lt;script&gt;</code> element in the HTML <code>&lt;body&gt;</code> element. Since the TAU files are already loaded, you can use any APIs from these libraries as well.</p>
 <p>The following example shows a basic TAU template. Overwrite the <code>index.html</code> file content with the following code:</p>
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello TAU&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;lib/tau/wearable/theme/default/tau.min.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (-tizen-geometric-shape: circle)&quot; href=&quot;lib/tau/wearable/theme/default/tau.circle.min.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--Load theme file for your application--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--HTML BODY CONTENT--&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/wearable/js/tau.min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;js/circle-helper.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta name="viewport" content="width=device-width, user-scalable=no"/&gt;
+      &lt;title&gt;Hello TAU&lt;/title&gt;
+      &lt;link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css"/&gt;
+      &lt;link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css"&gt;
+      &lt;!--Load theme file for your application--&gt;
+      &lt;link rel="stylesheet" href="css/style.css"/&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;!--HTML BODY CONTENT--&gt;
+      &lt;script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"&gt;&lt;/script&gt;
+      &lt;script type="text/javascript" src="js/circle-helper.js"&gt;&lt;/script&gt;
+      &lt;script src="js/app.js"&gt;&lt;/script&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 </li>
@@ -623,22 +623,22 @@ body
 <p>To create a page in the <code>&lt;body&gt;</code> element, use the <code>ui-page</code> class with the <code>&lt;div&gt;</code> element:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;!--Script import--&gt;
-&nbsp;&nbsp;&nbsp;&lt;script&gt; ... &lt;/script&gt;
+   &lt;div class="ui-page" id="main"&gt;
+   &lt;/div&gt;
+   &lt;!--Script import--&gt;
+   &lt;script&gt; ... &lt;/script&gt;
 &lt;/body&gt;
 </pre></li>
 <li>
 <p>To layout the page, add a content area with the <code>ui-content</code> class and a header with the <code>ui-header</code> class:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Hello World&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This is content area&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="main"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Hello World&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content"&gt;
+      &lt;p&gt;This is content area&lt;/p&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -649,13 +649,13 @@ body
 <li>
 <p>You can add your own style in the content and footer area with a defined <code>id</code> attribute:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Hello World&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot; id=&quot;contentArea&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This is content area&lt;/p&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;div class="ui-page" id="main"&gt;
+   &lt;header class="ui-header"&gt;
+      &lt;h2 class="ui-title"&gt;Hello World&lt;/h2&gt;
+   &lt;/header&gt;
+   &lt;div class="ui-content" id="contentArea"&gt;
+      &lt;p&gt;This is content area&lt;/p&gt;
+   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -663,7 +663,7 @@ body
 <pre class="prettyprint">
 #contentArea
 {
-&nbsp;&nbsp;&nbsp;color: #8be3d1;
+   color: #8be3d1;
 }
 </pre>
 <p>With your new style, the screen looks like this.</p>
@@ -677,16 +677,16 @@ body
 
 <ul>
 <li>
-<p>Create a simple and basic static list. Overwrite the <code>&lt;ul class=&quot;ui-content&quot;&gt;</code> element content with the following code:</p>
+<p>Create a simple and basic static list. Overwrite the <code>&lt;ul class="ui-content"&gt;</code> element content with the following code:</p>
 <pre class="prettyprint">
-&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item1&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item4&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item5&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&lt;div class="ui-content"&gt;
+   &lt;ul class="ui-listview"&gt;
+      &lt;li&gt;&lt;a href="#"&gt;List Item1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="#"&gt;List Item2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="#"&gt;List Item3&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="#"&gt;List Item4&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href="#"&gt;List Item5&lt;/a&gt;&lt;/li&gt;
+   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
 <p>The screen now shows a basic list.</p>
@@ -698,31 +698,31 @@ body
 
 <p>The following example shows how to create a SnapListview using the <code>tau.helper</code> class:</p>
 <pre class="prettyprint">
-(function(tau) 
+(function(tau)
 {
-&nbsp;&nbsp;&nbsp;var page,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper;
-
-&nbsp;&nbsp;&nbsp;/* Check for a circular device */
-&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pagebeforeshow&quot;, function(e) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page = e.target;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list = page.querySelector(&quot;.ui-listview&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (list) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Create SnapListView and binding rotary event using tau.helper */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper = tau.helper.SnapListStyle.create(list);            
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&quot;pagebeforehide&quot;, function(e) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listHelper.destroy();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;}
+   var page,
+       list,
+       listHelper;
+
+   /* Check for a circular device */
+   if (tau.support.shape.circle)
+   {
+      document.addEventListener("pagebeforeshow", function(e)
+      {
+         page = e.target;
+         list = page.querySelector(".ui-listview");
+         if (list)
+         {
+            /* Create SnapListView and binding rotary event using tau.helper */
+            listHelper = tau.helper.SnapListStyle.create(list);
+         }
+      });
+
+      document.addEventListener("pagebeforehide", function(e)
+      {
+         listHelper.destroy();
+      });
+   }
 }(tau));
 </pre>
 
@@ -737,23 +737,23 @@ body
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Hello TAU&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot;  href=&quot;lib/tau/wearable/theme/default/tau.min.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; media=&quot;all&quot; href=&quot;lib/tau/wearable/theme/default/tau.circle.min.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;second&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Second Page&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;secondContent&quot; class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello Tizen!
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/wearable/js/tau.min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
+   &lt;head&gt;
+      &lt;meta name="viewport" content="width=device-width, user-scalable=no"/&gt;
+      &lt;title&gt;Hello TAU&lt;/title&gt;
+      &lt;link rel="stylesheet"  href="lib/tau/wearable/theme/default/tau.min.css"&gt;
+      &lt;link rel="stylesheet" media="all" href="lib/tau/wearable/theme/default/tau.circle.min.css"&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div class="ui-page" id="second"&gt;
+         &lt;header class="ui-header"&gt;
+            &lt;h2 class="ui-title"&gt;Second Page&lt;/h2&gt;
+         &lt;/header&gt;
+         &lt;div id="secondContent" class="ui-content"&gt;
+            Hello Tizen!
+         &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"&gt;&lt;/script&gt;
+   &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 </li>
@@ -763,12 +763,12 @@ body
 <p>Go back to the <code>index.html</code> file and add a file path in the listview <code>&lt;li&gt;&lt;a href&gt;</code> element:</p>
 
 <pre class="prettyprint">
-&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;second.html&quot;&gt;Go to Second Page&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item4&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item5&lt;/a&gt;&lt;/li&gt;
+&lt;ul class="ui-listview"&gt;
+   &lt;li&gt;&lt;a href="second.html"&gt;Go to Second Page&lt;/a&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;a href="#"&gt;List Item2&lt;/a&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;a href="#"&gt;List Item3&lt;/a&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;a href="#"&gt;List Item4&lt;/a&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;a href="#"&gt;List Item5&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre></li>
 <li>
@@ -781,29 +781,29 @@ body
 </li>
 
 <li>Go back with the back key.
-<p>You can navigate from page to page with the <code>&lt;a href=&quot;PAGE_FILE_NAME&quot;&gt;</code> elements, but you cannot go back. In this step, you learn to add some code in a JavaScript file to enable the user to return to the first page.</p>
+<p>You can navigate from page to page with the <code>&lt;a href="PAGE_FILE_NAME"&gt;</code> elements, but you cannot go back. In this step, you learn to add some code in a JavaScript file to enable the user to return to the first page.</p>
 
 <ol type="a">
 <li><p>Add a new JavaScript file to the <code>index.html</code> file:</p>
 <pre class="prettyprint">
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-page&quot; id=&quot;main&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header class=&quot;ui-header&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=&quot;ui-title&quot;&gt;Hello TAU&lt;/h2&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/header&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;ui-content&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;ui-listview&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;second.html&quot;&gt;Go to Second&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item2&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item3&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item4&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;List Item5&lt;/a&gt;&lt;/li&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;lib/tau/wearable/js/tau.min.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script type=&quot;text/javascript&quot; src=&quot;js/circle-helper.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
+   &lt;div class="ui-page" id="main"&gt;
+      &lt;header class="ui-header"&gt;
+         &lt;h2 class="ui-title"&gt;Hello TAU&lt;/h2&gt;
+      &lt;/header&gt;
+      &lt;div class="ui-content"&gt;
+         &lt;ul class="ui-listview"&gt;
+            &lt;li&gt;&lt;a href="second.html"&gt;Go to Second&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href="#"&gt;List Item2&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href="#"&gt;List Item3&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href="#"&gt;List Item4&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href="#"&gt;List Item5&lt;/a&gt;&lt;/li&gt;
+         &lt;/ul&gt;
+      &lt;/div&gt;
+   &lt;/div&gt;
+   &lt;script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"&gt;&lt;/script&gt;
+   &lt;script type="text/javascript" src="js/circle-helper.js"&gt;&lt;/script&gt;
+   &lt;script src="app.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
 </pre></li>
 <li>
@@ -811,21 +811,21 @@ body
 
 <p>Overwrite the <code>app.js</code> file content with the following code:</p>
 <pre class="prettyprint">
-(function() 
+(function()
 {
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function(ev) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ev.keyName === &quot;back&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementsByClassName(&#39;ui-page-active&#39;)[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageid = page ? page.id : &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pageid !== &quot;main&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+   window.addEventListener('tizenhwkey', function(ev)
+   {
+      if (ev.keyName === "back")
+      {
+         var page = document.getElementsByClassName('ui-page-active')[0],
+             pageid = page ? page.id : "";
+
+         if (pageid !== "main")
+         {
+            window.history.back();
+         }
+      }
+   });
 }());
 </pre></li></ol>
 </li>
@@ -835,31 +835,31 @@ body
 <p>You have to consider the fact that when the user clicks the back key, the application can only exit if it is showing the main page. If the second page is showing, the application must return to the main page.</p>
 <p>The following example shows how to handle the back key input with page navigation and application exit. This code is included in the <strong>TAU Basic</strong> project template <code>main.js</code> file by default.</p>
 <pre class="prettyprint">
-(function() 
+(function()
 {
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function(ev) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ev.keyName === &quot;back&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var page = document.getElementsByClassName(&#39;ui-page-active&#39;)[0],
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageid = page ? page.id : &quot;&quot;;
-
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (pageid === &quot;main&quot;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (ignore) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.history.back();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
+   window.addEventListener('tizenhwkey', function(ev)
+   {
+      if (ev.keyName === "back")
+      {
+         var page = document.getElementsByClassName('ui-page-active')[0],
+             pageid = page ? page.id : "";
+
+         if (pageid === "main")
+         {
+            try
+            {
+               tizen.application.getCurrentApplication().exit();
+            }
+            catch (ignore)
+            {
+            }
+         }
+         else
+         {
+            window.history.back();
+         }
+      }
+   });
 }());
 </pre>
 
diff --git a/org.tizen.training/html/web/wearable_watch/first_app_watch_ww.htm b/org.tizen.training/html/web/wearable_watch/first_app_watch_ww.htm
index 7d8dbcf..82643cb 100644 (file)
--- a/org.tizen.training/html/web/wearable_watch/first_app_watch_ww.htm
+++ b/org.tizen.training/html/web/wearable_watch/first_app_watch_ww.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Your First Tizen Wearable Web Watch Application</title>  
+       <title>Creating Your First Tizen Wearable Web Watch Application</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -219,7 +219,7 @@
 <h2 id="run">Running Your Application</h2>
 
 <p>You can run the Web watch application on the <a href="../process/run_debug_app_w.htm#emulator">emulator</a> or a <a href="../process/run_debug_app_w.htm#target">real target device</a>.</p>
-  
+
       <div class="note">
         <strong>Note</strong>
         Since the Web Simulator does not support a circular UI, this topic does not cover the instructions for running the application on the Web Simulator.
@@ -258,15 +258,15 @@
 
 <p>If you have created multiple emulator instances, select the instance you want from the combo box in the toolbar before selecting to run the application. If you select an offline emulator, it is automatically launched when you select to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p>
 <p>In the <strong>Console</strong> view, you can see that the application is successfully installed. However, it does not run on the emulator screen until you change the watch face in the emulator <strong>Settings</strong> menu.</p>
-<p align="center"><img alt="Successful installation" src="../../images/watch_run_install_watch_ww.png" /></p>  
+<p align="center"><img alt="Successful installation" src="../../images/watch_run_install_watch_ww.png" /></p>
 </li>
 <li id="watchface">Change the watch face.
 <p>When a watch application is successfully installed on the emulator, the watch UI is visible in the emulator <strong>Clock</strong> menu.</p>
 <p>To change the watch face and make the watch application visible:</p>
 
-<p align="center"><img alt="Changing the watch face" src="../../images/watch_run_change_wn.png" /></p> 
+<p align="center"><img alt="Changing the watch face" src="../../images/watch_run_change_wn.png" /></p>
 
 <ol type="a">
 <li>If the emulator display has been switched off, activate it by pressing the <strong>Power</strong> key (in the bottom right corner of the emulator).</li>
@@ -333,7 +333,7 @@ cd tizen-sdk/tools
 <li>Run the application:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, select the device.</li>
-<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>. 
+<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>.
 
 <p align="center"><img src="../../images/app_run_ww_watch.png" alt="Running the application" /></p>
 
@@ -343,7 +343,7 @@ cd tizen-sdk/tools
 
 <p>If you have both a connected device and existing emulator instances, select the device from the combo box in the toolbar before selecting to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p>
 
 </li>
 <li>Confirm that the application launches in the target device.
@@ -351,7 +351,7 @@ cd tizen-sdk/tools
 </li>
 </ol>
 
-  
+
       <div class="note">
         <strong>Note</strong>
         The application is launched using the default debug run configuration. To create and use another configuration:
@@ -377,12 +377,12 @@ cd tizen-sdk/tools
 <p>To initialize the watch application:</p>
 <ol>
 <li>
-<p>To set the application configuration, use the <code>config.xml</code> file:</p> 
+<p>To set the application configuration, use the <code>config.xml</code> file:</p>
 
 
        <ul>
-       <li>By default, the BasicWatch sample has the application category defined as <code>&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot; /&gt;</code>.
-       <p>To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <code>&lt;tizen:category name=&quot;com.samsung.wmanager.WATCH_CLOCK&quot; /&gt;</code> instead.</p>
+       <li>By default, the BasicWatch sample has the application category defined as <code>&lt;tizen:category name="http://tizen.org/category/wearable_clock" /&gt;</code>.
+       <p>To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <code>&lt;tizen:category name="com.samsung.wmanager.WATCH_CLOCK" /&gt;</code> instead.</p>
                </li>
                <li>
        <p>To enable a custom UI for the <a href="../details/event_handling_w.htm#ambient">ambient mode</a>, the <code>ambient_support</code> attribute must be set to <code>enable</code>.</p>
@@ -390,16 +390,16 @@ cd tizen-sdk/tools
        </ul>
 
 <pre class="prettyprint">
-&lt;widget xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot; xmlns=&quot;http://www.w3.org/ns/widgets&quot;  
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;http://yourdomain/BasicWatch&quot; version=&quot;1.0.0&quot; viewmodes=&quot;maximized&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:application id=&quot;rko5hPHRgI.BasicWatch&quot; package=&quot;rko5hPHRgI&quot; required_version=&quot;2.3.1&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="highlight">ambient_support=&quot;enable&quot;</span>/&gt;
-&nbsp;&nbsp;&nbsp;<span class="highlight">&lt;tizen:category name=&quot;http://tizen.org/category/wearable_clock&quot;/&gt;</span>
+&lt;widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets"
+        id="http://yourdomain/BasicWatch" version="1.0.0" viewmodes="maximized"&gt;
+   &lt;tizen:application id="rko5hPHRgI.BasicWatch" package="rko5hPHRgI" required_version="2.3.1"
+                      <span class="highlight">ambient_support="enable"</span>/&gt;
+   <span class="highlight">&lt;tizen:category name="http://tizen.org/category/wearable_clock"/&gt;</span>
 
-&nbsp;&nbsp;&nbsp;&lt;!--Get timetick events, occuring once a minute to enable the UI to be updated--&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:privilege name=&quot;http://tizen.org/privilege/alarm&quot;/&gt;
+   &lt;!--Get timetick events, occuring once a minute to enable the UI to be updated--&gt;
+   &lt;tizen:privilege name="http://tizen.org/privilege/alarm"/&gt;
 
-&nbsp;&nbsp;&nbsp;&lt;tizen:setting background-support=&quot;disable&quot; encryption=&quot;disable&quot; hwkey-event=&quot;enable&quot;/&gt;
+   &lt;tizen:setting background-support="disable" encryption="disable" hwkey-event="enable"/&gt;
 &lt;/widget&gt;
 </pre>
 </li>
@@ -408,53 +408,53 @@ cd tizen-sdk/tools
 <p>Modify the <code>window.requestAnimationFrame()</code> method to make the application compatible with the main browsers:</p>
 <pre class="prettyprint">
 window.requestAnimationFrame = window.requestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;window.webkitRequestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;window.mozRequestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;window.oRequestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;window.msRequestAnimationFrame ||
-&nbsp;&nbsp;&nbsp;function(callback) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.setTimeout(callback, 1000 / 60);
-&nbsp;&nbsp;&nbsp;};</pre>
+   window.webkitRequestAnimationFrame ||
+   window.mozRequestAnimationFrame ||
+   window.oRequestAnimationFrame ||
+   window.msRequestAnimationFrame ||
+   function(callback)
+   {
+      'use strict';
+      window.setTimeout(callback, 1000 / 60);
+   };</pre>
 </li>
 <li>Initialize the canvas context and define the canvas area:
 <pre class="prettyprint">
-window.onload = function onLoad() 
+window.onload = function onLoad()
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
 
-&nbsp;&nbsp;&nbsp;canvas = document.querySelector(&#39;canvas&#39;);
-&nbsp;&nbsp;&nbsp;ctx = canvas.getContext(&#39;2d&#39;);
-&nbsp;&nbsp;&nbsp;clockRadius = document.body.clientWidth / 2;
+   canvas = document.querySelector('canvas');
+   ctx = canvas.getContext('2d');
+   clockRadius = document.body.clientWidth / 2;
 
-&nbsp;&nbsp;&nbsp;canvas.width = document.body.clientWidth;
-&nbsp;&nbsp;&nbsp;canvas.height = canvas.width;</pre>
+   canvas.width = document.body.clientWidth;
+   canvas.height = canvas.width;</pre>
 </li>
 <li>Define an event listener to detect back key events and time tick:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;/* Add eventListener for tizenhwkey */
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;tizenhwkey&#39;, function(e) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.keyName === &#39;back&#39;) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tizen.application.getCurrentApplication().exit();
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;catch (err) 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;Error: &#39;, err.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;});
-
-&nbsp;&nbsp;&nbsp;/* Add eventListener for timetick */
-&nbsp;&nbsp;&nbsp;window.addEventListener(&#39;timetick&#39;, function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;timetick is called&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ambientWatch();
-&nbsp;&nbsp;&nbsp;});
+   /* Add eventListener for tizenhwkey */
+   window.addEventListener('tizenhwkey', function(e)
+   {
+      if (e.keyName === 'back')
+      {
+         try
+         {
+            tizen.application.getCurrentApplication().exit();
+         }
+         catch (err)
+         {
+            console.error('Error: ', err.message);
+         }
+      }
+   });
+
+   /* Add eventListener for timetick */
+   window.addEventListener('timetick', function()
+   {
+      console.log("timetick is called");
+      ambientWatch();
+   });
 }
 </pre>
 </li>
@@ -468,23 +468,23 @@ window.onload = function onLoad()
 <li>
 <p>To define the application layout, use the <code>index.html</code> file.</p>
 
-<p>By default, the BasicWatch sample application layout contains only the main screen that displays the clock on a <a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element" target="_blank">canvas</a> element.</p> 
+<p>By default, the BasicWatch sample application layout contains only the main screen that displays the clock on a <a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element" target="_blank">canvas</a> element.</p>
 
 <pre class="prettyprint lang-html">
 &lt;head&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;utf-8&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&lt;meta name=&quot;description&quot; content=&quot;Basic Watch based on HTML canvas element&quot; /&gt;
-&nbsp;&nbsp;&nbsp;&lt;title&gt;BasicWatch&lt;/title&gt;
-&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot; /&gt;
+   &lt;meta charset="utf-8" /&gt;
+   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /&gt;
+   &lt;meta name="description" content="Basic Watch based on HTML canvas element" /&gt;
+   &lt;title&gt;BasicWatch&lt;/title&gt;
+   &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
-&nbsp;&nbsp;&nbsp;&lt;div id=&quot;box&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;canvas class=&quot;canvas&quot;&gt;&lt;/canvas&gt;
-&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
+   &lt;div id="box"&gt;
+      &lt;canvas class="canvas"&gt;&lt;/canvas&gt;
+   &lt;/div&gt;
+   &lt;script src="js/main.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
-</pre> 
+</pre>
 </li>
 <li>
 <p>To draw the watch face on the canvas, use the <code>main.js</code> file:</p>
@@ -492,162 +492,162 @@ window.onload = function onLoad()
 <li>
 <p>Create the clock in the middle of the canvas, and define the watch face style:</p>
 <pre class="prettyprint">
-function renderDots() 
+function renderDots()
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
 
-&nbsp;&nbsp;&nbsp;var dx = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = 0,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i = 1,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angle = null;
+   var dx = 0,
+       dy = 0,
+       i = 1,
+       angle = null;
 
-&nbsp;&nbsp;&nbsp;ctx.save();
-&nbsp;&nbsp;&nbsp;ctx.translate(canvas.width / 2, canvas.height / 2);
-&nbsp;&nbsp;&nbsp;ctx.beginPath();
-&nbsp;&nbsp;&nbsp;ctx.fillStyle = &#39;#999999&#39;;</pre>
+   ctx.save();
+   ctx.translate(canvas.width / 2, canvas.height / 2);
+   ctx.beginPath();
+   ctx.fillStyle = '#999999';</pre>
 </li>
 <li>Create 4 dots on the sides of the watch face and use the <code>fill()</code> method to style the dots:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;for (i = 1; i &lt;= 4; i++) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;angle = (i - 3) * (Math.PI * 2) / 4;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = clockRadius * 0.9 * Math.cos(angle);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = clockRadius * 0.9 * Math.sin(angle);
+   for (i = 1; i &lt;= 4; i++)
+   {
+      angle = (i - 3) * (Math.PI * 2) / 4;
+      dx = clockRadius * 0.9 * Math.cos(angle);
+      dy = clockRadius * 0.9 * Math.sin(angle);
 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.arc(dx, dy, 3, 0, 2 * Math.PI, false);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.fill();
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;ctx.closePath();</pre>
+      ctx.arc(dx, dy, 3, 0, 2 * Math.PI, false);
+      ctx.fill();
+   }
+   ctx.closePath();</pre>
 </li>
 <li>Create the center point:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ctx.beginPath();
+   ctx.beginPath();
 
-&nbsp;&nbsp;&nbsp;ctx.fillStyle = &#39;#ff9000&#39;;
-&nbsp;&nbsp;&nbsp;ctx.strokeStyle = &#39;#fff&#39;;
-&nbsp;&nbsp;&nbsp;ctx.lineWidth = 4;
+   ctx.fillStyle = '#ff9000';
+   ctx.strokeStyle = '#fff';
+   ctx.lineWidth = 4;
 
-&nbsp;&nbsp;&nbsp;ctx.arc(0, 0, 7, 0, 2 * Math.PI, false);
-&nbsp;&nbsp;&nbsp;ctx.fill();
-&nbsp;&nbsp;&nbsp;ctx.stroke();
-&nbsp;&nbsp;&nbsp;ctx.closePath();
+   ctx.arc(0, 0, 7, 0, 2 * Math.PI, false);
+   ctx.fill();
+   ctx.stroke();
+   ctx.closePath();
 }</pre>
 </li>
 </ol>
 </li>
 <li><p>To display the actual time on the watch face, create the clock needles and set their position using the <code>main.js</code> file.</p>
 <p>Render the clock needles:</p>
-<ol type="a"> 
+<ol type="a">
 <li>The needles can be created using the <code>renderNeedle()</code> method.
 <p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <code>moveTo()</code> method. To assign the rest of the points of the triangle or polygon, use the <code>lineTo()</code> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <code>lineTo()</code> method.</p>
 <pre class="prettyprint">
-function renderNeedle(angle, radius) 
+function renderNeedle(angle, radius)
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-&nbsp;&nbsp;&nbsp;ctx.save();
-&nbsp;&nbsp;&nbsp;ctx.rotate(angle);
-&nbsp;&nbsp;&nbsp;ctx.beginPath();
-&nbsp;&nbsp;&nbsp;ctx.lineWidth = 4;
-&nbsp;&nbsp;&nbsp;ctx.strokeStyle = &#39;#fff&#39;;
-&nbsp;&nbsp;&nbsp;ctx.moveTo(6, 0);
-&nbsp;&nbsp;&nbsp;ctx.lineTo(radius, 0);
-&nbsp;&nbsp;&nbsp;ctx.closePath();
-&nbsp;&nbsp;&nbsp;ctx.stroke();
-&nbsp;&nbsp;&nbsp;ctx.closePath();
-&nbsp;&nbsp;&nbsp;ctx.restore();
+   'use strict';
+   ctx.save();
+   ctx.rotate(angle);
+   ctx.beginPath();
+   ctx.lineWidth = 4;
+   ctx.strokeStyle = '#fff';
+   ctx.moveTo(6, 0);
+   ctx.lineTo(radius, 0);
+   ctx.closePath();
+   ctx.stroke();
+   ctx.closePath();
+   ctx.restore();
 }</pre>
 </li>
 <li>Create the hour needle using the <code>renderHourNeedle()</code> method:
 <pre class="prettyprint">
-function renderHourNeedle(hour) 
+function renderHourNeedle(hour)
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
 
-&nbsp;&nbsp;&nbsp;var angle = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radius = null;
+   var angle = null,
+       radius = null;
 
-&nbsp;&nbsp;&nbsp;angle = (hour - 3) * (Math.PI * 2) / 12;
-&nbsp;&nbsp;&nbsp;radius = clockRadius * 0.55;
-&nbsp;&nbsp;&nbsp;renderNeedle(angle, radius);
+   angle = (hour - 3) * (Math.PI * 2) / 12;
+   radius = clockRadius * 0.55;
+   renderNeedle(angle, radius);
 }</pre>
 </li>
 <li>Create the minute needle using the <code>renderMinuteNeedle()</code> method:
 <pre class="prettyprint">
 function renderMinuteNeedle(minute)
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
 
-&nbsp;&nbsp;&nbsp;var angle = null,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radius = null;
+   var angle = null,
+       radius = null;
 
-&nbsp;&nbsp;&nbsp;angle = (minute - 15) * (Math.PI * 2) / 60;
-&nbsp;&nbsp;&nbsp;radius = clockRadius * 0.75;
-&nbsp;&nbsp;&nbsp;renderNeedle(angle, radius);
+   angle = (minute - 15) * (Math.PI * 2) / 60;
+   radius = clockRadius * 0.75;
+   renderNeedle(angle, radius);
 }</pre>
 </li>
 </ol>
 </li>
 <li>Indicate the current time in the <code>main.js</code> file:
 <ol>
-<li>Determine the current time using the <code>new Date()</code> method. 
+<li>Determine the current time using the <code>new Date()</code> method.
 <p>To point the needles accurately, define variables for the current hour and minute.</p>
 <pre class="prettyprint">
-function getDate() 
+function getDate()
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-
-&nbsp;&nbsp;&nbsp;var date;
-&nbsp;&nbsp;&nbsp;try 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date = tizen.time.getCurrentDateTime();
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;catch (err) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;Error: &#39;, err.message);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date = new Date();
-&nbsp;&nbsp;&nbsp;}
-
-&nbsp;&nbsp;&nbsp;return date;
+   'use strict';
+
+   var date;
+   try
+   {
+      date = tizen.time.getCurrentDateTime();
+   }
+   catch (err)
+   {
+      console.error('Error: ', err.message);
+      date = new Date();
+   }
+
+   return date;
 }
 
-function watch() 
+function watch()
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
 
-&nbsp;&nbsp;&nbsp;if (isAmbientMode === true) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
+   if (isAmbientMode === true)
+   {
+      return;
+   }
 
-&nbsp;&nbsp;&nbsp;var date = getDate(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hours = date.getHours(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minutes = date.getMinutes(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seconds = date.getSeconds(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hour = hours + minutes / 60,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minute = minutes + seconds / 60,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nextMove = 1000 - date.getMilliseconds();</pre>
+   var date = getDate(),
+       hours = date.getHours(),
+       minutes = date.getMinutes(),
+       seconds = date.getSeconds(),
+       hour = hours + minutes / 60,
+       minute = minutes + seconds / 60,
+       nextMove = 1000 - date.getMilliseconds();</pre>
 </li>
 <li>Every time a new time is indicated, erase the previous time (the previously positioned needles) using the <code>clearRect()</code> method:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);</pre>
+   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);</pre>
 </li>
 <li>Point the clock needles to display the current time:
 <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;renderDots();
-&nbsp;&nbsp;&nbsp;renderHourNeedle(hour);
-&nbsp;&nbsp;&nbsp;renderMinuteNeedle(minute);
-
-&nbsp;&nbsp;&nbsp;ctx.restore();
-&nbsp;&nbsp;&nbsp;setTimeout(function() 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.requestAnimationFrame(watch);
-&nbsp;&nbsp;&nbsp;}, nextMove);
+   renderDots();
+   renderHourNeedle(hour);
+   renderMinuteNeedle(minute);
+
+   ctx.restore();
+   setTimeout(function()
+   {
+      window.requestAnimationFrame(watch);
+   }, nextMove);
 }</pre>
 </li>
 
 </ol>
 </li>
-</ol>  
+</ol>
 
 
 <h3 id="ambient">Using the Ambient Mode</h3>
@@ -658,37 +658,37 @@ function watch()
       <div class="note">
         <strong>Note</strong>
         To use the ambient mode, the user must enable it in the device settings. In addition, in the Gear S2 device, the ambient mode activates only when you are wearing the watch on the wrist.
-        
+
         <p>Since Tizen 2.3.2, some devices introduce a high color mode for the ambient mode. In the high color mode, you can use more colors (usually, 24-bit color) for drawing the ambient mode UI. To check whether the device supports the high color mode, use the following code:</p>
 
 <pre class="prettyprint">
 bool support;
 int ret;
 
-ret = system_info_get_platform_bool(&quot;http://tizen.org/feature/screen.always_on.high_color&quot;, &amp;support);
+ret = system_info_get_platform_bool("http://tizen.org/feature/screen.always_on.high_color", &amp;support);
 </pre>
     </div>
-  
+
 <p>To use the ambient mode:</p>
 <ol>
 <li>Define an event listener for the ambient mode:
 <pre class="prettyprint">
 /* Add eventListener for ambientmodechanged */
-window.addEventListener(&#39;ambientmodechanged&#39;, function(e) 
+window.addEventListener('ambientmodechanged', function(e)
 {
-&nbsp;&nbsp;&nbsp;console.log(&quot;ambientmodechanged: &quot; + e.detail.ambientMode);
-&nbsp;&nbsp;&nbsp;if (e.detail.ambientMode === true) 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Render ambient mode */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isAmbientMode = true;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ambientWatch();
-&nbsp;&nbsp;&nbsp;} 
-&nbsp;&nbsp;&nbsp;else 
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Render normal mode */
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isAmbientMode = false;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.requestAnimationFrame(watch);
-&nbsp;&nbsp;&nbsp;}
+   console.log("ambientmodechanged: " + e.detail.ambientMode);
+   if (e.detail.ambientMode === true)
+   {
+      /* Render ambient mode */
+      isAmbientMode = true;
+      ambientWatch();
+   }
+   else
+   {
+      /* Render normal mode */
+      isAmbientMode = false;
+      window.requestAnimationFrame(watch);
+   }
 });
 
 /* Normal mode */
@@ -700,48 +700,48 @@ window.requestAnimationFrame(watch);
 
 <li>Create the ambient mode dots:
 <pre class="prettyprint">
-function renderAmbientDots() 
+function renderAmbientDots()
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
+   'use strict';
+
+   ctx.save();
 
-&nbsp;&nbsp;&nbsp;ctx.save();
+   ctx.translate(canvas.width / 2, canvas.height / 2);
 
-&nbsp;&nbsp;&nbsp;ctx.translate(canvas.width / 2, canvas.height / 2);
-       
-&nbsp;&nbsp;&nbsp;ctx.beginPath();
+   ctx.beginPath();
 
-&nbsp;&nbsp;&nbsp;ctx.fillStyle = &#39;#000000&#39;;
-&nbsp;&nbsp;&nbsp;ctx.strokeStyle = &#39;#fff&#39;;
-&nbsp;&nbsp;&nbsp;ctx.lineWidth = 4;
+   ctx.fillStyle = '#000000';
+   ctx.strokeStyle = '#fff';
+   ctx.lineWidth = 4;
 
-&nbsp;&nbsp;&nbsp;ctx.arc(0, 0, 7, 0, 2 * Math.PI, false);
-&nbsp;&nbsp;&nbsp;ctx.fill();
-&nbsp;&nbsp;&nbsp;ctx.stroke();
-&nbsp;&nbsp;&nbsp;ctx.closePath();
+   ctx.arc(0, 0, 7, 0, 2 * Math.PI, false);
+   ctx.fill();
+   ctx.stroke();
+   ctx.closePath();
 }
 </pre>
 </li>
 <li>Indicate time in the ambient mode:
 <pre class="prettyprint">
-function ambientWatch() 
+function ambientWatch()
 {
-&nbsp;&nbsp;&nbsp;&#39;use strict&#39;;
-&nbsp;&nbsp;&nbsp;/* Get the current time */
-&nbsp;&nbsp;&nbsp;var date = getDate(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hours = date.getHours(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minutes = date.getMinutes(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seconds = date.getSeconds(),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hour = hours + minutes / 60,
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minute = minutes + seconds / 60;
-
-&nbsp;&nbsp;&nbsp;/* Erase the previous time */
-&nbsp;&nbsp;&nbsp;ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
-&nbsp;&nbsp;&nbsp;renderAmbientDots();
-&nbsp;&nbsp;&nbsp;renderHourNeedle(hour);
-&nbsp;&nbsp;&nbsp;renderMinuteNeedle(minute);
-
-&nbsp;&nbsp;&nbsp;ctx.restore();
+   'use strict';
+   /* Get the current time */
+   var date = getDate(),
+       hours = date.getHours(),
+       minutes = date.getMinutes(),
+       seconds = date.getSeconds(),
+       hour = hours + minutes / 60,
+       minute = minutes + seconds / 60;
+
+   /* Erase the previous time */
+   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+   renderAmbientDots();
+   renderHourNeedle(hour);
+   renderMinuteNeedle(minute);
+
+   ctx.restore();
 }
 </pre>
 </li>
diff --git a/org.tizen.training/html/web/wearable_widget/first_app_widget_ww.htm b/org.tizen.training/html/web/wearable_widget/first_app_widget_ww.htm
index 3b557fd..1e5e7e6 100644 (file)
--- a/org.tizen.training/html/web/wearable_widget/first_app_widget_ww.htm
+++ b/org.tizen.training/html/web/wearable_widget/first_app_widget_ww.htm
@@ -5,13 +5,13 @@
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
        <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> 
+       <script type="text/javascript" src="../../scripts/snippet.js"></script>
        <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
 
-       <title>Creating Your First Tizen Wearable Web Widget Application</title>  
+       <title>Creating Your First Tizen Wearable Web Widget Application</title>
 </head>
 
 <body onload="prettyPrint()" style="overflow: auto;">
@@ -39,7 +39,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-       
+
 <h1>Creating Your First Tizen Wearable Web Widget Application</h1>
 
 <p><strong>Welcome to Tizen wearable Web widget application development!</strong></p>
@@ -47,10 +47,10 @@
 <p>A wearable Web application is basically a Web site stored on a wearable device. You can create it using Web-native languages, such as HTML5, CSS, and JavaScript.</p>
 
 <p>A widget application is one of the Tizen application types. It can be shown by specific UI applications (such as the home screen and lock screen) that can contain widget applications.</p>
- 
-<p align="center"><strong>Figure: Widget application in a wearable device</strong></p> 
-<p align="center"><img alt="Widget application in a wearable device" src="../../images/widget_app_wearable_widget.png" /></p>  
- 
+
+<p align="center"><strong>Figure: Widget application in a wearable device</strong></p>
+<p align="center"><img alt="Widget application in a wearable device" src="../../images/widget_app_wearable_widget.png" /></p>
+
 
 <p>Study the following instructions to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen Studio and installing the created application on the emulator or target device. With the instructions, you can create and run a basic wearable Web widget application (a Web widget), which displays some text on the screen with no user interaction:</p>
 
@@ -163,15 +163,15 @@
 <p>You can enable or disable these validators in the application preferences: go to <strong>Window &gt; Preferences &gt; Tizen Studio &gt; WebWidget</strong>, and check the applicable check boxes.</p>
 
 <p align="center"><strong>Figure: Validation preferences</strong></p>
-<p align="center"><img alt="Validation preferences" src="../../images/widget_validate_pref_w.png" /></p> 
+<p align="center"><img alt="Validation preferences" src="../../images/widget_validate_pref_w.png" /></p>
+
+<p>The validation is performed automatically when the project or package is built, or when the application is run.</p>
 
-<p>The validation is performed automatically when the project or package is built, or when the application is run.</p> 
- 
 <p>When the validation is complete, its results are shown in the <strong>Problems</strong> view. If the view is not displayed, select it from <strong>Window &gt; Show view &gt; Problems</strong> (keyboard shortcut: <strong>Shift + Alt + Q + X</strong>).</p>
 
 <p align="center"><strong>Figure: Validation results</strong></p>
-<p align="center"><img alt="Validation results" src="../../images/widget_validate_result_w.png" /></p> 
- 
+<p align="center"><img alt="Validation results" src="../../images/widget_validate_result_w.png" /></p>
+
 <h3 id="configuration" name="configuration">Managing the Application Configuration</h3>
 
 <p>To view and modify the application configuration:</p>
@@ -259,8 +259,8 @@
         <strong>Note</strong>
         Since the Web Simulator does not support a circular UI, this topic does not cover the instructions for running the application on the Web Simulator.
     </div>
-       
-       
+
+
 <h3 id="emulator">Running on the Emulator</h3>
 
 <p>To run the application on the emulator:</p>
@@ -294,12 +294,12 @@
 <li>Click the run icon in the toolbar.</li></ul>
 <p>If you have created multiple emulator instances, select the instance you want from the combo box in the toolbar before selecting to run the application. If you select an offline emulator, it is automatically launched when you select to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the emulator to use" /></p>
 </li>
 
 <li>Confirm that the application launches on the emulator.
 <p align="center"><img src="../../images/emulator_running_ww_widget.png" alt="Application running in the emulator" /></p>
-  
+
       <div class="note">
         <strong>Note</strong>
         If the emulator display has switched off, you cannot see the application launch. To switch the display on, click the <strong>Power</strong> key (in the right bottom corner of the emulator).
@@ -312,16 +312,16 @@
 <li>Swipe the home screen to the right and select <strong>+</strong>.</li>
 <li>Scroll down until you see your widget application, and select it.</li>
 </ol>
-<p align="center"><img alt="Adding to home screen" src="../../images/widget_run_add_home_wn.png" /></p> 
+<p align="center"><img alt="Adding to home screen" src="../../images/widget_run_add_home_wn.png" /></p>
 
 <p>You can see the added widget on the home screen. To access the widget from the home screen, swipe right.</p>
-<p align="center"><img alt="Home screen widget" src="../../images/widget_run_home_wn.png" /></p> 
+<p align="center"><img alt="Home screen widget" src="../../images/widget_run_home_wn.png" /></p>
 <p>While the application is running, the <strong>Log</strong> view in the Tizen Studio shows the log, debug, and exception messages from the methods defined in the log macros. To see the view, in the Tizen Studio menu, go to <strong>Window &gt; Show View &gt; Log</strong>.</p>
 </li>
 
 </ol>
 </li></ol>
- 
+
 <p>For more information on using the emulator features, see <a href="../../../../org.tizen.studio/html/common_tools/emulator_control_panel.htm">Using Emulator Control Keys, Menu, and Panel</a> and <a href="../../../../org.tizen.studio/html/common_tools/emulator_features.htm">Using Extended Emulator Features</a>.</p>
 <h3 id="target">Running on a Target Device</h3>
 
@@ -374,7 +374,7 @@ cd tizen-sdk/tools
 <li>Run the application:
 <ol type="a">
 <li>In the <strong>Connection Explorer</strong> view, select the device.</li>
-<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>. 
+<li>In <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As &gt; Tizen Web Application</strong>.
 
 <p align="center"><img src="../../images/app_run_ww_widget.png" alt="Running the application" /></p>
 
@@ -384,7 +384,7 @@ cd tizen-sdk/tools
 
 <p>If you have both a connected device and existing emulator instances, select the device from the combo box in the toolbar before selecting to run the application.</p>
 
-<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p> 
+<p align="center"><img src="../../images/app_run_multiple_emulators.png" alt="Selecting the device to use" /></p>
 
 </li>
 <li>Confirm that the application launches in the target device.
@@ -400,7 +400,7 @@ cd tizen-sdk/tools
         <li>In the <code>Run Configurations</code> window, click the <code>New Launch Configuration</code> icon (<img alt="New Launch Configuration icon" src="../../images/run_new_config_wn.png" />), define the configuration details, and launch the application by clicking <code>Run</code>.
                 <p align="center"><img alt="Run Configurations window" src="../../images/run_configurations_w_widget.png" /></p></li>
         </ol>
-    </div>  
+    </div>
 
 <p>If you want to run your application without a local device, see <a href="../../../../org.tizen.studio/html/common_tools/connection_explorer_view.htm">Managing and Connecting Devices for Testing</a>.</p>
 </li>
@@ -421,20 +421,20 @@ cd tizen-sdk/tools
 <p>The file include various information for the widget application. The following code shows an example of the widget content in the file. The <code>&lt;tizen:app-widget&gt;</code> element indicates the widget settings. If the widget requires privileges, add them to the <code>config.xml</code> file as well.</p>
 
 <pre class="prettyprint">
-&lt;?xml version="1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
-&lt;widget xmlns:tizen=&quot;http://tizen.org/ns/widgets&quot; xmlns=&quot;http://www.w3.org/ns/widgets&quot; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;http://yourdomain/HelloWebWidget&quot; version=&quot;1.0.0&quot;&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:app-widget id=&quot;0lVPHbX9t6.HelloWebWidget.HelloWebWidget&quot; primary=&quot;true&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-label&gt;Hello Web Widget!&lt;/tizen:widget-label&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-content src=&quot;index.html&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tizen:widget-size preview=&quot;preview.png&quot;&gt;2x2&lt;/tizen:widget-size&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tizen:widget-content&gt;
-&nbsp;&nbsp;&nbsp;&lt;/tizen:app-widget&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:application id=&quot;0lVPHbX9t6.HelloWebWidget&quot; package=&quot;0lVPHbX9t6&quot; required_version=&quot;2.3.2&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;content src=&quot;index.html&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;feature name=&quot;http://tizen.org/feature/screen.size.normal&quot;/&gt;
-&nbsp;&nbsp;&nbsp;&lt;name&gt;HelloWebWidget&lt;/name&gt;
-&nbsp;&nbsp;&nbsp;&lt;tizen:profile name=&quot;wearable&quot;/&gt;
+&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets"
+        id="http://yourdomain/HelloWebWidget" version="1.0.0"&gt;
+   &lt;tizen:app-widget id="0lVPHbX9t6.HelloWebWidget.HelloWebWidget" primary="true"&gt;
+      &lt;tizen:widget-label&gt;Hello Web Widget!&lt;/tizen:widget-label&gt;
+      &lt;tizen:widget-content src="index.html"&gt;
+         &lt;tizen:widget-size preview="preview.png"&gt;2x2&lt;/tizen:widget-size&gt;
+      &lt;/tizen:widget-content&gt;
+   &lt;/tizen:app-widget&gt;
+   &lt;tizen:application id="0lVPHbX9t6.HelloWebWidget" package="0lVPHbX9t6" required_version="2.3.2"/&gt;
+   &lt;content src="index.html"/&gt;
+   &lt;feature name="http://tizen.org/feature/screen.size.normal"/&gt;
+   &lt;name&gt;HelloWebWidget&lt;/name&gt;
+   &lt;tizen:profile name="wearable"/&gt;
 &lt;/widget&gt;
 </pre>
 </li>
@@ -456,41 +456,41 @@ cd tizen-sdk/tools
 <p>The widget application consists of the following folder architecture:</p>
 <pre class="prettyprint">
 widget
-&nbsp;&nbsp;&nbsp;css
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style.css    
-&nbsp;&nbsp;&nbsp;images
-&nbsp;&nbsp;&nbsp;js
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main.js
-&nbsp;&nbsp;&nbsp;config.xml
-&nbsp;&nbsp;&nbsp;preview.png
-&nbsp;&nbsp;&nbsp;index.html
+   css
+      style.css
+   images
+   js
+      main.js
+   config.xml
+   preview.png
+   index.html
 </pre>
-<p>You can customize the <code>index.html</code>, <code>style.css</code>, and <code>main.js</code> files. For example, if a JS-based animation effect is needed, add the <code>requestAnimationFrame()</code>  method or some other animation library to the JS file. Similarly, to change the UI elements&#39; visual looks or add CSS-based effects (including animation), modify the CSS file.</p>
+<p>You can customize the <code>index.html</code>, <code>style.css</code>, and <code>main.js</code> files. For example, if a JS-based animation effect is needed, add the <code>requestAnimationFrame()</code>  method or some other animation library to the JS file. Similarly, to change the UI elements' visual looks or add CSS-based effects (including animation), modify the CSS file.</p>
 
 <p>To create the widget application:</p>
 
 <ol>
 <li>Start and initialize the widget application with the <code>index.html</code> file.
-<p>The starting point is defined in the <code>config.xml</code> file&#39;s <code>content src</code> field, which is set to <code>index.html</code>.</p> 
+<p>The starting point is defined in the <code>config.xml</code> file's <code>content src</code> field, which is set to <code>index.html</code>.</p>
 </li>
 
 <li>The <code>index.html</code> file includes the element structure of the widget application using HTML elements. In addition, it imports the JavaScript and CSS files.
 <pre class="prettyprint">
 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
-&nbsp;&nbsp;&nbsp;&lt;head&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&quot;UTF-8&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
-&nbsp;&nbsp;&nbsp;&lt;/head&gt;
-&nbsp;&nbsp;&nbsp;&lt;body&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;page&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&quot;container&quot;&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;content-text&quot;&gt;Hello, Web Widget!&lt;/span&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-&nbsp;&nbsp;&nbsp;&lt;/body&gt;
-&lt;/html&gt; 
+   &lt;head&gt;
+      &lt;meta charset="UTF-8"&gt;
+      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
+      &lt;script src="js/main.js"&gt;&lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;div id="page"&gt;
+         &lt;div id="container"&gt;
+            &lt;span id="content-text"&gt;Hello, Web Widget!&lt;/span&gt;
+         &lt;/div&gt;
+      &lt;/div&gt;
+   &lt;/body&gt;
+&lt;/html&gt;
 </pre>
 </li>
 <li>The <code>style.css</code> file indicates the style properties of various HTML elements.
@@ -498,35 +498,35 @@ widget
 <pre class="prettyprint">
 html, body
 {
-&nbsp;&nbsp;&nbsp;width: 100%;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;margin: 0;
-&nbsp;&nbsp;&nbsp;padding: 0;
+   width: 100%;
+   height: 100%;
+   margin: 0;
+   padding: 0;
 }
 #page
 {
-&nbsp;&nbsp;&nbsp;background-color: #000;
-&nbsp;&nbsp;&nbsp;color: #fff;
-&nbsp;&nbsp;&nbsp;height: 100%;
-&nbsp;&nbsp;&nbsp;position: relative;
-&nbsp;&nbsp;&nbsp;width: 100%;
+   background-color: #000;
+   color: #fff;
+   height: 100%;
+   position: relative;
+   width: 100%;
 }
 #container
 {
-&nbsp;&nbsp;&nbsp;left: 50%;
-&nbsp;&nbsp;&nbsp;position: absolute;
-&nbsp;&nbsp;&nbsp;top: 50%;
-&nbsp;&nbsp;&nbsp;transform: translate(-50%, -50%);
+   left: 50%;
+   position: absolute;
+   top: 50%;
+   transform: translate(-50%, -50%);
 }
 #content-text
 {
-&nbsp;&nbsp;&nbsp;font-weight: bold;
-&nbsp;&nbsp;&nbsp;font-size: 40px;
+   font-weight: bold;
+   font-size: 40px;
 }
 </pre>
 </li>
 <li>The <code>main.js</code> file contains the JS-based functions for the widget.
-<p>There are many JS-based functions, such as asynchronous functions, JS library, and effects. You can add various features to the widget application using JS.</p> 
+<p>There are many JS-based functions, such as asynchronous functions, JS library, and effects. You can add various features to the widget application using JS.</p>
 </li>
 </ol>
 
Domain: SDK / Documents;